use correct pattern for fasade components

frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx

@@ -0,0 +1,35 @@
+import React, { type ForwardedRef } from 'react';
+import { render, screen } from '@testing-library/react';
+import type { StudioSearchProps } from './StudioSearch';
+import { StudioSearch } from './StudioSearch';
+import { testRefForwarding } from '../../test-utils/testRefForwarding';
+import { testRootClassNameAppending } from '../../test-utils/testRootClassNameAppending';
+import { testCustomAttributes } from '../../test-utils/testCustomAttributes';
+
+describe('StudioSearch', () => {
+  it('should support forwarding the ref', () => {
+    testRefForwarding<HTMLInputElement>((ref) => renderTestSearch({}, ref), getSearchBox);
+  });
+
+  it('should append classname to root', () => {
+    testRootClassNameAppending((className) => renderTestSearch({ className }));
+  });
+
+  it('should allow custom attributes', () => {
+    testCustomAttributes(
+      (customAttributes) => renderTestSearch({ ...customAttributes }),
+      getSearchBox,
+    );
+  });
+});
+
+const renderTestSearch = (
+  props: Partial<StudioSearchProps> = {},
+  ref?: ForwardedRef<HTMLInputElement>,
+) => {
+  return render(<StudioSearch {...props} ref={ref} />);
+};
+
+function getSearchBox(): HTMLInputElement {
+  return screen.getByRole('searchbox');
+}

frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+import { Search, type SearchProps } from '@digdir/designsystemet-react';
+import type { WithoutAsChild } from '../../types/WithoutAsChild';
+
+export type StudioSearchProps = WithoutAsChild<SearchProps>;
+
+const StudioSearch = forwardRef<HTMLInputElement, StudioSearchProps>(
+  ({ size = 'sm', ...rest }, ref) => {
+    return <Search {...rest} size={size} ref={ref} />;
+  },
+);
+
+StudioSearch.displayName = 'StudioSearch';
+
+export { StudioSearch };

frontend/libs/studio-components/src/components/StudioSearch/index.ts

@@ -1,4 +1 @@
-export {
-  Search as StudioSearch,
-  type SearchProps as StudioSearchProps,
-} from '@digdir/designsystemet-react';
+export { StudioSearch } from './StudioSearch';