npm - @kaizen/components - Versions diffs - 0.0.0-canary-bundler--fix-style-inject-20240522033251 → 0.0.0-canary-bundler--local-style-inject-20240522043016 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1455) hide show

package/dist/esm/TitleBlockZen/subcomponents/MobileActions.mjs ADDED Viewed

@@ -0,0 +1,303 @@
+import { __assign } from 'tslib';
+import React, { useState, useCallback, useEffect } from 'react';
+import classnames from 'classnames';
+import { FocusOn } from 'react-focus-on';
+import '../../Icon/subcomponents/SVG/SVG.mjs';
+import { ChevronDownIcon } from '../../Icon/ChevronDownIcon.mjs';
+import { ChevronUpIcon } from '../../Icon/ChevronUpIcon.mjs';
+import '../../Menu/Menu.mjs';
+import { MenuHeading } from '../../Menu/subcomponents/MenuHeading/MenuHeading.mjs';
+import { MenuItem } from '../../Menu/subcomponents/MenuItem/MenuItem.mjs';
+import { MenuList } from '../../Menu/subcomponents/MenuList/MenuList.mjs';
+import '../../Menu/subcomponents/StatelessMenu/StatelessMenu.mjs';
+import { TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID } from '../constants.mjs';
+import { isMenuGroupNotButton, convertSecondaryActionsToMenuItems } from '../utils.mjs';
+import { TitleBlockMenuItem } from './TitleBlockMenuItem.mjs';
+import styles from './MobileActions.module.scss.mjs';
+var menuItemIsLink = function (item) {
+  return "href" in item;
+};
+var defaultActionIsLink = function (action) {
+  return "href" in action;
+};
+var defaultActionIsButton = function (action) {
+  return !("href" in action) && "onClick" in action || "component" in action;
+};
+var filterActions = function (menuItems, filterType) {
+  return menuItems.filter(function (item) {
+    return filterType === "link" ? menuItemIsLink(item) : !menuItemIsLink(item);
+  });
+};
+/** Returns a filtered array of TitleBlockMenuItem based on actionType
+ * This is use to sort a selectively render the action into a specifc order
+ */
+var renderPrimaryActionDrawerContent = function (primaryAction, actionType) {
+  if (!primaryAction) return null;
+  if (isMenuGroupNotButton(primaryAction)) {
+    var filteredActions = filterActions(primaryAction.menuItems, actionType);
+    return filteredActions.map(function (item, idx) {
+      var itemType = menuItemIsLink(item) ? "link" : "action";
+      return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, item, {
+        key: "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx),
+        "data-automation-id": "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx),
+        "data-testid": "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx)
+      }));
+    });
+  }
+  return null;
+};
+var renderDefaultLink = function (defaultAction) {
+  if (!defaultActionIsLink(defaultAction)) return;
+  if ("component" in defaultAction) {
+    return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, defaultAction, {
+      key: "title-block-mobile-actions-default-link",
+      "data-automation-id": "title-block-mobile-actions-default-link",
+      "data-testid": "title-block-mobile-actions-default-link"
+    }));
+  }
+  return /*#__PURE__*/React.createElement(MenuItem, {
+    href: defaultAction.href,
+    label: defaultAction.label,
+    icon: defaultAction.icon,
+    disabled: defaultAction.disabled,
+    key: "title-block-mobile-actions-default-link",
+    "data-automation-id": "title-block-mobile-actions-default-link",
+    "data-testid": "title-block-mobile-actions-default-link",
+    id: defaultAction.id
+  });
+};
+var renderDefaultAction = function (defaultAction) {
+  if (!defaultActionIsLink(defaultAction)) {
+    return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, defaultAction, {
+      key: "title-block-mobile-actions-default-action",
+      "data-automation-id": "title-block-mobile-actions-default-action",
+      "data-testid": "title-block-mobile-actions-default-action"
+    }));
+  }
+  return null;
+};
+var renderSecondaryActions = function (secondaryActions) {
+  if (!secondaryActions) return null;
+  var secondaryActionMenuItems = convertSecondaryActionsToMenuItems(secondaryActions);
+  return secondaryActionMenuItems.map(function (item, idx) {
+    return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, item, {
+      key: "title-block-mobile-actions-secondary-action-".concat(idx),
+      "data-testid": "title-block-mobile-actions-secondary-action"
+    }));
+  });
+};
+var renderSecondaryOverflowMenuItems = function (secondaryOverflowMenuItems) {
+  return secondaryOverflowMenuItems.map(function (item, idx) {
+    return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, item, {
+      key: "title-block-mobile-actions-overflow-menu-item-".concat(idx),
+      "data-testid": "title-block-mobile-actions-overflow-menu-item"
+    }));
+  });
+};
+var DrawerMenuContent = function (_a) {
+  var primaryAction = _a.primaryAction,
+    defaultAction = _a.defaultAction,
+    secondaryActions = _a.secondaryActions,
+    secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems;
+  var showOtherActionsHeading = defaultAction && defaultActionIsButton(defaultAction) || secondaryActions || secondaryOverflowMenuItems;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuList, null, primaryAction && renderPrimaryActionDrawerContent(primaryAction, "link"), defaultAction && renderDefaultLink(defaultAction), primaryAction && renderPrimaryActionDrawerContent(primaryAction, "action")), (defaultAction || secondaryActions || secondaryOverflowMenuItems) && ( /*#__PURE__*/React.createElement(MenuList, {
+    heading: showOtherActionsHeading && /*#__PURE__*/React.createElement(MenuHeading, null, "Other actions")
+  }, defaultAction && renderDefaultAction(defaultAction), secondaryActions && renderSecondaryActions(secondaryActions), secondaryOverflowMenuItems && renderSecondaryOverflowMenuItems(secondaryOverflowMenuItems))));
+};
+var renderDrawerHandleLabel = function (label, icon, drawerHandleLabelIconPosition) {
+  if (drawerHandleLabelIconPosition === "end") {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: styles.drawerHandleLabelText,
+      "data-testid": "drawer-handle-lable-text"
+    }, label), /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
+      className: styles.drawerHandleIcon
+    }, icon)));
+  } else {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
+      className: styles.drawerHandleIcon
+    }, icon)), /*#__PURE__*/React.createElement("span", {
+      className: styles.drawerHandleLabelText,
+      "data-testid": "drawer-handle-lable-text"
+    }, label));
+  }
+};
+var ButtonOrLink = function (_a) {
+  var action = _a.action,
+    children = _a.children;
+  if (typeof action === "object" && "onClick" in action && "href" in action) {
+    return /*#__PURE__*/React.createElement("a", {
+      onClick: action.onClick,
+      href: action.href,
+      className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton),
+      "data-testid": "title-block-mobile-actions-primary-button"
+    }, children);
+  }
+  if (typeof action === "function") {
+    return /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: action,
+      className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton),
+      "data-testid": "title-block-mobile-actions-primary-button"
+    }, children);
+  }
+  if (typeof action === "string") {
+    return /*#__PURE__*/React.createElement("a", {
+      href: action,
+      className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton),
+      "data-testid": "title-block-mobile-actions-primary-button"
+    }, children);
+  }
+  // when there's no action (e.g. primary button is disabled)
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton),
+    "data-testid": "title-block-mobile-actions-primary-button"
+  }, children);
+};
+var getAction = function (primaryAction) {
+  if (primaryAction && !primaryAction.disabled) {
+    if (primaryAction.onClick && primaryAction.href) {
+      return {
+        href: primaryAction.href,
+        onClick: primaryAction.onClick
+      };
+    }
+    if (primaryAction.onClick) {
+      return primaryAction.onClick;
+    }
+    if (primaryAction.href) {
+      return primaryAction.href;
+    }
+  }
+  return undefined;
+};
+var DrawerHandle = function (_a) {
+  var primaryAction = _a.primaryAction,
+    secondaryActions = _a.secondaryActions,
+    defaultAction = _a.defaultAction,
+    secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
+    drawerHandleLabelIconPosition = _a.drawerHandleLabelIconPosition,
+    toggleDisplay = _a.toggleDisplay,
+    isOpen = _a.isOpen;
+  var showDrawer = defaultAction || secondaryActions || secondaryOverflowMenuItems;
+  if (primaryAction) {
+    // If the primary action is a menu
+    if (isMenuGroupNotButton(primaryAction)) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames(styles.mobileActionsTopRow, styles.mobileActionsTopRowSingleButton),
+        "data-testid": "title-block-mobile-actions-drawer-handle"
+      }, /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        className: classnames(styles.mobileActionsExpandButton, styles.mobileActionsPrimaryLabel),
+        onClick: toggleDisplay,
+        "aria-expanded": isOpen
+      }, primaryAction.label, /*#__PURE__*/React.createElement("span", {
+        className: styles.mobileActionsChevronSquare
+      }, isOpen ? ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
+        role: "presentation"
+      })) : ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
+        role: "presentation"
+      })))));
+    }
+    // If the primary action is a button, or has no onClick/href/action
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.mobileActionsTopRow, !showDrawer && styles.mobileActionsTopRowSingleButton),
+      "data-testid": "title-block-mobile-actions-drawer-handle"
+    }, "component" in primaryAction ? ( /*#__PURE__*/React.createElement(primaryAction.component, __assign({
+      className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton)
+    }, primaryAction), primaryAction.label && renderDrawerHandleLabel(primaryAction.label, primaryAction.icon, drawerHandleLabelIconPosition))) : ( /*#__PURE__*/React.createElement(ButtonOrLink, {
+      action: getAction(primaryAction)
+    }, renderDrawerHandleLabel(primaryAction.label, primaryAction.icon, drawerHandleLabelIconPosition))), showDrawer && ( /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: styles.mobileActionsExpandButton,
+      onClick: toggleDisplay,
+      "aria-expanded": isOpen,
+      id: TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID,
+      "aria-label": "Other actions"
+    }, isOpen ? ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      role: "presentation"
+    })) : ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
+      role: "presentation"
+    })))));
+  }
+  // if there are default/secondary actions but no primary action
+  if (showDrawer) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.mobileActionsTopRow, styles.mobileActionsTopRowSingleButton),
+      "data-testid": "title-block-mobile-actions-drawer-handle"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: classnames(styles.mobileActionsExpandButton, styles.mobileActionsPrimaryLabel),
+      onClick: toggleDisplay,
+      "aria-expanded": isOpen,
+      id: TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID
+    }, renderDrawerHandleLabel("Other actions"), /*#__PURE__*/React.createElement("span", {
+      className: styles.mobileActionsChevronSquare
+    }, isOpen ? ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      role: "presentation"
+    })) : ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
+      role: "presentation"
+    })))));
+  }
+  return null;
+};
+const MobileActions = /*#__PURE__*/function () {
+  const MobileActions = function (_a) {
+    var primaryAction = _a.primaryAction,
+      defaultAction = _a.defaultAction,
+      secondaryActions = _a.secondaryActions,
+      secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
+      drawerHandleLabelIconPosition = _a.drawerHandleLabelIconPosition,
+      _b = _a.autoHide,
+      autoHide = _b === void 0 ? false : _b;
+    var _c = useState(false),
+      isOpen = _c[0],
+      setIsOpen = _c[1];
+    var menuContent = /*#__PURE__*/React.createRef();
+    var toggleDisplay = function () {
+      setIsOpen(!isOpen);
+    };
+    // This callback handler will not run when autoHide === "off"
+    var handleDocumentClickForAutoHide = useCallback(function (e) {
+      var _a;
+      if (isOpen && e.target instanceof Node && ((_a = menuContent.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+        setIsOpen(false);
+      }
+    }, [menuContent]);
+    useEffect(function () {
+      if (autoHide) {
+        document.addEventListener("click", handleDocumentClickForAutoHide, true);
+      }
+      return function () {
+        if (autoHide) {
+          document.removeEventListener("click", handleDocumentClickForAutoHide, true);
+        }
+      };
+    }, [autoHide, handleDocumentClickForAutoHide]);
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.mobileActionsContainer, isOpen && styles.isOpen)
+    }, /*#__PURE__*/React.createElement(FocusOn, {
+      enabled: isOpen,
+      scrollLock: false
+    }, /*#__PURE__*/React.createElement(DrawerHandle, {
+      primaryAction: primaryAction,
+      secondaryActions: secondaryActions,
+      defaultAction: defaultAction,
+      secondaryOverflowMenuItems: secondaryOverflowMenuItems,
+      drawerHandleLabelIconPosition: drawerHandleLabelIconPosition,
+      toggleDisplay: toggleDisplay,
+      isOpen: isOpen
+    }), (defaultAction || secondaryActions || secondaryOverflowMenuItems || primaryAction && isMenuGroupNotButton(primaryAction)) && ( /*#__PURE__*/React.createElement("div", {
+      ref: menuContent,
+      className: styles.mobileActionsMenuContainer
+    }, /*#__PURE__*/React.createElement(DrawerMenuContent, {
+      primaryAction: primaryAction,
+      defaultAction: defaultAction,
+      secondaryActions: secondaryActions,
+      secondaryOverflowMenuItems: secondaryOverflowMenuItems
+    })))));
+  };
+  MobileActions.displayName = "MobileActions";
+  return MobileActions;
+}();
+export { MobileActions };

package/dist/esm/TitleBlockZen/subcomponents/MobileActions.module.scss.mjs ADDED Viewed

@@ -0,0 +1,40 @@
+var css_248z = ".MobileActions-module_mobileActionsContainer__ob6ML{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;animation:MobileActions-module_slide-up__vX8Ad 1s ease;border-start-end-radius:var(--border-solid-border-radius,7px);border-start-start-radius:var(--border-solid-border-radius,7px);bottom:0;display:none;flex-direction:column;left:0;overflow:hidden;position:fixed;right:0;transform:translateY(calc(100% - 60px));transition:.4s ease;z-index:1030}.MobileActions-module_mobileActionsContainer__ob6ML.MobileActions-module_isOpen__mmGTA{transform:translateY(0)}.MobileActions-module_mobileActionsContainer__ob6ML.MobileActions-module_isOpen__mmGTA .MobileActions-module_mobileActionsMenuContainer__a7LUt{visibility:visible}@media (max-width:767px){.MobileActions-module_mobileActionsContainer__ob6ML{display:flex}}.MobileActions-module_mobileActionsTopRow__51iiz{align-items:center;display:flex;height:60px;justify-content:space-between}.MobileActions-module_mobileActionsTopRow__51iiz.MobileActions-module_mobileActionsTopRowSingleButton__IB5x6{justify-content:center}.MobileActions-module_mobileActionsMenuContainer__a7LUt{background:var(--color-white,#fff);padding:var(--spacing-xs,.375rem) 0;transition:visibility .4s;visibility:hidden;width:100%}.MobileActions-module_drawerHandleIcon__z-Hp-{align-items:center;display:flex;justify-content:center;margin-left:0;margin-right:.75rem}.MobileActions-module_drawerHandleIcon__z-Hp-[dir=rtl],.MobileActions-module_drawerHandleLabelText__UDIFl+.MobileActions-module_drawerHandleIcon__z-Hp-,[dir=rtl] .MobileActions-module_drawerHandleIcon__z-Hp-{margin-left:.75rem;margin-right:0}.MobileActions-module_drawerHandleLabelText__UDIFl+.MobileActions-module_drawerHandleIcon__z-Hp-[dir=rtl],[dir=rtl] .MobileActions-module_drawerHandleLabelText__UDIFl+.MobileActions-module_drawerHandleIcon__z-Hp-{margin-left:0;margin-right:.75rem}.MobileActions-module_mobileActionsPrimaryLabel__y-kgB{color:var(--color-white,#fff);font-family:var(--typography-button-primary-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-button-primary-font-size,1.125rem);font-weight:var(--typography-button-primary-font-weight,700);letter-spacing:var(--typography-button-primary-letter-spacing,normal);line-height:var(--typography-button-primary-line-height,1.5rem);padding-left:1.125rem;padding-right:0;text-align:left;text-decoration:none}.MobileActions-module_mobileActionsPrimaryLabel__y-kgB[dir=rtl],[dir=rtl] .MobileActions-module_mobileActionsPrimaryLabel__y-kgB{padding-left:0;padding-right:1.125rem}.MobileActions-module_mobileActionsExpandButton__shDFU,.MobileActions-module_mobileActionsPrimaryButton__5Ggbi{align-items:center;background-color:var(--color-blue-500,#0168b3);border:0;box-sizing:border-box;color:var(--color-white,#fff);display:flex;height:100%;justify-content:flex-start;position:relative}.MobileActions-module_mobileActionsExpandButton__shDFU:focus,.MobileActions-module_mobileActionsPrimaryButton__5Ggbi:focus{background-color:var(--color-blue-600,#004970);outline:none}.MobileActions-module_mobileActionsExpandButton__shDFU:focus-visible,.MobileActions-module_mobileActionsPrimaryButton__5Ggbi:focus-visible{height:52px}.MobileActions-module_mobileActionsExpandButton__shDFU:focus-visible:after,.MobileActions-module_mobileActionsPrimaryButton__5Ggbi:focus-visible:after{background:transparent;border-color:var(--color-blue-500,#0168b3);border-style:var(--border-focus-ring-border-style,solid);border-width:2px;content:\"\";inset:calc(var(--border-focus-ring-border-width, 2px)*2*-1);position:absolute}.MobileActions-module_mobileActionsExpandButton__shDFU:hover,.MobileActions-module_mobileActionsPrimaryButton__5Ggbi:hover{text-decoration:none}.MobileActions-module_mobileActionsExpandButton__shDFU:only-child,.MobileActions-module_mobileActionsPrimaryButton__5Ggbi:only-child{border-start-end-radius:var(--border-solid-border-radius,7px);border-start-start-radius:var(--border-solid-border-radius,7px);flex-basis:100%}.MobileActions-module_mobileActionsExpandButton__shDFU:only-child:focus-visible,.MobileActions-module_mobileActionsPrimaryButton__5Ggbi:only-child:focus-visible{flex-basis:calc(100% - 8px)}.MobileActions-module_mobileActionsExpandButton__shDFU:only-child:focus-visible:after,.MobileActions-module_mobileActionsPrimaryButton__5Ggbi:only-child:focus-visible:after{border-start-end-radius:var(--border-focus-ring-border-radius,10px);border-start-start-radius:var(--border-focus-ring-border-radius,10px)}.MobileActions-module_mobileActionsPrimaryButton__5Ggbi:not(:only-child){flex:0 0 calc(100% - 3.75rem)}.MobileActions-module_mobileActionsPrimaryButton__5Ggbi:not(:only-child):focus-visible{border-start-start-radius:var(--border-solid-border-radius,7px);flex-basis:calc(100% - 3.75rem - 8px);margin-left:4px}.MobileActions-module_mobileActionsPrimaryButton__5Ggbi:not(:only-child):focus-visible+.MobileActions-module_mobileActionsExpandButton__shDFU{border-color:var(--color-white,#fff)}.MobileActions-module_mobileActionsPrimaryButton__5Ggbi:not(:only-child):focus-visible:after{border-start-start-radius:var(--border-focus-ring-border-radius,10px)}.MobileActions-module_mobileActionsExpandButton__shDFU:not(:only-child){border-left:2px solid var(--color-blue-200,#bde2f5);flex:0 0 3.75rem;justify-content:center}.MobileActions-module_mobileActionsExpandButton__shDFU:not(:only-child):focus-visible{border-color:var(--color-white,#fff);border-start-end-radius:var(--border-solid-border-radius,7px);flex-basis:calc(3.75rem - 8px);margin-right:4px}.MobileActions-module_mobileActionsExpandButton__shDFU:not(:only-child):focus-visible:after{border-start-end-radius:var(--border-focus-ring-border-radius,10px)}.MobileActions-module_mobileActionsChevronSquare__u4OYT{align-items:center;display:flex;height:100%;justify-content:center;left:auto;position:absolute;right:20px}.MobileActions-module_mobileActionsChevronSquare__u4OYT[dir=rtl],[dir=rtl] .MobileActions-module_mobileActionsChevronSquare__u4OYT{left:20px;right:auto}@keyframes MobileActions-module_slide-up__vX8Ad{0%{transform:translateY(100%)}50%{transform:translateY(100%)}to{transform:translateY(calc(100% - 60px))}}";
+var styles = {
+  "mobileActionsContainer": "MobileActions-module_mobileActionsContainer__ob6ML",
+  "slide-up": "MobileActions-module_slide-up__vX8Ad",
+  "isOpen": "MobileActions-module_isOpen__mmGTA",
+  "mobileActionsMenuContainer": "MobileActions-module_mobileActionsMenuContainer__a7LUt",
+  "mobileActionsTopRow": "MobileActions-module_mobileActionsTopRow__51iiz",
+  "mobileActionsTopRowSingleButton": "MobileActions-module_mobileActionsTopRowSingleButton__IB5x6",
+  "drawerHandleIcon": "MobileActions-module_drawerHandleIcon__z-Hp-",
+  "drawerHandleLabelText": "MobileActions-module_drawerHandleLabelText__UDIFl",
+  "mobileActionsPrimaryLabel": "MobileActions-module_mobileActionsPrimaryLabel__y-kgB",
+  "mobileActionsPrimaryButton": "MobileActions-module_mobileActionsPrimaryButton__5Ggbi",
+  "mobileActionsExpandButton": "MobileActions-module_mobileActionsExpandButton__shDFU",
+  "mobileActionsChevronSquare": "MobileActions-module_mobileActionsChevronSquare__u4OYT"
+};
+// 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/subcomponents/NavigationTabs.mjs ADDED Viewed

@@ -0,0 +1,32 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { NON_REVERSED_VARIANTS } from '../utils.mjs';
+import styles from './NavigationTabs.module.scss.mjs';
+var isLight = function (variant) {
+  return variant !== undefined && NON_REVERSED_VARIANTS.includes(variant);
+};
+const NavigationTab = /*#__PURE__*/function () {
+  const NavigationTab = function (props) {
+    var className = classnames(styles.linkAnchor, isLight(props.variant) && styles.lightBackground, props.active && styles.active);
+    if (props.render) {
+      var Component = props.render,
+        otherProps = __rest(props, ["render"]);
+      return /*#__PURE__*/React.createElement(Component, __assign({}, otherProps, {
+        className: className
+      }));
+    }
+    return /*#__PURE__*/React.createElement("a", {
+      className: className,
+      href: props.href,
+      onClick: props.handleClick,
+      id: props.id,
+      "data-automation-id": props.automationId,
+      "data-testid": props.automationId,
+      "aria-current": props.active ? "page" : undefined
+    }, props.text);
+  };
+  NavigationTab.displayName = "NavigationTab";
+  return NavigationTab;
+}();
+export { NavigationTab };

package/dist/esm/TitleBlockZen/subcomponents/NavigationTabs.module.scss.mjs ADDED Viewed

@@ -0,0 +1,32 @@
+var css_248z = ".NavigationTabs-module_container__lK-HH{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex}.NavigationTabs-module_linkAnchor__oUsWX{align-items:center;color:rgba(var(--color-white-rgb,255,255,255),.7);display:flex;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);height:100%;letter-spacing:var(--typography-heading-4-letter-spacing,normal);line-height:var(--typography-heading-4-line-height,1.5rem);margin-right:var(--spacing-md,1.5rem);padding:0 var(--spacing-sm,.75rem);position:relative;text-decoration:none;white-space:nowrap}.NavigationTabs-module_linkAnchor__oUsWX[dir=rtl],[dir=rtl] .NavigationTabs-module_linkAnchor__oUsWX{margin-left:var(--spacing-md,1.5rem);margin-right:0}.NavigationTabs-module_linkAnchor__oUsWX:hover{color:var(--color-white,#fff);text-decoration:none}@media (max-width:1365px){.NavigationTabs-module_linkAnchor__oUsWX{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)}}@media (max-width:1439px){.NavigationTabs-module_linkAnchor__oUsWX{margin-right:var(--spacing-xs,.375rem)}.NavigationTabs-module_linkAnchor__oUsWX[dir=rtl],[dir=rtl] .NavigationTabs-module_linkAnchor__oUsWX{margin-left:var(--spacing-xs,.375rem);margin-right:0}}@media (max-width:1189px){.NavigationTabs-module_linkAnchor__oUsWX{margin:0}}.NavigationTabs-module_linkAnchor__oUsWX.NavigationTabs-module_active__-38QW,.NavigationTabs-module_linkAnchor__oUsWX:focus{color:var(--color-white,#fff)}.NavigationTabs-module_linkAnchor__oUsWX.NavigationTabs-module_active__-38QW:before,.NavigationTabs-module_linkAnchor__oUsWX:focus:before{background-color:var(--color-white,#fff);border-radius:0 0 var(--border-solid-border-radius,7px) var(--border-solid-border-radius,7px);content:\"\";display:block;height:5px;left:0;position:absolute;right:0;top:0;transition:transform .15s cubic-bezier(.55,.085,.68,.53)}@media (max-width:calc(1080px - 1px)){.NavigationTabs-module_linkAnchor__oUsWX.NavigationTabs-module_active__-38QW:before,.NavigationTabs-module_linkAnchor__oUsWX:focus:before{border-radius:var(--border-solid-border-radius,7px) var(--border-solid-border-radius,7px) 0 0;bottom:0;top:auto}}.NavigationTabs-module_linkAnchor__oUsWX:focus{outline:none}.NavigationTabs-module_linkAnchor__oUsWX:focus:before{background-color:var(--color-blue-200,#bde2f5)}.NavigationTabs-module_linkAnchor__oUsWX:focus:after{background:transparent;border-color:var(--color-blue-200,#bde2f5);border-radius:0 0 var(--border-focus-ring-border-radius,10px) var(--border-focus-ring-border-radius,10px);border-style:var(--border-focus-ring-border-style,solid);border-width:var(--border-focus-ring-border-width,2px);content:\"\";inset:0 calc(var(--border-focus-ring-border-width, 2px)*-1) 5px calc(var(--border-focus-ring-border-width, 2px)*-1);position:absolute}@media (max-width:calc(1080px - 1px)){.NavigationTabs-module_linkAnchor__oUsWX:focus:after{border-radius:var(--border-focus-ring-border-radius,10px) var(--border-focus-ring-border-radius,10px) 0 0;inset:5px calc(var(--border-focus-ring-border-width, 2px)*-1) 0 calc(var(--border-focus-ring-border-width, 2px)*-1)}}@media (forced-colors:active){.NavigationTabs-module_linkAnchor__oUsWX.NavigationTabs-module_active__-38QW:before,.NavigationTabs-module_linkAnchor__oUsWX:focus:before{background:transparent;border:5px solid transparent;height:0}}.NavigationTabs-module_linkAnchor__oUsWX.NavigationTabs-module_lightBackground__TR-5T{color:rgba(var(--color-purple-800-rgb,47,36,56),.75)}.NavigationTabs-module_linkAnchor__oUsWX.NavigationTabs-module_lightBackground__TR-5T.NavigationTabs-module_active__-38QW,.NavigationTabs-module_linkAnchor__oUsWX.NavigationTabs-module_lightBackground__TR-5T:hover{color:var(--color-blue-500,#0168b3)}.NavigationTabs-module_linkAnchor__oUsWX.NavigationTabs-module_lightBackground__TR-5T.NavigationTabs-module_active__-38QW:before{background-color:var(--color-blue-500,#0168b3);top:3px}@media (max-width:calc(1080px - 1px)){.NavigationTabs-module_linkAnchor__oUsWX.NavigationTabs-module_lightBackground__TR-5T.NavigationTabs-module_active__-38QW:before{border-radius:var(--border-solid-border-radius,7px) var(--border-solid-border-radius,7px) 0 0;bottom:0;top:auto}}";
+var styles = {
+  "container": "NavigationTabs-module_container__lK-HH",
+  "linkAnchor": "NavigationTabs-module_linkAnchor__oUsWX",
+  "active": "NavigationTabs-module_active__-38QW",
+  "lightBackground": "NavigationTabs-module_lightBackground__TR-5T"
+};
+// 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/subcomponents/SecondaryActions.mjs ADDED Viewed

@@ -0,0 +1,101 @@
+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 styles from '../TitleBlockZen.module.scss.mjs';
+import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from '../constants.mjs';
+import { TitleBlockMenuItem } from './TitleBlockMenuItem.mjs';
+import { Toolbar } from './Toolbar.mjs';
+var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed) {
+  if (!secondaryOverflowMenuItems) return undefined;
+  return /*#__PURE__*/React.createElement(Menu, {
+    align: "right",
+    button: /*#__PURE__*/React.createElement(IconButton, {
+      label: "Open secondary menu",
+      reversed: reversed,
+      icon: /*#__PURE__*/React.createElement(MeatballsIcon, {
+        role: "presentation"
+      }),
+      id: TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID
+    })
+  }, /*#__PURE__*/React.createElement(MenuList, null, secondaryOverflowMenuItems.map(function (menuItem, i) {
+    return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({
+      key: i
+    }, menuItem));
+  })));
+};
+// Unfortunately, you'll notice below, that I needed to use the array index,
+// against react best practices (https://reactjs.org/docs/lists-and-keys.html)
+// This is because the menu items have no unique identifier.
+const SecondaryActions = /*#__PURE__*/function () {
+  const SecondaryActions = function (_a) {
+    var secondaryActions = _a.secondaryActions,
+      secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
+      _b = _a.reversed,
+      reversed = _b === void 0 ? false : _b;
+    if (!secondaryActions && !secondaryOverflowMenuItems) return null;
+    var secondaryActionsAsToolbarItems = secondaryActions ? secondaryActions.map(function (action, i) {
+      if ("menuItems" in action) {
+        return {
+          key: "".concat(i),
+          // We shouldn't use an index here, see note above
+          node: ( /*#__PURE__*/React.createElement(Menu, {
+            align: "right",
+            button: /*#__PURE__*/React.createElement(Button, {
+              secondary: true,
+              label: action.label,
+              reversed: reversed,
+              icon: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+                role: "presentation"
+              }),
+              iconPosition: "end"
+            })
+          }, /*#__PURE__*/React.createElement(MenuList, null, action.menuItems.map(function (menuItem, i2) {
+            return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({
+              key: i2
+            }, menuItem));
+          }))))
+        };
+      } else {
+        if ("onClick" in action && "href" in action) {
+          // eslint-disable-next-line no-console
+          console.warn("\u001b[33m \nTITLE BLOCK WARNING:\nSecondary actions only support " + "either an href or an onClick, not both simultaneously.\n");
+        }
+        return {
+          key: "".concat(i),
+          // We shouldn't use an index here, see note above
+          node: ( /*#__PURE__*/React.createElement(Button, __assign({
+            secondary: true,
+            reversed: reversed
+          }, action, {
+            "data-automation-id": "title-block-secondary-actions-button",
+            "data-testid": "title-block-secondary-actions-button"
+          })))
+        };
+      }
+    }) : [];
+    var overflowMenu = renderSecondaryOverflowMenu(secondaryOverflowMenuItems, reversed);
+    var toolbarItems = __spreadArray(__spreadArray([], secondaryActionsAsToolbarItems, true), overflowMenu ? [{
+      key: "overflowMenu",
+      node: overflowMenu
+    }] : [], true);
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.secondaryActionsContainer
+    }, /*#__PURE__*/React.createElement(Toolbar, {
+      items: toolbarItems,
+      noGap: true,
+      automationId: "title-block-secondary-actions-toolbar"
+    }));
+  };
+  SecondaryActions.displayName = "SecondaryActions";
+  return SecondaryActions;
+}();
+export { SecondaryActions };

package/dist/esm/TitleBlockZen/subcomponents/TitleBlockMenuItem.mjs ADDED Viewed

@@ -0,0 +1,35 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import '../../Menu/Menu.mjs';
+import '../../Menu/subcomponents/MenuHeading/MenuHeading.mjs';
+import { MenuItem } from '../../Menu/subcomponents/MenuItem/MenuItem.mjs';
+import '../../Menu/subcomponents/MenuList/MenuList.mjs';
+import '../../Menu/subcomponents/StatelessMenu/StatelessMenu.mjs';
+import styles from './TitleBlockMenuItem.module.scss.mjs';
+const TitleBlockMenuItem = /*#__PURE__*/function () {
+  const TitleBlockMenuItem = function (props) {
+    var className = classnames(styles.menuItem, styles.destructive && styles["menuItem--destructive"], styles.disabled && styles["menuItem--disabled"], styles.isActive && styles["menuItem--active"]);
+    if ("component" in props) {
+      var CustomMenuItem = props.component,
+        label = props.label,
+        icon = props.icon,
+        otherProps = __rest(props, ["component", "label", "icon"]);
+      var wrappedLabel = /*#__PURE__*/React.createElement("span", {
+        className: styles.menuItem__Label
+      }, label);
+      var iconNode = icon && ( /*#__PURE__*/React.createElement("span", {
+        className: styles.menuItem__Icon
+      }, icon));
+      return /*#__PURE__*/React.createElement("li", {
+        className: styles.menuListItem
+      }, /*#__PURE__*/React.createElement(CustomMenuItem, __assign({}, otherProps, {
+        className: className
+      }), iconNode, wrappedLabel));
+    }
+    return /*#__PURE__*/React.createElement(MenuItem, __assign({}, props));
+  };
+  TitleBlockMenuItem.displayName = "TitleBlockMenuItem";
+  return TitleBlockMenuItem;
+}();
+export { TitleBlockMenuItem };

package/dist/esm/TitleBlockZen/subcomponents/TitleBlockMenuItem.module.scss.mjs ADDED Viewed

@@ -0,0 +1,35 @@
+var css_248z = ".TitleBlockMenuItem-module_menuListItem__G3K41{display:flex}.TitleBlockMenuItem-module_menuItem__v9hGL{align-items:center;background:none;border:2px solid transparent;border-radius:4px;box-sizing:border-box;color:var(--color-purple-800,#2f2438);display:flex;flex:1 1 auto;font-family:var(--typography-paragraph-body-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:var(--typography-paragraph-body-line-height,1.5rem);margin:0 var(--spacing-xs,.375rem);min-height:calc(var(--spacing-md, 1.5rem)*1.75);padding:6px calc(var(--spacing-sm, .75rem) - 2px);text-align:left;text-decoration:none}.TitleBlockMenuItem-module_menuItem__v9hGL:hover{text-decoration:none}.TitleBlockMenuItem-module_menuItem__v9hGL:focus,.TitleBlockMenuItem-module_menuItem__v9hGL:not(.TitleBlockMenuItem-module_menuItem--disabled__lrGIn):hover{background:var(--color-blue-100,#e6f6ff);color:var(--color-blue-500,#0168b3)}.TitleBlockMenuItem-module_menuItem__v9hGL:focus .TitleBlockMenuItem-module_menuItem__Icon__zyUMD,.TitleBlockMenuItem-module_menuItem__v9hGL:not(.TitleBlockMenuItem-module_menuItem--disabled__lrGIn):hover .TitleBlockMenuItem-module_menuItem__Icon__zyUMD{color:var(--color-blue-500,#0168b3)}.TitleBlockMenuItem-module_menuItem__v9hGL:focus.TitleBlockMenuItem-module_menuItem--destructive__Q18x-,.TitleBlockMenuItem-module_menuItem__v9hGL:not(.TitleBlockMenuItem-module_menuItem--disabled__lrGIn):hover.TitleBlockMenuItem-module_menuItem--destructive__Q18x-{background:var(--color-red-100,#fdeaee);color:var(--color-red-600,#a82433)}.TitleBlockMenuItem-module_menuItem__v9hGL:focus.TitleBlockMenuItem-module_menuItem--destructive__Q18x- .TitleBlockMenuItem-module_menuItem__Icon__zyUMD,.TitleBlockMenuItem-module_menuItem__v9hGL:not(.TitleBlockMenuItem-module_menuItem--disabled__lrGIn):hover.TitleBlockMenuItem-module_menuItem--destructive__Q18x- .TitleBlockMenuItem-module_menuItem__Icon__zyUMD{color:var(--color-red-600,#a82433)}.TitleBlockMenuItem-module_menuItem__v9hGL:focus{outline:none}.TitleBlockMenuItem-module_menuItem__v9hGL:focus-visible{border-color:var(--color-blue-500,#0168b3)}[dir=rtl] .TitleBlockMenuItem-module_menuItem__v9hGL{text-align:right}.TitleBlockMenuItem-module_menuItem--disabled__lrGIn,.TitleBlockMenuItem-module_menuItem--disabled__lrGIn .TitleBlockMenuItem-module_menuItem__Icon__zyUMD{color:rgba(var(--color-purple-800-rgb,47,36,56),.3)}.TitleBlockMenuItem-module_menuItem--active__f-tGu{color:var(--color-blue-500,#0168b3);font-weight:var(--typography-paragraph-bold-font-weight,600)}.TitleBlockMenuItem-module_menuItem--destructive__Q18x-,.TitleBlockMenuItem-module_menuItem--destructive__Q18x- .TitleBlockMenuItem-module_menuItem__Icon__zyUMD{color:var(--color-red-600,#a82433)}.TitleBlockMenuItem-module_menuItem--destructive__Q18x-.TitleBlockMenuItem-module_menuItem--disabled__lrGIn,.TitleBlockMenuItem-module_menuItem--destructive__Q18x-.TitleBlockMenuItem-module_menuItem--disabled__lrGIn .TitleBlockMenuItem-module_menuItem__Icon__zyUMD{color:rgba(var(--color-red-600-rgb,168,36,51),.3)}.TitleBlockMenuItem-module_menuItem__Label__YUtc5{flex-grow:1}.TitleBlockMenuItem-module_menuItem__Icon__zyUMD{align-self:flex-start;color:rgba(var(--color-purple-800-rgb,47,36,56),.75);display:flex;margin-inline-end:calc(var(--spacing-md, 1.5rem)/3);transform:translateY(.2em)}";
+var styles = {
+  "menuListItem": "TitleBlockMenuItem-module_menuListItem__G3K41",
+  "menuItem": "TitleBlockMenuItem-module_menuItem__v9hGL",
+  "menuItem--disabled": "TitleBlockMenuItem-module_menuItem--disabled__lrGIn",
+  "menuItem__Icon": "TitleBlockMenuItem-module_menuItem__Icon__zyUMD",
+  "menuItem--destructive": "TitleBlockMenuItem-module_menuItem--destructive__Q18x-",
+  "menuItem--active": "TitleBlockMenuItem-module_menuItem--active__f-tGu",
+  "menuItem__Label": "TitleBlockMenuItem-module_menuItem__Label__YUtc5"
+};
+// 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/subcomponents/Toolbar.mjs ADDED Viewed

@@ -0,0 +1,31 @@
+import React from 'react';
+import classnames from 'classnames';
+import styles from './Toolbar.module.scss.mjs';
+// Toolbar should eventually be broken out
+// into its own component since it's a generic
+// grouping component for buttons/dropdowns/etc
+const Toolbar = /*#__PURE__*/function () {
+  const Toolbar = function (_a) {
+    var items = _a.items,
+      _b = _a.noGap,
+      noGap = _b === void 0 ? false : _b,
+      automationId = _a.automationId;
+    if (!items || items && items.length === 0) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.toolbar,
+      "data-automation-id": automationId,
+      "data-testid": automationId
+    }, items.map(function (item) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames(styles.toolbarItem, noGap && styles.noGap),
+        key: item.key
+      }, item.node);
+    }));
+  };
+  Toolbar.displayName = "Toolbar";
+  return Toolbar;
+}();
+export { Toolbar };