✨ - feat: add support for vertical alignment in page component

src/components/page/page.scss

@@ -4,11 +4,17 @@
   background-color: var(--page-color-background);
   container-name: page;
   container-type: inline-size;
+  display: flex;
+  flex-direction: column;
   box-sizing: border-box;
   padding: var(--spacing-h-xl);
   width: 100%;
   min-height: 100%;
 
+  &--valign-middle {
+    justify-content: center;
+  }
+
   @media screen and (min-width: constants.$breakpoint-desktop) {
     padding: var(--spacing-v-xl) var(--spacing-h-xl);
   }

src/components/page/page.tsx

@@ -1,19 +1,27 @@
+import clsx from "clsx";
 import React from "react";
 
 import "./page.scss";
 
 export type PageProps = React.PropsWithChildren<{
-  // Props here.
+  /** Vertical alignment of page content. */
+  valign?: "start" | "middle";
 }>;
 
 /**
  * Provides the base theme for a page.
  * @param children
+ * @param valign
  * @param props
  * @constructor
  */
-export const Page: React.FC<PageProps> = ({ children, ...props }) => (
-  <div className="mykn-page" {...props}>
+export const Page: React.FC<PageProps> = ({ children, valign, ...props }) => (
+  <div
+    className={clsx("mykn-page", {
+      [`mykn-page--valign-${valign}`]: valign,
+    })}
+    {...props}
+  >
     {children}
   </div>
 );