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

package/codemods/README.md

@@ -33,4 +33,3 @@ kaizen-codemod src migrateWellVariantToColor
 - `migrateWellVariantToColor`: Migrates `Well` component prop from `variant` to `color`
 - `removeInputEditModalMood`: Removes `InputEditModal` component prop `mood`
 - `removePopoverVariant`: Removes `Popover` component props `variant` and `customIcon`
-- `updateGuidanceBlockVariantProp`: Updates `GuidanceBlock` import location and updates `variant` prop to `default` or `expert-advice`

package/codemods/utils/__snapshots__/transformSource.spec.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`transformSource updates the value of Pancakes topping to jam 1`] = `
+exports[`transformSource > updates the value of Pancakes topping to jam 1`] = `
 "import * as React from "react";
 // @ts-ignore
 import { Pancakes } from "@kaizen/components";

package/dist/cjs/Brand/Brand.cjs

@@ -2,7 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
-var hostedAssets = require('@kaizen/hosted-assets');
+var hostedAssets = require('../utils/hostedAssets.cjs');
 var BrandCollectiveIntelligence = require('./BrandCollectiveIntelligence/BrandCollectiveIntelligence.cjs');
 var Brand_module = require('./Brand.module.scss.cjs');
 function _interopDefault(e) {

package/dist/cjs/BrandMoment/BrandMoment.cjs

@@ -3,9 +3,9 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var hostedAssets = require('@kaizen/hosted-assets');
 var Heading = require('../Heading/Heading.cjs');
 var Text = require('../Text/Text.cjs');
+var hostedAssets = require('../utils/hostedAssets.cjs');
 var useMediaQueries = require('../utils/useMediaQueries.cjs');
 var BrandMoment_module = require('./BrandMoment.module.scss.cjs');
 var Button = require('../__actions__/Button/v1/Button/Button.cjs');

package/dist/cjs/Card/Card.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var Card_module = require('./Card.module.scss.cjs');
+var Card_module = require('./Card.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/Card/Card.module.css.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+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"
+};
+module.exports = styles;

package/dist/cjs/{__containers__/GuidanceBlock/v1 → GuidanceBlock}/GuidanceBlock.cjs

@@ -4,13 +4,13 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var Media = require('react-media');
-var Heading = require('../../../Heading/Heading.cjs');
-require('../../../Icon/subcomponents/SVG/SVG.cjs');
-var ArrowForwardIcon = require('../../../Icon/ArrowForwardIcon.cjs');
-var Text = require('../../../Text/Text.cjs');
-var index = require('../../../__overlays__/Tooltip/v1/index.cjs');
+var Heading = require('../Heading/Heading.cjs');
+require('../Icon/subcomponents/SVG/SVG.cjs');
+var ArrowForwardIcon = require('../Icon/ArrowForwardIcon.cjs');
+var Text = require('../Text/Text.cjs');
+var index = require('../__overlays__/Tooltip/v1/index.cjs');
 var GuidanceBlock_module = require('./GuidanceBlock.module.scss.cjs');
-var Button = require('../../../__actions__/Button/v1/Button/Button.cjs');
+var Button = require('../__actions__/Button/v1/Button/Button.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/GuidanceBlock/GuidanceBlock.module.scss.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+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"
+};
+module.exports = styles;

package/dist/cjs/Illustration/subcomponents/Base/Base.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var hostedAssets = require('@kaizen/hosted-assets');
+var hostedAssets = require('../../../utils/hostedAssets.cjs');
 var Base_module = require('./Base.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {

package/dist/cjs/Illustration/subcomponents/VideoPlayer/VideoPlayer.cjs

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var hostedAssets = require('@kaizen/hosted-assets');
+var hostedAssets = require('../../../utils/hostedAssets.cjs');
 var canPlayWebm = require('../../utils/canPlayWebm.cjs');
 var usePausePlay = require('../../utils/usePausePlay.cjs');
 var Base_module = require('../Base/Base.module.scss.cjs');

package/dist/cjs/Modal/ConfirmationModal/ConfirmationModal.cjs

@@ -128,7 +128,7 @@ var ConfirmationModal = function (_a) {
     className: classnames__default.default(isProminent && ConfirmationModal_module.prominent, !unpadded && ConfirmationModal_module.padded)
   }, React__default.default.createElement(ModalAccessibleDescription.ModalAccessibleDescription, null, children))), React__default.default.createElement(ModalFooter.ModalFooter, {
     actions: footerActions,
-    appearance: mood === "negative" ? "destructive" : "primary",
+    appearance: mood === "negative" || variant == "warning" ? "destructive" : "primary",
     unpadded: unpadded
   })));
 };

package/dist/cjs/MultiSelect/MultiSelect.cjs

@@ -93,6 +93,9 @@ var MultiSelect = function (_a) {
   }), isOpen && React__default.default.createElement(Popover.Popover, {
     refs: refs,
     id: "".concat(id, "--popover"),
+    role: "dialog",
+    "aria-modal": "true",
+    tabIndex: -1,
     focusOnProps: {
       enabled: true,
       onClickOutside: onClickOutside,

package/dist/cjs/MultiSelect/subcomponents/Popover/Popover.cjs

@@ -48,10 +48,7 @@ var Popover = function (_a) {
   }, focusOnProps), React__default.default.createElement("div", tslib.__assign({
     ref: refs.setFloating,
     style: floatingStyles,
-    className: classnames__default.default(Popover_module.popover, classNameOverride),
-    role: "dialog",
-    "aria-modal": "true",
-    tabIndex: -1
+    className: classnames__default.default(Popover_module.popover, classNameOverride)
   }, restProps), children)), portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
 };
 Popover.displayName = "Popover";

package/dist/cjs/Notification/ToastNotification/context/ToastNotificationContext.cjs

@@ -22,7 +22,7 @@ var ToastNotificationProvider = function (_a) {
   var _b = React.useState([]),
     notifications = _b[0],
     setNotifications = _b[1];
-  var addToastNotification = React.useCallback(function (notification) {
+  var addToastNotification = function (notification) {
     var uuid$1 = uuid.v4();
     var notificationWithId = tslib.__assign({
       id: uuid$1
@@ -34,7 +34,7 @@ var ToastNotificationProvider = function (_a) {
       });
       return notificationExists ? existing : tslib.__spreadArray(tslib.__spreadArray([], existing, true), [notificationWithId], false);
     });
-  }, [setNotifications]);
+  };
   var updateToastNotification = function (notification) {
     var notificationIndex = notifications.findIndex(function (_a) {
       var id = _a.id;

package/dist/cjs/RichTextEditor/RichTextContent/RichTextContent.cjs

@@ -47,13 +47,22 @@ var RichTextContent = function (props) {
     classNameOverride = props.classNameOverride,
     restProps = tslib.__rest(props, ["content", "classNameOverride"]);
   var schema$1 = React.useState(schema.createSchemaWithAll())[0];
+  var editorId = React.useId();
+  React.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.useRichTextEditor(ProseMirrorState__namespace.EditorState.create({
     doc: ProseMirrorModel__namespace.Node.fromJSON(schema$1, {
       type: "doc",
       content: content
     }),
     schema: schema$1
-  }), undefined, {
+  }), {
+    id: editorId
+  }, {
     editable: false
   })[0];
   return React__default.default.createElement("div", tslib.__assign({

package/dist/cjs/Workflow/Workflow.cjs

@@ -19,31 +19,30 @@ function _interopDefault(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
-
-/**
- * @deprecated Use { Workflow } from `@kaizen/components/future`
- */
 var 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 = tslib.__rest(_a, ["stepName", "steps", "isComplete", "workflowName", "status", "headerActions", "children", "nextAction", "previousAction", "classNameOverride"]);
+    restProps = tslib.__rest(_a, ["steps", "currentStepId", "isComplete", "workflowName", "statusTag", "headerActions", "children", "nextAction", "previousAction", "classNameOverride"]);
+  var currentStep = steps.find(function (step) {
+    return step.id === currentStepId;
+  });
   return React__default.default.createElement(Workflow.Wrapper, tslib.__assign({
     classNameOverride: classNameOverride
   }, restProps), React__default.default.createElement(Workflow.Header, {
     workflowName: workflowName,
-    stepName: stepName,
-    status: status,
+    stepName: currentStep.label,
+    statusTag: statusTag,
     headerActions: headerActions
   }), React__default.default.createElement(Workflow.Main, null, children), React__default.default.createElement(Workflow.Footer, {
-    stepName: stepName,
+    currentStepId: currentStepId,
     steps: steps,
     isComplete: isComplete,
     nextAction: nextAction,

package/dist/cjs/Workflow/subcomponents/Footer/Footer.cjs

@@ -13,17 +13,17 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 var Footer = function (_a) {
   var steps = _a.steps,
-    stepName = _a.stepName,
+    currentStepId = _a.currentStepId,
     isComplete = _a.isComplete,
     previousAction = _a.previousAction,
     nextAction = _a.nextAction,
-    restProps = tslib.__rest(_a, ["steps", "stepName", "isComplete", "previousAction", "nextAction"]);
+    restProps = tslib.__rest(_a, ["steps", "currentStepId", "isComplete", "previousAction", "nextAction"]);
   return React__default.default.createElement(Root.FooterRoot, tslib.__assign({}, restProps), React__default.default.createElement(FooterActions.FooterAction, {
     action: previousAction,
     actionType: "Previous"
   }), React__default.default.createElement(ProgressStepper.ProgressStepper, {
     steps: steps,
-    stepName: stepName,
+    currentStepId: currentStepId,
     isComplete: isComplete
   }), React__default.default.createElement(FooterActions.FooterAction, {
     action: nextAction,

package/dist/cjs/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var FooterActions_module = require('./FooterActions.module.scss.cjs');
+var FooterActions_module = require('./FooterActions.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.module.css.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var styles = {
+  "footerAction": "FooterActions-module_footerAction__szvPs",
+  "footerActionPrevious": "FooterActions-module_footerActionPrevious__VJ6j1",
+  "footerActionNext": "FooterActions-module_footerActionNext__koFhj"
+};
+module.exports = styles;

package/dist/cjs/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.cjs

@@ -7,9 +7,8 @@ require('../../../../../Icon/subcomponents/SVG/SVG.cjs');
 var IndicatorActiveIcon = require('../../../../../Icon/IndicatorActiveIcon.cjs');
 var IndicatorInactiveIcon = require('../../../../../Icon/IndicatorInactiveIcon.cjs');
 var SuccessIcon = require('../../../../../Icon/SuccessIcon.cjs');
-var Text = require('../../../../../Text/Text.cjs');
 var VisuallyHidden = require('../../../../../VisuallyHidden/VisuallyHidden.cjs');
-var ProgressStepper_module = require('./ProgressStepper.module.scss.cjs');
+var ProgressStepper_module = require('./ProgressStepper.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -26,7 +25,7 @@ var getStepStatus = function (isComplete, isCurrentStep, step, index) {
         role: "presentation",
         classNameOverride: "success"
       }),
-      accessibleName: "Completed: ".concat(step)
+      accessibleName: "Completed: ".concat(step.label)
     };
   }
   if (isCurrentStep) {
@@ -37,7 +36,7 @@ var getStepStatus = function (isComplete, isCurrentStep, step, index) {
         role: "presentation",
         classNameOverride: "active"
       }),
-      accessibleName: "Current: ".concat(step)
+      accessibleName: "Current: ".concat(step.label)
     };
   }
   return {
@@ -47,16 +46,18 @@ var getStepStatus = function (isComplete, isCurrentStep, step, index) {
       classNameOverride: "incomplete",
       role: "presentation"
     }),
-    accessibleName: "Not started: ".concat(step)
+    accessibleName: "Not started: ".concat(step.label)
   };
 };
 var ProgressStepper = function (_a) {
-  var stepName = _a.stepName,
+  var currentStepId = _a.currentStepId,
     steps = _a.steps,
     _b = _a.isComplete,
     isComplete = _b === void 0 ? false : _b,
-    restprops = tslib.__rest(_a, ["stepName", "steps", "isComplete"]);
-  var currentStepIndex = steps.indexOf(stepName);
+    restprops = tslib.__rest(_a, ["currentStepId", "steps", "isComplete"]);
+  var currentStepIndex = steps.findIndex(function (stepItem) {
+    return stepItem.id === currentStepId;
+  });
   return React__default.default.createElement("div", {
     className: ProgressStepper_module.stepsContainer
   }, React__default.default.createElement("ol", tslib.__assign({
@@ -64,33 +65,30 @@ var ProgressStepper = function (_a) {
   }, 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 React__default.default.createElement("li", {
       className: ProgressStepper_module.step,
-      key: "".concat(index, "-").concat(step),
+      key: "".concat(step.id),
       "aria-current": isCurrentStep
     }, React__default.default.createElement("div", {
       className: ProgressStepper_module.stepContent
-    }, React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, accessibleName), React__default.default.createElement(Text.Text, {
-      classNameOverride: ProgressStepper_module.stepName,
-      variant: "small",
-      color: "white",
+    }, React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, accessibleName), React__default.default.createElement("span", {
+      className: classnames__default.default(ProgressStepper_module.stepName, (_a = {}, _a[ProgressStepper_module.isCurrent] = isCurrentStep, _a)),
       "aria-hidden": true
-    }, step), React__default.default.createElement("div", {
+    }, step.label), React__default.default.createElement("div", {
       className: ProgressStepper_module.stepIndicator
     }, React__default.default.createElement("span", {
-      className: ProgressStepper_module.stepIcon
+      className: classnames__default.default(ProgressStepper_module.stepIcon, (_b = {}, _b[ProgressStepper_module.isCompleted] = isCompletedStep, _b))
     }, Icon)), index < steps.length - 1 && React__default.default.createElement("div", {
       className: classnames__default.default([ProgressStepper_module.stepDivider, isCompletedStep && ProgressStepper_module.completedStep])
     })));
-  })), React__default.default.createElement(Text.Text, {
-    classNameOverride: ProgressStepper_module.stepperDescription,
-    variant: "small",
-    color: "white",
+  })), React__default.default.createElement("span", {
+    className: ProgressStepper_module.stepperDescription,
     id: "stepper-description"
   }, "Step ", currentStepIndex + 1, " of ", steps.length));
 };

package/dist/cjs/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.css.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+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"
+};
+module.exports = styles;

package/dist/cjs/Workflow/subcomponents/Footer/components/Root/{FooterRoot.module.scss.cjs → FooterRoot.module.css.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
 var styles = {
-  "footerRoot": "FooterRoot-module_footerRoot__bvMSa"
+  "footerRoot": "FooterRoot-module_footerRoot__-osuZ"
 };
 module.exports = styles;

package/dist/cjs/Workflow/subcomponents/Footer/components/Root/Root.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var FooterRoot_module = require('./FooterRoot.module.scss.cjs');
+var FooterRoot_module = require('./FooterRoot.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/Workflow/subcomponents/Header/Header.cjs

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

package/dist/cjs/Workflow/subcomponents/Header/components/Actions/Actions.cjs

@@ -2,7 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
-var Actions_module = require('./Actions.module.scss.cjs');
+var Actions_module = require('./Actions.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

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

@@ -1,6 +1,6 @@
 'use strict';
 
 var styles = {
-  "wrapper": "Wrapper-module_wrapper__EUUEZ"
+  "actions": "Actions-module_actions__JzCWB"
 };
 module.exports = styles;

package/dist/cjs/Workflow/subcomponents/Header/components/Branding/Branding.cjs

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var Brand = require('../../../../../Brand/Brand.cjs');
-var Branding_module = require('./Branding.module.scss.cjs');
+var Branding_module = require('./Branding.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/Workflow/subcomponents/Header/components/Branding/Branding.module.css.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "branding": "Branding-module_branding__g3OoE",
+  "logo": "Branding-module_logo__yLHfs"
+};
+module.exports = styles;

package/dist/cjs/Workflow/subcomponents/Header/components/Root/Root.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var Root_module = require('./Root.module.scss.cjs');
+var Root_module = require('./Root.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

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

@@ -1,6 +1,6 @@
 'use strict';
 
 var styles = {
-  "root": "Root-module_root__7DVw5"
+  "root": "Root-module_root__-1P72"
 };
 module.exports = styles;

package/dist/cjs/Workflow/subcomponents/Header/components/Titles/Titles.cjs

@@ -3,9 +3,8 @@
 var tslib = require('tslib');
 var React = require('react');
 var Heading = require('../../../../../Heading/Heading.cjs');
-var Tag = require('../../../../../Tag/Tag.cjs');
 var VisuallyHidden = require('../../../../../VisuallyHidden/VisuallyHidden.cjs');
-var Titles_module = require('./Titles.module.scss.cjs');
+var Titles_module = require('./Titles.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -15,12 +14,12 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var Titles = function (_a) {
   var workflowName = _a.workflowName,
     stepName = _a.stepName,
-    status = _a.status,
-    restProps = tslib.__rest(_a, ["workflowName", "stepName", "status"]);
+    statusTag = _a.statusTag,
+    restProps = tslib.__rest(_a, ["workflowName", "stepName", "statusTag"]);
   return React__default.default.createElement("div", tslib.__assign({
     className: Titles_module.titles
   }, restProps), React__default.default.createElement(Heading.Heading, {
-    variant: "heading-1",
+    variant: "composable-header-title",
     tag: "h1",
     color: "dark",
     classNameOverride: Titles_module.pageTitle
@@ -29,14 +28,11 @@ var Titles = function (_a) {
     variant: "heading-6",
     tag: "span",
     color: "dark-reduced-opacity"
-  }, workflowName, React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, ":")), React__default.default.createElement("span", null, stepName)), status &&
+  }, workflowName, React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, ":")), React__default.default.createElement("span", null, stepName)), statusTag &&
   // status may need to be update by a fetch
   React__default.default.createElement("div", {
-    className: Titles_module.status
-  }, React__default.default.createElement(Tag.Tag, {
-    inline: true,
-    variant: (status === null || status === void 0 ? void 0 : status.variant) || "statusDraft"
-  }, status === null || status === void 0 ? void 0 : status.content)));
+    className: Titles_module.statusTag
+  }, statusTag));
 };
 Titles.displayName = "Workflow.Titles";
 exports.Titles = Titles;

package/dist/cjs/Workflow/subcomponents/Header/components/Titles/Titles.module.css.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var styles = {
+  "titles": "Titles-module_titles__ENQ0C",
+  "pageTitle": "Titles-module_pageTitle__ePjdw",
+  "prefix": "Titles-module_prefix__FEtyY",
+  "statusTag": "Titles-module_statusTag__hmyfK"
+};
+module.exports = styles;

package/dist/cjs/Workflow/subcomponents/Main/Main.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var Main_module = require('./Main.module.scss.cjs');
+var Main_module = require('./Main.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/{__future__/Workflow/subcomponents/Main/Main.module.scss.cjs → Workflow/subcomponents/Main/Main.module.css.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
 var styles = {
-  "main": "Main-module_main__hMyB1"
+  "main": "Main-module_main__K9Z0C"
 };
 module.exports = styles;

package/dist/cjs/Workflow/subcomponents/Wrapper/Wrapper.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var Wrapper_module = require('./Wrapper.module.scss.cjs');
+var Wrapper_module = require('./Wrapper.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

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

@@ -1,6 +1,6 @@
 'use strict';
 
 var styles = {
-  "actions": "Actions-module_actions__2Zdtd"
+  "wrapper": "Wrapper-module_wrapper__-tWQy"
 };
 module.exports = styles;

package/dist/cjs/__future__/Select/Select.cjs

@@ -121,12 +121,7 @@ var Select = function (_a) {
   }, trigger === undefined ? React__default.default.createElement(SelectToggle.SelectToggle, tslib.__assign({}, selectToggleProps)) : trigger(selectToggleProps, selectToggleProps.ref), state.isOpen && React__default.default.createElement(Popover.Popover, {
     id: popoverId,
     portalContainer: portalContainer,
-    refs: refs,
-    focusOnProps: {
-      onEscapeKey: state.close,
-      onClickOutside: state.close,
-      noIsolation: true
-    }
+    refs: refs
   }, React__default.default.createElement(SelectContext.SelectProvider, {
     state: state
   }, React__default.default.createElement(SelectPopoverContents.SelectPopoverContents, {