carbon-react 153.5.1 → 153.6.0

package/esm/components/icon/icon-config.js

@@ -22,5 +22,5 @@ export const ICON_TOOLTIP_POSITIONS = ["bottom", "left", "right", "top"];
 export const ICON_SHAPES = ["circle", "rounded-rect", "square"];
 export const ICON_SIZES = ["small", "medium", "large", "extra-large"];
 export const ICON_FONT_SIZES = ["small", "medium", "large", "extra-large"];
-export const ICONS = ["accessibility_web", "add", "admin", "alert", "alert_on", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow", "arrow_bottom_right_circle", "arrow_down", "arrow_left", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_right", "arrow_right_small", "arrow_top_left_circle", "arrow_up", "arrows_left_right", "attach", "bank", "bank_with_card", "basket", "basket_with_squares", "bed", "bill_paid", "bill_unpaid", "bin", "biometric", "blocked", "blocked_square", "block_arrow_right", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list", "bullet_list_dotted", "bullet_list_numbers", "business", "calendar", "calendar_today", "call", "calendar_pay_date", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_left", "caret_right", "caret_up", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "cart", "cash", "chat", "chart_bar", "chart_line", "chart_pie", "chat_notes", "check_all", "check_none", "chevron_down", "chevron_left", "chevron_right", "chevron_up", "chevron_down_thick", "chevron_left_thick", "chevron_right_thick", "chevron_up_thick", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect", "connect_off", "construction", "contacts", "contact_card", "copy", "create", "credit_card", "credit_card_slash", "cross", "cross_circle", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "drag", "drag_vertical", "draft", "drill", "dropdown", "duplicate", "edit", "edited", "email", "email_switch", "entry", "ellipsis_horizontal", "ellipsis_vertical", "envelope_dollar", "envelope_euro", "error", "error_square", "euro", "expand", "export", "factory", "favourite", "favourite_lined", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter", "filter_new", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "heart_pulse", "help", "hide", "hand_cash_coins", "hand_cash_note", "home", "image", "import", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger", "ledger_arrow_left", "ledger_arrow_right", "lightbulb_off", "lightbulb_on", "like", "like_no", "link", "link_cloud", "link_on", "list_view", "locked", "location", "logout", "lookup", "marker", "message", "microphone", "minimise", "minus", "minus_large", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause", "pause_circle", "petrol_pump", "pdf", "pin", "people", "people_switch", "percentage_boxed", "person", "person_info", "person_tick", "phone", "piggy_bank", "plane", "play", "play_circle", "plus", "plus_large", "pound", "print", "progress", "progressed", "protect", "question", "question_hollow", "question_mark", "recruiting", "refresh", "refresh_clock", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings", "settings_old", "share", "shield_with_tick", "shield_with_tick_outline", "shop", "sort_down", "sort_up", "spanner", "split", "split_container", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "stop", "stop_circle", "submitted", "support_online", "sync", "tag", "talk", "target", "target_man", "theatre_masks", "three_boxes", "tick", "tick_circle", "tick_thick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare", "worldwide_location"];
+export const ICONS = ["accessibility_web", "add", "admin", "airplay", "alert", "alert_on", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow", "arrow_bottom_right_circle", "arrow_down", "arrow_left", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_right", "arrow_right_small", "arrow_top_left_circle", "arrow_up", "arrows_left_right", "attach", "bank", "bank_with_card", "basket", "basket_with_squares", "batch", "bed", "bill_paid", "bill_unpaid", "bin", "biometric", "blocked", "blocked_square", "block_arrow_right", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list", "bullet_list_dotted", "bullet_list_numbers", "business", "calendar", "calendar_today", "call", "calendar_pay_date", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_left", "caret_right", "caret_up", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "cart", "cash", "chat", "chart_bar", "chart_line", "chart_pie", "chat_notes", "check_all", "check_none", "chevron_down", "chevron_left", "chevron_right", "chevron_up", "chevron_down_thick", "chevron_left_thick", "chevron_right_thick", "chevron_up_thick", "chromecast", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect", "connect_off", "construction", "contacts", "contact_card", "copy", "create", "credit_card", "credit_card_slash", "cross", "cross_circle", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "drag", "drag_vertical", "draft", "drill", "dropdown", "duplicate", "edit", "edited", "email", "email_switch", "entry", "ellipsis_horizontal", "ellipsis_vertical", "envelope_dollar", "envelope_euro", "error", "error_square", "euro", "expand", "export", "factory", "favourite", "favourite_lined", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter", "filter_new", "fit_height", "fit_width", "flag", "folder", "form_refresh", "framerate", "fullscreen", "gift", "go", "graduation_hat", "graph", "grid", "heart_pulse", "help", "hide", "hand_cash_coins", "hand_cash_note", "home", "image", "import", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger", "ledger_arrow_left", "ledger_arrow_right", "lightbulb_off", "lightbulb_on", "like", "like_no", "link", "link_cloud", "link_on", "list_view", "locked", "location", "logout", "lookup", "marker", "message", "microphone", "minimise", "minus", "minus_large", "mobile", "money_bag", "mute", "none", "normalscreen", "old_warning", "page", "palm_tree", "pause", "pause_circle", "petrol_pump", "pdf", "pin", "people", "people_switch", "percentage_boxed", "person", "person_info", "person_tick", "phone", "picture_in_picture", "piggy_bank", "plane", "play", "play_circle", "plus", "plus_large", "pound", "print", "progress", "progressed", "protect", "question", "question_hollow", "question_mark", "recruiting", "refresh", "refresh_clock", "remove", "replay", "sage_coin", "save", "scan", "search", "send", "services", "settings", "settings_old", "share", "shield_with_tick", "shield_with_tick_outline", "shop", "sort_down", "sort_up", "spanner", "speaker", "split", "split_container", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "stop", "stop_circle", "submitted", "subtitles", "support_online", "sync", "tag", "talk", "target", "target_man", "theatre_masks", "three_boxes", "tick", "tick_circle", "tick_thick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volume_high", "volume_low", "volume_medium", "volunteering", "warning", "website", "welfare", "worldwide_location"];
 export default dlsConfig;

package/esm/components/icon/icon-type.d.ts

@@ -1 +1 @@
-export type IconType = "accessibility_web" | "add" | "admin" | "alert" | "alert_on" | "analysis" | "app_facebook" | "app_instagram" | "app_tiktok" | "app_twitter" | "app_youtube" | "apps" | "arrow" | "arrow_bottom_right_circle" | "arrow_down" | "arrow_left" | "arrow_left_boxed" | "arrow_left_right_small" | "arrow_left_small" | "arrow_right" | "arrow_right_small" | "arrow_top_left_circle" | "arrow_up" | "arrows_left_right" | "attach" | "bank" | "bank_with_card" | "basket" | "basket_with_squares" | "bed" | "bill_paid" | "bill_unpaid" | "bin" | "biometric" | "blocked" | "blocked_square" | "block_arrow_right" | "bold" | "box_arrow_left" | "box_arrow_right" | "boxed_shapes" | "bulk_destroy" | "bullet_list" | "bullet_list_dotted" | "bullet_list_numbers" | "business" | "calendar" | "calendar_pay_date" | "calendar_today" | "call" | "camera" | "car_lock" | "car_money" | "car_repair" | "card_wallet" | "card_view" | "caret_down" | "caret_left" | "caret_right" | "caret_up" | "caret_large_down" | "caret_large_left" | "caret_large_right" | "caret_large_up" | "cart" | "cash" | "chat" | "chart_bar" | "chart_line" | "chart_pie" | "chat_notes" | "check_all" | "check_none" | "chevron_down" | "chevron_left" | "chevron_right" | "chevron_up" | "chevron_down_thick" | "chevron_left_thick" | "chevron_right_thick" | "chevron_up_thick" | "circle_with_dots" | "circles_connection" | "clock" | "close" | "cloud_co2" | "coins" | "collaborate" | "computer_clock" | "connect" | "connect_off" | "construction" | "contacts" | "contact_card" | "copy" | "create" | "credit_card" | "credit_card_slash" | "cross" | "cross_circle" | "csv" | "dashboard" | "delete" | "delivery" | "disputed" | "disconnect" | "document_right_align" | "document_tick" | "document_vertical_lines" | "download" | "drag" | "drag_vertical" | "draft" | "drill" | "dropdown" | "duplicate" | "edit" | "edited" | "email" | "email_switch" | "entry" | "envelope_dollar" | "envelope_euro" | "ellipsis_horizontal" | "ellipsis_vertical" | "error" | "error_square" | "euro" | "expand" | "export" | "factory" | "favourite" | "favourite_lined" | "fax" | "feedback" | "file_excel" | "file_generic" | "file_image" | "file_pdf" | "file_word" | "files_leaning" | "filter" | "filter_new" | "fit_height" | "fit_width" | "flag" | "folder" | "form_refresh" | "gift" | "go" | "graduation_hat" | "graph" | "grid" | "hand_cash_coins" | "hand_cash_note" | "heart_pulse" | "help" | "hide" | "home" | "image" | "import" | "in_progress" | "in_transit" | "individual" | "info" | "intranet" | "italic" | "job_seeked" | "key" | "laptop" | "leaf" | "ledger" | "ledger_arrow_left" | "ledger_arrow_right" | "like" | "like_no" | "link" | "lightbulb_off" | "lightbulb_on" | "link_cloud" | "link_on" | "list_view" | "locked" | "location" | "logout" | "lookup" | "marker" | "message" | "microphone" | "minimise" | "minus" | "minus_large" | "mobile" | "money_bag" | "none" | "old_warning" | "palm_tree" | "pause" | "pause_circle" | "pdf" | "pin" | "people" | "people_switch" | "percentage_boxed" | "person" | "person_info" | "person_tick" | "petrol_pump" | "phone" | "piggy_bank" | "plane" | "play" | "play_circle" | "plus" | "plus_large" | "pound" | "print" | "progress" | "progressed" | "protect" | "question" | "question_hollow" | "question_mark" | "recruiting" | "refresh" | "refresh_clock" | "remove" | "sage_coin" | "save" | "scan" | "send" | "search" | "services" | "settings" | "settings_old" | "share" | "shield_with_tick" | "shield_with_tick_outline" | "shop" | "sort_down" | "sort_up" | "spanner" | "split" | "split_container" | "square_dot" | "squares_nine" | "stacked_boxes" | "stacked_squares" | "stop" | "stop_circle" | "support_online" | "submitted" | "sync" | "tag" | "talk" | "target" | "target_man" | "theatre_masks" | "three_boxes" | "tick" | "tick_circle" | "tick_thick" | "true_tick" | "u_turn_left" | "u_turn_right" | "undo" | "unlocked" | "upload" | "uploaded" | "video" | "view" | "volunteering" | "warning" | "website" | "welfare" | "worldwide_location";
+export type IconType = "accessibility_web" | "add" | "admin" | "airplay" | "alert" | "alert_on" | "analysis" | "app_facebook" | "app_instagram" | "app_tiktok" | "app_twitter" | "app_youtube" | "apps" | "arrow" | "arrow_bottom_right_circle" | "arrow_down" | "arrow_left" | "arrow_left_boxed" | "arrow_left_right_small" | "arrow_left_small" | "arrow_right" | "arrow_right_small" | "arrow_top_left_circle" | "arrow_up" | "arrows_left_right" | "attach" | "bank" | "bank_with_card" | "basket" | "basket_with_squares" | "batch" | "bed" | "bill_paid" | "bill_unpaid" | "bin" | "biometric" | "blocked" | "blocked_square" | "block_arrow_right" | "bold" | "box_arrow_left" | "box_arrow_right" | "boxed_shapes" | "bulk_destroy" | "bullet_list" | "bullet_list_dotted" | "bullet_list_numbers" | "business" | "calendar" | "calendar_pay_date" | "calendar_today" | "call" | "camera" | "car_lock" | "car_money" | "car_repair" | "card_wallet" | "card_view" | "caret_down" | "caret_left" | "caret_right" | "caret_up" | "caret_large_down" | "caret_large_left" | "caret_large_right" | "caret_large_up" | "cart" | "cash" | "chat" | "chart_bar" | "chart_line" | "chart_pie" | "chat_notes" | "check_all" | "check_none" | "chevron_down" | "chevron_left" | "chevron_right" | "chevron_up" | "chevron_down_thick" | "chevron_left_thick" | "chevron_right_thick" | "chevron_up_thick" | "chromecast" | "circle_with_dots" | "circles_connection" | "clock" | "close" | "cloud_co2" | "coins" | "collaborate" | "computer_clock" | "connect" | "connect_off" | "construction" | "contacts" | "contact_card" | "copy" | "create" | "credit_card" | "credit_card_slash" | "cross" | "cross_circle" | "csv" | "dashboard" | "delete" | "delivery" | "disputed" | "disconnect" | "document_right_align" | "document_tick" | "document_vertical_lines" | "download" | "drag" | "drag_vertical" | "draft" | "drill" | "dropdown" | "duplicate" | "edit" | "edited" | "email" | "email_switch" | "entry" | "envelope_dollar" | "envelope_euro" | "ellipsis_horizontal" | "ellipsis_vertical" | "error" | "error_square" | "euro" | "expand" | "export" | "factory" | "favourite" | "favourite_lined" | "fax" | "feedback" | "file_excel" | "file_generic" | "file_image" | "file_pdf" | "file_word" | "files_leaning" | "filter" | "filter_new" | "fit_height" | "fit_width" | "flag" | "folder" | "form_refresh" | "framerate" | "fullscreen" | "gift" | "go" | "graduation_hat" | "graph" | "grid" | "hand_cash_coins" | "hand_cash_note" | "heart_pulse" | "help" | "hide" | "home" | "image" | "import" | "in_progress" | "in_transit" | "individual" | "info" | "intranet" | "italic" | "job_seeked" | "key" | "laptop" | "leaf" | "ledger" | "ledger_arrow_left" | "ledger_arrow_right" | "like" | "like_no" | "link" | "lightbulb_off" | "lightbulb_on" | "link_cloud" | "link_on" | "list_view" | "locked" | "location" | "logout" | "lookup" | "marker" | "message" | "microphone" | "minimise" | "minus" | "minus_large" | "mobile" | "money_bag" | "mute" | "none" | "normalscreen" | "old_warning" | "page" | "palm_tree" | "pause" | "pause_circle" | "pdf" | "pin" | "people" | "people_switch" | "percentage_boxed" | "person" | "person_info" | "person_tick" | "petrol_pump" | "phone" | "picture_in_picture" | "piggy_bank" | "plane" | "play" | "play_circle" | "plus" | "plus_large" | "pound" | "print" | "progress" | "progressed" | "protect" | "question" | "question_hollow" | "question_mark" | "recruiting" | "refresh" | "refresh_clock" | "remove" | "replay" | "sage_coin" | "save" | "scan" | "send" | "search" | "services" | "settings" | "settings_old" | "share" | "shield_with_tick" | "shield_with_tick_outline" | "shop" | "sort_down" | "sort_up" | "spanner" | "speaker" | "split" | "split_container" | "square_dot" | "squares_nine" | "stacked_boxes" | "stacked_squares" | "stop" | "stop_circle" | "subtitles" | "support_online" | "submitted" | "sync" | "tag" | "talk" | "target" | "target_man" | "theatre_masks" | "three_boxes" | "tick" | "tick_circle" | "tick_thick" | "true_tick" | "u_turn_left" | "u_turn_right" | "undo" | "unlocked" | "upload" | "uploaded" | "video" | "view" | "volume_high" | "volume_low" | "volume_medium" | "volunteering" | "warning" | "website" | "welfare" | "worldwide_location";

package/esm/components/icon/icon-unicodes.d.ts

@@ -159,6 +159,21 @@ declare namespace iconUnicodes {
     export let stop: string;
     export let stop_circle: string;
     export let worldwide_location: string;
+    export let airplay: string;
+    export let batch: string;
+    export let chromecast: string;
+    export let framerate: string;
+    export let fullscreen: string;
+    export let mute: string;
+    export let normalscreen: string;
+    export let page: string;
+    export let picture_in_picture: string;
+    export let replay: string;
+    export let speaker: string;
+    export let subtitles: string;
+    export let volume_high: string;
+    export let volume_low: string;
+    export let volume_medium: string;
     export let error: string;
     export let warning: string;
     export let tick: string;

package/esm/components/icon/icon-unicodes.js

@@ -257,7 +257,22 @@ const misc = {
   shield_with_tick_outline: "\\f071",
   stop: "\\f068",
   stop_circle: "\\f069",
-  worldwide_location: "\\f072"
+  worldwide_location: "\\f072",
+  airplay: "\\f073",
+  batch: "\\f074",
+  chromecast: "\\f075",
+  framerate: "\\f076",
+  fullscreen: "\\f077",
+  mute: "\\f078",
+  normalscreen: "\\f079",
+  page: "\\f080",
+  picture_in_picture: "\\f081",
+  replay: "\\f082",
+  speaker: "\\f083",
+  subtitles: "\\f084",
+  volume_high: "\\f087",
+  volume_low: "\\f085",
+  volume_medium: "\\f086"
 };
 const legacyNames = {
   add: actions.plus,

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/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/icon/icon-config.js

@@ -28,5 +28,5 @@ const ICON_TOOLTIP_POSITIONS = exports.ICON_TOOLTIP_POSITIONS = ["bottom", "left
 const ICON_SHAPES = exports.ICON_SHAPES = ["circle", "rounded-rect", "square"];
 const ICON_SIZES = exports.ICON_SIZES = ["small", "medium", "large", "extra-large"];
 const ICON_FONT_SIZES = exports.ICON_FONT_SIZES = ["small", "medium", "large", "extra-large"];
-const ICONS = exports.ICONS = ["accessibility_web", "add", "admin", "alert", "alert_on", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow", "arrow_bottom_right_circle", "arrow_down", "arrow_left", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_right", "arrow_right_small", "arrow_top_left_circle", "arrow_up", "arrows_left_right", "attach", "bank", "bank_with_card", "basket", "basket_with_squares", "bed", "bill_paid", "bill_unpaid", "bin", "biometric", "blocked", "blocked_square", "block_arrow_right", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list", "bullet_list_dotted", "bullet_list_numbers", "business", "calendar", "calendar_today", "call", "calendar_pay_date", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_left", "caret_right", "caret_up", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "cart", "cash", "chat", "chart_bar", "chart_line", "chart_pie", "chat_notes", "check_all", "check_none", "chevron_down", "chevron_left", "chevron_right", "chevron_up", "chevron_down_thick", "chevron_left_thick", "chevron_right_thick", "chevron_up_thick", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect", "connect_off", "construction", "contacts", "contact_card", "copy", "create", "credit_card", "credit_card_slash", "cross", "cross_circle", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "drag", "drag_vertical", "draft", "drill", "dropdown", "duplicate", "edit", "edited", "email", "email_switch", "entry", "ellipsis_horizontal", "ellipsis_vertical", "envelope_dollar", "envelope_euro", "error", "error_square", "euro", "expand", "export", "factory", "favourite", "favourite_lined", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter", "filter_new", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "heart_pulse", "help", "hide", "hand_cash_coins", "hand_cash_note", "home", "image", "import", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger", "ledger_arrow_left", "ledger_arrow_right", "lightbulb_off", "lightbulb_on", "like", "like_no", "link", "link_cloud", "link_on", "list_view", "locked", "location", "logout", "lookup", "marker", "message", "microphone", "minimise", "minus", "minus_large", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause", "pause_circle", "petrol_pump", "pdf", "pin", "people", "people_switch", "percentage_boxed", "person", "person_info", "person_tick", "phone", "piggy_bank", "plane", "play", "play_circle", "plus", "plus_large", "pound", "print", "progress", "progressed", "protect", "question", "question_hollow", "question_mark", "recruiting", "refresh", "refresh_clock", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings", "settings_old", "share", "shield_with_tick", "shield_with_tick_outline", "shop", "sort_down", "sort_up", "spanner", "split", "split_container", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "stop", "stop_circle", "submitted", "support_online", "sync", "tag", "talk", "target", "target_man", "theatre_masks", "three_boxes", "tick", "tick_circle", "tick_thick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare", "worldwide_location"];
+const ICONS = exports.ICONS = ["accessibility_web", "add", "admin", "airplay", "alert", "alert_on", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow", "arrow_bottom_right_circle", "arrow_down", "arrow_left", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_right", "arrow_right_small", "arrow_top_left_circle", "arrow_up", "arrows_left_right", "attach", "bank", "bank_with_card", "basket", "basket_with_squares", "batch", "bed", "bill_paid", "bill_unpaid", "bin", "biometric", "blocked", "blocked_square", "block_arrow_right", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list", "bullet_list_dotted", "bullet_list_numbers", "business", "calendar", "calendar_today", "call", "calendar_pay_date", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_left", "caret_right", "caret_up", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "cart", "cash", "chat", "chart_bar", "chart_line", "chart_pie", "chat_notes", "check_all", "check_none", "chevron_down", "chevron_left", "chevron_right", "chevron_up", "chevron_down_thick", "chevron_left_thick", "chevron_right_thick", "chevron_up_thick", "chromecast", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect", "connect_off", "construction", "contacts", "contact_card", "copy", "create", "credit_card", "credit_card_slash", "cross", "cross_circle", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "drag", "drag_vertical", "draft", "drill", "dropdown", "duplicate", "edit", "edited", "email", "email_switch", "entry", "ellipsis_horizontal", "ellipsis_vertical", "envelope_dollar", "envelope_euro", "error", "error_square", "euro", "expand", "export", "factory", "favourite", "favourite_lined", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter", "filter_new", "fit_height", "fit_width", "flag", "folder", "form_refresh", "framerate", "fullscreen", "gift", "go", "graduation_hat", "graph", "grid", "heart_pulse", "help", "hide", "hand_cash_coins", "hand_cash_note", "home", "image", "import", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger", "ledger_arrow_left", "ledger_arrow_right", "lightbulb_off", "lightbulb_on", "like", "like_no", "link", "link_cloud", "link_on", "list_view", "locked", "location", "logout", "lookup", "marker", "message", "microphone", "minimise", "minus", "minus_large", "mobile", "money_bag", "mute", "none", "normalscreen", "old_warning", "page", "palm_tree", "pause", "pause_circle", "petrol_pump", "pdf", "pin", "people", "people_switch", "percentage_boxed", "person", "person_info", "person_tick", "phone", "picture_in_picture", "piggy_bank", "plane", "play", "play_circle", "plus", "plus_large", "pound", "print", "progress", "progressed", "protect", "question", "question_hollow", "question_mark", "recruiting", "refresh", "refresh_clock", "remove", "replay", "sage_coin", "save", "scan", "search", "send", "services", "settings", "settings_old", "share", "shield_with_tick", "shield_with_tick_outline", "shop", "sort_down", "sort_up", "spanner", "speaker", "split", "split_container", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "stop", "stop_circle", "submitted", "subtitles", "support_online", "sync", "tag", "talk", "target", "target_man", "theatre_masks", "three_boxes", "tick", "tick_circle", "tick_thick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volume_high", "volume_low", "volume_medium", "volunteering", "warning", "website", "welfare", "worldwide_location"];
 var _default = exports.default = dlsConfig;

package/lib/components/icon/icon-type.d.ts

@@ -1 +1 @@
-export type IconType = "accessibility_web" | "add" | "admin" | "alert" | "alert_on" | "analysis" | "app_facebook" | "app_instagram" | "app_tiktok" | "app_twitter" | "app_youtube" | "apps" | "arrow" | "arrow_bottom_right_circle" | "arrow_down" | "arrow_left" | "arrow_left_boxed" | "arrow_left_right_small" | "arrow_left_small" | "arrow_right" | "arrow_right_small" | "arrow_top_left_circle" | "arrow_up" | "arrows_left_right" | "attach" | "bank" | "bank_with_card" | "basket" | "basket_with_squares" | "bed" | "bill_paid" | "bill_unpaid" | "bin" | "biometric" | "blocked" | "blocked_square" | "block_arrow_right" | "bold" | "box_arrow_left" | "box_arrow_right" | "boxed_shapes" | "bulk_destroy" | "bullet_list" | "bullet_list_dotted" | "bullet_list_numbers" | "business" | "calendar" | "calendar_pay_date" | "calendar_today" | "call" | "camera" | "car_lock" | "car_money" | "car_repair" | "card_wallet" | "card_view" | "caret_down" | "caret_left" | "caret_right" | "caret_up" | "caret_large_down" | "caret_large_left" | "caret_large_right" | "caret_large_up" | "cart" | "cash" | "chat" | "chart_bar" | "chart_line" | "chart_pie" | "chat_notes" | "check_all" | "check_none" | "chevron_down" | "chevron_left" | "chevron_right" | "chevron_up" | "chevron_down_thick" | "chevron_left_thick" | "chevron_right_thick" | "chevron_up_thick" | "circle_with_dots" | "circles_connection" | "clock" | "close" | "cloud_co2" | "coins" | "collaborate" | "computer_clock" | "connect" | "connect_off" | "construction" | "contacts" | "contact_card" | "copy" | "create" | "credit_card" | "credit_card_slash" | "cross" | "cross_circle" | "csv" | "dashboard" | "delete" | "delivery" | "disputed" | "disconnect" | "document_right_align" | "document_tick" | "document_vertical_lines" | "download" | "drag" | "drag_vertical" | "draft" | "drill" | "dropdown" | "duplicate" | "edit" | "edited" | "email" | "email_switch" | "entry" | "envelope_dollar" | "envelope_euro" | "ellipsis_horizontal" | "ellipsis_vertical" | "error" | "error_square" | "euro" | "expand" | "export" | "factory" | "favourite" | "favourite_lined" | "fax" | "feedback" | "file_excel" | "file_generic" | "file_image" | "file_pdf" | "file_word" | "files_leaning" | "filter" | "filter_new" | "fit_height" | "fit_width" | "flag" | "folder" | "form_refresh" | "gift" | "go" | "graduation_hat" | "graph" | "grid" | "hand_cash_coins" | "hand_cash_note" | "heart_pulse" | "help" | "hide" | "home" | "image" | "import" | "in_progress" | "in_transit" | "individual" | "info" | "intranet" | "italic" | "job_seeked" | "key" | "laptop" | "leaf" | "ledger" | "ledger_arrow_left" | "ledger_arrow_right" | "like" | "like_no" | "link" | "lightbulb_off" | "lightbulb_on" | "link_cloud" | "link_on" | "list_view" | "locked" | "location" | "logout" | "lookup" | "marker" | "message" | "microphone" | "minimise" | "minus" | "minus_large" | "mobile" | "money_bag" | "none" | "old_warning" | "palm_tree" | "pause" | "pause_circle" | "pdf" | "pin" | "people" | "people_switch" | "percentage_boxed" | "person" | "person_info" | "person_tick" | "petrol_pump" | "phone" | "piggy_bank" | "plane" | "play" | "play_circle" | "plus" | "plus_large" | "pound" | "print" | "progress" | "progressed" | "protect" | "question" | "question_hollow" | "question_mark" | "recruiting" | "refresh" | "refresh_clock" | "remove" | "sage_coin" | "save" | "scan" | "send" | "search" | "services" | "settings" | "settings_old" | "share" | "shield_with_tick" | "shield_with_tick_outline" | "shop" | "sort_down" | "sort_up" | "spanner" | "split" | "split_container" | "square_dot" | "squares_nine" | "stacked_boxes" | "stacked_squares" | "stop" | "stop_circle" | "support_online" | "submitted" | "sync" | "tag" | "talk" | "target" | "target_man" | "theatre_masks" | "three_boxes" | "tick" | "tick_circle" | "tick_thick" | "true_tick" | "u_turn_left" | "u_turn_right" | "undo" | "unlocked" | "upload" | "uploaded" | "video" | "view" | "volunteering" | "warning" | "website" | "welfare" | "worldwide_location";
+export type IconType = "accessibility_web" | "add" | "admin" | "airplay" | "alert" | "alert_on" | "analysis" | "app_facebook" | "app_instagram" | "app_tiktok" | "app_twitter" | "app_youtube" | "apps" | "arrow" | "arrow_bottom_right_circle" | "arrow_down" | "arrow_left" | "arrow_left_boxed" | "arrow_left_right_small" | "arrow_left_small" | "arrow_right" | "arrow_right_small" | "arrow_top_left_circle" | "arrow_up" | "arrows_left_right" | "attach" | "bank" | "bank_with_card" | "basket" | "basket_with_squares" | "batch" | "bed" | "bill_paid" | "bill_unpaid" | "bin" | "biometric" | "blocked" | "blocked_square" | "block_arrow_right" | "bold" | "box_arrow_left" | "box_arrow_right" | "boxed_shapes" | "bulk_destroy" | "bullet_list" | "bullet_list_dotted" | "bullet_list_numbers" | "business" | "calendar" | "calendar_pay_date" | "calendar_today" | "call" | "camera" | "car_lock" | "car_money" | "car_repair" | "card_wallet" | "card_view" | "caret_down" | "caret_left" | "caret_right" | "caret_up" | "caret_large_down" | "caret_large_left" | "caret_large_right" | "caret_large_up" | "cart" | "cash" | "chat" | "chart_bar" | "chart_line" | "chart_pie" | "chat_notes" | "check_all" | "check_none" | "chevron_down" | "chevron_left" | "chevron_right" | "chevron_up" | "chevron_down_thick" | "chevron_left_thick" | "chevron_right_thick" | "chevron_up_thick" | "chromecast" | "circle_with_dots" | "circles_connection" | "clock" | "close" | "cloud_co2" | "coins" | "collaborate" | "computer_clock" | "connect" | "connect_off" | "construction" | "contacts" | "contact_card" | "copy" | "create" | "credit_card" | "credit_card_slash" | "cross" | "cross_circle" | "csv" | "dashboard" | "delete" | "delivery" | "disputed" | "disconnect" | "document_right_align" | "document_tick" | "document_vertical_lines" | "download" | "drag" | "drag_vertical" | "draft" | "drill" | "dropdown" | "duplicate" | "edit" | "edited" | "email" | "email_switch" | "entry" | "envelope_dollar" | "envelope_euro" | "ellipsis_horizontal" | "ellipsis_vertical" | "error" | "error_square" | "euro" | "expand" | "export" | "factory" | "favourite" | "favourite_lined" | "fax" | "feedback" | "file_excel" | "file_generic" | "file_image" | "file_pdf" | "file_word" | "files_leaning" | "filter" | "filter_new" | "fit_height" | "fit_width" | "flag" | "folder" | "form_refresh" | "framerate" | "fullscreen" | "gift" | "go" | "graduation_hat" | "graph" | "grid" | "hand_cash_coins" | "hand_cash_note" | "heart_pulse" | "help" | "hide" | "home" | "image" | "import" | "in_progress" | "in_transit" | "individual" | "info" | "intranet" | "italic" | "job_seeked" | "key" | "laptop" | "leaf" | "ledger" | "ledger_arrow_left" | "ledger_arrow_right" | "like" | "like_no" | "link" | "lightbulb_off" | "lightbulb_on" | "link_cloud" | "link_on" | "list_view" | "locked" | "location" | "logout" | "lookup" | "marker" | "message" | "microphone" | "minimise" | "minus" | "minus_large" | "mobile" | "money_bag" | "mute" | "none" | "normalscreen" | "old_warning" | "page" | "palm_tree" | "pause" | "pause_circle" | "pdf" | "pin" | "people" | "people_switch" | "percentage_boxed" | "person" | "person_info" | "person_tick" | "petrol_pump" | "phone" | "picture_in_picture" | "piggy_bank" | "plane" | "play" | "play_circle" | "plus" | "plus_large" | "pound" | "print" | "progress" | "progressed" | "protect" | "question" | "question_hollow" | "question_mark" | "recruiting" | "refresh" | "refresh_clock" | "remove" | "replay" | "sage_coin" | "save" | "scan" | "send" | "search" | "services" | "settings" | "settings_old" | "share" | "shield_with_tick" | "shield_with_tick_outline" | "shop" | "sort_down" | "sort_up" | "spanner" | "speaker" | "split" | "split_container" | "square_dot" | "squares_nine" | "stacked_boxes" | "stacked_squares" | "stop" | "stop_circle" | "subtitles" | "support_online" | "submitted" | "sync" | "tag" | "talk" | "target" | "target_man" | "theatre_masks" | "three_boxes" | "tick" | "tick_circle" | "tick_thick" | "true_tick" | "u_turn_left" | "u_turn_right" | "undo" | "unlocked" | "upload" | "uploaded" | "video" | "view" | "volume_high" | "volume_low" | "volume_medium" | "volunteering" | "warning" | "website" | "welfare" | "worldwide_location";

package/lib/components/icon/icon-unicodes.d.ts

@@ -159,6 +159,21 @@ declare namespace iconUnicodes {
     export let stop: string;
     export let stop_circle: string;
     export let worldwide_location: string;
+    export let airplay: string;
+    export let batch: string;
+    export let chromecast: string;
+    export let framerate: string;
+    export let fullscreen: string;
+    export let mute: string;
+    export let normalscreen: string;
+    export let page: string;
+    export let picture_in_picture: string;
+    export let replay: string;
+    export let speaker: string;
+    export let subtitles: string;
+    export let volume_high: string;
+    export let volume_low: string;
+    export let volume_medium: string;
     export let error: string;
     export let warning: string;
     export let tick: string;

package/lib/components/icon/icon-unicodes.js

@@ -263,7 +263,22 @@ const misc = {
   shield_with_tick_outline: "\\f071",
   stop: "\\f068",
   stop_circle: "\\f069",
-  worldwide_location: "\\f072"
+  worldwide_location: "\\f072",
+  airplay: "\\f073",
+  batch: "\\f074",
+  chromecast: "\\f075",
+  framerate: "\\f076",
+  fullscreen: "\\f077",
+  mute: "\\f078",
+  normalscreen: "\\f079",
+  page: "\\f080",
+  picture_in_picture: "\\f081",
+  replay: "\\f082",
+  speaker: "\\f083",
+  subtitles: "\\f084",
+  volume_high: "\\f087",
+  volume_low: "\\f085",
+  volume_medium: "\\f086"
 };
 const legacyNames = {
   add: actions.plus,

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/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.1",
+  "version": "153.6.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",