@primer/react 38.0.0-rc.5 → 38.0.0-rc.7

package/dist/Truncate/Truncate.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import type { MaxWidthProps } from 'styled-system';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
 type TruncateProps = React.HTMLAttributes<HTMLElement> & {
     title: string;
     inline?: boolean;
     expandable?: boolean;
-} & MaxWidthProps;
+    maxWidth?: number | string;
+};
 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,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"}
+{"version":3,"file":"Truncate.d.ts","sourceRoot":"","sources":["../../src/Truncate/Truncate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,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;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC3B,CAAA;AAED,QAAA,MAAM,QAAQ,EAuBR,8BAA8B,CAAC,KAAK,EAAE,aAAa,CAAC,CAAA;AAM1D,YAAY,EAAC,aAAa,EAAC,CAAA;AAC3B,eAAe,QAAQ,CAAA"}

package/dist/UnderlineNav/UnderlineNav-4344d9b0.css

@@ -0,0 +1,2 @@
+.prc-UnderlineNav-MenuItemContent-k4WNL{align-items:center;display:flex;justify-content:space-between}.prc-UnderlineNav-MoreButton-smema{background:transparent;border:0;box-shadow:none;font-weight:var(--base-text-weight-normal,400);margin:0;padding:var(--base-size-4,.25rem) var(--base-size-8,.5rem)}.prc-UnderlineNav-MoreButton-smema>[data-component=trailingVisual]{margin-left:0}
+/*# sourceMappingURL=UnderlineNav-4344d9b0.css.map */

package/dist/UnderlineNav/UnderlineNav-4344d9b0.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/UnderlineNav/UnderlineNav.module.css"],"names":[],"mappings":"AAAA,wCAEE,kBAAmB,CADnB,YAAa,CAEb,6BACF,CAGA,mCAGE,sBAAuB,CADvB,QAAS,CAGT,eAAgB,CADhB,8CAA2C,CAH3C,QAAS,CAQT,0DAKF,CAHE,mEACE,aACF","file":"UnderlineNav-4344d9b0.css","sourcesContent":[".MenuItemContent {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n/* More button styles migrated from styles.ts (was moreBtnStyles) */\n.MoreButton {\n  margin: 0; /* reset Safari extra margin */\n  border: 0;\n  background: transparent;\n  font-weight: var(--base-text-weight-normal);\n  box-shadow: none;\n  padding-top: var(--base-size-4);\n  padding-bottom: var(--base-size-4);\n  padding-left: var(--base-size-8);\n  padding-right: var(--base-size-8);\n\n  & > [data-component='trailingVisual'] {\n    margin-left: 0;\n  }\n}\n"]}

package/dist/UnderlineNav/UnderlineNav.d.ts

@@ -16,7 +16,6 @@ export type UnderlineNavProps = {
     variant?: 'inset' | 'flush';
 };
 export declare const MORE_BTN_WIDTH = 86;
-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>>;
 //# sourceMappingURL=UnderlineNav.d.ts.map

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;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"}
+{"version":3,"file":"UnderlineNav.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6D,MAAM,OAAO,CAAA;AAmBjF,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;AAoEhC,eAAO,MAAM,gBAAgB,GAAI,UAAU,KAAK,CAAC,SAAS,KACgC,KAAK,CAAC,YAAY,EAC3G,CAAA;AAgCD,eAAO,MAAM,YAAY,mFA8RxB,CAAA"}

package/dist/UnderlineNav/UnderlineNav.js

@@ -1,11 +1,9 @@
 import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
 import { UnderlineNavContext } from './UnderlineNavContext.js';
 import { useResizeObserver } from '../hooks/useResizeObserver.js';
-import { useTheme } from '../ThemeProvider.js';
 import VisuallyHidden from '../_VisuallyHidden.js';
-import { getDividerStyle, moreBtnStyles, baseMenuStyles, menuStyles, menuItemStyles, baseMenuMinWidth } from './styles.js';
+import { dividerStyles, baseMenuMinWidth, menuItemStyles } from './styles.js';
 import { UnderlineWrapper, UnderlineItemList, LoadingCounter, GAP } from '../internal/components/UnderlineTabbedInterface.js';
-import styled from 'styled-components';
 import { TriangleDownIcon } from '@primer/octicons-react';
 import { useOnEscapePress } from '../hooks/useOnEscapePress.js';
 import { useOnOutsideClick } from '../hooks/useOnOutsideClick.js';
@@ -13,6 +11,7 @@ import { useId } from '../hooks/useId.js';
 import { ActionList } from '../ActionList/index.js';
 import { invariant } from '../utils/invariant.js';
 import classes from './UnderlineNav.module.css.js';
+import { getAnchoredPosition } from '@primer/behaviors';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { ButtonComponent } from '../Button/Button.js';
 import CounterLabel from '../CounterLabel/CounterLabel.js';
@@ -22,10 +21,6 @@ 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;
-const MoreMenuListItem = styled.li.withConfig({
-  displayName: "UnderlineNav__MoreMenuListItem",
-  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;
   if (childWidthArray.length === 0) {
@@ -101,6 +96,20 @@ const calculatePossibleItems = (childWidthArray, navWidth, moreMenuWidth = 0) =>
   }
   return breakpoint;
 };
+
+// Inline styles converted from baseMenuStyles for use as CSSProperties
+const baseMenuInlineStyles = {
+  position: 'absolute',
+  zIndex: 1,
+  top: '90%',
+  boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
+  borderRadius: 12,
+  background: 'var(--overlay-bgColor)',
+  listStyle: 'none',
+  minWidth: `${baseMenuMinWidth}px`,
+  maxWidth: '640px',
+  right: 0
+};
 const UnderlineNav = /*#__PURE__*/forwardRef(({
   as = 'nav',
   'aria-label': ariaLabel,
@@ -117,9 +126,6 @@ const UnderlineNav = /*#__PURE__*/forwardRef(({
   const moreMenuBtnRef = useRef(null);
   const containerRef = React.useRef(null);
   const disclosureWidgetId = useId();
-  const {
-    theme
-  } = useTheme();
   const [isWidgetOpen, setIsWidgetOpen] = useState(false);
   const [iconsVisible, setIconsVisible] = useState(true);
   const [childWidthArray, setChildWidthArray] = useState([]);
@@ -246,9 +252,26 @@ const UnderlineNav = /*#__PURE__*/forwardRef(({
     const moreMenuWidth = (_moreMenuRef$current$ = (_moreMenuRef$current = moreMenuRef.current) === null || _moreMenuRef$current === void 0 ? void 0 : _moreMenuRef$current.getBoundingClientRect().width) !== null && _moreMenuRef$current$ !== void 0 ? _moreMenuRef$current$ : 0;
     navWidth !== 0 && overflowEffect(navWidth, moreMenuWidth, validChildren, childWidthArray, noIconChildWidthArray, updateListAndMenu);
   }, navRef);
+
+  // Compute menuInlineStyles if needed
+  let menuInlineStyles = {
+    ...baseMenuInlineStyles
+  };
+  if (containerRef.current && listRef.current) {
+    const {
+      left
+    } = getAnchoredPosition(containerRef.current, listRef.current, {
+      align: 'start',
+      side: 'outside-bottom'
+    });
+    menuInlineStyles = {
+      ...baseMenuInlineStyles,
+      right: undefined,
+      left
+    };
+  }
   return /*#__PURE__*/jsxs(UnderlineNavContext.Provider, {
     value: {
-      theme,
       setChildrenWidth,
       setNoIconChildrenWidth,
       loadingCounters,
@@ -266,13 +289,18 @@ const UnderlineNav = /*#__PURE__*/forwardRef(({
       children: /*#__PURE__*/jsxs(UnderlineItemList, {
         ref: listRef,
         role: "list",
-        children: [listItems, menuItems.length > 0 && /*#__PURE__*/jsxs(MoreMenuListItem, {
+        children: [listItems, menuItems.length > 0 && /*#__PURE__*/jsxs("li", {
           ref: moreMenuRef,
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            height: `${MORE_BTN_HEIGHT}px`
+          },
           children: [!onlyMenuVisible && /*#__PURE__*/jsx("div", {
-            style: getDividerStyle(theme)
+            style: dividerStyles
           }), /*#__PURE__*/jsx(ButtonComponent, {
             ref: moreMenuBtnRef,
-            sx: moreBtnStyles,
+            className: classes.MoreButton,
             "aria-controls": disclosureWidgetId,
             "aria-expanded": isWidgetOpen,
             onClick: onAnchorClick,
@@ -294,8 +322,8 @@ const UnderlineNav = /*#__PURE__*/forwardRef(({
             selectionVariant: "single",
             ref: containerRef,
             id: disclosureWidgetId,
-            sx: (_listRef$current2 = listRef.current) !== null && _listRef$current2 !== void 0 && _listRef$current2.clientWidth && listRef.current.clientWidth >= baseMenuMinWidth ? baseMenuStyles : menuStyles(containerRef.current, listRef.current),
             style: {
+              ...((_listRef$current2 = listRef.current) !== null && _listRef$current2 !== void 0 && _listRef$current2.clientWidth && listRef.current.clientWidth >= baseMenuMinWidth ? baseMenuInlineStyles : menuInlineStyles),
               display: isWidgetOpen ? 'block' : 'none'
             },
             children: menuItems.map((menuItem, index) => {
@@ -315,7 +343,7 @@ const UnderlineNav = /*#__PURE__*/forwardRef(({
                 event, updateListAndMenu);
               }
               return /*#__PURE__*/jsx(ActionList.LinkItem, {
-                sx: menuItemStyles,
+                style: menuItemStyles,
                 onClick: event => {
                   // When there are no items in the list, do not run the swap function as we want to keep everything in the menu.
                   !onlyMenuVisible && swapMenuItemWithListItem(menuItem, index, event, updateListAndMenu);
@@ -344,4 +372,4 @@ const UnderlineNav = /*#__PURE__*/forwardRef(({
 });
 UnderlineNav.displayName = 'UnderlineNav';
 
-export { MORE_BTN_WIDTH, MoreMenuListItem, UnderlineNav, getValidChildren };
+export { MORE_BTN_WIDTH, UnderlineNav, getValidChildren };

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

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

package/dist/UnderlineNav/UnderlineNavContext.d.ts

@@ -1,7 +1,5 @@
 import type React from 'react';
-import type { Theme } from '../ThemeProvider';
 export declare const UnderlineNavContext: React.Context<{
-    theme: Theme | undefined;
     setChildrenWidth: React.Dispatch<{
         text: string;
         width: number;

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

@@ -1 +1 @@
-{"version":3,"file":"UnderlineNavContext.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNavContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,kBAAkB,CAAA;AAE3C,eAAO,MAAM,mBAAmB;WACvB,KAAK,GAAG,SAAS;sBACN,KAAK,CAAC,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC;4BACvC,KAAK,CAAC,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC;qBACpD,OAAO;kBACV,OAAO;EAOrB,CAAA"}
+{"version":3,"file":"UnderlineNavContext.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNavContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,eAAO,MAAM,mBAAmB;sBACZ,KAAK,CAAC,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC;4BACvC,KAAK,CAAC,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC;qBACpD,OAAO;kBACV,OAAO;EAMrB,CAAA"}

package/dist/UnderlineNav/UnderlineNavContext.js

@@ -1,7 +1,6 @@
 import { createContext } from 'react';
 
 const UnderlineNavContext = /*#__PURE__*/createContext({
-  theme: {},
   setChildrenWidth: () => null,
   setNoIconChildrenWidth: () => null,
   loadingCounters: false,

package/dist/UnderlineNav/styles.d.ts

@@ -1,6 +1,4 @@
-import type { Theme } from '../ThemeProvider';
-import type { BetterSystemStyleObject } from '../sx';
-export declare const getDividerStyle: (theme?: Theme) => {
+export declare const dividerStyles: {
     display: string;
     borderLeft: string;
     width: string;
@@ -8,18 +6,6 @@ export declare const getDividerStyle: (theme?: Theme) => {
     marginRight: string;
     height: string;
 };
-export declare const moreBtnStyles: {
-    margin: number;
-    border: number;
-    background: string;
-    fontWeight: string;
-    boxShadow: string;
-    paddingY: number;
-    paddingX: number;
-    '& > span[data-component="trailingVisual"]': {
-        marginLeft: number;
-    };
-};
 export declare const menuItemStyles: {
     '& > span': {
         display: string;
@@ -27,12 +13,4 @@ export declare const menuItemStyles: {
     textDecoration: string;
 };
 export declare const baseMenuMinWidth = 192;
-export declare const baseMenuStyles: BetterSystemStyleObject;
-/**
- *
- * @param containerRef The Menu List Container Reference.
- * @param listRef The Underline Nav Container Reference.
- * @description This calculates the position of the menu
- */
-export declare const menuStyles: (containerRef: Element | null, listRef: Element | null) => BetterSystemStyleObject;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,kBAAkB,CAAA;AAC3C,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,OAAO,CAAA;AAGlD,eAAO,MAAM,eAAe,GAAI,QAAQ,KAAK;;;;;;;CAO3C,CAAA;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;CAYzB,CAAA;AAED,eAAO,MAAM,cAAc;;;;;CAO1B,CAAA;AAED,eAAO,MAAM,gBAAgB,MAAM,CAAA;AACnC,eAAO,MAAM,cAAc,EAAE,uBAY5B,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GAAI,cAAc,OAAO,GAAG,IAAI,EAAE,SAAS,OAAO,GAAG,IAAI,KAAG,uBASlF,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;CAOzB,CAAA;AAED,eAAO,MAAM,cAAc;;;;;CAO1B,CAAA;AAED,eAAO,MAAM,gBAAgB,MAAM,CAAA"}

package/dist/UnderlineNav/styles.js

@@ -1,25 +1,10 @@
-import { getAnchoredPosition } from '@primer/behaviors';
-
-const getDividerStyle = theme => ({
+const dividerStyles = {
   display: 'inline-block',
   borderLeft: '1px solid',
   width: '1px',
-  borderLeftColor: `${theme === null || theme === void 0 ? void 0 : theme.colors.border.muted}`,
-  marginRight: '4px',
+  borderLeftColor: 'var(--borderColor-muted)',
+  marginRight: 'var(--base-size-4)',
   height: '24px' // The height of the divider - reference from Figma
-});
-const moreBtnStyles = {
-  //set margin 0 here because safari puts extra margin around the button, rest is to reset style to make it look like a list element
-  margin: 0,
-  border: 0,
-  background: 'transparent',
-  fontWeight: 'normal',
-  boxShadow: 'none',
-  paddingY: 1,
-  paddingX: 2,
-  '& > span[data-component="trailingVisual"]': {
-    marginLeft: 0
-  }
 };
 const menuItemStyles = {
   // This is needed to hide the selected check icon on the menu item. https://github.com/primer/react/tree/main/packages/react/src/ActionList/Selection.tsx#L32
@@ -30,45 +15,5 @@ const menuItemStyles = {
   textDecoration: 'none'
 };
 const baseMenuMinWidth = 192;
-const baseMenuStyles = {
-  position: 'absolute',
-  zIndex: 1,
-  top: '90%',
-  boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
-  borderRadius: '12px',
-  backgroundColor: 'canvas.overlay',
-  listStyle: 'none',
-  // Values are from ActionMenu
-  minWidth: `${baseMenuMinWidth}px`,
-  maxWidth: '640px',
-  right: '0'
-};
-
-/**
- *
- * @param containerRef The Menu List Container Reference.
- * @param listRef The Underline Nav Container Reference.
- * @description This calculates the position of the menu
- */
-const menuStyles = (containerRef, listRef) => {
-  if (containerRef && listRef) {
-    const {
-      left
-    } = getAnchoredPosition(containerRef, listRef, {
-      align: 'start',
-      side: 'outside-bottom'
-    });
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const {
-      right,
-      ...rest
-    } = baseMenuStyles;
-    return {
-      ...rest,
-      left
-    };
-  }
-  return baseMenuStyles;
-};
 
-export { baseMenuMinWidth, baseMenuStyles, getDividerStyle, menuItemStyles, menuStyles, moreBtnStyles };
+export { baseMenuMinWidth, dividerStyles, menuItemStyles };

package/dist/constants.js

@@ -11,7 +11,7 @@ const get = key => themeGet(key, getKey(theme, key));
 
 // Common props
 
-const COMMON = compose(styledSystem.space, styledSystem.color, styledSystem.display);
+compose(styledSystem.space, styledSystem.color, styledSystem.display);
 // Typography props
 
 const whiteSpace = system({
@@ -20,9 +20,9 @@ const whiteSpace = system({
     // cssProperty: 'whiteSpace',
   }
 });
-const TYPOGRAPHY = compose(styledSystem.typography, whiteSpace);
+compose(styledSystem.typography, whiteSpace);
 // Border props
 
 compose(styledSystem.border, styledSystem.shadow);
 
-export { COMMON, TYPOGRAPHY, get };
+export { get };

package/dist/deprecated/ActionList/Divider-7c6b656a.css

@@ -0,0 +1,2 @@
+.prc-ActionList-Divider-e9gCq{background:var(--borderColor-muted,var(--color-border-muted));height:var(--borderWidth-thin,.0625rem);margin-bottom:var(--base-size-8,.5rem);margin-top:calc(var(--base-size-8,.5rem) - 1px)}
+/*# sourceMappingURL=Divider-7c6b656a.css.map */

package/dist/deprecated/ActionList/Divider-7c6b656a.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/deprecated/ActionList/Divider.module.css"],"names":[],"mappings":"AAAA,8BAGE,6DAAoC,CAFpC,uCAA+B,CAK/B,sCAAiC,CADjC,+CAEF","file":"Divider-7c6b656a.css","sourcesContent":[".Divider {\n  height: var(--borderWidth-thin);\n  /* stylelint-disable-next-line primer/colors */\n  background: var(--borderColor-muted);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: calc(var(--base-size-8) - 1px);\n  margin-bottom: var(--base-size-8);\n}\n"]}

package/dist/deprecated/ActionList/Divider.d.ts

@@ -1,6 +1,5 @@
-export declare const StyledDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
 /**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
+ * Visually separates `Items or `Groups in an `ActionList`.
  */
 export declare function Divider(): JSX.Element;
 export declare namespace Divider {

package/dist/deprecated/ActionList/Divider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/deprecated/ActionList/Divider.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,oEAKzB,CAAA;AAED;;GAEG;AACH,wBAAgB,OAAO,IAAI,GAAG,CAAC,OAAO,CAErC;yBAFe,OAAO"}
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/deprecated/ActionList/Divider.tsx"],"names":[],"mappings":"AAEA;;GAEG;AACH,wBAAgB,OAAO,IAAI,GAAG,CAAC,OAAO,CAErC;yBAFe,OAAO"}

package/dist/deprecated/ActionList/Divider.js

@@ -1,21 +1,15 @@
 import { c } from 'react-compiler-runtime';
-import styled from 'styled-components';
-import { get } from '../../constants.js';
+import classes from './Divider.module.css.js';
 import { jsx } from 'react/jsx-runtime';
 
-const StyledDivider = styled.div.withConfig({
-  displayName: "Divider__StyledDivider",
-  componentId: "sc-1s7tlfq-0"
-})(["height:1px;background:", ";margin-top:calc(", " - 1px);margin-bottom:", ";"], get('colors.border.muted'), get('space.2'), get('space.2'));
-
-/**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
- */
 function Divider() {
   const $ = c(1);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = /*#__PURE__*/jsx(StyledDivider, {});
+    t0 = /*#__PURE__*/jsx("div", {
+      "data-component": "ActionList.Divider",
+      className: classes.Divider
+    });
     $[0] = t0;
   } else {
     t0 = $[0];
@@ -31,4 +25,4 @@ function Divider() {
  */
 Divider.renderItem = Divider;
 
-export { Divider, StyledDivider };
+export { Divider };

package/dist/deprecated/ActionList/Divider.module.css.js

@@ -0,0 +1,5 @@
+import './Divider-7c6b656a.css';
+
+var classes = {"Divider":"prc-ActionList-Divider-e9gCq"};
+
+export { classes as default };

package/dist/deprecated/ActionList/Group.d.ts

@@ -1,10 +1,9 @@
 import type React from 'react';
-import type { SxProp } from '../../sx';
 import type { HeaderProps } from './Header';
 /**
  * Contract for props passed to the `Group` component.
  */
-export interface GroupProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
+export interface GroupProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * Props for a `Header` to render in the `Group`.
      */

package/dist/deprecated/ActionList/Group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/deprecated/ActionList/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,UAAU,CAAA;AAEpC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,UAAU,CAAA;AAGzC;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM;IAC/E;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAA;IAErB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAMD;;GAEG;AACH,wBAAgB,KAAK,CAAC,EAAC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAC,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAOxE"}
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/deprecated/ActionList/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,UAAU,CAAA;AAGzC;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACvE;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAA;IAErB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,EAAC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAC,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAOxE"}

package/dist/deprecated/ActionList/Group.js

@@ -1,14 +1,7 @@
 import { c } from 'react-compiler-runtime';
-import styled from 'styled-components';
-import sx from '../../sx.js';
 import { Header } from './Header.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-const StyledGroup = styled.div.withConfig({
-  displayName: "Group__StyledGroup",
-  componentId: "sc-1s2aw76-0"
-})(["", ""], sx);
-
 /**
  * Collects related `Items` in an `ActionList`.
  */
@@ -44,7 +37,7 @@ function Group(t0) {
   }
   let t2;
   if ($[6] !== items || $[7] !== props || $[8] !== t1) {
-    t2 = /*#__PURE__*/jsxs(StyledGroup, {
+    t2 = /*#__PURE__*/jsxs("div", {
       ...props,
       children: [t1, items]
     });

package/dist/deprecated/ActionList/Header-493b1d76.css

@@ -0,0 +1,2 @@
+.prc-ActionList-Header-tbTgu{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--text-title-weight-large,600);padding:6px var(--base-size-16,1rem)}.prc-ActionList-Header-tbTgu:where([data-filled]){background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:var(--borderWidth-thin,.0625rem) solid var(--bgColor-neutral-muted,var(--color-neutral-subtle));border-top:var(--borderWidth-thin,.0625rem) solid var(--bgColor-neutral-muted,var(--color-neutral-subtle));margin:var(--base-size-8,.5rem) 0}.prc-ActionList-Header-tbTgu:where([data-filled]):first-child{margin-top:0}
+/*# sourceMappingURL=Header-493b1d76.css.map */

package/dist/deprecated/ActionList/Header-493b1d76.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/deprecated/ActionList/Header.module.css"],"names":[],"mappings":"AAAA,6BAUE,gDAA2B,CAF3B,4CAAsC,CACtC,8CAA2C,CAF3C,oCAiBF,CAZE,kDACE,0DAAgC,CAKhC,6GAAyE,CAFzE,0GAAsE,CAFtE,iCASF,CAHE,8DACE,YACF","file":"Header-493b1d76.css","sourcesContent":[".Header {\n  /* 6px vertical padding + 20px line height = 32px total height\n   *\n   * TODO: When rem-based spacing on a 4px scale lands, replace\n   * hardcoded '6px' with 'calc((${get('space.s32')} - ${get('space.20')}) / 2)'.\n   */\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 6px var(--base-size-16);\n  font-size: var(--text-body-size-small);\n  font-weight: var(--text-title-weight-large);\n  color: var(--fgColor-muted);\n\n  &:where([data-filled]) {\n    background: var(--bgColor-muted);\n    margin: var(--base-size-8) 0;\n    /* stylelint-disable-next-line primer/colors */\n    border-top: var(--borderWidth-thin) solid var(--bgColor-neutral-muted);\n    /* stylelint-disable-next-line primer/colors */\n    border-bottom: var(--borderWidth-thin) solid var(--bgColor-neutral-muted);\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n}\n"]}

package/dist/deprecated/ActionList/Header.d.ts

@@ -1,9 +1,8 @@
 import type React from 'react';
-import type { SxProp } from '../../sx';
 /**
  * Contract for props passed to the `Header` component.
  */
-export interface HeaderProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
+export interface HeaderProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * Style variations. Usage is discretionary.
      *
@@ -20,11 +19,8 @@ export interface HeaderProps extends React.ComponentPropsWithoutRef<'div'>, SxPr
      */
     auxiliaryText?: string;
 }
-export declare const StyledHeader: import("styled-components").StyledComponent<"div", any, {
-    variant: HeaderProps["variant"];
-} & SxProp, never>;
 /**
  * Displays the name and description of a `Group`.
  */
-export declare function Header({ variant, title, auxiliaryText, children: _children, ...props }: HeaderProps): JSX.Element;
+export declare function Header({ variant, title, auxiliaryText, children: _children, className, ...props }: HeaderProps): JSX.Element;
 //# sourceMappingURL=Header.d.ts.map

package/dist/deprecated/ActionList/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/deprecated/ActionList/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,UAAU,CAAA;AAGpC;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM;IAChF;;;;;OAKG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAE7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,YAAY;aAAwB,WAAW,CAAC,SAAS,CAAC;kBA2BtE,CAAA;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAkB,EAClB,KAAK,EACL,aAAa,EACb,QAAQ,EAAE,SAAS,EACnB,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAO3B"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/deprecated/ActionList/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACxE;;;;;OAKG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAE7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAkB,EAClB,KAAK,EACL,aAAa,EACb,QAAQ,EAAE,SAAS,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAa3B"}

package/dist/deprecated/ActionList/Header.js

@@ -1,22 +1,15 @@
 import { c } from 'react-compiler-runtime';
-import styled, { css } from 'styled-components';
-import { get } from '../../constants.js';
-import sx from '../../sx.js';
+import { clsx } from 'clsx';
+import classes from './Header.module.css.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-const StyledHeader = styled.div.withConfig({
-  displayName: "Header__StyledHeader",
-  componentId: "sc-cjezay-0"
-})(["{}padding:6px ", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], get('space.3'), get('fontSizes.0'), get('fontWeights.bold'), get('colors.fg.muted'), ({
-  variant
-}) => variant === 'filled' && css(["background:", ";margin:", " 0;border-top:1px solid ", ";border-bottom:1px solid ", ";&:first-child{margin-top:0;}"], get('colors.canvas.subtle'), get('space.2'), get('colors.neutral.muted'), get('colors.neutral.muted')), sx);
-
 /**
  * Displays the name and description of a `Group`.
  */
 function Header(t0) {
-  const $ = c(12);
+  const $ = c(16);
   let auxiliaryText;
+  let className;
   let props;
   let t1;
   let title;
@@ -26,51 +19,67 @@ function Header(t0) {
       title: t3,
       auxiliaryText: t4,
       children: _children,
-      ...t5
+      className: t5,
+      ...t6
     } = t0;
     t1 = t2;
     title = t3;
     auxiliaryText = t4;
-    props = t5;
+    className = t5;
+    props = t6;
     $[0] = t0;
     $[1] = auxiliaryText;
-    $[2] = props;
-    $[3] = t1;
-    $[4] = title;
+    $[2] = className;
+    $[3] = props;
+    $[4] = t1;
+    $[5] = title;
   } else {
     auxiliaryText = $[1];
-    props = $[2];
-    t1 = $[3];
-    title = $[4];
+    className = $[2];
+    props = $[3];
+    t1 = $[4];
+    title = $[5];
   }
   const variant = t1 === undefined ? "subtle" : t1;
   let t2;
-  if ($[5] !== auxiliaryText) {
-    t2 = auxiliaryText && /*#__PURE__*/jsx("span", {
+  if ($[6] !== className) {
+    t2 = clsx(className, classes.Header);
+    $[6] = className;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const t3 = variant === "filled" ? "" : undefined;
+  let t4;
+  if ($[8] !== auxiliaryText) {
+    t4 = auxiliaryText && /*#__PURE__*/jsx("span", {
       children: auxiliaryText
     });
-    $[5] = auxiliaryText;
-    $[6] = t2;
+    $[8] = auxiliaryText;
+    $[9] = t4;
   } else {
-    t2 = $[6];
+    t4 = $[9];
   }
-  let t3;
-  if ($[7] !== props || $[8] !== t2 || $[9] !== title || $[10] !== variant) {
-    t3 = /*#__PURE__*/jsxs(StyledHeader, {
+  let t5;
+  if ($[10] !== props || $[11] !== t2 || $[12] !== t3 || $[13] !== t4 || $[14] !== title) {
+    t5 = /*#__PURE__*/jsxs("div", {
       role: "heading",
-      variant: variant,
+      className: t2,
+      "data-filled": t3,
+      "data-component": "ActionList.Header",
       ...props,
-      children: [title, t2]
+      children: [title, t4]
     });
-    $[7] = props;
-    $[8] = t2;
-    $[9] = title;
-    $[10] = variant;
-    $[11] = t3;
+    $[10] = props;
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = title;
+    $[15] = t5;
   } else {
-    t3 = $[11];
+    t5 = $[15];
   }
-  return t3;
+  return t5;
 }
 
-export { Header, StyledHeader };
+export { Header };

package/dist/deprecated/ActionList/Header.module.css.js

@@ -0,0 +1,5 @@
+import './Header-493b1d76.css';
+
+var classes = {"Header":"prc-ActionList-Header-tbTgu"};
+
+export { classes as default };