diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json
index 9f578fd779..0d829905dc 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": "jyM2N8Y8sIxLacv1mwtPh41wGSt9lWsBNbFo9CSx7mM=",
+ "shasum": "ssGPi4fxyZSvKOMXbVdOa/vnTx0qrq6WZWCUV91dLqo=",
"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 0cc9ff36db..1376a8e7eb 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": "qHCkTRpYoHUFtt9Dd0nxQyw7Eblv0e5znQ39NszlJOo=",
+ "shasum": "+342Ghzfo9UpTxJgqIPOieHvqRTnf4h00s8r0DpbozY=",
"location": {
"npm": {
"filePath": "dist/bundle.js",
diff --git a/packages/snaps-sdk/src/jsx/components/Image.test.tsx b/packages/snaps-sdk/src/jsx/components/Image.test.tsx
index 8bb466b286..7c998eb60d 100644
--- a/packages/snaps-sdk/src/jsx/components/Image.test.tsx
+++ b/packages/snaps-sdk/src/jsx/components/Image.test.tsx
@@ -2,7 +2,7 @@ import { Image } from './Image';
describe('Image', () => {
it('renders an image', () => {
- const result = ;
+ const result = ;
expect(result).toStrictEqual({
type: 'Image',
@@ -10,6 +10,7 @@ describe('Image', () => {
props: {
src: '',
alt: 'Foo',
+ borderRadius: 'medium',
},
});
});
diff --git a/packages/snaps-sdk/src/jsx/components/Image.ts b/packages/snaps-sdk/src/jsx/components/Image.ts
index 7786dce45b..e81821f225 100644
--- a/packages/snaps-sdk/src/jsx/components/Image.ts
+++ b/packages/snaps-sdk/src/jsx/components/Image.ts
@@ -12,6 +12,7 @@ import { createSnapComponent } from '../component';
type ImageProps = {
src: string;
alt?: string | undefined;
+ borderRadius?: 'none' | 'medium' | 'full' | undefined;
};
const TYPE = 'Image';
@@ -27,6 +28,7 @@ const TYPE = 'Image';
* You can use the `data:` URL scheme to embed images inside the SVG.
* @param props.alt - The alternative text of the image, which describes the
* image for users who cannot see it.
+ * @param props.borderRadius - The border radius applied to the image.
* @returns An image element.
* @example
*
diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
index 0f2c3114c7..c656ac598f 100644
--- a/packages/snaps-sdk/src/jsx/validation.test.tsx
+++ b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -1075,12 +1075,13 @@ describe('HeadingStruct', () => {
});
describe('ImageStruct', () => {
- it.each([, ])(
- 'validates an image element',
- (value) => {
- expect(is(value, ImageStruct)).toBe(true);
- },
- );
+ it.each([
+ ,
+ ,
+ ,
+ ])('validates an image element', (value) => {
+ expect(is(value, ImageStruct)).toBe(true);
+ });
it.each([
'foo',
@@ -1093,6 +1094,8 @@ describe('ImageStruct', () => {
,
// @ts-expect-error - Invalid props.
,
+ // @ts-expect-error - Invalid props.
+ ,
foo,
foo
diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
index c251ba91b5..5b6c03a5e1 100644
--- a/packages/snaps-sdk/src/jsx/validation.ts
+++ b/packages/snaps-sdk/src/jsx/validation.ts
@@ -221,6 +221,9 @@ function elementWithSelectiveProps<
export const ImageStruct: Describe = element('Image', {
src: svg(),
alt: optional(string()),
+ borderRadius: optional(
+ nullUnion([literal('none'), literal('medium'), literal('full')]),
+ ),
});
const IconNameStruct: Struct<`${IconName}`, null> = nullUnion(