carbon-react 114.0.0 → 114.2.0

package/esm/components/pod/pod.component.js

@@ -1,16 +1,17 @@
 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, { useState, useCallback, forwardRef } from "react";
+import React, { useState, useMemo } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-import Event from "../../__internal__/utils/helpers/events";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import LocaleContext from "../../__internal__/i18n-context";
-import { StyledBlock, StyledContent, StyledEditAction, StyledActionsContainer, StyledDeleteButton, StyledUndoButton, StyledFooter, StyledPod, StyledHeader, StyledSubtitle, StyledTitle } from "./pod.style.js";
+import Logger from "../../__internal__/utils/logger";
+import useLocale from "../../hooks/__internal__/useLocale";
+import { StyledBlock, StyledContent, StyledEditAction, StyledActionsContainer, StyledDeleteButton, StyledUndoButton, StyledFooter, StyledPod, StyledHeader, StyledSubtitle, StyledTitle } from "./pod.style";
 import Icon from "../icon";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
-const Pod = /*#__PURE__*/forwardRef(({
+import Event from "../../__internal__/utils/helpers/events";
+let deprecationOnEditStringWarnTriggered = false;
+let deprecationOnEditObjectWarnTriggered = false;
+const Pod = /*#__PURE__*/React.forwardRef(({
+  "data-element": dataElement,
+  "data-role": dataRole,
   alignTitle = "left",
   border = true,
   children,
@@ -31,170 +32,55 @@ const Pod = /*#__PURE__*/forwardRef(({
   variant = "primary",
   ...rest
 }, ref) => {
+  if (!deprecationOnEditStringWarnTriggered && typeof onEdit === "string") {
+    deprecationOnEditStringWarnTriggered = true;
+    Logger.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.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] = useState(false);
   const [isEditHovered, setEditHovered] = useState(false);
   const [isDeleteFocused, setDeleteFocused] = useState(false);
   const [isDeleteHovered, setDeleteHovered] = useState(false);
   const [isUndoFocused, setUndoFocused] = useState(false);
   const [isUndoHovered, setUndoHovered] = useState(false);
-  let podHeight;
-
-  if (height && typeof height === "number") {
-    podHeight = `${height}px`;
-  } else if (height) {
-    podHeight = height;
-  }
-
-  const shouldContentHaveEditEvents = useCallback(() => {
-    return (triggerEditOnContent || displayEditButtonOnHover) && onEdit;
-  }, [displayEditButtonOnHover, onEdit, triggerEditOnContent]);
+  const l = useLocale();
+  const shouldContentHaveEditEvents = useMemo(() => !!(onEdit && (triggerEditOnContent || displayEditButtonOnHover)), [displayEditButtonOnHover, onEdit, triggerEditOnContent]);
+  const hasButtons = useMemo(() => !!(onEdit || onDelete || onUndo), [onEdit, onDelete, onUndo]);
 
   const processPodAction = action => ev => {
-    if (Event.isEnterKey(ev) || !Event.isEventType(ev, "keydown")) {
-      ev.preventDefault();
-      action(ev);
-    }
+    if (Event.isKeyboardEvent(ev) && Event.isEventType(ev, "keydown") && !Event.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.createElement(StyledHeader, {
-      alignTitle: alignTitle,
-      internalEditButton: internalEditButton,
-      size: size
-    }, /*#__PURE__*/React.createElement(StyledTitle, {
-      "data-element": "title"
-    }, title), subtitle && /*#__PURE__*/React.createElement(StyledSubtitle, {
-      "data-element": "subtitle"
-    }, subtitle));
-  }
-
-  function renderFooter() {
-    if (!footer) {
-      return null;
-    }
-
-    return /*#__PURE__*/React.createElement(StyledFooter, {
-      "data-element": "footer",
-      size: size,
-      variant: variant,
-      softDelete: softDelete
-    }, footer);
-  }
-
-  function actionButtons() {
-    if (softDelete && onUndo) {
-      return /*#__PURE__*/React.createElement(StyledActionsContainer, {
-        internalEditButton: internalEditButton
-      }, undo());
-    }
-
-    if (!softDelete && (onDelete || onEdit)) {
-      return /*#__PURE__*/React.createElement(StyledActionsContainer, {
-        internalEditButton: internalEditButton
-      }, onEdit && edit(), onDelete && renderDelete());
-    }
-
-    return null;
-  }
-
-  function renderDelete() {
-    return /*#__PURE__*/React.createElement(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.createElement(Icon, {
-      type: "delete"
-    }));
-  }
-
-  function edit() {
-    return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, l => /*#__PURE__*/React.createElement("div", _extends({}, editEvents(), {
-      "data-element": "edit-container"
-    }), /*#__PURE__*/React.createElement(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.createElement(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.createElement(Icon, {
-      type: "undo"
-    }));
-  }
-
-  function linkProps() {
-    if (typeof onEdit === "string") {
-      return {
-        to: onEdit
-      };
-    }
-
-    return onEdit;
-  }
-
-  return /*#__PURE__*/React.createElement(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.createElement(StyledPod, _extends({
+    alignTitle: alignTitle,
     className: className,
-    internalEditButton: internalEditButton
-  }, tagComponent("pod", rest), {
-    height: podHeight,
-    ref: ref
-  }), /*#__PURE__*/React.createElement(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.createElement(StyledBlock, _extends({
     "data-element": "block",
-    contentTriggersEdit: shouldContentHaveEditEvents(),
-    hasButtons: onEdit || onDelete || onUndo,
+    contentTriggersEdit: shouldContentHaveEditEvents,
+    hasButtons: hasButtons,
     fullWidth: editContentFullWidth,
     internalEditButton: internalEditButton,
     isFocused: isEditFocused || isDeleteFocused,
@@ -202,105 +88,250 @@ const Pod = /*#__PURE__*/forwardRef(({
     noBorder: !border,
     variant: variant,
     softDelete: softDelete
-  }, shouldContentHaveEditEvents() ? { ...editEvents(),
-    tabIndex: "0"
-  } : {}), /*#__PURE__*/React.createElement(StyledContent, {
+  }, shouldContentHaveEditEvents && { ...editEvents,
+    tabIndex: 0
+  }), /*#__PURE__*/React.createElement(StyledContent, {
     "data-element": "content",
     size: size
-  }, podHeader(), /*#__PURE__*/React.createElement("div", null, children)), renderFooter()), actionButtons());
+  }, title && /*#__PURE__*/React.createElement(StyledHeader, {
+    alignTitle: alignTitle,
+    internalEditButton: internalEditButton,
+    size: size
+  }, /*#__PURE__*/React.createElement(StyledTitle, {
+    "data-element": "title"
+  }, title), subtitle && /*#__PURE__*/React.createElement(StyledSubtitle, {
+    "data-element": "subtitle"
+  }, subtitle)), children), footer && /*#__PURE__*/React.createElement(StyledFooter, {
+    "data-element": "footer",
+    size: size,
+    variant: variant,
+    softDelete: softDelete
+  }, footer)), hasButtons && /*#__PURE__*/React.createElement(StyledActionsContainer, {
+    "data-element": "action-button-container",
+    internalEditButton: internalEditButton
+  }, softDelete && onUndo && /*#__PURE__*/React.createElement(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.createElement(Icon, {
+    type: "undo"
+  })), !softDelete && onEdit && /*#__PURE__*/React.createElement(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.createElement(Icon, {
+    type: "edit"
+  })), !softDelete && onDelete && /*#__PURE__*/React.createElement(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.createElement(Icon, {
+    type: "delete"
+  }))));
 });
-Pod.propTypes = { ...marginPropTypes,
-
-  /**
-   * Enables/disables the border around the pod.
-   */
-  border: PropTypes.bool,
-
-  /**
-   * Children elements
-   */
-  children: PropTypes.node,
-
-  /**
-   * Custom className
-   */
-  className: PropTypes.string,
-
-  /**
-   * Determines the size of the pod.
-   */
-  size: PropTypes.oneOf(["none", "extra-small", "small", "medium", "large", "extra-large"]),
-
-  /**
-   * Prop to apply a theme to the Pod.
-   */
-  variant: PropTypes.oneOf(["primary", "secondary", "tertiary", "tile", "transparent"]),
-
-  /**
-   * Title for the pod h4 element
-   * always shown
-   */
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-
-  /**
-   * Optional subtitle for the pod
-   */
-  subtitle: PropTypes.string,
-
-  /**
-   * Aligns the title to left, right or center
-   */
-  alignTitle: PropTypes.oneOf(["left", "center", "right"]),
-
-  /**
-   * A component to render as a Pod footer.
-   */
-  footer: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-
-  /**
-   * Supplies an edit action to the pod.
-   */
-  onEdit: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
-
-  /**
-   * Supplies a delete action to the pod.
-   */
-  onDelete: PropTypes.func,
-
-  /**
-   * Supplies an undo action to the pod in soft delete state.
-   */
-  onUndo: PropTypes.func,
-
-  /**
-   * Sets soft delete state.
-   */
-  softDelete: PropTypes.bool,
-
-  /**
-   * Determines if the editable pod content should be full width.
-   */
-  editContentFullWidth: PropTypes.bool,
-
-  /**
-   * Determines if the edit button should be hidden until the user
-   * hovers over the content.
-   */
-  displayEditButtonOnHover: PropTypes.bool,
-
-  /**
-   * Determines if clicking the pod content calls the onEdit action
-   */
-  triggerEditOnContent: PropTypes.bool,
-
-  /**
-   * Resets edit button styles to an older version
-   */
-  internalEditButton: PropTypes.bool,
-
-  /**
-   * Sets Pod height, number is changed to pixels and string is passed as raw css value
-   */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+Pod.propTypes = {
+  "alignTitle": PropTypes.oneOf(["center", "left", "right"]),
+  "border": PropTypes.bool,
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "displayEditButtonOnHover": PropTypes.bool,
+  "editContentFullWidth": PropTypes.bool,
+  "footer": PropTypes.node,
+  "height": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "internalEditButton": 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]),
+  "onDelete": PropTypes.func,
+  "onEdit": PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.string]),
+  "onUndo": PropTypes.func,
+  "size": PropTypes.oneOf(["extra-large", "extra-small", "large", "medium", "small"]),
+  "softDelete": PropTypes.bool,
+  "subtitle": PropTypes.string,
+  "title": PropTypes.node,
+  "triggerEditOnContent": PropTypes.bool,
+  "variant": PropTypes.oneOf(["primary", "secondary", "tertiary", "tile", "transparent"])
 };
+Pod.displayName = "Pod";
 export default Pod;

package/esm/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/esm/components/pod/pod.config.js

@@ -1,3 +1,3 @@
 export const POD_SIZES = ["extra-small", "small", "medium", "large", "extra-large"];
-export const POD_ALIGNMENTS = ["center", "left", "right"];
-export const POD_THEMES = ["primary", "secondary", "tertiary", "tile", "transparent"];
+export const POD_ALIGNMENTS = ["left", "center", "right"];
+export const POD_VARIANTS = ["primary", "secondary", "tertiary", "tile", "transparent"];

package/esm/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, };