intelicoreact 1.3.0 → 1.3.2

package/dist/Functions/utils.js

@@ -7,12 +7,14 @@ var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transformUTCTimeToLocal = transformUTCTimeToLocal;
-exports.transformUTCHoursToLocal = transformUTCHoursToLocal;
+exports.disableDefaultBehavior = exports.debounce = exports.compareAlphabetical = exports.compare = exports.clone = exports.checkedRef = exports.changeMeta = exports.capitalized = exports.addBitDepthPoints = void 0;
+exports.downloadEmulation = downloadEmulation;
+exports.throttle = exports.setCarretToEnd = exports.renderFileSize = exports.omitKeys = exports.logout = exports.handleObjectChange = exports.getUniqueFileExtensions = exports.getStyles = exports.getResponseClone = exports.getOS = exports.getIsOnlyAnObject = exports.getCorrectTestId = exports.getColorById = exports.getBase64 = exports.firstLetterCapital = exports.downloadFile = void 0;
 exports.transformDateOrTimeOrTogetherToFormat = transformDateOrTimeOrTogetherToFormat;
 exports.transformDateOrTimeOrTogetherToFormattedLocal = transformDateOrTimeOrTogetherToFormattedLocal;
-exports.downloadEmulation = downloadEmulation;
-exports.getCorrectTestId = exports.disableDefaultBehavior = exports.getOS = exports.getUniqueFileExtensions = exports.renderFileSize = exports.getBase64 = exports.compareAlphabetical = exports.setCarretToEnd = exports.compare = exports.downloadFile = exports.checkedRef = exports.capitalized = exports.firstLetterCapital = exports.changeMeta = exports.addBitDepthPoints = exports.throttle = exports.debounce = exports.getColorById = exports.getStyles = exports.logout = exports.omitKeys = exports.getResponseClone = exports.clone = exports.useOutsideToggle = exports.handleObjectChange = exports.getIsOnlyAnObject = void 0;
+exports.transformUTCHoursToLocal = transformUTCHoursToLocal;
+exports.transformUTCTimeToLocal = transformUTCTimeToLocal;
+exports.useOutsideToggle = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -36,9 +38,9 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 
 function _toPrimitive(input, hint) { if (_typeof3(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof3(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getIsOnlyAnObject = function getIsOnlyAnObject(input) {
   return (0, _typeof2.default)(input) === 'object' && input instanceof Object && !Array.isArray(input);

package/dist/Molecular/InputAddress/InputAddress.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -17,6 +19,8 @@ var _reactFeather = require("react-feather");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _useIsMobile2 = _interopRequireDefault(require("../../Functions/useIsMobile"));
+
 var _Input = _interopRequireDefault(require("../../Atomic/FormElements/Input/Input"));
 
 var _Hint = _interopRequireDefault(require("../../Atomic/UI/Hint/Hint"));
@@ -29,9 +33,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var throttleTimeout = null;
 var DEFAULT_HINT_MESSAGE = 'Select the correct address from the list of suggestions (must contains house number and street name)';
+var RC = "input-address";
 
 var InputAddress = function InputAddress(_ref) {
-  var _ref$className = _ref.className,
+  var label = _ref.label,
+      _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       _ref$isClearable = _ref.isClearable,
       isClearable = _ref$isClearable === void 0 ? true : _ref$isClearable,
@@ -61,8 +67,15 @@ var InputAddress = function InputAddress(_ref) {
       renderListItem = _ref.renderListItem,
       renderHintMessage = _ref.renderHintMessage,
       attributesOfNativeInput = _ref.attributesOfNativeInput;
+
+  var _useIsMobile = (0, _useIsMobile2.default)(),
+      isMobile = _useIsMobile.isMobile;
+
   var inputRef = (0, _react.useRef)(null);
   var listRef = (0, _react.useRef)(null);
+  var listOverlayRef = (0, _react.useRef)(null);
+  var listWrapperRef = (0, _react.useRef)(null);
+  var listHeaderRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -71,33 +84,58 @@ var InputAddress = function InputAddress(_ref) {
 
   var _useState3 = (0, _react.useState)(null),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      query = _useState4[0],
-      setQuery = _useState4[1];
+      isScrollableList = _useState4[0],
+      setIsScrollableList = _useState4[1];
 
-  var _useState5 = (0, _react.useState)([]),
+  var _useState5 = (0, _react.useState)(0),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      listItems = _useState6[0],
-      setListItems = _useState6[1];
+      scrollTop = _useState6[0],
+      setScrollTop = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(false),
+  var _useState7 = (0, _react.useState)(1),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      isLoading = _useState8[0],
-      setIsLoading = _useState8[1];
+      scrollHeight = _useState8[0],
+      setScrollHeight = _useState8[1];
 
   var _useState9 = (0, _react.useState)(null),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      hightlightedIndex = _useState10[0],
-      setHightlightedIndex = _useState10[1];
+      query = _useState10[0],
+      setQuery = _useState10[1];
 
-  var _useState11 = (0, _react.useState)(false),
+  var _useState11 = (0, _react.useState)(null),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      isFocused = _useState12[0],
-      setIsFocused = _useState12[1];
+      tempQuery = _useState12[0],
+      setTempQuery = _useState12[1];
 
-  var _useState13 = (0, _react.useState)(false),
+  var _useState13 = (0, _react.useState)(null),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      isListVisible = _useState14[0],
-      setIsListVisible = _useState14[1];
+      tempValue = _useState14[0],
+      setTempValue = _useState14[1];
+
+  var _useState15 = (0, _react.useState)([]),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      listItems = _useState16[0],
+      setListItems = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(false),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      isLoading = _useState18[0],
+      setIsLoading = _useState18[1];
+
+  var _useState19 = (0, _react.useState)(null),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      hightlightedIndex = _useState20[0],
+      setHightlightedIndex = _useState20[1];
+
+  var _useState21 = (0, _react.useState)(false),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      isFocused = _useState22[0],
+      setIsFocused = _useState22[1];
+
+  var _useState23 = (0, _react.useState)(false),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      isListVisible = _useState24[0],
+      setIsListVisible = _useState24[1];
 
   var isWrongAddress = (0, _react.useMemo)(function () {
     var _query$street;
@@ -114,7 +152,11 @@ var InputAddress = function InputAddress(_ref) {
   var setQueryAsItem = function setQueryAsItem(e, item) {
     if (e) e === null || e === void 0 ? void 0 : e.stopPropagation();
     setTimeout(function () {
-      return setQuery(item);
+      setQuery(item);
+
+      if (isMobile) {
+        setIsListVisible(false);
+      }
     }, 1);
   };
 
@@ -131,17 +173,33 @@ var InputAddress = function InputAddress(_ref) {
     }, throttle);
   };
 
-  var onClearClick = function onClearClick() {
+  var onClearClick = function onClearClick(e) {
     var _inputRef$current;
 
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!isMobile) {
+      setIsListVisible(false);
+    }
+
     setQuery('');
     inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-    setIsListVisible(false);
     setTimeout(function () {
       return setIsFocused(true);
     }, 50);
   };
 
+  var onOverlayClick = function onOverlayClick(e) {
+    if (e.target === (listOverlayRef === null || listOverlayRef === void 0 ? void 0 : listOverlayRef.current)) {
+      e.stopPropagation();
+      e.preventDefault();
+      setIsListVisible(false);
+      setQuery(tempQuery);
+      onChange(typeof query === 'string' || !onChangeValueTransformer || typeof onChangeValueTransformer !== 'function' ? query : onChangeValueTransformer(query));
+    }
+  };
+
   var onKeyDown = function onKeyDown(keyCode) {
     if (!isListVisible || !isKeyboardControlled) return false;
 
@@ -205,7 +263,7 @@ var InputAddress = function InputAddress(_ref) {
         }
       }
 
-      setHightlightedIndex(newHightlightedIndex);
+      if (!isMobile) setHightlightedIndex(newHightlightedIndex);
     }
   };
 
@@ -219,12 +277,13 @@ var InputAddress = function InputAddress(_ref) {
   };
 
   var getSelectedItemLabel = function getSelectedItemLabel() {
-    var _query$street2;
+    var _value$street;
 
-    if (query === null) return '';
-    if (typeof query === 'string') return query;
-    if (!renderSelectedItem || typeof renderSelectedItem !== 'function') return "".concat((query === null || query === void 0 ? void 0 : query.streetNumber) || '', " ").concat((query === null || query === void 0 ? void 0 : (_query$street2 = query.street) === null || _query$street2 === void 0 ? void 0 : _query$street2.fullName) || '');
-    return renderSelectedItem(query);
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : query;
+    if (value === null) return '';
+    if (typeof value === 'string') return value;
+    if (!renderSelectedItem || typeof renderSelectedItem !== 'function') return "".concat((value === null || value === void 0 ? void 0 : value.streetNumber) || '', " ").concat((value === null || value === void 0 ? void 0 : (_value$street = value.street) === null || _value$street === void 0 ? void 0 : _value$street.fullName) || '');
+    return renderSelectedItem(value);
   };
 
   var getListItemLabel = function getListItemLabel(item) {
@@ -233,6 +292,24 @@ var InputAddress = function InputAddress(_ref) {
     return renderListItem(item);
   };
 
+  var setListHeight = function setListHeight() {
+    if (listWrapperRef !== null && listWrapperRef !== void 0 && listWrapperRef.current && listHeaderRef !== null && listHeaderRef !== void 0 && listHeaderRef.current && listRef.current) {
+      var _listWrapperRef$curre, _listWrapperRef$curre2, _listHeaderRef$curren, _listHeaderRef$curren2;
+
+      var listWrapperHeight = listWrapperRef === null || listWrapperRef === void 0 ? void 0 : (_listWrapperRef$curre = listWrapperRef.current) === null || _listWrapperRef$curre === void 0 ? void 0 : (_listWrapperRef$curre2 = _listWrapperRef$curre.getBoundingClientRect()) === null || _listWrapperRef$curre2 === void 0 ? void 0 : _listWrapperRef$curre2.height;
+      var listWrapperStyles = getComputedStyle(listWrapperRef === null || listWrapperRef === void 0 ? void 0 : listWrapperRef.current);
+      var listHeaderHeight = listHeaderRef === null || listHeaderRef === void 0 ? void 0 : (_listHeaderRef$curren = listHeaderRef.current) === null || _listHeaderRef$curren === void 0 ? void 0 : (_listHeaderRef$curren2 = _listHeaderRef$curren.getBoundingClientRect()) === null || _listHeaderRef$curren2 === void 0 ? void 0 : _listHeaderRef$curren2.height;
+      var listHeight = listWrapperHeight - listHeaderHeight - parseInt(listWrapperStyles.paddingBottom);
+      listRef.current.style.maxHeight = "".concat(listHeight, "px");
+    }
+  };
+
+  var resetListHeight = function resetListHeight() {
+    if (listRef.current) {
+      listRef.current.style.maxHeight = "initial";
+    }
+  };
+
   var preparedValue = (0, _react.useMemo)(function () {
     if (!value) return '';
     if (typeof value === 'string') return value === null || value === void 0 ? void 0 : value.trim();
@@ -244,16 +321,26 @@ var InputAddress = function InputAddress(_ref) {
       getData();
     }
 
-    if (JSON.stringify(preparedValue) !== JSON.stringify(query) && query !== null) onChange(typeof query === 'string' || !onChangeValueTransformer || typeof onChangeValueTransformer !== 'function' ? query : onChangeValueTransformer(query));
+    if (JSON.stringify(preparedValue) !== JSON.stringify(query) && query !== null) {
+      onChange(typeof query === 'string' || !onChangeValueTransformer || typeof onChangeValueTransformer !== 'function' ? query : onChangeValueTransformer(query));
+    }
   }, [query]);
   (0, _react.useEffect)(function () {
-    if (!isFocused) {
+    if (!isFocused && !isMobile) {
       setIsListVisible(false);
       setHightlightedIndex(null);
     }
   }, [isFocused]);
   (0, _react.useEffect)(function () {
-    if (!isListVisible) setListItems([]);
+    if (!isListVisible) {
+      setListItems([]);
+      resetListHeight();
+    }
+
+    if (isMobile && isListVisible) {
+      setTempQuery(query);
+      setListHeight();
+    }
   }, [isListVisible]);
   (0, _react.useEffect)(function () {
     if (JSON.stringify(preparedValue) !== JSON.stringify(query) || !isValueInited) {
@@ -264,7 +351,7 @@ var InputAddress = function InputAddress(_ref) {
     }
   }, [preparedValue]);
 
-  var renderInput = function renderInput() {
+  var renderSearchableInput = function renderSearchableInput() {
     var value = getSelectedItemLabel();
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)('input-address__input-wrapper')
@@ -274,8 +361,8 @@ var InputAddress = function InputAddress(_ref) {
       className: (0, _classnames.default)('input-address__input', className),
       value: value,
       onChange: onChangeInternal,
-      onFocus: function onFocus() {
-        return setIsFocused(true);
+      onFocus: function onFocus(e) {
+        setIsFocused(true);
       },
       onBlur: function onBlur() {
         return setIsFocused(false);
@@ -300,6 +387,29 @@ var InputAddress = function InputAddress(_ref) {
     })));
   };
 
+  var renderInput = function renderInput() {
+    var value = getSelectedItemLabel(isListVisible ? tempQuery : query);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('input-address__input-wrapper')
+    }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+      testId: "inputAddress--input--key-".concat(testId || fieldKey),
+      className: (0, _classnames.default)('input-address__input', className),
+      value: value,
+      onChange: onChangeInternal,
+      onFocus: function onFocus(e) {
+        var _e$target;
+
+        setIsListVisible(true);
+        e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.blur();
+        setTimeout(function () {
+          var _inputRef$current3;
+
+          return inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
+        }, 200);
+      }
+    }));
+  };
+
   var renderLoader = function renderLoader() {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "input-address__list--loader"
@@ -322,20 +432,61 @@ var InputAddress = function InputAddress(_ref) {
     var renderNoItems = function renderNoItems() {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "input-address__list--no-items"
-      }, noItemsMessage || 'No Items');
+      }, isMobile ? 'Please begin entering your address' : noItemsMessage || 'No Items');
     };
 
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "input-address__list",
-      ref: listRef
-    }, isLoading ? renderLoader() : listItems !== null && listItems !== void 0 && listItems.length ? listItems === null || listItems === void 0 ? void 0 : listItems.map(renderListItem) : renderNoItems());
+    var renderListDesktop = function renderListDesktop() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "input-address__list-wrapper",
+        ref: listWrapperRef
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "input-address__list",
+        ref: listRef
+      }, isLoading ? renderLoader() : listItems !== null && listItems !== void 0 && listItems.length ? listItems === null || listItems === void 0 ? void 0 : listItems.map(renderListItem) : renderNoItems()));
+    };
+
+    var renderListMobile = function renderListMobile() {
+      var _cn;
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "input-address__list-overlay",
+        ref: listOverlayRef,
+        onClick: onOverlayClick
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "input-address__list-wrapper",
+        ref: listWrapperRef
+      }, isMobile && /*#__PURE__*/_react.default.createElement("div", {
+        ref: listHeaderRef,
+        className: (0, _classnames.default)("".concat(RC, "__list-header"), (_cn = {}, (0, _defineProperty2.default)(_cn, "".concat(RC, "__list-header-with-shadow"), isScrollableList && isMobile), (0, _defineProperty2.default)(_cn, "".concat(RC, "__list-header-with-shadow-hidden"), scrollTop === 0), _cn))
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)("".concat(RC, "__list-header-row"))
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)("".concat(RC, "__list-label"))
+      }, label || 'Address'), /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)("".concat(RC, "__list-close-icon")),
+        onClick: function onClick() {
+          return setIsListVisible(false);
+        }
+      }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
+        onClick: function onClick() {
+          return setIsListVisible(false);
+        }
+      }))), /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)("".concat(RC, "__list-header-row"))
+      }, renderSearchableInput())), /*#__PURE__*/_react.default.createElement("div", {
+        className: "input-address__list",
+        ref: listRef
+      }, isLoading ? renderLoader() : listItems !== null && listItems !== void 0 && listItems.length ? listItems === null || listItems === void 0 ? void 0 : listItems.map(renderListItem) : renderNoItems())));
+    };
+
+    return isMobile ? renderListMobile() : renderListDesktop();
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('input-address', {
       'input-address--error': error || isWrongAddress && !isFocused
     })
-  }, renderInput(), isListVisible && renderList());
+  }, isMobile ? renderInput() : renderSearchableInput(), isListVisible && renderList());
 };
 
 var _default = InputAddress;

package/dist/Molecular/InputAddress/InputAddress.scss

@@ -1,3 +1,5 @@
+@import "../../scss/vars";
+
 .input-address {
   position: relative;
   width: 100%;
@@ -78,8 +80,280 @@
 
       &:hover,
       &-hightlighted {
-        background: #E2E5EC;
+        background: #F0F1F4;
       }
     }
   }
 }
+
+@media (max-width: 767px) {
+  .input-address {
+    &__list {
+      box-sizing: border-box;
+      position: relative;
+      margin: 0;
+      max-height: 100%;
+      padding-bottom: 40px;
+      overflow-y: auto;
+      z-index: 1;
+
+      background-color: unset;
+      border: unset;
+      border-radius: unset;
+
+      padding: 0 $spacing-m;
+
+      &--no-items {
+        color: #757F8C;
+        font-family: Sarabun;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+        letter-spacing: 0.2px;
+      }
+
+      &--item {
+        display: flex;
+        padding: 10px 8px;
+        align-items: center;
+        gap: 16px;
+        align-self: stretch;
+        border-radius: 6px;
+        color: var(--Black-black, #171D33);
+        font-family: Sarabun;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px; /* 150% */
+        letter-spacing: 0.2px;
+
+        &:hover {
+          background: none;
+        }
+
+        &:focus {
+          background: #F0F1F4;
+        }
+      }
+
+      &--with-bottom-shadow::after {
+        content: "";
+        width: 100%;
+        height: 15px;
+        position: absolute;
+        bottom: 0;
+        background: linear-gradient(180deg, rgba(212, 218, 230, 0.50) 0%, rgba(212, 218, 230, 0.30) 21.35%, rgba(247, 248, 250, 0.00) 100%);
+        z-index: 6;
+        transform: rotate(180deg);
+        opacity: 1;
+        transition: all 0.2s;
+      }
+
+      &--with-bottom-shadow-hidden::after {
+        opacity: 0;
+      }
+
+      &-overlay {
+        width: 100dvw;
+        height: 100dvh;
+        max-height: 100dvh;
+        position: fixed;
+        left: 0!important;
+        top: 0!important;
+        background: rgba(23, 29, 51, 0.50);
+        animation-name: fadeIn;
+        animation-duration: 0.25s;
+        animation-timing-function: ease;
+        animation-fill-mode: forwards;
+        z-index: 999;
+      }
+
+      &-wrapper {
+        box-sizing: border-box;
+        position: absolute;
+        padding-bottom: 40px;
+        top: auto;
+        bottom: 0;
+        width: calc(100% - $spacing-m);
+        height: 500px;
+        max-height: 500px;
+        margin: 0 $spacing-s $spacing-s;
+        z-index: 2;
+        animation-duration: 0.4s;
+        animation-name: slideup;
+
+        border-radius: $radii-l;
+        background: $color--light;
+        box-shadow: 0px 24px 50px -10px rgba(0, 0, 0, 0.25);
+      }
+
+      &-header {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: $spacing-m;
+        color: #3B414B;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 24px;
+        letter-spacing: 0.1px;
+        gap: $spacing-m;
+
+        &-row {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          min-height: 24px;
+          box-sizing: border-box;
+
+          &:first-child {
+            padding-right: 50px;
+          }
+
+          .input__wrap {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            padding-right: $spacing-s;
+            border-radius: 6px;
+            border: 1px solid var(--form-input-border, #E1E8F1);
+            background: var(--black-bg-color, #F8FBFF)!important;
+
+            input {
+              background: unset!important;
+            }
+          }
+
+
+        .input__close {
+          padding: $spacing-xs;
+          border-radius: 2px;
+          background: var(--bg-gray-box, #F0F1F4);
+          width: 24px;
+          min-width: 24px;
+          height: 24px;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+
+          &::before,
+          &::after {
+            height: 12px;
+            top: 50%;
+            transform: translateY(-50%) rotate(45deg);
+            border-radius: 8px;
+            background-color: #171D33;
+          }
+          &::after {
+            transform: translateY(-50%) rotate(-45deg);
+          }
+        }
+        }
+
+        &-with-shadow::after {
+          content: "";
+          position: absolute;
+          left: 0;
+          bottom: -15px;
+          width: 100%;
+          height: 15px;
+          background: linear-gradient(180deg, rgba(212, 218, 230, 0.50) 0%, rgba(212, 218, 230, 0.30) 21.35%, rgba(247, 248, 250, 0.00) 100%);
+          z-index: 10;
+          opacity: 1;
+          transition: all 0.2s;
+        }
+
+        &-with-shadow-hidden::after {
+          opacity: 0;
+        }
+
+        .input-address__input-wrapper {
+          width: 100%;
+        }
+      }
+
+      &-close-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 100%;
+        padding: $spacing-m;
+        width: 50px;
+        height: 50px;
+        box-sizing: border-box;
+
+        svg {
+          width: 16px;
+          height: 16px;
+          color: #A0A4B0;
+        }
+      }
+    }
+
+    &__input {
+      &-wrapper {
+        position: relative;
+
+        .input__wrap {
+          display: flex;
+          height: 40px;
+          padding: 0px 8px;
+          padding-right: 40px;
+          box-sizing: border-box;
+          justify-content: flex-end;
+          align-items: center;
+          gap: 8px;
+          align-self: stretch;
+          border-radius: 6px;
+          border: 1px solid var(--Form-Input-Border, #E1E8F1);
+          background: var(--Black-BG-color, #F8FBFF);
+
+          input {
+            padding: 8px 0;
+            height: 100%;
+            box-sizing: border-box;
+          }
+        }
+      }
+    }
+
+    &__clear-query {
+      display: flex;
+      width: 24px;
+      height: 24px;
+      box-sizing: border-box;
+      padding: 4px;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      border-radius: 2px;
+      background: var(--BG-gray-box, #F0F1F4);
+      right: 8px;
+    }
+  }
+}
+
+@keyframes slideup {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}