@databiosphere/findable-ui 46.1.3 → 48.1.0

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MenuItem, Typography } from "@mui/material";
-import React, { useState, } from "react";
+import { useEffect, useState, } from "react";
 import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { ButtonPrimary } from "../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 import { Input } from "../../../../../common/Form/components/Input/input";
@@ -16,7 +17,7 @@ export const SupportRequestForm = ({ setFormSubmitted, supportRequest, }) => {
     const [formState, setFormState] = useState(DEFAULT_FORM_STATE);
     const [errorFields, setErrorFields] = useState();
     // Validate form state when it changes.
-    React.useEffect(() => {
+    useEffect(() => {
         VALIDATION_SCHEMA.validate(buildSupportRequest(formState), {
             abortEarly: false,
         })
@@ -129,21 +130,7 @@ export const SupportRequestForm = ({ setFormSubmitted, supportRequest, }) => {
             console.log(error);
         }
     };
-    return (React.createElement(Dropzone, { activeStyle: DRAGGING_STYLE, disabled: Boolean(formState[FORM_CONTROL_NAME.ATTACHMENT_TOKEN]), maxSize: MAX_ATTACHMENT_SIZE, multiple: false, onDropAccepted: onAttachmentDropped, onDropRejected: onAttachmentRejected }, ({ isDragActive, open }) => (React.createElement(GridPaper, null,
-        React.createElement(Section, null,
-            React.createElement(SectionContent, null,
-                React.createElement(Typography, { component: "h3", variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL }, "Contact Us"),
-                React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, "We\u2019re here to help and answer any questions you might have. We look forward to hearing from you!"))),
-        React.createElement(Section, null,
-            React.createElement(Input, { error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.NAME), isFilled: Boolean(formState[FORM_CONTROL_NAME.NAME]), label: FORM_CONTROL_LABEL.NAME, name: FORM_CONTROL_NAME.NAME, onBlur: onBlur, onChange: onInputChange }),
-            React.createElement(Input, { error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.EMAIL), isFilled: Boolean(formState[FORM_CONTROL_NAME.EMAIL]), label: FORM_CONTROL_LABEL.EMAIL, name: FORM_CONTROL_NAME.EMAIL, onBlur: onBlur, onChange: onInputChange }),
-            React.createElement(Select, { displayEmpty: true, error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.TYPE), isFilled: Boolean(formState[FORM_CONTROL_NAME.TYPE]), label: FORM_CONTROL_LABEL.TYPE, name: FORM_CONTROL_NAME.TYPE, onBlur: onBlur, onChange: onSelectChange, renderValue: renderSelectValue, value: formState[FORM_CONTROL_NAME.TYPE], variant: "outlined" }, OPTIONS.map(({ label, value }) => (React.createElement(MenuItem, { key: value, value: value }, label)))),
-            React.createElement(Input, { error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.SUBJECT), isFilled: Boolean(formState[FORM_CONTROL_NAME.SUBJECT]), label: FORM_CONTROL_LABEL.SUBJECT, name: FORM_CONTROL_NAME.SUBJECT, onBlur: onBlur, onChange: onInputChange }),
-            React.createElement(Input, { error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.DESCRIPTION), isFilled: Boolean(formState[FORM_CONTROL_NAME.DESCRIPTION]), label: FORM_CONTROL_LABEL.DESCRIPTION, multiline: true, name: FORM_CONTROL_NAME.DESCRIPTION, onBlur: onBlur, onChange: onInputChange, placeholder: "Enter a decription", rows: 2 }),
-            React.createElement(UploadFile, { isDragActive: isDragActive, label: FORM_CONTROL_LABEL.ATTACHMENT_TOKEN, onAttachmentDeleted: onAttachmentDeleted, open: open, ...formState })),
-        React.createElement(Section, null,
-            React.createElement(SectionActions, null,
-                React.createElement(ButtonPrimary, { disabled: Boolean(errorFields) || formState.submitting, fullWidth: true, onClick: onSupportRequestSubmitted, id: "button-support-request" }, "Send")))))));
+    return (_jsx(Dropzone, { activeStyle: DRAGGING_STYLE, disabled: Boolean(formState[FORM_CONTROL_NAME.ATTACHMENT_TOKEN]), maxSize: MAX_ATTACHMENT_SIZE, multiple: false, onDropAccepted: onAttachmentDropped, onDropRejected: onAttachmentRejected, children: ({ isDragActive, open }) => (_jsxs(GridPaper, { children: [_jsx(Section, { children: _jsxs(SectionContent, { children: [_jsx(Typography, { component: "h3", variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL, children: "Contact Us" }), _jsx(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400, children: "We\u2019re here to help and answer any questions you might have. We look forward to hearing from you!" })] }) }), _jsxs(Section, { children: [_jsx(Input, { error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.NAME), isFilled: Boolean(formState[FORM_CONTROL_NAME.NAME]), label: FORM_CONTROL_LABEL.NAME, name: FORM_CONTROL_NAME.NAME, onBlur: onBlur, onChange: onInputChange }), _jsx(Input, { error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.EMAIL), isFilled: Boolean(formState[FORM_CONTROL_NAME.EMAIL]), label: FORM_CONTROL_LABEL.EMAIL, name: FORM_CONTROL_NAME.EMAIL, onBlur: onBlur, onChange: onInputChange }), _jsx(Select, { displayEmpty: true, error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.TYPE), isFilled: Boolean(formState[FORM_CONTROL_NAME.TYPE]), label: FORM_CONTROL_LABEL.TYPE, name: FORM_CONTROL_NAME.TYPE, onBlur: onBlur, onChange: onSelectChange, renderValue: renderSelectValue, value: formState[FORM_CONTROL_NAME.TYPE], variant: "outlined", children: OPTIONS.map(({ label, value }) => (_jsx(MenuItem, { value: value, children: label }, value))) }), _jsx(Input, { error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.SUBJECT), isFilled: Boolean(formState[FORM_CONTROL_NAME.SUBJECT]), label: FORM_CONTROL_LABEL.SUBJECT, name: FORM_CONTROL_NAME.SUBJECT, onBlur: onBlur, onChange: onInputChange }), _jsx(Input, { error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.DESCRIPTION), isFilled: Boolean(formState[FORM_CONTROL_NAME.DESCRIPTION]), label: FORM_CONTROL_LABEL.DESCRIPTION, multiline: true, name: FORM_CONTROL_NAME.DESCRIPTION, onBlur: onBlur, onChange: onInputChange, placeholder: "Enter a decription", rows: 2 }), _jsx(UploadFile, { isDragActive: isDragActive, label: FORM_CONTROL_LABEL.ATTACHMENT_TOKEN, onAttachmentDeleted: onAttachmentDeleted, open: open, ...formState })] }), _jsx(Section, { children: _jsx(SectionActions, { children: _jsx(ButtonPrimary, { disabled: Boolean(errorFields) || formState.submitting, fullWidth: true, onClick: onSupportRequestSubmitted, id: "button-support-request", children: "Send" }) }) })] })) }));
 };
 /**
  * Build support request model from form values.

package/lib/components/Support/components/SupportRequest/components/SupportRequestSubmitted/supportRequestSubmitted.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 export interface SupportRequestSubmittedProps {
     description?: ReactNode;
     title?: ReactNode;

package/lib/components/Support/components/SupportRequest/components/SupportRequestSubmitted/supportRequestSubmitted.js

@@ -1,13 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from "@mui/material";
-import React from "react";
 import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { EmailReadIcon } from "../../../../../common/CustomIcon/components/EmailReadIcon/emailReadIcon";
 import { ICON_BADGE_COLOR, IconBadge, } from "../../../../../common/IconBadge/iconBadge";
 import { Section, SectionContent, } from "../../../../../common/Section/section.styles";
 export const SupportRequestSubmitted = ({ description = "Your request has been submitted.", title = "Thank You!", }) => {
-    return (React.createElement(Section, null,
-        React.createElement(SectionContent, null,
-            React.createElement(IconBadge, { color: ICON_BADGE_COLOR.SUCCESS, Icon: EmailReadIcon }),
-            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL }, title),
-            React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, description))));
+    return (_jsx(Section, { children: _jsxs(SectionContent, { children: [_jsx(IconBadge, { color: ICON_BADGE_COLOR.SUCCESS, Icon: EmailReadIcon }), _jsx(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL, children: title }), _jsx(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400, children: description })] }) }));
 };

package/lib/components/Support/components/SupportRequest/supportRequest.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { REQUEST_FIELD_ID } from "./components/SupportRequestForm/common/entities";
 export interface SupportRequest {
     FIELD_ID: Record<REQUEST_FIELD_ID, number>;

package/lib/components/Support/components/SupportRequest/supportRequest.js

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
 import { FormDialog } from "./components/Dialog/dialog";
 import { SupportRequestForm } from "./components/SupportRequestForm/supportRequestForm";
 import { SupportRequestSubmitted } from "./components/SupportRequestSubmitted/supportRequestSubmitted";
 export const SupportRequest = ({ supportRequest, }) => {
     const [formSubmitted, setFormSubmitted] = useState(false);
-    return (React.createElement(FormDialog, { setFormSubmitted: setFormSubmitted }, formSubmitted ? (React.createElement(SupportRequestSubmitted, null)) : (React.createElement(SupportRequestForm, { setFormSubmitted: setFormSubmitted, supportRequest: supportRequest }))));
+    return (_jsx(FormDialog, { setFormSubmitted: setFormSubmitted, children: formSubmitted ? (_jsx(SupportRequestSubmitted, {})) : (_jsx(SupportRequestForm, { setFormSubmitted: setFormSubmitted, supportRequest: supportRequest })) }));
 };

package/lib/components/Support/components/ViewSupport/viewSupport.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { ViewSupportProps } from "./types";
 /**
  * View support button component.

package/lib/components/Support/components/ViewSupport/viewSupport.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ContactSupportIcon } from "../../../common/CustomIcon/components/ContactSupportIcon/contactSupportIcon";
 import { ANCHOR_TARGET, REL_ATTRIBUTE } from "../../../Links/common/entities";
 import { Fab } from "./viewSupport.styles";
@@ -7,6 +7,5 @@ import { Fab } from "./viewSupport.styles";
  * Navigates to support URL provided.
  */
 export const ViewSupport = ({ className, Icon = ContactSupportIcon, rel = REL_ATTRIBUTE.NO_OPENER_NO_REFERRER, target = ANCHOR_TARGET.BLANK, url, ...props /* AnchorHTMLAttributes<HTMLAnchorElement> */ }) => {
-    return (React.createElement(Fab, { className: className, href: url, rel: rel, target: target, ...props },
-        React.createElement(Icon, { fontSize: "inherit" })));
+    return (_jsx(Fab, { className: className, href: url, rel: rel, target: target, ...props, children: _jsx(Icon, { fontSize: "inherit" }) }));
 };

package/lib/components/Table/common/gridTable.styles.d.ts

@@ -1,8 +1,6 @@
 export interface GridTableProps {
     gridTemplateColumns: string;
 }
-export declare const GridTable: import("@emotion/styled").StyledComponent<import("@mui/material").TableOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
-    ref?: ((instance: HTMLTableElement | 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<HTMLTableElement> | null | undefined;
-}, "style" | "size" | "className" | "classes" | "children" | "sx" | "padding" | "stickyHeader"> & {
+export declare const GridTable: import("@emotion/styled").StyledComponent<import("@mui/material").TableOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "size" | "style" | "className" | "classes" | "children" | "sx" | "padding" | "stickyHeader"> & {
     theme?: import("@emotion/react").Theme;
 } & GridTableProps, {}, {}>;

package/lib/components/Table/components/PaginationSummary/paginationSummary.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 export interface PaginationSummaryProps {
     firstResult: number;
     lastResult: number;

package/lib/components/Table/components/PaginationSummary/paginationSummary.js

@@ -1,18 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fade, Typography } from "@mui/material";
-import React from "react";
 import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { TEST_IDS } from "../../../../tests/testIds";
 export const PaginationSummary = ({ firstResult, lastResult, totalResult, }) => {
-    return (React.createElement(Fade, { in: totalResult > 0, unmountOnExit: true },
-        React.createElement("div", { "data-testid": TEST_IDS.TABLE_PAGINATION_RESULTS },
-            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, "Results"),
-            " ",
-            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500 },
-                firstResult,
-                " - ",
-                lastResult),
-            " ",
-            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, "of"),
-            " ",
-            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500 }, totalResult))));
+    return (_jsx(Fade, { in: totalResult > 0, unmountOnExit: true, children: _jsxs("div", { "data-testid": TEST_IDS.TABLE_PAGINATION_RESULTS, children: [_jsx(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400, children: "Results" }), " ", _jsxs(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500, children: [firstResult, " - ", lastResult] }), " ", _jsx(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400, children: "of" }), " ", _jsx(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500, children: totalResult })] }) }));
 };

package/lib/components/Table/components/TableBody/tableBody.d.ts

@@ -1,5 +1,6 @@
 import { Row, RowData, Table } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
+import { JSX } from "react";
 import { ROW_DIRECTION } from "../../common/entities";
 export interface TableBodyProps<T extends RowData> {
     rowDirection: ROW_DIRECTION;

package/lib/components/Table/components/TableBody/tableBody.js

@@ -1,12 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TableBody as MTableBody } from "@mui/material";
-import React from "react";
 import { ROW_DIRECTION } from "../../common/entities";
 import { CollapsableRows } from "../TableRows/components/CollapsableRows/collapsableRows";
 import { VirtualizedRow } from "../TableRows/components/VirtualizedRow/virtualizedRow";
 import { TableRows } from "../TableRows/tableRows";
 export const TableBody = ({ rowDirection, rows, tableInstance, virtualizer, }) => {
-    return (React.createElement(MTableBody, null,
-        React.createElement(VirtualizedRow, { isUpperRow: true, virtualizer: virtualizer }),
-        rowDirection === ROW_DIRECTION.DEFAULT ? (React.createElement(TableRows, { rows: rows, virtualizer: virtualizer })) : (React.createElement(CollapsableRows, { rows: rows, tableInstance: tableInstance, virtualizer: virtualizer })),
-        React.createElement(VirtualizedRow, { isUpperRow: false, virtualizer: virtualizer })));
+    return (_jsxs(MTableBody, { children: [_jsx(VirtualizedRow, { isUpperRow: true, virtualizer: virtualizer }), rowDirection === ROW_DIRECTION.DEFAULT ? (_jsx(TableRows, { rows: rows, virtualizer: virtualizer })) : (_jsx(CollapsableRows, { rows: rows, tableInstance: tableInstance, virtualizer: virtualizer })), _jsx(VirtualizedRow, { isUpperRow: false, virtualizer: virtualizer })] }));
 };

package/lib/components/Table/components/TableCell/components/BasicCell/basicCell.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 import { TypographyProps } from "../../../../../common/Typography/common/entities";
 export interface BasicCellProps {
     TypographyProps?: TypographyProps;

package/lib/components/Table/components/TableCell/components/BasicCell/basicCell.js

@@ -1,13 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from "@mui/material";
-import React, { Fragment } from "react";
+import { Fragment } from "react";
 import { LABEL } from "../../../../../../apis/azul/common/entities";
 import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 export const BasicCell = ({ TypographyProps, value = LABEL.UNSPECIFIED, }) => {
     if (isValueNumberOrString(value)) {
-        return (React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...TypographyProps }, value));
+        return (_jsx(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...TypographyProps, children: value }));
     }
     if (isValueArray(value)) {
-        return (React.createElement(Fragment, null, value.map((v) => (React.createElement(Typography, { key: v, variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...TypographyProps }, v)))));
+        return (_jsx(Fragment, { children: value.map((v) => (_jsx(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...TypographyProps, children: v }, v))) }));
     }
     return null;
 };

package/lib/components/Table/components/TableCell/components/ChipCell/chipCell.d.ts

@@ -1,4 +1,5 @@
 import { ChipProps } from "@mui/material";
 import { CellContext, RowData } from "@tanstack/react-table";
+import { JSX } from "react";
 import { BaseComponentProps } from "../../../../../types";
 export declare const ChipCell: <T extends RowData, TValue extends ChipProps = ChipProps>({ className, getValue, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;

package/lib/components/Table/components/TableCell/components/ChipCell/chipCell.js

@@ -1,8 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Chip } from "@mui/material";
-import React from "react";
 export const ChipCell = ({ className, getValue, }) => {
     const props = getValue();
     if (!props)
         return null;
-    return React.createElement(Chip, { className: className, ...props });
+    return _jsx(Chip, { className: className, ...props });
 };

package/lib/components/Table/components/TableCell/components/CodeCell/codeCell.d.ts

@@ -1,4 +1,4 @@
 import { CellContext, RowData } from "@tanstack/react-table";
-import { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 import { BaseComponentProps } from "../../../../../types";
 export declare const CodeCell: <T extends RowData, TValue extends ReactNode = ReactNode>({ className, getValue, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;

package/lib/components/Table/components/TableCell/components/CodeCell/codeCell.js

@@ -1,9 +1,9 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { CHIP_PROPS } from "../../../../../../styles/common/mui/chip";
 import { StyledChip } from "./codeCell.styles";
 export const CodeCell = ({ className, getValue, }) => {
     const value = getValue();
     if (!value)
         return null;
-    return (React.createElement(StyledChip, { className: className, color: CHIP_PROPS.COLOR.DEFAULT, label: value, size: CHIP_PROPS.SIZE.SMALL }));
+    return (_jsx(StyledChip, { className: className, color: CHIP_PROPS.COLOR.DEFAULT, label: value, size: CHIP_PROPS.SIZE.SMALL }));
 };

package/lib/components/Table/components/TableCell/components/CodeCell/codeCell.styles.d.ts

@@ -1,5 +1,3 @@
-export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material").ChipSlotsAndSlotProps & 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;
-}, "label" | "style" | "size" | "className" | "classes" | "children" | "disabled" | "sx" | "tabIndex" | "color" | "variant" | "slots" | "slotProps" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & {
+export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material").ChipSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size" | "label" | "style" | "className" | "classes" | "children" | "disabled" | "sx" | "tabIndex" | "color" | "variant" | "slots" | "slotProps" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.d.ts

@@ -1,4 +1,5 @@
 import { Row, RowData } from "@tanstack/react-table";
+import { JSX } from "react";
 export interface CollapsableCellProps<T extends RowData> {
     isDisabled?: boolean;
     row: Row<T>;

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.js

@@ -1,28 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Collapse, IconButton, Typography } from "@mui/material";
 import { flexRender } from "@tanstack/react-table";
-import React from "react";
 import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { UnfoldMoreIcon } from "../../../../../common/CustomIcon/components/UnfoldMoreIcon/unfoldMoreIcon";
 import { getPinnedCellIndex } from "../../../../common/utils";
 import { CollapsedContents, Content, PinnedCell, TableCell, } from "./collapsableCell.styles";
 export const CollapsableCell = ({ isDisabled = false, row, }) => {
     const [pinnedCell, pinnedIndex] = getPinnedCellIndex(row);
-    return (React.createElement(TableCell, { isExpanded: row.getIsExpanded() },
-        React.createElement(PinnedCell, null,
-            flexRender(pinnedCell.column.columnDef.cell, pinnedCell.getContext()),
-            React.createElement(IconButton, { color: "ink", disabled: isDisabled, edge: "end", onClick: () => row.toggleExpanded(), size: "large" },
-                React.createElement(UnfoldMoreIcon, { fontSize: "small" }))),
-        React.createElement(Collapse, { in: row.getIsExpanded() },
-            React.createElement(CollapsedContents, null, getRowVisibleCells(row).map((cell, i) => {
-                if (cell.getIsAggregated())
-                    return null; // Display of aggregated cells is currently not supported.
-                if (cell.getIsPlaceholder())
-                    return null; // Display of placeholder cells is currently not supported.
-                const header = cell.column.columnDef.meta?.header;
-                return (i !== pinnedIndex && (React.createElement(Content, { key: cell.id },
-                    header && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES }, header)),
-                    flexRender(cell.column.columnDef.cell, cell.getContext()))));
-            })))));
+    return (_jsxs(TableCell, { isExpanded: row.getIsExpanded(), children: [_jsxs(PinnedCell, { children: [flexRender(pinnedCell.column.columnDef.cell, pinnedCell.getContext()), _jsx(IconButton, { color: "ink", disabled: isDisabled, edge: "end", onClick: () => row.toggleExpanded(), size: "large", children: _jsx(UnfoldMoreIcon, { fontSize: "small" }) })] }), _jsx(Collapse, { in: row.getIsExpanded(), children: _jsx(CollapsedContents, { children: getRowVisibleCells(row).map((cell, i) => {
+                        if (cell.getIsAggregated())
+                            return null; // Display of aggregated cells is currently not supported.
+                        if (cell.getIsPlaceholder())
+                            return null; // Display of placeholder cells is currently not supported.
+                        const header = cell.column.columnDef.meta?.header;
+                        return (i !== pinnedIndex && (_jsxs(Content, { children: [header && (_jsx(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES, children: header })), flexRender(cell.column.columnDef.cell, cell.getContext())] }, cell.id)));
+                    }) }) })] }));
 };
 /**
  * Returns row or sub row visible cells.

package/lib/components/Table/components/TableCell/components/LinkCell/linkCell.d.ts

@@ -1,4 +1,5 @@
 import { LinkProps } from "@mui/material";
 import { CellContext, RowData } from "@tanstack/react-table";
 import { BaseComponentProps } from "components/types";
+import { JSX } from "react";
 export declare const LinkCell: <T extends RowData, TValue extends LinkProps = LinkProps>({ className, getValue, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;

package/lib/components/Table/components/TableCell/components/LinkCell/linkCell.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Link as MLink, Typography } from "@mui/material";
-import React from "react";
 import { isValidUrl } from "../../../../../../common/utils";
 import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { isClientSideNavigation } from "../../../../../Links/common/utils";
@@ -15,12 +15,12 @@ export const LinkCell = ({ className, getValue, }) => {
     const isValid = isClientSide || isValidUrl(href);
     // If the href is invalid, return a Typography component.
     if (!isValid)
-        return (React.createElement(Typography, { className: className, color: TYPOGRAPHY_PROPS.COLOR.INHERIT, component: "span", variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...linkProps }, children));
+        return (_jsx(Typography, { className: className, color: TYPOGRAPHY_PROPS.COLOR.INHERIT, component: "span", variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...linkProps, children: children }));
     // If the href is valid, return a Link component.
-    return (React.createElement(MLink, { className: className, color: color, component: getComponent(href, isClientSide), href: href, 
+    return (_jsx(MLink, { className: className, color: color, component: getComponent(href, isClientSide), href: href, 
         /*
          * Prevents click events from bubbling up to parent components
          * (such as CardActionArea or Accordion) when the link is activated.
          */
-        onClick: (e) => e.stopPropagation(), rel: getRelAttribute(rel, isClientSide), target: getTargetAttribute(target, isClientSide), underline: underline, ...linkProps }, children));
+        onClick: (e) => e.stopPropagation(), rel: getRelAttribute(rel, isClientSide), target: getTargetAttribute(target, isClientSide), underline: underline, ...linkProps, children: children }));
 };

package/lib/components/Table/components/TableCell/components/LinkCell/stories/linkCell.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 import { LinkCell } from "../linkCell";
 declare const meta: Meta<typeof LinkCell>;
 export default meta;

package/lib/components/Table/components/TableCell/components/MarkdownCell/markdownCell.d.ts

@@ -1,3 +1,4 @@
 import { CellContext, RowData } from "@tanstack/react-table";
+import { JSX } from "react";
 import { BaseComponentProps } from "../../../../../types";
 export declare const MarkdownCell: <T extends RowData, TValue extends string = string>({ className, column, getValue, row, table, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;

package/lib/components/Table/components/TableCell/components/MarkdownCell/markdownCell.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { COMPONENTS } from "../../../../../MarkdownRenderer/constants";
 import { getTokens, getTokensRegex, isRankedCell } from "../RankedCell/utils";
 import { StyledMarkdownRenderer } from "./markdownCell.styles";
@@ -14,5 +14,5 @@ export const MarkdownCell = ({ className, column, getValue, row, table, }) => {
     const isRanked = isRankedCell(table, row, column.id);
     // Build regex for markdown highlighting.
     const regex = isRanked ? getTokensRegex(getTokens(table)) : undefined;
-    return (React.createElement(StyledMarkdownRenderer, { className: className, components: { ...COMPONENTS, ...components }, regex: regex, value: value }));
+    return (_jsx(StyledMarkdownRenderer, { className: className, components: { ...COMPONENTS, ...components }, regex: regex, value: value }));
 };

package/lib/components/Table/components/TableCell/components/MarkdownCell/markdownCell.styles.js

@@ -7,7 +7,9 @@ export const StyledMarkdownRenderer = styled(MarkdownRenderer) `
   code {
     all: unset;
     font: inherit;
-    font-family: Roboto Mono, monospace;
+    font-family:
+      Roboto Mono,
+      monospace;
   }
 
   h2,

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/markdownCell.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 import { MarkdownCell } from "../markdownCell";
 declare const meta: Meta<typeof MarkdownCell>;
 export default meta;

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/markdownCell.stories.js

@@ -1,19 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from "@mui/material";
-import React from "react";
 import { PALETTE } from "../../../../../../../styles/common/constants/palette";
 import { MarkdownCell } from "../markdownCell";
 import { DEFAULT_ARGS, WITH_HTML_ARGS } from "./args";
 const meta = {
     component: MarkdownCell,
     decorators: [
-        (Story) => (React.createElement(Box, { sx: {
+        (Story) => (_jsx(Box, { sx: {
                 backgroundColor: PALETTE.COMMON_WHITE,
                 fontSize: "14px",
                 lineHeight: "20px",
                 padding: 3,
                 width: 480,
-            } },
-            React.createElement(Story, null))),
+            }, children: _jsx(Story, {}) })),
     ],
 };
 export default meta;

package/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip.d.ts

@@ -1,4 +1,5 @@
 import { TooltipProps as MTooltipProps } from "@mui/material";
+import { JSX } from "react";
 export interface TooltipProps extends MTooltipProps {
     className?: string;
 }

package/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip.js

@@ -1,6 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip as MTooltip, } from "@mui/material";
 import { detectOverflow } from "@popperjs/core";
-import React, { useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { TooltipContent } from "./tooltip.styles";
 const DEFAULT_FLIP_MODIFIER = {
     enabled: true,
@@ -29,10 +30,10 @@ export const Tooltip = ({ children, className, title, ...props /* Spread props t
         DEFAULT_FLIP_MODIFIER,
         DEFAULT_PREVENT_OVERFLOW_MODIFIER,
     ], []);
-    return (React.createElement(MTooltip, { arrow: true, className: className, onClose: () => setMaxHeight(undefined), slotProps: {
+    return (_jsx(MTooltip, { arrow: true, className: className, onClose: () => setMaxHeight(undefined), slotProps: {
             popper: { modifiers },
             tooltip: { style: { display: "flex", maxHeight, padding: 0 } },
-        }, title: React.createElement(TooltipContent, null, title), ...props }, children));
+        }, title: _jsx(TooltipContent, { children: title }), ...props, children: children }));
 };
 /**
  * Calculate the max height of the tooltip based on the current popper modifier state.

package/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/nTag.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { JSX, ReactElement } from "react";
 export interface NTagProps {
     className?: string;
     Tag: ReactElement;

package/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/nTag.js

@@ -1,5 +1,5 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip } from "./components/Tooltip/tooltip";
 export const NTag = ({ className, Tag, TooltipTitle, ...props /* Spread props to allow for Mui Tooltip specific prop overrides. */ }) => {
-    return (React.createElement(Tooltip, { className: className, title: TooltipTitle, ...props }, Tag));
+    return (_jsx(Tooltip, { className: className, title: TooltipTitle, ...props, children: Tag }));
 };

package/lib/components/Table/components/TableCell/components/NTagCell/nTagCell.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { TypographyProps } from "../../../../../common/Typography/common/entities";
 export type MetadataValue = string;
 export interface NTagCellProps {

package/lib/components/Table/components/TableCell/components/NTagCell/nTagCell.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Chip as MChip, Typography, } from "@mui/material";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { NTag } from "./components/NTag/nTag";
 // Template constants
@@ -17,10 +18,10 @@ function stringifyMetadataValues(metadataValues) {
  * Tooltip children require forward ref.
  */
 const Tag = forwardRef(function Tag(props, ref) {
-    return React.createElement(MChip, { ref: ref, ...props });
+    return _jsx(MChip, { ref: ref, ...props });
 });
 export const NTagCell = ({ label, TypographyProps, values, }) => {
     const metadataCount = values.length;
     const showNTag = metadataCount > MAX_DISPLAYABLE_VALUES;
-    return (React.createElement(React.Fragment, null, showNTag ? (React.createElement(NTag, { Tag: React.createElement(Tag, { label: `${metadataCount} ${label}`, variant: "ntag" }), TooltipTitle: React.createElement(Typography, { display: "block", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400 }, stringifyMetadataValues(values)) })) : (values.map((value, v) => (React.createElement(Typography, { key: `${value}${v}`, variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...TypographyProps }, value))))));
+    return (_jsx(_Fragment, { children: showNTag ? (_jsx(NTag, { Tag: _jsx(Tag, { label: `${metadataCount} ${label}`, variant: "ntag" }), TooltipTitle: _jsx(Typography, { display: "block", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400, children: stringifyMetadataValues(values) }) })) : (values.map((value, v) => (_jsx(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...TypographyProps, children: value }, `${value}${v}`)))) }));
 };

package/lib/components/Table/components/TableCell/components/RankedCell/rankedCell.d.ts

@@ -1,3 +1,4 @@
 import { CellContext, RowData } from "@tanstack/react-table";
+import { JSX } from "react";
 import { BaseComponentProps, ChildrenProps } from "../../../../../types";
 export declare const RankedCell: <T extends RowData, TValue = string | undefined | null>({ children, className, column, getValue, row, table, }: BaseComponentProps & CellContext<T, TValue> & ChildrenProps) => JSX.Element | null;

package/lib/components/Table/components/TableCell/components/RankedCell/rankedCell.js

@@ -1,4 +1,5 @@
-import React, { Fragment } from "react";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
 import { getTokens, getTokensRegex, isRankedCell } from "./utils";
 export const RankedCell = ({ 
 /* children - e.g. AnchorLink component */
@@ -14,20 +15,14 @@ children, className, column, getValue, row, table, }) => {
     const isRanked = isRankedCell(table, row, column.id);
     // Return the unranked cell, as-is.
     if (!isRanked)
-        return (React.createElement(Fragment, null,
-            stringValue,
-            children));
+        return (_jsxs(Fragment, { children: [stringValue, children] }));
     // Tokenise the current global filter.
     const tokens = getTokens(table);
     // If there are no tokens, return the value as-is.
     if (tokens.length === 0)
-        return (React.createElement(Fragment, null,
-            stringValue,
-            children));
+        return (_jsxs(Fragment, { children: [stringValue, children] }));
     // Create regex pattern.
     const regex = getTokensRegex(tokens);
     // Return the ranked cell, with highlighting.
-    return (React.createElement("span", { className: className },
-        stringValue.split(regex).map((part, i) => (React.createElement(Fragment, { key: i }, part.match(regex) ? React.createElement("mark", null, part) : part))),
-        children));
+    return (_jsxs("span", { className: className, children: [stringValue.split(regex).map((part, i) => (_jsx(Fragment, { children: part.match(regex) ? _jsx("mark", { children: part }) : part }, i))), children] }));
 };

package/lib/components/Table/components/TableCell/components/RowPositionCell/rowPositionCell.d.ts

@@ -1,3 +1,4 @@
 import { CellContext, RowData } from "@tanstack/react-table";
+import { JSX } from "react";
 import { BaseComponentProps } from "../../../../../types";
 export declare const RowPositionCell: <TData extends RowData, TValue>({ className, ...cellContext }: BaseComponentProps & CellContext<TData, TValue>) => JSX.Element;

package/lib/components/Table/components/TableCell/components/RowPositionCell/rowPositionCell.js

@@ -1,6 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from "@mui/material";
-import React from "react";
 import { TYPOGRAPHY_PROPS } from "./constants";
 export const RowPositionCell = ({ className, ...cellContext }) => {
-    return (React.createElement(Typography, { ...TYPOGRAPHY_PROPS, className: className, component: "div" }, cellContext.row.getRowPosition()));
+    return (_jsx(Typography, { ...TYPOGRAPHY_PROPS, className: className, component: "div", children: cellContext.row.getRowPosition() }));
 };

package/lib/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.d.ts

@@ -1,2 +1,3 @@
 import { CellContext, RowData } from "@tanstack/react-table";
+import { JSX } from "react";
 export declare const RowSelectionCell: <T extends RowData, TValue = unknown>({ row, }: CellContext<T, TValue>) => JSX.Element;

package/lib/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.js

@@ -1,17 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox as MCheckbox, Tooltip } from "@mui/material";
-import React from "react";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedDisabledIcon } from "../../../../../common/CustomIcon/components/UncheckedDisabledIcon/uncheckedDisabledIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 import { TOOLTIP_PROPS } from "./constants";
 export const RowSelectionCell = ({ row, }) => {
     const { getCanSelect, getIsSelected, getSelectionValidation, getToggleSelectedHandler, } = row;
-    return (React.createElement(Tooltip, { ...TOOLTIP_PROPS, title: getSelectionValidation?.() },
-        React.createElement("span", null,
-            React.createElement(MCheckbox, { checked: getIsSelected(), checkedIcon: React.createElement(CheckedIcon, null), disabled: !getCanSelect(), icon: getCanSelect() ? React.createElement(UncheckedIcon, null) : React.createElement(UncheckedDisabledIcon, null), 
+    return (_jsx(Tooltip, { ...TOOLTIP_PROPS, title: getSelectionValidation?.(), children: _jsx("span", { children: _jsx(MCheckbox, { checked: getIsSelected(), checkedIcon: _jsx(CheckedIcon, {}), disabled: !getCanSelect(), icon: getCanSelect() ? _jsx(UncheckedIcon, {}) : _jsx(UncheckedDisabledIcon, {}), 
                 /*
                  * Prevents click events from bubbling up to parent components
                  * (such as CardActionArea or Accordion) when the checkbox is activated.
                  */
-                onClick: (e) => e.stopPropagation(), onChange: getToggleSelectedHandler() }))));
+                onClick: (e) => e.stopPropagation(), onChange: getToggleSelectedHandler() }) }) }));
 };

package/lib/components/Table/components/TableFeatures/ColumnFilter/columnFilter.d.ts

@@ -1,4 +1,5 @@
 import { RowData } from "@tanstack/react-table";
+import { JSX } from "react";
 import { ColumnFilterProps } from "./types";
 /**
  *  Column filter component with supported filter functions: