carbon-react 104.38.1 → 104.40.0

package/esm/__internal__/sticky-footer/sticky-footer.style.js

@@ -14,7 +14,7 @@ const StyledStickyFooter = styled.div`
       position: sticky;
       bottom: 0;
       left: 0;
-      background-color: var(--colorsComponentsNavigationYang100);
+      background-color: var(--colorsActionMinorYang100);
       box-shadow: var(--boxShadow150);
       z-index: 1000;
     `}

package/esm/components/carousel/slide/slide.style.js

@@ -16,7 +16,7 @@ const SlideStyle = styled.div`
     opacity: 0.3;
     margin: 30px 0;
     box-shadow: var(--boxShadow200);
-    background-color: var(--colorsComponentsNavigationYang100);
+    background-color: var(--colorsUtilityYang100);
 
     ${id === selectedIndex && css`
       transform: scale(1);

package/esm/components/draggable/draggable-item.style.js

@@ -8,9 +8,7 @@ const StyledDraggableContainer = styled.div`
 const StyledDraggableItem = styled.div`
   display: flex;
   align-items: center;
-  border-bottom: 1px solid ${({
-  theme
-}) => theme.draggableItem.border};
+  border-bottom: 1px solid var(--colorsUtilityMajor050);
   ${padding}
   cursor: move;
 

package/esm/components/grid/grid-item/grid-item.style.d.ts

@@ -1,2 +1,3 @@
+export function getSpacing(prop: any): any;
 export default GridItemStyle;
 declare const GridItemStyle: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/grid/grid-item/grid-item.style.js

@@ -3,10 +3,9 @@ import { grid, flexbox } from "styled-system";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import { padding } from "@styled-system/space";
 import PropTypes from "prop-types";
-import { baseTheme } from "../../../style/themes";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
 
-function responsiveGridItem(responsiveSettings, theme) {
+function responsiveGridItem(responsiveSettings) {
   return responsiveSettings.map(setting => {
     const {
       alignSelf,
@@ -26,24 +25,59 @@ function responsiveGridItem(responsiveSettings, theme) {
         justify-self: ${justifySelf || "stretch"};
         grid-column: ${gridColumn};
         grid-row: ${gridRow};
-        padding: ${getSpacing(p, theme)};
-        padding-left: ${getSpacing(pl, theme)};
-        padding-right: ${getSpacing(pr, theme)};
-        padding-top: ${getSpacing(pt, theme)};
-        padding-bottom: ${getSpacing(pb, theme)};
+        padding: ${getSpacing(p)};
+        padding-left: ${getSpacing(pl)};
+        padding-right: ${getSpacing(pr)};
+        padding-top: ${getSpacing(pt)};
+        padding-bottom: ${getSpacing(pb)};
       }
     `;
   });
 }
 
-function getSpacing(prop, theme) {
-  if (prop && typeof prop === "number") {
-    return `${theme.space[prop]}px`;
+export function getSpacing(prop) {
+  if (typeof prop === "number") {
+    switch (prop) {
+      case 0:
+        return "var(--spacing000)";
+
+      case 1:
+        return "var(--spacing100)";
+
+      case 2:
+        return "var(--spacing200)";
+
+      case 3:
+        return "var(--spacing300)";
+
+      case 4:
+        return "var(--spacing400)";
+
+      case 5:
+        return "var(--spacing500)";
+
+      case 6:
+        return "var(--spacing600)";
+
+      case 7:
+        return "var(--spacing700)";
+
+      case 8:
+        return "var(--spacing800)";
+
+      case 9:
+        return "var(--spacing900)";
+
+      case 10:
+        return "var(--spacing1000)";
+
+      default:
+        return "var(--spacing100)";
+    }
   }
 
   return prop;
 }
-
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
 const GridItemStyle = styled.div`
   margin: 0;
@@ -70,10 +104,9 @@ const GridItemStyle = styled.div`
   gridColumn
 })}
   ${({
-  responsiveSettings,
-  theme
+  responsiveSettings
 }) => responsiveSettings && css`
-      ${responsiveGridItem(responsiveSettings, theme)};
+      ${responsiveGridItem(responsiveSettings)};
     `}
 `;
 GridItemStyle.propTypes = {
@@ -93,7 +126,6 @@ GridItemStyle.propTypes = {
 };
 GridItemStyle.defaultProps = {
   gridColumn: "1 / 13",
-  gridRow: "auto",
-  theme: baseTheme
+  gridRow: "auto"
 };
 export default GridItemStyle;

package/esm/components/popover-container/popover-container.style.d.ts

@@ -1,5 +1,4 @@
 export const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const PopoverContainerIcon: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;
 export const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const PopoverContainerCloseIcon: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;

package/esm/components/popover-container/popover-container.style.js

@@ -7,13 +7,6 @@ const PopoverContainerWrapperStyle = styled.div`
   position: relative;
   display: inline-block;
 `;
-const PopoverContainerIcon = styled(IconButton)`
-  ${StyledIcon} {
-    color: ${({
-  theme
-}) => theme.popoverContainer.iconColor};
-  }
-`;
 const PopoverContainerHeaderStyle = styled.div`
   display: flex;
   justify-content: space-between;
@@ -23,12 +16,8 @@ const PopoverContainerHeaderStyle = styled.div`
 const PopoverContainerContentStyle = styled.div`
   ${padding}
 
-  background: ${({
-  theme
-}) => theme.colors.white};
-  box-shadow: ${({
-  theme
-}) => theme.shadows.depth1};
+  background: var(--colorsUtilityYang100);
+  box-shadow: var(--boxShadow100);
   min-width: 300px;
   position: absolute;
   z-index: ${({
@@ -74,9 +63,7 @@ const PopoverContainerContentStyle = styled.div`
 `;
 const PopoverContainerOpenIcon = styled(IconButton)`
   ${StyledIcon} {
-    color: ${({
-  theme
-}) => theme.popoverContainer.iconColor};
+    color: var(--colorsActionMinor500);
   }
 `;
 const PopoverContainerCloseIcon = styled(IconButton)`
@@ -85,9 +72,7 @@ const PopoverContainerCloseIcon = styled(IconButton)`
   right: 24px;
 
   ${StyledIcon} {
-    color: ${({
-  theme
-}) => theme.popoverContainer.iconColor};
+    color: var(--colorsActionMinor500);
   }
 `;
 const PopoverContainerTitleStyle = styled.div`
@@ -97,13 +82,4 @@ const PopoverContainerTitleStyle = styled.div`
 PopoverContainerContentStyle.defaultProps = {
   theme: baseTheme
 };
-PopoverContainerIcon.defaultProps = {
-  theme: baseTheme
-};
-PopoverContainerCloseIcon.defaultProps = {
-  theme: baseTheme
-};
-PopoverContainerOpenIcon.defaultProps = {
-  theme: baseTheme
-};
-export { PopoverContainerWrapperStyle, PopoverContainerIcon, PopoverContainerHeaderStyle, PopoverContainerContentStyle, PopoverContainerCloseIcon, PopoverContainerTitleStyle, PopoverContainerOpenIcon };
+export { PopoverContainerWrapperStyle, PopoverContainerHeaderStyle, PopoverContainerContentStyle, PopoverContainerCloseIcon, PopoverContainerTitleStyle, PopoverContainerOpenIcon };

package/esm/components/select/select-list/select-list.style.js

@@ -92,7 +92,7 @@ const StyledSelectListTableHeader = styled.thead`
       bottom: -8px;
       left: 0px;
       background-image: linear-gradient(
-        var(--colorsComponentsNavigationYin100),
+        var(--colorsUtilityMajor800),
         var(--colorsUtilityYang100)
       );
       opacity: 0.03;

package/esm/style/themes/base/base-theme.config.d.ts

@@ -433,16 +433,6 @@ declare function _default(palette: any): {
         colorsComponentsMenuYin090: string;
         colorsComponentsMenuYang100: string;
         colorsComponentsMenuYang080: string;
-        colorsComponentsNavigation500: string;
-        colorsComponentsNavigation600: string;
-        colorsComponentsNavigation700: string;
-        colorsComponentsNavigationTransparent: string;
-        colorsComponentsNavigationYin100: string;
-        colorsComponentsNavigationYin030: string;
-        colorsComponentsNavigationYin055: string;
-        colorsComponentsNavigationYin065: string;
-        colorsComponentsNavigationYin090: string;
-        colorsComponentsNavigationYang100: string;
         colorsUtilityMajor100: string;
         colorsUtilityMajor150: string;
         colorsUtilityMajor200: string;
@@ -566,6 +556,7 @@ declare function _default(palette: any): {
         sizing075: string;
         sizingLogowidth: string;
         sizing010: string;
+        spacing1000: string;
         borderWidth100: string;
         borderWidth200: string;
         borderWidth300: string;
@@ -610,6 +601,9 @@ declare function _default(palette: any): {
         typographyButtonLabelS: string;
         typographyButtonLabelM: string;
         typographyButtonLabelL: string;
+        typographyCardSelectTitleM: string;
+        typographyCardSelectSubtitleM: string;
+        typographyCardSelectParagraphM: string;
         typographyDatePickerCalendarDateM: string;
         typographyDatePickerCalendarDayM: string;
         typographyDatePickerCalendarMonthM: string;

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

@@ -70,16 +70,6 @@ declare var _default: {
         colorsComponentsMenuYin090: string;
         colorsComponentsMenuYang100: string;
         colorsComponentsMenuYang080: string;
-        colorsComponentsNavigation500: string;
-        colorsComponentsNavigation600: string;
-        colorsComponentsNavigation700: string;
-        colorsComponentsNavigationTransparent: string;
-        colorsComponentsNavigationYin100: string;
-        colorsComponentsNavigationYin030: string;
-        colorsComponentsNavigationYin055: string;
-        colorsComponentsNavigationYin065: string;
-        colorsComponentsNavigationYin090: string;
-        colorsComponentsNavigationYang100: string;
         colorsUtilityMajor100: string;
         colorsUtilityMajor150: string;
         colorsUtilityMajor200: string;
@@ -224,6 +214,7 @@ declare var _default: {
         spacing700: string;
         spacing800: string;
         spacing900: string;
+        spacing1000: string;
         spacing000: string;
         spacing025: string;
         spacing050: string;
@@ -273,6 +264,9 @@ declare var _default: {
         typographyButtonLabelS: string;
         typographyButtonLabelM: string;
         typographyButtonLabelL: string;
+        typographyCardSelectTitleM: string;
+        typographyCardSelectSubtitleM: string;
+        typographyCardSelectParagraphM: string;
         typographyDatePickerCalendarDateM: string;
         typographyDatePickerCalendarDayM: string;
         typographyDatePickerCalendarMonthM: string;

package/lib/__internal__/sticky-footer/sticky-footer.style.js

@@ -26,7 +26,7 @@ const StyledStickyFooter = _styledComponents.default.div`
       position: sticky;
       bottom: 0;
       left: 0;
-      background-color: var(--colorsComponentsNavigationYang100);
+      background-color: var(--colorsActionMinorYang100);
       box-shadow: var(--boxShadow150);
       z-index: 1000;
     `}

package/lib/components/carousel/slide/slide.style.js

@@ -28,7 +28,7 @@ const SlideStyle = _styledComponents.default.div`
     opacity: 0.3;
     margin: 30px 0;
     box-shadow: var(--boxShadow200);
-    background-color: var(--colorsComponentsNavigationYang100);
+    background-color: var(--colorsUtilityYang100);
 
     ${id === selectedIndex && (0, _styledComponents.css)`
       transform: scale(1);

package/lib/components/draggable/draggable-item.style.js

@@ -22,9 +22,7 @@ exports.StyledDraggableContainer = StyledDraggableContainer;
 const StyledDraggableItem = _styledComponents.default.div`
   display: flex;
   align-items: center;
-  border-bottom: 1px solid ${({
-  theme
-}) => theme.draggableItem.border};
+  border-bottom: 1px solid var(--colorsUtilityMajor050);
   ${_styledSystem.padding}
   cursor: move;
 

package/lib/components/grid/grid-item/grid-item.style.d.ts

@@ -1,2 +1,3 @@
+export function getSpacing(prop: any): any;
 export default GridItemStyle;
 declare const GridItemStyle: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/grid/grid-item/grid-item.style.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getSpacing = getSpacing;
 exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
@@ -15,8 +16,6 @@ var _space = require("@styled-system/space");
 
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 
-var _themes = require("../../../style/themes");
-
 var _utils = require("../../../style/utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,7 +24,7 @@ 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; }
 
-function responsiveGridItem(responsiveSettings, theme) {
+function responsiveGridItem(responsiveSettings) {
   return responsiveSettings.map(setting => {
     const {
       alignSelf,
@@ -45,19 +44,55 @@ function responsiveGridItem(responsiveSettings, theme) {
         justify-self: ${justifySelf || "stretch"};
         grid-column: ${gridColumn};
         grid-row: ${gridRow};
-        padding: ${getSpacing(p, theme)};
-        padding-left: ${getSpacing(pl, theme)};
-        padding-right: ${getSpacing(pr, theme)};
-        padding-top: ${getSpacing(pt, theme)};
-        padding-bottom: ${getSpacing(pb, theme)};
+        padding: ${getSpacing(p)};
+        padding-left: ${getSpacing(pl)};
+        padding-right: ${getSpacing(pr)};
+        padding-top: ${getSpacing(pt)};
+        padding-bottom: ${getSpacing(pb)};
       }
     `;
   });
 }
 
-function getSpacing(prop, theme) {
-  if (prop && typeof prop === "number") {
-    return `${theme.space[prop]}px`;
+function getSpacing(prop) {
+  if (typeof prop === "number") {
+    switch (prop) {
+      case 0:
+        return "var(--spacing000)";
+
+      case 1:
+        return "var(--spacing100)";
+
+      case 2:
+        return "var(--spacing200)";
+
+      case 3:
+        return "var(--spacing300)";
+
+      case 4:
+        return "var(--spacing400)";
+
+      case 5:
+        return "var(--spacing500)";
+
+      case 6:
+        return "var(--spacing600)";
+
+      case 7:
+        return "var(--spacing700)";
+
+      case 8:
+        return "var(--spacing800)";
+
+      case 9:
+        return "var(--spacing900)";
+
+      case 10:
+        return "var(--spacing1000)";
+
+      default:
+        return "var(--spacing100)";
+    }
   }
 
   return prop;
@@ -89,10 +124,9 @@ const GridItemStyle = _styledComponents.default.div`
   gridColumn
 })}
   ${({
-  responsiveSettings,
-  theme
+  responsiveSettings
 }) => responsiveSettings && (0, _styledComponents.css)`
-      ${responsiveGridItem(responsiveSettings, theme)};
+      ${responsiveGridItem(responsiveSettings)};
     `}
 `;
 GridItemStyle.propTypes = {
@@ -112,8 +146,7 @@ GridItemStyle.propTypes = {
 };
 GridItemStyle.defaultProps = {
   gridColumn: "1 / 13",
-  gridRow: "auto",
-  theme: _themes.baseTheme
+  gridRow: "auto"
 };
 var _default = GridItemStyle;
 exports.default = _default;

package/lib/components/popover-container/popover-container.style.d.ts

@@ -1,5 +1,4 @@
 export const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const PopoverContainerIcon: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;
 export const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const PopoverContainerCloseIcon: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;

package/lib/components/popover-container/popover-container.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PopoverContainerOpenIcon = exports.PopoverContainerTitleStyle = exports.PopoverContainerCloseIcon = exports.PopoverContainerContentStyle = exports.PopoverContainerHeaderStyle = exports.PopoverContainerIcon = exports.PopoverContainerWrapperStyle = void 0;
+exports.PopoverContainerOpenIcon = exports.PopoverContainerTitleStyle = exports.PopoverContainerCloseIcon = exports.PopoverContainerContentStyle = exports.PopoverContainerHeaderStyle = exports.PopoverContainerWrapperStyle = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -22,14 +22,6 @@ const PopoverContainerWrapperStyle = _styledComponents.default.div`
   display: inline-block;
 `;
 exports.PopoverContainerWrapperStyle = PopoverContainerWrapperStyle;
-const PopoverContainerIcon = (0, _styledComponents.default)(_iconButton.default)`
-  ${_icon.default} {
-    color: ${({
-  theme
-}) => theme.popoverContainer.iconColor};
-  }
-`;
-exports.PopoverContainerIcon = PopoverContainerIcon;
 const PopoverContainerHeaderStyle = _styledComponents.default.div`
   display: flex;
   justify-content: space-between;
@@ -40,12 +32,8 @@ exports.PopoverContainerHeaderStyle = PopoverContainerHeaderStyle;
 const PopoverContainerContentStyle = _styledComponents.default.div`
   ${_styledSystem.padding}
 
-  background: ${({
-  theme
-}) => theme.colors.white};
-  box-shadow: ${({
-  theme
-}) => theme.shadows.depth1};
+  background: var(--colorsUtilityYang100);
+  box-shadow: var(--boxShadow100);
   min-width: 300px;
   position: absolute;
   z-index: ${({
@@ -92,9 +80,7 @@ const PopoverContainerContentStyle = _styledComponents.default.div`
 exports.PopoverContainerContentStyle = PopoverContainerContentStyle;
 const PopoverContainerOpenIcon = (0, _styledComponents.default)(_iconButton.default)`
   ${_icon.default} {
-    color: ${({
-  theme
-}) => theme.popoverContainer.iconColor};
+    color: var(--colorsActionMinor500);
   }
 `;
 exports.PopoverContainerOpenIcon = PopoverContainerOpenIcon;
@@ -104,9 +90,7 @@ const PopoverContainerCloseIcon = (0, _styledComponents.default)(_iconButton.def
   right: 24px;
 
   ${_icon.default} {
-    color: ${({
-  theme
-}) => theme.popoverContainer.iconColor};
+    color: var(--colorsActionMinor500);
   }
 `;
 exports.PopoverContainerCloseIcon = PopoverContainerCloseIcon;
@@ -117,13 +101,4 @@ const PopoverContainerTitleStyle = _styledComponents.default.div`
 exports.PopoverContainerTitleStyle = PopoverContainerTitleStyle;
 PopoverContainerContentStyle.defaultProps = {
   theme: _themes.baseTheme
-};
-PopoverContainerIcon.defaultProps = {
-  theme: _themes.baseTheme
-};
-PopoverContainerCloseIcon.defaultProps = {
-  theme: _themes.baseTheme
-};
-PopoverContainerOpenIcon.defaultProps = {
-  theme: _themes.baseTheme
 };

package/lib/components/select/select-list/select-list.style.js

@@ -109,7 +109,7 @@ const StyledSelectListTableHeader = _styledComponents.default.thead`
       bottom: -8px;
       left: 0px;
       background-image: linear-gradient(
-        var(--colorsComponentsNavigationYin100),
+        var(--colorsUtilityMajor800),
         var(--colorsUtilityYang100)
       );
       opacity: 0.03;

package/lib/style/themes/base/base-theme.config.d.ts

@@ -433,16 +433,6 @@ declare function _default(palette: any): {
         colorsComponentsMenuYin090: string;
         colorsComponentsMenuYang100: string;
         colorsComponentsMenuYang080: string;
-        colorsComponentsNavigation500: string;
-        colorsComponentsNavigation600: string;
-        colorsComponentsNavigation700: string;
-        colorsComponentsNavigationTransparent: string;
-        colorsComponentsNavigationYin100: string;
-        colorsComponentsNavigationYin030: string;
-        colorsComponentsNavigationYin055: string;
-        colorsComponentsNavigationYin065: string;
-        colorsComponentsNavigationYin090: string;
-        colorsComponentsNavigationYang100: string;
         colorsUtilityMajor100: string;
         colorsUtilityMajor150: string;
         colorsUtilityMajor200: string;
@@ -566,6 +556,7 @@ declare function _default(palette: any): {
         sizing075: string;
         sizingLogowidth: string;
         sizing010: string;
+        spacing1000: string;
         borderWidth100: string;
         borderWidth200: string;
         borderWidth300: string;
@@ -610,6 +601,9 @@ declare function _default(palette: any): {
         typographyButtonLabelS: string;
         typographyButtonLabelM: string;
         typographyButtonLabelL: string;
+        typographyCardSelectTitleM: string;
+        typographyCardSelectSubtitleM: string;
+        typographyCardSelectParagraphM: string;
         typographyDatePickerCalendarDateM: string;
         typographyDatePickerCalendarDayM: string;
         typographyDatePickerCalendarMonthM: string;

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

@@ -70,16 +70,6 @@ declare var _default: {
         colorsComponentsMenuYin090: string;
         colorsComponentsMenuYang100: string;
         colorsComponentsMenuYang080: string;
-        colorsComponentsNavigation500: string;
-        colorsComponentsNavigation600: string;
-        colorsComponentsNavigation700: string;
-        colorsComponentsNavigationTransparent: string;
-        colorsComponentsNavigationYin100: string;
-        colorsComponentsNavigationYin030: string;
-        colorsComponentsNavigationYin055: string;
-        colorsComponentsNavigationYin065: string;
-        colorsComponentsNavigationYin090: string;
-        colorsComponentsNavigationYang100: string;
         colorsUtilityMajor100: string;
         colorsUtilityMajor150: string;
         colorsUtilityMajor200: string;
@@ -224,6 +214,7 @@ declare var _default: {
         spacing700: string;
         spacing800: string;
         spacing900: string;
+        spacing1000: string;
         spacing000: string;
         spacing025: string;
         spacing050: string;
@@ -273,6 +264,9 @@ declare var _default: {
         typographyButtonLabelS: string;
         typographyButtonLabelM: string;
         typographyButtonLabelL: string;
+        typographyCardSelectTitleM: string;
+        typographyCardSelectSubtitleM: string;
+        typographyCardSelectParagraphM: string;
         typographyDatePickerCalendarDateM: string;
         typographyDatePickerCalendarDayM: string;
         typographyDatePickerCalendarMonthM: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.38.1",
+  "version": "104.40.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -157,7 +157,7 @@
   "dependencies": {
     "@octokit/rest": "^18.12.0",
     "@popperjs/core": "^2.9.0",
-    "@sage/design-tokens": "^1.92.0",
+    "@sage/design-tokens": "^1.93.0",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",
     "@types/styled-system": "^5.1.11",