carbon-react 114.0.0 → 114.2.0

package/lib/components/pod/pod.component.js

@@ -9,20 +9,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 
-var _utils = require("../../style/utils");
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
-var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
-
-var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
-
-var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-context"));
-
-var _podStyle = require("./pod.style.js");
+var _pod = require("./pod.style");
 
 var _icon = _interopRequireDefault(require("../icon"));
 
+var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -31,8 +27,12 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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); }
 
-const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
-const Pod = /*#__PURE__*/(0, _react.forwardRef)(({
+let deprecationOnEditStringWarnTriggered = false;
+let deprecationOnEditObjectWarnTriggered = false;
+
+const Pod = /*#__PURE__*/_react.default.forwardRef(({
+  "data-element": dataElement,
+  "data-role": dataRole,
   alignTitle = "left",
   border = true,
   children,
@@ -53,170 +53,57 @@ const Pod = /*#__PURE__*/(0, _react.forwardRef)(({
   variant = "primary",
   ...rest
 }, ref) => {
+  if (!deprecationOnEditStringWarnTriggered && typeof onEdit === "string") {
+    deprecationOnEditStringWarnTriggered = true;
+
+    _logger.default.deprecate("Support for passing strings to the `onEdit` prop of the `Pod` component is now deprecated. Please only pass event handlers to `onEdit`.");
+  }
+
+  if (!deprecationOnEditObjectWarnTriggered && typeof onEdit === "object") {
+    deprecationOnEditObjectWarnTriggered = true;
+
+    _logger.default.deprecate("Support for passing objects to the `onEdit` prop of the `Pod` component is now deprecated. Please only pass event handlers to `onEdit`.");
+  }
+
   const [isEditFocused, setEditFocused] = (0, _react.useState)(false);
   const [isEditHovered, setEditHovered] = (0, _react.useState)(false);
   const [isDeleteFocused, setDeleteFocused] = (0, _react.useState)(false);
   const [isDeleteHovered, setDeleteHovered] = (0, _react.useState)(false);
   const [isUndoFocused, setUndoFocused] = (0, _react.useState)(false);
   const [isUndoHovered, setUndoHovered] = (0, _react.useState)(false);
-  let podHeight;
-
-  if (height && typeof height === "number") {
-    podHeight = `${height}px`;
-  } else if (height) {
-    podHeight = height;
-  }
-
-  const shouldContentHaveEditEvents = (0, _react.useCallback)(() => {
-    return (triggerEditOnContent || displayEditButtonOnHover) && onEdit;
-  }, [displayEditButtonOnHover, onEdit, triggerEditOnContent]);
+  const l = (0, _useLocale.default)();
+  const shouldContentHaveEditEvents = (0, _react.useMemo)(() => !!(onEdit && (triggerEditOnContent || displayEditButtonOnHover)), [displayEditButtonOnHover, onEdit, triggerEditOnContent]);
+  const hasButtons = (0, _react.useMemo)(() => !!(onEdit || onDelete || onUndo), [onEdit, onDelete, onUndo]);
 
   const processPodAction = action => ev => {
-    if (_events.default.isEnterKey(ev) || !_events.default.isEventType(ev, "keydown")) {
-      ev.preventDefault();
-      action(ev);
-    }
+    if (_events.default.isKeyboardEvent(ev) && _events.default.isEventType(ev, "keydown") && !_events.default.isEnterKey(ev)) return;
+    ev.preventDefault();
+    action(ev);
   };
 
-  function editEvents() {
-    const editProps = {
-      onMouseEnter: () => setEditHovered(true),
-      onMouseLeave: () => setEditHovered(false),
-      onFocus: () => setEditFocused(true),
-      onBlur: () => setEditFocused(false)
-    };
-
-    if (typeof onEdit === "function") {
-      editProps.onClick = processPodAction(onEdit);
-      editProps.onKeyDown = processPodAction(onEdit);
-    }
-
-    return editProps;
-  }
-
-  function podHeader() {
-    if (!title) {
-      return null;
-    }
-
-    return /*#__PURE__*/_react.default.createElement(_podStyle.StyledHeader, {
-      alignTitle: alignTitle,
-      internalEditButton: internalEditButton,
-      size: size
-    }, /*#__PURE__*/_react.default.createElement(_podStyle.StyledTitle, {
-      "data-element": "title"
-    }, title), subtitle && /*#__PURE__*/_react.default.createElement(_podStyle.StyledSubtitle, {
-      "data-element": "subtitle"
-    }, subtitle));
-  }
-
-  function renderFooter() {
-    if (!footer) {
-      return null;
-    }
-
-    return /*#__PURE__*/_react.default.createElement(_podStyle.StyledFooter, {
-      "data-element": "footer",
-      size: size,
-      variant: variant,
-      softDelete: softDelete
-    }, footer);
-  }
-
-  function actionButtons() {
-    if (softDelete && onUndo) {
-      return /*#__PURE__*/_react.default.createElement(_podStyle.StyledActionsContainer, {
-        internalEditButton: internalEditButton
-      }, undo());
-    }
-
-    if (!softDelete && (onDelete || onEdit)) {
-      return /*#__PURE__*/_react.default.createElement(_podStyle.StyledActionsContainer, {
-        internalEditButton: internalEditButton
-      }, onEdit && edit(), onDelete && renderDelete());
-    }
-
-    return null;
-  }
-
-  function renderDelete() {
-    return /*#__PURE__*/_react.default.createElement(_podStyle.StyledDeleteButton, {
-      onMouseEnter: () => setDeleteHovered(true),
-      onMouseLeave: () => setDeleteHovered(false),
-      onFocus: () => setDeleteFocused(true),
-      onBlur: () => setDeleteFocused(false),
-      "data-element": "delete",
-      internalEditButton: internalEditButton,
-      displayOnlyOnHover: displayEditButtonOnHover,
-      isFocused: isDeleteFocused,
-      isHovered: isDeleteHovered,
-      noBorder: !border,
-      size: size,
-      variant: variant,
-      onKeyDown: processPodAction(onDelete),
-      onAction: processPodAction(onDelete)
-    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-      type: "delete"
-    }));
-  }
-
-  function edit() {
-    return /*#__PURE__*/_react.default.createElement(_i18nContext.default.Consumer, null, l => /*#__PURE__*/_react.default.createElement("div", _extends({}, editEvents(), {
-      "data-element": "edit-container"
-    }), /*#__PURE__*/_react.default.createElement(_podStyle.StyledEditAction, _extends({
-      contentTriggersEdit: triggerEditOnContent,
-      "data-element": "edit",
-      displayOnlyOnHover: displayEditButtonOnHover,
-      icon: "edit",
-      internalEditButton: internalEditButton,
-      isFocused: isEditFocused,
-      isHovered: isEditHovered,
-      noBorder: !border,
-      size: size,
-      variant: variant
-    }, linkProps()), l.actions.edit())));
-  }
-
-  function undo() {
-    return /*#__PURE__*/_react.default.createElement(_podStyle.StyledUndoButton, {
-      onMouseEnter: () => setUndoHovered(true),
-      onMouseLeave: () => setUndoHovered(false),
-      onFocus: () => setUndoFocused(true),
-      onBlur: () => setUndoFocused(false),
-      "data-element": "undo-container",
-      internalEditButton: internalEditButton,
-      isFocused: isUndoFocused,
-      isHovered: isUndoHovered,
-      noBorder: !border,
-      size: size,
-      variant: variant,
-      onKeyDown: processPodAction(onUndo),
-      onAction: processPodAction(onUndo)
-    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-      type: "undo"
-    }));
-  }
-
-  function linkProps() {
-    if (typeof onEdit === "string") {
-      return {
-        to: onEdit
-      };
-    }
-
-    return onEdit;
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_podStyle.StyledPod, _extends({}, rest, {
+  const editEvents = {
+    onMouseEnter: () => setEditHovered(true),
+    onMouseLeave: () => setEditHovered(false),
+    onFocus: () => setEditFocused(true),
+    onBlur: () => setEditFocused(false),
+    ...(typeof onEdit === "function" && {
+      onClick: processPodAction(onEdit),
+      onKeyDown: processPodAction(onEdit)
+    })
+  };
+  return /*#__PURE__*/_react.default.createElement(_pod.StyledPod, _extends({
+    alignTitle: alignTitle,
     className: className,
-    internalEditButton: internalEditButton
-  }, (0, _tags.default)("pod", rest), {
-    height: podHeight,
-    ref: ref
-  }), /*#__PURE__*/_react.default.createElement(_podStyle.StyledBlock, _extends({
+    internalEditButton: internalEditButton,
+    height: typeof height === "number" ? `${height}px` : height,
+    ref: ref,
+    "data-component": "pod",
+    "data-element": dataElement,
+    "data-role": dataRole
+  }, rest), /*#__PURE__*/_react.default.createElement(_pod.StyledBlock, _extends({
     "data-element": "block",
-    contentTriggersEdit: shouldContentHaveEditEvents(),
-    hasButtons: onEdit || onDelete || onUndo,
+    contentTriggersEdit: shouldContentHaveEditEvents,
+    hasButtons: hasButtons,
     fullWidth: editContentFullWidth,
     internalEditButton: internalEditButton,
     isFocused: isEditFocused || isDeleteFocused,
@@ -224,106 +111,252 @@ const Pod = /*#__PURE__*/(0, _react.forwardRef)(({
     noBorder: !border,
     variant: variant,
     softDelete: softDelete
-  }, shouldContentHaveEditEvents() ? { ...editEvents(),
-    tabIndex: "0"
-  } : {}), /*#__PURE__*/_react.default.createElement(_podStyle.StyledContent, {
+  }, shouldContentHaveEditEvents && { ...editEvents,
+    tabIndex: 0
+  }), /*#__PURE__*/_react.default.createElement(_pod.StyledContent, {
     "data-element": "content",
     size: size
-  }, podHeader(), /*#__PURE__*/_react.default.createElement("div", null, children)), renderFooter()), actionButtons());
+  }, title && /*#__PURE__*/_react.default.createElement(_pod.StyledHeader, {
+    alignTitle: alignTitle,
+    internalEditButton: internalEditButton,
+    size: size
+  }, /*#__PURE__*/_react.default.createElement(_pod.StyledTitle, {
+    "data-element": "title"
+  }, title), subtitle && /*#__PURE__*/_react.default.createElement(_pod.StyledSubtitle, {
+    "data-element": "subtitle"
+  }, subtitle)), children), footer && /*#__PURE__*/_react.default.createElement(_pod.StyledFooter, {
+    "data-element": "footer",
+    size: size,
+    variant: variant,
+    softDelete: softDelete
+  }, footer)), hasButtons && /*#__PURE__*/_react.default.createElement(_pod.StyledActionsContainer, {
+    "data-element": "action-button-container",
+    internalEditButton: internalEditButton
+  }, softDelete && onUndo && /*#__PURE__*/_react.default.createElement(_pod.StyledUndoButton, {
+    "aria-label": l.pod.undo(),
+    onMouseEnter: () => setUndoHovered(true),
+    onMouseLeave: () => setUndoHovered(false),
+    onFocus: () => setUndoFocused(true),
+    onBlur: () => setUndoFocused(false),
+    "data-element": "undo",
+    internalEditButton: internalEditButton,
+    isFocused: isUndoFocused,
+    isHovered: isUndoHovered,
+    noBorder: !border,
+    size: size,
+    variant: variant,
+    onAction: processPodAction(onUndo)
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "undo"
+  })), !softDelete && onEdit && /*#__PURE__*/_react.default.createElement(_pod.StyledEditAction, _extends({}, editEvents, {
+    "aria-label": l.actions.edit(),
+    "data-element": "edit",
+    displayOnlyOnHover: displayEditButtonOnHover,
+    internalEditButton: internalEditButton,
+    isFocused: isEditFocused,
+    isHovered: isEditHovered,
+    noBorder: !border,
+    size: size,
+    variant: variant
+  }, typeof onEdit === "string" ? {
+    href: onEdit
+  } : onEdit), /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "edit"
+  })), !softDelete && onDelete && /*#__PURE__*/_react.default.createElement(_pod.StyledDeleteButton, {
+    "aria-label": l.actions.delete(),
+    "data-element": "delete",
+    onMouseEnter: () => setDeleteHovered(true),
+    onMouseLeave: () => setDeleteHovered(false),
+    onFocus: () => setDeleteFocused(true),
+    onBlur: () => setDeleteFocused(false),
+    internalEditButton: internalEditButton,
+    isFocused: isDeleteFocused,
+    isHovered: isDeleteHovered,
+    noBorder: !border,
+    size: size,
+    variant: variant,
+    onAction: processPodAction(onDelete)
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "delete"
+  }))));
 });
-Pod.propTypes = { ...marginPropTypes,
-
-  /**
-   * Enables/disables the border around the pod.
-   */
-  border: _propTypes.default.bool,
-
-  /**
-   * Children elements
-   */
-  children: _propTypes.default.node,
-
-  /**
-   * Custom className
-   */
-  className: _propTypes.default.string,
-
-  /**
-   * Determines the size of the pod.
-   */
-  size: _propTypes.default.oneOf(["none", "extra-small", "small", "medium", "large", "extra-large"]),
-
-  /**
-   * Prop to apply a theme to the Pod.
-   */
-  variant: _propTypes.default.oneOf(["primary", "secondary", "tertiary", "tile", "transparent"]),
-
-  /**
-   * Title for the pod h4 element
-   * always shown
-   */
-  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-
-  /**
-   * Optional subtitle for the pod
-   */
-  subtitle: _propTypes.default.string,
-
-  /**
-   * Aligns the title to left, right or center
-   */
-  alignTitle: _propTypes.default.oneOf(["left", "center", "right"]),
-
-  /**
-   * A component to render as a Pod footer.
-   */
-  footer: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-
-  /**
-   * Supplies an edit action to the pod.
-   */
-  onEdit: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.object]),
-
-  /**
-   * Supplies a delete action to the pod.
-   */
-  onDelete: _propTypes.default.func,
-
-  /**
-   * Supplies an undo action to the pod in soft delete state.
-   */
-  onUndo: _propTypes.default.func,
-
-  /**
-   * Sets soft delete state.
-   */
-  softDelete: _propTypes.default.bool,
-
-  /**
-   * Determines if the editable pod content should be full width.
-   */
-  editContentFullWidth: _propTypes.default.bool,
-
-  /**
-   * Determines if the edit button should be hidden until the user
-   * hovers over the content.
-   */
-  displayEditButtonOnHover: _propTypes.default.bool,
-
-  /**
-   * Determines if clicking the pod content calls the onEdit action
-   */
-  triggerEditOnContent: _propTypes.default.bool,
-
-  /**
-   * Resets edit button styles to an older version
-   */
-  internalEditButton: _propTypes.default.bool,
 
-  /**
-   * Sets Pod height, number is changed to pixels and string is passed as raw css value
-   */
-  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+Pod.propTypes = {
+  "alignTitle": _propTypes.default.oneOf(["center", "left", "right"]),
+  "border": _propTypes.default.bool,
+  "children": _propTypes.default.node,
+  "className": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "displayEditButtonOnHover": _propTypes.default.bool,
+  "editContentFullWidth": _propTypes.default.bool,
+  "footer": _propTypes.default.node,
+  "height": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "internalEditButton": _propTypes.default.bool,
+  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "onDelete": _propTypes.default.func,
+  "onEdit": _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.string]),
+  "onUndo": _propTypes.default.func,
+  "size": _propTypes.default.oneOf(["extra-large", "extra-small", "large", "medium", "small"]),
+  "softDelete": _propTypes.default.bool,
+  "subtitle": _propTypes.default.string,
+  "title": _propTypes.default.node,
+  "triggerEditOnContent": _propTypes.default.bool,
+  "variant": _propTypes.default.oneOf(["primary", "secondary", "tertiary", "tile", "transparent"])
 };
+Pod.displayName = "Pod";
 var _default = Pod;
 exports.default = _default;

package/lib/components/pod/pod.config.d.ts

@@ -0,0 +1,6 @@
+export declare const POD_SIZES: readonly ["extra-small", "small", "medium", "large", "extra-large"];
+export declare const POD_ALIGNMENTS: readonly ["left", "center", "right"];
+export declare const POD_VARIANTS: readonly ["primary", "secondary", "tertiary", "tile", "transparent"];
+export declare type PodSize = typeof POD_SIZES[number];
+export declare type PodAlignment = typeof POD_ALIGNMENTS[number];
+export declare type PodVariant = typeof POD_VARIANTS[number];

package/lib/components/pod/pod.config.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.POD_THEMES = exports.POD_ALIGNMENTS = exports.POD_SIZES = void 0;
+exports.POD_VARIANTS = exports.POD_ALIGNMENTS = exports.POD_SIZES = void 0;
 const POD_SIZES = ["extra-small", "small", "medium", "large", "extra-large"];
 exports.POD_SIZES = POD_SIZES;
-const POD_ALIGNMENTS = ["center", "left", "right"];
+const POD_ALIGNMENTS = ["left", "center", "right"];
 exports.POD_ALIGNMENTS = POD_ALIGNMENTS;
-const POD_THEMES = ["primary", "secondary", "tertiary", "tile", "transparent"];
-exports.POD_THEMES = POD_THEMES;
+const POD_VARIANTS = ["primary", "secondary", "tertiary", "tile", "transparent"];
+exports.POD_VARIANTS = POD_VARIANTS;

package/lib/components/pod/pod.style.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { MarginProps } from "styled-system";
+import { PodProps } from "./pod.component";
+import { PodSize, PodVariant } from "./pod.config";
+declare const StyledPod: import("styled-components").StyledComponent<"div", any, MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Pick<PodProps, "height" | "alignTitle" | "internalEditButton">, never>;
+interface StyledBlockProps extends Pick<PodProps, "softDelete" | "internalEditButton"> {
+    variant: PodVariant;
+    noBorder: boolean;
+    hasButtons: boolean;
+    contentTriggersEdit?: boolean;
+    fullWidth?: boolean;
+    isHovered?: boolean;
+    isFocused?: boolean;
+}
+declare const StyledBlock: import("styled-components").StyledComponent<"div", any, StyledBlockProps, never>;
+declare const StyledContent: import("styled-components").StyledComponent<"div", any, {
+    size: PodSize;
+}, never>;
+interface StyledFooterProps extends Pick<PodProps, "softDelete"> {
+    variant: PodVariant;
+    size: PodSize;
+}
+declare const StyledFooter: import("styled-components").StyledComponent<"div", any, StyledFooterProps, never>;
+declare const StyledActionsContainer: import("styled-components").StyledComponent<"div", any, Pick<PodProps, "internalEditButton">, never>;
+interface CommonPodButtonProps extends Pick<PodProps, "internalEditButton"> {
+    isHovered?: boolean;
+    isFocused?: boolean;
+    size: PodSize;
+    noBorder: boolean;
+    variant: PodVariant;
+}
+interface StyledEditActionProps extends CommonPodButtonProps {
+    displayOnlyOnHover?: boolean;
+}
+declare const StyledEditAction: import("styled-components").StyledComponent<"a", any, StyledEditActionProps, never>;
+declare const StyledDeleteButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, CommonPodButtonProps, never>;
+declare const StyledUndoButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, CommonPodButtonProps, never>;
+interface StyledHeaderProps extends Pick<PodProps, "alignTitle" | "internalEditButton"> {
+    size: PodSize;
+}
+declare const StyledHeader: import("styled-components").StyledComponent<"div", any, StyledHeaderProps, never>;
+declare const StyledSubtitle: import("styled-components").StyledComponent<"h5", any, {}, never>;
+declare const StyledTitle: import("styled-components").StyledComponent<"h4", any, {}, never>;
+export { StyledBlock, StyledContent, StyledEditAction, StyledActionsContainer, StyledDeleteButton, StyledUndoButton, StyledFooter, StyledPod, StyledHeader, StyledSubtitle, StyledTitle, };