carbon-react 122.0.1 → 123.0.1

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/textarea/textarea.component.d.ts

@@ -59,7 +59,10 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     label?: string;
     /** Inline label alignment */
     labelAlign?: "left" | "right";
-    /** Text applied to label help tooltip */
+    /** [Legacy] Text applied to label help tooltip. When opted into new design validations
+     * it will render as a hint above the input, unless an `inputHint`
+     * prop is also passed
+     */
     labelHelp?: React.ReactNode;
     /** When true, label is placed in line an input */
     labelInline?: boolean;

package/esm/components/textarea/textarea.component.js

@@ -12,7 +12,7 @@ import StyledTextarea, { MIN_HEIGHT } from "./textarea.style";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
-import { ErrorBorder, StyledHintText, StyledInputHint } from "../textbox/textbox.style";
+import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import Box from "../box";
 import Logger from "../../__internal__/utils/logger";
@@ -215,10 +215,10 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     validationRedesignOptIn: validationRedesignOptIn
-  }, inputHint ? /*#__PURE__*/React.createElement(StyledInputHint, {
+  }, (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/React.createElement(StyledHintText, {
     id: inputHintId,
     "data-element": "input-hint"
-  }, inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
+  }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: error,

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

@@ -52,7 +52,10 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     label?: string;
     /** Inline label alignment */
     labelAlign?: "left" | "right";
-    /** A message that the Help component will display */
+    /** [Legacy] Text applied to label help tooltip. When opted into new design validations
+     * it will render as a hint above the input, unless an `inputHint`
+     * prop is also passed
+     */
     labelHelp?: React.ReactNode;
     /** When true label is inline */
     labelInline?: boolean;

package/esm/components/textbox/textbox.component.js

@@ -11,7 +11,7 @@ import StyledPrefix from "./__internal__/prefix.style";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import useCharacterCount from "../../hooks/__internal__/useCharacterCount";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
-import { ErrorBorder, StyledInputHint, StyledHintText } from "./textbox.style";
+import { ErrorBorder, StyledHintText } from "./textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 import NumeralDateContext from "../numeral-date/numeral-date-context";
@@ -193,10 +193,10 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     "data-element": dataElement,
     validationIconId: validationRedesignOptIn ? undefined : validationId,
     validationRedesignOptIn: validationRedesignOptIn
-  }, filterStyledSystemMarginProps(props)), inputHint ? /*#__PURE__*/React.createElement(StyledInputHint, {
+  }, filterStyledSystemMarginProps(props)), (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/React.createElement(StyledHintText, {
     id: inputHintId,
     "data-element": "input-hint"
-  }, inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
+  }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: error,

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

@@ -2,6 +2,5 @@ declare const ErrorBorder: import("styled-components").StyledComponent<"span", a
     warning: boolean;
     inline?: boolean | undefined;
 }, never>;
-declare const StyledInputHint: import("styled-components").StyledComponent<"p", any, {}, never>;
 declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { StyledHintText, ErrorBorder, StyledInputHint };
+export { StyledHintText, ErrorBorder };

package/esm/components/textbox/textbox.style.js

@@ -13,22 +13,14 @@ const ErrorBorder = styled.span`
       top: 0px;
     `}
 `;
-const StyledInputHint = styled.p`
+const StyledHintText = styled.div`
   ::after {
     content: " ";
   }
 
-  display: block;
-  flex: 1;
-  margin-top: -3px;
-  margin-bottom: 8px;
-  color: var(--colorsUtilityYin055);
-  white-space: pre-wrap;
-`;
-const StyledHintText = styled.div`
   margin-top: 0px;
   margin-bottom: 8px;
   color: var(--colorsUtilityYin055);
   font-size: 14px;
 `;
-export { StyledHintText, ErrorBorder, StyledInputHint };
+export { StyledHintText, ErrorBorder };

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;