@databiosphere/findable-ui 23.0.0 → 25.0.0

package/lib/hooks/useResizeObserver.js

@@ -3,9 +3,10 @@ import { useCallback, useEffect, useRef, useState } from "react";
  * Element resizing and repositioning observer.
  * @param ref - element to be observed for changes to its size or position.
  * @param onResizeFn - action to be performed when the observed element is resized or repositioned.
+ * @param shouldObserve - boolean flag to determine if the observer should be active.
  * @returns Element size and position properties for the given element.
  */
-export function useResizeObserver(ref, onResizeFn) {
+export function useResizeObserver(ref, onResizeFn, shouldObserve = true) {
     const [elementRect, setElementRect] = useState();
     const observerRef = useRef();
     // Observed element is resized or repositioned - set state elementRect with the element's new dimensions or position.
@@ -19,6 +20,8 @@ export function useResizeObserver(ref, onResizeFn) {
     useEffect(() => {
         if (!ref.current)
             return;
+        if (!shouldObserve)
+            return;
         observerRef.current = new ResizeObserver(onResize);
         const observer = observerRef.current;
         const observedEl = ref.current;
@@ -26,7 +29,7 @@ export function useResizeObserver(ref, onResizeFn) {
         return () => {
             observer.unobserve(observedEl);
         };
-    }, [onResize, ref]);
+    }, [onResize, ref, shouldObserve]);
     return elementRect;
 }
 /**

package/lib/hooks/useSessionTimeout.d.ts

@@ -0,0 +1,11 @@
+export declare const INACTIVITY_PARAM = "inactivityTimeout";
+interface UseSessionTimeout {
+    clearSessionTimeout: () => void;
+    isSessionTimeout: boolean;
+}
+/**
+ * Session timeout hook.
+ * @returns flag indicating if the session has timed out.
+ */
+export declare const useSessionTimeout: () => UseSessionTimeout;
+export {};

package/lib/hooks/useSessionTimeout.js

@@ -0,0 +1,28 @@
+import Router from "next/router";
+import { useCallback, useEffect, useState } from "react";
+import { useConfig } from "./useConfig";
+import { useLocation } from "./useLocation";
+export const INACTIVITY_PARAM = "inactivityTimeout";
+/**
+ * Session timeout hook.
+ * @returns flag indicating if the session has timed out.
+ */
+export const useSessionTimeout = () => {
+    const { config: { redirectRootToPath }, } = useConfig();
+    const [isSessionTimeout, setIsSessionTimeout] = useState(false);
+    // Get the session timeout from URL parameters.
+    const { search } = useLocation() || {};
+    const sessionTimeout = search?.get(INACTIVITY_PARAM);
+    // Clears session timeout state.
+    const clearSessionTimeout = useCallback(() => {
+        setIsSessionTimeout(false);
+        Router.replace(redirectRootToPath);
+    }, [redirectRootToPath]);
+    useEffect(() => {
+        setIsSessionTimeout(sessionTimeout === "true");
+    }, [sessionTimeout]);
+    return {
+        clearSessionTimeout,
+        isSessionTimeout,
+    };
+};

package/lib/providers/authentication.d.ts

@@ -0,0 +1,51 @@
+import React, { ReactNode } from "react";
+import { AUTHENTICATION_STATUS, LoginStatus } from "../hooks/useAuthentication/common/entities";
+import { UserProfile } from "../hooks/useAuthentication/useFetchGoogleProfile";
+import { TerraNIHResponse } from "../hooks/useAuthentication/useFetchTerraNIHProfile";
+import { TerraResponse } from "../hooks/useAuthentication/useFetchTerraProfile";
+import { TerraTermsOfServiceResponse } from "../hooks/useAuthentication/useFetchTerraTermsOfService";
+export declare const ROUTE_LOGIN = "/login";
+type AuthenticateUserFn = () => void;
+type RequestAuthenticationFn = () => void;
+/**
+ * Model of authentication context.
+ */
+export interface AuthContextProps {
+    authenticateUser: AuthenticateUserFn;
+    authenticationStatus: AUTHENTICATION_STATUS;
+    isAuthenticated: boolean;
+    isEnabled: boolean;
+    requestAuthentication: RequestAuthenticationFn;
+    terraNIHProfileLoginStatus: LoginStatus<TerraNIHResponse>;
+    terraProfileLoginStatus: LoginStatus<TerraResponse>;
+    terraTOSLoginStatus: LoginStatus<TerraTermsOfServiceResponse>;
+    token?: string;
+    userProfile?: UserProfile;
+}
+/**
+ * Auth context for storing and using auth-related state.
+ */
+export declare const AuthContext: React.Context<AuthContextProps>;
+interface Props {
+    children: ReactNode | ReactNode[];
+    sessionTimeout?: number;
+}
+/**
+ * Auth provider for consuming components to subscribe to changes in auth-related state.
+ * @param props - Component inputs.
+ * @param props.children - Set of children components that can possibly consume the query provider.
+ * @param props.sessionTimeout - If provided, will set the value for a session timeout (in milliseconds).
+ * @returns Provider element to be used by consumers to both update authentication state and subscribe to changes in authentication state.
+ */
+export declare function AuthProvider({ children, sessionTimeout }: Props): JSX.Element;
+/**
+ * Token is released for the following conditions:
+ * - Terra endpoint is configured and the terms of service response is successful, or
+ * - Terra endpoint is not configured and the user profile response is successful.
+ * @param userProfileLoginStatus - User profile login status.
+ * @param terraProfileLoginStatus - Terra profile login status.
+ * @param terraTOSLoginStatus - Terra terms of service login status.
+ * @returns true if the token should be released.
+ */
+export declare function shouldReleaseToken(userProfileLoginStatus: LoginStatus<UserProfile>, terraProfileLoginStatus: LoginStatus<TerraResponse>, terraTOSLoginStatus: LoginStatus<TerraTermsOfServiceResponse>): boolean;
+export {};

package/lib/providers/authentication.js

@@ -0,0 +1,110 @@
+import Router, { useRouter } from "next/router";
+import React, { createContext, useCallback } from "react";
+import { useIdleTimer } from "react-idle-timer";
+import { LOGIN_STATUS_NOT_STARTED } from "../hooks/useAuthentication/common/constants";
+import { AUTHENTICATION_STATUS, } from "../hooks/useAuthentication/common/entities";
+import { useAuthenticationComplete } from "../hooks/useAuthentication/useAuthenticationComplete";
+import { useAuthenticationStatus } from "../hooks/useAuthentication/useAuthenticationStatus";
+import { useFetchGoogleProfile, } from "../hooks/useAuthentication/useFetchGoogleProfile";
+import { useFetchTerraNIHProfile, } from "../hooks/useAuthentication/useFetchTerraNIHProfile";
+import { useFetchTerraProfile, } from "../hooks/useAuthentication/useFetchTerraProfile";
+import { useFetchTerraTermsOfService, } from "../hooks/useAuthentication/useFetchTerraTermsOfService";
+import { useTokenClient } from "../hooks/useAuthentication/useTokenClient";
+import { useConfig } from "../hooks/useConfig";
+import { INACTIVITY_PARAM } from "../hooks/useSessionTimeout";
+// Template constants
+export const ROUTE_LOGIN = "/login";
+/**
+ * Auth context for storing and using auth-related state.
+ */
+export const AuthContext = createContext({
+    // eslint-disable-next-line @typescript-eslint/no-empty-function -- allow dummy function for default state.
+    authenticateUser: () => { },
+    authenticationStatus: AUTHENTICATION_STATUS.INCOMPLETE,
+    isAuthenticated: false,
+    isEnabled: false,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function -- allow dummy function for default state.
+    requestAuthentication: () => { },
+    terraNIHProfileLoginStatus: LOGIN_STATUS_NOT_STARTED,
+    terraProfileLoginStatus: LOGIN_STATUS_NOT_STARTED,
+    terraTOSLoginStatus: LOGIN_STATUS_NOT_STARTED,
+    token: undefined,
+    userProfile: undefined,
+});
+/**
+ * Auth provider for consuming components to subscribe to changes in auth-related state.
+ * @param props - Component inputs.
+ * @param props.children - Set of children components that can possibly consume the query provider.
+ * @param props.sessionTimeout - If provided, will set the value for a session timeout (in milliseconds).
+ * @returns Provider element to be used by consumers to both update authentication state and subscribe to changes in authentication state.
+ */
+export function AuthProvider({ children, sessionTimeout }) {
+    const { config } = useConfig();
+    const { authentication, redirectRootToPath } = config;
+    const { basePath } = useRouter();
+    const { token, tokenClient } = useTokenClient();
+    const terraNIHProfileLoginStatus = useFetchTerraNIHProfile(token);
+    const terraProfileLoginStatus = useFetchTerraProfile(token);
+    const terraTOSLoginStatus = useFetchTerraTermsOfService(token);
+    const userProfileLoginStatus = useFetchGoogleProfile(token);
+    const isEnabled = Boolean(authentication);
+    const isAuthenticated = userProfileLoginStatus.isSuccess;
+    const releaseToken = shouldReleaseToken(userProfileLoginStatus, terraProfileLoginStatus, terraTOSLoginStatus);
+    const authenticationStatus = useAuthenticationStatus(userProfileLoginStatus, terraProfileLoginStatus, terraTOSLoginStatus, terraNIHProfileLoginStatus);
+    // Handle completion of authentication process.
+    useAuthenticationComplete(authenticationStatus);
+    /**
+     * If sessionTimeout is set and user is authenticated, the app will reload and redirect to
+     * origin, including base path, root path, and query param.
+     */
+    useIdleTimer({
+        onIdle: () => isAuthenticated &&
+            sessionTimeout &&
+            (window.location.href =
+                window.location.origin +
+                    basePath +
+                    redirectRootToPath +
+                    "?" +
+                    `${INACTIVITY_PARAM}=true`),
+        timeout: sessionTimeout,
+    });
+    /**
+     * Requests access token and authenticates user.
+     */
+    const authenticateUser = useCallback(() => {
+        tokenClient.requestAccessToken();
+    }, [tokenClient]);
+    /**
+     * Navigates to login page.
+     */
+    const requestAuthentication = useCallback(() => {
+        Router.push(ROUTE_LOGIN);
+    }, []);
+    return (React.createElement(AuthContext.Provider, { value: {
+            authenticateUser,
+            authenticationStatus,
+            isAuthenticated,
+            isEnabled,
+            requestAuthentication,
+            terraNIHProfileLoginStatus,
+            terraProfileLoginStatus,
+            terraTOSLoginStatus,
+            token: releaseToken ? token : undefined,
+            userProfile: userProfileLoginStatus.response,
+        } }, children));
+}
+/**
+ * Token is released for the following conditions:
+ * - Terra endpoint is configured and the terms of service response is successful, or
+ * - Terra endpoint is not configured and the user profile response is successful.
+ * @param userProfileLoginStatus - User profile login status.
+ * @param terraProfileLoginStatus - Terra profile login status.
+ * @param terraTOSLoginStatus - Terra terms of service login status.
+ * @returns true if the token should be released.
+ */
+export function shouldReleaseToken(userProfileLoginStatus, terraProfileLoginStatus, terraTOSLoginStatus) {
+    if (terraProfileLoginStatus.isSupported) {
+        return terraTOSLoginStatus.isSuccess;
+    }
+    return userProfileLoginStatus.isSuccess;
+}

package/lib/providers/layoutState.d.ts

@@ -0,0 +1,40 @@
+import React, { Dispatch, ReactNode } from "react";
+export declare const DEFAULT_LAYOUT_STATE: {
+    headerHeight: number;
+};
+/**
+ * Layout state.
+ */
+export type LayoutState = {
+    headerHeight: number;
+};
+/**
+ * Model of layout state context.
+ */
+export type LayoutStateContextProps = {
+    layoutDispatch: Dispatch<LayoutAction>;
+    layoutState: LayoutState;
+};
+export declare const LayoutStateContext: React.Context<LayoutStateContextProps>;
+export interface LayoutStateProps {
+    children: ReactNode | ReactNode[];
+}
+export declare function LayoutStateProvider({ children, }: LayoutStateProps): JSX.Element;
+/**
+ * Layout action kind.
+ */
+export declare enum LayoutActionKind {
+    UpdateHeaderHeight = "UPDATE_HEADER_HEIGHT"
+}
+/**
+ * Layout action.
+ */
+export type LayoutAction = UpdateHeaderHeightAction;
+/**
+ * Update header height action.
+ */
+type UpdateHeaderHeightAction = {
+    payload?: number;
+    type: LayoutActionKind.UpdateHeaderHeight;
+};
+export {};

package/lib/providers/layoutState.js

@@ -0,0 +1,47 @@
+import React, { createContext, useReducer } from "react";
+import { HEADER_HEIGHT } from "../components/Layout/components/Header/common/constants";
+// Default layout state.
+export const DEFAULT_LAYOUT_STATE = {
+    headerHeight: HEADER_HEIGHT + 1, // 1px for bottom border.
+};
+export const LayoutStateContext = createContext({
+    // eslint-disable-next-line @typescript-eslint/no-empty-function -- allow dummy function for default state.
+    layoutDispatch: () => { },
+    layoutState: DEFAULT_LAYOUT_STATE,
+});
+export function LayoutStateProvider({ children, }) {
+    // Layout state.
+    const [layoutState, layoutDispatch] = useReducer((s, a) => layoutReducer(s, a), DEFAULT_LAYOUT_STATE);
+    return (React.createElement(LayoutStateContext.Provider, { value: {
+            layoutDispatch,
+            layoutState,
+        } }, children));
+}
+/**
+ * Layout action kind.
+ */
+export var LayoutActionKind;
+(function (LayoutActionKind) {
+    LayoutActionKind["UpdateHeaderHeight"] = "UPDATE_HEADER_HEIGHT";
+})(LayoutActionKind || (LayoutActionKind = {}));
+/**
+ * Layout reducer.
+ * @param state - Layout state.
+ * @param action - Layout action.
+ * @returns layout state.
+ */
+function layoutReducer(state, action) {
+    const { payload, type } = action;
+    // eslint-disable-next-line sonarjs/no-small-switch -- allow small switch.
+    switch (type) {
+        // Updates header height.
+        case LayoutActionKind.UpdateHeaderHeight: {
+            return {
+                ...state,
+                headerHeight: payload ?? state.headerHeight,
+            };
+        }
+        default:
+            return state;
+    }
+}

package/lib/storybook/controls/constants.d.ts

@@ -0,0 +1,4 @@
+import { ArgTypes } from "@storybook/react";
+import { CONTROL_TYPE } from "./types";
+export declare const CONTROL_CONFIG_MAP: Record<CONTROL_TYPE, ArgTypes[keyof ArgTypes]["control"]>;
+export declare const MUI_CONTROLS: readonly ["classes", "className", "ref", "sx"];

package/lib/storybook/controls/constants.js

@@ -0,0 +1,6 @@
+import { CONTROL_TYPE } from "./types";
+export const CONTROL_CONFIG_MAP = {
+    [CONTROL_TYPE.BOOLEAN]: { type: "boolean" },
+    [CONTROL_TYPE.DISABLED]: false,
+};
+export const MUI_CONTROLS = ["classes", "className", "ref", "sx"];

package/lib/storybook/controls/types.d.ts

@@ -0,0 +1,4 @@
+export declare enum CONTROL_TYPE {
+    BOOLEAN = "boolean",
+    DISABLED = "disabled"
+}

package/lib/storybook/controls/types.js

@@ -0,0 +1,5 @@
+export var CONTROL_TYPE;
+(function (CONTROL_TYPE) {
+    CONTROL_TYPE["BOOLEAN"] = "boolean";
+    CONTROL_TYPE["DISABLED"] = "disabled";
+})(CONTROL_TYPE || (CONTROL_TYPE = {}));

package/lib/storybook/controls/utils.d.ts

@@ -0,0 +1,9 @@
+import { Args, ArgTypes } from "@storybook/react";
+import { CONTROL_TYPE } from "./types";
+/**
+ * Configures controls for specified keys with the given control type.
+ * @param keys - ArgType keys.
+ * @param controlType - The type of control to apply (from CONTROL_TYPE enum).
+ * @returns An object of ArgTypes with the specified control configuration.
+ */
+export declare function configureControls<TArg = Args>(keys: (keyof TArg)[], controlType: CONTROL_TYPE): Partial<ArgTypes<TArg>>;

package/lib/storybook/controls/utils.js

@@ -0,0 +1,10 @@
+import { CONTROL_CONFIG_MAP } from "./constants";
+/**
+ * Configures controls for specified keys with the given control type.
+ * @param keys - ArgType keys.
+ * @param controlType - The type of control to apply (from CONTROL_TYPE enum).
+ * @returns An object of ArgTypes with the specified control configuration.
+ */
+export function configureControls(keys, controlType) {
+    return Object.fromEntries(keys.map((key) => [key, { control: CONTROL_CONFIG_MAP[controlType] }]));
+}

package/lib/storybook/decorators.d.ts

@@ -0,0 +1,2 @@
+import { Preview } from "@storybook/react";
+export declare const decorators: Preview["decorators"];

package/lib/storybook/decorators.js

@@ -0,0 +1,11 @@
+import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import React from "react";
+import { createAppTheme } from "../theme/theme";
+export const decorators = (Story, context) => {
+    const theme = createAppTheme();
+    return (React.createElement(EmotionThemeProvider, { theme: theme },
+        React.createElement(ThemeProvider, { theme: theme },
+            React.createElement(CssBaseline, null),
+            React.createElement(Story, { ...context }))));
+};

package/lib/storybook/loremIpsum.d.ts

@@ -0,0 +1,4 @@
+export declare const LOREM_IPSUM: {
+    LONG: string;
+    SHORT: string;
+};

package/lib/storybook/loremIpsum.js

@@ -0,0 +1,4 @@
+export const LOREM_IPSUM = {
+    LONG: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
+    SHORT: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.",
+};

package/lib/storybook/parameters.d.ts

@@ -0,0 +1,2 @@
+import { Preview } from "@storybook/react";
+export declare const parameters: Preview["parameters"];

package/lib/storybook/parameters.js

@@ -0,0 +1,12 @@
+export const parameters = {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+        expanded: true,
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
+        },
+        sort: "alpha",
+    },
+    layout: "centered",
+};

package/lib/styles/common/mui/palette.d.ts

@@ -0,0 +1,47 @@
+export declare const PALETTE: {
+    readonly ALERT_LIGHT: "var(--mui-palette-alert-light)";
+    readonly ALERT_LIGHTEST: "var(--mui-palette-alert-lightest)";
+    readonly ALERT_MAIN: "var(--mui-palette-alert-main)";
+    readonly BACKGROUND_DEFAULT: "var(--mui-palette-background-default)";
+    readonly BACKGROUND_PAPER: "var(--mui-palette-background-paper)";
+    readonly COMMON_BACKGROUND: "var(--mui-palette-common-background)";
+    readonly COMMON_BLACK: "var(--mui-palette-common-black)";
+    readonly COMMON_WHITE: "var(--mui-palette-common-white)";
+    readonly ERROR_CONTRAST_TEXT: "var(--mui-palette-error-contrastText)";
+    readonly ERROR_DARK: "var(--mui-palette-error-dark)";
+    readonly ERROR_LIGHT: "var(--mui-palette-error-light)";
+    readonly ERROR_MAIN: "var(--mui-palette-error-main)";
+    readonly INFO_CONTRAST_TEXT: "var(--mui-palette-info-contrastText)";
+    readonly INFO_DARK: "var(--mui-palette-info-dark)";
+    readonly INFO_LIGHT: "var(--mui-palette-info-light)";
+    readonly INFO_LIGHTEST: "var(--mui-palette-info-lightest)";
+    readonly INFO_MAIN: "var(--mui-palette-info-main)";
+    readonly INK_LIGHT: "var(--mui-palette-ink-light)";
+    readonly INK_MAIN: "var(--mui-palette-ink-main)";
+    readonly PRIMARY_CONTRAST_TEXT: "var(--mui-palette-primary-contrastText)";
+    readonly PRIMARY_DARK: "var(--mui-palette-primary-dark)";
+    readonly PRIMARY_LIGHT: "var(--mui-palette-primary-light)";
+    readonly PRIMARY_LIGHTEST: "var(--mui-palette-primary-lightest)";
+    readonly PRIMARY_MAIN: "var(--mui-palette-primary-main)";
+    readonly SECONDARY_CONTRAST_TEXT: "var(--mui-palette-secondary-contrastText)";
+    readonly SECONDARY_DARK: "var(--mui-palette-secondary-dark)";
+    readonly SECONDARY_LIGHT: "var(--mui-palette-secondary-light)";
+    readonly SECONDARY_MAIN: "var(--mui-palette-secondary-main)";
+    readonly SMOKE_DARK: "var(--mui-palette-smoke-dark)";
+    readonly SMOKE_LIGHT: "var(--mui-palette-smoke-light)";
+    readonly SMOKE_LIGHTEST: "var(--mui-palette-smoke-lightest)";
+    readonly SMOKE_MAIN: "var(--mui-palette-smoke-main)";
+    readonly SUCCESS_CONTRAST_TEXT: "var(--mui-palette-success-contrastText)";
+    readonly SUCCESS_DARK: "var(--mui-palette-success-dark)";
+    readonly SUCCESS_LIGHT: "var(--mui-palette-success-light)";
+    readonly SUCCESS_LIGHTEST: "var(--mui-palette-success-lightest)";
+    readonly SUCCESS_MAIN: "var(--mui-palette-success-main)";
+    readonly TEXT_DISABLED: "var(--mui-palette-text-disabled)";
+    readonly TEXT_PRIMARY: "var(--mui-palette-text-primary)";
+    readonly TEXT_SECONDARY: "var(--mui-palette-text-secondary)";
+    readonly WARNING_CONTRAST_TEXT: "var(--mui-palette-warning-contrastText)";
+    readonly WARNING_DARK: "var(--mui-palette-warning-dark)";
+    readonly WARNING_LIGHT: "var(--mui-palette-warning-light)";
+    readonly WARNING_LIGHTEST: "var(--mui-palette-warning-lightest)";
+    readonly WARNING_MAIN: "var(--mui-palette-warning-main)";
+};

package/lib/styles/common/mui/palette.js

@@ -0,0 +1,47 @@
+export const PALETTE = {
+    ALERT_LIGHT: `var(--mui-palette-alert-light)`,
+    ALERT_LIGHTEST: `var(--mui-palette-alert-lightest)`,
+    ALERT_MAIN: `var(--mui-palette-alert-main)`,
+    BACKGROUND_DEFAULT: `var(--mui-palette-background-default)`,
+    BACKGROUND_PAPER: `var(--mui-palette-background-paper)`,
+    COMMON_BACKGROUND: `var(--mui-palette-common-background)`,
+    COMMON_BLACK: `var(--mui-palette-common-black)`,
+    COMMON_WHITE: `var(--mui-palette-common-white)`,
+    ERROR_CONTRAST_TEXT: `var(--mui-palette-error-contrastText)`,
+    ERROR_DARK: `var(--mui-palette-error-dark)`,
+    ERROR_LIGHT: `var(--mui-palette-error-light)`,
+    ERROR_MAIN: `var(--mui-palette-error-main)`,
+    INFO_CONTRAST_TEXT: `var(--mui-palette-info-contrastText)`,
+    INFO_DARK: `var(--mui-palette-info-dark)`,
+    INFO_LIGHT: `var(--mui-palette-info-light)`,
+    INFO_LIGHTEST: `var(--mui-palette-info-lightest)`,
+    INFO_MAIN: `var(--mui-palette-info-main)`,
+    INK_LIGHT: `var(--mui-palette-ink-light)`,
+    INK_MAIN: `var(--mui-palette-ink-main)`,
+    PRIMARY_CONTRAST_TEXT: `var(--mui-palette-primary-contrastText)`,
+    PRIMARY_DARK: `var(--mui-palette-primary-dark)`,
+    PRIMARY_LIGHT: `var(--mui-palette-primary-light)`,
+    PRIMARY_LIGHTEST: `var(--mui-palette-primary-lightest)`,
+    PRIMARY_MAIN: `var(--mui-palette-primary-main)`,
+    SECONDARY_CONTRAST_TEXT: `var(--mui-palette-secondary-contrastText)`,
+    SECONDARY_DARK: `var(--mui-palette-secondary-dark)`,
+    SECONDARY_LIGHT: `var(--mui-palette-secondary-light)`,
+    SECONDARY_MAIN: `var(--mui-palette-secondary-main)`,
+    SMOKE_DARK: `var(--mui-palette-smoke-dark)`,
+    SMOKE_LIGHT: `var(--mui-palette-smoke-light)`,
+    SMOKE_LIGHTEST: `var(--mui-palette-smoke-lightest)`,
+    SMOKE_MAIN: `var(--mui-palette-smoke-main)`,
+    SUCCESS_CONTRAST_TEXT: `var(--mui-palette-success-contrastText)`,
+    SUCCESS_DARK: `var(--mui-palette-success-dark)`,
+    SUCCESS_LIGHT: `var(--mui-palette-success-light)`,
+    SUCCESS_LIGHTEST: `var(--mui-palette-success-lightest)`,
+    SUCCESS_MAIN: `var(--mui-palette-success-main)`,
+    TEXT_DISABLED: `var(--mui-palette-text-disabled)`,
+    TEXT_PRIMARY: `var(--mui-palette-text-primary)`,
+    TEXT_SECONDARY: `var(--mui-palette-text-secondary)`,
+    WARNING_CONTRAST_TEXT: `var(--mui-palette-warning-contrastText)`,
+    WARNING_DARK: `var(--mui-palette-warning-dark)`,
+    WARNING_LIGHT: `var(--mui-palette-warning-light)`,
+    WARNING_LIGHTEST: `var(--mui-palette-warning-lightest)`,
+    WARNING_MAIN: `var(--mui-palette-warning-main)`,
+};

package/lib/styles/common/mui/stepper.d.ts

@@ -0,0 +1,7 @@
+import { StepperProps } from "@mui/material";
+type StepperPropsOptions = {
+    ORIENTATION: typeof ORIENTATION;
+};
+declare const ORIENTATION: Record<string, StepperProps["orientation"]>;
+export declare const STEPPER_PROPS: StepperPropsOptions;
+export {};

package/lib/styles/common/mui/stepper.js

@@ -0,0 +1,7 @@
+const ORIENTATION = {
+    HORIZONTAL: "horizontal",
+    VERTICAL: "vertical",
+};
+export const STEPPER_PROPS = {
+    ORIENTATION,
+};

package/lib/styles/common/mui/svgIcon.d.ts

@@ -0,0 +1,9 @@
+import { SvgIconProps } from "@mui/material";
+type SvgIconPropsOptions = {
+    COLOR: typeof COLOR;
+    FONT_SIZE: typeof FONT_SIZE;
+};
+declare const COLOR: Record<string, SvgIconProps["color"]>;
+declare const FONT_SIZE: Record<string, SvgIconProps["fontSize"]>;
+export declare const SVG_ICON_PROPS: SvgIconPropsOptions;
+export {};

package/lib/styles/common/mui/svgIcon.js

@@ -0,0 +1,26 @@
+const COLOR = {
+    ACTION: "action",
+    DISABLED: "disabled",
+    ERROR: "error",
+    INFO: "info",
+    INHERIT: "inherit",
+    INK_LIGHT: "inkLight",
+    INK_MAIN: "inkMain",
+    PRIMARY: "primary",
+    SECONDARY: "secondary",
+    SUCCESS: "success",
+    WARNING: "warning",
+};
+const FONT_SIZE = {
+    INHERIT: "inherit",
+    LARGE: "large",
+    MEDIUM: "medium",
+    SMALL: "small",
+    XSMALL: "xsmall",
+    XXLARGE: "xxlarge",
+    XXSMALL: "xxsmall",
+};
+export const SVG_ICON_PROPS = {
+    COLOR,
+    FONT_SIZE,
+};

package/lib/styles/common/mui/typography.js

@@ -10,6 +10,7 @@ const VARIANT = {
     TEXT_BODY_SMALL_400: "text-body-small-400",
     TEXT_HEADING_LARGE: "text-heading-large",
     TEXT_HEADING_SMALL: "text-heading-small",
+    TEXT_HEADING_XSMALL: "text-heading-xsmall",
 };
 export const TYPOGRAPHY_PROPS = {
     COLOR,

package/lib/tests/mui/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const MUI_CLASSES: {
+    ACTIVE: string;
+    COMPLETED: string;
+};

package/lib/tests/mui/constants.js

@@ -0,0 +1,4 @@
+export const MUI_CLASSES = {
+    ACTIVE: "Mui-active",
+    COMPLETED: "Mui-completed",
+};

package/lib/theme/common/typography.d.ts

@@ -1,9 +1,9 @@
-import { CSSProperties } from "@mui/material/styles/createTypography";
+import { CSSProperties } from "@mui/material";
 /**
  * Typography constants.
  */
 export declare const fontFamily = "Inter";
-export declare const TEXT_BODY_400: "text-body-400", TEXT_BODY_400_2_LINES: "text-body-400-2lines", TEXT_BODY_500: "text-body-500", TEXT_BODY_500_2_LINES: "text-body-500-2lines", TEXT_BODY_LARGE_400: "text-body-large-400", TEXT_BODY_LARGE_400_2_LINES: "text-body-large-400-2lines", TEXT_BODY_LARGE_500: "text-body-large-500", TEXT_BODY_SMALL_400: "text-body-small-400", TEXT_BODY_SMALL_400_2_LINES: "text-body-small-400-2lines", TEXT_BODY_SMALL_500: "text-body-small-500", TEXT_HEADING: "text-heading", TEXT_HEADING_LARGE: "text-heading-large", TEXT_HEADING_SMALL: "text-heading-small", TEXT_HEADING_XLARGE: "text-heading-xlarge", TEXT_UPPERCASE_500: "text-uppercase-500";
+export declare const TEXT_BODY_400: "text-body-400", TEXT_BODY_400_2_LINES: "text-body-400-2lines", TEXT_BODY_500: "text-body-500", TEXT_BODY_500_2_LINES: "text-body-500-2lines", TEXT_BODY_LARGE_400: "text-body-large-400", TEXT_BODY_LARGE_400_2_LINES: "text-body-large-400-2lines", TEXT_BODY_LARGE_500: "text-body-large-500", TEXT_BODY_SMALL_400: "text-body-small-400", TEXT_BODY_SMALL_400_2_LINES: "text-body-small-400-2lines", TEXT_BODY_SMALL_500: "text-body-small-500", TEXT_HEADING: "text-heading", TEXT_HEADING_LARGE: "text-heading-large", TEXT_HEADING_SMALL: "text-heading-small", TEXT_HEADING_XLARGE: "text-heading-xlarge", TEXT_HEADING_XSMALL: "text-heading-xsmall", TEXT_UPPERCASE_500: "text-uppercase-500";
 /**
  * Typography Option "text-body-400"
  */
@@ -60,6 +60,10 @@ export declare const textHeadingSmall: CSSProperties;
  * Typography Option "text-heading-xlarge"
  */
 export declare const textHeadingXLarge: CSSProperties;
+/**
+ * Typography Option "text-heading-xsmall"
+ */
+export declare const textHeadingXSmall: CSSProperties;
 /**
  * Typography Option "text-uppercase-500"
  */

package/lib/theme/common/typography.js

@@ -18,9 +18,10 @@ const TYPOGRAPHY = {
     TEXT_HEADING_LARGE: "text-heading-large",
     TEXT_HEADING_SMALL: "text-heading-small",
     TEXT_HEADING_XLARGE: "text-heading-xlarge",
+    TEXT_HEADING_XSMALL: "text-heading-xsmall",
     TEXT_UPPERCASE_500: "text-uppercase-500",
 };
-export const { TEXT_BODY_400, TEXT_BODY_400_2_LINES, TEXT_BODY_500, TEXT_BODY_500_2_LINES, TEXT_BODY_LARGE_400, TEXT_BODY_LARGE_400_2_LINES, TEXT_BODY_LARGE_500, TEXT_BODY_SMALL_400, TEXT_BODY_SMALL_400_2_LINES, TEXT_BODY_SMALL_500, TEXT_HEADING, TEXT_HEADING_LARGE, TEXT_HEADING_SMALL, TEXT_HEADING_XLARGE, TEXT_UPPERCASE_500, } = TYPOGRAPHY;
+export const { TEXT_BODY_400, TEXT_BODY_400_2_LINES, TEXT_BODY_500, TEXT_BODY_500_2_LINES, TEXT_BODY_LARGE_400, TEXT_BODY_LARGE_400_2_LINES, TEXT_BODY_LARGE_500, TEXT_BODY_SMALL_400, TEXT_BODY_SMALL_400_2_LINES, TEXT_BODY_SMALL_500, TEXT_HEADING, TEXT_HEADING_LARGE, TEXT_HEADING_SMALL, TEXT_HEADING_XLARGE, TEXT_HEADING_XSMALL, TEXT_UPPERCASE_500, } = TYPOGRAPHY;
 /**
  * Typography Option "text-body-400"
  */
@@ -156,6 +157,14 @@ export const textHeadingXLarge = {
         lineHeight: "56px",
     },
 };
+/**
+ * Typography Option "text-heading-xsmall"
+ */
+export const textHeadingXSmall = {
+    fontSize: 16,
+    fontWeight: 500,
+    lineHeight: "24px",
+};
 /**
  * Typography Option "text-uppercase-500"
  */