intelicoreact 1.3.22 → 1.3.24

package/dist/Molecular/InputAddress/InputAddress.scss

@@ -2,39 +2,47 @@
 
 .input-address {
   position: relative;
+
   width: 100%;
 
   &--error .input__wrap {
-    border-color: #FA564C!important;
+    border-color: #fa564c !important;
   }
 
   &__clear-query {
-    visibility: hidden;
     position: absolute;
-    display: flex;
     top: 50%;
     right: 4px;
-    transform: translateY(-50%);
+
+    display: flex;
+    visibility: hidden;
+
     cursor: pointer;
+
+    transform: translateY(-50%);
   }
 
   &__alert {
-    visibility: hidden;
     position: absolute;
-    display: flex;
     top: 50%;
     right: 8px;
-    transform: translateY(-50%);
+
+    display: flex;
+    visibility: hidden;
+
     cursor: pointer;
 
+    transform: translateY(-50%);
+
     &--visible {
       visibility: visible;
     }
 
     svg {
-      height: 16px;
       width: 16px;
-      color: #FA564C;
+      height: 16px;
+
+      color: #fa564c;
     }
   }
 
@@ -44,23 +52,26 @@
   }
 
   &__list {
-    box-sizing: border-box;
     position: absolute;
-    margin-top: 8px;
+    z-index: 999;
+
+    overflow-y: auto;
+
+    box-sizing: border-box;
     width: 100%;
     max-height: 100px;
-    overflow-y: auto;
-    z-index: 999;
+    margin-top: 8px;
 
-    background-color: #fff;
-    border: 1px solid #E2E5EC;
+    border: 1px solid #e2e5ec;
     border-radius: 4px;
+    background-color: #fff;
 
     &--loader,
     &--no-items {
       position: relative;
-      padding: 4px 8px;
+
       box-sizing: border-box;
+      padding: 4px 8px;
     }
 
     &--loader {
@@ -73,14 +84,15 @@
 
     &--item {
       position: relative;
-      padding: 4px 8px;
+
       box-sizing: border-box;
+      padding: 4px 8px;
 
       cursor: pointer;
 
       &:hover,
       &-hightlighted {
-        background: #F0F1F4;
+        background: #f0f1f4;
       }
     }
   }
@@ -89,101 +101,121 @@
 @media (max-width: 767px) {
   .input-address {
     &__list {
-      box-sizing: border-box;
       position: relative;
-      margin: 0;
+      z-index: 1;
+
+      overflow-y: auto;
+
+      box-sizing: border-box;
       max-height: 100%;
+      margin: 0;
+      padding: 0 $spacing-m;
       padding-bottom: 40px;
-      overflow-y: auto;
-      z-index: 1;
 
-      background-color: unset;
       border: unset;
       border-radius: unset;
-
-      padding: 0 $spacing-m;
+      background-color: unset;
 
       &--no-items {
-        color: #757F8C;
         font-family: Sarabun;
         font-size: 16px;
-        font-style: normal;
         font-weight: 400;
+        font-style: normal;
         line-height: 24px;
         letter-spacing: 0.2px;
+
+        color: #757f8c;
       }
 
       &--item {
         display: flex;
-        padding: 10px 8px;
         align-items: center;
-        gap: 16px;
         align-self: stretch;
-        border-radius: 6px;
-        color: var(--Black-black, #171D33);
+        gap: 16px;
+
+        padding: 10px 8px;
+
         font-family: Sarabun;
         font-size: 16px;
-        font-style: normal;
         font-weight: 400;
+        font-style: normal;
         line-height: 24px; /* 150% */
         letter-spacing: 0.2px;
 
+        color: var(--Black-black, #171d33);
+        border-radius: 6px;
+
         &:hover {
           background: none;
         }
 
         &:focus {
-          background: #F0F1F4;
+          background: #f0f1f4;
         }
 
         &-custom {
-          padding-right: 32px;
           flex-direction: column;
           align-items: flex-start;
           gap: 4px;
-          border-bottom: 1px solid rgba(58, 72, 122, 0.15);
-          border-radius: 0;
+
+          padding-right: 32px;
 
           font-family: Sarabun;
           font-size: 14px;
-          font-style: normal;
           font-weight: 400;
+          font-style: normal;
           line-height: 20px;
           letter-spacing: 0.2px;
 
+          border-bottom: 1px solid rgba(58, 72, 122, 0.15);
+          border-radius: 0;
+
           svg {
             position: absolute;
+            top: 50%;
+            right: 8px;
+
             width: 16px;
             height: 16px;
-            color: #A0A4B0;
-            right: 8px;
-            top: 50%;
+
+            color: #a0a4b0;
+
             transform: translateY(-50%);
           }
 
           span {
-            color: #757F8C;
             font-family: Sarabun;
             font-size: 12px;
-            font-style: normal;
             font-weight: 400;
+            font-style: normal;
             line-height: 18px;
             letter-spacing: 0.2px;
+
+            color: #757f8c;
           }
         }
       }
 
       &--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);
+        bottom: 0;
+
+        width: 100%;
+        height: 15px;
+
+        content: "";
+
         opacity: 1;
+        background: linear-gradient(
+          180deg,
+          rgba(212, 218, 230, 0.5) 0%,
+          rgba(212, 218, 230, 0.3) 21.35%,
+          rgba(247, 248, 250, 0) 100%
+        );
+
         transition: all 0.2s;
+        transform: rotate(180deg);
       }
 
       &--with-bottom-shadow-hidden::after {
@@ -191,113 +223,138 @@
       }
 
       &-overlay {
+        position: fixed;
+        z-index: 999;
+        top: 0 !important;
+        left: 0 !important;
+
         width: 100dvw;
         height: 100dvh;
         max-height: 100dvh;
-        position: fixed;
-        left: 0!important;
-        top: 0!important;
-        background: rgba(23, 29, 51, 0.50);
+
+        background: rgba(23, 29, 51, 0.5);
+
         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;
+        z-index: 2;
         top: auto;
         bottom: 0;
+
+        box-sizing: border-box;
         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;
+        padding-bottom: 40px;
 
         border-radius: $radii-l;
         background: $color--light;
         box-shadow: 0px 24px 50px -10px rgba(0, 0, 0, 0.25);
+
+        animation-name: slideup;
+        animation-duration: 0.4s;
       }
 
       &-header {
         position: relative;
+
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+        gap: $spacing-m;
+
         padding: $spacing-m;
-        color: #3B414B;
+
         font-size: 16px;
         font-weight: 600;
         line-height: 24px;
         letter-spacing: 0.1px;
-        gap: $spacing-m;
+
+        color: #3b414b;
 
         &-row {
           display: flex;
           flex-direction: row;
           align-items: center;
-          min-height: 24px;
+
           box-sizing: border-box;
+          min-height: 24px;
 
           &:first-child {
             padding-right: 50px;
           }
 
           .input__wrap {
-            width: 100%;
             display: flex;
             align-items: center;
+
+            width: 100%;
             padding-right: $spacing-s;
+
+            border: 1px solid var(--form-input-border, #e1e8f1);
             border-radius: 6px;
-            border: 1px solid var(--form-input-border, #E1E8F1);
-            background: var(--black-bg-color, #F8FBFF)!important;
+            background: var(--black-bg-color, #f8fbff) !important;
 
             input {
-              background: unset!important;
+              background: unset !important;
             }
           }
 
+          .input__close {
+            display: flex;
+            align-items: center;
 
-        .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;
+            box-sizing: border-box;
+            width: 24px;
+            min-width: 24px;
+            height: 24px;
+            padding: $spacing-xs;
 
-          &::before,
-          &::after {
-            height: 12px;
-            top: 50%;
-            transform: translateY(-50%) rotate(45deg);
-            border-radius: 8px;
-            background-color: #171D33;
-          }
-          &::after {
-            transform: translateY(-50%) rotate(-45deg);
+            border-radius: 2px;
+            background: var(--bg-gray-box, #f0f1f4);
+
+            &::before,
+            &::after {
+              top: 50%;
+
+              height: 12px;
+
+              border-radius: 8px;
+              background-color: #171d33;
+
+              transform: translateY(-50%) rotate(45deg);
+            }
+            &::after {
+              transform: translateY(-50%) rotate(-45deg);
+            }
           }
         }
-        }
 
         &-with-shadow::after {
-          content: "";
           position: absolute;
-          left: 0;
+          z-index: 10;
           bottom: -15px;
+          left: 0;
+
           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;
+
+          content: "";
+
           opacity: 1;
+          background: linear-gradient(
+            180deg,
+            rgba(212, 218, 230, 0.5) 0%,
+            rgba(212, 218, 230, 0.3) 21.35%,
+            rgba(247, 248, 250, 0) 100%
+          );
+
           transition: all 0.2s;
         }
 
@@ -311,22 +368,24 @@
       }
 
       &-close-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
         position: absolute;
         top: 0;
         right: 0;
-        height: 100%;
-        padding: $spacing-m;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        box-sizing: border-box;
         width: 50px;
         height: 50px;
-        box-sizing: border-box;
+        padding: $spacing-m;
 
         svg {
           width: 16px;
           height: 16px;
-          color: #A0A4B0;
+
+          color: #a0a4b0;
         }
       }
     }
@@ -337,39 +396,44 @@
 
         .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;
+          gap: 8px;
+
+          box-sizing: border-box;
+          height: 40px;
+          padding: 0px 8px;
+          padding-right: 40px;
+
+          border: 1px solid var(--Form-Input-Border, #e1e8f1);
           border-radius: 6px;
-          border: 1px solid var(--Form-Input-Border, #E1E8F1);
-          background: var(--Black-BG-color, #F8FBFF);
+          background: var(--Black-BG-color, #f8fbff);
 
           input {
-            padding: 8px 0;
-            height: 100%;
             box-sizing: border-box;
+            height: 100%;
+            padding: 8px 0;
           }
         }
       }
     }
 
     &__clear-query {
+      right: 8px;
+
       display: flex;
-      width: 24px;
-      height: 24px;
-      box-sizing: border-box;
-      padding: 4px;
       justify-content: center;
       align-items: center;
       gap: 10px;
+
+      box-sizing: border-box;
+      width: 24px;
+      height: 24px;
+      padding: 4px;
+
       border-radius: 2px;
-      background: var(--BG-gray-box, #F0F1F4);
-      right: 8px;
+      background: var(--BG-gray-box, #f0f1f4);
     }
   }
 }

package/dist/Molecular/InputPassword/InputPassword.js

@@ -6,47 +6,43 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactFeather = require("react-feather");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _Input = _interopRequireDefault(require("../../Atomic/FormElements/Input/Input"));
-require("./InputPassword.scss");
 var _utils = require("../../Functions/utils");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+require("./InputPassword.scss");
 const InputPassword = _ref => {
   let {
     field = {},
     onChange = () => {},
-    testId = ''
+    testId = ""
   } = _ref;
   const [showPassword, setSP] = (0, _react.useState)(false);
   const inputWrapper = (0, _react.useRef)(null);
   const handle = {
     changeView: () => {
       var _inputWrapper$current;
-      const input = inputWrapper === null || inputWrapper === void 0 || (_inputWrapper$current = inputWrapper.current) === null || _inputWrapper$current === void 0 ? void 0 : _inputWrapper$current.querySelector('input');
+      const input = inputWrapper === null || inputWrapper === void 0 || (_inputWrapper$current = inputWrapper.current) === null || _inputWrapper$current === void 0 ? void 0 : _inputWrapper$current.querySelector("input");
       input === null || input === void 0 || input.focus();
       (0, _utils.setCarretToEnd)(input);
       setSP(!showPassword);
     }
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "password",
     ref: inputWrapper
-  }, /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, field, {
+  }, /*#__PURE__*/React.createElement(Input, (0, _extends2.default)({}, field, {
     testId: "inputPassword--input--key-".concat(testId || field.key),
-    className: (0, _classnames.default)('input-fin', field === null || field === void 0 ? void 0 : field.key),
+    className: (0, _classnames.default)("input-fin", field === null || field === void 0 ? void 0 : field.key),
     onChange: onChange,
-    type: !showPassword ? 'password' : 'text'
-  })), /*#__PURE__*/_react.default.createElement("span", {
+    type: showPassword ? "text" : "password"
+  })), /*#__PURE__*/React.createElement("span", {
     className: "password-eye-holder",
     onClick: handle.changeView,
     "data-testid": "inputPassword--eye--key-".concat(testId || field.key, "--container")
-  }, ' ', showPassword ? /*#__PURE__*/_react.default.createElement(_reactFeather.EyeOff, {
+  }, " ", showPassword ? /*#__PURE__*/React.createElement(EyeOff, {
     strokeWidth: 1,
     className: "password-icon"
-  }) : /*#__PURE__*/_react.default.createElement(_reactFeather.Eye, {
+  }) : /*#__PURE__*/React.createElement(Eye, {
     strokeWidth: 1,
     className: "password-icon"
   })));

package/dist/Molecular/InputPassword/InputPassword.scss

@@ -8,23 +8,24 @@
 
   &-eye-holder {
     position: absolute;
-
     top: 25%;
     right: 10px;
 
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
     height: 100%;
 
     cursor: pointer;
-    transform: translateY(-25%);
 
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    justify-content: center;
+    transform: translateY(-25%);
   }
 
   &-icon {
     cursor: pointer;
-    color: #A6AAB4;
+
+    color: #a6aab4;
   }
 }