@primer/react 37.7.0 → 37.7.2

package/dist/components.css

@@ -2609,18 +2609,18 @@ body[data-page-layout-dragging='true'] * {
   vertical-align: middle;
   isolation: isolate;
 
-  & > *:not([data-loading-wrapper]):is(button, a) {
+  & > *:not([data-loading-wrapper]) {
     /* stylelint-disable-next-line primer/spacing */
     margin-inline-end: -1px;
     position: relative;
     border-radius: 0;
 
-    &:first-of-type {
+    &:first-child {
       border-top-left-radius: var(--borderRadius-medium);
       border-bottom-left-radius: var(--borderRadius-medium);
     }
 
-    &:last-of-type {
+    &:last-child {
       border-top-right-radius: var(--borderRadius-medium);
       border-bottom-right-radius: var(--borderRadius-medium);
     }

package/lib/ButtonGroup/ButtonGroup-3cb83367.css

@@ -0,0 +1,2 @@
+.prc-ButtonGroup-ButtonGroup-vcMeG{display:inline-flex;isolation:isolate;vertical-align:middle}.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]){border-radius:0;margin-inline-end:-1px;position:relative}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):first-child{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):last-child{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):active,:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):focus,:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):hover{z-index:1}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):first-child a,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):first-child button{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):last-child a,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):last-child button{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*{border-radius:0;margin-inline-end:-1px;position:relative}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):active,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):focus,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):hover{z-index:1}
+/*# sourceMappingURL=ButtonGroup-3cb83367.css.map */

package/lib/ButtonGroup/ButtonGroup-3cb83367.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ButtonGroup/ButtonGroup.module.css"],"names":[],"mappings":"AAAA,mCACE,mBAAoB,CAEpB,iBAAkB,CADlB,qBAyDF,CAtDE,gEAIE,eAAgB,CAFhB,sBAAuB,CACvB,iBAkBF,CAfE,iFAEE,4DAAqD,CADrD,yDAEF,CAEA,gFAEE,6DAAsD,CADtD,0DAEF,CAEA,kOAGE,SACF,CAME,+JAGE,4DAAqD,CADrD,yDAEF,CAIA,6JAGE,6DAAsD,CADtD,0DAEF,CAIJ,4DAIE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,sNAGE,SACF","file":"ButtonGroup-3cb83367.css","sourcesContent":[".ButtonGroup {\n  display: inline-flex;\n  vertical-align: middle;\n  isolation: isolate;\n\n  & > *:not([data-loading-wrapper]) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-inline-end: -1px;\n    position: relative;\n    border-radius: 0;\n\n    &:first-child {\n      border-top-left-radius: var(--borderRadius-medium);\n      border-bottom-left-radius: var(--borderRadius-medium);\n    }\n\n    &:last-child {\n      border-top-right-radius: var(--borderRadius-medium);\n      border-bottom-right-radius: var(--borderRadius-medium);\n    }\n\n    &:focus,\n    &:active,\n    &:hover {\n      z-index: 1;\n    }\n  }\n\n  /* if child is loading button */\n  [data-loading-wrapper] {\n    &:first-child {\n      button,\n      a {\n        border-top-left-radius: var(--borderRadius-medium);\n        border-bottom-left-radius: var(--borderRadius-medium);\n      }\n    }\n\n    &:last-child {\n      button,\n      a {\n        border-top-right-radius: var(--borderRadius-medium);\n        border-bottom-right-radius: var(--borderRadius-medium);\n      }\n    }\n  }\n\n  [data-loading-wrapper] > * {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-inline-end: -1px;\n    position: relative;\n    border-radius: 0;\n\n    &:focus,\n    &:active,\n    &:hover {\n      z-index: 1;\n    }\n  }\n}\n"]}

package/lib/ButtonGroup/ButtonGroup.d.ts

@@ -1,11 +1,17 @@
+import React from 'react';
+import type { ComponentProps } from '../utils/types';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
-import type { SxProp } from '../sx';
-export type ButtonGroupProps = {
-    /** The role of the group */
-    role?: string;
-    /** className passed in for styling */
-    className?: string;
-} & SxProp;
+declare const StyledButtonGroup: React.ForwardRefExoticComponent<Omit<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | React.ComponentType<any> | undefined;
+    forwardedAs?: string | React.ComponentType<any> | undefined;
+}, "ref"> & React.RefAttributes<unknown>>;
+export type ButtonGroupProps = ComponentProps<typeof StyledButtonGroup>;
 declare const ButtonGroup: PolymorphicForwardRefComponent<"div", ButtonGroupProps>;
 export default ButtonGroup;
 //# sourceMappingURL=ButtonGroup.d.ts.map

package/lib/ButtonGroup/ButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAG/F,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,MAAM,CAAA;AAEV,QAAA,MAAM,WAAW,EAoBX,8BAA8B,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAA;AAI7D,eAAe,WAAW,CAAA"}
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAOlD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,QAAA,MAAM,iBAAiB;;;;;;;;;yCA+DtB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAEvE,QAAA,MAAM,WAAW,EA0BX,8BAA8B,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAA;AAI7D,eAAe,WAAW,CAAA"}

package/lib/ButtonGroup/ButtonGroup.js

@@ -1,26 +1,37 @@
 'use strict';
 
+var styled = require('styled-components');
 var React = require('react');
+var constants = require('../constants.js');
+var sx = require('../sx.js');
 var ButtonGroup_module = require('./ButtonGroup.module.css.js');
+var toggleStyledComponent = require('../internal/utils/toggleStyledComponent.js');
 var clsx = require('clsx');
+require('../FeatureFlags/FeatureFlags.js');
+var useFeatureFlag = require('../FeatureFlags/useFeatureFlag.js');
+require('../FeatureFlags/DefaultFeatureFlags.js');
 var useFocusZone = require('../hooks/useFocusZone.js');
 var useProvidedRefOrCreate = require('../hooks/useProvidedRefOrCreate.js');
 require('@primer/behaviors/utils');
 var behaviors = require('@primer/behaviors');
-var defaultSxProp = require('../utils/defaultSxProp.js');
-var Box = require('../Box/Box.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var styled__default = /*#__PURE__*/_interopDefault(styled);
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const StyledButtonGroup = toggleStyledComponent.toggleStyledComponent('primer_react_css_modules_ga', 'div', styled__default.default.div.withConfig({
+  displayName: "ButtonGroup__StyledButtonGroup",
+  componentId: "sc-1gxhls1-0"
+})(["display:inline-flex;vertical-align:middle;isolation:isolate;&& > *:not([data-loading-wrapper]){margin-inline-end:-1px;position:relative;border-radius:0;:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}:last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}:focus,:active,:hover{z-index:1;}}[data-loading-wrapper]{:first-child{button,a{border-top-left-radius:", ";border-bottom-left-radius:", ";}}:last-child{button,a{border-top-right-radius:", ";border-bottom-right-radius:", ";}}}[data-loading-wrapper] > *{margin-inline-end:-1px;position:relative;border-radius:0;:focus,:active,:hover{z-index:1;}}", ";"], constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), sx.default));
 const ButtonGroup = /*#__PURE__*/React__default.default.forwardRef(function ButtonGroup({
+  children,
   className,
   role,
-  sx,
   ...rest
 }, forwardRef) {
+  const enabled = useFeatureFlag.useFeatureFlag('primer_react_css_modules_ga');
   const buttonRef = useProvidedRefOrCreate.useProvidedRefOrCreate(forwardRef);
   useFocusZone.useFocusZone({
     containerRef: buttonRef,
@@ -28,21 +39,13 @@ const ButtonGroup = /*#__PURE__*/React__default.default.forwardRef(function Butt
     bindKeys: behaviors.FocusKeys.ArrowHorizontal,
     focusOutBehavior: 'wrap'
   });
-  if (sx !== defaultSxProp.defaultSxProp) {
-    return /*#__PURE__*/React__default.default.createElement(Box, _extends({
-      as: "div",
-      className: clsx.clsx(className, ButtonGroup_module.ButtonGroup),
-      role: role
-    }, rest, {
-      sx: sx,
-      ref: buttonRef
-    }));
-  }
-  return /*#__PURE__*/React__default.default.createElement("div", _extends({
+  return /*#__PURE__*/React__default.default.createElement(StyledButtonGroup, _extends({
     ref: buttonRef,
-    className: clsx.clsx(className, ButtonGroup_module.ButtonGroup),
+    className: clsx.clsx(className, {
+      [ButtonGroup_module.ButtonGroup]: enabled
+    }),
     role: role
-  }, rest));
+  }, rest), children);
 });
 ButtonGroup.displayName = 'ButtonGroup';
 

package/lib/ButtonGroup/ButtonGroup.module.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-require('./ButtonGroup-10e26ea3.css');
+require('./ButtonGroup-3cb83367.css');
 
 var classes = {"ButtonGroup":"prc-ButtonGroup-ButtonGroup-vcMeG"};
 

package/lib/Token/AvatarToken.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarToken.d.ts","sourceRoot":"","sources":["../../src/Token/AvatarToken.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,cAAc,EAAgB,MAAM,aAAa,CAAA;AAI9D,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAO/F,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,SAAS,EAAE,MAAM,CAAA;CAClB;AAkBD,QAAA,MAAM,WAAW,EA0CX,8BAA8B,CAAC,MAAM,GAAG,GAAG,GAAG,QAAQ,EAAE,gBAAgB,CAAC,CAAA;AAI/E,eAAe,WAAW,CAAA"}
+{"version":3,"file":"AvatarToken.d.ts","sourceRoot":"","sources":["../../src/Token/AvatarToken.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,cAAc,EAAgB,MAAM,aAAa,CAAA;AAI9D,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAO/F,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,SAAS,EAAE,MAAM,CAAA;CAClB;AAkBD,QAAA,MAAM,WAAW,EA2CX,8BAA8B,CAAC,MAAM,GAAG,GAAG,GAAG,QAAQ,EAAE,gBAAgB,CAAC,CAAA;AAI/E,eAAe,WAAW,CAAA"}

package/lib/Token/AvatarToken.js

@@ -68,7 +68,8 @@ const AvatarToken = /*#__PURE__*/React.forwardRef(({
     id: id === null || id === void 0 ? void 0 : id.toString(),
     sx: {
       paddingLeft: constants.get('space.1')
-    }
+    },
+    className: className
   }, rest, {
     ref: forwardedRef
   }));

package/lib/Token/IssueLabelToken.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IssueLabelToken.d.ts","sourceRoot":"","sources":["../../src/Token/IssueLabelToken.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAM/C,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAK/F,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA6BD,QAAA,MAAM,eAAe,EA8Jf,8BAA8B,CAAC,MAAM,GAAG,GAAG,GAAG,QAAQ,EAAE,oBAAoB,CAAC,CAAA;AAInF,eAAe,eAAe,CAAA"}
+{"version":3,"file":"IssueLabelToken.d.ts","sourceRoot":"","sources":["../../src/Token/IssueLabelToken.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAM/C,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAK/F,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA6BD,QAAA,MAAM,eAAe,EA+Jf,8BAA8B,CAAC,MAAM,GAAG,GAAG,GAAG,QAAQ,EAAE,oBAAoB,CAAC,CAAA;AAInF,eAAe,eAAe,CAAA"}

package/lib/Token/IssueLabelToken.js

@@ -147,7 +147,8 @@ const IssueLabelToken = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     isSelected: isSelected,
     text: text,
     size: size,
-    sx: labelStyles
+    sx: labelStyles,
+    className: className
   }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
     ref: forwardedRef
   }), /*#__PURE__*/React__default.default.createElement(_TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React__default.default.createElement(_RemoveTokenButton, {

package/lib/Token/Token.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/Token/Token.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAsC,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AAEtE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAI/C,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAS/F,MAAM,WAAW,UAAW,SAAQ,cAAc,EAAE,MAAM;IACxD;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAClC;AAkBD,QAAA,MAAM,KAAK,EA2HL,8BAA8B,CAAC,GAAG,GAAG,QAAQ,GAAG,MAAM,EAAE,UAAU,CAAC,CAAA;AAIzE,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/Token/Token.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAsC,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AAEtE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAI/C,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAS/F,MAAM,WAAW,UAAW,SAAQ,cAAc,EAAE,MAAM;IACxD;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAClC;AAkBD,QAAA,MAAM,KAAK,EA4HL,8BAA8B,CAAC,GAAG,GAAG,QAAQ,GAAG,MAAM,EAAE,UAAU,CAAC,CAAA;AAIzE,eAAe,KAAK,CAAA"}

package/lib/Token/Token.js

@@ -112,7 +112,8 @@ const Token = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     id: id === null || id === void 0 ? void 0 : id.toString(),
     text: text,
     size: size,
-    sx: mergedSx
+    sx: mergedSx,
+    className: className
   }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
     ref: forwardedRef,
     style: style

package/lib/Token/TokenBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenBase.d.ts","sourceRoot":"","sources":["../../src/Token/TokenBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAgB,MAAM,OAAO,CAAA;AACxD,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAK/F,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;AAEnE,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAKpD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,aAAwB,CAAA;AAEvD,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,eAAe,GAAG,iBAAiB,GAAG,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrG,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,GAAG,MAAM,CAAA;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,kBAAkB,kDAM5B,IAAI,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC,YAKhG,CAAA;AA0ED,QAAA,MAAM,SAAS,EAwCV,8BAA8B,CAAC,MAAM,GAAG,GAAG,GAAG,QAAQ,EAAE,cAAc,GAAG,MAAM,CAAC,CAAA;AAErF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"TokenBase.d.ts","sourceRoot":"","sources":["../../src/Token/TokenBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAgB,MAAM,OAAO,CAAA;AACxD,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAK/F,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;AAEnE,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAKpD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,aAAwB,CAAA;AAEvD,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,eAAe,GAAG,iBAAiB,GAAG,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrG,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,GAAG,MAAM,CAAA;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,kBAAkB,kDAM5B,IAAI,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC,YAKhG,CAAA;AA0ED,QAAA,MAAM,SAAS,EAyCV,8BAA8B,CAAC,MAAM,GAAG,GAAG,GAAG,QAAQ,EAAE,cAAc,GAAG,MAAM,CAAC,CAAA;AAErF,eAAe,SAAS,CAAA"}

package/lib/Token/TokenBase.js

@@ -113,6 +113,7 @@ const TokenBase = /*#__PURE__*/React__default.default.forwardRef(({
         onRemove();
       }
     },
+    className: className,
     id: id === null || id === void 0 ? void 0 : id.toString(),
     size: size
   }, rest, {

package/lib-esm/ButtonGroup/ButtonGroup-3cb83367.css

@@ -0,0 +1,2 @@
+.prc-ButtonGroup-ButtonGroup-vcMeG{display:inline-flex;isolation:isolate;vertical-align:middle}.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]){border-radius:0;margin-inline-end:-1px;position:relative}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):first-child{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):last-child{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):active,:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):focus,:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):hover{z-index:1}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):first-child a,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):first-child button{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):last-child a,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):last-child button{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*{border-radius:0;margin-inline-end:-1px;position:relative}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):active,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):focus,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):hover{z-index:1}
+/*# sourceMappingURL=ButtonGroup-3cb83367.css.map */

package/lib-esm/ButtonGroup/ButtonGroup-3cb83367.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ButtonGroup/ButtonGroup.module.css"],"names":[],"mappings":"AAAA,mCACE,mBAAoB,CAEpB,iBAAkB,CADlB,qBAyDF,CAtDE,gEAIE,eAAgB,CAFhB,sBAAuB,CACvB,iBAkBF,CAfE,iFAEE,4DAAqD,CADrD,yDAEF,CAEA,gFAEE,6DAAsD,CADtD,0DAEF,CAEA,kOAGE,SACF,CAME,+JAGE,4DAAqD,CADrD,yDAEF,CAIA,6JAGE,6DAAsD,CADtD,0DAEF,CAIJ,4DAIE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,sNAGE,SACF","file":"ButtonGroup-3cb83367.css","sourcesContent":[".ButtonGroup {\n  display: inline-flex;\n  vertical-align: middle;\n  isolation: isolate;\n\n  & > *:not([data-loading-wrapper]) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-inline-end: -1px;\n    position: relative;\n    border-radius: 0;\n\n    &:first-child {\n      border-top-left-radius: var(--borderRadius-medium);\n      border-bottom-left-radius: var(--borderRadius-medium);\n    }\n\n    &:last-child {\n      border-top-right-radius: var(--borderRadius-medium);\n      border-bottom-right-radius: var(--borderRadius-medium);\n    }\n\n    &:focus,\n    &:active,\n    &:hover {\n      z-index: 1;\n    }\n  }\n\n  /* if child is loading button */\n  [data-loading-wrapper] {\n    &:first-child {\n      button,\n      a {\n        border-top-left-radius: var(--borderRadius-medium);\n        border-bottom-left-radius: var(--borderRadius-medium);\n      }\n    }\n\n    &:last-child {\n      button,\n      a {\n        border-top-right-radius: var(--borderRadius-medium);\n        border-bottom-right-radius: var(--borderRadius-medium);\n      }\n    }\n  }\n\n  [data-loading-wrapper] > * {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-inline-end: -1px;\n    position: relative;\n    border-radius: 0;\n\n    &:focus,\n    &:active,\n    &:hover {\n      z-index: 1;\n    }\n  }\n}\n"]}

package/lib-esm/ButtonGroup/ButtonGroup.d.ts

@@ -1,11 +1,17 @@
+import React from 'react';
+import type { ComponentProps } from '../utils/types';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
-import type { SxProp } from '../sx';
-export type ButtonGroupProps = {
-    /** The role of the group */
-    role?: string;
-    /** className passed in for styling */
-    className?: string;
-} & SxProp;
+declare const StyledButtonGroup: React.ForwardRefExoticComponent<Omit<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | React.ComponentType<any> | undefined;
+    forwardedAs?: string | React.ComponentType<any> | undefined;
+}, "ref"> & React.RefAttributes<unknown>>;
+export type ButtonGroupProps = ComponentProps<typeof StyledButtonGroup>;
 declare const ButtonGroup: PolymorphicForwardRefComponent<"div", ButtonGroupProps>;
 export default ButtonGroup;
 //# sourceMappingURL=ButtonGroup.d.ts.map

package/lib-esm/ButtonGroup/ButtonGroup.js

@@ -1,20 +1,30 @@
+import styled from 'styled-components';
 import React from 'react';
+import { get } from '../constants.js';
+import sx from '../sx.js';
 import classes from './ButtonGroup.module.css.js';
+import { toggleStyledComponent } from '../internal/utils/toggleStyledComponent.js';
 import { clsx } from 'clsx';
+import '../FeatureFlags/FeatureFlags.js';
+import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
+import '../FeatureFlags/DefaultFeatureFlags.js';
 import { useFocusZone } from '../hooks/useFocusZone.js';
 import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
 import '@primer/behaviors/utils';
 import { FocusKeys } from '@primer/behaviors';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
-import Box from '../Box/Box.js';
 
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const StyledButtonGroup = toggleStyledComponent('primer_react_css_modules_ga', 'div', styled.div.withConfig({
+  displayName: "ButtonGroup__StyledButtonGroup",
+  componentId: "sc-1gxhls1-0"
+})(["display:inline-flex;vertical-align:middle;isolation:isolate;&& > *:not([data-loading-wrapper]){margin-inline-end:-1px;position:relative;border-radius:0;:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}:last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}:focus,:active,:hover{z-index:1;}}[data-loading-wrapper]{:first-child{button,a{border-top-left-radius:", ";border-bottom-left-radius:", ";}}:last-child{button,a{border-top-right-radius:", ";border-bottom-right-radius:", ";}}}[data-loading-wrapper] > *{margin-inline-end:-1px;position:relative;border-radius:0;:focus,:active,:hover{z-index:1;}}", ";"], get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), sx));
 const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup({
+  children,
   className,
   role,
-  sx,
   ...rest
 }, forwardRef) {
+  const enabled = useFeatureFlag('primer_react_css_modules_ga');
   const buttonRef = useProvidedRefOrCreate(forwardRef);
   useFocusZone({
     containerRef: buttonRef,
@@ -22,21 +32,13 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup({
     bindKeys: FocusKeys.ArrowHorizontal,
     focusOutBehavior: 'wrap'
   });
-  if (sx !== defaultSxProp) {
-    return /*#__PURE__*/React.createElement(Box, _extends({
-      as: "div",
-      className: clsx(className, classes.ButtonGroup),
-      role: role
-    }, rest, {
-      sx: sx,
-      ref: buttonRef
-    }));
-  }
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement(StyledButtonGroup, _extends({
     ref: buttonRef,
-    className: clsx(className, classes.ButtonGroup),
+    className: clsx(className, {
+      [classes.ButtonGroup]: enabled
+    }),
     role: role
-  }, rest));
+  }, rest), children);
 });
 ButtonGroup.displayName = 'ButtonGroup';
 

package/lib-esm/ButtonGroup/ButtonGroup.module.css.js

@@ -1,4 +1,4 @@
-import './ButtonGroup-10e26ea3.css';
+import './ButtonGroup-3cb83367.css';
 
 var classes = {"ButtonGroup":"prc-ButtonGroup-ButtonGroup-vcMeG"};
 

package/lib-esm/Token/AvatarToken.js

@@ -61,7 +61,8 @@ const AvatarToken = /*#__PURE__*/forwardRef(({
     id: id === null || id === void 0 ? void 0 : id.toString(),
     sx: {
       paddingLeft: get('space.1')
-    }
+    },
+    className: className
   }, rest, {
     ref: forwardedRef
   }));

package/lib-esm/Token/IssueLabelToken.js

@@ -141,7 +141,8 @@ const IssueLabelToken = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     isSelected: isSelected,
     text: text,
     size: size,
-    sx: labelStyles
+    sx: labelStyles,
+    className: className
   }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
     ref: forwardedRef
   }), /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {

package/lib-esm/Token/Token.js

@@ -105,7 +105,8 @@ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     id: id === null || id === void 0 ? void 0 : id.toString(),
     text: text,
     size: size,
-    sx: mergedSx
+    sx: mergedSx,
+    className: className
   }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
     ref: forwardedRef,
     style: style

package/lib-esm/Token/TokenBase.js

@@ -104,6 +104,7 @@ const TokenBase = /*#__PURE__*/React.forwardRef(({
         onRemove();
       }
     },
+    className: className,
     id: id === null || id === void 0 ? void 0 : id.toString(),
     size: size
   }, rest, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react",
-  "version": "37.7.0",
+  "version": "37.7.2",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

package/lib/ButtonGroup/ButtonGroup-10e26ea3.css

@@ -1,2 +0,0 @@
-.prc-ButtonGroup-ButtonGroup-vcMeG{display:inline-flex;isolation:isolate;vertical-align:middle}.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a){border-radius:0;margin-inline-end:-1px;position:relative}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):first-of-type{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):last-of-type{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):active,:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):focus,:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):hover{z-index:1}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):first-child a,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):first-child button{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):last-child a,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):last-child button{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*{border-radius:0;margin-inline-end:-1px;position:relative}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):active,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):focus,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):hover{z-index:1}
-/*# sourceMappingURL=ButtonGroup-10e26ea3.css.map */

package/lib/ButtonGroup/ButtonGroup-10e26ea3.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/ButtonGroup/ButtonGroup.module.css"],"names":[],"mappings":"AAAA,mCACE,mBAAoB,CAEpB,iBAAkB,CADlB,qBAyDF,CAtDE,6EAIE,eAAgB,CAFhB,sBAAuB,CACvB,iBAkBF,CAfE,gGAEE,4DAAqD,CADrD,yDAEF,CAEA,+FAEE,6DAAsD,CADtD,0DAEF,CAEA,yQAGE,SACF,CAME,+JAGE,4DAAqD,CADrD,yDAEF,CAIA,6JAGE,6DAAsD,CADtD,0DAEF,CAIJ,4DAIE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,sNAGE,SACF","file":"ButtonGroup-10e26ea3.css","sourcesContent":[".ButtonGroup {\n  display: inline-flex;\n  vertical-align: middle;\n  isolation: isolate;\n\n  & > *:not([data-loading-wrapper]):is(button, a) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-inline-end: -1px;\n    position: relative;\n    border-radius: 0;\n\n    &:first-of-type {\n      border-top-left-radius: var(--borderRadius-medium);\n      border-bottom-left-radius: var(--borderRadius-medium);\n    }\n\n    &:last-of-type {\n      border-top-right-radius: var(--borderRadius-medium);\n      border-bottom-right-radius: var(--borderRadius-medium);\n    }\n\n    &:focus,\n    &:active,\n    &:hover {\n      z-index: 1;\n    }\n  }\n\n  /* if child is loading button */\n  [data-loading-wrapper] {\n    &:first-child {\n      button,\n      a {\n        border-top-left-radius: var(--borderRadius-medium);\n        border-bottom-left-radius: var(--borderRadius-medium);\n      }\n    }\n\n    &:last-child {\n      button,\n      a {\n        border-top-right-radius: var(--borderRadius-medium);\n        border-bottom-right-radius: var(--borderRadius-medium);\n      }\n    }\n  }\n\n  [data-loading-wrapper] > * {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-inline-end: -1px;\n    position: relative;\n    border-radius: 0;\n\n    &:focus,\n    &:active,\n    &:hover {\n      z-index: 1;\n    }\n  }\n}\n"]}

package/lib-esm/ButtonGroup/ButtonGroup-10e26ea3.css

@@ -1,2 +0,0 @@
-.prc-ButtonGroup-ButtonGroup-vcMeG{display:inline-flex;isolation:isolate;vertical-align:middle}.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a){border-radius:0;margin-inline-end:-1px;position:relative}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):first-of-type{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):last-of-type{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):active,:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):focus,:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):hover{z-index:1}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):first-child a,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):first-child button{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):last-child a,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):last-child button{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*{border-radius:0;margin-inline-end:-1px;position:relative}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):active,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):focus,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):hover{z-index:1}
-/*# sourceMappingURL=ButtonGroup-10e26ea3.css.map */

package/lib-esm/ButtonGroup/ButtonGroup-10e26ea3.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/ButtonGroup/ButtonGroup.module.css"],"names":[],"mappings":"AAAA,mCACE,mBAAoB,CAEpB,iBAAkB,CADlB,qBAyDF,CAtDE,6EAIE,eAAgB,CAFhB,sBAAuB,CACvB,iBAkBF,CAfE,gGAEE,4DAAqD,CADrD,yDAEF,CAEA,+FAEE,6DAAsD,CADtD,0DAEF,CAEA,yQAGE,SACF,CAME,+JAGE,4DAAqD,CADrD,yDAEF,CAIA,6JAGE,6DAAsD,CADtD,0DAEF,CAIJ,4DAIE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,sNAGE,SACF","file":"ButtonGroup-10e26ea3.css","sourcesContent":[".ButtonGroup {\n  display: inline-flex;\n  vertical-align: middle;\n  isolation: isolate;\n\n  & > *:not([data-loading-wrapper]):is(button, a) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-inline-end: -1px;\n    position: relative;\n    border-radius: 0;\n\n    &:first-of-type {\n      border-top-left-radius: var(--borderRadius-medium);\n      border-bottom-left-radius: var(--borderRadius-medium);\n    }\n\n    &:last-of-type {\n      border-top-right-radius: var(--borderRadius-medium);\n      border-bottom-right-radius: var(--borderRadius-medium);\n    }\n\n    &:focus,\n    &:active,\n    &:hover {\n      z-index: 1;\n    }\n  }\n\n  /* if child is loading button */\n  [data-loading-wrapper] {\n    &:first-child {\n      button,\n      a {\n        border-top-left-radius: var(--borderRadius-medium);\n        border-bottom-left-radius: var(--borderRadius-medium);\n      }\n    }\n\n    &:last-child {\n      button,\n      a {\n        border-top-right-radius: var(--borderRadius-medium);\n        border-bottom-right-radius: var(--borderRadius-medium);\n      }\n    }\n  }\n\n  [data-loading-wrapper] > * {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-inline-end: -1px;\n    position: relative;\n    border-radius: 0;\n\n    &:focus,\n    &:active,\n    &:hover {\n      z-index: 1;\n    }\n  }\n}\n"]}