carbon-react 125.9.3 → 125.11.0

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

@@ -0,0 +1,285 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StepFlow = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _icon = _interopRequireDefault(require("../icon"));
+var _iconButton = _interopRequireDefault(require("../icon-button"));
+var _stepFlow = require("./step-flow.style");
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
+var _typography = _interopRequireDefault(require("../typography"));
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const StepFlow = exports.StepFlow = /*#__PURE__*/(0, _react.forwardRef)(({
+  category,
+  title,
+  titleVariant,
+  totalSteps,
+  currentStep,
+  showProgressIndicator = false,
+  showCloseIcon = false,
+  onDismiss,
+  ...rest
+}, ref) => {
+  const totalStepsArray = Array.from({
+    length: totalSteps
+  }, (_, index) => index + 1);
+  const validatedCurrentStep = currentStep > totalSteps ? totalSteps : currentStep;
+  let currentStepWarnTriggered = false;
+  let noRefWarnTriggered = false;
+
+  /* eslint-disable no-console */
+  if (!currentStepWarnTriggered && currentStep > totalSteps) {
+    currentStepWarnTriggered = true;
+    console.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.");
+  }
+  if (!noRefWarnTriggered && !ref) {
+    noRefWarnTriggered = true;
+    console.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.");
+  }
+  const progressIndicators = totalStepsArray.map(step => {
+    const generateDataState = () => {
+      if (step === validatedCurrentStep) {
+        return "in-progress";
+      }
+      if (step < validatedCurrentStep) {
+        return "is-completed";
+      }
+      return "not-completed";
+    };
+    return /*#__PURE__*/_react.default.createElement(_stepFlow.StyledProgressIndicator, {
+      key: step,
+      "aria-hidden": "true",
+      "data-element": "progress-indicator",
+      isCompleted: step < validatedCurrentStep,
+      isInProgress: step === validatedCurrentStep,
+      "data-state": generateDataState()
+    }, "\xA0");
+  });
+  const locale = (0, _useLocale.default)();
+  const closeIcon = /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+    "data-element": "close",
+    "aria-label": locale.stepFlow.closeIconAriaLabel?.(),
+    onClick: onDismiss
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "close"
+  }));
+  const titleRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    focus() {
+      titleRef.current?.focus();
+    }
+  }), []);
+  const stepFlowTitle = /*#__PURE__*/_react.default.createElement(_stepFlow.StyledTitleFocusWrapper, {
+    "data-element": "title-text-wrapper",
+    tabIndex: -1,
+    ref: titleRef
+  }, /*#__PURE__*/_react.default.createElement(_typography.default, {
+    variant: titleVariant || "h1",
+    "data-element": "title-text"
+  }, /*#__PURE__*/_react.default.createElement(_typography.default, {
+    fontWeight: "900",
+    fontSize: "var(--fontSizes600)",
+    lineHeight: "var(--sizing375)",
+    variant: "span",
+    "aria-hidden": "true",
+    "data-element": "visible-title-text"
+  }, title), /*#__PURE__*/_react.default.createElement(_typography.default, {
+    variant: "span",
+    "data-element": "visually-hidden-title-text",
+    screenReaderOnly: true
+  }, locale.stepFlow.screenReaderOnlyTitle(title, validatedCurrentStep, totalSteps, category))));
+  const stepFlowLabel = /*#__PURE__*/_react.default.createElement(_typography.default, {
+    variant: "span",
+    fontWeight: "400",
+    fontSize: "var(--fontSizes200)",
+    lineHeight: "var(--sizing300)",
+    "data-element": "step-label",
+    "aria-hidden": "true"
+  }, locale.stepFlow.stepLabel(validatedCurrentStep, totalSteps));
+  return /*#__PURE__*/_react.default.createElement(_stepFlow.StyledStepFlow, _extends({}, rest, (0, _tags.default)("step-flow", rest)), /*#__PURE__*/_react.default.createElement(_stepFlow.StyledStepContent, null, category ? /*#__PURE__*/_react.default.createElement(_stepFlow.StyledStepContentText, null, /*#__PURE__*/_react.default.createElement(_typography.default, {
+    fontWeight: "500",
+    fontSize: "var(--fontSizes100)",
+    lineHeight: "var(--sizing250)",
+    variant: "span",
+    "data-element": "category-text",
+    "aria-hidden": "true"
+  }, category), stepFlowTitle) : stepFlowTitle, showCloseIcon ? closeIcon : null), showProgressIndicator ? /*#__PURE__*/_react.default.createElement(_stepFlow.StyledStepLabelAndProgress, null, stepFlowLabel, /*#__PURE__*/_react.default.createElement(_stepFlow.StyledProgressIndicatorBar, {
+    "data-element": "progress-indicator-bar"
+  }, progressIndicators)) : stepFlowLabel);
+});
+StepFlow.propTypes = {
+  "category": _propTypes.default.string,
+  "children": _propTypes.default.node,
+  "currentStep": _propTypes.default.oneOf([1, 2, 3, 4, 5, 6, 7, 8]).isRequired,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "onDismiss": _propTypes.default.func,
+  "showCloseIcon": _propTypes.default.bool,
+  "showProgressIndicator": _propTypes.default.bool,
+  "title": _propTypes.default.string.isRequired,
+  "titleVariant": _propTypes.default.oneOf(["h1", "h2"]),
+  "totalSteps": _propTypes.default.oneOf([1, 2, 3, 4, 5, 6, 7, 8]).isRequired
+};
+var _default = exports.default = StepFlow;

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

@@ -0,0 +1,12 @@
+declare const StyledStepFlow: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledStepContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledStepContentText: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledTitleFocusWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledStepLabelAndProgress: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledProgressIndicatorBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface StyledProgressIndicatorProps {
+    isCompleted: boolean;
+    isInProgress: boolean;
+}
+declare const StyledProgressIndicator: import("styled-components").StyledComponent<"span", any, StyledProgressIndicatorProps, never>;
+export { StyledStepFlow, StyledStepContent, StyledStepContentText, StyledTitleFocusWrapper, StyledStepLabelAndProgress, StyledProgressIndicatorBar, StyledProgressIndicator, };

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTitleFocusWrapper = exports.StyledStepLabelAndProgress = exports.StyledStepFlow = exports.StyledStepContentText = exports.StyledStepContent = exports.StyledProgressIndicatorBar = exports.StyledProgressIndicator = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledSystem = require("styled-system");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledStepFlow = exports.StyledStepFlow = _styledComponents.default.div`
+  ${_styledSystem.margin}
+`;
+const StyledStepContent = exports.StyledStepContent = _styledComponents.default.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--sizing200);
+`;
+const StyledStepContentText = exports.StyledStepContentText = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+`;
+const StyledTitleFocusWrapper = exports.StyledTitleFocusWrapper = _styledComponents.default.div``;
+const StyledStepLabelAndProgress = exports.StyledStepLabelAndProgress = _styledComponents.default.div`
+  margin-top: var(--sizing125);
+`;
+const StyledProgressIndicatorBar = exports.StyledProgressIndicatorBar = _styledComponents.default.div`
+  display: flex;
+  margin-top: var(--sizing100);
+`;
+function calculateProgressIndicatorColor({
+  isCompleted,
+  isInProgress
+}) {
+  if (isInProgress) {
+    return "var(--colorsUtilityYin090)";
+  }
+  if (isCompleted) {
+    return "var(--colorsSemanticPositive500)";
+  }
+  return "var(--colorsActionDisabled600)";
+}
+const StyledProgressIndicator = exports.StyledProgressIndicator = _styledComponents.default.span`
+  background-color: ${calculateProgressIndicatorColor};
+  width: 100%;
+  height: 8px;
+  border-radius: 8px;
+  margin-right: 12px;
+`;

package/lib/components/typography/index.d.ts

@@ -1,4 +1,4 @@
 export { default } from "./typography.component";
 export { List, ListItem } from "./list.component";
-export type { TypographyProps } from "./typography.component";
+export type { TypographyProps, VariantTypes } from "./typography.component";
 export type { ListProps, ListItemProps } from "./list.component";

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

@@ -55,9 +55,11 @@ export interface TypographyProps extends SpaceProps, TagProps {
      * Override the default color of the rendered element to match disabled styling
      * */
     isDisabled?: boolean;
+    /** @private @ignore Set whether the component should be recognised by assistive technologies */
+    "aria-hidden"?: "true" | "false";
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, ...rest }: TypographyProps): React.JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: TypographyProps): React.JSX.Element;
     displayName: string;
 };
 export default Typography;

package/lib/components/typography/typography.component.js

@@ -37,6 +37,7 @@ const Typography = ({
   className,
   screenReaderOnly,
   isDisabled,
+  "aria-hidden": ariaHidden,
   ...rest
 }) => {
   return /*#__PURE__*/_react.default.createElement(_typography.default, _extends({
@@ -61,7 +62,8 @@ const Typography = ({
     opacity: opacity,
     className: className,
     screenReaderOnly: screenReaderOnly,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    "aria-hidden": ariaHidden
   }, (0, _tags.default)(dataComponent, rest), (0, _utils.filterStyledSystemMarginProps)(rest), (0, _utils.filterStyledSystemPaddingProps)(rest)), children);
 };
 exports.Typography = Typography;

package/lib/locales/__internal__/pl-pl.js

@@ -184,6 +184,11 @@ const plPL = {
   splitButton: {
     ariaLabel: () => "Pokaż więcej"
   },
+  stepFlow: {
+    stepLabel: (currentStep, totalSteps) => `Krok ${currentStep} z ${totalSteps}`,
+    screenReaderOnlyTitle: (title, currentStep, totalSteps, category) => `${category ? `${category}.` : ""}. ${title}. Krok ${currentStep} of ${totalSteps}.`,
+    closeIconAriaLabel: () => "Zamknij"
+  },
   switch: {
     on: () => "WŁ",
     off: () => "WYŁ"

package/lib/locales/en-gb.js

@@ -148,6 +148,11 @@ const enGB = {
   splitButton: {
     ariaLabel: () => "Show more"
   },
+  stepFlow: {
+    stepLabel: (currentStep, totalSteps) => `Step ${currentStep} of ${totalSteps}`,
+    screenReaderOnlyTitle: (title, currentStep, totalSteps, category) => `${category ? `${category}.` : ""} ${title}. Step ${currentStep} of ${totalSteps}.`,
+    closeIconAriaLabel: () => "Close"
+  },
   switch: {
     on: () => "ON",
     off: () => "OFF"

package/lib/locales/locale.d.ts

@@ -121,6 +121,11 @@ interface Locale {
         on: () => string;
         off: () => string;
     };
+    stepFlow: {
+        stepLabel: (currentStep: number, totalSteps: number) => string;
+        screenReaderOnlyTitle: (title: string, currentStep: number, totalSteps: number, category?: string) => string;
+        closeIconAriaLabel?: () => string;
+    };
     textEditor: {
         tooltipMessages: {
             bold: () => string;

package/lib/style/design-tokens/debug-theme.util.d.ts

@@ -52,6 +52,7 @@ declare const _default: {
         colorsActionMinor500: string;
         colorsActionMinor550: string;
         colorsActionMinor600: string;
+        colorsActionMinor700: string;
         colorsActionMinor850: string;
         colorsActionMinor900: string;
         colorsActionMinor025: string;
@@ -62,6 +63,7 @@ declare const _default: {
         colorsActionMinorYin065: string;
         colorsActionMinorYin090: string;
         colorsActionMinorYang100: string;
+        colorsActionMinorGray700: string;
         colorsActionDisabled400: string;
         colorsActionDisabled500: string;
         colorsActionDisabled600: string;
@@ -81,6 +83,7 @@ declare const _default: {
         colorsSemanticFocus250: string;
         colorsSemanticFocus500: string;
         colorsSemanticFocusTransparent: string;
+        colorsSemanticPositive400: string;
         colorsSemanticPositive500: string;
         colorsSemanticPositive600: string;
         colorsSemanticPositiveTransparent: string;
@@ -144,6 +147,8 @@ declare const _default: {
         colorsReadOnly500: string;
         colorsReadOnly600: string;
         colorsComponentsLeftnavWinterStandardBackground: string;
+        colorsComponentsLeftnavWinterStandardBackgroundChild: string;
+        colorsComponentsLeftnavWinterStandardDividerOnDark: string;
         colorsComponentsLeftnavWinterStandardHover: string;
         colorsComponentsLeftnavWinterStandardSelected: string;
         colorsComponentsLeftnavWinterStandardContent: string;
@@ -237,14 +242,21 @@ declare const _default: {
         sizing450: string;
         sizing500: string;
         sizing525: string;
+        sizing550: string;
         sizing600: string;
         sizing700: string;
         sizing800: string;
         sizing900: string;
         sizing1000: string;
+        sizing1100: string;
         sizing1200: string;
         sizing1300: string;
+        sizing1500: string;
         sizing1600: string;
+        sizing2000: string;
+        sizing2500: string;
+        sizing3000: string;
+        sizing7000: string;
         sizing010: string;
         sizing025: string;
         sizing050: string;
@@ -268,6 +280,7 @@ declare const _default: {
         spacing000: string;
         spacing010: string;
         spacing025: string;
+        spacing035: string;
         spacing050: string;
         spacing060: string;
         spacing075: string;
@@ -275,6 +288,7 @@ declare const _default: {
         spacingNeg025: string;
         spacingNeg050: string;
         spacingNeg075: string;
+        spacingNeg100: string;
         borderWidth100: string;
         borderWidth200: string;
         borderWidth300: string;
@@ -403,6 +417,11 @@ declare const _default: {
         typographyLinkTextFocusS: string;
         typographyLinkTextFocusM: string;
         typographyLinkTextFocusL: string;
+        typographyLoaderMessageXs: string;
+        typographyLoaderMessageS: string;
+        typographyLoaderMessageM: string;
+        typographyLoaderMessageL: string;
+        typographyLoaderMessageXl: string;
         typographyMenuLabelM: string;
         typographyMenuLabelL: string;
         typographyMenuSegmentTitleM: string;
@@ -410,6 +429,11 @@ declare const _default: {
         typographyMessageHeadingL: string;
         typographyMessageTextM: string;
         typographyMessageTextL: string;
+        typographyNoteEditorNameM: string;
+        typographyNoteDateM: string;
+        typographyNoteParagraphM: string;
+        typographyNoteParagraphListM: string;
+        typographyNoteTitleM: string;
         typographyPageStateTitleM: string;
         typographyPageStateSubtitleM: string;
         typographyPageStateParagraphM: string;
@@ -481,11 +505,6 @@ declare const _default: {
         typographyTileSubscriptionPriceM: string;
         typographyTooltipTextM: string;
         typographyTooltipTextL: string;
-        typographyNoteEditorNameM: string;
-        typographyNoteDateM: string;
-        typographyNoteParagraphM: string;
-        typographyNoteParagraphListM: string;
-        typographyNoteTitleM: string;
         opacity300: string;
         opacity600: string;
         opacity800: string;

package/lib/style/themes/sage/index.d.ts

@@ -52,6 +52,7 @@ declare const _default: {
         colorsActionMinor500: string;
         colorsActionMinor550: string;
         colorsActionMinor600: string;
+        colorsActionMinor700: string;
         colorsActionMinor850: string;
         colorsActionMinor900: string;
         colorsActionMinor025: string;
@@ -62,6 +63,7 @@ declare const _default: {
         colorsActionMinorYin065: string;
         colorsActionMinorYin090: string;
         colorsActionMinorYang100: string;
+        colorsActionMinorGray700: string;
         colorsActionDisabled400: string;
         colorsActionDisabled500: string;
         colorsActionDisabled600: string;
@@ -81,6 +83,7 @@ declare const _default: {
         colorsSemanticFocus250: string;
         colorsSemanticFocus500: string;
         colorsSemanticFocusTransparent: string;
+        colorsSemanticPositive400: string;
         colorsSemanticPositive500: string;
         colorsSemanticPositive600: string;
         colorsSemanticPositiveTransparent: string;
@@ -144,6 +147,8 @@ declare const _default: {
         colorsReadOnly500: string;
         colorsReadOnly600: string;
         colorsComponentsLeftnavWinterStandardBackground: string;
+        colorsComponentsLeftnavWinterStandardBackgroundChild: string;
+        colorsComponentsLeftnavWinterStandardDividerOnDark: string;
         colorsComponentsLeftnavWinterStandardHover: string;
         colorsComponentsLeftnavWinterStandardSelected: string;
         colorsComponentsLeftnavWinterStandardContent: string;
@@ -237,14 +242,21 @@ declare const _default: {
         sizing450: string;
         sizing500: string;
         sizing525: string;
+        sizing550: string;
         sizing600: string;
         sizing700: string;
         sizing800: string;
         sizing900: string;
         sizing1000: string;
+        sizing1100: string;
         sizing1200: string;
         sizing1300: string;
+        sizing1500: string;
         sizing1600: string;
+        sizing2000: string;
+        sizing2500: string;
+        sizing3000: string;
+        sizing7000: string;
         sizing010: string;
         sizing025: string;
         sizing050: string;
@@ -268,6 +280,7 @@ declare const _default: {
         spacing000: string;
         spacing010: string;
         spacing025: string;
+        spacing035: string;
         spacing050: string;
         spacing060: string;
         spacing075: string;
@@ -275,6 +288,7 @@ declare const _default: {
         spacingNeg025: string;
         spacingNeg050: string;
         spacingNeg075: string;
+        spacingNeg100: string;
         borderWidth100: string;
         borderWidth200: string;
         borderWidth300: string;
@@ -403,6 +417,11 @@ declare const _default: {
         typographyLinkTextFocusS: string;
         typographyLinkTextFocusM: string;
         typographyLinkTextFocusL: string;
+        typographyLoaderMessageXs: string;
+        typographyLoaderMessageS: string;
+        typographyLoaderMessageM: string;
+        typographyLoaderMessageL: string;
+        typographyLoaderMessageXl: string;
         typographyMenuLabelM: string;
         typographyMenuLabelL: string;
         typographyMenuSegmentTitleM: string;
@@ -410,6 +429,11 @@ declare const _default: {
         typographyMessageHeadingL: string;
         typographyMessageTextM: string;
         typographyMessageTextL: string;
+        typographyNoteEditorNameM: string;
+        typographyNoteDateM: string;
+        typographyNoteParagraphM: string;
+        typographyNoteParagraphListM: string;
+        typographyNoteTitleM: string;
         typographyPageStateTitleM: string;
         typographyPageStateSubtitleM: string;
         typographyPageStateParagraphM: string;
@@ -481,11 +505,6 @@ declare const _default: {
         typographyTileSubscriptionPriceM: string;
         typographyTooltipTextM: string;
         typographyTooltipTextL: string;
-        typographyNoteEditorNameM: string;
-        typographyNoteDateM: string;
-        typographyNoteParagraphM: string;
-        typographyNoteParagraphListM: string;
-        typographyNoteTitleM: string;
         opacity300: string;
         opacity600: string;
         opacity800: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "125.9.3",
+  "version": "125.11.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -74,7 +74,7 @@
     "@dlgshi/cypress-plugin-designtokens": "^0.0.1-development",
     "@playwright/experimental-ct-react17": "~1.36.2",
     "@playwright/test": "~1.36.2",
-    "@sage/design-tokens": "~4.17.0",
+    "@sage/design-tokens": "~4.29.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
@@ -126,10 +126,8 @@
     "cypress": "~12.13.0",
     "cypress-axe": "^1.5.0",
     "cypress-each": "^1.13.3",
-    "cypress-mochawesome-reporter": "^3.7.0",
     "cypress-plugin-tab": "^1.0.5",
     "cypress-real-events": "^1.11.0",
-    "cypress-split": "^1.17.1",
     "cz-conventional-changelog": "^3.3.0",
     "date-fns-tz": "^1.3.8",
     "draft-js": "^0.11.7",