carbon-react 153.5.0 → 153.5.2

package/esm/components/loader/loader-square.style.d.ts

@@ -8,5 +8,6 @@ export interface StyledLoaderSquareProps {
     /** The background color of each loader square */
     backgroundColor?: string;
 }
+export declare const StyledLoaderPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledLoaderSquare: import("styled-components").StyledComponent<"div", any, StyledLoaderSquareProps, never>;
 export default StyledLoaderSquare;

package/esm/components/loader/loader-square.style.js

@@ -32,6 +32,10 @@ const getDimensions = size => {
     margin-right: ${marginRight};
   `;
 };
+export const StyledLoaderPlaceholder = styled.div`
+  display: inline-block;
+  min-width: var(--sizing800);
+`;
 const StyledLoaderSquare = styled.div`
   ${({
   size,
@@ -44,19 +48,15 @@ const StyledLoaderSquare = styled.div`
     display: inline-block;
     ${getDimensions(size)}
     border-radius: var(--borderRadiusCircle);
-
     ${isInsideButton && css`
       background-color: ${isActive ? "var(--colorsUtilityYang100)" : "var(--colorsSemanticNeutral500)"};
     `}
-
     &:nth-of-type(1) {
       animation-delay: 0s;
     }
-
     &:nth-of-type(2) {
       animation-delay: 0.2s;
     }
-
     &:nth-of-type(3) {
       animation-delay: 0.4s;
       margin-right: 0px;
@@ -64,7 +64,6 @@ const StyledLoaderSquare = styled.div`
   `}
 `;
 StyledLoaderSquare.defaultProps = {
-  size: "small",
   isInsideButton: false,
   isActive: true,
   theme: baseTheme

package/esm/components/loader/loader.component.js

@@ -5,7 +5,7 @@ import useMediaQuery from "../../hooks/useMediaQuery";
 import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledLoader from "./loader.style";
-import StyledLoaderSquare from "./loader-square.style";
+import StyledLoaderSquare, { StyledLoaderPlaceholder } from "./loader-square.style";
 import Typography from "../typography";
 import Logger from "../../__internal__/utils/logger";
 let deprecateAriaLabelWarnTriggered = false;
@@ -23,7 +23,10 @@ export const Loader = ({
     Logger.deprecate("The aria-label prop in Loader is deprecated and will soon be removed, please use the `loaderLabel` prop instead to provide an accessible label.");
   }
   const l = useLocale();
-  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
+  const allowMotion = useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
+  if (allowMotion === undefined) {
+    return /*#__PURE__*/React.createElement(StyledLoaderPlaceholder, null);
+  }
   const loaderSquareProps = {
     isInsideButton,
     isActive,
@@ -32,7 +35,7 @@ export const Loader = ({
   };
 
   // FE-6368 has been raised for the below, changed hex values for design tokens (when added)
-  return /*#__PURE__*/React.createElement(StyledLoader, _extends({}, tagComponent("loader", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? loaderLabel || ariaLabel || l.loader.loading() : /*#__PURE__*/React.createElement(React.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/React.createElement(StyledLoaderSquare, _extends({
+  return /*#__PURE__*/React.createElement(StyledLoader, _extends({}, tagComponent("loader", rest), filterStyledSystemMarginProps(rest)), allowMotion ? /*#__PURE__*/React.createElement(React.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/React.createElement(StyledLoaderSquare, _extends({
     "data-role": "loader-square",
     key: color,
     backgroundColor: variant === "gradient" ? /* istanbul ignore next */color : "var(--colorsActionMajor500)"
@@ -40,6 +43,6 @@ export const Loader = ({
     "data-role": "hidden-label",
     variant: "span",
     screenReaderOnly: true
-  }, loaderLabel || ariaLabel || l.loader.loading())));
+  }, loaderLabel || ariaLabel || l.loader.loading())) : loaderLabel || ariaLabel || l.loader.loading());
 };
 export default Loader;

package/esm/components/loader-bar/loader-bar.component.d.ts

@@ -5,7 +5,7 @@ import { StyledLoaderBarProps } from "./loader-bar.style";
 export interface LoaderBarProps extends StyledLoaderBarProps, MarginProps, TagProps {
 }
 export declare const LoaderBar: {
-    ({ size, ...rest }: LoaderBarProps): React.JSX.Element;
+    ({ size, ...rest }: LoaderBarProps): React.JSX.Element | null;
     DisplayName: string;
 };
 export default LoaderBar;

package/esm/components/loader-bar/loader-bar.component.js

@@ -10,17 +10,20 @@ export const LoaderBar = ({
   ...rest
 }) => {
   const l = useLocale();
-  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
+  const allowMotion = useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
+  if (allowMotion === undefined) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(StyledLoader, _extends({
     "aria-label": l.loader.loading(),
     role: "progressbar"
-  }, tagComponent("loader-bar", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/React.createElement(StyledLoaderBar, {
+  }, tagComponent("loader-bar", rest), filterStyledSystemMarginProps(rest)), allowMotion ? /*#__PURE__*/React.createElement(StyledLoaderBar, {
     "data-role": "outer-bar",
     size: size
   }, /*#__PURE__*/React.createElement(InnerBar, {
     "data-role": "inner-bar",
     size: size
-  })));
+  })) : l.loader.loading());
 };
 LoaderBar.DisplayName = "Loader Bar";
 export default LoaderBar;

package/esm/components/loader-spinner/loader-spinner.component.d.ts

@@ -37,5 +37,5 @@ export interface LoaderSpinnerProps extends MarginProps, TagProps {
      */
     animationTime?: number;
 }
-export declare const LoaderSpinner: ({ spinnerLabel, size, showSpinnerLabel, variant, isTracked, hasMotion, animationTime, ...rest }: LoaderSpinnerProps) => React.JSX.Element;
+export declare const LoaderSpinner: ({ spinnerLabel, size, showSpinnerLabel, variant, isTracked, hasMotion, animationTime, ...rest }: LoaderSpinnerProps) => React.JSX.Element | null;
 export default LoaderSpinner;

package/esm/components/loader-spinner/loader-spinner.component.js

@@ -17,7 +17,10 @@ export const LoaderSpinner = ({
   ...rest
 }) => {
   const locale = useLocale();
-  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
+  const allowMotion = useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
+  if (allowMotion === undefined) {
+    return null;
+  }
   const isLabelDark = variant !== "inverse" && variant !== "gradient-white";
   const renderSpinnerLabel = /*#__PURE__*/React.createElement(StyledLabel, {
     "data-role": "visible-label",
@@ -38,7 +41,7 @@ export const LoaderSpinner = ({
   return /*#__PURE__*/React.createElement(StyledSpinnerWrapper, _extends({
     size: size,
     role: "status"
-  }, tagComponent("loader-spinner", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? renderSpinnerLabel : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSpinnerCircleSvg, {
+  }, tagComponent("loader-spinner", rest), filterStyledSystemMarginProps(rest)), allowMotion ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSpinnerCircleSvg, {
     role: "presentation",
     size: size,
     variant: variant,
@@ -55,6 +58,6 @@ export const LoaderSpinner = ({
     "data-role": "hidden-label",
     variant: "span",
     screenReaderOnly: true
-  }, spinnerLabel || locale.loaderSpinner.loading())));
+  }, spinnerLabel || locale.loaderSpinner.loading())) : renderSpinnerLabel);
 };
 export default LoaderSpinner;

package/esm/components/loader-star/loader-star.component.d.ts

@@ -8,7 +8,7 @@ export interface LoaderStarProps extends TagProps {
     loaderStarLabel?: string;
 }
 declare const LoaderStar: {
-    ({ loaderStarLabel, ...rest }: LoaderStarProps): JSX.Element;
+    ({ loaderStarLabel, ...rest }: LoaderStarProps): JSX.Element | null;
     displayName: string;
 };
 export default LoaderStar;

package/esm/components/loader-star/loader-star.component.js

@@ -11,7 +11,10 @@ const LoaderStar = ({
   ...rest
 }) => {
   const locale = useLocale();
-  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
+  const allowMotion = useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
+  if (allowMotion === undefined) {
+    return null;
+  }
   const label = /*#__PURE__*/React.createElement(StyledLabel, {
     "data-role": "visible-label",
     variant: "span",
@@ -19,7 +22,7 @@ const LoaderStar = ({
   }, loaderStarLabel || locale.loaderStar.loading());
   return /*#__PURE__*/React.createElement(StyledLoaderStarWrapper, _extends({
     role: "status"
-  }, tagComponent("loader-star", rest)), reduceMotion ? label : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledStars, null, /*#__PURE__*/React.createElement(Star, {
+  }, tagComponent("loader-star", rest)), allowMotion ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledStars, null, /*#__PURE__*/React.createElement(Star, {
     starContainerClassName: "star-1",
     gradientId: "gradient1"
   }), /*#__PURE__*/React.createElement(Star, {
@@ -32,7 +35,7 @@ const LoaderStar = ({
     "data-role": "hidden-label",
     variant: "span",
     screenReaderOnly: true
-  }, loaderStarLabel || locale.loaderStar.loading())));
+  }, loaderStarLabel || locale.loaderStar.loading())) : label);
 };
 LoaderStar.displayName = "LoaderStar";
 export default LoaderStar;

package/esm/components/note/note.style.js

@@ -9,26 +9,31 @@ const StyledNoteContent = styled.div`
 
   ${({
   hasPreview
-}) => css`
-    div.DraftEditor-root {
-      min-height: inherit;
-    }
+}) => hasPreview && css`
+      margin-top: var(--spacing200);
+    `}
 
-    div.DraftEditor-editorContainer,
-    div.public-DraftEditor-content {
-      min-height: inherit;
-      background-color: var(--colorsUtilityYang100);
-      line-height: 21px;
-    }
+  &:last-of-type:not(:first-of-type) {
+    border-top: solid 1px var(--colorsUtilityMajor050);
+  }
 
-    &:last-of-type:not(:first-of-type) {
-      border-top: solid 1px var(--colorsUtilityMajor050);
+  a:not([data-component="link-preview"]) {
+    color: var(--colorsActionMajor500);
+
+    &:hover {
+      cursor: pointer;
+      color: var(--colorsActionMajor600);
     }
 
-    ${hasPreview && `
-      margin-top: var(--spacing200);
-    `}
-  `}
+    &:focus {
+      outline: none;
+      text-decoration: none;
+      color: var(--colorsActionMajorYin090);
+      background-color: var(--colorsSemanticFocus250);
+      border-radius: var(--borderRadius025);
+      box-shadow: 0 var(--spacing050) 0 0 var(--colorsUtilityYin090);
+    }
+  }
 `;
 const StyledNoteMain = styled.div`
   display: flex;

package/esm/components/text-editor/text-editor.style.js

@@ -38,6 +38,24 @@ export const StyledWrapper = styled.div`
       }
     `}
   `};
+
+  a:not([data-component="link-preview"]) {
+    color: var(--colorsActionMajor500);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--colorsActionMajor600);
+    }
+
+    &:focus {
+      outline: none;
+      text-decoration: none;
+      color: var(--colorsActionMajorYin090);
+      background-color: var(--colorsSemanticFocus250);
+      border-radius: var(--borderRadius025);
+      box-shadow: 0 var(--spacing050) 0 0 var(--colorsUtilityYin090);
+    }
+  }
 `;
 export const StyledEditorToolbarWrapper = styled.div`
   ${({

package/esm/hooks/useMediaQuery/useMediaQuery.d.ts

@@ -1 +1 @@
-export default function useMediaQuery(queryInput: string): boolean;
+export default function useMediaQuery(queryInput: string): boolean | undefined;

package/esm/hooks/useMediaQuery/useMediaQuery.js

@@ -1,12 +1,17 @@
-import React from "react";
+import { useLayoutEffect, useState } from "react";
+import { getWindow } from "../../__internal__/dom/globals";
 export default function useMediaQuery(queryInput) {
   const query = queryInput.replace(/^@media( ?)/m, "");
-  const [match, setMatch] = React.useState(() => false);
-  React.useEffect(() => {
-    const queryList = window.matchMedia(query);
-    const updateMatch = () => {
-      setMatch(queryList.matches);
-    };
+  const [match, setMatch] = useState(undefined);
+  useLayoutEffect(() => {
+    const browserWindow = getWindow();
+
+    /* istanbul ignore if */
+    if (!browserWindow) {
+      return undefined;
+    }
+    const queryList = browserWindow.matchMedia(query);
+    const updateMatch = () => setMatch(queryList.matches);
     updateMatch();
     queryList.addEventListener("change", updateMatch);
     return () => {

package/lib/components/loader/loader-square.style.d.ts

@@ -8,5 +8,6 @@ export interface StyledLoaderSquareProps {
     /** The background color of each loader square */
     backgroundColor?: string;
 }
+export declare const StyledLoaderPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledLoaderSquare: import("styled-components").StyledComponent<"div", any, StyledLoaderSquareProps, never>;
 export default StyledLoaderSquare;

package/lib/components/loader/loader-square.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StyledLoaderPlaceholder = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -41,6 +41,10 @@ const getDimensions = size => {
     margin-right: ${marginRight};
   `;
 };
+const StyledLoaderPlaceholder = exports.StyledLoaderPlaceholder = _styledComponents.default.div`
+  display: inline-block;
+  min-width: var(--sizing800);
+`;
 const StyledLoaderSquare = _styledComponents.default.div`
   ${({
   size,
@@ -53,19 +57,15 @@ const StyledLoaderSquare = _styledComponents.default.div`
     display: inline-block;
     ${getDimensions(size)}
     border-radius: var(--borderRadiusCircle);
-
     ${isInsideButton && (0, _styledComponents.css)`
       background-color: ${isActive ? "var(--colorsUtilityYang100)" : "var(--colorsSemanticNeutral500)"};
     `}
-
     &:nth-of-type(1) {
       animation-delay: 0s;
     }
-
     &:nth-of-type(2) {
       animation-delay: 0.2s;
     }
-
     &:nth-of-type(3) {
       animation-delay: 0.4s;
       margin-right: 0px;
@@ -73,7 +73,6 @@ const StyledLoaderSquare = _styledComponents.default.div`
   `}
 `;
 StyledLoaderSquare.defaultProps = {
-  size: "small",
   isInsideButton: false,
   isActive: true,
   theme: _base.default

package/lib/components/loader/loader.component.js

@@ -10,9 +10,11 @@ var _useMediaQuery = _interopRequireDefault(require("../../hooks/useMediaQuery")
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _loader = _interopRequireDefault(require("./loader.style"));
-var _loaderSquare = _interopRequireDefault(require("./loader-square.style"));
+var _loaderSquare = _interopRequireWildcard(require("./loader-square.style"));
 var _typography = _interopRequireDefault(require("../typography"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 let deprecateAriaLabelWarnTriggered = false;
@@ -30,7 +32,10 @@ const Loader = ({
     _logger.default.deprecate("The aria-label prop in Loader is deprecated and will soon be removed, please use the `loaderLabel` prop instead to provide an accessible label.");
   }
   const l = (0, _useLocale.default)();
-  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
+  const allowMotion = (0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
+  if (allowMotion === undefined) {
+    return /*#__PURE__*/_react.default.createElement(_loaderSquare.StyledLoaderPlaceholder, null);
+  }
   const loaderSquareProps = {
     isInsideButton,
     isActive,
@@ -39,7 +44,7 @@ const Loader = ({
   };
 
   // FE-6368 has been raised for the below, changed hex values for design tokens (when added)
-  return /*#__PURE__*/_react.default.createElement(_loader.default, _extends({}, (0, _tags.default)("loader", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? loaderLabel || ariaLabel || l.loader.loading() : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/_react.default.createElement(_loaderSquare.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_loader.default, _extends({}, (0, _tags.default)("loader", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), allowMotion ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/_react.default.createElement(_loaderSquare.default, _extends({
     "data-role": "loader-square",
     key: color,
     backgroundColor: variant === "gradient" ? /* istanbul ignore next */color : "var(--colorsActionMajor500)"
@@ -47,7 +52,7 @@ const Loader = ({
     "data-role": "hidden-label",
     variant: "span",
     screenReaderOnly: true
-  }, loaderLabel || ariaLabel || l.loader.loading())));
+  }, loaderLabel || ariaLabel || l.loader.loading())) : loaderLabel || ariaLabel || l.loader.loading());
 };
 exports.Loader = Loader;
 var _default = exports.default = Loader;

package/lib/components/loader-bar/loader-bar.component.d.ts

@@ -5,7 +5,7 @@ import { StyledLoaderBarProps } from "./loader-bar.style";
 export interface LoaderBarProps extends StyledLoaderBarProps, MarginProps, TagProps {
 }
 export declare const LoaderBar: {
-    ({ size, ...rest }: LoaderBarProps): React.JSX.Element;
+    ({ size, ...rest }: LoaderBarProps): React.JSX.Element | null;
     DisplayName: string;
 };
 export default LoaderBar;

package/lib/components/loader-bar/loader-bar.component.js

@@ -19,17 +19,20 @@ const LoaderBar = ({
   ...rest
 }) => {
   const l = (0, _useLocale.default)();
-  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
+  const allowMotion = (0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
+  if (allowMotion === undefined) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement(_loaderBar.StyledLoader, _extends({
     "aria-label": l.loader.loading(),
     role: "progressbar"
-  }, (0, _tags.default)("loader-bar", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/_react.default.createElement(_loaderBar.default, {
+  }, (0, _tags.default)("loader-bar", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), allowMotion ? /*#__PURE__*/_react.default.createElement(_loaderBar.default, {
     "data-role": "outer-bar",
     size: size
   }, /*#__PURE__*/_react.default.createElement(_loaderBar.InnerBar, {
     "data-role": "inner-bar",
     size: size
-  })));
+  })) : l.loader.loading());
 };
 exports.LoaderBar = LoaderBar;
 LoaderBar.DisplayName = "Loader Bar";

package/lib/components/loader-spinner/loader-spinner.component.d.ts

@@ -37,5 +37,5 @@ export interface LoaderSpinnerProps extends MarginProps, TagProps {
      */
     animationTime?: number;
 }
-export declare const LoaderSpinner: ({ spinnerLabel, size, showSpinnerLabel, variant, isTracked, hasMotion, animationTime, ...rest }: LoaderSpinnerProps) => React.JSX.Element;
+export declare const LoaderSpinner: ({ spinnerLabel, size, showSpinnerLabel, variant, isTracked, hasMotion, animationTime, ...rest }: LoaderSpinnerProps) => React.JSX.Element | null;
 export default LoaderSpinner;

package/lib/components/loader-spinner/loader-spinner.component.js

@@ -24,7 +24,10 @@ const LoaderSpinner = ({
   ...rest
 }) => {
   const locale = (0, _useLocale.default)();
-  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
+  const allowMotion = (0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
+  if (allowMotion === undefined) {
+    return null;
+  }
   const isLabelDark = variant !== "inverse" && variant !== "gradient-white";
   const renderSpinnerLabel = /*#__PURE__*/_react.default.createElement(_loaderSpinner.StyledLabel, {
     "data-role": "visible-label",
@@ -45,7 +48,7 @@ const LoaderSpinner = ({
   return /*#__PURE__*/_react.default.createElement(_loaderSpinner.StyledSpinnerWrapper, _extends({
     size: size,
     role: "status"
-  }, (0, _tags.default)("loader-spinner", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? renderSpinnerLabel : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loaderSpinner.StyledSpinnerCircleSvg, {
+  }, (0, _tags.default)("loader-spinner", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), allowMotion ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loaderSpinner.StyledSpinnerCircleSvg, {
     role: "presentation",
     size: size,
     variant: variant,
@@ -62,7 +65,7 @@ const LoaderSpinner = ({
     "data-role": "hidden-label",
     variant: "span",
     screenReaderOnly: true
-  }, spinnerLabel || locale.loaderSpinner.loading())));
+  }, spinnerLabel || locale.loaderSpinner.loading())) : renderSpinnerLabel);
 };
 exports.LoaderSpinner = LoaderSpinner;
 var _default = exports.default = LoaderSpinner;

package/lib/components/loader-star/loader-star.component.d.ts

@@ -8,7 +8,7 @@ export interface LoaderStarProps extends TagProps {
     loaderStarLabel?: string;
 }
 declare const LoaderStar: {
-    ({ loaderStarLabel, ...rest }: LoaderStarProps): JSX.Element;
+    ({ loaderStarLabel, ...rest }: LoaderStarProps): JSX.Element | null;
     displayName: string;
 };
 export default LoaderStar;

package/lib/components/loader-star/loader-star.component.js

@@ -18,7 +18,10 @@ const LoaderStar = ({
   ...rest
 }) => {
   const locale = (0, _useLocale.default)();
-  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
+  const allowMotion = (0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
+  if (allowMotion === undefined) {
+    return null;
+  }
   const label = /*#__PURE__*/_react.default.createElement(_loaderStar.StyledLabel, {
     "data-role": "visible-label",
     variant: "span",
@@ -26,7 +29,7 @@ const LoaderStar = ({
   }, loaderStarLabel || locale.loaderStar.loading());
   return /*#__PURE__*/_react.default.createElement(_loaderStar.StyledLoaderStarWrapper, _extends({
     role: "status"
-  }, (0, _tags.default)("loader-star", rest)), reduceMotion ? label : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loaderStar.StyledStars, null, /*#__PURE__*/_react.default.createElement(_star.default, {
+  }, (0, _tags.default)("loader-star", rest)), allowMotion ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loaderStar.StyledStars, null, /*#__PURE__*/_react.default.createElement(_star.default, {
     starContainerClassName: "star-1",
     gradientId: "gradient1"
   }), /*#__PURE__*/_react.default.createElement(_star.default, {
@@ -39,7 +42,7 @@ const LoaderStar = ({
     "data-role": "hidden-label",
     variant: "span",
     screenReaderOnly: true
-  }, loaderStarLabel || locale.loaderStar.loading())));
+  }, loaderStarLabel || locale.loaderStar.loading())) : label);
 };
 LoaderStar.displayName = "LoaderStar";
 var _default = exports.default = LoaderStar;

package/lib/components/note/note.style.js

@@ -18,26 +18,31 @@ const StyledNoteContent = exports.StyledNoteContent = _styledComponents.default.
 
   ${({
   hasPreview
-}) => (0, _styledComponents.css)`
-    div.DraftEditor-root {
-      min-height: inherit;
-    }
+}) => hasPreview && (0, _styledComponents.css)`
+      margin-top: var(--spacing200);
+    `}
 
-    div.DraftEditor-editorContainer,
-    div.public-DraftEditor-content {
-      min-height: inherit;
-      background-color: var(--colorsUtilityYang100);
-      line-height: 21px;
-    }
+  &:last-of-type:not(:first-of-type) {
+    border-top: solid 1px var(--colorsUtilityMajor050);
+  }
 
-    &:last-of-type:not(:first-of-type) {
-      border-top: solid 1px var(--colorsUtilityMajor050);
+  a:not([data-component="link-preview"]) {
+    color: var(--colorsActionMajor500);
+
+    &:hover {
+      cursor: pointer;
+      color: var(--colorsActionMajor600);
     }
 
-    ${hasPreview && `
-      margin-top: var(--spacing200);
-    `}
-  `}
+    &:focus {
+      outline: none;
+      text-decoration: none;
+      color: var(--colorsActionMajorYin090);
+      background-color: var(--colorsSemanticFocus250);
+      border-radius: var(--borderRadius025);
+      box-shadow: 0 var(--spacing050) 0 0 var(--colorsUtilityYin090);
+    }
+  }
 `;
 const StyledNoteMain = exports.StyledNoteMain = _styledComponents.default.div`
   display: flex;

package/lib/components/text-editor/text-editor.style.js

@@ -47,6 +47,24 @@ const StyledWrapper = exports.StyledWrapper = _styledComponents.default.div`
       }
     `}
   `};
+
+  a:not([data-component="link-preview"]) {
+    color: var(--colorsActionMajor500);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--colorsActionMajor600);
+    }
+
+    &:focus {
+      outline: none;
+      text-decoration: none;
+      color: var(--colorsActionMajorYin090);
+      background-color: var(--colorsSemanticFocus250);
+      border-radius: var(--borderRadius025);
+      box-shadow: 0 var(--spacing050) 0 0 var(--colorsUtilityYin090);
+    }
+  }
 `;
 const StyledEditorToolbarWrapper = exports.StyledEditorToolbarWrapper = _styledComponents.default.div`
   ${({

package/lib/hooks/useMediaQuery/useMediaQuery.d.ts

@@ -1 +1 @@
-export default function useMediaQuery(queryInput: string): boolean;
+export default function useMediaQuery(queryInput: string): boolean | undefined;

package/lib/hooks/useMediaQuery/useMediaQuery.js

@@ -4,16 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useMediaQuery;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _react = require("react");
+var _globals = require("../../__internal__/dom/globals");
 function useMediaQuery(queryInput) {
   const query = queryInput.replace(/^@media( ?)/m, "");
-  const [match, setMatch] = _react.default.useState(() => false);
-  _react.default.useEffect(() => {
-    const queryList = window.matchMedia(query);
-    const updateMatch = () => {
-      setMatch(queryList.matches);
-    };
+  const [match, setMatch] = (0, _react.useState)(undefined);
+  (0, _react.useLayoutEffect)(() => {
+    const browserWindow = (0, _globals.getWindow)();
+
+    /* istanbul ignore if */
+    if (!browserWindow) {
+      return undefined;
+    }
+    const queryList = browserWindow.matchMedia(query);
+    const updateMatch = () => setMatch(queryList.matches);
     updateMatch();
     queryList.addEventListener("change", updateMatch);
     return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "153.5.0",
+  "version": "153.5.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",