@nulogy/components 14.8.2 → 15.0.1

package/dist/src/List/List.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import { StyledProps } from "../StyledProps";
-interface Props extends React.ComponentPropsWithRef<"ul">, StyledProps {
-    className?: string;
-    compact?: boolean;
-    leftAlign?: boolean;
-    listStyle?: string;
-}
-declare const List: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, Props>> & string;
-export default List;
+/// <reference types="react" />
+import { StyledProps } from "../StyledProps";
+interface Props extends React.ComponentPropsWithRef<"ul">, StyledProps {
+    className?: string;
+    compact?: boolean;
+    leftAlign?: boolean;
+    listStyle?: string;
+}
+declare const List: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, Props>> & string;
+export default List;

package/dist/src/List/List.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+import { addStyledProps } from "../StyledProps";
+import ListItem from "./ListItem";
+const List = styled.ul(({ compact = false, leftAlign = false, color = "currentColor", theme, listStyle }) => ({
+    margin: 0,
+    color: color,
+    paddingLeft: leftAlign ? "18px" : undefined,
+    listStyle,
+    [`${ListItem}`]: {
+        marginBottom: compact ? 0 : theme.space.x1,
+    },
+}), addStyledProps);
+export default List;

package/dist/src/List/List.story.d.ts

@@ -1,30 +1,30 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _List: () => React.JSX.Element;
-export declare const WithCustomColour: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomFontSizeAndLineHeight: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCompactSpacing: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithLeftAlignment: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _List: () => React.JSX.Element;
+export declare const WithCustomColour: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCustomFontSizeAndLineHeight: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCompactSpacing: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithLeftAlignment: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/List/List.story.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { List, ListItem } from "../index";
+export default {
+    title: "Components/List",
+};
+export const _List = () => (React.createElement(List, null,
+    React.createElement(ListItem, null, "List Item 1"),
+    React.createElement(ListItem, null, "List Item 2 that is really really really really really really really really really long"),
+    React.createElement(ListItem, null, "List Item 3")));
+export const WithCustomColour = () => (React.createElement(List, { color: "red" },
+    React.createElement(ListItem, null, "List Item 1"),
+    React.createElement(ListItem, null, "List Item 2 that is really really really really really really really really really long"),
+    React.createElement(ListItem, null, "List Item 3")));
+WithCustomColour.story = {
+    name: "With custom colour",
+};
+export const WithCustomFontSizeAndLineHeight = () => (React.createElement(List, { fontSize: "small", lineHeight: "smallTextBase" },
+    React.createElement(ListItem, null, "List Item 1"),
+    React.createElement(ListItem, null, "List Item 2 that is really really really really really really really really really long"),
+    React.createElement(ListItem, { fontSize: "large" }, "Larger List Item 3")));
+WithCustomFontSizeAndLineHeight.story = {
+    name: "With custom font size and line height",
+};
+export const WithCompactSpacing = () => (React.createElement(List, { compact: true },
+    React.createElement(ListItem, null, "List Item 1"),
+    React.createElement(ListItem, null, "List Item 2 that is really really really really really really really really really long"),
+    React.createElement(ListItem, null, "List Item 3")));
+WithCompactSpacing.story = {
+    name: "With compact spacing",
+};
+export const WithLeftAlignment = () => (React.createElement(List, { leftAlign: true },
+    React.createElement(ListItem, null, "List Item 1"),
+    React.createElement(ListItem, null, "List Item 2 that is really really really really really really really really really long"),
+    React.createElement(ListItem, null, "List Item 3")));
+WithLeftAlignment.story = {
+    name: "With left alignment",
+};

package/dist/src/List/ListItem.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { SpaceProps, ColorProps, TypographyProps } from "styled-system";
-type Props = React.ComponentPropsWithRef<"li"> & SpaceProps & ColorProps & TypographyProps;
-declare const ListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, Props>> & string;
-export default ListItem;
+import React from "react";
+import { SpaceProps, ColorProps, TypographyProps } from "styled-system";
+type Props = React.ComponentPropsWithRef<"li"> & SpaceProps & ColorProps & TypographyProps;
+declare const ListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, Props>> & string;
+export default ListItem;

package/dist/src/List/ListItem.js

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+import { space, color, typography } from "styled-system";
+const ListItem = styled.li(({ theme }) => ({
+    color: "currentcolor",
+    marginBottom: theme.space.x1,
+    "&:last-child": {
+        marginBottom: 0,
+    },
+}), space, color, typography);
+export default ListItem;

package/dist/src/List/index.d.ts

@@ -1,2 +1,2 @@
-export { default as ListItem } from "./ListItem";
-export { default as List } from "./List";
+export { default as ListItem } from "./ListItem";
+export { default as List } from "./List";

package/dist/src/List/index.js

@@ -0,0 +1,2 @@
+export { default as ListItem } from "./ListItem";
+export { default as List } from "./List";

package/dist/src/LoadingAnimation/LoadingAnimation.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
-interface Props extends React.ComponentPropsWithRef<"svg"> {
-    inactive?: boolean;
-}
-export default function LoadingAnimation({ inactive }: Props): React.JSX.Element;
-export {};
+import React from "react";
+interface Props extends React.ComponentPropsWithRef<"svg"> {
+    inactive?: boolean;
+}
+export default function LoadingAnimation({ inactive }: Props): React.JSX.Element;
+export {};

package/dist/src/LoadingAnimation/LoadingAnimation.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { useTheme } from "styled-components";
+export default function LoadingAnimation({ inactive = false }) {
+    const { colors } = useTheme();
+    const color1 = inactive ? colors.grey : colors.blue;
+    const color2 = inactive ? colors.lightGrey : colors.yellow;
+    return (
+    // Modified svg By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL
+    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "240px", height: "24px", viewBox: "0 0 100 10", preserveAspectRatio: "xMidYMid", role: "img" },
+        React.createElement("title", null, "Loading animation"),
+        React.createElement("g", { transform: "translate(4 5)" },
+            React.createElement("circle", { cx: "0", cy: "0", r: "4", fill: color1, transform: "scale(0.275039 0.275039)" },
+                React.createElement("animateTransform", { attributeName: "transform", type: "scale", begin: "-0.4734848484848484s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" }))),
+        React.createElement("g", { transform: "translate(22.4 5)" },
+            React.createElement("circle", { cx: "0", cy: "0", r: "4", fill: color2, transform: "scale(0.0862935 0.0862935)" },
+                React.createElement("animateTransform", { attributeName: "transform", type: "scale", begin: "-0.37878787878787873s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" }))),
+        React.createElement("g", { transform: "translate(40.0 5)" },
+            React.createElement("circle", { cx: "0", cy: "0", r: "4", fill: color1, transform: "scale(0.0000823166 0.0000823166)" },
+                React.createElement("animateTransform", { attributeName: "transform", type: "scale", begin: "-0.284090909090909s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" }))),
+        React.createElement("g", { transform: "translate(59.2 5)" },
+            React.createElement("circle", { cx: "0", cy: "0", r: "4", fill: color2, transform: "scale(0.0779504 0.0779504)" },
+                React.createElement("animateTransform", { attributeName: "transform", type: "scale", begin: "-0.18939393939393936s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" }))),
+        React.createElement("g", { transform: "translate(77.6 5)" },
+            React.createElement("circle", { cx: "0", cy: "0", r: "4", fill: color1, transform: "scale(0.262719 0.262719)" },
+                React.createElement("animateTransform", { attributeName: "transform", type: "scale", begin: "-0.09469696969696968s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" }))),
+        React.createElement("g", { transform: "translate(96 5)" },
+            React.createElement("circle", { cx: "0", cy: "0", r: "4", fill: color2, transform: "scale(0.49324 0.49324)" },
+                React.createElement("animateTransform", { attributeName: "transform", type: "scale", begin: "0s", calcMode: "spline", keySplines: "0.3 0 0.7 1;0.3 0 0.7 1", values: "0;1;0", keyTimes: "0;0.5;1", dur: "1.1363636363636362s", repeatCount: "indefinite" })))));
+}

package/dist/src/LoadingAnimation/LoadingAnimation.story.d.ts

@@ -1,19 +1,19 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Active: () => React.JSX.Element;
-export declare const Inactive: () => React.JSX.Element;
-export declare const PageExampleActive: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const PageExampleInactive: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Active: () => React.JSX.Element;
+export declare const Inactive: () => React.JSX.Element;
+export declare const PageExampleActive: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const PageExampleInactive: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/LoadingAnimation/LoadingAnimation.story.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { LoadingAnimation } from ".";
+import { Overlay, Box, Flex, Text, Alert, ControlIcon } from "../index";
+export default {
+    title: "Components/LoadingAnimation",
+};
+export const Active = () => React.createElement(LoadingAnimation, null, "Example");
+export const Inactive = () => React.createElement(LoadingAnimation, { inactive: true }, "Example");
+export const PageExampleActive = () => (React.createElement(Overlay, { flexDirection: "column", m: { extraSmall: "x2", small: "x3" } },
+    React.createElement(Flex, { flexGrow: 2, flexDirection: "column", justifyContent: "center", margin: "auto", mb: "x4" },
+        React.createElement(Text, { mb: "x2", fontWeight: "medium", textAlign: "right" }, "1/4"),
+        React.createElement(Box, { mb: "x1" },
+            React.createElement(LoadingAnimation, null)),
+        React.createElement(Text, { fontSize: "small", color: "darkGrey" }, "Applying action ...")),
+    React.createElement(Flex, { justifyContent: "center", mb: "x1" },
+        React.createElement(ControlIcon, { icon: "refresh", disabled: true, mr: "x1", label: "Retry" }),
+        React.createElement(ControlIcon, { icon: "close", label: "Abort" }))));
+PageExampleActive.story = {
+    name: "Page example - active",
+};
+export const PageExampleInactive = () => (React.createElement(Overlay, { flexDirection: "column", m: { extraSmall: "x2", small: "x3" } },
+    React.createElement(Flex, { flexGrow: 2, flexDirection: "column", justifyContent: "center", margin: "auto", mb: "x4" },
+        React.createElement(Text, { mb: "x2", fontWeight: "medium", color: "grey", textAlign: "right" }, "1/4"),
+        React.createElement(Box, { mb: "x1" },
+            React.createElement(LoadingAnimation, { inactive: true })),
+        React.createElement(Text, { fontSize: "small", color: "grey" }, "Applying action ...")),
+    React.createElement(Alert, { type: "warning", mb: "x2", position: "absolute", bottom: "x8" }, "This action takes longer than expected. Try again..."),
+    React.createElement(Flex, { justifyContent: "center", mb: "x1" },
+        React.createElement(ControlIcon, { icon: "refresh", mr: "x1", label: "Retry" }),
+        React.createElement(ControlIcon, { icon: "close", label: "Abort" }))));
+PageExampleInactive.story = {
+    name: "Page example - inactive",
+};

package/dist/src/LoadingAnimation/index.d.ts

@@ -1 +1 @@
-export { default as LoadingAnimation } from "./LoadingAnimation";
+export { default as LoadingAnimation } from "./LoadingAnimation";

package/dist/src/LoadingAnimation/index.js

@@ -0,0 +1 @@
+export { default as LoadingAnimation } from "./LoadingAnimation";

package/dist/src/{Tooltip2 → MiniTooltip}/index.d.ts

@@ -1,10 +1,10 @@
-import React, { ReactNode } from "react";
-type TooltipProps = {
-    children: ReactNode;
-    content: ReactNode;
-    hideTooltip?: boolean;
-    sideOffset?: number;
-    delayDuration?: number;
-};
-export declare function Tooltip({ children, content, sideOffset, hideTooltip, delayDuration }: TooltipProps): React.JSX.Element;
-export {};
+import React, { ReactNode } from "react";
+type TooltipProps = {
+    children: ReactNode;
+    content: ReactNode;
+    hideTooltip?: boolean;
+    sideOffset?: number;
+    delayDuration?: number;
+};
+export declare function MiniTooltip({ children, content, sideOffset, hideTooltip, delayDuration, }: TooltipProps): React.JSX.Element;
+export {};

package/dist/src/MiniTooltip/index.js

@@ -0,0 +1,83 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import styled, { keyframes } from "styled-components";
+import { transparentize } from "polished";
+import React from "react";
+export function MiniTooltip({ children, content, sideOffset = 4, hideTooltip = false, delayDuration = 700, }) {
+    if (hideTooltip) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    return (React.createElement(TooltipPrimitive.Provider, { delayDuration: delayDuration },
+        React.createElement(TooltipPrimitive.Root, null,
+            React.createElement(TooltipPrimitive.Trigger, { asChild: true }, children),
+            React.createElement(TooltipPrimitive.Portal, null,
+                React.createElement(TooltipContent, { sideOffset: sideOffset }, content)))));
+}
+const slideUpAndFade = keyframes `
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const slideRightAndFade = keyframes `
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+const slideDownAndFade = keyframes `
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const slideLeftAndFade = keyframes `
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+const TooltipContent = styled(TooltipPrimitive.Content) `
+  font-family: ${({ theme }) => theme.fonts.base};
+  white-space: nowrap;
+  font-size: ${({ theme }) => theme.fontSizes.smaller};
+  line-height: ${({ theme }) => theme.lineHeights.smallerText};
+  color: ${({ theme }) => theme.colors.whiteGrey};
+  background-color: ${({ theme }) => transparentize(0.05, theme.colors.blackBlue)};
+  border-radius: ${({ theme }) => theme.radii.medium};
+  margin-top: ${({ theme }) => theme.space.half};
+  padding: ${({ theme }) => `${theme.space.x0_25} ${theme.space.x0_75}`};
+  z-index: ${({ theme }) => theme.zIndices.aboveOverlay};
+  pointer-events: none;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+
+  &[data-state="delayed-open"][data-side="top"] {
+    animation-name: ${slideUpAndFade};
+  }
+  &[data-state="delayed-open"][data-side="right"] {
+    animation-name: ${slideRightAndFade};
+  }
+  &[data-state="delayed-open"][data-side="bottom"] {
+    animation-name: ${slideDownAndFade};
+  }
+  &[data-state="delayed-open"][data-side="left"] {
+    animation-name: ${slideLeftAndFade};
+  }
+`;

package/dist/src/Modal/Modal.d.ts

@@ -1,25 +1,25 @@
-import React from "react";
-type ModalProps = {
-    isOpen?: boolean;
-    title?: string;
-    ariaLabel?: string;
-    onRequestClose?: (...args: any[]) => any;
-    closeAriaLabel?: string;
-    onAfterOpen?: (...args: any[]) => any;
-    shouldFocusAfterRender?: boolean;
-    shouldReturnFocusAfterClose?: boolean;
-    ariaDescribedBy?: string;
-    maxWidth?: string;
-    portalClassName?: string;
-    overlayClassName?: string;
-    className?: string;
-    id?: string;
-    appElement?: JSX.Element;
-    ariaHideApp?: boolean;
-    footerContent?: React.ReactNode;
-    parentSelector?: (...args: any) => HTMLElement;
-};
-declare const Modal: React.FC<React.PropsWithChildren<ModalProps>> & {
-    setAppElement: (element: string | HTMLElement) => void;
-};
-export default Modal;
+import React from "react";
+type ModalProps = {
+    isOpen?: boolean;
+    title?: string;
+    ariaLabel?: string;
+    onRequestClose?: (...args: any[]) => any;
+    closeAriaLabel?: string;
+    onAfterOpen?: (...args: any[]) => any;
+    shouldFocusAfterRender?: boolean;
+    shouldReturnFocusAfterClose?: boolean;
+    ariaDescribedBy?: string;
+    maxWidth?: string;
+    portalClassName?: string;
+    overlayClassName?: string;
+    className?: string;
+    id?: string;
+    appElement?: JSX.Element;
+    ariaHideApp?: boolean;
+    footerContent?: React.ReactNode;
+    parentSelector?: (...args: any) => HTMLElement;
+};
+declare const Modal: React.FC<React.PropsWithChildren<ModalProps>> & {
+    setAppElement: (element: string | HTMLElement) => void;
+};
+export default Modal;

package/dist/src/Modal/Modal.js

@@ -0,0 +1,80 @@
+import React, { useContext } from "react";
+import styled, { ThemeContext, useTheme } from "styled-components";
+import ReactModal from "react-modal";
+import { transparentize } from "polished";
+import { Heading2 } from "../Type";
+import { useScrollLock } from "../utils/useScrollLock";
+import ModalContent from "./ModalContent";
+import ModalFooter from "./ModalFooter";
+import ModalHeader from "./ModalHeader";
+import ModalCloseButton from "./ModalCloseButton";
+const overlayStyle = (theme) => ({
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: transparentize(0.5, theme.colors.blackBlue),
+    zIndex: theme.zIndices.overlay,
+});
+const StyledReactModal = styled(ReactModal)(({ maxWidth }) => ({
+    maxWidth,
+}), ({ theme }) => ({
+    "&:focus": {
+        outline: "none",
+    },
+    display: "flex",
+    flexDirection: "column",
+    position: "relative",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: theme.colors.white,
+    borderRadius: theme.radii.medium,
+    boxShadow: theme.shadows.large,
+    border: undefined,
+    width: "100%",
+    height: "auto",
+    maxHeight: `calc(100vh - ${theme.space.x8})`,
+    margin: `0px ${theme.space.x2}`,
+    padding: 0,
+    [`@media only screen and (max-width: ${theme.breakpoints.small})`]: {
+        width: "100%",
+        maxWidth: "100%",
+    },
+    "*": {
+        boxSizing: "border-box",
+    },
+    color: theme.colors.black,
+    fontSize: theme.fontSizes.base,
+    lineHeight: theme.lineHeights.base,
+    WebkitFontSmoothing: "antialiased",
+    MozOsxFontSmoothing: "grayscale",
+}));
+const Modal = ({ isOpen = true, shouldFocusAfterRender = true, shouldReturnFocusAfterClose = true, maxWidth = "624px", ariaHideApp = true, children, title, onRequestClose, onAfterOpen, ariaLabel, ariaDescribedBy, portalClassName, overlayClassName, className, id, appElement, footerContent, closeAriaLabel, parentSelector, }) => {
+    const modalHasHeader = Boolean(onRequestClose || title);
+    const themeContext = useContext(ThemeContext);
+    return (React.createElement(StyledReactModal, { maxWidth: maxWidth, contentLabel: ariaLabel, onRequestClose: onRequestClose, onAfterOpen: onAfterOpen, shouldFocusAfterRender: shouldFocusAfterRender, shouldReturnFocusAfterClose: shouldReturnFocusAfterClose, isOpen: isOpen, portalClassName: portalClassName, overlayClassName: overlayClassName, className: className, id: id, aria: {
+            labelledby: title ? "modal-title" : undefined,
+            describedby: ariaDescribedBy,
+        }, shouldCloseOnOverlayClick: true, shouldCloseOnEsc: true, style: {
+            overlay: overlayStyle(themeContext),
+        }, appElement: appElement, ariaHideApp: ariaHideApp, parentSelector: parentSelector },
+        React.createElement(ModalWrapper, { closeAriaLabel: closeAriaLabel, modalHasHeader: modalHasHeader, title: title, onRequestClose: onRequestClose, footerContent: footerContent }, children)));
+};
+function ModalWrapper({ modalHasHeader, title, onRequestClose, closeAriaLabel, children, footerContent, }) {
+    const theme = useTheme();
+    useScrollLock();
+    return (React.createElement(React.Fragment, null,
+        modalHasHeader && (React.createElement(ModalHeader, { hasCloseButton: Boolean(onRequestClose) },
+            title ? (React.createElement(Heading2, { id: "modal-title", mb: "none" }, title)) : (React.createElement("div", { style: { height: theme.space.x4 } })),
+            onRequestClose && React.createElement(ModalCloseButton, { onClick: onRequestClose, "aria-label": closeAriaLabel }))),
+        React.createElement(ModalContent, { hasFooter: !!footerContent }, children),
+        footerContent && React.createElement(ModalFooter, null, footerContent)));
+}
+Modal.setAppElement = ReactModal.setAppElement;
+export default Modal;