@databiosphere/findable-ui 22.0.0 → 23.0.0

package/src/components/Layout/components/ContentLayout/contentLayout.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 import React, { ReactNode } from "react";
-import { useLayoutState } from "../../../../hooks/useLayoutState";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import { BaseComponentProps } from "../../../types";
 import { LayoutStyle } from "./common/entities";
 import {
@@ -29,9 +29,7 @@ export const ContentLayout = ({
   outline,
 }: BaseComponentProps & ContentLayoutProps): JSX.Element => {
   const { asPath } = useRouter();
-  const {
-    layoutState: { headerHeight },
-  } = useLayoutState();
+  const { dimensions } = useLayoutDimensions();
   return (
     <Layout
       className={className}
@@ -40,16 +38,16 @@ export const ContentLayout = ({
     >
       {navigation && (
         <NavigationGrid
-          headerHeight={headerHeight}
+          headerHeight={dimensions.header.height}
           panelColor={layoutStyle?.navigation}
         >
-          <Positioner headerHeight={headerHeight}>
+          <Positioner headerHeight={dimensions.header.height}>
             <Navigation>{navigation}</Navigation>
           </Positioner>
         </NavigationGrid>
       )}
       <ContentGrid
-        headerHeight={headerHeight}
+        headerHeight={dimensions.header.height}
         panelColor={layoutStyle?.content}
       >
         <Content>{content}</Content>
@@ -57,10 +55,10 @@ export const ContentLayout = ({
       {outline && (
         <OutlineGrid
           key={getOutlineKey(asPath)}
-          headerHeight={headerHeight}
+          headerHeight={dimensions.header.height}
           panelColor={layoutStyle?.outline}
         >
-          <Positioner headerHeight={headerHeight}>
+          <Positioner headerHeight={dimensions.header.height}>
             <Outline>{outline}</Outline>
           </Positioner>
         </OutlineGrid>

package/src/components/Layout/components/Footer/footer.styles.ts

@@ -8,6 +8,7 @@ import { Link as DXLink } from "../../../Links/components/Link/link";
 
 export const AppBar = styled(MAppBar)`
   padding: 16px 0;
+  z-index: 1; /* required for outline or navigation overflow */
 
   .MuiToolbar-root {
     align-items: flex-start;

package/src/components/Layout/components/Footer/footer.tsx

@@ -1,5 +1,7 @@
 import { Toolbar } from "@mui/material";
 import React, { ReactNode } from "react";
+import { SELECTOR } from "../../../../common/selectors";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import { Social } from "../../../common/Socials/socials";
 import { ANCHOR_TARGET } from "../../../Links/common/entities";
 import { isNodeBoolean } from "../../../utils";
@@ -22,11 +24,14 @@ export const Footer = ({
   socials,
   versionInfo,
 }: FooterProps): JSX.Element => {
+  const { footerRef } = useLayoutDimensions();
   return (
     <AppBar
       className={className}
       color="inherit"
       component="footer"
+      id={SELECTOR.FOOTER}
+      ref={footerRef}
       variant="footer"
     >
       <Toolbar variant="dense">

package/src/components/Layout/components/Header/header.tsx

@@ -1,7 +1,9 @@
 import { Fade, Toolbar } from "@mui/material";
 import { usePathname } from "next/navigation";
 import React, { ReactNode } from "react";
+import { SELECTOR } from "../../../../common/selectors";
 import { ComponentsConfig } from "../../../../config/entities";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import {
   APP_BAR_PROPS,
   FADE_TRANSITION_PROPS,
@@ -29,7 +31,6 @@ import { Socials } from "./components/Content/components/Socials/socials.styles"
 import { AppBar, Center, Left, Right } from "./header.styles";
 import { useHeaderNavigation } from "./hooks/useHeaderNavigation";
 import { useHeaderVisibility } from "./hooks/useHeaderVisibility";
-import { useMeasureHeader } from "./hooks/useMeasureHeader";
 import { useMenu } from "./hooks/useMenu";
 
 export interface HeaderProps {
@@ -48,7 +49,7 @@ export interface HeaderProps {
 export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
   const { navigation } = useHeaderNavigation(headerProps);
   const { isIn } = useHeaderVisibility({ ...headerProps, navigation });
-  const { headerRef } = useMeasureHeader();
+  const { headerRef } = useLayoutDimensions();
   const { onClose, onOpen, open } = useMenu();
   const pathname = usePathname() ?? "";
   const {
@@ -68,7 +69,12 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
     pathname,
   };
   return (
-    <AppBar {...APP_BAR_PROPS} ref={headerRef} className={className}>
+    <AppBar
+      {...APP_BAR_PROPS}
+      className={className}
+      id={SELECTOR.HEADER}
+      ref={headerRef}
+    >
       {/* Announcements */}
       <Announcements announcements={announcements} />
       {/* Toolbar */}

package/src/components/Layout/components/Main/main.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { useLayoutState } from "../../../../hooks/useLayoutState";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import { MainWithOffset } from "./main.styles";
 
 export interface MainProps {
@@ -8,10 +8,9 @@ export interface MainProps {
 }
 
 export const Main = ({ children, className }: MainProps): JSX.Element => {
-  const { layoutState } = useLayoutState();
-  const { headerHeight } = layoutState;
+  const { dimensions } = useLayoutDimensions();
   return (
-    <MainWithOffset className={className} offset={headerHeight}>
+    <MainWithOffset className={className} offset={dimensions.header.height}>
       {children}
     </MainWithOffset>
   );

package/src/components/Layout/components/Outline/components/ContentsTab/contentsTab.styles.ts

@@ -1,10 +1,10 @@
 import styled from "@emotion/styled";
-import { Tab as MTab } from "@mui/material";
+import { Tab } from "@mui/material";
 import { inkLight } from "../../../../../../styles/common/mixins/colors";
 import { textUppercase500 } from "../../../../../../styles/common/mixins/fonts";
 import { tab } from "../../outline.styles";
 
-export const Tab = styled(MTab)`
+export const StyledTab = styled(Tab)`
   ${tab};
 
   && {

package/src/components/Layout/components/Outline/components/ContentsTab/contentsTab.tsx

@@ -1,24 +1,21 @@
-import { TabProps as MTabProps } from "@mui/material";
 import React from "react";
+import { FONT_SIZE } from "../../../../../../styles/common/mui/icon";
+import { TAB_PROPS } from "../../../../../../styles/common/mui/tab";
 import { Segment } from "../../../../../common/CustomIcon/components/Segment/segment";
-import { Tab } from "./contentsTab.styles";
-
-export interface ContentsTabProps extends Omit<MTabProps, "value"> {
-  className?: string;
-  value: string;
-}
+import { StyledTab } from "./contentsTab.styles";
+import { ContentsTabProps } from "./types";
 
 export const ContentsTab = ({
   className,
   value,
-  ...props /* Spread props to allow for Mui Tab specific prop overrides. */
+  ...props /* MuiTabProps. */
 }: ContentsTabProps): JSX.Element => {
   return (
-    <Tab
+    <StyledTab
       className={className}
       label="Contents"
-      icon={<Segment fontSize="small" />}
-      iconPosition="start"
+      icon={<Segment fontSize={FONT_SIZE.SMALL} />}
+      iconPosition={TAB_PROPS.ICON_POSITION.START}
       value={value}
       {...props}
     />

package/src/components/Layout/components/Outline/components/ContentsTab/types.ts

@@ -0,0 +1,8 @@
+import { TabProps } from "@mui/material";
+import { BaseComponentProps } from "../../../../../types";
+
+export interface ContentsTabProps
+  extends BaseComponentProps,
+    Omit<TabProps, "value"> {
+  value: string;
+}

package/src/components/Layout/components/Outline/hooks/UseHash/hook.ts

@@ -0,0 +1,17 @@
+import { isSSR } from "../../../../../../utils/ssr";
+import { UseHash } from "./types";
+
+/**
+ * Hook to get the current URL hash without the leading '#' character.
+ *
+ * @description
+ * Extracts the hash from window.location.hash and removes the leading '#'.
+ * Returns empty string when running in SSR environment.
+ *
+ * @returns Object containing the hash without leading '#', or empty string if SSR.
+ */
+export function useHash(): UseHash {
+  if (isSSR()) return { hash: "" };
+  const { hash } = window.location;
+  return { hash: hash.replace(/^#/, "") };
+}

package/src/components/Layout/components/Outline/hooks/UseHash/types.ts

@@ -0,0 +1,3 @@
+export interface UseHash {
+  hash: string;
+}

package/src/components/Layout/components/Outline/hooks/UseTabs/constants.ts

@@ -0,0 +1,3 @@
+import { TabProps } from "@mui/material";
+
+export const DEFAULT_TAB_VALUE: TabProps["value"] = "";

package/src/components/Layout/components/Outline/hooks/UseTabs/hook.ts

@@ -0,0 +1,32 @@
+import { TabsProps } from "@mui/material";
+import Router from "next/router";
+import { SyntheticEvent, useCallback, useEffect, useState } from "react";
+import { TABS_PROPS } from "../../../../../../styles/common/mui/tabs";
+import { OutlineItem } from "../../types";
+import { useHash } from "../UseHash/hook";
+import { DEFAULT_TAB_VALUE } from "./constants";
+import { getNextValue } from "./utils";
+
+export function useTabs(
+  outline: OutlineItem[]
+): Pick<TabsProps, "indicatorColor" | "onChange" | "orientation" | "value"> {
+  const [value, setValue] = useState<TabsProps["value"]>(DEFAULT_TAB_VALUE);
+  const { hash } = useHash();
+
+  const onChange = useCallback((_event: SyntheticEvent, hash: string): void => {
+    Router.push({ hash });
+  }, []);
+
+  useEffect(() => {
+    setValue(getNextValue(hash, outline));
+  }, [hash, outline]);
+
+  return {
+    indicatorColor: value
+      ? TABS_PROPS.INDICATOR_COLOR.PRIMARY
+      : TABS_PROPS.INDICATOR_COLOR.TRANSPARENT,
+    onChange,
+    orientation: TABS_PROPS.ORIENTATION.VERTICAL,
+    value,
+  };
+}

package/src/components/Layout/components/Outline/hooks/UseTabs/utils.ts

@@ -0,0 +1,18 @@
+import { TabsProps } from "@mui/material";
+import { OutlineItem } from "../../types";
+import { DEFAULT_TAB_VALUE } from "./constants";
+
+/**
+ * Returns the tab value for navigation.
+ * @param hash - The current hash from the URL.
+ * @param outlineItems - Outline items.
+ * @returns The item's hash if found and enabled, otherwise returns the default tab value.
+ */
+export function getNextValue(
+  hash: string,
+  outlineItems: OutlineItem[]
+): TabsProps["value"] {
+  const item = outlineItems.find((item) => item.hash === hash);
+  if (!item || item.disabled) return DEFAULT_TAB_VALUE;
+  return item.hash;
+}

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

@@ -24,7 +24,7 @@ export const tab = css`
   }
 `;
 
-export const Tabs = styled(MTabs)`
+export const StyledTabs = styled(MTabs)`
   align-self: flex-start;
   box-shadow: inset 1px 0 ${smokeMain};
   margin: 0;
@@ -46,7 +46,7 @@ export const Tabs = styled(MTabs)`
   }
 `;
 
-export const Tab = styled(MTab, {
+export const StyledTab = styled(MTab, {
   shouldForwardProp: (prop) => prop !== "depth",
 })<Props>`
   ${tab};

package/src/components/Layout/components/Outline/outline.tsx

@@ -1,72 +1,35 @@
-import { useRouter } from "next/router";
-import React, { ElementType, SyntheticEvent, useEffect, useState } from "react";
-import { DEFAULT_TAB_VALUE } from "./common/constants";
-import { ContentsTabProps } from "./components/ContentsTab/contentsTab";
-import { Tab, Tabs } from "./outline.styles";
-
-export interface OutlineItem {
-  depth: number;
-  hash: string;
-  value: string;
-}
-
-export interface OutlineProps {
-  className?: string;
-  Contents: ElementType<ContentsTabProps>;
-  outline: OutlineItem[];
-}
+import React from "react";
+import { DEFAULT_TAB_VALUE } from "./hooks/UseTabs/constants";
+import { useTabs } from "./hooks/UseTabs/hook";
+import { StyledTab, StyledTabs } from "./outline.styles";
+import { OutlineProps } from "./types";
 
 export const Outline = ({
   className,
   Contents,
   outline,
-  ...props /* Spread props to allow for Mui Tabs specific prop overrides. */
-}: OutlineProps): JSX.Element => {
-  const { asPath, push } = useRouter();
-  const [activeTab, setActiveTab] = useState<string>("");
-
-  // Callback fired when selected tab value changes.
-  const handleChange = (
-    _event: SyntheticEvent<Element, Event>,
-    tabValue: string
-  ): void => {
-    push(`#${tabValue}`);
-  };
-
-  // Update active tab when path changes.
-  useEffect(() => {
-    setActiveTab(getActiveTab(outline, asPath));
-  }, [asPath, outline]);
-
+  ...props /* MuiTabsProps */
+}: OutlineProps): JSX.Element | null => {
+  const { indicatorColor, onChange, orientation, value } = useTabs(outline);
   return (
-    <Tabs
+    <StyledTabs
       className={className}
-      indicatorColor={activeTab ? "primary" : "transparent"}
-      onChange={handleChange}
-      orientation="vertical"
-      value={activeTab}
+      indicatorColor={indicatorColor}
+      onChange={onChange}
+      orientation={orientation}
+      value={value}
       {...props}
     >
       <Contents value={DEFAULT_TAB_VALUE} />
-      {outline.map(({ depth, hash, value }) => (
-        <Tab key={hash} depth={depth} label={value} value={hash} />
+      {outline.map(({ depth, disabled, hash, value }) => (
+        <StyledTab
+          depth={depth}
+          disabled={disabled}
+          key={hash}
+          label={value}
+          value={hash}
+        />
       ))}
-    </Tabs>
+    </StyledTabs>
   );
 };
-
-/**
- * Initializes active tab.
- * @param outline - Outline items.
- * @param asPath - Current path.
- * @returns active tab.
- */
-function getActiveTab(outline: OutlineItem[], asPath: string): string {
-  if (asPath.includes("#")) {
-    const hashLink = asPath.split("#")[1];
-    if (outline.some(({ hash }) => hash === hashLink)) {
-      return hashLink;
-    }
-  }
-  return DEFAULT_TAB_VALUE;
-}

package/src/components/Layout/components/Outline/types.ts

@@ -0,0 +1,16 @@
+import { TabsProps } from "@mui/material";
+import { ElementType } from "react";
+import { BaseComponentProps } from "../../../types";
+import { ContentsTabProps } from "./components/ContentsTab/types";
+
+export interface OutlineItem {
+  depth: number;
+  disabled?: boolean;
+  hash: string;
+  value: string;
+}
+
+export interface OutlineProps extends BaseComponentProps, TabsProps {
+  Contents: ElementType<ContentsTabProps>;
+  outline: OutlineItem[];
+}

package/src/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
-import { SIDEBAR_POSITIONER } from "../../../../../../common/selectors";
-import { useLayoutState } from "../../../../../../hooks/useLayoutState";
+import { SELECTOR } from "../../../../../../common/selectors";
+import { useLayoutDimensions } from "../../../../../../providers/layoutDimensions/hook";
 import { SidebarPositioner as Positioner } from "./sidebarPositioner.styles";
 
 export interface SidebarPositionerProps {
@@ -10,11 +10,12 @@ export interface SidebarPositionerProps {
 export const SidebarPositioner = ({
   children,
 }: SidebarPositionerProps): JSX.Element => {
-  const {
-    layoutState: { headerHeight },
-  } = useLayoutState();
+  const { dimensions } = useLayoutDimensions();
   return (
-    <Positioner headerHeight={headerHeight} id={SIDEBAR_POSITIONER}>
+    <Positioner
+      headerHeight={dimensions.header.height}
+      id={SELECTOR.SIDEBAR_POSITIONER}
+    >
       {children}
     </Positioner>
   );

package/src/components/Login/components/Section/components/Warning/warning.tsx

@@ -1,7 +1,6 @@
 import { Typography, TypographyProps } from "@mui/material";
 import React from "react";
-import { COLOR } from "../../../../../../styles/common/mui/typography";
-import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { BaseComponentProps } from "../../../../../types";
 
 export const Warning = ({
@@ -13,9 +12,9 @@ export const Warning = ({
   return (
     <Typography
       className={className}
-      color={COLOR.INK_LIGHT}
+      color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
       mt={6}
-      variant={TEXT_BODY_SMALL_400}
+      variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400}
       {...props}
     >
       {children}

package/src/components/Table/components/TableCell/components/RowPositionCell/constants.ts

@@ -1,7 +1,7 @@
 import { TypographyOwnProps } from "@mui/material";
-import { VARIANT } from "../../../../../../styles/common/mui/typography";
+import { TYPOGRAPHY_PROPS as MUI_TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 
 export const TYPOGRAPHY_PROPS: Partial<TypographyOwnProps> = {
   sx: { marginRight: -2, paddingLeft: 2 },
-  variant: VARIANT.INHERIT,
+  variant: MUI_TYPOGRAPHY_PROPS.VARIANT.INHERIT,
 };

package/src/components/common/AnchorLink/anchorLink.tsx

@@ -2,6 +2,13 @@ import LinkRoundedIcon from "@mui/icons-material/LinkRounded";
 import React from "react";
 import { AnchorLink as Link } from "./anchorLink.styles";
 
+/**
+ * An anchor link component that provides deep linking functionality.
+ * @important The parent element must have `position: relative` CSS property
+ * to ensure proper positioning of the anchor link icon, and hover pseudo-class
+ * to change opacity of the icon.
+ */
+
 interface AnchorLinkProps {
   anchorLink: string;
   className?: string;

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

@@ -6,12 +6,12 @@ import {
   IconProps,
 } from "@mui/material";
 import { FONT_SIZE } from "../../../styles/common/mui/icon";
-import { COLOR, VARIANT } from "../../../styles/common/mui/typography";
+import { TYPOGRAPHY_PROPS } from "../../../styles/common/mui/typography";
 
 export const DIALOG_CONTENT_TEXT_PROPS: DialogContentTextProps = {
-  color: COLOR.INK_LIGHT,
+  color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT,
   component: "div",
-  variant: VARIANT.TEXT_BODY_400,
+  variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400,
 };
 
 export const DIALOG_PROPS: Partial<DialogProps> = {
@@ -19,7 +19,7 @@ export const DIALOG_PROPS: Partial<DialogProps> = {
 };
 
 export const DIALOG_TITLE_PROPS: DialogTitleProps = {
-  variant: VARIANT.TEXT_HEADING_SMALL,
+  variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL,
 };
 
 export const ICON_BUTTON_PROPS: IconButtonProps = {

package/src/providers/layoutDimensions/constants.ts

@@ -0,0 +1,6 @@
+import { LayoutDimensions } from "./types";
+
+export const DEFAULT_LAYOUT_DIMENSIONS: LayoutDimensions = {
+  footer: { height: 0 },
+  header: { height: 0 },
+};

package/src/providers/layoutDimensions/context.tsx

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+import { DEFAULT_LAYOUT_DIMENSIONS } from "./constants";
+import { LayoutDimensionsContextProps } from "./types";
+
+export const LayoutDimensionsContext =
+  createContext<LayoutDimensionsContextProps>({
+    dimensions: DEFAULT_LAYOUT_DIMENSIONS,
+    footerRef: null,
+    headerRef: null,
+  });

package/src/providers/layoutDimensions/hook.ts

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import { LayoutDimensionsContext } from "./context";
+import { LayoutDimensionsContextProps } from "./types";
+
+export const useLayoutDimensions = (): LayoutDimensionsContextProps => {
+  return useContext<LayoutDimensionsContextProps>(LayoutDimensionsContext);
+};

package/src/providers/layoutDimensions/provider.tsx

@@ -0,0 +1,29 @@
+import React, { useRef } from "react";
+import {
+  getBorderBoxSizeHeight,
+  useResizeObserver,
+} from "../../hooks/useResizeObserver";
+import { LayoutDimensionsContext } from "./context";
+import { LayoutDimensions, LayoutDimensionsProviderProps } from "./types";
+
+export const LayoutDimensionsProvider = ({
+  children,
+}: LayoutDimensionsProviderProps): JSX.Element => {
+  const footerRef = useRef<HTMLElement>(null);
+  const headerRef = useRef<HTMLElement>(null);
+  const footerRect = useResizeObserver(footerRef, getBorderBoxSizeHeight);
+  const headerRect = useResizeObserver(headerRef, getBorderBoxSizeHeight);
+
+  const dimensions: LayoutDimensions = {
+    footer: { height: footerRect?.height ?? 0 },
+    header: { height: headerRect?.height ?? 0 },
+  };
+
+  return (
+    <LayoutDimensionsContext.Provider
+      value={{ dimensions, footerRef, headerRef }}
+    >
+      {children}
+    </LayoutDimensionsContext.Provider>
+  );
+};

package/src/providers/layoutDimensions/types.ts

@@ -0,0 +1,17 @@
+import { ReactNode, RefObject } from "react";
+import { ElementRect } from "../../hooks/useResizeObserver";
+
+export interface LayoutDimensions {
+  footer: Pick<ElementRect, "height">;
+  header: Pick<ElementRect, "height">;
+}
+
+export interface LayoutDimensionsContextProps {
+  dimensions: LayoutDimensions;
+  footerRef: RefObject<HTMLElement> | null;
+  headerRef: RefObject<HTMLElement> | null;
+}
+
+export interface LayoutDimensionsProviderProps {
+  children: ReactNode | ReactNode[];
+}

package/src/styles/common/mui/tab.ts

@@ -0,0 +1,16 @@
+import { TabProps } from "@mui/material";
+
+type TabPropsOptions = {
+  ICON_POSITION: typeof ICON_POSITION;
+};
+
+const ICON_POSITION: Record<string, TabProps["iconPosition"]> = {
+  BOTTOM: "bottom",
+  END: "end",
+  START: "start",
+  TOP: "top",
+};
+
+export const TAB_PROPS: TabPropsOptions = {
+  ICON_POSITION,
+};

package/src/styles/common/mui/tabs.ts

@@ -0,0 +1,20 @@
+import { TabsProps } from "@mui/material";
+
+type TabsPropsOptions = {
+  INDICATOR_COLOR: typeof INDICATOR_COLOR;
+  ORIENTATION: typeof ORIENTATION;
+};
+
+const INDICATOR_COLOR: Record<string, TabsProps["indicatorColor"]> = {
+  PRIMARY: "primary",
+  TRANSPARENT: "transparent",
+};
+
+const ORIENTATION: Record<string, TabsProps["orientation"]> = {
+  VERTICAL: "vertical",
+};
+
+export const TABS_PROPS: TabsPropsOptions = {
+  INDICATOR_COLOR,
+  ORIENTATION,
+};

package/src/styles/common/mui/typography.ts

@@ -1,14 +1,26 @@
 import { TypographyOwnProps } from "@mui/material";
 
-export const COLOR: Record<string, TypographyOwnProps["color"]> = {
+type TypographyPropsOptions = {
+  COLOR: typeof COLOR;
+  VARIANT: typeof VARIANT;
+};
+
+const COLOR: Record<string, TypographyOwnProps["color"]> = {
   INHERIT: "inherit",
   INK_LIGHT: "ink.light",
   INK_MAIN: "ink.main",
 };
 
-export const VARIANT: Record<string, TypographyOwnProps["variant"]> = {
+const VARIANT: Record<string, TypographyOwnProps["variant"]> = {
   INHERIT: "inherit",
   TEXT_BODY_400: "text-body-400",
   TEXT_BODY_400_2_LINES: "text-body-400-2lines",
+  TEXT_BODY_SMALL_400: "text-body-small-400",
+  TEXT_HEADING_LARGE: "text-heading-large",
   TEXT_HEADING_SMALL: "text-heading-small",
 };
+
+export const TYPOGRAPHY_PROPS: TypographyPropsOptions = {
+  COLOR,
+  VARIANT,
+};