@databiosphere/findable-ui 37.1.0 → 38.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "37.1.0"
+  ".": "38.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [38.0.0](https://github.com/DataBiosphere/findable-ui/compare/v37.1.0...v38.0.0) (2025-07-09)
+
+
+### ⚠ BREAKING CHANGES
+
+* compact header and footer ([#554](https://github.com/DataBiosphere/findable-ui/issues/554)) (#555)
+
+### Features
+
+* compact header and footer ([#554](https://github.com/DataBiosphere/findable-ui/issues/554)) ([#555](https://github.com/DataBiosphere/findable-ui/issues/555)) ([066d3fc](https://github.com/DataBiosphere/findable-ui/commit/066d3fc4c34157d694a688dd805a8aed78eaf520))
+
 ## [37.1.0](https://github.com/DataBiosphere/findable-ui/compare/v37.0.0...v37.1.0) (2025-06-19)
 
 

package/lib/components/DataDictionary/components/Entities/types.d.ts

@@ -1,6 +1,6 @@
 import { RowData, Table } from "@tanstack/react-table";
 import { Attribute } from "../../../../common/entities";
-import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
 export interface ClassesProps<T extends RowData = Attribute> {
     spacing?: LayoutSpacing;
     table: Table<T>;

package/lib/components/DataDictionary/components/Entity/types.d.ts

@@ -1,6 +1,6 @@
 import { Row, RowData, Table } from "@tanstack/react-table";
 import { Attribute } from "../../../../common/entities";
-import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
 export interface EntityProps<T extends RowData = Attribute> {
     row: Row<T>;
     spacing?: LayoutSpacing;

package/lib/components/DataDictionary/components/Filters/components/ColumnFilterTags/columnFilterTags.styles.d.ts

@@ -2,6 +2,6 @@ export declare const StyledGrid: import("@emotion/styled").StyledComponent<impor
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
 } & import("@mui/system").SystemProps<import("@mui/material").Theme> & 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;
-}, ("p" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "color" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign") | "sx" | keyof import("@mui/material").GridBaseProps> & {
+}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "color" | "fontSize" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | keyof import("@mui/material").GridBaseProps> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/DataDictionary/components/Filters/filters.styles.d.ts

@@ -2,6 +2,6 @@ export declare const StyledGrid: import("@emotion/styled").StyledComponent<impor
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
 } & import("@mui/system").SystemProps<import("@mui/material").Theme> & 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;
-}, ("p" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "color" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign") | "sx" | keyof import("@mui/material").GridBaseProps> & {
+}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "color" | "fontSize" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | keyof import("@mui/material").GridBaseProps> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.d.ts

@@ -1,4 +1,4 @@
-import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 export declare const Layout: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/types.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from "react";
-import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 export interface EntitiesLayoutProps {
     children: ReactNode;
     spacing: LayoutSpacing;

package/lib/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.styles.d.ts

@@ -1,4 +1,4 @@
-import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 export declare const Layout: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/lib/components/DataDictionary/components/Layout/components/FiltersLayout/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 export interface FiltersLayoutProps extends LayoutSpacing {
     children: ReactNode;
 }

package/lib/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.styles.d.ts

@@ -1,4 +1,4 @@
-import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 export declare const Layout: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/lib/components/DataDictionary/components/Layout/components/OutlineLayout/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 export interface OutlineLayoutProps extends LayoutSpacing {
     children: ReactNode;
 }

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.d.ts

@@ -1,4 +1,4 @@
-import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 export declare const Layout: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 export interface TitleLayoutProps extends LayoutSpacing {
     children: ReactNode;
 }

package/lib/components/DataDictionary/components/Table/table.js

@@ -5,13 +5,13 @@ import { ROW_DIRECTION } from "../../../Table/common/entities";
 import { TableHead } from "../../../Table/components/TableHead/tableHead";
 import { GridTable } from "../../../Table/table.styles";
 import { getColumnTrackSizing } from "../../../TableCreator/options/columnTrackSizing/utils";
+import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
 import { GridPaper } from "../../../common/Paper/paper.styles";
-import { StyledRoundedPaper } from "./table.styles";
 export const Table = ({ row, table, }) => {
-    return (React.createElement(StyledRoundedPaper, { variant: "table" },
+    return (React.createElement(RoundedPaper, { elevation: 0 },
         React.createElement(GridPaper, null,
             React.createElement(TableContainer, null,
                 React.createElement(GridTable, { gridTemplateColumns: getColumnTrackSizing(table.getVisibleFlatColumns()) },
-                    React.createElement(TableHead, { rowDirection: ROW_DIRECTION.DEFAULT, tableInstance: table }),
+                    React.createElement(TableHead, { tableInstance: table }),
                     React.createElement(TableBody, { rowDirection: ROW_DIRECTION.DEFAULT, rows: row.getLeafRows(), tableInstance: table }))))));
 };

package/lib/components/DataDictionary/components/Title/title.d.ts

@@ -1,2 +1,2 @@
-import { TitleProps } from "../../../common/Title/title";
-export declare const Title: ({ title, ...props }: TitleProps) => JSX.Element;
+import { TypographyProps } from "@mui/material";
+export declare const Title: ({ children, ...props }: TypographyProps) => JSX.Element;

package/lib/components/DataDictionary/components/Title/title.js

@@ -1,3 +1,3 @@
 import React from "react";
 import { StyledTitle } from "./title.styles";
-export const Title = ({ title = "Data Dictionary", ...props }) => React.createElement(StyledTitle, { title: title, ...props });
+export const Title = ({ children = "Data Dictionary", ...props }) => (React.createElement(StyledTitle, { ...props }, children));

package/lib/components/DataDictionary/components/Title/title.styles.d.ts

@@ -1,3 +1,7 @@
-export declare const StyledTitle: import("@emotion/styled").StyledComponent<import("../../../common/Title/title").TitleProps & {
+export declare const StyledTitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | 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<HTMLSpanElement> | null | undefined;
+}, "p" | "style" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "className" | "classes" | "children" | "color" | "fontSize" | "sx" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "align" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+    component?: React.ElementType;
+} & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/DataDictionary/dataDictionary.js

@@ -1,5 +1,6 @@
 import { Fade } from "@mui/material";
 import React from "react";
+import { useLayoutSpacing } from "../../hooks/UseLayoutSpacing/hook";
 import { Entities } from "./components/Entities/entities";
 import { ColumnFilterTags } from "./components/Filters/components/ColumnFilterTags/columnFilterTags";
 import { Filters } from "./components/Filters/filters";
@@ -13,7 +14,6 @@ import { useTable } from "./components/Table/hook";
 import { Title as DefaultTitle } from "./components/Title/title";
 import { View } from "./dataDictionary.styles";
 import { useDataDictionaryConfig } from "./hooks/UseDataDictionaryConfig/hook";
-import { useLayoutSpacing } from "./hooks/UseLayoutSpacing/hook";
 import { useMeasureFilters } from "./hooks/UseMeasureFilters/hook";
 export const DataDictionary = ({ className, dictionary, EntitiesLayout = DefaultEntitiesLayout, FiltersLayout = DefaultFiltersLayout, Outline = DefaultOutline, OutlineLayout = DefaultOutlineLayout, Title = DefaultTitle, TitleLayout = DefaultTitleLayout, }) => {
     // Get dictionary configuration.
@@ -32,7 +32,7 @@ export const DataDictionary = ({ className, dictionary, EntitiesLayout = Default
     return (React.createElement(Fade, { in: spacing.top > 0 },
         React.createElement(View, { className: className },
             React.createElement(TitleLayout, { ...spacing },
-                React.createElement(Title, { title: title })),
+                React.createElement(Title, null, title)),
             React.createElement(OutlineLayout, { ...spacing },
                 React.createElement(Outline, { outline: outline })),
             React.createElement(FiltersLayout, { ref: filtersRef, ...spacing },

package/lib/components/Detail/components/DetailViewTable/detailViewTable.js

@@ -1,11 +1,11 @@
 import React from "react";
 import { GridPaper, RoundedPaper, } from "../../../common/Paper/paper.styles";
 import { NoResults } from "../../../NoResults/noResults";
-import { Toolbar } from "../../../Table/components/TableToolbar/tableToolbar.styles";
+import { StyledToolbar } from "../../../Table/components/TableToolbar/tableToolbar.styles";
 import { Table } from "../Table/table";
 export const DetailViewTable = ({ className, columns, gridTemplateColumns, items, noResultsTitle, Paper = RoundedPaper, tools, ...tableProps }) => {
-    return items.length > 0 ? (React.createElement(Paper, { className: className, variant: "table" },
+    return items.length > 0 ? (React.createElement(Paper, { className: className },
         React.createElement(GridPaper, null,
-            tools && React.createElement(Toolbar, { variant: "table" }, tools),
+            tools && React.createElement(StyledToolbar, null, tools),
             React.createElement(Table, { columns: columns, gridTemplateColumns: gridTemplateColumns, items: items, ...tableProps })))) : (React.createElement(NoResults, { Paper: Paper, title: noResultsTitle }));
 };

package/lib/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../../../../Table/common/utils";
 import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
-import { TableRow } from "../../../../../../../Table/components/TableRow/tableRow.styles";
+import { StyledTableRow } from "../../../../../../../Table/components/TableRow/tableRow.styles";
 import { useCollapsableRows } from "../../../../../../../Table/components/TableRows/components/CollapsableRows/hook";
 export const CollapsableRows = ({ rows: leafOrSubRows, tableInstance, }) => {
     const { getRowModel } = tableInstance;
@@ -10,7 +10,7 @@ export const CollapsableRows = ({ rows: leafOrSubRows, tableInstance, }) => {
     return (React.createElement(Fragment, null, (leafOrSubRows || rows).map((row) => {
         if (row.depth > 0)
             return null; // Hide sub rows.
-        return (React.createElement(TableRow, { key: row.id, isPreview: row.getIsPreview() },
+        return (React.createElement(StyledTableRow, { key: row.id, isPreview: row.getIsPreview() },
             React.createElement(CollapsableCell, { isDisabled: isCollapsableRowDisabled(tableInstance), row: row })));
     })));
 };

package/lib/components/Detail/components/Table/components/TableRows/tableRows.js

@@ -2,14 +2,14 @@ import { TableCell } from "@mui/material";
 import { flexRender } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { getTableCellAlign, getTableCellPadding, } from "../../../../../Table/components/TableCell/common/utils";
-import { TableRow } from "../../../../../Table/components/TableRow/tableRow.styles";
+import { StyledTableRow } from "../../../../../Table/components/TableRow/tableRow.styles";
 export const TableRows = ({ rows: leafOrSubRows, tableInstance, tableView, }) => {
     const { getRowModel } = tableInstance;
     const { rows } = getRowModel();
     const { tableCell } = tableView || {};
     const { size: tableCellSize = "medium" } = tableCell || {};
     return (React.createElement(Fragment, null, (leafOrSubRows || rows).map((row) => {
-        return (React.createElement(TableRow, { key: row.id, isGrouped: row.getIsGrouped(), isPreview: row.getIsPreview() }, row.getVisibleCells().map((cell) => {
+        return (React.createElement(StyledTableRow, { key: row.id, isGrouped: row.getIsGrouped(), isPreview: row.getIsPreview() }, row.getVisibleCells().map((cell) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())

package/lib/components/Detail/components/Table/table.js

@@ -32,6 +32,6 @@ export const Table = ({ className, collapsable = true, columns, gridTemplateColu
     });
     return (React.createElement(TableContainer, { className: className, sx: tableContainerSx },
         React.createElement(GridTable, { collapsable: collapsable, gridTemplateColumns: gridTemplateColumns, stickyHeader: rowDirection === ROW_DIRECTION.DEFAULT && stickyHeader },
-            React.createElement(TableHead, { rowDirection: rowDirection, tableInstance: tableInstance }),
+            React.createElement(TableHead, { tableInstance: tableInstance }),
             React.createElement(TableBody, { rowDirection: rowDirection, tableInstance: tableInstance, tableView: tableView }))));
 };

package/lib/components/Export/components/ExportForm/exportForm.styles.d.ts

@@ -2,12 +2,12 @@ import { ThemeProps } from "../../../../theme/theme";
 export declare const margin: ({ theme }: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const FormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & 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;
-}, "style" | "className" | "classes" | "color" | "children" | "margin" | "sx" | "variant" | "error" | "disabled" | "required" | "size" | "fullWidth" | "hiddenLabel" | "focused"> & {
+}, "style" | "size" | "className" | "classes" | "children" | "color" | "sx" | "disabled" | "required" | "error" | "margin" | "fullWidth" | "variant" | "hiddenLabel" | "focused"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const TableFormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & 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;
-}, "style" | "className" | "classes" | "color" | "children" | "margin" | "sx" | "variant" | "error" | "disabled" | "required" | "size" | "fullWidth" | "hiddenLabel" | "focused"> & {
+}, "style" | "size" | "className" | "classes" | "children" | "color" | "sx" | "disabled" | "required" | "error" | "margin" | "fullWidth" | "variant" | "hiddenLabel" | "focused"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const GridPaper: import("@emotion/styled").StyledComponent<{

package/lib/components/Filter/components/ClearAllFilters/clearAllFilters.js

@@ -1,8 +1,9 @@
 import React from "react";
 import { useExploreState } from "../../../../hooks/useExploreState";
 import { ExploreActionKind } from "../../../../providers/exploreState";
+import { BUTTON_PROPS } from "../../../../styles/common/mui/button";
 import { TEST_IDS } from "../../../../tests/testIds";
-import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
+import { StyledButton } from "./clearAllFilters.styles";
 export const ClearAllFilters = () => {
     const { exploreDispatch } = useExploreState();
     const onClearFilters = () => {
@@ -11,5 +12,5 @@ export const ClearAllFilters = () => {
             type: ExploreActionKind.ClearFilters,
         });
     };
-    return (React.createElement(ButtonTextPrimary, { "data-testid": TEST_IDS.CLEAR_ALL_FILTERS, onClick: onClearFilters }, "Clear All"));
+    return (React.createElement(StyledButton, { color: BUTTON_PROPS.COLOR.PRIMARY, "data-testid": TEST_IDS.CLEAR_ALL_FILTERS, onClick: onClearFilters, variant: BUTTON_PROPS.VARIANT.TEXT }, "Clear All"));
 };

package/lib/components/Filter/components/ClearAllFilters/clearAllFilters.styles.d.ts

@@ -0,0 +1,5 @@
+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" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Filter/components/ClearAllFilters/clearAllFilters.styles.js

@@ -0,0 +1,5 @@
+import styled from "@emotion/styled";
+import { Button } from "@mui/material";
+export const StyledButton = styled(Button) `
+  padding: 0;
+`;

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

@@ -4,5 +4,5 @@ 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, label: String(count), variant: CHIP_PROPS.VARIANT.FILLED, ...props }));
+    return (React.createElement(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,3 @@
-export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+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" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "label" | "style" | "size" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "variant" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "slots" | "slotProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const FilterLabel: 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" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon"> & {
+}, "style" | "size" | "href" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & {
     theme?: import("@emotion/react").Theme;
 } & Props, {}, {}>;
 export {};

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

@@ -11,7 +11,7 @@ export declare const FilterViewTools: import("@emotion/styled").StyledComponent<
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledButtonBase: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & 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" | "className" | "classes" | "tabIndex" | "children" | "sx" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "tabIndex" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export {};

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

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

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

@@ -7,9 +7,8 @@ export interface CategoryFilter {
 }
 export interface FiltersProps {
     categoryFilters: CategoryFilter[];
-    closeAncestor?: () => void;
     disabled?: boolean;
     onFilter: OnFilterFn;
     trackFilterOpened?: TrackFilterOpenedFunction;
 }
-export declare const Filters: ({ categoryFilters, closeAncestor, disabled, onFilter, trackFilterOpened, }: FiltersProps) => JSX.Element;
+export declare const Filters: ({ categoryFilters, disabled, onFilter, trackFilterOpened, }: FiltersProps) => JSX.Element;

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

@@ -5,6 +5,7 @@ import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useB
 import { useWindowResize } from "../../../../hooks/useWindowResize";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
+import { useDrawer } from "../../../common/Drawer/provider/hook";
 import { Filter } from "../Filter/filter";
 import { buildRangeTag } from "../FilterTag/utils";
 import { FilterTags } from "../FilterTags/filterTags";
@@ -42,7 +43,8 @@ function renderFilterTags(categoryView, onFilter) {
     const tags = buildFilterTags(categoryView, onFilter);
     return React.createElement(FilterTags, { tags: tags });
 }
-export const Filters = ({ categoryFilters, closeAncestor, disabled = false, onFilter, trackFilterOpened, }) => {
+export const Filters = ({ categoryFilters, disabled = false, onFilter, trackFilterOpened, }) => {
+    const { onClose } = useDrawer();
     const isFilterDrawer = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
     const { height: windowHeight } = useWindowResize();
     const filterListRef = useRef(null);
@@ -53,7 +55,7 @@ export const Filters = ({ categoryFilters, closeAncestor, disabled = false, onFi
     return (React.createElement(FilterList, { "data-testid": TEST_IDS.FILTERS, disabled: disabled, height: height, ref: filterListRef }, categoryFilters.map(({ categoryViews, label }, i) => (React.createElement(Fragment, { key: i },
         i !== 0 && React.createElement(Divider, null),
         label && React.createElement(CategoryViewsLabel, null, label),
-        categoryViews.map((categoryView) => (React.createElement(Filter, { key: categoryView.key, categorySection: label, categoryView: categoryView, closeAncestor: closeAncestor, isFilterDrawer: isFilterDrawer, onFilter: onFilter, trackFilterOpened: trackFilterOpened, tags: renderFilterTags(categoryView, onFilter) }))))))));
+        categoryViews.map((categoryView) => (React.createElement(Filter, { key: categoryView.key, categorySection: label, categoryView: categoryView, closeAncestor: onClose, isFilterDrawer: isFilterDrawer, onFilter: onFilter, trackFilterOpened: trackFilterOpened, tags: renderFilterTags(categoryView, onFilter) }))))))));
 };
 /**
  * Returns given height of filter list.

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.d.ts

@@ -4,7 +4,6 @@ import { SelectCategoryView } from "../../../../common/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 export interface SearchAllFiltersProps {
     categoryViews: CategoryView[];
-    drawerOpen?: boolean;
     onFilter: OnFilterFn;
 }
 interface ListboxContextValue {
@@ -16,5 +15,5 @@ interface ListboxContextValue {
     selectCategoryViews: SelectCategoryView[];
 }
 export declare const ListboxContext: React.Context<ListboxContextValue>;
-export declare const SearchAllFilters: ({ categoryViews, drawerOpen, onFilter, }: SearchAllFiltersProps) => JSX.Element;
+export declare const SearchAllFilters: ({ categoryViews, onFilter, }: SearchAllFiltersProps) => JSX.Element;
 export {};

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

@@ -4,6 +4,7 @@ import { SELECTOR } from "../../../../common/selectors";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
+import { useDrawer } from "../../../common/Drawer/provider/hook";
 import { SearchCloseButton } from "../SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton";
 import { SearchAllFiltersSearch } from "../SearchAllFiltersSearch/searchAllFiltersSearch";
 import { DEFAULT_SLOT_PROPS, DRAWER_SLOT_PROPS } from "./common/constants";
@@ -28,7 +29,8 @@ const Listbox = React.forwardRef(function Listbox(props, ref) {
     const { onFilter, searchTerm, selectCategoryViews } = useContext(ListboxContext);
     return (React.createElement(VariableSizeList, { autocompleteListProps: props, onFilter: onFilter, ref: ref, searchTerm: searchTerm, selectCategoryViews: selectCategoryViews }));
 });
-export const SearchAllFilters = ({ categoryViews, drawerOpen = false, onFilter, }) => {
+export const SearchAllFilters = ({ categoryViews, onFilter, }) => {
+    const { open: isDrawerOpen } = useDrawer();
     const desktopSmUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
     const autocompleteRef = useRef(null);
     const [open, setOpen] = useState(false);
@@ -75,11 +77,11 @@ export const SearchAllFilters = ({ categoryViews, drawerOpen = false, onFilter,
     }, [open]);
     // Close search when filter drawer is closed.
     useEffect(() => {
-        if (!drawerOpen) {
+        if (!isDrawerOpen) {
             setSearchTerm("");
             setOpen(false);
         }
-    }, [drawerOpen]);
+    }, [isDrawerOpen]);
     return (React.createElement(ListboxContext.Provider, { value: {
             onClearSearch,
             onCloseSearch,

package/lib/components/Index/components/EntityView/components/controls/ActionButton/actionButton.d.ts

@@ -0,0 +1 @@
+export declare const ActionButton: () => JSX.Element | null;

package/lib/components/Index/components/EntityView/components/controls/ActionButton/actionButton.js

@@ -0,0 +1,10 @@
+import React, { Fragment } from "react";
+import { useConfig } from "../../../../../../../hooks/useConfig";
+export const ActionButton = () => {
+    const { entityConfig } = useConfig();
+    const { ui } = entityConfig;
+    const { actionButton } = ui || {};
+    if (!actionButton)
+        return null;
+    return React.createElement(Fragment, null, actionButton);
+};

package/lib/components/Index/components/EntityView/components/controls/ExportButton/exportButton.d.ts

@@ -0,0 +1,2 @@
+import { BaseComponentProps } from "../../../../../../types";
+export declare const ExportButton: ({ className, }: BaseComponentProps) => JSX.Element | null;

package/lib/components/Index/components/EntityView/components/controls/ExportButton/exportButton.js

@@ -0,0 +1,20 @@
+import { Button, Tooltip } from "@mui/material";
+import Link from "next/link";
+import React from "react";
+import { useConfig } from "../../../../../../../hooks/useConfig";
+import { useDownloadStatus } from "../../../../../../../hooks/useDownloadStatus";
+import { ROUTE } from "../../../../../../../routes/constants";
+import { TEST_IDS } from "../../../../../../../tests/testIds";
+import { BUTTON_PROPS } from "../../../../../../common/Button/constants";
+import { StyledBox } from "./exportButton.styles";
+export const ExportButton = ({ className, }) => {
+    const { disabled, isLoading, message } = useDownloadStatus();
+    const { entityConfig } = useConfig();
+    const { ui } = entityConfig;
+    const { enableExportButton } = ui || {};
+    if (!enableExportButton)
+        return null;
+    return (React.createElement(Tooltip, { arrow: true, title: message },
+        React.createElement(StyledBox, null,
+            React.createElement(Button, { ...BUTTON_PROPS.PRIMARY_CONTAINED, className: className, component: Link, "data-testid": TEST_IDS.EXPORT_BUTTON, disabled: disabled || isLoading, href: ROUTE.EXPORT, id: "button-cohort-export" }, "Export"))));
+};

package/lib/components/Index/components/EntityView/components/controls/ExportButton/exportButton.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & 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;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Index/components/EntityView/components/controls/ExportButton/exportButton.styles.js

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { Box } from "@mui/material";
+import { mediaTabletDown } from "../../../../../../../styles/common/mixins/breakpoints";
+export const StyledBox = styled(Box) `
+  ${mediaTabletDown} {
+    display: none;
+  }
+`;

package/lib/components/Index/components/EntityView/components/controls/FilterButton/filterButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from "@mui/material";
+import { BaseComponentProps } from "../../../../../../types";
+export declare const FilterButton: ({ className, ...props }: BaseComponentProps & ButtonProps) => JSX.Element;

package/lib/components/Index/components/EntityView/components/controls/FilterButton/filterButton.js

@@ -0,0 +1,18 @@
+import { FilterListRounded } from "@mui/icons-material";
+import { NoSsr } from "@mui/material";
+import React from "react";
+import { useExploreState } from "../../../../../../../hooks/useExploreState";
+import { SVG_ICON_PROPS } from "../../../../../../../styles/common/mui/svgIcon";
+import { BUTTON_PROPS } from "../../../../../../common/Button/constants";
+import { useDrawer } from "../../../../../../common/Drawer/provider/hook";
+import { FilterCountChip } from "../../../../../../Filter/components/FilterCountChip/filterCountChip";
+import { StyledButton } from "./filterButton.styles";
+export const FilterButton = ({ className, ...props }) => {
+    const { onOpen } = useDrawer();
+    const { exploreState } = useExploreState();
+    const { filterCount } = exploreState;
+    return (React.createElement(NoSsr, null,
+        React.createElement(StyledButton, { ...BUTTON_PROPS.SECONDARY_CONTAINED, className: className, onClick: onOpen, startIcon: React.createElement(FilterListRounded, { color: SVG_ICON_PROPS.COLOR.INK_LIGHT, fontSize: SVG_ICON_PROPS.FONT_SIZE.SMALL }), ...props },
+            "Filter",
+            React.createElement(FilterCountChip, { count: filterCount }))));
+};

package/lib/components/Index/components/EntityView/components/controls/FilterButton/filterButton.styles.d.ts

@@ -0,0 +1,5 @@
+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" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;