carbon-react 122.0.1 → 123.0.1

package/lib/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/lib/components/textarea/textarea.component.js

@@ -224,10 +224,10 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     validationRedesignOptIn: validationRedesignOptIn
-  }, inputHint ? /*#__PURE__*/_react.default.createElement(_textbox.StyledInputHint, {
+  }, (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, {
     id: inputHintId,
     "data-element": "input-hint"
-  }, inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
+  }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,

package/lib/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/lib/components/textbox/textbox.component.js

@@ -202,10 +202,10 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
     "data-element": dataElement,
     validationIconId: validationRedesignOptIn ? undefined : validationId,
     validationRedesignOptIn: validationRedesignOptIn
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), inputHint ? /*#__PURE__*/_react.default.createElement(_textbox.StyledInputHint, {
+  }, (0, _utils.filterStyledSystemMarginProps)(props)), (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, {
     id: inputHintId,
     "data-element": "input-hint"
-  }, inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
+  }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,

package/lib/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/lib/components/textbox/textbox.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledInputHint = exports.StyledHintText = exports.ErrorBorder = void 0;
+exports.StyledHintText = exports.ErrorBorder = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 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; }
@@ -22,20 +22,11 @@ const ErrorBorder = _styledComponents.default.span`
     `}
 `;
 exports.ErrorBorder = ErrorBorder;
-const StyledInputHint = _styledComponents.default.p`
+const StyledHintText = _styledComponents.default.div`
   ::after {
     content: " ";
   }
 
-  display: block;
-  flex: 1;
-  margin-top: -3px;
-  margin-bottom: 8px;
-  color: var(--colorsUtilityYin055);
-  white-space: pre-wrap;
-`;
-exports.StyledInputHint = StyledInputHint;
-const StyledHintText = _styledComponents.default.div`
   margin-top: 0px;
   margin-bottom: 8px;
   color: var(--colorsUtilityYin055);

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;