@kaizen/components 1.51.0 → 1.52.1

package/dist/cjs/Button/GenericButton/GenericButton.cjs

@@ -3,6 +3,8 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
+var reactAria = require('react-aria');
+var reactAriaComponents = require('react-aria-components');
 var Badge = require('../../Badge/Badge.cjs');
 require('../../Loading/LoadingGraphic/LoadingGraphic.cjs');
 require('../../Loading/LoadingHeading/LoadingHeading.cjs');
@@ -46,6 +48,7 @@ var GenericButton = React.forwardRef(function (_a, ref) {
     type = _h === void 0 ? "button" : _h,
     otherProps = tslib.__rest(_a, ["iconPosition", "iconButton", "primary", "secondary", "newTabAndIUnderstandTheAccessibilityImplications", "disableTabFocusAndIUnderstandTheAccessibilityImplications", "type"]);
   var buttonRef = React.useRef();
+  var wrapperRef = React.useRef(null);
   React.useImperativeHandle(ref, function () {
     return {
       focus: function () {
@@ -63,108 +66,112 @@ var GenericButton = React.forwardRef(function (_a, ref) {
     disableTabFocusAndIUnderstandTheAccessibilityImplications: disableTabFocusAndIUnderstandTheAccessibilityImplications,
     type: type
   }, otherProps);
-  var determineButtonRenderer = function () {
-    if (props.component) {
-      return renderCustomComponent(props.component, props);
-    }
-    if (props.href && !props.disabled && !props.working) {
-      return renderLink(props, buttonRef);
-    }
-    return renderButton(props, buttonRef);
-  };
+  if (props.component) {
+    return renderCustomComponent(props.component, props, wrapperRef);
+  }
   return React__default.default.createElement("span", {
+    ref: wrapperRef,
     className: classnames__default.default(GenericButton_module.container, props.fullWidth && GenericButton_module.fullWidth),
     "aria-live": "workingLabel" in props ? "polite" : undefined
-  }, determineButtonRenderer());
+  }, props.href && !props.disabled && !props.working ? renderLink(props, buttonRef) : renderButton(props, buttonRef));
 });
 GenericButton.displayName = "GenericButton";
-var renderCustomComponent = function (CustomComponent, props) {
-  var id = props.id,
-    disabled = props.disabled,
-    href = props.href,
-    onClick = props.onClick,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    rest = tslib.__rest(props, ["id", "disabled", "href", "onClick", "onFocus", "onBlur"]);
-  var customProps = getCustomProps(rest);
-  return React__default.default.createElement(CustomComponent, tslib.__assign({
-    id: id,
+var renderCustomComponent = function (CustomComponent, props, ref) {
+  var passedInProps = tslib.__assign({
+    id: props.id,
     className: buttonClass(props),
-    disabled: disabled,
-    href: href,
-    onClick: onClick,
-    onFocus: onFocus,
-    onBlur: onBlur,
+    disabled: props.disabled,
+    href: props.href,
+    onClick: props.onClick,
+    onFocus: props.onFocus,
+    onBlur: props.onBlur,
     "aria-label": generateAriaLabel(props)
-  }, customProps), renderContent(props));
+  }, getCustomProps(props));
+  var _a = reactAriaComponents.useContextProps(passedInProps, ref,
+    // @ts-expect-error we're using span ref on link context, but that's ok because we need only sizing
+    reactAriaComponents.LinkContext),
+    contextProps = _a[0],
+    contextRef = _a[1];
+  // @ts-expect-error
+  // @todo: Make a wrapper and take it out of Button
+  var linkProps = reactAria.useLink(contextProps, contextRef).linkProps;
+  // Unset this because the one defined in buttonProps shows
+  // focus-visible styles on click, in future we'll style using [data-focus-visible] which is consistent across browsers
+  delete linkProps.onPointerDown;
+  return React__default.default.createElement("span", {
+    ref: contextRef,
+    className: classnames__default.default(GenericButton_module.container, props.fullWidth && GenericButton_module.fullWidth),
+    "aria-live": "workingLabel" in props ? "polite" : undefined
+  }, React__default.default.createElement(CustomComponent, tslib.__assign({}, contextProps, linkProps, {
+    "aria-describedby": props["aria-describedby"] === null ? undefined : linkProps["aria-describedby"]
+  }), renderContent(props)));
 };
 var renderButton = function (props, ref) {
-  var id = props.id,
-    disabled = props.disabled,
-    onClick = props.onClick,
-    onMouseDown = props.onMouseDown,
-    type = props.type,
-    disableTabFocusAndIUnderstandTheAccessibilityImplications = props.disableTabFocusAndIUnderstandTheAccessibilityImplications,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    form = props.form,
-    formAction = props.formAction,
-    formMethod = props.formMethod,
-    formEncType = props.formEncType,
-    formTarget = props.formTarget,
-    formNoValidate = props.formNoValidate,
-    rest = tslib.__rest(props, ["id", "disabled", "onClick", "onMouseDown", "type", "disableTabFocusAndIUnderstandTheAccessibilityImplications", "onFocus", "onBlur", "form", "formAction", "formMethod", "formEncType", "formTarget", "formNoValidate"]);
-  var customProps = getCustomProps(rest);
-  return React__default.default.createElement("button", tslib.__assign({
-    // eslint-disable-next-line react/button-has-type
-    type: type,
-    id: id,
-    disabled: disabled,
+  var disableActions = props.disabled || props.working;
+  var passedInProps = tslib.__assign({
+    id: props.id,
+    disabled: props.disabled,
+    onClick: !disableActions ? props.onClick : undefined,
+    onMouseDown: !disableActions ? props.onMouseDown : undefined,
+    type: props.type,
+    onFocus: props.onFocus,
+    onBlur: props.onBlur,
+    form: props.form,
+    formAction: props.formAction,
+    formMethod: props.formMethod,
+    formEncType: props.formEncType,
+    formTarget: props.formTarget,
+    formNoValidate: props.formNoValidate,
     className: buttonClass(props),
-    onClick: onClick,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onMouseDown: function (e) {
-      return onMouseDown && onMouseDown(e);
-    },
     "aria-label": generateAriaLabel(props),
-    "aria-disabled": disabled || props.working ? true : undefined,
-    form: form,
-    formAction: formAction,
-    formMethod: formMethod,
-    formEncType: formEncType,
-    formTarget: formTarget,
-    formNoValidate: formNoValidate,
-    tabIndex: disableTabFocusAndIUnderstandTheAccessibilityImplications ? -1 : undefined,
-    ref: ref
-  }, customProps), renderContent(props));
+    "aria-disabled": props.disabled || props.working ? true : undefined,
+    tabIndex: props.disableTabFocusAndIUnderstandTheAccessibilityImplications ? -1 : undefined
+  }, getCustomProps(props));
+  // we're using useFocusable instead of useButton because at this stage we want to hook only to focusable.
+  // Not standardize button behavior as we're currently relying on some weird native behaviours (like onClick firing on enter key press) see https://react-spectrum.adobe.com/blog/building-a-button-part-1.html
+  // @ts-ignore
+  var focusableProps = reactAria.useFocusable(passedInProps, ref).focusableProps;
+  return (
+    // eslint-disable-next-line react/button-has-type
+    React__default.default.createElement("button", tslib.__assign({}, passedInProps, focusableProps, {
+      "aria-describedby": props["aria-describedby"] === null ? undefined : props["aria-describedby"] || focusableProps["aria-describedby"],
+      // Unset this because the one defined in buttonProps shows
+      // focus-visible styles on click
+      onPointerDown: undefined,
+      ref: ref
+    }), renderContent(props))
+  );
 };
 var renderLink = function (props, ref) {
-  var id = props.id,
-    href = props.href,
-    onClick = props.onClick,
-    newTabAndIUnderstandTheAccessibilityImplications = props.newTabAndIUnderstandTheAccessibilityImplications,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    rest = tslib.__rest(props, ["id", "href", "onClick", "newTabAndIUnderstandTheAccessibilityImplications", "onFocus", "onBlur"]);
-  var customProps = getCustomProps(rest);
-  var target = newTabAndIUnderstandTheAccessibilityImplications ? "_blank" : "_self";
-  return React__default.default.createElement("a", tslib.__assign({
-    id: id,
-    href: href,
+  var target = props.newTabAndIUnderstandTheAccessibilityImplications ? "_blank" : "_self";
+  var passedInProps = tslib.__assign({
+    id: props.id,
+    href: props.href,
     target: target,
     rel: target === "_blank" ? "noopener noreferrer" : undefined,
     className: buttonClass(props),
-    onClick: onClick,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    ref: ref,
+    onClick: props.onClick,
+    onFocus: props.onFocus,
+    onBlur: props.onBlur,
     "aria-label": generateAriaLabel(props)
-  }, customProps), renderContent(props));
+  }, getCustomProps(props));
+  // we're using useFocusable instead of useLink because at this stage we want to hook only to focusable.
+  // Not standardize button behavior as we're currently relying on some weird native behaviours (like onClick firing on enter key press) see https://react-spectrum.adobe.com/blog/building-a-button-part-1.html
+  // @ts-ignore
+  var focusableProps = reactAria.useFocusable(passedInProps, ref).focusableProps;
+  return React__default.default.createElement("a", tslib.__assign({}, passedInProps, focusableProps, {
+    "aria-describedby": props["aria-describedby"] === null ? undefined : props["aria-describedby"] || focusableProps["aria-describedby"],
+    // Unset this because the one defined in linkProps shows
+    // focus-visible styles on click
+    onPointerDown: undefined,
+    ref: ref
+  }), renderContent(props));
 };
 var buttonClass = function (props) {
   var isDefault = !props.primary && !props.destructive && !props.secondary;
-  return classnames__default.default(GenericButton_module.button, isDefault && GenericButton_module.default, props.primary && GenericButton_module.primary, props.destructive && GenericButton_module.destructive, props.secondary && GenericButton_module.secondary, props.size && GenericButton_module[props.size], props.reversed && GenericButton_module.reversed, props.iconButton && GenericButton_module.iconButton, props.working && GenericButton_module.working, (props.directionalLink || props.paginationLink) && GenericButton_module.circleButton, props.directionalLink && GenericButton_module.directionalLink, props.paginationLink && GenericButton_module.paginationLink, props.isActive && GenericButton_module.isPaginationLinkActive, props.classNameOverride);
+  return classnames__default.default(GenericButton_module.button, isDefault && GenericButton_module.default,
+  // @ts-ignore
+  (props.disabled || props["aria-disabled"]) && GenericButton_module.disabled, props.primary && GenericButton_module.primary, props.destructive && GenericButton_module.destructive, props.secondary && GenericButton_module.secondary, props.size && GenericButton_module[props.size], props.reversed && GenericButton_module.reversed, props.iconButton && GenericButton_module.iconButton, props.working && GenericButton_module.working, (props.directionalLink || props.paginationLink) && GenericButton_module.circleButton, props.directionalLink && GenericButton_module.directionalLink, props.paginationLink && GenericButton_module.paginationLink, props.isActive && GenericButton_module.isPaginationLinkActive, props.classNameOverride);
 };
 var renderLoadingSpinner = function () {
   return React__default.default.createElement("div", {

package/dist/cjs/Button/GenericButton/GenericButton.module.scss.cjs

@@ -2,8 +2,9 @@
 
 var styles = {
   "button": "GenericButton-module_button__CrXoI",
-  "reversed": "GenericButton-module_reversed__Pzsic",
+  "disabled": "GenericButton-module_disabled__S0O3z",
   "working": "GenericButton-module_working__mRozR",
+  "reversed": "GenericButton-module_reversed__Pzsic",
   "content": "GenericButton-module_content__E-vUa",
   "default": "GenericButton-module_default__miX7x",
   "primary": "GenericButton-module_primary__FB-Ts",

package/dist/cjs/ButtonGroup/ButtonGroup.cjs

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var FilterButtonBase = require('../Filter/FilterButton/subcomponents/FilterButtonBase/FilterButtonBase.cjs');
-var Tooltip = require('../Tooltip/Tooltip.cjs');
+var index = require('../__overlays__/Tooltip/v1/index.cjs');
 var ButtonGroup_module = require('./ButtonGroup.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -26,9 +26,9 @@ var ButtonGroup = function (_a) {
     className: classnames__default.default(ButtonGroup_module.buttonGroup, classNameOverride)
   }, restProps);
   if (childCount === 1) return React__default.default.createElement("div", tslib.__assign({}, containerProps), children);
-  return React__default.default.createElement("div", tslib.__assign({}, containerProps), React__default.default.Children.map(children, function (child, index) {
-    var buttonClassNames = classnames__default.default(ButtonGroup_module.child, index === 0 && ButtonGroup_module.firstChild, index === childCount - 1 && ButtonGroup_module.lastChild, child.props.classNameOverride);
-    if (child.type === Tooltip.Tooltip) {
+  return React__default.default.createElement("div", tslib.__assign({}, containerProps), React__default.default.Children.map(children, function (child, index$1) {
+    var buttonClassNames = classnames__default.default(ButtonGroup_module.child, index$1 === 0 && ButtonGroup_module.firstChild, index$1 === childCount - 1 && ButtonGroup_module.lastChild, child.props.classNameOverride);
+    if (child.type === index.Tooltip) {
       var button = child.props.children;
       if (isFilterButton(button)) {
         return React__default.default.cloneElement(child, {

package/dist/cjs/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.cjs

@@ -5,7 +5,7 @@ var React = require('react');
 var ButtonGroup = require('../../../ButtonGroup/ButtonGroup.cjs');
 require('../../../Icon/subcomponents/SVG/SVG.cjs');
 var ClearIcon = require('../../../Icon/ClearIcon.cjs');
-var Tooltip = require('../../../Tooltip/Tooltip.cjs');
+var index = require('../../../__overlays__/Tooltip/v1/index.cjs');
 var isRefObject = require('../../../utils/isRefObject.cjs');
 var FilterButton = require('../FilterButton/FilterButton.cjs');
 var FilterButtonBase = require('../subcomponents/FilterButtonBase/FilterButtonBase.cjs');
@@ -25,7 +25,7 @@ var FilterButtonRemovable = React.forwardRef(function (_a, ref) {
   var removeButtonLabel = (_b = removeButtonProps === null || removeButtonProps === void 0 ? void 0 : removeButtonProps.tooltipText) !== null && _b !== void 0 ? _b : "Remove filter - ".concat(triggerButtonProps === null || triggerButtonProps === void 0 ? void 0 : triggerButtonProps.label);
   return React__default.default.createElement(ButtonGroup.ButtonGroup, tslib.__assign({}, restProps), React__default.default.createElement(FilterButton.FilterButton, tslib.__assign({
     ref: ref
-  }, triggerButtonProps)), React__default.default.createElement(Tooltip.Tooltip, {
+  }, triggerButtonProps)), React__default.default.createElement(index.Tooltip, {
     text: removeButtonLabel,
     display: "inline-block",
     position: "below"

package/dist/cjs/GuidanceBlock/GuidanceBlock.cjs

@@ -10,7 +10,7 @@ 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 Tooltip = require('../Tooltip/Tooltip.cjs');
+var index = require('../__overlays__/Tooltip/v1/index.cjs');
 var GuidanceBlock_module = require('./GuidanceBlock.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -23,7 +23,7 @@ var Media__default = /*#__PURE__*/_interopDefault(Media);
 var WithTooltip = function (_a) {
   var tooltipProps = _a.tooltipProps,
     children = _a.children;
-  return !!tooltipProps ? React__default.default.createElement(Tooltip.Tooltip, tslib.__assign({}, tooltipProps), children) : React__default.default.createElement(React__default.default.Fragment, null, children);
+  return !!tooltipProps ? React__default.default.createElement(index.Tooltip, tslib.__assign({}, tooltipProps), children) : React__default.default.createElement(React__default.default.Fragment, null, children);
 };
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block Guidance} |

package/dist/cjs/KaizenProvider/KaizenProvider.cjs

@@ -34,7 +34,7 @@ var KaizenProvider = function (_a) {
   }, [documentIsAvailable]);
   return React__default.default.createElement(OptionalIntlProvider.OptionalIntlProvider, {
     locale: locale
-  }, React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(ToastNotificationContext.ToastNotificationProvider, null, notificationsList, children), React__default.default.createElement(FontDefinitions.FontDefinitions, null)));
+  }, React__default.default.createElement(ToastNotificationContext.ToastNotificationProvider, null, notificationsList, children), React__default.default.createElement(FontDefinitions.FontDefinitions, null));
 };
 KaizenProvider.displayName = "KaizenProvider";
 exports.KaizenProvider = KaizenProvider;

package/dist/cjs/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.cjs

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var i18nReactIntl = require('@cultureamp/i18n-react-intl');
+var reactAria = require('react-aria');
 var reactIntl = require('react-intl');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -13,10 +14,18 @@ var OptionalIntlProvider = function (_a) {
   var locale = _a.locale,
     children = _a.children;
   var parent = React.useContext(reactIntl.IntlContext);
-  if (parent) return children;
+  if (parent) {
+    // we always wrap with react-aria provider as we have no way checking if parent is wrapped (useLocale returns default value if not)
+    // but it's not a big deal as we'll consume the defined locale anyways so no effect on children
+    return React__default.default.createElement(reactAria.I18nProvider, {
+      locale: parent.locale
+    }, children);
+  }
   return React__default.default.createElement(i18nReactIntl.StaticIntlProvider, {
     locale: locale
-  }, children);
+  }, React__default.default.createElement(reactAria.I18nProvider, {
+    locale: locale
+  }, children));
 };
 OptionalIntlProvider.displayName = "OptionalIntlProvider";
 exports.OptionalIntlProvider = OptionalIntlProvider;

package/dist/cjs/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.cjs

@@ -7,9 +7,8 @@ var ClearButton = require('../../../ClearButton/ClearButton.cjs');
 require('../../../Icon/subcomponents/SVG/SVG.cjs');
 var ChevronDownIcon = require('../../../Icon/ChevronDownIcon.cjs');
 var ChevronUpIcon = require('../../../Icon/ChevronUpIcon.cjs');
-var RemovableTag = require('../../../__future__/Tag/RemovableTag/RemovableTag.cjs');
-require('../../../__future__/Tag/Tag/Tag.cjs');
 var MultiSelectToggle_module = require('./MultiSelectToggle.module.scss.cjs');
+var RemovableTag = require('../../../__future__/Tag/RemovableTag/RemovableTag.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/ToggleIconButton.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var Tooltip = require('../../../../Tooltip/Tooltip.cjs');
+var index = require('../../../../__overlays__/Tooltip/v1/index.cjs');
 var ToggleIconButton_module = require('./ToggleIconButton.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -24,7 +24,7 @@ var ToggleIconButton = React__default.default.forwardRef(function (props, ref) {
     classNameOverride = props.classNameOverride,
     onClick = props.onClick,
     nativeButtonProps = tslib.__rest(props, ["label", "icon", "isActive", "mood", "disabled", "classNameOverride", "onClick"]);
-  return React__default.default.createElement(Tooltip.Tooltip, {
+  return React__default.default.createElement(index.Tooltip, {
     text: label,
     display: "inline-block",
     position: "above",

package/dist/cjs/Table/Table.cjs

@@ -11,7 +11,7 @@ require('../Icon/subcomponents/SVG/SVG.cjs');
 var ExclamationIcon = require('../Icon/ExclamationIcon.cjs');
 var SortAscendingIcon = require('../Icon/SortAscendingIcon.cjs');
 var SortDescendingIcon = require('../Icon/SortDescendingIcon.cjs');
-var Tooltip = require('../Tooltip/Tooltip.cjs');
+var index = require('../__overlays__/Tooltip/v1/index.cjs');
 var Table_module = require('./Table.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -162,7 +162,7 @@ var TableHeaderRowCell = function (_a) {
   React__default.default.createElement("div", {
     className: Table_module.headerRowCellNoButton
   }, cellContents);
-  cellContents = tooltipInfo != null ? React__default.default.createElement(Tooltip.Tooltip, {
+  cellContents = tooltipInfo != null ? React__default.default.createElement(index.Tooltip, {
     animationDuration: 0,
     classNameOverride: Table_module.headerRowCellTooltip,
     text: tooltipInfo,

package/dist/cjs/Tabs/subcomponents/Tab.cjs

@@ -4,6 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var tabs = require('@reach/tabs');
 var classnames = require('classnames');
+var reactAria = require('react-aria');
 var Badge = require('../../Badge/Badge.cjs');
 var Tab_module = require('./Tab.module.scss.cjs');
 function _interopDefault(e) {
@@ -24,6 +25,7 @@ var Tab = function (props) {
     children = props.children,
     classNameOverride = props.classNameOverride,
     restProps = tslib.__rest(props, ["isSelected", "badge", "disabled", "children", "classNameOverride"]);
+  var ref = React.useRef(null);
   var _a = React.useState(false),
     isHovered = _a[0],
     setIsHovered = _a[1];
@@ -31,28 +33,32 @@ var Tab = function (props) {
     isFocused = _b[0],
     setIsFocused = _b[1];
   var showActiveBadge = isSelected || isHovered || isFocused;
-  var onFocus = function (event) {
-    var _a;
-    setIsFocused(true);
-    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
-  };
-  var onBlur = function (event) {
-    var _a;
-    setIsFocused(false);
-    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
-  };
-  return React__default.default.createElement(tabs.Tab, tslib.__assign({
+  var tabProps = tslib.__assign({
     disabled: disabled,
     className: classnames__default.default(Tab_module.tab, classNameOverride, isSelected && Tab_module.selected),
-    onFocus: onFocus,
-    onBlur: onBlur,
+    onFocus: function (event) {
+      var _a;
+      setIsFocused(true);
+      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    },
+    onBlur: function (event) {
+      var _a;
+      setIsFocused(false);
+      (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    },
     onMouseEnter: function () {
       return setIsHovered(true);
     },
     onMouseLeave: function () {
       return setIsHovered(false);
     }
-  }, restProps), children, badge && React__default.default.createElement("span", {
+  }, restProps);
+  var focusableProps = reactAria.useFocusable(tabProps, ref).focusableProps;
+  // Reach is setting and managing tabIndex for us here, so we remove it from the focusableProps (also it needs to be non-defined, undefined is not enough)
+  delete focusableProps.tabIndex;
+  return React__default.default.createElement(tabs.Tab, tslib.__assign({
+    ref: ref
+  }, tabProps, focusableProps), children, badge && React__default.default.createElement("span", {
     className: Tab_module.badge
   }, React__default.default.createElement(Badge.Badge, {
     variant: showActiveBadge ? "active" : "default"

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

@@ -19,7 +19,7 @@ var Header = function (_a) {
     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"
+    alt: "Culture Amp"
   }), React__default.default.createElement(Titles.Titles, {
     workflowName: workflowName,
     stepName: stepName,

package/dist/cjs/__overlays__/Focusable/v3/Focusable.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var reactAria = require('react-aria');
+var Focusable_module = require('./Focusable.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 Focusable = function (_a) {
+  var children = _a.children,
+    className = _a.className,
+    props = tslib.__rest(_a, ["children", "className"]);
+  var ref = React.useRef(null);
+  var focusableProps = reactAria.useFocusable(props, ref).focusableProps;
+  return React__default.default.createElement("div", tslib.__assign({
+    ref: ref,
+    className: classnames__default.default(Focusable_module.focusableWrapper, className)
+  }, focusableProps, {
+    "data-inline-hidden-content": true,
+    // We want the div to be focusable for keyboard users,
+    // but screen readers will have the VisuallyHidden content
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex: 0,
+    "aria-describedby": undefined
+  }, props), children);
+};
+exports.Focusable = Focusable;

package/dist/cjs/__overlays__/Focusable/v3/Focusable.module.scss.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "focusableWrapper": "Focusable-module_focusableWrapper__NfuIi"
+};
+module.exports = styles;

package/dist/cjs/__overlays__/Tooltip/v1/Tooltip.module.scss.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var styles = {
+  "tooltip": "Tooltip-module_tooltip__Qa021",
+  "tooltipContent": "Tooltip-module_tooltipContent__B1va8",
+  "default": "Tooltip-module_default__oc1MF",
+  "informative": "Tooltip-module_informative__2IhL8",
+  "positive": "Tooltip-module_positive__0jHXh",
+  "cautionary": "Tooltip-module_cautionary__yGXwE",
+  "highlight": "Tooltip-module_highlight__RiT9b",
+  "arrow": "Tooltip-module_arrow__brVJc",
+  "arrowInner": "Tooltip-module_arrowInner__wOJTc",
+  "arrowMain": "Tooltip-module_arrowMain__uVNp3",
+  "arrowShadow": "Tooltip-module_arrowShadow__HYZRR",
+  "displayInline": "Tooltip-module_displayInline__H48ln",
+  "displayBlock": "Tooltip-module_displayBlock__se4CN",
+  "displayInlineBlock": "Tooltip-module_displayInlineBlock__2k-Z6",
+  "displayFlex": "Tooltip-module_displayFlex__PLv5m",
+  "displayInlineFlex": "Tooltip-module_displayInlineFlex__bRLEm"
+};
+module.exports = styles;

package/dist/cjs/__overlays__/Tooltip/v1/index.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var Tooltip$1 = require('./Tooltip.cjs');
+
+// Since we can't add a deprecation flag on a * export
+/** * @deprecated use v2 or upgrade to v3 for the latest release */
+var Tooltip = Tooltip$1.Tooltip;
+exports.Tooltip = Tooltip;

package/dist/cjs/__overlays__/Tooltip/v3/OverlayArrow.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var mergeClassNames = require('../../../utils/mergeClassNames.cjs');
+var OverlayArrow_module = require('./OverlayArrow.module.scss.cjs');
+var ReversedColors = require('../../../__utilities__/ReversedColors/v3/ReversedColors.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * An OverlayArrow renders a custom arrow element relative to an overlay element
+ * such as a popover or tooltip such that it aligns with a trigger element.
+ */
+var OverlayArrow = function (props) {
+  var reverseColors = ReversedColors.useReversedColors();
+  return React__default.default.createElement(reactAriaComponents.OverlayArrow, tslib.__assign({}, props, {
+    className: mergeClassNames.mergeClassNames(OverlayArrow_module.overlayArrow, reverseColors && OverlayArrow_module.reversed, props.className)
+  }), React__default.default.createElement("svg", {
+    width: 8,
+    height: 8,
+    viewBox: "0 0 8 8"
+  }, React__default.default.createElement("path", {
+    d: "M0 0 L4 4 L8 0"
+  })));
+};
+exports.OverlayArrow = OverlayArrow;

package/dist/cjs/__overlays__/Tooltip/v3/OverlayArrow.module.scss.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "overlayArrow": "OverlayArrow-module_overlayArrow__hoDyK",
+  "reversed": "OverlayArrow-module_reversed__-WGcR"
+};
+module.exports = styles;

package/dist/cjs/__overlays__/Tooltip/v3/Tooltip.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactAria = require('react-aria');
+var reactAriaComponents = require('react-aria-components');
+var mergeClassNames = require('../../../utils/mergeClassNames.cjs');
+var OverlayArrow = require('./OverlayArrow.cjs');
+var Tooltip_module = require('./Tooltip.module.scss.cjs');
+var ReversedColors = require('../../../__utilities__/ReversedColors/v3/ReversedColors.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * A tooltip displays a description of an element on hover or focus.
+ */
+var Tooltip = React.forwardRef(function (_a, ref) {
+  var children = _a.children,
+    className = _a.className,
+    props = tslib.__rest(_a, ["children", "className"]);
+  var triggerRef = reactAriaComponents.useContextProps(tslib.__assign({
+    children: children,
+    className: className
+  }, props), ref, reactAriaComponents.TooltipContext)[0].triggerRef;
+  var contextState = React.useContext(reactAriaComponents.TooltipTriggerStateContext);
+  var reverseColors = ReversedColors.useReversedColors();
+  var _b = React.useState(false),
+    shouldInlineHiddenContent = _b[0],
+    setShouldInlineHiddenContent = _b[1];
+  React.useLayoutEffect(function () {
+    var _a;
+    setShouldInlineHiddenContent(!!((_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute("data-inline-hidden-content")));
+  }, [triggerRef]);
+  return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(reactAriaComponents.Tooltip, tslib.__assign({
+    ref: ref,
+    offset: 8
+  }, props, {
+    className: mergeClassNames.mergeClassNames(Tooltip_module.tooltip, className, reverseColors && Tooltip_module.reversed)
+  }), function (renderProps) {
+    return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(OverlayArrow.OverlayArrow, null), typeof children === "function" ? children(renderProps) : children);
+  }), shouldInlineHiddenContent ? React__default.default.createElement(reactAria.VisuallyHidden, null, typeof children === "function" ? children({
+    placement: "center",
+    isEntering: false,
+    isExiting: false,
+    state: contextState,
+    defaultChildren: undefined
+  }) : children) : null);
+});
+Object.defineProperty(exports, "TooltipContext", {
+  enumerable: true,
+  get: function () {
+    return reactAriaComponents.TooltipContext;
+  }
+});
+exports.Tooltip = Tooltip;

package/dist/cjs/__overlays__/Tooltip/v3/Tooltip.module.scss.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var styles = {
+  "tooltip": "Tooltip-module_tooltip__efL1m",
+  "reversed": "Tooltip-module_reversed__NnCbZ",
+  "slide": "Tooltip-module_slide__lFdGA"
+};
+module.exports = styles;