carbon-react 114.0.0 → 114.2.0

package/lib/components/pod/pod.style.js

@@ -11,9 +11,7 @@ var _styledSystem = require("styled-system");
 
 var _themes = require("../../style/themes");
 
-var _link = _interopRequireDefault(require("../link"));
-
-var _link2 = require("../link/link.style");
+var _link = require("../link/link.style");
 
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 
@@ -26,16 +24,13 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 StyledPod = _styledComponents.default.div`
+  ${_styledSystem.margin}
   display: flex;
   align-items: flex-start;
   width: 100%;
-  text-align: ${({
-  alignTitle
-}) => alignTitle};
   ${({
   internalEditButton
 }) => internalEditButton && "position: relative"};
-  ${_styledSystem.margin}
   ${({
   height
 }) => height && `height: ${height}`};
@@ -45,15 +40,13 @@ const StyledPod = _styledComponents.default.div`
   }
 `;
 exports.StyledPod = StyledPod;
-
-const blockBackgrounds = variant => ({
+const blockBackgrounds = {
   primary: "var(--colorsUtilityYang100)",
   secondary: "var(--colorsUtilityMajor025)",
   tertiary: "var(--colorsUtilityMajor040)",
   transparent: "var(--colorsUtilityMajorTransparent)",
   tile: "var(--colorsUtilityYang100)"
-})[variant];
-
+};
 const StyledBlock = _styledComponents.default.div`
   ${({
   variant,
@@ -69,7 +62,7 @@ const StyledBlock = _styledComponents.default.div`
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
-      background-color: ${blockBackgrounds(variant)};
+      background-color: ${blockBackgrounds[variant]};
       width: 100%;
       height: 100%;
 
@@ -94,15 +87,13 @@ const StyledBlock = _styledComponents.default.div`
         `}
       `}
 
-      ${isFocused && (!internalEditButton || contentTriggersEdit) && (0, _styledComponents.css)`
-        outline: 3px solid var(--colorsSemanticFocus500);
-        border: none;
-        ${noBorder ? "" : "padding: 1px"};
-      `};
-
-      ${!isFocused && (!internalEditButton || contentTriggersEdit) && (0, _styledComponents.css)`
-        outline: none;
-      `};
+      ${(!internalEditButton || contentTriggersEdit) && (isFocused ? (0, _styledComponents.css)`
+            outline: 3px solid var(--colorsSemanticFocus500);
+            border: none;
+            padding: ${noBorder ? 0 : 1}px;
+          ` : (0, _styledComponents.css)`
+            outline: none;
+          `)}
 
       ${softDelete && (0, _styledComponents.css)`
         border: none;
@@ -148,13 +139,9 @@ const StyledFooter = _styledComponents.default.div`
     color: var(--colorsUtilityYin090);
     padding: ${footerPaddings[size]};
 
-    ${softDelete && (0, _styledComponents.css)`
-      color: var(--colorsUtilityYin055);
-    `}
+    ${softDelete && `color: var(--colorsUtilityYin055)`};
 
-    ${variant === "tile" && (0, _styledComponents.css)`
-      border-top: 1px solid var(--colorsUtilityMajor100);
-    `};
+    ${variant === "tile" && `border-top: 1px solid var(--colorsUtilityMajor100)`};
   `}
 `;
 exports.StyledFooter = StyledFooter;
@@ -172,88 +159,76 @@ const StyledActionsContainer = _styledComponents.default.div`
     `}
 `;
 exports.StyledActionsContainer = StyledActionsContainer;
-const actionButtonPaddings = {
-  "extra-small": 8,
-  small: 8,
-  medium: 16,
-  large: 16,
-  "extra-large": 16
+const actionButtonSizes = {
+  "extra-small": 34,
+  small: 34,
+  medium: 50,
+  large: 50,
+  "extra-large": 50
 };
-
-const actionButtonBackgrounds = variant => ({
+const actionButtonBackgrounds = {
   primary: "var(--colorsActionMajorYang100)",
   secondary: "var(--colorsActionMinor050)",
   tertiary: "var(--colorsActionMinor100)",
   transparent: "var(--colorsActionMajorTransparent)",
   tile: "var(--colorsActionMajorYang100)"
-})[variant];
-
-const getButtonStyles = ({
-  size,
-  variant,
-  noBorder,
-  isFocused,
+};
+const StyledEditAction = _styledComponents.default.a`
+  && {
+    ${({
+  displayOnlyOnHover,
   isHovered,
+  isFocused,
+  variant,
+  size,
   internalEditButton,
-  iconColor,
-  hoverBackgroundColor
+  noBorder
 }) => (0, _styledComponents.css)`
-  cursor: pointer;
-  background-color: ${actionButtonBackgrounds(variant)};
-  border: 1px solid var(--colorsActionMinor200);
-  margin-left: 8px;
-  margin-bottom: 8px;
-  box-sizing: content-box;
-  width: 16px;
-  height: 16px;
-  padding: ${actionButtonPaddings[size]}px;
-
-  ${_icon.default} {
-    top: -2px;
-    height: 16px;
-    width: 16px;
-    color: ${iconColor};
-  }
+      cursor: pointer;
+      background-color: ${actionButtonBackgrounds[variant]};
+      border: 1px solid var(--colorsActionMinor200);
+      margin-left: 8px;
+      margin-bottom: 8px;
+      box-sizing: border-box;
+      height: ${`${actionButtonSizes[size]}px`};
+      width: ${`${actionButtonSizes[size]}px`};
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-  ${noBorder && "border: none;"}
+      ${_icon.default} {
+        top: -2px;
+        height: 16px;
+        width: 16px;
+        color: var(--colorsActionMajor500);
+      }
 
-  ${internalEditButton && (0, _styledComponents.css)`
-    border: none;
-    background: var(--colorsActionMajorTransparent);
-  `}
-    
-  ${(isHovered || isFocused) && !internalEditButton && (0, _styledComponents.css)`
-    background-color: ${hoverBackgroundColor};
-    color: var(--colorsActionMajorYang100);
+      ${displayOnlyOnHover && !(isHovered || isFocused) && "display: none"}
 
-    ${_icon.default} {
-      color: var(--colorsActionMajorYang100);
-    }
-  `}
-  
-  ${isFocused && (0, _styledComponents.css)`
-    outline: 3px solid var(--colorsSemanticFocus500);
-    border: none;
-    padding: ${actionButtonPaddings[size] + (noBorder || internalEditButton ? 0 : 1)}px;
-  `};
-`;
+      ${noBorder && "border: none;"}
 
-const StyledEditAction = (0, _styledComponents.default)(_link.default)`
-  && > a,
-  && button {
-    ${({
-  displayOnlyOnHover,
-  isHovered,
-  isFocused
-}) => displayOnlyOnHover && !(isHovered || isFocused) && "display: none;"}
+      ${internalEditButton && (0, _styledComponents.css)`
+        border: none;
+        background: var(--colorsActionMajorTransparent);
+      `}
+    
+      ${(isHovered || isFocused) && !internalEditButton && (0, _styledComponents.css)`
+        background-color: var(--colorsActionMajor600);
+        color: var(--colorsActionMajorYang100);
 
-    ${props => getButtonStyles({ ...props,
-  iconColor: "var(--colorsActionMajor500)",
-  hoverBackgroundColor: "var(--colorsActionMajor600)"
-})}
+        ${_icon.default} {
+          color: var(--colorsActionMajorYang100);
+        }
+      `}
+      
+      ${isFocused && (0, _styledComponents.css)`
+        outline: 3px solid var(--colorsSemanticFocus500);
+        border: none;
+      `};
+    `};
   }
 
-  ${_link2.StyledContent} {
+  ${_link.StyledContent} {
     clip: rect(1px, 1px, 1px, 1px);
     position: absolute;
   }
@@ -262,26 +237,98 @@ exports.StyledEditAction = StyledEditAction;
 const StyledDeleteButton = (0, _styledComponents.default)(_iconButton.default)`
   && {
     ${({
-  displayOnlyOnHover
-}) => displayOnlyOnHover && "display: none;"}
-    ${props => getButtonStyles({ ...props,
-  iconColor: "var(--colorsSemanticNegative500)",
-  hoverBackgroundColor: "var(--colorsSemanticNegative600)"
-})}
+  noBorder,
+  internalEditButton,
+  isHovered,
+  isFocused,
+  variant,
+  size
+}) => (0, _styledComponents.css)`
+      cursor: pointer;
+      background-color: ${actionButtonBackgrounds[variant]};
+      border: ${noBorder ? "none" : "1px solid var(--colorsActionMinor200)"};
+      margin-left: 8px;
+      margin-bottom: 8px;
+      box-sizing: border-box;
+      height: ${`${actionButtonSizes[size]}px`};
+      width: ${`${actionButtonSizes[size]}px`};
+
+      ${_icon.default} {
+        top: -2px;
+        height: 16px;
+        width: 16px;
+        color: var(--colorsSemanticNegative500);
+      }
+
+      ${internalEditButton && (0, _styledComponents.css)`
+        border: none;
+        background: var(--colorsActionMajorTransparent);
+      `}
+
+      ${(isHovered || isFocused) && !internalEditButton && (0, _styledComponents.css)`
+        background-color: var(--colorsSemanticNegative600);
+        color: var(--colorsActionMajorYang100);
+
+        ${_icon.default} {
+          color: var(--colorsActionMajorYang100);
+        }
+      `}
+  
+      ${isFocused && (0, _styledComponents.css)`
+        outline: 3px solid var(--colorsSemanticFocus500);
+        border: none;
+      `};
+    `}
   }
 `;
 exports.StyledDeleteButton = StyledDeleteButton;
 const StyledUndoButton = (0, _styledComponents.default)(_iconButton.default)`
   && {
     ${({
-  displayOnlyOnHover,
   isHovered,
-  isFocused
-}) => displayOnlyOnHover && !(isHovered || isFocused) && "display: none;"}
-    ${props => getButtonStyles({ ...props,
-  iconColor: "var(--colorsActionMajor500)",
-  hoverBackgroundColor: "var(--colorsActionMajor600)"
-})}
+  isFocused,
+  variant,
+  size,
+  noBorder,
+  internalEditButton
+}) => (0, _styledComponents.css)`
+      cursor: pointer;
+      background-color: ${actionButtonBackgrounds[variant]};
+      border: 1px solid var(--colorsActionMinor200);
+      margin-left: 8px;
+      margin-bottom: 8px;
+      box-sizing: border-box;
+      height: ${`${actionButtonSizes[size]}px`};
+      width: ${`${actionButtonSizes[size]}px`};
+
+      ${_icon.default} {
+        top: -2px;
+        height: 16px;
+        width: 16px;
+        color: var(--colorsActionMajor500);
+      }
+
+      ${noBorder && "border: none;"}
+
+      ${internalEditButton && (0, _styledComponents.css)`
+        border: none;
+        background: var(--colorsActionMajorTransparent);
+      `}
+    
+    ${(isHovered || isFocused) && !internalEditButton && (0, _styledComponents.css)`
+        background-color: var(--colorsActionMajor600);
+        color: var(--colorsActionMajorYang100);
+
+        ${_icon.default} {
+          color: var(--colorsActionMajorYang100);
+        }
+      `}
+    
+    ${isFocused && (0, _styledComponents.css)`
+        outline: 3px solid var(--colorsSemanticFocus500);
+        border: none;
+      `};
+    `}
   }
 `;
 exports.StyledUndoButton = StyledUndoButton;

package/lib/components/show-edit-pod/show-edit-pod.style.js

@@ -9,18 +9,18 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _form = require("../form/form.style");
 
-var _podStyle = require("../pod/pod.style.js");
+var _pod = require("../pod/pod.style");
 
-var _pod = _interopRequireDefault(require("../pod"));
+var _pod2 = _interopRequireDefault(require("../pod"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StyledPod = (0, _styledComponents.default)(_pod.default)`
+const StyledPod = (0, _styledComponents.default)(_pod2.default)`
   ${_form.StyledFormFooter} {
     margin-top: 24px;
   }
 
-  ${_podStyle.StyledContent} {
+  ${_pod.StyledContent} {
     padding: 16px;
   }
 

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

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

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

@@ -1 +1,2 @@
-export { default } from "./tile-footer";
+export { default } from "./tile-footer.component";
+export type { TileFooterProps } from "./tile-footer.component";

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

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

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

@@ -9,18 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
-
 var _tileFooter = _interopRequireDefault(require("./tile-footer.style"));
 
-var _utils = require("../../../style/utils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const paddingPropTypes = (0, _utils.filterStyledSystemPaddingProps)(_propTypes2.default.space);
-
 const TileFooter = ({
   variant,
   children,
@@ -33,11 +27,163 @@ const TileFooter = ({
 };
 
 exports.TileFooter = TileFooter;
-TileFooter.propTypes = { ...paddingPropTypes,
-
-  /** Sets which background color variant should be used */
-  variant: _propTypes.default.oneOf(["default", "black", "transparent"]),
-  children: _propTypes.default.node
+TileFooter.propTypes = {
+  "children": _propTypes.default.node,
+  "p": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "padding": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "paddingY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pl": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "pt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "px": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "py": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "variant": _propTypes.default.oneOf(["black", "default", "transparent"])
 };
 var _default = TileFooter;
 exports.default = _default;

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

@@ -0,0 +1,5 @@
+import { TileFooterProps } from "./tile-footer.component";
+declare const StyledTileFooter: import("styled-components").StyledComponent<"div", any, {
+    variant: TileFooterProps["variant"];
+}, never>;
+export default StyledTileFooter;

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

@@ -0,0 +1,29 @@
+import React from "react";
+import * as DesignTokens from "@sage/design-tokens/js/base/common";
+import { SpaceProps, WidthProps } from "styled-system";
+declare type DesignTokensType = keyof typeof DesignTokens;
+export interface TileProps extends SpaceProps, WidthProps {
+    /** Sets the theme of the tile - either 'tile', 'transparent' or 'active' */
+    variant?: "tile" | "transparent" | "active";
+    /**
+     * The content to render within the tile. Each child will be wrapped with
+     * a TileContent wrapper, which allows any individual child component to take a
+     * percentage-based width prop, dictating the percentage of the tile width it will take up.
+     *
+     * Width will have no effect on a child component if the tile orientation is set to 'vertical'.
+     */
+    children?: React.ReactNode;
+    /** The orientation of the tile - set to either horizontal or vertical */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Set a percentage-based width for the whole Tile component, relative to its parent.
+     * If unset or zero, this will default to 100%.
+     */
+    width?: string | number;
+    /** Sets the border width by using these design tokens */
+    borderWidth?: Extract<DesignTokensType, `borderWidth${string}`>;
+    /** Sets the border variant that should be used */
+    borderVariant?: "default" | "selected" | "positive" | "negative" | "caution" | "info";
+}
+export declare const Tile: ({ variant, p, children, orientation, width, ...props }: TileProps) => JSX.Element;
+export default Tile;