@kaizen/components 0.0.0-canary-rollup-cjs-20240408010936 → 0.0.0-canary-rollup-cjs-20240408013052

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

@@ -0,0 +1,86 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var button = require('@react-aria/button');
+var select$1 = require('@react-aria/select');
+var select = require('@react-stately/select');
+var classnames = require('classnames');
+var FieldMessage = require('../../FieldMessage/FieldMessage.cjs');
+var Popover = require('../../MultiSelect/subcomponents/Popover/Popover.cjs');
+var reactDom = require('@floating-ui/react-dom');
+var SelectContext = require('./context/SelectContext.cjs');
+var ListBox = require('./subcomponents/ListBox/ListBox.cjs');
+var ListBoxSection = require('./subcomponents/ListBoxSection/ListBoxSection.cjs');
+var ListItem = require('./subcomponents/ListItem/ListItem.cjs');
+require('./subcomponents/ListItems/ListItems.cjs');
+var Option = require('./subcomponents/Option/Option.cjs');
+require('./subcomponents/Overlay/Overlay.cjs');
+var SectionDivider = require('./subcomponents/SectionDivider/SectionDivider.cjs');
+var SelectPopoverContents = require('./subcomponents/SelectPopoverContents/SelectPopoverContents.cjs');
+var SelectToggle = require('./subcomponents/SelectToggle/SelectToggle.cjs');
+var getDisabledKeysFromItems = require('./utils/getDisabledKeysFromItems.cjs');
+var transformSelectItemToCollectionElement = require('./utils/transformSelectItemToCollectionElement.cjs');
+var Select_module = require('./Select.module.scss.cjs');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
+ */
+var Select = function (_a) {
+    var _b;
+    var label = _a.label, items = _a.items, propsId = _a.id, trigger = _a.trigger, children = _a.children, status = _a.status, validationMessage = _a.validationMessage, isReversed = _a.isReversed, isFullWidth = _a.isFullWidth, disabledValues = _a.disabledValues, classNameOverride = _a.classNameOverride, selectedKey = _a.selectedKey, description = _a.description, placeholder = _a.placeholder, isDisabled = _a.isDisabled, portalContainerId = _a.portalContainerId, restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId"]);
+    var refs = reactDom.useFloating().refs;
+    var triggerRef = refs.reference;
+    var id = propsId !== null && propsId !== void 0 ? propsId : React.useId();
+    var descriptionId = "".concat(id, "--description");
+    var popoverId = "".concat(id, "--popover");
+    var disabledKeys = getDisabledKeysFromItems.getDisabledKeysFromItems(items);
+    var ariaSelectProps = tslib.__assign({ label: label, items: items, children: transformSelectItemToCollectionElement.transformSelectItemToCollectionElement, disabledKeys: disabledValues !== null && disabledValues !== void 0 ? disabledValues : disabledKeys, selectedKey: typeof selectedKey === "number" ? selectedKey.toString() : selectedKey, description: description, placeholder: placeholder, isDisabled: isDisabled }, restProps);
+    var state = select.useSelectState(ariaSelectProps);
+    var _c = select$1.useSelect(ariaSelectProps, state, triggerRef), labelProps = _c.labelProps, reactAriaTriggerProps = _c.triggerProps, valueProps = _c.valueProps, menuProps = _c.menuProps, errorMessageProps = _c.errorMessageProps, descriptionProps = _c.descriptionProps;
+    // Hack incoming:
+    // react-aria/useSelect wants to prefix the combobox's accessible name with the value of the select.
+    // We use role=combobox, meaning screen readers will read the value.
+    // So we're modifying the `aria-labelledby` property to remove the value element id.
+    // Issue: https://github.com/adobe/react-spectrum/issues/4091
+    var reactAriaLabelledBy = reactAriaTriggerProps["aria-labelledby"];
+    var triggerProps = tslib.__assign(tslib.__assign({}, reactAriaTriggerProps), { "aria-labelledby": reactAriaLabelledBy === null || reactAriaLabelledBy === void 0 ? void 0 : reactAriaLabelledBy.substring(reactAriaLabelledBy.indexOf(" ") + 1) });
+    var buttonProps = button.useButton(triggerProps, triggerRef).buttonProps;
+    var selectToggleProps = tslib.__assign(tslib.__assign({}, buttonProps), { label: label, labelProps: labelProps, value: (_b = state === null || state === void 0 ? void 0 : state.selectedItem) === null || _b === void 0 ? void 0 : _b.rendered, valueProps: valueProps, isOpen: state.isOpen, placeholder: placeholder, status: status, isDisabled: triggerProps.isDisabled, isReversed: isReversed, ref: refs.setReference });
+    var _d = React.useState(), portalContainer = _d[0], setPortalContainer = _d[1];
+    React.useEffect(function () {
+        if (portalContainerId) {
+            var portalElement = document.getElementById(portalContainerId);
+            portalElement && setPortalContainer(portalElement);
+        }
+    }, []);
+    return (React__default.default.createElement("div", { className: classnames__default.default(!isFullWidth && Select_module.notFullWidth, classNameOverride) },
+        React__default.default.createElement(select$1.HiddenSelect, { label: label, name: id, state: state, triggerRef: triggerRef }),
+        React__default.default.createElement("div", { className: Select_module.container },
+            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,
+                } },
+                React__default.default.createElement(SelectContext.SelectProvider, { state: state },
+                    React__default.default.createElement(SelectPopoverContents.SelectPopoverContents, { menuProps: menuProps }, children))))),
+        validationMessage && (React__default.default.createElement(FieldMessage.FieldMessage, tslib.__assign({}, errorMessageProps, { message: validationMessage, status: status, reversed: isReversed }))),
+        description && (React__default.default.createElement(FieldMessage.FieldMessage, tslib.__assign({}, descriptionProps, { id: descriptionId, message: description, reversed: isReversed })))));
+};
+Select.displayName = "Select";
+Select.Section = ListBoxSection.ListBoxSection;
+Select.SectionDivider = SectionDivider.SectionDivider;
+Select.Option = Option.Option;
+Select.ItemDefaultRender = ListItem.ListItem;
+// @deprecated Legacy exported aliases
+Select.TriggerButton = SelectToggle.SelectToggle;
+Select.ListBox = ListBox.ListBox;
+
+exports.Select = Select;

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

@@ -0,0 +1,5 @@
+'use strict';
+
+var styles = {"container":"Select-module_container__TaMKg","notFullWidth":"Select-module_notFullWidth__Mr-3G"};
+
+module.exports = styles;

package/dist/cjs/__future__/Workflow/Workflow.cjs

@@ -0,0 +1,35 @@
+'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, status = _a.status, headerActions = _a.headerActions, children = _a.children, nextAction = _a.nextAction, previousAction = _a.previousAction, classNameOverride = _a.classNameOverride, restProps = tslib.__rest(_a, ["steps", "currentStepId", "isComplete", "workflowName", "status", "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, status: status, 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/__future__/Workflow/subcomponents/Footer/Footer.cjs

@@ -0,0 +1,22 @@
+'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/__future__/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var FooterActions_module = require('./FooterActions.module.scss.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/__future__/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.module.scss.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+var styles = {"footerAction":"FooterActions-module_footerAction__v7eL-","footerActionPrevious":"FooterActions-module_footerActionPrevious__2XByZ","footerActionNext":"FooterActions-module_footerActionNext__IKRta"};
+
+module.exports = styles;

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

@@ -0,0 +1,64 @@
+'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 Text = require('../../../../../../Text/Text.cjs');
+var VisuallyHidden = require('../../../../../../VisuallyHidden/VisuallyHidden.cjs');
+var ProgressStepper_module = require('./ProgressStepper.module.scss.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 isCurrentStep = currentStepIndex === index;
+            var isCompletedStep = index < currentStepIndex || isComplete;
+            var _a = getStepStatus(isCompletedStep, isCurrentStep, step, index), accessibleName = _a.accessibleName, Icon = _a.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(Text.Text, { classNameOverride: ProgressStepper_module.stepName, variant: "small", color: "white", "aria-hidden": true }, step.label),
+                    React__default.default.createElement("div", { className: ProgressStepper_module.stepIndicator },
+                        React__default.default.createElement("span", { className: ProgressStepper_module.stepIcon }, 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", id: "stepper-description" },
+            "Step ",
+            currentStepIndex + 1,
+            " of ",
+            steps.length)));
+};
+ProgressStepper.displayName = "Workflow.ProgressStepper";
+
+exports.ProgressStepper = ProgressStepper;

package/dist/cjs/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+var styles = {"stepsContainer":"ProgressStepper-module_stepsContainer__WMxXN","stepList":"ProgressStepper-module_stepList__b1wWX","step":"ProgressStepper-module_step__-Ep19","stepContent":"ProgressStepper-module_stepContent__B4uFS","stepIndicator":"ProgressStepper-module_stepIndicator__-qEWT","stepName":"ProgressStepper-module_stepName__hS4lp","stepIcon":"ProgressStepper-module_stepIcon__0Kh4y","stepDivider":"ProgressStepper-module_stepDivider__KEZPU","stepperDescription":"ProgressStepper-module_stepperDescription__B00hX"};
+
+module.exports = styles;

package/dist/cjs/__future__/Workflow/subcomponents/Footer/components/Root/FooterRoot.module.scss.cjs

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

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var FooterRoot_module = require('./FooterRoot.module.scss.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/__future__/Workflow/subcomponents/Header/Header.cjs

@@ -0,0 +1,23 @@
+'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, status = _a.status, headerActions = _a.headerActions, restProps = tslib.__rest(_a, ["workflowName", "stepName", "status", "headerActions"]);
+    return (React__default.default.createElement(Root.HeaderRoot, tslib.__assign({}, restProps),
+        React__default.default.createElement(Branding.Branding, { alt: "Cultureamp" }),
+        React__default.default.createElement(Titles.Titles, { workflowName: workflowName, stepName: stepName, status: status }),
+        React__default.default.createElement(Actions.Actions, { headerActions: headerActions })));
+};
+Header.displayName = "Workflow.Header";
+
+exports.Header = Header;

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

@@ -0,0 +1,18 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var Actions_module = require('./Actions.module.scss.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/__future__/Workflow/subcomponents/Header/components/Actions/Actions.module.scss.cjs

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

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

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+var Brand = require('../../../../../../Brand/Brand.cjs');
+var Branding_module = require('./Branding.module.scss.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/__future__/Workflow/subcomponents/Header/components/Branding/Branding.module.scss.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+var styles = {"branding":"Branding-module_branding__4h-rD","logo":"Branding-module_logo__vqqec"};
+
+module.exports = styles;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Root_module = require('./Root.module.scss.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/__future__/Workflow/subcomponents/Header/components/Root/Root.module.scss.cjs

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

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

@@ -0,0 +1,29 @@
+'use strict';
+
+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');
+
+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, status = _a.status, restProps = tslib.__rest(_a, ["workflowName", "stepName", "status"]);
+    return (React__default.default.createElement("div", tslib.__assign({ className: Titles_module.titles }, restProps),
+        React__default.default.createElement(Heading.Heading, { variant: "heading-1", 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)),
+        status && (
+        // 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)))));
+};
+Titles.displayName = "Workflow.Titles";
+
+exports.Titles = Titles;

package/dist/cjs/__future__/Workflow/subcomponents/Header/components/Titles/Titles.module.scss.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+var styles = {"titles":"Titles-module_titles__JYwU0","pageTitle":"Titles-module_pageTitle__YDp9S","prefix":"Titles-module_prefix__40x8n","status":"Titles-module_status__huuP7"};
+
+module.exports = styles;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Main_module = require('./Main.module.scss.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/__future__/Workflow/subcomponents/Main/Main.module.scss.cjs

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

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Wrapper_module = require('./Wrapper.module.scss.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/__future__/Workflow/subcomponents/Wrapper/Wrapper.module.scss.cjs

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

package/dist/cjs/future.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+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;