carbon-react 111.4.2 → 111.5.0

package/esm/components/card/card-row/card-row.component.js

@@ -1,34 +1,178 @@
 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 from "react";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
-import StyledCardRow from "./card-row.style";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
-const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
-const paddingSizes = {
-  small: 2,
-  medium: 3,
-  large: 4
-};
+import StyledCardRow from "./card-row.style";
 
 const CardRow = ({
   children,
   spacing = "medium",
-  ...props
+  ...rest
 }) => {
   return /*#__PURE__*/React.createElement(StyledCardRow, _extends({
     "data-element": "card-row",
-    py: paddingSizes[spacing]
-  }, props), children);
+    spacing: spacing
+  }, filterStyledSystemPaddingProps(rest)), children);
 };
 
 CardRow.propTypes = {
-  /** Styled system padding props */
-  ...paddingPropTypes,
-  children: PropTypes.node.isRequired,
-
-  /** Spacing prop is set in Card and defines the padding for the CardRow (the first CardRow has no padding by default). For more granular control of CardRow padding these can be over-ridden by Padding props from styled-system (see table below). */
-  spacing: PropTypes.oneOf(["small", "medium", "large"])
+  "children": PropTypes.node,
+  "p": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "padding": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pl": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "px": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "py": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "spacing": PropTypes.oneOf(["large", "medium", "small"])
 };
+CardRow.displayName = "CardRow";
 export default CardRow;

package/esm/components/card/card-row/card-row.style.d.ts

@@ -0,0 +1,11 @@
+import { PaddingProps } from "styled-system";
+import { CardSpacing } from "../card.config";
+export interface StyledCardRowProps extends PaddingProps {
+    /**
+     * Spacing prop is set in Card and defines the padding for the CardRow (the first CardRow has no padding by default).
+     * For more granular control of CardRow padding these can be over-ridden by Padding props from styled-system.
+     */
+    spacing: CardSpacing;
+}
+declare const StyledCardRow: import("styled-components").StyledComponent<"div", any, StyledCardRowProps, never>;
+export default StyledCardRow;

package/esm/components/card/card-row/card-row.style.js

@@ -1,15 +1,23 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { padding } from "styled-system";
-import PropTypes from "prop-types";
-import BaseTheme from "../../../style/themes/base";
+import baseTheme from "../../../style/themes/base";
+const paddingSizes = {
+  small: "var(--spacing200)",
+  medium: "var(--spacing300)",
+  large: "var(--spacing400)"
+};
 const StyledCardRow = styled.div`
-  ${padding}
   display: flex;
+  ${({
+  spacing
+}) => css`
+    padding-top: ${paddingSizes[spacing]};
+    padding-bottom: ${paddingSizes[spacing]};
+  `}
+
+  ${padding}
 `;
-StyledCardRow.propTypes = {
-  theme: PropTypes.object
-};
 StyledCardRow.defaultProps = {
-  theme: BaseTheme
+  theme: baseTheme
 };
 export default StyledCardRow;

package/esm/components/card/card-row/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./card-row";
+export { default } from "./card-row.component";
+export type { CardRowProps } from "./card-row.component";

package/esm/components/card/card.component.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { CardSpacing } from "./card.config";
+export interface CardProps extends MarginProps {
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-element"?: string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-role"?: string;
+    /**
+     * [DEPRECATED - use `data-role` instead]
+     * Identifier used for testing purposes, applied to the root element of the component.
+     * */
+    dataRole?: string;
+    /** Action to be executed when card is clicked or enter pressed */
+    action?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /** Style value for width of card */
+    cardWidth?: string;
+    /** Child nodes */
+    children: React.ReactNode;
+    /** Flag to indicate if card is draggable */
+    draggable?: boolean;
+    /** Flag to indicate if card is interactive */
+    interactive?: boolean;
+    /** Size of card for applying padding */
+    spacing?: CardSpacing;
+}
+declare const Card: {
+    ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, interactive, spacing, ...rest }: CardProps): JSX.Element;
+    displayName: string;
+};
+export default Card;

package/esm/components/card/card.component.js

@@ -1,95 +1,234 @@
 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 from "react";
+import React, { useCallback } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import StyledCard from "./card.style";
 import Icon from "../icon";
-import CardRow from "./card-row/card-row.component";
-import CardFooter from "./card-footer/card-footer.component";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+import { CardRow, CardFooter } from ".";
+import Logger from "../../__internal__/utils/logger";
+
+function hasDisplayName(child, displayName) {
+  return child.type.displayName === displayName;
+}
+
+let isDeprecationWarningTriggered = false;
 
 const Card = ({
+  "data-element": dataElement,
+  "data-role": dataRole,
+  dataRole: oldDataRole,
   action,
   children,
-  cardWidth,
-  interactive,
+  cardWidth = "500px",
   draggable,
-  spacing,
-  dataRole,
+  interactive,
+  spacing = "medium",
   ...rest
 }) => {
-  const handleClick = ev => {
-    if (!draggable && action) {
-      action(ev);
-    }
-  };
-
-  const renderChildren = () => {
-    return React.Children.map(children, (child, index) => {
-      if (child.type === CardRow || child.type === CardFooter) {
-        if (index === 0) {
-          const childProps = {
-            spacing,
-            ...child.props
-          };
+  if (!isDeprecationWarningTriggered && oldDataRole) {
+    isDeprecationWarningTriggered = true;
+    Logger.deprecate("The `dataRole` prop of `Card` is now deprecated. Please use the kebab-case version `data-role` instead.");
+  }
 
-          if (child.type !== CardFooter) {
-            const pad = React.Children.toArray(children).filter(row => row.type === CardRow).length === 1 ? "pt" : "py";
-            childProps[pad] = 0;
-          }
-
-          return /*#__PURE__*/React.cloneElement(child, childProps);
-        }
-
-        return /*#__PURE__*/React.cloneElement(child, {
-          spacing
-        });
-      }
-
-      return child;
+  const renderChildren = useCallback(() => React.Children.map(children, (child, index) => {
+    if (! /*#__PURE__*/React.isValidElement(child) || /*#__PURE__*/React.isValidElement(child) && !hasDisplayName(child, CardRow.displayName) && !hasDisplayName(child, CardFooter.displayName)) return child;
+    if (index !== 0) return /*#__PURE__*/React.cloneElement(child, {
+      spacing
     });
-  };
+    const childProps = {
+      spacing,
+      ...child.props
+    };
 
-  const onClickHandler = interactive ? handleClick : null;
-  const interactiveProps = interactive ? {
-    tabIndex: 0,
-    type: "button"
-  } : undefined;
+    if (hasDisplayName(child, CardRow.displayName)) {
+      const pad = React.Children.toArray(children).filter(row => /*#__PURE__*/React.isValidElement(row) && hasDisplayName(row, CardRow.displayName)).length === 1 ? "pt" : "py";
+      childProps[pad] = 0;
+    }
+
+    return /*#__PURE__*/React.cloneElement(child, childProps);
+  }), [children, spacing]);
   return /*#__PURE__*/React.createElement(StyledCard, _extends({
     "data-component": "card",
+    "data-element": dataElement,
+    "data-role": dataRole || oldDataRole,
     cardWidth: cardWidth,
-    interactive: interactive,
-    draggable: draggable,
+    interactive: !!interactive,
+    draggable: !!draggable,
     spacing: spacing,
-    onClick: onClickHandler,
-    "data-role": dataRole
-  }, interactiveProps, rest), draggable && /*#__PURE__*/React.createElement(Icon, {
+    onClick: interactive && !draggable ? action : undefined
+  }, interactive && {
+    tabIndex: 0,
+    type: "button"
+  }, filterStyledSystemMarginProps(rest)), draggable && /*#__PURE__*/React.createElement(Icon, {
     type: "drag"
   }), renderChildren());
 };
 
-Card.defaultProps = {
-  spacing: "medium"
-};
-Card.propTypes = { ...marginPropTypes,
-
-  /** action to be executed when card is clicked or enter pressed */
-  action: PropTypes.func,
-  children: PropTypes.node.isRequired,
-
-  /** style value for width of card */
-  cardWidth: PropTypes.string,
-
-  /** flag to indicate if card is interactive */
-  interactive: PropTypes.bool,
-
-  /** flag to indicate if card is draggable */
-  draggable: PropTypes.bool,
-
-  /** size of card for applying padding (small | medium | large) */
-  spacing: PropTypes.oneOf(["small", "medium", "large"]),
-  dataRole: PropTypes.string
+Card.propTypes = {
+  "action": PropTypes.func,
+  "cardWidth": PropTypes.string,
+  "children": PropTypes.node,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "dataRole": PropTypes.string,
+  "draggable": PropTypes.bool,
+  "interactive": PropTypes.bool,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "spacing": PropTypes.oneOf(["large", "medium", "small"])
 };
+Card.displayName = "Card";
 export default Card;

package/esm/components/card/card.config.d.ts

@@ -0,0 +1,4 @@
+export declare const CARD_SPACING: readonly ["small", "medium", "large"];
+export declare const CARD_ALIGNS: readonly ["left", "center", "right"];
+export declare type CardAlign = typeof CARD_ALIGNS[number];
+export declare type CardSpacing = typeof CARD_SPACING[number];

package/esm/components/card/card.config.js

@@ -1,3 +1,2 @@
-// eslint-disable-next-line import/prefer-default-export
-export const CARD_SIZES = ["small", "medium", "large"];
-export const CARD_ALIGNS = ["center", "left", "right"];
+export const CARD_SPACING = ["small", "medium", "large"];
+export const CARD_ALIGNS = ["left", "center", "right"];

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

@@ -0,0 +1,10 @@
+import { MarginProps } from "styled-system";
+import { CardSpacing } from "./card.config";
+export interface StyledCardProps extends MarginProps {
+    cardWidth: string;
+    interactive: boolean;
+    draggable: boolean;
+    spacing: CardSpacing;
+}
+declare const StyledCard: import("styled-components").StyledComponent<"div", any, StyledCardProps, never>;
+export default StyledCard;

package/esm/components/card/card.style.js

@@ -1,8 +1,6 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
-import { CARD_SIZES } from "./card.config";
 const paddingSizes = {
   small: "0 24px",
   medium: "0 32px",
@@ -46,15 +44,6 @@ const StyledCard = styled.div`
   `}
 `;
 StyledCard.defaultProps = {
-  cardWidth: "500px",
-  spacing: "medium",
   theme: baseTheme
 };
-StyledCard.propTypes = {
-  cardWidth: PropTypes.string,
-  interactive: PropTypes.bool,
-  draggable: PropTypes.bool,
-  spacing: PropTypes.oneOf(CARD_SIZES),
-  theme: PropTypes.object
-};
 export default StyledCard;

package/esm/components/card/index.d.ts

@@ -1,4 +1,8 @@
-export { default, default as Card } from "./card";
+export { default, default as Card } from "./card.component";
+export type { CardProps } from "./card.component";
 export { default as CardColumn } from "./card-column";
+export type { CardColumnProps } from "./card-column";
 export { default as CardFooter } from "./card-footer";
+export type { CardFooterProps } from "./card-footer";
 export { default as CardRow } from "./card-row";
+export type { CardRowProps } from "./card-row";

package/lib/components/box/box.component.js

@@ -91,5 +91,6 @@ const Box = _styledComponents.default.div`
 Box.defaultProps = {
   theme: _base.default
 };
+Box.displayName = "Box";
 var _default = Box;
 exports.default = _default;