carbon-react 153.0.0-beta.1 → 153.0.0

package/esm/components/textarea/textarea.component.js

@@ -3,7 +3,7 @@ import React, { useRef, useEffect, useContext, useCallback, useState } from "rea
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { InputPresentation } from "../../__internal__/input";
 import FormField from "../../__internal__/form-field";
-import useCharacterCount from "../../hooks/__internal__/useCharacterCount";
+import useCharacterCount from "../../hooks/useCharacterCount";
 import Input from "../../__internal__/input/input.component";
 import { InputBehaviour } from "../../__internal__/input-behaviour";
 import InputIconToggle from "../../__internal__/input-icon-toggle";
@@ -19,9 +19,12 @@ import Logger from "../../__internal__/utils/logger";
 import HintText from "../../__internal__/hint-text";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 let deprecateUncontrolledWarnTriggered = false;
+let deprecatedAriaDescribedByWarnTriggered = false;
 let warnBorderRadiusArrayTooLarge = false;
 export const Textarea = /*#__PURE__*/React.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedByProp,
+  ariaDescribedBy: ariaDescribedByPropDeprecated,
   autoFocus,
   inputHint,
   fieldHelp,
@@ -103,6 +106,10 @@ export const Textarea = /*#__PURE__*/React.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  if (!deprecatedAriaDescribedByWarnTriggered && ariaDescribedByPropDeprecated) {
+    deprecatedAriaDescribedByWarnTriggered = true;
+    Logger.deprecate("The `ariaDescribedBy` prop in `Textarea` is deprecated and will soon be removed, please use `aria-describedby` instead.");
+  }
   if (Array.isArray(borderRadius) && borderRadius.length > 4 && !warnBorderRadiusArrayTooLarge) {
     // eslint-disable-next-line no-console
     console.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values.");
@@ -172,7 +179,7 @@ export const Textarea = /*#__PURE__*/React.forwardRef(({
   const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
   const hintId = useRef(guid());
   const inputHintId = inputHint ? hintId.current : undefined;
-  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId].filter(Boolean).join(" ");
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId, ariaDescribedByProp || ariaDescribedByPropDeprecated].filter(Boolean).join(" ");
   const input = /*#__PURE__*/React.createElement(InputPresentation, {
     disabled: disabled,
     readOnly: readOnly,
@@ -186,7 +193,7 @@ export const Textarea = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React.createElement(Input, _extends({
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    ariaDescribedBy: combinedAriaDescribedBy,
+    "aria-describedby": combinedAriaDescribedBy,
     autoFocus: autoFocus,
     name: name,
     value: value,

package/esm/components/textbox/textbox.component.js

@@ -12,7 +12,7 @@ import { filterStyledSystemMarginProps } from "../../style/utils";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 import NumeralDateContext from "../numeral-date/__internal__/numeral-date.context";
 import Logger from "../../__internal__/utils/logger";
-import useCharacterCount from "../../hooks/__internal__/useCharacterCount";
+import useCharacterCount from "../../hooks/useCharacterCount";
 import useUniqueId from "../../hooks/__internal__/useUniqueId";
 import guid from "../../__internal__/utils/helpers/guid";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
@@ -23,8 +23,11 @@ export const SIZE_DEFAULT = "medium";
 export const LABEL_WIDTH_DEFAULT = 30;
 export const LABEL_VALIDATION_DEFAULT = false;
 let deprecateUncontrolledWarnTriggered = false;
+let deprecatedAriaDescribedByWarnTriggered = false;
 export const Textbox = /*#__PURE__*/React.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedByProp,
+  ariaDescribedBy: ariaDescribedByDeprecated,
   align = ALIGN_DEFAULT,
   autoFocus,
   children,
@@ -106,6 +109,10 @@ export const Textbox = /*#__PURE__*/React.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  if (!deprecatedAriaDescribedByWarnTriggered && ariaDescribedByDeprecated) {
+    deprecatedAriaDescribedByWarnTriggered = true;
+    Logger.deprecate("The `ariaDescribedBy` prop in `Textbox` is deprecated and will soon be removed, please use `aria-describedby` instead.");
+  }
   const {
     labelId,
     validationId,
@@ -122,7 +129,7 @@ export const Textbox = /*#__PURE__*/React.forwardRef(({
   });
   const hintId = useRef(guid());
   const inputHintId = inputHint ? hintId.current : undefined;
-  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId].filter(Boolean).join(" ");
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId, ariaDescribedByProp || ariaDescribedByDeprecated].filter(Boolean).join(" ");
   const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
   const input = /*#__PURE__*/React.createElement(InputPresentation, {
     align: align,
@@ -146,7 +153,7 @@ export const Textbox = /*#__PURE__*/React.forwardRef(({
     align: align,
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    ariaDescribedBy: combinedAriaDescribedBy,
+    "aria-describedby": combinedAriaDescribedBy,
     autoFocus: autoFocus,
     deferTimeout: deferTimeout,
     disabled: disabled,

package/esm/components/tile/tile.style.d.ts

@@ -1,6 +1,6 @@
 import { SpaceProps } from "styled-system";
 import { TileProps } from "./tile.component";
-declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant" | "highlightVariant"> & {
+declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "highlightVariant" | "roundness" | "borderWidth" | "borderVariant"> & {
     isHorizontal?: boolean | undefined;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
 export default StyledTile;

package/esm/components/time/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Time } from "./time.component";
-export type { TimeValue, TimeProps, TimeHandle, ToggleValue, } from "./time.component";
+export type { TimeValue, TimeProps, TimeHandle, ToggleValue, TimeInputEvent, } from "./time.component";

package/esm/components/time/time.component.js

@@ -1,5 +1,5 @@
 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); }
-import React, { useCallback, useImperativeHandle, useRef, useState } from "react";
+import React, { useCallback, useImperativeHandle, useRef, useState, useEffect } from "react";
 import guid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
@@ -69,6 +69,21 @@ const Time = /*#__PURE__*/React.forwardRef(({
   const minsAriaLabel = minutesAriaLabel || locale.time.minutesAriaLabelText();
   const hoursRef = useRef(null);
   const minsRef = useRef(null);
+  useEffect(() => {
+    const updates = [...inputValues];
+    if (inputValues[0] !== hourValue) {
+      updates[0] = hourValue;
+    }
+    if (inputValues[1] !== minuteValue) {
+      updates[1] = minuteValue;
+    }
+    if (inputValues[0] !== hourValue || inputValues[1] !== minuteValue) {
+      setInputValues(updates);
+      const formattedHours = hourValue.length ? hourValue.padStart(2, "0") : hourValue;
+      const formattedMinutes = minuteValue.length ? minuteValue.padStart(2, "0") : minuteValue;
+      setFormattedInputValues([formattedHours, formattedMinutes]);
+    }
+  }, [hourValue, minuteValue, inputValues]);
   const computedValidations = (hrs, mins) => {
     const hoursIsString = typeof hrs === "string";
     const minutesIsString = typeof mins === "string";

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

@@ -3,7 +3,8 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import Icon from "../icon";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import { StyledToast, TypeIcon, StyledToastContent, ToastWrapper, StyledPortal } from "./toast.style";
+import { StyledToast, StyledToastContent, ToastWrapper, StyledPortal } from "./toast.style";
+import { TypeIconStyle as TypeIcon } from "../message/message.style";
 import IconButton from "../icon-button";
 import Events from "../../__internal__/utils/helpers/events";
 import useLocale from "../../hooks/__internal__/useLocale";

package/esm/components/toast/toast.style.d.ts

@@ -1,12 +1,11 @@
 /// <reference types="react" />
-import TypeIcon from "../message/__internal__/type-icon/type-icon.style";
 import { MessageVariant } from "../message/message.component";
 declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition, inertOptOut, }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
     align?: "center" | "left" | "right" | undefined;
     alignY?: "center" | "top" | "bottom" | undefined;
     isNotice?: boolean | undefined;
 }, never>;
-type ToastVariants = MessageVariant;
+type ToastVariants = Exclude<MessageVariant, "ai">;
 type ToastStyleProps = {
     align?: "left" | "center" | "right";
     alignY?: "top" | "center" | "bottom";
@@ -24,4 +23,4 @@ declare const ToastWrapper: import("styled-components").StyledComponent<"div", a
     align?: "center" | "left" | "right" | undefined;
     isNotice?: boolean | undefined;
 }, never>;
-export { StyledPortal, StyledToast, TypeIcon, StyledToastContent, ToastWrapper, };
+export { StyledPortal, StyledToast, StyledToastContent, ToastWrapper };

package/esm/components/toast/toast.style.js

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import TypeIcon from "../message/__internal__/type-icon/type-icon.style";
 import StyledIconButton from "../icon-button/icon-button.style";
 import Portal from "../portal/portal";
 import baseTheme from "../../style/themes/base";
@@ -224,4 +223,4 @@ const ToastWrapper = styled.div`
       display: block;
     `}
 `;
-export { StyledPortal, StyledToast, TypeIcon, StyledToastContent, ToastWrapper };
+export { StyledPortal, StyledToast, StyledToastContent, ToastWrapper };

package/esm/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.d.ts

@@ -12,5 +12,5 @@ export interface VerticalMenuFullScreenProps extends TagProps {
     /** A callback to be called when the close icon is clicked or enter is pressed when focused */
     onClose: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
 }
-export declare const VerticalMenuFullScreen: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, isOpen, onClose, ...rest }: VerticalMenuFullScreenProps) => React.JSX.Element | null;
+export declare const VerticalMenuFullScreen: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, isOpen, onClose, ...rest }: VerticalMenuFullScreenProps) => React.JSX.Element;
 export default VerticalMenuFullScreen;

package/esm/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.js

@@ -12,6 +12,7 @@ import VerticalMenuFullScreenContext from "./__internal__/vertical-menu-full-scr
 import { getDocument } from "../../../__internal__/dom/globals";
 import Events from "../../../__internal__/utils/helpers/events/events";
 import useModalManager from "../../../hooks/__internal__/useModalManager";
+import useMediaQuery from "../../../hooks/useMediaQuery";
 export const VerticalMenuFullScreen = ({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -22,6 +23,7 @@ export const VerticalMenuFullScreen = ({
 }) => {
   const l = useLocale();
   const menuWrapperRef = useRef(null);
+  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
   const handleKeyDown = useCallback(ev => {
     // istanbul ignore else
     if (Events.isEscKey(ev)) {
@@ -36,14 +38,13 @@ export const VerticalMenuFullScreen = ({
     topModalOverride: true,
     focusCallToActionElement: safeDocument?.activeElement
   });
-
-  // TODO remove this as part of FE-5650
-  if (!isOpen) return null;
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(FocusTrap, {
     isOpen: isOpen,
     wrapperRef: menuWrapperRef
   }, /*#__PURE__*/React.createElement(StyledVerticalMenuFullScreen, _extends({
     ref: menuWrapperRef,
+    isOpen: isOpen,
+    prefersReducedMotion: reduceMotion,
     scrollVariant: "light",
     as: "nav",
     "aria-label": ariaLabel,
@@ -62,9 +63,7 @@ export const VerticalMenuFullScreen = ({
     "data-element": "close"
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "close",
-    color: "var(--colorsComponentsLeftnavWinterStandardContent)",
-    bgSize: "small",
-    fontSize: "medium"
+    color: "var(--colorsComponentsLeftnavWinterStandardContent)"
   }))), /*#__PURE__*/React.createElement(VerticalMenuFullScreenContext.Provider, {
     value: {
       isFullScreen: true

package/esm/components/vertical-menu/vertical-menu.style.d.ts

@@ -18,6 +18,10 @@ export declare const StyledVerticalMenu: import("styled-components").StyledCompo
         width?: string | undefined;
     } | undefined;
 }, never>;
+interface FullScreenProps {
+    isOpen: boolean;
+    prefersReducedMotion?: boolean;
+}
 export declare const StyledVerticalMenuFullScreen: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & {
     cssProps?: {
         color?: string | undefined;
@@ -25,5 +29,5 @@ export declare const StyledVerticalMenuFullScreen: import("styled-components").S
         height?: string | undefined;
         width?: string | undefined;
     } | undefined;
-}, never>;
+} & FullScreenProps, never>;
 export {};

package/esm/components/vertical-menu/vertical-menu.style.js

@@ -114,11 +114,30 @@ export const StyledVerticalMenuFullScreen = styled(StyledBox)`
   overflow: auto;
   background-color: var(--colorsComponentsLeftnavWinterStandardBackground);
   box-sizing: border-box;
-  transition: all 0.3s ease;
   z-index: ${({
   theme
 }) => theme.zIndex.fullScreenModal};
 
+  ${({
+  prefersReducedMotion
+}) => !prefersReducedMotion && css`
+      transition: all 0.3s ease;
+    `}
+
+  ${({
+  isOpen
+}) => isOpen && css`
+      visibility: visible;
+      transform: translateX(0);
+    `}
+
+  ${({
+  isOpen
+}) => !isOpen && css`
+      transform: translateX(-100%);
+      visibility: hidden;
+    `}
+
   // TODO remove hardcoded values when DS have had chance to review which token to use
   &::-webkit-scrollbar-track {
     background-color: #cccccc;

package/esm/hooks/{__internal__/useCharacterCount → useCharacterCount}/useCharacterCount.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useRef, useEffect, useState } from "react";
-import CharacterCount from "../../../__internal__/character-count";
-import guid from "../../../__internal__/utils/helpers/guid";
-import useDebounce from "../useDebounce";
+import CharacterCount from "../../__internal__/character-count";
+import guid from "../../__internal__/utils/helpers/guid";
+import useDebounce from "../__internal__/useDebounce";
 const useCharacterCount = (value = "", characterLimit, characterCountAriaLive) => {
   const isCharacterLimitValid = typeof characterLimit === "number" && !Number.isNaN(characterLimit);
   const [debouncedValue, setDebouncedValue] = useState(value);

package/esm/locales/en-gb.js

@@ -109,7 +109,8 @@ const enGB = {
     info: () => "Information",
     success: () => "Success",
     warning: () => "Warning",
-    neutral: () => "Information"
+    neutral: () => "Information",
+    ai: () => "AI Information"
   },
   numeralDate: {
     validation: {

package/esm/locales/locale.d.ts

@@ -93,6 +93,7 @@ interface Locale {
         success: () => string;
         warning: () => string;
         neutral: () => string;
+        ai?: () => string;
     };
     numeralDate: {
         validation: {

package/lib/__internal__/ai-icon/ai-icon.component.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export declare const AiIcon: ({ ...rest }: TagProps) => React.JSX.Element;
+export default AiIcon;

package/lib/__internal__/ai-icon/ai-icon.component.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AiIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
+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); }
+const AiIcon = ({
+  ...rest
+}) => /*#__PURE__*/_react.default.createElement("svg", _extends({}, (0, _tags.default)("ai-icon", rest), {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "20",
+  fill: "none",
+  viewBox: "0 0 20 20"
+}), /*#__PURE__*/_react.default.createElement("g", {
+  clipPath: "url(#a)"
+}, /*#__PURE__*/_react.default.createElement("path", {
+  "data-role": "white-star",
+  fill: "#fff",
+  d: "m16.378 9.799-3.776-1.49a1.615 1.615 0 0 1-.91-.91l-1.49-3.775c-.537-1.364-2.466-1.364-3.004 0L5.708 7.4a1.615 1.615 0 0 1-.91.91L1.022 9.799c-1.363.537-1.363 2.466 0 3.004l3.776 1.49c.417.163.746.493.91.91l1.49 3.775c.538 1.363 2.467 1.363 3.005 0l1.489-3.776c.164-.416.494-.745.91-.91l3.776-1.489c1.364-.538 1.364-2.467 0-3.004Z"
+}), /*#__PURE__*/_react.default.createElement("path", {
+  "data-role": "green-circle",
+  fill: "#00D639",
+  d: "M17.172 5.655a2.827 2.827 0 1 0 0-5.655 2.827 2.827 0 0 0 0 5.655Z"
+})), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
+  id: "a"
+}, /*#__PURE__*/_react.default.createElement("path", {
+  fill: "#fff",
+  d: "M0 0h20v20H0z"
+}))));
+exports.AiIcon = AiIcon;
+var _default = exports.default = AiIcon;

package/lib/__internal__/ai-icon/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./ai-icon.component";

package/lib/__internal__/ai-icon/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _aiIcon.default;
+  }
+});
+var _aiIcon = _interopRequireDefault(require("./ai-icon.component"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/__internal__/ai-icon/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../esm/__internal__/ai-icon/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/__internal__/dom/globals.js

@@ -63,5 +63,5 @@ function getDocument() {
  * @returns The global `navigator` object, if it exists.
  */
 function getNavigator() {
-  return typeof navigator !== "undefined" ? navigator : undefined;
+  return typeof navigator !== "undefined" ? navigator : /* istanbul ignore next: node versions >=21 have a partial implementation of navigatior */undefined;
 }

package/lib/__internal__/input/input.component.d.ts

@@ -3,8 +3,13 @@ import { BorderRadiusType } from "../../components/box/box.component";
 export type EnterKeyHintTypes = "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
 export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     align?: "right" | "left";
-    /** The id of the element that describe the input. */
+    /**
+     * Set the ID of the input's description.
+     * @deprecated Please use `aria-describedby` instead.
+     */
     ariaDescribedBy?: string;
+    /** The ID of the input's description, is set along with hint text and error message. */
+    "aria-describedby"?: string;
     /** Override the variant component */
     as?: React.ElementType;
     /** If true the Component will be focused when rendered */

package/lib/__internal__/input/input.component.js

@@ -36,7 +36,8 @@ function selectTextOnFocus(input) {
 const Input = /*#__PURE__*/_react.default.forwardRef(({
   align,
   "aria-labelledby": ariaLabelledBy,
-  ariaDescribedBy,
+  "aria-describedby": ariaDescribedBy,
+  ariaDescribedBy: ariaDescribedByDeprecated,
   placeholder,
   disabled,
   readOnly,
@@ -135,7 +136,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
     handleDeferred(ev);
   };
   const hasValidationPart = (context.hasFocus || groupContext.hasFocus || context.hasMouseOver || groupContext.hasMouseOver) && validationIconId;
-  const descriptionList = ariaDescribedBy ? [ariaDescribedBy] : [];
+  const descriptionList = ariaDescribedBy || ariaDescribedByDeprecated ? [ariaDescribedBy || ariaDescribedByDeprecated] : [];
   if (hasValidationPart) {
     descriptionList.push(validationIconId);
   }

package/lib/components/accordion/accordion-group/accordion-group.component.js

@@ -10,6 +10,7 @@ var _events = _interopRequireDefault(require("../../../__internal__/utils/helper
 var _accordion = _interopRequireDefault(require("../accordion.component"));
 var _accordion2 = require("../accordion.style");
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
+var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -17,10 +18,15 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 // typescript-to-proptypes breaks on recursive type references so it has to be an interface
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
+let deprecatedWarnTriggered = false;
 const AccordionGroup = ({
   children,
   ...rest
 }) => {
+  if (!deprecatedWarnTriggered) {
+    deprecatedWarnTriggered = true;
+    _logger.default.deprecate("`AccordionGroup` is deprecated and will soon be removed.");
+  }
   const hasProperChildren = (0, _react.useMemo)(() => {
     let hasAccordionChildren = true;
     _react.default.Children.toArray(children).forEach(child => {

package/lib/components/button/button-types.style.js

@@ -83,6 +83,16 @@ var _default = (isDisabled, destructive, isWhite) => ({
         ${makeColors("var(--colorsActionMajorYang100)")};
       }
 
+      ${isWhite && (!isDisabled || !destructive) ? `
+          border-color: var(--colorsActionMajorYang100);
+          ${makeColors("var(--colorsActionMajorYang100)")};
+          &:hover {
+            background: var(--colorsActionMajorYang100);
+            border-color: var(--colorsActionMajorYang100);
+            ${makeColors("var(--colorsYin100)")};
+          }
+          ` : ""}
+
       ${destructive ? `
             border-color: var(--colorsSemanticNegative500);
             ${makeColors("var(--colorsSemanticNegative500)")}
@@ -93,7 +103,7 @@ var _default = (isDisabled, destructive, isWhite) => ({
             }
           ` : ""}
 
-      ${isDisabled ? `
+      ${isDisabled && !isWhite ? `
             border-color: var(--colorsActionDisabled500);
             ${makeColors("var(--colorsActionMajorYin030)")};
             &:hover {

package/lib/components/button/button.component.js

@@ -73,13 +73,13 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
   children,
   destructive = false,
   disabled = false,
+  isWhite = false,
   fullWidth: fullWidthProp = false,
   href,
   iconPosition: iconPositionProp = "before",
   iconTooltipMessage,
   iconTooltipPosition,
   iconType,
-  isWhite = false,
   m = 0,
   noWrap,
   onClick,

package/lib/components/dialog/dialog.component.d.ts

@@ -46,6 +46,7 @@ export interface DialogProps extends ModalProps, TagProps {
     height?: string;
     /** Adds Help tooltip to Header */
     help?: string;
+    highlightVariant?: string;
     /** A custom close event handler */
     onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => void;
     /** Determines if the close icon is shown */

package/lib/components/dialog/dialog.component.js

@@ -40,6 +40,7 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
   bespokeFocusTrap,
   disableClose,
   help,
+  highlightVariant = "default",
   role = "dialog",
   contentPadding = {},
   greyBackground = false,
@@ -124,6 +125,7 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
     "aria-modal": isTopModal ? true : undefined,
     ref: containerRef
   }, dialogProps, {
+    highlightVariant: highlightVariant,
     role: role,
     tabIndex: -1
   }, contentPadding, {

package/lib/components/dialog/dialog.style.d.ts

@@ -3,6 +3,7 @@ declare const DialogPositioner: import("styled-components").StyledComponent<"div
 declare const StyledDialog: import("styled-components").StyledComponent<"div", any, Required<Pick<DialogProps, "size">> & {
     dialogHeight?: string | undefined;
     backgroundColor: string;
+    highlightVariant?: string | undefined;
 } & ContentPaddingInterface, never>;
 type StyledDialogTitleProps = {
     showCloseIcon?: boolean;

package/lib/components/dialog/dialog.style.js

@@ -60,6 +60,20 @@ const StyledDialog = exports.StyledDialog = _styledComponents.default.div`
     outline: none;
   }
 
+  ${({
+  highlightVariant
+}) => highlightVariant === "ai" && `
+      &::before {
+        content: "";
+        position: absolute;
+        top: -8px;
+        height: 100px;
+        width: 100%;
+        z-index: -1;
+        background: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
+        border-radius: var(--borderRadius200) var(--borderRadius200) 0 0;
+      }`}
+
   ${({
   backgroundColor
 }) => (0, _styledComponents.css)`

package/lib/components/hr/hr.style.js

@@ -15,7 +15,7 @@ const heightMap = {
 };
 const StyledHr = _styledComponents.default.hr`
   ${_styledSystem.margin}
-  width: inherit;
+  width: 100%;
   border: 0;
   height: ${({
   height

package/lib/components/link/link.component.js

@@ -45,6 +45,13 @@ const Link = exports.Link = /*#__PURE__*/_react.default.forwardRef(({
     batchSelectionDisabled
   } = (0, _react.useContext)(_batchSelection.default);
   const isDisabled = disabled || batchSelectionDisabled;
+  const setRefs = _react.default.useCallback(reference => {
+    if (!ref) return;
+    if (typeof ref === "object") ref.current = reference;
+    if (typeof ref === "function") {
+      ref(reference);
+    }
+  }, [ref]);
   const renderLinkIcon = (currentAlignment = "left") => {
     const hasProperAlignment = icon && iconAlign === currentAlignment;
     return hasProperAlignment ? /*#__PURE__*/_react.default.createElement(_icon.default, {
@@ -68,7 +75,7 @@ const Link = exports.Link = /*#__PURE__*/_react.default.forwardRef(({
     onClick,
     disabled: isDisabled,
     target,
-    ref,
+    ref: setRefs,
     href,
     rel,
     "aria-label": ariaLabel,