@kaizen/components 0.0.0-canary-toast-notification-fix-20240822034045 → 0.0.0-canary-workflow-export-20240910075656

package/dist/cjs/__future__/Select/subcomponents/ListBox/ListBox.cjs

@@ -21,8 +21,7 @@ var ListBox = function (_a) {
   var state = SelectContext.useSelectContext().state;
   var ref = React__default.default.useRef(null);
   var listBoxProps = listbox.useListBox(tslib.__assign(tslib.__assign({}, menuProps), {
-    disallowEmptySelection: true,
-    autoFocus: "first"
+    disallowEmptySelection: true
   }), state, ref).listBoxProps;
   return React__default.default.createElement("ul", tslib.__assign({
     ref: ref,

package/dist/cjs/__future__/Select/subcomponents/ListBox/ListBox.module.scss.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var styles = {
-  "listBox": "ListBox-module_listBox__Uf6Mc",
-  "focus": "ListBox-module_focus__yrwu3"
+  "listBox": "ListBox-module_listBox__Uf6Mc"
 };
 module.exports = styles;

package/dist/cjs/future.cjs

@@ -3,8 +3,6 @@
 var Select = require('./__future__/Select/Select.cjs');
 var RemovableTag = require('./__future__/Tag/RemovableTag/RemovableTag.cjs');
 var Tag = require('./__future__/Tag/Tag/Tag.cjs');
-var Workflow = require('./__future__/Workflow/Workflow.cjs');
 exports.Select = Select.Select;
 exports.RemovableTag = RemovableTag.RemovableTag;
 exports.Tag = Tag.Tag;
-exports.Workflow = Workflow.Workflow;

package/dist/cjs/index.cjs

@@ -60,6 +60,7 @@ var getTruncatedLabel = require('./Filter/FilterMultiSelect/utils/getTruncatedLa
 var getSelectedOptionLabels = require('./Filter/FilterMultiSelect/utils/getSelectedOptionLabels.cjs');
 var getSelectedOptionKeys = require('./Filter/FilterMultiSelect/utils/getSelectedOptionKeys.cjs');
 var FilterSelect = require('./Filter/FilterSelect/FilterSelect.cjs');
+var GuidanceBlock = require('./GuidanceBlock/GuidanceBlock.cjs');
 var Heading = require('./Heading/Heading.cjs');
 var AcademyIcon = require('./Icon/AcademyIcon.cjs');
 var ActionOffIcon = require('./Icon/ActionOffIcon.cjs');
@@ -402,6 +403,7 @@ var constants = require('./TitleBlockZen/constants.cjs');
 var ToggleSwitch = require('./ToggleSwitch/ToggleSwitch/ToggleSwitch.cjs');
 var ToggleSwitchField = require('./ToggleSwitch/ToggleSwitchField/ToggleSwitchField.cjs');
 var useMediaQueries = require('./utils/useMediaQueries.cjs');
+var hostedAssets = require('./utils/hostedAssets.cjs');
 var VisuallyHidden = require('./VisuallyHidden/VisuallyHidden.cjs');
 var Well = require('./Well/Well.cjs');
 var Workflow = require('./Workflow/Workflow.cjs');
@@ -409,7 +411,6 @@ var index = require('./__overlays__/Tooltip/v1/index.cjs');
 var index$1 = require('./__actions__/Menu/v1/index.cjs');
 var Button = require('./__actions__/Button/v1/Button/Button.cjs');
 var IconButton = require('./__actions__/Button/v1/IconButton/IconButton.cjs');
-var GuidanceBlock = require('./__containers__/GuidanceBlock/v1/GuidanceBlock.cjs');
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -503,6 +504,7 @@ exports.getTruncatedLabels = getTruncatedLabel.getTruncatedLabels;
 exports.getSelectedOptionLabels = getSelectedOptionLabels.getSelectedOptionLabels;
 exports.getSelectedOptionKeys = getSelectedOptionKeys.getSelectedOptionKeys;
 exports.FilterSelect = FilterSelect.FilterSelect;
+exports.GuidanceBlock = GuidanceBlock.GuidanceBlock;
 exports.Heading = Heading.Heading;
 exports.AcademyIcon = AcademyIcon.AcademyIcon;
 exports.ActionOffIcon = ActionOffIcon.ActionOffIcon;
@@ -1032,6 +1034,7 @@ exports.ToggleSwitch = ToggleSwitch.ToggleSwitch;
 exports.ToggleSwitchField = ToggleSwitchField.ToggleSwitchField;
 exports.subtractOnePixel = useMediaQueries.subtractOnePixel;
 exports.useMediaQueries = useMediaQueries.useMediaQueries;
+exports.assetUrl = hostedAssets.assetUrl;
 exports.VisuallyHidden = VisuallyHidden.VisuallyHidden;
 exports.Well = Well.Well;
 exports.Workflow = Workflow.Workflow;
@@ -1043,4 +1046,3 @@ exports.MenuList = index$1.MenuList;
 exports.StatelessMenu = index$1.StatelessMenu;
 exports.Button = Button.Button;
 exports.IconButton = IconButton.IconButton;
-exports.GuidanceBlock = GuidanceBlock.GuidanceBlock;

package/dist/cjs/utils/hostedAssets.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var ORIGIN_BASE_URL = "https://d1e7r7b0lb8p4d.cloudfront.net";
+/**
+ * Returns the full URL of the asset at `path` managed by the
+ * `kaizen-design-system-assets` service.
+ *
+ * @example
+ * assetUrl("some/blob.png") -> "https://<origin>/some/blob.png"
+ *
+ * @see https://github.com/cultureamp/kaizen-design-system-assets/
+ */
+var assetUrl = function (path) {
+  return [ORIGIN_BASE_URL, path].join("/");
+};
+exports.assetUrl = assetUrl;

package/dist/cjs/utils/useResizeObserver.cjs

@@ -19,6 +19,7 @@ var defaultCallback = function (entry) {
  * @return {Array} An array containing a ref for binding to the observed DOM
  * element, and the current value of the callback-resolved ResizeObserverEntry
  * @callback resolveEntryCallback
+ * @deprecated use native `ResizeObserver` DOM API instead
  */
 var useResizeObserver = function (resolveEntry) {
   if (resolveEntry === void 0) {

package/dist/esm/Brand/Brand.mjs

@@ -1,6 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
-import { assetUrl } from '@kaizen/hosted-assets';
+import { assetUrl } from '../utils/hostedAssets.mjs';
 import { BrandCollectiveIntelligence } from './BrandCollectiveIntelligence/BrandCollectiveIntelligence.mjs';
 import styles from './Brand.module.scss.mjs';
 var isSVG = function (variant, restProps) {

package/dist/esm/BrandMoment/BrandMoment.mjs

@@ -1,9 +1,9 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import { assetUrl } from '@kaizen/hosted-assets';
 import { Heading } from '../Heading/Heading.mjs';
 import { Text } from '../Text/Text.mjs';
+import { assetUrl } from '../utils/hostedAssets.mjs';
 import { useMediaQueries } from '../utils/useMediaQueries.mjs';
 import styles from './BrandMoment.module.scss.mjs';
 import { Button } from '../__actions__/Button/v1/Button/Button.mjs';

package/dist/esm/Card/Card.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import styles from './Card.module.scss.mjs';
+import styles from './Card.module.css.mjs';
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094938/Card Guidance} |

package/dist/esm/Card/Card.module.css.mjs

@@ -0,0 +1,20 @@
+var styles = {
+  "wrapper": "Card-module_wrapper__Hriov",
+  "elevated": "Card-module_elevated__qkaCe",
+  "blue": "Card-module_blue__JOIuL",
+  "gray": "Card-module_gray__cRl9J",
+  "green": "Card-module_green__s2Oj8",
+  "orange": "Card-module_orange__qrxQo",
+  "purple": "Card-module_purple__cp6Bx",
+  "red": "Card-module_red__Ux35X",
+  "white": "Card-module_white__LjMQF",
+  "yellow": "Card-module_yellow__A3F9a",
+  "default": "Card-module_default__c8nG0",
+  "informative": "Card-module_informative__6la3C",
+  "positive": "Card-module_positive__waT0O",
+  "cautionary": "Card-module_cautionary__Fxfva",
+  "destructive": "Card-module_destructive__OqDdg",
+  "assertive": "Card-module_assertive__5ntbN",
+  "highlight": "Card-module_highlight__QJ5hP"
+};
+export { styles as default };

package/dist/esm/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/GuidanceBlock.mjs

@@ -2,13 +2,13 @@ import { __rest, __assign } from 'tslib';
 import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import Media from 'react-media';
-import { Heading } from '../../../Heading/Heading.mjs';
-import '../../../Icon/subcomponents/SVG/SVG.mjs';
-import { ArrowForwardIcon } from '../../../Icon/ArrowForwardIcon.mjs';
-import { Text } from '../../../Text/Text.mjs';
-import { Tooltip } from '../../../__overlays__/Tooltip/v1/index.mjs';
+import { Heading } from '../Heading/Heading.mjs';
+import '../Icon/subcomponents/SVG/SVG.mjs';
+import { ArrowForwardIcon } from '../Icon/ArrowForwardIcon.mjs';
+import { Text } from '../Text/Text.mjs';
+import { Tooltip } from '../__overlays__/Tooltip/v1/index.mjs';
 import styles from './GuidanceBlock.module.scss.mjs';
-import { Button } from '../../../__actions__/Button/v1/Button/Button.mjs';
+import { Button } from '../__actions__/Button/v1/Button/Button.mjs';
 var WithTooltip = function (_a) {
   var tooltipProps = _a.tooltipProps,
     children = _a.children;

package/dist/esm/GuidanceBlock/GuidanceBlock.module.scss.mjs

@@ -0,0 +1,31 @@
+var styles = {
+  "rightMargin": "GuidanceBlock-module_rightMargin__-iEFa",
+  "noRightMargin": "GuidanceBlock-module_noRightMargin__4Uy9N",
+  "banner": "GuidanceBlock-module_banner__FxKcd",
+  "noMaxWidth": "GuidanceBlock-module_noMaxWidth__UzHP1",
+  "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__AEljX",
+  "illustration": "GuidanceBlock-module_illustration__sU1Vu",
+  "hasSceneIllustration": "GuidanceBlock-module_hasSceneIllustration__tvFRD",
+  "descriptionContainer": "GuidanceBlock-module_descriptionContainer__aywtY",
+  "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__E5BcL",
+  "buttonContainer": "GuidanceBlock-module_buttonContainer__U2Hxn",
+  "hidden": "GuidanceBlock-module_hidden__CbgXn",
+  "headingWrapper": "GuidanceBlock-module_headingWrapper__zgVmA",
+  "cancel": "GuidanceBlock-module_cancel__UaIA-",
+  "icon": "GuidanceBlock-module_icon__y2xz8",
+  "disabled": "GuidanceBlock-module_disabled__Uhgsr",
+  "hover": "GuidanceBlock-module_hover__7V9x1",
+  "active": "GuidanceBlock-module_active__YJaZt",
+  "default": "GuidanceBlock-module_default__Ffblg",
+  "positive": "GuidanceBlock-module_positive__yENlT",
+  "negative": "GuidanceBlock-module_negative__E-Jvh",
+  "assertive": "GuidanceBlock-module_assertive__6PZlM",
+  "informative": "GuidanceBlock-module_informative__ZUH4j",
+  "cautionary": "GuidanceBlock-module_cautionary__sJ1CE",
+  "prominent": "GuidanceBlock-module_prominent__nn-r4",
+  "inline": "GuidanceBlock-module_inline__GwOWR",
+  "stacked": "GuidanceBlock-module_stacked__rDupX",
+  "centerContent": "GuidanceBlock-module_centerContent__m3IhB",
+  "smallScreenTextAlignment": "GuidanceBlock-module_smallScreenTextAlignment__oWufj"
+};
+export { styles as default };

package/dist/esm/Illustration/subcomponents/Base/Base.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import { assetUrl } from '@kaizen/hosted-assets';
+import { assetUrl } from '../../../utils/hostedAssets.mjs';
 import styles from './Base.module.scss.mjs';
 const Base = /*#__PURE__*/function () {
   const Base = function (_a) {

package/dist/esm/Illustration/subcomponents/VideoPlayer/VideoPlayer.mjs

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from 'react';
 import classnames from 'classnames';
-import { assetUrl } from '@kaizen/hosted-assets';
+import { assetUrl } from '../../../utils/hostedAssets.mjs';
 import { canPlayWebm } from '../../utils/canPlayWebm.mjs';
 import { usePausePlay } from '../../utils/usePausePlay.mjs';
 import styles from '../Base/Base.module.scss.mjs';

package/dist/esm/Modal/ConfirmationModal/ConfirmationModal.mjs

@@ -120,7 +120,7 @@ const ConfirmationModal = /*#__PURE__*/function () {
       className: classnames(isProminent && styles.prominent, !unpadded && styles.padded)
     }, /*#__PURE__*/React.createElement(ModalAccessibleDescription, null, children))), /*#__PURE__*/React.createElement(ModalFooter, {
       actions: footerActions,
-      appearance: mood === "negative" ? "destructive" : "primary",
+      appearance: mood === "negative" || variant == "warning" ? "destructive" : "primary",
       unpadded: unpadded
     })));
   };

package/dist/esm/MultiSelect/MultiSelect.mjs

@@ -85,6 +85,9 @@ const MultiSelect = /*#__PURE__*/function () {
     }), isOpen && ( /*#__PURE__*/React.createElement(Popover, {
       refs: refs,
       id: "".concat(id, "--popover"),
+      role: "dialog",
+      "aria-modal": "true",
+      tabIndex: -1,
       focusOnProps: {
         enabled: true,
         onClickOutside: onClickOutside,

package/dist/esm/MultiSelect/subcomponents/Popover/Popover.mjs

@@ -40,10 +40,7 @@ const Popover = /*#__PURE__*/function () {
     }, focusOnProps), /*#__PURE__*/React.createElement("div", __assign({
       ref: refs.setFloating,
       style: floatingStyles,
-      className: classnames(styles.popover, classNameOverride),
-      role: "dialog",
-      "aria-modal": "true",
-      tabIndex: -1
+      className: classnames(styles.popover, classNameOverride)
     }, restProps), children)), portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
   };
   Popover.displayName = "Popover";

package/dist/esm/Notification/ToastNotification/context/ToastNotificationContext.mjs

@@ -1,5 +1,5 @@
 import { __assign, __spreadArray } from 'tslib';
-import React, { useContext, useState, useCallback } from 'react';
+import React, { useContext, useState } from 'react';
 import { v4 } from 'uuid';
 var ToastNotificationContext = /*#__PURE__*/React.createContext(null);
 var useToastNotificationContext = function () {
@@ -15,7 +15,7 @@ const ToastNotificationProvider = /*#__PURE__*/function () {
     var _b = useState([]),
       notifications = _b[0],
       setNotifications = _b[1];
-    var addToastNotification = useCallback(function (notification) {
+    var addToastNotification = function (notification) {
       var uuid = v4();
       var notificationWithId = __assign({
         id: uuid
@@ -27,7 +27,7 @@ const ToastNotificationProvider = /*#__PURE__*/function () {
         });
         return notificationExists ? existing : __spreadArray(__spreadArray([], existing, true), [notificationWithId], false);
       });
-    }, [setNotifications]);
+    };
     var updateToastNotification = function (notification) {
       var notificationIndex = notifications.findIndex(function (_a) {
         var id = _a.id;

package/dist/esm/RichTextEditor/RichTextContent/RichTextContent.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { useState } from 'react';
+import React, { useState, useId, useEffect } from 'react';
 import classnames from 'classnames';
 import { createSchemaWithAll } from '../RichTextEditor/schema.mjs';
 import * as ProseMirrorState from 'prosemirror-state';
@@ -18,13 +18,22 @@ const RichTextContent = /*#__PURE__*/function () {
       classNameOverride = props.classNameOverride,
       restProps = __rest(props, ["content", "classNameOverride"]);
     var schema = useState(createSchemaWithAll())[0];
+    var editorId = useId();
+    useEffect(function () {
+      var _a;
+      // prosemirror only allows us to set this to false (which has caused a strange bug in the platform)
+      // so we have to hack a bit to remove the attribute completely
+      (_a = document.getElementById(editorId)) === null || _a === void 0 ? void 0 : _a.removeAttribute("contenteditable");
+    }, []);
     var editorRef = useRichTextEditor(ProseMirrorState.EditorState.create({
       doc: ProseMirrorModel.Node.fromJSON(schema, {
         type: "doc",
         content: content
       }),
       schema: schema
-    }), undefined, {
+    }), {
+      id: editorId
+    }, {
       editable: false
     })[0];
     return /*#__PURE__*/React.createElement("div", __assign({

package/dist/esm/Workflow/Workflow.mjs

@@ -11,32 +11,31 @@ import './subcomponents/Header/components/Branding/Branding.mjs';
 import './subcomponents/Header/components/Root/Root.mjs';
 import { Main } from './subcomponents/Main/Main.mjs';
 import { Wrapper } from './subcomponents/Wrapper/Wrapper.mjs';
-
-/**
- * @deprecated Use { Workflow } from `@kaizen/components/future`
- */
 const Workflow = /*#__PURE__*/function () {
   const Workflow = function (_a) {
-    var stepName = _a.stepName,
-      steps = _a.steps,
+    var steps = _a.steps,
+      currentStepId = _a.currentStepId,
       isComplete = _a.isComplete,
       workflowName = _a.workflowName,
-      status = _a.status,
+      statusTag = _a.statusTag,
       headerActions = _a.headerActions,
       children = _a.children,
       nextAction = _a.nextAction,
       previousAction = _a.previousAction,
       classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["stepName", "steps", "isComplete", "workflowName", "status", "headerActions", "children", "nextAction", "previousAction", "classNameOverride"]);
+      restProps = __rest(_a, ["steps", "currentStepId", "isComplete", "workflowName", "statusTag", "headerActions", "children", "nextAction", "previousAction", "classNameOverride"]);
+    var currentStep = steps.find(function (step) {
+      return step.id === currentStepId;
+    });
     return /*#__PURE__*/React.createElement(Workflow.Wrapper, __assign({
       classNameOverride: classNameOverride
     }, restProps), /*#__PURE__*/React.createElement(Workflow.Header, {
       workflowName: workflowName,
-      stepName: stepName,
-      status: status,
+      stepName: currentStep.label,
+      statusTag: statusTag,
       headerActions: headerActions
     }), /*#__PURE__*/React.createElement(Workflow.Main, null, children), /*#__PURE__*/React.createElement(Workflow.Footer, {
-      stepName: stepName,
+      currentStepId: currentStepId,
       steps: steps,
       isComplete: isComplete,
       nextAction: nextAction,

package/dist/esm/Workflow/subcomponents/Footer/Footer.mjs

@@ -6,17 +6,17 @@ import { FooterAction } from './components/FooterActions/FooterActions.mjs';
 const Footer = /*#__PURE__*/function () {
   const Footer = function (_a) {
     var steps = _a.steps,
-      stepName = _a.stepName,
+      currentStepId = _a.currentStepId,
       isComplete = _a.isComplete,
       previousAction = _a.previousAction,
       nextAction = _a.nextAction,
-      restProps = __rest(_a, ["steps", "stepName", "isComplete", "previousAction", "nextAction"]);
+      restProps = __rest(_a, ["steps", "currentStepId", "isComplete", "previousAction", "nextAction"]);
     return /*#__PURE__*/React.createElement(FooterRoot, __assign({}, restProps), /*#__PURE__*/React.createElement(FooterAction, {
       action: previousAction,
       actionType: "Previous"
     }), /*#__PURE__*/React.createElement(ProgressStepper, {
       steps: steps,
-      stepName: stepName,
+      currentStepId: currentStepId,
       isComplete: isComplete
     }), /*#__PURE__*/React.createElement(FooterAction, {
       action: nextAction,

package/dist/esm/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import styles from './FooterActions.module.scss.mjs';
+import styles from './FooterActions.module.css.mjs';
 
 /** A simple wrapper for a Footer previous or next action  */
 const FooterAction = /*#__PURE__*/function () {

package/dist/esm/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.module.css.mjs

@@ -0,0 +1,6 @@
+var styles = {
+  "footerAction": "FooterActions-module_footerAction__szvPs",
+  "footerActionPrevious": "FooterActions-module_footerActionPrevious__VJ6j1",
+  "footerActionNext": "FooterActions-module_footerActionNext__koFhj"
+};
+export { styles as default };

package/dist/esm/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.mjs

@@ -5,9 +5,8 @@ import '../../../../../Icon/subcomponents/SVG/SVG.mjs';
 import { IndicatorActiveIcon } from '../../../../../Icon/IndicatorActiveIcon.mjs';
 import { IndicatorInactiveIcon } from '../../../../../Icon/IndicatorInactiveIcon.mjs';
 import { SuccessIcon } from '../../../../../Icon/SuccessIcon.mjs';
-import { Text } from '../../../../../Text/Text.mjs';
 import { VisuallyHidden } from '../../../../../VisuallyHidden/VisuallyHidden.mjs';
-import styles from './ProgressStepper.module.scss.mjs';
+import styles from './ProgressStepper.module.css.mjs';
 var getStepStatus = function (isComplete, isCurrentStep, step, index) {
   if (isComplete) {
     return {
@@ -17,7 +16,7 @@ var getStepStatus = function (isComplete, isCurrentStep, step, index) {
         role: "presentation",
         classNameOverride: "success"
       })),
-      accessibleName: "Completed: ".concat(step)
+      accessibleName: "Completed: ".concat(step.label)
     };
   }
   if (isCurrentStep) {
@@ -28,7 +27,7 @@ var getStepStatus = function (isComplete, isCurrentStep, step, index) {
         role: "presentation",
         classNameOverride: "active"
       })),
-      accessibleName: "Current: ".concat(step)
+      accessibleName: "Current: ".concat(step.label)
     };
   }
   return {
@@ -38,17 +37,19 @@ var getStepStatus = function (isComplete, isCurrentStep, step, index) {
       classNameOverride: "incomplete",
       role: "presentation"
     })),
-    accessibleName: "Not started: ".concat(step)
+    accessibleName: "Not started: ".concat(step.label)
   };
 };
 const ProgressStepper = /*#__PURE__*/function () {
   const ProgressStepper = function (_a) {
-    var stepName = _a.stepName,
+    var currentStepId = _a.currentStepId,
       steps = _a.steps,
       _b = _a.isComplete,
       isComplete = _b === void 0 ? false : _b,
-      restprops = __rest(_a, ["stepName", "steps", "isComplete"]);
-    var currentStepIndex = steps.indexOf(stepName);
+      restprops = __rest(_a, ["currentStepId", "steps", "isComplete"]);
+    var currentStepIndex = steps.findIndex(function (stepItem) {
+      return stepItem.id === currentStepId;
+    });
     return /*#__PURE__*/React.createElement("div", {
       className: styles.stepsContainer
     }, /*#__PURE__*/React.createElement("ol", __assign({
@@ -56,33 +57,30 @@ const ProgressStepper = /*#__PURE__*/function () {
     }, restprops, {
       "aria-labelledby": "stepper-description"
     }), steps.map(function (step, index) {
+      var _a, _b;
       var isCurrentStep = currentStepIndex === index;
       var isCompletedStep = index < currentStepIndex || isComplete;
-      var _a = getStepStatus(isCompletedStep, isCurrentStep, step, index),
-        accessibleName = _a.accessibleName,
-        Icon = _a.icon;
+      var _c = getStepStatus(isCompletedStep, isCurrentStep, step, index),
+        accessibleName = _c.accessibleName,
+        Icon = _c.icon;
       return /*#__PURE__*/React.createElement("li", {
         className: styles.step,
-        key: "".concat(index, "-").concat(step),
+        key: "".concat(step.id),
         "aria-current": isCurrentStep
       }, /*#__PURE__*/React.createElement("div", {
         className: styles.stepContent
-      }, /*#__PURE__*/React.createElement(VisuallyHidden, null, accessibleName), /*#__PURE__*/React.createElement(Text, {
-        classNameOverride: styles.stepName,
-        variant: "small",
-        color: "white",
+      }, /*#__PURE__*/React.createElement(VisuallyHidden, null, accessibleName), /*#__PURE__*/React.createElement("span", {
+        className: classnames(styles.stepName, (_a = {}, _a[styles.isCurrent] = isCurrentStep, _a)),
         "aria-hidden": true
-      }, step), /*#__PURE__*/React.createElement("div", {
+      }, step.label), /*#__PURE__*/React.createElement("div", {
         className: styles.stepIndicator
       }, /*#__PURE__*/React.createElement("span", {
-        className: styles.stepIcon
+        className: classnames(styles.stepIcon, (_b = {}, _b[styles.isCompleted] = isCompletedStep, _b))
       }, Icon)), index < steps.length - 1 && ( /*#__PURE__*/React.createElement("div", {
         className: classnames([styles.stepDivider, isCompletedStep && styles.completedStep])
       }))));
-    })), /*#__PURE__*/React.createElement(Text, {
-      classNameOverride: styles.stepperDescription,
-      variant: "small",
-      color: "white",
+    })), /*#__PURE__*/React.createElement("span", {
+      className: styles.stepperDescription,
       id: "stepper-description"
     }, "Step ", currentStepIndex + 1, " of ", steps.length));
   };

package/dist/esm/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.css.mjs

@@ -0,0 +1,14 @@
+var styles = {
+  "stepsContainer": "ProgressStepper-module_stepsContainer__7Motj",
+  "stepList": "ProgressStepper-module_stepList__jmArV",
+  "step": "ProgressStepper-module_step__x0O0y",
+  "stepContent": "ProgressStepper-module_stepContent__OuBES",
+  "stepIndicator": "ProgressStepper-module_stepIndicator__opcbs",
+  "stepName": "ProgressStepper-module_stepName__QvpQ4",
+  "isCurrent": "ProgressStepper-module_isCurrent__L8bL9",
+  "stepIcon": "ProgressStepper-module_stepIcon__K-fVm",
+  "isCompleted": "ProgressStepper-module_isCompleted__l7HiL",
+  "stepDivider": "ProgressStepper-module_stepDivider__1dq4c",
+  "stepperDescription": "ProgressStepper-module_stepperDescription__KplV3"
+};
+export { styles as default };

package/dist/esm/Workflow/subcomponents/Footer/components/Root/FooterRoot.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "footerRoot": "FooterRoot-module_footerRoot__-osuZ"
+};
+export { styles as default };

package/dist/esm/Workflow/subcomponents/Footer/components/Root/Root.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import styles from './FooterRoot.module.scss.mjs';
+import styles from './FooterRoot.module.css.mjs';
 const FooterRoot = /*#__PURE__*/function () {
   const FooterRoot = function (_a) {
     var children = _a.children,

package/dist/esm/Workflow/subcomponents/Header/Header.mjs

@@ -8,15 +8,15 @@ const Header = /*#__PURE__*/function () {
   const Header = function (_a) {
     var workflowName = _a.workflowName,
       stepName = _a.stepName,
-      status = _a.status,
+      statusTag = _a.statusTag,
       headerActions = _a.headerActions,
-      restProps = __rest(_a, ["workflowName", "stepName", "status", "headerActions"]);
+      restProps = __rest(_a, ["workflowName", "stepName", "statusTag", "headerActions"]);
     return /*#__PURE__*/React.createElement(HeaderRoot, __assign({}, restProps), /*#__PURE__*/React.createElement(Branding, {
       alt: "Culture Amp"
     }), /*#__PURE__*/React.createElement(Titles, {
       workflowName: workflowName,
       stepName: stepName,
-      status: status
+      statusTag: statusTag
     }), /*#__PURE__*/React.createElement(Actions, {
       headerActions: headerActions
     }));

package/dist/esm/Workflow/subcomponents/Header/components/Actions/Actions.mjs

@@ -1,6 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
-import styles from './Actions.module.scss.mjs';
+import styles from './Actions.module.css.mjs';
 
 /** A wrapper for an exit trigger (and other) actions of the Header Workflow  */
 const Actions = /*#__PURE__*/function () {

package/dist/esm/Workflow/subcomponents/{Wrapper/Wrapper.module.scss.mjs → Header/components/Actions/Actions.module.css.mjs}

@@ -1,4 +1,4 @@
 var styles = {
-  "wrapper": "Wrapper-module_wrapper__EUUEZ"
+  "actions": "Actions-module_actions__JzCWB"
 };
 export { styles as default };

package/dist/esm/Workflow/subcomponents/Header/components/Branding/Branding.mjs

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Brand } from '../../../../../Brand/Brand.mjs';
-import styles from './Branding.module.scss.mjs';
+import styles from './Branding.module.css.mjs';
 const Branding = /*#__PURE__*/function () {
   const Branding = function (_a) {
     var _b = _a.variant,

package/dist/esm/Workflow/subcomponents/Header/components/Branding/Branding.module.css.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "branding": "Branding-module_branding__g3OoE",
+  "logo": "Branding-module_logo__yLHfs"
+};
+export { styles as default };

package/dist/esm/Workflow/subcomponents/Header/components/Root/Root.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import styles from './Root.module.scss.mjs';
+import styles from './Root.module.css.mjs';
 const HeaderRoot = /*#__PURE__*/function () {
   const HeaderRoot = function (_a) {
     var children = _a.children,

package/dist/esm/{__future__/Workflow/subcomponents/Header/components/Root/Root.module.scss.mjs → Workflow/subcomponents/Header/components/Root/Root.module.css.mjs}

@@ -1,4 +1,4 @@
 var styles = {
-  "root": "Root-module_root__7DVw5"
+  "root": "Root-module_root__-1P72"
 };
 export { styles as default };