From 37f1605db203f10829b3ba63dc45f00316ceb01e Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Mon, 17 Feb 2025 14:51:23 +0100
Subject: [PATCH 1/2] add `crossAlignment` to `Box`

---
 packages/snaps-sdk/src/jsx/components/Box.test.tsx | 7 ++++++-
 packages/snaps-sdk/src/jsx/components/Box.ts       | 2 ++
 packages/snaps-sdk/src/jsx/validation.test.tsx     | 6 +++++-
 packages/snaps-sdk/src/jsx/validation.ts           | 3 +++
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/snaps-sdk/src/jsx/components/Box.test.tsx b/packages/snaps-sdk/src/jsx/components/Box.test.tsx
index 41bf791072..0274345788 100644
--- a/packages/snaps-sdk/src/jsx/components/Box.test.tsx
+++ b/packages/snaps-sdk/src/jsx/components/Box.test.tsx
@@ -58,7 +58,11 @@ describe('Box', () => {
 
   it('renders a box with props', () => {
     const result = (
-      <Box direction="horizontal" alignment="space-between">
+      <Box
+        direction="horizontal"
+        alignment="space-between"
+        crossAlignment="center"
+      >
         <Text>Hello</Text>
         <Text>World</Text>
       </Box>
@@ -70,6 +74,7 @@ describe('Box', () => {
       props: {
         direction: 'horizontal',
         alignment: 'space-between',
+        crossAlignment: 'center',
         children: [
           {
             type: 'Text',
diff --git a/packages/snaps-sdk/src/jsx/components/Box.ts b/packages/snaps-sdk/src/jsx/components/Box.ts
index f9d1742268..da4c07dad2 100644
--- a/packages/snaps-sdk/src/jsx/components/Box.ts
+++ b/packages/snaps-sdk/src/jsx/components/Box.ts
@@ -7,6 +7,7 @@ import { createSnapComponent } from '../component';
  * @property children - The children of the box.
  * @property direction - The direction to stack the components within the box. Defaults to `vertical`.
  * @property alignment - The alignment mode to use within the box. Defaults to `start`.
+ * @property crossAlignment - The cross alignment mode to use within the box. Defaults to `start`.
  * @property center - Whether to center the children within the box. Defaults to `false`.
  */
 export type BoxProps = {
@@ -20,6 +21,7 @@ export type BoxProps = {
     | 'space-between'
     | 'space-around'
     | undefined;
+  crossAlignment?: 'start' | 'center' | 'end';
   center?: boolean | undefined;
 };
 
diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
index cbe0999408..d4d3089e75 100644
--- a/packages/snaps-sdk/src/jsx/validation.test.tsx
+++ b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -589,7 +589,7 @@ describe('BoxStruct', () => {
         <Image src="<svg />" alt="alt" />
       </Row>
     </Box>,
-    <Box direction="horizontal" alignment="space-between">
+    <Box direction="horizontal" alignment="space-between" crossAlignment="end">
       <Text>foo</Text>
       <Row label="label">
         <Image src="<svg />" alt="alt" />
@@ -636,6 +636,10 @@ describe('BoxStruct', () => {
         <Image src="<svg />" alt="alt" />
       </Row>
     </Box>,
+    // @ts-expect-error - Invalid props.
+    <Box crossAlignment="bar">
+      <Text>foo</Text>
+    </Box>,
     <Box>
       <Value extra="foo" value="bar" />
     </Box>,
diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
index b02997c944..994a622c25 100644
--- a/packages/snaps-sdk/src/jsx/validation.ts
+++ b/packages/snaps-sdk/src/jsx/validation.ts
@@ -596,6 +596,9 @@ export const BoxStruct: Describe<BoxElement> = element('Box', {
       literal('space-around'),
     ]),
   ),
+  crossAlignment: optional(
+    nullUnion([literal('start'), literal('center'), literal('end')]),
+  ),
   center: optional(boolean()),
 });
 

From 9e0261b8e4d6698f7ea8c47e95ec8c60d797964f Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Mon, 17 Feb 2025 16:50:45 +0100
Subject: [PATCH 2/2] update manifests

---
 packages/examples/packages/browserify-plugin/snap.manifest.json | 2 +-
 packages/examples/packages/browserify/snap.manifest.json        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json
index 27c6c87e49..c74e6cc8f3 100644
--- a/packages/examples/packages/browserify-plugin/snap.manifest.json
+++ b/packages/examples/packages/browserify-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "t/mItLdi/miIU7FWJjijmmaFT/5svN1dK4Ik+1LMbqw=",
+    "shasum": "d0Rvxg6jxAfVxcrMdk2xdJOL7oDh74YKzhvRD2/Gs/s=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/examples/packages/browserify/snap.manifest.json b/packages/examples/packages/browserify/snap.manifest.json
index c21a5fe0ec..f92b36854a 100644
--- a/packages/examples/packages/browserify/snap.manifest.json
+++ b/packages/examples/packages/browserify/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "3kC/z0z6RjjarArtxcs+iltJRQgvZNIPBueMP0cLQJw=",
+    "shasum": "Oy5sCDh6f5WVjosPyzy5U70omD4/SI1WHwOBSmH6Zr8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",