@matchain/matchid-sdk-react 0.1.29 → 0.1.30

package/dist/index.css

@@ -239,9 +239,14 @@ body {
             padding:16px;
             gap: 32px 16px;
             grid-template-columns: repeat(5, 1fr);
-            @media screen and (max-width: 300px) {
+
+            @media screen and (max-width: 400px) {
                 grid-template-columns: repeat(4, 1fr);
             }
+
+            @media screen and (max-width: 350px) {
+                grid-template-columns: repeat(3, 1fr);
+            }
             .matchid-login-method-item{
                 cursor: pointer;
                 display: flex;
@@ -358,12 +363,14 @@ body {
     width: 100%;
     height: 72px;
     padding-left: 24px;
+    padding-right: 24px;
     border-radius: 12px;
     border: 1px solid var(--matchid-input-border-color);
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: var(--matchid-input-bg);
+    gap:24px;
 }
 
 .matchid-input-box:active, .matchid-input-box:focus, .matchid-input-box:focus-within {
@@ -374,8 +381,9 @@ body {
 .matchid-input-delete-icon {
     opacity: 0;
     cursor: pointer;
-    margin-left: 24px;
-    margin-right: 24px;
+    width: 20px;
+    flex-shrink: 1;
+
 }
 
 .matchid-input-box:focus-within .matchid-input-delete-icon {
@@ -384,8 +392,10 @@ body {
 
 .matchid-input-eye-icon {
     cursor: pointer;
-    margin-left: 24px;
-    margin-right: 24px;
+    display: flex;
+    align-items: center;
+    width: 20px;
+    flex-shrink: 1;
 }
 
 .matchid-input-box.matchid-input-has-content {
@@ -400,7 +410,7 @@ body {
     font-size: 18px;
     font-weight: 600;
     background: none;
-    margin-right: 24px;
+    min-width: 0;
 }
 
 .matchid-input-field::placeholder {

package/dist/index.js

@@ -729,18 +729,24 @@ function Input({
   ...props
 }) {
   const [inputType, setInputType] = (0, import_react.useState)(type);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: `matchid-input-box ${props.value.length > 0 ? "matchid-input-has-content" : ""} ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
-    props.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DeleteRoundIcon, { onClick: (e) => {
-      if (onChange) {
-        onChange({ target: { value: "" } });
-      }
-    }, className: "matchid-input-delete-icon", color: "var(--matchid-input-delete-icon-color)" }),
-    type === "password" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "matchid-input-eye-icon", onClick: () => {
-      setInputType(inputType === "password" ? "text" : "password");
-    }, children: inputType === "password" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CloseEyeIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OpenEyeIcon, {}) }),
-    after
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    "div",
+    {
+      className: `matchid-input-box ${props.value.length > 0 ? "matchid-input-has-content" : ""} ${className}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
+        props.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "matchid-input-delete-icon", onClick: (e) => {
+          if (onChange) {
+            onChange({ target: { value: "" } });
+          }
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DeleteRoundIcon, { className: "", color: "var(--matchid-input-delete-icon-color)" }) }),
+        type === "password" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "matchid-input-eye-icon", onClick: () => {
+          setInputType(inputType === "password" ? "text" : "password");
+        }, children: inputType === "password" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CloseEyeIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OpenEyeIcon, {}) }),
+        after
+      ]
+    }
+  );
 }
 
 // src/components/Field/index.tsx