@kaizen/components 1.63.0 → 1.63.1

package/dist/cjs/Workflow/Workflow.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var Footer = require('./subcomponents/Footer/Footer.cjs');
+require('./subcomponents/Footer/components/Root/Root.cjs');
+var ProgressStepper = require('./subcomponents/Footer/components/ProgressStepper/ProgressStepper.cjs');
+require('./subcomponents/Footer/components/FooterActions/FooterActions.cjs');
+var Header = require('./subcomponents/Header/Header.cjs');
+require('./subcomponents/Header/components/Titles/Titles.cjs');
+require('./subcomponents/Header/components/Actions/Actions.cjs');
+require('./subcomponents/Header/components/Branding/Branding.cjs');
+require('./subcomponents/Header/components/Root/Root.cjs');
+var Main = require('./subcomponents/Main/Main.cjs');
+var Wrapper = require('./subcomponents/Wrapper/Wrapper.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Workflow = function (_a) {
+  var steps = _a.steps,
+    currentStepId = _a.currentStepId,
+    isComplete = _a.isComplete,
+    workflowName = _a.workflowName,
+    statusTag = _a.statusTag,
+    headerActions = _a.headerActions,
+    children = _a.children,
+    nextAction = _a.nextAction,
+    previousAction = _a.previousAction,
+    classNameOverride = _a.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: currentStep.label,
+    statusTag: statusTag,
+    headerActions: headerActions
+  }), React__default.default.createElement(Workflow.Main, null, children), React__default.default.createElement(Workflow.Footer, {
+    currentStepId: currentStepId,
+    steps: steps,
+    isComplete: isComplete,
+    nextAction: nextAction,
+    previousAction: previousAction
+  }));
+};
+Workflow.Header = Header.Header;
+Workflow.Footer = Footer.Footer;
+Workflow.Main = Main.Main;
+Workflow.ProgressStepper = ProgressStepper.ProgressStepper;
+Workflow.Wrapper = Wrapper.Wrapper;
+exports.Workflow = Workflow;

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

@@ -0,0 +1,34 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var Root = require('./components/Root/Root.cjs');
+var ProgressStepper = require('./components/ProgressStepper/ProgressStepper.cjs');
+var FooterActions = require('./components/FooterActions/FooterActions.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Footer = function (_a) {
+  var steps = _a.steps,
+    currentStepId = _a.currentStepId,
+    isComplete = _a.isComplete,
+    previousAction = _a.previousAction,
+    nextAction = _a.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,
+    currentStepId: currentStepId,
+    isComplete: isComplete
+  }), React__default.default.createElement(FooterActions.FooterAction, {
+    action: nextAction,
+    actionType: "Next"
+  }));
+};
+Footer.displayName = "Workflow.Footer";
+exports.Footer = Footer;

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var FooterActions_module = require('./FooterActions.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/** A simple wrapper for a Footer previous or next action  */
+var FooterAction = function (_a) {
+  var _b = _a.actionType,
+    actionType = _b === void 0 ? "Previous" : _b,
+    action = _a.action,
+    restProps = tslib.__rest(_a, ["actionType", "action"]);
+  return React__default.default.createElement("div", tslib.__assign({
+    className: classnames__default.default([FooterActions_module.footerAction, FooterActions_module["footerAction".concat(actionType)]])
+  }, restProps), action);
+};
+FooterAction.displayName = "Workflow.FooterActions";
+exports.FooterAction = FooterAction;

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

@@ -0,0 +1,96 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+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 VisuallyHidden = require('../../../../../VisuallyHidden/VisuallyHidden.cjs');
+var ProgressStepper_module = require('./ProgressStepper.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var getStepStatus = function (isComplete, isCurrentStep, step, index) {
+  if (isComplete) {
+    return {
+      icon: React__default.default.createElement(SuccessIcon.SuccessIcon, {
+        key: index,
+        inheritSize: true,
+        role: "presentation",
+        classNameOverride: "success"
+      }),
+      accessibleName: "Completed: ".concat(step.label)
+    };
+  }
+  if (isCurrentStep) {
+    return {
+      icon: React__default.default.createElement(IndicatorActiveIcon.IndicatorActiveIcon, {
+        key: index,
+        inheritSize: true,
+        role: "presentation",
+        classNameOverride: "active"
+      }),
+      accessibleName: "Current: ".concat(step.label)
+    };
+  }
+  return {
+    icon: React__default.default.createElement(IndicatorInactiveIcon.IndicatorInactiveIcon, {
+      key: index,
+      inheritSize: true,
+      classNameOverride: "incomplete",
+      role: "presentation"
+    }),
+    accessibleName: "Not started: ".concat(step.label)
+  };
+};
+var ProgressStepper = function (_a) {
+  var currentStepId = _a.currentStepId,
+    steps = _a.steps,
+    _b = _a.isComplete,
+    isComplete = _b === void 0 ? false : _b,
+    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({
+    className: ProgressStepper_module.stepList
+  }, restprops, {
+    "aria-labelledby": "stepper-description"
+  }), steps.map(function (step, index) {
+    var _a, _b;
+    var isCurrentStep = currentStepIndex === index;
+    var isCompletedStep = index < currentStepIndex || isComplete;
+    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(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("span", {
+      className: classnames__default.default(ProgressStepper_module.stepName, (_a = {}, _a[ProgressStepper_module.isCurrent] = isCurrentStep, _a)),
+      "aria-hidden": true
+    }, step.label), React__default.default.createElement("div", {
+      className: ProgressStepper_module.stepIndicator
+    }, React__default.default.createElement("span", {
+      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("span", {
+    className: ProgressStepper_module.stepperDescription,
+    id: "stepper-description"
+  }, "Step ", currentStepIndex + 1, " of ", steps.length));
+};
+ProgressStepper.displayName = "Workflow.ProgressStepper";
+exports.ProgressStepper = ProgressStepper;

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.css.cjs

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

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

@@ -0,0 +1,23 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var FooterRoot_module = require('./FooterRoot.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var FooterRoot = function (_a) {
+  var children = _a.children,
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["children", "classNameOverride"]);
+  return React__default.default.createElement("footer", tslib.__assign({
+    className: classnames__default.default(FooterRoot_module.footerRoot, classNameOverride)
+  }, restProps), children);
+};
+FooterRoot.displayName = "Workflow.FooterRoot";
+exports.FooterRoot = FooterRoot;

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

@@ -0,0 +1,32 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var Titles = require('./components/Titles/Titles.cjs');
+var Actions = require('./components/Actions/Actions.cjs');
+var Branding = require('./components/Branding/Branding.cjs');
+var Root = require('./components/Root/Root.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Header = function (_a) {
+  var workflowName = _a.workflowName,
+    stepName = _a.stepName,
+    statusTag = _a.statusTag,
+    headerActions = _a.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,
+    statusTag: statusTag
+  }), React__default.default.createElement(Actions.Actions, {
+    headerActions: headerActions
+  }));
+};
+Header.displayName = "Workflow.Header";
+exports.Header = Header;

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var Actions_module = require('./Actions.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/** A wrapper for an exit trigger (and other) actions of the Header Workflow  */
+var Actions = function (_a) {
+  var headerActions = _a.headerActions,
+    restProps = tslib.__rest(_a, ["headerActions"]);
+  return React__default.default.createElement("div", tslib.__assign({
+    className: Actions_module.actions
+  }, restProps), headerActions === null || headerActions === void 0 ? void 0 : headerActions.map(function (action, index) {
+    return React__default.default.createElement(action.type, tslib.__assign({
+      key: "header-actions ".concat(index)
+    }, action.props));
+  }));
+};
+Actions.displayName = "Workflow.Actions";
+exports.Actions = Actions;

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

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

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var Brand = require('../../../../../Brand/Brand.cjs');
+var Branding_module = require('./Branding.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Branding = function (_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? "logo-horizontal" : _b,
+    alt = _a.alt;
+  return React__default.default.createElement("div", {
+    className: Branding_module.branding
+  }, React__default.default.createElement(Brand.Brand, {
+    classNameOverride: Branding_module.logo,
+    variant: variant,
+    alt: alt
+  }));
+};
+Branding.displayName = "Workflow.Branding";
+exports.Branding = Branding;

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

@@ -0,0 +1,23 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Root_module = require('./Root.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var HeaderRoot = function (_a) {
+  var children = _a.children,
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["children", "classNameOverride"]);
+  return React__default.default.createElement("header", tslib.__assign({
+    className: classnames__default.default(Root_module.root, classNameOverride)
+  }, restProps), children);
+};
+HeaderRoot.displayName = "Workflow.HeaderRoot";
+exports.HeaderRoot = HeaderRoot;

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

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

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

@@ -0,0 +1,38 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var Heading = require('../../../../../Heading/Heading.cjs');
+var VisuallyHidden = require('../../../../../VisuallyHidden/VisuallyHidden.cjs');
+var Titles_module = require('./Titles.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Titles = function (_a) {
+  var workflowName = _a.workflowName,
+    stepName = _a.stepName,
+    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: "composable-header-title",
+    tag: "h1",
+    color: "dark",
+    classNameOverride: Titles_module.pageTitle
+  }, React__default.default.createElement(Heading.Heading, {
+    classNameOverride: Titles_module.prefix,
+    variant: "heading-6",
+    tag: "span",
+    color: "dark-reduced-opacity"
+  }, 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.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

@@ -0,0 +1,23 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Main_module = require('./Main.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var Main = function (_a) {
+  var children = _a.children,
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["children", "classNameOverride"]);
+  return React__default.default.createElement("main", tslib.__assign({
+    className: classnames__default.default([Main_module.main, classNameOverride])
+  }, restProps), children);
+};
+Main.displayName = "Workflow.Main";
+exports.Main = Main;

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

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

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

@@ -0,0 +1,23 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Wrapper_module = require('./Wrapper.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var Wrapper = function (_a) {
+  var children = _a.children,
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["children", "classNameOverride"]);
+  return React__default.default.createElement("div", tslib.__assign({
+    className: classnames__default.default(Wrapper_module.wrapper, classNameOverride)
+  }, restProps), children);
+};
+Wrapper.displayName = "Workflow.Wrapper";
+exports.Wrapper = Wrapper;

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

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

package/dist/cjs/index.cjs

@@ -406,6 +406,7 @@ 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');
 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');
@@ -1036,6 +1037,7 @@ exports.useMediaQueries = useMediaQueries.useMediaQueries;
 exports.assetUrl = hostedAssets.assetUrl;
 exports.VisuallyHidden = VisuallyHidden.VisuallyHidden;
 exports.Well = Well.Well;
+exports.Workflow = Workflow.Workflow;
 exports.Tooltip = index.Tooltip;
 exports.Menu = index$1.Menu;
 exports.MenuHeading = index$1.MenuHeading;

package/dist/esm/Workflow/Workflow.mjs

@@ -0,0 +1,52 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Footer } from './subcomponents/Footer/Footer.mjs';
+import './subcomponents/Footer/components/Root/Root.mjs';
+import { ProgressStepper } from './subcomponents/Footer/components/ProgressStepper/ProgressStepper.mjs';
+import './subcomponents/Footer/components/FooterActions/FooterActions.mjs';
+import { Header } from './subcomponents/Header/Header.mjs';
+import './subcomponents/Header/components/Titles/Titles.mjs';
+import './subcomponents/Header/components/Actions/Actions.mjs';
+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';
+const Workflow = /*#__PURE__*/function () {
+  const Workflow = function (_a) {
+    var steps = _a.steps,
+      currentStepId = _a.currentStepId,
+      isComplete = _a.isComplete,
+      workflowName = _a.workflowName,
+      statusTag = _a.statusTag,
+      headerActions = _a.headerActions,
+      children = _a.children,
+      nextAction = _a.nextAction,
+      previousAction = _a.previousAction,
+      classNameOverride = _a.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: currentStep.label,
+      statusTag: statusTag,
+      headerActions: headerActions
+    }), /*#__PURE__*/React.createElement(Workflow.Main, null, children), /*#__PURE__*/React.createElement(Workflow.Footer, {
+      currentStepId: currentStepId,
+      steps: steps,
+      isComplete: isComplete,
+      nextAction: nextAction,
+      previousAction: previousAction
+    }));
+  };
+  Workflow.Header = Header;
+  Workflow.Footer = Footer;
+  Workflow.Main = Main;
+  Workflow.ProgressStepper = ProgressStepper;
+  Workflow.Wrapper = Wrapper;
+  return Workflow;
+}();
+export { Workflow };

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

@@ -0,0 +1,29 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { FooterRoot } from './components/Root/Root.mjs';
+import { ProgressStepper } from './components/ProgressStepper/ProgressStepper.mjs';
+import { FooterAction } from './components/FooterActions/FooterActions.mjs';
+const Footer = /*#__PURE__*/function () {
+  const Footer = function (_a) {
+    var steps = _a.steps,
+      currentStepId = _a.currentStepId,
+      isComplete = _a.isComplete,
+      previousAction = _a.previousAction,
+      nextAction = _a.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,
+      currentStepId: currentStepId,
+      isComplete: isComplete
+    }), /*#__PURE__*/React.createElement(FooterAction, {
+      action: nextAction,
+      actionType: "Next"
+    }));
+  };
+  Footer.displayName = "Workflow.Footer";
+  return Footer;
+}();
+export { Footer };

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

@@ -0,0 +1,20 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './FooterActions.module.css.mjs';
+
+/** A simple wrapper for a Footer previous or next action  */
+const FooterAction = /*#__PURE__*/function () {
+  const FooterAction = function (_a) {
+    var _b = _a.actionType,
+      actionType = _b === void 0 ? "Previous" : _b,
+      action = _a.action,
+      restProps = __rest(_a, ["actionType", "action"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames([styles.footerAction, styles["footerAction".concat(actionType)]])
+    }, restProps), action);
+  };
+  FooterAction.displayName = "Workflow.FooterActions";
+  return FooterAction;
+}();
+export { FooterAction };

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 };