@databiosphere/findable-ui 23.0.0 → 25.0.0

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.styles.js

@@ -2,13 +2,14 @@ import styled from "@emotion/styled";
 import { Dialog, Input } from "@mui/material";
 import { inkLight, smokeMain, } from "../../../../../../../../../../../../styles/common/mixins/colors";
 import { IconButton } from "../../../../../../../../../../../common/IconButton/iconButton";
-import { HEADER_HEIGHT } from "../../../../../../../../common/constants";
-export const SearchBar = styled(Dialog) `
+export const SearchBar = styled(Dialog, {
+    shouldForwardProp: (prop) => prop !== "yOffset",
+}) `
   .MuiDialog-container {
     width: 100%;
 
     .MuiDialog-paper {
-      margin-top: ${HEADER_HEIGHT}px;
+      margin-top: ${(props) => props.yOffset}px;
     }
   }
 `;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface SearchProps {
+    openSearch: () => void;
+}
+export declare const SearchButton: ({ openSearch }: SearchProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.js

@@ -0,0 +1,10 @@
+import { IconButton } from "@mui/material";
+import React from "react";
+import { useBreakpoint } from "../../../../../../../../../../../../hooks/useBreakpoint";
+import { SearchIcon } from "../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
+import { Button } from "./searchButton.styles";
+export const SearchButton = ({ openSearch }) => {
+    const { mdUp } = useBreakpoint();
+    return mdUp ? (React.createElement(Button, { onClick: openSearch, startIcon: React.createElement(SearchIcon, null), variant: "nav" }, "Search")) : (React.createElement(IconButton, { color: "ink", onClick: openSearch },
+        React.createElement(SearchIcon, { fontSize: "medium" })));
+};

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.styles.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+export declare const Button: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
+    color?: "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | undefined;
+    disabled?: boolean | undefined;
+    disableElevation?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    endIcon?: import("react").ReactNode;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    size?: "large" | "medium" | "small" | undefined;
+    startIcon?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | "backNav" | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "href" | "disabled" | "action" | "size" | "fullWidth" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.styles.js

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+import { Button as MButton } from "@mui/material";
+import { textBody500 } from "../../../../../../../../../../../../styles/common/mixins/fonts";
+export const Button = styled(MButton) `
+  & {
+    ${textBody500};
+    padding: 6px 12px;
+  }
+`;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.js

@@ -1,4 +1,4 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import React, { useCallback } from "react";
 import { Button } from "../../../../../../../../../common/Button/button";
 import { BackArrowIcon } from "../../../../../../../../../common/CustomIcon/components/BackArrowIcon/backArrowIcon";
@@ -16,7 +16,7 @@ export const NavigationDrawer = ({ closeAncestor, headerProps, isMenuIn, isSelec
         closeAncestor?.();
     }, [closeAncestor, onClose]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { EndIcon: ArrowDropDownRoundedIcon, onClick: onOpen, variant: isSelected ? "activeNav" : "nav" }, menuLabel),
+        React.createElement(Button, { EndIcon: ArrowDropDownRounded, onClick: onOpen, variant: isSelected ? "activeNav" : "nav" }, menuLabel),
         React.createElement(Dialog, { ...DIALOG_PROPS, onClose: closeDrawers, open: open, TransitionComponent: Slide },
             React.createElement(AppBar, { component: "div", elevation: 1 },
                 React.createElement(Toolbar, { onClose: closeDrawers, ...headerProps })),

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.js

@@ -1,4 +1,4 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import { Grow, ClickAwayListener as MClickAwayListener, MenuList as MMenuList, Paper as MPaper, } from "@mui/material";
 import React, { Fragment, useEffect } from "react";
 import { useMenu } from "../../../../../../../../../common/Menu/hooks/useMenu";
@@ -17,7 +17,7 @@ export const NavigationMenu = ({ closeAncestor, isSelected = false, isSubMenu =
         };
     }, [isSubMenu, onDisableScrollLock, open]);
     return (React.createElement(MenuItem, null,
-        React.createElement(Button, { EndIcon: ArrowDropDownRoundedIcon, isActive: open, onClick: onOpen, variant: isSelected ? "activeNav" : "nav" },
+        React.createElement(Button, { EndIcon: ArrowDropDownRounded, isActive: open, onClick: onOpen, variant: isSelected ? "activeNav" : "nav" },
             React.createElement(NavigationButtonLabel, { label: menuLabel })),
         React.createElement(StyledPopper, { ...POPPER_PROPS, ...popperProps, anchorEl: anchorEl, open: open }, ({ TransitionProps }) => (React.createElement(Grow, { ...TransitionProps, onEntered: () => {
                 if (isSubMenu)

package/lib/components/Layout/components/Header/hooks/useMeasureHeader.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from "react";
+export interface UseMeasureHeader {
+    headerRef: RefObject<HTMLElement>;
+}
+export declare const useMeasureHeader: () => UseMeasureHeader;

package/lib/components/Layout/components/Header/hooks/useMeasureHeader.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+import { useLayoutState } from "../../../../../hooks/useLayoutState";
+import { getBorderBoxSizeHeight, useResizeObserver, } from "../../../../../hooks/useResizeObserver";
+import { LayoutActionKind } from "../../../../../providers/layoutState";
+export const useMeasureHeader = () => {
+    const { layoutDispatch } = useLayoutState();
+    const headerRef = useRef(null);
+    const { height } = useResizeObserver(headerRef, getBorderBoxSizeHeight) || {};
+    // Updates layout state header height.
+    useEffect(() => {
+        if (!height)
+            return;
+        layoutDispatch({
+            payload: height,
+            type: LayoutActionKind.UpdateHeaderHeight,
+        });
+    }, [height, layoutDispatch]);
+    return { headerRef };
+};

package/lib/components/Layout/components/Outline/common/constants.d.ts

@@ -0,0 +1,2 @@
+import { TabProps as MTabProps } from "@mui/material";
+export declare const DEFAULT_TAB_VALUE: MTabProps["value"];

package/lib/components/Layout/components/Outline/common/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_TAB_VALUE = "";

package/lib/components/Layout/components/Outline/outline.styles.d.ts

@@ -5,7 +5,7 @@ interface Props extends TabProps {
 export declare const tab: import("@emotion/react").SerializedStyles;
 export declare const StyledTabs: import("@emotion/styled").StyledComponent<import("@mui/material").TabsOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "style" | "className" | "classes" | "aria-label" | "aria-labelledby" | "children" | "onChange" | "sx" | "variant" | "orientation" | "value" | "action" | "slotProps" | "slots" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & {
+}, "style" | "className" | "classes" | "aria-label" | "aria-labelledby" | "children" | "onChange" | "sx" | "variant" | "orientation" | "value" | "action" | "slots" | "slotProps" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const StyledTab: import("@emotion/styled").StyledComponent<import("@mui/material").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/lib/components/Layout/components/Sidebar/components/SidebarButton/sidebarButton.js

@@ -1,9 +1,9 @@
-import FilterListRoundedIcon from "@mui/icons-material/FilterListRounded";
+import { FilterListRounded } from "@mui/icons-material";
 import React from "react";
 import { Badge, SidebarButton as Button } from "./sidebarButton.styles";
 export const SidebarButton = ({ className, count, label, onClick, ...props }) => {
     return (React.createElement(Button, { className: className, onClick: onClick, ...props },
-        React.createElement(FilterListRoundedIcon, { fontSize: "small" }),
+        React.createElement(FilterListRounded, { fontSize: "small" }),
         label,
         count > 0 && React.createElement(Badge, null, count)));
 };

package/lib/components/Loading/loading.d.ts

@@ -13,9 +13,10 @@ export declare enum LOADING_PANEL_STYLE {
 }
 export interface LoadingProps {
     appear?: boolean;
+    autoPosition?: boolean;
     iconSize?: SvgIconProps["fontSize"];
     loading: boolean;
     panelStyle?: LoadingPanelStyle;
     text?: string;
 }
-export declare const Loading: ({ appear, iconSize, loading, panelStyle, text, }: LoadingProps) => JSX.Element | null;
+export declare const Loading: ({ appear, autoPosition, iconSize, loading, panelStyle, text, }: LoadingProps) => JSX.Element | null;

package/lib/components/Loading/loading.js

@@ -10,8 +10,8 @@ export var LOADING_PANEL_STYLE;
 (function (LOADING_PANEL_STYLE) {
     LOADING_PANEL_STYLE["INHERIT"] = "INHERIT";
 })(LOADING_PANEL_STYLE || (LOADING_PANEL_STYLE = {}));
-export const Loading = ({ appear = true, iconSize = "large", loading, panelStyle = PAPER_PANEL_STYLE.ROUNDED, text, }) => {
-    return (React.createElement(Fade, { appear: appear, in: loading, mountOnEnter: true, onEnter: (node) => onFadeEnter(node), onExited: (node) => onFadeExited(node), timeout: 300, unmountOnExit: true },
+export const Loading = ({ appear = true, autoPosition = true, iconSize = "large", loading, panelStyle = PAPER_PANEL_STYLE.ROUNDED, text, }) => {
+    return (React.createElement(Fade, { appear: appear, in: loading, mountOnEnter: true, onEnter: autoPosition ? onFadeEnter : undefined, onExited: autoPosition ? onFadeExited : undefined, timeout: 300, unmountOnExit: true },
         React.createElement(LoadingPositioner, { panelStyle: panelStyle },
             React.createElement(LoadingPaper, { panelStyle: panelStyle },
                 React.createElement(LoadingIcon, { color: "primary", fontSize: iconSize }),

package/lib/components/Loading/loading.stories.d.ts

@@ -1,34 +1,6 @@
-import { StoryObj } from "@storybook/react";
-declare const meta: {
-    argTypes: {
-        appear: {
-            control: "boolean";
-        };
-        iconSize: {
-            control: "select";
-            options: string[];
-        };
-        loading: {
-            control: "boolean";
-        };
-        panelStyle: {
-            control: "select";
-            options: string[];
-        };
-        text: {
-            control: "text";
-        };
-    };
-    component: ({ appear, iconSize, loading, panelStyle, text, }: import("./loading").LoadingProps) => JSX.Element | null;
-    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
-        appear?: boolean | undefined;
-        iconSize?: import("@mui/material").SvgIconProps["fontSize"];
-        loading: boolean;
-        panelStyle?: import("./loading").LoadingPanelStyle | undefined;
-        text?: string | undefined;
-    }>) => JSX.Element)[];
-    title: string;
-};
+import { Meta, StoryObj } from "@storybook/react";
+import { Loading } from "./loading";
+declare const meta: Meta<typeof Loading>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const LoadingStory: Story;

package/lib/components/Login/components/Button/button.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
+}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "endIcon" | "loadingIndicator" | "loadingPosition" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Login/components/Section/components/Consent/consent.js

@@ -4,11 +4,11 @@ import { TEXT_BODY_400 } from "../../../../../../theme/common/typography";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedErrorIcon } from "../../../../../common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
-import { StyledGrid2 } from "./consent.styles";
-export const Consent = ({ children, className, handleConsent, isDisabled, isError, ...props /* Mui Grid2Props */ }) => {
+import { StyledGrid } from "./consent.styles";
+export const Consent = ({ children, className, handleConsent, isDisabled, isError, ...props /* Mui GridProps */ }) => {
     if (isDisabled)
         return null;
-    return (React.createElement(StyledGrid2, { className: className, ...props },
+    return (React.createElement(StyledGrid, { className: className, ...props },
         React.createElement(Checkbox, { checkedIcon: React.createElement(CheckedIcon, null), icon: isError ? React.createElement(UncheckedErrorIcon, null) : React.createElement(UncheckedIcon, null), onChange: handleConsent }),
         React.createElement(Typography, { variant: TEXT_BODY_400 }, children)));
 };

package/lib/components/Login/components/Section/components/Consent/consent.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const StyledGrid2: import("@emotion/styled").StyledComponent<import("@mui/material").GridBaseProps & {
+export declare const StyledGrid: import("@emotion/styled").StyledComponent<import("@mui/material").GridBaseProps & {
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
 } & import("@mui/system").SystemProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;

package/lib/components/Login/components/Section/components/Consent/consent.styles.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
-import { Grid2 } from "@mui/material";
-export const StyledGrid2 = styled(Grid2) `
+import { Grid } from "@mui/material";
+export const StyledGrid = styled(Grid) `
   align-items: center;
   align-self: flex-start;
   display: flex;

package/lib/components/Login/components/Section/components/Consent/types.d.ts

@@ -1,6 +1,6 @@
-import { Grid2Props } from "@mui/material";
+import { GridProps } from "@mui/material";
 import { ReactNode } from "react";
 import { UseUserConsent } from "../../../../hooks/useUserConsent/types";
-export interface ConsentProps extends Grid2Props, Pick<UseUserConsent, "handleConsent">, Pick<UseUserConsent["state"], "isDisabled" | "isError"> {
+export interface ConsentProps extends GridProps, Pick<UseUserConsent, "handleConsent">, Pick<UseUserConsent["state"], "isDisabled" | "isError"> {
     children: ReactNode;
 }

package/lib/components/Login/login.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Login } from "./login";
+declare const _default: Meta<typeof Login>;
+export default _default;
+type Story = StoryObj<typeof Login>;
+export declare const LoginStory: Story;

package/lib/components/Login/login.stories.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { HelpIconButton } from "../common/Button/components/HelpIconButton/helpIconButton";
+import { Login } from "./login";
+export default {
+    argTypes: {
+        isGoogle: { control: "boolean" },
+        termsOfService: { control: "object" },
+        text: { control: "object" },
+        title: { control: "text" },
+        warning: { control: "object" },
+    },
+    component: Login,
+    parameters: {
+        layout: "fullscreen",
+    },
+    title: "Components/Login",
+};
+export const LoginStory = {
+    args: {
+        isGoogle: true,
+        termsOfService: (React.createElement("p", null, "I have read and agree to privacy notice and terms of use")),
+        text: (React.createElement("p", null,
+            "Please sign in to your Data Explorer account",
+            " ",
+            React.createElement(HelpIconButton, { url: "https://www.google.com/" }))),
+        title: "Sign in to your account",
+        warning: (React.createElement("div", null,
+            React.createElement("p", null, "WARNING NOTICE"),
+            React.createElement("p", null, "This is a warning notice."))),
+    },
+};

package/lib/components/NoResults/noResults.d.ts

@@ -1,9 +1,2 @@
-import { ReactNode } from "react";
-import { FlatPaper, FluidPaper, RoundedPaper } from "../common/Paper/paper.styles";
-export interface NoResultsProps {
-    actions?: ReactNode;
-    description?: string;
-    Paper?: typeof FlatPaper | typeof FluidPaper | typeof RoundedPaper;
-    title: string;
-}
+import { NoResultsProps } from "./types";
 export declare const NoResults: ({ actions, description, Paper, title, }: NoResultsProps) => JSX.Element;

package/lib/components/NoResults/noResults.js

@@ -1,17 +1,18 @@
 import { Typography } from "@mui/material";
-import React from "react";
+import React, { Fragment } from "react";
+import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
 import { SearchOffIcon } from "../common/CustomIcon/components/SearchOffIcon/searchOffIcon";
-import { RoundedPaper, } from "../common/Paper/paper.styles";
 import { SectionTitle } from "../common/Section/components/SectionTitle/sectionTitle";
 import { SectionActions } from "../common/Section/section.styles";
 import { PRIORITY, StatusIcon } from "../common/StatusIcon/statusIcon";
-import { NoResultsSection, NoResultsSectionContent } from "./noResults.styles";
-export const NoResults = ({ actions, description, Paper = RoundedPaper, title, }) => {
-    return (React.createElement(Paper, null,
-        React.createElement(NoResultsSection, null,
+import { StyledSection, StyledSectionContent } from "./noResults.styles";
+export const NoResults = ({ actions, description, Paper, title, }) => {
+    const StyledPaper = Paper ?? Fragment;
+    return (React.createElement(StyledPaper, null,
+        React.createElement(StyledSection, null,
             React.createElement(StatusIcon, { priority: PRIORITY.LOW, StatusIcon: SearchOffIcon }),
-            React.createElement(NoResultsSectionContent, null,
+            React.createElement(StyledSectionContent, null,
                 React.createElement(SectionTitle, { title: title }),
-                description && (React.createElement(Typography, { color: "ink.light", variant: "text-body-400-2lines" }, description))),
+                description && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES }, description))),
             actions && React.createElement(SectionActions, null, actions))));
 };

package/lib/components/NoResults/noResults.styles.d.ts

@@ -1,10 +1,10 @@
-export declare const NoResultsSection: import("@emotion/styled").StyledComponent<{
+export declare const StyledSection: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const NoResultsSectionContent: import("@emotion/styled").StyledComponent<{
+export declare const StyledSectionContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {

package/lib/components/NoResults/noResults.styles.js

@@ -1,10 +1,12 @@
 import styled from "@emotion/styled";
+import { white } from "../../styles/common/mixins/colors";
 import { Section, SectionContent } from "../common/Section/section.styles";
-export const NoResultsSection = styled(Section) `
+export const StyledSection = styled(Section) `
   align-items: center;
+  background-color: ${white};
   padding: 40px !important; /* Overrides section padding. */
 `;
-export const NoResultsSectionContent = styled(SectionContent) `
+export const StyledSectionContent = styled(SectionContent) `
   max-width: 456px;
   text-align: center;
 `;

package/lib/components/NoResults/types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+import { FlatPaper, FluidPaper, RoundedPaper } from "../common/Paper/paper.styles";
+export interface NoResultsProps {
+    actions?: ReactNode;
+    description?: string;
+    Paper: typeof FlatPaper | typeof FluidPaper | typeof RoundedPaper | null;
+    title: string;
+}

package/lib/components/NoResults/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Plot/components/BarX/barX.d.ts

@@ -0,0 +1,2 @@
+import { BarXProps } from "./types";
+export declare const BarX: ({ className, options, testId, }: BarXProps) => JSX.Element;

package/lib/components/Plot/components/BarX/barX.js

@@ -0,0 +1,13 @@
+import * as Plot from "@observablehq/plot";
+import React, { useEffect, useRef } from "react";
+export const BarX = ({ className, options, testId, }) => {
+    const chartRef = useRef(null);
+    useEffect(() => {
+        if (chartRef.current)
+            chartRef.current.innerHTML = "";
+        const chart = Plot.plot(options);
+        chartRef.current?.appendChild(chart);
+        return () => chart.remove();
+    }, [options]);
+    return React.createElement("div", { className: className, "data-testid": testId, ref: chartRef });
+};

package/lib/components/Plot/components/BarX/types.d.ts

@@ -0,0 +1,5 @@
+import { PlotOptions } from "@observablehq/plot";
+import { BaseComponentProps, TestIdProps } from "../../../types";
+export interface BarXProps extends BaseComponentProps, TestIdProps {
+    options?: PlotOptions;
+}

package/lib/components/Plot/components/BarX/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Stepper/components/Step/components/StepContent/stepContent.d.ts

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

package/lib/components/Stepper/components/Step/components/StepContent/stepContent.js

@@ -0,0 +1,7 @@
+import { Grid } from "@mui/material";
+import React from "react";
+import { StyledStepContent } from "./stepContent.styles";
+export const StepContent = ({ children, className, ...props /* MuiStepContentProps */ }) => {
+    return (React.createElement(StyledStepContent, { className: className, ...props },
+        React.createElement(Grid, null, children)));
+};

package/lib/components/Stepper/components/Step/components/StepContent/stepContent.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledStepContent: import("@emotion/styled").StyledComponent<import("@mui/material").StepContentProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Stepper/components/Step/components/StepContent/stepContent.styles.js

@@ -0,0 +1,17 @@
+import styled from "@emotion/styled";
+import { StepContent } from "@mui/material";
+import { smokeMain } from "../../../../../../styles/common/mixins/colors";
+import { sectionPadding } from "../../../../../common/Section/section.styles";
+export const StyledStepContent = styled(StepContent) `
+  &.MuiStepContent-root {
+    .MuiCollapse-wrapperInner.MuiCollapse-vertical {
+      > .MuiGrid-root {
+        ${sectionPadding};
+        border-top: 1px solid ${smokeMain};
+        display: grid;
+        gap: 24px;
+        justify-items: flex-start;
+      }
+    }
+  }
+`;

package/lib/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/completedIcon.d.ts

@@ -0,0 +1,2 @@
+import { TestIdProps } from "../../../../../../../types";
+export declare const CompletedIcon: ({ testId }: TestIdProps) => JSX.Element;

package/lib/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/completedIcon.js

@@ -0,0 +1,8 @@
+import { stepIconClasses } from "@mui/material";
+import React from "react";
+import { StyledSvgIcon } from "./completedIcon.styles";
+import { SVG_ICON_PROPS } from "./contants";
+export const CompletedIcon = ({ testId }) => {
+    return (React.createElement(StyledSvgIcon, { ...SVG_ICON_PROPS, className: stepIconClasses.completed, "data-testid": testId },
+        React.createElement("path", { d: "M7.18129 13.1814C7.08109 13.1814 6.98419 13.1625 6.89059 13.1247C6.79699 13.0875 6.7064 13.0251 6.61879 12.9375L3.44989 9.7686C3.2999 9.61857 3.22819 9.42813 3.23479 9.1971C3.24079 8.96551 3.3188 8.77471 3.46879 8.6247C3.61879 8.47471 3.80629 8.3997 4.03129 8.3997C4.25629 8.3997 4.4438 8.47471 4.59379 8.6247L7.21909 11.25L13.4255 5.0436C13.5755 4.89361 13.7597 4.8186 13.9781 4.8186C14.1971 4.8186 14.3816 4.89361 14.5316 5.0436C14.6816 5.19361 14.7566 5.37811 14.7566 5.5971C14.7566 5.81551 14.6816 5.99971 14.5316 6.1497L7.74379 12.9375C7.65619 13.0251 7.56559 13.0875 7.47199 13.1247C7.37839 13.1625 7.2815 13.1814 7.18129 13.1814Z", fill: "currentColor" })));
+};

package/lib/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/completedIcon.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledSvgIcon: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "fontSize" | "style" | "className" | "classes" | "color" | "children" | "shapeRendering" | "sx" | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/completedIcon.styles.js

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+import { SvgIcon } from "@mui/material";
+import { inkLight, smokeDark, } from "../../../../../../../../styles/common/mixins/colors";
+export const StyledSvgIcon = styled(SvgIcon) `
+  &.MuiSvgIcon-root {
+    border-radius: 50%;
+    box-sizing: content-box;
+    padding: 4px;
+
+    &.Mui-completed {
+      border: 2px solid ${smokeDark};
+      color: ${inkLight};
+    }
+  }
+`;

package/lib/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/contants.d.ts

@@ -0,0 +1,2 @@
+import { SvgIconProps } from "@mui/material";
+export declare const SVG_ICON_PROPS: SvgIconProps;

package/lib/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/contants.js

@@ -0,0 +1,4 @@
+export const SVG_ICON_PROPS = {
+    fontSize: "small",
+    viewBox: "0 0 18 18",
+};

package/lib/components/Stepper/components/Step/components/StepIcon/constants.d.ts

@@ -0,0 +1 @@
+export declare const STEP_ICON_TEST_ID = "step-icon";

package/lib/components/Stepper/components/Step/components/StepIcon/constants.js

@@ -0,0 +1 @@
+export const STEP_ICON_TEST_ID = "step-icon";

package/lib/components/Stepper/components/Step/components/StepIcon/stepIcon.d.ts

@@ -0,0 +1,3 @@
+import { StepIconProps } from "@mui/material";
+import { TestIdProps } from "../../../../../types";
+export declare const StepIcon: ({ completed, icon, testId, ...props }: StepIconProps & TestIdProps) => JSX.Element;

package/lib/components/Stepper/components/Step/components/StepIcon/stepIcon.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { CompletedIcon } from "./components/CompletedIcon/completedIcon";
+import { StyledStepIcon } from "./stepIcon.styles";
+export const StepIcon = ({ completed, icon, testId, ...props }) => {
+    return (React.createElement(StyledStepIcon, { completed: completed, "data-testid": testId, icon: completed ? React.createElement(CompletedIcon, { testId: testId }) : icon, ...props }));
+};

package/lib/components/Stepper/components/Step/components/StepIcon/stepIcon.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledStepIcon: import("@emotion/styled").StyledComponent<import("@mui/material").StepIconProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Stepper/components/Step/components/StepIcon/stepIcon.styles.js

@@ -0,0 +1,27 @@
+import styled from "@emotion/styled";
+import { StepIcon } from "@mui/material";
+import { inkLight, primaryMain, smokeDark, } from "../../../../../../styles/common/mixins/colors";
+export const StyledStepIcon = styled(StepIcon) `
+  &.MuiSvgIcon-root {
+    border: 2px solid ${smokeDark};
+    border-radius: 50%;
+    color: transparent;
+    height: 32px;
+    width: 32px;
+
+    .MuiStepIcon-text {
+      fill: ${inkLight};
+      font-size: 13px;
+      font-weight: 600;
+      line-height: 24px;
+    }
+
+    &.Mui-active {
+      border-color: ${primaryMain};
+
+      .MuiStepIcon-text {
+        fill: ${primaryMain};
+      }
+    }
+  }
+`;

package/lib/components/Stepper/components/Step/components/StepIcon/stories/stepIcon.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { StepIcon } from "../stepIcon";
+declare const meta: Meta<typeof StepIcon>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Active: Story;
+export declare const Completed: Story;
+export declare const Default: Story;
+export declare const AllStates: Story;