@kaizen/components 0.0.0-canary-bundler--fix-style-inject-20240522033251 → 0.0.0-canary-bundler--local-style-inject-20240522043016

package/dist/esm/TitleBlockZen/TitleBlockZen.mjs

@@ -0,0 +1,300 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Avatar } from '../Avatar/Avatar.mjs';
+import '../Button/Button/Button.mjs';
+import { IconButton } from '../Button/IconButton/IconButton.mjs';
+import { Heading } from '../Heading/Heading.mjs';
+import '../Icon/subcomponents/SVG/SVG.mjs';
+import { ArrowLeftIcon } from '../Icon/ArrowLeftIcon.mjs';
+import { ArrowRightIcon } from '../Icon/ArrowRightIcon.mjs';
+import { HamburgerIcon } from '../Icon/HamburgerIcon.mjs';
+import { Select } from '../Select/Select.mjs';
+import { Tag } from '../Tag/Tag.mjs';
+import { useMediaQueries } from '../utils/useMediaQueries.mjs';
+import { MainActions } from './subcomponents/MainActions.mjs';
+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 /*#__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;
+};
+var renderAvatar = function (imageElementOrAvatarProps, avatarAutomationId) {
+  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 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" ? ( /*#__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 /*#__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}
+ */
+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 isSmallOrMediumViewport = isMedium || isSmall;
+    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 };

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

@@ -0,0 +1,77 @@
+var css_248z = ".TitleBlockZen-module_titleBlock__bekbg{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-purple-600,#5f3361);display:flex;flex-direction:column;justify-content:center;position:relative;width:100%}.TitleBlockZen-module_titleBlock__bekbg.TitleBlockZen-module_educationVariant__B3I7P{background-color:var(--color-blue-100,#e6f6ff)}.TitleBlockZen-module_titleBlock__bekbg.TitleBlockZen-module_adminVariant__vvIrj{background-color:var(--color-gray-100,#f9f9f9)}@media print{.TitleBlockZen-module_titleBlock__bekbg{display:none}}.TitleBlockZen-module_rowBelowSeparator__ES4X-,.TitleBlockZen-module_titleRow__LcreV{display:flex;justify-content:center;width:100%}.TitleBlockZen-module_adminVariant__vvIrj .TitleBlockZen-module_titleRow__LcreV{background-color:var(--color-white,#fff)}.TitleBlockZen-module_rowBelowSeparatorInner__ln-Nc,.TitleBlockZen-module_titleRowInner__JWjlG{display:flex;flex-direction:column;margin:0 72px;max-width:1392px;min-width:0;width:100%}@media (max-width:calc(1080px - 1px)){.TitleBlockZen-module_rowBelowSeparatorInner__ln-Nc,.TitleBlockZen-module_titleRowInner__JWjlG{margin:0 12px}}.TitleBlockZen-module_titleRowInnerContent__zhZ-S{align-items:center;border-bottom:.1875rem solid rgba(var(--color-white-rgb,255,255,255),.1);display:flex;justify-content:space-between;min-height:5.25rem;position:relative;width:100%}.TitleBlockZen-module_educationVariant__B3I7P .TitleBlockZen-module_titleRowInnerContent__zhZ-S{border-bottom-color:rgba(var(--color-purple-700-rgb,74,35,77),.2)}.TitleBlockZen-module_adminVariant__vvIrj .TitleBlockZen-module_titleRowInnerContent__zhZ-S,.TitleBlockZen-module_collapseNavigationArea__PkEa9 .TitleBlockZen-module_titleRowInnerContent__zhZ-S{border-bottom-color:transparent}@media (max-width:calc(1080px - 1px)){.TitleBlockZen-module_titleRowInnerContent__zhZ-S{border-bottom:none}}.TitleBlockZen-module_title__n0doa{align-items:center;display:flex;min-width:0}@media (max-width:1365px){.TitleBlockZen-module_title__n0doa{width:100%}}.TitleBlockZen-module_titleAndSubtitle__l2kEQ{align-items:center;display:flex;min-width:0;transform:translateY(-.0833em);z-index:1000}@media (max-width:1365px){.TitleBlockZen-module_hasSubtitle__onXCE .TitleBlockZen-module_titleAndSubtitle__l2kEQ{transform:translateY(-.3833em)}}.TitleBlockZen-module_titleAndSubtitleInner__-5y1m{display:flex;min-width:0}.TitleBlockZen-module_hasSubtitle__onXCE.TitleBlockZen-module_hasLongTitle__axGG9.TitleBlockZen-module_hasLongSubtitle__TlqEy .TitleBlockZen-module_titleAndSubtitleInner__-5y1m{align-items:center}@media (max-width:1365px){.TitleBlockZen-module_hasSubtitle__onXCE.TitleBlockZen-module_hasLongTitle__axGG9.TitleBlockZen-module_hasLongSubtitle__TlqEy .TitleBlockZen-module_titleAndSubtitleInner__-5y1m{align-items:baseline}}@media (max-width:calc(1080px - 1px)){.TitleBlockZen-module_hasPageSwitcherSelect__JrYn4 .TitleBlockZen-module_titleAndSubtitleInner__-5y1m{align-items:normal;flex-direction:column;justify-content:space-between;transform:translateY(.5rem)}}.TitleBlockZen-module_hasSubtitle__onXCE .TitleBlockZen-module_titleAndSubtitleInner__-5y1m{align-items:baseline;overflow:hidden}@media (max-width:1365px){.TitleBlockZen-module_hasSubtitle__onXCE .TitleBlockZen-module_titleAndSubtitleInner__-5y1m{align-items:normal;flex-direction:column;justify-content:space-between;transform:translateY(.5rem)}.TitleBlockZen-module_hasLongTitle__axGG9.TitleBlockZen-module_hasLongSubtitle__TlqEy .TitleBlockZen-module_hasSubtitle__onXCE .TitleBlockZen-module_titleAndSubtitleInner__-5y1m{align-items:baseline}}@media (max-width:calc(1080px - 1px)){.TitleBlockZen-module_hasSubtitle__onXCE .TitleBlockZen-module_titleAndSubtitleInner__-5y1m{transform:translateY(.75rem)}}.TitleBlockZen-module_titleTextOverride__Caa0-.TitleBlockZen-module_titleTextOverride__Caa0-{padding:4px 0}@media (max-width:1644px){.TitleBlockZen-module_titleTextOverride__Caa0-.TitleBlockZen-module_titleTextOverride__Caa0-{font-family:var(--typography-heading-2-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-heading-2-font-size,1.75rem);font-weight:var(--typography-heading-2-font-weight,700);letter-spacing:var(--typography-heading-2-letter-spacing,normal);line-height:var(--typography-heading-2-line-height,2.25rem)}}@media (max-width:1365px){.TitleBlockZen-module_titleTextOverride__Caa0-.TitleBlockZen-module_titleTextOverride__Caa0-{font-family:var(--typography-heading-2-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-heading-2-font-size,1.75rem);font-weight:var(--typography-heading-2-font-weight,700);letter-spacing:var(--typography-heading-2-letter-spacing,normal);line-height:var(--typography-heading-2-line-height,2.25rem);padding:2px 0}.TitleBlockZen-module_hasLongTitle__axGG9 .TitleBlockZen-module_titleTextOverride__Caa0-.TitleBlockZen-module_titleTextOverride__Caa0-{font-family:var(--typography-heading-3-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-heading-3-font-size,1.375rem);font-weight:var(--typography-heading-3-font-weight,700);letter-spacing:var(--typography-heading-3-letter-spacing,normal);line-height:var(--typography-heading-3-line-height,1.875rem);padding:2px 0}}@media (max-width:calc(1080px - 1px)){.TitleBlockZen-module_titleTextOverride__Caa0-.TitleBlockZen-module_titleTextOverride__Caa0-{font-family:var(--typography-heading-4-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-heading-4-font-size,1.125rem);font-weight:var(--typography-heading-4-font-weight,600);letter-spacing:var(--typography-heading-4-letter-spacing,normal);line-height:var(--typography-heading-4-line-height,1.5rem);padding:0}}.TitleBlockZen-module_avatar__CHWTd{box-sizing:border-box;display:none;height:3rem;margin-left:0;margin-right:.75rem;overflow:hidden;width:3rem}.TitleBlockZen-module_avatar__CHWTd[dir=rtl],[dir=rtl] .TitleBlockZen-module_avatar__CHWTd{margin-left:.75rem;margin-right:0}.TitleBlockZen-module_avatar__CHWTd>*{max-width:100%}@media (min-width:1080px){.TitleBlockZen-module_avatar__CHWTd{display:block}}.TitleBlockZen-module_avatar__CHWTd.TitleBlockZen-module_withBorder__lzJvb{border:3px solid var(--color-white,#fff);border-radius:50%}.TitleBlockZen-module_hasLongTitle__axGG9 .TitleBlockZen-module_avatar__CHWTd{display:none}.TitleBlockZen-module_hamburger__VFufP{display:none;margin-left:0;margin-right:var(--spacing-xs,.375rem)}.TitleBlockZen-module_hamburger__VFufP[dir=rtl],[dir=rtl] .TitleBlockZen-module_hamburger__VFufP{margin-left:var(--spacing-xs,.375rem);margin-right:0}@media (max-width:calc(1080px - 1px)){.TitleBlockZen-module_hamburger__VFufP{align-items:center;display:flex}}.TitleBlockZen-module_subtitle__OD-d5{align-items:center;color:var(--color-white,#fff);display:flex;font-family:var(--typography-paragraph-small-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-small-font-size,.875rem);font-weight:var(--typography-paragraph-small-font-weight,400);letter-spacing:var(--typography-paragraph-small-letter-spacing,normal);line-height:var(--typography-paragraph-small-line-height,1.125rem);margin-left:.75rem;margin-right:0;max-width:230px}.TitleBlockZen-module_adminVariant__vvIrj .TitleBlockZen-module_subtitle__OD-d5{color:var(--color-purple-800,#2f2438)}.TitleBlockZen-module_subtitle__OD-d5[dir=rtl],[dir=rtl] .TitleBlockZen-module_subtitle__OD-d5{margin-left:0;margin-right:.75rem}@media (max-width:1365px){.TitleBlockZen-module_subtitle__OD-d5{margin:.3rem 0;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TitleBlockZen-module_subtitleText__odf0T{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@media (max-width:767px){.TitleBlockZen-module_subtitleText__odf0T{max-width:88vw}}.TitleBlockZen-module_sectionTitleContainer__nzQ-r{align-items:center;display:flex;padding:1.125rem 0}.TitleBlockZen-module_sectionTitleInner__wYAWC{display:flex;flex-direction:column}.TitleBlockZen-module_sectionTitleOverride__GDHqp.TitleBlockZen-module_sectionTitleOverride__GDHqp{font-family:var(--typography-heading-2-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-heading-2-font-size,1.75rem);font-weight:var(--typography-heading-2-font-weight,700);letter-spacing:var(--typography-heading-2-letter-spacing,normal);line-height:var(--typography-heading-2-line-height,2.25rem);margin-left:0;margin-right:1.5rem;white-space:nowrap}.TitleBlockZen-module_sectionTitleOverride__GDHqp.TitleBlockZen-module_sectionTitleOverride__GDHqp[dir=rtl],[dir=rtl] .TitleBlockZen-module_sectionTitleOverride__GDHqp.TitleBlockZen-module_sectionTitleOverride__GDHqp{margin-left:1.5rem;margin-right:0}@media (max-width:1644px){.TitleBlockZen-module_sectionTitleOverride__GDHqp.TitleBlockZen-module_sectionTitleOverride__GDHqp{font-family:var(--typography-heading-3-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-heading-3-font-size,1.375rem);font-weight:var(--typography-heading-3-font-weight,700);letter-spacing:var(--typography-heading-3-letter-spacing,normal);line-height:var(--typography-heading-3-line-height,1.875rem)}}@media (max-width:calc(1080px - 1px)){.TitleBlockZen-module_sectionTitleOverride__GDHqp.TitleBlockZen-module_sectionTitleOverride__GDHqp{font-family:var(--typography-heading-4-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-heading-4-font-size,1.125rem);font-weight:var(--typography-heading-4-font-weight,600);letter-spacing:var(--typography-heading-4-letter-spacing,normal);line-height:var(--typography-heading-4-line-height,1.5rem)}}.TitleBlockZen-module_sectionTitle__Le5YQ{display:block}.TitleBlockZen-module_sectionTitleDescription__mIl-A{color:var(--color-white,#fff);font-family:var(--typography-paragraph-small-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-small-font-size,.875rem);font-weight:var(--typography-paragraph-small-font-weight,400);letter-spacing:var(--typography-paragraph-small-letter-spacing,normal);line-height:var(--typography-paragraph-small-line-height,1.125rem);max-width:780px}.TitleBlockZen-module_sectionTitle__Le5YQ+.TitleBlockZen-module_sectionTitleDescription__mIl-A{margin-top:.375rem}.TitleBlockZen-module_sectionTitleDescription__mIl-A.TitleBlockZen-module_dark__Y-v1Z{color:rgba(var(--color-purple-800-rgb,47,36,56),.7)}.TitleBlockZen-module_rowBelowSeparatorInnerContent__aho-R{display:flex;justify-content:space-between;margin-top:-.1875rem;width:100%}.TitleBlockZen-module_titleAndAdjacent__BWNsj{display:flex;min-width:0}.TitleBlockZen-module_titleAndAdjacentNotBreadcrumb__9TuNA{align-items:center;display:flex;min-width:0;transition:opacity .3s ease}.TitleBlockZen-module_breadcrumbTextLink__1HhXQ:focus~.TitleBlockZen-module_titleAndAdjacentNotBreadcrumb__9TuNA,.TitleBlockZen-module_breadcrumbTextLink__1HhXQ:hover~.TitleBlockZen-module_titleAndAdjacentNotBreadcrumb__9TuNA,.TitleBlockZen-module_breadcrumb__o2c8A:focus~.TitleBlockZen-module_titleAndAdjacentNotBreadcrumb__9TuNA,.TitleBlockZen-module_breadcrumb__o2c8A:hover~.TitleBlockZen-module_titleAndAdjacentNotBreadcrumb__9TuNA{opacity:0}.TitleBlockZen-module_tag__mWbbU{align-items:center;display:flex;margin-left:.75rem;margin-right:0}.TitleBlockZen-module_tag__mWbbU[dir=rtl],[dir=rtl] .TitleBlockZen-module_tag__mWbbU{margin-left:0;margin-right:.75rem}@media (max-width:calc(1080px - 1px)){.TitleBlockZen-module_tag__mWbbU{display:none}}.TitleBlockZen-module_tag__mWbbU+.TitleBlockZen-module_pageSwitcherSelectNextToTitle__CPnE3,.TitleBlockZen-module_tag__mWbbU+.TitleBlockZen-module_pageSwitcherSelectNextToTitle__CPnE3[dir=rtl],[dir=rtl] .TitleBlockZen-module_tag__mWbbU+.TitleBlockZen-module_pageSwitcherSelectNextToTitle__CPnE3{margin-left:0;margin-right:0}.TitleBlockZen-module_pageSwitcherSelectNextToTitle__CPnE3{flex-shrink:0;margin-left:.75rem;margin-right:0;width:15rem}.TitleBlockZen-module_pageSwitcherSelectNextToTitle__CPnE3[dir=rtl],[dir=rtl] .TitleBlockZen-module_pageSwitcherSelectNextToTitle__CPnE3{margin-left:0;margin-right:.75rem}.TitleBlockZen-module_pageSwitcherSelectUnderneathTitle__MRZI2{flex-shrink:0;max-width:15rem}.TitleBlockZen-module_navigationTabsContainer__lto6e{height:4.5rem}@media (max-width:767px){.TitleBlockZen-module_navigationTabsContainer__lto6e{height:3.75rem}}.TitleBlockZen-module_navigationTabsContainerCollapsed__oMPa4{height:0}@media (max-width:calc(1080px - 1px)){.TitleBlockZen-module_navigationTabsContainerCollapsed__oMPa4{height:0}}@media (max-width:767px){.TitleBlockZen-module_hasNavigationTabs__S4JF- .TitleBlockZen-module_navigationTabScrollerContainer__n-B-b{display:block;overflow-x:scroll;scrollbar-width:none;width:100vw}.TitleBlockZen-module_hasNavigationTabs__S4JF- .TitleBlockZen-module_navigationTabScrollerContainer__n-B-b::-webkit-scrollbar{display:none}}.TitleBlockZen-module_navigationTabsNav__UOeVY{height:100%}.TitleBlockZen-module_navigationTabsList__sxozg{display:flex;height:100%;list-style:none;margin:0;padding:0}.TitleBlockZen-module_navigationTabEdgeShadowLeft__yfKxK,.TitleBlockZen-module_navigationTabEdgeShadowRight__7ySCE{display:none;pointer-events:none}@media (max-width:767px){.TitleBlockZen-module_navigationTabEdgeShadowLeft__yfKxK,.TitleBlockZen-module_navigationTabEdgeShadowRight__7ySCE{background:linear-gradient(0deg,var(--color-purple-600,#5f3361),rgba(var(--color-purple-600-rgb,95,51,97),0));display:block;height:3.75rem;position:absolute;top:3.5625rem;width:3.75rem;z-index:1020}.TitleBlockZen-module_adminVariant__vvIrj .TitleBlockZen-module_navigationTabEdgeShadowLeft__yfKxK,.TitleBlockZen-module_adminVariant__vvIrj .TitleBlockZen-module_navigationTabEdgeShadowRight__7ySCE{background:linear-gradient(0deg,var(--color-gray-100,#f9f9f9),rgba(var(--color-gray-100-rgb,249,249,249),0))}.TitleBlockZen-module_educationVariant__B3I7P .TitleBlockZen-module_navigationTabEdgeShadowLeft__yfKxK,.TitleBlockZen-module_educationVariant__B3I7P .TitleBlockZen-module_navigationTabEdgeShadowRight__7ySCE{background:linear-gradient(0deg,var(--color-blue-200,#bde2f5),rgba(var(--color-blue-200-rgb,189,226,245),0))}}.TitleBlockZen-module_navigationTabEdgeShadowLeft__yfKxK{left:0;top:calc(100% - 4.5rem);transform:rotate(90deg)}@media (max-width:767px){.TitleBlockZen-module_navigationTabEdgeShadowLeft__yfKxK{top:calc(100% - 3.75rem)}}.TitleBlockZen-module_navigationTabEdgeShadowRight__7ySCE{right:0;top:calc(100% - 4.5rem);transform:rotate(-90deg)}@media (max-width:767px){.TitleBlockZen-module_navigationTabEdgeShadowRight__7ySCE{top:calc(100% - 3.75rem)}}.TitleBlockZen-module_secondaryActionsContainer__Is7rl{align-items:flex-start;display:flex;justify-content:flex-end;margin-left:2.25rem;margin-right:0;padding:.75rem 0}.TitleBlockZen-module_secondaryActionsContainer__Is7rl[dir=rtl],[dir=rtl] .TitleBlockZen-module_secondaryActionsContainer__Is7rl{margin-left:0;margin-right:2.25rem}.TitleBlockZen-module_adminVariant__vvIrj .TitleBlockZen-module_secondaryActionsContainer__Is7rl,.TitleBlockZen-module_educationVariant__B3I7P .TitleBlockZen-module_secondaryActionsContainer__Is7rl{color:var(--color-blue-500,#0168b3)}@media (max-width:calc(1080px - 1px)){.TitleBlockZen-module_secondaryActionsContainer__Is7rl{display:none}}.TitleBlockZen-module_breadcrumb__o2c8A{align-items:center;align-self:normal;appearance:none;background:transparent;border:none;color:inherit;cursor:pointer;display:inline;display:flex;font:inherit;left:calc(-48px - 1.5rem);margin:0;padding:0;position:absolute;right:auto;top:50%;transform:translateY(-50%);z-index:1020}.TitleBlockZen-module_breadcrumb__o2c8A[dir=rtl],[dir=rtl] .TitleBlockZen-module_breadcrumb__o2c8A{left:auto;right:calc(-48px - 1.5rem)}.TitleBlockZen-module_breadcrumb__o2c8A:hover .TitleBlockZen-module_breadcrumbTextLink__1HhXQ{text-decoration:underline}.TitleBlockZen-module_breadcrumb__o2c8A:focus{outline:none}.TitleBlockZen-module_breadcrumb__o2c8A:focus:after{background:transparent;border-color:var(--color-blue-200,#bde2f5);border-radius:50%;border-style:var(--border-focus-ring-border-style,solid);border-width:var(--border-focus-ring-border-width,2px);content:\"\";inset:calc(var(--border-focus-ring-border-width, 2px)*-2 - var(--border-focus-ring-border-width, 2px));position:absolute}@media only screen and (max-width:1644px){.TitleBlockZen-module_breadcrumb__o2c8A{left:0;margin-left:0;margin-right:.75rem;position:relative;right:auto;transform:translateY(0)}.TitleBlockZen-module_breadcrumb__o2c8A[dir=rtl],[dir=rtl] .TitleBlockZen-module_breadcrumb__o2c8A{left:auto;margin-left:.75rem;margin-right:0;right:0}}@media (max-width:calc(1080px - 1px)){.TitleBlockZen-module_breadcrumb__o2c8A{display:none}}.TitleBlockZen-module_breadcrumbTextLink__1HhXQ{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;left:-3rem;overflow:hidden;position:absolute;right:auto;white-space:nowrap;width:1px;z-index:1019}.TitleBlockZen-module_breadcrumbTextLink__1HhXQ[dir=rtl],[dir=rtl] .TitleBlockZen-module_breadcrumbTextLink__1HhXQ{left:auto;right:-3rem}@media (max-width:1644px){.TitleBlockZen-module_breadcrumbTextLink__1HhXQ{left:1.5rem;right:auto}.TitleBlockZen-module_breadcrumbTextLink__1HhXQ[dir=rtl],[dir=rtl] .TitleBlockZen-module_breadcrumbTextLink__1HhXQ{left:auto;right:1.5rem}}@media only screen and (min-width:1644px){.TitleBlockZen-module_breadcrumbTextLink__1HhXQ{left:calc(48px - 1.5rem);right:auto}.TitleBlockZen-module_breadcrumbTextLink__1HhXQ[dir=rtl],[dir=rtl] .TitleBlockZen-module_breadcrumbTextLink__1HhXQ{left:auto;right:calc(48px - 1.5rem)}}.TitleBlockZen-module_breadcrumbTextLink__1HhXQ:focus,.TitleBlockZen-module_breadcrumbTextLink__1HhXQ:hover,.TitleBlockZen-module_breadcrumb__o2c8A:focus .TitleBlockZen-module_breadcrumbTextLink__1HhXQ,.TitleBlockZen-module_breadcrumb__o2c8A:hover .TitleBlockZen-module_breadcrumbTextLink__1HhXQ{clip:auto;animation:TitleBlockZen-module_slide-fade__k4tBT .4s;clip-path:none;display:block;height:auto;overflow:initial;position:static;position:absolute;white-space:normal;width:auto}[dir=rtl] .TitleBlockZen-module_breadcrumbTextLink__1HhXQ:focus,[dir=rtl] .TitleBlockZen-module_breadcrumbTextLink__1HhXQ:hover,[dir=rtl] .TitleBlockZen-module_breadcrumb__o2c8A:focus .TitleBlockZen-module_breadcrumbTextLink__1HhXQ,[dir=rtl] .TitleBlockZen-module_breadcrumb__o2c8A:hover .TitleBlockZen-module_breadcrumbTextLink__1HhXQ{animation:TitleBlockZen-module_reverse-slide-fade__WT9AW .4s}.TitleBlockZen-module_breadcrumbText__O-GCu{font-family:var(--typography-heading-5-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-heading-5-font-size,1rem);font-weight:var(--typography-heading-5-font-weight,600);letter-spacing:var(--typography-heading-5-letter-spacing,normal);line-height:var(--typography-heading-5-line-height,1.5rem);margin-inline-start:var(--spacing-xl,3rem);white-space:nowrap}.TitleBlockZen-module_breadcrumbText__O-GCu,.TitleBlockZen-module_breadcrumb__o2c8A,.TitleBlockZen-module_breadcrumb__o2c8A:hover{color:var(--color-white,#fff)}.TitleBlockZen-module_adminVariant__vvIrj .TitleBlockZen-module_breadcrumbText__O-GCu,.TitleBlockZen-module_adminVariant__vvIrj .TitleBlockZen-module_breadcrumb__o2c8A,.TitleBlockZen-module_adminVariant__vvIrj .TitleBlockZen-module_breadcrumb__o2c8A:hover,.TitleBlockZen-module_educationVariant__B3I7P .TitleBlockZen-module_breadcrumbText__O-GCu,.TitleBlockZen-module_educationVariant__B3I7P .TitleBlockZen-module_breadcrumb__o2c8A,.TitleBlockZen-module_educationVariant__B3I7P .TitleBlockZen-module_breadcrumb__o2c8A:hover{color:var(--color-purple-800,#2f2438)}.TitleBlockZen-module_circle__4bfl6{align-items:center;border-color:rgba(var(--color-white-rgb,255,255,255),.5);border-radius:50%;border-style:solid;border-width:2px;box-sizing:border-box;color:var(--color-white,#fff);display:flex;flex:0 0 48px;height:48px;justify-content:center;transition:background-color .3s ease,transform .3s ease;width:48px}.TitleBlockZen-module_breadcrumb__o2c8A:focus .TitleBlockZen-module_circle__4bfl6,.TitleBlockZen-module_breadcrumb__o2c8A:hover .TitleBlockZen-module_circle__4bfl6{background-color:rgba(var(--color-white-rgb,255,255,255),.1);border-color:var(--color-white,#fff);color:var(--color-white,#fff);transform:scale(1.1)}.TitleBlockZen-module_adminVariant__vvIrj .TitleBlockZen-module_circle__4bfl6,.TitleBlockZen-module_educationVariant__B3I7P .TitleBlockZen-module_circle__4bfl6{border-color:var(--color-blue-300,#73c0e8);border-width:3px;color:var(--color-blue-500,#0168b3)}.TitleBlockZen-module_adminVariant__vvIrj .TitleBlockZen-module_breadcrumb__o2c8A:focus .TitleBlockZen-module_circle__4bfl6,.TitleBlockZen-module_adminVariant__vvIrj .TitleBlockZen-module_breadcrumb__o2c8A:hover .TitleBlockZen-module_circle__4bfl6,.TitleBlockZen-module_educationVariant__B3I7P .TitleBlockZen-module_breadcrumb__o2c8A:focus .TitleBlockZen-module_circle__4bfl6,.TitleBlockZen-module_educationVariant__B3I7P .TitleBlockZen-module_breadcrumb__o2c8A:hover .TitleBlockZen-module_circle__4bfl6{background-color:rgba(var(--color-blue-500-rgb,1,104,179),.1);border-color:var(--color-blue-500,#0168b3);color:var(--color-blue-500,#0168b3)}@keyframes TitleBlockZen-module_slide-fade__k4tBT{0%{display:none;opacity:0}1%{display:block;opacity:0;transform:translateX(-30px)}to{opacity:100%;transform:translateX(0)}}@keyframes TitleBlockZen-module_reverse-slide-fade__WT9AW{0%{display:none;opacity:0}1%{display:block;opacity:0;transform:translateX(30px)}to{opacity:100%;transform:translateX(0)}}";
+var styles = {
+  "titleBlock": "TitleBlockZen-module_titleBlock__bekbg",
+  "educationVariant": "TitleBlockZen-module_educationVariant__B3I7P",
+  "adminVariant": "TitleBlockZen-module_adminVariant__vvIrj",
+  "titleRow": "TitleBlockZen-module_titleRow__LcreV",
+  "rowBelowSeparator": "TitleBlockZen-module_rowBelowSeparator__ES4X-",
+  "rowBelowSeparatorInner": "TitleBlockZen-module_rowBelowSeparatorInner__ln-Nc",
+  "titleRowInner": "TitleBlockZen-module_titleRowInner__JWjlG",
+  "titleRowInnerContent": "TitleBlockZen-module_titleRowInnerContent__zhZ-S",
+  "collapseNavigationArea": "TitleBlockZen-module_collapseNavigationArea__PkEa9",
+  "title": "TitleBlockZen-module_title__n0doa",
+  "titleAndSubtitle": "TitleBlockZen-module_titleAndSubtitle__l2kEQ",
+  "hasSubtitle": "TitleBlockZen-module_hasSubtitle__onXCE",
+  "titleAndSubtitleInner": "TitleBlockZen-module_titleAndSubtitleInner__-5y1m",
+  "hasLongTitle": "TitleBlockZen-module_hasLongTitle__axGG9",
+  "hasLongSubtitle": "TitleBlockZen-module_hasLongSubtitle__TlqEy",
+  "hasPageSwitcherSelect": "TitleBlockZen-module_hasPageSwitcherSelect__JrYn4",
+  "titleTextOverride": "TitleBlockZen-module_titleTextOverride__Caa0-",
+  "avatar": "TitleBlockZen-module_avatar__CHWTd",
+  "withBorder": "TitleBlockZen-module_withBorder__lzJvb",
+  "hamburger": "TitleBlockZen-module_hamburger__VFufP",
+  "subtitle": "TitleBlockZen-module_subtitle__OD-d5",
+  "subtitleText": "TitleBlockZen-module_subtitleText__odf0T",
+  "sectionTitleContainer": "TitleBlockZen-module_sectionTitleContainer__nzQ-r",
+  "sectionTitleInner": "TitleBlockZen-module_sectionTitleInner__wYAWC",
+  "sectionTitleOverride": "TitleBlockZen-module_sectionTitleOverride__GDHqp",
+  "sectionTitle": "TitleBlockZen-module_sectionTitle__Le5YQ",
+  "sectionTitleDescription": "TitleBlockZen-module_sectionTitleDescription__mIl-A",
+  "dark": "TitleBlockZen-module_dark__Y-v1Z",
+  "rowBelowSeparatorInnerContent": "TitleBlockZen-module_rowBelowSeparatorInnerContent__aho-R",
+  "titleAndAdjacent": "TitleBlockZen-module_titleAndAdjacent__BWNsj",
+  "titleAndAdjacentNotBreadcrumb": "TitleBlockZen-module_titleAndAdjacentNotBreadcrumb__9TuNA",
+  "breadcrumb": "TitleBlockZen-module_breadcrumb__o2c8A",
+  "breadcrumbTextLink": "TitleBlockZen-module_breadcrumbTextLink__1HhXQ",
+  "tag": "TitleBlockZen-module_tag__mWbbU",
+  "pageSwitcherSelectNextToTitle": "TitleBlockZen-module_pageSwitcherSelectNextToTitle__CPnE3",
+  "pageSwitcherSelectUnderneathTitle": "TitleBlockZen-module_pageSwitcherSelectUnderneathTitle__MRZI2",
+  "navigationTabsContainer": "TitleBlockZen-module_navigationTabsContainer__lto6e",
+  "navigationTabsContainerCollapsed": "TitleBlockZen-module_navigationTabsContainerCollapsed__oMPa4",
+  "hasNavigationTabs": "TitleBlockZen-module_hasNavigationTabs__S4JF-",
+  "navigationTabScrollerContainer": "TitleBlockZen-module_navigationTabScrollerContainer__n-B-b",
+  "navigationTabsNav": "TitleBlockZen-module_navigationTabsNav__UOeVY",
+  "navigationTabsList": "TitleBlockZen-module_navigationTabsList__sxozg",
+  "navigationTabEdgeShadowRight": "TitleBlockZen-module_navigationTabEdgeShadowRight__7ySCE",
+  "navigationTabEdgeShadowLeft": "TitleBlockZen-module_navigationTabEdgeShadowLeft__yfKxK",
+  "secondaryActionsContainer": "TitleBlockZen-module_secondaryActionsContainer__Is7rl",
+  "slide-fade": "TitleBlockZen-module_slide-fade__k4tBT",
+  "reverse-slide-fade": "TitleBlockZen-module_reverse-slide-fade__WT9AW",
+  "breadcrumbText": "TitleBlockZen-module_breadcrumbText__O-GCu",
+  "circle": "TitleBlockZen-module_circle__4bfl6"
+};
+// Forked from https://github.com/egoist/style-inject
+function styleInject(css, {
+  insertAt
+} = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default, styleInject };

package/dist/esm/TitleBlockZen/constants.mjs

@@ -0,0 +1,3 @@
+var TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID = "title-block-secondary-menu";
+var TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID = "title-block-other-actions";
+export { TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID, TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID };

package/dist/esm/TitleBlockZen/subcomponents/MainActions.mjs

@@ -0,0 +1,115 @@
+import { __assign, __spreadArray } from 'tslib';
+import React from 'react';
+import { Button } from '../../Button/Button/Button.mjs';
+import { IconButton } from '../../Button/IconButton/IconButton.mjs';
+import '../../Icon/subcomponents/SVG/SVG.mjs';
+import { ChevronDownIcon } from '../../Icon/ChevronDownIcon.mjs';
+import { MeatballsIcon } from '../../Icon/MeatballsIcon.mjs';
+import { Menu } from '../../Menu/Menu.mjs';
+import '../../Menu/subcomponents/MenuHeading/MenuHeading.mjs';
+import '../../Menu/subcomponents/MenuItem/MenuItem.mjs';
+import { MenuList } from '../../Menu/subcomponents/MenuList/MenuList.mjs';
+import '../../Menu/subcomponents/StatelessMenu/StatelessMenu.mjs';
+import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from '../constants.mjs';
+import { isMenuGroupNotButton } from '../utils.mjs';
+import { TitleBlockMenuItem } from './TitleBlockMenuItem.mjs';
+import { Toolbar } from './Toolbar.mjs';
+import styles from './MainActions.module.scss.mjs';
+const MainActions = /*#__PURE__*/function () {
+  const MainActions = function (_a) {
+    var primaryAction = _a.primaryAction,
+      defaultAction = _a.defaultAction,
+      _b = _a.reversed,
+      reversed = _b === void 0 ? false : _b,
+      overflowMenuItems = _a.overflowMenuItems,
+      _c = _a.showOverflowMenu,
+      showOverflowMenu = _c === void 0 ? false : _c;
+    var items;
+    if (primaryAction && isMenuGroupNotButton(primaryAction)) {
+      var menuContent = primaryAction.menuItems.map(function (item, idx) {
+        return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, item, {
+          key: "main-action-primary-menu-item-".concat(idx),
+          "data-automation-id": "main-action-primary-menu-item-".concat(idx),
+          "data-testid": "main-action-primary-menu-item-".concat(idx)
+        }));
+      });
+      items = __spreadArray(__spreadArray([], defaultAction ? [{
+        key: "defaultAction",
+        node: ( /*#__PURE__*/React.createElement(Button, __assign({}, defaultAction, {
+          reversed: defaultAction.reversed !== undefined ? defaultAction.reversed : reversed,
+          "data-automation-id": "title-block-default-action-button",
+          "data-testid": "title-block-default-action-button"
+        })))
+      }] : [], true), primaryAction ? [{
+        key: "primaryAction",
+        node: ( /*#__PURE__*/React.createElement(Menu, {
+          align: "right",
+          button: /*#__PURE__*/React.createElement(Button, {
+            label: primaryAction.label,
+            primary: true,
+            reversed: reversed,
+            icon: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+              role: "presentation"
+            }),
+            iconPosition: "end",
+            "data-automation-id": "title-block-primary-action-button",
+            "data-testid": "title-block-primary-action-button",
+            badge: primaryAction.badge ? __assign(__assign({}, primaryAction.badge), {
+              variant: "dark"
+            }) : undefined
+          })
+        }, /*#__PURE__*/React.createElement(MenuList, null, menuContent)))
+      }] : [], true);
+    } else {
+      items = __spreadArray(__spreadArray([], defaultAction ? [{
+        key: "defaultAction",
+        node: ( /*#__PURE__*/React.createElement(Button, __assign({}, defaultAction, {
+          reversed: defaultAction.reversed !== undefined ? defaultAction.reversed : reversed,
+          "data-automation-id": "title-block-default-action-button",
+          "data-testid": "title-block-default-action-button"
+        })))
+      }] : [], true), primaryAction ? [{
+        key: "primaryAction",
+        node: ( /*#__PURE__*/React.createElement(Button, __assign({}, primaryAction, {
+          primary: primaryAction.primary !== undefined ? primaryAction.primary : true,
+          reversed: primaryAction.reversed !== undefined ? primaryAction.reversed : reversed,
+          "data-automation-id": "title-block-primary-action-button",
+          "data-testid": "title-block-primary-action-button",
+          badge: primaryAction.badge ? __assign(__assign({}, primaryAction.badge), {
+            variant: "dark"
+          }) : undefined
+        })))
+      }] : [], true);
+    }
+    if (overflowMenuItems && showOverflowMenu && overflowMenuItems.length > 0) {
+      items = __spreadArray([{
+        key: "overflowMenu",
+        node: ( /*#__PURE__*/React.createElement(Menu, {
+          align: "right",
+          button: /*#__PURE__*/React.createElement(IconButton, {
+            id: TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
+            label: "Open secondary menu",
+            reversed: reversed,
+            icon: /*#__PURE__*/React.createElement(MeatballsIcon, {
+              role: "presentation"
+            })
+          })
+        }, /*#__PURE__*/React.createElement(MenuList, null, overflowMenuItems.map(function (menuItem, idx) {
+          return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, menuItem, {
+            key: "main-action-overflow-item-menu-item-".concat(idx)
+          }));
+        }))))
+      }], items, true);
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.mainActionsContainer
+    }, /*#__PURE__*/React.createElement(Toolbar, {
+      items: items,
+      automationId: "title-block-main-actions-toolbar",
+      "data-testid": "title-block-main-actions-toolbar"
+    }));
+  };
+  MainActions.displayName = "MainActions";
+  return MainActions;
+}();
+export { MainActions };

package/dist/esm/TitleBlockZen/subcomponents/MainActions.module.scss.mjs

@@ -0,0 +1,29 @@
+var css_248z = ".MainActions-module_mainActionsContainer__wN117{align-items:center;display:flex;flex-grow:1;flex-shrink:0;justify-content:flex-end;margin-left:.75rem;margin-right:0}.MainActions-module_mainActionsContainer__wN117[dir=rtl],[dir=rtl] .MainActions-module_mainActionsContainer__wN117{margin-left:0;margin-right:.75rem}@media (max-width:767px){.MainActions-module_mainActionsContainer__wN117{display:none}}";
+var styles = {
+  "mainActionsContainer": "MainActions-module_mainActionsContainer__wN117"
+};
+// Forked from https://github.com/egoist/style-inject
+function styleInject(css, {
+  insertAt
+} = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default, styleInject };