@primer/react 38.0.0-rc.3 → 38.0.0-rc.4

package/dist/TreeView/TreeView.js

@@ -12,11 +12,16 @@ import { useSlots } from '../hooks/useSlots.js';
 import { getAccessibleName } from './shared.js';
 import { useRovingTabIndex, getFirstChildElement } from './useRovingTabIndex.js';
 import { useTypeahead } from './useTypeahead.js';
+import { Dialog } from '../Dialog/Dialog.js';
+import { IconButton } from '../Button/IconButton.js';
+import { ActionList } from '../ActionList/index.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import StyledSpinner from '../Spinner/Spinner.js';
+import { useIsMacOS } from '../hooks/useIsMacOS.js';
+import Spinner from '../Spinner/Spinner.js';
 import Text from '../Text/Text.js';
 import { SkeletonAvatar } from '../SkeletonAvatar/SkeletonAvatar.js';
 import { SkeletonText } from '../SkeletonText/SkeletonText.js';
+import { getAccessibleKeybindingHintString } from '../KeybindingHint/KeybindingHint.js';
 
 const RootContext = /*#__PURE__*/React.createContext({
   announceUpdate: () => {},
@@ -32,7 +37,8 @@ const ItemContext = /*#__PURE__*/React.createContext({
   isExpanded: false,
   setIsExpanded: () => {},
   leadingVisualId: '',
-  trailingVisualId: ''
+  trailingVisualId: '',
+  trailingActionId: ''
 });
 
 // ----------------------------------------------------------------------------
@@ -217,7 +223,8 @@ const Item = /*#__PURE__*/React.forwardRef(({
   children,
   className,
   'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledby
+  'aria-labelledby': ariaLabelledby,
+  secondaryActions
 }, ref) => {
   const [slots, rest] = useSlots(children, {
     leadingAction: LeadingAction,
@@ -230,6 +237,7 @@ const Item = /*#__PURE__*/React.forwardRef(({
   const labelId = useId();
   const leadingVisualId = useId();
   const trailingVisualId = useId();
+  const trailingActionId = useId();
   const [isExpanded, setIsExpanded] = useControllableState({
     name: itemId,
     // If the item was previously mounted, its expanded state might be cached.
@@ -252,7 +260,9 @@ const Item = /*#__PURE__*/React.forwardRef(({
     childrenWithoutSubTree
   } = useSubTree(rest);
   const [isSubTreeEmpty, setIsSubTreeEmpty] = React.useState(!hasSubTree);
+  const [actionCommandPressed, setActionCommandPressed] = React.useState(false);
   const [isFocused, setIsFocused] = React.useState(false);
+  const isMacOS = useIsMacOS();
 
   // Set the expanded state and cache it
   const setIsExpandedWithCache = React.useCallback(newIsExpanded => {
@@ -266,6 +276,18 @@ const Item = /*#__PURE__*/React.forwardRef(({
     setIsExpandedWithCache(!isExpanded);
     event === null || event === void 0 ? void 0 : event.stopPropagation();
   }, [isExpanded, setIsExpandedWithCache]);
+  const activateActionsDialog = React.useCallback(() => {
+    if (!secondaryActions) return;
+    if (secondaryActions.length > 1) {
+      // If there are multiple secondary actions, open the action dialog
+      // as this allows users to select the action they want to interact with.
+      setActionCommandPressed(true);
+    } else {
+      // If there is only one secondary action, trigger it directly
+      const action = secondaryActions[0].onClick;
+      action();
+    }
+  }, [secondaryActions]);
   const handleKeyDown = React.useCallback(event_0 => {
     switch (event_0.key) {
       case 'Enter':
@@ -291,9 +313,16 @@ const Item = /*#__PURE__*/React.forwardRef(({
         event_0.stopPropagation();
         setIsExpandedWithCache(false);
         break;
+      case 'U':
+      case 'u':
+        if (!(event_0.shiftKey && (event_0.metaKey || event_0.ctrlKey))) return;
+        activateActionsDialog();
+        break;
     }
-  }, [onSelect, setIsExpandedWithCache, toggle]);
+  }, [onSelect, setIsExpandedWithCache, toggle, activateActionsDialog]);
   const ariaDescribedByIds = [slots.leadingVisual ? leadingVisualId : null, slots.trailingVisual ? trailingVisualId : null].filter(Boolean);
+  const shortcut = `Shift+${isMacOS ? 'Meta' : 'Control'}+U`;
+  const trailingActionShortcutText = `Press (${getAccessibleKeybindingHintString(shortcut, isMacOS)}) for more actions.`;
   return /*#__PURE__*/jsx(ItemContext.Provider, {
     value: {
       itemId,
@@ -303,7 +332,8 @@ const Item = /*#__PURE__*/React.forwardRef(({
       isExpanded,
       setIsExpanded: setIsExpandedWithCache,
       leadingVisualId,
-      trailingVisualId
+      trailingVisualId,
+      trailingActionId
     },
     children: /*#__PURE__*/jsxs("li", {
       className: clsx('PRIVATE_TreeView-item', className, classes.TreeViewItem),
@@ -311,8 +341,8 @@ const Item = /*#__PURE__*/React.forwardRef(({
       tabIndex: 0,
       id: itemId,
       role: "treeitem",
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabel ? undefined : ariaLabelledby || labelId,
+      "aria-label": secondaryActions ? ariaLabel ? `${ariaLabel}. ${trailingActionShortcutText}` : undefined : ariaLabel,
+      "aria-labelledby": ariaLabel ? undefined : `${ariaLabelledby || labelId} ${secondaryActions ? trailingActionId : ''}`.trim(),
       "aria-describedby": ariaDescribedByIds.length ? ariaDescribedByIds.join(' ') : undefined,
       "aria-level": level,
       "aria-expanded": isSubTreeEmpty && (!isExpanded || !hasSubTree) || expanded === null ? undefined : isExpanded,
@@ -390,7 +420,15 @@ const Item = /*#__PURE__*/React.forwardRef(({
             className: clsx('PRIVATE_TreeView-item-content-text', classes.TreeViewItemContentText),
             children: childrenWithoutSubTree
           }), slots.trailingVisual]
-        })]
+        }), secondaryActions ? /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(TrailingAction, {
+            items: secondaryActions,
+            shortcutText: trailingActionShortcutText
+          }), actionCommandPressed ? /*#__PURE__*/jsx(ActionDialog, {
+            items: secondaryActions,
+            onClose: () => setActionCommandPressed(false)
+          }) : null]
+        }) : null]
       }), subTree]
     })
   });
@@ -708,7 +746,7 @@ const LoadingItem = /*#__PURE__*/React.forwardRef((t0, ref) => {
   let t2;
   if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = /*#__PURE__*/jsx(LeadingVisual, {
-      children: /*#__PURE__*/jsx(StyledSpinner, {
+      children: /*#__PURE__*/jsx(Spinner, {
         size: "small"
       })
     });
@@ -1029,6 +1067,171 @@ const LeadingAction = props => {
   return t5;
 };
 LeadingAction.displayName = 'TreeView.LeadingAction';
+// ----------------------------------------------------------------------------
+// TreeView.TrailingAction
+
+const TrailingAction = props => {
+  const $ = c(14);
+  const {
+    trailingActionId,
+    itemId
+  } = React.useContext(ItemContext);
+  const {
+    items,
+    shortcutText
+  } = props;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = clsx("PRIVATE_VisuallyHidden", classes.TreeViewVisuallyHidden);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== shortcutText || $[2] !== trailingActionId) {
+    t1 = /*#__PURE__*/jsxs("div", {
+      id: trailingActionId,
+      className: t0,
+      children: ["; ", shortcutText]
+    });
+    $[1] = shortcutText;
+    $[2] = trailingActionId;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== itemId || $[5] !== items) {
+    let t3;
+    if ($[7] !== itemId) {
+      t3 = (t4, index) => {
+        const {
+          label,
+          onClick,
+          icon
+        } = t4;
+        return /*#__PURE__*/jsx(IconButton, {
+          icon: icon,
+          variant: "invisible",
+          "aria-label": label,
+          className: classes.TreeViewItemTrailingActionButton,
+          onClick: onClick,
+          tabIndex: -1,
+          "aria-hidden": true,
+          onKeyDown: () => {
+            const parentElement = document.getElementById(itemId);
+            parentElement === null || parentElement === void 0 ? void 0 : parentElement.focus();
+          }
+        }, index);
+      };
+      $[7] = itemId;
+      $[8] = t3;
+    } else {
+      t3 = $[8];
+    }
+    t2 = items.map(t3);
+    $[4] = itemId;
+    $[5] = items;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[9] !== t2) {
+    t3 = /*#__PURE__*/jsx("div", {
+      className: classes.TreeViewItemTrailingAction,
+      "aria-hidden": true,
+      onClick: _temp6,
+      onKeyDown: _temp7,
+      children: t2
+    });
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== t1 || $[12] !== t3) {
+    t4 = /*#__PURE__*/jsxs(Fragment, {
+      children: [t1, t3]
+    });
+    $[11] = t1;
+    $[12] = t3;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  return t4;
+};
+TrailingAction.displayName = 'TreeView.TrailingAction';
+// ----------------------------------------------------------------------------
+// TreeView.ActionDialog
+
+const ActionDialog = t0 => {
+  const $ = c(10);
+  const {
+    items,
+    onClose
+  } = t0;
+  const {
+    itemId
+  } = React.useContext(ItemContext);
+  let t1;
+  if ($[0] !== itemId || $[1] !== onClose) {
+    t1 = () => {
+      if (onClose) {
+        onClose();
+      }
+      setTimeout(() => {
+        const parentElement = document.getElementById(itemId);
+        parentElement === null || parentElement === void 0 ? void 0 : parentElement.focus();
+      });
+    };
+    $[0] = itemId;
+    $[1] = onClose;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== items) {
+    t2 = items.map(_temp0);
+    $[3] = items;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== t2) {
+    t3 = /*#__PURE__*/jsx(ActionList, {
+      children: t2
+    });
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== t1 || $[8] !== t3) {
+    t4 = /*#__PURE__*/jsx("div", {
+      onClick: _temp8,
+      onKeyDown: _temp9,
+      children: /*#__PURE__*/jsx(Dialog, {
+        title: "Supplemental actions",
+        onClose: t1,
+        children: t3
+      })
+    });
+    $[7] = t1;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
+};
+ActionDialog.displayName = 'TreeView.ActionDialog';
+
 // ----------------------------------------------------------------------------
 // TreeView.DirectoryIcon
 
@@ -1100,7 +1303,7 @@ const ErrorDialog = t0 => {
   let t3;
   if ($[5] !== children || $[6] !== t2 || $[7] !== title) {
     t3 = /*#__PURE__*/jsx("div", {
-      onKeyDown: _temp6,
+      onKeyDown: _temp1,
       children: /*#__PURE__*/jsx(ConfirmationDialog, {
         title: title,
         onClose: t2,
@@ -1150,6 +1353,34 @@ function _temp3(_, i) {
 }
 _temp3.displayName = "_temp3";
 function _temp6(event) {
+  return event.stopPropagation();
+}
+function _temp7(event_0) {
+  return event_0.stopPropagation();
+}
+function _temp8(event) {
+  event.stopPropagation();
+}
+function _temp9(event_0) {
+  if (["Backspace", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Enter"].includes(event_0.key)) {
+    event_0.stopPropagation();
+  }
+}
+function _temp0(t0, index) {
+  const {
+    label,
+    onClick,
+    icon: Icon
+  } = t0;
+  return /*#__PURE__*/jsxs(ActionList.Item, {
+    onSelect: onClick,
+    children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
+      children: /*#__PURE__*/jsx(Icon, {})
+    }), label]
+  }, index);
+}
+_temp0.displayName = "_temp0";
+function _temp1(event) {
   if (["Backspace", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
     event.stopPropagation();
   }

package/dist/TreeView/TreeView.module.css.js

@@ -1,5 +1,5 @@
-import './TreeView-cd08cabc.css';
+import './TreeView-bdf34914.css';
 
-var classes = {"TreeViewRootUlStyles":"prc-TreeView-TreeViewRootUlStyles-eZtxW","TreeViewItem":"prc-TreeView-TreeViewItem-ShJr0","TreeViewItemContainer":"prc-TreeView-TreeViewItemContainer--2Rkn","TreeViewItemSkeleton":"prc-TreeView-TreeViewItemSkeleton-fqk59","TreeViewItemToggle":"prc-TreeView-TreeViewItemToggle-gWUdE","TreeViewItemToggleHover":"prc-TreeView-TreeViewItemToggleHover-nEgP-","TreeViewItemToggleEnd":"prc-TreeView-TreeViewItemToggleEnd-t-AEB","TreeViewItemContent":"prc-TreeView-TreeViewItemContent-f0r0b","TreeViewItemContentText":"prc-TreeView-TreeViewItemContentText-smZM-","TreeViewItemVisual":"prc-TreeView-TreeViewItemVisual-dRlGq","TreeViewItemLeadingAction":"prc-TreeView-TreeViewItemLeadingAction-VXx8I","TreeViewItemLevelLine":"prc-TreeView-TreeViewItemLevelLine-KPSSL","TreeViewDirectoryIcon":"prc-TreeView-TreeViewDirectoryIcon-PHbeP","TreeViewVisuallyHidden":"prc-TreeView-TreeViewVisuallyHidden-4-mPv","TreeViewSkeletonItemContainerStyle":"prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0","TreeItemSkeletonTextStyles":"prc-TreeView-TreeItemSkeletonTextStyles-wnBY9"};
+var classes = {"TreeViewRootUlStyles":"prc-TreeView-TreeViewRootUlStyles-eZtxW","TreeViewItem":"prc-TreeView-TreeViewItem-ShJr0","TreeViewItemContainer":"prc-TreeView-TreeViewItemContainer--2Rkn","TreeViewItemSkeleton":"prc-TreeView-TreeViewItemSkeleton-fqk59","TreeViewItemToggle":"prc-TreeView-TreeViewItemToggle-gWUdE","TreeViewItemToggleHover":"prc-TreeView-TreeViewItemToggleHover-nEgP-","TreeViewItemToggleEnd":"prc-TreeView-TreeViewItemToggleEnd-t-AEB","TreeViewItemContent":"prc-TreeView-TreeViewItemContent-f0r0b","TreeViewItemContentText":"prc-TreeView-TreeViewItemContentText-smZM-","TreeViewItemVisual":"prc-TreeView-TreeViewItemVisual-dRlGq","TreeViewItemLeadingAction":"prc-TreeView-TreeViewItemLeadingAction-VXx8I","TreeViewItemTrailingAction":"prc-TreeView-TreeViewItemTrailingAction-EZETP","TreeViewItemTrailingActionButton":"prc-TreeView-TreeViewItemTrailingActionButton-u87Ku","TreeViewItemLevelLine":"prc-TreeView-TreeViewItemLevelLine-KPSSL","TreeViewDirectoryIcon":"prc-TreeView-TreeViewDirectoryIcon-PHbeP","TreeViewVisuallyHidden":"prc-TreeView-TreeViewVisuallyHidden-4-mPv","TreeViewSkeletonItemContainerStyle":"prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0","TreeItemSkeletonTextStyles":"prc-TreeView-TreeItemSkeletonTextStyles-wnBY9"};
 
 export { classes as default };

package/dist/Truncate/Truncate.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
 import type { MaxWidthProps } from 'styled-system';
-import type { SxProp } from '../sx';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
 type TruncateProps = React.HTMLAttributes<HTMLElement> & {
     title: string;
     inline?: boolean;
     expandable?: boolean;
-} & MaxWidthProps & SxProp;
+} & MaxWidthProps;
 declare const Truncate: PolymorphicForwardRefComponent<"div", TruncateProps>;
 export type { TruncateProps };
 export default Truncate;

package/dist/Truncate/Truncate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Truncate.d.ts","sourceRoot":"","sources":["../../src/Truncate/Truncate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,eAAe,CAAA;AAChD,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAI/F,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;IACvD,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,GAAG,aAAa,GACf,MAAM,CAAA;AAER,QAAA,MAAM,QAAQ,EAyBR,8BAA8B,CAAC,KAAK,EAAE,aAAa,CAAC,CAAA;AAM1D,YAAY,EAAC,aAAa,EAAC,CAAA;AAC3B,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"Truncate.d.ts","sourceRoot":"","sources":["../../src/Truncate/Truncate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,eAAe,CAAA;AAChD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAG/F,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;IACvD,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,GAAG,aAAa,CAAA;AAEjB,QAAA,MAAM,QAAQ,EAuBR,8BAA8B,CAAC,KAAK,EAAE,aAAa,CAAC,CAAA;AAM1D,YAAY,EAAC,aAAa,EAAC,CAAA;AAC3B,eAAe,QAAQ,CAAA"}

package/dist/Truncate/Truncate.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { clsx } from 'clsx';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import classes from './Truncate.module.css.js';
 import { jsx } from 'react/jsx-runtime';
 
 const Truncate = /*#__PURE__*/React.forwardRef(function Truncate({
-  as,
+  as: Component = 'div',
   children,
   className,
   title,
@@ -13,13 +12,11 @@ const Truncate = /*#__PURE__*/React.forwardRef(function Truncate({
   expandable,
   maxWidth = 125,
   style,
-  sx,
   ...rest
 }, ref) {
-  return /*#__PURE__*/jsx(BoxWithFallback, {
+  return /*#__PURE__*/jsx(Component, {
     ...rest,
     ref: ref,
-    as: as,
     className: clsx(className, classes.Truncate),
     "data-expandable": expandable,
     "data-inline": inline,
@@ -28,7 +25,6 @@ const Truncate = /*#__PURE__*/React.forwardRef(function Truncate({
       ...style,
       [`--truncate-max-width`]: typeof maxWidth === 'number' ? `${maxWidth}px` : typeof maxWidth === 'string' ? maxWidth : undefined
     },
-    sx: sx,
     children: children
   });
 });

package/dist/UnderlineNav/UnderlineNav-78db938f.css

@@ -0,0 +1,2 @@
+.prc-UnderlineNav-MenuItemContent-k4WNL{align-items:center;display:flex;justify-content:space-between}
+/*# sourceMappingURL=UnderlineNav-78db938f.css.map */

package/dist/UnderlineNav/UnderlineNav-78db938f.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/UnderlineNav/UnderlineNav.module.css"],"names":[],"mappings":"AAAA,wCAEE,kBAAmB,CADnB,YAAa,CAEb,6BACF","file":"UnderlineNav-78db938f.css","sourcesContent":[".MenuItemContent {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n"]}

package/dist/UnderlineNav/UnderlineNav.d.ts

@@ -1,11 +1,9 @@
 import React from 'react';
-import type { SxProp } from '../sx';
 export type UnderlineNavProps = {
     children: React.ReactNode;
     'aria-label'?: React.AriaAttributes['aria-label'];
     as?: React.ElementType;
     className?: string;
-    sx?: SxProp['sx'];
     /**
      * loading state for all counters. It displays loading animation for individual counters (UnderlineNav.Item) until all are resolved. It is needed to prevent multiple layout shift.
      */
@@ -18,7 +16,6 @@ export type UnderlineNavProps = {
     variant?: 'inset' | 'flush';
 };
 export declare const MORE_BTN_WIDTH = 86;
-export declare const NavigationList: import("styled-components").StyledComponent<"ul", any, SxProp, never>;
 export declare const MoreMenuListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const getValidChildren: (children: React.ReactNode) => React.ReactElement[];
 export declare const UnderlineNav: React.ForwardRefExoticComponent<UnderlineNavProps & React.RefAttributes<unknown>>;

package/dist/UnderlineNav/UnderlineNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlineNav.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6D,MAAM,OAAO,CAAA;AAEjF,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAqBjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAA;IACjB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAC5B,CAAA;AAGD,eAAO,MAAM,cAAc,KAAK,CAAA;AAKhC,eAAO,MAAM,cAAc,uEAE1B,CAAA;AAED,eAAO,MAAM,gBAAgB,mEAI5B,CAAA;AAkED,eAAO,MAAM,gBAAgB,GAAI,UAAU,KAAK,CAAC,SAAS,KACgC,KAAK,CAAC,YAAY,EAC3G,CAAA;AAkBD,eAAO,MAAM,YAAY,mFAyRxB,CAAA"}
+{"version":3,"file":"UnderlineNav.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6D,MAAM,OAAO,CAAA;AAoBjF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAC5B,CAAA;AAGD,eAAO,MAAM,cAAc,KAAK,CAAA;AAIhC,eAAO,MAAM,gBAAgB,mEAI5B,CAAA;AAkED,eAAO,MAAM,gBAAgB,GAAI,UAAU,KAAK,CAAC,SAAS,KACgC,KAAK,CAAC,YAAY,EAC3G,CAAA;AAkBD,eAAO,MAAM,YAAY,mFAiRxB,CAAA"}

package/dist/UnderlineNav/UnderlineNav.js

@@ -1,5 +1,4 @@
 import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
-import sx from '../sx.js';
 import { UnderlineNavContext } from './UnderlineNavContext.js';
 import { useResizeObserver } from '../hooks/useResizeObserver.js';
 import { useTheme } from '../ThemeProvider.js';
@@ -12,10 +11,9 @@ import { useOnEscapePress } from '../hooks/useOnEscapePress.js';
 import { useOnOutsideClick } from '../hooks/useOnOutsideClick.js';
 import { useId } from '../hooks/useId.js';
 import { ActionList } from '../ActionList/index.js';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { invariant } from '../utils/invariant.js';
+import classes from './UnderlineNav.module.css.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import Box from '../Box/Box.js';
 import { ButtonComponent } from '../Button/Button.js';
 import CounterLabel from '../CounterLabel/CounterLabel.js';
 
@@ -24,15 +22,9 @@ import CounterLabel from '../CounterLabel/CounterLabel.js';
 const MORE_BTN_WIDTH = 86;
 // The height is needed to make sure we don't have a layout shift when the more button is the only item in the nav.
 const MORE_BTN_HEIGHT = 45;
-
-// Needed this because passing a ref using HTMLULListElement to `Box` causes a type error
-styled.ul.withConfig({
-  displayName: "UnderlineNav__NavigationList",
-  componentId: "sc-1jfr31k-0"
-})(["", ";"], sx);
 const MoreMenuListItem = styled.li.withConfig({
   displayName: "UnderlineNav__MoreMenuListItem",
-  componentId: "sc-1jfr31k-1"
+  componentId: "sc-1jfr31k-0"
 })(["display:flex;align-items:center;height:", "px;"], MORE_BTN_HEIGHT);
 const overflowEffect = (navWidth, moreMenuWidth, childArray, childWidthArray, noIconChildWidthArray, updateListAndMenu) => {
   let iconsVisible = true;
@@ -112,7 +104,6 @@ const calculatePossibleItems = (childWidthArray, navWidth, moreMenuWidth = 0) =>
 const UnderlineNav = /*#__PURE__*/forwardRef(({
   as = 'nav',
   'aria-label': ariaLabel,
-  sx: sxProp = defaultSxProp,
   loadingCounters = false,
   variant = 'inset',
   className,
@@ -271,15 +262,14 @@ const UnderlineNav = /*#__PURE__*/forwardRef(({
       "aria-label": ariaLabel,
       className: className,
       ref: navRef,
-      sx: sxProp,
       "data-variant": variant,
       children: /*#__PURE__*/jsxs(UnderlineItemList, {
         ref: listRef,
         role: "list",
         children: [listItems, menuItems.length > 0 && /*#__PURE__*/jsxs(MoreMenuListItem, {
           ref: moreMenuRef,
-          children: [!onlyMenuVisible && /*#__PURE__*/jsx(Box, {
-            sx: getDividerStyle(theme)
+          children: [!onlyMenuVisible && /*#__PURE__*/jsx("div", {
+            style: getDividerStyle(theme)
           }), /*#__PURE__*/jsx(ButtonComponent, {
             ref: moreMenuBtnRef,
             sx: moreBtnStyles,
@@ -287,8 +277,7 @@ const UnderlineNav = /*#__PURE__*/forwardRef(({
             "aria-expanded": isWidgetOpen,
             onClick: onAnchorClick,
             trailingAction: TriangleDownIcon,
-            children: /*#__PURE__*/jsx(Box, {
-              as: "span",
+            children: /*#__PURE__*/jsx("span", {
               children: onlyMenuVisible ? /*#__PURE__*/jsxs(Fragment, {
                 children: [/*#__PURE__*/jsxs(VisuallyHidden, {
                   as: "span",
@@ -336,15 +325,9 @@ const UnderlineNav = /*#__PURE__*/forwardRef(({
                   typeof onSelect === 'function' && onSelect(event);
                 },
                 ...menuItemProps,
-                children: /*#__PURE__*/jsxs(Box, {
-                  as: "span",
-                  sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between'
-                  },
-                  children: [menuItemChildren, loadingCounters ? /*#__PURE__*/jsx(LoadingCounter, {}) : counter !== undefined && /*#__PURE__*/jsx(Box, {
-                    as: "span",
+                children: /*#__PURE__*/jsxs("span", {
+                  className: classes.MenuItemContent,
+                  children: [menuItemChildren, loadingCounters ? /*#__PURE__*/jsx(LoadingCounter, {}) : counter !== undefined && /*#__PURE__*/jsx("span", {
                     "data-component": "counter",
                     children: /*#__PURE__*/jsx(CounterLabel, {
                       children: counter

package/dist/UnderlineNav/UnderlineNav.module.css.js

@@ -0,0 +1,5 @@
+import './UnderlineNav-78db938f.css';
+
+var classes = {"MenuItemContent":"prc-UnderlineNav-MenuItemContent-k4WNL"};
+
+export { classes as default };

package/dist/UnderlineNav/UnderlineNavItem-b65e8fd3.css

@@ -0,0 +1,2 @@
+.prc-UnderlineNav-UnderlineNavItem--xDk1{align-items:center;display:flex;flex-direction:column}
+/*# sourceMappingURL=UnderlineNavItem-b65e8fd3.css.map */

package/dist/UnderlineNav/UnderlineNavItem-b65e8fd3.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/UnderlineNav/UnderlineNavItem.module.css"],"names":[],"mappings":"AAAA,yCAGE,kBAAmB,CAFnB,YAAa,CACb,qBAEF","file":"UnderlineNavItem-b65e8fd3.css","sourcesContent":[".UnderlineNavItem {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n"]}

package/dist/UnderlineNav/UnderlineNavItem.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { SxProp } from '../sx';
 import type { IconProps } from '@primer/octicons-react';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
 export type LinkProps = {
@@ -38,6 +37,6 @@ export type UnderlineNavItemProps = {
      * Counter
      */
     counter?: number | string;
-} & SxProp & LinkProps;
+} & LinkProps;
 export declare const UnderlineNavItem: PolymorphicForwardRefComponent<"a", UnderlineNavItemProps>;
 //# sourceMappingURL=UnderlineNavItem.d.ts.map

package/dist/UnderlineNav/UnderlineNavItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlineNavItem.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNavItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAE3D,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAO/F,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,CAAC,CAAA;CACjF,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxG;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IAC5F;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAA;IAC9D;;QAEI;IACJ,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,GAAG,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC1B,GAAG,MAAM,GACR,SAAS,CAAA;AAEX,eAAO,MAAM,gBAAgB,EAiFxB,8BAA8B,CAAC,GAAG,EAAE,qBAAqB,CAAC,CAAA"}
+{"version":3,"file":"UnderlineNavItem.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNavItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAC3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAO/F,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,CAAC,CAAA;CACjF,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxG;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IAC5F;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAA;IAC9D;;QAEI;IACJ,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,GAAG,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC1B,GAAG,SAAS,CAAA;AAEb,eAAO,MAAM,gBAAgB,EAsExB,8BAA8B,CAAC,GAAG,EAAE,qBAAqB,CAAC,CAAA"}