carbon-react 162.12.0-beta.1 → 162.13.0

package/esm/components/simple-color-picker/simple-color/simple-color.component.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+export interface SimpleColorProps {
+    /** the value of the label to pass to screen reader software */
+    "aria-label"?: string;
+    /** the value of the color that is represented by this SimpleColor */
+    value: string;
+    /** the input name */
+    name?: string;
+    /** the input id */
+    id?: string;
+    /** if true, input will be disabled */
+    disabled?: boolean;
+    /** called when the user selects or deselects this color option */
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Prop for `onBlur` events */
+    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Prop for `onMouseDown` events */
+    onMouseDown?: (ev: React.MouseEvent<HTMLInputElement>) => void;
+    /** determines if this color option is selected or unselected */
+    checked?: boolean;
+    /** determines if this color option is selected or unselected when component is used as uncontrolled */
+    defaultChecked?: boolean;
+    /**
+     * @private
+     * @ignore
+     * @internal
+     * Sets className for component. INTERNAL USE ONLY. */
+    className?: string;
+}
+export declare const SimpleColor: React.ForwardRefExoticComponent<SimpleColorProps & React.RefAttributes<HTMLInputElement>>;
+export default SimpleColor;

package/esm/components/simple-color-picker/simple-color/simple-color.component.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import t,{useRef as o}from"react";import n from"../../../__internal__/utils/helpers/guid/index.js";import l from"../../../__internal__/utils/helpers/tags/tags.js";import{StyledSimpleColor as c,StyledSimpleColorInput as a,StyledColorSampleBox as i,StyledTickIcon as s}from"./simple-color.style.js";function u(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]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){u(e,r,t[r])}))}return e}const f=t.forwardRef(((t,u)=>{const{onChange:f,onBlur:b,onMouseDown:m,value:O,name:y,checked:j=!1,id:d,className:g,"aria-label":h}=t,w=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},l=Object.keys(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(t,["onChange","onBlur","onMouseDown","value","name","checked","id","className","aria-label"]),{current:P}=o(d||n());return e(c,(v=p({className:g},l("simple-color",t)),_=null!=(_={children:[r(a,p({onChange:f,onBlur:b,onMouseDown:m,checked:j,name:y,"aria-label":h,type:"radio",role:"radio",value:O,ref:u,id:P},w)),r(i,{color:O,children:j&&r(s,{color:O,type:"tick"})})]})?_:{},Object.getOwnPropertyDescriptors?Object.defineProperties(v,Object.getOwnPropertyDescriptors(_)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(_)).forEach((function(e){Object.defineProperty(v,e,Object.getOwnPropertyDescriptor(_,e))})),v));var v,_}));f.displayName="SimpleColor";export{f as SimpleColor,f as default};

package/esm/components/simple-color-picker/simple-color/simple-color.style.d.ts

@@ -0,0 +1,8 @@
+export declare const StyledSimpleColor: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledColorSampleBox: import("styled-components").StyledComponent<"div", any, {
+    color: string;
+}, never>;
+export declare const StyledSimpleColorInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../__internal__/legacy-input").InputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>, any, {}, never>;
+export declare const StyledTickIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
+    color: string;
+}, never>;

package/esm/components/simple-color-picker/simple-color/simple-color.style.js

@@ -0,0 +1 @@
+import o,{css as t}from"styled-components";import i from"../../../__internal__/legacy-input/input.component.js";import"react/jsx-runtime";import"react";import"../../../__internal__/legacy-input/input-presentation.style.js";import"../../carbon-provider/__internal__/new-validation.context.js";import e from"./checker-board.svg";import r from"../../icon/icon.component.js";import"../../icon/icon.style.js";import n from"../../../style/utils/get-rgb-values.js";import s from"../../../style/utils/add-focus-styling.js";const l=o.div.withConfig({displayName:"simple-color.style__StyledSimpleColor",componentId:"carbon_v162_12_0__sc-303f1be7-0"})(["width:var(--sizing700);height:var(--sizing700);margin-right:2px;margin-bottom:2px;&:hover{cursor:pointer;}"]),c=o.div.withConfig({displayName:"simple-color.style__StyledColorSampleBox",componentId:"carbon_v162_12_0__sc-303f1be7-1"})(["height:100%;width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;"," ",""],(({color:o})=>"transparent"!==o&&t(["background-color:",";"],o)),(({color:o})=>"transparent"===o&&t(['background-color:#eeeeee;background-image:url("','");background-size:14px 14px;background-position:-2px -2px;'],e))),a=o(i).withConfig({displayName:"simple-color.style__StyledSimpleColorInput",componentId:"carbon_v162_12_0__sc-303f1be7-2"})(["position:absolute;opacity:0;height:var(--sizing700);width:var(--sizing700);margin:0;&:hover{cursor:pointer;}&:disabled:hover{cursor:not-allowed;}&:focus + ","{","}"],c,s(!0)),p=o(r).withConfig({displayName:"simple-color.style__StyledTickIcon",componentId:"carbon_v162_12_0__sc-303f1be7-3"})(["height:20px;width:20px;pointer-events:none;display:block;&::before{font-size:20px;color:",";}"],(({color:o})=>(o=>{const t=n(o),[i,e,r]=t;return(Math.round(299*i)+Math.round(587*e)+Math.round(114*r))/1e3<128?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)"})(o)));export{c as StyledColorSampleBox,l as StyledSimpleColor,a as StyledSimpleColorInput,p as StyledTickIcon};

package/esm/components/simple-color-picker/simple-color-picker.component.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+import { ValidationProps } from "../../__internal__/validations";
+export interface SimpleColorPickerProps extends ValidationProps, MarginProps, TagProps {
+    /** The SimpleColor components to be rendered in the group */
+    children?: React.ReactNode;
+    /** prop that represents childWidth */
+    childWidth?: string | number;
+    /** The content for the Legend */
+    legend: string;
+    /** prop that sets max-width in css */
+    maxWidth?: string | number;
+    /** The name to apply to the input. */
+    name: string;
+    /** Prop for `onChange` events */
+    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Prop for `onKeyDown` events */
+    onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Prop for `onBlur` events */
+    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Flag to configure component as mandatory */
+    required?: boolean;
+    /** When true, validation icon will be placed on legend instead of being placed by the input */
+    validationOnLegend?: boolean;
+    /** The currently selected color. */
+    value: string;
+}
+export interface SimpleColorPickerRef {
+    /** List of color input HTML refs */
+    gridItemRefs: (HTMLInputElement | null)[];
+}
+export declare const SimpleColorPicker: React.ForwardRefExoticComponent<SimpleColorPickerProps & React.RefAttributes<SimpleColorPickerRef>>;
+export default SimpleColorPicker;

package/esm/components/simple-color-picker/simple-color-picker.component.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useMemo as n,useRef as o,useState as i,useImperativeHandle as l,useCallback as a}from"react";import u from"invariant";import s from"../../__internal__/utils/helpers/events/events.js";import p from"../../__internal__/utils/helpers/tags/tags.js";import c from"../../__internal__/fieldset/fieldset.component.js";import{SimpleColor as d}from"./simple-color/simple-color.component.js";import m from"../../__internal__/radio-button-mapper/radio-button-mapper.component.js";import{StyledContent as f,StyledColorOptions as y}from"./simple-color-picker.style.js";import{ValidationIcon as g}from"../../__internal__/validations/validation-icon.component.js";import{InputGroupContext as h}from"../../__internal__/input-behaviour/input-group-behaviour.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import b from"../../style/utils/filter-styled-system-margin-props.js";function v(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){v(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 w=r.forwardRef(((v,w)=>{const{children:_,error:P,warning:D,info:K,name:C,legend:E,onChange:S,onBlur:k,onKeyDown:x,value:A,maxWidth:L=300,childWidth:M=58,validationOnLegend:W,required:R}=v,q=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}(v,["children","error","warning","info","name","legend","onChange","onBlur","onKeyDown","value","maxWidth","childWidth","validationOnLegend","required"]),B=n((()=>!r.Children.toArray(_).find((e=>"string"==typeof e||r.isValidElement(e)&&"SimpleColor"!==e.type.displayName))),[_]);u(B,`SimpleColorPicker accepts only children of type \`${d.displayName}\`.`);const I=n((()=>r.Children.toArray(_).filter((e=>r.isValidElement(e)))),[_]),N=o(null),[U,V]=i(null),F=Math.floor(+L/+M),T=Math.ceil((null==I?void 0:I.length)/F);let $=F*T-(null==I?void 0:I.length),z=1,G=1;const H=o([]),J=I.map(((e,t)=>{const n=1!==z;let o,i,l=!1;z+1===T&&$-F<0?(l=!0,$+=1):z+1!==T&&z!==T&&T>1&&(l=!0),G===F&&(G=0,z+=1),n&&(o=t-F),l&&(i=F+t);const a={ref:e=>{H.current[t]=e},"data-up":n,"data-down":l,"data-item-up":o,"data-item-down":i,required:R};return G+=1,r.cloneElement(e,a)}));l(w,(()=>({gridItemRefs:H.current})),[H]);const Q=a((e=>J.findIndex((t=>e.getAttribute("value")===t.props.value))),[J]),X=a((e=>{if(x&&x(e),![s.isLeftKey(e),s.isUpKey(e),s.isRightKey(e),s.isDownKey(e)].includes(!0))return;e.preventDefault();let t=null;const r=e.target;if(s.isUpKey(e)){if("true"!==r.getAttribute("data-up"))return;t=+r.getAttribute("data-item-up")}else if(s.isDownKey(e)){if("true"!==r.getAttribute("data-down"))return;t=+r.getAttribute("data-item-down")}if((s.isLeftKey(e)||s.isRightKey(e))&&(t=s.isLeftKey(e)?Q(r)-1:Q(r)+1,t<0?t=J.length-1:t>J.length-1&&(t=0)),null!==t){const e=H.current[t];null==e||e.focus(),null==e||e.click()}}),[x,J,Q]),Y=e=>{e.preventDefault(),setTimeout((()=>{var t;const r=!(null==H||null===(t=H.current)||void 0===t?void 0:t.find((e=>e===document.activeElement)));k&&r&&k(e)}),5)},Z=e=>{null!==U&&U===e.target?e.preventDefault():null!==U?(e.preventDefault(),V(e.target)):V(e.target)},ee={error:P,warning:D,info:K};return e(c,j(O({role:"radiogroup",legend:E,isRequired:R},W&&ee,p("simple-color-picker",v),b(q)),{children:t(f,{children:[e(h.Consumer,{children:({onMouseEnter:t,onMouseLeave:r})=>e(y,j(O({maxWidth:L,childWidth:M,ref:N,onMouseEnter:t,onMouseLeave:r},ee),{children:e(m,{name:C,value:A,onChange:S,onMouseDown:Z,onKeyDown:X,onBlur:Y,children:J})}))}),!W&&e(g,j(O({},ee),{tooltipFlipOverrides:["top","bottom"]}))]})}))}));w.displayName="SimpleColorPicker";export{w as SimpleColorPicker,w as default};

package/esm/components/simple-color-picker/simple-color-picker.style.d.ts

@@ -0,0 +1,9 @@
+import { ValidationProps } from "../../__internal__/validations";
+type Width = string | number;
+declare const StyledContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface StyledColorOptionsProps extends ValidationProps {
+    maxWidth: Width;
+    childWidth: Width;
+}
+declare const StyledColorOptions: import("styled-components").StyledComponent<"div", any, StyledColorOptionsProps, never>;
+export { StyledContent, StyledColorOptions };

package/esm/components/simple-color-picker/simple-color-picker.style.js

@@ -0,0 +1 @@
+import o,{css as i}from"styled-components";import e from"../../__internal__/validations/validation-icon.style.js";const r=o.div.withConfig({displayName:"simple-color-picker.style__StyledContent",componentId:"carbon_v162_12_0__sc-e2fee886-0"})(["display:flex;align-items:center;","{margin-left:4px;}"],e),t=o.div.withConfig({displayName:"simple-color-picker.style__StyledColorOptions",componentId:"carbon_v162_12_0__sc-e2fee886-1"})(["max-width:","px;padding:0;display:flex;flex-wrap:wrap;border-left:","px solid transparent;border-top:","px solid transparent;",""],(({maxWidth:o,childWidth:i})=>((o,i)=>Math.floor(+o/+i)*+i)(o,i)),2,2,(({error:o,info:e,warning:r})=>o?i(["outline:var(--borderWidth200) solid var(--colorsSemanticNegative500);"]):r?i(["outline:var(--borderWidth200) solid var(--colorsSemanticCaution500);"]):e?i(["outline:var(--borderWidth200) solid var(--colorsSemanticInfo500);"]):""));export{t as StyledColorOptions,r as StyledContent};

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

@@ -0,0 +1,7 @@
+import React from "react";
+export interface SplitButtonContextProps {
+    inSplitButton: boolean;
+    onChildButtonClick?: (childOnClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>) => React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement> | undefined;
+}
+declare const _default: React.Context<SplitButtonContextProps>;
+export default _default;

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+type StyledSplitButtonToggleProps = {
+    $displayed: boolean;
+    $size: "small" | "medium" | "large";
+    isWhite?: boolean;
+};
+declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, Omit<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    $allowMotion?: boolean;
+    $inverse?: boolean;
+    $fullWidth?: boolean;
+    $noWrap?: boolean;
+    $iconOnly?: boolean;
+}, "size" | "variantType" | "variant"> & {
+    $size: import("../button/__next__/button.config").Size;
+    $variant: import("../button/__next__/button.config").Variant;
+    $variantType: import("../button/__next__/button.config").VariantType;
+    $align?: "left" | "right";
+} & StyledSplitButtonToggleProps, never>;
+export default StyledSplitButtonToggle;

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

@@ -0,0 +1 @@
+import t,{css as o}from"styled-components";import{StyledButton as a}from"../button/__next__/button.style.js";import e from"../icon/icon.style.js";const i={small:"var(--global-size-s)",medium:"var(--global-size-m)",large:"var(--global-size-l)"},l=t(a).attrs((({isWhite:t})=>({$inverse:t}))).withConfig({displayName:"split-button-toggle.style__StyledSplitButtonToggle",componentId:"carbon_v162_12_0__sc-431c5b6f-0"})(["",""],(({$displayed:t,$size:a,isWhite:l})=>o(["border-top-left-radius:var(--global-size-none);border-bottom-left-radius:var(--global-size-none);",' position:relative;&::before{content:"";width:var(--global-size-6-xs);height:calc(100% + var(--global-size-5-xs));background:var(--button-typical-primary-label-default);position:absolute;left:-2px;z-index:2;}width:',";min-height:",";height:100%;padding:var(--global-space-none);"],t?o(["&:not(:disabled){background-color:",";border-color:",";&,","{color:var(--button-typical-primary-label-active);}}"],l?"var(--button-typical-secondary-bg-active)":"var(--button-typical-primary-bg-active)",l?"var(--button-typical-secondary-bg-active)":"var(--button-typical-primary-bg-active)",e):"",i[a],i[a])));export{l as default};

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

@@ -0,0 +1,50 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { IconType } from "../icon";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, MarginProps, TagProps {
+    /**
+     * @deprecated This prop is deprecated and has no effect. It will be removed in a future release.
+     */
+    align?: "left" | "right";
+    /**
+     * @deprecated This prop is deprecated and has no effect. It will be removed in a future release.
+     * SplitButton only supports the primary variant. */
+    buttonType?: "primary" | "secondary";
+    /** The additional button to display. */
+    children: React.ReactNode;
+    /** Prop to specify an aria-label for the component */
+    "aria-label"?: string;
+    /** Gives the button a disabled state. */
+    disabled?: boolean;
+    /** Defines an Icon position within the button: "before" | "after" */
+    iconPosition?: "before" | "after";
+    /** Defines an Icon type within the button */
+    iconType?: IconType;
+    /** Set the width of the menu. Defaults to the width of the SplitButton. */
+    menuWidth?: string;
+    /** The size of the buttons. */
+    size?: "small" | "medium" | "large";
+    /**
+     * @deprecated This prop is no longer supported on this component.
+     * Second text child, renders under main text, only when size is "large" */
+    subtext?: string;
+    /** The text to be displayed in the main button. */
+    text: string;
+    /**
+     * @deprecated This prop is deprecated and will be removed in a future release.
+     * Renders the white variant of the secondary split button */
+    isWhite?: boolean;
+    /**
+     * @deprecated This prop is deprecated and will be removed in a future release.
+     * Sets rendering position of menu. */
+    position?: "left" | "right";
+}
+export type SplitButtonHandle = {
+    /** Programmatically focus the main button */
+    focusMainButton: () => void;
+    /** Programmatically focus the toggle button. */
+    focusToggleButton: () => void;
+} | null;
+export declare const SplitButton: React.ForwardRefExoticComponent<SplitButtonProps & React.RefAttributes<SplitButtonHandle>>;
+export default SplitButton;

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

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as n,useState as o,useRef as r,useContext as i,useImperativeHandle as l,useCallback as a,useEffect as p}from"react";import m from"../icon/icon.component.js";import"../icon/icon.style.js";import{Button as s}from"../button/__next__/button.component.js";import u,{StyledBackdrop as c,StyledPopoverMenuWrapper as d}from"./split-button.style.js";import f from"./split-button-toggle.style.js";import b from"../../__internal__/popover-menu/popover-menu.component.js";import"../../__internal__/popover-menu/menu-item/menu-item.component.js";import"../../__internal__/popover-menu/menu-item/menu-item-content/menu-item-leading.component.js";import"../../__internal__/popover-menu/menu-item/menu-item-content/menu-item-label.component.js";import"../../__internal__/popover-menu/menu-item/menu-item-content/menu-item-subtext.component.js";import"../../__internal__/popover-menu/menu-item/menu-item-divider/menu-item-divider.component.js";import"../../__internal__/popover-menu/menu-item/menu-item-heading/menu-item-heading.component.js";import _ from"../../__internal__/utils/helpers/combine-refs/index.js";import"../../style/utils/filter-styled-system-padding-props.js";import y from"../../style/utils/filter-styled-system-margin-props.js";import j from"../../style/utils/filter-out-styled-system-spacing-props.js";import v from"../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js";import g from"./__internal__/split-button.context.js";import O from"../../hooks/__internal__/useLocale/useLocale.js";import h from"../flat-table/__internal__/flat-table.context.js";function P(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function k(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),o.forEach((function(t){P(e,t,n[t])}))}return e}function x(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 n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const w=n(((n,P)=>{var{align:w,position:S="right",buttonType:T="primary",children:C,disabled:W=!1,iconPosition:B="before",iconType:E,menuWidth:L,onClick:z,size:M="medium",subtext:D,text:$,"data-element":F,"data-role":A,"aria-label":I,isWhite:R}=n,H=function(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(n,["align","position","buttonType","children","disabled","iconPosition","iconType","menuWidth","onClick","size","subtext","text","data-element","data-role","aria-label","isWhite"]);const q=O(),[G,J]=o(!1),K=r(null),N=r(null),Q=r(null),U=r(null),{isInFlatTable:V}=i(h),X="secondary"===T&&R;l(P,(()=>({focusMainButton(){var e;null===(e=K.current)||void 0===e||e.focus()},focusToggleButton(){var e;null===(e=N.current)||void 0===e||e.focus()}})),[]);const Y=a((()=>{J(!1)}),[]),Z=a((()=>{J(!0)}),[]);p((()=>{if(!V)return;const e=e=>{e.target instanceof HTMLElement&&"popup-backdrop"===e.target.dataset.role&&G&&Y()};return document.addEventListener("click",e),()=>{document.removeEventListener("click",e)}}),[Y,V,G]);const ee=()=>{G?Y():Z()},te=a((e=>t=>{var n;null==e||e(t),Y(),null===(n=N.current)||void 0===n||n.focus()}),[Y]);v((()=>Y()));const ne={inSplitButton:!0,onChildButtonClick:te};return e(u,x(k({"data-component":"split-button","data-element":F,"data-role":A,ref:Q},y(H)),{children:[V&&G&&t(c,{"data-role":"popup-backdrop","data-testid":"popup-backdrop"}),t(s,x(k({"data-element":"main-button",ref:K,size:M,iconType:E,disabled:W,variantType:T,iconPosition:B,onClick:e=>{null==z||z(e),G&&Y()},isWhite:X},j(H)),{children:$})),t(g.Provider,{value:ne,children:t(d,{ref:U,children:t(b,{open:G,onOpen:Z,onClose:Y,size:M,placement:"left"===S?"bottom-start":"bottom-end",isButtonMenu:!0,controlReference:Q,matchReferenceWidth:!0,popoverStrategy:"fixed",width:L,popoverControl:(e,n)=>{const o=_(e,N);return t(f,x(k({},n),{"aria-label":I||q.splitButton.ariaLabel(),"data-element":"toggle-button",type:"button",ref:o,disabled:W,$displayed:G,$size:M,$variant:"default",$variantType:T,onClick:ee,isWhite:X,children:t(m,{type:"dropdown"})}))},children:C})})})]}))}));export{w as SplitButton,w as default};

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

@@ -0,0 +1,7 @@
+declare const StyledSplitButton: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+}, "theme">;
+declare const StyledPopoverMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default StyledSplitButton;
+export { StyledPopoverMenuWrapper, StyledBackdrop };

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

@@ -0,0 +1 @@
+import t from"styled-components";import{margin as o}from"styled-system";import{StyledButton as e}from"../button/__next__/button.style.js";import i from"../../style/themes/apply-base-theme.js";const n=t.div.attrs(i).withConfig({displayName:"split-button.style__StyledSplitButton",componentId:"carbon_v162_12_0__sc-c579ef15-0"})([""," display:inline-flex;align-items:stretch;position:relative;& > ",":first-of-type{border-top-right-radius:var(--global-size-none);border-bottom-right-radius:var(--global-size-none);}& > ","{margin:var(--global-space-none);&:focus{position:relative;z-index:1;}}"],o,e,e),s=t.div.withConfig({displayName:"split-button.style__StyledPopoverMenuWrapper",componentId:"carbon_v162_12_0__sc-c579ef15-1"})(["display:flex;align-items:stretch;"]),r=t.div.withConfig({displayName:"split-button.style__StyledBackdrop",componentId:"carbon_v162_12_0__sc-c579ef15-2"})(["position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--carbon-zindex-small-overlay);background-color:transparent;"]);export{r as StyledBackdrop,s as StyledPopoverMenuWrapper,n as default};

package/esm/components/step-flow/__internal__/step-flow.context.d.ts

@@ -0,0 +1,9 @@
+export type StepFlowContextType = {
+    validatedCurrentStep?: number;
+    totalSteps?: number;
+    titleVariant?: "h1" | "h2";
+    category?: string;
+    titleRef?: React.RefObject<HTMLDivElement>;
+};
+declare const StepFlowProvider: import("react").Provider<StepFlowContextType | null>, useStepFlowContext: () => StepFlowContextType;
+export { StepFlowProvider, useStepFlowContext };

package/esm/components/step-flow/__internal__/step-flow.context.js

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

package/esm/components/step-flow/index.d.ts

@@ -0,0 +1,3 @@
+export { default as StepFlow } from "./step-flow.component";
+export { default as StepFlowTitle } from "./step-flow-title/step-flow-title.component";
+export type { StepFlowProps, StepFlowHandle, Steps, } from "./step-flow.component";

package/esm/components/step-flow/index.js

@@ -0,0 +1 @@
+export{StepFlow}from"./step-flow.component.js";export{StepFlowTitle}from"./step-flow-title/step-flow-title.component.js";

package/esm/components/step-flow/step-flow-title/step-flow-title.component.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface StepFlowTitleProps {
+    /** The title of the current step.  */
+    titleString: string;
+    /** Set the variant of the internal 'Typography' component which contains the title.
+     * However, despite the chosen variant the styling will always be overridden.
+     */
+    titleVariant?: "h1" | "h2";
+    /** Override the screen reader only title with any additional context or information.
+     * If not provided, only the `titleString` prop will be used.
+     */
+    screenReaderOnlyTitle?: string;
+}
+export declare const StepFlowTitle: ({ titleString, titleVariant, screenReaderOnlyTitle, }: StepFlowTitleProps) => React.JSX.Element;
+export default StepFlowTitle;

package/esm/components/step-flow/step-flow-title/step-flow-title.component.js

@@ -0,0 +1 @@
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import"react";import{Typography as r}from"../../typography/typography.component.js";import a from"../../../hooks/__internal__/useLocale/useLocale.js";import{useStepFlowContext as i}from"../__internal__/step-flow.context.js";const l=({titleString:l,titleVariant:n,screenReaderOnlyTitle:o})=>{const d=a(),{titleRef:p,validatedCurrentStep:s,totalSteps:c,category:m,titleVariant:h}=i();return t("div",{"data-role":"title-text-wrapper","data-element":"title-text-wrapper",tabIndex:-1,ref:p,children:e(r,{variant:"h2",as:n||h||"h1","data-element":"title-text",children:[t("span",{"aria-hidden":"true",children:l}),s&&c&&t(r,{variant:"span","data-element":"visually-hidden-title-text","data-role":"visually-hidden-title-text",screenReaderOnly:!0,children:d.stepFlow.screenReaderOnlyTitle(o||l,s,c,m)})]})})};export{l as StepFlowTitle,l as default};

package/esm/components/step-flow/step-flow.component.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export type Steps = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+interface StepFlowAriaProps {
+    /** Prop to specify the aria-label of the component */
+    "aria-label"?: string;
+    /** Prop to specify the aria-labelledby of the component */
+    "aria-labelledby"?: string;
+    /** Prop to specify the aria-describedby of the component */
+    "aria-describedby"?: string;
+}
+export interface StepFlowProps extends StepFlowAriaProps, MarginProps, TagProps {
+    /**
+     * A category for the user journey.
+     * @deprecated This prop is deprecated and will be removed in a future release.
+     */
+    category?: string;
+    /**
+     * The title of the current step, this can be a string or a valid React node
+     * which contains the `<StepFlowTitle />` component as a descendant.
+     */
+    title: React.ReactNode;
+    /**
+     * Set the variant of the internal 'Typography' component which contains the title.
+     * However, despite the chosen variant the styling will always be overridden.
+     */
+    titleVariant?: "h1" | "h2";
+    /** The total steps in the user journey.  */
+    totalSteps: Steps;
+    /**
+     * The current step of the user journey. If the set `currentStep` is higher than
+     * `totalSteps`the value of `currentStep` will be that of `totalSteps` instead.
+     */
+    currentStep: Steps;
+    /** Determines if the progress indicator is shown. */
+    showProgressIndicator?: boolean;
+    /** Determines if the close icon button is shown */
+    showCloseIcon?: boolean;
+    /** Callback function invoked when the close icon button is clicked */
+    onDismiss?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+}
+export type StepFlowHandle = {
+    /** Programmatically focus on root container of Dialog. */
+    focus: () => void;
+} | null;
+export declare const StepFlow: React.ForwardRefExoticComponent<StepFlowProps & React.RefAttributes<StepFlowHandle>>;
+export default StepFlow;

package/esm/components/step-flow/step-flow.component.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{forwardRef as r,useRef as o,useImperativeHandle as n}from"react";import{StyledProgressIndicator as a,StyledStepFlow as l,StyledStepContent as i,StyledStepLabel as s,StyledProgressIndicatorWrapper as c}from"./step-flow.style.js";import p from"../../__internal__/utils/helpers/tags/tags.js";import u from"../../__internal__/utils/logger/index.js";import d from"../../hooks/__internal__/useLocale/useLocale.js";import{StepFlowProvider as b}from"./__internal__/step-flow.context.js";import{StepFlowTitle as f}from"./step-flow-title/step-flow-title.component.js";import m from"../icon/icon.component.js";import"../icon/icon.style.js";import{Button as y}from"../button/__next__/button.component.js";function g(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}let h=!1,O=!1;const j=r(((r,j)=>{var w,v,{category:S,title:_,titleVariant:P="h1",totalSteps:I,currentStep:k,showProgressIndicator:x=!1,showCloseIcon:D=!1,onDismiss:A,"aria-label":C,"aria-labelledby":L,"aria-describedby":N}=r,E=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(r,["category","title","titleVariant","totalSteps","currentStep","showProgressIndicator","showCloseIcon","onDismiss","aria-label","aria-labelledby","aria-describedby"]);const F=d(),R=o(null),V=Array.from({length:I},((e,t)=>t+1)),G=k>I?I:k;!h&&k>I&&(h=!0,u.warn("[WARNING] The `currentStep` prop should not be higher than the `totalSteps`prop in `StepFlow`. Please ensure `currentStep`s value does not exceed that of `totalSteps`, in the meantime we have set `currentStep` value to that of `totalSteps`, and all indicators have been marked as completed.")),O||j||(O=!0,u.warn("[WARNING] A `ref` should be provided to ensure focus is programmatically focused back to a title div, this ensures screen reader users are informed regarding any changes and can navigate back down the page.")),n(j,(()=>({focus(){var e;null===(e=R.current)||void 0===e||e.focus()}})),[]);const T=e(b,{value:{validatedCurrentStep:G,totalSteps:I,titleVariant:P,category:S,titleRef:R},children:"string"==typeof _?e(f,{titleString:_}):_}),W=e(y,{"data-element":"close","aria-label":null===(w=(v=F.stepFlow).closeIconAriaLabel)||void 0===w?void 0:w.call(v),onClick:e=>null==A?void 0:A(e),variantType:"subtle",size:"small",children:e(m,{type:"close"})}),$=V.map((t=>e(a,{"data-role":"progress-indicator","data-element":"progress-indicator",$isCompleted:t<G,$isInProgress:t===G},t)));return t(l,(z=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){g(e,t,r[t])}))}return e}({role:"group","aria-label":C,"aria-describedby":N,"aria-labelledby":L},E,p("step-flow",E)),q=null!=(q={children:[t(i,{children:[S&&e("span",{"aria-hidden":"true",children:S}),T,e(s,{"aria-hidden":"true",children:F.stepFlow.stepLabel(G,I)}),x&&e(c,{"data-element":"progress-indicator-bar","data-role":"progress-indicator-bar","aria-hidden":"true",children:$})]}),D?W:null]})?q:{},Object.getOwnPropertyDescriptors?Object.defineProperties(z,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(z,e,Object.getOwnPropertyDescriptor(q,e))})),z));var z,q}));export{j as StepFlow,j as default};

package/esm/components/step-flow/step-flow.style.d.ts

@@ -0,0 +1,10 @@
+export declare const StyledStepFlow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledStepContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledProgressIndicatorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledStepLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+interface StyledProgressIndicatorProps {
+    $isCompleted: boolean;
+    $isInProgress: boolean;
+}
+export declare const StyledProgressIndicator: import("styled-components").StyledComponent<"div", any, StyledProgressIndicatorProps, never>;
+export {};

package/esm/components/step-flow/step-flow.style.js

@@ -0,0 +1 @@
+import e,{css as o}from"styled-components";import{margin as a}from"styled-system";const l=e.div.withConfig({displayName:"step-flow.style__StyledStepFlow",componentId:"carbon_v162_12_0__sc-dbef19ae-0"})(["display:flex;gap:var(--global-space-comp-l);align-items:flex-start;",""],a),s=e.div.withConfig({displayName:"step-flow.style__StyledStepContent",componentId:"carbon_v162_12_0__sc-dbef19ae-1"})(["display:flex;flex-direction:column;gap:var(--global-space-comp-xs);flex:1 0 0;"]),r=e.div.withConfig({displayName:"step-flow.style__StyledProgressIndicatorWrapper",componentId:"carbon_v162_12_0__sc-dbef19ae-2"})(["display:flex;padding:var(--global-space-comp-xs) 0;gap:var(--global-space-comp-l);"]),t=e.span.withConfig({displayName:"step-flow.style__StyledStepLabel",componentId:"carbon_v162_12_0__sc-dbef19ae-3"})(["color:var(--progress-label-alt);font:var(--global-font-static-body-regular-l);"]),d=e.div.withConfig({displayName:"step-flow.style__StyledProgressIndicator",componentId:"carbon_v162_12_0__sc-dbef19ae-4"})(["",""],(({$isCompleted:e,$isInProgress:a})=>o(["width:100%;height:var(--global-size-4-xs);border-radius:var(--global-radius-container-xs);"," "," ",""],!e&&!a&&o(["background:var(--progress-stepflow-bg-default);box-shadow:inset 0 0 0 var(--global-borderwidth-xs) var(--progress-stepflow-border-default);"]),a&&o(["background-color:var(--progress-stepflow-bg-active);outline:var(--global-borderwidth-s) solid var(--progress-stepindicator-border-active-outer);outline-offset:var(--global-borderwidth-s);"]),e&&o(["background-color:var(--progress-stepflow-bg-complete);"]))));export{d as StyledProgressIndicator,r as StyledProgressIndicatorWrapper,s as StyledStepContent,l as StyledStepFlow,t as StyledStepLabel};

package/esm/components/step-sequence/__internal__/step-sequence.context.d.ts

@@ -0,0 +1,6 @@
+interface StepSequenceContextType {
+    orientation: "horizontal" | "vertical";
+    size: "small" | "medium";
+}
+declare const StepSequenceProvider: import("react").Provider<StepSequenceContextType | null>, useStepSequenceContext: () => StepSequenceContextType;
+export { StepSequenceProvider, useStepSequenceContext };

package/esm/components/step-sequence/__internal__/step-sequence.context.js

@@ -0,0 +1 @@
+import e from"../../../__internal__/utils/createStrictContext/createStrictContext.js";const[t,o]=e({name:"StepSequenceContext",errorMessage:"Carbon StepSequence: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",defaultValue:{orientation:"horizontal",size:"medium"}});export{t as StepSequenceProvider,o as useStepSequenceContext};

package/esm/components/step-sequence/index.d.ts

@@ -0,0 +1,4 @@
+export { default as StepSequence } from "./step-sequence.component";
+export type { StepSequenceProps } from "./step-sequence.component";
+export { default as StepSequenceItem } from "./step-sequence-item";
+export type { StepSequenceItemProps } from "./step-sequence-item";

package/esm/components/step-sequence/index.js

@@ -0,0 +1 @@
+export{StepSequence}from"./step-sequence.component.js";export{StepSequenceItem}from"./step-sequence-item/step-sequence-item.component.js";

package/esm/components/step-sequence/step-sequence-item/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./step-sequence-item.component";
+export type { StepSequenceItemProps } from "./step-sequence-item.component";

package/esm/components/step-sequence/step-sequence-item/index.js

@@ -0,0 +1 @@
+export{StepSequenceItem as default}from"./step-sequence-item.component.js";

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.component.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface StepSequenceItemProps extends TagProps {
+    /**
+     * Aria label for the step item.
+     * @deprecated Please use native `aria-label` attribute instead.
+     */
+    ariaLabel?: string;
+    /** Accessible label for the step item. */
+    "aria-label"?: string;
+    /** Hidden accessible label to be rendered if item is complete. */
+    hiddenCompleteLabel?: string;
+    /** Hidden accessible label to be rendered if item is current. */
+    hiddenCurrentLabel?: string;
+    /** Indicator for the step. */
+    indicator: string;
+    /**
+     * Flag to hide the indicator for incomplete steps.
+     * @deprecated Indicators will always be shown on incomplete steps.
+     */
+    hideIndicator?: boolean;
+    /** Status for the step item. */
+    status?: "complete" | "current" | "incomplete";
+    /**
+     * Content to render as the item's title.
+     * @deprecated Please use the `title` prop instead.
+     */
+    children?: React.ReactNode;
+    /** Title for the step item */
+    title?: string;
+    /** Description for the step item, rendered below the title. */
+    description?: string;
+}
+export declare const StepSequenceItem: ({ hideIndicator: _hideIndicator, indicator, status, hiddenCompleteLabel, hiddenCurrentLabel, children, ariaLabel: deprecatedArialLabel, "aria-label": ariaLabel, title, description, ...rest }: StepSequenceItemProps) => React.JSX.Element;
+export default StepSequenceItem;

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.component.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as r}from"react";import{StyledStepSequenceItem as n,StyledIndicatorWrapper as i,StepLine as o,StyledIndicator as c,StyledTitleWrapper as l,StyledTitle as a,StyledDescription as s}from"./step-sequence-item.style.js";import p from"../../icon/icon.component.js";import"../../icon/icon.style.js";import{Typography as u}from"../../typography/typography.component.js";import{useStepSequenceContext as m}from"../__internal__/step-sequence.context.js";import d from"../../../__internal__/utils/helpers/tags/tags.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}const f=f=>{var{hideIndicator:y,indicator:O,status:h="incomplete",hiddenCompleteLabel:j,hiddenCurrentLabel:g,children:$,ariaLabel:P,"aria-label":w,title:v,description:z}=f,_=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(f,["hideIndicator","indicator","status","hiddenCompleteLabel","hiddenCurrentLabel","children","ariaLabel","aria-label","title","description"]);const S=r(null),{orientation:L,size:x}=m(),k="small"===x?"medium":"large";return e(n,(q=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){b(e,t,r[t])}))}return e}({$orientation:L,$size:x,"aria-label":w||P,ref:S},_,d("step-sequence-item",_)),C=null!=(C={className:"step-sequence-item",children:[j&&"complete"===h?t(u,{screenReaderOnly:!0,children:j}):g&&"current"===h?t(u,{screenReaderOnly:!0,children:g}):null,e(i,{$orientation:L,children:["horizontal"===L&&t(o,{className:"line-before",$orientation:L,$isGreen:"incomplete"!==h,$roundedSide:"right"}),t(c,{className:"step-indicator",$size:x,$status:h,children:"complete"===h?t(p,{type:"tick_circle",size:k}):O}),t(o,{className:"line-after",$orientation:L,$isGreen:"complete"===h,$size:x,$roundedSide:"left"})]}),e(l,{$size:x,$orientation:L,children:[t(a,{$size:x,children:v||$}),z&&t(s,{$size:x,children:z})]})]})?C:{},Object.getOwnPropertyDescriptors?Object.defineProperties(q,Object.getOwnPropertyDescriptors(C)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(C)).forEach((function(e){Object.defineProperty(q,e,Object.getOwnPropertyDescriptor(C,e))})),q));var q,C};export{f as StepSequenceItem,f as default};

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.style.d.ts

@@ -0,0 +1,32 @@
+import { StepSequenceProps } from "../step-sequence.component";
+import { StepSequenceItemProps } from "./step-sequence-item.component";
+interface StyledStepSequenceProps {
+    $orientation?: StepSequenceProps["orientation"];
+    $size: "small" | "medium";
+}
+export declare const StyledStepSequenceItem: import("styled-components").StyledComponent<"li", any, StyledStepSequenceProps, never>;
+interface StyledIndicatorProps {
+    $status?: StepSequenceItemProps["status"];
+    $size: "small" | "medium";
+}
+export declare const StyledIndicator: import("styled-components").StyledComponent<"span", any, StyledIndicatorProps, never>;
+interface StyledIndicatorWrapperProps {
+    $orientation?: StepSequenceProps["orientation"];
+    $status?: StepSequenceItemProps["status"];
+}
+export declare const StyledIndicatorWrapper: import("styled-components").StyledComponent<"div", any, StyledIndicatorWrapperProps, never>;
+interface StepLineProps {
+    $orientation?: StepSequenceProps["orientation"];
+    $isGreen?: boolean;
+    $size?: "small" | "medium";
+    $roundedSide?: "left" | "right";
+}
+export declare const StepLine: import("styled-components").StyledComponent<"div", any, StepLineProps, never>;
+interface StyledTitleProps {
+    $orientation?: StepSequenceProps["orientation"];
+    $size: "small" | "medium";
+}
+export declare const StyledTitle: import("styled-components").StyledComponent<"span", any, StyledTitleProps, never>;
+export declare const StyledDescription: import("styled-components").StyledComponent<"span", any, StyledTitleProps, never>;
+export declare const StyledTitleWrapper: import("styled-components").StyledComponent<"div", any, StyledTitleProps, never>;
+export {};

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.style.js

@@ -0,0 +1 @@
+import e,{css as t}from"styled-components";const i={small:{indicatorFont:"var(--global-font-static-comp-medium-m)",indicatorSize:"var(--global-size-xs)",indicatorBorderWidth:"var(--global-borderwidth-s)",itemGap:"var(--global-space-comp-m)",itemMinWidth:"var(--global-size-xl)",labelFont:"var(--global-font-static-subheading-m)",descriptionFont:"var(--global-font-static-comp-regular-m)",labelWrapperPadding:"var(--global-space-comp-xs)"},medium:{indicatorFont:"var(--global-font-static-comp-medium-l)",indicatorSize:"var(--global-size-s)",indicatorBorderWidth:"var(--global-borderwidth-m)",itemGap:"var(--global-space-comp-l)",itemMinWidth:"var(--global-size-2-xl)",labelFont:"var(--global-font-static-subheading-l)",descriptionFont:"var(--global-font-static-comp-regular-l)",labelWrapperPadding:"var(--global-space-comp-s)"}},a=e.li.withConfig({displayName:"step-sequence-item.style__StyledStepSequenceItem",componentId:"carbon_v162_12_0__sc-a1e387ab-0"})(["",""],(({$size:e,$orientation:a})=>t(["display:flex;list-style-type:none;max-width:720px;gap:",";"," ",""],i[e].itemGap,"horizontal"===a&&t(["flex:1 0 0;flex-direction:column;align-items:flex-start;justify-content:center;min-width:",";"],i[e].itemMinWidth),"vertical"===a&&t(["box-sizing:border-box;min-height:72px;padding:var(--global-space-comp-s) 0 var(--global-space-comp-l) 0;"])))),o=e.span.withConfig({displayName:"step-sequence-item.style__StyledIndicator",componentId:"carbon_v162_12_0__sc-a1e387ab-1"})(["",""],(({$status:e,$size:a})=>t(["display:flex;position:relative;justify-content:center;align-items:center;border-radius:var(--global-radius-container-circle);font:",";min-height:",";min-width:",";"," "," ",""],i[a].indicatorFont,i[a].indicatorSize,i[a].indicatorSize,"incomplete"===e&&t(["color:var(--progress-stepindicator-label-default);box-shadow:inset 0 0 0 "," var(--progress-stepindicator-border-default);"],i[a].indicatorBorderWidth),"current"===e&&t(["color:var(--progress-stepindicator-label-active);background-color:var(--progress-stepindicator-bg-active);outline:"," solid var(--progress-stepindicator-border-active-outer);outline-offset:",";"],i[a].indicatorBorderWidth,i[a].indicatorBorderWidth),"complete"===e&&t(["color:var(--progress-stepindicator-bg-complete);"])))),r=e.div.withConfig({displayName:"step-sequence-item.style__StyledIndicatorWrapper",componentId:"carbon_v162_12_0__sc-a1e387ab-2"})(["",""],(({$orientation:e})=>t(["display:grid;"," ",""],"horizontal"===e&&t(["width:100%;align-items:center;grid-template-columns:1fr auto 1fr;grid-template-rows:1fr;grid-column-gap:var(--global-space-comp-s);"]),"vertical"===e&&t(["position:relative;height:inherit;justify-content:center;grid-template-columns:auto;grid-template-rows:auto 1fr;"])))),l=e.div.withConfig({displayName:"step-sequence-item.style__StepLine",componentId:"carbon_v162_12_0__sc-a1e387ab-3"})(["",""],(({$orientation:e,$isGreen:a,$size:o,$roundedSide:r})=>t(["background-color:var(--progress-stepindicator-border-default);"," "," "," .step-sequence-item:last-child &.line-after{background-color:transparent;}"],a&&t(["background-color:var(--progress-stepindicator-border-success);"]),"horizontal"===e&&t(["height:2px;"," .step-sequence-item:first-child &.line-before{background-color:transparent;}"],r&&t(["",":var(--global-radius-action-2-xs);",":var(--global-radius-action-2-xs);"],`border-top-${r}-radius`,`border-bottom-${r}-radius`)),"vertical"===e&&o&&t(["position:absolute;border-radius:var(--global-radius-action-2-xs);width:2px;height:calc( 100% - "," - var(--global-space-comp-s) + var(--global-space-comp-l) );top:calc("," + var(--global-space-comp-s));left:calc(("," / 2) - 1px);"],i[o].indicatorSize,i[o].indicatorSize,i[o].indicatorSize)))),n=e.span.withConfig({displayName:"step-sequence-item.style__StyledTitle",componentId:"carbon_v162_12_0__sc-a1e387ab-4"})(["",""],(({$size:e})=>t(["color:var(--progress-label-default);font:",";"],i[e].labelFont))),s=e.span.withConfig({displayName:"step-sequence-item.style__StyledDescription",componentId:"carbon_v162_12_0__sc-a1e387ab-5"})(["",""],(({$size:e})=>t(["color:var(--progress-label-alt);font:",";"],i[e].descriptionFont))),c=e.div.withConfig({displayName:"step-sequence-item.style__StyledTitleWrapper",componentId:"carbon_v162_12_0__sc-a1e387ab-6"})(["",""],(({$size:e,$orientation:a})=>t(["box-sizing:border-box;display:flex;flex-direction:column;"," ",""],"horizontal"===a&&t(["width:100%;text-align:center;padding:0px ",";"],i[e].labelWrapperPadding),"vertical"===a&&t(["padding-top:var(--global-space-comp-2-xs);"]))));export{l as StepLine,s as StyledDescription,o as StyledIndicator,r as StyledIndicatorWrapper,a as StyledStepSequenceItem,n as StyledTitle,c as StyledTitleWrapper};

package/esm/components/step-sequence/step-sequence.component.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { SpaceProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface StepSequenceProps extends SpaceProps, TagProps {
+    /** Step sequence items to be rendered. */
+    children: React.ReactNode;
+    /** Orientation of the component. */
+    orientation?: "horizontal" | "vertical";
+    /** The size of the component. */
+    size?: "small" | "medium";
+}
+export declare const StepSequence: ({ children, orientation, size, ...props }: StepSequenceProps) => React.JSX.Element;
+export default StepSequence;

package/esm/components/step-sequence/step-sequence.component.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import"react";import t from"../../__internal__/utils/helpers/tags/tags.js";import r from"./step-sequence.style.js";import{StepSequenceProvider as n}from"./__internal__/step-sequence.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}const i=i=>{var c,l,{children:s,orientation:u="horizontal",size:p="medium"}=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","orientation","size"]);return e(r,(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}({$orientation:u},a,t("step-sequence",a)),l=null!=(l={children:e(n,{value:{orientation:u,size:p},children:s})})?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))};export{i as StepSequence,i as default};

package/esm/components/step-sequence/step-sequence.style.d.ts

@@ -0,0 +1,8 @@
+import { StepSequenceProps } from "./step-sequence.component";
+interface StyledStepSequenceProps {
+    $orientation: StepSequenceProps["orientation"];
+}
+declare const StyledStepSequence: import("styled-components").StyledComponent<"ol", any, {
+    theme: object;
+} & StyledStepSequenceProps, "theme">;
+export default StyledStepSequence;

package/esm/components/step-sequence/step-sequence.style.js

@@ -0,0 +1 @@
+import e,{css as t}from"styled-components";import{space as s}from"styled-system";import o from"../../style/themes/apply-base-theme.js";const a=e.ol.attrs(o).withConfig({displayName:"step-sequence.style__StyledStepSequence",componentId:"carbon_v162_12_0__sc-efc9a3ac-0"})(["display:flex;align-items:flex-start;margin:0;padding:0;"," ",""],(({$orientation:e})=>"vertical"===e&&t(["flex-direction:column;height:100%;"])),s);export{a as default};

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

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

package/esm/components/switch/index.js

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