kui-basic 0.0.1

package/dist/index.es.js

@@ -0,0 +1,3495 @@
+import React, { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import InputMask from 'react-input-mask';
+import { scroller, Events, Link } from 'react-scroll';
+
+var colors = {
+  primary: {
+    main: "#ED713C",
+    pressed: "#D24C13",
+    hover: "#EA5A1D",
+    light: "#FCEAE2",
+    light2: "#FEF7F3"
+  },
+  secondary: {
+    main: "#18191F",
+    gray60: "#474A57",
+    gray50: "#7F8285",
+    gray40: "#949494",
+    gray30: "#BFBFBF",
+    gray15: "#EAECEF",
+    white: "#FFFFFF",
+    light: "#C4C4C4",
+    disabled: "#A6AEBC"
+  },
+  background: {
+    main: "#FBFBFD",
+    light2: "#F7F8F9",
+    light3: "#F2F3F5"
+  },
+  success: {
+    green70: "#259E58",
+    green60: "#23A65A",
+    main: "#27AE60",
+    green10: "#EAFCF7",
+    green5: "#F0FDF9"
+  },
+  error: {
+    red70: "#D03C1A",
+    red60: "#DA421F",
+    main: "#EB4620",
+    red10: "#FCE3DE",
+    red5: "#FDF0ED"
+  },
+  info: {
+    blue70: "#0098B6",
+    blue60: "#009CBB",
+    main: "#00ABCD",
+    blue10: "#D9F2F8",
+    blue5: "#E5F7FA"
+  },
+  purple: {
+    purple70: "#914BD2",
+    purple60: "#974EDB",
+    main: "#9B51E0",
+    purple10: "#F0E5FA",
+    purple5: "#F7F1FD"
+  }
+};
+
+var shadows = {
+  shadow1: "0px 5px 16px rgba(0, 0, 0, 0.1)",
+  shadow2: "0px 12px 16px rgba(0, 0, 0, 0.08)",
+  shadow3: "0px 26px 34px rgba(0, 0, 0, 0.1)",
+  shadow4: "0px 10px 20px rgba(0, 0, 0, 0.1)"
+};
+
+var breakpoints = {
+  xxs: 375,
+  xs: 600,
+  sm: 900,
+  md: 1200,
+  lg: 1440,
+  xl: 1536
+};
+
+var theme = {
+  palette: colors,
+  breakpoints: breakpoints,
+  shadows: shadows
+};
+
+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 _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+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 _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _toArray(arr) {
+  return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+
+  var _s, _e;
+
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+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 _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.");
+}
+
+var _excluded$r = ["size", "children", "color", "uppercase", "disableUserSelect", "className", "align"];
+var HeadingSizes = {
+  hero: "h1",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4"
+};
+
+function Heading(props) {
+  var size = props.size,
+      children = props.children,
+      color = props.color,
+      uppercase = props.uppercase,
+      disableUserSelect = props.disableUserSelect,
+      className = props.className,
+      align = props.align,
+      otherProps = _objectWithoutProperties(props, _excluded$r);
+
+  var Tag = "".concat(HeadingSizes[size]);
+  return /*#__PURE__*/React.createElement(Tag, _extends({
+    className: classNames("KUI-Heading", "KUI-Heading_".concat(size), "KUI-Heading_align-".concat(align), "KUI-color_".concat(color), uppercase && "KUI-text_uppercase", disableUserSelect && "KUI-text_disableUserSelect", className)
+  }, otherProps), children);
+}
+
+Heading.defaultProps = {
+  size: "h1",
+  color: "main",
+  uppercase: false,
+  disableUserSelect: false
+};
+Heading.propTypes = {
+  size: PropTypes.oneOf(["hero", "h1", "h2", "h3", "h4"]),
+  uppercase: PropTypes.bool,
+  disableUserSelect: PropTypes.bool,
+  color: PropTypes.oneOf(["main", "gray60", "gray50", "gray40", "white", "brand"])
+};
+
+var _excluded$q = ["children", "color", "size", "weight", "uppercase", "disableUserSelect", "className", "align"];
+
+function Caption(props) {
+  var children = props.children,
+      color = props.color,
+      size = props.size,
+      weight = props.weight,
+      uppercase = props.uppercase,
+      disableUserSelect = props.disableUserSelect,
+      className = props.className,
+      align = props.align,
+      otherProps = _objectWithoutProperties(props, _excluded$q);
+
+  return /*#__PURE__*/React.createElement("p", _extends({
+    className: classNames("KUI-Caption", "KUI-Caption_".concat(size), "KUI-color_".concat(color), "KUI-weight_".concat(weight), "KUI-Caption_align-".concat(align), uppercase && "KUI-text_uppercase", disableUserSelect && "KUI-text_disableUserSelect", className)
+  }, otherProps), children);
+}
+
+Caption.defaultProps = {
+  size: "m",
+  weight: 400,
+  uppercase: false,
+  color: "main",
+  disableUserSelect: false
+};
+Caption.displayName = "Caption";
+Caption.propTypes = {
+  size: PropTypes.oneOf(["xs", "sm", "s", "m", "l"]),
+  weight: PropTypes.oneOf([400, 500, 600]),
+  color: PropTypes.oneOf(["main", "gray60", "gray50", "gray40", "white", "brand"]),
+  uppercase: PropTypes.bool,
+  disableUserSelect: PropTypes.bool
+};
+
+var _excluded$p = ["children", "size", "color", "uppercase", "disableUserSelect", "weight", "className"];
+
+function Text(props) {
+  var children = props.children,
+      size = props.size,
+      color = props.color,
+      uppercase = props.uppercase,
+      disableUserSelect = props.disableUserSelect,
+      weight = props.weight,
+      className = props.className,
+      otherProps = _objectWithoutProperties(props, _excluded$p);
+
+  return /*#__PURE__*/React.createElement("p", _extends({
+    className: classNames("KUI-Text", "KUI-Text_".concat(size), "KUI-color_".concat(color), "KUI-weight_".concat(weight), uppercase && "KUI-text_uppercase", disableUserSelect && "KUI-text_disableUserSelect", className)
+  }, otherProps), children);
+}
+
+Text.defaultProps = {
+  size: "s",
+  color: "main",
+  uppercase: false,
+  disableUserSelect: false,
+  weight: 400
+};
+Text.propTypes = {
+  size: PropTypes.oneOf(["xs", "s", "m"]),
+  weight: PropTypes.oneOf([400, 500, 600]),
+  color: PropTypes.oneOf(["main", "gray60", "gray50", "gray40", "white", "brand"]),
+  uppercase: PropTypes.bool,
+  disableUserSelect: PropTypes.bool
+};
+
+var _excluded$o = ["children", "variant", "size", "className", "fullWidth", "isCircle", "captionSize", "disabledStyle", "border", "startIcon", "endIcon"];
+var Button = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      variant = props.variant,
+      size = props.size,
+      className = props.className,
+      fullWidth = props.fullWidth,
+      isCircle = props.isCircle,
+      captionSize = props.captionSize,
+      disabledStyle = props.disabledStyle,
+      border = props.border,
+      startIcon = props.startIcon,
+      endIcon = props.endIcon,
+      buttonProps = _objectWithoutProperties(props, _excluded$o);
+
+  return /*#__PURE__*/React.createElement("button", _extends({
+    ref: ref,
+    className: classNames("KUI-Button", "KUI-Button-".concat(size), "KUI-Button-".concat(variant), fullWidth && "KUI-Button_full-width", isCircle && "KUI-Button_is-circle", border && "KUI-Button_border-".concat(border), buttonProps.disabled && disabledStyle, className)
+  }, buttonProps), isCircle ? /*#__PURE__*/React.createElement("div", {
+    className: "KUI-Button_is-circle_container"
+  }, children) : /*#__PURE__*/React.createElement("div", {
+    className: classNames((startIcon || endIcon) && "KUI-Button_icon-container")
+  }, startIcon && /*#__PURE__*/React.createElement("span", {
+    className: "KUI-Button_start-icon"
+  }, startIcon), /*#__PURE__*/React.createElement(Caption, {
+    size: captionSize,
+    weight: 600,
+    className: "KUI-Button-text"
+  }, children), endIcon && /*#__PURE__*/React.createElement("span", {
+    className: "KUI-Button_end-icon"
+  }, endIcon)));
+});
+Button.defaultProps = {
+  variant: "primary",
+  size: "m",
+  fullWidth: false,
+  endIcon: null,
+  startIcon: null,
+  disabled: false,
+  isCircle: false,
+  captionSize: "s",
+  border: null
+};
+Button.propTypes = {
+  variant: PropTypes.oneOf(["primary", "orange", "white", "whiteWithOrangeHover", "whiteWithBrand", "blur", "whiteWithGray", "grayLightWithBorder", "grayLight", "green", "red", "transparent"]),
+  size: PropTypes.oneOf(["xs", "s", "m", "l"]),
+  fullWidth: PropTypes.bool,
+  endIcon: PropTypes.element,
+  startIcon: PropTypes.element,
+  disabled: PropTypes.bool,
+  isCircle: PropTypes.bool,
+  captionSize: PropTypes.oneOf(["xs", "sm", "s", "m", "l"]),
+  border: PropTypes.oneOf(["brand", "lightGray", "lightOrange"])
+};
+Button.displayName = "Button";
+
+var ErrorIcon = function ErrorIcon(_ref) {
+  var width = _ref.width,
+      height = _ref.height;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-label": "error"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.99935 15.3334C12.0494 15.3334 15.3327 12.0502 15.3327 8.00008C15.3327 3.94999 12.0494 0.666748 7.99935 0.666748C3.94926 0.666748 0.666016 3.94999 0.666016 8.00008C0.666016 12.0502 3.94926 15.3334 7.99935 15.3334ZM7.99935 13.3334C10.9449 13.3334 13.3327 10.9456 13.3327 8.00008C13.3327 5.05456 10.9449 2.66675 7.99935 2.66675C5.05383 2.66675 2.66602 5.05456 2.66602 8.00008C2.66602 10.9456 5.05383 13.3334 7.99935 13.3334ZM9.52795 5.52868C9.78829 5.26833 10.2104 5.26833 10.4708 5.52868C10.7311 5.78903 10.7311 6.21114 10.4708 6.47149L8.94216 8.00008L10.4708 9.52868C10.7311 9.78903 10.7311 10.2111 10.4708 10.4715C10.2104 10.7318 9.78829 10.7318 9.52795 10.4715L7.99935 8.94289L6.47075 10.4715C6.2104 10.7318 5.78829 10.7318 5.52794 10.4715C5.2676 10.2111 5.2676 9.78903 5.52794 9.52868L7.05654 8.00008L5.52794 6.47149C5.2676 6.21114 5.2676 5.78903 5.52794 5.52868C5.78829 5.26833 6.2104 5.26833 6.47075 5.52868L7.99935 7.05727L9.52795 5.52868Z",
+    fill: "#EB5757"
+  }));
+};
+
+ErrorIcon.defaultProps = {
+  width: 16,
+  height: 16
+};
+ErrorIcon.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number
+};
+
+var WarningIcon = function WarningIcon(_ref) {
+  var width = _ref.width,
+      height = _ref.height;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-label": "warning"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6.99999 0.142883C10.7871 0.142883 13.8571 3.21293 13.8571 7.00002C13.8571 10.7871 10.7871 13.8572 6.99999 13.8572C3.2129 13.8572 0.142853 10.7871 0.142853 7.00002C0.142853 3.21293 3.2129 0.142883 6.99999 0.142883ZM6.99999 1.28574C3.84408 1.28574 1.28571 3.84411 1.28571 7.00002C1.28571 10.1559 3.84408 12.7143 6.99999 12.7143C10.1559 12.7143 12.7143 10.1559 12.7143 7.00002C12.7143 3.84411 10.1559 1.28574 6.99999 1.28574ZM6.99999 9.05717C7.44182 9.05717 7.79999 9.41534 7.79999 9.85717C7.79999 10.299 7.44182 10.6572 6.99999 10.6572C6.55817 10.6572 6.2 10.299 6.2 9.85717C6.2 9.41534 6.55817 9.05717 6.99999 9.05717ZM7.04206 3.57145C7.17783 3.57145 7.26306 3.59267 7.33756 3.63251C7.41206 3.67235 7.47052 3.73082 7.51036 3.80532C7.55021 3.87982 7.57142 3.96504 7.57142 4.10081V7.61352C7.57142 7.74929 7.55021 7.83452 7.51036 7.90902C7.47052 7.98352 7.41206 8.04198 7.33756 8.08182C7.26306 8.12166 7.17783 8.14288 7.04206 8.14288H6.95793C6.82215 8.14288 6.73693 8.12166 6.66243 8.08182C6.58793 8.04198 6.52947 7.98352 6.48962 7.90902C6.44978 7.83452 6.42857 7.74929 6.42857 7.61352V4.10081C6.42857 3.96504 6.44978 3.87982 6.48962 3.80532C6.52947 3.73082 6.58793 3.67235 6.66243 3.63251C6.73693 3.59267 6.82215 3.57145 6.95793 3.57145H7.04206Z",
+    fill: "#ED713C"
+  }));
+};
+
+WarningIcon.defaultProps = {
+  width: 16,
+  height: 16
+};
+WarningIcon.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number
+};
+
+var SuccessIcon = function SuccessIcon(_ref) {
+  var width = _ref.width,
+      height = _ref.height;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-label": "success"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6.99999 0.142883C10.7871 0.142883 13.8571 3.21293 13.8571 7.00002C13.8571 10.7871 10.7871 13.8572 6.99999 13.8572C3.2129 13.8572 0.142853 10.7871 0.142853 7.00002C0.142853 3.21293 3.2129 0.142883 6.99999 0.142883ZM6.99999 1.28574C3.84408 1.28574 1.28571 3.84411 1.28571 7.00002C1.28571 10.1559 3.84408 12.7143 6.99999 12.7143C10.1559 12.7143 12.7143 10.1559 12.7143 7.00002C12.7143 3.84411 10.1559 1.28574 6.99999 1.28574ZM9.45142 4.88003C9.67458 4.65687 10.0397 4.65687 10.2629 4.88003C10.486 5.10318 10.486 5.4683 10.2629 5.69145L6.2612 9.6898C6.03804 9.91296 5.67623 9.91296 5.45308 9.6898L3.45308 7.6898C3.22992 7.46664 3.22992 7.10484 3.45308 6.88168C3.67623 6.65852 4.03804 6.65852 4.2612 6.88168L5.85714 8.47762L9.45142 4.88003Z",
+    fill: "#27AE60"
+  }));
+};
+
+SuccessIcon.defaultProps = {
+  width: 16,
+  height: 16
+};
+SuccessIcon.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number
+};
+
+var _excluded$n = ["msg", "variant", "className"];
+
+function InputMessage(props) {
+  var _messageRef$current2;
+
+  var msg = props.msg,
+      variant = props.variant,
+      className = props.className,
+      otherProps = _objectWithoutProperties(props, _excluded$n);
+
+  var messageRef = useRef(null);
+
+  var _useState = useState(32),
+      _useState2 = _slicedToArray(_useState, 2),
+      messageRefHeight = _useState2[0],
+      setMessageRefHeight = _useState2[1];
+
+  useEffect(function () {
+    var _messageRef$current;
+
+    setMessageRefHeight(messageRef === null || messageRef === void 0 ? void 0 : (_messageRef$current = messageRef.current) === null || _messageRef$current === void 0 ? void 0 : _messageRef$current.clientHeight);
+  }, [messageRef === null || messageRef === void 0 ? void 0 : (_messageRef$current2 = messageRef.current) === null || _messageRef$current2 === void 0 ? void 0 : _messageRef$current2.clientHeight]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: messageRef,
+    className: classNames("KUI-InputMessage", "KUI-InputMessage_".concat(variant), className),
+    style: {
+      bottom: "-".concat(messageRefHeight, "px")
+    }
+  }, otherProps), /*#__PURE__*/React.createElement("div", {
+    className: "KUI-InputMessage_icon"
+  }, variant === "error" ? /*#__PURE__*/React.createElement(ErrorIcon, null) : variant === "warning" ? /*#__PURE__*/React.createElement(WarningIcon, null) : /*#__PURE__*/React.createElement(SuccessIcon, null)), /*#__PURE__*/React.createElement(Caption, {
+    className: "KUI-InputMessage_title",
+    size: "xs",
+    weight: 600
+  }, msg));
+}
+
+InputMessage.defaultProps = {
+  msg: "",
+  className: "",
+  variant: "error"
+};
+InputMessage.propTypes = {
+  msg: PropTypes.string,
+  className: PropTypes.string,
+  variant: PropTypes.oneOf(["error", "warning", "success"])
+};
+
+var TextareaGrabIcon = function TextareaGrabIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "9",
+    height: "8",
+    viewBox: "0 0 9 8",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0.21967 7.80474C0.512563 8.06509 0.987437 8.06509 1.28033 7.80474L8.78033 1.13807C9.07322 0.877722 9.07322 0.455612 8.78033 0.195262C8.48744 -0.0650874 8.01256 -0.0650874 7.71967 0.195262L0.21967 6.86193C-0.0732233 7.12228 -0.0732233 7.54439 0.21967 7.80474ZM3.96957 7.80441C4.26246 8.06476 4.73734 8.06476 5.03023 7.80441L8.78021 4.47108C9.0731 4.21073 9.0731 3.78862 8.78021 3.52827C8.48732 3.26792 8.01245 3.26792 7.71956 3.52827L3.96957 6.8616C3.67668 7.12195 3.67668 7.54406 3.96957 7.80441Z",
+    fill: "#EAECEF"
+  }));
+};
+
+var _excluded$m = ["isTextArea", "inputRef", "className", "inputStyles", "labelStyles", "label", "startIcon", "endIcon", "messageClassName", "labelInlineStyles", "errorMessage", "inputValue", "type", "rows"];
+
+function Input(props) {
+  var isTextArea = props.isTextArea,
+      inputRefProp = props.inputRef,
+      className = props.className,
+      inputStyles = props.inputStyles,
+      labelStyles = props.labelStyles,
+      label = props.label,
+      startIcon = props.startIcon,
+      endIcon = props.endIcon,
+      messageClassName = props.messageClassName,
+      labelInlineStyles = props.labelInlineStyles,
+      errorMessage = props.errorMessage,
+      inputValue = props.inputValue,
+      type = props.type,
+      rows = props.rows,
+      inputProps = _objectWithoutProperties(props, _excluded$m);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFilled = _useState2[0],
+      setIsFilled = _useState2[1];
+
+  var inputRef = useRef(null);
+
+  var forwardRef = function forwardRef(elem) {
+    if (inputRefProp) {
+      inputRefProp.current = elem;
+    }
+
+    inputRef.current = elem;
+  };
+
+  useEffect(function () {
+    var _inputRef$current;
+
+    if ((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value || inputValue) {
+      setIsFilled(true);
+    } else {
+      setIsFilled(false);
+    }
+  }, [inputRef]);
+
+  var handleChange = function handleChange(e) {
+    if (e.target.value) {
+      setIsFilled(true);
+    } else {
+      setIsFilled(false);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("KUI-Input_container", !isTextArea && "KUI-Input_InputContainer", className)
+  }, startIcon && startIcon, isTextArea ? /*#__PURE__*/React.createElement("textarea", _extends({
+    ref: forwardRef,
+    value: inputValue,
+    rows: rows,
+    onInput: handleChange,
+    className: classNames("KUI-Input", "KUI-Textarea", inputStyles, !!errorMessage && "KUI-Input_invalid")
+  }, inputProps)) : /*#__PURE__*/React.createElement("input", _extends({
+    ref: forwardRef,
+    value: inputValue,
+    type: type,
+    onInput: handleChange,
+    className: classNames("KUI-Input", inputStyles, !!errorMessage && "KUI-Input_invalid")
+  }, inputProps)), /*#__PURE__*/React.createElement(Caption, {
+    size: "s",
+    color: "gray50",
+    className: classNames("KUI-Input_label", isFilled && "KUI-Input_label-active", labelStyles),
+    style: labelInlineStyles
+  }, label), isTextArea && /*#__PURE__*/React.createElement(TextareaGrabIcon, {
+    className: "KUI-Textarea_icon"
+  }), endIcon && endIcon, !!errorMessage && /*#__PURE__*/React.createElement(InputMessage, {
+    msg: errorMessage,
+    className: messageClassName
+  }));
+}
+
+Input.defaultProps = {
+  disabled: false,
+  isTextArea: false,
+  label: "",
+  errorMessage: "",
+  rows: 4,
+  type: "text"
+};
+Input.propTypes = {
+  disabled: PropTypes.bool,
+  isTextArea: PropTypes.bool,
+  label: PropTypes.string,
+  errorMessage: PropTypes.string,
+  rows: PropTypes.number,
+  type: PropTypes.oneOf(["text", "number", "password", "phone", "email", "phone"])
+};
+Input.displayName = "Input";
+
+var _excluded$l = ["cornerLabel", "startIcon", "endIcon"];
+var InputWithAdornments = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _startIconRef$current2, _endIconRef$current2;
+
+  var cornerLabel = props.cornerLabel,
+      startIcon = props.startIcon,
+      endIcon = props.endIcon,
+      inputProps = _objectWithoutProperties(props, _excluded$l);
+
+  var startIconRef = useRef(null);
+  var endIconRef = useRef(null);
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      startIconWidth = _useState2[0],
+      setStartIconWidth = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      endIconWidth = _useState4[0],
+      setEndIconWidth = _useState4[1];
+
+  var inputStyle = {
+    paddingLeft: startIconWidth > 0 ? (startIconWidth + 20) * (16 / 14) : 16,
+    paddingRight: endIconWidth > 0 ? endIconWidth + 24 : 8
+  };
+  var labelStyle = {
+    left: startIconWidth > 0 ? startIconWidth + 22 : 16
+  };
+  useEffect(function () {
+    var _startIconRef$current;
+
+    setStartIconWidth(startIconRef === null || startIconRef === void 0 ? void 0 : (_startIconRef$current = startIconRef.current) === null || _startIconRef$current === void 0 ? void 0 : _startIconRef$current.clientWidth);
+  }, [startIconRef === null || startIconRef === void 0 ? void 0 : (_startIconRef$current2 = startIconRef.current) === null || _startIconRef$current2 === void 0 ? void 0 : _startIconRef$current2.clientWidth]);
+  useEffect(function () {
+    var _endIconRef$current;
+
+    setEndIconWidth(endIconRef === null || endIconRef === void 0 ? void 0 : (_endIconRef$current = endIconRef.current) === null || _endIconRef$current === void 0 ? void 0 : _endIconRef$current.clientWidth);
+  }, [endIconRef === null || endIconRef === void 0 ? void 0 : (_endIconRef$current2 = endIconRef.current) === null || _endIconRef$current2 === void 0 ? void 0 : _endIconRef$current2.clientWidth]);
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    ref: ref,
+    startIcon: startIcon && /*#__PURE__*/React.createElement("div", {
+      ref: startIconRef,
+      className: "KUI-InputAdornment_start-icon"
+    }, startIcon),
+    endIcon: (endIcon || cornerLabel) && /*#__PURE__*/React.createElement("div", {
+      ref: endIconRef,
+      className: classNames("KUI-InputAdornment_end-icon", cornerLabel && "KUI-InputAdornment_corner-label")
+    }, cornerLabel ? /*#__PURE__*/React.createElement(Caption, {
+      size: "s",
+      weight: 500,
+      color: "gray50"
+    }, cornerLabel) : endIcon),
+    style: inputStyle,
+    labelInlineStyles: labelStyle
+  }, inputProps));
+});
+InputWithAdornments.defaultProps = {
+  cornerLabel: null,
+  startIcon: null,
+  endIcon: null
+};
+InputWithAdornments.propTypes = {
+  label: PropTypes.string,
+  errorMessage: PropTypes.string,
+  cornerLabel: PropTypes.string,
+  disabled: PropTypes.bool,
+  startIcon: PropTypes.element,
+  endIcon: PropTypes.element,
+  type: PropTypes.oneOf(["text", "number", "password"])
+};
+InputWithAdornments.displayName = "InputWithAdornments";
+
+var _excluded$k = ["mask", "defaultValue", "onChange", "onBlur", "disabled"];
+var InputWithMask = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var mask = _ref.mask,
+      defaultValue = _ref.defaultValue,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      disabled = _ref.disabled,
+      otherProps = _objectWithoutProperties(_ref, _excluded$k);
+
+  var _useState = useState(defaultValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var handleChange = function handleChange(e) {
+    setValue(e.target.value);
+
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  useEffect(function () {
+    setValue(defaultValue);
+  }, [defaultValue]);
+  return /*#__PURE__*/React.createElement(InputMask, {
+    maskPlaceholder: null,
+    mask: mask,
+    alwaysShowMask: false,
+    disabled: disabled,
+    onChange: handleChange,
+    onBlur: onBlur
+  }, function () {
+    return /*#__PURE__*/React.createElement(InputWithAdornments, _extends({
+      disabled: disabled,
+      inputValue: value,
+      ref: ref
+    }, otherProps));
+  });
+});
+InputWithMask.displayName = "InputWithMask";
+InputWithMask.propTypes = {
+  label: PropTypes.string,
+  errorMessage: PropTypes.string,
+  cornerLabel: PropTypes.string,
+  disabled: PropTypes.bool,
+  startIcon: PropTypes.element,
+  endIcon: PropTypes.element,
+  mask: PropTypes.string
+};
+
+var countries = [
+	{
+		name: "Afghanistan (‫افغانستان‬‎)",
+		nameCode: "af",
+		nameRus: "Афганистан",
+		phoneCode: "93",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "Albania (Shqipëri)",
+		nameCode: "al",
+		nameRus: "Албания",
+		phoneCode: "355",
+		mask: "(999)999-999"
+	},
+	{
+		name: "Algeria (‫الجزائر‬‎)",
+		nameCode: "dz",
+		nameRus: "Алжир",
+		phoneCode: "213",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "American Samoa",
+		nameCode: "as",
+		nameRus: "Американское Самоа",
+		phoneCode: "1684",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Andorra",
+		nameCode: "ad",
+		nameRus: "Андорра",
+		phoneCode: "376",
+		mask: "-999-999"
+	},
+	{
+		name: "Angola",
+		nameCode: "ao",
+		nameRus: "Ангола",
+		phoneCode: "244",
+		mask: "(999)999-999"
+	},
+	{
+		name: "Anguilla",
+		nameCode: "ai",
+		nameRus: "Ангилья",
+		phoneCode: "1264",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Antigua and Barbuda",
+		nameCode: "ag",
+		nameRus: "Антигуа и Барбуда",
+		phoneCode: "1268",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Argentina",
+		nameCode: "ar",
+		nameRus: "Аргентина",
+		phoneCode: "54",
+		mask: "(999)999-9999"
+	},
+	{
+		name: "Armenia (Հայաստան)",
+		nameCode: "am",
+		nameRus: "Армения",
+		phoneCode: "374",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Aruba",
+		nameCode: "aw",
+		nameRus: "Аруба",
+		phoneCode: "297",
+		mask: "-999-9999"
+	},
+	{
+		name: "Australia",
+		nameCode: "au",
+		nameRus: "Австралия",
+		phoneCode: "61",
+		mask: "999999999"
+	},
+	{
+		name: "Austria (Österreich)",
+		nameCode: "at",
+		nameRus: "Австрия",
+		phoneCode: "43",
+		mask: "(999)999-9999"
+	},
+	{
+		name: "Azerbaijan (Azərbaycan)",
+		nameCode: "az",
+		nameRus: "Азербайджан",
+		phoneCode: "994",
+		mask: "-99-999-99-99"
+	},
+	{
+		name: "Bahamas",
+		nameCode: "bs",
+		nameRus: "Багамы",
+		phoneCode: "1242",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Bahrain (‫البحرين‬‎)",
+		nameCode: "bh",
+		nameRus: "Бахрейн",
+		phoneCode: "973",
+		mask: "-9999-9999"
+	},
+	{
+		name: "Bangladesh (বাংলাদেশ)",
+		nameCode: "bd",
+		nameRus: "Бангладеш",
+		phoneCode: "880",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Barbados",
+		nameCode: "bb",
+		nameRus: "Барбадос",
+		phoneCode: "1246",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Belarus (Беларусь)",
+		nameCode: "by",
+		nameRus: "Беларусь",
+		phoneCode: "375",
+		mask: "(99)999-99-99"
+	},
+	{
+		name: "Belgium (België)",
+		nameCode: "be",
+		nameRus: "Бельгия",
+		phoneCode: "32",
+		mask: "999999999"
+	},
+	{
+		name: "Belize",
+		nameCode: "bz",
+		nameRus: "Белиз",
+		phoneCode: "501",
+		mask: "-999-9999"
+	},
+	{
+		name: "Benin (Bénin)",
+		nameCode: "bj",
+		nameRus: "Бенин",
+		phoneCode: "229",
+		mask: "-99-99-9999"
+	},
+	{
+		name: "Bermuda",
+		nameCode: "bm",
+		nameRus: "Бермудские о-ва",
+		phoneCode: "1441",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Bhutan (འབྲུག)",
+		nameCode: "bt",
+		nameRus: "Бутан",
+		phoneCode: "975",
+		mask: "-9-999-999"
+	},
+	{
+		name: "Bolivia",
+		nameCode: "bo",
+		nameRus: "Боливия",
+		phoneCode: "591",
+		mask: "-9-999-9999"
+	},
+	{
+		name: "Bosnia and Herzegovina (Босна и Херцеговина)",
+		nameCode: "ba",
+		nameRus: "Босния и Герцеговина",
+		phoneCode: "387",
+		mask: "-99-9999"
+	},
+	{
+		name: "Botswana",
+		nameCode: "bw",
+		nameRus: "Ботсвана",
+		phoneCode: "267",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Brazil (Brasil)",
+		nameCode: "br",
+		nameRus: "Бразилия",
+		phoneCode: "55",
+		mask: "-99-9999-9999"
+	},
+	{
+		name: "British Indian Ocean Territory",
+		nameCode: "io",
+		nameRus: "Британская территория в Индийском океане",
+		phoneCode: "246",
+		mask: "-999-9999"
+	},
+	{
+		name: "British Virgin Islands",
+		nameCode: "vg",
+		nameRus: "Виргинские о-ва (Великобритания)",
+		phoneCode: "1284",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Brunei",
+		nameCode: "bn",
+		nameRus: "Бруней-Даруссалам",
+		phoneCode: "673",
+		mask: "-999-9999"
+	},
+	{
+		name: "Bulgaria (България)",
+		nameCode: "bg",
+		nameRus: "Болгария",
+		phoneCode: "359",
+		mask: "(999)999-999"
+	},
+	{
+		name: "Burkina Faso",
+		nameCode: "bf",
+		nameRus: "Буркина-Фасо",
+		phoneCode: "226",
+		mask: "-99-99-9999"
+	},
+	{
+		name: "Burundi (Uburundi)",
+		nameCode: "bi",
+		nameRus: "Бурунди",
+		phoneCode: "257",
+		mask: "-99-99-9999"
+	},
+	{
+		name: "Cambodia (កម្ពុជា)",
+		nameCode: "kh",
+		nameRus: "Камбоджа",
+		phoneCode: "855",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Cameroon (Cameroun)",
+		nameCode: "cm",
+		nameRus: "Камерун",
+		phoneCode: "237",
+		mask: "-9999-9999"
+	},
+	{
+		name: "Canada",
+		nameCode: "ca",
+		nameRus: "Канада",
+		phoneCode: "1",
+		mask: "(999)999-9999"
+	},
+	{
+		name: "Cape Verde (Kabu Verdi)",
+		nameCode: "cv",
+		nameRus: "Кабо-Верде",
+		phoneCode: "238",
+		mask: "(999)99-99"
+	},
+	{
+		name: "Caribbean Netherlands",
+		nameCode: "bq",
+		nameRus: "Бонэйр, Синт-Эстатиус и Саба",
+		phoneCode: "599",
+		mask: "-999-9999"
+	},
+	{
+		name: "Cayman Islands",
+		nameCode: "ky",
+		nameRus: "Острова Кайман",
+		phoneCode: "1345",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Central African Republic (République centrafricaine)",
+		nameCode: "cf",
+		nameRus: "Центрально-Африканская Республика",
+		phoneCode: "236",
+		mask: "-99-99-9999"
+	},
+	{
+		name: "Chad (Tchad)",
+		nameCode: "td",
+		nameRus: "Чад",
+		phoneCode: "235",
+		mask: "-99-99-99-99"
+	},
+	{
+		name: "Chile",
+		nameCode: "cl",
+		nameRus: "Чили",
+		phoneCode: "56",
+		mask: "-9-9999-9999"
+	},
+	{
+		name: "China (中国)",
+		nameCode: "cn",
+		nameRus: "Китай",
+		phoneCode: "86",
+		mask: "99-99999999"
+	},
+	{
+		name: "Colombia",
+		nameCode: "co",
+		nameRus: "Колумбия",
+		phoneCode: "57",
+		mask: "(999)999-9999"
+	},
+	{
+		name: "Comoros (‫جزر القمر‬‎)",
+		nameCode: "km",
+		nameRus: "Коморы",
+		phoneCode: "269",
+		mask: "-99-99999"
+	},
+	{
+		name: "Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)",
+		nameCode: "cd",
+		nameRus: "Конго - Киншаса",
+		phoneCode: "243",
+		mask: "(999)999-999"
+	},
+	{
+		name: "Congo (Republic) (Congo-Brazzaville)",
+		nameCode: "cg",
+		nameRus: "Конго - Браззавиль",
+		phoneCode: "242",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "Cook Islands",
+		nameCode: "ck",
+		nameRus: "Острова Кука",
+		phoneCode: "682",
+		mask: "-99-999"
+	},
+	{
+		name: "Costa Rica",
+		nameCode: "cr",
+		nameRus: "Коста-Рика",
+		phoneCode: "506",
+		mask: "9999-9999"
+	},
+	{
+		name: "Côte d’Ivoire",
+		nameCode: "ci",
+		nameRus: "Кот-д’Ивуар",
+		phoneCode: "225",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Croatia (Hrvatska)",
+		nameCode: "hr",
+		nameRus: "Хорватия",
+		phoneCode: "385",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Cuba",
+		nameCode: "cu",
+		nameRus: "Куба",
+		phoneCode: "53",
+		mask: "-9-999-9999"
+	},
+	{
+		name: "Curaçao",
+		nameCode: "cw",
+		nameRus: "Кюрасао",
+		phoneCode: "599",
+		mask: "-999-9999"
+	},
+	{
+		name: "Cyprus (Κύπρος)",
+		nameCode: "cy",
+		nameRus: "Кипр",
+		phoneCode: "357",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Czech Republic (Česká republika)",
+		nameCode: "cz",
+		nameRus: "Чехия",
+		phoneCode: "420",
+		mask: "(999)999-999"
+	},
+	{
+		name: "Denmark (Danmark)",
+		nameCode: "dk",
+		nameRus: "Дания",
+		phoneCode: "45",
+		mask: "99999999"
+	},
+	{
+		name: "Djibouti",
+		nameCode: "dj",
+		nameRus: "Джибути",
+		phoneCode: "253",
+		mask: "-99-99-99-99"
+	},
+	{
+		name: "Dominica",
+		nameCode: "dm",
+		nameRus: "Доминика",
+		phoneCode: "1767",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Dominican Republic (República Dominicana)",
+		nameCode: "do",
+		nameRus: "Доминиканская Республика",
+		phoneCode: "1",
+		mask: "(999)999-9999"
+	},
+	{
+		name: "Ecuador",
+		nameCode: "ec",
+		nameRus: "Эквадор",
+		phoneCode: "593",
+		mask: "-9-999-9999"
+	},
+	{
+		name: "Egypt (‫مصر‬‎)",
+		nameCode: "eg",
+		nameRus: "Египет",
+		phoneCode: "20",
+		mask: "(999)999-9999"
+	},
+	{
+		name: "El Salvador",
+		nameCode: "sv",
+		nameRus: "Сальвадор",
+		phoneCode: "503",
+		mask: "9999-9999"
+	},
+	{
+		name: "Equatorial Guinea (Guinea Ecuatorial)",
+		nameCode: "gq",
+		nameRus: "Экваториальная Гвинея",
+		phoneCode: "240",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "Eritrea",
+		nameCode: "er",
+		nameRus: "Эритрея",
+		phoneCode: "291",
+		mask: "-9-999-999"
+	},
+	{
+		name: "Estonia (Eesti)",
+		nameCode: "ee",
+		nameRus: "Эстония",
+		phoneCode: "372",
+		mask: "-999-9999"
+	},
+	{
+		name: "Ethiopia",
+		nameCode: "et",
+		nameRus: "Эфиопия",
+		phoneCode: "251",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "Falkland Islands (Islas Malvinas)",
+		nameCode: "fk",
+		nameRus: "Фолклендские о-ва",
+		phoneCode: "500",
+		mask: "-99999"
+	},
+	{
+		name: "Faroe Islands (Føroyar)",
+		nameCode: "fo",
+		nameRus: "Фарерские о-ва",
+		phoneCode: "298",
+		mask: "-999-999"
+	},
+	{
+		name: "Fiji",
+		nameCode: "fj",
+		nameRus: "Фиджи",
+		phoneCode: "679",
+		mask: "-99-99999"
+	},
+	{
+		name: "Finland (Suomi)",
+		nameCode: "fi",
+		nameRus: "Финляндия",
+		phoneCode: "358",
+		mask: "9999999999"
+	},
+	{
+		name: "France",
+		nameCode: "fr",
+		nameRus: "Франция",
+		phoneCode: "33",
+		mask: "999999999"
+	},
+	{
+		name: "French Guiana (Guyane française)",
+		nameCode: "gf",
+		nameRus: "Французская Гвиана",
+		phoneCode: "594",
+		mask: "-99999-9999"
+	},
+	{
+		name: "French Polynesia (Polynésie française)",
+		nameCode: "pf",
+		nameRus: "Французская Полинезия",
+		phoneCode: "689",
+		mask: "-99-99-99"
+	},
+	{
+		name: "Gabon",
+		nameCode: "ga",
+		nameRus: "Габон",
+		phoneCode: "241",
+		mask: "-9-99-99-99"
+	},
+	{
+		name: "Gambia",
+		nameCode: "gm",
+		nameRus: "Гамбия",
+		phoneCode: "220",
+		mask: "(999)99-99"
+	},
+	{
+		name: "Georgia (საქართველო)",
+		nameCode: "ge",
+		nameRus: "Грузия",
+		phoneCode: "995",
+		mask: "(999)999-999"
+	},
+	{
+		name: "Germany (Deutschland)",
+		nameCode: "de",
+		nameRus: "Германия",
+		phoneCode: "49",
+		mask: "9999999999"
+	},
+	{
+		name: "Ghana (Gaana)",
+		nameCode: "gh",
+		nameRus: "Гана",
+		phoneCode: "233",
+		mask: "(999)999-999"
+	},
+	{
+		name: "Gibraltar",
+		nameCode: "gi",
+		nameRus: "Гибралтар",
+		phoneCode: "350",
+		mask: "-999-99999"
+	},
+	{
+		name: "Greece (Ελλάδα)",
+		nameCode: "gr",
+		nameRus: "Греция",
+		phoneCode: "30",
+		mask: "(999)999-9999"
+	},
+	{
+		name: "Greenland (Kalaallit Nunaat)",
+		nameCode: "gl",
+		nameRus: "Гренландия",
+		phoneCode: "299",
+		mask: "-99-99-99"
+	},
+	{
+		name: "Grenada",
+		nameCode: "gd",
+		nameRus: "Гренада",
+		phoneCode: "1473",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Guam",
+		nameCode: "gu",
+		nameRus: "Гуам",
+		phoneCode: "1671",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Guatemala",
+		nameCode: "gt",
+		nameRus: "Гватемала",
+		phoneCode: "502",
+		mask: "9999-9999"
+	},
+	{
+		name: "Guinea (Guinée)",
+		nameCode: "gn",
+		nameRus: "Гвинея",
+		phoneCode: "224",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Guinea-Bissau (Guiné Bissau)",
+		nameCode: "gw",
+		nameRus: "Гвинея-Бисау",
+		phoneCode: "245",
+		mask: "-9-999999"
+	},
+	{
+		name: "Guyana",
+		nameCode: "gy",
+		nameRus: "Гайана",
+		phoneCode: "592",
+		mask: "-999-9999"
+	},
+	{
+		name: "Haiti",
+		nameCode: "ht",
+		nameRus: "Гаити",
+		phoneCode: "509",
+		mask: "9999-9999"
+	},
+	{
+		name: "Honduras",
+		nameCode: "hn",
+		nameRus: "Гондурас",
+		phoneCode: "504",
+		mask: "-9999-9999"
+	},
+	{
+		name: "Hong Kong (香港)",
+		nameCode: "hk",
+		nameRus: "Гонконг (САР)",
+		phoneCode: "852",
+		mask: "99999999"
+	},
+	{
+		name: "Hungary (Magyarország)",
+		nameCode: "hu",
+		nameRus: "Венгрия",
+		phoneCode: "36",
+		mask: "(999)999-999"
+	},
+	{
+		name: "Iceland (Ísland)",
+		nameCode: "is",
+		nameRus: "Исландия",
+		phoneCode: "354",
+		mask: "9999999"
+	},
+	{
+		name: "India (भारत)",
+		nameCode: "in",
+		nameRus: "Индия",
+		phoneCode: "91",
+		mask: "99999-99999"
+	},
+	{
+		name: "Indonesia",
+		nameCode: "id",
+		nameRus: "Индонезия",
+		phoneCode: "62",
+		mask: "-99-999-99"
+	},
+	{
+		name: "Iran (‫ایران‬‎)",
+		nameCode: "ir",
+		nameRus: "Иран",
+		phoneCode: "98",
+		mask: "(999)999-9999"
+	},
+	{
+		name: "Iraq (‫العراق‬‎)",
+		nameCode: "iq",
+		nameRus: "Ирак",
+		phoneCode: "964",
+		mask: "(999)999-9999"
+	},
+	{
+		name: "Ireland",
+		nameCode: "ie",
+		nameRus: "Ирландия",
+		phoneCode: "353",
+		mask: "999999999"
+	},
+	{
+		name: "Israel (‫ישראל‬‎)",
+		nameCode: "il",
+		nameRus: "Израиль",
+		phoneCode: "972",
+		mask: "-9-999-9999"
+	},
+	{
+		name: "Italy (Italia)",
+		nameCode: "it",
+		nameRus: "Италия",
+		phoneCode: "39",
+		mask: "999999999"
+	},
+	{
+		name: "Jamaica",
+		nameCode: "jm",
+		nameRus: "Ямайка",
+		phoneCode: "1876",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Japan (日本)",
+		nameCode: "jp",
+		nameRus: "Япония",
+		phoneCode: "81",
+		mask: "999999999"
+	},
+	{
+		name: "Jordan (‫الأردن‬‎)",
+		nameCode: "jo",
+		nameRus: "Иордания",
+		phoneCode: "962",
+		mask: "-9-9999-9999"
+	},
+	{
+		name: "Kazakhstan (Казахстан)",
+		nameCode: "kz",
+		nameRus: "Казахстан",
+		phoneCode: "7",
+		mask: "999999-99-99"
+	},
+	{
+		name: "Kenya",
+		nameCode: "ke",
+		nameRus: "Кения",
+		phoneCode: "254",
+		mask: "-999-999999"
+	},
+	{
+		name: "Kiribati",
+		nameCode: "ki",
+		nameRus: "Кирибати",
+		phoneCode: "686",
+		mask: "-99-999"
+	},
+	{
+		name: "Kuwait (‫الكويت‬‎)",
+		nameCode: "kw",
+		nameRus: "Кувейт",
+		phoneCode: "965",
+		mask: "-9999-9999"
+	},
+	{
+		name: "Kyrgyzstan (Кыргызстан)",
+		nameCode: "kg",
+		nameRus: "Киргизия",
+		phoneCode: "996",
+		mask: "(999)999-999"
+	},
+	{
+		name: "Laos (ລາວ)",
+		nameCode: "la",
+		nameRus: "Лаос",
+		phoneCode: "856",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Latvia (Latvija)",
+		nameCode: "lv",
+		nameRus: "Латвия",
+		phoneCode: "371",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Lebanon (‫لبنان‬‎)",
+		nameCode: "lb",
+		nameRus: "Ливан",
+		phoneCode: "961",
+		mask: "-9-999-999"
+	},
+	{
+		name: "Lesotho",
+		nameCode: "ls",
+		nameRus: "Лесото",
+		phoneCode: "266",
+		mask: "-9-999-9999"
+	},
+	{
+		name: "Liberia",
+		nameCode: "lr",
+		nameRus: "Либерия",
+		phoneCode: "231",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Libya (‫ليبيا‬‎)",
+		nameCode: "ly",
+		nameRus: "Ливия",
+		phoneCode: "218",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Liechtenstein",
+		nameCode: "li",
+		nameRus: "Лихтенштейн",
+		phoneCode: "423",
+		mask: "(999)999-9999"
+	},
+	{
+		name: "Lithuania (Lietuva)",
+		nameCode: "lt",
+		nameRus: "Литва",
+		phoneCode: "370",
+		mask: "(999)99-999"
+	},
+	{
+		name: "Luxembourg",
+		nameCode: "lu",
+		nameRus: "Люксембург",
+		phoneCode: "352",
+		mask: "(999)999-999"
+	},
+	{
+		name: "Macau (澳門)",
+		nameCode: "mo",
+		nameRus: "Макао (САР)",
+		phoneCode: "853",
+		mask: "-9999-9999"
+	},
+	{
+		name: "Macedonia (FYROM) (Македонија)",
+		nameCode: "mk",
+		nameRus: "Северная Македония",
+		phoneCode: "389",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Madagascar (Madagasikara)",
+		nameCode: "mg",
+		nameRus: "Мадагаскар",
+		phoneCode: "261",
+		mask: "-99-99-99999"
+	},
+	{
+		name: "Malawi",
+		nameCode: "mw",
+		nameRus: "Малави",
+		phoneCode: "265",
+		mask: "-9-9999-9999"
+	},
+	{
+		name: "Malaysia",
+		nameCode: "my",
+		nameRus: "Малайзия",
+		phoneCode: "60",
+		mask: "99-9999-9999"
+	},
+	{
+		name: "Maldives",
+		nameCode: "mv",
+		nameRus: "Мальдивы",
+		phoneCode: "960",
+		mask: "-999-9999"
+	},
+	{
+		name: "Mali",
+		nameCode: "ml",
+		nameRus: "Мали",
+		phoneCode: "223",
+		mask: "-99-99-9999"
+	},
+	{
+		name: "Malta",
+		nameCode: "mt",
+		nameRus: "Мальта",
+		phoneCode: "356",
+		mask: "-9999-9999"
+	},
+	{
+		name: "Marshall Islands",
+		nameCode: "mh",
+		nameRus: "Маршалловы Острова",
+		phoneCode: "692",
+		mask: "-999-9999"
+	},
+	{
+		name: "Martinique",
+		nameCode: "mq",
+		nameRus: "Мартиника",
+		phoneCode: "596",
+		mask: "(999)99-99-99"
+	},
+	{
+		name: "Mauritania (‫موريتانيا‬‎)",
+		nameCode: "mr",
+		nameRus: "Мавритания",
+		phoneCode: "222",
+		mask: "-99-99-9999"
+	},
+	{
+		name: "Mauritius (Moris)",
+		nameCode: "mu",
+		nameRus: "Маврикий",
+		phoneCode: "230",
+		mask: "-999-9999"
+	},
+	{
+		name: "Mexico (México)",
+		nameCode: "mx",
+		nameRus: "Мексика",
+		phoneCode: "52",
+		mask: "-99-99-9999"
+	},
+	{
+		name: "Micronesia",
+		nameCode: "fm",
+		nameRus: "Федеративные Штаты Микронезии",
+		phoneCode: "691",
+		mask: "-999-9999"
+	},
+	{
+		name: "Moldova (Republica Moldova)",
+		nameCode: "md",
+		nameRus: "Молдова",
+		phoneCode: "373",
+		mask: "-9999-9999"
+	},
+	{
+		name: "Monaco",
+		nameCode: "mc",
+		nameRus: "Монако",
+		phoneCode: "377",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Mongolia (Монгол)",
+		nameCode: "mn",
+		nameRus: "Монголия",
+		phoneCode: "976",
+		mask: "-99-99-9999"
+	},
+	{
+		name: "Montenegro (Crna Gora)",
+		nameCode: "me",
+		nameRus: "Черногория",
+		phoneCode: "382",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Montserrat",
+		nameCode: "ms",
+		nameRus: "Монтсеррат",
+		phoneCode: "1664",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Morocco (‫المغرب‬‎)",
+		nameCode: "ma",
+		nameRus: "Марокко",
+		phoneCode: "212",
+		mask: "-99-9999-999"
+	},
+	{
+		name: "Mozambique (Moçambique)",
+		nameCode: "mz",
+		nameRus: "Мозамбик",
+		phoneCode: "258",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Myanmar (Burma) (မြန်မာ)",
+		nameCode: "mm",
+		nameRus: "Мьянма (Бирма)",
+		phoneCode: "95",
+		mask: "-999-999"
+	},
+	{
+		name: "Namibia (Namibië)",
+		nameCode: "na",
+		nameRus: "Намибия",
+		phoneCode: "264",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "Nauru",
+		nameCode: "nr",
+		nameRus: "Науру",
+		phoneCode: "674",
+		mask: "-999-9999"
+	},
+	{
+		name: "Nepal (नेपाल)",
+		nameCode: "np",
+		nameRus: "Непал",
+		phoneCode: "977",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Netherlands (Nederland)",
+		nameCode: "nl",
+		nameRus: "Нидерланды",
+		phoneCode: "31",
+		mask: "9999999999"
+	},
+	{
+		name: "New Caledonia (Nouvelle-Calédonie)",
+		nameCode: "nc",
+		nameRus: "Новая Каледония",
+		phoneCode: "687",
+		mask: "-99-9999"
+	},
+	{
+		name: "New Zealand",
+		nameCode: "nz",
+		nameRus: "Новая Зеландия",
+		phoneCode: "64",
+		mask: "999-999-9999"
+	},
+	{
+		name: "Nicaragua",
+		nameCode: "ni",
+		nameRus: "Никарагуа",
+		phoneCode: "505",
+		mask: "-9999-9999"
+	},
+	{
+		name: "Niger (Nijar)",
+		nameCode: "ne",
+		nameRus: "Нигер",
+		phoneCode: "227",
+		mask: "-99-99-9999"
+	},
+	{
+		name: "Nigeria",
+		nameCode: "ng",
+		nameRus: "Нигерия",
+		phoneCode: "234",
+		mask: "-99-999-99"
+	},
+	{
+		name: "Niue",
+		nameCode: "nu",
+		nameRus: "Ниуэ",
+		phoneCode: "683",
+		mask: "-9999"
+	},
+	{
+		name: "Norfolk Island",
+		nameCode: "nf",
+		nameRus: "о-в Норфолк",
+		phoneCode: "672",
+		mask: "-999-999"
+	},
+	{
+		name: "North Korea (조선 민주주의 인민 공화국)",
+		nameCode: "kp",
+		nameRus: "КНДР",
+		phoneCode: "850",
+		mask: "-999-999"
+	},
+	{
+		name: "Northern Mariana Islands",
+		nameCode: "mp",
+		nameRus: "Северные Марианские о-ва",
+		phoneCode: "1670",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Norway (Norge)",
+		nameCode: "no",
+		nameRus: "Норвегия",
+		phoneCode: "47",
+		mask: "99999999"
+	},
+	{
+		name: "Oman (‫عُمان‬‎)",
+		nameCode: "om",
+		nameRus: "Оман",
+		phoneCode: "968",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Pakistan (‫پاکستان‬‎)",
+		nameCode: "pk",
+		nameRus: "Пакистан",
+		phoneCode: "92",
+		mask: "999-9999999"
+	},
+	{
+		name: "Palau",
+		nameCode: "pw",
+		nameRus: "Палау",
+		phoneCode: "680",
+		mask: "-999-9999"
+	},
+	{
+		name: "Palestine (‫فلسطين‬‎)",
+		nameCode: "ps",
+		nameRus: "Палестинские территории",
+		phoneCode: "970",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "Panama (Panamá)",
+		nameCode: "pa",
+		nameRus: "Панама",
+		phoneCode: "507",
+		mask: "-999-9999"
+	},
+	{
+		name: "Papua New Guinea",
+		nameCode: "pg",
+		nameRus: "Папуа — Новая Гвинея",
+		phoneCode: "675",
+		mask: "(999)99-999"
+	},
+	{
+		name: "Paraguay",
+		nameCode: "py",
+		nameRus: "Парагвай",
+		phoneCode: "595",
+		mask: "(999)999-999"
+	},
+	{
+		name: "Peru (Perú)",
+		nameCode: "pe",
+		nameRus: "Перу",
+		phoneCode: "51",
+		mask: "(999)999-999"
+	},
+	{
+		name: "Philippines",
+		nameCode: "ph",
+		nameRus: "Филиппины",
+		phoneCode: "63",
+		mask: "9999999"
+	},
+	{
+		name: "Poland (Polska)",
+		nameCode: "pl",
+		nameRus: "Польша",
+		phoneCode: "48",
+		mask: "999-999-999"
+	},
+	{
+		name: "Portugal",
+		nameCode: "pt",
+		nameRus: "Португалия",
+		phoneCode: "351",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "Puerto Rico",
+		nameCode: "pr",
+		nameRus: "Пуэрто-Рико",
+		phoneCode: "1",
+		mask: "(999)999-9999"
+	},
+	{
+		name: "Qatar (‫قطر‬‎)",
+		nameCode: "qa",
+		nameRus: "Катар",
+		phoneCode: "974",
+		mask: "-9999-9999"
+	},
+	{
+		name: "Réunion (La Réunion)",
+		nameCode: "re",
+		nameRus: "Реюньон",
+		phoneCode: "262",
+		mask: "-99999-9999"
+	},
+	{
+		name: "Romania (România)",
+		nameCode: "ro",
+		nameRus: "Румыния",
+		phoneCode: "40",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "Russia (Россия)",
+		nameCode: "ru",
+		nameRus: "Россия",
+		phoneCode: "7",
+		mask: "(999) 999-99-99"
+	},
+	{
+		name: "Rwanda",
+		nameCode: "rw",
+		nameRus: "Руанда",
+		phoneCode: "250",
+		mask: "(999)999-999"
+	},
+	{
+		name: "Saint Helena",
+		nameCode: "sh",
+		nameRus: "о-в Св. Елены",
+		phoneCode: "290",
+		mask: false
+	},
+	{
+		name: "Saint Kitts and Nevis",
+		nameCode: "kn",
+		nameRus: "Сент-Китс и Невис",
+		phoneCode: "1869",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Saint Lucia",
+		nameCode: "lc",
+		nameRus: "Сент-Люсия",
+		phoneCode: "1758",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)",
+		nameCode: "pm",
+		nameRus: "Сен-Пьер и Микелон",
+		phoneCode: "508",
+		mask: false
+	},
+	{
+		name: "Saint Vincent and the Grenadines",
+		nameCode: "vc",
+		nameRus: "Сент-Винсент и Гренадины",
+		phoneCode: "1784",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Samoa",
+		nameCode: "ws",
+		nameRus: "Самоа",
+		phoneCode: "685",
+		mask: "-99-9999"
+	},
+	{
+		name: "San Marino",
+		nameCode: "sm",
+		nameRus: "Сан-Марино",
+		phoneCode: "378",
+		mask: "-9999-999999"
+	},
+	{
+		name: "São Tomé and Príncipe (São Tomé e Príncipe)",
+		nameCode: "st",
+		nameRus: "Сан-Томе и Принсипи",
+		phoneCode: "239",
+		mask: "-99-99999"
+	},
+	{
+		name: "Saudi Arabia (‫المملكة العربية السعودية‬‎)",
+		nameCode: "sa",
+		nameRus: "Саудовская Аравия",
+		phoneCode: "966",
+		mask: "-9-999-9999"
+	},
+	{
+		name: "Senegal (Sénégal)",
+		nameCode: "sn",
+		nameRus: "Сенегал",
+		phoneCode: "221",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "Serbia (Србија)",
+		nameCode: "rs",
+		nameRus: "Сербия",
+		phoneCode: "381",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "Seychelles",
+		nameCode: "sc",
+		nameRus: "Сейшельские Острова",
+		phoneCode: "248",
+		mask: "-9-999-999"
+	},
+	{
+		name: "Sierra Leone",
+		nameCode: "sl",
+		nameRus: "Сьерра-Леоне",
+		phoneCode: "232",
+		mask: "-99-999999"
+	},
+	{
+		name: "Singapore",
+		nameCode: "sg",
+		nameRus: "Сингапур",
+		phoneCode: "65",
+		mask: "9999-9999"
+	},
+	{
+		name: "Sint Maarten",
+		nameCode: "sx",
+		nameRus: "Синт-Мартен",
+		phoneCode: "1721",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Slovakia (Slovensko)",
+		nameCode: "sk",
+		nameRus: "Словакия",
+		phoneCode: "421",
+		mask: "(999)999-999"
+	},
+	{
+		name: "Slovenia (Slovenija)",
+		nameCode: "si",
+		nameRus: "Словения",
+		phoneCode: "386",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Solomon Islands",
+		nameCode: "sb",
+		nameRus: "Соломоновы Острова",
+		phoneCode: "677",
+		mask: "-99999"
+	},
+	{
+		name: "Somalia (Soomaaliya)",
+		nameCode: "so",
+		nameRus: "Сомали",
+		phoneCode: "252",
+		mask: "-9-999-999"
+	},
+	{
+		name: "South Africa",
+		nameCode: "za",
+		nameRus: "Южно-Африканская Республика",
+		phoneCode: "27",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "South Korea (대한민국)",
+		nameCode: "kr",
+		nameRus: "Республика Корея",
+		phoneCode: "82",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "South Sudan (‫جنوب السودان‬‎)",
+		nameCode: "ss",
+		nameRus: "Южный Судан",
+		phoneCode: "211",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "Spain (España)",
+		nameCode: "es",
+		nameRus: "Испания",
+		phoneCode: "34",
+		mask: "999999999"
+	},
+	{
+		name: "Sri Lanka (ශ්‍රී ලංකාව)",
+		nameCode: "lk",
+		nameRus: "Шри-Ланка",
+		phoneCode: "94",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "Sudan (‫السودان‬‎)",
+		nameCode: "sd",
+		nameRus: "Судан",
+		phoneCode: "249",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "Suriname",
+		nameCode: "sr",
+		nameRus: "Суринам",
+		phoneCode: "597",
+		mask: "-999-999"
+	},
+	{
+		name: "Swaziland",
+		nameCode: "sz",
+		nameRus: "Эсватини",
+		phoneCode: "268",
+		mask: "-99-99-9999"
+	},
+	{
+		name: "Sweden (Sverige)",
+		nameCode: "se",
+		nameRus: "Швеция",
+		phoneCode: "46",
+		mask: "999999999"
+	},
+	{
+		name: "Switzerland (Schweiz)",
+		nameCode: "ch",
+		nameRus: "Швейцария",
+		phoneCode: "41",
+		mask: "999999999"
+	},
+	{
+		name: "Syria (‫سوريا‬‎)",
+		nameCode: "sy",
+		nameRus: "Сирия",
+		phoneCode: "963",
+		mask: "-99-9999-999"
+	},
+	{
+		name: "Taiwan (台灣)",
+		nameCode: "tw",
+		nameRus: "Тайвань",
+		phoneCode: "886",
+		mask: "-9999-9999"
+	},
+	{
+		name: "Tajikistan",
+		nameCode: "tj",
+		nameRus: "Таджикистан",
+		phoneCode: "992",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "Tanzania",
+		nameCode: "tz",
+		nameRus: "Танзания",
+		phoneCode: "255",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "Thailand (ไทย)",
+		nameCode: "th",
+		nameRus: "Таиланд",
+		phoneCode: "66",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Timor-Leste",
+		nameCode: "tl",
+		nameRus: "Восточный Тимор",
+		phoneCode: "670",
+		mask: "-999-9999"
+	},
+	{
+		name: "Togo",
+		nameCode: "tg",
+		nameRus: "Того",
+		phoneCode: "228",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Tokelau",
+		nameCode: "tk",
+		nameRus: "Токелау",
+		phoneCode: "690",
+		mask: "-9999"
+	},
+	{
+		name: "Tonga",
+		nameCode: "to",
+		nameRus: "Тонга",
+		phoneCode: "676",
+		mask: "-99999"
+	},
+	{
+		name: "Trinidad and Tobago",
+		nameCode: "tt",
+		nameRus: "Тринидад и Тобаго",
+		phoneCode: "1868",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Tunisia (‫تونس‬‎)",
+		nameCode: "tn",
+		nameRus: "Тунис",
+		phoneCode: "216",
+		mask: "-99-999-999"
+	},
+	{
+		name: "Turkey (Türkiye)",
+		nameCode: "tr",
+		nameRus: "Турция",
+		phoneCode: "90",
+		mask: "9999999999"
+	},
+	{
+		name: "Turkmenistan",
+		nameCode: "tm",
+		nameRus: "Туркменистан",
+		phoneCode: "993",
+		mask: "-9-999-9999"
+	},
+	{
+		name: "Turks and Caicos Islands",
+		nameCode: "tc",
+		nameRus: "о-ва Тёркс и Кайкос",
+		phoneCode: "1649",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Tuvalu",
+		nameCode: "tv",
+		nameRus: "Тувалу",
+		phoneCode: "688",
+		mask: "-99999"
+	},
+	{
+		name: "U.S. Virgin Islands",
+		nameCode: "vi",
+		nameRus: "Виргинские о-ва (США)",
+		phoneCode: "1340",
+		mask: "9)999-9999"
+	},
+	{
+		name: "Uganda",
+		nameCode: "ug",
+		nameRus: "Уганда",
+		phoneCode: "256",
+		mask: "(999)999-999"
+	},
+	{
+		name: "Ukraine (Україна)",
+		nameCode: "ua",
+		nameRus: "Украина",
+		phoneCode: "380",
+		mask: "(99)999-99-99"
+	},
+	{
+		name: "United Arab Emirates (‫الإمارات العربية المتحدة‬‎)",
+		nameCode: "ae",
+		nameRus: "ОАЭ",
+		phoneCode: "971",
+		mask: "-9-999-9999"
+	},
+	{
+		name: "United Kingdom",
+		nameCode: "gb",
+		nameRus: "Великобритания",
+		phoneCode: "44",
+		mask: "9999999999"
+	},
+	{
+		name: "United States",
+		nameCode: "us",
+		nameRus: "Соединенные Штаты",
+		phoneCode: "1",
+		mask: "(999)999-9999"
+	},
+	{
+		name: "Uruguay",
+		nameCode: "uy",
+		nameRus: "Уругвай",
+		phoneCode: "598",
+		mask: "-9-999-99-99"
+	},
+	{
+		name: "Uzbekistan (Oʻzbekiston)",
+		nameCode: "uz",
+		nameRus: "Узбекистан",
+		phoneCode: "998",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "Vanuatu",
+		nameCode: "vu",
+		nameRus: "Вануату",
+		phoneCode: "678",
+		mask: "-99999"
+	},
+	{
+		name: "Vatican City (Città del Vaticano)",
+		nameCode: "va",
+		nameRus: "Ватикан",
+		phoneCode: "39",
+		mask: "9999999999"
+	},
+	{
+		name: "Venezuela",
+		nameCode: "ve",
+		nameRus: "Венесуэла",
+		phoneCode: "58",
+		mask: "(999)999-9999"
+	},
+	{
+		name: "Vietnam (Việt Nam)",
+		nameCode: "vn",
+		nameRus: "Вьетнам",
+		phoneCode: "84",
+		mask: "-99-9999-999"
+	},
+	{
+		name: "Wallis and Futuna",
+		nameCode: "wf",
+		nameRus: "Уоллис и Футуна",
+		phoneCode: "681",
+		mask: "-99-9999"
+	},
+	{
+		name: "Western Sahara",
+		nameCode: "eh",
+		nameRus: "Западная Сахара",
+		phoneCode: "212",
+		mask: "-99-9999"
+	},
+	{
+		name: "Yemen (‫اليمن‬‎)",
+		nameCode: "ye",
+		nameRus: "Йемен",
+		phoneCode: "967",
+		mask: "-9-999-999"
+	},
+	{
+		name: "Zambia",
+		nameCode: "zm",
+		nameRus: "Замбия",
+		phoneCode: "260",
+		mask: "-99-999-9999"
+	},
+	{
+		name: "Zimbabwe",
+		nameCode: "zw",
+		nameRus: "Зимбабве",
+		phoneCode: "263",
+		mask: "-9-999999"
+	}
+];
+
+function CountryItem(_ref) {
+  var item = _ref.item,
+      selectCountryIndex = _ref.selectCountryIndex;
+  var countryIcon = useMemo(function () {
+    return item.nameCode.toUpperCase().replace(/./g, function (_char) {
+      return String.fromCodePoint(_char.charCodeAt(0) + 127397);
+    });
+  }, [item.nameCode]);
+
+  var handleClick = function handleClick() {
+    selectCountryIndex(item);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "KUI-Country",
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "KUI-Country_title"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "KUI-Country_icon"
+  }, countryIcon), /*#__PURE__*/React.createElement("p", {
+    className: classNames("KUI-Country_paragraph", "KUI-Country_name")
+  }, item.nameRus)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    className: classNames("KUI-Country_paragraph", "KUI-Country_phone")
+  }, "+", item.phoneCode)));
+}
+
+var SearchIcon = function SearchIcon(_ref) {
+  var width = _ref.width,
+      height = _ref.height;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M5.15016 0.333008C7.81034 0.333008 9.96683 2.4895 9.96683 5.14967C9.96683 6.27563 9.58049 7.31135 8.93313 8.13151L11.5009 10.699C11.7222 10.9203 11.7222 11.2791 11.5009 11.5004C11.2796 11.7217 10.9208 11.7217 10.6995 11.5004L8.132 8.93264C7.31184 9.58 6.27612 9.96634 5.15016 9.96634C2.48999 9.96634 0.333496 7.80985 0.333496 5.14967C0.333496 2.4895 2.48999 0.333008 5.15016 0.333008ZM5.15016 1.46634C3.11591 1.46634 1.46683 3.11543 1.46683 5.14967C1.46683 7.18392 3.11591 8.83301 5.15016 8.83301C7.18441 8.83301 8.8335 7.18392 8.8335 5.14967C8.8335 3.11543 7.18441 1.46634 5.15016 1.46634Z",
+    fill: "#7F8285"
+  }));
+};
+
+SearchIcon.defaultProps = {
+  width: 12,
+  height: 12
+};
+SearchIcon.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number
+};
+
+function Dropdown(_ref) {
+  var isOpen = _ref.isOpen,
+      selectCountryIndex = _ref.selectCountryIndex,
+      setIsOpenDropDown = _ref.setIsOpenDropDown,
+      buttonRef = _ref.buttonRef;
+
+  var _useState = useState(countries),
+      _useState2 = _slicedToArray(_useState, 2),
+      filteredCountries = _useState2[0],
+      setFilteredCountries = _useState2[1];
+
+  var dropdownRef = useRef();
+
+  var closePopUp = function closePopUp(e) {
+    if (dropdownRef.current && buttonRef.current) {
+      if (!dropdownRef.current.contains(e.target) && !buttonRef.current.contains(e.target)) {
+        setIsOpenDropDown(false);
+      }
+    }
+  };
+
+  useEffect(function () {
+    document.addEventListener("click", closePopUp);
+    return function () {
+      document.removeEventListener("click", closePopUp);
+    };
+  }, []);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  var filterCountries = function filterCountries(e) {
+    var query = e.target.value;
+
+    if (query.length > 0) {
+      setFilteredCountries(countries.filter(function (item) {
+        return item.nameRus.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+      }));
+    } else {
+      setFilteredCountries(countries);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("KUI-DropdownContainer", isOpen && "KUI-Dropdown_open"),
+    ref: dropdownRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "KUI-SearchWrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "KUI-Search"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "\u041F\u043E\u0438\u0441\u043A...",
+    onChange: filterCountries,
+    className: "KUI-SearchInput"
+  }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(SearchIcon, null)))), /*#__PURE__*/React.createElement("div", {
+    className: "KUI-Dropdown"
+  }, filteredCountries.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(CountryItem, {
+      key: key,
+      item: item,
+      selectCountryIndex: selectCountryIndex
+    });
+  })));
+}
+
+var HalfArrowIcon = function HalfArrowIcon(_ref) {
+  var width = _ref.width,
+      height = _ref.height;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.86193 0.195262L4 3.05719L1.13807 0.195262C0.877722 -0.0650874 0.455612 -0.0650874 0.195262 0.195262C-0.0650874 0.455612 -0.0650874 0.877722 0.195262 1.13807L3.5286 4.4714C3.78895 4.73175 4.21105 4.73175 4.4714 4.4714L7.80474 1.13807C8.06509 0.877722 8.06509 0.455612 7.80474 0.195262C7.54439 -0.0650874 7.12228 -0.0650874 6.86193 0.195262Z",
+    fill: "#8A94A6"
+  }));
+};
+
+HalfArrowIcon.defaultProps = {
+  width: 8,
+  height: 5
+};
+HalfArrowIcon.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number
+};
+
+var _excluded$j = ["onSelectCountry", "hiddenInputProps"];
+var InputWithCountryDropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var onSelectCountry = _ref.onSelectCountry,
+      hiddenInputProps = _ref.hiddenInputProps,
+      inputProps = _objectWithoutProperties(_ref, _excluded$j);
+
+  var _useState = useState(168),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedCountry = _useState2[0],
+      setSelectedCountry = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isOpenDropdown = _useState4[0],
+      setIsOpenDropDown = _useState4[1];
+
+  var buttonRef = useRef();
+
+  var selectCountryIndex = function selectCountryIndex(item) {
+    setSelectedCountry(countries.reduce(function (acc, country, index) {
+      return country.name === item.name ? index : acc;
+    }, 0));
+    setIsOpenDropDown(false);
+
+    if (onSelectCountry) {
+      onSelectCountry(item);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "KUI-InputDropdown_wrapper"
+  }, /*#__PURE__*/React.createElement(InputWithMask, _extends({
+    ref: ref,
+    label: "\u041D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430",
+    mask: countries[selectedCountry].mask,
+    type: "phone",
+    startIcon: /*#__PURE__*/React.createElement("div", {
+      className: "KUI-InputDropdown_button-phone-code",
+      onClick: function onClick() {
+        return setIsOpenDropDown(!isOpenDropdown);
+      },
+      ref: buttonRef
+    }, /*#__PURE__*/React.createElement(Caption, {
+      size: "s",
+      weight: 500
+    }, "+", countries[selectedCountry].phoneCode), /*#__PURE__*/React.createElement("span", {
+      className: classNames("KUI-InputDropdown_button-phone-code_icon", isOpenDropdown && "KUI-InputDropdown_button-phone-code_reverse-icon")
+    }, /*#__PURE__*/React.createElement(HalfArrowIcon, null)))
+  }, inputProps)), /*#__PURE__*/React.createElement(Dropdown, {
+    isOpen: isOpenDropdown,
+    selectCountryIndex: selectCountryIndex,
+    setIsOpenDropDown: setIsOpenDropDown,
+    buttonRef: buttonRef
+  }), /*#__PURE__*/React.createElement("input", _extends({
+    style: {
+      display: "none"
+    },
+    readOnly: true,
+    value: countries[selectedCountry].phoneCode,
+    "aria-label": "phone_code"
+  }, hiddenInputProps)));
+});
+InputWithCountryDropdown.displayName = "InputWithCountryDropdown";
+InputWithCountryDropdown.propTypes = {
+  label: PropTypes.string,
+  errorMessage: PropTypes.string,
+  disabled: PropTypes.bool
+};
+
+var _excluded$i = ["className", "label", "error", "inputRef"];
+var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
+  props.className;
+      var label = props.label,
+      error = props.error,
+      inputRef = props.inputRef,
+      checkboxProps = _objectWithoutProperties(props, _excluded$i);
+
+  return /*#__PURE__*/React.createElement("label", {
+    htmlFor: "KUI-checkbox_".concat(checkboxProps.name),
+    className: "KUI-Checkbox_label"
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    id: "KUI-checkbox_".concat(checkboxProps.name),
+    ref: inputRef,
+    type: "checkbox",
+    className: "KUI-Checkbox"
+  }, checkboxProps)), /*#__PURE__*/React.createElement("span", {
+    className: classNames("KUI-Checkbox_custom", !!error && "KUI-Checkbox_error")
+  }), !!label && /*#__PURE__*/React.createElement("span", {
+    className: "KUI-Label_checkbox"
+  }, label));
+});
+Checkbox.defaultProps = {
+  label: ""
+};
+Checkbox.propTypes = {
+  label: PropTypes.any,
+  error: PropTypes.bool,
+  disabled: PropTypes.bool
+};
+Checkbox.displayName = "Checkbox";
+
+var CloseIcon = function CloseIcon(_ref) {
+  var width = _ref.width,
+      height = _ref.height;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6.93909 6.93909C7.27382 6.60435 7.81654 6.60435 8.15127 6.93909L13 11.7878L17.8487 6.93909C18.1835 6.60435 18.7262 6.60435 19.0609 6.93909C19.3957 7.27382 19.3957 7.81653 19.0609 8.15127L14.2122 13L19.0609 17.8487C19.3957 18.1835 19.3957 18.7262 19.0609 19.0609C18.7262 19.3956 18.1835 19.3956 17.8487 19.0609L13 14.2122L8.15127 19.0609C7.81654 19.3956 7.27382 19.3956 6.93909 19.0609C6.60435 18.7262 6.60435 18.1835 6.93909 17.8487L11.7878 13L6.93909 8.15127C6.60435 7.81653 6.60435 7.27382 6.93909 6.93909Z",
+    fill: "#7F8285"
+  }));
+};
+
+CloseIcon.defaultProps = {
+  width: 26,
+  height: 26
+};
+CloseIcon.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number
+};
+
+var _excluded$h = ["isOpen", "handleClose", "title", "children", "isHasHeader", "className", "headerStyles", "classNameContent", "classNameClose", "size"];
+
+function Modal(props) {
+  var isOpen = props.isOpen,
+      handleClose = props.handleClose,
+      title = props.title,
+      children = props.children,
+      isHasHeader = props.isHasHeader,
+      className = props.className,
+      headerStyles = props.headerStyles,
+      classNameContent = props.classNameContent,
+      classNameClose = props.classNameClose,
+      size = props.size,
+      otherProps = _objectWithoutProperties(props, _excluded$h);
+
+  var modalRef = useRef(null);
+  useEffect(function () {
+    if (isOpen) {
+      window.document.body.classList.add("body");
+    } else {
+      window.document.body.classList.remove("body");
+    }
+  }, [isOpen]);
+  useEffect(function () {
+    return function () {
+      window.document.body.classList.remove("body");
+    };
+  }, []);
+
+  var closeModal = function closeModal(e) {
+    if (modalRef.current && !modalRef.current.contains(e.target)) {
+      handleClose();
+    }
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "KUI-Modal_container",
+    onClick: closeModal
+  }, otherProps), /*#__PURE__*/React.createElement("div", {
+    ref: modalRef,
+    className: classNames("KUI-Modal", isOpen ? "KUI-Modal_open" : "KUI-Modal_close", "KUI-Modal_".concat(size), className)
+  }, /*#__PURE__*/React.createElement("div", null, isHasHeader ? /*#__PURE__*/React.createElement("div", {
+    role: "header",
+    className: classNames("KUI-Modal_header", headerStyles)
+  }, /*#__PURE__*/React.createElement(Heading, {
+    className: "KUI-Modal_title"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    role: "close",
+    className: classNames("KUI-Modal_close-button", classNameClose),
+    onClick: handleClose
+  }, /*#__PURE__*/React.createElement(CloseIcon, null))) : /*#__PURE__*/React.createElement("div", {
+    role: "close",
+    className: classNames("KUI-Modal_close-button", classNameClose),
+    onClick: handleClose
+  }, /*#__PURE__*/React.createElement(CloseIcon, null)), /*#__PURE__*/React.createElement("div", {
+    className: classNames("KUI-Modal_content", classNameContent)
+  }, children))));
+}
+
+Modal.defaultProps = {
+  isOpen: false,
+  handleClose: null,
+  title: "",
+  isHasHeader: true,
+  size: "small"
+};
+Modal.propTypes = {
+  isOpen: PropTypes.bool,
+  handleClose: PropTypes.func,
+  title: PropTypes.string,
+  isHasHeader: PropTypes.bool,
+  size: PropTypes.oneOf(["small", "large"])
+};
+
+var _excluded$g = ["size", "className", "label", "error", "inputRef"];
+var Switch = /*#__PURE__*/forwardRef(function (props, ref) {
+  var size = props.size;
+      props.className;
+      var label = props.label,
+      error = props.error,
+      inputRef = props.inputRef,
+      switchProps = _objectWithoutProperties(props, _excluded$g);
+
+  return /*#__PURE__*/React.createElement("label", {
+    className: "KUI-Switch_label"
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    ref: inputRef,
+    type: "checkbox",
+    className: "KUI-Switch"
+  }, switchProps)), /*#__PURE__*/React.createElement("span", {
+    className: classNames("KUI-Switch_custom", "KUI-Switch_".concat(size), !!error && "KUI-Switch_error")
+  }), !!label && /*#__PURE__*/React.createElement("span", {
+    className: "KUI-Label_switch"
+  }, label));
+});
+Switch.defaultProps = {
+  label: "",
+  className: "",
+  name: "check",
+  size: "s"
+};
+Switch.propTypes = {
+  label: PropTypes.string,
+  size: PropTypes.oneOf(["s", "m", "l"]),
+  disabled: PropTypes.bool,
+  error: PropTypes.bool
+};
+Switch.displayName = "Switch";
+
+var _excluded$f = ["label", "value", "inputRef"];
+var Radio = /*#__PURE__*/forwardRef(function (props, ref) {
+  var label = props.label,
+      value = props.value,
+      inputRef = props.inputRef,
+      radioProps = _objectWithoutProperties(props, _excluded$f);
+
+  return /*#__PURE__*/React.createElement("label", {
+    className: "KUI-Radio_label"
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    ref: inputRef,
+    value: value,
+    type: "radio",
+    className: "KUI-Radio"
+  }, radioProps)), /*#__PURE__*/React.createElement("span", {
+    className: "KUI-Radio_custom"
+  }), !!label && /*#__PURE__*/React.createElement("span", {
+    className: "KUI-Label_radio"
+  }, label));
+});
+Radio.defaultProps = {
+  label: "",
+  value: "",
+  name: "radio"
+};
+Radio.propTypes = {
+  label: PropTypes.string,
+  disabled: PropTypes.bool
+};
+Radio.displayName = "Radio";
+
+var FileIcon = function FileIcon(_ref) {
+  var width = _ref.width,
+      height = _ref.height;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6.10782 5.22682C6.33097 5.00366 6.69278 5.00366 6.91594 5.22682C7.13909 5.44998 7.13909 5.81179 6.91594 6.03494L4.53198 8.4189C4.20799 8.74289 4.18918 9.28829 4.53198 9.63109C4.87477 9.97388 5.42017 9.95507 5.74416 9.63109L10.1888 5.18642C11.104 4.2712 11.054 2.81907 10.1888 1.95393C9.32369 1.08879 7.87156 1.03871 6.95634 1.95393L2.51167 6.3986C1.05411 7.85616 1.08129 10.221 2.51167 11.6514C3.94205 13.0818 6.3069 13.109 7.76447 11.6514L10.1484 9.26743C10.3716 9.04427 10.7334 9.04427 10.9565 9.26743C11.1797 9.49059 11.1797 9.8524 10.9565 10.0756L8.57259 12.4595C6.6645 14.3676 3.57614 14.3321 1.70355 12.4595C-0.169037 10.5869 -0.204535 7.49856 1.70355 5.59048L6.14822 1.14581C7.52269 -0.228658 9.69748 -0.153665 10.997 1.14581C12.2964 2.44528 12.3714 4.62007 10.997 5.99454L6.55228 10.4392C5.79396 11.1975 4.5259 11.2413 3.72386 10.4392C2.92181 9.63716 2.96554 8.3691 3.72386 7.61078L6.10782 5.22682Z",
+    fill: "#7F8285"
+  }));
+};
+
+FileIcon.defaultProps = {
+  width: 12,
+  height: 14
+};
+FileIcon.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number
+};
+
+var _excluded$e = ["className", "label", "name"];
+var InputFile = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+      label = props.label,
+      name = props.name,
+      inputProps = _objectWithoutProperties(props, _excluded$e);
+
+  var _useState = useState(label),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var inputId = inputProps.id ? inputProps.id : name;
+
+  var setFileName = function setFileName(e) {
+    if (e.target.files[0]) {
+      setValue("".concat(e.target.files[0].name.length > 29 ? "".concat(e.target.files[0].name.slice(0, 26), "...") : e.target.files[0].name));
+    } else {
+      setValue(label);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("KUI-InputFile_wrapper", className)
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    type: "file",
+    id: inputId,
+    className: "KUI-InputFile",
+    onInput: setFileName
+  }, inputProps)), /*#__PURE__*/React.createElement("label", {
+    htmlFor: inputId,
+    className: "KUI-InputFile_label"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "s",
+    className: classNames("KUI-InputFile_title", value !== label && "KUI-InputFile_value")
+  }, value), /*#__PURE__*/React.createElement(FileIcon, null)));
+});
+InputFile.displayName = "InputFile";
+InputFile.propTypes = {
+  label: PropTypes.string
+};
+
+function Divider(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React.createElement("hr", {
+    className: classNames("KUI-Divider", className)
+  });
+}
+
+Divider.defaultProps = {
+  className: ""
+};
+Divider.propTypes = {
+  className: PropTypes.string
+};
+
+var _excluded$d = ["className"];
+var Container = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded$d);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: classNames("KUI-Container", className)
+  }, props));
+});
+Container.displayName = "Container";
+
+var _excluded$c = ["spacing", "item", "container", "justify", "alignItems", "alignContent", "xs", "sm", "md", "lg", "xl", "className", "direction"];
+var Grid = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var spacing = _ref.spacing,
+      item = _ref.item,
+      container = _ref.container,
+      justify = _ref.justify,
+      alignItems = _ref.alignItems,
+      alignContent = _ref.alignContent,
+      xs = _ref.xs,
+      sm = _ref.sm,
+      md = _ref.md,
+      lg = _ref.lg,
+      xl = _ref.xl,
+      className = _ref.className,
+      direction = _ref.direction,
+      otherProps = _objectWithoutProperties(_ref, _excluded$c);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: classNames(item && "KUI-Grid_Item", container && "KUI-Grid_Container", item && xs && "KUI-Grid_xs_".concat(xs), item && sm && "KUI-Grid_sm_".concat(sm), item && md && "KUI-Grid_md_".concat(md), item && lg && "KUI-Grid_lg_".concat(lg), item && xl && "KUI-Grid_xl_".concat(xl), container && justify && "KUI-Grid_justify_".concat(justify), container && alignItems && "KUI-Grid_alignItems_".concat(alignItems), container && alignContent && "KUI-Grid_alignContent_".concat(alignContent), container && spacing && "KUI-Grid_spacing_".concat(spacing), container && direction && "KUI-Grid_direction_".concat(direction), className)
+  }, otherProps));
+});
+Grid.displayName = "Grid";
+Grid.propTypes = {
+  spacing: PropTypes.number,
+  justify: PropTypes.oneOf(["center", "flex-start", "flex-end", "space-between"]),
+  alignItems: PropTypes.oneOf(["center", "flex-start", "flex-end"]),
+  alignContent: PropTypes.oneOf(["center", "flex-start", "flex-end"]),
+  direction: PropTypes.oneOf(["column", "row"])
+};
+
+var _excluded$b = ["mt", "mr", "ml", "mb", "pt", "pr", "pl", "pb", "className"];
+var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var mt = _ref.mt,
+      mr = _ref.mr,
+      ml = _ref.ml,
+      mb = _ref.mb,
+      pt = _ref.pt,
+      pr = _ref.pr,
+      pl = _ref.pl,
+      pb = _ref.pb,
+      className = _ref.className,
+      otherProps = _objectWithoutProperties(_ref, _excluded$b);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: classNames(mt && "KUI-Box_mt_".concat(mt), mr && "KUI-Box_mr_".concat(mr), ml && "KUI-Box_ml_".concat(ml), mb && "KUI-Box_mb_".concat(mb), pt && "KUI-Box_pt_".concat(pt), pr && "KUI-Box_pr_".concat(pr), pl && "KUI-Box_pl_".concat(pl), pb && "KUI-Box_pb_".concat(pb), className)
+  }, otherProps));
+});
+Box.propTypes = {
+  pt: PropTypes.number,
+  pb: PropTypes.number,
+  pr: PropTypes.number,
+  pl: PropTypes.number,
+  mt: PropTypes.number,
+  mb: PropTypes.number,
+  mr: PropTypes.number,
+  ml: PropTypes.number
+};
+Box.displayName = "Box";
+
+var _excluded$a = ["children", "handleChange", "className"];
+
+function Accordion(_ref) {
+  var children = _ref.children;
+      _ref.handleChange;
+      var className = _ref.className,
+      otherProps = _objectWithoutProperties(_ref, _excluded$a);
+
+  var detailsBlock = useRef(null);
+
+  var _React$Children$toArr = React.Children.toArray(children),
+      _React$Children$toArr2 = _toArray(_React$Children$toArr),
+      summary = _React$Children$toArr2[0],
+      otherChildren = _React$Children$toArr2.slice(1);
+
+  var handleTransitionEnd = function handleTransitionEnd() {
+    if (detailsBlock.current.style.height !== "0px") {
+      detailsBlock.current.style.height = "auto";
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames("KUI-Accordion", className)
+  }, otherProps), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.cloneElement(summary, {
+    detailsBlock: detailsBlock
+  })), /*#__PURE__*/React.createElement("div", {
+    onTransitionEnd: handleTransitionEnd,
+    ref: detailsBlock,
+    className: "KUI-Collapse"
+  }, otherChildren));
+}
+
+var _excluded$9 = ["detailsBlock", "className", "children", "expandIcon", "contentStyles", "expandedStyles", "iconStyles"];
+
+function AccordionSummary(_ref) {
+  var detailsBlock = _ref.detailsBlock,
+      className = _ref.className,
+      children = _ref.children,
+      expandIcon = _ref.expandIcon,
+      contentStyles = _ref.contentStyles,
+      expandedStyles = _ref.expandedStyles,
+      iconStyles = _ref.iconStyles,
+      otherProps = _objectWithoutProperties(_ref, _excluded$9);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      expanded = _useState2[0],
+      setExpanded = _useState2[1];
+
+  var handleClick = function handleClick() {
+    setExpanded(function (prev) {
+      return !prev;
+    });
+
+    if (detailsBlock) {
+      if (!expanded) {
+        var _detailsBlock$current;
+
+        detailsBlock.current.style.height = "".concat((_detailsBlock$current = detailsBlock.current) === null || _detailsBlock$current === void 0 ? void 0 : _detailsBlock$current.scrollHeight, "px");
+      } else {
+        var _detailsBlock$current2;
+
+        detailsBlock.current.style.height = "".concat((_detailsBlock$current2 = detailsBlock.current) === null || _detailsBlock$current2 === void 0 ? void 0 : _detailsBlock$current2.scrollHeight, "px");
+        window.getComputedStyle(detailsBlock.current, null).getPropertyValue("height");
+        detailsBlock.current.style.height = "0";
+      }
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    onClick: handleClick,
+    className: classNames("KUI-Accordion_Summary", className)
+  }, otherProps), /*#__PURE__*/React.createElement("div", {
+    className: classNames("KUI-Accordion_Summary-Content", expanded && "KUI-Accordion_expanded", expanded && expandedStyles, contentStyles)
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: classNames("KUI-Accordion_Summary-Icon", expanded && "KUI-Accordion_expanded", expanded && expandedStyles, iconStyles)
+  }, expandIcon));
+}
+
+AccordionSummary.propTypes = {
+  expandIcon: PropTypes.element,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string])
+};
+
+function AccordionDetails(props) {
+  return /*#__PURE__*/React.createElement("div", props);
+}
+
+var _excluded$8 = ["className"];
+
+function Skeleton(_ref) {
+  var className = _ref.className,
+      otherProps = _objectWithoutProperties(_ref, _excluded$8);
+
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: classNames("KUI-Skeleton", className)
+  }, otherProps));
+}
+
+var _excluded$7 = ["className", "isFixed"];
+
+function AppBar(_ref) {
+  var className = _ref.className,
+      isFixed = _ref.isFixed,
+      otherProps = _objectWithoutProperties(_ref, _excluded$7);
+
+  return /*#__PURE__*/React.createElement("header", _extends({
+    className: classNames("KUI-AppBar", isFixed && "KUI-AppBar_fixed", className)
+  }, otherProps));
+}
+
+AppBar.propTypes = {
+  isFixed: PropTypes.bool
+};
+AppBar.defaultProps = {
+  isFixed: true
+};
+
+var _excluded$6 = ["className"];
+
+function ToolBar(_ref) {
+  var className = _ref.className,
+      otherProps = _objectWithoutProperties(_ref, _excluded$6);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames("KUI-ToolBar", className)
+  }, otherProps));
+}
+
+var _excluded$5 = ["className", "svgStyles", "circleStyles"];
+
+function CircularProgress(_ref) {
+  var className = _ref.className,
+      svgStyles = _ref.svgStyles,
+      circleStyles = _ref.circleStyles,
+      otherProps = _objectWithoutProperties(_ref, _excluded$5);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames("KUI-CircularProgress", className)
+  }, otherProps), /*#__PURE__*/React.createElement("svg", {
+    className: classNames("KUI-CircularProgress_svg", svgStyles),
+    viewBox: "22 22 44 44"
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: classNames("KUI-CircularProgress_circle", circleStyles),
+    cx: "44",
+    cy: "44",
+    r: "20.2",
+    fill: "none",
+    strokeWidth: "3.6"
+  })));
+}
+
+var _excluded$4 = ["className", "progressBarStyles", "value"];
+
+function LinearProgress(_ref) {
+  var className = _ref.className,
+      progressBarStyles = _ref.progressBarStyles,
+      value = _ref.value,
+      otherProps = _objectWithoutProperties(_ref, _excluded$4);
+
+  var newValue = value;
+
+  if (value > 100) {
+    newValue = 100;
+  }
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames("KUI-LinearProgress", className)
+  }, otherProps), /*#__PURE__*/React.createElement("div", {
+    className: classNames("KUI-LinearProgress_bar", progressBarStyles),
+    style: {
+      transform: "translateX(".concat(newValue - 100, "%)")
+    }
+  }));
+}
+
+LinearProgress.defaultProps = {
+  value: 0
+};
+
+var _excluded$3 = ["value", "onChange", "className", "indicatorPos", "indicatorHidden", "children"];
+
+var nextItem = function nextItem(list, item) {
+  if (list === item) {
+    return list.firstChild;
+  }
+
+  if (item && item.nextElementSibling) {
+    return item.nextElementSibling;
+  }
+
+  return list.firstChild;
+};
+
+var previousItem = function previousItem(list, item) {
+  if (list === item) {
+    return list.lastChild;
+  }
+
+  if (item && item.previousElementSibling) {
+    return item.previousElementSibling;
+  }
+
+  return list.lastChild;
+};
+
+var moveFocus = function moveFocus(list, currentFocus, traversalFunction) {
+  var nextFocus = traversalFunction(list, currentFocus);
+  nextFocus.focus();
+};
+
+var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
+  var value = props.value,
+      onChange = props.onChange,
+      className = props.className,
+      indicatorPos = props.indicatorPos,
+      indicatorHidden = props.indicatorHidden,
+      childrenProp = props.children,
+      otherProps = _objectWithoutProperties(props, _excluded$3);
+
+  var tabListRef = useRef(null);
+
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      indicatorStyles = _useState2[0],
+      setIndicatorStyles = _useState2[1];
+
+  var handleKeyDown = function handleKeyDown(e) {
+    var list = tabListRef.current;
+    var currFocus = list.ownerDocument.activeElement;
+
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault();
+        moveFocus(list, currFocus, previousItem);
+        break;
+
+      case "ArrowRight":
+        e.preventDefault();
+        moveFocus(list, currFocus, nextItem);
+        break;
+
+      case "Home":
+        e.preventDefault();
+        moveFocus(list, currFocus, nextItem);
+        break;
+
+      case "End":
+        e.preventDefault();
+        moveFocus(list, currFocus, previousItem);
+        break;
+    }
+  };
+
+  var children = React.Children.map(childrenProp, function (child, childIndex) {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return null;
+    }
+
+    var childValue = child.props.value === undefined ? childIndex : child.props.value;
+    var selected = childValue === value;
+    return /*#__PURE__*/React.cloneElement(child, {
+      selected: selected,
+      onChange: onChange,
+      value: childValue
+    });
+  });
+  useEffect(function () {
+    var _tabListRef$current;
+
+    var selectedTab = (_tabListRef$current = tabListRef.current) === null || _tabListRef$current === void 0 ? void 0 : _tabListRef$current.children[value];
+    setIndicatorStyles({
+      width: selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.clientWidth,
+      // transform: `translateX(${selectedTab?.offsetLeft})`,
+      left: selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.offsetLeft
+    });
+  }, [value]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: "KUI-Tabs"
+  }, otherProps), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    role: "tablist",
+    className: classNames("KUI-TabList", className),
+    ref: tabListRef,
+    onKeyDown: handleKeyDown
+  }, children), /*#__PURE__*/React.createElement("span", {
+    className: classNames("KUI-Tabs_indicator", indicatorHidden && "KUI-Tabs_hidden", indicatorPos),
+    style: indicatorStyles
+  }));
+});
+Tabs.propTypes = {
+  indicatorPos: PropTypes.oneOf(["bottom", "top"])
+};
+Tabs.defaultProps = {
+  indicatorPos: "bottom"
+};
+
+var _excluded$2 = ["selected", "value", "className", "onChange", "onClick"];
+var Tab = /*#__PURE__*/forwardRef(function (props, ref) {
+  var selected = props.selected,
+      value = props.value,
+      className = props.className,
+      onChange = props.onChange,
+      onClick = props.onClick,
+      other = _objectWithoutProperties(props, _excluded$2);
+
+  var handleClick = function handleClick(e) {
+    if (!selected && onChange) {
+      onChange(e, value);
+    }
+
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("button", _extends({
+    className: classNames("KUI-Tab", className),
+    type: "button",
+    role: "tab",
+    "aria-selected": selected,
+    tabIndex: selected ? 0 : -1,
+    "aria-controls": "tabpanel-".concat(value),
+    id: "tab-".concat(value),
+    ref: ref,
+    onClick: handleClick
+  }, other), /*#__PURE__*/React.createElement(Caption, {
+    weight: 600,
+    size: "sm",
+    color: "white"
+  }, other.label));
+});
+Tab.propTypes = {
+  label: PropTypes.string
+};
+
+var TabsPanel = /*#__PURE__*/forwardRef(function (props, ref) {
+  var tabs = props.tabs,
+      tabPanels = props.tabPanels,
+      paths = props.paths,
+      activeTab = props.activeTab,
+      onChange = props.onChange,
+      indicatorPos = props.indicatorPos;
+
+  var _React$useState = React.useState(Number(activeTab)),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      value = _React$useState2[0],
+      setValue = _React$useState2[1];
+
+  var handleChange = function handleChange(event, newValue) {
+    setValue(newValue);
+
+    if (paths && paths.length > 0) {
+      window.history.pushState({
+        route: paths[newValue]
+      }, "", paths[newValue]);
+    }
+
+    if (onChange) {
+      onChange(event, newValue);
+    }
+  };
+
+  useEffect(function () {
+    setValue(Number(activeTab));
+  }, [activeTab]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(Tabs, {
+    value: value,
+    onChange: handleChange,
+    indicatorPos: indicatorPos
+  }, tabs.map(function (item) {
+    return /*#__PURE__*/React.createElement(Tab, {
+      label: item,
+      key: item
+    });
+  })), tabPanels.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      role: "tabpanel",
+      hidden: value !== index,
+      id: "tabpanel-".concat(index),
+      "aria-labelledby": "tab-".concat(index)
+    }, value === index && item);
+  }));
+});
+TabsPanel.propTypes = {
+  indicatorPos: PropTypes.oneOf(["bottom", "top"])
+};
+
+var ScrollTab = function ScrollTab(_ref) {
+  var selected = _ref.selected,
+      value = _ref.value,
+      label = _ref.label,
+      name = _ref.name,
+      onChange = _ref.onChange,
+      offset = _ref.offset,
+      isScrolling = _ref.isScrolling,
+      setIsScrolling = _ref.setIsScrolling,
+      setIsIndicatorHidden = _ref.setIsIndicatorHidden,
+      isActive = _ref.isActive,
+      setIsActive = _ref.setIsActive;
+  var activeRef = useRef(true);
+  var scrollingRef = useRef(isScrolling);
+
+  var handleSelect = function handleSelect(e) {
+    setTimeout(function () {
+      setIsIndicatorHidden(false);
+      setIsActive(true);
+    });
+
+    if (!isScrolling && onChange) {
+      onChange(e, value);
+    }
+  };
+
+  var handleInactive = function handleInactive() {
+    setIsActive(false);
+    setTimeout(function () {
+      if (!activeRef.current && !scrollingRef.current) {
+        setIsIndicatorHidden(true);
+      }
+    }, 10);
+  };
+
+  useEffect(function () {
+    activeRef.current = isActive;
+  }, [isActive]);
+  useEffect(function () {
+    scrollingRef.current = isScrolling;
+  }, [isScrolling]);
+
+  var handleKeyDown = function handleKeyDown(e) {
+    switch (e.key) {
+      case "Enter":
+        handleSelect(e);
+        scroller.scrollTo(name, {
+          offset: offset
+        });
+        break;
+
+      case "Space":
+        handleSelect(e);
+        scroller.scrollTo(name, {
+          offset: offset
+        });
+        break;
+    }
+  };
+
+  var startScrolling = function startScrolling() {
+    setIsScrolling(true);
+  };
+
+  var endScrolling = function endScrolling() {
+    setIsScrolling(false);
+  };
+
+  useEffect(function () {
+    if (selected) {
+      scroller.scrollTo(name, {
+        offset: offset
+      });
+    }
+
+    Events.scrollEvent.register("begin", function (to, element) {
+      startScrolling();
+    });
+    Events.scrollEvent.register("end", function (to, element) {
+      setTimeout(endScrolling);
+    });
+    return function () {
+      Events.scrollEvent.remove("begin");
+      Events.scrollEvent.remove("end");
+    };
+  }, []);
+
+  var handleClick = function handleClick(e) {
+    if (!selected && onChange) {
+      onChange(e, value);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(Link, {
+    to: name,
+    spy: true,
+    smooth: true,
+    duration: 600,
+    offset: offset,
+    onSetActive: handleSelect,
+    onSetInactive: handleInactive,
+    className: "KUI-ScrollTab",
+    role: "tab",
+    "aria-selected": selected,
+    tabIndex: selected ? 0 : -1,
+    "aria-controls": "tabpanel-".concat(value),
+    id: "tab-".concat(value),
+    onKeyDown: handleKeyDown,
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement(Caption, {
+    weight: 600,
+    size: "sm",
+    color: "white"
+  }, label));
+};
+
+var _excluded$1 = ["tabs", "tabsId", "activeTab", "onChange", "indicatorPos", "offset"];
+var MenuPanel = /*#__PURE__*/forwardRef(function (props, ref) {
+  var tabs = props.tabs,
+      tabsId = props.tabsId,
+      activeTab = props.activeTab,
+      onChange = props.onChange,
+      indicatorPos = props.indicatorPos,
+      offset = props.offset,
+      other = _objectWithoutProperties(props, _excluded$1);
+
+  var _React$useState = React.useState(Number(activeTab)),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      value = _React$useState2[0],
+      setValue = _React$useState2[1];
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isIndicatorHidden = _useState2[0],
+      setIsIndicatorHidden = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isScrolling = _useState4[0],
+      setIsScrolling = _useState4[1];
+
+  var _useState5 = useState(true),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isActive = _useState6[0],
+      setIsActive = _useState6[1];
+
+  var handleChange = function handleChange(event, newValue) {
+    setValue(newValue);
+
+    if (onChange) {
+      onChange(event, newValue);
+    }
+  };
+
+  useEffect(function () {
+    setValue(Number(activeTab));
+  }, [activeTab]);
+  return /*#__PURE__*/React.createElement(Tabs, _extends({
+    ref: ref,
+    value: value,
+    onChange: handleChange,
+    indicatorPos: indicatorPos,
+    indicatorHidden: isIndicatorHidden
+  }, other), tabs.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(ScrollTab, {
+      isScrolling: isScrolling,
+      setIsScrolling: setIsScrolling,
+      offset: offset,
+      label: item,
+      name: tabsId && tabsId[index] || item,
+      key: item,
+      setIsIndicatorHidden: setIsIndicatorHidden,
+      isActive: isActive,
+      setIsActive: setIsActive
+    });
+  }));
+});
+MenuPanel.propTypes = {
+  indicatorPos: PropTypes.oneOf(["bottom", "top"])
+};
+
+var _excluded = ["className"];
+var IconButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("button", _extends({
+    className: classNames("KUI-IconButton", className),
+    ref: ref
+  }, props));
+});
+
+export { Accordion, AccordionDetails, AccordionSummary, AppBar, Box, Button, Caption, Checkbox, CircularProgress, Container, Divider, Grid, Heading, IconButton, Input, InputFile, InputWithAdornments, InputWithCountryDropdown, InputWithMask, LinearProgress, MenuPanel, Modal, Radio, Skeleton, Switch, Tab, Tabs, TabsPanel, Text, ToolBar, theme };
+//# sourceMappingURL=index.es.js.map