carbon-react 106.0.3 → 106.1.2

package/esm/__internal__/input/input-presentation.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { ValidationPropTypes } from "../validations";
+import { ValidationProps } from "../validations";
 export declare type Sizes = "small" | "medium" | "large";
-export interface CommonInputPresentationProps extends ValidationPropTypes {
+export interface CommonInputPresentationProps extends ValidationProps {
     children: React.ReactNode;
     /** If true, the component will be disabled */
     disabled?: boolean;

package/esm/__internal__/validations/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./validation-icon.component";
-export { ValidationPropTypes } from "./validations";
+export type { ValidationProps, ValidationIconProps, } from "./validation-icon.component";

package/esm/__internal__/validations/validation-icon.component.d.ts

@@ -1,41 +1,51 @@
-export default ValidationIcon;
-declare function ValidationIcon({ error, warning, info, size, onFocus, onBlur, iconId, tooltipId, isPartOfInput, tabIndex, onClick, tooltipPosition, tooltipFlipOverrides, ...rest }: {
-    [x: string]: any;
-    error: any;
-    warning: any;
-    info: any;
-    size: any;
-    onFocus: any;
-    onBlur: any;
-    iconId: any;
-    tooltipId: any;
-    isPartOfInput: any;
-    tabIndex: any;
-    onClick: any;
-    tooltipPosition: any;
-    tooltipFlipOverrides: any;
-}): JSX.Element | null;
-declare namespace ValidationIcon {
-    namespace propTypes {
-        const size: PropTypes.Requireable<string>;
-        const iconId: PropTypes.Requireable<string>;
-        const tooltipPosition: PropTypes.Requireable<string>;
-        function tooltipFlipOverrides(props: any, propName: any, componentName: any): Error | null;
-        const tooltipId: PropTypes.Requireable<string>;
-        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-        const isPartOfInput: PropTypes.Requireable<boolean>;
-        const tabIndex: PropTypes.Requireable<number>;
-        const error: PropTypes.Requireable<string | boolean>;
-        const warning: PropTypes.Requireable<string | boolean>;
-        const info: PropTypes.Requireable<string | boolean>;
-    }
-    namespace defaultProps {
-        const tooltipPosition_1: string;
-        export { tooltipPosition_1 as tooltipPosition };
-        const tabIndex_1: number;
-        export { tabIndex_1 as tabIndex };
-    }
+import React from "react";
+export interface ValidationProps {
+    /** Indicate that error has occurred
+     * Pass string to display icon, tooltip and red border
+     * Pass true boolean to only display red border
+     */
+    error?: boolean | string;
+    /** Indicate additional information
+     * Pass string to display icon, tooltip and blue border
+     * Pass true boolean to only display blue border
+     */
+    info?: boolean | string;
+    /** Indicate that warning has occurred
+     * Pass string to display icon, tooltip and orange border
+     * Pass true boolean to only display orange border
+     */
+    warning?: boolean | string;
+}
+declare type TooltipPositions = "top" | "bottom" | "left" | "right";
+export interface ValidationIconProps extends ValidationProps {
+    /** A small string to indicate the size of the icon */
+    size?: "small" | "medium" | "large";
+    /** The unique id of the component (used with aria-describedby for accessibility) */
+    iconId?: string;
+    /** Define position of the tooltip */
+    tooltipPosition?: TooltipPositions;
+    /**
+     * Overrides the default flip behaviour of the Tooltip,
+     * must be an array containing some or all of ["top", "bottom", "left", "right"]
+     * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
+     */
+    tooltipFlipOverrides?: TooltipPositions[];
+    /** Id passed to the tooltip container, used for accessibility purposes */
+    tooltipId?: string;
+    /** An onClick handler */
+    onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
+    /** An onBlur handler */
+    onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
+    /** An onFocus handler */
+    onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
+    /** A boolean to indicate if the icon is part of an input */
+    isPartOfInput?: boolean;
+    /** Overrides the default tabindex of the component */
+    tabIndex?: number;
+    /** Margin right, given number will be multiplied by base spacing unit (8) */
+    mr?: number;
+    /** Margin left, given number will be multiplied by base spacing unit (8) */
+    ml?: number;
 }
-import PropTypes from "prop-types";
+export declare const ValidationIcon: ({ error, warning, info, size, onFocus, onBlur, iconId, tooltipId, isPartOfInput, tabIndex, onClick, tooltipPosition, tooltipFlipOverrides, ...rest }: ValidationIconProps) => JSX.Element | null;
+export default ValidationIcon;

package/esm/__internal__/validations/validation-icon.component.js

@@ -1,13 +1,11 @@
 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, { useContext, useState } from "react";
-import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
+import invariant from "invariant";
 import Icon from "../../components/icon";
 import ValidationIconStyle from "./validation-icon.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const getValidationType = ({
   error,
@@ -17,10 +15,10 @@ const getValidationType = ({
   if (error) return "error";
   if (warning) return "warning";
   if (info) return "info";
-  return "";
+  return null;
 };
 
-const ValidationIcon = ({
+export const ValidationIcon = ({
   error,
   warning,
   info,
@@ -30,12 +28,18 @@ const ValidationIcon = ({
   iconId,
   tooltipId,
   isPartOfInput,
-  tabIndex,
+  tabIndex = -1,
   onClick,
-  tooltipPosition,
+  tooltipPosition = "right",
   tooltipFlipOverrides,
   ...rest
 }) => {
+  const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => ["bottom", "left", "right", "top"].includes(override));
+
+  if (tooltipFlipOverrides) {
+    invariant(flipBehaviourCheck, `The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].`);
+  }
+
   const {
     hasFocus,
     hasMouseOver
@@ -52,7 +56,7 @@ const ValidationIcon = ({
   });
   const validationMessage = error || warning || info;
 
-  if (typeof validationMessage !== "string") {
+  if (typeof validationMessage !== "string" || !validationType) {
     return null;
   }
 
@@ -86,60 +90,4 @@ const ValidationIcon = ({
     focusable: tabIndex !== -1
   }));
 };
-
-ValidationIcon.propTypes = { ...marginPropTypes,
-
-  /** A small string to indicate the size of the icon */
-  size: PropTypes.oneOf(["small", "medium", "large"]),
-
-  /** The unique id of the component (used with aria-describedby for accessibility) */
-  iconId: PropTypes.string,
-
-  /** Define position of the tooltip */
-  tooltipPosition: PropTypes.string,
-
-  /** Overrides the default flip behaviour of the Tooltip, must be an array containing some or all of ["top", "bottom", "left", "right"] (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) */
-  tooltipFlipOverrides: (props, propName, componentName) => {
-    const prop = props[propName];
-    const isValid = prop && Array.isArray(prop) && prop.every(placement => ["bottom", "left", "right", "top"].includes(placement));
-
-    if (!prop || isValid) {
-      return null;
-    }
-
-    return new Error( // eslint-disable-next-line max-len
-    `The \`${propName}\` prop supplied to \`${componentName}\` must be an array containing some or all of ["top", "bottom", "left", "right"].`);
-  },
-
-  /** Id passed to the tooltip container, used for accessibility purposes. */
-  tooltipId: PropTypes.string,
-
-  /** An onClick handler */
-  onClick: PropTypes.func,
-
-  /** An onFocus handler */
-  onFocus: PropTypes.func,
-
-  /** An onBlur handler */
-  onBlur: PropTypes.func,
-
-  /** A boolean to indicate if the icon is part of an input */
-  isPartOfInput: PropTypes.bool,
-
-  /** Overrides the default tabindex of the component */
-  tabIndex: PropTypes.number,
-
-  /** Status of error validations */
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Status of warnings */
-  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Status of info */
-  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
-};
-ValidationIcon.defaultProps = {
-  tooltipPosition: "right",
-  tabIndex: -1
-};
 export default ValidationIcon;

package/esm/__internal__/validations/validation-icon.style.d.ts

@@ -1,2 +1,6 @@
+import { ValidationIconProps } from "./validation-icon.component";
+declare type ValidationType = "error" | "warning" | "info";
+declare const ValidationIconStyle: import("styled-components").StyledComponent<"span", any, ValidationIconProps & {
+    validationType: ValidationType;
+}, never>;
 export default ValidationIconStyle;
-declare const ValidationIconStyle: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/__internal__/validations/validation-icon.style.js

@@ -5,7 +5,6 @@ import StyledIcon from "../../components/icon/icon.style";
 const validationIconTypes = {
   error: "var(--colorsSemanticNegative500)",
   info: "var(--colorsSemanticInfo500)",
-  success: "var(--colorsSemanticPositive500)",
   warning: "var(--colorsSemanticCaution500)"
 };
 const ValidationIconStyle = styled.span`

package/esm/components/duelling-picklist/picklist-item/picklist-item.component.js

@@ -1,6 +1,6 @@
 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, { useCallback, useContext } from "react";
+import React, { useCallback, useContext, useRef } from "react";
 import PropTypes from "prop-types";
 import { CSSTransition } from "react-transition-group";
 import { StyledPicklistItem, StyledButton, StyledLockIcon } from "./picklist-item.style";
@@ -25,6 +25,7 @@ const PicklistItem = /*#__PURE__*/React.forwardRef(({
   const {
     setElementToFocus
   } = useContext(FocusContext);
+  const picklistItemNodeRef = useRef();
   const calculateFocusIndex = useCallback(() => {
     if (isLastItem) {
       const toggledListIndex = listIndex === 0 ? 1 : 0;
@@ -70,10 +71,13 @@ const PicklistItem = /*#__PURE__*/React.forwardRef(({
     classNames: "picklist-item"
   }, rest, type === "add" ? {
     enter: false
-  } : {}), /*#__PURE__*/React.createElement(StyledPicklistItem, {
+  } : {}, {
+    nodeRef: picklistItemNodeRef
+  }), /*#__PURE__*/React.createElement(StyledPicklistItem, {
     onKeyDown: handleKeydown,
     "data-element": "picklist-item",
-    locked: locked
+    locked: locked,
+    ref: picklistItemNodeRef
   }, children, !locked && /*#__PURE__*/React.createElement(StyledButton, {
     buttonType: "primary",
     destructive: type === "remove",

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

@@ -239,6 +239,10 @@ export interface IconProps extends MarginProps {
   tooltipId?: string;
   /** Id passed to the icon. */
   id?: string;
+  tabIndex?: number;
+  isPartOfInput?: boolean;
+  inputSize?: "small" | "medium" | "large";
+  focusable?: boolean;
 }
 
 declare function Icon(

package/esm/components/modal/modal.component.js

@@ -21,6 +21,8 @@ const Modal = ({
   ...rest
 }) => {
   const ref = useRef();
+  const backgroundNodeRef = useRef();
+  const contentNodeRef = useRef();
   const listenerAdded = useRef(false);
   const modalRegistered = useRef(false);
   const [isAnimationComplete, setAnimationComplete] = useState(false);
@@ -114,6 +116,7 @@ const Modal = ({
 
   if (open) {
     background = !enableBackgroundUI ? /*#__PURE__*/React.createElement(StyledModalBackground, {
+      ref: backgroundNodeRef,
       "data-element": "modal-background",
       transitionName: "modal-background",
       transitionTime: timeout
@@ -127,6 +130,7 @@ const Modal = ({
     transitionTime: timeout,
     ref: ref
   }, rest), /*#__PURE__*/React.createElement(TransitionGroup, null, background && /*#__PURE__*/React.createElement(CSSTransition, {
+    nodeRef: backgroundNodeRef,
     key: "modal",
     appear: true,
     classNames: "modal-background",
@@ -134,6 +138,7 @@ const Modal = ({
     onEntered: () => setAnimationComplete(true),
     onExiting: () => setAnimationComplete(false)
   }, background)), /*#__PURE__*/React.createElement(TransitionGroup, null, content && /*#__PURE__*/React.createElement(CSSTransition, {
+    nodeRef: contentNodeRef,
     appear: true,
     classNames: "modal",
     timeout: timeout
@@ -142,7 +147,8 @@ const Modal = ({
       isAnimationComplete,
       triggerRefocusFlag,
       isInModal: true
-    }
+    },
+    ref: contentNodeRef
   }, content)))));
 };
 

package/esm/components/pages/page/page.component.js

@@ -1,6 +1,6 @@
 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 React, { useRef } from "react";
 import PropTypes from "prop-types";
 import { CSSTransition } from "react-transition-group";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
@@ -13,6 +13,7 @@ const Page = ({
   children,
   ...props
 }) => {
+  const styledPageNodeRef = useRef();
   return /*#__PURE__*/React.createElement(CSSTransition, _extends({
     className: "carbon-carousel__transition",
     timeout: {
@@ -21,8 +22,11 @@ const Page = ({
       exit: 0
     } // eslint-disable-next-line react/prop-types
     ,
-    classNames: props.transitionName()
-  }, props), /*#__PURE__*/React.createElement(StyledPage, tagComponent("page", props), /*#__PURE__*/React.createElement(FullScreenHeading, {
+    classNames: props.transitionName(),
+    nodeRef: styledPageNodeRef
+  }, props), /*#__PURE__*/React.createElement(StyledPage, _extends({}, tagComponent("page", props), {
+    ref: styledPageNodeRef
+  }), /*#__PURE__*/React.createElement(FullScreenHeading, {
     hasContent: title
   }, title), /*#__PURE__*/React.createElement(StyledPageContent, {
     "data-element": "carbon-page-content"

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

@@ -31,6 +31,7 @@ const PopoverContainer = ({
   const closeButtonRef = useRef();
   const openButtonRef = useRef();
   const guid = useRef(createGuid());
+  const popoverContentNodeRef = useRef();
   const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
   const isOpen = isControlled ? open : isOpenInternal;
   useEffect(() => {
@@ -78,7 +79,8 @@ const PopoverContainer = ({
     },
     appear: true,
     mountOnEnter: true,
-    unmountOnExit: true
+    unmountOnExit: true,
+    nodeRef: popoverContentNodeRef
   }, state => /*#__PURE__*/React.createElement(PopoverContainerContentStyle, _extends({
     "data-element": "popover-container-content",
     role: "dialog",
@@ -88,7 +90,8 @@ const PopoverContainer = ({
     "aria-labelledby": popoverContainerId,
     "aria-label": containerAriaLabel,
     "aria-describedby": ariaDescribedBy,
-    p: "16px 24px"
+    p: "16px 24px",
+    ref: popoverContentNodeRef
   }, filterStyledSystemPaddingProps(rest)), /*#__PURE__*/React.createElement(PopoverContainerHeaderStyle, null, /*#__PURE__*/React.createElement(PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"

package/esm/components/portal/portal.js

@@ -1,9 +1,10 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import ReactDOM from "react-dom";
 import guid from "../../__internal__/utils/helpers/guid";
 import Browser from "../../__internal__/utils/helpers/browser";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
+export const PortalContext = /*#__PURE__*/React.createContext({});
 
 const Portal = ({
   children,
@@ -13,6 +14,9 @@ const Portal = ({
 }) => {
   const [portalNode, setPortalNode] = useState(null);
   const uniqueId = useMemo(() => guid(), []);
+  const {
+    renderInRoot
+  } = useContext(PortalContext);
   useEffect(() => {
     if (onReposition) {
       onReposition();
@@ -45,7 +49,7 @@ const Portal = ({
     if (!node && id !== undefined && document.getElementById(id)) {
       node = document.getElementById(id);
       setPortalNode(node);
-    } else if (!node) {
+    } else if (!node || document.getElementsByClassName(portalClassName).length === 0) {
       node = document.createElement("div");
       node.classList.add(portalClassName);
       node.setAttribute("data-portal-exit", uniqueId);
@@ -55,14 +59,14 @@ const Portal = ({
       }
 
       setPortalNode(node);
-      const rootDiv = document.getElementById("root"); // Storybook adds the hidden attribute to the root element when on the "Docs" pages
-      // Without this check the portal would also be hidden
+      let mainNode = document.body;
+      const rootDiv = document.getElementById("root");
 
-      if (rootDiv && !rootDiv.hasAttribute("hidden")) {
-        rootDiv.appendChild(node);
-      } else {
-        document.body.appendChild(node);
+      if (rootDiv && renderInRoot) {
+        mainNode = rootDiv;
       }
+
+      mainNode.appendChild(node);
     }
 
     if (className) {

package/esm/components/select/simple-select/simple-select.component.js

@@ -130,7 +130,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
 
         return true;
       });
-    } else if (key.length === 1) {
+    } else if (key.length === 1 && !event.metaKey && !event.ctrlKey) {
       triggerFilterChange(key);
     }
   }, [triggerFilterChange, onKeyDown, onOpen, readOnly]);

package/esm/components/show-edit-pod/show-edit-pod.component.js

@@ -37,6 +37,8 @@ const ShowEditPod = ({
 }) => {
   const locale = useContext(LocaleContext);
   const ref = useRef();
+  const editModeNodeRef = useRef();
+  const showModeNodeRef = useRef();
   const [isEditing, setIsEditingState] = useState(false);
   const isControlled = editing !== undefined;
 
@@ -122,9 +124,11 @@ const ShowEditPod = ({
         timeout: {
           enter: 300,
           exit: 50
-        }
+        },
+        nodeRef: editModeNodeRef
       }, /*#__PURE__*/React.createElement("div", {
-        key: "edit"
+        key: "edit",
+        ref: editModeNodeRef
       }, editContent()));
     }
 
@@ -134,9 +138,11 @@ const ShowEditPod = ({
       timeout: {
         enter: 300,
         exit: 50
-      }
+      },
+      nodeRef: showModeNodeRef
     }, /*#__PURE__*/React.createElement("div", {
-      key: "show"
+      key: "show",
+      ref: showModeNodeRef
     }, children));
   };
 

package/esm/components/textarea/textarea-test.stories.js

@@ -68,7 +68,27 @@ export default {
         ...number.mapping
       }
     },
-    fieldHelpSpecialCharacters: specialCharacters
+    fieldHelpSpecialCharacters: specialCharacters,
+    children: {
+      control: {
+        type: "text"
+      }
+    },
+    error: {
+      control: {
+        type: "text"
+      }
+    },
+    warning: {
+      control: {
+        type: "text"
+      }
+    },
+    info: {
+      control: {
+        type: "text"
+      }
+    }
   },
   args: {
     expandable: false,

package/esm/components/toast/toast.component.js

@@ -37,6 +37,7 @@ const Toast = ({
   const locale = useLocale();
   const toastRef = useRef();
   const timer = useRef();
+  const toastContentNodeRef = useRef();
   const componentClasses = useMemo(() => {
     return classNames(className);
   }, [className]);
@@ -93,10 +94,13 @@ const Toast = ({
         appear: 1600,
         enter: 1500,
         exit: 500
-      }
+      },
+      nodeRef: toastContentNodeRef
     }, /*#__PURE__*/React.createElement(ToastStyle, _extends({
       className: componentClasses
-    }, tagComponent(restProps["data-component"] || "toast", restProps), toastProps), /*#__PURE__*/React.createElement(TypeIcon, {
+    }, tagComponent(restProps["data-component"] || "toast", restProps), toastProps, {
+      ref: toastContentNodeRef
+    }), /*#__PURE__*/React.createElement(TypeIcon, {
       variant: toastProps.variant
     }, /*#__PURE__*/React.createElement(Icon, {
       type: toastProps.variant

package/esm/style/fonts.css

@@ -1,30 +1,36 @@
-@font-face{
-  font-family: "Sage UI";
-  src: url('https://fonts.sage.com/Sage_UI-Regular.woff2') format("woff2"), url('https://fonts.sage.com/Sage_UI-Regular.woff') format("woff");
-  font-weight: 400;
+@font-face {
+  font-family: "CarbonIcons";
+  src: url("./assets/carbon-icons-webfont.woff") format("woff");
+  font-weight: normal;
   font-style: normal;
-  font-display: swap;
 }
 
-@font-face{
+@font-face {
   font-family: "Sage UI";
-  src: url('https://fonts.sage.com/Sage_UI-Medium.woff2') format("woff2"), url('https://fonts.sage.com/Sage_UI-Medium.woff') format("woff");
-  font-weight: 700;
   font-style: normal;
-  font-display: swap;
+  font-weight: 400;
+  src: url("~@sage/design-tokens/assets/fonts/sageui-regular.woff2") format("woff2"),
+       url("~@sage/design-tokens/assets/fonts/sageui-regular.woff") format("woff"),
+       url("~@sage/design-tokens/assets/fonts/sageui-regular.ttf") format("truetype"),
+       url("~@sage/design-tokens/assets/fonts/sageui-regular.otf") format("opentype");
 }
 
-@font-face{
+@font-face {
   font-family: "Sage UI";
-  src: url('https://fonts.sage.com/Sage_UI-Bold.woff2') format("woff2"), url('https://fonts.sage.com/Sage_UI-Bold.woff') format("woff");
-  font-weight: 900;
   font-style: normal;
-  font-display: swap;
+  font-weight: 700;
+  src: url("~@sage/design-tokens/assets/fonts/sageui-medium.woff2") format("woff2"),
+       url("~@sage/design-tokens/assets/fonts/sageui-medium.woff") format("woff"),
+       url("~@sage/design-tokens/assets/fonts/sageui-medium.ttf") format("truetype"),
+       url("~@sage/design-tokens/assets/fonts/sageui-medium.otf") format("opentype");
 }
 
 @font-face {
-  font-family: "CarbonIcons";
-  src: url("./assets/carbon-icons-webfont.woff") format("woff");
-  font-weight: normal;
+  font-family: "Sage UI";
   font-style: normal;
+  font-weight: 900;
+  src: url("~@sage/design-tokens/assets/fonts/sageui-bold.woff2") format("woff2"),
+       url("~@sage/design-tokens/assets/fonts/sageui-bold.woff") format("woff"),
+       url("~@sage/design-tokens/assets/fonts/sageui-bold.ttf") format("truetype"),
+       url("~@sage/design-tokens/assets/fonts/sageui-bold.otf") format("opentype");
 }