npm - @incodetech/web - Versions diffs - 2.0.0-rc.0 → 2.0.1-rc.0 - Mend

@incodetech/web 2.0.0-rc.0 → 2.0.1-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/base.css +2330 -2
package/dist/face-match/styles.css +168 -0
package/dist/flow/styles.css +3275 -2
package/dist/id/id.es.js +1 -1
package/dist/selfie/styles.css +438 -0
package/dist/workflow/styles.css +2870 -2
package/package.json +3 -3

package/dist/base.css CHANGED Viewed

@@ -134,12 +134,2320 @@
     position: absolute;
   }
+  .fixed {
+    position: fixed;
+  }
   .relative {
     position: relative;
   }
-  .static {
-    position: static;
+  .static {
+    position: static;
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+  .incode-container {
+    width: 100%;
+  }
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+  .incode-container {
+    height: 100%;
+    margin: auto;
+  }
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
   }
   .container {
@@ -180,10 +2488,22 @@
     margin: auto;
   }
+  .mx-auto {
+    margin-inline: auto;
+  }
+  .ml-8 {
+    margin-left: var(--spacing-8, var(--spacing-8, 8px));
+  }
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -204,10 +2524,18 @@
     display: inline-flex;
   }
+  .w-full {
+    width: 100%;
+  }
   .max-w-\[420px\] {
     max-width: 420px;
   }
+  .max-w-\[480px\] {
+    max-width: 480px;
+  }
   .flex-1 {
     flex: 1;
   }