carbon-react 104.40.0 → 104.43.0

package/esm/components/grid/grid-container/grid-container.component.js

@@ -1,8 +1,7 @@
 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); }
 
 import React from "react";
-import PropTypes from "prop-types";
-import propTypes from "@styled-system/prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
 import GridContainerStyle from "./grid-container.style";
 import GridItem from "../grid-item";
 
@@ -32,7 +31,7 @@ GridContainer.propTypes = {
     });
     return error;
   },
-  ...propTypes.space,
-  gridGap: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  ...styledSystemPropTypes.space,
+  ...styledSystemPropTypes.grid
 };
 export default GridContainer;

package/esm/components/grid/grid-container/grid-container.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { SpaceProps } from "styled-system";
+import { SpaceProps, GridProps } from "styled-system";
 import { GridItemProps } from "../grid-item/grid-item";
 
 type GridContainerChild =
@@ -8,11 +8,9 @@ type GridContainerChild =
   | null
   | undefined;
 
-export interface GridContainerProps extends SpaceProps {
+export interface GridContainerProps extends SpaceProps, GridProps {
   /** Defines the Components to be rendered within the GridContainer. Requires GridItemProps */
   children?: GridContainerChild | GridContainerChild[];
-  /** Any valid CSS value to override default grid-gap */
-  gridGap?: string;
 }
 
 declare function GridContainer(props: GridContainerProps): JSX.Element;

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

@@ -27,10 +27,7 @@ const GridContainerStyle = styled.div`
 
   @media screen {
     ${space}
-    ${({
-  gridGap
-}) => grid({
-  gridGap
-})}
+    ${grid}
+  }
 `;
 export default GridContainerStyle;

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

@@ -5,6 +5,8 @@ declare namespace GridItem {
         const responsiveSettings: PropTypes.Requireable<(PropTypes.InferProps<{
             /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
             alignSelf: PropTypes.Requireable<string>;
+            /** Shorthand property for gridColumn and gridRow */
+            gridArea: PropTypes.Requireable<string | number>;
             /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
             gridColumn: PropTypes.Requireable<string | number>;
             /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
@@ -16,6 +18,7 @@ declare namespace GridItem {
         }> | null | undefined)[]>;
         const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         const alignSelf: PropTypes.Requireable<string>;
+        const gridArea: PropTypes.Requireable<string | number>;
         const gridColumn: PropTypes.Requireable<string | number>;
         const gridRow: PropTypes.Requireable<string | number>;
         const justifySelf: PropTypes.Requireable<string>;

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

@@ -26,6 +26,9 @@ GridItem.propTypes = {
   /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
   alignSelf: PropTypes.string,
 
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
   gridColumn: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -39,6 +42,9 @@ GridItem.propTypes = {
     /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
     alignSelf: PropTypes.string,
 
+    /** Shorthand property for gridColumn and gridRow */
+    gridArea: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
     /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
     gridColumn: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 

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

@@ -1,5 +1,10 @@
 import * as React from "react";
-import { PaddingProps } from "styled-system";
+import {
+  PaddingProps,
+  GridAreaProps,
+  GridRowProps,
+  GridColumnProps,
+} from "styled-system";
 
 interface ResponsiveSettingsShape extends PaddingProps {
   /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
@@ -8,10 +13,12 @@ interface ResponsiveSettingsShape extends PaddingProps {
   justifySelf?: string;
   /** Maximum width of the item */
   maxWidth?: string;
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea?: GridAreaProps;
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: string | number;
+  gridColumn?: GridColumnProps;
   /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: string | number;
+  gridRow?: GridRowProps;
 }
 
 export interface GridItemProps extends PaddingProps {
@@ -21,10 +28,12 @@ export interface GridItemProps extends PaddingProps {
   justifySelf?: string;
   /** Defines the Component(s) to be rendered within the GridItem */
   children?: React.ReactNode;
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea?: GridAreaProps;
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: string | number;
+  gridColumn?: GridColumnProps;
   /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: string | number;
+  gridRow?: GridRowProps;
   responsiveSettings?: ResponsiveSettingsShape[];
 }
 

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

@@ -9,6 +9,7 @@ function responsiveGridItem(responsiveSettings) {
   return responsiveSettings.map(setting => {
     const {
       alignSelf,
+      gridArea,
       gridColumn,
       gridRow,
       maxWidth,
@@ -23,6 +24,7 @@ function responsiveGridItem(responsiveSettings) {
       @media screen and (max-width: ${maxWidth}) {
         align-self: ${alignSelf || "stretch"};
         justify-self: ${justifySelf || "stretch"};
+        grid-area: ${gridArea};
         grid-column: ${gridColumn};
         grid-row: ${gridRow};
         padding: ${getSpacing(p)};
@@ -81,33 +83,30 @@ export function getSpacing(prop) {
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
 const GridItemStyle = styled.div`
   margin: 0;
+  ${padding}
 
   ${({
-  justifySelf
-}) => flexbox({
+  alignSelf,
+  justifySelf,
+  gridArea,
+  gridColumn,
+  gridRow,
+  responsiveSettings
+}) => css`
+    ${flexbox({
+  alignSelf,
   justifySelf
 })}
-  ${({
-  alignSelf
-}) => flexbox({
-  alignSelf
-})}
-  ${padding}
-  ${({
+    ${grid({
+  gridArea,
+  gridColumn,
   gridRow
-}) => grid({
-  gridRow
-})}
-  ${({
-  gridColumn
-}) => grid({
-  gridColumn
-})}
-  ${({
-  responsiveSettings
-}) => responsiveSettings && css`
+})};
+
+    ${responsiveSettings && css`
       ${responsiveGridItem(responsiveSettings)};
     `}
+  `}
 `;
 GridItemStyle.propTypes = {
   alignSelf: PropTypes.string,
@@ -117,6 +116,7 @@ GridItemStyle.propTypes = {
   ...paddingPropTypes,
   responsiveSettings: PropTypes.arrayOf(PropTypes.shape({
     alignSelf: PropTypes.string,
+    gridArea: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     gridColumn: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     gridRow: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     justifySelf: PropTypes.string,
@@ -125,7 +125,6 @@ GridItemStyle.propTypes = {
   }))
 };
 GridItemStyle.defaultProps = {
-  gridColumn: "1 / 13",
-  gridRow: "auto"
+  gridArea: "auto / 1 / auto / 13"
 };
 export default GridItemStyle;

package/esm/components/help/help.style.js

@@ -4,9 +4,6 @@ import baseTheme from "../../style/themes/base";
 import StyledIcon from "../icon/icon.style";
 const StyledHelp = styled.div`
   background: none;
-  color: ${({
-  theme
-}) => theme.help.color};
   cursor: default;
   border: none;
   outline: none;
@@ -18,24 +15,24 @@ const StyledHelp = styled.div`
   margin-top: 0;
   text-decoration: none;
 
+  ${StyledIcon} {
+    color: var(--colorsUtilityYin065);
+  }
+
   ${({
   href
 }) => href && css`
       cursor: pointer;
     `}
 
-  &:focus,
-  &:hover {
-    color: ${({
-  theme
-}) => theme.help.hover};
+  &:focus ${StyledIcon},
+  &:hover ${StyledIcon} {
+    color: var(--colorsUtilityYin090);
     text-decoration: none;
   }
 
   &:focus ${StyledIcon} {
-    outline: ${({
-  theme
-}) => `2px solid ${theme.colors.focus}`};
+    outline: 2px solid var(--colorsSemanticFocus500);
   }
 
   ${margin}

package/esm/components/link-preview/__internal__/placeholder.component.js

@@ -1,23 +1,17 @@
 import React from "react";
 import styled from "styled-components";
-import { toColor } from "../../../style/utils/color";
-import { baseTheme } from "../../../style/themes";
 const StyledPlaceHolder = styled.div`
   overflow: hidden;
   position: relative;
   height: 152px;
   min-width: 152px;
-  background-color: ${({
-  theme
-}) => theme.editorLinkPreview.background};
+  background-color: var(--colorsUtilityMajor025);
 `;
 const Circle = styled.div`
   height: 22px;
   width: 22px;
   border-radius: 50%;
-  background-color: ${({
-  theme
-}) => theme.editorLinkPreview.hoverBackground};
+  background-color: var(--colorsUtilityMajor100);
   position: absolute;
   left: 22px;
   top: 30px;
@@ -27,9 +21,8 @@ const Square = styled.div`
   width: 200px;
   transform: rotate(45deg);
   background-color: ${({
-  color,
-  theme
-}) => toColor(theme, color)};
+  color
+}) => color};
   position: absolute;
   border-radius: 2%;
   top: ${({
@@ -39,24 +32,15 @@ const Square = styled.div`
   left
 }) => left};
 `;
-StyledPlaceHolder.defaultProps = {
-  theme: baseTheme
-};
-Circle.defaultProps = {
-  theme: baseTheme
-};
-Square.defaultProps = {
-  theme: baseTheme
-};
 
 const Placeholder = () => /*#__PURE__*/React.createElement(StyledPlaceHolder, {
   "data-component": "link preview image placeholder"
 }, /*#__PURE__*/React.createElement(Circle, null), /*#__PURE__*/React.createElement(Square, {
-  color: "slateTint90",
+  color: "var(--colorsUtilityMajor050)",
   top: "120px",
   left: "-64px"
 }), /*#__PURE__*/React.createElement(Square, {
-  color: "slateTint75",
+  color: "var(--colorsUtilityMajor150)",
   top: "96px",
   left: "16px"
 }));

package/esm/components/link-preview/link-preview.style.js

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import { baseTheme } from "../../style/themes";
 import PreviewBars, { StyledPreview } from "../preview/preview.style";
 const StyledLinkPreview = styled.a`
   display: flex;
@@ -8,22 +7,21 @@ const StyledLinkPreview = styled.a`
   outline: none;
 
   ${({
-  theme,
   as
 }) => css`
-    border: 1px solid ${theme.editorLinkPreview.border};
-    background-color: ${theme.editorLinkPreview.background};
-    color: ${theme.text.color};
+    border: 1px solid var(--colorsUtilityMajor050);
+    background-color: var(--colorsUtilityMajor025);
+    color: var(--colorsUtilityYin090);
 
     ${as !== "div" && css`
       :focus {
-        outline: 2px solid ${theme.colors.focus};
+        outline: 2px solid var(--colorsSemanticFocus500);
         outline-offset: -1px;
       }
 
       :hover {
         cursor: pointer;
-        background-color: ${theme.editorLinkPreview.hoverBackground};
+        background-color: var(--colorsUtilityMajor100);
       }
     `}
   `}
@@ -81,14 +79,6 @@ const StyledUrl = styled.div`
   font-weight: 400;
   font-size: 14px;
   line-height: 21px;
-  color: ${({
-  theme
-}) => theme.editorLinkPreview.url};
+  color: var(--colorsUtilityMajor400);
 `;
-StyledLinkPreview.defaultProps = {
-  theme: baseTheme
-};
-StyledUrl.defaultProps = {
-  theme: baseTheme
-};
 export { StyledLinkPreview, StyledCloseIconWrapper, StyledPreviewWrapper, StyledTitle, StyledDescription, StyledUrl };

package/esm/components/preview/preview.style.js

@@ -8,9 +8,7 @@ const shimmer = keyframes`
 `;
 const PreviewStyle = styled.span`
   animation: ${shimmer} 2s ease infinite;
-  background: ${({
-  theme
-}) => theme.colors.previewBackground};
+  background: var(--colorsUtilityMajor150);
   display: block;
   height: 15px;
   opacity: 0.6;
@@ -26,7 +24,4 @@ export const StyledPreview = styled.div`
 StyledPreview.defaultProps = {
   theme: baseTheme
 };
-PreviewStyle.defaultProps = {
-  theme: baseTheme
-};
 export default PreviewStyle;

package/lib/components/grid/grid-container/grid-container.component.js

@@ -7,9 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+var _propTypes = _interopRequireDefault(require("@styled-system/prop-types"));
 
 var _gridContainer = _interopRequireDefault(require("./grid-container.style"));
 
@@ -47,8 +45,8 @@ GridContainer.propTypes = {
 
     return error;
   },
-  ..._propTypes2.default.space,
-  gridGap: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  ..._propTypes.default.space,
+  ..._propTypes.default.grid
 };
 var _default = GridContainer;
 exports.default = _default;

package/lib/components/grid/grid-container/grid-container.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { SpaceProps } from "styled-system";
+import { SpaceProps, GridProps } from "styled-system";
 import { GridItemProps } from "../grid-item/grid-item";
 
 type GridContainerChild =
@@ -8,11 +8,9 @@ type GridContainerChild =
   | null
   | undefined;
 
-export interface GridContainerProps extends SpaceProps {
+export interface GridContainerProps extends SpaceProps, GridProps {
   /** Defines the Components to be rendered within the GridContainer. Requires GridItemProps */
   children?: GridContainerChild | GridContainerChild[];
-  /** Any valid CSS value to override default grid-gap */
-  gridGap?: string;
 }
 
 declare function GridContainer(props: GridContainerProps): JSX.Element;

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

@@ -38,11 +38,8 @@ const GridContainerStyle = _styledComponents.default.div`
 
   @media screen {
     ${_styledSystem.space}
-    ${({
-  gridGap
-}) => (0, _styledSystem.grid)({
-  gridGap
-})}
+    ${_styledSystem.grid}
+  }
 `;
 var _default = GridContainerStyle;
 exports.default = _default;

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

@@ -5,6 +5,8 @@ declare namespace GridItem {
         const responsiveSettings: PropTypes.Requireable<(PropTypes.InferProps<{
             /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
             alignSelf: PropTypes.Requireable<string>;
+            /** Shorthand property for gridColumn and gridRow */
+            gridArea: PropTypes.Requireable<string | number>;
             /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
             gridColumn: PropTypes.Requireable<string | number>;
             /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
@@ -16,6 +18,7 @@ declare namespace GridItem {
         }> | null | undefined)[]>;
         const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         const alignSelf: PropTypes.Requireable<string>;
+        const gridArea: PropTypes.Requireable<string | number>;
         const gridColumn: PropTypes.Requireable<string | number>;
         const gridRow: PropTypes.Requireable<string | number>;
         const justifySelf: PropTypes.Requireable<string>;

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

@@ -38,6 +38,9 @@ GridItem.propTypes = {
   /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
   alignSelf: _propTypes.default.string,
 
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
   gridColumn: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
 
@@ -51,6 +54,9 @@ GridItem.propTypes = {
     /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
     alignSelf: _propTypes.default.string,
 
+    /** Shorthand property for gridColumn and gridRow */
+    gridArea: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+
     /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
     gridColumn: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
 

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

@@ -1,5 +1,10 @@
 import * as React from "react";
-import { PaddingProps } from "styled-system";
+import {
+  PaddingProps,
+  GridAreaProps,
+  GridRowProps,
+  GridColumnProps,
+} from "styled-system";
 
 interface ResponsiveSettingsShape extends PaddingProps {
   /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
@@ -8,10 +13,12 @@ interface ResponsiveSettingsShape extends PaddingProps {
   justifySelf?: string;
   /** Maximum width of the item */
   maxWidth?: string;
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea?: GridAreaProps;
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: string | number;
+  gridColumn?: GridColumnProps;
   /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: string | number;
+  gridRow?: GridRowProps;
 }
 
 export interface GridItemProps extends PaddingProps {
@@ -21,10 +28,12 @@ export interface GridItemProps extends PaddingProps {
   justifySelf?: string;
   /** Defines the Component(s) to be rendered within the GridItem */
   children?: React.ReactNode;
+  /** Shorthand property for gridColumn and gridRow */
+  gridArea?: GridAreaProps;
   /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: string | number;
+  gridColumn?: GridColumnProps;
   /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: string | number;
+  gridRow?: GridRowProps;
   responsiveSettings?: ResponsiveSettingsShape[];
 }
 

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

@@ -28,6 +28,7 @@ function responsiveGridItem(responsiveSettings) {
   return responsiveSettings.map(setting => {
     const {
       alignSelf,
+      gridArea,
       gridColumn,
       gridRow,
       maxWidth,
@@ -42,6 +43,7 @@ function responsiveGridItem(responsiveSettings) {
       @media screen and (max-width: ${maxWidth}) {
         align-self: ${alignSelf || "stretch"};
         justify-self: ${justifySelf || "stretch"};
+        grid-area: ${gridArea};
         grid-column: ${gridColumn};
         grid-row: ${gridRow};
         padding: ${getSpacing(p)};
@@ -101,33 +103,30 @@ function getSpacing(prop) {
 const paddingPropTypes = (0, _utils.filterStyledSystemPaddingProps)(_propTypes.default.space);
 const GridItemStyle = _styledComponents.default.div`
   margin: 0;
+  ${_space.padding}
 
   ${({
-  justifySelf
-}) => (0, _styledSystem.flexbox)({
+  alignSelf,
+  justifySelf,
+  gridArea,
+  gridColumn,
+  gridRow,
+  responsiveSettings
+}) => (0, _styledComponents.css)`
+    ${(0, _styledSystem.flexbox)({
+  alignSelf,
   justifySelf
 })}
-  ${({
-  alignSelf
-}) => (0, _styledSystem.flexbox)({
-  alignSelf
-})}
-  ${_space.padding}
-  ${({
+    ${(0, _styledSystem.grid)({
+  gridArea,
+  gridColumn,
   gridRow
-}) => (0, _styledSystem.grid)({
-  gridRow
-})}
-  ${({
-  gridColumn
-}) => (0, _styledSystem.grid)({
-  gridColumn
-})}
-  ${({
-  responsiveSettings
-}) => responsiveSettings && (0, _styledComponents.css)`
+})};
+
+    ${responsiveSettings && (0, _styledComponents.css)`
       ${responsiveGridItem(responsiveSettings)};
     `}
+  `}
 `;
 GridItemStyle.propTypes = {
   alignSelf: _propTypes2.default.string,
@@ -137,6 +136,7 @@ GridItemStyle.propTypes = {
   ...paddingPropTypes,
   responsiveSettings: _propTypes2.default.arrayOf(_propTypes2.default.shape({
     alignSelf: _propTypes2.default.string,
+    gridArea: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
     gridColumn: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
     gridRow: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
     justifySelf: _propTypes2.default.string,
@@ -145,8 +145,7 @@ GridItemStyle.propTypes = {
   }))
 };
 GridItemStyle.defaultProps = {
-  gridColumn: "1 / 13",
-  gridRow: "auto"
+  gridArea: "auto / 1 / auto / 13"
 };
 var _default = GridItemStyle;
 exports.default = _default;

package/lib/components/help/help.style.js

@@ -21,9 +21,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const StyledHelp = _styledComponents.default.div`
   background: none;
-  color: ${({
-  theme
-}) => theme.help.color};
   cursor: default;
   border: none;
   outline: none;
@@ -35,24 +32,24 @@ const StyledHelp = _styledComponents.default.div`
   margin-top: 0;
   text-decoration: none;
 
+  ${_icon.default} {
+    color: var(--colorsUtilityYin065);
+  }
+
   ${({
   href
 }) => href && (0, _styledComponents.css)`
       cursor: pointer;
     `}
 
-  &:focus,
-  &:hover {
-    color: ${({
-  theme
-}) => theme.help.hover};
+  &:focus ${_icon.default},
+  &:hover ${_icon.default} {
+    color: var(--colorsUtilityYin090);
     text-decoration: none;
   }
 
   &:focus ${_icon.default} {
-    outline: ${({
-  theme
-}) => `2px solid ${theme.colors.focus}`};
+    outline: 2px solid var(--colorsSemanticFocus500);
   }
 
   ${_styledSystem.margin}

package/lib/components/link-preview/__internal__/placeholder.component.js

@@ -9,10 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _color = require("../../../style/utils/color");
-
-var _themes = require("../../../style/themes");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledPlaceHolder = _styledComponents.default.div`
@@ -20,17 +16,13 @@ const StyledPlaceHolder = _styledComponents.default.div`
   position: relative;
   height: 152px;
   min-width: 152px;
-  background-color: ${({
-  theme
-}) => theme.editorLinkPreview.background};
+  background-color: var(--colorsUtilityMajor025);
 `;
 const Circle = _styledComponents.default.div`
   height: 22px;
   width: 22px;
   border-radius: 50%;
-  background-color: ${({
-  theme
-}) => theme.editorLinkPreview.hoverBackground};
+  background-color: var(--colorsUtilityMajor100);
   position: absolute;
   left: 22px;
   top: 30px;
@@ -40,9 +32,8 @@ const Square = _styledComponents.default.div`
   width: 200px;
   transform: rotate(45deg);
   background-color: ${({
-  color,
-  theme
-}) => (0, _color.toColor)(theme, color)};
+  color
+}) => color};
   position: absolute;
   border-radius: 2%;
   top: ${({
@@ -52,24 +43,15 @@ const Square = _styledComponents.default.div`
   left
 }) => left};
 `;
-StyledPlaceHolder.defaultProps = {
-  theme: _themes.baseTheme
-};
-Circle.defaultProps = {
-  theme: _themes.baseTheme
-};
-Square.defaultProps = {
-  theme: _themes.baseTheme
-};
 
 const Placeholder = () => /*#__PURE__*/_react.default.createElement(StyledPlaceHolder, {
   "data-component": "link preview image placeholder"
 }, /*#__PURE__*/_react.default.createElement(Circle, null), /*#__PURE__*/_react.default.createElement(Square, {
-  color: "slateTint90",
+  color: "var(--colorsUtilityMajor050)",
   top: "120px",
   left: "-64px"
 }), /*#__PURE__*/_react.default.createElement(Square, {
-  color: "slateTint75",
+  color: "var(--colorsUtilityMajor150)",
   top: "96px",
   left: "16px"
 }));

package/lib/components/link-preview/link-preview.style.js

@@ -7,8 +7,6 @@ exports.StyledUrl = exports.StyledDescription = exports.StyledTitle = exports.St
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _themes = require("../../style/themes");
-
 var _preview = _interopRequireWildcard(require("../preview/preview.style"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -22,22 +20,21 @@ const StyledLinkPreview = _styledComponents.default.a`
   outline: none;
 
   ${({
-  theme,
   as
 }) => (0, _styledComponents.css)`
-    border: 1px solid ${theme.editorLinkPreview.border};
-    background-color: ${theme.editorLinkPreview.background};
-    color: ${theme.text.color};
+    border: 1px solid var(--colorsUtilityMajor050);
+    background-color: var(--colorsUtilityMajor025);
+    color: var(--colorsUtilityYin090);
 
     ${as !== "div" && (0, _styledComponents.css)`
       :focus {
-        outline: 2px solid ${theme.colors.focus};
+        outline: 2px solid var(--colorsSemanticFocus500);
         outline-offset: -1px;
       }
 
       :hover {
         cursor: pointer;
-        background-color: ${theme.editorLinkPreview.hoverBackground};
+        background-color: var(--colorsUtilityMajor100);
       }
     `}
   `}
@@ -100,14 +97,6 @@ const StyledUrl = _styledComponents.default.div`
   font-weight: 400;
   font-size: 14px;
   line-height: 21px;
-  color: ${({
-  theme
-}) => theme.editorLinkPreview.url};
+  color: var(--colorsUtilityMajor400);
 `;
-exports.StyledUrl = StyledUrl;
-StyledLinkPreview.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledUrl.defaultProps = {
-  theme: _themes.baseTheme
-};
+exports.StyledUrl = StyledUrl;

package/lib/components/preview/preview.style.js

@@ -24,9 +24,7 @@ const shimmer = (0, _styledComponents.keyframes)`
 `;
 const PreviewStyle = _styledComponents.default.span`
   animation: ${shimmer} 2s ease infinite;
-  background: ${({
-  theme
-}) => theme.colors.previewBackground};
+  background: var(--colorsUtilityMajor150);
   display: block;
   height: 15px;
   opacity: 0.6;
@@ -43,8 +41,5 @@ exports.StyledPreview = StyledPreview;
 StyledPreview.defaultProps = {
   theme: _base.default
 };
-PreviewStyle.defaultProps = {
-  theme: _base.default
-};
 var _default = PreviewStyle;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.40.0",
+  "version": "104.43.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {