@databiosphere/findable-ui 23.0.0 → 24.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "23.0.0"
+  ".": "24.0.0"
 }

package/.storybook/preview.js

@@ -1,39 +1,6 @@
-import { CssBaseline } from "@mui/material";
-import { ThemeProvider } from "@mui/material/styles";
-import { ThemeProvider as Emotion10ThemeProvider } from "emotion-theming";
-import { RouterContext } from "next/dist/shared/lib/router-context.shared-runtime";
-import { useConfig } from "../src/hooks/useConfig";
 import "../src/index";
-import { createAppTheme } from "../src/theme/theme";
+import { decorators as projectDecorators } from "../src/storybook/decorators";
+import { parameters as projectParameters } from "../src/storybook/parameters";
 
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    exclude: ["className", "ref", "sx"],
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  nextRouter: {
-    Provider: RouterContext.Provider,
-    basePath: "",
-  },
-  layout: "centered",
-};
-
-const withThemeProvider = (Story, context) => {
-  // TODO current config is not returned, and extended theme interfaces are not recognised.
-  const { config } = useConfig();
-  const theme = createAppTheme(config.themeOptions);
-  return (
-    <Emotion10ThemeProvider theme={theme}>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <Story {...context} />
-      </ThemeProvider>
-    </Emotion10ThemeProvider>
-  );
-};
-
-export const decorators = [withThemeProvider];
+export const decorators = projectDecorators;
+export const parameters = projectParameters;

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## [24.0.0](https://github.com/DataBiosphere/findable-ui/compare/v23.0.0...v24.0.0) (2025-03-28)
+
+
+### ⚠ BREAKING CHANGES
+
+* fix keyvaluepairs component typography props ([#367](https://github.com/DataBiosphere/findable-ui/issues/367)) (#368)
+
+### Features
+
+* add 'text-heading-xsmall' to typography variants ([#361](https://github.com/DataBiosphere/findable-ui/issues/361)) ([#362](https://github.com/DataBiosphere/findable-ui/issues/362)) ([5ec4c9d](https://github.com/DataBiosphere/findable-ui/commit/5ec4c9dc42d043f8fb5f8dd13f391ac9478edac0))
+* create step component ([#364](https://github.com/DataBiosphere/findable-ui/issues/364)) ([#365](https://github.com/DataBiosphere/findable-ui/issues/365)) ([ca9fdfd](https://github.com/DataBiosphere/findable-ui/commit/ca9fdfd4dd8cb54f49e53afe75358ae3b53d6243))
+* create step indicator component ([#350](https://github.com/DataBiosphere/findable-ui/issues/350)) ([#351](https://github.com/DataBiosphere/findable-ui/issues/351)) ([dd40168](https://github.com/DataBiosphere/findable-ui/commit/dd401684a8ceaeca68961088ddb1924b3a5a6a4a))
+* create step label component ([#360](https://github.com/DataBiosphere/findable-ui/issues/360)) ([#363](https://github.com/DataBiosphere/findable-ui/issues/363)) ([cba945c](https://github.com/DataBiosphere/findable-ui/commit/cba945ccee05e040709870287cba0d34b25e981a))
+
+
+### Bug Fixes
+
+* fix keyvaluepairs component typography props ([#367](https://github.com/DataBiosphere/findable-ui/issues/367)) ([#368](https://github.com/DataBiosphere/findable-ui/issues/368)) ([7777828](https://github.com/DataBiosphere/findable-ui/commit/7777828988d4bda2f0d5932c0f2cac931df15240))
+* jest tests missing storybook annotations ([#354](https://github.com/DataBiosphere/findable-ui/issues/354)) ([#355](https://github.com/DataBiosphere/findable-ui/issues/355)) ([1ec7a72](https://github.com/DataBiosphere/findable-ui/commit/1ec7a72da225560ebbacf279a1009703d25f9e6e))
+
+
+### Code Refactoring
+
+* storybook parameters nextjs router config ([#357](https://github.com/DataBiosphere/findable-ui/issues/357)) ([#359](https://github.com/DataBiosphere/findable-ui/issues/359)) ([fc20e88](https://github.com/DataBiosphere/findable-ui/commit/fc20e886f3a14c6ed22f8f2f55b1067bfa5165f3))
+
 ## [23.0.0](https://github.com/DataBiosphere/findable-ui/compare/v22.0.0...v23.0.0) (2025-03-21)
 
 

package/jest.config.js

@@ -1,5 +1,6 @@
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   preset: "ts-jest/presets/js-with-ts-esm",
+  setupFiles: ["<rootDir>/tests/setup.ts"],
   testEnvironment: "jest-environment-jsdom",
 };

package/lib/components/Export/components/ExportForm/exportForm.styles.d.ts

@@ -2,12 +2,12 @@ import { ThemeProps } from "../../../../theme/theme";
 export declare const margin: ({ theme }: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const FormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & 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" | "color" | "children" | "margin" | "sx" | "variant" | "error" | "disabled" | "required" | "size" | "fullWidth" | "hiddenLabel" | "focused"> & {
+}, "style" | "className" | "classes" | "color" | "children" | "margin" | "sx" | "variant" | "error" | "disabled" | "required" | "size" | "focused" | "fullWidth" | "hiddenLabel"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const TableFormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & 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" | "color" | "children" | "margin" | "sx" | "variant" | "error" | "disabled" | "required" | "size" | "fullWidth" | "hiddenLabel" | "focused"> & {
+}, "style" | "className" | "classes" | "color" | "children" | "margin" | "sx" | "variant" | "error" | "disabled" | "required" | "size" | "focused" | "fullWidth" | "hiddenLabel"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const GridPaper: import("@emotion/styled").StyledComponent<{

package/lib/components/Filter/components/FilterLabel/filterLabel.styles.d.ts

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const FilterLabel: 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" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 } & Props, {}, {}>;
 export {};

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.d.ts

@@ -18,6 +18,6 @@ export declare const UserNames: import("@emotion/styled").StyledComponent<import
 }, {}, {}>;
 export declare const StyledAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & 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" | "children" | "sx" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "slotProps" | "slots" | "imgProps"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "slots" | "slotProps" | "imgProps"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/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" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/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" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

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/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" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

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 { Grid2 } 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(Grid2, 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 {
+      > .MuiGrid2-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;

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

@@ -0,0 +1,38 @@
+import React, { Fragment } from "react";
+import { StepIcon } from "../stepIcon";
+const meta = {
+    component: StepIcon,
+    decorators: [
+        (Story, context) => (React.createElement("div", { style: { display: "grid", gap: 24 } },
+            React.createElement(Story, { ...context }))),
+    ],
+    title: "Components/Stepper/StepIcon",
+};
+export default meta;
+export const Active = {
+    args: {
+        active: true,
+        completed: false,
+        icon: 1,
+    },
+};
+export const Completed = {
+    args: {
+        active: false,
+        completed: true,
+        icon: 1,
+    },
+};
+export const Default = {
+    args: {
+        active: false,
+        completed: false,
+        icon: 1,
+    },
+};
+export const AllStates = {
+    render: () => (React.createElement(Fragment, null,
+        React.createElement(StepIcon, { active: false, completed: false, icon: 1 }),
+        React.createElement(StepIcon, { active: true, completed: false, icon: 2 }),
+        React.createElement(StepIcon, { active: false, completed: true, icon: 3 }))),
+};

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/components/Icon/constants.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps, TooltipProps } from "@mui/material";
+export declare const SVG_ICON_PROPS: SvgIconProps;
+export declare const TOOLTIP_PROPS: Omit<TooltipProps, "children" | "title">;

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/components/Icon/constants.js

@@ -0,0 +1,11 @@
+import { Info } from "@mui/icons-material";
+import { SVG_ICON_PROPS as MUI_SVG_ICON_PROPS } from "../../../../../../../../../../styles/common/mui/svgIcon";
+export const SVG_ICON_PROPS = {
+    color: MUI_SVG_ICON_PROPS.COLOR.INK_LIGHT,
+    component: Info,
+    fontSize: MUI_SVG_ICON_PROPS.FONT_SIZE.XSMALL,
+};
+export const TOOLTIP_PROPS = {
+    disableInteractive: true,
+    slotProps: { tooltip: { sx: { maxWidth: 196, textAlign: "center" } } },
+};

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/components/Icon/icon.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from "./types";
+export declare const Icon: ({ slotProps }: IconProps) => JSX.Element | null;

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/components/Icon/icon.js

@@ -0,0 +1,9 @@
+import { SvgIcon, Tooltip } from "@mui/material";
+import React from "react";
+import { SVG_ICON_PROPS, TOOLTIP_PROPS } from "./constants";
+export const Icon = ({ slotProps }) => {
+    if (!slotProps?.tooltip?.title)
+        return null;
+    return (React.createElement(Tooltip, { ...TOOLTIP_PROPS, ...slotProps?.tooltip },
+        React.createElement(SvgIcon, { ...SVG_ICON_PROPS, ...slotProps?.svgIcon })));
+};

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/components/Icon/stories/contants.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from "react";
+import { Icon } from "../icon";
+export declare const DISABLED_CONTROLS: (keyof ComponentProps<typeof Icon>)[];

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/components/Icon/stories/contants.js

@@ -0,0 +1,3 @@
+export const DISABLED_CONTROLS = [
+    "slotProps",
+];

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/components/Icon/stories/icon.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Icon } from "../icon";
+declare const meta: Meta<typeof Icon>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/components/Icon/stories/icon.stories.js

@@ -0,0 +1,20 @@
+import { CONTROL_TYPE } from "../../../../../../../../../../../storybook/controls/types";
+import { configureControls } from "../../../../../../../../../../../storybook/controls/utils";
+import { LOREM_IPSUM } from "../../../../../../../../../../../storybook/loremIpsum";
+import { Icon } from "../icon";
+import { DISABLED_CONTROLS } from "./contants";
+const meta = {
+    argTypes: configureControls(DISABLED_CONTROLS, CONTROL_TYPE.DISABLED),
+    component: Icon,
+    title: "Components/Stepper/StepLabel/Icon",
+};
+export default meta;
+export const Default = {
+    args: {
+        slotProps: {
+            tooltip: {
+                title: LOREM_IPSUM.SHORT,
+            },
+        },
+    },
+};

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/components/Icon/types.d.ts

@@ -0,0 +1,7 @@
+import { SvgIconProps, TooltipProps } from "@mui/material";
+export interface IconProps {
+    slotProps?: {
+        svgIcon?: SvgIconProps;
+        tooltip?: Omit<TooltipProps, "children">;
+    };
+}

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/components/Icon/types.js

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

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/constants.d.ts

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

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/constants.js

@@ -0,0 +1,6 @@
+import { TYPOGRAPHY_PROPS as MUI_TYPOGRAPHY_PROPS } from "../../../../../../../../styles/common/mui/typography";
+export const TYPOGRAPHY_PROPS = {
+    color: MUI_TYPOGRAPHY_PROPS.COLOR.INK_MAIN,
+    component: "div",
+    variant: MUI_TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_XSMALL,
+};

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/label.d.ts

@@ -0,0 +1,2 @@
+import { TypographyProps } from "@mui/material";
+export declare const Label: ({ ...props }: TypographyProps) => JSX.Element;

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/label.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "./constants";
+import { StyledTypography } from "./label.styles";
+export const Label = ({ ...props /* MuiTypographyProps */ }) => {
+    return React.createElement(StyledTypography, { ...TYPOGRAPHY_PROPS, ...props });
+};

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/label.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | 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<HTMLSpanElement> | null | undefined;
+}, "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "p" | "style" | "className" | "classes" | "color" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/label.styles.js

@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+import { Typography } from "@mui/material";
+export const StyledTypography = styled(Typography) `
+  align-items: center;
+  display: flex;
+  gap: 4px;
+`;

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/stories/label.stories.d.ts

@@ -0,0 +1,7 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { Label } from "../label";
+declare const meta: Meta<typeof Label>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithIcon: Story;

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/stories/label.stories.js

@@ -0,0 +1,21 @@
+import { composeStories } from "@storybook/react";
+import React from "react";
+import * as stories from "../components/Icon/stories/icon.stories";
+import { Label } from "../label";
+const { Default: Icon } = composeStories(stories);
+const meta = {
+    component: Label,
+    parameters: { controls: { disable: true } },
+    title: "Components/Stepper/StepLabel/Label",
+};
+export default meta;
+export const Default = {
+    args: { children: "Annotation Files" },
+};
+export const WithIcon = {
+    args: {
+        children: (React.createElement(React.Fragment, null,
+            "Annotation Files",
+            React.createElement(Icon, null))),
+    },
+};

package/lib/components/Stepper/components/Step/components/StepLabel/components/Optional/constants.d.ts

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

package/lib/components/Stepper/components/Step/components/StepLabel/components/Optional/constants.js

@@ -0,0 +1,5 @@
+import { TYPOGRAPHY_PROPS as MUI_TYPOGRAPHY_PROPS } from "../../../../../../../../styles/common/mui/typography";
+export const TYPOGRAPHY_PROPS = {
+    color: MUI_TYPOGRAPHY_PROPS.COLOR.INK_LIGHT,
+    variant: MUI_TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400,
+};

package/lib/components/Stepper/components/Step/components/StepLabel/components/Optional/optional.d.ts

@@ -0,0 +1,2 @@
+import { TypographyProps } from "@mui/material";
+export declare const Optional: ({ ...props }: TypographyProps) => JSX.Element;

package/lib/components/Stepper/components/Step/components/StepLabel/components/Optional/optional.js

@@ -0,0 +1,6 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "./constants";
+export const Optional = ({ ...props /* MuiTypographyProps */ }) => {
+    return React.createElement(Typography, { ...TYPOGRAPHY_PROPS, ...props });
+};

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

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