@kaizen/components 0.0.0-canary-rollup-20240408071509 → 0.0.0-canary-rollup--tree-shake-20240408080317

package/dist/esm/TimeField/TimeField.mjs

@@ -12,32 +12,84 @@ import styles from './TimeField.module.scss.mjs';
 
 // This needed to be placed directly below the props because
 // the prop descriptions wouldn't show in Storybook otherwise.
-var TimeField = function (props) { return (React.createElement(I18nProvider, { locale: props.locale },
-    React.createElement(TimeFieldComponent, __assign({}, props)))); };
-TimeField.displayName = "TimeField";
-var TimeFieldComponent = function (_a) {
-    var propsId = _a.id, label = _a.label, locale = _a.locale, onChange = _a.onChange, value = _a.value, _b = _a.status, status = _b === void 0 ? "default" : _b, validationMessage = _a.validationMessage, isDisabled = _a.isDisabled, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["id", "label", "locale", "onChange", "value", "status", "validationMessage", "isDisabled", "classNameOverride"]);
+const TimeField = /*#__PURE__*/function () {
+  const TimeField = function (props) {
+    return /*#__PURE__*/React.createElement(I18nProvider, {
+      locale: props.locale
+    }, /*#__PURE__*/React.createElement(TimeFieldComponent, __assign({}, props)));
+  };
+  TimeField.displayName = "TimeField";
+  return TimeField;
+}();
+const TimeFieldComponent = /*#__PURE__*/function () {
+  const TimeFieldComponent = function (_a) {
+    var propsId = _a.id,
+      label = _a.label,
+      locale = _a.locale,
+      onChange = _a.onChange,
+      value = _a.value,
+      _b = _a.status,
+      status = _b === void 0 ? "default" : _b,
+      validationMessage = _a.validationMessage,
+      isDisabled = _a.isDisabled,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["id", "label", "locale", "onChange", "value", "status", "validationMessage", "isDisabled", "classNameOverride"]);
     var reactId = useId();
     var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
     var handleOnChange = function (timeValue) {
-        if (timeValue === null) {
-            return onChange(null);
-        }
-        onChange({ hour: timeValue.hour, minutes: timeValue.minute });
+      if (timeValue === null) {
+        return onChange(null);
+      }
+      onChange({
+        hour: timeValue.hour,
+        minutes: timeValue.minute
+      });
     };
-    var state = useTimeFieldState(__assign(__assign({}, restProps), { value: value ? new Time(value.hour, value.minutes) : null, onChange: handleOnChange, isDisabled: isDisabled, hideTimeZone: true, locale: locale, validationState: status === "default" ? "valid" : "invalid" }));
+    var state = useTimeFieldState(__assign(__assign({}, restProps), {
+      value: value ? new Time(value.hour, value.minutes) : null,
+      onChange: handleOnChange,
+      isDisabled: isDisabled,
+      hideTimeZone: true,
+      locale: locale,
+      validationState: status === "default" ? "valid" : "invalid"
+    }));
     var hasError = !!validationMessage && status === "error";
     var descriptionId = hasError ? "".concat(id, "-field-message") : undefined;
     var inputRef = React.useRef(null);
-    var _c = useTimeField(__assign(__assign({}, restProps), { label: label, isDisabled: isDisabled, "aria-describedby": descriptionId }), state, inputRef), fieldProps = _c.fieldProps, labelProps = _c.labelProps;
-    return (React.createElement("div", { className: classNameOverride },
-        React.createElement(Label, __assign({ disabled: state.isDisabled }, labelProps, { classNameOverride: styles.label }), label),
-        React.createElement("div", { className: styles.wrapper },
-            React.createElement("div", __assign({}, fieldProps, { id: id, ref: inputRef, className: classnames(styles.input, state.isDisabled && styles.isDisabled, state.validationState === "invalid" && styles.error) }),
-                state.segments.map(function (segment, i) { return (React.createElement(TimeSegment, { key: i, segment: segment, state: state })); }),
-                React.createElement("div", { className: styles.focusRing }))),
-        hasError && (React.createElement(FieldMessage, { id: descriptionId, message: validationMessage, status: status }))));
-};
-TimeFieldComponent.displayName = "TimeFieldComponent";
-
+    var _c = useTimeField(__assign(__assign({}, restProps), {
+        label: label,
+        isDisabled: isDisabled,
+        "aria-describedby": descriptionId
+      }), state, inputRef),
+      fieldProps = _c.fieldProps,
+      labelProps = _c.labelProps;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNameOverride
+    }, /*#__PURE__*/React.createElement(Label, __assign({
+      disabled: state.isDisabled
+    }, labelProps, {
+      classNameOverride: styles.label
+    }), label), /*#__PURE__*/React.createElement("div", {
+      className: styles.wrapper
+    }, /*#__PURE__*/React.createElement("div", __assign({}, fieldProps, {
+      id: id,
+      ref: inputRef,
+      className: classnames(styles.input, state.isDisabled && styles.isDisabled, state.validationState === "invalid" && styles.error)
+    }), state.segments.map(function (segment, i) {
+      return /*#__PURE__*/React.createElement(TimeSegment, {
+        key: i,
+        segment: segment,
+        state: state
+      });
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles.focusRing
+    }))), hasError && ( /*#__PURE__*/React.createElement(FieldMessage, {
+      id: descriptionId,
+      message: validationMessage,
+      status: status
+    })));
+  };
+  TimeFieldComponent.displayName = "TimeFieldComponent";
+  return TimeFieldComponent;
+}();
 export { TimeField };

package/dist/esm/TimeField/TimeField.module.scss.mjs

@@ -1,3 +1,9 @@
-var styles = {"wrapper":"TimeField-module_wrapper__YuSI3","label":"TimeField-module_label__kjKyK","input":"TimeField-module_input__Hxjcu","focusRing":"TimeField-module_focusRing__7hgWG","isDisabled":"TimeField-module_isDisabled__rpEc8","error":"TimeField-module_error__tK2QY"};
-
+var styles = {
+  "wrapper": "TimeField-module_wrapper__YuSI3",
+  "label": "TimeField-module_label__kjKyK",
+  "input": "TimeField-module_input__Hxjcu",
+  "focusRing": "TimeField-module_focusRing__7hgWG",
+  "isDisabled": "TimeField-module_isDisabled__rpEc8",
+  "error": "TimeField-module_error__tK2QY"
+};
 export { styles as default };

package/dist/esm/TimeField/subcomponents/TimeSegment/TimeSegment.mjs

@@ -4,20 +4,24 @@ import { useDateSegment } from '@react-aria/datepicker';
 import classnames from 'classnames';
 import { generateSegmentDisplayText } from './utils/generateSegmentDisplayText.mjs';
 import styles from './TimeSegment.module.scss.mjs';
-
-var TimeSegment = function (_a) {
-    var segment = _a.segment, state = _a.state;
+const TimeSegment = /*#__PURE__*/function () {
+  const TimeSegment = function (_a) {
+    var segment = _a.segment,
+      state = _a.state;
     var ref = React.useRef(null);
     var segmentProps = useDateSegment(segment, state, ref).segmentProps;
     // Chrome has a bug where `contenteditable` elements receive focus from external clicks.
     // This (in combination with the invisible character ​) creates boundaries
     // for the element.
     // https://stackoverflow.com/a/34445203
-    return (React.createElement("span", { className: styles.timeSegmentWrapper },
-        "\u200B",
-        React.createElement("span", __assign({}, segmentProps, { ref: ref, className: classnames(styles.timeSegment, segment.type === "literal" && styles.literal, segment.isPlaceholder && styles.placeholder, segment.type === "dayPeriod" && styles.dayPeriod) }), generateSegmentDisplayText(segment)),
-        "\u200B"));
-};
-TimeSegment.displayName = "TimeSegment";
-
+    return /*#__PURE__*/React.createElement("span", {
+      className: styles.timeSegmentWrapper
+    }, "\u200B", /*#__PURE__*/React.createElement("span", __assign({}, segmentProps, {
+      ref: ref,
+      className: classnames(styles.timeSegment, segment.type === "literal" && styles.literal, segment.isPlaceholder && styles.placeholder, segment.type === "dayPeriod" && styles.dayPeriod)
+    }), generateSegmentDisplayText(segment)), "\u200B");
+  };
+  TimeSegment.displayName = "TimeSegment";
+  return TimeSegment;
+}();
 export { TimeSegment };

package/dist/esm/TimeField/subcomponents/TimeSegment/TimeSegment.module.scss.mjs

@@ -1,3 +1,8 @@
-var styles = {"timeSegmentWrapper":"TimeSegment-module_timeSegmentWrapper__WYD6y","timeSegment":"TimeSegment-module_timeSegment__eXb0c","placeholder":"TimeSegment-module_placeholder__j1-gK","literal":"TimeSegment-module_literal__mOkqz","dayPeriod":"TimeSegment-module_dayPeriod__fzT5I"};
-
+var styles = {
+  "timeSegmentWrapper": "TimeSegment-module_timeSegmentWrapper__WYD6y",
+  "timeSegment": "TimeSegment-module_timeSegment__eXb0c",
+  "placeholder": "TimeSegment-module_placeholder__j1-gK",
+  "literal": "TimeSegment-module_literal__mOkqz",
+  "dayPeriod": "TimeSegment-module_dayPeriod__fzT5I"
+};
 export { styles as default };

package/dist/esm/TimeField/subcomponents/TimeSegment/utils/generateSegmentDisplayText.mjs

@@ -1,5 +1,4 @@
 var generateSegmentDisplayText = function (segment) {
-    return segment.isPlaceholder && segment.type !== "dayPeriod" ? "--" : segment.text;
+  return segment.isPlaceholder && segment.type !== "dayPeriod" ? "--" : segment.text;
 };
-
 export { generateSegmentDisplayText };

package/dist/esm/TitleBlockZen/TitleBlockZen.mjs

@@ -17,142 +17,284 @@ import { MobileActions } from './subcomponents/MobileActions.mjs';
 import { SecondaryActions } from './subcomponents/SecondaryActions.mjs';
 import { isReversed, createTabletOverflowMenuItems } from './utils.mjs';
 import styles from './TitleBlockZen.module.scss.mjs';
-
 var renderTag = function (surveyStatus) {
-    var tagVariant;
-    if (tagVariant === "profile") {
-        return;
-    }
-    if (surveyStatus.status === "draft") {
-        tagVariant = "statusDraft";
-    }
-    /*
-      scheduled is actually a draft survey status that has a launch job scheduled
-      still, we want to differentiate on the UI and render a specific tag
-      the styles must be identical to the draft style
-  
-      we have similar behaviour on programs index page's table
-    */
-    if (surveyStatus.status === "scheduled") {
-        tagVariant = "statusClosed";
-    }
-    if (surveyStatus.status === "live") {
-        tagVariant = "statusLive";
-    }
-    if (surveyStatus.status === "closed") {
-        tagVariant = "statusClosed";
-    }
-    if (surveyStatus.status === "sentimentPositive") {
-        tagVariant = "sentimentPositive";
-    }
-    if (surveyStatus.status === "default") {
-        tagVariant = "default";
-    }
-    return (React.createElement("div", { "data-automation-id": "survey-status-tag", "data-testid": "survey-status-tag", className: styles.tag },
-        React.createElement(Tag, { variant: tagVariant, size: "small" }, surveyStatus.text)));
+  var tagVariant;
+  if (tagVariant === "profile") {
+    return;
+  }
+  if (surveyStatus.status === "draft") {
+    tagVariant = "statusDraft";
+  }
+  /*
+    scheduled is actually a draft survey status that has a launch job scheduled
+    still, we want to differentiate on the UI and render a specific tag
+    the styles must be identical to the draft style
+       we have similar behaviour on programs index page's table
+  */
+  if (surveyStatus.status === "scheduled") {
+    tagVariant = "statusClosed";
+  }
+  if (surveyStatus.status === "live") {
+    tagVariant = "statusLive";
+  }
+  if (surveyStatus.status === "closed") {
+    tagVariant = "statusClosed";
+  }
+  if (surveyStatus.status === "sentimentPositive") {
+    tagVariant = "sentimentPositive";
+  }
+  if (surveyStatus.status === "default") {
+    tagVariant = "default";
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    "data-automation-id": "survey-status-tag",
+    "data-testid": "survey-status-tag",
+    className: styles.tag
+  }, /*#__PURE__*/React.createElement(Tag, {
+    variant: tagVariant,
+    size: "small"
+  }, surveyStatus.text));
 };
 var isJSXElement = function (imageElementOrAvatarProps) {
-    return "props" in imageElementOrAvatarProps;
+  return "props" in imageElementOrAvatarProps;
 };
 var renderAvatar = function (imageElementOrAvatarProps, avatarAutomationId) {
-    return isJSXElement(imageElementOrAvatarProps) ? (React.createElement("div", { "data-automation-id": avatarAutomationId, "data-testid": avatarAutomationId, className: classnames(styles.avatar, styles.withBorder) }, imageElementOrAvatarProps)) : (React.createElement("div", { "data-automation-id": avatarAutomationId, "data-testid": avatarAutomationId, className: styles.avatar },
-        React.createElement(Avatar, __assign({}, imageElementOrAvatarProps, { size: "medium" }))));
+  return isJSXElement(imageElementOrAvatarProps) ? ( /*#__PURE__*/React.createElement("div", {
+    "data-automation-id": avatarAutomationId,
+    "data-testid": avatarAutomationId,
+    className: classnames(styles.avatar, styles.withBorder)
+  }, imageElementOrAvatarProps)) : ( /*#__PURE__*/React.createElement("div", {
+    "data-automation-id": avatarAutomationId,
+    "data-testid": avatarAutomationId,
+    className: styles.avatar
+  }, /*#__PURE__*/React.createElement(Avatar, __assign({}, imageElementOrAvatarProps, {
+    size: "medium"
+  }))));
+};
+var renderSubtitle = function (subtitle, subtitleAutomationId) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.subtitle
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-automation-id": subtitleAutomationId,
+    "data-testid": subtitleAutomationId,
+    className: styles.subtitleText
+  }, subtitle));
+};
+var defaultRenderSectionTitle = function (sectionTitle, sectionTitleDescription, variant, sectionTitleAutomationId, sectionTitleDescriptionAutomationId) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, sectionTitle && ( /*#__PURE__*/React.createElement("div", {
+    className: styles.sectionTitle
+  }, /*#__PURE__*/React.createElement(Heading, {
+    variant: "heading-2",
+    color: isReversed(variant) ? "white" : "dark",
+    classNameOverride: styles.sectionTitleOverride,
+    "data-automation-id": sectionTitleAutomationId,
+    "data-testid": sectionTitleAutomationId
+  }, sectionTitle))), sectionTitleDescription && ( /*#__PURE__*/React.createElement("div", {
+    "data-automation-id": sectionTitleDescriptionAutomationId,
+    "data-testid": sectionTitleDescriptionAutomationId,
+    className: classnames(styles.sectionTitleDescription, !isReversed(variant) && styles.dark)
+  }, sectionTitleDescription)));
 };
-var renderSubtitle = function (subtitle, subtitleAutomationId) { return (React.createElement("div", { className: styles.subtitle },
-    React.createElement("span", { "data-automation-id": subtitleAutomationId, "data-testid": subtitleAutomationId, className: styles.subtitleText }, subtitle))); };
-var defaultRenderSectionTitle = function (sectionTitle, sectionTitleDescription, variant, sectionTitleAutomationId, sectionTitleDescriptionAutomationId) { return (React.createElement(React.Fragment, null,
-    sectionTitle && (React.createElement("div", { className: styles.sectionTitle },
-        React.createElement(Heading, { variant: "heading-2", color: isReversed(variant) ? "white" : "dark", classNameOverride: styles.sectionTitleOverride, "data-automation-id": sectionTitleAutomationId, "data-testid": sectionTitleAutomationId }, sectionTitle))),
-    sectionTitleDescription && (React.createElement("div", { "data-automation-id": sectionTitleDescriptionAutomationId, "data-testid": sectionTitleDescriptionAutomationId, className: classnames(styles.sectionTitleDescription, !isReversed(variant) && styles.dark) }, sectionTitleDescription)))); };
 var Breadcrumb = function (_a) {
-    var breadcrumb = _a.breadcrumb, automationId = _a.automationId, textAutomationId = _a.textAutomationId, textDirection = _a.textDirection;
-    var path = breadcrumb.path, handleClick = breadcrumb.handleClick, text = breadcrumb.text, render = breadcrumb.render;
-    var icon = textDirection === "rtl" ? (React.createElement(ArrowRightIcon, { role: "presentation" })) : (React.createElement(ArrowLeftIcon, { role: "presentation" }));
-    var InnerContents = function () { return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: styles.circle }, icon),
-        React.createElement("span", { className: styles.breadcrumbTextLink, "data-automation-id": textAutomationId, "data-testid": textAutomationId },
-            React.createElement("span", { className: styles.breadcrumbText }, text)))); };
-    if (render) {
-        var CustomRender = render;
-        return (React.createElement(CustomRender, { breadcrumb: breadcrumb, className: styles.breadcrumb, automationId: automationId, textAutomationId: textAutomationId, textDirection: textDirection },
-            React.createElement(InnerContents, null)));
-    }
-    var TagName = path ? "a" : "button";
-    return (React.createElement(TagName, __assign({}, (path && { href: path }), { className: styles.breadcrumb, "data-automation-id": automationId, "data-testid": automationId, onClick: handleClick }),
-        React.createElement(InnerContents, null)));
+  var breadcrumb = _a.breadcrumb,
+    automationId = _a.automationId,
+    textAutomationId = _a.textAutomationId,
+    textDirection = _a.textDirection;
+  var path = breadcrumb.path,
+    handleClick = breadcrumb.handleClick,
+    text = breadcrumb.text,
+    render = breadcrumb.render;
+  var icon = textDirection === "rtl" ? ( /*#__PURE__*/React.createElement(ArrowRightIcon, {
+    role: "presentation"
+  })) : ( /*#__PURE__*/React.createElement(ArrowLeftIcon, {
+    role: "presentation"
+  }));
+  var InnerContents = function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: styles.circle
+    }, icon), /*#__PURE__*/React.createElement("span", {
+      className: styles.breadcrumbTextLink,
+      "data-automation-id": textAutomationId,
+      "data-testid": textAutomationId
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.breadcrumbText
+    }, text)));
+  };
+  if (render) {
+    var CustomRender = render;
+    return /*#__PURE__*/React.createElement(CustomRender, {
+      breadcrumb: breadcrumb,
+      className: styles.breadcrumb,
+      automationId: automationId,
+      textAutomationId: textAutomationId,
+      textDirection: textDirection
+    }, /*#__PURE__*/React.createElement(InnerContents, null));
+  }
+  var TagName = path ? "a" : "button";
+  return /*#__PURE__*/React.createElement(TagName, __assign({}, path && {
+    href: path
+  }, {
+    className: styles.breadcrumb,
+    "data-automation-id": automationId,
+    "data-testid": automationId,
+    onClick: handleClick
+  }), /*#__PURE__*/React.createElement(InnerContents, null));
 };
 // We want to accept undefined here because the NavigationTabs container is
 // important for the flex-based layout (it pushes Secondary Actions over to the right)
-var renderNavigationTabs = function (navigationTabs, collapse, ariaLabel) { return (React.createElement("div", { className: styles.navigationTabScrollerContainer },
-    React.createElement("div", { className: classnames(styles.navigationTabsContainer, collapse && styles.navigationTabsContainerCollapsed) }, !collapse && navigationTabs !== undefined && (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: styles.navigationTabEdgeShadowLeft }),
-        React.createElement("nav", { className: styles.navigationTabsNav, "aria-label": ariaLabel },
-            React.createElement("ul", { className: styles.navigationTabsList }, navigationTabs.map(function (navigationTab, index) { return (React.createElement("li", { key: index }, navigationTab)); }))),
-        React.createElement("span", { className: styles.navigationTabEdgeShadowRight })))))); };
+var renderNavigationTabs = function (navigationTabs, collapse, ariaLabel) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.navigationTabScrollerContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.navigationTabsContainer, collapse && styles.navigationTabsContainerCollapsed)
+  }, !collapse && navigationTabs !== undefined && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: styles.navigationTabEdgeShadowLeft
+  }), /*#__PURE__*/React.createElement("nav", {
+    className: styles.navigationTabsNav,
+    "aria-label": ariaLabel
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: styles.navigationTabsList
+  }, navigationTabs.map(function (navigationTab, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: index
+    }, navigationTab);
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: styles.navigationTabEdgeShadowRight
+  })))));
+};
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075605782/Title+Block Guidance} |
  * {@link https://cultureamp.design/?path=/story/components-titleblock--docs Storybook}
  */
-var TitleBlockZen = function (_a) {
-    var title = _a.title, variant = _a.variant, breadcrumb = _a.breadcrumb, avatar = _a.avatar, subtitle = _a.subtitle, sectionTitle = _a.sectionTitle, sectionTitleDescription = _a.sectionTitleDescription, renderSectionTitle = _a.renderSectionTitle, pageSwitcherSelect = _a.pageSwitcherSelect, handleHamburgerClick = _a.handleHamburgerClick, primaryAction = _a.primaryAction, defaultAction = _a.defaultAction, secondaryActions = _a.secondaryActions, secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems, navigationTabs = _a.navigationTabs, _b = _a.collapseNavigationAreaWhenPossible, collapseNavigationAreaWhenPossible = _b === void 0 ? false : _b, textDirection = _a.textDirection, surveyStatus = _a.surveyStatus, id = _a.id, _c = _a.titleAutomationId, titleAutomationId = _c === void 0 ? "TitleBlock__Title" : _c, _d = _a.avatarAutomationId, avatarAutomationId = _d === void 0 ? "TitleBlock__Avatar" : _d, _e = _a.subtitleAutomationId, subtitleAutomationId = _e === void 0 ? "TitleBlock__Subtitle" : _e, _f = _a.sectionTitleAutomationId, sectionTitleAutomationId = _f === void 0 ? "TitleBlock__SectionTitle" : _f, _g = _a.sectionTitleDescriptionAutomationId, sectionTitleDescriptionAutomationId = _g === void 0 ? "TitleBlock__SectionTitleDescription" : _g, _h = _a.breadcrumbAutomationId, breadcrumbAutomationId = _h === void 0 ? "TitleBlock__Breadcrumb" : _h, _j = _a.breadcrumbTextAutomationId, breadcrumbTextAutomationId = _j === void 0 ? "TitleBlock__BreadcrumbText" : _j, _k = _a.autoHideMobileActionsMenu, autoHideMobileActionsMenu = _k === void 0 ? false : _k;
+const TitleBlockZen = /*#__PURE__*/function () {
+  const TitleBlockZen = function (_a) {
+    var title = _a.title,
+      variant = _a.variant,
+      breadcrumb = _a.breadcrumb,
+      avatar = _a.avatar,
+      subtitle = _a.subtitle,
+      sectionTitle = _a.sectionTitle,
+      sectionTitleDescription = _a.sectionTitleDescription,
+      renderSectionTitle = _a.renderSectionTitle,
+      pageSwitcherSelect = _a.pageSwitcherSelect,
+      handleHamburgerClick = _a.handleHamburgerClick,
+      primaryAction = _a.primaryAction,
+      defaultAction = _a.defaultAction,
+      secondaryActions = _a.secondaryActions,
+      secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
+      navigationTabs = _a.navigationTabs,
+      _b = _a.collapseNavigationAreaWhenPossible,
+      collapseNavigationAreaWhenPossible = _b === void 0 ? false : _b,
+      textDirection = _a.textDirection,
+      surveyStatus = _a.surveyStatus,
+      id = _a.id,
+      _c = _a.titleAutomationId,
+      titleAutomationId = _c === void 0 ? "TitleBlock__Title" : _c,
+      _d = _a.avatarAutomationId,
+      avatarAutomationId = _d === void 0 ? "TitleBlock__Avatar" : _d,
+      _e = _a.subtitleAutomationId,
+      subtitleAutomationId = _e === void 0 ? "TitleBlock__Subtitle" : _e,
+      _f = _a.sectionTitleAutomationId,
+      sectionTitleAutomationId = _f === void 0 ? "TitleBlock__SectionTitle" : _f,
+      _g = _a.sectionTitleDescriptionAutomationId,
+      sectionTitleDescriptionAutomationId = _g === void 0 ? "TitleBlock__SectionTitleDescription" : _g,
+      _h = _a.breadcrumbAutomationId,
+      breadcrumbAutomationId = _h === void 0 ? "TitleBlock__Breadcrumb" : _h,
+      _j = _a.breadcrumbTextAutomationId,
+      breadcrumbTextAutomationId = _j === void 0 ? "TitleBlock__BreadcrumbText" : _j,
+      _k = _a.autoHideMobileActionsMenu,
+      autoHideMobileActionsMenu = _k === void 0 ? false : _k;
     var hasNavigationTabs = navigationTabs && navigationTabs.length > 0;
-    var collapseNavigationArea = collapseNavigationAreaWhenPossible &&
-        !hasNavigationTabs &&
-        secondaryActions === undefined;
-    var _l = useMediaQueries().queries, isSmall = _l.isSmall, isMedium = _l.isMedium;
+    var collapseNavigationArea = collapseNavigationAreaWhenPossible && !hasNavigationTabs && secondaryActions === undefined;
+    var _l = useMediaQueries().queries,
+      isSmall = _l.isSmall,
+      isMedium = _l.isMedium;
     var isSmallOrMediumViewport = isMedium || isSmall;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { id: id, className: classnames(styles.titleBlock, styles["".concat(variant, "Variant")], Boolean(subtitle) && styles.hasSubtitle, Boolean(pageSwitcherSelect) && styles.hasPageSwitcherSelect, collapseNavigationArea &&
-                !(sectionTitle || sectionTitleDescription || renderSectionTitle) &&
-                styles.collapseNavigationArea, title && title.length >= 30 && styles.hasLongTitle, subtitle &&
-                typeof subtitle === "string" &&
-                subtitle.length >= 18 &&
-                styles.hasLongSubtitle, hasNavigationTabs && styles.hasNavigationTabs) },
-            React.createElement("div", { className: styles.titleRow },
-                React.createElement("div", { className: styles.titleRowInner },
-                    React.createElement("div", { className: styles.titleRowInnerContent },
-                        React.createElement("div", { className: styles.titleAndAdjacent },
-                            breadcrumb && (React.createElement(Breadcrumb, { breadcrumb: breadcrumb, automationId: breadcrumbAutomationId, textAutomationId: breadcrumbTextAutomationId, textDirection: textDirection })),
-                            React.createElement("div", { className: styles.titleAndAdjacentNotBreadcrumb },
-                                React.createElement(React.Fragment, null,
-                                    handleHamburgerClick && (React.createElement("div", { className: styles.hamburger },
-                                        React.createElement(IconButton, { onClick: handleHamburgerClick, icon: React.createElement(HamburgerIcon, { role: "presentation" }), label: "Open menu", reversed: isReversed(variant) }))),
-                                    avatar && renderAvatar(avatar, avatarAutomationId),
-                                    React.createElement("div", { className: styles.titleAndSubtitle },
-                                        React.createElement("div", { className: styles.titleAndSubtitleInner },
-                                            React.createElement("div", { className: styles.title },
-                                                React.createElement(Heading, { variant: "heading-1", color: isReversed(variant) ? "white" : "dark", classNameOverride: styles.titleTextOverride, "data-automation-id": titleAutomationId, "data-testid": titleAutomationId }, title)),
-                                            isSmallOrMediumViewport && pageSwitcherSelect && (React.createElement("div", { className: styles.pageSwitcherSelectUnderneathTitle },
-                                                React.createElement(Select, __assign({}, pageSwitcherSelect, { variant: "secondary-small", reversed: true })))),
-                                            subtitle &&
-                                                renderSubtitle(subtitle, subtitleAutomationId))),
-                                    surveyStatus && renderTag(surveyStatus),
-                                    !isSmallOrMediumViewport && pageSwitcherSelect && (React.createElement("div", { className: styles.pageSwitcherSelectNextToTitle },
-                                        React.createElement(Select, __assign({}, pageSwitcherSelect, { variant: "secondary", reversed: true, fullWidth: true }))))))),
-                        (primaryAction ||
-                            defaultAction ||
-                            secondaryActions ||
-                            secondaryOverflowMenuItems) && (React.createElement(MainActions, { primaryAction: primaryAction, defaultAction: defaultAction, reversed: isReversed(variant), overflowMenuItems: createTabletOverflowMenuItems(secondaryActions, secondaryOverflowMenuItems), showOverflowMenu: isSmallOrMediumViewport }))))),
-            React.createElement("div", { className: styles.rowBelowSeparator },
-                React.createElement("div", { className: styles.rowBelowSeparatorInner },
-                    React.createElement("div", { className: styles.rowBelowSeparatorInnerContent },
-                        (sectionTitle ||
-                            sectionTitleDescription ||
-                            renderSectionTitle) && (React.createElement("div", { className: styles.sectionTitleContainer },
-                            React.createElement("div", { className: styles.sectionTitleInner }, !!renderSectionTitle
-                                ? renderSectionTitle({
-                                    sectionTitle: sectionTitle,
-                                    sectionTitleAutomationId: sectionTitleAutomationId,
-                                    sectionTitleDescription: sectionTitleDescription,
-                                    sectionTitleDescriptionAutomationId: sectionTitleDescriptionAutomationId,
-                                })
-                                : defaultRenderSectionTitle(sectionTitle, sectionTitleDescription, variant, sectionTitleAutomationId, sectionTitleDescriptionAutomationId)))),
-                        renderNavigationTabs(navigationTabs, collapseNavigationArea, title),
-                        (secondaryActions || secondaryOverflowMenuItems) && (React.createElement(SecondaryActions, { secondaryActions: secondaryActions, secondaryOverflowMenuItems: secondaryOverflowMenuItems, reversed: isReversed(variant) }))))),
-            React.createElement(MobileActions, { primaryAction: primaryAction, defaultAction: defaultAction, secondaryActions: secondaryActions, secondaryOverflowMenuItems: secondaryOverflowMenuItems, drawerHandleLabelIconPosition: primaryAction && "iconPosition" in primaryAction
-                    ? primaryAction.iconPosition
-                    : undefined, autoHide: autoHideMobileActionsMenu }))));
-};
-TitleBlockZen.displayName = "TitleBlockZen";
-
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      id: id,
+      className: classnames(styles.titleBlock, styles["".concat(variant, "Variant")], Boolean(subtitle) && styles.hasSubtitle, Boolean(pageSwitcherSelect) && styles.hasPageSwitcherSelect, collapseNavigationArea && !(sectionTitle || sectionTitleDescription || renderSectionTitle) && styles.collapseNavigationArea, title && title.length >= 30 && styles.hasLongTitle, subtitle && typeof subtitle === "string" && subtitle.length >= 18 && styles.hasLongSubtitle, hasNavigationTabs && styles.hasNavigationTabs)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.titleRow
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.titleRowInner
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.titleRowInnerContent
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.titleAndAdjacent
+    }, breadcrumb && ( /*#__PURE__*/React.createElement(Breadcrumb, {
+      breadcrumb: breadcrumb,
+      automationId: breadcrumbAutomationId,
+      textAutomationId: breadcrumbTextAutomationId,
+      textDirection: textDirection
+    })), /*#__PURE__*/React.createElement("div", {
+      className: styles.titleAndAdjacentNotBreadcrumb
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, handleHamburgerClick && ( /*#__PURE__*/React.createElement("div", {
+      className: styles.hamburger
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      onClick: handleHamburgerClick,
+      icon: /*#__PURE__*/React.createElement(HamburgerIcon, {
+        role: "presentation"
+      }),
+      label: "Open menu",
+      reversed: isReversed(variant)
+    }))), avatar && renderAvatar(avatar, avatarAutomationId), /*#__PURE__*/React.createElement("div", {
+      className: styles.titleAndSubtitle
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.titleAndSubtitleInner
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.title
+    }, /*#__PURE__*/React.createElement(Heading, {
+      variant: "heading-1",
+      color: isReversed(variant) ? "white" : "dark",
+      classNameOverride: styles.titleTextOverride,
+      "data-automation-id": titleAutomationId,
+      "data-testid": titleAutomationId
+    }, title)), isSmallOrMediumViewport && pageSwitcherSelect && ( /*#__PURE__*/React.createElement("div", {
+      className: styles.pageSwitcherSelectUnderneathTitle
+    }, /*#__PURE__*/React.createElement(Select, __assign({}, pageSwitcherSelect, {
+      variant: "secondary-small",
+      reversed: true
+    })))), subtitle && renderSubtitle(subtitle, subtitleAutomationId))), surveyStatus && renderTag(surveyStatus), !isSmallOrMediumViewport && pageSwitcherSelect && ( /*#__PURE__*/React.createElement("div", {
+      className: styles.pageSwitcherSelectNextToTitle
+    }, /*#__PURE__*/React.createElement(Select, __assign({}, pageSwitcherSelect, {
+      variant: "secondary",
+      reversed: true,
+      fullWidth: true
+    }))))))), (primaryAction || defaultAction || secondaryActions || secondaryOverflowMenuItems) && ( /*#__PURE__*/React.createElement(MainActions, {
+      primaryAction: primaryAction,
+      defaultAction: defaultAction,
+      reversed: isReversed(variant),
+      overflowMenuItems: createTabletOverflowMenuItems(secondaryActions, secondaryOverflowMenuItems),
+      showOverflowMenu: isSmallOrMediumViewport
+    }))))), /*#__PURE__*/React.createElement("div", {
+      className: styles.rowBelowSeparator
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.rowBelowSeparatorInner
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.rowBelowSeparatorInnerContent
+    }, (sectionTitle || sectionTitleDescription || renderSectionTitle) && ( /*#__PURE__*/React.createElement("div", {
+      className: styles.sectionTitleContainer
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.sectionTitleInner
+    }, !!renderSectionTitle ? renderSectionTitle({
+      sectionTitle: sectionTitle,
+      sectionTitleAutomationId: sectionTitleAutomationId,
+      sectionTitleDescription: sectionTitleDescription,
+      sectionTitleDescriptionAutomationId: sectionTitleDescriptionAutomationId
+    }) : defaultRenderSectionTitle(sectionTitle, sectionTitleDescription, variant, sectionTitleAutomationId, sectionTitleDescriptionAutomationId)))), renderNavigationTabs(navigationTabs, collapseNavigationArea, title), (secondaryActions || secondaryOverflowMenuItems) && ( /*#__PURE__*/React.createElement(SecondaryActions, {
+      secondaryActions: secondaryActions,
+      secondaryOverflowMenuItems: secondaryOverflowMenuItems,
+      reversed: isReversed(variant)
+    }))))), /*#__PURE__*/React.createElement(MobileActions, {
+      primaryAction: primaryAction,
+      defaultAction: defaultAction,
+      secondaryActions: secondaryActions,
+      secondaryOverflowMenuItems: secondaryOverflowMenuItems,
+      drawerHandleLabelIconPosition: primaryAction && "iconPosition" in primaryAction ? primaryAction.iconPosition : undefined,
+      autoHide: autoHideMobileActionsMenu
+    })));
+  };
+  TitleBlockZen.displayName = "TitleBlockZen";
+  return TitleBlockZen;
+}();
 export { TitleBlockZen };