@databiosphere/findable-ui 23.0.0 → 25.0.0

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;

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" | "index" | "active" | "last" | "completed"> & {
+    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/Support/components/SupportRequest/components/Dialog/dialog.js

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import React, { useState, } from "react";
 import { FeedbackIcon } from "../../../../../common/CustomIcon/components/FeedbackIcon/feedbackIcon";
 import { Fab, Popover } from "./dialog.styles";
@@ -12,7 +12,7 @@ export const FormDialog = ({ children, setFormSubmitted, }) => {
         setAnchorEl(null);
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Fab, { color: "primary", onClick: toggleOpen, open: open, size: "medium" }, open ? React.createElement(CloseRoundedIcon, null) : React.createElement(FeedbackIcon, { fontSize: "medium" })),
+        React.createElement(Fab, { color: "primary", onClick: toggleOpen, open: open, size: "medium" }, open ? React.createElement(CloseRounded, null) : React.createElement(FeedbackIcon, { fontSize: "medium" })),
         React.createElement(Popover, { anchorEl: anchorEl, anchorOrigin: {
                 horizontal: "right",
                 vertical: -8,

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.d.ts

@@ -0,0 +1,16 @@
+type MenuListItemOnChangeFn = (event: unknown) => void;
+type onResetFn = () => void;
+export interface CheckboxMenuListItem {
+    checked: boolean;
+    disabled?: boolean;
+    label: string;
+    onChange: MenuListItemOnChangeFn;
+    value: string;
+}
+export interface CheckboxMenuProps {
+    label: string;
+    onReset: onResetFn;
+    options: CheckboxMenuListItem[];
+}
+export declare const CheckboxMenu: ({ label: buttonLabel, onReset, options, }: CheckboxMenuProps) => JSX.Element;
+export {};

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.js

@@ -0,0 +1,28 @@
+import { Checkbox, ListItem, ListItemButton, ListItemText, } from "@mui/material";
+import React, { useState } from "react";
+import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
+import { DropdownButton } from "../../../common/Button/components/DropdownButton/dropdownButton";
+import { CheckedIcon } from "../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedIcon } from "../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { Menu } from "./checkboxMenu.styles";
+export const CheckboxMenu = ({ label: buttonLabel, onReset, options, }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const onOpenMenu = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const onCloseMenu = () => {
+        setAnchorEl(null);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DropdownButton, { onClick: onOpenMenu, open: open }, buttonLabel),
+        React.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: { horizontal: "right", vertical: "bottom" }, onClose: onCloseMenu, open: open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
+                horizontal: "right",
+                vertical: "top",
+            } },
+            options.map(({ checked, disabled = false, label, onChange, value }) => (React.createElement(ListItemButton, { disabled: disabled, key: value, onClick: onChange, role: undefined },
+                React.createElement(Checkbox, { checked: checked, checkedIcon: React.createElement(CheckedIcon, null), disabled: disabled, icon: React.createElement(UncheckedIcon, null) }),
+                React.createElement(ListItemText, { disableTypography: true, primary: React.createElement("span", null, label) })))),
+            React.createElement(ListItem, { component: "div" },
+                React.createElement(ButtonTextPrimary, { onClick: onReset }, "Reset")))));
+};

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.stories.d.ts

@@ -0,0 +1,5 @@
+import { ComponentMeta } from "@storybook/react";
+import { CheckboxMenu } from "./checkboxMenu";
+declare const _default: ComponentMeta<typeof CheckboxMenu>;
+export default _default;
+export declare const CheckboxMenuStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./checkboxMenu").CheckboxMenuProps>;

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.stories.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { CheckboxMenu } from "./checkboxMenu";
+export default {
+    argTypes: {
+        label: { control: "text" },
+        onReset: { control: { disabled: true } },
+        options: { control: "array" },
+    },
+    component: CheckboxMenu,
+    title: "Components/Common/Menu/CheckboxMenu",
+};
+const CheckboxMenuTemplate = (args) => (React.createElement(CheckboxMenu, { ...args }));
+const onChange = () => {
+    // onChange function
+};
+const onReset = () => {
+    // onReset function
+};
+export const CheckboxMenuStory = CheckboxMenuTemplate.bind({});
+CheckboxMenuStory.args = {
+    label: "Options",
+    onReset: onReset,
+    options: [
+        {
+            checked: true,
+            disabled: true,
+            label: "Item 1",
+            onChange,
+            value: "item_1",
+        },
+        {
+            checked: false,
+            disabled: false,
+            label: "Item 2",
+            onChange,
+            value: "item_2",
+        },
+        {
+            checked: true,
+            disabled: false,
+            label: "Item 3",
+            onChange,
+            value: "item_3",
+        },
+    ],
+};

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.styles.d.ts

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