@kaizen/components 1.63.0 → 1.63.2

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

@@ -0,0 +1,90 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+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 { VisuallyHidden } from '../../../../../VisuallyHidden/VisuallyHidden.mjs';
+import styles from './ProgressStepper.module.css.mjs';
+var getStepStatus = function (isComplete, isCurrentStep, step, index) {
+  if (isComplete) {
+    return {
+      icon: ( /*#__PURE__*/React.createElement(SuccessIcon, {
+        key: index,
+        inheritSize: true,
+        role: "presentation",
+        classNameOverride: "success"
+      })),
+      accessibleName: "Completed: ".concat(step.label)
+    };
+  }
+  if (isCurrentStep) {
+    return {
+      icon: ( /*#__PURE__*/React.createElement(IndicatorActiveIcon, {
+        key: index,
+        inheritSize: true,
+        role: "presentation",
+        classNameOverride: "active"
+      })),
+      accessibleName: "Current: ".concat(step.label)
+    };
+  }
+  return {
+    icon: ( /*#__PURE__*/React.createElement(IndicatorInactiveIcon, {
+      key: index,
+      inheritSize: true,
+      classNameOverride: "incomplete",
+      role: "presentation"
+    })),
+    accessibleName: "Not started: ".concat(step.label)
+  };
+};
+const ProgressStepper = /*#__PURE__*/function () {
+  const ProgressStepper = function (_a) {
+    var currentStepId = _a.currentStepId,
+      steps = _a.steps,
+      _b = _a.isComplete,
+      isComplete = _b === void 0 ? false : _b,
+      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({
+      className: styles.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 /*#__PURE__*/React.createElement("li", {
+        className: styles.step,
+        key: "".concat(step.id),
+        "aria-current": isCurrentStep
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.stepContent
+      }, /*#__PURE__*/React.createElement(VisuallyHidden, null, accessibleName), /*#__PURE__*/React.createElement("span", {
+        className: classnames(styles.stepName, (_a = {}, _a[styles.isCurrent] = isCurrentStep, _a)),
+        "aria-hidden": true
+      }, step.label), /*#__PURE__*/React.createElement("div", {
+        className: styles.stepIndicator
+      }, /*#__PURE__*/React.createElement("span", {
+        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("span", {
+      className: styles.stepperDescription,
+      id: "stepper-description"
+    }, "Step ", currentStepIndex + 1, " of ", steps.length));
+  };
+  ProgressStepper.displayName = "Workflow.ProgressStepper";
+  return ProgressStepper;
+}();
+export { ProgressStepper };

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

@@ -0,0 +1,17 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './FooterRoot.module.css.mjs';
+const FooterRoot = /*#__PURE__*/function () {
+  const FooterRoot = function (_a) {
+    var children = _a.children,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("footer", __assign({
+      className: classnames(styles.footerRoot, classNameOverride)
+    }, restProps), children);
+  };
+  FooterRoot.displayName = "Workflow.FooterRoot";
+  return FooterRoot;
+}();
+export { FooterRoot };

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

@@ -0,0 +1,27 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Titles } from './components/Titles/Titles.mjs';
+import { Actions } from './components/Actions/Actions.mjs';
+import { Branding } from './components/Branding/Branding.mjs';
+import { HeaderRoot } from './components/Root/Root.mjs';
+const Header = /*#__PURE__*/function () {
+  const Header = function (_a) {
+    var workflowName = _a.workflowName,
+      stepName = _a.stepName,
+      statusTag = _a.statusTag,
+      headerActions = _a.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,
+      statusTag: statusTag
+    }), /*#__PURE__*/React.createElement(Actions, {
+      headerActions: headerActions
+    }));
+  };
+  Header.displayName = "Workflow.Header";
+  return Header;
+}();
+export { Header };

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

@@ -0,0 +1,21 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import styles from './Actions.module.css.mjs';
+
+/** A wrapper for an exit trigger (and other) actions of the Header Workflow  */
+const Actions = /*#__PURE__*/function () {
+  const Actions = function (_a) {
+    var headerActions = _a.headerActions,
+      restProps = __rest(_a, ["headerActions"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: styles.actions
+    }, restProps), headerActions === null || headerActions === void 0 ? void 0 : headerActions.map(function (action, index) {
+      return /*#__PURE__*/React.createElement(action.type, __assign({
+        key: "header-actions ".concat(index)
+      }, action.props));
+    }));
+  };
+  Actions.displayName = "Workflow.Actions";
+  return Actions;
+}();
+export { Actions };

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Brand } from '../../../../../Brand/Brand.mjs';
+import styles from './Branding.module.css.mjs';
+const Branding = /*#__PURE__*/function () {
+  const Branding = function (_a) {
+    var _b = _a.variant,
+      variant = _b === void 0 ? "logo-horizontal" : _b,
+      alt = _a.alt;
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.branding
+    }, /*#__PURE__*/React.createElement(Brand, {
+      classNameOverride: styles.logo,
+      variant: variant,
+      alt: alt
+    }));
+  };
+  Branding.displayName = "Workflow.Branding";
+  return Branding;
+}();
+export { Branding };

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

@@ -0,0 +1,17 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './Root.module.css.mjs';
+const HeaderRoot = /*#__PURE__*/function () {
+  const HeaderRoot = function (_a) {
+    var children = _a.children,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("header", __assign({
+      className: classnames(styles.root, classNameOverride)
+    }, restProps), children);
+  };
+  HeaderRoot.displayName = "Workflow.HeaderRoot";
+  return HeaderRoot;
+}();
+export { HeaderRoot };

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

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

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

@@ -0,0 +1,34 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Heading } from '../../../../../Heading/Heading.mjs';
+import { VisuallyHidden } from '../../../../../VisuallyHidden/VisuallyHidden.mjs';
+import styles from './Titles.module.css.mjs';
+const Titles = /*#__PURE__*/function () {
+  const Titles = function (_a) {
+    var workflowName = _a.workflowName,
+      stepName = _a.stepName,
+      statusTag = _a.statusTag,
+      restProps = __rest(_a, ["workflowName", "stepName", "statusTag"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: styles.titles
+    }, restProps), /*#__PURE__*/React.createElement(Heading, {
+      variant: "composable-header-title",
+      tag: "h1",
+      color: "dark",
+      classNameOverride: styles.pageTitle
+    }, /*#__PURE__*/React.createElement(Heading, {
+      classNameOverride: styles.prefix,
+      variant: "heading-6",
+      tag: "span",
+      color: "dark-reduced-opacity"
+    }, workflowName, /*#__PURE__*/React.createElement(VisuallyHidden, null, ":")), /*#__PURE__*/React.createElement("span", null, stepName)), statusTag && (
+    /*#__PURE__*/
+    // status may need to be update by a fetch
+    React.createElement("div", {
+      className: styles.statusTag
+    }, statusTag)));
+  };
+  Titles.displayName = "Workflow.Titles";
+  return Titles;
+}();
+export { Titles };

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

@@ -0,0 +1,7 @@
+var styles = {
+  "titles": "Titles-module_titles__ENQ0C",
+  "pageTitle": "Titles-module_pageTitle__ePjdw",
+  "prefix": "Titles-module_prefix__FEtyY",
+  "statusTag": "Titles-module_statusTag__hmyfK"
+};
+export { styles as default };

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

@@ -0,0 +1,17 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './Main.module.css.mjs';
+const Main = /*#__PURE__*/function () {
+  const Main = function (_a) {
+    var children = _a.children,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("main", __assign({
+      className: classnames([styles.main, classNameOverride])
+    }, restProps), children);
+  };
+  Main.displayName = "Workflow.Main";
+  return Main;
+}();
+export { Main };

package/dist/esm/Workflow/subcomponents/Main/Main.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "main": "Main-module_main__K9Z0C"
+};
+export { styles as default };

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

@@ -0,0 +1,17 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './Wrapper.module.css.mjs';
+const Wrapper = /*#__PURE__*/function () {
+  const Wrapper = function (_a) {
+    var children = _a.children,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(styles.wrapper, classNameOverride)
+    }, restProps), children);
+  };
+  Wrapper.displayName = "Workflow.Wrapper";
+  return Wrapper;
+}();
+export { Wrapper };

package/dist/esm/Workflow/subcomponents/Wrapper/Wrapper.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "wrapper": "Wrapper-module_wrapper__-tWQy"
+};
+export { styles as default };

package/dist/esm/index.mjs

@@ -411,6 +411,7 @@ export { subtractOnePixel, useMediaQueries } from './utils/useMediaQueries.mjs';
 export { assetUrl } from './utils/hostedAssets.mjs';
 export { VisuallyHidden } from './VisuallyHidden/VisuallyHidden.mjs';
 export { Well } from './Well/Well.mjs';
+export { Workflow } from './Workflow/Workflow.mjs';
 export { Tooltip } from './__overlays__/Tooltip/v1/index.mjs';
 export { Menu, MenuHeading, MenuItem, MenuList, StatelessMenu } from './__actions__/Menu/v1/index.mjs';
 export { Button } from './__actions__/Button/v1/Button/Button.mjs';

package/dist/styles.css

@@ -27,36 +27,6 @@
 .OverlayArrow-module_overlayArrow__hoDyK.OverlayArrow-module_reversed__-WGcR path {
   fill: var(--color-white, #ffffff);
 }
-.Menu-module_menu__iHYqh {
-  background-color: var(--color-white);
-  color: var(--color-purple-800);
-  width: 248px;
-  max-height: 22rem;
-  overflow: auto;
-  padding-block: var(--spacing-6);
-  outline: none;
-  border-radius: var(--border-solid-border-radius);
-  box-shadow: var(--shadow-large-box-shadow);
-}
-
-.Menu-module_menu__iHYqh .react-aria-Header {
-  font-family: var(--typography-heading-6-font-family);
-  font-size: var(--typography-heading-6-font-size);
-  letter-spacing: var(--typography-heading-6-letter-spacing);
-  font-weight: var(--typography-heading-6-font-weight);
-  line-height: var(--typography-heading-6-line-height);
-  padding: var(--spacing-6) 10px;
-  margin-inline: var(--spacing-6);
-}
-
-.Menu-module_menu__iHYqh section:not(:last-of-type)::after {
-  width: 100%;
-  height: 1px;
-  background-color: var(--border-solid-border-color);
-  content: "";
-  display: block;
-  margin-block: var(--spacing-6);
-}
 .MenuItem-module_item__DPerF {
   font-family: var(--typography-paragraph-body-font-family);
   font-size: var(--typography-paragraph-body-font-size);
@@ -91,6 +61,36 @@
 .MenuItem-module_item__DPerF[data-disabled] {
   opacity: 0.3;
 }
+.Menu-module_menu__iHYqh {
+  background-color: var(--color-white);
+  color: var(--color-purple-800);
+  width: 248px;
+  max-height: 22rem;
+  overflow: auto;
+  padding-block: var(--spacing-6);
+  outline: none;
+  border-radius: var(--border-solid-border-radius);
+  box-shadow: var(--shadow-large-box-shadow);
+}
+
+.Menu-module_menu__iHYqh .react-aria-Header {
+  font-family: var(--typography-heading-6-font-family);
+  font-size: var(--typography-heading-6-font-size);
+  letter-spacing: var(--typography-heading-6-letter-spacing);
+  font-weight: var(--typography-heading-6-font-weight);
+  line-height: var(--typography-heading-6-line-height);
+  padding: var(--spacing-6) 10px;
+  margin-inline: var(--spacing-6);
+}
+
+.Menu-module_menu__iHYqh section:not(:last-of-type)::after {
+  width: 100%;
+  height: 1px;
+  background-color: var(--border-solid-border-color);
+  content: "";
+  display: block;
+  margin-block: var(--spacing-6);
+}
 .Button-module_button__QOSYH {
   --button-min-height-width: var(--spacing-48);
   --button-padding-x: calc(
@@ -12186,3 +12186,246 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   --border-color: transparent;
   --border-style: none;
 }
+.FooterRoot-module_footerRoot__-osuZ {
+  display: grid;
+  grid-template-areas: "prev stepper next";
+  grid-template-columns: 1fr 2fr 1fr;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-24) var(--spacing-12);
+  background: var(--color-white);
+  gap: var(--spacing-16);
+  border-top: 2px solid rgba(var(--color-gray-600-rgb), 0.1);
+
+  @media (width >= 768px) {
+    grid-template-columns: 1fr 5fr 1fr;
+    padding: var(--spacing-24) var(--spacing-32);
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+  }
+}
+
+.ProgressStepper-module_stepsContainer__7Motj {
+  --progress-stepper-indicator-size: 1.25rem;
+
+  width: 100%;
+  grid-area: stepper;
+}
+
+.ProgressStepper-module_stepList__jmArV {
+  display: none;
+  justify-content: center;
+  align-items: flex-end;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  @media (width >= 768px) {
+    display: flex;
+  }
+}
+
+.ProgressStepper-module_step__x0O0y {
+  display: flex;
+  flex-grow: 1;
+  flex-basis: 100%;
+  justify-content: center;
+  max-width: var(--spacing-96);
+  overflow-wrap: break-word;
+  position: relative;
+  container: step / inline-size;
+}
+
+.ProgressStepper-module_stepContent__OuBES {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.ProgressStepper-module_stepIndicator__opcbs {
+  width: var(--progress-stepper-indicator-size);
+  height: var(--progress-stepper-indicator-size);
+  position: relative;
+}
+
+.ProgressStepper-module_stepName__QvpQ4 {
+  display: none;
+  text-align: center;
+  margin-bottom: var(--spacing-12);
+  font-family: var(--typography-paragraph-small-font-family);
+  font-size: var(--typography-paragraph-small-font-size);
+  line-height: var(--typography-paragraph-small-line-height);
+  font-weight: var(--typography-paragraph-bold-font-weight);
+  color: var(--color-gray-600);
+}
+
+.ProgressStepper-module_stepName__QvpQ4.ProgressStepper-module_isCurrent__L8bL9 {
+  color: var(--color-purple-800);
+}
+
+.ProgressStepper-module_stepIcon__K-fVm {
+  color: var(--color-purple-800);
+  position: absolute;
+  width: var(--progress-stepper-indicator-size);
+  height: var(--progress-stepper-indicator-size);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.ProgressStepper-module_stepIcon__K-fVm.ProgressStepper-module_isCompleted__l7HiL {
+  color: var(--color-green-500);
+}
+
+.ProgressStepper-module_stepDivider__1dq4c {
+  height: 0;
+  display: flex;
+  position: absolute;
+  flex-grow: 1;
+  min-width: calc(100% - var(--spacing-24));
+  border: solid var(--spacing-1) var(--color-gray-300);
+  margin: 0;
+  border-radius: var(--border-solid-border-radius);
+  left: 100%;
+
+  /* sets fron the bottom to the centre of the dot */
+  top: calc(100% - calc(var(--progress-stepper-indicator-size) / 2));
+  transform: translateX(-50%);
+
+  [dir="rtl"] & {
+    left: unset;
+    right: 100%;
+    transform: translateX(50%);
+  }
+}
+
+.ProgressStepper-module_stepperDescription__KplV3 {
+  display: flex;
+  justify-content: center;
+  font-family: var(--typography-paragraph-small-font-family);
+  font-weight: var(--typography-paragraph-small-font-weight);
+  font-size: var(--typography-paragraph-small-font-size);
+  line-height: var(--typography-paragraph-small-line-height);
+
+  @media (width >= 768px) {
+    /* sr hidden styles */
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+}
+
+/* Some defensive CSS for many steps on desktop screens */
+@container step (width >= 4.5rem) {
+  .ProgressStepper-module_stepName__QvpQ4 {
+    display: inline;
+  }
+}
+
+.FooterActions-module_footerAction__szvPs {
+  display: flex;
+  flex-grow: 1;
+  flex-basis: auto;
+}
+
+.FooterActions-module_footerActionPrevious__VJ6j1 {
+  grid-area: "prev";
+  justify-content: start;
+}
+
+.FooterActions-module_footerActionNext__koFhj {
+  grid-area: "next";
+  justify-content: end;
+}
+
+.Titles-module_titles__ENQ0C {
+  grid-area: titles;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+}
+
+.Titles-module_pageTitle__ePjdw {
+  display: flex;
+  flex-direction: column;
+}
+
+.Titles-module_prefix__FEtyY {
+  margin-bottom: var(--spacing-4);
+}
+
+.Titles-module_statusTag__hmyfK {
+  margin-top: var(--spacing-8);
+}
+
+.Actions-module_actions__JzCWB {
+  grid-area: actions;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+
+  @media (width >= 768px) {
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-end;
+    margin-top: calc(-1 * var(--spacing-12));
+  }
+}
+
+.Branding-module_branding__g3OoE {
+  justify-content: center;
+  grid-area: branding;
+  display: flex;
+  flex-grow: 1;
+  padding-top: var(--spacing-4);
+
+  @media (width >= 768px) {
+    justify-content: unset;
+  }
+}
+
+.Branding-module_logo__yLHfs {
+  flex-basis: 7.5rem;
+}
+
+.Root-module_root__-1P72 {
+  display: grid;
+  background-color: var(--color-white);
+  grid-template: "branding" min-content "titles" max-content "actions" min-content / 1fr;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: var(--spacing-24);
+  gap: var(--spacing-16);
+  border-bottom: 2px solid rgb(var(--color-gray-600-rgb), 0.1);
+
+  @media (width >= 768px) {
+    align-items: start;
+    grid-template: "branding titles actions" min-content / 1fr max-content 1fr;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+}
+
+.Main-module_main__K9Z0C {
+  /* This is set so children will sit beneath the header and footer when sticky */
+  z-index: 0;
+}
+
+.Wrapper-module_wrapper__-tWQy {
+  display: grid;
+  grid-template-rows: min-content 1fr min-content;
+  position: relative;
+  min-height: 100vh;
+  background: var(--color-gray-100);
+}
+

package/dist/types/GuidanceBlock/GuidanceBlock.d.ts

@@ -6,6 +6,9 @@ import { TooltipProps } from "../__overlays__/Tooltip/v1";
 import { VariantType } from "./types";
 export type ActionProps = ButtonProps & {
     tooltip?: TooltipProps;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
 };
 type LayoutType = "default" | "inline" | "stacked";
 type IllustrationType = "spot" | "scene";

package/dist/types/index.d.ts

@@ -57,6 +57,7 @@ export * from "./ToggleSwitch";
 export * from "./utils";
 export * from "./VisuallyHidden";
 export * from "./Well";
+export * from "./Workflow";
 export * from "./__overlays__/Tooltip/v1";
 export * from "./__actions__/Menu/v1";
 export * from "./__actions__/Button/v1";