@databiosphere/findable-ui 50.2.0 → 50.4.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "50.2.0"
+  ".": "50.4.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [50.4.0](https://github.com/DataBiosphere/findable-ui/compare/v50.3.0...v50.4.0) (2026-03-30)
+
+
+### Features
+
+* refactor exportmethod to card-based layout ([#848](https://github.com/DataBiosphere/findable-ui/issues/848)) ([bfc09d3](https://github.com/DataBiosphere/findable-ui/commit/bfc09d35c4e3d5fa55a7ab6f9e50eb88b23f31f0))
+* update export/download ui ([#848](https://github.com/DataBiosphere/findable-ui/issues/848)) ([#853](https://github.com/DataBiosphere/findable-ui/issues/853)) ([bfc09d3](https://github.com/DataBiosphere/findable-ui/commit/bfc09d35c4e3d5fa55a7ab6f9e50eb88b23f31f0))
+
+## [50.3.0](https://github.com/DataBiosphere/findable-ui/compare/v50.2.1...v50.3.0) (2026-03-27)
+
+
+### Features
+
+* convert input to controlled component with inputprovider ([#815](https://github.com/DataBiosphere/findable-ui/issues/815)) ([#843](https://github.com/DataBiosphere/findable-ui/issues/843)) ([699f186](https://github.com/DataBiosphere/findable-ui/commit/699f186f8bff76a0806e2afe93bfd5815fea698b))
+
+## [50.2.1](https://github.com/DataBiosphere/findable-ui/compare/v50.2.0...v50.2.1) (2026-03-25)
+
+
+### Bug Fixes
+
+* set poweredbyclevercanary image height to 32px ([#845](https://github.com/DataBiosphere/findable-ui/issues/845)) ([fd1cbcc](https://github.com/DataBiosphere/findable-ui/commit/fd1cbcc985f4b56d7cca53d5eddf0c710d889c92))
+
 ## [50.2.0](https://github.com/DataBiosphere/findable-ui/compare/v50.1.1...v50.2.0) (2026-03-25)
 
 

package/lib/components/Export/components/ExportMethod/exportMethod.d.ts

@@ -1,11 +1,10 @@
 import { JSX, ReactNode } from "react";
 import { TrackingProps } from "../../../types";
 export interface ExportMethodProps extends TrackingProps {
-    buttonLabel: string;
     description: ReactNode;
     footnote?: ReactNode;
     isAccessible?: boolean;
     route: string;
     title: string;
 }
-export declare const ExportMethod: ({ buttonLabel, description, footnote, isAccessible, route, title, trackingId, }: ExportMethodProps) => JSX.Element;
+export declare const ExportMethod: ({ description, footnote, isAccessible, route, title, trackingId, }: ExportMethodProps) => JSX.Element;

package/lib/components/Export/components/ExportMethod/exportMethod.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tooltip, Typography } from "@mui/material";
+import { ChevronRightRounded } from "@mui/icons-material";
+import { CardActionArea, CardActions, CardContent, Tooltip, Typography, } from "@mui/material";
 import Link from "next/link";
 import { useDownloadStatus } from "../../../../hooks/useDownloadStatus";
+import { SVG_ICON_PROPS } from "../../../../styles/common/mui/svgIcon";
 import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
-import { FluidPaper } from "../../../common/Paper/paper.styles";
-import { SectionTitle } from "../../../common/Section/components/SectionTitle/sectionTitle";
-import { Section, SectionActions, SectionContent, } from "../../../common/Section/section.styles";
-import { ExportButton } from "./exportMethod.styles";
-export const ExportMethod = ({ buttonLabel, description, footnote, isAccessible = true, route, title, trackingId, }) => {
+import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
+import { StyledCard } from "./exportMethod.styles";
+export const ExportMethod = ({ description, footnote, isAccessible = true, route, title, trackingId, }) => {
     const { disabled, message } = useDownloadStatus();
-    return (_jsx(FluidPaper, { children: _jsxs(Section, { children: [_jsxs(SectionContent, { children: [_jsx(SectionTitle, { title: title }), _jsx(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES, children: description })] }), _jsx(SectionActions, { children: _jsx(Tooltip, { arrow: true, title: message, children: _jsx("span", { children: _jsx(ExportButton, { component: Link, disabled: disabled || !isAccessible, href: route, id: trackingId, children: buttonLabel }) }) }) }), footnote && (_jsx(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES, children: footnote }))] }) }));
+    return (_jsx(Tooltip, { arrow: true, title: message, children: _jsx(StyledCard, { component: FluidPaper, elevation: 1, children: _jsxs(CardActionArea, { component: Link, disabled: disabled || !isAccessible, href: route, id: trackingId, children: [_jsxs(CardContent, { children: [_jsx(Typography, { component: "h3", variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_XSMALL, children: title }), _jsx(Typography, { component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES, children: description }), footnote && (_jsx(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES, children: footnote }))] }), _jsx(CardActions, { children: _jsx(ChevronRightRounded, { color: SVG_ICON_PROPS.COLOR.INK_LIGHT }) })] }) }) }));
 };

package/lib/components/Export/components/ExportMethod/exportMethod.styles.d.ts

@@ -1,3 +1,2 @@
-export declare const ExportButton: import("@emotion/styled").StyledComponent<Omit<import("../../../common/Button/button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;
+import { Card } from "@mui/material";
+export declare const StyledCard: typeof Card;

package/lib/components/Export/components/ExportMethod/exportMethod.styles.js

@@ -1,5 +1,28 @@
 import styled from "@emotion/styled";
-import { ButtonPrimary } from "../../../common/Button/components/ButtonPrimary/buttonPrimary";
-export const ExportButton = styled(ButtonPrimary) `
-  text-transform: none; // overrides MuiButton theme text-transform "capitalize".
+import { Card } from "@mui/material";
+import { sectionPadding } from "../../../common/Section/section.styles";
+export const StyledCard = styled(Card) `
+  .MuiCardActionArea-root {
+    display: grid;
+    gap: 16px;
+    grid-template-columns: 1fr auto;
+    ${sectionPadding};
+    text-decoration: none;
+
+    &.Mui-disabled {
+      opacity: 0.6;
+    }
+
+    .MuiCardContent-root {
+      padding: 0;
+
+      h3 {
+        margin-bottom: 4px;
+      }
+    }
+
+    .MuiCardActions-root {
+      padding: 0;
+    }
+  }
 `;

package/lib/components/Export/components/ExportMethod/stories/exportMethod.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { ExportMethod } from "../exportMethod";
+declare const meta: Meta<typeof ExportMethod>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ExportMethodStory: Story;

package/lib/components/Export/components/ExportMethod/{exportMethod.stories.js → stories/exportMethod.stories.js}

@@ -1,18 +1,15 @@
-import { ExportMethod } from "./exportMethod";
+import { ExportMethod } from "../exportMethod";
 const meta = {
     argTypes: {
-        buttonLabel: { control: "text" },
         description: { control: "text" },
         route: { control: "text" },
         title: { control: "text" },
     },
     component: ExportMethod,
-    title: "Components/Section/Export/ExportMethod",
 };
 export default meta;
 export const ExportMethodStory = {
     args: {
-        buttonLabel: "Request curl Command",
         description: "Obtain a curl command for downloading the selected data.",
         route: "/request-curl-command",
         title: "Download Study Data and Metadata (Curl Command)",

package/lib/components/Layout/components/Footer/components/PoweredByCleverCanary/poweredByCleverCanary.js

@@ -13,5 +13,5 @@ import { Logo } from "../../../Header/components/Content/components/Logo/logo";
 export const PoweredByCleverCanary = ({ alt = "Powered by CleverCanary", className, ...props /* StaticImageProps */ }) => {
     if (!props.src)
         return null;
-    return (_jsx(Logo, { alt: alt, className: className, link: "https://www.clevercanary.com", src: props.src, target: ANCHOR_TARGET.BLANK }));
+    return (_jsx(Logo, { alt: alt, className: className, height: 32, link: "https://www.clevercanary.com", src: props.src, target: ANCHOR_TARGET.BLANK }));
 };

package/lib/views/ResearchView/assistant/assistant.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useChatState } from "../state/hooks/UseChatState/hook";
+import { Drawer } from "./components/Drawer/drawer";
 import { Form } from "./components/Form/form";
 import { Input } from "./components/Input/input";
 import { getPlaceholder } from "./components/Input/utils";
 import { Messages } from "./components/Messages/messages";
-import { Drawer } from "./components/Drawer/drawer";
 import { ToggleButtonGroup } from "./components/ToggleButtonGroup/toggleButtonGroup";
 /**
  * Renders the research assistant drawer.

package/lib/views/ResearchView/assistant/components/Form/form.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TEST_IDS } from "../../../../../tests/testIds";
 import { useQuery } from "../../../state/query/hooks/UseQuery/hook";
-import { FIELD_NAME } from "./constants";
 import { StyledForm } from "./form.styles";
 import { getPayload } from "./utils";
 /**
@@ -15,13 +14,6 @@ import { getPayload } from "./utils";
 export const Form = ({ children, className, status, }) => {
     const { onSubmit } = useQuery();
     return (_jsx(StyledForm, { className: className, "data-testid": TEST_IDS.RESEARCH_FORM, onSubmit: async (e) => {
-            await onSubmit(e, getPayload(e), {
-                onSettled: (form) => {
-                    const input = form.elements.namedItem(FIELD_NAME.AI_PROMPT);
-                    if (input instanceof HTMLElement)
-                        input.focus();
-                },
-                status,
-            });
+            await onSubmit(e, getPayload(e), { status });
         }, children: children }));
 };

package/lib/views/ResearchView/assistant/components/Input/hooks/UseControlledInput/hook.d.ts

@@ -0,0 +1,6 @@
+import { UseControlledInputProps } from "./types";
+/**
+ * Manages controlled input state with automatic clearing on form reset.
+ * @returns The controlled input state including value, onChange, setValue, and inputRef.
+ */
+export declare const useControlledInput: () => UseControlledInputProps;

package/lib/views/ResearchView/assistant/components/Input/hooks/UseControlledInput/hook.js

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+/**
+ * Manages controlled input state with automatic clearing on form reset.
+ * @returns The controlled input state including value, onChange, setValue, and inputRef.
+ */
+export const useControlledInput = () => {
+    const inputRef = useRef(null);
+    const [value, setValue] = useState("");
+    const onChange = useCallback((e) => {
+        setValue(e.target.value);
+    }, []);
+    useEffect(() => {
+        const form = inputRef.current?.form;
+        if (!form)
+            return;
+        const onReset = () => {
+            setValue("");
+            inputRef.current?.focus();
+        };
+        form.addEventListener("reset", onReset);
+        return () => {
+            form.removeEventListener("reset", onReset);
+        };
+    }, []);
+    return { inputRef, onChange, setValue, value };
+};

package/lib/views/ResearchView/assistant/components/Input/hooks/UseControlledInput/types.d.ts

@@ -0,0 +1,9 @@
+import { ChangeEvent, Dispatch, RefObject, SetStateAction } from "react";
+export type InputElement = HTMLInputElement | HTMLTextAreaElement;
+export type SetValue = Dispatch<SetStateAction<string>>;
+export interface UseControlledInputProps {
+    inputRef: RefObject<InputElement | null>;
+    onChange: (e: ChangeEvent<InputElement>) => void;
+    setValue: SetValue;
+    value: string;
+}

package/lib/views/ResearchView/assistant/components/Input/hooks/UseControlledInput/types.js

@@ -0,0 +1 @@
+export {};

package/lib/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/hook.d.ts

@@ -1,6 +1,8 @@
+import { SetValue } from "../UseControlledInput/types";
 import { UseKeyShortCutsProps } from "./types";
 /**
  * Provides a keydown handler that implements keyboard shortcuts for the assistant input.
+ * @param setValue - Setter for the controlled input value.
  * @returns An object containing the onKeyDown handler.
  */
-export declare const useKeyShortCuts: () => UseKeyShortCutsProps;
+export declare const useKeyShortCuts: (setValue: SetValue) => UseKeyShortCutsProps;

package/lib/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/hook.js

@@ -4,9 +4,10 @@ import { KEY } from "./constants";
 import { getHistory, handleArrowKey, handleEnterKey, handleEscapeKey, handleTabKey, } from "./utils";
 /**
  * Provides a keydown handler that implements keyboard shortcuts for the assistant input.
+ * @param setValue - Setter for the controlled input value.
  * @returns An object containing the onKeyDown handler.
  */
-export const useKeyShortCuts = () => {
+export const useKeyShortCuts = (setValue) => {
     const { state } = useChatState();
     const { messages } = state;
     const history = getHistory(messages);
@@ -22,11 +23,11 @@ export const useKeyShortCuts = () => {
         if (e.key === KEY.ENTER)
             return handleEnterKey(e);
         if (e.key === KEY.ESCAPE)
-            return handleEscapeKey(e, refs);
+            return handleEscapeKey(refs, setValue);
         if (e.key === KEY.ARROW_UP || e.key === KEY.ARROW_DOWN)
-            return handleArrowKey(e, history, refs);
+            return handleArrowKey(e, history, refs, setValue);
         if (e.key === KEY.TAB)
-            return handleTabKey(e);
-    }, [history]);
+            return handleTabKey(e, setValue);
+    }, [history, setValue]);
     return { onKeyDown };
 };

package/lib/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/types.d.ts

@@ -1,8 +1,10 @@
 import { KeyboardEvent, RefObject } from "react";
+import { InputElement } from "../UseControlledInput/types";
+export type KeyboardInputEvent = KeyboardEvent<InputElement>;
 export interface Refs {
     draftRef: RefObject<string>;
     historyIndexRef: RefObject<number>;
 }
 export interface UseKeyShortCutsProps {
-    onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown: (e: KeyboardInputEvent) => void;
 }

package/lib/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/utils.d.ts

@@ -1,6 +1,6 @@
-import { KeyboardEvent } from "react";
 import { Message } from "../../../../../state/types";
-import { Refs } from "./types";
+import { SetValue } from "../UseControlledInput/types";
+import { KeyboardInputEvent, Refs } from "./types";
 /**
  * Extracts the text of user messages from a list of messages and returns them in reverse order.
  * @param messages - An array of Message objects to extract user messages from.
@@ -12,21 +12,27 @@ export declare function getHistory(messages: Message[]): string[];
  * @param e - The keyboard event.
  * @param history - The history entries to navigate.
  * @param refs - Refs for draft text and history index.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export declare function handleArrowKey(e: KeyboardEvent<HTMLInputElement>, history: string[], refs: Refs): void;
+export declare function handleArrowKey(e: KeyboardInputEvent, history: string[], refs: Refs, setValue: SetValue): void;
 /**
  * Handles the Enter key press to submit the form, or allows newline on Shift+Enter.
  * @param e - The keyboard event.
+ * @returns Void.
  */
-export declare function handleEnterKey(e: KeyboardEvent<HTMLInputElement>): void;
+export declare function handleEnterKey(e: KeyboardInputEvent): void;
 /**
  * Handles the Escape key press to clear the input and reset history navigation.
- * @param e - The keyboard event.
  * @param refs - Refs for draft text and history index.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export declare function handleEscapeKey(e: KeyboardEvent<HTMLInputElement>, refs: Refs): void;
+export declare function handleEscapeKey(refs: Refs, setValue: SetValue): void;
 /**
  * Handles the Tab key press to auto-fill the input with the placeholder.
  * @param e - The keyboard event.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export declare function handleTabKey(e: KeyboardEvent<HTMLInputElement>): void;
+export declare function handleTabKey(e: KeyboardInputEvent, setValue: SetValue): void;

package/lib/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/utils.js

@@ -16,31 +16,33 @@ export function getHistory(messages) {
  * @param e - The keyboard event.
  * @param history - The history entries to navigate.
  * @param refs - Refs for draft text and history index.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export function handleArrowKey(e, history, refs) {
+export function handleArrowKey(e, history, refs, setValue) {
     const { draftRef, historyIndexRef } = refs;
-    const inputEl = e.currentTarget;
     if (e.key === KEY.ARROW_DOWN && historyIndexRef.current === -1) {
         return;
     }
     if (historyIndexRef.current === -1) {
-        draftRef.current = inputEl.value;
+        draftRef.current = e.currentTarget.value;
     }
     const currentIndex = historyIndexRef.current;
     const newIndex = e.key === KEY.ARROW_UP
         ? Math.min(currentIndex + 1, history.length - 1)
         : Math.max(currentIndex - 1, -1);
     if (newIndex === -1) {
-        inputEl.value = draftRef.current;
+        setValue(draftRef.current);
         historyIndexRef.current = -1;
         return;
     }
-    inputEl.value = history[newIndex] || "";
+    setValue(history[newIndex] || "");
     historyIndexRef.current = newIndex;
 }
 /**
  * Handles the Enter key press to submit the form, or allows newline on Shift+Enter.
  * @param e - The keyboard event.
+ * @returns Void.
  */
 export function handleEnterKey(e) {
     if (e.shiftKey)
@@ -51,24 +53,26 @@ export function handleEnterKey(e) {
 }
 /**
  * Handles the Escape key press to clear the input and reset history navigation.
- * @param e - The keyboard event.
  * @param refs - Refs for draft text and history index.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export function handleEscapeKey(e, refs) {
+export function handleEscapeKey(refs, setValue) {
     const { draftRef, historyIndexRef } = refs;
-    const inputEl = e.currentTarget;
-    inputEl.value = "";
+    setValue("");
     draftRef.current = "";
     historyIndexRef.current = -1;
 }
 /**
  * Handles the Tab key press to auto-fill the input with the placeholder.
  * @param e - The keyboard event.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export function handleTabKey(e) {
+export function handleTabKey(e, setValue) {
     const inputEl = e.currentTarget;
     if (inputEl.value)
         return;
     e.preventDefault();
-    inputEl.value = inputEl.placeholder;
+    setValue(inputEl.placeholder);
 }

package/lib/views/ResearchView/assistant/components/Input/input.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconButton, InputBase, Stack } from "@mui/material";
-import { INPUT_BASE_PROPS } from "./constants";
-import { StyledBox, StyledPaper } from "./input.styles";
 import { UpArrowIcon } from "../../../../../components/common/CustomIcon/components/UpArrowIcon/upArrowIcon";
 import { ICON_BUTTON_PROPS } from "../../../../../styles/common/mui/iconButton";
-import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
 import { STACK_PROPS } from "../../../../../styles/common/mui/stack";
+import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
+import { INPUT_BASE_PROPS } from "./constants";
+import { useControlledInput } from "./hooks/UseControlledInput/hook";
 import { useKeyShortCuts } from "./hooks/UseKeyShortCuts/hook";
+import { StyledBox, StyledPaper } from "./input.styles";
 /**
  * Renders an input component for the research panel.
  * @param props - Component props.
@@ -14,6 +15,7 @@ import { useKeyShortCuts } from "./hooks/UseKeyShortCuts/hook";
  * @returns Research panel input component.
  */
 export const Input = ({ disabled, ...props }) => {
-    const { onKeyDown } = useKeyShortCuts();
-    return (_jsx(StyledBox, { children: _jsxs(StyledPaper, { elevation: 0, children: [_jsx(InputBase, { ...INPUT_BASE_PROPS, onKeyDown: onKeyDown, ...props }), _jsx(Stack, { direction: STACK_PROPS.DIRECTION.ROW, gap: 2, children: _jsx(IconButton, { color: ICON_BUTTON_PROPS.COLOR.SECONDARY, disabled: disabled, size: ICON_BUTTON_PROPS.SIZE.XSMALL, type: "submit", children: _jsx(UpArrowIcon, { fontSize: SVG_ICON_PROPS.FONT_SIZE.SMALL }) }) })] }) }));
+    const { inputRef, onChange, setValue, value } = useControlledInput();
+    const { onKeyDown } = useKeyShortCuts(setValue);
+    return (_jsx(StyledBox, { children: _jsxs(StyledPaper, { elevation: 0, children: [_jsx(InputBase, { ...INPUT_BASE_PROPS, inputRef: inputRef, onChange: onChange, onKeyDown: onKeyDown, value: value, ...props }), _jsx(Stack, { direction: STACK_PROPS.DIRECTION.ROW, gap: 2, children: _jsx(IconButton, { color: ICON_BUTTON_PROPS.COLOR.SECONDARY, disabled: disabled, size: ICON_BUTTON_PROPS.SIZE.XSMALL, type: "submit", children: _jsx(UpArrowIcon, { fontSize: SVG_ICON_PROPS.FONT_SIZE.SMALL }) }) })] }) }));
 };

package/lib/views/ResearchView/assistant/components/Input/types.d.ts

@@ -1,2 +1,2 @@
 import { IconButtonProps, InputBaseProps } from "@mui/material";
-export type InputProps = InputBaseProps & Pick<IconButtonProps, "disabled">;
+export type InputProps = Omit<InputBaseProps, "onChange" | "value"> & Pick<IconButtonProps, "disabled">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "50.2.0",
+  "version": "50.4.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/Export/components/ExportMethod/exportMethod.styles.ts

@@ -1,6 +1,29 @@
 import styled from "@emotion/styled";
-import { ButtonPrimary } from "../../../common/Button/components/ButtonPrimary/buttonPrimary";
+import { Card } from "@mui/material";
+import { sectionPadding } from "../../../common/Section/section.styles";
 
-export const ExportButton = styled(ButtonPrimary)`
-  text-transform: none; // overrides MuiButton theme text-transform "capitalize".
-`;
+export const StyledCard = styled(Card)`
+  .MuiCardActionArea-root {
+    display: grid;
+    gap: 16px;
+    grid-template-columns: 1fr auto;
+    ${sectionPadding};
+    text-decoration: none;
+
+    &.Mui-disabled {
+      opacity: 0.6;
+    }
+
+    .MuiCardContent-root {
+      padding: 0;
+
+      h3 {
+        margin-bottom: 4px;
+      }
+    }
+
+    .MuiCardActions-root {
+      padding: 0;
+    }
+  }
+` as typeof Card;

package/src/components/Export/components/ExportMethod/exportMethod.tsx

@@ -1,20 +1,21 @@
-import { Tooltip, Typography } from "@mui/material";
+import { ChevronRightRounded } from "@mui/icons-material";
+import {
+  CardActionArea,
+  CardActions,
+  CardContent,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import Link from "next/link";
 import { JSX, ReactNode } from "react";
 import { useDownloadStatus } from "../../../../hooks/useDownloadStatus";
+import { SVG_ICON_PROPS } from "../../../../styles/common/mui/svgIcon";
 import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
-import { FluidPaper } from "../../../common/Paper/paper.styles";
-import { SectionTitle } from "../../../common/Section/components/SectionTitle/sectionTitle";
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-} from "../../../common/Section/section.styles";
+import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
 import { TrackingProps } from "../../../types";
-import { ExportButton } from "./exportMethod.styles";
+import { StyledCard } from "./exportMethod.styles";
 
 export interface ExportMethodProps extends TrackingProps {
-  buttonLabel: string;
   description: ReactNode;
   footnote?: ReactNode;
   isAccessible?: boolean;
@@ -23,7 +24,6 @@ export interface ExportMethodProps extends TrackingProps {
 }
 
 export const ExportMethod = ({
-  buttonLabel,
   description,
   footnote,
   isAccessible = true,
@@ -33,38 +33,42 @@ export const ExportMethod = ({
 }: ExportMethodProps): JSX.Element => {
   const { disabled, message } = useDownloadStatus();
   return (
-    <FluidPaper>
-      <Section>
-        <SectionContent>
-          <SectionTitle title={title} />
-          <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}>
-            {description}
-          </Typography>
-        </SectionContent>
-        <SectionActions>
-          <Tooltip arrow title={message}>
-            <span>
-              <ExportButton
-                component={Link}
-                disabled={disabled || !isAccessible}
-                href={route}
-                id={trackingId}
+    <Tooltip arrow title={message}>
+      <StyledCard component={FluidPaper} elevation={1}>
+        <CardActionArea
+          component={Link}
+          disabled={disabled || !isAccessible}
+          href={route}
+          id={trackingId}
+        >
+          <CardContent>
+            <Typography
+              component="h3"
+              variant={TYPOGRAPHY_PROPS.VARIANT.HEADING_XSMALL}
+            >
+              {title}
+            </Typography>
+            <Typography
+              component="div"
+              variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
+            >
+              {description}
+            </Typography>
+            {footnote && (
+              <Typography
+                color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+                component="div"
+                variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES}
               >
-                {buttonLabel}
-              </ExportButton>
-            </span>
-          </Tooltip>
-        </SectionActions>
-        {footnote && (
-          <Typography
-            color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-            component="div"
-            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES}
-          >
-            {footnote}
-          </Typography>
-        )}
-      </Section>
-    </FluidPaper>
+                {footnote}
+              </Typography>
+            )}
+          </CardContent>
+          <CardActions>
+            <ChevronRightRounded color={SVG_ICON_PROPS.COLOR.INK_LIGHT} />
+          </CardActions>
+        </CardActionArea>
+      </StyledCard>
+    </Tooltip>
   );
 };

package/src/components/Export/components/ExportMethod/{exportMethod.stories.tsx → stories/exportMethod.stories.tsx}

@@ -1,16 +1,14 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { ExportMethod } from "./exportMethod";
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { ExportMethod } from "../exportMethod";
 
-const meta = {
+const meta: Meta<typeof ExportMethod> = {
   argTypes: {
-    buttonLabel: { control: "text" },
     description: { control: "text" },
     route: { control: "text" },
     title: { control: "text" },
   },
   component: ExportMethod,
-  title: "Components/Section/Export/ExportMethod",
-} satisfies Meta<typeof ExportMethod>;
+};
 
 export default meta;
 
@@ -18,7 +16,6 @@ type Story = StoryObj<typeof meta>;
 
 export const ExportMethodStory: Story = {
   args: {
-    buttonLabel: "Request curl Command",
     description: "Obtain a curl command for downloading the selected data.",
     route: "/request-curl-command",
     title: "Download Study Data and Metadata (Curl Command)",

package/src/components/Layout/components/Footer/components/PoweredByCleverCanary/poweredByCleverCanary.tsx

@@ -22,6 +22,7 @@ export const PoweredByCleverCanary = ({
     <Logo
       alt={alt}
       className={className}
+      height={32}
       link="https://www.clevercanary.com"
       src={props.src}
       target={ANCHOR_TARGET.BLANK}

package/src/views/ResearchView/assistant/assistant.tsx

@@ -1,10 +1,10 @@
 import { JSX } from "react";
 import { useChatState } from "../state/hooks/UseChatState/hook";
+import { Drawer } from "./components/Drawer/drawer";
 import { Form } from "./components/Form/form";
 import { Input } from "./components/Input/input";
 import { getPlaceholder } from "./components/Input/utils";
 import { Messages } from "./components/Messages/messages";
-import { Drawer } from "./components/Drawer/drawer";
 import { ToggleButtonGroup } from "./components/ToggleButtonGroup/toggleButtonGroup";
 
 /**

package/src/views/ResearchView/assistant/components/Form/form.tsx

@@ -1,7 +1,6 @@
 import { JSX } from "react";
 import { TEST_IDS } from "../../../../../tests/testIds";
 import { useQuery } from "../../../state/query/hooks/UseQuery/hook";
-import { FIELD_NAME } from "./constants";
 import { StyledForm } from "./form.styles";
 import { FormProps } from "./types";
 import { getPayload } from "./utils";
@@ -25,13 +24,7 @@ export const Form = ({
       className={className}
       data-testid={TEST_IDS.RESEARCH_FORM}
       onSubmit={async (e) => {
-        await onSubmit(e, getPayload(e), {
-          onSettled: (form) => {
-            const input = form.elements.namedItem(FIELD_NAME.AI_PROMPT);
-            if (input instanceof HTMLElement) input.focus();
-          },
-          status,
-        });
+        await onSubmit(e, getPayload(e), { status });
       }}
     >
       {children}

package/src/views/ResearchView/assistant/components/Input/hooks/UseControlledInput/hook.ts

@@ -0,0 +1,33 @@
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from "react";
+import { InputElement, UseControlledInputProps } from "./types";
+
+/**
+ * Manages controlled input state with automatic clearing on form reset.
+ * @returns The controlled input state including value, onChange, setValue, and inputRef.
+ */
+export const useControlledInput = (): UseControlledInputProps => {
+  const inputRef = useRef<InputElement>(null);
+  const [value, setValue] = useState<string>("");
+
+  const onChange = useCallback((e: ChangeEvent<InputElement>): void => {
+    setValue(e.target.value);
+  }, []);
+
+  useEffect(() => {
+    const form = inputRef.current?.form;
+    if (!form) return;
+
+    const onReset = (): void => {
+      setValue("");
+      inputRef.current?.focus();
+    };
+
+    form.addEventListener("reset", onReset);
+
+    return (): void => {
+      form.removeEventListener("reset", onReset);
+    };
+  }, []);
+
+  return { inputRef, onChange, setValue, value };
+};

package/src/views/ResearchView/assistant/components/Input/hooks/UseControlledInput/types.ts

@@ -0,0 +1,12 @@
+import { ChangeEvent, Dispatch, RefObject, SetStateAction } from "react";
+
+export type InputElement = HTMLInputElement | HTMLTextAreaElement;
+
+export type SetValue = Dispatch<SetStateAction<string>>;
+
+export interface UseControlledInputProps {
+  inputRef: RefObject<InputElement | null>;
+  onChange: (e: ChangeEvent<InputElement>) => void;
+  setValue: SetValue;
+  value: string;
+}

package/src/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/hook.ts

@@ -1,7 +1,8 @@
-import { KeyboardEvent, useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
+import { SetValue } from "../UseControlledInput/types";
 import { useChatState } from "../../../../../state/hooks/UseChatState/hook";
 import { KEY } from "./constants";
-import { UseKeyShortCutsProps } from "./types";
+import { KeyboardInputEvent, UseKeyShortCutsProps } from "./types";
 import {
   getHistory,
   handleArrowKey,
@@ -12,9 +13,10 @@ import {
 
 /**
  * Provides a keydown handler that implements keyboard shortcuts for the assistant input.
+ * @param setValue - Setter for the controlled input value.
  * @returns An object containing the onKeyDown handler.
  */
-export const useKeyShortCuts = (): UseKeyShortCutsProps => {
+export const useKeyShortCuts = (setValue: SetValue): UseKeyShortCutsProps => {
   const { state } = useChatState();
   const { messages } = state;
 
@@ -30,15 +32,15 @@ export const useKeyShortCuts = (): UseKeyShortCutsProps => {
   }, [messages]);
 
   const onKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLInputElement>) => {
+    (e: KeyboardInputEvent) => {
       const refs = { draftRef, historyIndexRef };
       if (e.key === KEY.ENTER) return handleEnterKey(e);
-      if (e.key === KEY.ESCAPE) return handleEscapeKey(e, refs);
+      if (e.key === KEY.ESCAPE) return handleEscapeKey(refs, setValue);
       if (e.key === KEY.ARROW_UP || e.key === KEY.ARROW_DOWN)
-        return handleArrowKey(e, history, refs);
-      if (e.key === KEY.TAB) return handleTabKey(e);
+        return handleArrowKey(e, history, refs, setValue);
+      if (e.key === KEY.TAB) return handleTabKey(e, setValue);
     },
-    [history],
+    [history, setValue],
   );
 
   return { onKeyDown };

package/src/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/types.ts

@@ -1,4 +1,7 @@
 import { KeyboardEvent, RefObject } from "react";
+import { InputElement } from "../UseControlledInput/types";
+
+export type KeyboardInputEvent = KeyboardEvent<InputElement>;
 
 export interface Refs {
   draftRef: RefObject<string>;
@@ -6,5 +9,5 @@ export interface Refs {
 }
 
 export interface UseKeyShortCutsProps {
-  onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+  onKeyDown: (e: KeyboardInputEvent) => void;
 }

package/src/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/utils.ts

@@ -1,8 +1,8 @@
-import { KeyboardEvent } from "react";
 import { isUserMessage } from "../../../../../state/guards/guards";
 import { Message } from "../../../../../state/types";
-import { Refs } from "./types";
+import { SetValue } from "../UseControlledInput/types";
 import { KEY } from "./constants";
+import { KeyboardInputEvent, Refs } from "./types";
 
 /**
  * Extracts the text of user messages from a list of messages and returns them in reverse order.
@@ -21,21 +21,23 @@ export function getHistory(messages: Message[]): string[] {
  * @param e - The keyboard event.
  * @param history - The history entries to navigate.
  * @param refs - Refs for draft text and history index.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
 export function handleArrowKey(
-  e: KeyboardEvent<HTMLInputElement>,
+  e: KeyboardInputEvent,
   history: string[],
   refs: Refs,
+  setValue: SetValue,
 ): void {
   const { draftRef, historyIndexRef } = refs;
-  const inputEl = e.currentTarget;
 
   if (e.key === KEY.ARROW_DOWN && historyIndexRef.current === -1) {
     return;
   }
 
   if (historyIndexRef.current === -1) {
-    draftRef.current = inputEl.value;
+    draftRef.current = e.currentTarget.value;
   }
 
   const currentIndex = historyIndexRef.current;
@@ -45,20 +47,21 @@ export function handleArrowKey(
       : Math.max(currentIndex - 1, -1);
 
   if (newIndex === -1) {
-    inputEl.value = draftRef.current;
+    setValue(draftRef.current);
     historyIndexRef.current = -1;
     return;
   }
 
-  inputEl.value = history[newIndex] || "";
+  setValue(history[newIndex] || "");
   historyIndexRef.current = newIndex;
 }
 
 /**
  * Handles the Enter key press to submit the form, or allows newline on Shift+Enter.
  * @param e - The keyboard event.
+ * @returns Void.
  */
-export function handleEnterKey(e: KeyboardEvent<HTMLInputElement>): void {
+export function handleEnterKey(e: KeyboardInputEvent): void {
   if (e.shiftKey) return;
   e.preventDefault();
   const formEl = e.currentTarget.form;
@@ -67,16 +70,13 @@ export function handleEnterKey(e: KeyboardEvent<HTMLInputElement>): void {
 
 /**
  * Handles the Escape key press to clear the input and reset history navigation.
- * @param e - The keyboard event.
  * @param refs - Refs for draft text and history index.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export function handleEscapeKey(
-  e: KeyboardEvent<HTMLInputElement>,
-  refs: Refs,
-): void {
+export function handleEscapeKey(refs: Refs, setValue: SetValue): void {
   const { draftRef, historyIndexRef } = refs;
-  const inputEl = e.currentTarget;
-  inputEl.value = "";
+  setValue("");
   draftRef.current = "";
   historyIndexRef.current = -1;
 }
@@ -84,10 +84,12 @@ export function handleEscapeKey(
 /**
  * Handles the Tab key press to auto-fill the input with the placeholder.
  * @param e - The keyboard event.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export function handleTabKey(e: KeyboardEvent<HTMLInputElement>): void {
+export function handleTabKey(e: KeyboardInputEvent, setValue: SetValue): void {
   const inputEl = e.currentTarget;
   if (inputEl.value) return;
   e.preventDefault();
-  inputEl.value = inputEl.placeholder;
+  setValue(inputEl.placeholder);
 }

package/src/views/ResearchView/assistant/components/Input/input.tsx

@@ -1,13 +1,14 @@
 import { IconButton, InputBase, Stack } from "@mui/material";
 import { JSX } from "react";
-import { INPUT_BASE_PROPS } from "./constants";
-import { StyledBox, StyledPaper } from "./input.styles";
 import { UpArrowIcon } from "../../../../../components/common/CustomIcon/components/UpArrowIcon/upArrowIcon";
 import { ICON_BUTTON_PROPS } from "../../../../../styles/common/mui/iconButton";
-import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
 import { STACK_PROPS } from "../../../../../styles/common/mui/stack";
-import { InputProps } from "./types";
+import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
+import { INPUT_BASE_PROPS } from "./constants";
+import { useControlledInput } from "./hooks/UseControlledInput/hook";
 import { useKeyShortCuts } from "./hooks/UseKeyShortCuts/hook";
+import { StyledBox, StyledPaper } from "./input.styles";
+import { InputProps } from "./types";
 
 /**
  * Renders an input component for the research panel.
@@ -16,11 +17,19 @@ import { useKeyShortCuts } from "./hooks/UseKeyShortCuts/hook";
  * @returns Research panel input component.
  */
 export const Input = ({ disabled, ...props }: InputProps): JSX.Element => {
-  const { onKeyDown } = useKeyShortCuts();
+  const { inputRef, onChange, setValue, value } = useControlledInput();
+  const { onKeyDown } = useKeyShortCuts(setValue);
   return (
     <StyledBox>
       <StyledPaper elevation={0}>
-        <InputBase {...INPUT_BASE_PROPS} onKeyDown={onKeyDown} {...props} />
+        <InputBase
+          {...INPUT_BASE_PROPS}
+          inputRef={inputRef}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          value={value}
+          {...props}
+        />
         <Stack direction={STACK_PROPS.DIRECTION.ROW} gap={2}>
           <IconButton
             color={ICON_BUTTON_PROPS.COLOR.SECONDARY}

package/src/views/ResearchView/assistant/components/Input/types.ts

@@ -1,3 +1,4 @@
 import { IconButtonProps, InputBaseProps } from "@mui/material";
 
-export type InputProps = InputBaseProps & Pick<IconButtonProps, "disabled">;
+export type InputProps = Omit<InputBaseProps, "onChange" | "value"> &
+  Pick<IconButtonProps, "disabled">;

package/tests/research.useKeyShortCuts.test.ts

@@ -14,6 +14,7 @@ interface MockInputElement {
 
 // Mock useChatState
 const mockUseChatState = jest.fn();
+const mockSetValue = jest.fn();
 
 jest.unstable_mockModule(
   "../src/views/ResearchView/state/hooks/UseChatState/hook",
@@ -96,12 +97,13 @@ function setupMockState(messages: Message[]): void {
 describe("useKeyShortCuts", () => {
   beforeEach(() => {
     mockUseChatState.mockReset();
+    mockSetValue.mockReset();
     setupMockState([]);
   });
 
   describe("enter key", () => {
     it("should prevent default and submit form on Enter", () => {
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl("some query");
       const event = createMockKeyEvent("Enter", inputEl);
 
@@ -112,7 +114,7 @@ describe("useKeyShortCuts", () => {
     });
 
     it("should not prevent default on Shift+Enter", () => {
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl("some query");
       const event = createMockKeyEvent("Enter", inputEl, true);
 
@@ -125,13 +127,13 @@ describe("useKeyShortCuts", () => {
 
   describe("escape key", () => {
     it("should clear input value on Escape", () => {
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl("some text");
       const event = createMockKeyEvent("Escape", inputEl);
 
       result.current.onKeyDown(event);
 
-      expect(inputEl.value).toBe("");
+      expect(mockSetValue).toHaveBeenCalledWith("");
     });
   });
 
@@ -142,13 +144,13 @@ describe("useKeyShortCuts", () => {
         createPromptMessage("response"),
         createUserMessage("second query"),
       ]);
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl();
       const event = createMockKeyEvent("ArrowUp", inputEl);
 
       result.current.onKeyDown(event);
 
-      expect(inputEl.value).toBe("second query");
+      expect(mockSetValue).toHaveBeenCalledWith("second query");
     });
 
     it("should navigate through multiple history entries on ArrowUp", () => {
@@ -156,25 +158,25 @@ describe("useKeyShortCuts", () => {
         createUserMessage("first query"),
         createUserMessage("second query"),
       ]);
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl();
 
       result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
-      expect(inputEl.value).toBe("second query");
+      expect(mockSetValue).toHaveBeenLastCalledWith("second query");
 
       result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
-      expect(inputEl.value).toBe("first query");
+      expect(mockSetValue).toHaveBeenLastCalledWith("first query");
     });
 
     it("should clamp at oldest history entry on ArrowUp", () => {
       setupMockState([createUserMessage("only query")]);
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl();
 
       result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
       result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
 
-      expect(inputEl.value).toBe("only query");
+      expect(mockSetValue).toHaveBeenLastCalledWith("only query");
     });
 
     it("should navigate forward on ArrowDown and restore draft at index -1", () => {
@@ -182,63 +184,63 @@ describe("useKeyShortCuts", () => {
         createUserMessage("first query"),
         createUserMessage("second query"),
       ]);
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl("my draft");
 
       // Navigate up twice.
       result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
       result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
-      expect(inputEl.value).toBe("first query");
+      expect(mockSetValue).toHaveBeenLastCalledWith("first query");
 
       // Navigate down once.
       result.current.onKeyDown(createMockKeyEvent("ArrowDown", inputEl));
-      expect(inputEl.value).toBe("second query");
+      expect(mockSetValue).toHaveBeenLastCalledWith("second query");
 
       // Navigate down to restore draft.
       result.current.onKeyDown(createMockKeyEvent("ArrowDown", inputEl));
-      expect(inputEl.value).toBe("my draft");
+      expect(mockSetValue).toHaveBeenLastCalledWith("my draft");
     });
 
     it("should not navigate on ArrowDown when not browsing history", () => {
       setupMockState([createUserMessage("some query")]);
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl("current text");
       const event = createMockKeyEvent("ArrowDown", inputEl);
 
       result.current.onKeyDown(event);
 
-      expect(inputEl.value).toBe("current text");
+      expect(mockSetValue).not.toHaveBeenCalled();
     });
 
     it("should save draft before entering history", () => {
       setupMockState([createUserMessage("history entry")]);
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl("my draft text");
 
       // Navigate up to save draft and enter history.
       result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
-      expect(inputEl.value).toBe("history entry");
+      expect(mockSetValue).toHaveBeenLastCalledWith("history entry");
 
       // Navigate down to restore draft.
       result.current.onKeyDown(createMockKeyEvent("ArrowDown", inputEl));
-      expect(inputEl.value).toBe("my draft text");
+      expect(mockSetValue).toHaveBeenLastCalledWith("my draft text");
     });
   });
 
   describe("tab key", () => {
     it("should fill input with placeholder when input is empty", () => {
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl("", "Search for studies...");
       const event = createMockKeyEvent("Tab", inputEl);
 
       result.current.onKeyDown(event);
 
       expect(event.preventDefault).toHaveBeenCalled();
-      expect(inputEl.value).toBe("Search for studies...");
+      expect(mockSetValue).toHaveBeenCalledWith("Search for studies...");
     });
 
     it("should not prevent default when input has value", () => {
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl(
         "existing text",
         "Search for studies...",
@@ -248,7 +250,7 @@ describe("useKeyShortCuts", () => {
       result.current.onKeyDown(event);
 
       expect(event.preventDefault).not.toHaveBeenCalled();
-      expect(inputEl.value).toBe("existing text");
+      expect(mockSetValue).not.toHaveBeenCalled();
     });
   });
 });

package/lib/components/Export/components/ExportMethod/exportMethod.stories.d.ts

@@ -1,22 +0,0 @@
-import type { StoryObj } from "@storybook/nextjs-vite";
-declare const meta: {
-    argTypes: {
-        buttonLabel: {
-            control: "text";
-        };
-        description: {
-            control: "text";
-        };
-        route: {
-            control: "text";
-        };
-        title: {
-            control: "text";
-        };
-    };
-    component: ({ buttonLabel, description, footnote, isAccessible, route, title, trackingId, }: import("./exportMethod").ExportMethodProps) => import("react").JSX.Element;
-    title: string;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const ExportMethodStory: Story;