carbon-react 158.20.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/esm/components/vertical-menu/index.d.ts

@@ -1,7 +1,7 @@
 export { default as VerticalMenu } from "./vertical-menu.component";
 export type { VerticalMenuProps } from "./vertical-menu.component";
 export { default as VerticalMenuItem } from "./vertical-menu-item/vertical-menu-item.component";
-export type { VerticalMenuItemProps } from "./vertical-menu-item/vertical-menu-item.component";
+export type { VerticalMenuItemClickEvent, VerticalMenuItemProps, } from "./vertical-menu-item/vertical-menu-item.component";
 export { default as VerticalMenuFullScreen } from "./vertical-menu-full-screen/vertical-menu-full-screen.component";
 export type { VerticalMenuFullScreenProps } from "./vertical-menu-full-screen/vertical-menu-full-screen.component";
 export { default as VerticalMenuTrigger } from "./vertical-menu-trigger/vertical-menu-trigger.component";

package/esm/components/vertical-menu/vertical-menu-item/vertical-menu-item.component.d.ts

@@ -1,17 +1,20 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { PaddingProps } from "styled-system";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
 import { IconType } from "../../icon";
+export type VerticalMenuItemClickEvent = React.MouseEvent<HTMLButtonElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>;
 export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingProps, TagProps {
     /** Children of the menu item - another level of VerticalMenuItems */
     children?: React.ReactNode;
+    /** Custom icon to be displayed. Takes precedence over `iconType` if both are specified. */
+    customIcon?: ReactNode;
     /** Default open state of the component */
     defaultOpen?: boolean;
     /** Title of the menu item */
     title: string;
     /** Adornment of the menu item meant to be rendered on the right side */
     adornment?: React.ReactNode | ((isOpen: boolean) => React.ReactNode);
-    /** Icon meant to be rendered on the left side */
+    /** The Carbon icon to be displayed. Defers to `customIcon` if both are defined. */
     iconType?: IconType;
     /** Whether the menu item is active or not */
     active?: boolean | ((isOpen: boolean) => boolean);
@@ -19,9 +22,11 @@ export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingPro
     height?: string;
     /**  Href, when passed the menu item will be rendered as an anchor tag */
     href?: string;
+    /** A custom click handler to run when the menu item is clicked */
+    onClick?: (event: VerticalMenuItemClickEvent) => void;
     /** Optional component to render instead of the default div, useful for rendering router link components */
     component?: T;
 }
 type InferredComponentProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, keyof VerticalMenuItemProps<T>>;
-export declare const VerticalMenuItem: <T>({ defaultOpen, title, iconType, adornment, children, component, active, height, href, ...rest }: T extends React.ElementType ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps) => React.JSX.Element;
+export declare const VerticalMenuItem: <T>({ defaultOpen, title, iconType, adornment, children, customIcon, component, active, height, href, onClick, ...rest }: T extends React.ElementType ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps) => React.JSX.Element;
 export default VerticalMenuItem;

package/esm/components/vertical-menu/vertical-menu-item/vertical-menu-item.component.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useContext as n}from"react";import o from"../../../__internal__/utils/helpers/tags/tags.js";import i from"../../../style/utils/filter-styled-system-padding-props.js";import{StyledVerticalMenuItem as c,StyledTitleIcon as l,StyledTitle as p,StyledAdornment as a,StyledChevronIcon as f,StyledList as u}from"../vertical-menu.style.js";import s from"./__internal__/menu-item.context.js";import{useVerticalMenuContext as y}from"../__internal__/vertical-menu.context.js";function m(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function b(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){m(e,t,r[t])}))}return e}const O=m=>{var{defaultOpen:O=!1,title:h,iconType:d,adornment:j,children:v,component:g,active:_,height:P="56px",href:w}=m,x=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(m,["defaultOpen","title","iconType","adornment","children","component","active","height","href"]);const[S,k]=r(O),{level:D}=n(s),{isFullScreen:E}=y(),I="function"==typeof _?_(S):_;let T={};return w&&(T={as:"a",href:w}),g&&(T=b({as:g,href:w,tabIndex:0},x)),v&&(T={as:"button",type:"button","aria-expanded":S,onClick:()=>{k((e=>!e))}}),e("li",{children:[e(c,(C=b({height:P,px:`calc(var(--spacing500) + (${D} * var(--spacing400)))`,py:2,active:I},T,i(x),o("vertical-menu-item",x)),F={children:[d&&t(l,{type:d}),t(p,{children:h}),j&&t(a,{children:"function"==typeof j?j(S):j}),v&&!E&&t(f,{type:S?"chevron_up_thick":"chevron_down_thick"})]},F=null!=F?F:{},Object.getOwnPropertyDescriptors?Object.defineProperties(C,Object.getOwnPropertyDescriptors(F)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(F)).forEach((function(e){Object.defineProperty(C,e,Object.getOwnPropertyDescriptor(F,e))})),C)),(S||E)&&t(s.Provider,{value:{level:D+1},children:t(u,{children:v})})]});var C,F};export{O as VerticalMenuItem,O as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useContext as n}from"react";import o from"../../../__internal__/utils/helpers/tags/tags.js";import c from"../../../style/utils/filter-styled-system-padding-props.js";import{StyledVerticalMenuItem as i,StyledCustomIconWrapper as l,StyledTitleIcon as p,StyledTitle as a,StyledAdornment as u,StyledChevronIcon as s,StyledList as f}from"../vertical-menu.style.js";import m from"./__internal__/menu-item.context.js";import{useVerticalMenuContext as y}from"../__internal__/vertical-menu.context.js";function b(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function O(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){b(e,t,r[t])}))}return e}const h=b=>{var{defaultOpen:h=!1,title:d,iconType:j,adornment:v,children:g,customIcon:_,component:P,active:w,height:x="56px",href:k,onClick:S}=b,D=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(b,["defaultOpen","title","iconType","adornment","children","customIcon","component","active","height","href","onClick"]);const[I,C]=r(h),{level:E}=n(m),{isFullScreen:T}=y(),F="function"==typeof w?w(I):w,$=O({},k&&{as:"a",href:k},!k&&P&&{as:P,tabIndex:0},!k&&!P&&(g||S)&&{as:"button",type:"button","aria-expanded":I},(k||!P)&&{onClick:e=>{C((e=>!e)),S&&S(e)}},D);return e("li",{children:[e(i,(q=O({height:x,px:`calc(var(--spacing500) + (${E} * var(--spacing400)))`,py:2,active:F},$,c(D),o("vertical-menu-item",D)),z={children:[(j||_)&&(_?t(l,{children:_}):j&&t(p,{type:j})),t(a,{children:d}),v&&t(u,{children:"function"==typeof v?v(I):v}),g&&!T&&t(s,{type:I?"chevron_up_thick":"chevron_down_thick"})]},z=null!=z?z:{},Object.getOwnPropertyDescriptors?Object.defineProperties(q,Object.getOwnPropertyDescriptors(z)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(z)).forEach((function(e){Object.defineProperty(q,e,Object.getOwnPropertyDescriptor(z,e))})),q)),(I||T)&&t(m.Provider,{value:{level:E+1},children:t(f,{children:g})})]});var q,z};export{h as VerticalMenuItem,h as default};

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

@@ -10,6 +10,7 @@ export declare const StyledVerticalMenuItem: import("styled-components").StyledC
 export declare const StyledTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const StyledAdornment: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTitleIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const StyledCustomIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledChevronIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 export declare const StyledVerticalMenu: import("styled-components").StyledComponent<"div", any, {
     theme: object;

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

@@ -1 +1 @@
-import e,{css as t}from"styled-components";import{padding as o}from"styled-system";import n from"../../style/utils/add-focus-styling.js";import i from"../../style/themes/apply-base-theme.js";import r from"../icon/icon.style.js";import a from"../icon/icon.component.js";import l from"../box/box.style.js";const d=e.ul.withConfig({displayName:"vertical-menu.style__StyledList",componentId:"sc-b3a4d279-0"})(["list-style:none;margin:0;padding:0;"]),s=e.div.attrs(i).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuItem",componentId:"sc-b3a4d279-1"})(["min-height:",";width:100%;display:flex;border:none;align-items:center;font-weight:500;font-size:14px;cursor:pointer;color:var(--colorsComponentsLeftnavWinterStandardContent);position:relative;box-sizing:border-box;text-decoration:none;background-color:var(--colorsComponentsLeftnavWinterStandardBackground);"," &:hover{background-color:var(--colorsComponentsLeftnavWinterStandardHover);}&:focus{","}"," ","{width:20px;}"],(({height:e})=>e),o,n(!0),(({active:e})=>e&&t(['&:before{background:var(--colorsComponentsLeftnavWinterStandardSelected);border-radius:var(--borderRadius100);content:"";height:calc(100% - 16px);left:24px;position:absolute;top:8px;width:calc(100% - 48px);z-index:0;}&:hover{&:before{background:var(--colorsComponentsLeftnavWinterStandardHover);}}'])),r),c=e.span.withConfig({displayName:"vertical-menu.style__StyledTitle",componentId:"sc-b3a4d279-2"})(["font-weight:500;font-size:14px;line-height:21px;margin:0;z-index:1;text-align:left;"]),p=e.div.withConfig({displayName:"vertical-menu.style__StyledAdornment",componentId:"sc-b3a4d279-3"})(["display:flex;align-items:center;justify-content:flex-end;flex:1;"]),m=e(a).withConfig({displayName:"vertical-menu.style__StyledTitleIcon",componentId:"sc-b3a4d279-4"})(["margin-right:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),f=e(a).withConfig({displayName:"vertical-menu.style__StyledChevronIcon",componentId:"sc-b3a4d279-5"})(["margin-left:auto;padding-left:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),v=e(l).withConfig({displayName:"vertical-menu.style__StyledVerticalMenu",componentId:"sc-b3a4d279-6"})(["&::-webkit-scrollbar{width:12px;}"]),y=e(l).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuFullScreen",componentId:"sc-b3a4d279-7"})(["position:fixed;top:0;bottom:0;height:100vh;width:100%;outline:none;padding:8px 0px;overflow:auto;background-color:var(--colorsComponentsLeftnavWinterStandardBackground);box-sizing:border-box;z-index:",";"," "," "," &::-webkit-scrollbar{width:12px;}"],(({theme:e})=>e.zIndex.fullScreenModal),(({prefersReducedMotion:e})=>!e&&t(["transition:all 0.3s ease;"])),(({isOpen:e})=>e&&t(["visibility:visible;transform:translateX(0);"])),(({isOpen:e})=>!e&&t(["transform:translateX(-100%);visibility:hidden;"])));export{p as StyledAdornment,f as StyledChevronIcon,d as StyledList,c as StyledTitle,m as StyledTitleIcon,v as StyledVerticalMenu,y as StyledVerticalMenuFullScreen,s as StyledVerticalMenuItem};
+import e,{css as t}from"styled-components";import{padding as o}from"styled-system";import n from"../../style/utils/add-focus-styling.js";import i from"../../style/themes/apply-base-theme.js";import r from"../icon/icon.style.js";import a from"../icon/icon.component.js";import l from"../box/box.style.js";const s=e.ul.withConfig({displayName:"vertical-menu.style__StyledList",componentId:"sc-eb6582b7-0"})(["list-style:none;margin:0;padding:0;"]),d=e.div.attrs(i).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuItem",componentId:"sc-eb6582b7-1"})(["min-height:",";width:100%;display:flex;border:none;align-items:center;font-weight:500;font-size:14px;cursor:pointer;color:var(--colorsComponentsLeftnavWinterStandardContent);position:relative;box-sizing:border-box;text-decoration:none;background-color:var(--colorsComponentsLeftnavWinterStandardBackground);"," &:hover{background-color:var(--colorsComponentsLeftnavWinterStandardHover);}&:focus{","}"," ","{width:20px;}"],(({height:e})=>e),o,n(!0),(({active:e})=>e&&t(['&:before{background:var(--colorsComponentsLeftnavWinterStandardSelected);border-radius:var(--borderRadius100);content:"";height:calc(100% - 16px);left:24px;position:absolute;top:8px;width:calc(100% - 48px);z-index:0;}&:hover{&:before{background:var(--colorsComponentsLeftnavWinterStandardHover);}}'])),r),c=e.span.withConfig({displayName:"vertical-menu.style__StyledTitle",componentId:"sc-eb6582b7-2"})(["font-weight:500;font-size:14px;line-height:21px;margin:0;z-index:1;text-align:left;"]),p=e.div.withConfig({displayName:"vertical-menu.style__StyledAdornment",componentId:"sc-eb6582b7-3"})(["display:flex;align-items:center;justify-content:flex-end;flex:1;"]),m=e(a).withConfig({displayName:"vertical-menu.style__StyledTitleIcon",componentId:"sc-eb6582b7-4"})(["margin-right:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),f=e.div.withConfig({displayName:"vertical-menu.style__StyledCustomIconWrapper",componentId:"sc-eb6582b7-5"})(["margin-right:12px;width:20px;"]),b=e(a).withConfig({displayName:"vertical-menu.style__StyledChevronIcon",componentId:"sc-eb6582b7-6"})(["margin-left:auto;padding-left:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),y=e(l).withConfig({displayName:"vertical-menu.style__StyledVerticalMenu",componentId:"sc-eb6582b7-7"})(["&::-webkit-scrollbar{width:12px;}"]),v=e(l).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuFullScreen",componentId:"sc-eb6582b7-8"})(["position:fixed;top:0;bottom:0;height:100vh;width:100%;outline:none;padding:8px 0px;overflow:auto;background-color:var(--colorsComponentsLeftnavWinterStandardBackground);box-sizing:border-box;z-index:",";"," "," "," &::-webkit-scrollbar{width:12px;}"],(({theme:e})=>e.zIndex.fullScreenModal),(({prefersReducedMotion:e})=>!e&&t(["transition:all 0.3s ease;"])),(({isOpen:e})=>e&&t(["visibility:visible;transform:translateX(0);"])),(({isOpen:e})=>!e&&t(["transform:translateX(-100%);visibility:hidden;"])));export{p as StyledAdornment,b as StyledChevronIcon,f as StyledCustomIconWrapper,s as StyledList,c as StyledTitle,m as StyledTitleIcon,y as StyledVerticalMenu,v as StyledVerticalMenuFullScreen,d as StyledVerticalMenuItem};

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/lib/components/vertical-menu/index.d.ts

@@ -1,7 +1,7 @@
 export { default as VerticalMenu } from "./vertical-menu.component";
 export type { VerticalMenuProps } from "./vertical-menu.component";
 export { default as VerticalMenuItem } from "./vertical-menu-item/vertical-menu-item.component";
-export type { VerticalMenuItemProps } from "./vertical-menu-item/vertical-menu-item.component";
+export type { VerticalMenuItemClickEvent, VerticalMenuItemProps, } from "./vertical-menu-item/vertical-menu-item.component";
 export { default as VerticalMenuFullScreen } from "./vertical-menu-full-screen/vertical-menu-full-screen.component";
 export type { VerticalMenuFullScreenProps } from "./vertical-menu-full-screen/vertical-menu-full-screen.component";
 export { default as VerticalMenuTrigger } from "./vertical-menu-trigger/vertical-menu-trigger.component";

package/lib/components/vertical-menu/vertical-menu-item/vertical-menu-item.component.d.ts

@@ -1,17 +1,20 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { PaddingProps } from "styled-system";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
 import { IconType } from "../../icon";
+export type VerticalMenuItemClickEvent = React.MouseEvent<HTMLButtonElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>;
 export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingProps, TagProps {
     /** Children of the menu item - another level of VerticalMenuItems */
     children?: React.ReactNode;
+    /** Custom icon to be displayed. Takes precedence over `iconType` if both are specified. */
+    customIcon?: ReactNode;
     /** Default open state of the component */
     defaultOpen?: boolean;
     /** Title of the menu item */
     title: string;
     /** Adornment of the menu item meant to be rendered on the right side */
     adornment?: React.ReactNode | ((isOpen: boolean) => React.ReactNode);
-    /** Icon meant to be rendered on the left side */
+    /** The Carbon icon to be displayed. Defers to `customIcon` if both are defined. */
     iconType?: IconType;
     /** Whether the menu item is active or not */
     active?: boolean | ((isOpen: boolean) => boolean);
@@ -19,9 +22,11 @@ export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingPro
     height?: string;
     /**  Href, when passed the menu item will be rendered as an anchor tag */
     href?: string;
+    /** A custom click handler to run when the menu item is clicked */
+    onClick?: (event: VerticalMenuItemClickEvent) => void;
     /** Optional component to render instead of the default div, useful for rendering router link components */
     component?: T;
 }
 type InferredComponentProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, keyof VerticalMenuItemProps<T>>;
-export declare const VerticalMenuItem: <T>({ defaultOpen, title, iconType, adornment, children, component, active, height, href, ...rest }: T extends React.ElementType ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps) => React.JSX.Element;
+export declare const VerticalMenuItem: <T>({ defaultOpen, title, iconType, adornment, children, customIcon, component, active, height, href, onClick, ...rest }: T extends React.ElementType ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps) => React.JSX.Element;
 export default VerticalMenuItem;

package/lib/components/vertical-menu/vertical-menu-item/vertical-menu-item.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../__internal__/utils/helpers/tags/tags.js"),n=require("../../../style/utils/filter-styled-system-padding-props.js"),i=require("../vertical-menu.style.js"),c=require("./__internal__/menu-item.context.js"),l=require("../__internal__/vertical-menu.context.js");function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){o(e,t,r[t])}))}return e}const s=o=>{var{defaultOpen:s=!1,title:a,iconType:p,adornment:y,children:f,component:d,active:b,height:j="56px",href:O}=o,h=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(o,["defaultOpen","title","iconType","adornment","children","component","active","height","href"]);const[v,m]=t.useState(s),{level:g}=t.useContext(c.default),{isFullScreen:x}=l.useVerticalMenuContext(),_="function"==typeof b?b(v):b;let P={};O&&(P={as:"a",href:O}),d&&(P=u({as:d,href:O,tabIndex:0},h)),f&&(P={as:"button",type:"button","aria-expanded":v,onClick:()=>{m((e=>!e))}});const S=`calc(var(--spacing500) + (${g} * var(--spacing400)))`;return e.jsxs("li",{children:[e.jsxs(i.StyledVerticalMenuItem,(w=u({height:j,px:S,py:2,active:_},P,n.default(h),r.default("vertical-menu-item",h)),q={children:[p&&e.jsx(i.StyledTitleIcon,{type:p}),e.jsx(i.StyledTitle,{children:a}),y&&e.jsx(i.StyledAdornment,{children:"function"==typeof y?y(v):y}),f&&!x&&e.jsx(i.StyledChevronIcon,{type:v?"chevron_up_thick":"chevron_down_thick"})]},q=null!=q?q:{},Object.getOwnPropertyDescriptors?Object.defineProperties(w,Object.getOwnPropertyDescriptors(q)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(q)).forEach((function(e){Object.defineProperty(w,e,Object.getOwnPropertyDescriptor(q,e))})),w)),(v||x)&&e.jsx(c.default.Provider,{value:{level:g+1},children:e.jsx(i.StyledList,{children:f})})]});var w,q};exports.VerticalMenuItem=s,exports.default=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../__internal__/utils/helpers/tags/tags.js"),n=require("../../../style/utils/filter-styled-system-padding-props.js"),c=require("../vertical-menu.style.js"),i=require("./__internal__/menu-item.context.js"),o=require("../__internal__/vertical-menu.context.js");function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){l(e,t,r[t])}))}return e}const s=l=>{var{defaultOpen:s=!1,title:a,iconType:p,adornment:y,children:f,customIcon:d,component:j,active:b,height:O="56px",href:h,onClick:m}=l,v=function(e,t){if(null==e)return{};var r,n,c=function(e,t){if(null==e)return{};var r,n,c={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(c[r]=e[r]);return c}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(c[r]=e[r])}return c}(l,["defaultOpen","title","iconType","adornment","children","customIcon","component","active","height","href","onClick"]);const[x,g]=t.useState(s),{level:_}=t.useContext(i.default),{isFullScreen:P}=o.useVerticalMenuContext(),S="function"==typeof b?b(x):b,w=u({},h&&{as:"a",href:h},!h&&j&&{as:j,tabIndex:0},!h&&!j&&(f||m)&&{as:"button",type:"button","aria-expanded":x},(h||!j)&&{onClick:e=>{g((e=>!e)),m&&m(e)}},v),I=`calc(var(--spacing500) + (${_} * var(--spacing400)))`;return e.jsxs("li",{children:[e.jsxs(c.StyledVerticalMenuItem,(k=u({height:O,px:I,py:2,active:S},w,n.default(v),r.default("vertical-menu-item",v)),q={children:[(p||d)&&(d?e.jsx(c.StyledCustomIconWrapper,{children:d}):p&&e.jsx(c.StyledTitleIcon,{type:p})),e.jsx(c.StyledTitle,{children:a}),y&&e.jsx(c.StyledAdornment,{children:"function"==typeof y?y(x):y}),f&&!P&&e.jsx(c.StyledChevronIcon,{type:x?"chevron_up_thick":"chevron_down_thick"})]},q=null!=q?q:{},Object.getOwnPropertyDescriptors?Object.defineProperties(k,Object.getOwnPropertyDescriptors(q)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(q)).forEach((function(e){Object.defineProperty(k,e,Object.getOwnPropertyDescriptor(q,e))})),k)),(x||P)&&e.jsx(i.default.Provider,{value:{level:_+1},children:e.jsx(c.StyledList,{children:f})})]});var k,q};exports.VerticalMenuItem=s,exports.default=s;

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

@@ -10,6 +10,7 @@ export declare const StyledVerticalMenuItem: import("styled-components").StyledC
 export declare const StyledTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const StyledAdornment: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTitleIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const StyledCustomIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledChevronIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 export declare const StyledVerticalMenu: import("styled-components").StyledComponent<"div", any, {
     theme: object;

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

@@ -1 +1 @@
-"use strict";var e=require("styled-components"),t=require("styled-system"),n=require("../../style/utils/add-focus-styling.js"),o=require("../../style/themes/apply-base-theme.js"),i=require("../icon/icon.style.js"),r=require("../icon/icon.component.js"),a=require("../box/box.style.js");function l(e){return e&&e.__esModule?e:{default:e}}var d=l(e);const s=d.default.ul.withConfig({displayName:"vertical-menu.style__StyledList",componentId:"sc-b3a4d279-0"})(["list-style:none;margin:0;padding:0;"]),c=d.default.div.attrs(o.default).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuItem",componentId:"sc-b3a4d279-1"})(["min-height:",";width:100%;display:flex;border:none;align-items:center;font-weight:500;font-size:14px;cursor:pointer;color:var(--colorsComponentsLeftnavWinterStandardContent);position:relative;box-sizing:border-box;text-decoration:none;background-color:var(--colorsComponentsLeftnavWinterStandardBackground);"," &:hover{background-color:var(--colorsComponentsLeftnavWinterStandardHover);}&:focus{","}"," ","{width:20px;}"],(({height:e})=>e),t.padding,n.default(!0),(({active:t})=>t&&e.css(['&:before{background:var(--colorsComponentsLeftnavWinterStandardSelected);border-radius:var(--borderRadius100);content:"";height:calc(100% - 16px);left:24px;position:absolute;top:8px;width:calc(100% - 48px);z-index:0;}&:hover{&:before{background:var(--colorsComponentsLeftnavWinterStandardHover);}}'])),i.default),p=d.default.span.withConfig({displayName:"vertical-menu.style__StyledTitle",componentId:"sc-b3a4d279-2"})(["font-weight:500;font-size:14px;line-height:21px;margin:0;z-index:1;text-align:left;"]),u=d.default.div.withConfig({displayName:"vertical-menu.style__StyledAdornment",componentId:"sc-b3a4d279-3"})(["display:flex;align-items:center;justify-content:flex-end;flex:1;"]),f=d.default(r.default).withConfig({displayName:"vertical-menu.style__StyledTitleIcon",componentId:"sc-b3a4d279-4"})(["margin-right:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),m=d.default(r.default).withConfig({displayName:"vertical-menu.style__StyledChevronIcon",componentId:"sc-b3a4d279-5"})(["margin-left:auto;padding-left:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),y=d.default(a.default).withConfig({displayName:"vertical-menu.style__StyledVerticalMenu",componentId:"sc-b3a4d279-6"})(["&::-webkit-scrollbar{width:12px;}"]),v=d.default(a.default).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuFullScreen",componentId:"sc-b3a4d279-7"})(["position:fixed;top:0;bottom:0;height:100vh;width:100%;outline:none;padding:8px 0px;overflow:auto;background-color:var(--colorsComponentsLeftnavWinterStandardBackground);box-sizing:border-box;z-index:",";"," "," "," &::-webkit-scrollbar{width:12px;}"],(({theme:e})=>e.zIndex.fullScreenModal),(({prefersReducedMotion:t})=>!t&&e.css(["transition:all 0.3s ease;"])),(({isOpen:t})=>t&&e.css(["visibility:visible;transform:translateX(0);"])),(({isOpen:t})=>!t&&e.css(["transform:translateX(-100%);visibility:hidden;"])));exports.StyledAdornment=u,exports.StyledChevronIcon=m,exports.StyledList=s,exports.StyledTitle=p,exports.StyledTitleIcon=f,exports.StyledVerticalMenu=y,exports.StyledVerticalMenuFullScreen=v,exports.StyledVerticalMenuItem=c;
+"use strict";var e=require("styled-components"),t=require("styled-system"),n=require("../../style/utils/add-focus-styling.js"),o=require("../../style/themes/apply-base-theme.js"),i=require("../icon/icon.style.js"),r=require("../icon/icon.component.js"),l=require("../box/box.style.js");function a(e){return e&&e.__esModule?e:{default:e}}var d=a(e);const s=d.default.ul.withConfig({displayName:"vertical-menu.style__StyledList",componentId:"sc-eb6582b7-0"})(["list-style:none;margin:0;padding:0;"]),c=d.default.div.attrs(o.default).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuItem",componentId:"sc-eb6582b7-1"})(["min-height:",";width:100%;display:flex;border:none;align-items:center;font-weight:500;font-size:14px;cursor:pointer;color:var(--colorsComponentsLeftnavWinterStandardContent);position:relative;box-sizing:border-box;text-decoration:none;background-color:var(--colorsComponentsLeftnavWinterStandardBackground);"," &:hover{background-color:var(--colorsComponentsLeftnavWinterStandardHover);}&:focus{","}"," ","{width:20px;}"],(({height:e})=>e),t.padding,n.default(!0),(({active:t})=>t&&e.css(['&:before{background:var(--colorsComponentsLeftnavWinterStandardSelected);border-radius:var(--borderRadius100);content:"";height:calc(100% - 16px);left:24px;position:absolute;top:8px;width:calc(100% - 48px);z-index:0;}&:hover{&:before{background:var(--colorsComponentsLeftnavWinterStandardHover);}}'])),i.default),p=d.default.span.withConfig({displayName:"vertical-menu.style__StyledTitle",componentId:"sc-eb6582b7-2"})(["font-weight:500;font-size:14px;line-height:21px;margin:0;z-index:1;text-align:left;"]),u=d.default.div.withConfig({displayName:"vertical-menu.style__StyledAdornment",componentId:"sc-eb6582b7-3"})(["display:flex;align-items:center;justify-content:flex-end;flex:1;"]),f=d.default(r.default).withConfig({displayName:"vertical-menu.style__StyledTitleIcon",componentId:"sc-eb6582b7-4"})(["margin-right:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),m=d.default.div.withConfig({displayName:"vertical-menu.style__StyledCustomIconWrapper",componentId:"sc-eb6582b7-5"})(["margin-right:12px;width:20px;"]),y=d.default(r.default).withConfig({displayName:"vertical-menu.style__StyledChevronIcon",componentId:"sc-eb6582b7-6"})(["margin-left:auto;padding-left:12px;width:20px;color:var(--colorsComponentsLeftnavWinterStandardContent);"]),b=d.default(l.default).withConfig({displayName:"vertical-menu.style__StyledVerticalMenu",componentId:"sc-eb6582b7-7"})(["&::-webkit-scrollbar{width:12px;}"]),v=d.default(l.default).withConfig({displayName:"vertical-menu.style__StyledVerticalMenuFullScreen",componentId:"sc-eb6582b7-8"})(["position:fixed;top:0;bottom:0;height:100vh;width:100%;outline:none;padding:8px 0px;overflow:auto;background-color:var(--colorsComponentsLeftnavWinterStandardBackground);box-sizing:border-box;z-index:",";"," "," "," &::-webkit-scrollbar{width:12px;}"],(({theme:e})=>e.zIndex.fullScreenModal),(({prefersReducedMotion:t})=>!t&&e.css(["transition:all 0.3s ease;"])),(({isOpen:t})=>t&&e.css(["visibility:visible;transform:translateX(0);"])),(({isOpen:t})=>!t&&e.css(["transform:translateX(-100%);visibility:hidden;"])));exports.StyledAdornment=u,exports.StyledChevronIcon=y,exports.StyledCustomIconWrapper=m,exports.StyledList=s,exports.StyledTitle=p,exports.StyledTitleIcon=f,exports.StyledVerticalMenu=b,exports.StyledVerticalMenuFullScreen=v,exports.StyledVerticalMenuItem=c;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "158.20.0",
+  "version": "158.22.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -126,7 +126,7 @@
     "@typescript-eslint/parser": "^8.35.1",
     "babel-jest": "^29.7.0",
     "babel-plugin-dev-expression": "^0.2.3",
-    "browserslist": "^4.26.3",
+    "browserslist": "^4.28.1",
     "chromatic": "13.3.3",
     "conventional-changelog-conventionalcommits": "^8.0.0",
     "core-js": "^3.45.1",