carbon-react 158.21.0 → 158.22.0

package/esm/components/button/__next__/__internal__/utils/is-icon-only.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from "react";
+declare const isIconOnly: (children: ReactNode) => boolean;
+export default isIconOnly;

package/esm/components/button/__next__/__internal__/utils/is-icon-only.js

@@ -0,0 +1 @@
+import{Children as r,isValidElement as t}from"react";import{isFragment as e}from"react-is";const o=p=>!!p&&r.toArray(p).every((r=>t(r)?"Icon"===r.type.displayName||!!e(r)&&o(r.props.children):"string"==typeof r&&!r.trim().length));export{o as default};

package/esm/components/button/__next__/button.component.d.ts

@@ -0,0 +1,62 @@
+import React, { ReactNode } from "react";
+import { SpaceProps } from "styled-system";
+import { ButtonProps as LegacyButtonProps } from "../button.component";
+import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
+import { Size, Variant, VariantType } from "./button.config";
+export type ButtonHandle = {
+    focusButton: () => void;
+} | null;
+export interface ButtonProps extends Omit<LegacyButtonProps, "size" | "type" | "iconTooltipMessage" | "iconTooltipPosition">, SpaceProps, TagProps {
+    /** Identifies the element(s) offering additional information about the button that the user might require. */
+    "aria-describedby"?: string;
+    /**
+     * The aria-label attribute of the button.
+     */
+    "aria-label"?: string;
+    /** Identifies the element(s) labelling the button. */
+    "aria-labelledby"?: string;
+    /** The content that the button displays. */
+    children?: ReactNode;
+    /** Flag to indicate that the button is disabled. */
+    disabled?: boolean;
+    /** Flag to indicate that the button can be full-width. */
+    fullWidth?: boolean;
+    /** The ID of the button. */
+    id?: string;
+    /** Set the button to use a dark-mode appearance. */
+    inverse?: boolean;
+    /** The name of the button. */
+    name?: string;
+    /** Flag to indicate whether the button text can wrap over multiple lines. */
+    noWrap?: boolean;
+    /** Handler to fire when the button is blurred. */
+    onBlur?: (ev: React.FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** Handler to fire when the button is clicked. */
+    onClick?: (ev: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** Handler to fire when the button is focused. */
+    onFocus?: (ev: React.FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** Handler to fire when the button is activated via the Enter or Space keys. */
+    onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** The size of the button. */
+    size?: Size;
+    /** The HTML type that this button should use. */
+    type?: "button" | "reset" | "submit";
+    /** The variant of the button. */
+    variant?: Variant;
+    /** The variant type of the button. */
+    variantType?: VariantType;
+    /**
+     * @deprecated Please use `variantType` prop instead.
+     * */
+    buttonType?: LegacyButtonProps["buttonType"];
+    /**
+     * @deprecated Please use `variant="destructive"` instead.
+     * */
+    destructive?: LegacyButtonProps["destructive"];
+    /**
+     * @deprecated Please use `inverse` instead.
+     * */
+    isWhite?: LegacyButtonProps["isWhite"];
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<ButtonHandle>>;
+export default Button;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{forwardRef as n,useRef as a,useImperativeHandle as i}from"react";import{StyledButton as o,StyledContentContainer as c}from"./button.style.js";import l from"../../../__internal__/utils/helpers/tags/tags.js";import u from"../../../hooks/useMediaQuery/useMediaQuery.js";import s from"./__internal__/utils/is-icon-only.js";import d from"../../icon/icon.component.js";function y(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function p(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){y(e,r,t[r])}))}return e}function b(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const f=n(((n,y)=>{var{"aria-describedby":f,"aria-label":v,"aria-labelledby":m,children:O,disabled:h=!1,fullWidth:j=!1,id:g,inverse:T,name:P,noWrap:w=!0,onClick:k,size:W="medium",variant:$="default",variantType:_="primary",buttonType:S,destructive:x,iconType:D,iconPosition:z="before",isWhite:B,href:C}=n,E=function(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(n,["aria-describedby","aria-label","aria-labelledby","children","disabled","fullWidth","id","inverse","name","noWrap","onClick","size","variant","variantType","buttonType","destructive","iconType","iconPosition","isWhite","href"]);const M=a(null),Q=void 0!==O&&!1!==O,I=!!D&&!Q||s(O);i(y,(()=>({focusButton:()=>{var e;null===(e=M.current)||void 0===e||e.focus()}})),[]);const q=u("screen and (prefers-reduced-motion: no-preference)"),{variant:A,variantType:F}=(({buttonType:e,destructive:r,variant:t,variantType:n})=>{if(!e&&!r)return{variant:t,variantType:n};if(r)return{variant:"destructive",variantType:"primary"===(null!=e?e:n)?"primary":"secondary"};switch(e){case"primary":return{variant:"default",variantType:"primary"};case"tertiary":return{variant:"default",variantType:"tertiary"};case"darkBackground":default:return{variant:"default",variantType:"secondary"};case"gradient-grey":case"gradient-white":return{variant:"gradient",variantType:"secondary"}}})({buttonType:S,destructive:x,variant:$,variantType:_});return e(o,b(p({$allowMotion:q,"aria-describedby":f,"aria-label":v,"aria-labelledby":m,disabled:h,$fullWidth:j,$inverse:T||"darkBackground"===S||B,id:g,name:P,$noWrap:w,onClick:C?void 0:e=>{var r;null===(r=M.current)||void 0===r||r.focus({preventScroll:!0}),null==k||k(e)},ref:M,$size:W,$variant:A,$variantType:F,as:!h&&C?"a":"button",href:C,$iconOnly:I},l("button",E),E),{children:e(c,{"data-role":"button-child-container",children:(()=>{if(!D)return O;const n={"aria-hidden":!0,bg:"transparent"};return Q?r(t,"before"===z?{children:[e(d,b(p({type:D},n),{"data-role":"button-icon-before"})),O]}:{children:[O,e(d,b(p({type:D},n),{"data-role":"button-icon-after"}))]}):e(d,b(p({type:D},n),{"data-role":"button-icon-only"}))})()})}))}));export{f as Button,f as default};

package/esm/components/button/__next__/button.config.d.ts

@@ -0,0 +1,34 @@
+export type Size = "xs" | "small" | "medium" | "large";
+export type Variant = "default" | "destructive" | "gradient";
+export type VariantType = "primary" | "secondary" | "tertiary" | "subtle";
+export type ConfigEntry = Record<"active" | "default" | "disabled" | "hover", string>;
+export type ColorConfig = {
+    [key in Variant]: {
+        [key in VariantType]?: {
+            background: ConfigEntry;
+            border: ConfigEntry;
+            label: ConfigEntry;
+        };
+    };
+};
+export type InverseColorConfig = {
+    [key in VariantType]: {
+        background: ConfigEntry;
+        border: ConfigEntry;
+        label: ConfigEntry;
+    };
+};
+export type PropConfig = {
+    [key in Size]: {
+        borderRadius: string;
+        font: string;
+        height: string;
+        iconOnlyWidth: string;
+        paddingVertical: string;
+        paddingHorizontal: string;
+    };
+};
+export declare const propsForSize: PropConfig;
+export declare const inverseColourSettings: InverseColorConfig;
+export declare const colourSettings: ColorConfig;
+export declare const gradientAnimation: import("styled-components").FlattenSimpleInterpolation;

package/esm/components/button/__next__/button.config.js

@@ -0,0 +1 @@
+import{css as a}from"styled-components";const t={xs:{borderRadius:"var(--global-radius-action-l)",font:"var(--global-font-static-comp-medium-xs)",height:"var(--global-size-xs)",iconOnlyWidth:"var(--global-size-xs)",paddingVertical:"var(--global-space-none)",paddingHorizontal:"var(--global-space-comp-s)"},small:{borderRadius:"var(--global-radius-action-l)",font:"var(--global-font-static-comp-medium-s)",height:"var(--global-size-s)",iconOnlyWidth:"var(--global-size-s)",paddingVertical:"var(--global-space-comp-2-xs)",paddingHorizontal:"var(--global-space-comp-m)"},medium:{borderRadius:"var(--global-radius-action-xl)",font:"var(--global-font-static-comp-medium-m)",height:"var(--global-size-m)",iconOnlyWidth:"var(--global-size-m)",paddingVertical:"6px",paddingHorizontal:"var(--global-space-comp-l)"},large:{borderRadius:"var(--global-radius-action-2-xl)",font:"var(--global-font-static-comp-medium-l)",height:"var(--global-size-l)",iconOnlyWidth:"var(--global-size-l)",paddingVertical:"6px",paddingHorizontal:"var(--global-space-comp-l)"}},e={primary:{background:{active:"var(--button-typical-primary-inverse-bg-active)",default:"var(--button-typical-primary-inverse-bg-default)",disabled:"var(--button-typical-primary-inverse-bg-disabled)",hover:"var(--button-typical-primary-inverse-bg-hover)"},border:{active:"transparent",default:"transparent",disabled:"transparent",hover:"transparent"},label:{active:"var(--button-typical-primary-inverse-label-active)",default:"var(--button-typical-primary-inverse-label-default)",disabled:"var(--button-typical-primary-inverse-label-disabled)",hover:"var(--button-typical-primary-inverse-label-hover)"}},secondary:{background:{active:"var(--button-typical-secondary-inverse-bg-active)",default:"var(--button-typical-secondary-inverse-bg-default)",disabled:"transparent",hover:"var(--button-typical-secondary-inverse-bg-hover)"},border:{active:"var(--button-typical-secondary-inverse-border-active)",default:"var(--button-typical-secondary-inverse-border-default)",disabled:"var(--button-typical-secondary-inverse-border-disabled)",hover:"var(--button-typical-secondary-inverse-border-hover)"},label:{active:"var(--button-typical-secondary-inverse-label-active)",default:"var(--button-typical-secondary-inverse-label-default)",disabled:"var(--button-typical-secondary-inverse-label-disabled)",hover:"var(--button-typical-secondary-inverse-label-hover)"}},tertiary:{background:{active:"var(--button-typical-tertiary-inverse-bg-active)",default:"var(--button-typical-tertiary-inverse-bg-default)",disabled:"transparent",hover:"var(--button-typical-tertiary-inverse-bg-hover)"},border:{active:"var(--button-typical-tertiary-inverse-border-active)",default:"var(--button-typical-tertiary-inverse-border-default)",disabled:"var(--button-typical-tertiary-inverse-border-disabled)",hover:"var(--button-typical-tertiary-inverse-border-hover)"},label:{active:"var(--button-typical-tertiary-inverse-label-active)",default:"var(--button-typical-tertiary-inverse-label-default)",disabled:"var(--button-typical-tertiary-inverse-label-disabled)",hover:"var(--button-typical-tertiary-inverse-label-hover)"}},subtle:{background:{active:"var(--button-typical-subtle-inverse-bg-active)",default:"transparent",disabled:"transparent",hover:"var(--button-typical-subtle-inverse-bg-hover)"},border:{active:"transparent",default:"transparent",disabled:"transparent",hover:"transparent"},label:{active:"var(--button-typical-subtle-inverse-label-active)",default:"var(--button-typical-subtle-inverse-label-default)",disabled:"var(--button-typical-subtle-inverse-label-disabled)",hover:"var(--button-typical-subtle-inverse-label-hover)"}}},r={default:{primary:{background:{active:"var(--button-typical-primary-bg-active)",default:"var(--button-typical-primary-bg-default)",disabled:"var(--button-typical-primary-bg-disabled)",hover:"var(--button-typical-primary-bg-hover)"},border:{active:"transparent",default:"transparent",disabled:"transparent",hover:"transparent"},label:{active:"var(--button-typical-primary-label-active)",default:"var(--button-typical-primary-label-default)",disabled:"var(--button-typical-primary-label-disabled)",hover:"var(--button-typical-primary-label-hover)"}},secondary:{background:{active:"var(--button-typical-secondary-bg-active)",default:"var(--button-typical-secondary-bg-default)",disabled:"var(--button-typical-secondary-bg-disabled)",hover:"var(--button-typical-secondary-bg-hover)"},border:{active:"var(--button-typical-secondary-border-active)",default:"var(--button-typical-secondary-border-default)",disabled:"var(--button-typical-secondary-border-disabled)",hover:"var(--button-typical-secondary-border-hover)"},label:{active:"var(--button-typical-secondary-label-active)",default:"var(--button-typical-secondary-label-default)",disabled:"var(--button-typical-secondary-label-disabled)",hover:"var(--button-typical-secondary-label-hover)"}},tertiary:{background:{active:"var(--button-typical-tertiary-bg-active)",default:"var(--button-typical-tertiary-bg-default)",disabled:"var(--button-typical-tertiary-bg-disabled)",hover:"var(--button-typical-tertiary-bg-hover)"},border:{active:"var(--button-typical-tertiary-border-active)",default:"var(--button-typical-tertiary-border-default)",disabled:"var(--button-typical-tertiary-border-disabled)",hover:"var(--button-typical-tertiary-border-hover)"},label:{active:"var(--button-typical-tertiary-label-active)",default:"var(--button-typical-tertiary-label-default)",disabled:"var(--button-typical-tertiary-label-disabled)",hover:"var(--button-typical-tertiary-label-hover)"}},subtle:{background:{active:"var(--button-typical-subtle-bg-active)",default:"transparent",disabled:"transparent",hover:"var(--button-typical-subtle-bg-hover)"},border:{active:"transparent",default:"transparent",disabled:"transparent",hover:"transparent"},label:{active:"var(--button-typical-subtle-label-active)",default:"var(--button-typical-subtle-label-default)",disabled:"var(--button-typical-subtle-label-disabled)",hover:"var(--button-typical-subtle-label-hover)"}}},destructive:{primary:{background:{active:"",default:"var(--button-destructive-primary-bg-default)",disabled:"var(--button-destructive-primary-bg-disabled)",hover:"var(--button-destructive-primary-bg-hover)"},label:{active:"",default:"var(--button-destructive-primary-label-default)",disabled:"var(--button-destructive-primary-label-disabled)",hover:"var(--button-destructive-primary-label-hover)"},border:{active:"",default:"transparent",disabled:"transparent",hover:"transparent"}},secondary:{background:{active:"",default:"transparent",disabled:"transparent",hover:"var(--button-destructive-secondary-bg-hover)"},label:{active:"",default:"var(--button-destructive-secondary-label-default)",disabled:"var(--button-destructive-secondary-label-disabled)",hover:"var(--button-destructive-secondary-label-hover)"},border:{active:"",default:"var(--button-destructive-secondary-border-default)",disabled:"var(--button-destructive-secondary-border-disabled)",hover:"var(--button-destructive-secondary-border-hover)"}}},gradient:{secondary:{background:{active:"var(--button-ai-bg-active, linear-gradient(90deg, var(--mode-color-action-ai-active-stop-1) 0%, var(--mode-color-action-ai-active-stop-2) 40%, var(--mode-color-action-ai-active-stop-3) 90%))",default:"transparent",disabled:"transparent",hover:"var(--button-ai-bg-hover, linear-gradient(90deg, var(--mode-color-action-ai-hover-stop-1) 0%, var(--mode-color-action-ai-hover-stop-2) 40%, var(--mode-color-action-ai-hover-stop-3) 90%))"},border:{active:"var(--button-ai-border-active)",default:"var(--button-ai-border-default)",disabled:"var(--button-ai-border-disabled)",hover:"var(--button-ai-border-hover)"},label:{active:"var(--button-ai-label-active)",default:"var(--button-ai-label-default)",disabled:"var(--button-ai-label-disabled)",hover:"var(--button-ai-label-hover)"}}}},l=a(["@keyframes gradient-loop{0%{background-position:0% 0;}100%{background-position:-200% 0;}}"]);export{r as colourSettings,l as gradientAnimation,e as inverseColourSettings,t as propsForSize};

package/esm/components/button/__next__/button.style.d.ts

@@ -0,0 +1,16 @@
+import { SpaceProps } from "styled-system";
+import { Size, Variant, VariantType } from "./button.config";
+type StyledButtonProps = SpaceProps & {
+    $allowMotion?: boolean;
+    $inverse?: boolean;
+    $fullWidth?: boolean;
+    $noWrap?: boolean;
+    $iconOnly?: boolean;
+};
+export declare const StyledContentContainer: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledButton: import("styled-components").StyledComponent<"button", any, Omit<StyledButtonProps, "size" | "variantType" | "variant"> & {
+    $size: Size;
+    $variant: Variant;
+    $variantType: VariantType;
+}, never>;
+export default StyledButton;

package/esm/components/button/__next__/button.style.js

@@ -0,0 +1 @@
+import o,{css as e}from"styled-components";import{space as i}from"styled-system";import r from"../../../style/utils/add-focus-styling.js";import{gradientAnimation as n,propsForSize as a,inverseColourSettings as t,colourSettings as d}from"./button.config.js";const l=o.span.withConfig({displayName:"button.style__StyledContentContainer",componentId:"sc-c07486b9-0"})(["display:flex;gap:var(--global-space-comp-s);align-items:center;justify-content:center;"]),c=o.button.withConfig({displayName:"button.style__StyledButton",componentId:"sc-c07486b9-1"})([""," align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;outline-offset:0;text-decoration:none;vertical-align:middle;cursor:pointer;"," "," &:focus{"," position:relative;z-index:1;}"],i,(({$allowMotion:o,disabled:i,$inverse:r,$size:l,$variant:c,$variantType:s,$iconOnly:b})=>r?(({disabled:o,size:i,variantType:r,iconOnly:n})=>{const{background:d,border:l,label:c}=t[r],{borderRadius:s,font:b,height:u,paddingVertical:v,paddingHorizontal:g}=a[i];return e(["background-color:",";border:"," solid ",";border-radius:",";color:",";font:",";height:",";width:",";padding:"," ",";",""],d.default,"tertiary"===r?"1px":"2px",l.default,n?"var(--global-radius-action-circle)":s,c.default,b,u,n?u:"max-content",v,n?"":g,o?e(["background-color:",";border-color:",";color:",";cursor:not-allowed;"],d.disabled,l.disabled,c.disabled):e(["&:active{background-color:",";color:",";border-color:",";}&:hover{background-color:",";color:",";border-color:",";}"],d.active,c.active,l.active,d.hover,c.hover,l.hover))})({disabled:i,size:l,variantType:s,iconOnly:b}):"gradient"===c?e([""," ",""],n,(({allowMotion:o=!0,disabled:i,size:r,iconOnly:n})=>{const{background:t,border:l,label:c}=d.gradient.secondary||{},{borderRadius:s,font:b,height:u,paddingVertical:v,paddingHorizontal:g}=a[r];return e(["position:relative;z-index:0;border:none;border-radius:",";background:white;color:var(--button-ai-label-default);font:",";height:",";width:",";padding:"," ",';overflow:hidden;&::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;z-index:-1;background:var(--button-ai-border-default);background-position:0% 0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}&:hover{background:linear-gradient( 90deg,var(--mode-color-action-ai-hover-stop-1) 0%,var(--mode-color-action-ai-hover-stop-2) 40%,var(--mode-color-action-ai-hover-stop-3) 90% );}&:hover::before{',"}"," ",""],n?"var(--global-radius-action-circle)":s,b,u,n?u:"max-content",v,n?"":g,o&&e(["background-size:300% 100%;animation:gradient-loop 1000ms linear infinite;"]),i&&e(["opacity:0.6;pointer-events:none;cursor:not-allowed;&::before{animation:none;background:none;-webkit-mask:none;mask:none;border:2px solid var(--button-ai-border-disabled);padding:0;}color:var(--button-ai-label-disabled);"]),!i&&e(["&:active{background:",";color:",";border-color:",";}"],null==t?void 0:t.active,null==c?void 0:c.active,null==l?void 0:l.active))})({allowMotion:o,disabled:i,size:l,iconOnly:b})):(({disabled:o,size:i,variant:r,variantType:n,iconOnly:t})=>{const{background:l,border:c,label:s}=d[r][n]||{},{borderRadius:b,font:u,height:v,paddingVertical:g,paddingHorizontal:p}=a[i];return e(["background-color:",";border:"," solid ",";border-radius:",";color:",";font:",";height:",";width:",";padding:"," ",";",""],null==l?void 0:l.default,"tertiary"===n?"1px":"2px",null==c?void 0:c.default,t?"var(--global-radius-action-circle)":b,null==s?void 0:s.default,u,v,t?v:"max-content",g,t?"":p,o?e(["background-color:",";border-color:",";color:",";cursor:not-allowed;"],null==l?void 0:l.disabled,null==c?void 0:c.disabled,null==s?void 0:s.disabled):e(["&:active{background-color:",";color:",";border-color:",";}&:hover{background-color:",";color:",";border-color:",";}"],null==l?void 0:l.active,null==s?void 0:s.active,null==c?void 0:c.active,null==l?void 0:l.hover,null==s?void 0:s.hover,null==c?void 0:c.hover))})("xs"!==l||"primary"!==s&&"default"===c?"destructive"!==c||"tertiary"!==s&&"subtle"!==s?{disabled:i,size:l,variant:c,variantType:s,iconOnly:b}:{disabled:i,size:l,variant:c,variantType:"primary",iconOnly:b}:{disabled:i,size:"xs",variant:"default",variantType:"secondary",iconOnly:b})),(({$fullWidth:o,$size:i,$noWrap:r})=>e([""," ",""],o&&e(["width:100%;"]),r?"white-space: nowrap;":`\n        flex-flow: wrap;\n        min-height: ${a[i].height};\n        height: unset;\n      `)),r());export{c as StyledButton,l as StyledContentContainer,c as default};

package/esm/components/button/__next__/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./button.component";
+export type { ButtonProps } from "./button.component";

package/esm/components/button/__next__/index.js

@@ -0,0 +1 @@
+export{Button as default}from"./button.component.js";

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

@@ -3,7 +3,11 @@ import { SpaceProps } from "styled-system";
 import { IconType } from "../icon";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipPositions } from "../tooltip/tooltip.config";
-export type ButtonTypes = "primary" | "secondary" | "tertiary" | "darkBackground" | "gradient-grey" | "gradient-white";
+/**
+ * @deprecated Use "primary", "secondary", "tertiary" or "gradient" instead.
+ */
+export type DeprecatedButtonTypes = "darkBackground" | "gradient-grey" | "gradient-white";
+export type ButtonTypes = "primary" | "secondary" | "tertiary" | DeprecatedButtonTypes;
 export type SizeOptions = "small" | "medium" | "large";
 export type ButtonIconPosition = "before" | "after";
 export interface ButtonProps extends SpaceProps, TagProps {
@@ -16,7 +20,9 @@ export interface ButtonProps extends SpaceProps, TagProps {
     "aria-labelledby"?: string;
     /** Identifies the element(s) offering additional information about the button the user might require. */
     "aria-describedby"?: string;
-    /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" */
+    /**
+     * @deprecated Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground"
+     * */
     buttonType?: ButtonTypes;
     /** The text the button displays */
     children?: React.ReactNode;
@@ -24,11 +30,15 @@ export interface ButtonProps extends SpaceProps, TagProps {
     name?: string;
     /** Apply disabled state to the button */
     disabled?: boolean;
-    /** Apply destructive style to the button */
+    /**
+     * @deprecated Apply destructive style to the button
+     * */
     destructive?: boolean;
     /** Apply fullWidth style to the button */
     fullWidth?: boolean;
-    /** Used to transform button into anchor */
+    /**
+     * @deprecated Used to transform button into anchor
+     * */
     href?: string;
     /** Defines an Icon position related to the children: "before" | "after" */
     iconPosition?: ButtonIconPosition;
@@ -40,7 +50,9 @@ export interface ButtonProps extends SpaceProps, TagProps {
     iconType?: IconType;
     /** id attribute */
     id?: string;
-    /** Whether to use the white-on-dark colour variant */
+    /**
+     * @deprecated Whether to use the white-on-dark colour variant
+     * */
     isWhite?: boolean;
     /** If provided, the text inside a button will not wrap */
     noWrap?: boolean;
@@ -56,13 +68,19 @@ export interface ButtonProps extends SpaceProps, TagProps {
     onClick?: (ev: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
     /** Assigns a size to the button: "small" | "medium" | "large" */
     size?: SizeOptions;
-    /** Second text child, renders under main text, only when size is "large" */
+    /**
+     * @deprecated Second text child, renders under main text, only when size is "large"
+     * */
     subtext?: string;
     /** HTML button type property */
     type?: string;
-    /** HTML target attribute */
+    /**
+     * @deprecated HTML target attribute
+     * */
     target?: string;
-    /** HTML rel attribute */
+    /**
+     * @deprecated HTML rel attribute
+     * */
     rel?: string;
     /**
      * @private
@@ -72,5 +90,8 @@ export interface ButtonProps extends SpaceProps, TagProps {
      */
     className?: string;
 }
+/**
+ * @deprecated This version of Button has been deprecated. See the Carbon documentation for migration details.
+ */
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export default Button;

package/esm/components/icon/icon.style.js

@@ -1 +1 @@
-import o,{css as e}from"styled-components";import{margin as t}from"styled-system";import i from"../../__internal__/utils/logger/index.js";import n from"../../style/themes/apply-base-theme.js";import r from"../../style/utils/add-focus-styling.js";import s from"../../style/utils/color.js";import{getWindow as l,getNavigator as a}from"../../__internal__/dom/globals.js";import c,{isSafari as m}from"../../__internal__/utils/helpers/browser-type-check/index.js";import d from"./icon-config.js";import f from"./icon-unicodes.js";const g=o.span.attrs(n).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-74150e41-0"})(["",""],(({theme:o,color:n,bg:g,isInteractive:p,bgSize:h,bgShape:b,type:u,fontSize:y,disabled:_,hasTooltip:z})=>{let S="var(--colorsYin090)",j="transparent";const v=l(),k=a(),x=function(o,e){const t={small:1,medium:2,large:3,"extra-large":4};return o&&e?t[e]<t[o]?(i.warn(`[WARNING - Icon] The "${e}" \`bgSize\` is smaller than "${o}" \`fontSize\`, the \`bgSize\` has been auto adjusted to a larger size.`),d.backgroundSize[o]):d.backgroundSize[e]:e?d.backgroundSize[e]:void 0}(y,h);if(_)S="var(--colorsYin030)";else if(n){const{color:e}=s({color:n,theme:o});S=e}if(g){const{backgroundColor:e}=s({bg:g,theme:o});j=e}return e(["position:relative;color:",";background-color:",";vertical-align:middle;align-items:center;display:inline-flex;justify-content:center;height:",";width:",";",";",' &::before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:CarbonIcons;content:"','";font-style:normal;font-weight:normal;vertical-align:middle;'," "," "," display:block;}"," ",""],S,j,x,x,b?`border-radius: ${d.backgroundShape[b]}`:"",p&&e(["&:not(:focus):hover{filter:brightness(0.9);}"]),f[u],y&&e(["font-size:",";line-height:",";"],d.iconSize[y],d.iconSize[y]),v&&"services"===u&&c(v)&&e(["margin-top:",";"],"small"===y?"-7px":"-8px"),k&&v&&"services"===u&&m(k)&&!c(v)&&e(["margin-top:-6px;"]),z&&`\n        :focus {\n          ${r()}\n        }\n      `,t)}));export{g as default};
+import o,{css as e}from"styled-components";import{margin as t}from"styled-system";import i from"../../__internal__/utils/logger/index.js";import n from"../../style/themes/apply-base-theme.js";import r from"../../style/utils/add-focus-styling.js";import s from"../../style/utils/color.js";import{getWindow as l,getNavigator as a}from"../../__internal__/dom/globals.js";import c,{isSafari as m}from"../../__internal__/utils/helpers/browser-type-check/index.js";import d from"./icon-config.js";import f from"./icon-unicodes.js";import{StyledButton as g}from"../button/__next__/button.style.js";const p=o.span.attrs(n).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-d8f39d88-0"})([""," "," &{color:currentColor;}"],(({theme:o,color:n,bg:g,isInteractive:p,bgSize:u,bgShape:b,type:h,fontSize:y,disabled:_,hasTooltip:z})=>{let S="var(--colorsYin090)",j="transparent";const v=l(),x=a(),k=function(o,e){const t={small:1,medium:2,large:3,"extra-large":4};return o&&e?t[e]<t[o]?(i.warn(`[WARNING - Icon] The "${e}" \`bgSize\` is smaller than "${o}" \`fontSize\`, the \`bgSize\` has been auto adjusted to a larger size.`),d.backgroundSize[o]):d.backgroundSize[e]:e?d.backgroundSize[e]:void 0}(y,u);if(_)S="var(--colorsYin030)";else if(n){const{color:e}=s({color:n,theme:o});S=e}if(g){const{backgroundColor:e}=s({bg:g,theme:o});j=e}return e(["position:relative;color:",";background-color:",";vertical-align:middle;align-items:center;display:inline-flex;justify-content:center;height:",";width:",";",";",' &::before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:CarbonIcons;content:"','";font-style:normal;font-weight:normal;vertical-align:middle;'," "," "," display:block;}"," ",""],S,j,k,k,b?`border-radius: ${d.backgroundShape[b]}`:"",p&&e(["&:not(:focus):hover{filter:brightness(0.9);}"]),f[h],y&&e(["font-size:",";line-height:",";"],d.iconSize[y],d.iconSize[y]),v&&"services"===h&&c(v)&&e(["margin-top:",";"],"small"===y?"-7px":"-8px"),x&&v&&"services"===h&&m(x)&&!c(v)&&e(["margin-top:-6px;"]),z&&`\n        :focus {\n          ${r()}\n        }\n      `,t)}),g);export{p as default};

package/esm/components/loader/__next__/loader.style.js

@@ -1 +1 @@
-import e,{css as a}from"styled-components";import{margin as t}from"styled-system";import i from"../../../style/themes/apply-base-theme.js";import{Typography as r}from"../../typography/typography.component.js";import"react/jsx-runtime";import"react";import n from"../../button/button.style.js";const o={"extra-small":20,small:32,medium:64,large:80},s={"extra-small":2.7,small:2.7,medium:2.7,large:2.7},l={small:"4px",medium:"8px",large:"16px"},d={"extra-small":"8px",small:"8px",medium:"12px",large:"16px"},m=(e,a)=>{const t=a?"rgba(255, 255, 255, 0.08)":"rgba(0, 0, 0, 0.08)";return"ai"===e?{outerBarBackground:t,innerBarBackground:a?"linear-gradient(90deg, var(--mode-color-ai-alt-stop-1, #00D639) 0%, var(--mode-color-ai-alt-stop-2, #00D6DE) 40%, var(--mode-color-ai-alt-stop-3, #9D60FF) 90%)":"linear-gradient(90deg, var(--mode-color-ai-stop-1, #13A038) 0%, var(--mode-color-ai-stop-2, #149197) 40%, var(--mode-color-ai-stop-3, #A87CFB) 90%)"}:{outerBarBackground:t,innerBarBackground:a?"#FFFFFF":"#000000"}},c=a(["display:flex;justify-content:center;text-align:center;"]),p=e.div.withConfig({displayName:"loader.style__StyledLoaderPlaceholder",componentId:"sc-aaaf19f2-0"})(["display:inline-block;min-width:var(--sizing800);"]),f=e.div.attrs(i).withConfig({displayName:"loader.style__StyledLoader",componentId:"sc-aaaf19f2-1"})([""," text-align:center;white-space:nowrap;"],t),g=e.div.withConfig({displayName:"loader.style__OuterBar",componentId:"sc-aaaf19f2-2"})(["",""],(({size:e,variant:t,inverse:i})=>a(["border-radius:var(--borderRadius400);height:",";width:100%;background:",";overflow:hidden;position:relative;"],l[e],m(t,i).outerBarBackground))),h=e.div.withConfig({displayName:"loader.style__InnerBar",componentId:"sc-aaaf19f2-3"})(["",""],(({size:e,variant:t,inverse:i,animationTime:r,hasMotion:n})=>a(["@keyframes innerBarAnimationOne{0%{left:0%;animation-timing-function:linear;}30%{left:10px;animation-timing-function:cubic-bezier(0.5,0.6,0.4,1);}100%{left:calc(100% - 15px);}}@keyframes innerBarAnimationTwo{0%{width:15px;animation-timing-function:cubic-bezier(0.7,0,0.8,1);}50%{width:35%;}100%{width:15px;}}position:absolute;background:",";width:15px;height:",";border-radius:var(--borderRadius400);animation-name:innerBarAnimationOne,innerBarAnimationTwo;"," animation-iteration-count:",";"],m(t,i).innerBarBackground,l[e],n&&`animation-duration: ${r}s, ${r}s;`,n?"infinite, infinite":"none, none"))),u=e.svg.withConfig({displayName:"loader.style__StyledRingCircleSvg",componentId:"sc-aaaf19f2-4"})([""," ",' & circle[data-role="inner-arc"]{stroke:currentColor;}'],(({inverse:e,size:t,hasMotion:i,isTracked:r,isError:n,isSuccess:l,animationTime:d})=>{const m=`${o[t]}px`,c=s[t];return a(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",';cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);@keyframes trackedAnimation{from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}}@keyframes untrackedAnimation{0%{transform:rotate(-90deg);stroke-dashoffset:95;}50%{transform:rotate(90deg);stroke-dashoffset:80;}100%{transform:rotate(270deg);stroke-dashoffset:95;}}animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"],m,m,c,e?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.08)",c,(({inverse:e,isSuccess:a,isError:t})=>t?"#DB004E;":a?"#00811F;":e?"#FFF;":"#000000")({inverse:e,isSuccess:l,isError:n}),r?"trackedAnimation":"untrackedAnimation",i&&`animation-duration: ${d}s;`,i?"infinite":"none")}),n),x="40px",y=e.div.withConfig({displayName:"loader.style__StyledStars",componentId:"sc-aaaf19f2-5"})(["position:relative;width:",";height:",";"],x,x),k={standalone:{small:"4px",medium:"8px",large:"12px"},ring:{"extra-small":"4px",small:"8px",medium:"8px",large:"12px"}},w=e.div.withConfig({displayName:"loader.style__StyledStarLoaderWrapper",componentId:"sc-aaaf19f2-6"})(["position:relative;display:flex;align-items:center;justify-content:center;"]),v=e(r).withConfig({displayName:"loader.style__StyledLoaderLabel",componentId:"sc-aaaf19f2-7"})([""," line-height:150%;color:",";"," &{color:currentColor;}",""],c,(({inverse:e})=>e?"rgba(255, 255, 255, 0.55)":"rgba(0, 0, 0, 0.65)"),n,(({size:e="medium",loaderType:t,loaderVariant:i})=>"star"===t?a(["font-size:16px;font-weight:400;margin-left:12px;width:min-content;"]):"standalone"===t?a(["font-size:",";font-weight:500;width:100%;margin-top:",";"],"large"===e?"16px":"14px",k[t][e]):a(["font-size:",";font-weight:500;width:",";",";"],"large"===e?"16px":"extra-small"===e?"13px":"14px","inline"===i?"auto":"100%","inline"===i?`margin-left: ${d[e]}`:`margin-top: ${k[t][e]}`))),b=e.div.withConfig({displayName:"loader.style__StyledRingLoaderWrapper",componentId:"sc-aaaf19f2-8"})(["",""],(({loaderVariant:e})=>a(["display:flex;flex-direction:",";align-items:center;justify-content:center;width:",";"],"inline"===e?"row":"column","inline"===e?"auto":"100%"))),B=e.span.withConfig({displayName:"loader.style__StyledLabel",componentId:"sc-aaaf19f2-9"})(["",";"],(({inverse:e})=>a(["color:",";"," &{color:currentColor;}"],e?"rgba(255, 255, 255, 0.90)":"rgba(0, 0, 0, 0.90)",n)));export{h as InnerBar,g as OuterBar,B as StyledLabel,f as StyledLoader,v as StyledLoaderLabel,p as StyledLoaderPlaceholder,u as StyledRingCircleSvg,b as StyledRingLoaderWrapper,w as StyledStarLoaderWrapper,y as StyledStars};
+import e,{css as t}from"styled-components";import{margin as i}from"styled-system";import r from"../../../style/themes/apply-base-theme.js";import{Typography as a}from"../../typography/typography.component.js";import"react/jsx-runtime";import"react";import n from"../../button/button.style.js";import{StyledButton as o}from"../../button/__next__/button.style.js";const s={"extra-small":20,small:32,medium:64,large:80},l={"extra-small":2.7,small:2.7,medium:2.7,large:2.7},d={small:"4px",medium:"8px",large:"16px"},m={"extra-small":"8px",small:"8px",medium:"12px",large:"16px"},c=(e,t)=>{const i=t?"rgba(255, 255, 255, 0.08)":"rgba(0, 0, 0, 0.08)";return"ai"===e?{outerBarBackground:i,innerBarBackground:t?"linear-gradient(90deg, var(--mode-color-ai-alt-stop-1, #00D639) 0%, var(--mode-color-ai-alt-stop-2, #00D6DE) 40%, var(--mode-color-ai-alt-stop-3, #9D60FF) 90%)":"linear-gradient(90deg, var(--mode-color-ai-stop-1, #13A038) 0%, var(--mode-color-ai-stop-2, #149197) 40%, var(--mode-color-ai-stop-3, #A87CFB) 90%)"}:{outerBarBackground:i,innerBarBackground:t?"#FFFFFF":"#000000"}},p=t(["display:flex;justify-content:center;text-align:center;"]),g=e.div.withConfig({displayName:"loader.style__StyledLoaderPlaceholder",componentId:"sc-74569bc2-0"})(["display:inline-block;min-width:var(--sizing800);"]),f=e.div.attrs(r).withConfig({displayName:"loader.style__StyledLoader",componentId:"sc-74569bc2-1"})([""," text-align:center;white-space:nowrap;"],i),u=e.div.withConfig({displayName:"loader.style__OuterBar",componentId:"sc-74569bc2-2"})(["",""],(({size:e,variant:i,inverse:r})=>t(["border-radius:var(--borderRadius400);height:",";width:100%;background:",";overflow:hidden;position:relative;"],d[e],c(i,r).outerBarBackground))),x=e.div.withConfig({displayName:"loader.style__InnerBar",componentId:"sc-74569bc2-3"})(["",""],(({size:e,variant:i,inverse:r,animationTime:a,hasMotion:n})=>t(["@keyframes innerBarAnimationOne{0%{left:0%;animation-timing-function:linear;}30%{left:10px;animation-timing-function:cubic-bezier(0.5,0.6,0.4,1);}100%{left:calc(100% - 15px);}}@keyframes innerBarAnimationTwo{0%{width:15px;animation-timing-function:cubic-bezier(0.7,0,0.8,1);}50%{width:35%;}100%{width:15px;}}position:absolute;background:",";width:15px;height:",";border-radius:var(--borderRadius400);animation-name:innerBarAnimationOne,innerBarAnimationTwo;"," animation-iteration-count:",";"],c(i,r).innerBarBackground,d[e],n&&`animation-duration: ${a}s, ${a}s;`,n?"infinite, infinite":"none, none"))),h=e.svg.withConfig({displayName:"loader.style__StyledRingCircleSvg",componentId:"sc-74569bc2-4"})([""," ",' & circle[data-role="inner-arc"],',' & circle[data-role="inner-arc"]{stroke:currentColor;}'],(({inverse:e,size:i,hasMotion:r,isTracked:a,isError:n,isSuccess:o,animationTime:d})=>{const m=`${s[i]}px`,c=l[i];return t(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",';cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);@keyframes trackedAnimation{from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}}@keyframes untrackedAnimation{0%{transform:rotate(-90deg);stroke-dashoffset:95;}50%{transform:rotate(90deg);stroke-dashoffset:80;}100%{transform:rotate(270deg);stroke-dashoffset:95;}}animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"],m,m,c,e?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.08)",c,(({inverse:e,isSuccess:t,isError:i})=>i?"#DB004E;":t?"#00811F;":e?"#FFF;":"#000000")({inverse:e,isSuccess:o,isError:n}),a?"trackedAnimation":"untrackedAnimation",r&&`animation-duration: ${d}s;`,r?"infinite":"none")}),o,n),y="40px",b=e.div.withConfig({displayName:"loader.style__StyledStars",componentId:"sc-74569bc2-5"})(["position:relative;width:",";height:",";"],y,y),k={standalone:{small:"4px",medium:"8px",large:"12px"},ring:{"extra-small":"4px",small:"8px",medium:"8px",large:"12px"}},w=e.div.withConfig({displayName:"loader.style__StyledStarLoaderWrapper",componentId:"sc-74569bc2-6"})(["position:relative;display:flex;align-items:center;justify-content:center;"]),v=e(a).withConfig({displayName:"loader.style__StyledLoaderLabel",componentId:"sc-74569bc2-7"})([""," line-height:150%;color:",";"," &,"," &{color:currentColor;}",""],p,(({inverse:e})=>e?"rgba(255, 255, 255, 0.55)":"rgba(0, 0, 0, 0.65)"),o,n,(({size:e="medium",loaderType:i,loaderVariant:r})=>"star"===i?t(["font-size:16px;font-weight:400;margin-left:12px;width:min-content;"]):"standalone"===i?t(["font-size:",";font-weight:500;width:100%;margin-top:",";"],"large"===e?"16px":"14px",k[i][e]):t(["font-size:",";font-weight:500;width:",";",";"],"large"===e?"16px":"extra-small"===e?"13px":"14px","inline"===r?"auto":"100%","inline"===r?`margin-left: ${m[e]}`:`margin-top: ${k[i][e]}`))),_=e.div.withConfig({displayName:"loader.style__StyledRingLoaderWrapper",componentId:"sc-74569bc2-8"})(["",""],(({loaderVariant:e})=>t(["display:flex;flex-direction:",";align-items:center;justify-content:center;width:",";"],"inline"===e?"row":"column","inline"===e?"auto":"100%"))),B=e.span.withConfig({displayName:"loader.style__StyledLabel",componentId:"sc-74569bc2-9"})(["",";"],(({inverse:e})=>t(["color:",";"," &,"," &{color:currentColor;}"],e?"rgba(255, 255, 255, 0.90)":"rgba(0, 0, 0, 0.90)",o,n)));export{x as InnerBar,u as OuterBar,B as StyledLabel,f as StyledLoader,v as StyledLoaderLabel,g as StyledLoaderPlaceholder,h as StyledRingCircleSvg,_ as StyledRingLoaderWrapper,w as StyledStarLoaderWrapper,b as StyledStars};

package/lib/components/button/__next__/__internal__/utils/is-icon-only.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from "react";
+declare const isIconOnly: (children: ReactNode) => boolean;
+export default isIconOnly;

package/lib/components/button/__next__/__internal__/utils/is-icon-only.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("react-is");const t=i=>!!i&&e.Children.toArray(i).every((i=>e.isValidElement(i)?"Icon"===i.type.displayName||!!r.isFragment(i)&&t(i.props.children):"string"==typeof i&&!i.trim().length));exports.default=t;

package/lib/components/button/__next__/button.component.d.ts

@@ -0,0 +1,62 @@
+import React, { ReactNode } from "react";
+import { SpaceProps } from "styled-system";
+import { ButtonProps as LegacyButtonProps } from "../button.component";
+import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
+import { Size, Variant, VariantType } from "./button.config";
+export type ButtonHandle = {
+    focusButton: () => void;
+} | null;
+export interface ButtonProps extends Omit<LegacyButtonProps, "size" | "type" | "iconTooltipMessage" | "iconTooltipPosition">, SpaceProps, TagProps {
+    /** Identifies the element(s) offering additional information about the button that the user might require. */
+    "aria-describedby"?: string;
+    /**
+     * The aria-label attribute of the button.
+     */
+    "aria-label"?: string;
+    /** Identifies the element(s) labelling the button. */
+    "aria-labelledby"?: string;
+    /** The content that the button displays. */
+    children?: ReactNode;
+    /** Flag to indicate that the button is disabled. */
+    disabled?: boolean;
+    /** Flag to indicate that the button can be full-width. */
+    fullWidth?: boolean;
+    /** The ID of the button. */
+    id?: string;
+    /** Set the button to use a dark-mode appearance. */
+    inverse?: boolean;
+    /** The name of the button. */
+    name?: string;
+    /** Flag to indicate whether the button text can wrap over multiple lines. */
+    noWrap?: boolean;
+    /** Handler to fire when the button is blurred. */
+    onBlur?: (ev: React.FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** Handler to fire when the button is clicked. */
+    onClick?: (ev: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** Handler to fire when the button is focused. */
+    onFocus?: (ev: React.FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** Handler to fire when the button is activated via the Enter or Space keys. */
+    onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** The size of the button. */
+    size?: Size;
+    /** The HTML type that this button should use. */
+    type?: "button" | "reset" | "submit";
+    /** The variant of the button. */
+    variant?: Variant;
+    /** The variant type of the button. */
+    variantType?: VariantType;
+    /**
+     * @deprecated Please use `variantType` prop instead.
+     * */
+    buttonType?: LegacyButtonProps["buttonType"];
+    /**
+     * @deprecated Please use `variant="destructive"` instead.
+     * */
+    destructive?: LegacyButtonProps["destructive"];
+    /**
+     * @deprecated Please use `inverse` instead.
+     * */
+    isWhite?: LegacyButtonProps["isWhite"];
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<ButtonHandle>>;
+export default Button;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./button.style.js"),n=require("../../../__internal__/utils/helpers/tags/tags.js"),a=require("../../../hooks/useMediaQuery/useMediaQuery.js"),i=require("./__internal__/utils/is-icon-only.js"),o=require("../../icon/icon.component.js");function l(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function u(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){l(e,r,t[r])}))}return e}function c(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const s=r.forwardRef(((l,s)=>{var{"aria-describedby":d,"aria-label":y,"aria-labelledby":p,children:b,disabled:f=!1,fullWidth:v=!1,id:j,inverse:O,name:h,noWrap:g=!0,onClick:m,size:T="medium",variant:P="default",variantType:w="primary",buttonType:x,destructive:k,iconType:_,iconPosition:S="before",isWhite:W,href:$}=l,q=function(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(l,["aria-describedby","aria-label","aria-labelledby","children","disabled","fullWidth","id","inverse","name","noWrap","onClick","size","variant","variantType","buttonType","destructive","iconType","iconPosition","isWhite","href"]);const B=r.useRef(null),C=void 0!==b&&!1!==b,D=!!_&&!C||i.default(b);r.useImperativeHandle(s,(()=>({focusButton:()=>{var e;null===(e=B.current)||void 0===e||e.focus()}})),[]);const M=a.default("screen and (prefers-reduced-motion: no-preference)"),{variant:z,variantType:E}=(({buttonType:e,destructive:r,variant:t,variantType:n})=>{if(!e&&!r)return{variant:t,variantType:n};if(r)return{variant:"destructive",variantType:"primary"===(null!=e?e:n)?"primary":"secondary"};switch(e){case"primary":return{variant:"default",variantType:"primary"};case"tertiary":return{variant:"default",variantType:"tertiary"};case"darkBackground":default:return{variant:"default",variantType:"secondary"};case"gradient-grey":case"gradient-white":return{variant:"gradient",variantType:"secondary"}}})({buttonType:x,destructive:k,variant:P,variantType:w});return e.jsx(t.StyledButton,c(u({$allowMotion:M,"aria-describedby":d,"aria-label":y,"aria-labelledby":p,disabled:f,$fullWidth:v,$inverse:O||"darkBackground"===x||W,id:j,name:h,$noWrap:g,onClick:$?void 0:e=>{var r;null===(r=B.current)||void 0===r||r.focus({preventScroll:!0}),null==m||m(e)},ref:B,$size:T,$variant:z,$variantType:E,as:!f&&$?"a":"button",href:$,$iconOnly:D},n.default("button",q),q),{children:e.jsx(t.StyledContentContainer,{"data-role":"button-child-container",children:(()=>{if(!_)return b;const r={"aria-hidden":!0,bg:"transparent"};return C?"before"===S?e.jsxs(e.Fragment,{children:[e.jsx(o.default,c(u({type:_},r),{"data-role":"button-icon-before"})),b]}):e.jsxs(e.Fragment,{children:[b,e.jsx(o.default,c(u({type:_},r),{"data-role":"button-icon-after"}))]}):e.jsx(o.default,c(u({type:_},r),{"data-role":"button-icon-only"}))})()})}))}));exports.Button=s,exports.default=s;

package/lib/components/button/__next__/button.config.d.ts

@@ -0,0 +1,34 @@
+export type Size = "xs" | "small" | "medium" | "large";
+export type Variant = "default" | "destructive" | "gradient";
+export type VariantType = "primary" | "secondary" | "tertiary" | "subtle";
+export type ConfigEntry = Record<"active" | "default" | "disabled" | "hover", string>;
+export type ColorConfig = {
+    [key in Variant]: {
+        [key in VariantType]?: {
+            background: ConfigEntry;
+            border: ConfigEntry;
+            label: ConfigEntry;
+        };
+    };
+};
+export type InverseColorConfig = {
+    [key in VariantType]: {
+        background: ConfigEntry;
+        border: ConfigEntry;
+        label: ConfigEntry;
+    };
+};
+export type PropConfig = {
+    [key in Size]: {
+        borderRadius: string;
+        font: string;
+        height: string;
+        iconOnlyWidth: string;
+        paddingVertical: string;
+        paddingHorizontal: string;
+    };
+};
+export declare const propsForSize: PropConfig;
+export declare const inverseColourSettings: InverseColorConfig;
+export declare const colourSettings: ColorConfig;
+export declare const gradientAnimation: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/button/__next__/button.config.js

@@ -0,0 +1 @@
+"use strict";const a=require("styled-components").css(["@keyframes gradient-loop{0%{background-position:0% 0;}100%{background-position:-200% 0;}}"]);exports.colourSettings={default:{primary:{background:{active:"var(--button-typical-primary-bg-active)",default:"var(--button-typical-primary-bg-default)",disabled:"var(--button-typical-primary-bg-disabled)",hover:"var(--button-typical-primary-bg-hover)"},border:{active:"transparent",default:"transparent",disabled:"transparent",hover:"transparent"},label:{active:"var(--button-typical-primary-label-active)",default:"var(--button-typical-primary-label-default)",disabled:"var(--button-typical-primary-label-disabled)",hover:"var(--button-typical-primary-label-hover)"}},secondary:{background:{active:"var(--button-typical-secondary-bg-active)",default:"var(--button-typical-secondary-bg-default)",disabled:"var(--button-typical-secondary-bg-disabled)",hover:"var(--button-typical-secondary-bg-hover)"},border:{active:"var(--button-typical-secondary-border-active)",default:"var(--button-typical-secondary-border-default)",disabled:"var(--button-typical-secondary-border-disabled)",hover:"var(--button-typical-secondary-border-hover)"},label:{active:"var(--button-typical-secondary-label-active)",default:"var(--button-typical-secondary-label-default)",disabled:"var(--button-typical-secondary-label-disabled)",hover:"var(--button-typical-secondary-label-hover)"}},tertiary:{background:{active:"var(--button-typical-tertiary-bg-active)",default:"var(--button-typical-tertiary-bg-default)",disabled:"var(--button-typical-tertiary-bg-disabled)",hover:"var(--button-typical-tertiary-bg-hover)"},border:{active:"var(--button-typical-tertiary-border-active)",default:"var(--button-typical-tertiary-border-default)",disabled:"var(--button-typical-tertiary-border-disabled)",hover:"var(--button-typical-tertiary-border-hover)"},label:{active:"var(--button-typical-tertiary-label-active)",default:"var(--button-typical-tertiary-label-default)",disabled:"var(--button-typical-tertiary-label-disabled)",hover:"var(--button-typical-tertiary-label-hover)"}},subtle:{background:{active:"var(--button-typical-subtle-bg-active)",default:"transparent",disabled:"transparent",hover:"var(--button-typical-subtle-bg-hover)"},border:{active:"transparent",default:"transparent",disabled:"transparent",hover:"transparent"},label:{active:"var(--button-typical-subtle-label-active)",default:"var(--button-typical-subtle-label-default)",disabled:"var(--button-typical-subtle-label-disabled)",hover:"var(--button-typical-subtle-label-hover)"}}},destructive:{primary:{background:{active:"",default:"var(--button-destructive-primary-bg-default)",disabled:"var(--button-destructive-primary-bg-disabled)",hover:"var(--button-destructive-primary-bg-hover)"},label:{active:"",default:"var(--button-destructive-primary-label-default)",disabled:"var(--button-destructive-primary-label-disabled)",hover:"var(--button-destructive-primary-label-hover)"},border:{active:"",default:"transparent",disabled:"transparent",hover:"transparent"}},secondary:{background:{active:"",default:"transparent",disabled:"transparent",hover:"var(--button-destructive-secondary-bg-hover)"},label:{active:"",default:"var(--button-destructive-secondary-label-default)",disabled:"var(--button-destructive-secondary-label-disabled)",hover:"var(--button-destructive-secondary-label-hover)"},border:{active:"",default:"var(--button-destructive-secondary-border-default)",disabled:"var(--button-destructive-secondary-border-disabled)",hover:"var(--button-destructive-secondary-border-hover)"}}},gradient:{secondary:{background:{active:"var(--button-ai-bg-active, linear-gradient(90deg, var(--mode-color-action-ai-active-stop-1) 0%, var(--mode-color-action-ai-active-stop-2) 40%, var(--mode-color-action-ai-active-stop-3) 90%))",default:"transparent",disabled:"transparent",hover:"var(--button-ai-bg-hover, linear-gradient(90deg, var(--mode-color-action-ai-hover-stop-1) 0%, var(--mode-color-action-ai-hover-stop-2) 40%, var(--mode-color-action-ai-hover-stop-3) 90%))"},border:{active:"var(--button-ai-border-active)",default:"var(--button-ai-border-default)",disabled:"var(--button-ai-border-disabled)",hover:"var(--button-ai-border-hover)"},label:{active:"var(--button-ai-label-active)",default:"var(--button-ai-label-default)",disabled:"var(--button-ai-label-disabled)",hover:"var(--button-ai-label-hover)"}}}},exports.gradientAnimation=a,exports.inverseColourSettings={primary:{background:{active:"var(--button-typical-primary-inverse-bg-active)",default:"var(--button-typical-primary-inverse-bg-default)",disabled:"var(--button-typical-primary-inverse-bg-disabled)",hover:"var(--button-typical-primary-inverse-bg-hover)"},border:{active:"transparent",default:"transparent",disabled:"transparent",hover:"transparent"},label:{active:"var(--button-typical-primary-inverse-label-active)",default:"var(--button-typical-primary-inverse-label-default)",disabled:"var(--button-typical-primary-inverse-label-disabled)",hover:"var(--button-typical-primary-inverse-label-hover)"}},secondary:{background:{active:"var(--button-typical-secondary-inverse-bg-active)",default:"var(--button-typical-secondary-inverse-bg-default)",disabled:"transparent",hover:"var(--button-typical-secondary-inverse-bg-hover)"},border:{active:"var(--button-typical-secondary-inverse-border-active)",default:"var(--button-typical-secondary-inverse-border-default)",disabled:"var(--button-typical-secondary-inverse-border-disabled)",hover:"var(--button-typical-secondary-inverse-border-hover)"},label:{active:"var(--button-typical-secondary-inverse-label-active)",default:"var(--button-typical-secondary-inverse-label-default)",disabled:"var(--button-typical-secondary-inverse-label-disabled)",hover:"var(--button-typical-secondary-inverse-label-hover)"}},tertiary:{background:{active:"var(--button-typical-tertiary-inverse-bg-active)",default:"var(--button-typical-tertiary-inverse-bg-default)",disabled:"transparent",hover:"var(--button-typical-tertiary-inverse-bg-hover)"},border:{active:"var(--button-typical-tertiary-inverse-border-active)",default:"var(--button-typical-tertiary-inverse-border-default)",disabled:"var(--button-typical-tertiary-inverse-border-disabled)",hover:"var(--button-typical-tertiary-inverse-border-hover)"},label:{active:"var(--button-typical-tertiary-inverse-label-active)",default:"var(--button-typical-tertiary-inverse-label-default)",disabled:"var(--button-typical-tertiary-inverse-label-disabled)",hover:"var(--button-typical-tertiary-inverse-label-hover)"}},subtle:{background:{active:"var(--button-typical-subtle-inverse-bg-active)",default:"transparent",disabled:"transparent",hover:"var(--button-typical-subtle-inverse-bg-hover)"},border:{active:"transparent",default:"transparent",disabled:"transparent",hover:"transparent"},label:{active:"var(--button-typical-subtle-inverse-label-active)",default:"var(--button-typical-subtle-inverse-label-default)",disabled:"var(--button-typical-subtle-inverse-label-disabled)",hover:"var(--button-typical-subtle-inverse-label-hover)"}}},exports.propsForSize={xs:{borderRadius:"var(--global-radius-action-l)",font:"var(--global-font-static-comp-medium-xs)",height:"var(--global-size-xs)",iconOnlyWidth:"var(--global-size-xs)",paddingVertical:"var(--global-space-none)",paddingHorizontal:"var(--global-space-comp-s)"},small:{borderRadius:"var(--global-radius-action-l)",font:"var(--global-font-static-comp-medium-s)",height:"var(--global-size-s)",iconOnlyWidth:"var(--global-size-s)",paddingVertical:"var(--global-space-comp-2-xs)",paddingHorizontal:"var(--global-space-comp-m)"},medium:{borderRadius:"var(--global-radius-action-xl)",font:"var(--global-font-static-comp-medium-m)",height:"var(--global-size-m)",iconOnlyWidth:"var(--global-size-m)",paddingVertical:"6px",paddingHorizontal:"var(--global-space-comp-l)"},large:{borderRadius:"var(--global-radius-action-2-xl)",font:"var(--global-font-static-comp-medium-l)",height:"var(--global-size-l)",iconOnlyWidth:"var(--global-size-l)",paddingVertical:"6px",paddingHorizontal:"var(--global-space-comp-l)"}};

package/lib/components/button/__next__/button.style.d.ts

@@ -0,0 +1,16 @@
+import { SpaceProps } from "styled-system";
+import { Size, Variant, VariantType } from "./button.config";
+type StyledButtonProps = SpaceProps & {
+    $allowMotion?: boolean;
+    $inverse?: boolean;
+    $fullWidth?: boolean;
+    $noWrap?: boolean;
+    $iconOnly?: boolean;
+};
+export declare const StyledContentContainer: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledButton: import("styled-components").StyledComponent<"button", any, Omit<StyledButtonProps, "size" | "variantType" | "variant"> & {
+    $size: Size;
+    $variant: Variant;
+    $variantType: VariantType;
+}, never>;
+export default StyledButton;

package/lib/components/button/__next__/button.style.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("styled-components"),e=require("styled-system"),r=require("../../../style/utils/add-focus-styling.js"),i=require("./button.config.js");function n(o){return o&&o.__esModule?o:{default:o}}var t=n(o);const a=t.default.span.withConfig({displayName:"button.style__StyledContentContainer",componentId:"sc-c07486b9-0"})(["display:flex;gap:var(--global-space-comp-s);align-items:center;justify-content:center;"]),d=t.default.button.withConfig({displayName:"button.style__StyledButton",componentId:"sc-c07486b9-1"})([""," align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;outline-offset:0;text-decoration:none;vertical-align:middle;cursor:pointer;"," "," &:focus{"," position:relative;z-index:1;}"],e.space,(({$allowMotion:e,disabled:r,$inverse:n,$size:t,$variant:a,$variantType:d,$iconOnly:l})=>n?(({disabled:e,size:r,variantType:n,iconOnly:t})=>{const{background:a,border:d,label:l}=i.inverseColourSettings[n],{borderRadius:s,font:c,height:u,paddingVertical:b,paddingHorizontal:v}=i.propsForSize[r];return o.css(["background-color:",";border:"," solid ",";border-radius:",";color:",";font:",";height:",";width:",";padding:"," ",";",""],a.default,"tertiary"===n?"1px":"2px",d.default,t?"var(--global-radius-action-circle)":s,l.default,c,u,t?u:"max-content",b,t?"":v,e?o.css(["background-color:",";border-color:",";color:",";cursor:not-allowed;"],a.disabled,d.disabled,l.disabled):o.css(["&:active{background-color:",";color:",";border-color:",";}&:hover{background-color:",";color:",";border-color:",";}"],a.active,l.active,d.active,a.hover,l.hover,d.hover))})({disabled:r,size:t,variantType:d,iconOnly:l}):"gradient"===a?o.css([""," ",""],i.gradientAnimation,(({allowMotion:e=!0,disabled:r,size:n,iconOnly:t})=>{const{background:a,border:d,label:l}=i.colourSettings.gradient.secondary||{},{borderRadius:s,font:c,height:u,paddingVertical:b,paddingHorizontal:v}=i.propsForSize[n];return o.css(["position:relative;z-index:0;border:none;border-radius:",";background:white;color:var(--button-ai-label-default);font:",";height:",";width:",";padding:"," ",';overflow:hidden;&::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;z-index:-1;background:var(--button-ai-border-default);background-position:0% 0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}&:hover{background:linear-gradient( 90deg,var(--mode-color-action-ai-hover-stop-1) 0%,var(--mode-color-action-ai-hover-stop-2) 40%,var(--mode-color-action-ai-hover-stop-3) 90% );}&:hover::before{',"}"," ",""],t?"var(--global-radius-action-circle)":s,c,u,t?u:"max-content",b,t?"":v,e&&o.css(["background-size:300% 100%;animation:gradient-loop 1000ms linear infinite;"]),r&&o.css(["opacity:0.6;pointer-events:none;cursor:not-allowed;&::before{animation:none;background:none;-webkit-mask:none;mask:none;border:2px solid var(--button-ai-border-disabled);padding:0;}color:var(--button-ai-label-disabled);"]),!r&&o.css(["&:active{background:",";color:",";border-color:",";}"],null==a?void 0:a.active,null==l?void 0:l.active,null==d?void 0:d.active))})({allowMotion:e,disabled:r,size:t,iconOnly:l})):(({disabled:e,size:r,variant:n,variantType:t,iconOnly:a})=>{const{background:d,border:l,label:s}=i.colourSettings[n][t]||{},{borderRadius:c,font:u,height:b,paddingVertical:v,paddingHorizontal:p}=i.propsForSize[r];return o.css(["background-color:",";border:"," solid ",";border-radius:",";color:",";font:",";height:",";width:",";padding:"," ",";",""],null==d?void 0:d.default,"tertiary"===t?"1px":"2px",null==l?void 0:l.default,a?"var(--global-radius-action-circle)":c,null==s?void 0:s.default,u,b,a?b:"max-content",v,a?"":p,e?o.css(["background-color:",";border-color:",";color:",";cursor:not-allowed;"],null==d?void 0:d.disabled,null==l?void 0:l.disabled,null==s?void 0:s.disabled):o.css(["&:active{background-color:",";color:",";border-color:",";}&:hover{background-color:",";color:",";border-color:",";}"],null==d?void 0:d.active,null==s?void 0:s.active,null==l?void 0:l.active,null==d?void 0:d.hover,null==s?void 0:s.hover,null==l?void 0:l.hover))})("xs"!==t||"primary"!==d&&"default"===a?"destructive"!==a||"tertiary"!==d&&"subtle"!==d?{disabled:r,size:t,variant:a,variantType:d,iconOnly:l}:{disabled:r,size:t,variant:a,variantType:"primary",iconOnly:l}:{disabled:r,size:"xs",variant:"default",variantType:"secondary",iconOnly:l})),(({$fullWidth:e,$size:r,$noWrap:n})=>o.css([""," ",""],e&&o.css(["width:100%;"]),n?"white-space: nowrap;":`\n        flex-flow: wrap;\n        min-height: ${i.propsForSize[r].height};\n        height: unset;\n      `)),r.default());exports.StyledButton=d,exports.StyledContentContainer=a,exports.default=d;

package/lib/components/button/__next__/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./button.component";
+export type { ButtonProps } from "./button.component";

package/lib/components/button/__next__/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./button.component.js");exports.default=e.Button;

package/lib/components/button/__next__/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../../esm/components/button/__next__/index.js",
+  "types": "./index.d.ts"
+}

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

@@ -3,7 +3,11 @@ import { SpaceProps } from "styled-system";
 import { IconType } from "../icon";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipPositions } from "../tooltip/tooltip.config";
-export type ButtonTypes = "primary" | "secondary" | "tertiary" | "darkBackground" | "gradient-grey" | "gradient-white";
+/**
+ * @deprecated Use "primary", "secondary", "tertiary" or "gradient" instead.
+ */
+export type DeprecatedButtonTypes = "darkBackground" | "gradient-grey" | "gradient-white";
+export type ButtonTypes = "primary" | "secondary" | "tertiary" | DeprecatedButtonTypes;
 export type SizeOptions = "small" | "medium" | "large";
 export type ButtonIconPosition = "before" | "after";
 export interface ButtonProps extends SpaceProps, TagProps {
@@ -16,7 +20,9 @@ export interface ButtonProps extends SpaceProps, TagProps {
     "aria-labelledby"?: string;
     /** Identifies the element(s) offering additional information about the button the user might require. */
     "aria-describedby"?: string;
-    /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" */
+    /**
+     * @deprecated Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground"
+     * */
     buttonType?: ButtonTypes;
     /** The text the button displays */
     children?: React.ReactNode;
@@ -24,11 +30,15 @@ export interface ButtonProps extends SpaceProps, TagProps {
     name?: string;
     /** Apply disabled state to the button */
     disabled?: boolean;
-    /** Apply destructive style to the button */
+    /**
+     * @deprecated Apply destructive style to the button
+     * */
     destructive?: boolean;
     /** Apply fullWidth style to the button */
     fullWidth?: boolean;
-    /** Used to transform button into anchor */
+    /**
+     * @deprecated Used to transform button into anchor
+     * */
     href?: string;
     /** Defines an Icon position related to the children: "before" | "after" */
     iconPosition?: ButtonIconPosition;
@@ -40,7 +50,9 @@ export interface ButtonProps extends SpaceProps, TagProps {
     iconType?: IconType;
     /** id attribute */
     id?: string;
-    /** Whether to use the white-on-dark colour variant */
+    /**
+     * @deprecated Whether to use the white-on-dark colour variant
+     * */
     isWhite?: boolean;
     /** If provided, the text inside a button will not wrap */
     noWrap?: boolean;
@@ -56,13 +68,19 @@ export interface ButtonProps extends SpaceProps, TagProps {
     onClick?: (ev: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
     /** Assigns a size to the button: "small" | "medium" | "large" */
     size?: SizeOptions;
-    /** Second text child, renders under main text, only when size is "large" */
+    /**
+     * @deprecated Second text child, renders under main text, only when size is "large"
+     * */
     subtext?: string;
     /** HTML button type property */
     type?: string;
-    /** HTML target attribute */
+    /**
+     * @deprecated HTML target attribute
+     * */
     target?: string;
-    /** HTML rel attribute */
+    /**
+     * @deprecated HTML rel attribute
+     * */
     rel?: string;
     /**
      * @private
@@ -72,5 +90,8 @@ export interface ButtonProps extends SpaceProps, TagProps {
      */
     className?: string;
 }
+/**
+ * @deprecated This version of Button has been deprecated. See the Carbon documentation for migration details.
+ */
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export default Button;

package/lib/components/icon/icon.style.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),i=require("../../__internal__/utils/logger/index.js"),o=require("../../style/themes/apply-base-theme.js"),s=require("../../style/utils/add-focus-styling.js"),r=require("../../style/utils/color.js"),n=require("../../__internal__/dom/globals.js"),l=require("../../__internal__/utils/helpers/browser-type-check/index.js"),a=require("./icon-config.js"),c=require("./icon-unicodes.js");function u(e){return e&&e.__esModule?e:{default:e}}const d=u(e).default.span.attrs(o.default).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-74150e41-0"})(["",""],(({theme:o,color:u,bg:d,isInteractive:f,bgSize:g,bgShape:m,type:h,fontSize:b,disabled:p,hasTooltip:y})=>{let _="var(--colorsYin090)",S="transparent";const v=n.getWindow(),z=n.getNavigator(),j=function(e,t){const o={small:1,medium:2,large:3,"extra-large":4};return e&&t?o[t]<o[e]?(i.default.warn(`[WARNING - Icon] The "${t}" \`bgSize\` is smaller than "${e}" \`fontSize\`, the \`bgSize\` has been auto adjusted to a larger size.`),a.default.backgroundSize[e]):a.default.backgroundSize[t]:t?a.default.backgroundSize[t]:void 0}(b,g);if(p)_="var(--colorsYin030)";else if(u){const{color:e}=r.default({color:u,theme:o});_=e}if(d){const{backgroundColor:e}=r.default({bg:d,theme:o});S=e}return e.css(["position:relative;color:",";background-color:",";vertical-align:middle;align-items:center;display:inline-flex;justify-content:center;height:",";width:",";",";",' &::before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:CarbonIcons;content:"','";font-style:normal;font-weight:normal;vertical-align:middle;'," "," "," display:block;}"," ",""],_,S,j,j,m?`border-radius: ${a.default.backgroundShape[m]}`:"",f&&e.css(["&:not(:focus):hover{filter:brightness(0.9);}"]),c.default[h],b&&e.css(["font-size:",";line-height:",";"],a.default.iconSize[b],a.default.iconSize[b]),v&&"services"===h&&l.default(v)&&e.css(["margin-top:",";"],"small"===b?"-7px":"-8px"),z&&v&&"services"===h&&l.isSafari(z)&&!l.default(v)&&e.css(["margin-top:-6px;"]),y&&`\n        :focus {\n          ${s.default()}\n        }\n      `,t.margin)}));exports.default=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),o=require("../../__internal__/utils/logger/index.js"),i=require("../../style/themes/apply-base-theme.js"),r=require("../../style/utils/add-focus-styling.js"),n=require("../../style/utils/color.js"),s=require("../../__internal__/dom/globals.js"),l=require("../../__internal__/utils/helpers/browser-type-check/index.js"),a=require("./icon-config.js"),u=require("./icon-unicodes.js"),c=require("../button/__next__/button.style.js");function d(e){return e&&e.__esModule?e:{default:e}}const f=d(e).default.span.attrs(i.default).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-d8f39d88-0"})([""," "," &{color:currentColor;}"],(({theme:i,color:c,bg:d,isInteractive:f,bgSize:g,bgShape:m,type:b,fontSize:h,disabled:p,hasTooltip:y})=>{let _="var(--colorsYin090)",S="transparent";const v=s.getWindow(),z=s.getNavigator(),j=function(e,t){const i={small:1,medium:2,large:3,"extra-large":4};return e&&t?i[t]<i[e]?(o.default.warn(`[WARNING - Icon] The "${t}" \`bgSize\` is smaller than "${e}" \`fontSize\`, the \`bgSize\` has been auto adjusted to a larger size.`),a.default.backgroundSize[e]):a.default.backgroundSize[t]:t?a.default.backgroundSize[t]:void 0}(h,g);if(p)_="var(--colorsYin030)";else if(c){const{color:e}=n.default({color:c,theme:i});_=e}if(d){const{backgroundColor:e}=n.default({bg:d,theme:i});S=e}return e.css(["position:relative;color:",";background-color:",";vertical-align:middle;align-items:center;display:inline-flex;justify-content:center;height:",";width:",";",";",' &::before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:CarbonIcons;content:"','";font-style:normal;font-weight:normal;vertical-align:middle;'," "," "," display:block;}"," ",""],_,S,j,j,m?`border-radius: ${a.default.backgroundShape[m]}`:"",f&&e.css(["&:not(:focus):hover{filter:brightness(0.9);}"]),u.default[b],h&&e.css(["font-size:",";line-height:",";"],a.default.iconSize[h],a.default.iconSize[h]),v&&"services"===b&&l.default(v)&&e.css(["margin-top:",";"],"small"===h?"-7px":"-8px"),z&&v&&"services"===b&&l.isSafari(z)&&!l.default(v)&&e.css(["margin-top:-6px;"]),y&&`\n        :focus {\n          ${r.default()}\n        }\n      `,t.margin)}),c.StyledButton);exports.default=f;

package/lib/components/loader/__next__/loader.style.js

@@ -1 +1 @@
-"use strict";var e=require("styled-components"),a=require("styled-system"),t=require("../../../style/themes/apply-base-theme.js"),r=require("../../typography/typography.component.js");require("react/jsx-runtime"),require("react");var i=require("../../button/button.style.js");function n(e){return e&&e.__esModule?e:{default:e}}var o=n(e);const s={"extra-small":20,small:32,medium:64,large:80},l={"extra-small":2.7,small:2.7,medium:2.7,large:2.7},d={small:"4px",medium:"8px",large:"16px"},c={"extra-small":"8px",small:"8px",medium:"12px",large:"16px"},p=(e,a)=>{const t=a?"rgba(255, 255, 255, 0.08)":"rgba(0, 0, 0, 0.08)";return"ai"===e?{outerBarBackground:t,innerBarBackground:a?"linear-gradient(90deg, var(--mode-color-ai-alt-stop-1, #00D639) 0%, var(--mode-color-ai-alt-stop-2, #00D6DE) 40%, var(--mode-color-ai-alt-stop-3, #9D60FF) 90%)":"linear-gradient(90deg, var(--mode-color-ai-stop-1, #13A038) 0%, var(--mode-color-ai-stop-2, #149197) 40%, var(--mode-color-ai-stop-3, #A87CFB) 90%)"}:{outerBarBackground:t,innerBarBackground:a?"#FFFFFF":"#000000"}},m=e.css(["display:flex;justify-content:center;text-align:center;"]),f=o.default.div.withConfig({displayName:"loader.style__StyledLoaderPlaceholder",componentId:"sc-aaaf19f2-0"})(["display:inline-block;min-width:var(--sizing800);"]),u=o.default.div.attrs(t.default).withConfig({displayName:"loader.style__StyledLoader",componentId:"sc-aaaf19f2-1"})([""," text-align:center;white-space:nowrap;"],a.margin),g=o.default.div.withConfig({displayName:"loader.style__OuterBar",componentId:"sc-aaaf19f2-2"})(["",""],(({size:a,variant:t,inverse:r})=>e.css(["border-radius:var(--borderRadius400);height:",";width:100%;background:",";overflow:hidden;position:relative;"],d[a],p(t,r).outerBarBackground))),x=o.default.div.withConfig({displayName:"loader.style__InnerBar",componentId:"sc-aaaf19f2-3"})(["",""],(({size:a,variant:t,inverse:r,animationTime:i,hasMotion:n})=>e.css(["@keyframes innerBarAnimationOne{0%{left:0%;animation-timing-function:linear;}30%{left:10px;animation-timing-function:cubic-bezier(0.5,0.6,0.4,1);}100%{left:calc(100% - 15px);}}@keyframes innerBarAnimationTwo{0%{width:15px;animation-timing-function:cubic-bezier(0.7,0,0.8,1);}50%{width:35%;}100%{width:15px;}}position:absolute;background:",";width:15px;height:",";border-radius:var(--borderRadius400);animation-name:innerBarAnimationOne,innerBarAnimationTwo;"," animation-iteration-count:",";"],p(t,r).innerBarBackground,d[a],n&&`animation-duration: ${i}s, ${i}s;`,n?"infinite, infinite":"none, none"))),y=o.default.svg.withConfig({displayName:"loader.style__StyledRingCircleSvg",componentId:"sc-aaaf19f2-4"})([""," ",' & circle[data-role="inner-arc"]{stroke:currentColor;}'],(({inverse:a,size:t,hasMotion:r,isTracked:i,isError:n,isSuccess:o,animationTime:d})=>{const c=`${s[t]}px`,p=l[t];return e.css(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",';cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);@keyframes trackedAnimation{from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}}@keyframes untrackedAnimation{0%{transform:rotate(-90deg);stroke-dashoffset:95;}50%{transform:rotate(90deg);stroke-dashoffset:80;}100%{transform:rotate(270deg);stroke-dashoffset:95;}}animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"],c,c,p,a?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.08)",p,(({inverse:e,isSuccess:a,isError:t})=>t?"#DB004E;":a?"#00811F;":e?"#FFF;":"#000000")({inverse:a,isSuccess:o,isError:n}),i?"trackedAnimation":"untrackedAnimation",r&&`animation-duration: ${d}s;`,r?"infinite":"none")}),i.default),h="40px",v=o.default.div.withConfig({displayName:"loader.style__StyledStars",componentId:"sc-aaaf19f2-5"})(["position:relative;width:",";height:",";"],h,h),k={standalone:{small:"4px",medium:"8px",large:"12px"},ring:{"extra-small":"4px",small:"8px",medium:"8px",large:"12px"}},w=o.default.div.withConfig({displayName:"loader.style__StyledStarLoaderWrapper",componentId:"sc-aaaf19f2-6"})(["position:relative;display:flex;align-items:center;justify-content:center;"]),b=o.default(r.Typography).withConfig({displayName:"loader.style__StyledLoaderLabel",componentId:"sc-aaaf19f2-7"})([""," line-height:150%;color:",";"," &{color:currentColor;}",""],m,(({inverse:e})=>e?"rgba(255, 255, 255, 0.55)":"rgba(0, 0, 0, 0.65)"),i.default,(({size:a="medium",loaderType:t,loaderVariant:r})=>"star"===t?e.css(["font-size:16px;font-weight:400;margin-left:12px;width:min-content;"]):"standalone"===t?e.css(["font-size:",";font-weight:500;width:100%;margin-top:",";"],"large"===a?"16px":"14px",k[t][a]):e.css(["font-size:",";font-weight:500;width:",";",";"],"large"===a?"16px":"extra-small"===a?"13px":"14px","inline"===r?"auto":"100%","inline"===r?`margin-left: ${c[a]}`:`margin-top: ${k[t][a]}`))),S=o.default.div.withConfig({displayName:"loader.style__StyledRingLoaderWrapper",componentId:"sc-aaaf19f2-8"})(["",""],(({loaderVariant:a})=>e.css(["display:flex;flex-direction:",";align-items:center;justify-content:center;width:",";"],"inline"===a?"row":"column","inline"===a?"auto":"100%"))),B=o.default.span.withConfig({displayName:"loader.style__StyledLabel",componentId:"sc-aaaf19f2-9"})(["",";"],(({inverse:a})=>e.css(["color:",";"," &{color:currentColor;}"],a?"rgba(255, 255, 255, 0.90)":"rgba(0, 0, 0, 0.90)",i.default)));exports.InnerBar=x,exports.OuterBar=g,exports.StyledLabel=B,exports.StyledLoader=u,exports.StyledLoaderLabel=b,exports.StyledLoaderPlaceholder=f,exports.StyledRingCircleSvg=y,exports.StyledRingLoaderWrapper=S,exports.StyledStarLoaderWrapper=w,exports.StyledStars=v;
+"use strict";var e=require("styled-components"),t=require("styled-system"),r=require("../../../style/themes/apply-base-theme.js"),a=require("../../typography/typography.component.js");require("react/jsx-runtime"),require("react");var i=require("../../button/button.style.js"),n=require("../../button/__next__/button.style.js");function o(e){return e&&e.__esModule?e:{default:e}}var s=o(e);const l={"extra-small":20,small:32,medium:64,large:80},d={"extra-small":2.7,small:2.7,medium:2.7,large:2.7},c={small:"4px",medium:"8px",large:"16px"},p={"extra-small":"8px",small:"8px",medium:"12px",large:"16px"},m=(e,t)=>{const r=t?"rgba(255, 255, 255, 0.08)":"rgba(0, 0, 0, 0.08)";return"ai"===e?{outerBarBackground:r,innerBarBackground:t?"linear-gradient(90deg, var(--mode-color-ai-alt-stop-1, #00D639) 0%, var(--mode-color-ai-alt-stop-2, #00D6DE) 40%, var(--mode-color-ai-alt-stop-3, #9D60FF) 90%)":"linear-gradient(90deg, var(--mode-color-ai-stop-1, #13A038) 0%, var(--mode-color-ai-stop-2, #149197) 40%, var(--mode-color-ai-stop-3, #A87CFB) 90%)"}:{outerBarBackground:r,innerBarBackground:t?"#FFFFFF":"#000000"}},u=e.css(["display:flex;justify-content:center;text-align:center;"]),g=s.default.div.withConfig({displayName:"loader.style__StyledLoaderPlaceholder",componentId:"sc-74569bc2-0"})(["display:inline-block;min-width:var(--sizing800);"]),f=s.default.div.attrs(r.default).withConfig({displayName:"loader.style__StyledLoader",componentId:"sc-74569bc2-1"})([""," text-align:center;white-space:nowrap;"],t.margin),y=s.default.div.withConfig({displayName:"loader.style__OuterBar",componentId:"sc-74569bc2-2"})(["",""],(({size:t,variant:r,inverse:a})=>e.css(["border-radius:var(--borderRadius400);height:",";width:100%;background:",";overflow:hidden;position:relative;"],c[t],m(r,a).outerBarBackground))),x=s.default.div.withConfig({displayName:"loader.style__InnerBar",componentId:"sc-74569bc2-3"})(["",""],(({size:t,variant:r,inverse:a,animationTime:i,hasMotion:n})=>e.css(["@keyframes innerBarAnimationOne{0%{left:0%;animation-timing-function:linear;}30%{left:10px;animation-timing-function:cubic-bezier(0.5,0.6,0.4,1);}100%{left:calc(100% - 15px);}}@keyframes innerBarAnimationTwo{0%{width:15px;animation-timing-function:cubic-bezier(0.7,0,0.8,1);}50%{width:35%;}100%{width:15px;}}position:absolute;background:",";width:15px;height:",";border-radius:var(--borderRadius400);animation-name:innerBarAnimationOne,innerBarAnimationTwo;"," animation-iteration-count:",";"],m(r,a).innerBarBackground,c[t],n&&`animation-duration: ${i}s, ${i}s;`,n?"infinite, infinite":"none, none"))),h=s.default.svg.withConfig({displayName:"loader.style__StyledRingCircleSvg",componentId:"sc-74569bc2-4"})([""," ",' & circle[data-role="inner-arc"],',' & circle[data-role="inner-arc"]{stroke:currentColor;}'],(({inverse:t,size:r,hasMotion:a,isTracked:i,isError:n,isSuccess:o,animationTime:s})=>{const c=`${l[r]}px`,p=d[r];return e.css(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",';cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);@keyframes trackedAnimation{from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}}@keyframes untrackedAnimation{0%{transform:rotate(-90deg);stroke-dashoffset:95;}50%{transform:rotate(90deg);stroke-dashoffset:80;}100%{transform:rotate(270deg);stroke-dashoffset:95;}}animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"],c,c,p,t?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.08)",p,(({inverse:e,isSuccess:t,isError:r})=>r?"#DB004E;":t?"#00811F;":e?"#FFF;":"#000000")({inverse:t,isSuccess:o,isError:n}),i?"trackedAnimation":"untrackedAnimation",a&&`animation-duration: ${s}s;`,a?"infinite":"none")}),n.StyledButton,i.default),b="40px",v=s.default.div.withConfig({displayName:"loader.style__StyledStars",componentId:"sc-74569bc2-5"})(["position:relative;width:",";height:",";"],b,b),k={standalone:{small:"4px",medium:"8px",large:"12px"},ring:{"extra-small":"4px",small:"8px",medium:"8px",large:"12px"}},w=s.default.div.withConfig({displayName:"loader.style__StyledStarLoaderWrapper",componentId:"sc-74569bc2-6"})(["position:relative;display:flex;align-items:center;justify-content:center;"]),S=s.default(a.Typography).withConfig({displayName:"loader.style__StyledLoaderLabel",componentId:"sc-74569bc2-7"})([""," line-height:150%;color:",";"," &,"," &{color:currentColor;}",""],u,(({inverse:e})=>e?"rgba(255, 255, 255, 0.55)":"rgba(0, 0, 0, 0.65)"),n.StyledButton,i.default,(({size:t="medium",loaderType:r,loaderVariant:a})=>"star"===r?e.css(["font-size:16px;font-weight:400;margin-left:12px;width:min-content;"]):"standalone"===r?e.css(["font-size:",";font-weight:500;width:100%;margin-top:",";"],"large"===t?"16px":"14px",k[r][t]):e.css(["font-size:",";font-weight:500;width:",";",";"],"large"===t?"16px":"extra-small"===t?"13px":"14px","inline"===a?"auto":"100%","inline"===a?`margin-left: ${p[t]}`:`margin-top: ${k[r][t]}`))),_=s.default.div.withConfig({displayName:"loader.style__StyledRingLoaderWrapper",componentId:"sc-74569bc2-8"})(["",""],(({loaderVariant:t})=>e.css(["display:flex;flex-direction:",";align-items:center;justify-content:center;width:",";"],"inline"===t?"row":"column","inline"===t?"auto":"100%"))),B=s.default.span.withConfig({displayName:"loader.style__StyledLabel",componentId:"sc-74569bc2-9"})(["",";"],(({inverse:t})=>e.css(["color:",";"," &,"," &{color:currentColor;}"],t?"rgba(255, 255, 255, 0.90)":"rgba(0, 0, 0, 0.90)",n.StyledButton,i.default)));exports.InnerBar=x,exports.OuterBar=y,exports.StyledLabel=B,exports.StyledLoader=f,exports.StyledLoaderLabel=S,exports.StyledLoaderPlaceholder=g,exports.StyledRingCircleSvg=h,exports.StyledRingLoaderWrapper=_,exports.StyledStarLoaderWrapper=w,exports.StyledStars=v;

package/package.json

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