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",
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 = (
-
+
Hello
World
@@ -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', () => {
,
-
+
foo
@@ -636,6 +636,10 @@ describe('BoxStruct', () => {
,
+ // @ts-expect-error - Invalid props.
+
+ foo
+ ,
,
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 = element('Box', {
literal('space-around'),
]),
),
+ crossAlignment: optional(
+ nullUnion([literal('start'), literal('center'), literal('end')]),
+ ),
center: optional(boolean()),
});