diff --git a/packages/vibrant-components/src/lib/Drawer/Drawer.spec.tsx b/packages/vibrant-components/src/lib/Drawer/Drawer.spec.tsx
index fa94049fa..d10ab7dc3 100644
--- a/packages/vibrant-components/src/lib/Drawer/Drawer.spec.tsx
+++ b/packages/vibrant-components/src/lib/Drawer/Drawer.spec.tsx
@@ -85,7 +85,7 @@ describe('<Drawer />', () => {
     });
 
     it('content size is shrink', async () => {
-      await waitFor(() => expect(computedStyle.width).toEqual('480px'), { timeout: 2000 });
+      await waitFor(() => expect(computedStyle.width).toEqual('480px'), { timeout: 5000 });
     });
   });
 
diff --git a/packages/vibrant-core/src/lib/props/sizing/sizing.ts b/packages/vibrant-core/src/lib/props/sizing/sizing.ts
index 908bd148c..32efba289 100644
--- a/packages/vibrant-core/src/lib/props/sizing/sizing.ts
+++ b/packages/vibrant-core/src/lib/props/sizing/sizing.ts
@@ -30,7 +30,7 @@ const boxSizingProp = createSystemProp({
 
 const aspectRatioProp = createSystemProp({
   property: 'aspectRatio',
-  transform: (value: number) => ({
+  transform: (value: number | string) => ({
     aspectRatio: value ? value.toString() : value,
   }),
 });
diff --git a/packages/vibrant-core/src/lib/props/sizing/type.ts b/packages/vibrant-core/src/lib/props/sizing/type.ts
index dcdb7f0d2..1a1c59687 100644
--- a/packages/vibrant-core/src/lib/props/sizing/type.ts
+++ b/packages/vibrant-core/src/lib/props/sizing/type.ts
@@ -8,5 +8,5 @@ export type SizingSystemProps = {
   minHeight?: ResponsiveValue<number | string | 'auto' | 'fit-content' | 'max-content' | 'min-content'>;
   maxHeight?: ResponsiveValue<number | string | 'auto' | 'fit-content' | 'max-content' | 'min-content' | 'none'>;
   boxSizing?: 'border-box' | 'content-box';
-  aspectRatio?: ResponsiveValue<number>;
+  aspectRatio?: ResponsiveValue<number | string>;
 };