carbon-react 152.2.1 → 152.3.1

package/esm/__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/esm/__internal__/ai-icon/ai-icon.component.js

@@ -0,0 +1,28 @@
+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 from "react";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+export const AiIcon = ({
+  ...rest
+}) => /*#__PURE__*/React.createElement("svg", _extends({}, tagComponent("ai-icon", rest), {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "20",
+  fill: "none",
+  viewBox: "0 0 20 20"
+}), /*#__PURE__*/React.createElement("g", {
+  clipPath: "url(#a)"
+}, /*#__PURE__*/React.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.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.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  id: "a"
+}, /*#__PURE__*/React.createElement("path", {
+  fill: "#fff",
+  d: "M0 0h20v20H0z"
+}))));
+export default AiIcon;

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

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

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

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

package/esm/__internal__/utils/helpers/events/events.d.ts

@@ -17,7 +17,7 @@ declare const Events: {
     /**
      * Determines if event is a keyboard event
      */
-    isKeyboardEvent: (ev: React.SyntheticEvent | Event) => ev is React.KeyboardEvent<Element> | KeyboardEvent;
+    isKeyboardEvent: (ev: React.SyntheticEvent | Event) => ev is KeyboardEvent | React.KeyboardEvent<Element>;
     /**
      * Determines if a number key along the top of the keyboard or a number key on the
      * keypad is pressed

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

@@ -76,6 +76,16 @@ export 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)")}
@@ -86,7 +96,7 @@ export default (isDisabled, destructive, isWhite) => ({
             }
           ` : ""}
 
-      ${isDisabled ? `
+      ${isDisabled && !isWhite ? `
             border-color: var(--colorsActionDisabled500);
             ${makeColors("var(--colorsActionMajorYin030)")};
             &:hover {

package/esm/components/button/button.component.js

@@ -64,13 +64,13 @@ const Button = /*#__PURE__*/React.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/esm/components/hr/hr.style.js

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

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

@@ -34,5 +34,5 @@ declare const StyledImage: import("styled-components").StyledComponent<"div", an
     bottom: string | undefined;
     left: string | undefined;
     as?: string | undefined;
-} & StyledImageProps, "hidden" | "children" | "left" | "right" | "top" | "bottom" | "src" | "as" | "position">;
+} & StyledImageProps, "hidden" | "children" | "left" | "right" | "top" | "bottom" | "as" | "src" | "position">;
 export { StyledImage };

package/esm/components/message/message.component.d.ts

@@ -1,7 +1,11 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-export declare type MessageVariant = "error" | "info" | "success" | "warning" | "neutral";
+export interface TypeIconProps {
+    transparent?: boolean;
+    variant: MessageVariant;
+}
+export declare type MessageVariant = "error" | "info" | "success" | "warning" | "neutral" | "ai";
 export interface MessageProps extends MarginProps, TagProps {
     /** Set the component's content */
     children?: React.ReactNode;

package/esm/components/message/message.component.js

@@ -1,12 +1,12 @@
 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, { useRef } from "react";
 import Typography from "../typography";
-import MessageStyle from "./message.style";
-import TypeIcon from "./__internal__/type-icon/type-icon.component";
-import MessageContent from "./__internal__/message-content/message-content.component";
+import Content from "../content";
+import MessageStyle, { MessageContent, TypeIconStyle } from "./message.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import Icon from "../icon";
 import IconButton from "../icon-button";
+import AiIcon from "../../__internal__/ai-icon";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import useLocale from "../../hooks/__internal__/useLocale";
 export const Message = /*#__PURE__*/React.forwardRef(({
@@ -22,38 +22,52 @@ export const Message = /*#__PURE__*/React.forwardRef(({
   width,
   ...props
 }, ref) => {
-  const messageRef = useRef(null);
-  const refToPass = ref || messageRef;
+  const localRef = useRef(null);
+  const messageRef = ref || localRef;
+  const locale = useLocale();
   const marginProps = filterStyledSystemMarginProps(props);
-  const l = useLocale();
-  const renderCloseIcon = () => {
-    if (!showCloseIcon || !onDismiss) return null;
-    return /*#__PURE__*/React.createElement(IconButton, {
-      "data-element": "close",
-      "aria-label": closeButtonAriaLabel || l.message.closeButtonAriaLabel(),
-      onClick: onDismiss
-    }, /*#__PURE__*/React.createElement(Icon, {
-      type: "close"
-    }));
+  const VARIANT_ICON_MAP = {
+    neutral: "info",
+    success: "tick_circle",
+    error: "error",
+    warning: "warning",
+    info: "info"
   };
-  return open ? /*#__PURE__*/React.createElement(MessageStyle, _extends({}, tagComponent("Message", props), {
+  if (!open) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(MessageStyle, _extends({}, tagComponent("Message", props), {
     transparent: transparent,
     variant: variant,
     id: id,
     width: width,
-    ref: refToPass
+    ref: messageRef
   }, marginProps, {
     tabIndex: -1
-  }), /*#__PURE__*/React.createElement(TypeIcon, {
+  }), /*#__PURE__*/React.createElement(TypeIconStyle, {
     variant: variant,
     transparent: transparent
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }, variant === "ai" ? /*#__PURE__*/React.createElement(AiIcon, {
+    "data-role": "ai-icon"
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    "data-role": "category-icon",
+    type: VARIANT_ICON_MAP[variant]
+  })), /*#__PURE__*/React.createElement(Typography, {
     screenReaderOnly: true
-  }, l.message[variant]()), /*#__PURE__*/React.createElement(MessageContent, {
-    showCloseIcon: showCloseIcon,
-    title: title,
-    reduceLeftPadding: transparent
-  }, children), renderCloseIcon()) : null;
+  }, locale.message?.[variant]?.()), /*#__PURE__*/React.createElement(MessageContent, {
+    "data-element": "message-content",
+    "data-role": "message-content"
+  }, !showCloseIcon || !onDismiss ? /*#__PURE__*/React.createElement(Content, {
+    title: title
+  }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Content, {
+    title: title
+  }, children), /*#__PURE__*/React.createElement(IconButton, {
+    "data-element": "close",
+    "aria-label": closeButtonAriaLabel || locale.message.closeButtonAriaLabel(),
+    onClick: onDismiss
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "close"
+  })))));
 });
 Message.displayName = "Message";
 export default Message;

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

@@ -1,9 +1,12 @@
 import { MarginProps } from "styled-system";
-import { MessageVariant } from "./message.component";
+import { MessageVariant, TypeIconProps } from "./message.component";
 declare type MessageStyleProps = {
     variant?: MessageVariant;
     transparent?: boolean;
     width?: string;
 };
 declare const MessageStyle: import("styled-components").StyledComponent<"div", any, MessageStyleProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
+declare const MessageContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const TypeIconStyle: import("styled-components").StyledComponent<"div", any, TypeIconProps, never>;
 export default MessageStyle;
+export { MessageContent, TypeIconStyle };

package/esm/components/message/message.style.js

@@ -1,19 +1,17 @@
 import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import BaseTheme from "../../style/themes/base";
-import StyledIconButton from "../icon-button/icon-button.style";
 const messageVariants = {
   error: "var(--colorsSemanticNegative500)",
   info: "var(--colorsSemanticInfo500)",
   success: "var(--colorsSemanticPositive500)",
   warning: "var(--colorsSemanticCaution500)",
-  neutral: "var(--colorsSemanticNeutral500)"
+  neutral: "var(--colorsSemanticNeutral500)",
+  ai: "var(--colorsUtilityYin100)"
 };
 const MessageStyle = styled.div`
   position: relative;
   display: flex;
-  justify-content: flex-start;
-  align-content: center;
   border-radius: var(--borderRadius100);
   overflow: hidden;
   border: 1px solid ${({
@@ -33,20 +31,48 @@ const MessageStyle = styled.div`
       background: transparent;
     `}
 
-  ${StyledIconButton} {
-    position: absolute;
-    right: 20px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
   ${({
   width
 }) => width && `width: ${width};`}
-
   ${margin}
 `;
+const MessageContent = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing200);
+  gap: var(--spacing300);
+`;
+const TypeIconStyle = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({
+  variant
+}) => messageVariants[variant]};
+  min-width: 30px;
+
+  span {
+    &:before {
+      color: var(--colorsUtilityYang100);
+    }
+  }
+
+  ${({
+  transparent,
+  variant
+}) => transparent && css`
+      background-color: transparent;
+      span {
+        &:before {
+          color: ${messageVariants[variant]};
+        }
+      }
+    `}
+`;
 MessageStyle.defaultProps = {
   theme: BaseTheme
 };
-export default MessageStyle;
+export default MessageStyle;
+export { MessageContent, TypeIconStyle };

package/esm/components/split-button/split-button-toggle.style.d.ts

@@ -3,6 +3,7 @@ declare type StyledSplitButtonToggleProps = {
     disabled: boolean;
     displayed: boolean;
     size: "small" | "medium" | "large";
+    isWhite?: boolean;
 };
 declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("../button").ButtonProps, "buttonType"> & {
     iconOnly?: boolean | undefined;

package/esm/components/split-button/split-button-toggle.style.js

@@ -12,12 +12,13 @@ const StyledSplitButtonToggle = styled(StyledButton)`
   buttonType,
   disabled,
   displayed,
-  size
+  size,
+  isWhite
 }) => css`
     border-top-left-radius: var(--borderRadius000);
     border-bottom-left-radius: var(--borderRadius000);
 
-    ${!disabled && displayed ? css`
+    ${!disabled && displayed && !isWhite ? css`
           background-color: var(--colorsActionMajor500);
           border-color: var(--colorsActionMajor500);
 
@@ -30,6 +31,21 @@ const StyledSplitButtonToggle = styled(StyledButton)`
             border-left-color: var(--colorsSemanticFocus500);
           }
         ` : ""}
+
+    ${!disabled && displayed && isWhite ? css`
+          background-color: var(--colorsActionMajorYang100);
+          border-color: var(--colorsActionMajorYang100);
+
+          &,
+          ${StyledIcon} {
+            color: var(--colorsYin100);
+          }
+
+          &:focus {
+            border-left-color: var(--colorsSemanticFocus500);
+          }
+        ` : ""}
+
     ${!disabled && buttonType === "primary" && `
       position: relative;
       &::before {
@@ -63,6 +79,18 @@ const StyledSplitButtonToggle = styled(StyledButton)`
         color: var(--colorsActionMajorYang100);
       }
     }
+
+    ${!disabled && isWhite && `
+      &:focus {
+        background-color: var(--colorsActionMajorYang100);
+        border-color: var(--colorsActionMajorYang100);
+
+        &,
+        ${StyledIcon} {
+          color: var(--colorsYin100);
+        }
+      }
+    `}
   `}
 `;
 StyledSplitButtonToggle.defaultProps = {

package/esm/components/split-button/split-button.component.d.ts

@@ -25,6 +25,8 @@ export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonE
     text: string;
     /** Sets rendering position of menu */
     position?: "left" | "right";
+    /** Renders the white variant of the secondary split button */
+    isWhite?: boolean;
 }
 export declare type SplitButtonHandle = {
     /** Programmatically focus the main button */

package/esm/components/split-button/split-button.component.js

@@ -32,6 +32,7 @@ export const SplitButton = /*#__PURE__*/forwardRef(({
   "data-element": dataElement,
   "data-role": dataRole,
   "aria-label": ariaLabel,
+  isWhite = false,
   ...rest
 }, ref) => {
   const locale = useLocale();
@@ -42,6 +43,7 @@ export const SplitButton = /*#__PURE__*/forwardRef(({
   const {
     isInFlatTable
   } = useContext(FlatTableContext);
+  const shouldRenderIsWhiteVariant = buttonType === "secondary" && isWhite;
   useImperativeHandle(ref, () => ({
     focusMainButton() {
       mainButtonRef.current?.focus();
@@ -76,12 +78,14 @@ export const SplitButton = /*#__PURE__*/forwardRef(({
     onClick: handleMainClick,
     size,
     subtext,
+    isWhite: shouldRenderIsWhiteVariant,
     ...filterOutStyledSystemSpacingProps(rest)
   };
   const handleToggleClick = () => {
     showButtons();
   };
   const toggleButtonProps = {
+    isWhite: shouldRenderIsWhiteVariant,
     disabled,
     displayed: showAdditionalButtons,
     onTouchStart: showButtons,

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>;
-declare type ToastVariants = MessageVariant;
+declare type ToastVariants = Exclude<MessageVariant, "ai">;
 declare 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/typography/typography.style.d.ts

@@ -8,5 +8,5 @@ declare const StyledTypography: import("styled-components").StyledComponent<"spa
     textDecoration: string;
     lineHeight: string;
     defaultMargin: string;
-} & TypographyProps, "textDecoration" | "size" | "as" | "weight" | "textTransform" | "lineHeight" | "defaultMargin">;
+} & TypographyProps, "textDecoration" | "as" | "size" | "weight" | "textTransform" | "lineHeight" | "defaultMargin">;
 export default StyledTypography;

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__/utils/helpers/events/events.d.ts

@@ -17,7 +17,7 @@ declare const Events: {
     /**
      * Determines if event is a keyboard event
      */
-    isKeyboardEvent: (ev: React.SyntheticEvent | Event) => ev is React.KeyboardEvent<Element> | KeyboardEvent;
+    isKeyboardEvent: (ev: React.SyntheticEvent | Event) => ev is KeyboardEvent | React.KeyboardEvent<Element>;
     /**
      * Determines if a number key along the top of the keyboard or a number key on the
      * keypad is pressed

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,