@kaizen/components 1.50.0 → 1.52.0

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

@@ -0,0 +1,24 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
+ * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip
+ * relative to the trigger.
+ */
+var TooltipTrigger = function (props) {
+  return React__default.default.createElement(reactAriaComponents.TooltipTrigger, tslib.__assign({
+    delay: 300,
+    closeDelay: 300
+  }, props));
+};
+exports.TooltipTrigger = TooltipTrigger;

package/dist/cjs/__utilities__/ReversedColors/v3/ReversedColors.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+var React = require('react');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var ReversedColorsContext = React__default.default.createContext(false);
+var useReversedColors = function () {
+  return React__default.default.useContext(ReversedColorsContext);
+};
+var ReversedColors = function (_a) {
+  var children = _a.children,
+    _b = _a.isReversed,
+    isReversed = _b === void 0 ? true : _b;
+  return React__default.default.createElement(ReversedColorsContext.Provider, {
+    value: isReversed
+  }, children);
+};
+exports.ReversedColors = ReversedColors;
+exports.useReversedColors = useReversedColors;

package/dist/cjs/index.cjs

@@ -408,11 +408,11 @@ var NavigationTabs = require('./TitleBlockZen/subcomponents/NavigationTabs.cjs')
 var constants = require('./TitleBlockZen/constants.cjs');
 var ToggleSwitch = require('./ToggleSwitch/ToggleSwitch/ToggleSwitch.cjs');
 var ToggleSwitchField = require('./ToggleSwitch/ToggleSwitchField/ToggleSwitchField.cjs');
-var Tooltip = require('./Tooltip/Tooltip.cjs');
 var useMediaQueries = require('./utils/useMediaQueries.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');
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -1040,9 +1040,9 @@ exports.TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID = constants.TITLE_BLOCK_ZEN_OTHER_
 exports.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID = constants.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID;
 exports.ToggleSwitch = ToggleSwitch.ToggleSwitch;
 exports.ToggleSwitchField = ToggleSwitchField.ToggleSwitchField;
-exports.Tooltip = Tooltip.Tooltip;
 exports.subtractOnePixel = useMediaQueries.subtractOnePixel;
 exports.useMediaQueries = useMediaQueries.useMediaQueries;
 exports.VisuallyHidden = VisuallyHidden.VisuallyHidden;
 exports.Well = Well.Well;
 exports.Workflow = Workflow.Workflow;
+exports.Tooltip = index.Tooltip;

package/dist/cjs/overlaysV1.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+var index = require('./__overlays__/Tooltip/v1/index.cjs');
+exports.Tooltip = index.Tooltip;

package/dist/cjs/overlaysV2.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+var Tooltip = require('./__overlays__/Tooltip/v1/Tooltip.cjs');
+exports.Tooltip = Tooltip.Tooltip;

package/dist/cjs/overlaysV3.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var Tooltip = require('./__overlays__/Tooltip/v3/Tooltip.cjs');
+var TooltipTrigger = require('./__overlays__/Tooltip/v3/TooltipTrigger.cjs');
+var Focusable = require('./__overlays__/Focusable/v3/Focusable.cjs');
+var reactAriaComponents = require('react-aria-components');
+exports.Tooltip = Tooltip.Tooltip;
+exports.TooltipTrigger = TooltipTrigger.TooltipTrigger;
+exports.Focusable = Focusable.Focusable;
+Object.defineProperty(exports, "TooltipContext", {
+  enumerable: true,
+  get: function () {
+    return reactAriaComponents.TooltipContext;
+  }
+});

package/dist/cjs/reactAriaComponentsV3.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var reactAriaComponents = require('react-aria-components');
+Object.keys(reactAriaComponents).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () {
+      return reactAriaComponents[k];
+    }
+  });
+});

package/dist/cjs/reactAriaV3.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var reactAria = require('react-aria');
+Object.keys(reactAria).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () {
+      return reactAria[k];
+    }
+  });
+});

package/dist/cjs/utilitiesV3.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+var ReversedColors = require('./__utilities__/ReversedColors/v3/ReversedColors.cjs');
+exports.ReversedColors = ReversedColors.ReversedColors;
+exports.useReversedColors = ReversedColors.useReversedColors;

package/dist/cjs/utils/mergeClassNames.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var classnames = require('classnames');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * Helper to merge classnames together with support for functions that receive state (render props).
+ * This is useful when working with react-aria-components which have a feature where you can pass a function that receives state and returns a classname.
+ * https://react-spectrum.adobe.com/react-aria/styling.html#render-props
+ */
+var mergeClassNames = function () {
+  var classNames = [];
+  for (var _i = 0; _i < arguments.length; _i++) {
+    classNames[_i] = arguments[_i];
+  }
+  var containsFunction = classNames.some(function (className) {
+    return typeof className === "function";
+  });
+  // "as any" is used because TS is not smart enough to know that containsFunction means that ClassNameType doesn't extend Function
+  if (!containsFunction) return classnames__default.default.apply(void 0, classNames);
+  // "as any" is used because TS is not smart enough to know that containsFunction means that ClassNameType doesn't extend Function
+  return function (state) {
+    return classnames__default.default.apply(void 0, classNames.map(function (className) {
+      return typeof className === "function" ? className(state) : className;
+    }));
+  };
+};
+exports.mergeClassNames = mergeClassNames;

package/dist/esm/Button/GenericButton/GenericButton.mjs

@@ -1,6 +1,8 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import classnames from 'classnames';
+import { useLink, useFocusable } from 'react-aria';
+import { useContextProps, LinkContext } from 'react-aria-components';
 import { BadgeAnimated, Badge } from '../../Badge/Badge.mjs';
 import '../../Loading/LoadingGraphic/LoadingGraphic.mjs';
 import '../../Loading/LoadingHeading/LoadingHeading.mjs';
@@ -38,6 +40,7 @@ const GenericButton = /*#__PURE__*/function () {
       type = _h === void 0 ? "button" : _h,
       otherProps = __rest(_a, ["iconPosition", "iconButton", "primary", "secondary", "newTabAndIUnderstandTheAccessibilityImplications", "disableTabFocusAndIUnderstandTheAccessibilityImplications", "type"]);
     var buttonRef = useRef();
+    var wrapperRef = useRef(null);
     useImperativeHandle(ref, function () {
       return {
         focus: function () {
@@ -55,110 +58,115 @@ const GenericButton = /*#__PURE__*/function () {
       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 /*#__PURE__*/React.createElement("span", {
+      ref: wrapperRef,
       className: classnames(styles.container, props.fullWidth && styles.fullWidth),
       "aria-live": "workingLabel" in props ? "polite" : undefined
-    }, determineButtonRenderer());
+    }, props.href && !props.disabled && !props.working ? renderLink(props, buttonRef) : renderButton(props, buttonRef));
   });
   GenericButton.displayName = "GenericButton";
   return 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 = __rest(props, ["id", "disabled", "href", "onClick", "onFocus", "onBlur"]);
-  var customProps = getCustomProps(rest);
-  return /*#__PURE__*/React.createElement(CustomComponent, __assign({
-    id: id,
+var renderCustomComponent = function (CustomComponent, props, ref) {
+  var passedInProps = __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 = useContextProps(passedInProps, ref,
+    // @ts-expect-error we're using span ref on link context, but that's ok because we need only sizing
+    LinkContext),
+    contextProps = _a[0],
+    contextRef = _a[1];
+  // @ts-expect-error
+  // @todo: Make a wrapper and take it out of Button
+  var linkProps = 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 /*#__PURE__*/React.createElement("span", {
+    ref: contextRef,
+    className: classnames(styles.container, props.fullWidth && styles.fullWidth),
+    "aria-live": "workingLabel" in props ? "polite" : undefined
+  }, /*#__PURE__*/React.createElement(CustomComponent, __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 = __rest(props, ["id", "disabled", "onClick", "onMouseDown", "type", "disableTabFocusAndIUnderstandTheAccessibilityImplications", "onFocus", "onBlur", "form", "formAction", "formMethod", "formEncType", "formTarget", "formNoValidate"]);
-  var customProps = getCustomProps(rest);
-  return /*#__PURE__*/React.createElement("button", __assign({
-    // eslint-disable-next-line react/button-has-type
-    type: type,
-    id: id,
-    disabled: disabled,
+  var disableActions = props.disabled || props.working;
+  var passedInProps = __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 = useFocusable(passedInProps, ref).focusableProps;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line react/button-has-type
+    React.createElement("button", __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 = __rest(props, ["id", "href", "onClick", "newTabAndIUnderstandTheAccessibilityImplications", "onFocus", "onBlur"]);
-  var customProps = getCustomProps(rest);
-  var target = newTabAndIUnderstandTheAccessibilityImplications ? "_blank" : "_self";
-  return /*#__PURE__*/React.createElement("a", __assign({
-    id: id,
-    href: href,
+  var target = props.newTabAndIUnderstandTheAccessibilityImplications ? "_blank" : "_self";
+  var passedInProps = __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 = useFocusable(passedInProps, ref).focusableProps;
+  return /*#__PURE__*/React.createElement("a", __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(styles.button, isDefault && styles.default, props.primary && styles.primary, props.destructive && styles.destructive, props.secondary && styles.secondary, props.size && styles[props.size], props.reversed && styles.reversed, props.iconButton && styles.iconButton, props.working && styles.working, (props.directionalLink || props.paginationLink) && styles.circleButton, props.directionalLink && styles.directionalLink, props.paginationLink && styles.paginationLink, props.isActive && styles.isPaginationLinkActive, props.classNameOverride);
+  return classnames(styles.button, isDefault && styles.default,
+  // @ts-ignore
+  (props.disabled || props["aria-disabled"]) && styles.disabled, props.primary && styles.primary, props.destructive && styles.destructive, props.secondary && styles.secondary, props.size && styles[props.size], props.reversed && styles.reversed, props.iconButton && styles.iconButton, props.working && styles.working, (props.directionalLink || props.paginationLink) && styles.circleButton, props.directionalLink && styles.directionalLink, props.paginationLink && styles.paginationLink, props.isActive && styles.isPaginationLinkActive, props.classNameOverride);
 };
 var renderLoadingSpinner = function () {
   return /*#__PURE__*/React.createElement("div", {

package/dist/esm/Button/GenericButton/GenericButton.module.scss.mjs

@@ -1,7 +1,8 @@
 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/esm/ButtonGroup/ButtonGroup.mjs

@@ -2,7 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
 import { FilterButtonBase } from '../Filter/FilterButton/subcomponents/FilterButtonBase/FilterButtonBase.mjs';
-import { Tooltip } from '../Tooltip/Tooltip.mjs';
+import { Tooltip } from '../__overlays__/Tooltip/v1/index.mjs';
 import styles from './ButtonGroup.module.scss.mjs';
 var isFilterButton = function (node) {
   return /*#__PURE__*/React.isValidElement(node) && node.type === FilterButtonBase;

package/dist/esm/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.mjs

@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react';
 import { ButtonGroup } from '../../../ButtonGroup/ButtonGroup.mjs';
 import '../../../Icon/subcomponents/SVG/SVG.mjs';
 import { ClearIcon } from '../../../Icon/ClearIcon.mjs';
-import { Tooltip } from '../../../Tooltip/Tooltip.mjs';
+import { Tooltip } from '../../../__overlays__/Tooltip/v1/index.mjs';
 import { isRefObject } from '../../../utils/isRefObject.mjs';
 import { FilterButton } from '../FilterButton/FilterButton.mjs';
 import { FilterButtonBase } from '../subcomponents/FilterButtonBase/FilterButtonBase.mjs';

package/dist/esm/GuidanceBlock/GuidanceBlock.mjs

@@ -8,7 +8,7 @@ import { Heading } from '../Heading/Heading.mjs';
 import '../Icon/subcomponents/SVG/SVG.mjs';
 import { ArrowForwardIcon } from '../Icon/ArrowForwardIcon.mjs';
 import { Text } from '../Text/Text.mjs';
-import { Tooltip } from '../Tooltip/Tooltip.mjs';
+import { Tooltip } from '../__overlays__/Tooltip/v1/index.mjs';
 import styles from './GuidanceBlock.module.scss.mjs';
 var WithTooltip = function (_a) {
   var tooltipProps = _a.tooltipProps,

package/dist/esm/KaizenProvider/KaizenProvider.mjs

@@ -27,7 +27,7 @@ const KaizenProvider = /*#__PURE__*/function () {
     }, [documentIsAvailable]);
     return /*#__PURE__*/React.createElement(OptionalIntlProvider, {
       locale: locale
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToastNotificationProvider, null, notificationsList, children), /*#__PURE__*/React.createElement(FontDefinitions, null)));
+    }, /*#__PURE__*/React.createElement(ToastNotificationProvider, null, notificationsList, children), /*#__PURE__*/React.createElement(FontDefinitions, null));
   };
   KaizenProvider.displayName = "KaizenProvider";
   return KaizenProvider;

package/dist/esm/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.mjs

@@ -1,15 +1,24 @@
 import React, { useContext } from 'react';
 import { StaticIntlProvider } from '@cultureamp/i18n-react-intl';
+import { I18nProvider } from 'react-aria';
 import { IntlContext } from 'react-intl';
 const OptionalIntlProvider = /*#__PURE__*/function () {
   const OptionalIntlProvider = function (_a) {
     var locale = _a.locale,
       children = _a.children;
     var parent = useContext(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 /*#__PURE__*/React.createElement(I18nProvider, {
+        locale: parent.locale
+      }, children);
+    }
     return /*#__PURE__*/React.createElement(StaticIntlProvider, {
       locale: locale
-    }, children);
+    }, /*#__PURE__*/React.createElement(I18nProvider, {
+      locale: locale
+    }, children));
   };
   OptionalIntlProvider.displayName = "OptionalIntlProvider";
   return OptionalIntlProvider;

package/dist/esm/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.mjs

@@ -5,9 +5,8 @@ import { ClearButton } from '../../../ClearButton/ClearButton.mjs';
 import '../../../Icon/subcomponents/SVG/SVG.mjs';
 import { ChevronDownIcon } from '../../../Icon/ChevronDownIcon.mjs';
 import { ChevronUpIcon } from '../../../Icon/ChevronUpIcon.mjs';
-import { RemovableTag } from '../../../__future__/Tag/RemovableTag/RemovableTag.mjs';
-import '../../../__future__/Tag/Tag/Tag.mjs';
 import styles from './MultiSelectToggle.module.scss.mjs';
+import { RemovableTag } from '../../../__future__/Tag/RemovableTag/RemovableTag.mjs';
 const MultiSelectToggle = /*#__PURE__*/function () {
   const MultiSelectToggle = /*#__PURE__*/forwardRef(function (_a, ref) {
     var onClick = _a.onClick,

package/dist/esm/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/ToggleIconButton.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import { Tooltip } from '../../../../Tooltip/Tooltip.mjs';
+import { Tooltip } from '../../../../__overlays__/Tooltip/v1/index.mjs';
 import styles from './ToggleIconButton.module.scss.mjs';
 const ToggleIconButton = /*#__PURE__*/function () {
   const ToggleIconButton = /*#__PURE__*/React.forwardRef(function (props, ref) {

package/dist/esm/Table/Table.mjs

@@ -9,7 +9,7 @@ import '../Icon/subcomponents/SVG/SVG.mjs';
 import { ExclamationIcon } from '../Icon/ExclamationIcon.mjs';
 import { SortAscendingIcon } from '../Icon/SortAscendingIcon.mjs';
 import { SortDescendingIcon } from '../Icon/SortDescendingIcon.mjs';
-import { Tooltip } from '../Tooltip/Tooltip.mjs';
+import { Tooltip } from '../__overlays__/Tooltip/v1/index.mjs';
 import styles from './Table.module.scss.mjs';
 
 /**

package/dist/esm/Tabs/subcomponents/Tab.mjs

@@ -1,7 +1,8 @@
 import { __rest, __assign } from 'tslib';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Tab as Tab$1 } from '@reach/tabs';
 import classnames from 'classnames';
+import { useFocusable } from 'react-aria';
 import { Badge } from '../../Badge/Badge.mjs';
 import styles from './Tab.module.scss.mjs';
 
@@ -15,6 +16,7 @@ var Tab = function (props) {
     children = props.children,
     classNameOverride = props.classNameOverride,
     restProps = __rest(props, ["isSelected", "badge", "disabled", "children", "classNameOverride"]);
+  var ref = useRef(null);
   var _a = useState(false),
     isHovered = _a[0],
     setIsHovered = _a[1];
@@ -22,28 +24,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 /*#__PURE__*/React.createElement(Tab$1, __assign({
+  var tabProps = __assign({
     disabled: disabled,
     className: classnames(styles.tab, classNameOverride, isSelected && styles.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 && ( /*#__PURE__*/React.createElement("span", {
+  }, restProps);
+  var focusableProps = 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 /*#__PURE__*/React.createElement(Tab$1, __assign({
+    ref: ref
+  }, tabProps, focusableProps), children, badge && ( /*#__PURE__*/React.createElement("span", {
     className: styles.badge
   }, /*#__PURE__*/React.createElement(Badge, {
     variant: showActiveBadge ? "active" : "default"

package/dist/esm/TitleBlockZen/TitleBlockZen.mjs

@@ -244,7 +244,7 @@ const TitleBlockZen = /*#__PURE__*/function () {
     }, /*#__PURE__*/React.createElement("div", {
       className: styles.title
     }, /*#__PURE__*/React.createElement(Heading, {
-      variant: "heading-1",
+      variant: "composable-header-title",
       color: isReversed(variant) ? "white" : "dark",
       classNameOverride: styles.titleTextOverride,
       "data-automation-id": titleAutomationId,

package/dist/esm/__overlays__/Focusable/v3/Focusable.mjs

@@ -0,0 +1,24 @@
+import { __rest, __assign } from 'tslib';
+import React, { useRef } from 'react';
+import classnames from 'classnames';
+import { useFocusable } from 'react-aria';
+import styles from './Focusable.module.scss.mjs';
+var Focusable = function (_a) {
+  var children = _a.children,
+    className = _a.className,
+    props = __rest(_a, ["children", "className"]);
+  var ref = useRef(null);
+  var focusableProps = useFocusable(props, ref).focusableProps;
+  return /*#__PURE__*/React.createElement("div", __assign({
+    ref: ref,
+    className: classnames(styles.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);
+};
+export { Focusable };

package/dist/esm/__overlays__/Focusable/v3/Focusable.module.scss.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "focusableWrapper": "Focusable-module_focusableWrapper__NfuIi"
+};
+export { styles as default };

package/dist/esm/__overlays__/Tooltip/v1/Tooltip.module.scss.mjs

@@ -0,0 +1,19 @@
+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"
+};
+export { styles as default };

package/dist/esm/__overlays__/Tooltip/v1/index.mjs

@@ -0,0 +1,6 @@
+import { Tooltip as Tooltip$1 } from './Tooltip.mjs';
+
+// 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;
+export { Tooltip };