@databiosphere/findable-ui 49.0.0 → 49.1.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "49.0.0"
+  ".": "49.1.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [49.1.0](https://github.com/DataBiosphere/findable-ui/compare/v49.0.0...v49.1.0) (2026-02-28)
+
+
+### Features
+
+* add research mode with chat-driven dataset discovery ([#778](https://github.com/DataBiosphere/findable-ui/issues/778)) ([#800](https://github.com/DataBiosphere/findable-ui/issues/800)) ([a844aaf](https://github.com/DataBiosphere/findable-ui/commit/a844aaf2927c76e80e97aa2b9dd7d1929da9bdfa))
+
+
+### Bug Fixes
+
+* improve tooltip ux with delay and better placement ([#775](https://github.com/DataBiosphere/findable-ui/issues/775)) ([#776](https://github.com/DataBiosphere/findable-ui/issues/776)) ([2d60b92](https://github.com/DataBiosphere/findable-ui/commit/2d60b927f91d28eabc8177ac81aa8fb8c8107db2))
+
 ## [49.0.0](https://github.com/DataBiosphere/findable-ui/compare/v48.1.0...v49.0.0) (2026-02-17)
 
 

package/lib/common/ai/config/types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * AI configuration.
+ */
+export interface AiConfig {
+    enabled: boolean;
+    prompt?: AiPrompt;
+    routes: {
+        research: string;
+        search: string;
+    };
+    url: string;
+}
+export interface AiPrompt {
+    inputPlaceholder?: string;
+    suggestions?: AiSuggestions[];
+    text: string;
+}
+export interface AiSuggestions {
+    label: string;
+    query: string;
+    variant: "CHIP";
+}

package/lib/common/ai/config/types.js

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

package/lib/common/ai/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const FEATURE_FLAG: {
+    readonly CHAT: "chat";
+};

package/lib/common/ai/constants.js

@@ -0,0 +1,3 @@
+export const FEATURE_FLAG = {
+    CHAT: "chat",
+};

package/lib/components/Filter/components/FilterLabel/filterLabel.js

@@ -4,5 +4,5 @@ import { Tooltip } from "../../../DataDictionary/components/Tooltip/tooltip";
 import { StyledButton } from "./filterLabel.styles";
 export const FilterLabel = ({ annotation, count, disabled = false, isOpen, label, onClick, surfaceType, }) => {
     const filterLabel = count ? `${label}\xa0(${count})` : label; // When the count is present, a non-breaking space is used to prevent it from being on its own line
-    return (_jsx(Tooltip, { description: annotation?.description, title: annotation?.label, children: _jsx(StyledButton, { color: "inherit", disabled: disabled, endIcon: _jsx(ArrowDropDownRounded, { fontSize: "small" }), fullWidth: true, isOpen: isOpen, onClick: onClick, surfaceType: surfaceType, children: filterLabel }) }));
+    return (_jsx(Tooltip, { description: annotation?.description, enterDelay: 300, placement: "right", title: annotation?.label, children: _jsx(StyledButton, { color: "inherit", disabled: disabled, endIcon: _jsx(ArrowDropDownRounded, { fontSize: "small" }), fullWidth: true, isOpen: isOpen, onClick: onClick, surfaceType: surfaceType, children: filterLabel }) }));
 };

package/lib/components/Filter/components/FilterLabel/filterLabel.stories.d.ts

@@ -3,6 +3,9 @@ import { JSX } from "react";
 import { SURFACE_TYPE } from "../surfaces/types";
 declare const meta: {
     argTypes: {
+        annotation: {
+            control: "object";
+        };
         count: {
             control: "number";
         };

package/lib/components/Filter/components/FilterLabel/filterLabel.stories.js

@@ -3,6 +3,7 @@ import { SURFACE_TYPE } from "../surfaces/types";
 import { FilterLabel } from "./filterLabel";
 const meta = {
     argTypes: {
+        annotation: { control: "object" },
         count: { control: "number" },
         disabled: { control: "boolean" },
         isOpen: { control: "boolean" },
@@ -17,6 +18,10 @@ const meta = {
 export default meta;
 export const FilterLabelStory = {
     args: {
+        annotation: {
+            description: "This is a description of the filter label that provides additional context to the user.",
+            label: "Label",
+        },
         count: 123,
         disabled: false,
         isOpen: false,

package/lib/components/Filter/components/Filters/stories/constants.js

@@ -92,6 +92,10 @@ const PROCESSED = {
  * Biological Sex select category view
  */
 export const BIOLOGICAL_SEX = {
+    annotation: {
+        description: "The biological sex of the donor organism, typically determined by chromosomal composition.",
+        label: "Biological Sex",
+    },
     key: "biologicalSex",
     label: "Biological Sex",
     values: [MALE, FEMALE],
@@ -100,6 +104,10 @@ export const BIOLOGICAL_SEX = {
  * Genus Species select category view
  */
 export const GENUS_SPECIES = {
+    annotation: {
+        description: "The scientific name of the organism from which the sample was derived.",
+        label: "Genus Species",
+    },
     key: "genusSpecies",
     label: "Genus Species",
     values: [HOMO_SAPIENS, MUS_MUSCLES],
@@ -108,7 +116,11 @@ export const GENUS_SPECIES = {
  * Donor Count range category view
  */
 export const DONOR_COUNT = {
-    key: "Donor Count",
+    annotation: {
+        description: "The number of unique donors contributing to the dataset.",
+        label: "Donor Count",
+    },
+    key: "donorCount",
     label: "Donor Count",
     max: 200,
     min: 10,
@@ -119,6 +131,10 @@ export const DONOR_COUNT = {
  * File Format select category view
  */
 export const FILE_FORMAT = {
+    annotation: {
+        description: "The format of the file, such as BAM, CSV, FASTQ, or TSV, indicating how the data is structured.",
+        label: "File Format",
+    },
     key: "fileFormat",
     label: "File Format",
     values: [BAM, CSV, FASTQ, TSV],
@@ -127,6 +143,10 @@ export const FILE_FORMAT = {
  * File Type select category view
  */
 export const FILE_TYPE = {
+    annotation: {
+        description: "The type of file, indicating whether the data is raw or has been processed.",
+        label: "File Type",
+    },
     isDisabled: true,
     key: "fileType",
     label: "File Type",

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.styles.js

@@ -2,6 +2,8 @@ import styled from "@emotion/styled";
 import { Autocomplete } from "@mui/material";
 export const StyledAutocomplete = styled(Autocomplete) `
   &.MuiAutocomplete-root {
+    grid-column: 1 / -1;
+
     .MuiOutlinedInput-root {
       padding: 0 12px;
 

package/lib/components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Container for sidebar tools, including the mode toggle and filter controls.
+ * @deprecated - This styled component is deprecated and will be removed in a future release.
+ */
 export declare const SidebarTools: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/lib/components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles.js

@@ -1,5 +1,9 @@
 import styled from "@emotion/styled";
 import { bpUpMd } from "../../../../../../styles/common/mixins/breakpoints";
+/**
+ * Container for sidebar tools, including the mode toggle and filter controls.
+ * @deprecated - This styled component is deprecated and will be removed in a future release.
+ */
 export const SidebarTools = styled.div `
   display: grid;
   gap: 8px 0;

package/lib/components/common/Chip/components/Beta/beta.d.ts

@@ -0,0 +1,10 @@
+import { ChipProps } from "@mui/material";
+import { JSX } from "react";
+import { BaseComponentProps } from "../../../../types";
+/**
+ * Beta chip component to indicate features that are in beta.
+ * @param props - Component props.
+ * @param props.className - Classname.
+ * @returns Beta chip JSX element.
+ */
+export declare const Beta: ({ className, ...props }: BaseComponentProps & ChipProps) => JSX.Element;

package/lib/components/common/Chip/components/Beta/beta.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CHIP_PROPS } from "../../../../../styles/common/mui/chip";
+import { StyledChip } from "./beta.styles";
+/**
+ * Beta chip component to indicate features that are in beta.
+ * @param props - Component props.
+ * @param props.className - Classname.
+ * @returns Beta chip JSX element.
+ */
+export const Beta = ({ className, ...props }) => {
+    return (_jsx(StyledChip, { className: className, label: "Beta", size: CHIP_PROPS.SIZE.SMALL, ...props }));
+};

package/lib/components/common/Chip/components/Beta/beta.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material").ChipSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size" | "label" | "style" | "className" | "classes" | "children" | "disabled" | "sx" | "tabIndex" | "color" | "variant" | "slots" | "slotProps" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/common/Chip/components/Beta/beta.styles.js

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+import { Chip } from "@mui/material";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
+import { FONT } from "../../../../../styles/common/constants/font";
+export const StyledChip = styled(Chip) `
+  background-color: ${PALETTE.PRIMARY_LIGHTEST};
+  border-radius: 4px;
+  color: ${PALETTE.PRIMARY_MAIN};
+
+  .MuiChip-label {
+    font: ${FONT.BODY_SMALL_500};
+    padding: 0 5px;
+  }
+`;

package/lib/components/common/Chip/components/Beta/stories/beta.stories.d.ts

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

package/lib/components/common/Chip/components/Beta/stories/beta.stories.js

@@ -0,0 +1,6 @@
+import { Beta } from "../beta";
+const meta = {
+    component: Beta,
+};
+export default meta;
+export const DEFAULT = {};

package/lib/components/common/CustomIcon/components/UpArrowIcon/upArrowIcon.d.ts

@@ -0,0 +1,6 @@
+import { SvgIconProps } from "@mui/material";
+import { JSX } from "react";
+/**
+ * Custom up arrow icon.
+ */
+export declare const UpArrowIcon: ({ fontSize, viewBox, ...props }: SvgIconProps) => JSX.Element;

package/lib/components/common/CustomIcon/components/UpArrowIcon/upArrowIcon.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgIcon } from "@mui/material";
+/**
+ * Custom up arrow icon.
+ */
+export const UpArrowIcon = ({ fontSize = "xsmall", viewBox = "0 0 18 18", ...props /* SvgIconProps */ }) => {
+    return (_jsx(SvgIcon, { fontSize: fontSize, viewBox: viewBox, ...props, children: _jsx("path", { d: "M8.24985 6.60005L6.07485 8.77505C5.93735 8.91255 5.76235 8.9813 5.54985 8.9813C5.33735 8.9813 5.16235 8.91255 5.02485 8.77505C4.88735 8.63755 4.8186 8.46255 4.8186 8.25005C4.8186 8.03755 4.88735 7.86255 5.02485 7.72505L8.47485 4.27505C8.62485 4.12505 8.79985 4.05005 8.99985 4.05005C9.19985 4.05005 9.37485 4.12505 9.52485 4.27505L12.9749 7.72505C13.1124 7.86255 13.1811 8.03755 13.1811 8.25005C13.1811 8.46255 13.1124 8.63755 12.9749 8.77505C12.8374 8.91255 12.6624 8.9813 12.4499 8.9813C12.2374 8.9813 12.0624 8.91255 11.9249 8.77505L9.74985 6.60005V12.75C9.74985 12.9625 9.67798 13.1407 9.53423 13.2844C9.39048 13.4282 9.21235 13.5 8.99985 13.5C8.78735 13.5 8.60923 13.4282 8.46548 13.2844C8.32173 13.1407 8.24985 12.9625 8.24985 12.75V6.60005Z", fill: "currentColor" }) }));
+};

package/lib/components/common/Tabs/tabs.js

@@ -14,5 +14,5 @@ export const Tabs = ({ className, onTabChange, tabs, value, }) => {
  * @returns Tab label with optional count and tooltip.
  */
 function buildTabLabel(label, count, annotation) {
-    return (_jsx(Tooltip, { description: annotation?.description, title: annotation?.label, children: _jsx("span", { children: count ? `${label} (${count})` : label }) }));
+    return (_jsx(Tooltip, { description: annotation?.description, enterDelay: 300, title: annotation?.label, children: _jsx("span", { children: count ? `${label} (${count})` : label }) }));
 }

package/lib/components/common/ToggleButtonGroup/provider/context.d.ts

@@ -0,0 +1,2 @@
+import { ToggleButtonGroupContextProps } from "./types";
+export declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextProps<unknown>>;

package/lib/components/common/ToggleButtonGroup/provider/context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+export const ToggleButtonGroupContext = createContext({
+    onChange: undefined,
+    value: null,
+});

package/lib/components/common/ToggleButtonGroup/provider/hook.d.ts

@@ -0,0 +1,7 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+import { ToggleButtonGroupContextProps } from "./types";
+/**
+ * Returns the toggle button group context.
+ * @returns toggle button group context.
+ */
+export declare const useToggleButtonGroup: <T extends ToggleButtonGroupProps["value"]>() => ToggleButtonGroupContextProps<T>;

package/lib/components/common/ToggleButtonGroup/provider/hook.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { ToggleButtonGroupContext } from "./context";
+/**
+ * Returns the toggle button group context.
+ * @returns toggle button group context.
+ */
+export const useToggleButtonGroup = () => {
+    return useContext(ToggleButtonGroupContext);
+};

package/lib/components/common/ToggleButtonGroup/provider/provider.d.ts

@@ -0,0 +1,12 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+import { JSX } from "react";
+import { ToggleButtonGroupProviderProps } from "./types";
+/**
+ * ToggleButtonGroup provider component.
+ * Manages toggle button group state for child components.
+ * @param props - Component props.
+ * @param props.children - Child elements to render.
+ * @param props.initialValue - Initial value for the toggle button group.
+ * @returns ToggleButtonGroup provider component.
+ */
+export declare function ToggleButtonGroupProvider<T extends ToggleButtonGroupProps["value"]>({ children, initialValue, }: ToggleButtonGroupProviderProps<T>): JSX.Element;

package/lib/components/common/ToggleButtonGroup/provider/provider.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { ToggleButtonGroupContext } from "./context";
+/**
+ * ToggleButtonGroup provider component.
+ * Manages toggle button group state for child components.
+ * @param props - Component props.
+ * @param props.children - Child elements to render.
+ * @param props.initialValue - Initial value for the toggle button group.
+ * @returns ToggleButtonGroup provider component.
+ */
+export function ToggleButtonGroupProvider({ children, initialValue = null, }) {
+    const [value, setValue] = useState(initialValue);
+    const onChange = useCallback((_, value) => {
+        if (value === null)
+            return;
+        setValue(value);
+    }, []);
+    return (_jsx(ToggleButtonGroupContext.Provider, { value: { onChange, value }, children: typeof children === "function"
+            ? children({ onChange, value })
+            : children }));
+}

package/lib/components/common/ToggleButtonGroup/provider/types.d.ts

@@ -0,0 +1,9 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+import { ReactNode } from "react";
+export type ToggleButtonGroupContextProps<T extends ToggleButtonGroupProps["value"]> = Pick<ToggleButtonGroupProps, "onChange"> & {
+    value: T | null;
+};
+export type ToggleButtonGroupProviderProps<T extends ToggleButtonGroupProps["value"]> = {
+    children: ReactNode | ((props: ToggleButtonGroupContextProps<T>) => ReactNode);
+    initialValue?: T | null;
+};

package/lib/components/common/ToggleButtonGroup/provider/types.js

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

package/lib/config/entities.d.ts

@@ -14,6 +14,7 @@ import { ProviderId } from "../providers/authentication/common/types";
 import { ExploreState } from "../providers/exploreState";
 import { FileManifestState } from "../providers/fileManifestState";
 import { SystemStatus, SystemStatusResponse } from "../providers/systemStatus";
+import { AiConfig } from "../common/ai/config/types";
 /**
  * Interface to define the analytics configuration for a given site.
  */
@@ -291,6 +292,7 @@ interface TrackingConfig {
  * Interface that will hold the whole configuration for a given site.
  */
 export interface SiteConfig {
+    ai?: AiConfig;
     analytics?: AnalyticsConfig;
     appTitle: string;
     authentication?: AuthenticationConfig;

package/lib/hooks/ai/useAiRoutes/hook.d.ts

@@ -0,0 +1,6 @@
+import { AiConfig } from "../../../common/ai/config/types";
+/**
+ * Returns AI route configuration when the AI feature is enabled.
+ * @returns AI routes, or undefined if AI is not configured or enabled.
+ */
+export declare const useAiRoutes: () => Pick<AiConfig, "routes"> | undefined;

package/lib/hooks/ai/useAiRoutes/hook.js

@@ -0,0 +1,18 @@
+import { FEATURE_FLAG } from "../../../common/ai/constants";
+import { useConfig } from "../../useConfig";
+import { useFeatureFlag } from "../../useFeatureFlag/useFeatureFlag";
+/**
+ * Returns AI route configuration when the AI feature is enabled.
+ * @returns AI routes, or undefined if AI is not configured or enabled.
+ */
+export const useAiRoutes = () => {
+    const flagEnabled = useFeatureFlag(FEATURE_FLAG.CHAT);
+    const { config } = useConfig();
+    const { ai } = config;
+    if (!ai)
+        return;
+    const { enabled, routes } = ai;
+    if (enabled || flagEnabled) {
+        return { routes };
+    }
+};

package/lib/styles/common/mui/drawer.d.ts

@@ -0,0 +1,9 @@
+import { DrawerProps } from "@mui/material";
+type DrawerPropsOptions = {
+    ANCHOR: typeof ANCHOR;
+    VARIANT: typeof VARIANT;
+};
+declare const ANCHOR: Record<string, DrawerProps["anchor"]>;
+declare const VARIANT: Record<string, DrawerProps["variant"]>;
+export declare const DRAWER_PROPS: DrawerPropsOptions;
+export {};

package/lib/styles/common/mui/drawer.js

@@ -0,0 +1,15 @@
+const ANCHOR = {
+    BOTTOM: "bottom",
+    LEFT: "left",
+    RIGHT: "right",
+    TOP: "top",
+};
+const VARIANT = {
+    PERMANENT: "permanent",
+    PERSISTENT: "persistent",
+    TEMPORARY: "temporary",
+};
+export const DRAWER_PROPS = {
+    ANCHOR,
+    VARIANT,
+};

package/lib/styles/common/mui/inputBase.d.ts

@@ -0,0 +1,13 @@
+import { InputBaseProps } from "@mui/material";
+type InputBasePropsOptions = {
+    COLOR: typeof COLOR;
+    MARGIN: typeof MARGIN;
+    SIZE: typeof SIZE;
+    TYPE: typeof TYPE;
+};
+declare const COLOR: Record<string, InputBaseProps["color"]>;
+declare const MARGIN: Record<string, InputBaseProps["margin"]>;
+declare const SIZE: Record<string, InputBaseProps["size"]>;
+declare const TYPE: Record<string, InputBaseProps["type"]>;
+export declare const INPUT_BASE_PROPS: InputBasePropsOptions;
+export {};

package/lib/styles/common/mui/inputBase.js

@@ -0,0 +1,25 @@
+const COLOR = {
+    ERROR: "error",
+    INFO: "info",
+    PRIMARY: "primary",
+    SECONDARY: "secondary",
+    SUCCESS: "success",
+    WARNING: "warning",
+};
+const MARGIN = {
+    DENSE: "dense",
+    NONE: "none",
+};
+const SIZE = {
+    MEDIUM: "medium",
+    SMALL: "small",
+};
+const TYPE = {
+    TEXT: "text",
+};
+export const INPUT_BASE_PROPS = {
+    COLOR,
+    MARGIN,
+    SIZE,
+    TYPE,
+};

package/lib/styles/common/mui/stack.d.ts

@@ -0,0 +1,11 @@
+import { StackProps } from "@mui/material";
+type StackPropsOptions = {
+    ALIGN_ITEMS: typeof ALIGN_ITEMS;
+    DIRECTION: typeof DIRECTION;
+    FLEX_WRAP: typeof FLEX_WRAP;
+};
+declare const ALIGN_ITEMS: Record<string, StackProps["alignItems"]>;
+declare const DIRECTION: Record<string, StackProps["direction"]>;
+declare const FLEX_WRAP: Record<string, StackProps["flexWrap"]>;
+export declare const STACK_PROPS: StackPropsOptions;
+export {};

package/lib/styles/common/mui/stack.js

@@ -0,0 +1,22 @@
+const ALIGN_ITEMS = {
+    BASELINE: "baseline",
+    CENTER: "center",
+    FLEX_END: "flex-end",
+    FLEX_START: "flex-start",
+    STRETCH: "stretch",
+};
+const DIRECTION = {
+    COLUMN: "column",
+    COLUMN_REVERSE: "column-reverse",
+    ROW: "row",
+    ROW_REVERSE: "row-reverse",
+};
+const FLEX_WRAP = {
+    WRAP: "wrap",
+    WRAP_REVERSE: "wrap-reverse",
+};
+export const STACK_PROPS = {
+    ALIGN_ITEMS,
+    DIRECTION,
+    FLEX_WRAP,
+};

package/lib/tests/testIds.d.ts

@@ -12,7 +12,10 @@ export declare const TEST_IDS: {
     FILTER_SORT_BUTTON: string;
     FILTER_SORT_MENU: string;
     FILTER_TERM: string;
+    RESEARCH_FORM: string;
+    RESEARCH_PANEL: string;
     SEARCH_ALL_FILTERS: string;
+    SEARCH_PANEL: string;
     SIDEBAR: string;
     SIDEBAR_DRAWER: string;
     TABLE_FIRST_CELL: string;

package/lib/tests/testIds.js

@@ -12,7 +12,10 @@ export const TEST_IDS = {
     FILTER_SORT_BUTTON: "filter-sort-button",
     FILTER_SORT_MENU: "filter-sort-menu",
     FILTER_TERM: "filter-term",
+    RESEARCH_FORM: "research-form",
+    RESEARCH_PANEL: "research-panel",
     SEARCH_ALL_FILTERS: "search-all-filters",
+    SEARCH_PANEL: "search-panel",
     SIDEBAR: "sidebar",
     SIDEBAR_DRAWER: "sidebar-drawer",
     TABLE_FIRST_CELL: "table-first-cell",

package/lib/views/ExploreView/entityList/filters/components/ToggleButtonGroup/toggleButtonGroup.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from "react";
+/**
+ * ToggleButtonGroup component for navigating to ResearchView.
+ * Only navigates to ResearchView when the "Research" button is clicked, otherwise remains on ExploreView.
+ * @returns ToggleButtonGroup JSX element.
+ */
+export declare const ToggleButtonGroup: () => JSX.Element | null;

package/lib/views/ExploreView/entityList/filters/components/ToggleButtonGroup/toggleButtonGroup.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToggleButton } from "@mui/material";
+import { StyledBox } from "./toggleButtonGroup.styles";
+import Link from "next/link";
+import { useAiRoutes } from "../../../../../../hooks/ai/useAiRoutes/hook";
+import { StyledToggleButtonGroup } from "./toggleButtonGroup.styles";
+import { Beta } from "../../../../../../components/common/Chip/components/Beta/beta";
+/**
+ * ToggleButtonGroup component for navigating to ResearchView.
+ * Only navigates to ResearchView when the "Research" button is clicked, otherwise remains on ExploreView.
+ * @returns ToggleButtonGroup JSX element.
+ */
+export const ToggleButtonGroup = () => {
+    const { routes } = useAiRoutes() || {};
+    if (!routes)
+        return null;
+    return (_jsx(StyledBox, { children: _jsxs(StyledToggleButtonGroup, { exclusive: true, children: [_jsxs(ToggleButton, { component: Link, href: routes.research, value: "research", children: ["Research ", _jsx(Beta, {})] }), _jsx(ToggleButton, { selected: true, value: "search", children: "Search" })] }) }));
+};

package/lib/views/ExploreView/entityList/filters/components/ToggleButtonGroup/toggleButtonGroup.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledToggleButtonGroup: import("@emotion/styled").StyledComponent<import("@mui/material").ToggleButtonGroupProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/views/ExploreView/entityList/filters/components/ToggleButtonGroup/toggleButtonGroup.styles.js

@@ -0,0 +1,23 @@
+import styled from "@emotion/styled";
+import { Box, ToggleButtonGroup } from "@mui/material";
+import { bpDownMd } from "../../../../../../styles/common/mixins/breakpoints";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+export const StyledBox = styled(Box) `
+  margin-bottom: -16px;
+  padding: 16px;
+
+  ${bpDownMd} {
+    margin-bottom: 0;
+  }
+`;
+export const StyledToggleButtonGroup = styled(ToggleButtonGroup) `
+  .MuiToggleButton-root {
+    gap: 4px;
+    padding: 6px 16px;
+    text-transform: none;
+
+    &.Mui-disabled {
+      color: ${PALETTE.INK_LIGHT};
+    }
+  }
+`;

package/lib/views/ExploreView/entityList/filters/filters.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledStack: import("@emotion/styled").StyledComponent<import("@mui/material").StackOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/material").StackOwnProps> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledGrid: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/views/ExploreView/entityList/filters/filters.styles.js

@@ -0,0 +1,17 @@
+import styled from "@emotion/styled";
+import { Stack } from "@mui/material";
+import { bpDownMd } from "../../../../styles/common/mixins/breakpoints";
+export const StyledStack = styled(Stack) `
+  gap: 8px;
+  margin: 16px 0;
+  padding: 0 16px;
+
+  ${bpDownMd} {
+    margin: 8px 0;
+  }
+`;
+export const StyledGrid = styled.div `
+  display: grid;
+  gap: 16px;
+  grid-template-columns: 1fr auto;
+`;