@databiosphere/findable-ui 25.0.0 → 26.0.0

package/src/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/plot.ts

@@ -1,9 +1,9 @@
 import * as Plot from "@observablehq/plot";
 import { PlotOptions } from "@observablehq/plot";
 import { SelectCategoryValueView } from "../../../../../../../../../common/entities";
-import { PALETTE } from "../../../../../../../../../styles/common/mui/palette";
+import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
 import { formatCountSize } from "../../../../../../../../../utils/formatCountSize";
-import { DATA_FIELD, TEXT_PADDING } from "./constants";
+import { DATA_FIELD, MARGIN_LEFT, TEXT_PADDING } from "./constants";
 import {
   getCategoryValueText,
   getCategoryValueTextFill,
@@ -32,6 +32,7 @@ export function getPlotOptions(
     height: getPlotHeight(selectCategoryValueViews.length),
     margin: 0,
     marginBottom: 32,
+    marginLeft: MARGIN_LEFT,
     marks: [
       Plot.axisX({
         className: "x-axis",
@@ -50,19 +51,21 @@ export function getPlotOptions(
         fill: DATA_FIELD.SELECTED,
         rx1: 0,
         rx2: 4,
-        sort: { y: null },
+        sort: { order: "descending", y: "x" }, // Sort by count (x-axis), descending.
         x: DATA_FIELD.COUNT,
         y: DATA_FIELD.LABEL,
       }),
       Plot.text(selectCategoryValueViews, {
         className: "text-category-label",
-        dx: 16,
-        dy: -28,
+        dx: -TEXT_PADDING,
+        dy: -2,
         fill: (d) => getCategoryValueTextFill(d, isCategorySelected),
-        lineWidth: width / 13, // "em" unit; font-size is 13px.
+        lineHeight: 0.8125,
+        lineWidth: (MARGIN_LEFT - TEXT_PADDING) / 13, // "em" unit; font-size is 13px.
         text: getCategoryValueText,
-        textAnchor: "start",
+        textAnchor: "end",
         textOverflow: "ellipsis",
+        title: getCategoryValueText,
         x: 0,
         y: DATA_FIELD.LABEL,
       }),

package/src/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/utils.ts

@@ -6,8 +6,14 @@ import {
   ScaleFunctions,
 } from "@observablehq/plot";
 import { SelectCategoryValueView } from "../../../../../../../../../common/entities";
-import { PALETTE } from "../../../../../../../../../styles/common/mui/palette";
-import { BAR_GAP, BAR_HEIGHT, TEXT_PADDING, TICKS } from "./constants";
+import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
+import {
+  BAR_GAP,
+  BAR_HEIGHT,
+  MARGIN_LEFT,
+  TEXT_PADDING,
+  TICKS,
+} from "./constants";
 
 /**
  * Returns the text for the category value point.
@@ -170,7 +176,7 @@ export function isAnyValueSelected(data: SelectCategoryValueView[]): boolean {
  * @param translate - The transform `translate` string.
  * @returns A tuple of the x and y coordinates.
  */
-function parseTranslate(translate: string | null): [number, number] {
+export function parseTranslate(translate: string | null): [number, number] {
   const match = translate?.match(/translate\(\s*([-\d.]+)[,\s]+([-\d.]+)\s*\)/);
   let tx = 0;
   let ty = 0;
@@ -210,7 +216,7 @@ export function renderText(
       const bBox = textEl.getBBox();
       if (!ctm || !bBox) continue;
       // If the text doesn't fit inside the bar, reposition it outside.
-      if (ctm.e - bBox.width - TEXT_PADDING < 0) {
+      if (ctm.e - bBox.width - TEXT_PADDING < MARGIN_LEFT) {
         const [tx, ty] = parseTranslate(textEl.getAttribute("transform"));
         // Translate by the width of the bar plus padding on each side.
         textEl.setAttribute(

package/src/components/Index/components/EntitiesView/components/ChartView/components/Chart/stories/chart.stories.tsx

@@ -1,7 +1,7 @@
 import { Box } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { PALETTE } from "../../../../../../../../../styles/common/mui/palette";
+import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
 import { Chart } from "../chart";
 import { CHART_ARGS, SELECT_CHART_ARGS } from "./args";
 
@@ -15,7 +15,6 @@ const meta: Meta<typeof Chart> = {
       </Box>
     ),
   ],
-  title: "Components/Entities/EntitiesView/ChartView/Chart",
 };
 
 export default meta;

package/src/components/Index/components/EntitiesView/components/ChartView/stories/args.ts

@@ -95,5 +95,6 @@ export const CHART_VIEW_ARGS: ComponentProps<typeof ChartView> = {
       ],
     },
   ],
+  entityName: "Projects",
   loading: false,
 };

package/src/components/Index/components/EntitiesView/components/ChartView/stories/chartView.stories.tsx

@@ -15,7 +15,6 @@ const meta: Meta<typeof ChartView> = {
     ),
   ],
   parameters: { layout: "fullscreen" },
-  title: "Components/Entities/EntitiesView/ChartView",
 };
 
 export default meta;

package/src/components/Index/components/EntitiesView/components/ChartView/types.ts

@@ -1,7 +1,9 @@
+import { EntityConfig } from "../../../../../../config/entities";
 import { CategoryFilter } from "../../../../../Filter/components/Filters/filters";
 import { TestIdProps } from "../../../../../types";
 
 export interface ChartViewProps extends TestIdProps {
   categoryFilters: CategoryFilter[];
+  entityName: EntityConfig["label"];
   loading: boolean;
 }

package/src/components/Index/components/EntitiesView/entitiesView.tsx

@@ -1,5 +1,6 @@
 import { ToggleButton, ToggleButtonGroup, Toolbar } from "@mui/material";
 import React from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { GridPaper } from "../../../common/Paper/paper.styles";
 import { StyledFluidPaper } from "./entitiesView.styles";
 import { VIEW_MODE } from "./hooks/UseEntitiesView/types";
@@ -8,12 +9,11 @@ import { EntitiesViewProps } from "./types";
 export const EntitiesView = ({
   children,
   onChange,
-  testId,
   viewMode,
   viewStatus,
 }: EntitiesViewProps): JSX.Element => {
   return (
-    <StyledFluidPaper testId={testId}>
+    <StyledFluidPaper testId={TEST_IDS.ENTITIES_VIEW}>
       <GridPaper>
         {viewStatus.disabled ? null : (
           <Toolbar>

package/src/components/Index/components/EntitiesView/types.ts

@@ -1,8 +1,8 @@
 import { ToggleButtonGroupProps } from "@mui/material";
-import { ChildrenProps, TestIdProps } from "../../../types";
+import { ChildrenProps } from "../../../types";
 import { VIEW_MODE, ViewStatus } from "./hooks/UseEntitiesView/types";
 
-export interface EntitiesViewProps extends ChildrenProps, TestIdProps {
+export interface EntitiesViewProps extends ChildrenProps {
   onChange: ToggleButtonGroupProps["onChange"];
   viewMode: VIEW_MODE;
   viewStatus: ViewStatus;

package/src/components/Index/components/Hero/components/ExportButton/exportButton.tsx

@@ -2,6 +2,7 @@ import { Tooltip } from "@mui/material";
 import Link from "next/link";
 import React from "react";
 import { useDownloadStatus } from "../../../../../../hooks/useDownloadStatus";
+import { TEST_IDS } from "../../../../../../tests/testIds";
 import { Button } from "./exportButton.styles";
 
 export const ExportButton = (): JSX.Element => {
@@ -11,6 +12,7 @@ export const ExportButton = (): JSX.Element => {
       <span>
         <Link href="/export" legacyBehavior passHref>
           <Button
+            data-testid={TEST_IDS.EXPORT_BUTTON}
             disabled={disabled || isLoading}
             href="passHref"
             id="button-cohort-export"

package/src/components/Layout/components/Outline/outline.styles.ts

@@ -1,12 +1,11 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Tab as MTab, Tabs as MTabs, TabProps } from "@mui/material";
-import { smokeMain } from "../../../../styles/common/mixins/colors";
+import { inkMain, smokeMain } from "../../../../styles/common/mixins/colors";
 import {
   textBody500,
   textBodySmall400,
 } from "../../../../styles/common/mixins/fonts";
-import { inkMain } from "../../../../theme/common/palette";
 
 interface Props extends TabProps {
   depth: number;

package/src/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.tsx

@@ -1,6 +1,7 @@
 import { CloseRounded } from "@mui/icons-material";
 import { PopoverPosition, PopoverProps } from "@mui/material";
 import React, { ReactNode } from "react";
+import { TEST_IDS } from "../../../../../../tests/testIds";
 import { DrawerTransition } from "../../../../../Filter/components/Filter/components/DrawerTransition/drawerTransition";
 import { IconButton, TemporarySidebar } from "./sidebarDrawer.styles";
 
@@ -25,6 +26,7 @@ export const SidebarDrawer = ({
     <TemporarySidebar
       anchorPosition={DEFAULT_POSITION}
       anchorReference="anchorPosition"
+      data-testid={TEST_IDS.SIDEBAR_DRAWER}
       hideBackdrop={false}
       marginThreshold={0}
       onClose={onDrawerClose}

package/src/components/Layout/components/Sidebar/sidebar.tsx

@@ -3,6 +3,7 @@ import {
   BREAKPOINT_FN_NAME,
   useBreakpointHelper,
 } from "../../../../hooks/useBreakpointHelper";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { SidebarDrawer } from "./components/SidebarDrawer/sidebarDrawer";
 import { SidebarPositioner } from "./components/SidebarPositioner/sidebarPositioner";
@@ -26,7 +27,9 @@ export const Sidebar = ({
   const controlledSidebar = typeof drawerOpen === "boolean";
   const drawerSidebar = controlledSidebar && desktopSmDown; // Sidebar is "temporary" drawer when drawerOpen is defined and breakpoint is smaller than the breakpoint.
   const Bar = drawerSidebar ? SidebarDrawer : PermanentSidebar;
-  const barProps = drawerSidebar ? { drawerOpen, onDrawerClose } : {};
+  const barProps = drawerSidebar
+    ? { drawerOpen, onDrawerClose }
+    : { "data-testid": TEST_IDS.SIDEBAR };
 
   // Closes an open, controlled drawer sidebar with a change of breakpoint.
   useEffect(() => {

package/src/components/Loading/loading.styles.ts

@@ -1,5 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { COLOR_MIXES } from "../../styles/common/constants/colorMixes";
 import { TABLET } from "../../theme/common/breakpoints";
 import { Paper, PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { LOADING_PANEL_STYLE, LoadingPanelStyle } from "./loading";
@@ -26,7 +27,7 @@ export const LoadingPositioner = styled.div<Props>`
 `;
 
 export const LoadingPaper = styled(Paper)<Props>`
-  background-color: rgba(255, 255, 255, 0.8);
+  background-color: ${COLOR_MIXES.COMMON_WHITE_80};
   display: grid;
   gap: 16px;
   justify-items: center;

package/src/components/Login/components/Button/constants.ts

@@ -1,8 +1,7 @@
 import { ButtonProps } from "@mui/material";
-import { COLOR, VARIANT } from "../../../../styles/common/mui/button";
+import { BUTTON_PROPS as DX_BUTTON_PROPS } from "../../../common/Button/constants";
 
 export const BUTTON_PROPS: Partial<ButtonProps> = {
-  color: COLOR.SECONDARY,
+  ...DX_BUTTON_PROPS.SECONDARY_CONTAINED,
   fullWidth: true,
-  variant: VARIANT.CONTAINED,
 };

package/src/components/Login/components/Button/types.ts

@@ -1,4 +1,4 @@
 import { ButtonProps } from "@mui/material";
-import { BaseComponentProps } from "../../../../theme/common/entities";
+import { BaseComponentProps } from "../../../types";
 
 export type Props = BaseComponentProps & ButtonProps;

package/src/components/Login/components/Buttons/types.ts

@@ -1,7 +1,7 @@
 import { ButtonProps } from "@mui/material";
 import { ClientSafeProvider } from "next-auth/react";
 import { OAuthProvider } from "../../../../config/entities";
-import { BaseComponentProps } from "../../../../theme/common/entities";
+import { BaseComponentProps } from "../../../types";
 
 export interface Props<P> extends BaseComponentProps, ButtonProps {
   handleLogin: (providerId: string) => void;

package/src/components/Support/components/SupportRequest/components/Dialog/dialog.styles.ts

@@ -1,10 +1,10 @@
 import styled from "@emotion/styled";
 import { Fab as MFab, Popover as MPopover } from "@mui/material";
+import { COLOR_MIXES } from "../../../../../../styles/common/constants/colorMixes";
+import { SHADOWS } from "../../../../../../styles/common/constants/shadows";
 import { mediaTabletUp } from "../../../../../../styles/common/mixins/breakpoints";
 import { smokeMain } from "../../../../../../styles/common/mixins/colors";
-import { shadows02 } from "../../../../../../styles/common/mixins/shadows";
 import { tabletUp } from "../../../../../../theme/common/breakpoints";
-import { alpha80, inkMain } from "../../../../../../theme/common/palette";
 
 interface Props {
   open: boolean;
@@ -12,7 +12,7 @@ interface Props {
 
 export const Fab = styled(MFab)<Props>`
   bottom: 16px;
-  box-shadow: ${shadows02};
+  box-shadow: ${SHADOWS["02"]};
   position: fixed;
   right: 16px;
   z-index: ${({ open }) => (open ? 1350 : 1050)}; // Above backdrop component.
@@ -24,7 +24,7 @@ export const Fab = styled(MFab)<Props>`
 
 export const Popover = styled(MPopover)`
   &.MuiPopover-root {
-    background-color: ${inkMain}${alpha80};
+    background-color: ${COLOR_MIXES.INK_MAIN_80};
 
     > .MuiPaper-root {
       border: 1px solid ${smokeMain};

package/src/components/Support/components/ViewSupport/viewSupport.styles.ts

@@ -1,11 +1,11 @@
 import styled from "@emotion/styled";
+import { SHADOWS } from "../../../../styles/common/constants/shadows";
 import { mediaTabletUp } from "../../../../styles/common/mixins/breakpoints";
 import {
   primaryDark,
   primaryMain,
   white,
 } from "../../../../styles/common/mixins/colors";
-import { shadows02 } from "../../../../styles/common/mixins/shadows";
 
 export const Fab = styled("a")`
   align-items: center;
@@ -13,7 +13,7 @@ export const Fab = styled("a")`
   border: none;
   border-radius: 50%;
   bottom: 16px;
-  box-shadow: ${shadows02};
+  box-shadow: ${SHADOWS["02"]};
   color: ${white};
   cursor: pointer;
   display: flex;

package/src/components/Table/columnDef/columnFilters/filterFn.ts

@@ -0,0 +1,27 @@
+import { Row, RowData } from "@tanstack/react-table";
+
+/**
+ * Returns true if the row should be included in the filtered rows.
+ * The row will be included if:
+ * - the column value (string) equals a value in the filter values array, or
+ * - one of the column values is included in the filter values array.
+ * See https://github.com/TanStack/table/blob/c895bda085d0886a7eba00a08019f377efbac54c/packages/table-core/src/filterFns.ts.
+ * @param row - Row to filter.
+ * @param columnId - Column identifier to retrieve the row's value.
+ * @param filterValue - Filter value or values.
+ * @returns True if the row should be included in the filtered rows.
+ */
+export function arrIncludesSome<T extends RowData>(
+  row: Row<T>,
+  columnId: string,
+  filterValue: unknown[]
+): boolean {
+  return filterValue.some((val) => {
+    const columnValue = row.getValue<unknown[]>(columnId);
+    if (Array.isArray(columnValue)) {
+      return columnValue?.includes(val);
+    } else {
+      return columnValue === val;
+    }
+  });
+}

package/src/components/Table/common/columnDef.ts

@@ -8,6 +8,7 @@ import { COLUMN_IDENTIFIER } from "./columnIdentifier";
 export const COLUMN_DEF: Record<string, ColumnDef<RowData>> = {
   ROW_POSITION: {
     cell: RowPositionCell,
+    enableColumnFilter: false,
     enableGrouping: false,
     enableHiding: false,
     enableSorting: false,
@@ -22,6 +23,7 @@ export const COLUMN_DEF: Record<string, ColumnDef<RowData>> = {
   },
   ROW_SELECTION: {
     cell: RowSelectionCell,
+    enableColumnFilter: false,
     enableGrouping: false,
     enableHiding: false,
     enableSorting: false,

package/src/components/Table/common/utils.ts

@@ -10,7 +10,7 @@ import {
   Table,
 } from "@tanstack/react-table";
 import { SelectCategory } from "../../../common/entities";
-import { EXPLORE_MODE, ExploreMode } from "../../../hooks/useExploreMode";
+import { EXPLORE_MODE, ExploreMode } from "../../../hooks/useExploreMode/types";
 import { COLUMN_IDENTIFIER } from "./columnIdentifier";
 
 /**
@@ -29,32 +29,6 @@ type PinnedCell<T extends RowData> = [Cell<T, unknown>, number];
  */
 type TableData = number | string | string[];
 
-/**
- * Returns true if the row should be included in the filtered rows.
- * The row will be included if:
- * - the column value equals a value in the filter values array, or
- * - one of the column values is included in the filter values array.
- * See https://github.com/TanStack/table/blob/c895bda085d0886a7eba00a08019f377efbac54c/packages/table-core/src/filterFns.ts.
- * @param row - Row to filter.
- * @param columnId - Column identifier to retrieve the row's value.
- * @param filterValue - Filter value or values.
- * @returns True if the row should be included in the filtered rows.
- */
-export function arrIncludesSome<T extends RowData>(
-  row: Row<T>,
-  columnId: string,
-  filterValue: unknown[]
-): boolean {
-  return filterValue.some((val) => {
-    const columnValue = row.getValue<unknown[]>(columnId);
-    if (Array.isArray(columnValue)) {
-      return columnValue?.includes(val);
-    } else {
-      return columnValue === val;
-    }
-  });
-}
-
 /**
  * Build view-specific models from react table faceted values function.
  * @param columns - Table columns.

package/src/components/Table/components/Pagination/pagination.tsx

@@ -1,6 +1,7 @@
 import { EastRounded, WestRounded } from "@mui/icons-material";
 import { Typography } from "@mui/material";
 import React from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { IconButton } from "../../../common/IconButton/iconButton";
 import { Stack } from "../../../common/Stack/stack";
 import { Pagination as TablePagination } from "./pagination.styles";
@@ -23,8 +24,8 @@ export const Pagination = ({
   totalPage,
 }: PaginationProps): JSX.Element => {
   return (
-    <TablePagination>
-      <div>
+    <TablePagination data-testid={TEST_IDS.TABLE_PAGINATION}>
+      <div data-testid={TEST_IDS.TABLE_PAGINATION_PAGE}>
         <Typography variant="text-body-400">Page </Typography>
         <Typography variant="text-body-500">
           {currentPage} of {totalPage}

package/src/components/Table/components/PaginationSummary/paginationSummary.tsx

@@ -1,5 +1,6 @@
 import { Fade, Typography } from "@mui/material";
 import React from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
 
 export interface PaginationSummaryProps {
   firstResult: number;
@@ -14,7 +15,7 @@ export const PaginationSummary = ({
 }: PaginationSummaryProps): JSX.Element => {
   return (
     <Fade in={totalResult > 0}>
-      <div>
+      <div data-testid={TEST_IDS.TABLE_PAGINATION_RESULTS}>
         <Typography variant="text-body-400">Results </Typography>
         <Typography variant="text-body-small-500">
           {firstResult} - {lastResult}

package/src/components/Table/components/TableRows/tableRows.tsx

@@ -2,6 +2,7 @@ import { TableCell } from "@mui/material";
 import { flexRender, Row, RowData } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
 import React, { Fragment } from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
 import {
   getTableCellAlign,
   getTableCellPadding,
@@ -21,21 +22,27 @@ export const TableRows = <T extends RowData>({
   return (
     <Fragment>
       {virtualItems.map((virtualRow) => {
-        const row = rows[virtualRow.index] as Row<T>;
+        const rowIndex = virtualRow.index;
+        const row = rows[rowIndex] as Row<T>;
         const { getIsGrouped, getIsPreview } = row;
         return (
           <TableRow
             key={row.id}
-            data-index={virtualRow.index}
+            data-index={rowIndex}
             isGrouped={getIsGrouped()}
             isPreview={getIsPreview()}
             ref={virtualizer.measureElement}
           >
-            {row.getVisibleCells().map((cell) => {
+            {row.getVisibleCells().map((cell, i) => {
               if (cell.getIsAggregated()) return null; // Display of aggregated cells is currently not supported.
               if (cell.getIsPlaceholder()) return null; // Display of placeholder cells is currently not supported.
               return (
                 <TableCell
+                  data-testid={
+                    rowIndex === 0 && i === 0
+                      ? TEST_IDS.TABLE_FIRST_CELL
+                      : undefined
+                  }
                   key={cell.id}
                   align={getTableCellAlign(cell.column)}
                   padding={getTableCellPadding(cell.column.id)}

package/src/components/Table/table.tsx

@@ -27,7 +27,7 @@ import {
   BREAKPOINT_FN_NAME,
   useBreakpointHelper,
 } from "../../hooks/useBreakpointHelper";
-import { useExploreMode } from "../../hooks/useExploreMode";
+import { useExploreMode } from "../../hooks/useExploreMode/useExploreMode";
 import { useExploreState } from "../../hooks/useExploreState";
 import { useScroll } from "../../hooks/useScroll";
 import { ExploreActionKind } from "../../providers/exploreState";
@@ -36,6 +36,7 @@ import { TABLET } from "../../theme/common/breakpoints";
 import { Loading, LOADING_PANEL_STYLE } from "../Loading/loading";
 import { NoResults } from "../NoResults/noResults";
 import { getColumnTrackSizing } from "../TableCreator/options/columnTrackSizing/utils";
+import { arrIncludesSome } from "./columnDef/columnFilters/filterFn";
 import { ROW_DIRECTION } from "./common/entities";
 import {
   buildCategoryViews,
@@ -168,6 +169,7 @@ TableProps<T>): JSX.Element => {
     enableColumnFilters: true, // client-side filtering.
     enableFilters: true, // client-side filtering.
     enableMultiSort: clientFiltering, // TODO(cc) move to sorting options; default to false and let the table options in config flag this value.
+    filterFns: { arrIncludesSome },
     getCoreRowModel: getCoreRowModel(),
     getFacetedRowModel: clientFiltering ? getFacetedRowModel() : undefined,
     getFacetedUniqueValues: clientFiltering

package/src/components/TableCreator/tableCreator.tsx

@@ -8,7 +8,7 @@ import React, { useMemo } from "react";
 import { ColumnConfig, ListViewConfig } from "../../config/entities";
 import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
 import { COLUMN_DEF } from "../Table/common/columnDef";
-import { arrIncludesSome, sortingFn } from "../Table/common/utils";
+import { sortingFn } from "../Table/common/utils";
 import { Table } from "../Table/table";
 import { buildBaseColumnDef } from "./common/utils";
 import { useTableOptions } from "./options/hook";
@@ -45,11 +45,25 @@ export const TableCreator = <T extends RowData>({
   const columnDefs: ColumnDef<T>[] = useMemo(
     () =>
       columns.reduce(
-        (acc, columnConfig) => {
+        (
+          acc,
+          {
+            /**
+             * Applies the custom `arrIncludesSome` filter function as the default for multi-value filtering.
+             * Although `ColumnFilter["value"]` is typed as `unknown`, in practice it's consistently an array (`unknown[]`) in entity lists.
+             * This custom filter function supports multi-select filtering, even when individual cell values are single strings.
+             * This override of TanStack's default `arrIncludesSome` resolves a limitation where the base implementation
+             * does not support matching an array of filter values against a single string cell value.
+             * For range filtering, specify TanStack's `inNumberRange` filter function on the column definition.
+             */
+            filterFn = "arrIncludesSome",
+            ...columnConfig
+          }
+        ) => {
           acc.push({
             ...buildBaseColumnDef(columnConfig),
             cell: createCell(columnConfig),
-            filterFn: arrIncludesSome,
+            filterFn,
             sortingFn: sortingFn,
           });
           return acc;

package/src/components/common/Button/components/ButtonOutline/buttonOutline.styles.ts

@@ -1,18 +1,18 @@
 import styled from "@emotion/styled";
-import { white } from "../../../../../styles/common/mixins/colors";
-import { alpha32, alpha64 } from "../../../../../theme/common/palette";
+import { COLOR_MIXES } from "../../../../../styles/common/constants/colorMixes";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
 import { Button } from "../../button";
 
 export const ButtonOutline = styled(Button)`
-  box-shadow: inset 0 0 0 1px ${white}${alpha32};
-  color: ${white};
+  box-shadow: inset 0 0 0 1px ${COLOR_MIXES.COMMON_WHITE_32};
+  color: ${PALETTE.COMMON_WHITE};
 
   &:hover {
-    box-shadow: inset 0 0 0 1px ${white}${alpha64};
+    box-shadow: inset 0 0 0 1px ${COLOR_MIXES.COMMON_WHITE_64};
   }
 
   &:disabled {
-    box-shadow: inset 0 0 0 1px ${white}${alpha32};
-    color: ${white};
+    box-shadow: inset 0 0 0 1px ${COLOR_MIXES.COMMON_WHITE_32};
+    color: ${PALETTE.COMMON_WHITE};
   }
 `;

package/src/components/common/Button/constants.ts

@@ -0,0 +1,23 @@
+import { ButtonProps } from "@mui/material";
+import { BUTTON_PROPS as MUI_BUTTON_PROPS } from "../../../styles/common/mui/button";
+
+export const BUTTON_PROPS: Record<string, Partial<ButtonProps>> = {
+  PRIMARY_CONTAINED: {
+    color: MUI_BUTTON_PROPS.COLOR.PRIMARY,
+    variant: MUI_BUTTON_PROPS.VARIANT.CONTAINED,
+  },
+  PRIMARY_MEDIUM_CONTAINED: {
+    color: MUI_BUTTON_PROPS.COLOR.PRIMARY,
+    size: MUI_BUTTON_PROPS.SIZE.MEDIUM,
+    variant: MUI_BUTTON_PROPS.VARIANT.CONTAINED,
+  },
+  SECONDARY_CONTAINED: {
+    color: MUI_BUTTON_PROPS.COLOR.SECONDARY,
+    variant: MUI_BUTTON_PROPS.VARIANT.CONTAINED,
+  },
+  SECONDARY_MEDIUM_CONTAINED: {
+    color: MUI_BUTTON_PROPS.COLOR.SECONDARY,
+    size: MUI_BUTTON_PROPS.SIZE.MEDIUM,
+    variant: MUI_BUTTON_PROPS.VARIANT.CONTAINED,
+  },
+};

package/src/components/common/LoginDialog/loginDialog.styles.ts

@@ -1,12 +1,11 @@
 import styled from "@emotion/styled";
 import { Dialog } from "@mui/material";
-import { inkMain } from "../../../styles/common/mixins/colors";
-import { alpha80 } from "../../../theme/common/palette";
+import { COLOR_MIXES } from "../../../styles/common/constants/colorMixes";
 
 export const StyledDialog = styled(Dialog)`
   &.MuiDialog-root {
     .MuiBackdrop-root {
-      background-color: ${inkMain}${alpha80};
+      background-color: ${COLOR_MIXES.INK_MAIN_80};
     }
 
     .MuiDialog-paper {

package/src/components/types.ts

@@ -12,6 +12,10 @@ export interface ContentProps {
   content?: ReactNode;
 }
 
+export interface TrackingProps {
+  trackingId?: string;
+}
+
 export interface TestIdProps {
   testId?: string;
 }