@databiosphere/findable-ui 0.0.0

package/lib/components/common/Dialog/components/DialogTitle/dialogTitle.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogTitle = void 0;
+const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const DialogTitle = ({ className, onClose, title, }) => {
+    return (react_1.default.createElement(material_1.DialogTitle, { className: className },
+        title,
+        onClose && (react_1.default.createElement(material_1.IconButton, { color: "ink", edge: "end", onClick: onClose, size: "xsmall" },
+            react_1.default.createElement(CloseRounded_1.default, null)))));
+};
+exports.DialogTitle = DialogTitle;

package/lib/components/common/Dot/dot.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface DotProps {
+    className?: string;
+}
+export declare const Dot: ({ className }: DotProps) => JSX.Element;

package/lib/components/common/Dot/dot.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dot = void 0;
+const react_1 = __importDefault(require("react"));
+const dot_styles_1 = require("./dot.styles");
+const Dot = ({ className }) => {
+    return react_1.default.createElement(dot_styles_1.DotSeparator, { className: className });
+};
+exports.Dot = Dot;

package/lib/components/common/Dot/dot.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const DotSeparator: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/lib/components/common/Dot/dot.styles.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DotSeparator = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.DotSeparator = (0, styled_1.default)("span") `
+  align-self: center;
+  background-color: ${({ theme }) => theme.palette.ink.light};
+  border-radius: 50%;
+  display: block;
+  flex: none;
+  height: 4px;
+  width: 4px;
+`;

package/lib/components/common/EllipsisContent/ellipsisContent.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface OverviewDescriptionProps {
+    children: ReactNode | ReactNode[];
+    maxLineCount: number;
+}
+export declare const EllipsisContent: ({ children, maxLineCount, }: OverviewDescriptionProps) => JSX.Element;

package/lib/components/common/EllipsisContent/ellipsisContent.js

@@ -0,0 +1,189 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EllipsisContent = void 0;
+const react_1 = __importStar(require("react"));
+const useResizeObserver_1 = require("../../../hooks/useResizeObserver");
+const ellipsisContent_styles_1 = require("./ellipsisContent.styles");
+var EllipsisMode;
+(function (EllipsisMode) {
+    EllipsisMode["NONE"] = "NONE";
+    EllipsisMode["OFF"] = "OFF";
+    EllipsisMode["ON"] = "ON";
+})(EllipsisMode || (EllipsisMode = {}));
+const EllipsisContent = ({ children, maxLineCount, }) => {
+    const ellipsisRef = (0, react_1.useRef)(null);
+    const { height } = (0, useResizeObserver_1.useResizeObserver)(ellipsisRef, useResizeObserver_1.getBorderBoxSizeHeight) || {};
+    const [ellipsisMode, setEllipsisMode] = (0, react_1.useState)();
+    const isEllipsis = ellipsisMode === EllipsisMode.ON;
+    /**
+     * Updates the state of ellipsis mode by toggling between "ON" and "OFF" values.
+     */
+    const onToggleMode = () => {
+        setEllipsisMode((currentMode) => {
+            if (currentMode === EllipsisMode.ON) {
+                return EllipsisMode.OFF;
+            }
+            return EllipsisMode.ON;
+        });
+    };
+    /**
+     * Ellipsis mode state is initialized to "NONE" only when the component mounts,
+     * so we guarantee that `ellipsisRef` gets the element handle for resize observer hook.
+     */
+    (0, react_1.useEffect)(() => {
+        setEllipsisMode(EllipsisMode.NONE);
+    }, []);
+    /**
+     * Ellipsis mode state updates with changes to the rendered content height.
+     */
+    (0, react_1.useEffect)(() => {
+        setEllipsisMode((currentMode) => {
+            return getEllipsisMode(ellipsisRef.current, maxLineCount, currentMode);
+        });
+    }, [height, maxLineCount]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ellipsisContent_styles_1.Content, { ref: ellipsisRef, isEllipsis: isEllipsis, maxLineCount: maxLineCount },
+            react_1.default.createElement("div", null, children)),
+        isModeActivated(ellipsisMode) && (react_1.default.createElement(ellipsisContent_styles_1.Button, { onClick: onToggleMode }, getModeText(ellipsisMode)))));
+};
+exports.EllipsisContent = EllipsisContent;
+/**
+ * Returns the calculated line count of text rendered within the given element.
+ * @param element - Element observed by resize observer (ellipsis container).
+ * @returns line count of text rendered.
+ */
+function calculateRenderedLineCount(element) {
+    if (!element) {
+        return;
+    }
+    // Grab the DOMRects for the text nodes within the element.
+    const DOMRects = getTextNodeDOMRects(element).sort(sortDOMRects);
+    if (DOMRects.length === 0) {
+        return;
+    }
+    // Set the first bounding rect as the initial y1 and y2 values.
+    let lineCount = 1;
+    let y1 = DOMRects[0].top;
+    let y2 = DOMRects[0].bottom;
+    // Keeping a track of the upper and lower positional threshold of each line, we are going to test each bounding rect
+    // to see if it falls within the threshold of the current line. If it does, we skip it. If it doesn't, we increment
+    // the line count and update the threshold values.
+    for (const rect of DOMRects) {
+        const { bottom, top } = rect;
+        if (top >= y1 && bottom <= y2) {
+            continue;
+        }
+        y1 = top;
+        y2 = bottom;
+        lineCount++;
+    }
+    return lineCount;
+}
+/**
+ * Returns one of the following ellipsis mode for the content:
+ * - "ON" - paragraph is ellipsis view with the option to toggle view, or
+ * - "OFF" - paragraph is in full view with the option to toggle view, or
+ * - "NONE" - paragraph is in full view with no option to toggle view as it does not require ellipsis.
+ * @param element - Element observed by resize observer (ellipsis container).
+ * @param maxLineCount - Maximum lines to display.
+ * @param currentMode - Current ellipsis mode.
+ * @returns ellipsis mode.
+ */
+function getEllipsisMode(element, maxLineCount, currentMode = EllipsisMode.NONE) {
+    // Calculate line count.
+    const lineCount = calculateRenderedLineCount(element);
+    if (!lineCount) {
+        return currentMode;
+    }
+    if (lineCount <= maxLineCount) {
+        // Element does not have hidden content and line count is within allowable limit.
+        // Mode is "NONE" - ellipsis mode not required.
+        return EllipsisMode.NONE;
+    }
+    if (currentMode === EllipsisMode.NONE) {
+        // Line count exceeds allowable limit, and ellipsis mode is "NONE".
+        // Change mode to "ON" - ellipsis mode required.
+        return EllipsisMode.ON;
+    }
+    return currentMode;
+}
+/**
+ * Returns applicable button text for display corresponding with current mode.
+ * When the current mode is "ON" the return value will be "Show More", otherwise the return value is "Show Less".
+ * @param currentMode - current ellipsis mode.
+ * @returns string for display as button text.
+ */
+function getModeText(currentMode) {
+    if (currentMode === EllipsisMode.ON) {
+        return "Read More";
+    }
+    return "Read Less";
+}
+/**
+ * Returns a list of DOMRects for text nodes within the given node.
+ * @param node - Node.
+ * @param DOMRects - List of DOMRects.
+ * @returns a list of text node DOMRects.
+ */
+function getTextNodeDOMRects(node, DOMRects = []) {
+    if (node.hasChildNodes()) {
+        for (const child of node.childNodes) {
+            // Traverse the DOM tree to find text nodes.
+            getTextNodeDOMRects(child, DOMRects);
+        }
+    }
+    else {
+        // Create a range object for the text node.
+        const range = document.createRange();
+        range.selectNodeContents(node);
+        // Grab the DOMRectList for the range; this is a list of the bounding rectangles for the content.
+        const DOMRectList = range.getClientRects();
+        for (const rect of [...DOMRectList]) {
+            if (rect.height && rect.width) {
+                DOMRects.push(rect);
+            }
+        }
+    }
+    return DOMRects;
+}
+/**
+ * Ellipsis mode is "activated" when content is long enough to be truncated.
+ * i.e. the current mode will not equal "NONE".
+ * @param currentMode - current ellipsis mode.
+ * @returns true when mode is not "NONE".
+ */
+function isModeActivated(currentMode) {
+    return !!currentMode && currentMode !== EllipsisMode.NONE;
+}
+/**
+ * Sorts the given DOMRects by their y value.
+ * @param DOMRect0 - First DOMRect to compare.
+ * @param DOMRect1 - Second DOMRect to compare.
+ * @returns number indicating the relative order of the given DOMRects.
+ */
+function sortDOMRects(DOMRect0, DOMRect1) {
+    return DOMRect0.y - DOMRect1.y;
+}

package/lib/components/common/EllipsisContent/ellipsisContent.styles.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+interface Props {
+    isEllipsis: boolean;
+    maxLineCount: number;
+}
+export declare const Content: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Button: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export {};

package/lib/components/common/EllipsisContent/ellipsisContent.styles.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = exports.Content = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const buttonTextPrimary_1 = require("../Button/components/ButtonTextPrimary/buttonTextPrimary");
+exports.Content = (0, styled_1.default)("div") `
+  ${({ isEllipsis, maxLineCount }) => isEllipsis &&
+    (0, react_1.css) `
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      -webkit-line-clamp: ${maxLineCount};
+      overflow: hidden;
+    `}
+`;
+exports.Button = (0, styled_1.default)(buttonTextPrimary_1.ButtonTextPrimary) `
+  align-self: flex-start;
+  margin-top: 8px;
+`;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { OutlinedInputProps as MOutlinedInputProps } from "@mui/material";
+/**
+ * Basic form input component.
+ */
+export interface InputProps extends MOutlinedInputProps {
+    className?: string;
+    isFilled: boolean;
+    label?: string;
+}
+export declare const Input: ({ className, isFilled, label, ...props }: InputProps) => JSX.Element;

package/lib/components/common/Form/components/Input/input.js

@@ -0,0 +1,28 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const typography_1 = require("../../../../../theme/common/typography");
+const input_styles_1 = require("./input.styles");
+const Input = (_a) => {
+    var { className, isFilled, label } = _a, props = __rest(_a, ["className", "isFilled", "label"]) /* Spread props to allow for Mui OutlinedInputProps specific prop overrides e.g. "disabled". */;
+    return (react_1.default.createElement(input_styles_1.InputFormControl, { className: className, isFilled: isFilled },
+        label && react_1.default.createElement(material_1.Typography, { variant: typography_1.TEXT_BODY_400 }, label),
+        react_1.default.createElement(material_1.OutlinedInput, Object.assign({ fullWidth: true, inputProps: { autoComplete: "off", spellCheck: false }, size: "small" }, props))));
+};
+exports.Input = Input;

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+interface Props {
+    isFilled?: boolean;
+}
+export declare const InputFormControl: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
+    color?: "primary" | "secondary" | "error" | "info" | "success" | "warning" | undefined;
+    disabled?: boolean | undefined;
+    error?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    focused?: boolean | undefined;
+    hiddenLabel?: boolean | undefined;
+    margin?: "normal" | "none" | "dense" | undefined;
+    required?: boolean | undefined;
+    size?: "medium" | "small" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "filled" | "outlined" | "standard" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "margin" | "sx" | "variant" | "disabled" | "required" | "size" | "error" | "fullWidth" | "focused" | "hiddenLabel"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Props, {}, {}>;
+export {};

package/lib/components/common/Form/components/Input/input.styles.js

@@ -0,0 +1,69 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputFormControl = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const material_1 = require("@mui/material");
+const colors_1 = require("../../../../../styles/common/mixins/colors");
+exports.InputFormControl = (0, styled_1.default)(material_1.FormControl, {
+    shouldForwardProp: (prop) => prop !== "isFilled",
+}) `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  .MuiOutlinedInput-root {
+    .MuiOutlinedInput-input {
+      padding: 10px 12px 10px 0;
+    }
+
+    &.MuiInputBase-multiline {
+      padding: 0 0 0 10px;
+    }
+
+    input::placeholder,
+    textarea::placeholder {
+      color: ${colors_1.inkLight};
+      opacity: 0.8;
+    }
+
+    &.Mui-focused {
+      input::placeholder,
+      textarea::placeholder {
+        opacity: 0;
+      }
+    }
+
+    // Input filled.
+    ${(_a) => {
+    var { isFilled } = _a, props = __rest(_a, ["isFilled"]);
+    return isFilled &&
+        (0, react_1.css) `
+        & .MuiOutlinedInput-input,
+        .MuiSvgIcon-root {
+          color: ${(0, colors_1.inkMain)(props)};
+        }
+      `;
+}};
+  }
+
+  .MuiFormHelperText-root {
+    align-items: flex-start;
+    display: flex;
+    gap: 4px;
+  }
+`;

package/lib/components/common/Form/components/Select/components/DropDownIcon/dropDownIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const DropDownIcon: ({ ...props }: {
+    [x: string]: any;
+}) => JSX.Element;

package/lib/components/common/Form/components/Select/components/DropDownIcon/dropDownIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropDownIcon = void 0;
+const ArrowDropDownRounded_1 = __importDefault(require("@mui/icons-material/ArrowDropDownRounded"));
+const react_1 = __importDefault(require("react"));
+const DropDownIcon = (_a) => {
+    var props = __rest(_a, []) /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */;
+    return (react_1.default.createElement(ArrowDropDownRounded_1.default, Object.assign({ color: "inkMain", fontSize: "small" }, props)));
+};
+exports.DropDownIcon = DropDownIcon;

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

@@ -0,0 +1,12 @@
+import { SelectProps as MSelectProps } from "@mui/material";
+import { ReactNode } from "react";
+/**
+ * Basic form select component.
+ */
+export interface SelectProps extends MSelectProps {
+    children: ReactNode;
+    className?: string;
+    isFilled: boolean;
+    label?: string;
+}
+export declare const Select: ({ children, className, isFilled, label, onBlur, ...props }: SelectProps) => JSX.Element;

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

@@ -0,0 +1,28 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const typography_1 = require("../../../../../theme/common/typography");
+const select_styles_1 = require("./select.styles");
+const Select = (_a) => {
+    var { children, className, isFilled, label, onBlur } = _a, props = __rest(_a, ["children", "className", "isFilled", "label", "onBlur"]) /* Spread props to allow for Mui SelectProps specific prop overrides e.g. "disabled". */;
+    return (react_1.default.createElement(select_styles_1.InputFormControl, { className: className, isFilled: isFilled },
+        label && react_1.default.createElement(material_1.Typography, { variant: typography_1.TEXT_BODY_400 }, label),
+        react_1.default.createElement(material_1.Select, Object.assign({ fullWidth: true, inputProps: { onBlur }, size: "small" }, props), children)));
+};
+exports.Select = Select;

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+interface Props {
+    isFilled: boolean;
+}
+export declare const InputFormControl: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
+    color?: "primary" | "secondary" | "error" | "info" | "success" | "warning" | undefined;
+    disabled?: boolean | undefined;
+    error?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    focused?: boolean | undefined;
+    hiddenLabel?: boolean | undefined;
+    margin?: "normal" | "none" | "dense" | undefined;
+    required?: boolean | undefined;
+    size?: "medium" | "small" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "filled" | "outlined" | "standard" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "margin" | "sx" | "variant" | "disabled" | "required" | "size" | "error" | "fullWidth" | "focused" | "hiddenLabel"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Props, {}, {}>;
+export {};

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

@@ -0,0 +1,40 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputFormControl = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const material_1 = require("@mui/material");
+const colors_1 = require("../../../../../styles/common/mixins/colors");
+exports.InputFormControl = (0, styled_1.default)(material_1.FormControl, {
+    shouldForwardProp: (prop) => prop !== "isFilled",
+}) `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  // Input filled.
+  ${(_a) => {
+    var { isFilled } = _a, props = __rest(_a, ["isFilled"]);
+    return isFilled &&
+        (0, react_1.css) `
+      & .MuiOutlinedInput-input,
+      .MuiSvgIcon-root {
+        color: ${(0, colors_1.inkMain)(props)};
+      }
+    `;
+}};
+`;

package/lib/components/common/Form/components/UploadFile/uploadFile.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { DropzoneState } from "react-dropzone";
+import { FormState } from "../../../../Support/components/SupportRequest/components/SupportRequestForm/common/entities";
+export interface UploadFileProps {
+    attachmentName: FormState["attachmentName"];
+    attachmentRejected: FormState["attachmentRejected"];
+    attachmentRejections: FormState["attachmentRejections"];
+    attachmentToken: FormState["attachmentToken"];
+    attachmentUploading: FormState["attachmentUploading"];
+    className?: string;
+    isDragActive: boolean;
+    label: string;
+    onAttachmentDeleted: () => void;
+    open: DropzoneState["open"];
+}
+export declare const UploadFile: ({ attachmentName, attachmentRejected, attachmentRejections, attachmentToken, attachmentUploading, className, isDragActive, label, onAttachmentDeleted, open, }: UploadFileProps) => JSX.Element;

package/lib/components/common/Form/components/UploadFile/uploadFile.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadFile = void 0;
+const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const typography_1 = require("../../../../../theme/common/typography");
+const loading_1 = require("../../../../Loading/loading");
+const errorIcon_1 = require("../../../CustomIcon/components/ErrorIcon/errorIcon");
+const input_styles_1 = require("../Input/input.styles");
+const uploadFile_styles_1 = require("./uploadFile.styles");
+const UploadFile = ({ attachmentName, attachmentRejected, attachmentRejections, attachmentToken, attachmentUploading, className, isDragActive, label, onAttachmentDeleted, open, }) => {
+    const error = attachmentRejected;
+    const isAttached = Boolean(attachmentToken);
+    return (react_1.default.createElement(input_styles_1.InputFormControl, { className: className, error: error },
+        label && react_1.default.createElement(material_1.Typography, { variant: typography_1.TEXT_BODY_400 }, label),
+        react_1.default.createElement(uploadFile_styles_1.Button, { isAttached: isAttached, isDragActive: isDragActive, isError: error, onClick: attachmentToken ? onAttachmentDeleted : open },
+            react_1.default.createElement(loading_1.Loading, { iconSize: "small", loading: attachmentUploading, panelStyle: loading_1.LOADING_PANEL_STYLE.INHERIT }),
+            react_1.default.createElement(material_1.Typography, { variant: typography_1.TEXT_BODY_400 }, isAttached ? (attachmentName) : (react_1.default.createElement(react_1.default.Fragment, null,
+                "Drag or ",
+                react_1.default.createElement(uploadFile_styles_1.Underline, null, "Click"),
+                " to attach file"))),
+            isAttached && react_1.default.createElement(CloseRounded_1.default, { fontSize: "small" })),
+        error && (react_1.default.createElement(material_1.FormHelperText, null,
+            react_1.default.createElement(errorIcon_1.ErrorIcon, { fontSize: "xxsmall" }),
+            getErrorMessage(attachmentRejections)))));
+};
+exports.UploadFile = UploadFile;
+/**
+ * Returns the error message for the attachment.
+ * @param attachmentRejections - Attachment rejections.
+ * @returns error message.
+ */
+function getErrorMessage(attachmentRejections) {
+    const fileSizeError = attachmentRejections.find((rejection) => rejection.code === "file-too-large");
+    return fileSizeError
+        ? "File must be less than 20 MB."
+        : "Unable to upload file.";
+}