carbon-react 104.34.0 → 104.36.0

package/esm/__internal__/utils/helpers/with-unique-id-props/with-unique-id-props.hoc.js

@@ -0,0 +1,82 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React from "react";
+import PropTypes from "prop-types";
+import guid from "../guid";
+
+const withUniqueIdProps = WrappedComponent => {
+  let WithUniqueIdProps = /*#__PURE__*/function (_React$Component) {
+    _inherits(WithUniqueIdProps, _React$Component);
+
+    var _super = _createSuper(WithUniqueIdProps);
+
+    function WithUniqueIdProps(...args) {
+      var _this;
+
+      _classCallCheck(this, WithUniqueIdProps);
+
+      _this = _super.call(this, ...args);
+
+      _defineProperty(_assertThisInitialized(_this), "id", guid());
+
+      _defineProperty(_assertThisInitialized(_this), "name", guid());
+
+      return _this;
+    }
+
+    _createClass(WithUniqueIdProps, [{
+      key: "render",
+      value: function render() {
+        const {
+          forwardedRef,
+          id,
+          ...props
+        } = this.props;
+        return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
+          id: id || this.id,
+          name: this.name,
+          ref: forwardedRef
+        }, props));
+      }
+    }]);
+
+    return WithUniqueIdProps;
+  }(React.Component);
+
+  WithUniqueIdProps.propTypes = {
+    forwardedRef: PropTypes.object,
+    id: PropTypes.string
+  };
+  const Component = /*#__PURE__*/React.forwardRef((props, ref) => {
+    return /*#__PURE__*/React.createElement(WithUniqueIdProps, _extends({}, props, {
+      forwardedRef: ref
+    }));
+  });
+  const displayName = WrappedComponent.displayName || WrappedComponent.name || "WithUniqueIdProps(Unknown)";
+  Component.displayName = displayName.replace(/^Base/, "");
+  return Component;
+};
+
+export default withUniqueIdProps;

package/esm/__internal__/utils/logger/index.d.ts

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

package/esm/__internal__/utils/logger/index.js

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

package/esm/__internal__/utils/logger/logger.d.ts

@@ -0,0 +1,9 @@
+export default Logger;
+declare namespace Logger {
+    function setEnabledState(newState: any): void;
+    function error(message: any, opts: any): void;
+    function info(message: any, opts: any): void;
+    function log(message: any, opts: any): void;
+    function warn(message: any, opts: any): void;
+    function deprecate(message: any, opts: any): void;
+}

package/esm/__internal__/utils/logger/logger.js

@@ -0,0 +1,71 @@
+// Globally enable the logger
+let enabled = process.env.NODE_ENV !== "production";
+const delays = {};
+const groupedMessages = {}; // Log the message
+
+const log = (message, type, opts = {}) => {
+  if (enabled) {
+    if (opts.group) {
+      // if a group is defined, collect all occurrences to output together
+      groupedMessages[opts.group] = groupedMessages[opts.group] || [];
+      groupedMessages[opts.group].push(message);
+      const delay = delays[opts.group];
+
+      if (delay) {
+        clearTimeout(delay);
+      }
+
+      delays[opts.group] = setTimeout(() => {
+        console[type](groupedMessages[opts.group][0], {
+          // eslint-disable-line no-console
+          all: groupedMessages[opts.group]
+        });
+      }, 500);
+    } else {
+      // output the message
+      console[type](message); // eslint-disable-line no-console
+    }
+  }
+};
+/*
+ * Logger
+ *
+ * Logger function will only output when enabled. By default this
+ * enabled state is set when your NODE_ENV !== 'production'
+ *
+ * If you wish to enable or disable the logger globally you can import the Logger
+ * and call setEnabledState(bool) passing the newState as a boolean.
+ *
+ * Methods
+ * error - console.error
+ * info - console.info
+ * log - console.log
+ * warn - console.warn
+ * deprecate - console.warn which prepends the message with [Deprecation]
+ *
+ * You can also pass an option of 'group', this will group messages together that
+ * share the same group name and are triggered within 500ms of one another.
+ */
+
+
+const Logger = {
+  setEnabledState: newState => {
+    enabled = newState;
+  },
+  error: (message, opts) => {
+    log(message, "error", opts);
+  },
+  info: (message, opts) => {
+    log(message, "info", opts);
+  },
+  log: (message, opts) => {
+    log(message, "log", opts);
+  },
+  warn: (message, opts) => {
+    log(message, "warn", opts);
+  },
+  deprecate: (message, opts) => {
+    log(`[Deprecation] ${message}`, "warn", opts);
+  }
+};
+export default Logger;

package/esm/__internal__/validations/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./validation-icon.component";
+export { ValidationPropTypes } from "./validations";

package/esm/__internal__/validations/index.js

@@ -0,0 +1 @@
+export { default } from "./validation-icon.component";

package/esm/__internal__/validations/validation-icon.component.d.ts

@@ -0,0 +1,41 @@
+export default ValidationIcon;
+declare function ValidationIcon({ error, warning, info, size, onFocus, onBlur, iconId, tooltipId, isPartOfInput, tabIndex, onClick, tooltipPosition, tooltipFlipOverrides, ...rest }: {
+    [x: string]: any;
+    error: any;
+    warning: any;
+    info: any;
+    size: any;
+    onFocus: any;
+    onBlur: any;
+    iconId: any;
+    tooltipId: any;
+    isPartOfInput: any;
+    tabIndex: any;
+    onClick: any;
+    tooltipPosition: any;
+    tooltipFlipOverrides: any;
+}): JSX.Element | null;
+declare namespace ValidationIcon {
+    namespace propTypes {
+        const size: PropTypes.Requireable<string>;
+        const iconId: PropTypes.Requireable<string>;
+        const tooltipPosition: PropTypes.Requireable<string>;
+        function tooltipFlipOverrides(props: any, propName: any, componentName: any): Error | null;
+        const tooltipId: PropTypes.Requireable<string>;
+        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        const isPartOfInput: PropTypes.Requireable<boolean>;
+        const tabIndex: PropTypes.Requireable<number>;
+        const error: PropTypes.Requireable<string | boolean>;
+        const warning: PropTypes.Requireable<string | boolean>;
+        const info: PropTypes.Requireable<string | boolean>;
+    }
+    namespace defaultProps {
+        const tooltipPosition_1: string;
+        export { tooltipPosition_1 as tooltipPosition };
+        const tabIndex_1: number;
+        export { tabIndex_1 as tabIndex };
+    }
+}
+import PropTypes from "prop-types";

package/esm/__internal__/validations/validation-icon.component.js

@@ -0,0 +1,147 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useContext, useState } from "react";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import Icon from "../../components/icon";
+import ValidationIconStyle from "./validation-icon.style";
+import { InputContext, InputGroupContext } from "../input-behaviour";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+const getValidationType = ({
+  error,
+  warning,
+  info
+}) => {
+  if (error) return "error";
+  if (warning) return "warning";
+  if (info) return "info";
+  return "";
+};
+
+const ValidationIcon = ({
+  error,
+  warning,
+  info,
+  size,
+  onFocus,
+  onBlur,
+  iconId,
+  tooltipId,
+  isPartOfInput,
+  tabIndex,
+  onClick,
+  tooltipPosition,
+  tooltipFlipOverrides,
+  ...rest
+}) => {
+  const {
+    hasFocus,
+    hasMouseOver
+  } = useContext(InputContext);
+  const {
+    hasFocus: groupHasFocus,
+    hasMouseOver: groupHasMouseOver
+  } = useContext(InputGroupContext);
+  const [triggeredByIcon, setTriggeredByIcon] = useState(false);
+  const validationType = getValidationType({
+    error,
+    warning,
+    info
+  });
+  const validationMessage = error || warning || info;
+
+  if (typeof validationMessage !== "string") {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(ValidationIconStyle, _extends({
+    id: iconId,
+    validationType: validationType,
+    role: "tooltip",
+    "aria-label": validationMessage,
+    onClick: onClick,
+    onMouseOver: () => setTriggeredByIcon(true),
+    onMouseLeave: () => setTriggeredByIcon(false),
+    onFocus: e => {
+      setTriggeredByIcon(true);
+      if (onFocus) onFocus(e);
+    },
+    onBlur: e => {
+      setTriggeredByIcon(false);
+      if (onBlur) onBlur(e);
+    },
+    isPartOfInput: isPartOfInput
+  }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Icon, {
+    key: `${validationType}-icon`,
+    type: validationType,
+    tabIndex: tabIndex,
+    tooltipId: tooltipId,
+    tooltipMessage: validationMessage,
+    tooltipPosition: tooltipPosition,
+    tooltipVisible: hasFocus || hasMouseOver || groupHasFocus || groupHasMouseOver || triggeredByIcon,
+    tooltipFlipOverrides: isPartOfInput && !tooltipFlipOverrides ? ["top", "bottom"] : tooltipFlipOverrides,
+    isPartOfInput: isPartOfInput,
+    inputSize: size,
+    "aria-hidden": "true",
+    focusable: false
+  }));
+};
+
+ValidationIcon.propTypes = { ...marginPropTypes,
+
+  /** A small string to indicate the size of the icon */
+  size: PropTypes.oneOf(["small", "medium", "large"]),
+
+  /** The unique id of the component (used with aria-describedby for accessibility) */
+  iconId: PropTypes.string,
+
+  /** Define position of the tooltip */
+  tooltipPosition: PropTypes.string,
+
+  /** Overrides the default flip behaviour of the Tooltip, must be an array containing some or all of ["top", "bottom", "left", "right"] (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) */
+  tooltipFlipOverrides: (props, propName, componentName) => {
+    const prop = props[propName];
+    const isValid = prop && Array.isArray(prop) && prop.every(placement => ["bottom", "left", "right", "top"].includes(placement));
+
+    if (!prop || isValid) {
+      return null;
+    }
+
+    return new Error( // eslint-disable-next-line max-len
+    `The \`${propName}\` prop supplied to \`${componentName}\` must be an array containing some or all of ["top", "bottom", "left", "right"].`);
+  },
+
+  /** Id passed to the tooltip container, used for accessibility purposes. */
+  tooltipId: PropTypes.string,
+
+  /** An onClick handler */
+  onClick: PropTypes.func,
+
+  /** An onFocus handler */
+  onFocus: PropTypes.func,
+
+  /** An onBlur handler */
+  onBlur: PropTypes.func,
+
+  /** A boolean to indicate if the icon is part of an input */
+  isPartOfInput: PropTypes.bool,
+
+  /** Overrides the default tabindex of the component */
+  tabIndex: PropTypes.number,
+
+  /** Status of error validations */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** Status of warnings */
+  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** Status of info */
+  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
+};
+ValidationIcon.defaultProps = {
+  tooltipPosition: "right",
+  tabIndex: -1
+};
+export default ValidationIcon;

package/esm/__internal__/validations/validation-icon.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+
+import { ValidationPropTypes } from ".";
+
+export interface ValidationIconProps extends ValidationPropTypes {
+  /** A small string to indicate the size of the icon */
+  size?: "small" | "medium" | "large";
+  /** The unique id of the component (used with aria-describedby for accessibility) */
+  iconId?: string;
+  /** Define position of the tooltip */
+  tooltipPosition?: string;
+  /**
+   * Overrides the default flip behaviour of the Tooltip,
+   * must be an array containing some or all of ["top", "bottom", "left", "right"]
+   * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
+   */
+  tooltipFlipOverrides?: ["top" | "bottom" | "left" | "right"];
+  /** Id passed to the tooltip container, used for accessibility purposes */
+  tooltipId?: string;
+  /** An onClick handler */
+  onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
+  /** An onBlur handler */
+  onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
+  /** An onFocus handler */
+  onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
+  /** A boolean to indicate if the icon is part of an input */
+  isPartOfInput?: boolean;
+  /** Overrides the default tabindex of the component */
+  tabIndex?: number;
+  /** Margin right, given number will be multiplied by base spacing unit (8) */
+  mr?: number;
+  /** Margin left, given number will be multiplied by base spacing unit (8) */
+  ml?: number;
+}
+
+declare function ValidationIcon(props: ValidationIconProps): JSX.Element;
+
+export default ValidationIcon;

package/esm/__internal__/validations/validation-icon.style.d.ts

@@ -0,0 +1,2 @@
+export default ValidationIconStyle;
+declare const ValidationIconStyle: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/__internal__/validations/validation-icon.style.js

@@ -0,0 +1,43 @@
+import styled, { css } from "styled-components";
+import { margin } from "styled-system";
+import BaseTheme from "../../style/themes/base";
+import StyledIcon from "../../components/icon/icon.style";
+const validationIconTypes = {
+  error: "var(--colorsSemanticNegative500)",
+  info: "var(--colorsSemanticInfo500)",
+  success: "var(--colorsSemanticPositive500)",
+  warning: "var(--colorsSemanticCaution500)"
+};
+const ValidationIconStyle = styled.span`
+  background: none;
+  cursor: default;
+  display: flex;
+  align-items: center;
+  margin-top: 0;
+  margin-bottom: 0;
+  border: 0;
+  outline: none;
+
+  ${({
+  isPartOfInput
+}) => isPartOfInput && css`
+      cursor: pointer;
+    `}
+
+  ${StyledIcon}:before {
+    color: ${({
+  validationType
+}) => validationIconTypes[validationType]};
+  }
+
+  ${StyledIcon}:focus {
+    outline: solid 2px var(--colorsSemanticFocus500);
+  }
+
+  ${margin}
+`;
+ValidationIconStyle.defaultProps = {
+  validationType: "error",
+  theme: BaseTheme
+};
+export default ValidationIconStyle;

package/esm/__internal__/validations/validations.d.ts

@@ -0,0 +1,17 @@
+export interface ValidationPropTypes {
+  /** Indicate that error has occurred
+   * Pass string to display icon, tooltip and red border
+   * Pass true boolean to only display red border
+   */
+  error?: boolean | string;
+  /** Indicate additional information
+   * Pass string to display icon, tooltip and blue border
+   * Pass true boolean to only display blue border
+   */
+  info?: boolean | string;
+  /** Indicate that warning has occurred
+   * Pass string to display icon, tooltip and orange border
+   * Pass true boolean to only display orange border
+   */
+  warning?: boolean | string;
+}

package/esm/__spec_helper__/enzyme-snapshot-helper.d.ts

@@ -0,0 +1,2 @@
+export function snapshotWithoutProps(enzymeWrapper: any, propNames: any): import("enzyme-to-json").Json;
+export function noThemeSnapshot(enzymeWrapper: any): import("enzyme-to-json").Json;

package/esm/__spec_helper__/enzyme-snapshot-helper.js

@@ -0,0 +1,27 @@
+import toJson from "enzyme-to-json";
+
+function snapshotWithoutProps(enzymeWrapper, propNames) {
+  let propNameList = propNames;
+
+  if (!Array.isArray(propNames)) {
+    propNameList = [propNames];
+  }
+
+  const snapshotOptions = {
+    map: json => {
+      propNameList.forEach(prop => {
+        if (json.props[prop]) {
+          json.props[prop] = `[ ${prop} object ]`;
+        }
+      });
+      return json;
+    }
+  };
+  return toJson(enzymeWrapper, snapshotOptions);
+}
+
+function noThemeSnapshot(enzymeWrapper) {
+  return snapshotWithoutProps(enzymeWrapper, "theme");
+}
+
+export { snapshotWithoutProps, noThemeSnapshot };

package/esm/__spec_helper__/expect.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/__spec_helper__/expect.js

@@ -0,0 +1,35 @@
+import "jest-styled-components";
+import { ReactWrapper } from "enzyme";
+
+const {
+  diff
+} = require("jest-matcher-utils");
+
+expect.extend({
+  toBeFocused(received) {
+    const expected = document.activeElement;
+    const DOMNode = received instanceof ReactWrapper ? received.getDOMNode() : received;
+    const pass = this.equals(expected, DOMNode);
+    const options = {
+      isNot: this.isNot
+    };
+    const hint = this.utils.matcherHint("toBeFocused", "DOMNode", "", options);
+
+    const positive = () => {
+      const diffString = diff(expected, DOMNode, {
+        expand: this.expand
+      });
+      return `${hint}\n\n${// eslint-disable-next-line multiline-ternary
+      diffString && diffString.includes("- Expect") ? `Difference:\n\n${diffString}` : `Expected: ${this.utils.printExpected(expected)}\nReceived: ${this.utils.printReceived(DOMNode)}`}`;
+    };
+
+    const negative = () => `${hint}\n\nDOMNode should not have focus`;
+
+    const message = pass ? negative : positive;
+    return {
+      pass,
+      message
+    };
+  }
+
+});

package/esm/__spec_helper__/index.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/__spec_helper__/index.js

@@ -0,0 +1,12 @@
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import { setup } from "./mock-match-media";
+import setupResizeObserverMock from "./mock-resize-observer";
+
+require("jest-fetch-mock").enableMocks();
+
+setupResizeObserverMock();
+setup();
+Enzyme.configure({
+  adapter: new Adapter()
+});

package/esm/__spec_helper__/mock-match-media.d.ts

@@ -0,0 +1,4 @@
+declare function setup(): void;
+declare function mockMatchMedia(matches?: boolean): jest.Mock;
+
+export { setup, mockMatchMedia };

package/esm/__spec_helper__/mock-match-media.js

@@ -0,0 +1,33 @@
+let mocked = false;
+let _matches = false;
+const removeListener = jest.fn();
+export const setup = () => {
+  if (!global.window) {
+    return;
+  }
+
+  const noop = () => {};
+
+  Object.defineProperty(global.window, "matchMedia", {
+    writable: true,
+    value: query => ({
+      matches: _matches,
+      media: query,
+      onchange: null,
+      addListener: noop,
+      removeListener,
+      dispatchEvent: noop
+    })
+  });
+  mocked = true;
+};
+export const mockMatchMedia = matches => {
+  if (!mocked) {
+    throw new Error("window.matchMedia has not been mocked. Did you call setup()?");
+  }
+
+  _matches = matches;
+  return {
+    removeListener
+  };
+};

package/esm/__spec_helper__/mock-resize-observer.d.ts

@@ -0,0 +1,2 @@
+export default setupResizeObserverMock;
+declare function setupResizeObserverMock(): void;

package/esm/__spec_helper__/mock-resize-observer.js

@@ -0,0 +1,13 @@
+const setupResizeObserverMock = () => {
+  if (!global.window) {
+    return;
+  }
+
+  global.window.ResizeObserver = global.window.ResizeObserver || jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn()
+  }));
+};
+
+export default setupResizeObserverMock;

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

@@ -0,0 +1,33 @@
+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 | import("../style/themes/base").ThemeObject)[][];
+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 expectError(errorMessage: any): () => void;
+declare const keydown: {};
+export { mockMatchMedia };