@databiosphere/findable-ui 23.0.0 → 24.0.0

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

@@ -0,0 +1,8 @@
+import { StepIcon } from "../StepIcon/stepIcon";
+import { Label } from "./components/Label/label";
+export const STEP_LABEL_PROPS = {
+    slots: {
+        label: Label,
+        stepIcon: StepIcon,
+    },
+};

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

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

package/lib/components/Stepper/components/Step/components/StepLabel/stepLabel.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { STEP_LABEL_PROPS } from "./constants";
+import { StyledStepLabel } from "./stepLabel.styles";
+export const StepLabel = ({ ...props /* MuiStepLabelProps */ }) => {
+    return React.createElement(StyledStepLabel, { ...STEP_LABEL_PROPS, ...props });
+};

package/lib/components/Stepper/components/Step/components/StepLabel/stepLabel.styles.d.ts

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

package/lib/components/Stepper/components/Step/components/StepLabel/stepLabel.styles.js

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+import { StepLabel } from "@mui/material";
+export const StyledStepLabel = styled(StepLabel) `
+  .MuiStepLabel-iconContainer {
+    padding-right: 16px;
+  }
+
+  .MuiStepLabel-labelContainer {
+    display: grid;
+    gap: 4px;
+  }
+`;

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

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

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

@@ -0,0 +1,15 @@
+import { MUI_CONTROLS } from "../../../../../../../storybook/controls/constants";
+export const DISABLED_CONTROLS = [
+    ...MUI_CONTROLS,
+    "children",
+    "error",
+    "icon",
+    "optional",
+    "slotProps",
+    "slots",
+];
+export const EXCLUDED_CONTROLS = [
+    "componentsProps", // deprecated
+    "StepIconComponent", // deprecated
+    "StepIconProps", // deprecated
+];

package/lib/components/Stepper/components/Step/components/StepLabel/stories/stepLabel.stories.d.ts

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

package/lib/components/Stepper/components/Step/components/StepLabel/stories/stepLabel.stories.js

@@ -0,0 +1,37 @@
+import { composeStories } from "@storybook/react";
+import React from "react";
+import { CONTROL_TYPE } from "../../../../../../../storybook/controls/types";
+import { configureControls } from "../../../../../../../storybook/controls/utils";
+import * as stories from "../components/Label/stories/label.stories";
+import { Optional } from "../components/Optional/optional";
+import { StepLabel } from "../stepLabel";
+import { DISABLED_CONTROLS, EXCLUDED_CONTROLS } from "./contants";
+const { Default: Label, WithIcon: LabelWithIcon } = composeStories(stories);
+const meta = {
+    argTypes: configureControls(DISABLED_CONTROLS, CONTROL_TYPE.DISABLED),
+    component: StepLabel,
+    parameters: { controls: { exclude: EXCLUDED_CONTROLS } },
+    title: "Components/Stepper/StepLabel",
+};
+export default meta;
+export const Active = {
+    args: {
+        children: React.createElement(LabelWithIcon, null),
+        icon: 1,
+        slotProps: { stepIcon: { active: true } },
+    },
+};
+export const Completed = {
+    args: {
+        children: React.createElement(LabelWithIcon, null),
+        icon: 1,
+        optional: React.createElement(Optional, null, "3 files selected"),
+        slotProps: { stepIcon: { completed: true } },
+    },
+};
+export const Default = {
+    args: {
+        children: React.createElement(Label, null),
+        icon: 1,
+    },
+};

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

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

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

@@ -0,0 +1,4 @@
+import { FluidPaper } from "../../../common/Paper/paper.styles";
+export const STEP_PROPS = {
+    component: FluidPaper,
+};

package/lib/components/Stepper/components/Step/step.d.ts

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

package/lib/components/Stepper/components/Step/step.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { STEP_PROPS } from "./constants";
+import { StyledStep } from "./step.styles";
+export const Step = ({ className, ...props /* MuiStepProps */ }) => {
+    return React.createElement(StyledStep, { ...STEP_PROPS, className: className, ...props });
+};

package/lib/components/Stepper/components/Step/step.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledStep: import("@emotion/styled").StyledComponent<import("@mui/material").StepOwnProps & 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" | "disabled" | "expanded" | "active" | "last" | "completed" | "index"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Stepper/components/Step/step.styles.js

@@ -0,0 +1,31 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Step } from "@mui/material";
+import { smokeLightest, white } from "../../../../styles/common/mixins/colors";
+import { sectionPadding } from "../../../common/Section/section.styles";
+export const StyledStep = styled(Step) `
+  &.MuiStep-root {
+    &.MuiStep-vertical {
+      background-color: ${smokeLightest};
+
+      .MuiStepLabel-root {
+        ${sectionPadding};
+      }
+
+      .MuiStepContent-root {
+        border: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      &.Mui-completed {
+        background-color: ${white};
+      }
+
+      ${(props) => props.active &&
+    css `
+          background-color: ${white(props)};
+        `};
+    }
+  }
+`;

package/lib/components/Stepper/components/Step/stories/contants.d.ts

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

package/lib/components/Stepper/components/Step/stories/contants.js

@@ -0,0 +1,14 @@
+import { MUI_CONTROLS } from "../../../../../storybook/controls/constants";
+export const BOOLEAN_CONTROLS = [
+    "active",
+    "completed",
+    "disabled",
+    "expanded",
+    "last",
+];
+export const DISABLED_CONTROLS = [
+    ...MUI_CONTROLS,
+    "children",
+    "component",
+    "style",
+];

package/lib/components/Stepper/components/Step/stories/step.stories.d.ts

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

package/lib/components/Stepper/components/Step/stories/step.stories.js

@@ -0,0 +1,62 @@
+import { Stepper } from "@mui/material";
+import { composeStories } from "@storybook/react";
+import React from "react";
+import { CONTROL_TYPE } from "../../../../../storybook/controls/types";
+import { configureControls } from "../../../../../storybook/controls/utils";
+import { LOREM_IPSUM } from "../../../../../storybook/loremIpsum";
+import { STEPPER_PROPS } from "../../../../../styles/common/mui/stepper";
+import { StepContent } from "../components/StepContent/stepContent";
+import * as stories from "../components/StepLabel/stories/stepLabel.stories";
+import { Step } from "../step";
+import { BOOLEAN_CONTROLS, DISABLED_CONTROLS } from "./contants";
+const { Active: ActiveStepLabel, Completed: CompletedStepLabel, Default: StepLabel, } = composeStories(stories);
+const meta = {
+    argTypes: {
+        ...configureControls(DISABLED_CONTROLS, CONTROL_TYPE.DISABLED),
+        ...configureControls(BOOLEAN_CONTROLS, CONTROL_TYPE.BOOLEAN),
+        index: { control: { type: "number" } },
+    },
+    component: Step,
+    decorators: [
+        (Story, context) => (React.createElement(Stepper, { connector: null, orientation: STEPPER_PROPS.ORIENTATION.VERTICAL, sx: {
+                display: "grid",
+                gridTemplateColumns: "minmax(auto, 816px)",
+                height: "100vh",
+                placeContent: "center center",
+            } },
+            React.createElement(Story, { ...context }))),
+    ],
+    parameters: { layout: "fullscreen" },
+    title: "Components/Stepper/Step",
+};
+export default meta;
+export const Active = {
+    args: {
+        active: true,
+        children: [
+            React.createElement(ActiveStepLabel, { key: "label" }),
+            React.createElement(StepContent, { key: "step-content" }, LOREM_IPSUM.LONG),
+        ],
+        completed: false,
+    },
+};
+export const Completed = {
+    args: {
+        active: false,
+        children: [
+            React.createElement(CompletedStepLabel, { key: "label" }),
+            React.createElement(StepContent, { key: "step-content" }, LOREM_IPSUM.LONG),
+        ],
+        completed: true,
+    },
+};
+export const Default = {
+    args: {
+        active: false,
+        children: [
+            React.createElement(StepLabel, { key: "label" }),
+            React.createElement(StepContent, { key: "step-content" }, LOREM_IPSUM.LONG),
+        ],
+        completed: false,
+    },
+};

package/lib/components/common/Form/components/Input/input.styles.d.ts

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const InputFormControl: 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;
 } & Props, {}, {}>;
 export {};

package/lib/components/common/Form/components/Select/select.js

@@ -1,9 +1,10 @@
 import { Select as MSelect, Typography, } from "@mui/material";
 import React from "react";
 import { TEXT_BODY_400 } from "../../../../../theme/common/typography";
+import { DropDownIcon } from "./components/DropDownIcon/dropDownIcon";
 import { InputFormControl } from "./select.styles";
 export const Select = ({ children, className, isFilled, label, onBlur, ...props /* Spread props to allow for Mui SelectProps specific prop overrides e.g. "disabled". */ }) => {
     return (React.createElement(InputFormControl, { className: className, isFilled: isFilled },
         label && React.createElement(Typography, { variant: TEXT_BODY_400 }, label),
-        React.createElement(MSelect, { fullWidth: true, inputProps: { onBlur }, size: "small", ...props }, children)));
+        React.createElement(MSelect, { fullWidth: true, IconComponent: DropDownIcon, inputProps: { onBlur }, size: "small", ...props }, children)));
 };

package/lib/components/common/Form/components/Select/select.styles.d.ts

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const InputFormControl: 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;
 } & Props, {}, {}>;
 export {};

package/lib/components/common/Input/input.styles.d.ts

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const InputFormControl: 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 InputField: import("@emotion/styled").StyledComponent<import("@mui/material").OutlinedInputProps & {

package/lib/components/common/KeyValuePairs/components/KeyElType/keyElType.d.ts

@@ -1,8 +1,5 @@
-import { ReactNode } from "react";
+import { TypographyProps } from "@mui/material";
 /**
  * Basic KeyValuePairs "key" wrapper component.
  */
-export interface KeyElTypeProps {
-    children: ReactNode;
-}
-export declare const KeyElType: ({ children, ...props }: KeyElTypeProps) => JSX.Element;
+export declare const KeyElType: ({ children, color, component, variant, ...props }: TypographyProps) => JSX.Element;

package/lib/components/common/KeyValuePairs/components/KeyElType/keyElType.js

@@ -1,5 +1,9 @@
 import { Typography } from "@mui/material";
 import React from "react";
-export const KeyElType = ({ children, ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */ }) => {
-    return (React.createElement(Typography, { color: "ink.light", variant: "text-body-400-2lines", ...props }, children));
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
+/**
+ * Basic KeyValuePairs "key" wrapper component.
+ */
+export const KeyElType = ({ children, color = TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component = "div", variant = TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES, ...props /* MuiTypographyProps */ }) => {
+    return (React.createElement(Typography, { color: color, component: component, variant: variant, ...props }, children));
 };

package/lib/components/common/KeyValuePairs/components/ValueElType/valueElType.d.ts

@@ -1,8 +1,5 @@
-import { ReactNode } from "react";
+import { TypographyProps } from "@mui/material";
 /**
  * Basic KeyValuePairs "value" wrapper component.
  */
-export interface ValueElTypeProps {
-    children: ReactNode;
-}
-export declare const ValueElType: ({ children, ...props }: ValueElTypeProps) => JSX.Element;
+export declare const ValueElType: ({ children, component, variant, ...props }: TypographyProps) => JSX.Element;

package/lib/components/common/KeyValuePairs/components/ValueElType/valueElType.js

@@ -1,5 +1,9 @@
 import { Typography } from "@mui/material";
 import React from "react";
-export const ValueElType = ({ children, ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */ }) => {
-    return (React.createElement(Typography, { variant: "text-body-400-2lines", ...props }, children));
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
+/**
+ * Basic KeyValuePairs "value" wrapper component.
+ */
+export const ValueElType = ({ children, component = "div", variant = TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES, ...props /* MuiTypographyProps */ }) => {
+    return (React.createElement(Typography, { component: component, variant: variant, ...props }, children));
 };

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/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/components.js

@@ -1,4 +1,3 @@
-import { DropDownIcon } from "../../components/common/Form/components/Select/components/DropDownIcon/dropDownIcon";
 import { CHIP_PROPS } from "../../styles/common/mui/chip";
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
 import { alpha32, alpha60, alpha64, alpha80, black04, black08, white, } from "./palette";
@@ -1114,9 +1113,6 @@ export const MuiRadio = (theme) => {
  * MuiSelect Component
  */
 export const MuiSelect = {
-    defaultProps: {
-        IconComponent: DropDownIcon,
-    },
     styleOverrides: {
         select: {
             minHeight: "unset",

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

@@ -3,7 +3,7 @@ import { CSSProperties } from "@mui/material/styles/createTypography";
  * 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"
  */

package/lib/theme/theme.js

@@ -49,6 +49,7 @@ export function createAppTheme(customOptions) {
             [T.TEXT_HEADING_LARGE]: T.textHeadingLarge,
             [T.TEXT_HEADING_SMALL]: T.textHeadingSmall,
             [T.TEXT_HEADING_XLARGE]: T.textHeadingXLarge,
+            [T.TEXT_HEADING_XSMALL]: T.textHeadingXSmall,
             [T.TEXT_UPPERCASE_500]: T.textUppercase500,
             fontFamily: T.fontFamily,
         },