carbon-react 162.12.0-beta.1 → 162.13.0

package/esm/components/breadcrumbs/__internal__/breadcrumbs.context.d.ts

@@ -0,0 +1,5 @@
+export type BreadcrumbsContextType = {
+    inverse?: boolean;
+};
+declare const BreadcrumbsProvider: import("react").Provider<BreadcrumbsContextType | null>, useBreadcrumbsContext: () => BreadcrumbsContextType;
+export { BreadcrumbsProvider, useBreadcrumbsContext };

package/esm/components/breadcrumbs/__internal__/breadcrumbs.context.js

@@ -0,0 +1 @@
+import e from"../../../__internal__/utils/createStrictContext/createStrictContext.js";const[r,t]=e({name:"BreadcrumbsContext",errorMessage:"Carbon Breadcrumbs: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",defaultValue:{inverse:!1}});export{r as BreadcrumbsProvider,t as useBreadcrumbsContext};

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { SpaceProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface BreadcrumbsProps extends TagProps, SpaceProps {
+    /** Child crumbs to display */
+    children: React.ReactNode;
+    /**
+     * Sets the colour styling when component is rendered on a dark background
+     * @deprecated The 'isDarkBackground' prop in Breadcrumbs is deprecated and will soon be removed. Please use the 'inverse' prop instead.
+     */
+    isDarkBackground?: boolean;
+    /** Sets the colour styling when component is to be rendered with inverse styles */
+    inverse?: boolean;
+}
+export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
+export default Breadcrumbs;

package/esm/components/breadcrumbs/breadcrumbs.component.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import r from"react";import t from"../../__internal__/utils/helpers/tags/tags.js";import n from"./breadcrumbs.style.js";import o from"../../hooks/__internal__/useLocale/useLocale.js";import{BreadcrumbsProvider as i}from"./__internal__/breadcrumbs.context.js";import a from"../../__internal__/utils/logger/index.js";function c(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function l(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){c(e,r,t[r])}))}return e}let s=!1;const u=r.forwardRef(((r,c)=>{var{children:u,isDarkBackground:b=!1,inverse:p}=r,f=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(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)&&(o[t]=e[t])}return o}(r,["children","isDarkBackground","inverse"]);const m=o();return b&&!s&&(a.deprecate("The 'isDarkBackground' prop in Breadcrumbs is deprecated and will soon be removed. Please use the 'inverse' prop instead."),s=!0),e(i,{value:{inverse:null!=p?p:b},children:e(n,(O=l({ref:c,role:"navigation","aria-label":m.breadcrumbs.ariaLabel()},f,t("breadcrumbs",f)),d={children:e("ol",{children:u})},d=null!=d?d:{},Object.getOwnPropertyDescriptors?Object.defineProperties(O,Object.getOwnPropertyDescriptors(d)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(d)).forEach((function(e){Object.defineProperty(O,e,Object.getOwnPropertyDescriptor(d,e))})),O))});var O,d}));u.displayName="Breadcrumbs";export{u as Breadcrumbs,u as default};

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

@@ -0,0 +1,4 @@
+declare const StyledBreadcrumbs: import("styled-components").StyledComponent<"nav", any, {
+    theme: object;
+}, "theme">;
+export default StyledBreadcrumbs;

package/esm/components/breadcrumbs/breadcrumbs.style.js

@@ -0,0 +1 @@
+import e from"styled-components";import{space as s}from"styled-system";import t from"../../style/themes/apply-base-theme.js";const a=e.nav.attrs(t).withConfig({displayName:"breadcrumbs.style__StyledBreadcrumbs",componentId:"carbon_v162_12_0__sc-99c6d133-0"})([""," ol{padding:0;margin:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--global-space-layout-3-xs);}"],s);export{a as default};

package/esm/components/breadcrumbs/crumb/crumb.component.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { LinkProps } from "../../link";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface CrumbProps extends Pick<LinkProps, "href" | "onClick" | "onKeyDown" | "onMouseDown" | "children">, TagProps {
+    /** This sets the Crumb to current, does not render Link */
+    isCurrent?: boolean;
+    /** @deprecated Intended for internal use only */
+    hasFocus?: boolean;
+    /**
+     * Specifies when the link underline should be displayed.
+     * @deprecated The 'underline' prop in Crumb is deprecated and will soon be removed.
+     */
+    underline?: "always" | "hover" | "never";
+    /**
+     * Sets the correct link size
+     * @deprecated The 'linkSize' prop in Crumb is deprecated and will soon be removed.
+     */
+    linkSize?: "medium" | "large";
+    /**
+     * Sets the link style to bold
+     * @deprecated The 'bold' prop in Crumb is deprecated and will soon be removed.
+     */
+    bold?: boolean;
+}
+export declare const Crumb: React.ForwardRefExoticComponent<CrumbProps & React.RefAttributes<HTMLAnchorElement>>;
+export default Crumb;

package/esm/components/breadcrumbs/crumb/crumb.component.js

@@ -0,0 +1 @@
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import t from"react";import{Link as n}from"../../link/link.component.js";import o from"../../../__internal__/utils/helpers/tags/tags.js";import{StyledCrumbCurrent as i,Divider as c}from"./crumb.style.js";import{useBreadcrumbsContext as l}from"../__internal__/breadcrumbs.context.js";function u(r,e,t){return e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function f(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})))),n.forEach((function(e){u(r,e,t[e])}))}return r}function s(r,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(e)):function(r){var e=Object.keys(r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(r);e.push.apply(e,t)}return e}(Object(e)).forEach((function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(e,t))})),r}const a=t.forwardRef(((t,u)=>{var{href:a,isCurrent:b,children:p,onClick:m}=t,O=function(r,e){if(null==r)return{};var t,n,o=function(r,e){if(null==r)return{};var t,n,o={},i=Object.keys(r);for(n=0;n<i.length;n++)t=i[n],e.indexOf(t)>=0||(o[t]=r[t]);return o}(r,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(n=0;n<i.length;n++)t=i[n],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(r,t)&&(o[t]=r[t])}return o}(t,["href","isCurrent","children","onClick"]);const{inverse:y}=l();return b?r("li",{children:r(i,s(f({ref:u,"aria-current":"page",$inverse:y},O,o("crumb",O)),{children:p}))}):e("li",{children:[r(n,s(f({ref:u,inverse:y,href:a,onClick:m},O,o("crumb",O)),{children:p})),r(c,{"data-role":"crumb-divider","aria-hidden":"true",$inverse:y})]})}));a.displayName="Crumb";export{a as Crumb,a as default};

package/esm/components/breadcrumbs/crumb/crumb.style.d.ts

@@ -0,0 +1,13 @@
+import { StyledLinkProps } from "../../link/link.style";
+interface StyledCrumbProps extends StyledLinkProps {
+    $isCurrent?: boolean;
+}
+export declare const StyledCrumbCurrent: import("styled-components").StyledComponent<"span", any, StyledCrumbProps, never>;
+interface DividerProps {
+    $inverse?: boolean;
+}
+export declare const Divider: import("styled-components").StyledComponent<"span", any, DividerProps, never>;
+declare const _default: {
+    Divider: import("styled-components").StyledComponent<"span", any, DividerProps, never>;
+};
+export default _default;

package/esm/components/breadcrumbs/crumb/crumb.style.js

@@ -0,0 +1 @@
+import t,{css as r}from"styled-components";const a=t=>t?"var(--container-standard-inverse-txt-alt)":"var(--container-standard-txt-alt)",o=t.span.withConfig({displayName:"crumb.style__StyledCrumbCurrent",componentId:"carbon_v162_12_0__sc-37b8525-0"})(["",""],(({$inverse:t})=>r(["font:var(--global-font-static-comp-regular-m);cursor:text;color:",";"],a(t)))),n=t.span.withConfig({displayName:"crumb.style__Divider",componentId:"carbon_v162_12_0__sc-37b8525-1"})(['::after{content:"/";margin-left:var(--global-space-comp-s);font:var(--global-font-static-comp-regular-m);',"}"],(({$inverse:t})=>r(["color:",";"],a(t))));var e={Divider:n};export{n as Divider,o as StyledCrumbCurrent,e as default};

package/esm/components/breadcrumbs/crumb/index.d.ts

@@ -0,0 +1,2 @@
+export { Crumb } from "./crumb.component";
+export type { CrumbProps } from "./crumb.component";

package/esm/components/breadcrumbs/crumb/index.js

@@ -0,0 +1 @@
+export{Crumb}from"./crumb.component.js";

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

@@ -0,0 +1,4 @@
+export { default as Breadcrumbs } from "./breadcrumbs.component";
+export { Crumb } from "./crumb";
+export type { BreadcrumbsProps } from "./breadcrumbs.component";
+export type { CrumbProps } from "./crumb";

package/esm/components/breadcrumbs/index.js

@@ -0,0 +1 @@
+export{Breadcrumbs}from"./breadcrumbs.component.js";export{Crumb}from"./crumb/crumb.component.js";

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 e,{Children as t,isValidElement as r}from"react";const a=o=>!!o&&t.toArray(o).every((t=>r(t)?"Icon"===t.type.displayName||!(!e.isValidElement(t)||t.type!==e.Fragment)&&a(t.props.children):"string"==typeof t&&!t.trim().length));export{a as default};

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

@@ -0,0 +1,74 @@
+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";
+type ButtonRef = HTMLButtonElement | HTMLAnchorElement;
+export interface ButtonProps extends Omit<LegacyButtonProps, "size" | "type" | "iconTooltipMessage" | "iconTooltipPosition" | "href" | "target" | "rel">, 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;
+    /** Associates the button with a form element; value should be the id of the form. */
+    form?: string;
+    /** 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;
+    /**
+     * Used to transform button into anchor
+     * */
+    href?: string;
+    /**
+     * HTML target attribute
+     * */
+    target?: string;
+    /**
+     * HTML rel attribute
+     * */
+    rel?: string;
+    /**
+     * @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<ButtonRef>>;
+export default Button;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{forwardRef as n,useContext as i}from"react";import{StyledButton as a,StyledContentContainer as o}from"./button.style.js";import l from"../../../__internal__/utils/helpers/tags/tags.js";import c from"../../../hooks/useMediaQuery/useMediaQuery.js";import u from"./__internal__/utils/is-icon-only.js";import s from"../../icon/icon.component.js";import"../../icon/icon.style.js";import p from"./button.context.js";import{PopoverMenuContext as d}from"../../../__internal__/popover-menu/contexts/popover-menu.context.js";import"../../../__internal__/popover-menu/contexts/menu-heading.context.js";import y from"../../../__internal__/popover-menu/contexts/menu-item.context.js";import b from"../../split-button/__internal__/split-button.context.js";import f from"../../multi-action-button/__internal__/multi-action-button.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 v(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}function j(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const O=n(((n,m)=>{var{"aria-describedby":O,"aria-label":g,"aria-labelledby":h,children:_,disabled:T=!1,fullWidth:P=!1,form:w,id:x,inverse:k,name:S,noWrap:$=!0,onClick:W,size:B="medium",variant:C="default",variantType:D="primary",buttonType:z,destructive:M,iconType:E,iconPosition:I="before",isWhite:Q,href:q,type:A="button"}=n,F=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(n,["aria-describedby","aria-label","aria-labelledby","children","disabled","fullWidth","form","id","inverse","name","noWrap","onClick","size","variant","variantType","buttonType","destructive","iconType","iconPosition","isWhite","href","type"]);const G=void 0!==_&&!1!==_,H=!!E&&!G||u(_),{size:J,isButtonMenu:K}=i(d);var L;const{isDisabled:N}=null!==(L=i(y))&&void 0!==L?L:{},{inSplitButton:R,onChildButtonClick:U}=i(b),{align:V}=i(f),X=K?J:B,Y=T||N,Z=c("screen and (prefers-reduced-motion: no-preference)"),{variant:ee,variantType:te}=(({buttonType:e,destructive:t,variant:r,variantType:n})=>{if(!e&&!t)return{variant:r,variantType:n};if(t)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:z,destructive:M,variant:C,variantType:D}),re=q&&!Y?{href:q,target:F.target,rel:F.rel,as:"a"}:{type:A,as:"button"};return e(a,j(v({$allowMotion:Z,"aria-describedby":O,"aria-label":g,"aria-labelledby":h,disabled:Y,$fullWidth:P,form:w,$inverse:k||"darkBackground"===z||Q,id:x,name:S,$noWrap:$,onClick:e=>{var t;e.currentTarget.focus({preventScroll:!0}),R&&U?null===(t=U(W))||void 0===t||t(e):null==W||W(e)},ref:e=>{"function"==typeof m?m(e):m&&(m.current=e)},$size:X,$variant:ee,$variantType:te,$iconOnly:H},re,l("button",F),F),{$align:V,"data-align":V,children:e(o,{"data-role":"button-child-container",children:e(p.Provider,{value:{isInsideButton:!0,isColouredSurface:"primary"===te},children:(()=>{if(!E)return _;const n={"aria-hidden":!0,bg:"transparent"};return G?t(r,"before"===I?{children:[e(s,j(v({type:E},n),{"data-role":"button-icon-before"})),_]}:{children:[_,e(s,j(v({type:E},n),{"data-role":"button-icon-after"}))]}):e(s,j(v({type:E},n),{"data-role":"button-icon-only"}))})()})})}))}));export{O as Button,O 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.context.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface ButtonContextProps {
+    isInsideButton?: boolean;
+    isColouredSurface?: boolean;
+}
+declare const _default: React.Context<ButtonContextProps>;
+export default _default;

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

@@ -0,0 +1 @@
+import t from"react";var e=t.createContext({});export{e as default};

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

@@ -0,0 +1,17 @@
+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;
+    $align?: "left" | "right";
+}, 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:"carbon_v162_12_0__sc-864bcbff-0"})(["display:flex;gap:var(--global-space-comp-s);align-items:center;justify-content:center;"]),c=o.button.withConfig({displayName:"button.style__StyledButton",componentId:"carbon_v162_12_0__sc-864bcbff-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;}[class*="popover-menu-item"] &{width:100%;justify-content:flex-start;background-color:transparent;color:currentColor;border-radius:0;border:none;&:focus{',' position:relative;z-index:1;}}[class*="popover-menu-item"] &[data-align="left"]{justify-content:flex-start;}[class*="popover-menu-item"] &[data-align="right"]{justify-content:flex-end;}',""],(({$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:p}=a[i];return e(["background-color:",";border:"," solid ",";border-radius:",";color:",";font:",";min-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?"":p,o?e(["background-color:",";border-color:",";color:",";cursor:not-allowed;"],d.disabled,l.disabled,c.disabled):e(["&:active,&.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:p}=a[r];return e(["position:relative;z-index:0;border:none;border-radius:",";background:white;color:var(--button-ai-label-default);font:",";min-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?"":p,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,&.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:p,paddingHorizontal:g}=a[i];return e(["background-color:",";border:"," solid ",";border-radius:",";color:",";font:",";min-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",p,t?"":g,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,&.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      `)),(({$inverse:o})=>r(!1,o)),r(!0),i);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-types.style.d.ts

@@ -0,0 +1,9 @@
+declare const _default: (isDisabled?: boolean, destructive?: boolean, isWhite?: boolean) => {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    darkBackground: string;
+    "gradient-grey": string;
+    "gradient-white": string;
+};
+export default _default;

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

@@ -0,0 +1 @@
+import n from"../icon/icon.style.js";import o from"../loader/loader-square.style.js";function r(r){return`\n  color: ${r};\n  && ${n}:not([data-color]) {\n    color: ${r};\n  }\n  ${o} {\n    background-color: ${r};\n  }\n  `}const a="\n  img, svg {\n    opacity: 0.3;\n  }\n",c=`\n  background: transparent;\n  border-color: var(--colorsActionDisabled500);\n  ${r("var(--colorsActionMajorYin030)")};\n  &:hover {\n    border-color: var(--colorsActionDisabled500);\n    ${r("var(--colorsActionMajorYin030)")};\n  }\n  ${a}\n`,e="\n  border: 2px solid transparent;\n  &:hover {\n    background: linear-gradient(to right, #d6f8df, #d9f2ff, #ede2ff) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;\n  }\n";var i=(n,o,i)=>({primary:`\n    background: var(--colorsActionMajor500);\n    border-color: transparent;\n    ${r("var(--colorsActionMajorYang100)")};\n    &:hover {\n      background: var(--colorsActionMajor600);\n    }\n\n    ${n?`\n          background: var(--colorsActionDisabled500);\n          ${r("var(--colorsActionMajorYin030)")};\n          &:hover {\n            background: var(--colorsActionDisabled500);\n          }\n          ${a}\n        `:""}\n\n    ${o?`\n        background: var(--colorsSemanticNegative500);\n        ${r("var(--colorsSemanticNegativeYang100)")};\n        &:hover {\n          background: var(--colorsSemanticNegative600);\n        }\n\n    ${n?`\n          background: var(--colorsActionDisabled500);\n          ${r("var(--colorsActionMajorYin030)")};\n          &:hover {\n            background: var(--colorsActionDisabled500);\n          }\n          ${a}\n        `:""}`:""}\n  `,secondary:`\n      background: transparent;\n      border-color: var(--colorsActionMajor500);\n      ${r("var(--colorsActionMajor500)")};\n      &:hover {\n        background: var(--colorsActionMajor600);\n        border-color: var(--colorsActionMajorTransparent);\n        ${r("var(--colorsActionMajorYang100)")};\n      }\n\n      ${!i||n&&o?"":`\n          border-color: var(--colorsActionMajorYang100);\n          ${r("var(--colorsActionMajorYang100)")};\n          &:hover {\n            background: var(--colorsActionMajorYang100);\n            border-color: var(--colorsActionMajorYang100);\n            ${r("var(--colorsYin100)")};\n          }\n          `}\n\n      ${o?`\n            border-color: var(--colorsSemanticNegative500);\n            ${r("var(--colorsSemanticNegative500)")}\n            &:hover {\n              background: var(--colorsSemanticNegative600);\n              border-color: var(--colorsSemanticNegativeTransparent);\n              ${r("var(--colorsSemanticNegativeYang100)")};\n            }\n          `:""}\n\n      ${n&&!i?`\n            border-color: var(--colorsActionDisabled500);\n            ${r("var(--colorsActionMajorYin030)")};\n            &:hover {\n              background: transparent;\n              border-color: var(--colorsActionDisabled500);\n              ${r("var(--colorsActionMajorYin030)")};\n            }\n            ${a}\n          `:""}\n\n      ${i?`\n            border-color: var(--colorsActionMajorYang100);\n            ${r("var(--colorsActionMajorYang100)")}\n            &:hover {\n              background: var(--colorsActionMajorYang100);\n              ${r("var(--colorsUtilityYin100)")};\n            }\n\n\n            ${o?`\n                  border-color: var(--colorsSemanticNegative450);\n                  ${r("var(--colorsSemanticNegative450)")}\n                  &:hover {\n                    background: var(--colorsSemanticNegative600);\n                    border-color: var(--colorsSemanticNegativeTransparent);\n                    ${r("var(--colorsSemanticNegativeYang100)")};\n                  }\n                `:""}\n\n            ${n?`\n                  border-color: #4B4B4B;\n                  ${r("#4B4B4B")};\n                  &:hover {\n                    background: transparent;\n                    border-color: #4B4B4B;\n                    ${r("#4B4B4B")};\n\n                  }\n                  ${a}\n                `:""}\n          }\n          `:""}\n  `,tertiary:`\n    background: transparent;\n    border-color: transparent;\n    ${r("var(--colorsActionMajor500)")};\n    &:hover {\n      background: var(--colorsActionMajor600);\n      ${r("var(--colorsActionMajorYang100)")};\n    }\n\n    ${o?`\n          ${r("var(--colorsSemanticNegative500)")};\n          &:hover {\n            background: var(--colorsSemanticNegative600);\n            ${r("var(--colorsSemanticNegativeYang100)")};\n          }\n        `:""}\n\n    ${n?`\n          ${r("var(--colorsActionMajorYin030)")};\n          &:hover {\n            background: var(--colorsActionMajorTransparent);\n            ${r("var(--colorsActionMajorYin030)")};\n          }\n          ${a}\n        `:""}\n  `,darkBackground:`\n    background: var(--colorsActionMajorYang100);\n    border-color: transparent;\n    ${r("var(--colorsActionMajor500)")};\n    &:hover {\n      background: var(--colorsActionMajor600);\n      ${r("var(--colorsActionMajorYang100)")}\n    }\n\n    ${n?`\n          background: var(--colorsActionDisabled500);\n          ${r("var(--colorsActionMajorYin030)")};\n          &:hover {\n            background: var(--colorsActionDisabled500);\n            ${r("var(--colorsActionMajorYin030)")};\n          }\n          ${a}\n        `:""}\n  `,"gradient-grey":`\n    ${n?c:`\n          background: linear-gradient(#F2F5F6, #F2F5F6) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;\n          ${e}\n        `}\n  `,"gradient-white":`\n    ${n?c:`\n          background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;\n          ${e}\n        `}\n  `});export{i as default};

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

@@ -0,0 +1,101 @@
+import React from "react";
+import { SpaceProps } from "styled-system";
+import { IconType } from "../icon";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+import { TooltipPositions } from "../tooltip/tooltip.config";
+/**
+ * @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 {
+    /**
+     * Prop to specify the aria-label attribute of the component
+     * Defaults to the iconType, when the component has only an icon
+     */
+    "aria-label"?: string;
+    /** Identifies the element(s) labelling the button. */
+    "aria-labelledby"?: string;
+    /** Identifies the element(s) offering additional information about the button the user might require. */
+    "aria-describedby"?: string;
+    /**
+     * @deprecated Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground"
+     * */
+    buttonType?: ButtonTypes;
+    /** The text the button displays */
+    children?: React.ReactNode;
+    /** Name attribute */
+    name?: string;
+    /** Apply disabled state to the button */
+    disabled?: boolean;
+    /**
+     * @deprecated Apply destructive style to the button
+     * */
+    destructive?: boolean;
+    /** Apply fullWidth style to the button */
+    fullWidth?: boolean;
+    /**
+     * @deprecated Used to transform button into anchor
+     * */
+    href?: string;
+    /** Defines an Icon position related to the children: "before" | "after" */
+    iconPosition?: ButtonIconPosition;
+    /** Defines an Icon type within the button */
+    iconType?: IconType;
+    /**
+     * @deprecated [Legacy] Provides a tooltip message when the icon is hovered.
+     * */
+    iconTooltipMessage?: string;
+    /**
+     * @deprecated [Legacy] Provides positioning when the tooltip is displayed.
+     * */
+    iconTooltipPosition?: TooltipPositions;
+    /** id attribute */
+    id?: string;
+    /**
+     * @deprecated Whether to use the white-on-dark colour variant
+     * */
+    isWhite?: boolean;
+    /** If provided, the text inside a button will not wrap */
+    noWrap?: boolean;
+    /** Specify a callback triggered on blur */
+    onBlur?: (ev: React.FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** Specify a callback triggered on change */
+    onChange?: (ev: React.FormEvent<HTMLButtonElement | HTMLAnchorElement> | React.ChangeEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** Specify a callback triggered on focus */
+    onFocus?: (ev: React.FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** Specify a callback triggered on keyDown */
+    onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** onClick handler */
+    onClick?: (ev: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** Assigns a size to the button: "small" | "medium" | "large" */
+    size?: SizeOptions;
+    /**
+     * @deprecated Second text child, renders under main text, only when size is "large"
+     * */
+    subtext?: string;
+    /** HTML button type property */
+    type?: string;
+    /**
+     * @deprecated HTML target attribute
+     * */
+    target?: string;
+    /**
+     * @deprecated HTML rel attribute
+     * */
+    rel?: string;
+    /**
+     * @private
+     * @internal
+     * @ignore
+     * Set a class name on the button element. INTERNAL USE ONLY.
+     */
+    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/button/button.component.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import n,{useContext as o,useState as i,useCallback as l}from"react";import a from"invariant";import c from"../icon/icon.component.js";import"../icon/icon.style.js";import s,{StyledButtonMainText as u,StyledButtonSubtext as b}from"./button.style.js";import p from"../../__internal__/utils/helpers/tags/tags.js";import d from"../button-bar/__internal__/button-bar.context.js";import f from"../split-button/__internal__/split-button.context.js";import y from"./__next__/button.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 h(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}function O({iconType:n,iconPosition:o,size:i,subtext:l,children:a,disabled:s}){const p={"aria-hidden":!0,disabled:s,bg:"transparent"},d=void 0!==a&&!1!==a;return t(r,{children:[n&&"before"===o&&d&&e(c,h({type:n},p)),d&&t("span",{children:[e(u,{"data-element":"main-text",children:a}),"large"===i&&e(b,{"data-element":"subtext","data-role":"subtext",children:l})]}),n&&!d&&e(c,h({type:n},p)),n&&"after"===o&&a&&e(c,h({type:n},p))]})}const j=n.forwardRef(((t,r)=>{var{"aria-describedby":n,"aria-label":c,"aria-labelledby":u,buttonType:b="secondary",children:m,destructive:j=!1,disabled:g=!1,isWhite:v=!1,fullWidth:P=!1,href:x,iconPosition:_="before",iconType:w,m:k=0,noWrap:T,onClick:W,px:S,rel:z,size:C="medium",subtext:D="",target:B}=t,E=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}(t,["aria-describedby","aria-label","aria-labelledby","buttonType","children","destructive","disabled","isWhite","fullWidth","href","iconPosition","iconType","m","noWrap","onClick","px","rel","size","subtext","target"]);const{buttonType:I,size:K,iconPosition:N,fullWidth:R}=o(d),q=I||b,A=K||C,F=N||_,G=R||P;a(void 0!==m||!!w,"Either prop `iconType` must be defined or this node must have children."),D&&a("large"===A,"subtext prop has no effect unless the button is large.");const[H,J]=i(null),{inSplitButton:L,onChildButtonClick:M}=o(f);let Q;switch(A){case"small":Q=2;break;case"large":Q=4;break;default:Q=3}const U=l((e=>{J(e),r&&("object"==typeof r&&(r.current=e),"function"==typeof r&&r(e))}),[r]),V=void 0!==m&&!1!==m;return e(s,function(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}(h({"aria-label":!V&&w?c||w:c,"aria-labelledby":u,"aria-describedby":n,as:!g&&x?"a":"button",onKeyDown:x?e=>{" "===e.key&&(e.preventDefault(),null==H||H.click())}:void 0,onClick:e=>{var t;null==H||H.focus({preventScroll:!0}),L?null==M||null===(t=M(W))||void 0===t||t(e):W&&W(e)},draggable:!1,buttonType:q,disabled:g,destructive:j,isWhite:v,type:x?void 0:"button",iconType:w,size:A,px:null!=S?S:Q,m:k,noWrap:T,iconOnly:!V&&!!w,iconPosition:F,target:B,rel:z,fullWidth:G},p("button",E),E,x&&{href:x}),{ref:U,children:e(y.Provider,{value:{isInsideButton:!0,isColouredSurface:"primary"===q},children:O({iconType:w,iconPosition:F,size:A,subtext:D,children:m,disabled:g})})}))}));j.displayName="Button";export{j as default};

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

@@ -0,0 +1,4 @@
+import { ButtonTypes, ButtonIconPosition, SizeOptions } from "./button.component";
+export declare const BUTTON_VARIANTS: ButtonTypes[];
+export declare const BUTTON_SIZES: SizeOptions[];
+export declare const BUTTON_ICON_POSITIONS: ButtonIconPosition[];

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

@@ -0,0 +1 @@
+const r=["primary","secondary","tertiary","darkBackground","gradient-white","gradient-grey"],e=["small","medium","large"],a=["before","after"];export{a as BUTTON_ICON_POSITIONS,e as BUTTON_SIZES,r as BUTTON_VARIANTS};

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

@@ -0,0 +1,11 @@
+import { SpaceProps } from "styled-system";
+import { ButtonProps } from "./button.component";
+declare const StyledButton: import("styled-components").StyledComponent<"button", any, {
+    theme: object;
+} & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<ButtonProps, "buttonType"> & {
+    iconOnly?: boolean;
+    buttonType: Required<ButtonProps>["buttonType"];
+}, "theme">;
+export declare const StyledButtonSubtext: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledButtonMainText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export default StyledButton;

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

@@ -0,0 +1 @@
+import t,{css as e}from"styled-components";import{space as n}from"styled-system";import i from"../icon/icon.style.js";import o from"../../style/themes/apply-base-theme.js";import r from"../../style/utils/add-focus-styling.js";import s from"./button-types.style.js";function a({iconOnly:t,disabled:n,buttonType:i,size:o,destructive:r,isWhite:a}){return e(["",";"," "," "," ",""],s(n,r,a)[i],"small"===o&&e(["font-size:var(--fontSizes100);min-height:32px;"]),"medium"===o&&e(["font-size:var(--fontSizes100);min-height:40px;"]),"large"===o&&e(["font-size:var(--fontSizes200);min-height:48px;"]),t&&function(t){let e="";switch(t){case"small":e="32px";break;case"large":e="48px";break;default:e="40px"}return`\n    padding: 0px; \n    width: ${e}; \n    min-height: ${e};\n  `}(o))}const l=t.button.attrs(o).withConfig({displayName:"button.style__StyledButton",componentId:"carbon_v162_12_0__sc-7eccfb5e-0"})([""," "," "," ",""],n,(({disabled:t,noWrap:n})=>e(["align-items:center;cursor:",";display:inline-flex;",";justify-content:center;vertical-align:middle;outline-offset:0;border:2px solid transparent;box-sizing:border-box;font-weight:500;text-decoration:none;border-radius:var(--borderRadius400);&:focus{","}",""],t?"not-allowed":"pointer",n?"white-space: nowrap":"flex-flow: wrap",r(),a)),(({fullWidth:t})=>t&&e(["width:100%;"])),(({iconOnly:t,iconPosition:n,iconType:o})=>e(["","{"," "," height:",";width:20px;svg{margin-top:0;}}"],i,t&&e(["margin-left:auto;margin-right:auto;margin-bottom:1px;"]),!t&&e(["margin-bottom:0px;"," ",""],"after"===n&&"\n          margin-left: var(--spacing100);\n          margin-right: 0px;\n        ","before"===n&&"\n          margin-left: 0px;\n          margin-right: var(--spacing100);\n        "),function(t){return"services"===t?"6px":"20px"}(o)))),p=t.span.withConfig({displayName:"button.style__StyledButtonSubtext",componentId:"carbon_v162_12_0__sc-7eccfb5e-1"})(["font-size:14px;font-weight:400;display:block;"]),c=t.span.withConfig({displayName:"button.style__StyledButtonMainText",componentId:"carbon_v162_12_0__sc-7eccfb5e-2"})(["display:flex;align-items:center;"]);export{c as StyledButtonMainText,p as StyledButtonSubtext,l as default};

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

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

package/esm/components/button/index.js

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

package/esm/components/button-bar/__internal__/button-bar.context.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface ButtonBarContextProps {
+    /** Apply fullWidth style to the button bar */
+    fullWidth?: boolean;
+    /** Defines an Icon position for buttons: "before" | "after" */
+    iconPosition?: "before" | "after";
+    /** Assigns a size to the buttons: "small" | "medium" | "large" */
+    size?: "small" | "medium" | "large";
+    /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" */
+    buttonType?: "primary" | "secondary" | "primary";
+}
+declare const _default: React.Context<ButtonBarContextProps>;
+export default _default;

package/esm/components/button-bar/__internal__/button-bar.context.js

@@ -0,0 +1 @@
+import t from"react";var e=t.createContext({});export{e as default};

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { SpaceProps } from "styled-system";
+import { ButtonBarContextProps } from "./__internal__/button-bar.context";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+/**
+ * @deprecated `ButtonBar` has been deprecated. See the Carbon documentation for migration details.
+ */
+export interface ButtonBarProps extends ButtonBarContextProps, SpaceProps, TagProps {
+    /** Button or IconButton Elements, to be rendered inside the component */
+    children: React.ReactNode;
+}
+/**
+ * @deprecated `ButtonBar` has been deprecated. See the Carbon documentation for migration details.
+ */
+export declare const ButtonBar: {
+    ({ children, size, iconPosition, fullWidth, ...rest }: ButtonBarProps): React.JSX.Element;
+    displayName: string;
+};
+export default ButtonBar;

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

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import"react";import t from"./button-bar.style.js";import r from"./__internal__/button-bar.context.js";import n from"../../__internal__/utils/helpers/tags/tags.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}const i=i=>{var c,l,{children:u,size:s="medium",iconPosition:b="before",fullWidth:f=!1}=i,a=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}(i,["children","size","iconPosition","fullWidth"]);return e(t,(c=function(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}({},a,n("button-bar",a)),l=null!=(l={fullWidth:f,size:s,children:e(r.Provider,{value:{buttonType:"secondary",size:s,iconPosition:b,fullWidth:f},children:u})})?l:{},Object.getOwnPropertyDescriptors?Object.defineProperties(c,Object.getOwnPropertyDescriptors(l)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(l)).forEach((function(e){Object.defineProperty(c,e,Object.getOwnPropertyDescriptor(l,e))})),c))};i.displayName="ButtonBar";export{i as ButtonBar,i as default};

package/esm/components/button-bar/button-bar.config.d.ts

@@ -0,0 +1,2 @@
+export declare const BUTTON_BAR_SIZES: readonly ["small", "medium", "large"];
+export declare const BUTTON_BAR_ICON_POSITIONS: readonly ["before", "after"];

package/esm/components/button-bar/button-bar.config.js

@@ -0,0 +1 @@
+const e=["small","medium","large"],r=["before","after"];export{r as BUTTON_BAR_ICON_POSITIONS,e as BUTTON_BAR_SIZES};

package/esm/components/button-bar/button-bar.style.d.ts

@@ -0,0 +1,6 @@
+import { SpaceProps } from "styled-system";
+import { ButtonBarProps } from "./button-bar.component";
+declare const StyledButtonBar: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+} & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Pick<ButtonBarProps, "size" | "fullWidth">, "theme">;
+export default StyledButtonBar;

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

@@ -0,0 +1 @@
+import o,{css as r}from"styled-components";import{space as t}from"styled-system";import i from"../../style/themes/apply-base-theme.js";import d from"../icon/icon.style.js";import a from"../icon-button/icon-button.style.js";const s=o.div.attrs(i).withConfig({displayName:"button-bar.style__StyledButtonBar",componentId:"carbon_v162_12_0__sc-488d349-0"})([""," ",""],t,(({fullWidth:o,size:t})=>r([""," button{margin:0;position:relative;&:not(:first-child):not(:last-child){border-radius:var(--borderRadius000);}&:first-child:not(:last-child){border-top-right-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius000);}&:last-child:not(:first-child){border-top-left-radius:var(--borderRadius000);border-bottom-left-radius:var(--borderRadius000);}&:not(:first-of-type){margin-left:-2px;}&:not(:disabled){z-index:1;}&:hover:not(:disabled){z-index:2;}&:focus{z-index:3;}}",":not(:disabled){border:2px solid var(--colorsActionMajor500);&:focus{border-right-color:var(--colorsActionMajor500);}&:hover{background-color:var(--colorsActionMajor600);border-color:var(--colorsActionMajor600);color:var(--colorsActionMajorYang100);}","{color:var(--colorsActionMajor500);&:hover{color:var(--colorsActionMajorYang100);}}}",":disabled{border:2px solid var(--colorsActionDisabled500);}"],o&&r(["width:100%;display:flex;button{box-sizing:content-box;padding:0;width:100%;"," "," ","}"],"small"===t&&"min-height: 28px","medium"===t&&"min-height: 36px","large"===t&&"min-height: 44px"),a,d,a)));export{s as default};

package/esm/components/button-bar/index.d.ts

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

package/esm/components/button-bar/index.js

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

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { ButtonProps } from "../button";
+/**
+ * @deprecated `ButtonMinor` has been deprecated. See the Carbon documentation for migration details.
+ */
+export interface ButtonMinorProps extends ButtonProps {
+    /** @private @ignore */
+    isInPassword?: boolean;
+}
+/**
+ * @deprecated `ButtonMinor` has been deprecated. See the Carbon documentation for migration details.
+ */
+export declare const ButtonMinor: React.ForwardRefExoticComponent<ButtonMinorProps & React.RefAttributes<HTMLButtonElement>>;
+export default ButtonMinor;

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

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import e,{useContext as r}from"react";import n from"./button-minor.style.js";import o from"../button-bar/__internal__/button-bar.context.js";function i(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}const u=e.forwardRef(((e,u)=>{var{buttonType:l="secondary",disabled:c=!1,destructive:f=!1,size:b="medium",iconPosition:a="before",fullWidth:s=!1}=e,p=function(t,e){if(null==t)return{};var r,n,o=function(t,e){if(null==t)return{};var r,n,o={},i=Object.keys(t);for(n=0;n<i.length;n++)r=i[n],e.indexOf(r)>=0||(o[r]=t[r]);return o}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n<i.length;n++)r=i[n],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(o[r]=t[r])}return o}(e,["buttonType","disabled","destructive","size","iconPosition","fullWidth"]);const{buttonType:d,size:m,iconPosition:y,fullWidth:O}=r(o);return t(n,function(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),n.forEach((function(e){i(t,e,r[e])}))}return t}({ref:u,"data-component":"button-minor",size:m||b,fullWidth:O||s,iconPosition:y||a,buttonType:d||l,disabled:c,destructive:f},p))}));u.displayName="ButtonMinor";export{u as ButtonMinor,u as default};