fix: props

Author: alexcambose

packages/component-library/src/SearchButton/index.module.scss

@@ -14,4 +14,4 @@
       display: none;
     }
   }
-}
+}

packages/component-library/src/SearchButton/index.stories.tsx

@@ -4,7 +4,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { SearchButton as SearchButtonComponent } from "./index.jsx";
 import { SIZES } from "../Button/index.jsx";
 
-
 const iconControl = {
   control: "select",
   options: Object.keys(icons),
@@ -19,7 +18,7 @@ const iconControl = {
 const meta = {
   component: SearchButtonComponent,
   argTypes: {
-     size: {
+    size: {
       control: "inline-radio",
       options: SIZES,
       table: {
@@ -32,7 +31,6 @@ const meta = {
         category: "Contents",
       },
     },
-   
   },
 } satisfies Meta<typeof SearchButtonComponent>;
 export default meta;

packages/component-library/src/SearchButton/index.tsx

@@ -1,8 +1,11 @@
 "use client";
 
 import { MagnifyingGlass } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';
-import type { ComponentProps, ReactNode } from "react";
+import clsx from 'clsx';
+import type { ReactNode } from "react";
+import { Button as BaseButton } from "react-aria-components";
 
+import type { Props as ButtonProps } from "../Button";
 import { Button } from "../Button";
 import styles from "./index.module.scss";
 
@@ -13,8 +16,8 @@ type OwnProps = {
 };
 
 type Props =  Pick<
-  ComponentProps<typeof Button>,
-  'beforeIcon' | 'size' | 'onClick'
+ ButtonProps<typeof BaseButton>,
+  'beforeIcon' | 'size' | 'onClick' | 'className' | 'isPending'
 > &
   OwnProps;
 
@@ -27,7 +30,7 @@ export const SearchButton = ({
   return (
     <div className={styles.searchButton}>
     <Button
-      className={styles.largeScreenSearchButton ?? ""}
+      className={clsx(styles.largeScreenSearchButton, props.className)}
       variant="outline"
       beforeIcon={beforeIcon ?? <MagnifyingGlass />}
       size="sm"
@@ -38,7 +41,7 @@ export const SearchButton = ({
       {largeScreenContent}
     </Button>
     <Button
-      className={styles.smallScreenSearchButton ?? ""}
+      className={clsx(styles.smallScreenSearchButton, props.className)}
       hideText
       variant="ghost"
       beforeIcon={beforeIcon ?? <MagnifyingGlass />}