carbon-react 106.6.1 → 106.6.4

package/esm/components/button-bar/button-bar.style.js

@@ -1,32 +1,26 @@
 import styled, { css } from "styled-components";
 import { space } from "styled-system";
-import PropTypes from "prop-types";
-import propTypes from "@styled-system/prop-types";
 import BaseTheme from "../../style/themes/base";
 import StyledIcon from "../icon/icon.style";
-const ButtonBar = styled.div`
+const StyledButtonBar = styled.div`
   ${space}
-  ${stylingForType}
-`;
 
-function stylingForType({
+  ${({
+  fullWidth,
   size
-}) {
-  return css`
-    ${({
-    fullWidth
-  }) => fullWidth && css`
+}) => css`
+    ${fullWidth && css`
+      width: 100%;
+      display: flex;
+      button {
+        box-sizing: content-box;
+        padding: 0;
         width: 100%;
-        display: flex;
-        button {
-          box-sizing: content-box;
-          padding: 0;
-          width: 100%;
-          ${size === "small" && "min-height: 28px"}
-          ${size === "medium" && "min-height: 36px"}
+        ${size === "small" && "min-height: 28px"}
+        ${size === "medium" && "min-height: 36px"}
           ${size === "large" && "min-height: 44px"}
-        }
-      `}
+      }
+    `}
 
     button {
       margin: 0;
@@ -57,19 +51,10 @@ function stylingForType({
         color: var(--colorsActionMajor500);
       }
     }
-  `;
-}
-
-ButtonBar.defaultProps = {
+  `}
+`;
+StyledButtonBar.defaultProps = {
   theme: BaseTheme,
   size: "medium"
 };
-ButtonBar.propTypes = {
-  /** Styled system spacing props */
-  ...propTypes.space,
-
-  /** Assigns a size to the button: "small" | "medium" | "large" */
-  size: PropTypes.oneOf(["small", "medium", "large"]),
-  children: PropTypes.node.isRequired
-};
-export default ButtonBar;
+export default StyledButtonBar;

package/esm/components/button-bar/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./button-bar";
+export { default } from "./button-bar.component";
+export type { ButtonBarProps } from "./button-bar.component";

package/esm/components/dismissible-box/dismissible-box.style.d.ts

@@ -1,3 +1,2 @@
-declare var _default: import("styled-components").StyledComponent<typeof Box, any, {}, never>;
+declare var _default: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps, never>;
 export default _default;
-import Box from "../box";

package/esm/components/drawer/drawer.style.d.ts

@@ -2,9 +2,8 @@ export const StyledSidebarHeader: import("styled-components").StyledComponent<"d
 export const StyledDrawerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledDrawerContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledDrawerChildren: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledDrawerSidebar: import("styled-components").StyledComponent<typeof Box, any, {}, never>;
+export const StyledDrawerSidebar: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps, never>;
 export const StyledSidebarTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledButton: import("styled-components").StyledComponent<"button", any, {
     type: "button";
 }, "type">;
-import Box from "../box";

package/esm/components/duelling-picklist/picklist/picklist.style.d.ts

@@ -1,5 +1,4 @@
-export const StyledPicklist: import("styled-components").StyledComponent<typeof Box, any, {
-    as: "ul";
+export const StyledPicklist: import("styled-components").StyledComponent<"div", any, import("../../box").BoxProps & {
+    as: string;
 }, "as">;
 export const StyledEmptyContainer: import("styled-components").StyledComponent<"li", any, {}, never>;
-import Box from "../../box";

package/esm/components/flat-table/flat-table.style.d.ts

@@ -1,5 +1,4 @@
-export const StyledFlatTableWrapper: import("styled-components").StyledComponent<typeof Box, any, {}, never>;
+export const StyledFlatTableWrapper: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps, never>;
 export const StyledFlatTable: import("styled-components").StyledComponent<"table", any, {}, never>;
 export const StyledFlatTableFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledTableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-import Box from "../box";

package/esm/components/form/form.component.js

@@ -27,6 +27,7 @@ const Form = ({
   } = useContext(SidebarContext);
   const formRef = useRef();
   const formFooterRef = useRef();
+  const renderFooter = !!(saveButton || leftSideButtons || rightSideButtons || errorCount || warningCount);
   return /*#__PURE__*/React.createElement(StyledForm, _extends({
     ref: formRef,
     stickyFooter: stickyFooter,
@@ -40,7 +41,7 @@ const Form = ({
     "data-element": "form-content",
     stickyFooter: stickyFooter,
     className: stickyFooter ? "sticky" : ""
-  }, children), /*#__PURE__*/React.createElement(StyledFormFooter, {
+  }, children), renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, {
     "data-element": "form-footer",
     className: stickyFooter ? "sticky" : "",
     ref: formFooterRef,

package/esm/components/link/link.component.js

@@ -86,11 +86,7 @@ const Link = /*#__PURE__*/React.forwardRef(({
       type = "button";
     }
 
-    return /*#__PURE__*/React.createElement(type, { ...componentProps,
-      ...(type === "button" && {
-        role: "link"
-      })
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, renderLinkIcon(), /*#__PURE__*/React.createElement(StyledContent, null, isSkipLink ? l.link.skipLinkLabel() : children), renderLinkIcon("right")));
+    return /*#__PURE__*/React.createElement(type, componentProps, /*#__PURE__*/React.createElement(React.Fragment, null, renderLinkIcon(), /*#__PURE__*/React.createElement(StyledContent, null, isSkipLink ? l.link.skipLinkLabel() : children), renderLinkIcon("right")));
   };
 
   return /*#__PURE__*/React.createElement(StyledLink, _extends({

package/esm/components/menu/__internal__/spec-helper/index.js

@@ -9,7 +9,8 @@ const events = {
 };
 
 const openSubmenu = wrapper => {
-  const menuItem = wrapper.find('[data-component="submenu-wrapper"]').find("a");
+  const menuWrapper = wrapper.find('[data-component="submenu-wrapper"]');
+  const menuItem = menuWrapper.exists("a") ? menuWrapper.find("a") : menuWrapper.find("button");
   menuItem.getDOMNode().focus();
   act(() => {
     wrapper.find(StyledMenuItemWrapper).at(0).props().onKeyDown(events.space);

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -27,6 +27,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   asPassiveItem,
   onSubmenuOpen,
   onSubmenuClose,
+  onClick,
   ...rest
 }, ref) => {
   const [blockDoubleFocus, setBlockDoubleFocus] = useState(false);
@@ -188,6 +189,17 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       closeSubmenu();
     }
   }, [closeSubmenu]);
+
+  const handleClick = event => {
+    if (clickToOpen) {
+      openSubmenu();
+    }
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
   useEffect(() => {
     if (characterString !== "") {
       const nextIndex = characterNavigation(characterString, React.Children.toArray(formattedChildren), submenuFocusIndex);
@@ -241,7 +253,6 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     "data-component": "submenu-wrapper",
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
     onMouseLeave: () => closeSubmenu(),
-    onClick: clickToOpen ? () => openSubmenu() : undefined,
     ref: submenuRef,
     isSubmenuOpen: submenuOpen
   }, /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({}, rest, {
@@ -256,14 +267,17 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     hasSubmenu: true,
     showDropdownArrow: showDropdownArrow,
     onKeyDown: handleKeyDown,
+    onClick: handleClick,
     clickToOpen: clickToOpen,
     href: href,
-    maxWidth: maxWidth
+    maxWidth: maxWidth,
+    "aria-expanded": submenuOpen
   }), title), submenuOpen && /*#__PURE__*/React.createElement(StyledSubmenu, {
     "data-component": "submenu",
     submenuDirection: submenuDirection,
     variant: variant,
-    menuType: menuContext.menuType
+    menuType: menuContext.menuType,
+    role: "list"
   }, React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
     value: {
       isFocused: !blockDoubleFocus && submenuFocusIndex === index,
@@ -320,6 +334,9 @@ Submenu.propTypes = {
   onSubmenuOpen: PropTypes.func,
 
   /** Callback triggered when submenu closes. Only valid with submenu prop */
-  onSubmenuClose: PropTypes.func
+  onSubmenuClose: PropTypes.func,
+
+  /** Callback triggered when the top-level menu item is clicked */
+  onClick: PropTypes.func
 };
 export default Submenu;

package/esm/components/menu/menu.component.js

@@ -36,7 +36,8 @@ const Menu = ({
     "data-component": "menu",
     menuType: menuType
   }, rest, {
-    ref: ref
+    ref: ref,
+    role: "list"
   }), React.Children.map(children, (child, index) => {
     const isFocused = focusedItemIndex === index;
     return /*#__PURE__*/React.createElement(MenuContext.Provider, {

package/esm/components/menu/scrollable-block/scrollable-block.component.js

@@ -29,12 +29,14 @@ const ScrollableBlock = ({
   return /*#__PURE__*/React.createElement(StyledScrollableBlock, _extends({
     "data-component": "submenu-scrollable-block",
     menuType: menuContext.menuType,
-    variant: variant
+    variant: variant,
+    role: "presentation"
   }, rest), /*#__PURE__*/React.createElement(Box, {
     overflowY: "scroll",
     scrollVariant: scrollVariants[menuContext.menuType],
     height: height,
-    p: 0
+    p: 0,
+    role: "presentation"
   }, React.Children.map(children, (child, index) => {
     let isFocused = false;
     const blockItemFocused = focusIndex >= blockIndex;

package/esm/components/modal/modal.component.js

@@ -6,7 +6,7 @@ import { TransitionGroup, CSSTransition } from "react-transition-group";
 import useScrollBlock from "../../hooks/__internal__/useScrollBlock";
 import Portal from "../portal";
 import Events from "../../__internal__/utils/helpers/events";
-import ModalManager from "./__internal__/modal-manager";
+import useModalManager from "../../hooks/__internal__/useModalManager";
 import { StyledModal, StyledModalBackground } from "./modal.style";
 export const ModalContext = /*#__PURE__*/React.createContext({});
 
@@ -23,8 +23,6 @@ const Modal = ({
   const ref = useRef();
   const backgroundNodeRef = useRef();
   const contentNodeRef = useRef();
-  const listenerAdded = useRef(false);
-  const modalRegistered = useRef(false);
   const [isAnimationComplete, setAnimationComplete] = useState(false);
   const [triggerRefocusFlag, setTriggerRefocusFlag] = useState(false);
   const {
@@ -50,67 +48,12 @@ const Modal = ({
     };
   }, [allowScroll, enableBackgroundUI]);
   const closeModal = useCallback(ev => {
-    const isTopmost = ModalManager.isTopmost(ref.current);
-
-    if (onCancel && !disableClose && !disableEscKey && Events.isEscKey(ev) && isTopmost) {
+    if (onCancel && !disableClose && !disableEscKey && Events.isEscKey(ev)) {
       ev.stopImmediatePropagation();
       onCancel(ev);
     }
   }, [disableClose, disableEscKey, onCancel]);
-  const addListener = useCallback(() => {
-    /* istanbul ignore else */
-    if (!listenerAdded.current) {
-      document.addEventListener("keyup", closeModal);
-      listenerAdded.current = true;
-    }
-  }, [closeModal]);
-  const removeListener = useCallback(() => {
-    if (listenerAdded.current) {
-      document.removeEventListener("keyup", closeModal);
-      listenerAdded.current = false;
-    }
-  }, [closeModal]);
-  useEffect(() => {
-    if (open) {
-      addListener();
-    }
-
-    if (!open) {
-      removeListener();
-    }
-  }, [addListener, open, removeListener]);
-  useEffect(() => {
-    return () => {
-      removeListener();
-    };
-  }, [removeListener]);
-  const registerModal = useCallback(() => {
-    /* istanbul ignore else */
-    if (!modalRegistered.current) {
-      ModalManager.addModal(ref.current, setTriggerRefocusFlag);
-      modalRegistered.current = true;
-    }
-  }, []);
-  const unregisterModal = useCallback(() => {
-    if (modalRegistered.current) {
-      ModalManager.removeModal(ref.current);
-      modalRegistered.current = false;
-    }
-  }, []);
-  useEffect(() => {
-    if (open) {
-      registerModal();
-    }
-
-    if (!open) {
-      unregisterModal();
-    }
-  }, [open, registerModal, unregisterModal]);
-  useEffect(() => {
-    return () => {
-      unregisterModal();
-    };
-  }, [unregisterModal]);
+  useModalManager(open, closeModal, ref, setTriggerRefocusFlag);
   let background;
   let content;
 

package/esm/components/toast/toast.component.js

@@ -8,9 +8,9 @@ import Icon from "../icon";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { ToastStyle, TypeIcon, ToastContentStyle, ToastWrapper, StyledPortal } from "./toast.style";
 import IconButton from "../icon-button";
-import ModalManager from "../modal/__internal__/modal-manager";
 import Events from "../../__internal__/utils/helpers/events";
 import useLocale from "../../hooks/__internal__/useLocale";
+import useModalManager from "../../hooks/__internal__/useModalManager";
 import Logger from "../../__internal__/utils/logger";
 let deprecatedWarnTriggered = false;
 
@@ -42,22 +42,12 @@ const Toast = ({
     return classNames(className);
   }, [className]);
   const dismissToast = useCallback(ev => {
-    const isTopmost = ModalManager.isTopmost(toastRef.current);
-
-    if (onDismiss && Events.isEscKey(ev) && isTopmost) {
+    if (onDismiss && Events.isEscKey(ev)) {
       ev.stopImmediatePropagation();
       onDismiss(ev);
     }
   }, [onDismiss]);
-  useEffect(() => {
-    const currentElement = toastRef.current;
-    ModalManager.addModal(currentElement);
-    document.addEventListener("keyup", dismissToast);
-    return () => {
-      ModalManager.removeModal(currentElement);
-      document.removeEventListener("keyup", dismissToast);
-    };
-  }, [dismissToast]);
+  useModalManager(open, dismissToast, toastRef);
   useEffect(() => {
     clearTimeout(timer.current);
 

package/esm/hooks/__internal__/useModalManager/index.d.ts

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

package/esm/hooks/__internal__/useModalManager/index.js

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

package/esm/hooks/__internal__/useModalManager/useModalManager.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const useModalManager: (open: boolean, closeModal: (e: KeyboardEvent) => void, modalRef: React.RefObject<HTMLElement>, setTriggerRefocusFlag?: ((flag: boolean) => void) | undefined) => void;
+export default useModalManager;

package/esm/hooks/__internal__/useModalManager/useModalManager.js

@@ -0,0 +1,66 @@
+import { useEffect, useRef, useCallback } from "react";
+import ModalManager from "../../../components/modal/__internal__/modal-manager";
+
+const useModalManager = (open, closeModal, modalRef, setTriggerRefocusFlag) => {
+  const listenerAdded = useRef(false);
+  const modalRegistered = useRef(false);
+  const handleClose = useCallback(ev => {
+    const isTopmost = ModalManager.isTopmost(modalRef.current);
+
+    if (isTopmost) {
+      closeModal(ev);
+    }
+  }, [modalRef, closeModal]);
+  const addListener = useCallback(() => {
+    /* istanbul ignore else */
+    if (!listenerAdded.current) {
+      document.addEventListener("keyup", handleClose);
+      listenerAdded.current = true;
+    }
+  }, [handleClose]);
+  const removeListener = useCallback(() => {
+    if (listenerAdded.current) {
+      document.removeEventListener("keyup", handleClose);
+      listenerAdded.current = false;
+    }
+  }, [handleClose]);
+  useEffect(() => {
+    if (open) {
+      addListener();
+    } else {
+      removeListener();
+    }
+  }, [addListener, open, removeListener]);
+  useEffect(() => {
+    return () => {
+      removeListener();
+    };
+  }, [removeListener]);
+  const registerModal = useCallback(() => {
+    /* istanbul ignore else */
+    if (!modalRegistered.current) {
+      ModalManager.addModal(modalRef.current, setTriggerRefocusFlag);
+      modalRegistered.current = true;
+    }
+  }, [modalRef, setTriggerRefocusFlag]);
+  const unregisterModal = useCallback(() => {
+    if (modalRegistered.current) {
+      ModalManager.removeModal(modalRef.current);
+      modalRegistered.current = false;
+    }
+  }, [modalRef]);
+  useEffect(() => {
+    if (open) {
+      registerModal();
+    } else {
+      unregisterModal();
+    }
+  }, [open, registerModal, unregisterModal]);
+  useEffect(() => {
+    return () => {
+      unregisterModal();
+    };
+  }, [unregisterModal]);
+};
+
+export default useModalManager;

package/lib/__spec_helper__/expect.d.ts

@@ -1 +1,8 @@
-export {};
+import "jest-styled-components";
+declare global {
+    namespace jest {
+        interface Matchers<R> {
+            toBeFocused(): R;
+        }
+    }
+}

package/lib/__spec_helper__/expect.js

@@ -4,9 +4,7 @@ require("jest-styled-components");
 
 var _enzyme = require("enzyme");
 
-const {
-  diff
-} = require("jest-matcher-utils");
+var _jestMatcherUtils = require("jest-matcher-utils");
 
 expect.extend({
   toBeFocused(received) {
@@ -19,7 +17,7 @@ expect.extend({
     const hint = this.utils.matcherHint("toBeFocused", "DOMNode", "", options);
 
     const positive = () => {
-      const diffString = diff(expected, DOMNode, {
+      const diffString = (0, _jestMatcherUtils.diff)(expected, DOMNode, {
         expand: this.expand
       });
       return `${hint}\n\n${// eslint-disable-next-line multiline-ternary

package/lib/__spec_helper__/test-utils.d.ts

@@ -1,34 +1,72 @@
-export function getDefaultValue(value: any): any;
-export function assertStyleMatch(styleSpec: any, component: any, opts: any): void;
-export function toCSSCase(str: any): any;
-export function hoverList(wrapper: any): (item: any) => void;
-export function selectedItemOf(wrapper: any): any;
-export function childrenFrom(node: any): any;
-export function makeArrayKeys(n: any): number[];
-export const keyboard: {};
-export function assertKeyboardTraversal({ num, nonSelectables, }: {
-    num: any;
-    nonSelectables?: any[] | undefined;
-}): (wrapper: any) => void;
-export function assertHoverTraversal({ num, nonSelectables, }: {
-    num: any;
-    nonSelectables?: any[] | undefined;
-}): (wrapper: any) => void;
-export function listFrom(wrapper: any): any;
-export function click(wrapper: any): any;
-export namespace simulate {
-    export { keydown };
-}
-export const carbonThemesJestTable: (string | Partial<import("style/themes/base/base-theme.config").ThemeObject> | undefined)[][];
+/// <reference types="react" />
+import { ReactWrapper, ShallowWrapper } from "enzyme";
+import { LayoutProps, FlexboxProps, BackgroundProps } from "styled-system";
+import { ReactTestRendererJSON } from "react-test-renderer";
 import { mockMatchMedia } from "./mock-match-media";
-export function testStyledSystemSpacing(component: any, defaults: any, styleContainer: any, assertOpts: any): void;
-export function testStyledSystemMargin(component: any, defaults: any, styleContainer: any, assertOpts: any): void;
-export function testStyledSystemPadding(component: any, defaults: any, styleContainer: any, assertOpts: any): void;
-export function testStyledSystemColor(component: any, styleContainer: any): void;
-export function testStyledSystemWidth(component: any, styleContainer: any): void;
-export function testStyledSystemLayout(component: any, styleContainer: any): void;
-export function testStyledSystemFlexBox(component: any, styleContainer: any): void;
-export function testStyledSystemBackground(component: any, styleContainer: any): void;
-export function expectConsoleOutput(message: any, type?: string): () => void;
-declare const keydown: {};
-export { mockMatchMedia };
+declare const toCSSCase: (str: string) => string;
+declare const assertStyleMatch: <Props>(styleSpec: {
+    [key: string]: string | number | undefined;
+}, component: ReactWrapper<Props, {}, import("react").Component<{}, {}, any>> | ShallowWrapper<Props, {}, import("react").Component<{}, {}, any>> | ReactTestRendererJSON | ReactTestRendererJSON[] | null, opts?: jest.Options | undefined) => void;
+declare const makeArrayKeys: (n: number) => number[];
+declare const keyMap: {
+    readonly UpArrow: 38;
+    readonly DownArrow: 40;
+    readonly RightArrow: 39;
+    readonly LeftArrow: 37;
+    readonly Enter: 13;
+    readonly Tab: 9;
+    readonly Space: 32;
+    readonly Escape: 27;
+    readonly End: 35;
+    readonly Home: 36;
+    readonly D: 68;
+    readonly E: 69;
+    readonly P: 80;
+    readonly Z: 90;
+    readonly 1: 49;
+};
+declare type Keys = keyof typeof keyMap;
+declare type MappedKeys = `press${Keys}`;
+declare type KeyboardAccumulatorType = Record<MappedKeys, () => void>;
+declare const keyboard: KeyboardAccumulatorType;
+declare type KeydownAccumulatorType = Record<MappedKeys, (wrapper: ReactWrapper<any>, options?: {
+    shiftKey: boolean;
+}) => void>;
+declare const simulate: {
+    keydown: KeydownAccumulatorType;
+};
+declare const listFrom: (wrapper: ReactWrapper) => ReactWrapper<import("enzyme").HTMLAttributes, any, import("react").Component<{}, {}, any>>;
+declare const childrenFrom: (node: ReactWrapper) => ReactWrapper<any, any, import("react").Component<{}, {}, any>>;
+declare const hoverList: (wrapper: ReactWrapper) => (item: number) => void;
+declare const click: (wrapper: ReactWrapper) => ReactWrapper<{}, {}, import("react").Component<{}, {}, any>>;
+declare const selectedItemOf: (wrapper: ReactWrapper) => number;
+declare const assertKeyboardTraversal: ({ num, nonSelectables, }: {
+    num: number;
+    nonSelectables?: number[] | undefined;
+}) => (wrapper: ReactWrapper) => void;
+declare const assertHoverTraversal: ({ num, nonSelectables, }: {
+    num: number;
+    nonSelectables?: number[] | undefined;
+}) => (wrapper: ReactWrapper) => void;
+declare const carbonThemesJestTable: (string | Partial<import("style/themes/base/base-theme.config").ThemeObject> | undefined)[][];
+declare const marginProps: readonly [readonly ["m", "margin"], readonly ["ml", "marginLeft"], readonly ["mr", "marginRight"], readonly ["mt", "marginTop"], readonly ["mb", "marginBottom"], readonly ["mx", "marginLeft"], readonly ["mx", "marginRight"], readonly ["my", "marginTop"], readonly ["my", "marginBottom"]];
+declare type MarginProps = {
+    [K in typeof marginProps[number][0]]?: string | number;
+};
+declare const paddingProps: readonly [readonly ["p", "padding"], readonly ["pl", "paddingLeft"], readonly ["pr", "paddingRight"], readonly ["pt", "paddingTop"], readonly ["pb", "paddingBottom"], readonly ["px", "paddingLeft"], readonly ["px", "paddingRight"], readonly ["py", "paddingTop"], readonly ["py", "paddingBottom"]];
+declare type PaddingProps = {
+    [K in typeof paddingProps[number][0]]?: string | number;
+};
+export declare const getDefaultValue: (value?: string | number | undefined) => string | number | undefined;
+declare const testStyledSystemMargin: (component: (spacingProps?: MarginProps | undefined) => JSX.Element, defaults?: MarginProps | undefined, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined, assertOpts?: jest.Options | undefined) => void;
+declare const testStyledSystemPadding: (component: (spacingProps?: PaddingProps | undefined) => JSX.Element, defaults?: PaddingProps | undefined, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined, assertOpts?: jest.Options | undefined) => void;
+declare const testStyledSystemSpacing: (component: (spacingProps?: MarginProps | PaddingProps | undefined) => JSX.Element, defaults?: MarginProps | PaddingProps | undefined, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined, assertOpts?: jest.Options | undefined) => void;
+declare const testStyledSystemColor: (component: (colorProperties?: any) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => void) | undefined) => void;
+declare const testStyledSystemWidth: (component: (widthProperties?: {
+    width: string;
+} | undefined) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
+declare const testStyledSystemLayout: (component: (layoutProperties?: LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
+declare const testStyledSystemFlexBox: (component: (flexboxProperties?: FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
+declare const testStyledSystemBackground: (component: (backgroundProperties?: BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | undefined) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
+declare const expectConsoleOutput: (message: string, type?: "warn" | "error") => () => void;
+export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemBackground, expectConsoleOutput, };