@vertigis/react-ui 9.13.0 → 10.1.0

package/FormLabelTextField/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./FormLabelTextField.js";
+export { default } from "./FormLabelTextField.js";

package/FormLabelTextField/index.js

@@ -0,0 +1,2 @@
+export * from "./FormLabelTextField.js";
+export { default } from "./FormLabelTextField.js";

package/IconButton/IconButton.d.ts

@@ -1,5 +1,5 @@
 import type { ButtonBaseClasses } from "@mui/material/ButtonBase";
-import { IconButtonProps as MUIIconButtonProps, IconButtonClasses as MUIIconButtonClasses } from "@mui/material/IconButton";
+import type { IconButtonProps as MUIIconButtonProps, IconButtonClasses as MUIIconButtonClasses } from "@mui/material/IconButton";
 import type { OverridableComponent } from "@mui/material/OverridableComponent";
 import "../styles/themeAugmentation.js";
 export * from "@mui/material/IconButton";

package/IconMenu/IconMenu.d.ts

@@ -0,0 +1,37 @@
+import type { BoxProps } from "@mui/system";
+import type { ReactNode } from "react";
+import type { IconButtonProps } from "../IconButton/index.js";
+import type { MenuProps } from "../Menu/index.js";
+export declare const iconMenuClasses: {
+    root: string;
+    iconButton: string;
+};
+export interface IconMenuClasses {
+    root: string;
+    iconButton: string;
+}
+export declare type IconMenuClassKey = keyof IconMenuClasses;
+export interface IconMenuProps extends BoxProps {
+    /**
+     * Additional CSS classes to be applied to the component.
+     */
+    classes?: Partial<IconMenuClasses>;
+    /**
+     * Whether the icon button should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The icon to show.
+     */
+    icon: ReactNode;
+    /**
+     * Attributes applied to the `IconButton` component.
+     */
+    IconButtonProps?: Partial<IconButtonProps>;
+    /**
+     * Attributes applied to the `Menu` component.
+     */
+    MenuProps?: Partial<MenuProps>;
+}
+declare const IconMenu: import("react").ForwardRefExoticComponent<Pick<IconMenuProps, "id" | "dir" | "p" | "slot" | "style" | "title" | "resource" | "results" | "role" | "key" | "classes" | "color" | "icon" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "sx" | "zIndex" | "typography" | "fontFamily" | "fontSize" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "component" | "MenuProps" | "IconButtonProps"> & import("react").RefAttributes<HTMLDivElement>>;
+export default IconMenu;

package/IconMenu/IconMenu.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef, useRef, useState } from "react";
+import Box from "../Box/index.js";
+import IconButton from "../IconButton/index.js";
+import Menu from "../Menu/index.js";
+import { mergeStyles } from "../styles/index.js";
+import { useId } from "../utils/react.js";
+const PREFIX = "GcxIconMenu";
+export const iconMenuClasses = {
+    root: `${PREFIX}-root`,
+    iconButton: `${PREFIX}-iconButton`,
+};
+const IconMenu = forwardRef(function IconMenu({ id: idProp, children, icon, className, classes: classesProp, disabled, IconButtonProps, MenuProps, ...others }, ref) {
+    const anchorRef = useRef();
+    const [open, setOpen] = useState(false);
+    const id = useId(idProp);
+    const classes = mergeStyles(iconMenuClasses, classesProp);
+    return (_jsxs(Box, Object.assign({ className: clsx(classes.root, className), ref: ref }, others, { children: [_jsx(IconButton, Object.assign({ "aria-label": "More", "aria-owns": open ? id : undefined, "aria-haspopup": "true", "data-test": "IconMenu-btn", disabled: disabled, className: classes.iconButton, onClick: () => setOpen(true), ref: ref => (anchorRef.current = anchorRef.current ?? ref) }, IconButtonProps, { children: icon }), void 0), _jsx(Menu, Object.assign({ id: id, "data-test": "IconMenu-menu", anchorEl: anchorRef.current, open: open, onClose: () => setOpen(false), onClick: () => setOpen(false) }, MenuProps, { children: children }), void 0)] }), void 0));
+});
+export default IconMenu;

package/IconMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./IconMenu.js";
+export * from "./IconMenu.js";

package/IconMenu/index.js

@@ -0,0 +1,2 @@
+export { default } from "./IconMenu.js";
+export * from "./IconMenu.js";

package/InlineFormControl/InlineFormControl.d.ts

@@ -0,0 +1,38 @@
+import type { FC, ReactElement } from "react";
+import type { FormControlProps, FormControlClasses } from "../FormControl/index.js";
+declare const gcxInlineFormControlClasses: {
+    formControlLabelRoot: string;
+    formControl: string;
+    formControlLabelLabel: string;
+};
+export declare const inlineFormControlClasses: {
+    formControlLabelRoot: string;
+    formControl: string;
+    formControlLabelLabel: string;
+    inlineHelp: string;
+    root: string;
+    marginNormal: string;
+    marginDense: string;
+    fullWidth: string;
+};
+export declare type InlineFormControlClasses = FormControlClasses & Record<keyof typeof gcxInlineFormControlClasses, string>;
+export declare type InlineFormControlClassKey = keyof InlineFormControlClasses;
+export declare type InlineFormControlProps = Omit<FormControlProps, "classes"> & {
+    /**
+     * Additional CSS classes to be applied to the component.
+     */
+    classes?: Partial<InlineFormControlClasses>;
+    /**
+     * The control to render
+     */
+    control: ReactElement;
+    /**
+     * The label for the control
+     */
+    label: string | number | ReactElement;
+};
+/**
+ * Used for displaying a checkbox, switch, or Link with inline help.
+ */
+declare const InlineFormControl: FC<InlineFormControlProps>;
+export default InlineFormControl;

package/InlineFormControl/InlineFormControl.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import FormControl, { formControlClasses } from "../FormControl/index.js";
+import FormControlLabel from "../FormControlLabel/index.js";
+import { styled, mergeStyles } from "../styles/index.js";
+const PREFIX = "GcxInlineFormControl";
+const gcxInlineFormControlClasses = {
+    formControlLabelRoot: `${PREFIX}-formControlLabelRoot`,
+    formControl: `${PREFIX}-formControl`,
+    formControlLabelLabel: `${PREFIX}-formControlLabelLabel`,
+};
+export const inlineFormControlClasses = {
+    ...formControlClasses,
+    ...gcxInlineFormControlClasses,
+};
+const StyledFormControl = styled(FormControl)({
+    [`& .${inlineFormControlClasses.inlineHelp}`]: {
+        display: "flex",
+        position: "inherit",
+    },
+    [`& .${inlineFormControlClasses.formControlLabelRoot}`]: {
+        display: "flex",
+        flex: 1,
+    },
+    [`&.${inlineFormControlClasses.formControl}`]: {
+        display: "flex",
+        /**
+         * Override Mui's flexDirection
+         */
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    [`& .${inlineFormControlClasses.formControlLabelLabel}`]: {
+        fontWeight: 500,
+    },
+});
+/**
+ * Used for displaying a checkbox, switch, or Link with inline help.
+ */
+const InlineFormControl = ({ children, className, classes, control, label, ...props }) => {
+    const { formControlLabelRoot: formControlLabelRootClass, formControlLabelLabel: formControlLabelLabelClass, formControl: formControlClass, ...otherClasses } = mergeStyles(inlineFormControlClasses, classes);
+    return (_jsxs(StyledFormControl, Object.assign({ className: clsx("GcxInlineFormControl", formControlClass, className) }, props, { classes: otherClasses }, { children: [_jsx(FormControlLabel, { classes: { root: formControlLabelRootClass, label: formControlLabelLabelClass }, control: control, label: label }, void 0), children] }), void 0));
+};
+export default InlineFormControl;

package/InlineFormControl/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./InlineFormControl.js";
+export * from "./InlineFormControl.js";

package/InlineFormControl/index.js

@@ -0,0 +1,2 @@
+export { default } from "./InlineFormControl.js";
+export * from "./InlineFormControl.js";

package/InlineHelp/InlineHelp.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+export declare const inlineHelpClasses: {
+    root: string;
+    paper: string;
+};
+export declare type InlineHelpClassKey = keyof typeof inlineHelpClasses;
+export declare type InlineHelpClasses = Record<InlineHelpClassKey, string>;
+export interface InlineHelpProps {
+    /**
+     * Optionally the children to be rendered by the InlineHelp.
+     */
+    children?: ReactNode;
+    /**
+     * The CSS class name of the root element.
+     */
+    className?: string;
+    /**
+     * Additional CSS classes to be applied to the component.
+     */
+    classes?: Partial<InlineHelpClasses>;
+    /**
+     * The help icon node to show.
+     */
+    icon?: ReactNode;
+    /**
+     * The title of the IconButton
+     */
+    title?: string;
+    /**
+     * The link displayed in the inline help.
+     */
+    url?: {
+        /**
+         * The label to be displayed for the link .
+         */
+        label: string;
+        /**
+         * The href of the link.
+         */
+        href: string;
+        /**
+         * A callback function for when the link is clicked.
+         */
+        onClick?: (link: string) => void;
+    };
+}
+declare const InlineHelp: import("react").ForwardRefExoticComponent<InlineHelpProps & import("react").RefAttributes<HTMLDivElement>>;
+export default InlineHelp;

package/InlineHelp/InlineHelp.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef, useState } from "react";
+import Box from "../Box/index.js";
+import IconButton from "../IconButton/index.js";
+import Link from "../Link/index.js";
+import Popover from "../Popover/index.js";
+import Typography from "../Typography/index.js";
+import HelpIcon from "../icons/Help.js";
+import { styled, mergeStyles, useTheme } from "../styles/index.js";
+const PREFIX = "GcxInlineHelp";
+export const inlineHelpClasses = {
+    root: `${PREFIX}-root`,
+    paper: `${PREFIX}-paper`,
+};
+const LTR_ORIGIN = {
+    vertical: "top",
+    horizontal: "left",
+};
+const RTL_ORIGIN = {
+    vertical: "top",
+    horizontal: "right",
+};
+// Popover styling needs to be applied separately here, since the popover will
+// not be a child of the Root in the DOM due to use of a React portal.
+const StyledPopover = styled(Popover)(({ theme: { spacing } }) => ({
+    [`& .${inlineHelpClasses.paper}`]: {
+        maxWidth: "21.875em",
+        padding: spacing(2),
+        wordWrap: "break-word",
+    },
+}));
+const InlineHelp = forwardRef(function InlineHelp({ children, classes: classesProp, className, icon, title, url, ...other }, ref) {
+    const [iconBtnEl, setIconBtnEl] = useState();
+    const theme = useTheme();
+    const classes = mergeStyles(inlineHelpClasses, classesProp);
+    const handleIconPopoverOpen = (event) => setIconBtnEl(event.currentTarget);
+    const handleIconPopoverClose = () => setIconBtnEl(undefined);
+    return (_jsxs(Box, Object.assign({ className: clsx(classes.root, className), ref: ref }, other, { children: [_jsx(IconButton, Object.assign({ onClick: handleIconPopoverOpen, title: title, size: "small", "data-test": `${PREFIX}-button` }, { children: icon ? icon : _jsx(HelpIcon, {}, void 0) }), void 0), _jsxs(StyledPopover, Object.assign({ anchorEl: iconBtnEl, open: !!iconBtnEl, classes: { paper: classes.paper }, anchorOrigin: theme.direction === "rtl" ? RTL_ORIGIN : LTR_ORIGIN, transformOrigin: theme.direction === "rtl" ? RTL_ORIGIN : LTR_ORIGIN, onClose: handleIconPopoverClose }, { children: [_jsx(Typography, { children: children }, void 0), url && (_jsx(Link, Object.assign({ align: "right", display: "block", href: url.href, onClick: () => url.onClick?.(url.href), target: "_blank", variant: "body2" }, { children: url.label }), void 0))] }), void 0)] }), void 0));
+});
+export default InlineHelp;

package/InlineHelp/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./InlineHelp.js";
+export * from "./InlineHelp.js";

package/InlineHelp/index.js

@@ -0,0 +1,2 @@
+export { default } from "./InlineHelp.js";
+export * from "./InlineHelp.js";

package/LicenseInfo/index.d.ts

@@ -0,0 +1 @@
+export * from "@mui/x-license-pro";

package/LicenseInfo/index.js

@@ -0,0 +1 @@
+export * from "@mui/x-license-pro";

package/LicenseInfo/index.ts

@@ -0,0 +1 @@
+export * from "@mui/x-license-pro";

package/Link/Link.d.ts

@@ -1,17 +1,15 @@
-import { LinkProps as MUILinkProps, LinkClasses as MUILinkClasses } from "@mui/material/Link";
+import type { LinkProps as MUILinkProps, LinkClasses as MUILinkClasses } from "@mui/material/Link";
 import type { OverridableComponent } from "@mui/material/OverridableComponent";
 export * from "@mui/material/Link";
 declare const gcxLinkClasses: {
     /**
-     * Styles applied to the external link icon when `showExternalLinkIcon` is
-     * `true`.
+     * Styles applied to the external link icon when `showExternalLinkIcon` is `true`.
      */
     externalLinkIcon: string;
 };
 export declare const linkClasses: {
     /**
-     * Styles applied to the external link icon when `showExternalLinkIcon` is
-     * `true`.
+     * Styles applied to the external link icon when `showExternalLinkIcon` is `true`.
      */
     externalLinkIcon: string;
     root: string;
@@ -29,8 +27,7 @@ export interface LinkProps extends Omit<MUILinkProps, "classes"> {
      */
     classes?: Partial<LinkClasses>;
     /**
-     * Determines whether or not to show an icon hinting that the link will be
-     * external.
+     * Determines whether or not to show an icon hinting that the link will be external.
      */
     showExternalLinkIcon?: boolean;
 }

package/Link/Link.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import MUILink, { linkClasses as muiLinkClasses, } from "@mui/material/Link";
+import MUILink, { linkClasses as muiLinkClasses } from "@mui/material/Link";
 import { forwardRef } from "react";
 import LinkExternal from "../icons/LinkExternal.js";
 import { styled, mergeStyles } from "../styles/index.js";
@@ -8,8 +8,7 @@ export * from "@mui/material/Link";
 const PREFIX = "GcxLink";
 const gcxLinkClasses = {
     /**
-     * Styles applied to the external link icon when `showExternalLinkIcon` is
-     * `true`.
+     * Styles applied to the external link icon when `showExternalLinkIcon` is `true`.
      */
     externalLinkIcon: `${PREFIX}-externalLinkIcon`,
 };

package/Loader/Loader.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+export declare const loaderClasses: {
+    root: string;
+    dot: string;
+    showBackground: string;
+    visible: string;
+};
+export declare type LoaderClassKey = keyof typeof loaderClasses;
+export declare type LoaderClasses = Record<LoaderClassKey, string>;
+export interface LoaderProps {
+    /**
+     * Optionally the children to be rendered by the Loader.
+     */
+    children?: ReactNode;
+    /**
+     * The CSS class name of the root element.
+     */
+    className?: string;
+    /**
+     * Additional CSS classes to be applied to the component.
+     */
+    classes?: Partial<LoaderClasses>;
+    /**
+     * Whether a semi-transparent background should be rendered.
+     */
+    showBackground?: boolean;
+    /**
+     * Whether the overlay is visible.
+     */
+    visible: boolean;
+}
+declare const Loader: import("react").ForwardRefExoticComponent<LoaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Loader;

package/Loader/Loader.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import Fade from "../Fade/index.js";
+import { alpha, keyframes, styled, mergeStyles } from "../styles/index.js";
+const PREFIX = "GcxLoader";
+export const loaderClasses = {
+    root: `${PREFIX}-root`,
+    dot: `${PREFIX}-dot`,
+    showBackground: `${PREFIX}-showBackground`,
+    visible: `${PREFIX}-visible`,
+};
+const loaderAnimation = keyframes({
+    "50%": {
+        transform: "scale(1)",
+        opacity: 1,
+    },
+    "100%": {
+        opacity: 0,
+    },
+});
+const Root = styled("div")(({ theme: { palette } }) => ({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    visibility: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 1,
+    "&, &:focus": {
+        // Prevent blue outline of overlay when element is focused
+        outline: "none !important",
+    },
+    [`& .${loaderClasses.dot}`]: {
+        width: 32,
+        height: 32,
+        border: `6px solid ${palette.grey[600]}`,
+        backgroundColor: palette.grey[600],
+        borderRadius: "50%",
+        float: "left",
+        margin: "0 16px",
+        transform: "scale(0)",
+        animation: `${loaderAnimation} 1500ms ease infinite 0ms`,
+        "&:nth-of-type(2)": {
+            animation: `${loaderAnimation} 1500ms ease infinite 100ms`,
+        },
+        "&:nth-of-type(3)": {
+            animation: `${loaderAnimation} 1500ms ease infinite 200ms`,
+        },
+    },
+    [`&.${loaderClasses.showBackground}`]: {
+        backgroundColor: palette.mode === "dark"
+            ? alpha(palette.common.white, 0.15)
+            : alpha(palette.common.black, 0.4),
+        [`& .${loaderClasses.dot}`]: {
+            borderColor: palette.common.white,
+            backgroundColor: palette.common.white,
+        },
+    },
+    [`&.${loaderClasses.visible}`]: {
+        visibility: "visible",
+    },
+}));
+const Loader = forwardRef(function Loader({ className, classes: classesProp, showBackground, visible, children }, ref) {
+    const classes = mergeStyles(loaderClasses, classesProp);
+    return (_jsx(Fade, Object.assign({ in: visible, ref: ref }, { children: _jsxs(Root, Object.assign({ "aria-hidden": "true", className: clsx(classes.root, className, {
+                [classes.showBackground]: showBackground,
+                [classes.visible]: visible,
+            }), "data-test": "Loader-root", tabIndex: -1 }, { children: [_jsxs("div", { children: [_jsx("div", { className: classes.dot }, void 0), _jsx("div", { className: classes.dot }, void 0), _jsx("div", { className: classes.dot }, void 0)] }, void 0), children && _jsx("div", Object.assign({ "data-test": "Loader-children" }, { children: children }), void 0)] }), void 0) }), void 0));
+});
+export default Loader;

package/Loader/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Loader.js";
+export * from "./Loader.js";

package/Loader/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Loader.js";
+export * from "./Loader.js";

package/LocalizationProvider/index.d.ts

@@ -0,0 +1,3 @@
+export * from "@mui/x-date-pickers/LocalizationProvider";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+export default LocalizationProvider;

package/LocalizationProvider/index.js

@@ -0,0 +1,3 @@
+export * from "@mui/x-date-pickers/LocalizationProvider";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+export default LocalizationProvider;

package/Markdown/Markdown.d.ts

@@ -1,5 +1,5 @@
-import { FC } from "react";
-import { BoxProps } from "../Box/index.js";
+import type { FC } from "react";
+import type { BoxProps } from "../Box/index.js";
 /**
  * Properties for the `Markdown` component.
  */
@@ -9,23 +9,22 @@ export interface MarkdownProps extends BoxProps {
      */
     markdown: string;
     /**
-     * A caller-supplied sanitization function to ensure that the resulting HTML
-     * is safe to insert into the DOM. Required.
+     * Override the default sanitization behaviour with a caller-supplied
+     * sanitization function that ensures that the resulting HTML is safe to
+     * insert into the DOM.
      */
-    sanitize: (unsafeHtml: string) => string;
+    sanitize?: (unsafeHtml: string) => string;
     /**
      * If specified, produces HTML that is valid for contexts where only inline
-     * content is allowed (e.g. inside `<h1>`>` or `<span>` tags). HTML tags for
-     * block-level elements will be removed, but any text content will be
-     * preserved.
+     * content is allowed (e.g. inside `<h1>` or `<span>` tags). HTML tags for
+     * block-level elements will be removed, but any text content will be preserved.
      */
     inline?: boolean;
     /**
      * If true, any HTML in the markdown will be escaped rather than passed
      * through directly to the output as normal (since Markdown is a superset of
      * HTML). This is useful in situations where you wish to only support pure
-     * Markdown syntax without also supporting HTML syntax. The default is
-     * `false`.
+     * Markdown syntax without also supporting HTML syntax. The default is `false`.
      *
      * IMPORTANT: The resulting HTML still needs to be sanitized whether or not
      * this option is set.

package/Markdown/Markdown.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import Box from "../Box/index.js";
+import { sanitizeHtml } from "../utils/html.js";
 import { markdownToHtml } from "../utils/markdown.js";
 /**
  * A component that renders markdown as HTML.
  */
-const Markdown = ({ markdown, inline, escapeHtml, sanitize, className, ...otherProps }) => {
+const Markdown = ({ markdown, inline, escapeHtml, sanitize = sanitizeHtml, className, ...otherProps }) => {
     return (_jsx(Box, Object.assign({ component: inline ? "span" : "div", className: clsx("GcxMarkdown", className), dangerouslySetInnerHTML: {
             __html: sanitize(markdownToHtml(markdown, { inline, escapeHtml })),
         } }, otherProps), void 0));

package/MenuItemSecondaryAction/MenuItemSecondaryAction.d.ts

@@ -1,5 +1,5 @@
-import { FC } from "react";
-import { ListItemSecondaryActionProps } from "../ListItemSecondaryAction/index.js";
+import type { FC } from "react";
+import type { ListItemSecondaryActionProps } from "../ListItemSecondaryAction/index.js";
 /**
  * For use within a MenuList (or other list that implements arrow key
  * navigation). The standard ListItemSecondaryAction will break keyboard

package/MenuItemSecondaryAction/MenuItemSecondaryAction.js

@@ -13,25 +13,24 @@ const StyledListItemSecondaryAction = styled(GcxListItemSecondaryAction)({
  *
  * @param props The component properties.
  */
-const MenuItemSecondaryAction = (props) => {
+const MenuItemSecondaryAction = props => {
     const ref = useRef(null);
     const { className, ...otherProps } = props;
     const onKeyDown = (event) => {
-        var _a, _b;
         const { key } = event;
         if (key === "ArrowUp" || key === "ArrowDown" || key === "Home" || key === "End") {
             // Switch focus to the parent list item, then let the key event
             // propagate to get the normal behavior of pressing these keys.
-            (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.focus();
+            ref.current?.parentElement?.focus();
         }
         else if (key !== "Escape") {
             // Prevent propagation to the primary action.
             event.stopPropagation();
         }
     };
-    return (_jsx(StyledListItemSecondaryAction, Object.assign({ className: className, onClick: (event) => {
+    return (_jsx(StyledListItemSecondaryAction, Object.assign({ className: className, onClick: event => {
             event.stopPropagation();
-        }, onKeyDown: onKeyDown, onMouseDown: (event) => {
+        }, onKeyDown: onKeyDown, onMouseDown: event => {
             // This will stop child ripples from propagating.
             event.stopPropagation();
         }, ref: ref }, otherProps), void 0));

package/Radio/Radio.d.ts

@@ -1,5 +1,6 @@
-import { ButtonBaseClasses } from "@mui/material/ButtonBase";
-import Radio, { RadioProps as MUIRadioProps, RadioClasses as MUIRadioClasses } from "@mui/material/Radio";
+import type { ButtonBaseClasses } from "@mui/material/ButtonBase";
+import type { RadioProps as MUIRadioProps, RadioClasses as MUIRadioClasses } from "@mui/material/Radio";
+import Radio from "@mui/material/Radio";
 export * from "@mui/material/Radio";
 export interface RadioClasses extends MUIRadioClasses, ButtonBaseClasses {
 }

package/Switch/Switch.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonBaseClasses } from "@mui/material/ButtonBase";
 import type { IconButtonClasses } from "@mui/material/IconButton";
-import { SwitchProps as MUISwitchProps, SwitchClasses as MUISwitchClasses } from "@mui/material/Switch";
+import type { SwitchProps as MUISwitchProps, SwitchClasses as MUISwitchClasses } from "@mui/material/Switch";
 export * from "@mui/material/Switch";
 export interface SwitchClasses extends MUISwitchClasses, IconButtonClasses, ButtonBaseClasses {
 }

package/Tab/Tab.d.ts

@@ -1,7 +1,7 @@
 import type { OverridableComponent } from "@mui/material/OverridableComponent";
-import { TabProps as MUITabProps, TabClasses as MUITabClasses } from "@mui/material/Tab";
-import { ReactNode } from "react";
-import { ButtonBaseClasses } from "../ButtonBase/index.js";
+import type { TabProps as MUITabProps, TabClasses as MUITabClasses } from "@mui/material/Tab";
+import type { ReactNode } from "react";
+import type { ButtonBaseClasses } from "../ButtonBase/index.js";
 export * from "@mui/material/Tab";
 declare const gcxTabClasses: {
     endAdornment: string;

package/Tab/Tab.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import MUITab, { tabClasses as muiTabClasses, } from "@mui/material/Tab";
+import MUITab, { tabClasses as muiTabClasses } from "@mui/material/Tab";
 import clsx from "clsx";
 import { forwardRef } from "react";
 import { mergeStyles, styled } from "../styles/index.js";

package/TableCell/TableCell.d.ts

@@ -1,5 +1,5 @@
 import type { OverridableComponent } from "@mui/material/OverridableComponent";
-import { TableCellProps } from "@mui/material/TableCell";
+import type { TableCellProps } from "@mui/material/TableCell";
 declare const _default: OverridableComponent<{
     props: Omit<TableCellProps, "component">;
     defaultComponent: "td";

package/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TabsProps as MUITabsProps, TabsClasses as MUITabsClasses } from "@mui/material/Tabs";
+import type { TabsProps as MUITabsProps, TabsClasses as MUITabsClasses } from "@mui/material/Tabs";
 export * from "@mui/material/Tabs";
 declare const gcxTabsClasses: {
     /**