carbon-react 111.15.0 → 111.17.0

package/lib/components/sidebar/sidebar.component.js

@@ -64,6 +64,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   focusableContainers,
   focusableSelectors,
   width,
+  headerPadding = {},
   ...rest
 }, ref) => {
   const locale = (0, _useLocale.default)();
@@ -112,9 +113,11 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     role: role
   }, (0, _utils.filterStyledSystemPaddingProps)(rest), {
     width: width
-  }), header && /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, {
+  }), header && /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, _extends({
+    closeIcon: closeIcon()
+  }, headerPadding, {
     id: headerId
-  }, header), closeIcon(), /*#__PURE__*/_react.default.createElement(_box.default, _extends({
+  }), header), !header && closeIcon(), /*#__PURE__*/_react.default.createElement(_box.default, _extends({
     "data-element": "sidebar-content",
     pt: "var(--spacing300)",
     pb: "var(--spacing400)",
@@ -178,6 +181,162 @@ Sidebar.propTypes = {
     }]).isRequired
   }),
   "header": _propTypes.default.node,
+  "headerPadding": _propTypes.default.shape({
+    "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])
+  }),
   "onCancel": _propTypes.default.func,
   "open": _propTypes.default.bool.isRequired,
   "p": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.TileFooter = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -32,10 +32,11 @@ const TileFooter = ({
   }, props), children);
 };
 
+exports.TileFooter = TileFooter;
 TileFooter.propTypes = { ...paddingPropTypes,
 
-  /** set which background color variant should be used */
-  variant: _propTypes.default.oneOf(["default", "transparent"]),
+  /** Sets which background color variant should be used */
+  variant: _propTypes.default.oneOf(["default", "black", "transparent"]),
   children: _propTypes.default.node
 };
 var _default = TileFooter;

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

@@ -3,7 +3,7 @@ import { PaddingProps } from "styled-system";
 
 export interface TileFooterProps extends PaddingProps {
   /** set which background color variant should be used */
-  variant?: "default" | "transparent";
+  variant?: "default" | "black" | "transparent";
 }
 
 declare function TileFooter(

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

@@ -15,13 +15,26 @@ 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 getBackgroundColor = variant => {
+  switch (variant) {
+    case "transparent":
+      return "transparent";
+
+    case "black":
+      return "var(--colorsUtilityYin100)";
+
+    default:
+      return "var(--colorsUtilityMajor100)";
+  }
+};
+
 const StyledTileFooter = _styledComponents.default.div`
   ${_styledSystem.padding}
 
   ${({
   variant
 }) => (0, _styledComponents.css)`
-    background: ${variant === "transparent" ? "transparent" : "var(--colorsUtilityMajor025)"};
+    background: ${getBackgroundColor(variant)};
     border-top: 1px solid var(--colorsUtilityMajor100);
   `}
 `;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Tile = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -61,7 +61,11 @@ const Tile = ({
     p: p
   }, props), wrappedChildren);
 };
+/** TODO: When we convert this to typescript, dynamically pull the border tokens for borderWidth
+ * See how the Box component does this with boxShadows for an example */
 
+
+exports.Tile = Tile;
 Tile.propTypes = {
   /** Styled system spacing props */
   ..._propTypes2.default.space,
@@ -85,7 +89,13 @@ Tile.propTypes = {
    * Set a percentage-based width for the whole Tile component, relative to its parent.
    * If unset or zero, this will default to 100%.
    */
-  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+
+  /** Sets the border width by using these design tokens */
+  borderWidth: _propTypes.default.oneOf(["borderWidth000", "borderWidth100", "borderWidth200", "borderWidth300", "borderWidth400"]),
+
+  /** Sets the border variant that should be used */
+  borderVariant: _propTypes.default.oneOf(["default", "selected", "positive", "negative", "caution", "info"])
 };
 var _default = Tile;
 exports.default = _default;

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

@@ -24,6 +24,21 @@ export interface TileProps extends SpaceProps {
    * If unset or zero, this will default to 100%.
    */
   width?: string | number;
+  /** Sets the border width by using these design tokens */
+  borderWidth?:
+    | "borderWidth000"
+    | "borderWidth100"
+    | "borderWidth200"
+    | "borderWidth300"
+    | "borderWidth400";
+  /** Sets the border variant that should be used */
+  borderVariant?:
+    | "default"
+    | "selected"
+    | "positive"
+    | "negative"
+    | "caution"
+    | "info";
 }
 
 declare function Tile(props: TileProps): JSX.Element;

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

@@ -21,6 +21,28 @@ 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 getBorderColor = borderVariant => {
+  switch (borderVariant) {
+    case "selected":
+      return "var(--colorsUtilityYin100)";
+
+    case "positive":
+      return "var(--colorsSemanticPositive500)";
+
+    case "negative":
+      return "var(--colorsSemanticNegative500)";
+
+    case "caution":
+      return "var(--colorsSemanticCaution500)";
+
+    case "info":
+      return "var(--colorsSemanticInfo500)";
+
+    default:
+      return "var(--colorsUtilityMajor100)";
+  }
+};
+
 const TileContent = _styledComponents.default.div`
   ${({
   isHorizontal,
@@ -78,12 +100,14 @@ const StyledTile = _styledComponents.default.div`
   ${({
   isHorizontal,
   tileTheme,
-  width
+  width,
+  borderWidth = "borderWidth100",
+  borderVariant
 }) => (0, _styledComponents.css)`
     ${_styledSystem.space}
 
     box-sizing: border-box;
-    border: 1px solid var(--colorsUtilityMajor100);
+    border: var(--${borderWidth}) solid ${getBorderColor(borderVariant)};
 
     ${tileTheme === "tile" && (0, _styledComponents.css)`
       background-color: var(--colorsUtilityYang100);
@@ -119,7 +143,9 @@ StyledTile.propTypes = {
   orientation: _propTypes.default.string,
   padding: _propTypes.default.string,
   tileTheme: _propTypes.default.string,
-  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  borderWidth: _propTypes.default.string,
+  borderVariant: _propTypes.default.string
 };
 StyledTile.defaultProps = {
   theme: _base.default

package/lib/style/design-tokens/debug-theme.util.d.ts

@@ -16,6 +16,7 @@ declare const _default: {
         colorsUtilityMajor050: string;
         colorsUtilityMajor075: string;
         colorsUtilityMajorTransparent: string;
+        colorsUtilityYin100: string;
         colorsUtilityYin030: string;
         colorsUtilityYin055: string;
         colorsUtilityYin065: string;
@@ -117,6 +118,7 @@ declare const _default: {
         colorsSemanticInfoYang100: string;
         colorsLogo: string;
         colorsTransparent: string;
+        colorsYin100: string;
         colorsYin030: string;
         colorsYin055: string;
         colorsYin065: string;
@@ -301,13 +303,25 @@ declare const _default: {
         fontFamiliesIos: string;
         fontFamiliesAndroid: string;
         fontFamiliesOther: string;
+        borderRadius100: string;
+        borderRadius200: string;
+        borderRadius300: string;
+        borderRadius400: string;
         borderRadiusCircle: string;
+        borderRadius025: string;
+        borderRadius050: string;
+        borderRadius000: string;
         typographyAccordionTitleM: string;
+        typographyAccordionTitleS: string;
         typographyAccordionSubtitleM: string;
+        typographyAccordionSubtitleS: string;
         typographyAccordionParagraphM: string;
+        typographyAccordionParagraphS: string;
         typographyActionPopoverMenuItemM: string;
         typographyAnchorNavLabelM: string;
         typographyBadgeLabelM: string;
+        typographyBreadcrumbSeparatorM: string;
+        typographyBreadcrumbCurrentPageM: string;
         typographyButtonLabelS: string;
         typographyButtonLabelM: string;
         typographyButtonLabelL: string;
@@ -327,7 +341,7 @@ declare const _default: {
         typographyDialogTitleL: string;
         typographyDialogTitleXl: string;
         typographyDialogTitleXxl: string;
-        typographyDialogSubtitle: string;
+        typographyDialogSubtitleM: string;
         typographyDialogParagraphXs: string;
         typographyDialogParagraphS: string;
         typographyDialogParagraphMs: string;

package/lib/style/themes/sage/index.d.ts

@@ -16,6 +16,7 @@ declare var _default: {
         colorsUtilityMajor050: string;
         colorsUtilityMajor075: string;
         colorsUtilityMajorTransparent: string;
+        colorsUtilityYin100: string;
         colorsUtilityYin030: string;
         colorsUtilityYin055: string;
         colorsUtilityYin065: string;
@@ -117,6 +118,7 @@ declare var _default: {
         colorsSemanticInfoYang100: string;
         colorsLogo: string;
         colorsTransparent: string;
+        colorsYin100: string;
         colorsYin030: string;
         colorsYin055: string;
         colorsYin065: string;
@@ -301,13 +303,25 @@ declare var _default: {
         fontFamiliesIos: string;
         fontFamiliesAndroid: string;
         fontFamiliesOther: string;
+        borderRadius100: string;
+        borderRadius200: string;
+        borderRadius300: string;
+        borderRadius400: string;
         borderRadiusCircle: string;
+        borderRadius025: string;
+        borderRadius050: string;
+        borderRadius000: string;
         typographyAccordionTitleM: string;
+        typographyAccordionTitleS: string;
         typographyAccordionSubtitleM: string;
+        typographyAccordionSubtitleS: string;
         typographyAccordionParagraphM: string;
+        typographyAccordionParagraphS: string;
         typographyActionPopoverMenuItemM: string;
         typographyAnchorNavLabelM: string;
         typographyBadgeLabelM: string;
+        typographyBreadcrumbSeparatorM: string;
+        typographyBreadcrumbCurrentPageM: string;
         typographyButtonLabelS: string;
         typographyButtonLabelM: string;
         typographyButtonLabelL: string;
@@ -327,7 +341,7 @@ declare var _default: {
         typographyDialogTitleL: string;
         typographyDialogTitleXl: string;
         typographyDialogTitleXxl: string;
-        typographyDialogSubtitle: string;
+        typographyDialogSubtitleM: string;
         typographyDialogParagraphXs: string;
         typographyDialogParagraphS: string;
         typographyDialogParagraphMs: string;

package/lib/style/utils/form-style-utils.d.ts

@@ -10,9 +10,11 @@ export declare const calculateFormSpacingValues: (props: PaddingProps, isFormCon
     "margin-left": string;
     "margin-right": string;
 } | {
+    ":not(.padded)"?: {
+        "padding-left": string;
+        "padding-right": string;
+    } | undefined;
     "margin-bottom": string;
-    "padding-left": string | undefined;
-    "padding-right": string | undefined;
     "margin-left": string;
     "margin-right": string;
 };

package/lib/style/utils/form-style-utils.js

@@ -104,8 +104,13 @@ const calculateFormSpacingValues = (props, isFormContent, containerComponent = "
       "padding-right": spacingRightValue
     } : {
       "margin-bottom": setNegativeValue(spacingBottomValue),
-      "padding-left": isSidebar ? _sidebar.SIDEBAR_LEFT_PADDING : undefined,
-      "padding-right": isSidebar ? _sidebar.SIDEBAR_RIGHT_PADDING : undefined
+      ...(isSidebar && {
+        // if footer already has custom padding do not set
+        ":not(.padded)": {
+          "padding-left": _sidebar.SIDEBAR_LEFT_PADDING,
+          "padding-right": _sidebar.SIDEBAR_RIGHT_PADDING
+        }
+      })
     })
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "111.15.0",
+  "version": "111.17.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -44,7 +44,7 @@
   },
   "homepage": "https://carbon.sage.com",
   "peerDependencies": {
-    "@sage/design-tokens": "^2.41.0",
+    "@sage/design-tokens": "^2.52.0",
     "draft-js": "^0.11.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -64,7 +64,7 @@
     "@bahmutov/cypress-esbuild-preprocessor": "^2.1.3",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@sage/design-tokens": "^2.41.0",
+    "@sage/design-tokens": "^2.52.0",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/exec": "^6.0.2",
     "@semantic-release/git": "^10.0.1",

package/esm/components/confirm/confirm.d.ts

@@ -1,50 +0,0 @@
-import { IconType } from "components/icon/icon-type";
-import * as React from "react";
-import { DialogProps } from "../dialog";
-
-export interface ConfirmProps extends DialogProps {
-  /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
-  cancelButtonType?:
-    | "primary"
-    | "secondary"
-    | "tertiary"
-    | "dashed"
-    | "darkBackground";
-  /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
-  confirmButtonType?:
-    | "primary"
-    | "secondary"
-    | "tertiary"
-    | "dashed"
-    | "darkBackground";
-  /** Customise the cancel button label */
-  cancelLabel?: string;
-  /** Customise the confirm button label */
-  confirmLabel?: string;
-  /** Apply destructive style to the cancel button */
-  cancelButtonDestructive?: boolean;
-  /** Apply destructive style to the confirm button */
-  confirmButtonDestructive?: boolean;
-  /** Defines a cancel button Icon position related to the children: "before" | "after" */
-  cancelButtonIconPosition?: "before" | "after";
-  /** Defines an Icon type within the cancel button (see Icon for options) */
-  cancelButtonIconType?: IconType;
-  /** Defines a cancel button Icon position related to the children: "before" | "after" */
-  confirmButtonIconPosition?: "before" | "after";
-  /** Defines an Icon type within the confirm button (see Icon for options) */
-  confirmButtonIconType?: IconType;
-  /** Makes cancel button disabled */
-  disableCancel?: boolean;
-  /** Makes confirm button disabled */
-  disableConfirm?: boolean;
-  /** Defines an Icon type within the button (see Icon for options) */
-  iconType?: "error" | "warning";
-  /** Adds isLoading state into confirm button */
-  isLoadingConfirm?: boolean;
-  /** A custom event handler when a confirmation takes place */
-  onConfirm: (ev: React.MouseEvent<HTMLButtonElement>) => void;
-}
-
-declare class Confirm extends React.Component<ConfirmProps> {}
-
-export default Confirm;

package/esm/components/dialog-full-screen/dialog-full-screen.d.ts

@@ -1,52 +0,0 @@
-import * as React from "react";
-import { ModalProps } from "../modal";
-
-export interface DialogFullScreenProps extends ModalProps {
-  /** Prop to specify the aria-describedby property of the DialogFullscreen component */
-  "aria-describedby"?: string;
-  /**
-   * Prop to specify the aria-label of the DialogFullscreen component.
-   * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
-   */
-  "aria-label"?: string;
-  /**
-   * Prop to specify the aria-labelledby property of the DialogFullscreen component
-   * To be used when the title prop is a custom React Node,
-   * or the component is labelled by an internal element other than the title.
-   */
-  "aria-labelledby"?: string;
-  /** Child elements */
-  children?: React.ReactNode;
-  /** Reference to the scrollable content element */
-  contentRef?:
-    | React.MutableRefObject<HTMLElement>
-    | (() => React.MutableRefObject<HTMLElement>);
-  /** Disables auto focus functionality on child elements */
-  disableAutoFocus?: boolean;
-  /** remove padding from content */
-  disableContentPadding?: boolean;
-  /** Optional reference to an element meant to be focused on open */
-  focusFirstElement?: React.MutableRefObject<HTMLElement>;
-  /** Container for components to be displayed in the header */
-  headerChildren?: React.ReactNode;
-  /** Adds Help tooltip to Header */
-  help?: string;
-  /** For legacy styling when used with Pages component. Do not use this unless using Pages within a DialogFullScreen */
-  pagesStyling?: boolean;
-  /** Determines if the close icon is shown */
-  showCloseIcon?: boolean;
-  /** Subtitle displayed at top of dialog */
-  subtitle?: string;
-  /** Title displayed at top of dialog */
-  title?: React.ReactNode;
-  /** The ARIA role to be applied to the DialogFullscreen container */
-  role?: string;
-  /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
-  focusableContainers?: React.MutableRefObject<HTMLElement | null>[];
-  /** Optional selector to identify the focusable elements, if not provided a default selector is used */
-  focusableSelectors?: string;
-}
-
-declare function DialogFullScreen(props: DialogFullScreenProps): JSX.Element;
-
-export default DialogFullScreen;