add optional props to center children in box

packages/snaps-sdk/src/jsx/components/Box.test.tsx

@@ -92,7 +92,7 @@ describe('Box', () => {
 
   it('renders a box with a conditional', () => {
     const result = (
-      <Box direction="horizontal" alignment="space-between">
+      <Box direction="horizontal" alignment="space-between" center={true}>
         {false && <Text>Hello</Text>}
       </Box>
     );
@@ -103,6 +103,7 @@ describe('Box', () => {
       props: {
         direction: 'horizontal',
         alignment: 'space-between',
+        center: true,
         children: false,
       },
     });

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 center - Whether to center the children within the box. Defaults to `false`.
  */
 export type BoxProps = {
   // We can't use `JSXElement` because it causes a circular reference.
@@ -19,6 +20,7 @@ export type BoxProps = {
     | 'space-between'
     | 'space-around'
     | undefined;
+  center?: boolean | undefined;
 };
 
 const TYPE = 'Box';

packages/snaps-sdk/src/jsx/validation.ts

@@ -471,6 +471,7 @@ export const BoxStruct: Describe<BoxElement> = element('Box', {
       literal('space-around'),
     ]),
   ),
+  center: optional(boolean()),
 });
 
 const FooterButtonStruct = refine(ButtonStruct, 'FooterButton', (value) => {