@databiosphere/findable-ui 3.1.0 → 4.0.0

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

@@ -1,6 +1,8 @@
-import { TableCell, TableRow as MTableRow } from "@mui/material";
-import { flexRender, Table } from "@tanstack/react-table";
+import { TableCell as MTableCell, TableRow as MTableRow } from "@mui/material";
+import { flexRender, Row, Table } from "@tanstack/react-table";
+import { RowData } from "@tanstack/table-core";
 import React, { Fragment } from "react";
+import { getTableCellPadding } from "../../../../../Table/components/TableCell/common/utils";
 import { TableView } from "../../table";
 
 export interface TableRowsProps<T> {
@@ -8,7 +10,7 @@ export interface TableRowsProps<T> {
   tableView?: TableView;
 }
 
-export const TableRows = <T extends object>({
+export const TableRows = <T extends RowData>({
   tableInstance,
   tableView,
 }: TableRowsProps<T>): JSX.Element => {
@@ -20,12 +22,18 @@ export const TableRows = <T extends object>({
     <Fragment>
       {rows.map((row) => {
         return (
-          <MTableRow key={row.id}>
+          <MTableRow id={getRowId(row)} key={row.id}>
             {row.getVisibleCells().map((cell) => {
+              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 key={cell.id} size={tableCellSize}>
+                <MTableCell
+                  key={cell.id}
+                  padding={getTableCellPadding(cell.column.id)}
+                  size={tableCellSize}
+                >
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </TableCell>
+                </MTableCell>
               );
             })}
           </MTableRow>
@@ -34,3 +42,18 @@ export const TableRows = <T extends object>({
     </Fragment>
   );
 };
+
+/**
+ * Returns identifier for a row.
+ * @param row - Row.
+ * @returns row identifier.
+ */
+function getRowId<T extends RowData>(row: Row<T>): string | undefined {
+  const { depth, getIsGrouped, id } = row;
+  if (getIsGrouped()) {
+    return `grouped-row-${id}`;
+  }
+  if (depth > 0) {
+    return `sub-row-${id}`;
+  }
+}

package/src/components/Detail/components/Table/table.tsx

@@ -9,6 +9,7 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
+import { TableOptions } from "@tanstack/table-core";
 import React from "react";
 import {
   BREAKPOINT_FN_NAME,
@@ -16,10 +17,10 @@ import {
 } from "../../../../hooks/useBreakpointHelper";
 import { TABLET } from "../../../../theme/common/breakpoints";
 import { ROW_DIRECTION } from "../../../Table/common/entities";
+import { TableHead } from "../../../Table/components/TableHead/tableHead";
 import { GridTable } from "../../../Table/table.styles";
 import { generateColumnDefinitions } from "./common/utils";
 import { TableBody } from "./components/TableBody/tableBody";
-import { TableHead } from "./components/TableHead/tableHead";
 
 export interface TableView {
   table?: Partial<MTableProps>;
@@ -33,6 +34,7 @@ export interface TableProps<T extends object> {
   columns: ColumnDef<T>[];
   gridTemplateColumns: string;
   items: T[];
+  tableOptions?: Partial<TableOptions<T>>;
   tableView?: TableView;
 }
 
@@ -42,6 +44,7 @@ export const Table = <T extends object>({
   columns,
   gridTemplateColumns,
   items,
+  tableOptions,
   tableView,
 }: TableProps<T>): JSX.Element => {
   const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
@@ -53,7 +56,9 @@ export const Table = <T extends object>({
   const tableInstance = useReactTable({
     columns: generateColumnDefinitions(columns),
     data: items,
+    enableSorting: false,
     getCoreRowModel: getCoreRowModel(),
+    ...tableOptions,
   });
   return (
     <TableContainer className={className} sx={tableContainerSx}>

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

@@ -0,0 +1 @@
+export const URL_OBJECT_KEYS = ["href", "query"];

package/src/components/Links/common/entities.ts

@@ -1,4 +1,15 @@
+import { UrlObject } from "url";
+
 export enum ANCHOR_TARGET {
   BLANK = "_blank",
   SELF = "_self",
 }
+
+export type StrictUrlObject = Omit<UrlObject, "href" | "query"> & {
+  href: string;
+  query: string;
+};
+
+export type Url = string | UrlObjectWithHrefAndQuery;
+
+export type UrlObjectWithHrefAndQuery = Pick<StrictUrlObject, "href" | "query">;

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

@@ -1,3 +1,6 @@
+import { URL_OBJECT_KEYS } from "./constants";
+import { Url, UrlObjectWithHrefAndQuery } from "./entities";
+
 /**
  * Returns true if the given link is an internal link.
  * @param link - Link.
@@ -6,3 +9,28 @@
 export function isClientSideNavigation(link: string): boolean {
   return /^\/(?!\/)/.test(link);
 }
+
+/**
+ * Returns true if the given url is a URL object with href and query.
+ * @param value - URL.
+ * @returns true if the given url is a URL object with href and query.
+ */
+export function isURLObjectWithHrefAndQuery(
+  value: Url
+): value is UrlObjectWithHrefAndQuery {
+  return (
+    typeof value !== "string" &&
+    Object.entries(value).every(
+      ([key, value]) => URL_OBJECT_KEYS.includes(key) && !!value
+    )
+  );
+}
+
+/**
+ * Returns true if the given url is a string.
+ * @param value - URL.
+ * @returns true if the given url is a string.
+ */
+export function isURLString(value: Url): value is string {
+  return typeof value === "string";
+}

package/src/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.tsx

@@ -0,0 +1,172 @@
+import Link from "next/link";
+import React, { useCallback } from "react";
+import { UrlObject } from "url";
+import { SelectedFilter } from "../../../../../../common/entities";
+import { useExploreState } from "../../../../../../hooks/useExploreState";
+import {
+  ExploreActionKind,
+  ExploreState,
+} from "../../../../../../providers/exploreState";
+import {
+  ANCHOR_TARGET,
+  UrlObjectWithHrefAndQuery,
+} from "../../../../common/entities";
+import { LinkProps } from "../../link";
+
+const PARAM_FILTER = "filter";
+
+export interface ExploreViewLinkProps
+  extends Omit<LinkProps, "copyable" | "noWrap" | "url"> {
+  url: UrlObjectWithHrefAndQuery;
+}
+
+export const ExploreViewLink = ({
+  className,
+  label,
+  onClick,
+  target = ANCHOR_TARGET.SELF,
+  url,
+}: ExploreViewLinkProps): JSX.Element => {
+  const { exploreDispatch, exploreState } = useExploreState();
+
+  if (!isValidExploreURL(url, exploreState)) {
+    throwError(url);
+  }
+
+  const onNavigate = useCallback(() => {
+    const entityListType = getEntityListType(url.href);
+    const filters = getSelectedFilters(url.query);
+    exploreDispatch({
+      payload: { entityListType, filters },
+      type: ExploreActionKind.UpdateEntityFilters,
+    });
+    onClick?.();
+  }, [exploreDispatch, onClick, url]);
+
+  return (
+    <Link
+      className={className}
+      href={url.href}
+      onClick={onNavigate}
+      rel="noopener"
+      target={target}
+    >
+      {label}
+    </Link>
+  );
+};
+
+/**
+ * Returns the entity list type "entityListType" inferred from the given href.
+ * @param href - Href.
+ * @returns entity list type.
+ */
+function getEntityListType(href: UrlObjectWithHrefAndQuery["href"]): string {
+  return href.substring(1);
+}
+
+/**
+ * Returns the selected filters from the given query.
+ * @param query - Query.
+ * @returns selected filters.
+ */
+function getSelectedFilters(
+  query: UrlObjectWithHrefAndQuery["query"]
+): SelectedFilter[] {
+  const decodedQuery = decodeURIComponent(query);
+  const parsedQuery = JSON.parse(decodedQuery);
+  return parsedQuery[PARAM_FILTER];
+}
+
+/**
+ * Returns true if the given value is a SelectedFilter.
+ * @param value - Value.
+ * @returns true if the given value is a SelectedFilter.
+ */
+function isSelectedFilter(value: unknown): value is SelectedFilter {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "categoryKey" in value &&
+    "value" in value
+  );
+}
+
+/**
+ * Returns true if the given query string is a valid JSON string.
+ * @param query - Query string.
+ * @returns true if the given query string is a valid JSON string.
+ */
+function isValidJsonString(query: string): boolean {
+  try {
+    JSON.parse(query);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+/**
+ * Returns true if the given explore link is valid.
+ * @param url - Explore link URL.
+ * @param exploreState - Explore state.
+ * @returns true if the given explore link is valid.
+ */
+function isValidExploreURL(
+  url: UrlObjectWithHrefAndQuery,
+  exploreState: ExploreState
+): boolean {
+  const validHref = isValidHref(url, exploreState);
+  const validQuery = isValidQuery(url);
+  return validHref && validQuery;
+}
+
+/**
+ * Returns true if the given href is a configured key in the explore state's entityPageState.
+ * @param url - Explore link URL.
+ * @param exploreState - Explore state.
+ * @returns true if the given href is configured in the explore state.
+ */
+function isValidHref(
+  url: UrlObjectWithHrefAndQuery,
+  exploreState: ExploreState
+): boolean {
+  const { entityPageState } = exploreState;
+  const { href } = url;
+  return href.startsWith("/") && href.substring(1) in entityPageState;
+}
+
+/**
+ * Returns true if the given explore query is valid.
+ * @param url - Explore link URL.
+ * @returns true if the given explore query is valid.
+ */
+function isValidQuery(url: UrlObjectWithHrefAndQuery): boolean {
+  const { query } = url;
+  // Decode and parse the query.
+  const decodedQuery = decodeURIComponent(query);
+  // Query should be a valid JSON string.
+  if (isValidJsonString(decodedQuery)) {
+    const parsedQuery = JSON.parse(decodedQuery);
+    // Query should contain "filter" key.
+    if (PARAM_FILTER in parsedQuery) {
+      const filters = parsedQuery[PARAM_FILTER];
+      // Filter should be an array.
+      if (Array.isArray(filters)) {
+        // Filter should contain only SelectedFilter objects.
+        return filters.every(isSelectedFilter);
+      }
+    }
+  }
+  return false;
+}
+
+/**
+ * Throws an error with the given URL object.
+ * @param url - URL object.
+ */
+function throwError(url: UrlObject): never {
+  throw new Error(
+    `Invalid explore URL href or query: ${url.href}, ${url.query}`
+  );
+}

package/src/components/Links/components/Link/link.tsx

@@ -3,8 +3,13 @@ import NLink from "next/link";
 import React, { ReactNode } from "react";
 import { isValidUrl } from "../../../../common/utils";
 import { CopyToClipboard } from "../../../common/CopyToClipboard/copyToClipboard";
-import { ANCHOR_TARGET } from "../../common/entities";
-import { isClientSideNavigation } from "../../common/utils";
+import { ANCHOR_TARGET, Url } from "../../common/entities";
+import {
+  isClientSideNavigation,
+  isURLObjectWithHrefAndQuery,
+  isURLString,
+} from "../../common/utils";
+import { ExploreViewLink } from "./components/ExploreViewLink/exploreViewLink";
 
 export interface LinkProps {
   className?: string;
@@ -13,7 +18,7 @@ export interface LinkProps {
   noWrap?: MLinkProps["noWrap"];
   onClick?: () => void;
   target?: ANCHOR_TARGET;
-  url: string;
+  url: Url /* url specified as UrlObject with href and query defined, and is currently only used for internal links */;
 }
 
 export const Link = ({
@@ -25,9 +30,22 @@ export const Link = ({
   target,
   url,
 }: LinkProps): JSX.Element => {
-  return (
-    <>
-      {isClientSideNavigation(url) ? (
+  if (isURLObjectWithHrefAndQuery(url)) {
+    /* Internal navigation - explore link */
+    return (
+      <ExploreViewLink
+        className={className}
+        label={label}
+        onClick={onClick}
+        target={target}
+        url={url}
+      />
+    );
+  }
+  if (isURLString(url)) {
+    if (isClientSideNavigation(url)) {
+      /* Client-side navigation */
+      return (
         <>
           <NLink href={url} legacyBehavior passHref>
             <MLink
@@ -42,23 +60,27 @@ export const Link = ({
           </NLink>
           {copyable && <CopyToClipboard copyStr={url} />}
         </>
-      ) : isValidUrl(url) ? (
+      );
+    }
+    if (isValidUrl(url)) {
+      /* External navigation */
+      return (
         <>
           <MLink
             className={className}
             href={url}
-            rel="noopener noreferrer"
             noWrap={noWrap}
-            target={target || ANCHOR_TARGET.BLANK}
             onClick={onClick}
+            rel="noopener noreferrer"
+            target={target || ANCHOR_TARGET.BLANK}
           >
             {label}
           </MLink>
           {copyable && <CopyToClipboard copyStr={url} />}
         </>
-      ) : (
-        label
-      )}
-    </>
-  );
+      );
+    }
+  }
+  /* Invalid URL */
+  return <>{label}</>;
 };

package/src/components/Table/common/gridTable.styles.ts

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import { Table as MTable } from "@mui/material";
+import { smokeLightest, white } from "../../../styles/common/mixins/colors";
 
 export interface GridTableProps {
   gridTemplateColumns: string;
@@ -21,7 +22,7 @@ export const GridTable = styled(MTable, {
 
   td,
   th {
-    background-color: ${({ theme }) => theme.palette.common.white};
+    background-color: ${white};
   }
 
   td,
@@ -35,4 +36,11 @@ export const GridTable = styled(MTable, {
       min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
     }
   }
+
+  [id^="grouped-row"] {
+    td {
+      background-color: ${smokeLightest};
+      grid-column: 1 / -1;
+    }
+  }
 `;

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

@@ -363,6 +363,15 @@ export function isClientFilteringEnabled(exploreMode: ExploreMode): boolean {
   );
 }
 
+/**
+ * Returns true if the collapsable row is disabled; i.e. only one column is visible.
+ * @param tableInstance - Table instance.
+ * @returns true if the collapsable row is disabled.
+ */
+export function isCollapsableRowDisabled<T>(tableInstance: Table<T>): boolean {
+  return tableInstance.getVisibleLeafColumns().length === 1;
+}
+
 /**
  * Returns true if column has a sort direction.
  * @param sortDirection - Column sort direction.

package/src/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.styles.ts

@@ -35,6 +35,10 @@ export const PinnedCell = styled.div`
   justify-content: space-between;
   padding: 12px 16px;
   word-break: break-word;
+
+  .MuiIconButton-root.Mui-disabled {
+    opacity: 0.5;
+  }
 `;
 
 export const CollapsedContents = styled.div`

package/src/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.tsx

@@ -1,5 +1,5 @@
 import { Collapse, IconButton, Typography } from "@mui/material";
-import { flexRender, Row } from "@tanstack/react-table";
+import { Cell, flexRender, Row, RowData } from "@tanstack/react-table";
 import React, { useState } from "react";
 import { TEXT_BODY_400_2_LINES } from "../../../../../../theme/common/typography";
 import { UnfoldMoreIcon } from "../../../../../common/CustomIcon/components/UnfoldMoreIcon/unfoldMoreIcon";
@@ -11,11 +11,13 @@ import {
   TableCell,
 } from "./collapsableCell.styles";
 
-export interface CollapsableCellProps<T> {
+export interface CollapsableCellProps<T extends RowData> {
+  isDisabled?: boolean;
   row: Row<T>;
 }
 
-export const CollapsableCell = <T extends object>({
+export const CollapsableCell = <T extends RowData>({
+  isDisabled = false,
   row,
 }: CollapsableCellProps<T>): JSX.Element => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
@@ -32,6 +34,7 @@ export const CollapsableCell = <T extends object>({
         {flexRender(pinnedCell.column.columnDef.cell, pinnedCell.getContext())}
         <IconButton
           color="ink"
+          disabled={isDisabled}
           edge="end"
           onClick={onToggleExpanded}
           size="large"
@@ -41,7 +44,9 @@ export const CollapsableCell = <T extends object>({
       </PinnedCell>
       <Collapse in={isExpanded}>
         <CollapsedContents>
-          {row.getVisibleCells().map((cell, i) => {
+          {getRowVisibleCells(row).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.
             const header = cell.column.columnDef.meta?.header;
             return (
               i !== pinnedIndex && (
@@ -65,3 +70,20 @@ export const CollapsableCell = <T extends object>({
     </TableCell>
   );
 };
+
+/**
+ * Returns row or sub row visible cells.
+ * @param row - Row.
+ * @returns row or sub row visible cells.
+ */
+function getRowVisibleCells<T extends RowData>(
+  row: Row<T>
+): Cell<T, unknown>[] {
+  if (row.getIsGrouped()) {
+    return row
+      .getLeafRows()
+      .map((leafRow) => leafRow.getVisibleCells())
+      .flat();
+  }
+  return row.getVisibleCells();
+}

package/src/components/Table/components/TableHead/tableHead.tsx

@@ -1,7 +1,7 @@
 import {
   TableCell as MTableCell,
   TableHead as MTableHead,
-  TableRow,
+  TableRow as MTableRow,
   TableSortLabel,
 } from "@mui/material";
 import { flexRender, Table } from "@tanstack/react-table";
@@ -24,28 +24,39 @@ export const TableHead = <T extends object>({
       {rowDirection === ROW_DIRECTION.DEFAULT &&
         tableInstance.getHeaderGroups().map((headerGroup) => (
           <MTableHead key={headerGroup.id}>
-            <TableRow>
-              {headerGroup.headers.map((header) => (
-                <MTableCell
-                  key={header.id}
-                  padding={getTableCellPadding(header.id)}
-                >
-                  {header.column.getCanSort() ? (
-                    <TableSortLabel {...getTableSortLabelProps(header.column)}>
-                      {flexRender(
+            <MTableRow>
+              {headerGroup.headers.map((header) => {
+                const {
+                  column: {
+                    columnDef: {
+                      meta: { enableSortingInteraction = true } = {},
+                    },
+                  },
+                } = header;
+                return header.column.getIsGrouped() ? null : (
+                  <MTableCell
+                    key={header.id}
+                    padding={getTableCellPadding(header.id)}
+                  >
+                    {header.column.getCanSort() && enableSortingInteraction ? (
+                      <TableSortLabel
+                        {...getTableSortLabelProps(header.column)}
+                      >
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                      </TableSortLabel>
+                    ) : (
+                      flexRender(
                         header.column.columnDef.header,
                         header.getContext()
-                      )}
-                    </TableSortLabel>
-                  ) : (
-                    flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )
-                  )}
-                </MTableCell>
-              ))}
-            </TableRow>
+                      )
+                    )}
+                  </MTableCell>
+                );
+              })}
+            </MTableRow>
           </MTableHead>
         ))}
     </Fragment>

package/src/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -2,6 +2,7 @@ import { TableRow as MTableRow } from "@mui/material";
 import { Row, Table } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
 import React, { Fragment } from "react";
+import { isCollapsableRowDisabled } from "../../../../common/utils";
 import { CollapsableCell } from "../../../TableCell/components/CollapsableCell/collapsableCell";
 
 export interface CollapsableRowsProps<T> {
@@ -26,7 +27,10 @@ export const CollapsableRows = <T extends object>({
             data-index={virtualRow.index}
             ref={virtualizer.measureElement}
           >
-            <CollapsableCell row={row} />
+            <CollapsableCell
+              isDisabled={isCollapsableRowDisabled(tableInstance)}
+              row={row}
+            />
           </MTableRow>
         );
       })}

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

@@ -25,6 +25,7 @@ export function buildBaseColumnDef<T, TValue>(
     header,
     id,
     meta: {
+      ...meta,
       columnPinned,
       header: meta ? meta.header : header,
       width,

package/src/components/common/CustomIcon/components/AddLinkIcon/addLinkIcon.tsx

@@ -0,0 +1,18 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+export const AddLinkIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M12.8248 12.6004H11.4561C11.2811 12.6004 11.1279 12.5357 10.9967 12.4063C10.8654 12.277 10.7998 12.1166 10.7998 11.9254C10.7998 11.7504 10.8645 11.5941 10.9939 11.4566C11.1232 11.3191 11.2836 11.2504 11.4748 11.2504H12.8248V9.90039C12.8248 9.70914 12.8891 9.54883 13.0177 9.41945C13.1464 9.29008 13.3057 9.22539 13.4959 9.22539C13.686 9.22539 13.8459 9.29008 13.9755 9.41945C14.1052 9.54883 14.1701 9.70914 14.1701 9.90039V11.2504H15.5233C15.7149 11.2504 15.8756 11.3151 16.0054 11.4445C16.135 11.5738 16.1998 11.7341 16.1998 11.9254C16.1998 12.1166 16.135 12.277 16.0054 12.4063C15.8756 12.5357 15.7149 12.6004 15.5233 12.6004H14.1701V13.9504C14.1701 14.1416 14.1052 14.302 13.9755 14.4313C13.8459 14.5607 13.686 14.6254 13.4959 14.6254C13.3057 14.6254 13.1464 14.5607 13.0177 14.4313C12.8891 14.302 12.8248 14.1416 12.8248 13.9504V12.6004ZM7.4248 12.6004H5.3998C4.4038 12.6004 3.5548 12.249 2.8528 11.5461C2.1508 10.8433 1.7998 9.99333 1.7998 8.99608C1.7998 7.99895 2.1508 7.15039 2.8528 6.45039C3.5548 5.75039 4.4038 5.40039 5.3998 5.40039H7.4248C7.5998 5.40039 7.75605 5.46914 7.89355 5.60664C8.03105 5.74414 8.0998 5.90352 8.0998 6.08477C8.0998 6.26602 8.03105 6.42227 7.89355 6.55352C7.75605 6.68477 7.5998 6.75039 7.4248 6.75039H5.3998C4.7748 6.75039 4.24355 6.96914 3.80605 7.40664C3.36855 7.84414 3.1498 8.37539 3.1498 9.00039C3.1498 9.62539 3.36855 10.1566 3.80605 10.5941C4.24355 11.0316 4.7748 11.2504 5.3998 11.2504H7.4248C7.5998 11.2504 7.75605 11.3191 7.89355 11.4566C8.03105 11.5941 8.0998 11.7535 8.0998 11.9348C8.0998 12.116 8.03105 12.2723 7.89355 12.4035C7.75605 12.5348 7.5998 12.6004 7.4248 12.6004ZM6.98005 9.67539C6.78905 9.67539 6.62793 9.61108 6.49668 9.48245C6.36543 9.35383 6.2998 9.19445 6.2998 9.00433C6.2998 8.8142 6.36443 8.65352 6.49368 8.52227C6.62293 8.39102 6.78305 8.32539 6.97405 8.32539H11.0196C11.2106 8.32539 11.3717 8.3897 11.5029 8.51833C11.6342 8.64695 11.6998 8.80633 11.6998 8.99645C11.6998 9.18658 11.6352 9.34727 11.5059 9.47852C11.3767 9.60977 11.2166 9.67539 11.0256 9.67539H6.98005ZM16.1998 9.00039H14.8498C14.8498 8.37539 14.6311 7.84414 14.1936 7.40664C13.7561 6.96914 13.2248 6.75039 12.5998 6.75039H10.5561C10.3811 6.75039 10.2279 6.6857 10.0967 6.55633C9.96543 6.42695 9.8998 6.26664 9.8998 6.07539C9.8998 5.90039 9.96449 5.74414 10.0939 5.60664C10.2232 5.46914 10.3836 5.40039 10.5748 5.40039H12.5998C13.5958 5.40039 14.4448 5.75139 15.1468 6.45339C15.8488 7.15539 16.1998 8.00439 16.1998 9.00039Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};