diff --git a/packages/framework/esm-styleguide/src/responsive-wrapper/responsive-wrapper.component.tsx b/packages/framework/esm-styleguide/src/responsive-wrapper/responsive-wrapper.component.tsx
index 083b87c67..4bd27c3fd 100644
--- a/packages/framework/esm-styleguide/src/responsive-wrapper/responsive-wrapper.component.tsx
+++ b/packages/framework/esm-styleguide/src/responsive-wrapper/responsive-wrapper.component.tsx
@@ -2,16 +2,16 @@ import React from 'react';
 import { Layer } from '@carbon/react';
 import { useLayoutType } from '@openmrs/esm-framework';
 
-export type ResponsiveWrapperProps = {
+export interface ResponsiveWrapperProps {
   children: React.ReactNode;
-};
+}
 
 /**
  * ResponsiveWrapper enables a responsive behavior for the component its wraps, providing a different rendering based on the current layout type.
  * On desktop, it renders the children as is, while on a tablet, it wraps them in a Carbon Layer https://react.carbondesignsystem.com/?path=/docs/components-layer--overview component.
  * This provides a light background for form inputs on tablets, in accordance with the design requirements.
  */
-export function ResponsiveWrapper({ children }: ResponsiveWrapperProps) {
+export const ResponsiveWrapper: React.FC<ResponsiveWrapperProps> = ({ children }) => {
   const layout = useLayoutType();
   const isTablet = layout === 'tablet';
 
@@ -20,4 +20,4 @@ export function ResponsiveWrapper({ children }: ResponsiveWrapperProps) {
   }
 
   return <>{children}</>;
-}
+};