carbon-react 122.0.1 → 123.0.0

package/esm/__internal__/utils/helpers/tags/tags-specs/index.d.ts

@@ -1 +1 @@
-export { elementsTagTest, rootTagTest } from "./tags-specs";
+export { elementsTagTest, rootTagTest, rootTagTestRtl } from "./tags-specs";

package/esm/__internal__/utils/helpers/tags/tags-specs/index.js

@@ -1 +1 @@
-export { elementsTagTest, rootTagTest } from "./tags-specs";
+export { elementsTagTest, rootTagTest, rootTagTestRtl } from "./tags-specs";

package/esm/__internal__/utils/helpers/tags/tags-specs/tags-specs.d.ts

@@ -1,4 +1,5 @@
 import { ReactWrapper, ShallowWrapper } from "enzyme";
 declare const elementsTagTest: (wrapper: ReactWrapper | ShallowWrapper, elements: string[]) => void;
 declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
-export { elementsTagTest, rootTagTest };
+declare const rootTagTestRtl: (element: HTMLElement, comp: string, elem?: string, role?: string) => void;
+export { elementsTagTest, rootTagTest, rootTagTestRtl };

package/esm/__internal__/utils/helpers/tags/tags-specs/tags-specs.js

@@ -12,6 +12,9 @@ const rootTagTest = (rootNode, comp, elem, role) => {
   expect(rootNode.prop("data-element")).toEqual(elem);
   expect(rootNode.prop("data-role")).toEqual(role);
 };
-
-// eslint-disable-next-line jest/no-export
-export { elementsTagTest, rootTagTest };
+const rootTagTestRtl = (element, comp, elem, role) => {
+  expect(element.getAttribute("data-component")).toBe(comp);
+  expect(element.getAttribute("data-element")).toBe(elem);
+  expect(element.getAttribute("data-role")).toBe(role);
+};
+export { elementsTagTest, rootTagTest, rootTagTestRtl };

package/esm/components/tile/__internal__/compute-content-padding.d.ts

@@ -0,0 +1,13 @@
+import { PaddingProps } from "styled-system";
+declare const _default: (paddingProps: PaddingProps, isHorizontal: boolean) => {
+    pr: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    pl: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    pt?: undefined;
+    pb?: undefined;
+} | {
+    pt: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    pb: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    pr?: undefined;
+    pl?: undefined;
+};
+export default _default;

package/esm/components/tile/__internal__/compute-content-padding.js

@@ -0,0 +1,23 @@
+import { paddingNames, paddingLeftPropertyNames, paddingRightPropertyNames, paddingBottomPropertyNames, paddingTopPropertyNames, paddingXPropertyNames, paddingYPropertyNames } from "../../../style/utils/filter-styled-system-padding-props";
+const CONTENT_PADDING_LEFT_KEYS = [...paddingLeftPropertyNames, ...paddingXPropertyNames, ...paddingNames];
+const CONTENT_PADDING_RIGHT_KEYS = [...paddingRightPropertyNames, ...paddingXPropertyNames, ...paddingNames];
+const CONTENT_PADDING_TOP_KEYS = [...paddingTopPropertyNames, ...paddingYPropertyNames, ...paddingNames];
+const CONTENT_PADDING_BOTTOM_KEYS = [...paddingBottomPropertyNames, ...paddingYPropertyNames, ...paddingNames];
+export default ((paddingProps, isHorizontal) => {
+  const getPaddingProps = paddingKeys => {
+    const key = paddingKeys.find(propName => paddingProps[propName]);
+
+    /* istanbul ignore if */
+    if (!key) {
+      return key;
+    }
+    return paddingProps[key];
+  };
+  return isHorizontal ? {
+    pr: getPaddingProps(CONTENT_PADDING_LEFT_KEYS),
+    pl: getPaddingProps(CONTENT_PADDING_RIGHT_KEYS)
+  } : {
+    pt: getPaddingProps(CONTENT_PADDING_TOP_KEYS),
+    pb: getPaddingProps(CONTENT_PADDING_BOTTOM_KEYS)
+  };
+});

package/esm/components/tile/__internal__/tile-context.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { PaddingProps } from "styled-system";
+interface TileContextProps {
+    isHorizontal?: boolean;
+    paddingPropsFromTile: PaddingProps;
+}
+declare const _default: import("react").Context<TileContextProps>;
+export default _default;

package/esm/components/tile/__internal__/tile-context.js

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+export default /*#__PURE__*/createContext({
+  paddingPropsFromTile: {}
+});

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

@@ -1,2 +1,6 @@
-export { default } from "./tile.component";
+export { default as Tile } from "./tile.component";
 export type { TileProps } from "./tile.component";
+export { default as TileContent } from "./tile-content";
+export type { TileContentProps } from "./tile-content";
+export { default as TileFooter } from "./tile-footer";
+export type { TileFooterProps } from "./tile-footer";

package/esm/components/tile/index.js

@@ -1 +1,3 @@
-export { default } from "./tile.component";
+export { default as Tile } from "./tile.component";
+export { default as TileContent } from "./tile-content";
+export { default as TileFooter } from "./tile-footer";

package/esm/components/tile/tile-content/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./tile-content.component";
+export type { TileContentProps } from "./tile-content.component";

package/esm/components/tile/tile-content/index.js

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

package/esm/components/tile/tile-content/tile-content.component.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { SpaceProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface TileContentProps extends SpaceProps, TagProps {
+    children?: React.ReactNode;
+    width?: string | number;
+    height?: string | number;
+}
+declare const TileContent: ({ children, width, height, ...rest }: TileContentProps) => React.JSX.Element | null;
+export default TileContent;

package/esm/components/tile/tile-content/tile-content.component.js

@@ -0,0 +1,33 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 } from "react";
+import PropTypes from "prop-types";
+import StyledTileContent from "./tile-content.style";
+import TileContext from "../__internal__/tile-context";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
+import filterStyledSystemPaddingProps from "../../../style/utils/filter-styled-system-padding-props";
+import filterStyledSystemMarginProps from "../../../style/utils/filter-styled-system-margin-props";
+const TileContent = ({
+  children,
+  width,
+  height,
+  ...rest
+}) => {
+  const {
+    isHorizontal,
+    paddingPropsFromTile
+  } = useContext(TileContext);
+  if (!children) {
+    return null;
+  }
+  const spacingProps = {
+    ...filterStyledSystemPaddingProps(rest),
+    ...filterStyledSystemMarginProps(rest)
+  };
+  return /*#__PURE__*/React.createElement(StyledTileContent, _extends({
+    width: width,
+    height: height,
+    isHorizontal: isHorizontal,
+    isVertical: !isHorizontal
+  }, paddingPropsFromTile, spacingProps, tagComponent("tile-content", rest)), children);
+};
+export default TileContent;

package/esm/components/tile/tile-content/tile-content.style.d.ts

@@ -0,0 +1,9 @@
+import { TileContentProps } from "./tile-content.component";
+interface StyledTileContentProps extends TileContentProps {
+    isHorizontal?: boolean;
+    isVertical?: boolean;
+    width?: string | number;
+    height?: string | number;
+}
+declare const StyledTileContent: import("styled-components").StyledComponent<"div", any, StyledTileContentProps, never>;
+export default StyledTileContent;

package/esm/components/tile/tile-content/tile-content.style.js

@@ -0,0 +1,64 @@
+import styled, { css } from "styled-components";
+import { space } from "styled-system";
+import baseTheme from "../../../style/themes/base";
+import computeSizing from "../../../style/utils/element-sizing";
+const StyledTileContent = styled.div`
+  ${({
+  isHorizontal,
+  isVertical,
+  width,
+  height
+}) => css`
+    ${space}
+
+    box-sizing: border-box;
+    position: relative;
+    flex-grow: 1;
+
+    ${isHorizontal && css`
+      display: inline;
+
+      :last-of-type {
+        padding-right: 0;
+      }
+
+      :first-of-type {
+        padding-left: 0;
+      }
+
+      & + & {
+        margin-top: 0;
+        border-left: solid 1px var(--colorsUtilityMajor050);
+      }
+    `}
+
+    ${isVertical && css`
+      width: auto;
+
+      :last-of-type {
+        padding-bottom: 0;
+      }
+
+      :first-of-type {
+        padding-top: 0;
+      }
+
+      & + & {
+        margin-top: 0;
+        border-top: solid 1px var(--colorsUtilityMajor050);
+      }
+    `}
+
+    ${(width || height) && css`
+      flex-grow: 0;
+      ${computeSizing({
+  width: width || /* istanbul ignore next */undefined,
+  height: height || undefined
+})}
+    `}
+  `}
+`;
+StyledTileContent.defaultProps = {
+  theme: baseTheme
+};
+export default StyledTileContent;

package/esm/components/tile/tile-footer/tile-footer.component.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
 import { PaddingProps } from "styled-system";
-export interface TileFooterProps extends PaddingProps {
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface TileFooterProps extends PaddingProps, TagProps {
     children?: React.ReactNode;
     /** set which background color variant should be used */
     variant?: "default" | "black" | "transparent";
 }
-export declare const TileFooter: ({ variant, children, ...props }: TileFooterProps) => React.JSX.Element;
+export declare const TileFooter: ({ variant, children, ...rest }: TileFooterProps) => React.JSX.Element;
 export default TileFooter;

package/esm/components/tile/tile-footer/tile-footer.component.js

@@ -2,14 +2,13 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from "react";
 import PropTypes from "prop-types";
 import StyledTileFooter from "./tile-footer.style";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
+import filterStyledSystemPaddingProps from "../../../style/utils/filter-styled-system-padding-props";
 export const TileFooter = ({
   variant,
   children,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement(StyledTileFooter, _extends({
-    "data-component": "tile-footer",
-    variant: variant
-  }, props), children);
-};
+  ...rest
+}) => /*#__PURE__*/React.createElement(StyledTileFooter, _extends({
+  variant: variant
+}, filterStyledSystemPaddingProps(rest), tagComponent("tile-footer", rest)), children);
 export default TileFooter;

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

@@ -1,8 +1,9 @@
 import React from "react";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
 import { SpaceProps, WidthProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 declare type DesignTokensType = keyof typeof DesignTokens;
-export interface TileProps extends SpaceProps, WidthProps {
+export interface TileProps extends SpaceProps, WidthProps, TagProps {
     /** Sets the theme of the tile - either 'tile', 'transparent' or 'active' */
     variant?: "tile" | "transparent" | "active";
     /**
@@ -31,5 +32,5 @@ export interface TileProps extends SpaceProps, WidthProps {
      */
     height?: string | number;
 }
-export declare const Tile: ({ variant, p, children, orientation, width, roundness, height, ...props }: TileProps) => React.JSX.Element;
+export declare const Tile: ({ variant, p, children, orientation, width, roundness, height, borderWidth, borderVariant, ...rest }: TileProps) => React.JSX.Element;
 export default Tile;

package/esm/components/tile/tile.component.js

@@ -1,7 +1,12 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 PropTypes from "prop-types";
-import { StyledTile, TileContent } from "./tile.style";
+import StyledTile from "./tile.style";
+import TileContext from "./__internal__/tile-context";
+import filterStyledSystemPaddingProps from "../../style/utils/filter-styled-system-padding-props";
+import filterStyledSystemMarginProps from "../../style/utils/filter-styled-system-margin-props";
+import computeContentPadding from "./__internal__/compute-content-padding";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 export const Tile = ({
   variant = "tile",
   p = 3,
@@ -10,47 +15,31 @@ export const Tile = ({
   width = "100%",
   roundness = "default",
   height,
-  ...props
+  borderWidth,
+  borderVariant,
+  ...rest
 }) => {
   const isHorizontal = orientation === "horizontal";
-  const isVertical = orientation === "vertical";
-  const wrappedChildren = React.Children.map(children, (child, index) => {
-    if (!child) {
-      return null;
-    }
-
-    // istanbul ignore if
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return child;
-    }
-    const {
-      width: contentWidth,
-      height: contentHeight,
-      ...childProps
-    } = child.props;
-    const key = child.key || `tile-content-${index + 1}`;
-    return /*#__PURE__*/React.createElement(TileContent, _extends({
-      key: key,
-      width: contentWidth,
-      height: contentHeight,
-      isHorizontal: isHorizontal,
-      isVertical: isVertical
-    }, isVertical && {
-      pt: props.pt || props.py || p,
-      pb: props.pb || props.py || p
-    }, isHorizontal && {
-      pr: props.pr || props.px || p,
-      pl: props.pl || props.px || p
-    }), /*#__PURE__*/React.cloneElement(child, childProps));
+  const paddingProps = filterStyledSystemPaddingProps({
+    p,
+    ...rest
   });
+  const marginProps = filterStyledSystemMarginProps(rest);
+  const contentPaddingProps = computeContentPadding(paddingProps, isHorizontal);
   return /*#__PURE__*/React.createElement(StyledTile, _extends({
     variant: variant,
     width: width,
     height: height,
-    "data-component": "tile",
     isHorizontal: isHorizontal,
     p: p,
-    roundness: roundness
-  }, props), wrappedChildren);
+    roundness: roundness,
+    borderWidth: borderWidth,
+    borderVariant: borderVariant
+  }, paddingProps, marginProps, tagComponent("tile", rest)), /*#__PURE__*/React.createElement(TileContext.Provider, {
+    value: {
+      isHorizontal,
+      paddingPropsFromTile: contentPaddingProps
+    }
+  }, children));
 };
 export default Tile;

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

@@ -1,13 +1,6 @@
 import { SpaceProps } from "styled-system";
 import { TileProps } from "./tile.component";
-interface TileContentProps {
-    isHorizontal?: boolean;
-    isVertical?: boolean;
-    width?: TileProps["width"];
-    height?: TileProps["height"];
-}
-declare const TileContent: import("styled-components").StyledComponent<"div", any, TileContentProps, never>;
 declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant"> & {
     isHorizontal?: boolean | undefined;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
-export { StyledTile, TileContent };
+export default StyledTile;

package/esm/components/tile/tile.style.js

@@ -18,62 +18,6 @@ const getBorderColor = borderVariant => {
       return "var(--colorsUtilityMajor100)";
   }
 };
-const TileContent = styled.div`
-  ${({
-  isHorizontal,
-  isVertical,
-  width,
-  height
-}) => css`
-    ${space}
-
-    box-sizing: border-box;
-    position: relative;
-    flex-grow: 1;
-
-    ${isHorizontal && css`
-      display: inline;
-
-      :last-of-type {
-        padding-right: 0;
-      }
-
-      :first-of-type {
-        padding-left: 0;
-      }
-
-      & + & {
-        margin-top: 0;
-        border-left: solid 1px var(--colorsUtilityMajor050);
-      }
-    `}
-
-    ${isVertical && css`
-      width: auto;
-
-      :last-of-type {
-        padding-bottom: 0;
-      }
-
-      :first-of-type {
-        padding-top: 0;
-      }
-
-      & + & {
-        margin-top: 0;
-        border-top: solid 1px var(--colorsUtilityMajor050);
-      }
-    `}
-
-    ${(width || height) && css`
-      flex-grow: 0;
-      ${computeSizing({
-  width: width || /* istanbul ignore next */undefined,
-  height: height || undefined
-})}
-    `}
-  `}
-`;
 const StyledTile = styled.div`
   ${({
   borderVariant,
@@ -113,10 +57,7 @@ const StyledTile = styled.div`
 })}
   `}
 `;
-TileContent.defaultProps = {
-  theme: baseTheme
-};
 StyledTile.defaultProps = {
   theme: baseTheme
 };
-export { StyledTile, TileContent };
+export default StyledTile;

package/esm/style/utils/filter-styled-system-padding-props.d.ts

@@ -1,3 +1,10 @@
 import { PaddingProps } from "styled-system";
-export declare const paddingPropertyNames: string[];
+export declare const paddingNames: (keyof PaddingProps)[];
+export declare const paddingLeftPropertyNames: (keyof PaddingProps)[];
+export declare const paddingRightPropertyNames: (keyof PaddingProps)[];
+export declare const paddingXPropertyNames: (keyof PaddingProps)[];
+export declare const paddingTopPropertyNames: (keyof PaddingProps)[];
+export declare const paddingBottomPropertyNames: (keyof PaddingProps)[];
+export declare const paddingYPropertyNames: (keyof PaddingProps)[];
+export declare const paddingPropertyNames: (keyof PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>)[];
 export default function filterStyledSystemPaddingProps(props: Record<string, unknown> | PaddingProps): PaddingProps;

package/esm/style/utils/filter-styled-system-padding-props.js

@@ -1,5 +1,14 @@
 import filterObjectProperties from "../../__internal__/filter-object-properties";
-export const paddingPropertyNames = ["padding", "p", "paddingLeft", "pl", "paddingRight", "pr", "paddingTop", "pt", "paddingBottom", "pb", "paddingX", "px", "paddingY", "py"];
+export const paddingNames = ["p", "padding"];
+export const paddingLeftPropertyNames = ["pl", "paddingLeft"];
+export const paddingRightPropertyNames = ["pr", "paddingRight"];
+export const paddingXPropertyNames = ["px", "paddingX"];
+const paddingHorizontalPropertyNames = [...paddingLeftPropertyNames, ...paddingRightPropertyNames, ...paddingXPropertyNames];
+export const paddingTopPropertyNames = ["pt", "paddingTop"];
+export const paddingBottomPropertyNames = ["pb", "paddingBottom"];
+export const paddingYPropertyNames = ["py", "paddingY"];
+const paddingVerticalPropertyNames = [...paddingTopPropertyNames, ...paddingBottomPropertyNames, ...paddingYPropertyNames];
+export const paddingPropertyNames = [...paddingNames, ...paddingHorizontalPropertyNames, ...paddingVerticalPropertyNames];
 export default function filterStyledSystemPaddingProps(props) {
   return filterObjectProperties(props, paddingPropertyNames);
 }

package/lib/__internal__/utils/helpers/tags/tags-specs/index.d.ts

@@ -1 +1 @@
-export { elementsTagTest, rootTagTest } from "./tags-specs";
+export { elementsTagTest, rootTagTest, rootTagTestRtl } from "./tags-specs";

package/lib/__internal__/utils/helpers/tags/tags-specs/index.js

@@ -15,4 +15,10 @@ Object.defineProperty(exports, "rootTagTest", {
     return _tagsSpecs.rootTagTest;
   }
 });
+Object.defineProperty(exports, "rootTagTestRtl", {
+  enumerable: true,
+  get: function () {
+    return _tagsSpecs.rootTagTestRtl;
+  }
+});
 var _tagsSpecs = require("./tags-specs");

package/lib/__internal__/utils/helpers/tags/tags-specs/tags-specs.d.ts

@@ -1,4 +1,5 @@
 import { ReactWrapper, ShallowWrapper } from "enzyme";
 declare const elementsTagTest: (wrapper: ReactWrapper | ShallowWrapper, elements: string[]) => void;
 declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
-export { elementsTagTest, rootTagTest };
+declare const rootTagTestRtl: (element: HTMLElement, comp: string, elem?: string, role?: string) => void;
+export { elementsTagTest, rootTagTest, rootTagTestRtl };

package/lib/__internal__/utils/helpers/tags/tags-specs/tags-specs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rootTagTest = exports.elementsTagTest = void 0;
+exports.rootTagTestRtl = exports.rootTagTest = exports.elementsTagTest = void 0;
 const elementsTagTest = (wrapper, elements) => {
   elements.forEach(element => {
     it(`include 'data-element="${element}"'`, () => {
@@ -19,6 +19,10 @@ const rootTagTest = (rootNode, comp, elem, role) => {
   expect(rootNode.prop("data-element")).toEqual(elem);
   expect(rootNode.prop("data-role")).toEqual(role);
 };
-
-// eslint-disable-next-line jest/no-export
-exports.rootTagTest = rootTagTest;
+exports.rootTagTest = rootTagTest;
+const rootTagTestRtl = (element, comp, elem, role) => {
+  expect(element.getAttribute("data-component")).toBe(comp);
+  expect(element.getAttribute("data-element")).toBe(elem);
+  expect(element.getAttribute("data-role")).toBe(role);
+};
+exports.rootTagTestRtl = rootTagTestRtl;

package/lib/components/tile/__internal__/compute-content-padding.d.ts

@@ -0,0 +1,13 @@
+import { PaddingProps } from "styled-system";
+declare const _default: (paddingProps: PaddingProps, isHorizontal: boolean) => {
+    pr: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    pl: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    pt?: undefined;
+    pb?: undefined;
+} | {
+    pt: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    pb: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    pr?: undefined;
+    pl?: undefined;
+};
+export default _default;

package/lib/components/tile/__internal__/compute-content-padding.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _filterStyledSystemPaddingProps = require("../../../style/utils/filter-styled-system-padding-props");
+const CONTENT_PADDING_LEFT_KEYS = [..._filterStyledSystemPaddingProps.paddingLeftPropertyNames, ..._filterStyledSystemPaddingProps.paddingXPropertyNames, ..._filterStyledSystemPaddingProps.paddingNames];
+const CONTENT_PADDING_RIGHT_KEYS = [..._filterStyledSystemPaddingProps.paddingRightPropertyNames, ..._filterStyledSystemPaddingProps.paddingXPropertyNames, ..._filterStyledSystemPaddingProps.paddingNames];
+const CONTENT_PADDING_TOP_KEYS = [..._filterStyledSystemPaddingProps.paddingTopPropertyNames, ..._filterStyledSystemPaddingProps.paddingYPropertyNames, ..._filterStyledSystemPaddingProps.paddingNames];
+const CONTENT_PADDING_BOTTOM_KEYS = [..._filterStyledSystemPaddingProps.paddingBottomPropertyNames, ..._filterStyledSystemPaddingProps.paddingYPropertyNames, ..._filterStyledSystemPaddingProps.paddingNames];
+var _default = (paddingProps, isHorizontal) => {
+  const getPaddingProps = paddingKeys => {
+    const key = paddingKeys.find(propName => paddingProps[propName]);
+
+    /* istanbul ignore if */
+    if (!key) {
+      return key;
+    }
+    return paddingProps[key];
+  };
+  return isHorizontal ? {
+    pr: getPaddingProps(CONTENT_PADDING_LEFT_KEYS),
+    pl: getPaddingProps(CONTENT_PADDING_RIGHT_KEYS)
+  } : {
+    pt: getPaddingProps(CONTENT_PADDING_TOP_KEYS),
+    pb: getPaddingProps(CONTENT_PADDING_BOTTOM_KEYS)
+  };
+};
+exports.default = _default;

package/lib/components/tile/__internal__/tile-context.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { PaddingProps } from "styled-system";
+interface TileContextProps {
+    isHorizontal?: boolean;
+    paddingPropsFromTile: PaddingProps;
+}
+declare const _default: import("react").Context<TileContextProps>;
+export default _default;

package/lib/components/tile/__internal__/tile-context.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _default = /*#__PURE__*/(0, _react.createContext)({
+  paddingPropsFromTile: {}
+});
+exports.default = _default;

package/lib/components/tile/index.d.ts

@@ -1,2 +1,6 @@
-export { default } from "./tile.component";
+export { default as Tile } from "./tile.component";
 export type { TileProps } from "./tile.component";
+export { default as TileContent } from "./tile-content";
+export type { TileContentProps } from "./tile-content";
+export { default as TileFooter } from "./tile-footer";
+export type { TileFooterProps } from "./tile-footer";

package/lib/components/tile/index.js

@@ -3,11 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "Tile", {
   enumerable: true,
   get: function () {
     return _tile.default;
   }
 });
+Object.defineProperty(exports, "TileContent", {
+  enumerable: true,
+  get: function () {
+    return _tileContent.default;
+  }
+});
+Object.defineProperty(exports, "TileFooter", {
+  enumerable: true,
+  get: function () {
+    return _tileFooter.default;
+  }
+});
 var _tile = _interopRequireDefault(require("./tile.component"));
+var _tileContent = _interopRequireDefault(require("./tile-content"));
+var _tileFooter = _interopRequireDefault(require("./tile-footer"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/tile/tile-content/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./tile-content.component";
+export type { TileContentProps } from "./tile-content.component";

package/lib/components/tile/tile-content/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _tileContent.default;
+  }
+});
+var _tileContent = _interopRequireDefault(require("./tile-content.component"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/tile/tile-content/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/components/tile/tile-content/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/tile/tile-content/tile-content.component.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { SpaceProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface TileContentProps extends SpaceProps, TagProps {
+    children?: React.ReactNode;
+    width?: string | number;
+    height?: string | number;
+}
+declare const TileContent: ({ children, width, height, ...rest }: TileContentProps) => React.JSX.Element | null;
+export default TileContent;

package/lib/components/tile/tile-content/tile-content.component.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _tileContent = _interopRequireDefault(require("./tile-content.style"));
+var _tileContext = _interopRequireDefault(require("../__internal__/tile-context"));
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
+var _filterStyledSystemPaddingProps = _interopRequireDefault(require("../../../style/utils/filter-styled-system-padding-props"));
+var _filterStyledSystemMarginProps = _interopRequireDefault(require("../../../style/utils/filter-styled-system-margin-props"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 TileContent = ({
+  children,
+  width,
+  height,
+  ...rest
+}) => {
+  const {
+    isHorizontal,
+    paddingPropsFromTile
+  } = (0, _react.useContext)(_tileContext.default);
+  if (!children) {
+    return null;
+  }
+  const spacingProps = {
+    ...(0, _filterStyledSystemPaddingProps.default)(rest),
+    ...(0, _filterStyledSystemMarginProps.default)(rest)
+  };
+  return /*#__PURE__*/_react.default.createElement(_tileContent.default, _extends({
+    width: width,
+    height: height,
+    isHorizontal: isHorizontal,
+    isVertical: !isHorizontal
+  }, paddingPropsFromTile, spacingProps, (0, _tags.default)("tile-content", rest)), children);
+};
+var _default = TileContent;
+exports.default = _default;

package/lib/components/tile/tile-content/tile-content.style.d.ts

@@ -0,0 +1,9 @@
+import { TileContentProps } from "./tile-content.component";
+interface StyledTileContentProps extends TileContentProps {
+    isHorizontal?: boolean;
+    isVertical?: boolean;
+    width?: string | number;
+    height?: string | number;
+}
+declare const StyledTileContent: import("styled-components").StyledComponent<"div", any, StyledTileContentProps, never>;
+export default StyledTileContent;

package/lib/components/tile/tile-content/tile-content.style.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledSystem = require("styled-system");
+var _base = _interopRequireDefault(require("../../../style/themes/base"));
+var _elementSizing = _interopRequireDefault(require("../../../style/utils/element-sizing"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const StyledTileContent = _styledComponents.default.div`
+  ${({
+  isHorizontal,
+  isVertical,
+  width,
+  height
+}) => (0, _styledComponents.css)`
+    ${_styledSystem.space}
+
+    box-sizing: border-box;
+    position: relative;
+    flex-grow: 1;
+
+    ${isHorizontal && (0, _styledComponents.css)`
+      display: inline;
+
+      :last-of-type {
+        padding-right: 0;
+      }
+
+      :first-of-type {
+        padding-left: 0;
+      }
+
+      & + & {
+        margin-top: 0;
+        border-left: solid 1px var(--colorsUtilityMajor050);
+      }
+    `}
+
+    ${isVertical && (0, _styledComponents.css)`
+      width: auto;
+
+      :last-of-type {
+        padding-bottom: 0;
+      }
+
+      :first-of-type {
+        padding-top: 0;
+      }
+
+      & + & {
+        margin-top: 0;
+        border-top: solid 1px var(--colorsUtilityMajor050);
+      }
+    `}
+
+    ${(width || height) && (0, _styledComponents.css)`
+      flex-grow: 0;
+      ${(0, _elementSizing.default)({
+  width: width || /* istanbul ignore next */undefined,
+  height: height || undefined
+})}
+    `}
+  `}
+`;
+StyledTileContent.defaultProps = {
+  theme: _base.default
+};
+var _default = StyledTileContent;
+exports.default = _default;

package/lib/components/tile/tile-footer/tile-footer.component.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
 import { PaddingProps } from "styled-system";
-export interface TileFooterProps extends PaddingProps {
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface TileFooterProps extends PaddingProps, TagProps {
     children?: React.ReactNode;
     /** set which background color variant should be used */
     variant?: "default" | "black" | "transparent";
 }
-export declare const TileFooter: ({ variant, children, ...props }: TileFooterProps) => React.JSX.Element;
+export declare const TileFooter: ({ variant, children, ...rest }: TileFooterProps) => React.JSX.Element;
 export default TileFooter;

package/lib/components/tile/tile-footer/tile-footer.component.js

@@ -7,18 +7,17 @@ exports.default = exports.TileFooter = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tileFooter = _interopRequireDefault(require("./tile-footer.style"));
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
+var _filterStyledSystemPaddingProps = _interopRequireDefault(require("../../../style/utils/filter-styled-system-padding-props"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 TileFooter = ({
   variant,
   children,
-  ...props
-}) => {
-  return /*#__PURE__*/_react.default.createElement(_tileFooter.default, _extends({
-    "data-component": "tile-footer",
-    variant: variant
-  }, props), children);
-};
+  ...rest
+}) => /*#__PURE__*/_react.default.createElement(_tileFooter.default, _extends({
+  variant: variant
+}, (0, _filterStyledSystemPaddingProps.default)(rest), (0, _tags.default)("tile-footer", rest)), children);
 exports.TileFooter = TileFooter;
 var _default = TileFooter;
 exports.default = _default;

package/lib/components/tile/tile.component.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
 import { SpaceProps, WidthProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 declare type DesignTokensType = keyof typeof DesignTokens;
-export interface TileProps extends SpaceProps, WidthProps {
+export interface TileProps extends SpaceProps, WidthProps, TagProps {
     /** Sets the theme of the tile - either 'tile', 'transparent' or 'active' */
     variant?: "tile" | "transparent" | "active";
     /**
@@ -31,5 +32,5 @@ export interface TileProps extends SpaceProps, WidthProps {
      */
     height?: string | number;
 }
-export declare const Tile: ({ variant, p, children, orientation, width, roundness, height, ...props }: TileProps) => React.JSX.Element;
+export declare const Tile: ({ variant, p, children, orientation, width, roundness, height, borderWidth, borderVariant, ...rest }: TileProps) => React.JSX.Element;
 export default Tile;

package/lib/components/tile/tile.component.js

@@ -6,7 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Tile = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _tile = require("./tile.style");
+var _tile = _interopRequireDefault(require("./tile.style"));
+var _tileContext = _interopRequireDefault(require("./__internal__/tile-context"));
+var _filterStyledSystemPaddingProps = _interopRequireDefault(require("../../style/utils/filter-styled-system-padding-props"));
+var _filterStyledSystemMarginProps = _interopRequireDefault(require("../../style/utils/filter-styled-system-margin-props"));
+var _computeContentPadding = _interopRequireDefault(require("./__internal__/compute-content-padding"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 Tile = ({
@@ -17,48 +22,32 @@ const Tile = ({
   width = "100%",
   roundness = "default",
   height,
-  ...props
+  borderWidth,
+  borderVariant,
+  ...rest
 }) => {
   const isHorizontal = orientation === "horizontal";
-  const isVertical = orientation === "vertical";
-  const wrappedChildren = _react.default.Children.map(children, (child, index) => {
-    if (!child) {
-      return null;
-    }
-
-    // istanbul ignore if
-    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
-      return child;
-    }
-    const {
-      width: contentWidth,
-      height: contentHeight,
-      ...childProps
-    } = child.props;
-    const key = child.key || `tile-content-${index + 1}`;
-    return /*#__PURE__*/_react.default.createElement(_tile.TileContent, _extends({
-      key: key,
-      width: contentWidth,
-      height: contentHeight,
-      isHorizontal: isHorizontal,
-      isVertical: isVertical
-    }, isVertical && {
-      pt: props.pt || props.py || p,
-      pb: props.pb || props.py || p
-    }, isHorizontal && {
-      pr: props.pr || props.px || p,
-      pl: props.pl || props.px || p
-    }), /*#__PURE__*/_react.default.cloneElement(child, childProps));
+  const paddingProps = (0, _filterStyledSystemPaddingProps.default)({
+    p,
+    ...rest
   });
-  return /*#__PURE__*/_react.default.createElement(_tile.StyledTile, _extends({
+  const marginProps = (0, _filterStyledSystemMarginProps.default)(rest);
+  const contentPaddingProps = (0, _computeContentPadding.default)(paddingProps, isHorizontal);
+  return /*#__PURE__*/_react.default.createElement(_tile.default, _extends({
     variant: variant,
     width: width,
     height: height,
-    "data-component": "tile",
     isHorizontal: isHorizontal,
     p: p,
-    roundness: roundness
-  }, props), wrappedChildren);
+    roundness: roundness,
+    borderWidth: borderWidth,
+    borderVariant: borderVariant
+  }, paddingProps, marginProps, (0, _tags.default)("tile", rest)), /*#__PURE__*/_react.default.createElement(_tileContext.default.Provider, {
+    value: {
+      isHorizontal,
+      paddingPropsFromTile: contentPaddingProps
+    }
+  }, children));
 };
 exports.Tile = Tile;
 var _default = Tile;

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

@@ -1,13 +1,6 @@
 import { SpaceProps } from "styled-system";
 import { TileProps } from "./tile.component";
-interface TileContentProps {
-    isHorizontal?: boolean;
-    isVertical?: boolean;
-    width?: TileProps["width"];
-    height?: TileProps["height"];
-}
-declare const TileContent: import("styled-components").StyledComponent<"div", any, TileContentProps, never>;
 declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant"> & {
     isHorizontal?: boolean | undefined;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
-export { StyledTile, TileContent };
+export default StyledTile;

package/lib/components/tile/tile.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TileContent = exports.StyledTile = void 0;
+exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
@@ -27,63 +27,6 @@ const getBorderColor = borderVariant => {
       return "var(--colorsUtilityMajor100)";
   }
 };
-const TileContent = _styledComponents.default.div`
-  ${({
-  isHorizontal,
-  isVertical,
-  width,
-  height
-}) => (0, _styledComponents.css)`
-    ${_styledSystem.space}
-
-    box-sizing: border-box;
-    position: relative;
-    flex-grow: 1;
-
-    ${isHorizontal && (0, _styledComponents.css)`
-      display: inline;
-
-      :last-of-type {
-        padding-right: 0;
-      }
-
-      :first-of-type {
-        padding-left: 0;
-      }
-
-      & + & {
-        margin-top: 0;
-        border-left: solid 1px var(--colorsUtilityMajor050);
-      }
-    `}
-
-    ${isVertical && (0, _styledComponents.css)`
-      width: auto;
-
-      :last-of-type {
-        padding-bottom: 0;
-      }
-
-      :first-of-type {
-        padding-top: 0;
-      }
-
-      & + & {
-        margin-top: 0;
-        border-top: solid 1px var(--colorsUtilityMajor050);
-      }
-    `}
-
-    ${(width || height) && (0, _styledComponents.css)`
-      flex-grow: 0;
-      ${(0, _elementSizing.default)({
-  width: width || /* istanbul ignore next */undefined,
-  height: height || undefined
-})}
-    `}
-  `}
-`;
-exports.TileContent = TileContent;
 const StyledTile = _styledComponents.default.div`
   ${({
   borderVariant,
@@ -123,10 +66,8 @@ const StyledTile = _styledComponents.default.div`
 })}
   `}
 `;
-exports.StyledTile = StyledTile;
-TileContent.defaultProps = {
-  theme: _base.default
-};
 StyledTile.defaultProps = {
   theme: _base.default
-};
+};
+var _default = StyledTile;
+exports.default = _default;

package/lib/style/utils/filter-styled-system-padding-props.d.ts

@@ -1,3 +1,10 @@
 import { PaddingProps } from "styled-system";
-export declare const paddingPropertyNames: string[];
+export declare const paddingNames: (keyof PaddingProps)[];
+export declare const paddingLeftPropertyNames: (keyof PaddingProps)[];
+export declare const paddingRightPropertyNames: (keyof PaddingProps)[];
+export declare const paddingXPropertyNames: (keyof PaddingProps)[];
+export declare const paddingTopPropertyNames: (keyof PaddingProps)[];
+export declare const paddingBottomPropertyNames: (keyof PaddingProps)[];
+export declare const paddingYPropertyNames: (keyof PaddingProps)[];
+export declare const paddingPropertyNames: (keyof PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>)[];
 export default function filterStyledSystemPaddingProps(props: Record<string, unknown> | PaddingProps): PaddingProps;

package/lib/style/utils/filter-styled-system-padding-props.js

@@ -4,10 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = filterStyledSystemPaddingProps;
-exports.paddingPropertyNames = void 0;
+exports.paddingYPropertyNames = exports.paddingXPropertyNames = exports.paddingTopPropertyNames = exports.paddingRightPropertyNames = exports.paddingPropertyNames = exports.paddingNames = exports.paddingLeftPropertyNames = exports.paddingBottomPropertyNames = void 0;
 var _filterObjectProperties = _interopRequireDefault(require("../../__internal__/filter-object-properties"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const paddingPropertyNames = ["padding", "p", "paddingLeft", "pl", "paddingRight", "pr", "paddingTop", "pt", "paddingBottom", "pb", "paddingX", "px", "paddingY", "py"];
+const paddingNames = ["p", "padding"];
+exports.paddingNames = paddingNames;
+const paddingLeftPropertyNames = ["pl", "paddingLeft"];
+exports.paddingLeftPropertyNames = paddingLeftPropertyNames;
+const paddingRightPropertyNames = ["pr", "paddingRight"];
+exports.paddingRightPropertyNames = paddingRightPropertyNames;
+const paddingXPropertyNames = ["px", "paddingX"];
+exports.paddingXPropertyNames = paddingXPropertyNames;
+const paddingHorizontalPropertyNames = [...paddingLeftPropertyNames, ...paddingRightPropertyNames, ...paddingXPropertyNames];
+const paddingTopPropertyNames = ["pt", "paddingTop"];
+exports.paddingTopPropertyNames = paddingTopPropertyNames;
+const paddingBottomPropertyNames = ["pb", "paddingBottom"];
+exports.paddingBottomPropertyNames = paddingBottomPropertyNames;
+const paddingYPropertyNames = ["py", "paddingY"];
+exports.paddingYPropertyNames = paddingYPropertyNames;
+const paddingVerticalPropertyNames = [...paddingTopPropertyNames, ...paddingBottomPropertyNames, ...paddingYPropertyNames];
+const paddingPropertyNames = [...paddingNames, ...paddingHorizontalPropertyNames, ...paddingVerticalPropertyNames];
 exports.paddingPropertyNames = paddingPropertyNames;
 function filterStyledSystemPaddingProps(props) {
   return (0, _filterObjectProperties.default)(props, paddingPropertyNames);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "122.0.1",
+  "version": "123.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",