@databiosphere/findable-ui 46.1.3 → 48.1.0

package/lib/components/Filter/components/Filter/components/DrawerTransition/drawerTransition.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Slide as MSlide } from "@mui/material";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 export const DrawerTransition = forwardRef(function DrawerTransition({ children, ...props /* Spread props to allow for Mui SlideProps specific prop overrides. */ }, ref) {
-    return (React.createElement(MSlide, { direction: "right", easing: "ease-out", ref: ref, unmountOnExit: true, ...props }, children));
+    return (_jsx(MSlide, { direction: "right", easing: "ease-out", ref: ref, unmountOnExit: true, ...props, children: children }));
 });

package/lib/components/Filter/components/Filter/filter.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 import { CategoryView } from "../../../../common/categories/views/types";
 import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";

package/lib/components/Filter/components/Filter/filter.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Grow } from "@mui/material";
-import React, { useState } from "react";
+import { useState } from "react";
 import { isRangeCategoryView } from "../../../../common/categories/views/range/typeGuards";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { FilterLabel } from "../FilterLabel/filterLabel";
@@ -58,10 +59,5 @@ export const Filter = ({ categorySection, categoryView, closeAncestor, onFilter,
         setIsOpen(true);
         trackFilterOpened?.({ category: categoryView.key });
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(FilterLabel, { annotation: categoryView.annotation, count: isRangeView ? undefined : categoryView.values.length, disabled: categoryView.isDisabled, isOpen: isOpen, label: categoryView.label, onClick: onOpenFilter, surfaceType: surfaceType }),
-        React.createElement(StyledPopover, { anchorPosition: anchorPosition, anchorReference: "anchorPosition", "data-testid": TEST_IDS.FILTER_POPOVER, marginThreshold: 0, onClose: onCloseFilters, open: isOpen, slotProps: slotProps, slots: { transition: TransitionComponent }, surfaceType: surfaceType, transitionDuration: TransitionDuration },
-            isDrawer && React.createElement(IconButton, { onClick: onCloseFilters }),
-            isRangeView ? (React.createElement(FilterRange, { categoryKey: categoryView.key, categoryLabel: categoryView.label, categorySection: categorySection, max: categoryView.max, min: categoryView.min, selectedMax: categoryView.selectedMax, selectedMin: categoryView.selectedMin, onCloseFilter: onCloseFilter, onFilter: onFilter, surfaceType: surfaceType, unit: categoryView.unit })) : (React.createElement(FilterMenu, { categoryKey: categoryView.key, categoryLabel: categoryView.label, categorySection: categorySection, onCloseFilter: onCloseFilter, onFilter: onFilter, surfaceType: surfaceType, values: categoryView.values }))),
-        tags));
+    return (_jsxs(_Fragment, { children: [_jsx(FilterLabel, { annotation: categoryView.annotation, count: isRangeView ? undefined : categoryView.values.length, disabled: categoryView.isDisabled, isOpen: isOpen, label: categoryView.label, onClick: onOpenFilter, surfaceType: surfaceType }), _jsxs(StyledPopover, { anchorPosition: anchorPosition, anchorReference: "anchorPosition", "data-testid": TEST_IDS.FILTER_POPOVER, marginThreshold: 0, onClose: onCloseFilters, open: isOpen, slotProps: slotProps, slots: { transition: TransitionComponent }, surfaceType: surfaceType, transitionDuration: TransitionDuration, children: [isDrawer && _jsx(IconButton, { onClick: onCloseFilters }), isRangeView ? (_jsx(FilterRange, { categoryKey: categoryView.key, categoryLabel: categoryView.label, categorySection: categorySection, max: categoryView.max, min: categoryView.min, selectedMax: categoryView.selectedMax, selectedMin: categoryView.selectedMin, onCloseFilter: onCloseFilter, onFilter: onFilter, surfaceType: surfaceType, unit: categoryView.unit })) : (_jsx(FilterMenu, { categoryKey: categoryView.key, categoryLabel: categoryView.label, categorySection: categorySection, onCloseFilter: onCloseFilter, onFilter: onFilter, surfaceType: surfaceType, values: categoryView.values }))] }), tags] }));
 };

package/lib/components/Filter/components/Filter/stories/args.js

@@ -1,4 +1,4 @@
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 import { DONOR_COUNT, GENUS_SPECIES } from "../../Filters/stories/constants";
 import { SURFACE_TYPE } from "../../surfaces/types";
 export const SELECT_ARGS = {

package/lib/components/Filter/components/Filter/stories/filter.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 import { Filter } from "../filter";
 declare const meta: Meta<typeof Filter>;
 export default meta;

package/lib/components/Filter/components/Filter/stories/filter.stories.js

@@ -1,12 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from "@mui/material";
-import React from "react";
 import { Filter } from "../filter";
 import { DISABLED_SELECT_ARGS, RANGE_ARGS, SELECT_ARGS } from "./args";
 const meta = {
     component: Filter,
     decorators: [
-        (Story) => (React.createElement(Box, { sx: { width: 248 } },
-            React.createElement(Story, null))),
+        (Story) => (_jsx(Box, { sx: { width: 248 }, children: _jsx(Story, {}) })),
     ],
 };
 export default meta;

package/lib/components/Filter/components/FilterCountChip/filterCountChip.d.ts

@@ -1,2 +1,3 @@
+import { JSX } from "react";
 import { FilterCountChipProps } from "./types";
 export declare const FilterCountChip: ({ className, count, ...props }: FilterCountChipProps) => JSX.Element | null;

package/lib/components/Filter/components/FilterCountChip/filterCountChip.js

@@ -1,8 +1,8 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { CHIP_PROPS } from "../../../../styles/common/mui/chip";
 import { StyledChip } from "./filterCountChip.styles";
 export const FilterCountChip = ({ className, count, ...props /* MuiChipProps */ }) => {
     if (!count)
         return null;
-    return (React.createElement(StyledChip, { className: className, color: CHIP_PROPS.COLOR.PRIMARY, component: "span", label: String(count), variant: CHIP_PROPS.VARIANT.FILLED, ...props }));
+    return (_jsx(StyledChip, { className: className, color: CHIP_PROPS.COLOR.PRIMARY, component: "span", label: String(count), variant: CHIP_PROPS.VARIANT.FILLED, ...props }));
 };

package/lib/components/Filter/components/FilterCountChip/filterCountChip.styles.d.ts

@@ -1,3 +1 @@
-export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material").ChipSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "label" | "style" | "size" | "className" | "classes" | "children" | "disabled" | "sx" | "tabIndex" | "color" | "variant" | "slots" | "slotProps" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+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"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/lib/components/Filter/components/FilterCountChip/stories/filterCountChip.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 import { FilterCountChip } from "../filterCountChip";
 declare const meta: Meta<typeof FilterCountChip>;
 export default meta;

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

@@ -1,4 +1,4 @@
-import { MouseEvent } from "react";
+import { JSX, MouseEvent } from "react";
 import { DataDictionaryAnnotation } from "../../../../common/entities";
 import { SURFACE_TYPE } from "../surfaces/types";
 export interface FilterLabelProps {

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

@@ -1,9 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ArrowDropDownRounded } from "@mui/icons-material";
-import React from "react";
 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 (React.createElement(Tooltip, { description: annotation?.description, title: annotation?.label },
-        React.createElement(StyledButton, { color: "inherit", disabled: disabled, endIcon: React.createElement(ArrowDropDownRounded, { fontSize: "small" }), fullWidth: true, isOpen: isOpen, onClick: onClick, surfaceType: surfaceType }, filterLabel)));
+    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 }) }));
 };

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

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import React from "react";
+import type { StoryObj } from "@storybook/nextjs-vite";
+import { JSX } from "react";
 import { SURFACE_TYPE } from "../surfaces/types";
 declare const meta: {
     argTypes: {
@@ -17,13 +17,13 @@ declare const meta: {
         };
     };
     component: ({ annotation, count, disabled, isOpen, label, onClick, surfaceType, }: import("./filterLabel").FilterLabelProps) => JSX.Element;
-    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         annotation?: import("../../../../common/entities").DataDictionaryAnnotation | undefined;
         count?: number | undefined;
         disabled?: boolean | undefined;
         isOpen: boolean;
         label: string;
-        onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+        onClick: (event: import("react").MouseEvent<HTMLButtonElement>) => void;
         surfaceType: SURFACE_TYPE;
     }>) => JSX.Element)[];
     title: string;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { SURFACE_TYPE } from "../surfaces/types";
 import { FilterLabel } from "./filterLabel";
 const meta = {
@@ -10,8 +10,7 @@ const meta = {
     },
     component: FilterLabel,
     decorators: [
-        (Story) => (React.createElement("div", { style: { padding: "8px 12px 8px 16px", width: 264 } },
-            React.createElement(Story, null))),
+        (Story) => (_jsx("div", { style: { padding: "8px 12px 8px 16px", width: 264 }, children: _jsx(Story, {}) })),
     ],
     title: "Components/Filter/FilterLabel",
 };

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

@@ -1,6 +1,4 @@
 import { FilterLabelProps } from "./filterLabel";
-export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "size" | "href" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableFocusRipple" | "loading" | "loadingIndicator" | "variant" | "disableElevation" | "endIcon" | "fullWidth" | "loadingPosition" | "startIcon"> & {
+export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "size" | "href" | "style" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableFocusRipple" | "loading" | "loadingIndicator" | "variant" | "disableElevation" | "endIcon" | "fullWidth" | "loadingPosition" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 } & Pick<FilterLabelProps, "isOpen" | "surfaceType">, {}, {}>;

package/lib/components/Filter/components/FilterList/filterList.styles.d.ts

@@ -1,7 +1,5 @@
-export declare const MuiListItemButtonRoot: import("@emotion/react").SerializedStyles;
-export declare const MuiListItemTextRoot: import("@emotion/react").SerializedStyles;
-export declare const StyledList: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
-    ref?: ((instance: HTMLUListElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLUListElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "sx" | "dense" | "disablePadding" | "subheader"> & {
+export declare const MuiListItemButtonRoot: import("@emotion/utils").SerializedStyles;
+export declare const MuiListItemTextRoot: import("@emotion/utils").SerializedStyles;
+export declare const StyledList: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "style" | "className" | "classes" | "children" | "sx" | "dense" | "disablePadding" | "subheader"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Filter/components/FilterMenu/filterMenu.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { CategoryKey, SelectCategoryValueView } from "../../../../common/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { FilterMenuSearchMatch } from "../../common/entities";

package/lib/components/Filter/components/FilterMenu/filterMenu.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { MAX_DISPLAYABLE_LIST_ITEMS } from "../../common/constants";
 import { getSortMatchesFn } from "../../common/utils";
 import { StyledList } from "../FilterList/filterList.styles";
@@ -13,12 +14,7 @@ export const FilterMenu = ({ categoryKey, categoryLabel, categorySection, menuWi
     const isSearchable = surfaceType === SURFACE_TYPE.DRAWER ||
         values.length > MAX_DISPLAYABLE_LIST_ITEMS;
     const matchedItems = applyMenuFilter(values, isSearchable ? searchTerm : "");
-    return (React.createElement(FilterView, { menuWidth: menuWidth },
-        React.createElement(FilterViewTools, { surfaceType: surfaceType },
-            surfaceType === SURFACE_TYPE.DRAWER && (React.createElement(ButtonBase, { onClick: onCloseFilter }, categoryLabel)),
-            isSearchable && (React.createElement(FilterMenuSearch, { searchTerm: searchTerm, setSearchTerm: setSearchTerm, surfaceType: surfaceType }))),
-        matchedItems.length > 0 ? (React.createElement(VariableSizeList, { categorySection: categorySection, categoryKey: categoryKey, onFilter: onFilter, matchedItems: matchedItems, surfaceType: surfaceType })) : (React.createElement(StyledList, null,
-            React.createElement(FilterNoResultsFound, { onClearSearchTerm: () => setSearchTerm("") })))));
+    return (_jsxs(FilterView, { menuWidth: menuWidth, children: [_jsxs(FilterViewTools, { surfaceType: surfaceType, children: [surfaceType === SURFACE_TYPE.DRAWER && (_jsx(ButtonBase, { onClick: onCloseFilter, children: categoryLabel })), isSearchable && (_jsx(FilterMenuSearch, { searchTerm: searchTerm, setSearchTerm: setSearchTerm, surfaceType: surfaceType }))] }), matchedItems.length > 0 ? (_jsx(VariableSizeList, { categorySection: categorySection, categoryKey: categoryKey, onFilter: onFilter, matchedItems: matchedItems, surfaceType: surfaceType })) : (_jsx(StyledList, { children: _jsx(FilterNoResultsFound, { onClearSearchTerm: () => setSearchTerm("") }) }))] }));
 };
 export function applyMenuFilter(values, searchTerm) {
     return getSortMatchesFn(searchTerm)(values);

package/lib/components/Filter/components/FilterMenu/filterMenu.stories.d.ts

@@ -1,4 +1,5 @@
-import { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/nextjs-vite";
+import { JSX } from "react";
 import { SURFACE_TYPE } from "../surfaces/types";
 declare const meta: {
     argTypes: {
@@ -22,7 +23,7 @@ declare const meta: {
         };
     };
     component: ({ categoryKey, categoryLabel, categorySection, menuWidth, onCloseFilter, onFilter, surfaceType, values, }: import("./filterMenu").FilterMenuProps) => JSX.Element;
-    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         categoryKey: import("../../../../common/entities").CategoryKey;
         categoryLabel: string;
         categorySection?: string | undefined;

package/lib/components/Filter/components/FilterMenu/filterMenu.stories.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { SURFACE_TYPE } from "../surfaces/types";
 import { FilterMenu } from "./filterMenu";
 const meta = {
@@ -10,8 +10,7 @@ const meta = {
     },
     component: FilterMenu,
     decorators: [
-        (Story) => (React.createElement("div", { style: { backgroundColor: "white" } },
-            React.createElement(Story, null))),
+        (Story) => (_jsx("div", { style: { backgroundColor: "white" }, children: _jsx(Story, {}) })),
     ],
     title: "Components/Filter/FilterMenu",
 };

package/lib/components/Filter/components/FilterMenuSearch/filterMenuSearch.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { SetSearchTermFn } from "../../common/entities";
 import { SURFACE_TYPE } from "../surfaces/types";
 export interface FilterMenuSearchProps {

package/lib/components/Filter/components/FilterMenuSearch/filterMenuSearch.js

@@ -1,6 +1,6 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { SearchIcon } from "../../../common/CustomIcon/components/SearchIcon/searchIcon";
 import { StyledInput as Search } from "./filterMenuSearch.styles";
 export const FilterMenuSearch = ({ searchTerm, setSearchTerm, surfaceType, }) => {
-    return (React.createElement(Search, { placeholder: "Search", searchTerm: searchTerm, setSearchTerm: setSearchTerm, StartAdornment: SearchIcon, surfaceType: surfaceType }));
+    return (_jsx(Search, { placeholder: "Search", searchTerm: searchTerm, setSearchTerm: setSearchTerm, StartAdornment: SearchIcon, surfaceType: surfaceType }));
 };

package/lib/components/Filter/components/FilterNoResultsFound/filterNoResultsFound.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 type OnClearSearchTermFn = () => void;
 export interface FilterNoResultsFoundProps {
     onClearSearchTerm?: OnClearSearchTermFn;
 }
-export declare const FilterNoResultsFound: React.ForwardRefExoticComponent<FilterNoResultsFoundProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FilterNoResultsFound: import("react").ForwardRefExoticComponent<FilterNoResultsFoundProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/Filter/components/FilterNoResultsFound/filterNoResultsFound.js

@@ -1,11 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from "@mui/material";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
 import { FilterNoResultsFound as FilterNoResults } from "./filterNoResultsFound.styles";
 export const FilterNoResultsFound = forwardRef(function FilterNoResultsFound({ onClearSearchTerm }, ref) {
-    return (React.createElement(FilterNoResults, { ref: ref },
-        React.createElement(Typography, { component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_500 }, "No results found!"),
-        React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", mb: onClearSearchTerm ? 2 : 0, mt: 1, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, "Try adjusting your search or filter to find what you\u2019re looking for."),
-        onClearSearchTerm && (React.createElement(ButtonTextPrimary, { onClick: onClearSearchTerm }, "Clear Search"))));
+    return (_jsxs(FilterNoResults, { ref: ref, children: [_jsx(Typography, { component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_500, children: "No results found!" }), _jsx(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", mb: onClearSearchTerm ? 2 : 0, mt: 1, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400, children: "Try adjusting your search or filter to find what you\u2019re looking for." }), onClearSearchTerm && (_jsx(ButtonTextPrimary, { onClick: onClearSearchTerm, children: "Clear Search" }))] }));
 });

package/lib/components/Filter/components/FilterRange/filterRange.d.ts

@@ -1,2 +1,3 @@
+import { JSX } from "react";
 import { FilterRangeProps } from "./types";
 export declare const FilterRange: ({ categoryKey, categoryLabel, categorySection, className, max, min, onCloseFilter, onFilter, selectedMax, selectedMin, surfaceType, unit, }: FilterRangeProps) => JSX.Element;

package/lib/components/Filter/components/FilterRange/filterRange.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Divider, FormControl, FormHelperText, Grid, InputLabel, OutlinedInput, ToggleButton, ToggleButtonGroup, } from "@mui/material";
-import React, { Fragment } from "react";
+import { Fragment } from "react";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { FilterViewTools } from "../FilterMenu/filterMenu.styles";
 import { ButtonBase } from "../surfaces/drawer/components/ButtonBase/buttonBase";
@@ -13,42 +14,19 @@ import { getRangeOperator } from "./utils";
 export const FilterRange = ({ categoryKey, categoryLabel, categorySection, className, max, min, onCloseFilter, onFilter, selectedMax, selectedMin, surfaceType, unit, }) => {
     const rangeOperator = getRangeOperator({ selectedMax, selectedMin });
     const { clearErrors, formState: { errors }, handleSubmit, onChange, value, } = useFilterRange(rangeOperator);
-    return (React.createElement(Fragment, null,
-        surfaceType === SURFACE_TYPE.DRAWER && (React.createElement(FilterViewTools, { surfaceType: surfaceType },
-            React.createElement(ButtonBase, { onClick: onCloseFilter }, categoryLabel))),
-        React.createElement(StyledForm, { className: className, "data-testid": TEST_IDS.FILTER_RANGE, onSubmit: handleSubmit(onFilter, {
-                categoryKey,
-                categorySection,
-            }), surfaceType: surfaceType },
-            React.createElement(ToggleButtonGroup, { ...TOGGLE_BUTTON_GROUP_PROPS, onChange: (e, value) => {
-                    clearErrors();
-                    onChange?.(e, value);
-                }, value: value },
-                React.createElement(ToggleButton, { value: RANGE_OPERATOR.BETWEEN }, "Between"),
-                React.createElement(ToggleButton, { value: RANGE_OPERATOR.LESS_THAN }, "Less Than"),
-                React.createElement(Divider, { ...DIVIDER_PROPS }),
-                React.createElement(ToggleButton, { value: RANGE_OPERATOR.GREATER_THAN }, "Greater Than")),
-            React.createElement(Grid, null,
-                value !== RANGE_OPERATOR.LESS_THAN && (React.createElement(FormControl, { error: !!errors[FIELD_NAME.MIN] },
-                    React.createElement(InputLabel, { ...INPUT_LABEL_PROPS, htmlFor: FIELD_NAME.MIN },
-                        value === RANGE_OPERATOR.BETWEEN ? "Min" : "Greater Than",
-                        unit && ` (${unit})`),
-                    React.createElement(OutlinedInput, { ...INPUT_PROPS, defaultValue: selectedMin, id: FIELD_NAME.MIN, name: FIELD_NAME.MIN, onFocus: clearErrors, placeholder: "eg. 1" }),
-                    React.createElement(FormHelperText, null, errors[FIELD_NAME.MIN]
-                        ? errors[FIELD_NAME.MIN]
-                        : value === RANGE_OPERATOR.BETWEEN
-                            ? `Min allowed: ${min}`
-                            : `Allowed values: \u2265 ${min} and \u2264 ${max}`))),
-                value === RANGE_OPERATOR.BETWEEN && React.createElement(Divider, null),
-                value !== RANGE_OPERATOR.GREATER_THAN && (React.createElement(FormControl, { error: !!errors[FIELD_NAME.MAX] },
-                    React.createElement(InputLabel, { ...INPUT_LABEL_PROPS, htmlFor: FIELD_NAME.MAX },
-                        value === RANGE_OPERATOR.BETWEEN ? "Max" : "Less Than",
-                        unit && ` (${unit})`),
-                    React.createElement(OutlinedInput, { ...INPUT_PROPS, defaultValue: selectedMax, id: FIELD_NAME.MAX, name: FIELD_NAME.MAX, onFocus: clearErrors, placeholder: "eg. 20" }),
-                    React.createElement(FormHelperText, { color: "inkLight" }, errors[FIELD_NAME.MAX]
-                        ? errors[FIELD_NAME.MAX]
-                        : value === RANGE_OPERATOR.BETWEEN
-                            ? `Max allowed: ${max}`
-                            : `Allowed values: \u2265 ${min} and \u2264 ${max}`)))),
-            React.createElement(Button, { ...BUTTON_PROPS }, "Filter"))));
+    return (_jsxs(Fragment, { children: [surfaceType === SURFACE_TYPE.DRAWER && (_jsx(FilterViewTools, { surfaceType: surfaceType, children: _jsx(ButtonBase, { onClick: onCloseFilter, children: categoryLabel }) })), _jsxs(StyledForm, { className: className, "data-testid": TEST_IDS.FILTER_RANGE, onSubmit: handleSubmit(onFilter, {
+                    categoryKey,
+                    categorySection,
+                }), surfaceType: surfaceType, children: [_jsxs(ToggleButtonGroup, { ...TOGGLE_BUTTON_GROUP_PROPS, onChange: (e, value) => {
+                            clearErrors();
+                            onChange?.(e, value);
+                        }, value: value, children: [_jsx(ToggleButton, { value: RANGE_OPERATOR.BETWEEN, children: "Between" }), _jsx(ToggleButton, { value: RANGE_OPERATOR.LESS_THAN, children: "Less Than" }), _jsx(Divider, { ...DIVIDER_PROPS }), _jsx(ToggleButton, { value: RANGE_OPERATOR.GREATER_THAN, children: "Greater Than" })] }), _jsxs(Grid, { children: [value !== RANGE_OPERATOR.LESS_THAN && (_jsxs(FormControl, { error: !!errors[FIELD_NAME.MIN], children: [_jsxs(InputLabel, { ...INPUT_LABEL_PROPS, htmlFor: FIELD_NAME.MIN, children: [value === RANGE_OPERATOR.BETWEEN ? "Min" : "Greater Than", unit && ` (${unit})`] }), _jsx(OutlinedInput, { ...INPUT_PROPS, defaultValue: selectedMin, id: FIELD_NAME.MIN, name: FIELD_NAME.MIN, onFocus: clearErrors, placeholder: "eg. 1" }), _jsx(FormHelperText, { children: errors[FIELD_NAME.MIN]
+                                            ? errors[FIELD_NAME.MIN]
+                                            : value === RANGE_OPERATOR.BETWEEN
+                                                ? `Min allowed: ${min}`
+                                                : `Allowed values: \u2265 ${min} and \u2264 ${max}` })] })), value === RANGE_OPERATOR.BETWEEN && _jsx(Divider, {}), value !== RANGE_OPERATOR.GREATER_THAN && (_jsxs(FormControl, { error: !!errors[FIELD_NAME.MAX], children: [_jsxs(InputLabel, { ...INPUT_LABEL_PROPS, htmlFor: FIELD_NAME.MAX, children: [value === RANGE_OPERATOR.BETWEEN ? "Max" : "Less Than", unit && ` (${unit})`] }), _jsx(OutlinedInput, { ...INPUT_PROPS, defaultValue: selectedMax, id: FIELD_NAME.MAX, name: FIELD_NAME.MAX, onFocus: clearErrors, placeholder: "eg. 20" }), _jsx(FormHelperText, { color: "inkLight", children: errors[FIELD_NAME.MAX]
+                                            ? errors[FIELD_NAME.MAX]
+                                            : value === RANGE_OPERATOR.BETWEEN
+                                                ? `Max allowed: ${max}`
+                                                : `Allowed values: \u2265 ${min} and \u2264 ${max}` })] }))] }), _jsx(Button, { ...BUTTON_PROPS, children: "Filter" })] })] }));
 };

package/lib/components/Filter/components/FilterRange/stories/args.js

@@ -1,4 +1,4 @@
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 import { SURFACE_TYPE } from "../../surfaces/types";
 export const DEFAULT_ARGS = {
     categoryKey: "Weight",

package/lib/components/Filter/components/FilterRange/stories/filterRange.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 import { FilterRange } from "../filterRange";
 declare const meta: Meta<typeof FilterRange>;
 export default meta;

package/lib/components/Filter/components/FilterTag/filterTag.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 export interface FilterTagProps {
     label: string;
     onRemove: () => void;

package/lib/components/Filter/components/FilterTag/filterTag.js

@@ -1,6 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { CloseRounded } from "@mui/icons-material";
 import { Chip, Tooltip } from "@mui/material";
-import React, { useRef } from "react";
+import { useRef } from "react";
 import { SupersededTag } from "./filterTag.styles";
 const DEFAULT_SLOT_PROPS = {
     popper: {
@@ -23,6 +24,5 @@ export const FilterTag = ({ label, onRemove, superseded, }) => {
     const tagRef = useRef(null);
     const tagLabelElement = tagRef.current?.querySelector(".MuiChip-label");
     const isOverflowed = (tagLabelElement?.offsetWidth ?? 0) < (tagLabelElement?.scrollWidth ?? 0);
-    return (React.createElement(Tooltip, { arrow: true, disableInteractive: true, slotProps: DEFAULT_SLOT_PROPS, title: isOverflowed ? label : null },
-        React.createElement(Tag, { clickable: false, color: "primary", deleteIcon: React.createElement(CloseRounded, { color: "inherit" }), label: label, onClick: onRemove, onDelete: onRemove, ref: tagRef, variant: "filterTag" })));
+    return (_jsx(Tooltip, { arrow: true, disableInteractive: true, slotProps: DEFAULT_SLOT_PROPS, title: isOverflowed ? label : null, children: _jsx(Tag, { clickable: false, color: "primary", deleteIcon: _jsx(CloseRounded, { color: "inherit" }), label: label, onClick: onRemove, onDelete: onRemove, ref: tagRef, variant: "filterTag" }) }));
 };

package/lib/components/Filter/components/FilterTag/filterTag.styles.d.ts

@@ -1,5 +1,3 @@
-export declare const SupersededTag: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material").ChipSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "label" | "style" | "size" | "className" | "classes" | "children" | "disabled" | "sx" | "tabIndex" | "color" | "variant" | "slots" | "slotProps" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & {
+export declare const SupersededTag: 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/Filter/components/FilterTag/stories/args.js

@@ -1,5 +1,5 @@
-import { fn } from "@storybook/test";
-import { LOREM_IPSUM } from "storybook/loremIpsum";
+import { fn } from "storybook/test";
+import { LOREM_IPSUM } from "../../../../../storybook/loremIpsum";
 export const DEFAULT_ARGS = {
     label: "male",
     onRemove: fn(),

package/lib/components/Filter/components/FilterTag/stories/filterTag.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 import { FilterTag } from "../filterTag";
 declare const meta: Meta<typeof FilterTag>;
 export default meta;

package/lib/components/Filter/components/FilterTag/stories/filterTag.stories.js

@@ -1,12 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from "@mui/material";
-import React from "react";
 import { FilterTag } from "../filterTag";
 import { DEFAULT_ARGS, WITH_ELLIPSIS_ARGS, WITH_RANGE_ARGS } from "./args";
 const meta = {
     component: FilterTag,
     decorators: [
-        (Story) => (React.createElement(Box, { sx: { width: 232 } },
-            React.createElement(Story, null))),
+        (Story) => (_jsx(Box, { sx: { width: 232 }, children: _jsx(Story, {}) })),
     ],
 };
 export default meta;

package/lib/components/Filter/components/FilterTags/filterTags.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { CategoryTag } from "../../../../common/entities";
 export interface FilterTagsProps {
     tags?: CategoryTag[];

package/lib/components/Filter/components/FilterTags/filterTags.js

@@ -1,6 +1,6 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { FilterTag as Tag } from "../FilterTag/filterTag";
 import { FilterTags as Tags } from "./filterTags.styles";
 export const FilterTags = ({ tags }) => {
-    return tags && tags.length ? (React.createElement(Tags, null, tags.map(({ label, onRemove, superseded }, t) => (React.createElement(Tag, { key: `${label}${t}`, label: label, onRemove: onRemove, superseded: superseded }))))) : null;
+    return tags && tags.length ? (_jsx(Tags, { children: tags.map(({ label, onRemove, superseded }, t) => (_jsx(Tag, { label: label, onRemove: onRemove, superseded: superseded }, `${label}${t}`))) })) : null;
 };

package/lib/components/Filter/components/FilterTags/filterTags.stories.d.ts

@@ -1,4 +1,5 @@
-import { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/nextjs-vite";
+import { JSX } from "react";
 declare const meta: {
     argTypes: {
         tags: {
@@ -8,7 +9,7 @@ declare const meta: {
         };
     };
     component: ({ tags }: import("./filterTags").FilterTagsProps) => JSX.Element | null;
-    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         tags?: import("../../../../common/entities").CategoryTag[] | undefined;
     }>) => JSX.Element)[];
     title: string;

package/lib/components/Filter/components/FilterTags/filterTags.stories.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { FilterTags } from "./filterTags";
 const onRemove = () => {
     // onRemove function
@@ -9,8 +9,7 @@ const meta = {
     },
     component: FilterTags,
     decorators: [
-        (Story) => (React.createElement("div", { style: { padding: "8px 12px 8px 16px", width: 264 } },
-            React.createElement(Story, null))),
+        (Story) => (_jsx("div", { style: { padding: "8px 12px 8px 16px", width: 264 }, children: _jsx(Story, {}) })),
     ],
     title: "Components/Filter/FilterTags",
 };

package/lib/components/Filter/components/Filters/filters.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { CategoryView } from "../../../../common/categories/views/types";
 import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";

package/lib/components/Filter/components/Filters/filters.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Divider } from "@mui/material";
-import React, { Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { isRangeCategoryView } from "../../../../common/categories/views/range/typeGuards";
 import { useWindowResize } from "../../../../hooks/useWindowResize";
 import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
@@ -41,7 +42,7 @@ function buildFilterTags(categoryView, onFilter) {
  */
 function renderFilterTags(categoryView, onFilter) {
     const tags = buildFilterTags(categoryView, onFilter);
-    return React.createElement(FilterTags, { tags: tags });
+    return _jsx(FilterTags, { tags: tags });
 }
 export const Filters = ({ categoryFilters, className, disabled = false, onFilter, surfaceType = SURFACE_TYPE.MENU, trackFilterOpened, }) => {
     const { onClose } = useDrawer();
@@ -51,10 +52,7 @@ export const Filters = ({ categoryFilters, className, disabled = false, onFilter
     useEffect(() => {
         setHeight(calculateListHeight(windowHeight, filterListRef.current));
     }, [windowHeight]);
-    return (React.createElement(FilterList, { className: className, "data-testid": TEST_IDS.FILTERS, disabled: disabled, height: height, ref: filterListRef, surfaceType: surfaceType }, categoryFilters.map(({ categoryViews, label }, i) => (React.createElement(Fragment, { key: i },
-        i !== 0 && React.createElement(Divider, null),
-        label && (React.createElement(StyledTypography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.UPPERCASE_500 }, label)),
-        categoryViews.map((categoryView) => (React.createElement(Filter, { key: categoryView.key, categorySection: label, categoryView: categoryView, closeAncestor: onClose, onFilter: onFilter, surfaceType: surfaceType, trackFilterOpened: trackFilterOpened, tags: renderFilterTags(categoryView, onFilter) }))))))));
+    return (_jsx(FilterList, { className: className, "data-testid": TEST_IDS.FILTERS, disabled: disabled, height: height, ref: filterListRef, surfaceType: surfaceType, children: categoryFilters.map(({ categoryViews, label }, i) => (_jsxs(Fragment, { children: [i !== 0 && _jsx(Divider, {}), label && (_jsx(StyledTypography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.UPPERCASE_500, children: label })), categoryViews.map((categoryView) => (_jsx(Filter, { categorySection: label, categoryView: categoryView, closeAncestor: onClose, onFilter: onFilter, surfaceType: surfaceType, trackFilterOpened: trackFilterOpened, tags: renderFilterTags(categoryView, onFilter) }, categoryView.key)))] }, i))) }));
 };
 /**
  * Returns given height of filter list.

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

@@ -1,4 +1,4 @@
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 import { BIOLOGICAL_SEX, DONOR_COUNT, FILE_FORMAT, FILE_TYPE, GENUS_SPECIES, } from "./constants";
 export const DEFAULT_ARGS = {
     categoryFilters: [

package/lib/components/Filter/components/Filters/stories/filters.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 import { Filters } from "../filters";
 declare const meta: Meta<typeof Filters>;
 export default meta;

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

@@ -1,12 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from "@mui/material";
-import React from "react";
 import { Filters } from "../filters";
 import { DEFAULT_ARGS } from "./args";
 const meta = {
     component: Filters,
     decorators: [
-        (Story) => (React.createElement(Box, { sx: { width: 264 } },
-            React.createElement(Story, null))),
+        (Story) => (_jsx(Box, { sx: { width: 264 }, children: _jsx(Story, {}) })),
     ],
 };
 export default meta;

package/lib/components/Filter/components/HighlightedLabel/highlightedLabel.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { TestIdProps } from "../../../types";
 import { FilterMenuSearchMatchRange } from "../../common/entities";
 interface HighlightedLabelProps extends TestIdProps {