@incodetech/web 0.0.0-dev-20260408-a355630 → 0.0.0-dev-20260409-a38d5e8

package/dist/base.css

@@ -1448,6 +1448,12 @@
   height: 100%;
   display: flex;
 }
+@media (min-width: 48rem) {
+  .IncodePageContainer {
+    justify-content: center;
+    align-items: center;
+  }
+}
 @media (min-width: 40rem) {
   .IncodePageContainer .IncodePageInner {
     max-width: 40rem;
@@ -1475,7 +1481,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -1505,7 +1520,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -1535,7 +1559,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -1565,7 +1598,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -1595,7 +1637,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -1625,7 +1676,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -1655,7 +1715,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -1685,7 +1754,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -1715,7 +1793,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -1745,7 +1832,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -1775,7 +1871,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -1805,7 +1910,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -1835,7 +1949,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -1865,7 +1988,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -1895,7 +2027,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -1925,7 +2066,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -1955,7 +2105,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -1985,7 +2144,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2015,7 +2183,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2045,7 +2222,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2075,7 +2261,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2105,7 +2300,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2135,7 +2339,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2165,7 +2378,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2195,7 +2417,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2225,7 +2456,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2255,7 +2495,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2285,7 +2534,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2315,7 +2573,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2345,7 +2612,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2375,7 +2651,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2405,7 +2690,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2435,7 +2729,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2465,7 +2768,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2495,7 +2807,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2525,7 +2846,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2555,7 +2885,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2585,7 +2924,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2615,7 +2963,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 @media (min-width: 40rem) {
@@ -2645,7 +3002,16 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 .IncodePageContainer .IncodePageInner {
@@ -2682,23 +3048,38 @@
 }
 @media (min-width: 48rem) {
   .IncodePageContainer .IncodePageInner {
-    height: 840px;
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
   }
 }
 .IncodePageContainer .IncodePageInner {
   padding-inline: var(--spacing-24, var(--spacing-24, 24px));
   padding-top: var(--spacing-8, var(--spacing-8, 8px));
-  padding-bottom: var(--spacing-0, var(--spacing-none, 0px));
+  padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
   flex: 1;
   display: flex;
   overflow-y: auto;
 }
+@media (min-width: 48rem) {
+  .IncodePageContainer .IncodePageInner {
+    padding-inline: var(--spacing-48, var(--spacing-48, 48px));
+    padding-block: var(--spacing-40, var(--spacing-40, 40px));
+  }
+}
 .IncodePageContainer .IncodePageHeader {
   width: 100%;
-  height: 44px;
-  min-height: 44px;
   padding-inline: var(--spacing-8, var(--spacing-8, 8px));
+  height: var(--page-header-height);
+  min-height: var(--page-header-height);
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -2747,12 +3128,6 @@
 .IncodePageContainer .IncodePageFooterInner {
   max-height: var(--spacing-40, var(--spacing-40, 40px));
 }
-@media screen and (min-height: 1080px) {
-  .IncodePageContainer {
-    height: auto;
-    max-height: 840px;
-  }
-}
 .IncodeFillWithPrimary {
   fill: var(--color-text-body-primary, var(--text-body-800-primary));
 }