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

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # @primer/react
 
+## 38.0.0-rc.4
+
+### Major Changes
+
+- [#6857](https://github.com/primer/react/pull/6857) [`b9b558e`](https://github.com/primer/react/commit/b9b558efe1033150b05adc88d28234db5dc82f95) Thanks [@pksjce](https://github.com/pksjce)! - Remove PointerBox from @primer-react
+
+- [#6708](https://github.com/primer/react/pull/6708) [`b7b8a36`](https://github.com/primer/react/commit/b7b8a36d14b3c5b6f9c289423691fe9285eae786) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Remove sx prop support from the Spinner component.
+
+- [#6833](https://github.com/primer/react/pull/6833) [`5ad1e93`](https://github.com/primer/react/commit/5ad1e939c1ef494f7680b0753a4d7c6296e088d6) Thanks [@joshblack](https://github.com/joshblack)! - Remove sx support from Radio
+
+- [#6841](https://github.com/primer/react/pull/6841) [`3e02e2c`](https://github.com/primer/react/commit/3e02e2c235a3633b646b8f2a493f3a23e17187bf) Thanks [@joshblack](https://github.com/joshblack)! - Remove support for `sx` from `deprecated/Pagehead`
+
+- [#6692](https://github.com/primer/react/pull/6692) [`bb8d648`](https://github.com/primer/react/commit/bb8d648a42ec84e9baefae00fa87ede2be449e64) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Remove sx Props and BoxWithFallBack from Timeline component.
+
+- [#6668](https://github.com/primer/react/pull/6668) [`acb6233`](https://github.com/primer/react/commit/acb6233fa0cf715d660ae222ebca9853115cb707) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Update UnderlineNav component to no longer support sx and remove Box usage from it.
+
+- [#6835](https://github.com/primer/react/pull/6835) [`961c1c4`](https://github.com/primer/react/commit/961c1c48d942b9d8d81289a5d09d78f4d985f5da) Thanks [@joshblack](https://github.com/joshblack)! - Remove support for `sx` from `ButtonGroup`
+
+- [#6834](https://github.com/primer/react/pull/6834) [`fa70b5e`](https://github.com/primer/react/commit/fa70b5eaae4c68ccac2bbfa44546ee85594a054a) Thanks [@joshblack](https://github.com/joshblack)! - Remove the `sx` prop from `Flash`
+
+- [#6876](https://github.com/primer/react/pull/6876) [`2102252`](https://github.com/primer/react/commit/2102252ef34899bb37c52ca4df193ba5cca41a94) Thanks [@llastflowers](https://github.com/llastflowers)! - Update FilteredActionList and FilteredActionListLoaders components to no longer support sx
+
+- [#6840](https://github.com/primer/react/pull/6840) [`aba8050`](https://github.com/primer/react/commit/aba8050ee9d324fa53a7b81d30b4f8dc7186c70a) Thanks [@joshblack](https://github.com/joshblack)! - Remove support for `sx` prop from `deprecated/FilteredSearch`
+
+- [#6685](https://github.com/primer/react/pull/6685) [`00261c9`](https://github.com/primer/react/commit/00261c934fe88a74ef310c3134fe202226156b4b) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Remove the sx prop from RadioGroup and Truncate.
+
+- [#6878](https://github.com/primer/react/pull/6878) [`7081dd3`](https://github.com/primer/react/commit/7081dd3b45f7dae08f7a39038be95dbf20dd8a27) Thanks [@llastflowers](https://github.com/llastflowers)! - Update BaseStyles component to no longer support sx
+
+- [#6679](https://github.com/primer/react/pull/6679) [`6158135`](https://github.com/primer/react/commit/6158135e42be9486bb7de35fbedf96e412b8a1d7) Thanks [@llastflowers](https://github.com/llastflowers)! - Update CounterLabel component to no longer support sx
+
+- [#6827](https://github.com/primer/react/pull/6827) [`6843040`](https://github.com/primer/react/commit/6843040ad9b9810cb14f6186e53b01e83bed60f8) Thanks [@joshblack](https://github.com/joshblack)! - Remove support for the sx prop from RelativeTime
+
+- [#6813](https://github.com/primer/react/pull/6813) [`a1a4ad0`](https://github.com/primer/react/commit/a1a4ad00b87b489f6341aa818a9b8b8662fe2a82) Thanks [@joshblack](https://github.com/joshblack)! - Remove support for `sx` prop for `InlineMessage`
+
+- [#6866](https://github.com/primer/react/pull/6866) [`3237a4e`](https://github.com/primer/react/commit/3237a4e549779a2b3144b1f48974e533d28cca2a) Thanks [@francinelucca](https://github.com/francinelucca)! - chore(LinkButton): remove sx from LinkButton
+
+- [#6655](https://github.com/primer/react/pull/6655) [`092185f`](https://github.com/primer/react/commit/092185f7b9d6c70296e629e03790676502b701e5) Thanks [@llastflowers](https://github.com/llastflowers)! - Update CheckboxGroup component to no longer support sx
+
+- [#6654](https://github.com/primer/react/pull/6654) [`513cc3f`](https://github.com/primer/react/commit/513cc3feed5723632e54f07cae9d4397e3783fdc) Thanks [@llastflowers](https://github.com/llastflowers)! - Update Checkbox component to no longer support sx
+
+- [#6837](https://github.com/primer/react/pull/6837) [`134f96e`](https://github.com/primer/react/commit/134f96e81476f829f2b0f0b44fa73cc1604983d5) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Update ProgressBar to no longer support sx
+
+- [#6839](https://github.com/primer/react/pull/6839) [`32febac`](https://github.com/primer/react/commit/32febac10a887cce418abf6f4419cfb100a8f292) Thanks [@joshblack](https://github.com/joshblack)! - Remove support for `sx` from `Header`
+
+- [#6871](https://github.com/primer/react/pull/6871) [`44b3d73`](https://github.com/primer/react/commit/44b3d732157048059681f3fdcb86c5d77a59aec5) Thanks [@joshblack](https://github.com/joshblack)! - Remove support for `sx` from `PageHeader`
+
+- [#6863](https://github.com/primer/react/pull/6863) [`9614c0e`](https://github.com/primer/react/commit/9614c0eae7d77bdf879df474c44d613b673e6d4e) Thanks [@pksjce](https://github.com/pksjce)! - Remove Banner from experimental
+
+### Minor Changes
+
+- [#6456](https://github.com/primer/react/pull/6456) [`fbd3ac7`](https://github.com/primer/react/commit/fbd3ac75a67b89635dcd28879a1b4a93cef70289) Thanks [@TylerJDev](https://github.com/TylerJDev)! - TreeView: Add trailing actions prop `secondaryActions`
+
+- [#6855](https://github.com/primer/react/pull/6855) [`356a129`](https://github.com/primer/react/commit/356a129d2a1a0c02d9ca59280e7711e501c0d20d) Thanks [@cheshire137](https://github.com/cheshire137)! - Add buttonLabelOn and buttonLabelOff to ToggleSwitch
+
+### Patch Changes
+
+- [#6829](https://github.com/primer/react/pull/6829) [`b568765`](https://github.com/primer/react/commit/b568765159a22fefbb2e521947a6c99109cb6f19) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: fix ActionBar gap issue
+
+- [#6879](https://github.com/primer/react/pull/6879) [`c8fc6b8`](https://github.com/primer/react/commit/c8fc6b81d61834ab143a578b379d7dcc49e17d62) Thanks [@francinelucca](https://github.com/francinelucca)! - chore(FilteredActionList): fix className override
+
+- [#6896](https://github.com/primer/react/pull/6896) [`5c29b01`](https://github.com/primer/react/commit/5c29b010db51e85c387963aee45ee97f12aae7ef) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Fix typing issues in PageHeader exports.
+
+- [#6881](https://github.com/primer/react/pull/6881) [`8d52362`](https://github.com/primer/react/commit/8d523624366dda9cbb5c200560ffcf9b91f57655) Thanks [@langermank](https://github.com/langermank)! - Implement forced colors for progress bar
+
+- [#6854](https://github.com/primer/react/pull/6854) [`dd8eeed`](https://github.com/primer/react/commit/dd8eeeddb39a7afbdd38d3df8f0568f176e5d4de) Thanks [@pksjce](https://github.com/pksjce)! - Breadcrumbs: Fix esc button not being able to focus on the menubuttonRef
+
 ## 38.0.0-rc.3
 
 ### Major Changes

package/dist/ActionBar/ActionBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/ActionBar/ActionBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAStE,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,WAAW,CAAA;AAyB9C,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAExC,KAAK,SAAS,GACV;IAAC,YAAY,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAC,GACjF;IAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAAC,iBAAiB,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAAC,CAAA;AAE1F,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,SAAS,CAAA;AAEb,MAAM,MAAM,wBAAwB,GAAG;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,GAAG,eAAe,CAAA;AA+E7E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CA8HvE,CAAA;AAED,eAAO,MAAM,mBAAmB,0FA8B/B,CAAA;AAED,eAAO,MAAM,eAAe,yBAS3B,CAAA"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/ActionBar/ActionBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAStE,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,WAAW,CAAA;AA2B9C,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAExC,KAAK,SAAS,GACV;IAAC,YAAY,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAC,GACjF;IAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAAC,iBAAiB,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAAC,CAAA;AAE1F,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,SAAS,CAAA;AAEb,MAAM,MAAM,wBAAwB,GAAG;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,GAAG,eAAe,CAAA;AA+E7E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CA8HvE,CAAA;AAED,eAAO,MAAM,mBAAmB,0FA8B/B,CAAA;AAED,eAAO,MAAM,eAAe,yBAS3B,CAAA"}

package/dist/ActionBar/ActionBar.js

@@ -14,6 +14,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { FocusKeys } from '@primer/behaviors';
 import { ActionMenu } from '../ActionMenu/ActionMenu.js';
 
+const ACTIONBAR_ITEM_GAP = 8;
 const ActionBarContext = /*#__PURE__*/React.createContext({
   size: 'medium',
   setChildrenWidth: () => null
@@ -23,7 +24,7 @@ const ActionBarContext = /*#__PURE__*/React.createContext({
 small (28px), medium (32px), large (40px)
 */
 
-const MORE_BTN_WIDTH = 86;
+const MORE_BTN_WIDTH = 32;
 const getValidChildren = children => {
   return React.Children.toArray(children).filter(child => {
     return /*#__PURE__*/React.isValidElement(child);
@@ -34,7 +35,7 @@ const calculatePossibleItems = (childWidthArray, navWidth, moreMenuWidth = 0) =>
   let breakpoint = childWidthArray.length; // assume all items will fit
   let sumsOfChildWidth = 0;
   for (const [index, childWidth] of childWidthArray.entries()) {
-    sumsOfChildWidth = sumsOfChildWidth + childWidth.width; // + GAP
+    sumsOfChildWidth += index > 0 ? childWidth.width + ACTIONBAR_ITEM_GAP : childWidth.width;
     if (sumsOfChildWidth > widthToFit) {
       breakpoint = index;
       break;
@@ -179,6 +180,9 @@ const ActionBar = props => {
         ref: listRef,
         role: "toolbar",
         className: styles.List,
+        style: {
+          gap: `${ACTIONBAR_ITEM_GAP}px`
+        },
         children: [listItems, menuItems.length > 0 && /*#__PURE__*/jsxs(ActionMenu, {
           children: [/*#__PURE__*/jsx(ActionMenu.Anchor, {
             children: /*#__PURE__*/jsx(IconButton, {

package/dist/ActionList/Description.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Description.d.ts","sourceRoot":"","sources":["../../src/ActionList/Description.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAMjC,MAAM,MAAM,0BAA0B,GAAG;IACvC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAE5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,MAAM,CAAA;AAEV,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,0BAA0B,CAAC,CAiDrF,CAAA"}
+{"version":3,"file":"Description.d.ts","sourceRoot":"","sources":["../../src/ActionList/Description.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAMjC,MAAM,MAAM,0BAA0B,GAAG;IACvC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAE5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,MAAM,CAAA;AAEV,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,0BAA0B,CAAC,CAgDrF,CAAA"}

package/dist/ActionList/Description.js

@@ -42,7 +42,6 @@ const Description = ({
       ref: containerRef,
       id: inlineDescriptionId,
       className: clsx(className, classes.Description),
-      sx: sx,
       title: effectiveTitle,
       inline: true,
       maxWidth: "100%",

package/dist/ActionList/Visuals.js

@@ -6,7 +6,7 @@ import classes from './ActionList.module.css.js';
 import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx } from 'react/jsx-runtime';
 import { Tooltip } from '../TooltipV2/Tooltip.js';
-import StyledSpinner from '../Spinner/Spinner.js';
+import Spinner from '../Spinner/Spinner.js';
 
 const VisualContainer = ({
   className,
@@ -85,7 +85,7 @@ const VisualOrIndicator = ({
     })
   }) : /*#__PURE__*/jsx(VisualComponent, {
     className: className,
-    children: /*#__PURE__*/jsx(StyledSpinner, {
+    children: /*#__PURE__*/jsx(Spinner, {
       size: "small"
     })
   });

package/dist/Autocomplete/AutocompleteMenu.js

@@ -11,7 +11,7 @@ import VisuallyHidden from '../_VisuallyHidden.js';
 import { isElement } from 'react-is';
 import classes from './AutocompleteMenu.module.css.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import StyledSpinner from '../Spinner/Spinner.js';
+import Spinner from '../Spinner/Spinner.js';
 
 const getDefaultSortFn = isItemSelectedFn => (itemIdA, itemIdB) => isItemSelectedFn(itemIdA) === isItemSelectedFn(itemIdB) ? 0 : isItemSelectedFn(itemIdA) ? -1 : 1;
 const menuScrollMargins = {
@@ -198,7 +198,7 @@ function AutocompleteMenu(props) {
     isVisible: showMenu,
     children: loading ? /*#__PURE__*/jsx("div", {
       className: classes.SpinnerWrapper,
-      children: /*#__PURE__*/jsx(StyledSpinner, {})
+      children: /*#__PURE__*/jsx(Spinner, {})
     }) : /*#__PURE__*/jsx("div", {
       ref: listContainerRef,
       children: allItemsToRender.length ? /*#__PURE__*/jsx(ActionList, {

package/dist/BaseStyles.d.ts

@@ -1,14 +1,13 @@
 import type React from 'react';
 import { type CSSProperties, type PropsWithChildren } from 'react';
 import type { SystemCommonProps, SystemTypographyProps } from './constants';
-import type { SxProp } from './sx';
 import 'focus-visible';
 export type BaseStylesProps = PropsWithChildren & {
     as?: React.ComponentType<any> | keyof JSX.IntrinsicElements;
     className?: string;
     style?: CSSProperties;
     color?: string;
-} & SystemTypographyProps & SystemCommonProps & SxProp;
+} & SystemTypographyProps & SystemCommonProps;
 declare function BaseStyles({ children, color, fontFamily, lineHeight, className, as: Component, style, ...rest }: BaseStylesProps): React.JSX.Element;
 export default BaseStyles;
 //# sourceMappingURL=BaseStyles.d.ts.map

package/dist/BaseStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseStyles.d.ts","sourceRoot":"","sources":["../src/BaseStyles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAEhE,OAAO,KAAK,EAAC,iBAAiB,EAAE,qBAAqB,EAAC,MAAM,aAAa,CAAA;AAEzE,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,MAAM,CAAA;AAIhC,OAAO,eAAe,CAAA;AAGtB,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG;IAEhD,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,CAAC,iBAAiB,CAAA;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,qBAAqB,GACvB,iBAAiB,GACjB,MAAM,CAAA;AAER,iBAAS,UAAU,CAAC,EAClB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,EAAE,EAAE,SAAiB,EACrB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,eAAe,qBAgCjB;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"BaseStyles.d.ts","sourceRoot":"","sources":["../src/BaseStyles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAEhE,OAAO,KAAK,EAAC,iBAAiB,EAAE,qBAAqB,EAAC,MAAM,aAAa,CAAA;AAKzE,OAAO,eAAe,CAAA;AAEtB,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG;IAEhD,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,CAAC,iBAAiB,CAAA;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,qBAAqB,GACvB,iBAAiB,CAAA;AAEnB,iBAAS,UAAU,CAAC,EAClB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,EAAE,EAAE,SAAiB,EACrB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,eAAe,qBA+BjB;AAED,eAAe,UAAU,CAAA"}

package/dist/BaseStyles.js

@@ -3,7 +3,6 @@ import { clsx } from 'clsx';
 import { useTheme } from './ThemeProvider.js';
 import classes from './BaseStyles.module.css.js';
 import 'focus-visible';
-import { BoxWithFallback } from './internal/components/BoxWithFallback.js';
 import { jsx } from 'react/jsx-runtime';
 
 function BaseStyles(t0) {
@@ -92,8 +91,7 @@ function BaseStyles(t0) {
   }
   let t6;
   if ($[18] !== Component || $[19] !== children || $[20] !== dayScheme || $[21] !== newClassName || $[22] !== nightScheme || $[23] !== rest || $[24] !== t4 || $[25] !== t5) {
-    t6 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: Component,
+    t6 = /*#__PURE__*/jsx(Component, {
       className: newClassName,
       "data-portal-root": true,
       "data-color-mode": t4,

package/dist/Breadcrumbs/Breadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,SAAS,CAAA;AAC/B,OAAO,KAA0D,MAAM,OAAO,CAAA;AAC9E,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAElD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAa/F,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CACpD;IACE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IAC7C;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;CAChC,GAAG,MAAM,CACX,CAAA;AA+GD,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,QAAiB,EAAE,OAAkB,EAAC,EAAE,gBAAgB,qBAiN9G;kBAjNQ,WAAW;;;AA6NpB,KAAK,0BAA0B,GAAG;IAChC,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,MAAM,GACR,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GACvC,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAA;AAElC,QAAA,MAAM,eAAe,EAUf,8BAA8B,CAAC,GAAG,EAAE,0BAA0B,CAAC,CAAA;AAMrE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;;;;AACzE,wBAAkE;AAElE;;GAEG;AACH,eAAO,MAAM,UAAU;;CAAsD,CAAA;AAE7E;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAA;AAE9C;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,SAAS,CAAA;AAC/B,OAAO,KAA0D,MAAM,OAAO,CAAA;AAC9E,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAElD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAY/F,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CACpD;IACE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IAC7C;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;CAChC,GAAG,MAAM,CACX,CAAA;AA8GD,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,QAAiB,EAAE,OAAkB,EAAC,EAAE,gBAAgB,qBAiN9G;kBAjNQ,WAAW;;;AA6NpB,KAAK,0BAA0B,GAAG;IAChC,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,MAAM,GACR,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GACvC,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAA;AAElC,QAAA,MAAM,eAAe,EAUf,8BAA8B,CAAC,GAAG,EAAE,0BAA0B,CAAC,CAAA;AAMrE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;;;;AACzE,wBAAkE;AAElE;;GAEG;AACH,eAAO,MAAM,UAAU;;CAAsD,CAAA;AAE7E;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAA;AAE9C;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA"}

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -11,7 +11,6 @@ import { useOnEscapePress } from '../hooks/useOnEscapePress.js';
 import { useOnOutsideClick } from '../hooks/useOnOutsideClick.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
-import { Tooltip } from '../TooltipV2/Tooltip.js';
 import Details from '../Details/Details.js';
 
 const BreadcrumbsList = t0 => {
@@ -33,7 +32,7 @@ const BreadcrumbsList = t0 => {
   return t1;
 };
 const BreadcrumbsMenuItem = /*#__PURE__*/React.forwardRef((t0, menuRefCallback) => {
-  const $ = c(28);
+  const $ = c(25);
   let ariaLabel;
   let items;
   let rest;
@@ -141,79 +140,66 @@ const BreadcrumbsMenuItem = /*#__PURE__*/React.forwardRef((t0, menuRefCallback)
   }
   useOnOutsideClick(t7);
   const t8 = ariaLabel || `${items.length} more breadcrumb items`;
-  const t9 = ariaLabel || `${items.length} more breadcrumb items`;
-  const t10 = isOpen ? "true" : "false";
-  let t11;
-  if ($[13] !== rest || $[14] !== t10 || $[15] !== t9) {
-    t11 = /*#__PURE__*/jsx(IconButton, {
+  const t9 = isOpen ? "true" : "false";
+  let t10;
+  if ($[13] !== rest || $[14] !== t8 || $[15] !== t9) {
+    t10 = /*#__PURE__*/jsx(IconButton, {
       as: "summary",
       role: "button",
       ref: menuButtonRef,
-      "aria-label": t9,
-      "aria-expanded": t10,
+      "aria-label": t8,
+      "aria-expanded": t9,
       onClick: handleSummaryClick,
       variant: "invisible",
       size: "small",
       icon: KebabHorizontalIcon,
+      tooltipDirection: "e",
       ...rest
     });
     $[13] = rest;
-    $[14] = t10;
+    $[14] = t8;
     $[15] = t9;
-    $[16] = t11;
-  } else {
-    t11 = $[16];
-  }
-  let t12;
-  if ($[17] !== t11 || $[18] !== t8) {
-    t12 = /*#__PURE__*/jsx(Tooltip, {
-      text: t8,
-      direction: "e",
-      children: t11
-    });
-    $[17] = t11;
-    $[18] = t8;
-    $[19] = t12;
+    $[16] = t10;
   } else {
-    t12 = $[19];
+    t10 = $[16];
   }
-  let t13;
-  if ($[20] !== items) {
-    t13 = items.map(_temp);
-    $[20] = items;
-    $[21] = t13;
+  let t11;
+  if ($[17] !== items) {
+    t11 = items.map(_temp);
+    $[17] = items;
+    $[18] = t11;
   } else {
-    t13 = $[21];
+    t11 = $[18];
   }
-  let t14;
-  if ($[22] !== t13) {
-    t14 = /*#__PURE__*/jsx("div", {
+  let t12;
+  if ($[19] !== t11) {
+    t12 = /*#__PURE__*/jsx("div", {
       ref: menuContainerRef,
       className: classes.MenuOverlay,
       children: /*#__PURE__*/jsx(ActionList, {
-        children: t13
+        children: t11
       })
     });
-    $[22] = t13;
-    $[23] = t14;
+    $[19] = t11;
+    $[20] = t12;
   } else {
-    t14 = $[23];
+    t12 = $[20];
   }
-  let t15;
-  if ($[24] !== detailsRefCallback || $[25] !== t12 || $[26] !== t14) {
-    t15 = /*#__PURE__*/jsxs(Details, {
+  let t13;
+  if ($[21] !== detailsRefCallback || $[22] !== t10 || $[23] !== t12) {
+    t13 = /*#__PURE__*/jsxs(Details, {
       ref: detailsRefCallback,
       className: classes.MenuDetails,
-      children: [t12, t14]
+      children: [t10, t12]
     });
-    $[24] = detailsRefCallback;
-    $[25] = t12;
-    $[26] = t14;
-    $[27] = t15;
+    $[21] = detailsRefCallback;
+    $[22] = t10;
+    $[23] = t12;
+    $[24] = t13;
   } else {
-    t15 = $[27];
+    t13 = $[24];
   }
-  return t15;
+  return t13;
 });
 BreadcrumbsMenuItem.displayName = 'Breadcrumbs.MenuItem';
 const getValidChildren = children => {

package/dist/Button/ButtonBase.js

@@ -9,7 +9,7 @@ import { isElement } from 'react-is';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useId } from '../hooks/useId.js';
 import Box from '../Box/Box.js';
-import StyledSpinner from '../Spinner/Spinner.js';
+import Spinner from '../Spinner/Spinner.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 import { AriaStatus } from '../live-region/AriaStatus.js';
 import CounterLabel from '../CounterLabel/CounterLabel.js';
@@ -17,7 +17,7 @@ import CounterLabel from '../CounterLabel/CounterLabel.js';
 const renderModuleVisual = (Visual, loading, visualName, counterLabel) => /*#__PURE__*/jsx("span", {
   "data-component": visualName,
   className: clsx(!counterLabel && classes.Visual, loading ? classes.LoadingSpinner : classes.VisualWrap),
-  children: loading ? /*#__PURE__*/jsx(StyledSpinner, {
+  children: loading ? /*#__PURE__*/jsx(Spinner, {
     size: "small"
   }) : isElement(Visual) ? Visual : /*#__PURE__*/jsx(Visual, {})
 });
@@ -102,7 +102,7 @@ const ButtonBase = /*#__PURE__*/forwardRef(({
         "aria-labelledby": loading ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') : ariaLabelledBy,
         id: id,
         onClick: loading ? undefined : onClick,
-        children: Icon ? loading ? /*#__PURE__*/jsx(StyledSpinner, {
+        children: Icon ? loading ? /*#__PURE__*/jsx(Spinner, {
           size: "small"
         }) : isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {}) : /*#__PURE__*/jsxs(Fragment, {
           children: [/*#__PURE__*/jsxs(Box, {
@@ -113,7 +113,7 @@ const ButtonBase = /*#__PURE__*/forwardRef(({
             children: [
             /* If there are no leading/trailing visuals/actions to replace with a loading spinner,
              render a loading spiner in place of the button content. */
-            loading && !LeadingVisual && !TrailingVisual && !TrailingAction && count === undefined && renderModuleVisual(StyledSpinner, loading, 'loadingSpinner', false),
+            loading && !LeadingVisual && !TrailingVisual && !TrailingAction && count === undefined && renderModuleVisual(Spinner, loading, 'loadingSpinner', false),
             /* Render a leading visual unless the button is in a loading state.
               Then replace the leading visual with a loading spinner. */
             LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false), children && /*#__PURE__*/jsx("span", {
@@ -179,7 +179,7 @@ const ButtonBase = /*#__PURE__*/forwardRef(({
       // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
       ,
       onClick: loading ? undefined : onClick,
-      children: Icon ? loading ? /*#__PURE__*/jsx(StyledSpinner, {
+      children: Icon ? loading ? /*#__PURE__*/jsx(Spinner, {
         size: "small"
       }) : isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {}) : /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsxs("span", {
@@ -189,7 +189,7 @@ const ButtonBase = /*#__PURE__*/forwardRef(({
           children: [
           /* If there are no leading/trailing visuals/actions to replace with a loading spinner,
              render a loading spiner in place of the button content. */
-          loading && !LeadingVisual && !TrailingVisual && !TrailingAction && count === undefined && renderModuleVisual(StyledSpinner, loading, 'loadingSpinner', false),
+          loading && !LeadingVisual && !TrailingVisual && !TrailingAction && count === undefined && renderModuleVisual(Spinner, loading, 'loadingSpinner', false),
           /* Render a leading visual unless the button is in a loading state.
              Then replace the leading visual with a loading spinner. */
           LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false), children && /*#__PURE__*/jsx("span", {

package/dist/Button/LinkButton.d.ts

@@ -1,6 +1,6 @@
-import type { LinkButtonProps, ButtonProps } from './types';
+import type { LinkButtonProps as BaseLinkButtonProps, ButtonProps } from './types';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
-type MyProps = LinkButtonProps & ButtonProps;
-declare const LinkButton: PolymorphicForwardRefComponent<"a", MyProps>;
+export type LinkButtonProps = Omit<BaseLinkButtonProps & ButtonProps, 'sx'>;
+declare const LinkButton: PolymorphicForwardRefComponent<"a", LinkButtonProps>;
 export { LinkButton };
 //# sourceMappingURL=LinkButton.d.ts.map

package/dist/Button/LinkButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../src/Button/LinkButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,eAAe,EAAE,WAAW,EAAC,MAAM,SAAS,CAAA;AAEzD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAG/F,KAAK,OAAO,GAAG,eAAe,GAAG,WAAW,CAAA;AAE5C,QAAA,MAAM,UAAU,EAQX,8BAA8B,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;AAEjD,OAAO,EAAC,UAAU,EAAC,CAAA"}
+{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../src/Button/LinkButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,eAAe,IAAI,mBAAmB,EAAE,WAAW,EAAC,MAAM,SAAS,CAAA;AAEhF,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,mBAAmB,GAAG,WAAW,EAAE,IAAI,CAAC,CAAA;AAE3E,QAAA,MAAM,UAAU,EAMV,8BAA8B,CAAC,GAAG,EAAE,eAAe,CAAC,CAAA;AAE1D,OAAO,EAAC,UAAU,EAAC,CAAA"}

package/dist/Button/LinkButton.js

@@ -1,18 +1,15 @@
 import { forwardRef } from 'react';
 import { ButtonBase } from './ButtonBase.js';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { jsx } from 'react/jsx-runtime';
 
 const LinkButton = /*#__PURE__*/forwardRef(({
   children,
   as: Component = 'a',
-  sx = defaultSxProp,
   ...props
 }, forwardedRef) => {
   return /*#__PURE__*/jsx(ButtonBase, {
     as: Component,
     ref: forwardedRef,
-    sx: sx,
     ...props,
     children: children
   });

package/dist/Button/index.d.ts

@@ -1,6 +1,7 @@
 import { IconButton } from './IconButton';
 import { LinkButton } from './LinkButton';
 export type { ButtonProps, IconButtonProps, ButtonBaseProps } from './types';
+export type { LinkButtonProps } from './LinkButton';
 export { IconButton, LinkButton };
 export { ButtonComponent as Button } from './Button';
 export { ButtonBase } from './ButtonBase';

package/dist/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EAAC,WAAW,EAAE,eAAe,EAAE,eAAe,EAAC,MAAM,SAAS,CAAA;AAC1E,OAAO,EAAC,UAAU,EAAE,UAAU,EAAC,CAAA;AAC/B,OAAO,EAAC,eAAe,IAAI,MAAM,EAAC,MAAM,UAAU,CAAA;AAClD,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EAAC,WAAW,EAAE,eAAe,EAAE,eAAe,EAAC,MAAM,SAAS,CAAA;AAC1E,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAA;AACjD,OAAO,EAAC,UAAU,EAAE,UAAU,EAAC,CAAA;AAC/B,OAAO,EAAC,eAAe,IAAI,MAAM,EAAC,MAAM,UAAU,CAAA;AAClD,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA"}

package/dist/ButtonGroup/ButtonGroup.d.ts

@@ -1,12 +1,11 @@
 import { type PropsWithChildren } from 'react';
-import { type SxProp } from '../sx';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
-export type ButtonGroupProps = {
+export type ButtonGroupProps = PropsWithChildren<{
     /** The role of the group */
     role?: string;
     /** className passed in for styling */
     className?: string;
-} & PropsWithChildren & SxProp;
+}>;
 declare const ButtonGroup: PolymorphicForwardRefComponent<"div", ButtonGroupProps>;
 export default ButtonGroup;
 //# sourceMappingURL=ButtonGroup.d.ts.map

package/dist/ButtonGroup/ButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AACnD,OAAO,EAAC,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AAKjC,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAG/F,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,iBAAiB,GACnB,MAAM,CAAA;AAER,QAAA,MAAM,WAAW,EAmBX,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":"AAAA,OAAc,EAAC,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAKnD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,QAAA,MAAM,WAAW,EAmBX,8BAA8B,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAA;AAI7D,eAAe,WAAW,CAAA"}

package/dist/ButtonGroup/ButtonGroup.js

@@ -3,19 +3,20 @@ import React from 'react';
 import classes from './ButtonGroup.module.css.js';
 import { clsx } from 'clsx';
 import { useFocusZone } from '../hooks/useFocusZone.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx } from 'react/jsx-runtime';
 import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
 import { FocusKeys } from '@primer/behaviors';
 
 const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(t0, forwardRef) {
-  const $ = c(18);
+  const $ = c(20);
   let children;
   let className;
   let rest;
   let role;
+  let t1;
   if ($[0] !== t0) {
     ({
+      as: t1,
       children,
       className,
       role,
@@ -26,65 +27,69 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(t0, forwa
     $[2] = className;
     $[3] = rest;
     $[4] = role;
+    $[5] = t1;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
     role = $[4];
+    t1 = $[5];
   }
-  let t1;
-  if ($[5] !== children) {
-    t1 = React.Children.map(children, _temp);
-    $[5] = children;
-    $[6] = t1;
+  const BaseComponent = t1 === undefined ? "div" : t1;
+  let t2;
+  if ($[6] !== children) {
+    t2 = React.Children.map(children, _temp);
+    $[6] = children;
+    $[7] = t2;
   } else {
-    t1 = $[6];
+    t2 = $[7];
   }
-  const buttons = t1;
+  const buttons = t2;
   const buttonRef = useProvidedRefOrCreate(forwardRef);
-  const t2 = role !== "toolbar";
-  let t3;
-  if ($[7] !== buttonRef || $[8] !== t2) {
-    t3 = {
+  const t3 = role !== "toolbar";
+  let t4;
+  if ($[8] !== buttonRef || $[9] !== t3) {
+    t4 = {
       containerRef: buttonRef,
-      disabled: t2,
+      disabled: t3,
       bindKeys: FocusKeys.ArrowHorizontal,
       focusOutBehavior: "wrap"
     };
-    $[7] = buttonRef;
-    $[8] = t2;
+    $[8] = buttonRef;
     $[9] = t3;
+    $[10] = t4;
   } else {
-    t3 = $[9];
+    t4 = $[10];
   }
-  useFocusZone(t3);
-  let t4;
-  if ($[10] !== className) {
-    t4 = clsx(className, classes.ButtonGroup);
-    $[10] = className;
-    $[11] = t4;
+  useFocusZone(t4);
+  let t5;
+  if ($[11] !== className) {
+    t5 = clsx(className, classes.ButtonGroup);
+    $[11] = className;
+    $[12] = t5;
   } else {
-    t4 = $[11];
+    t5 = $[12];
   }
-  let t5;
-  if ($[12] !== buttonRef || $[13] !== buttons || $[14] !== rest || $[15] !== role || $[16] !== t4) {
-    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
+  let t6;
+  if ($[13] !== BaseComponent || $[14] !== buttonRef || $[15] !== buttons || $[16] !== rest || $[17] !== role || $[18] !== t5) {
+    t6 = /*#__PURE__*/jsx(BaseComponent, {
       ref: buttonRef,
-      className: t4,
+      className: t5,
       role: role,
       ...rest,
       children: buttons
     });
-    $[12] = buttonRef;
-    $[13] = buttons;
-    $[14] = rest;
-    $[15] = role;
-    $[16] = t4;
-    $[17] = t5;
+    $[13] = BaseComponent;
+    $[14] = buttonRef;
+    $[15] = buttons;
+    $[16] = rest;
+    $[17] = role;
+    $[18] = t5;
+    $[19] = t6;
   } else {
-    t5 = $[17];
+    t6 = $[19];
   }
-  return t5;
+  return t6;
 });
 ButtonGroup.displayName = 'ButtonGroup';
 function _temp(child, index) {

package/dist/Checkbox/Checkbox.d.ts

@@ -1,5 +1,4 @@
 import React, { type InputHTMLAttributes } from 'react';
-import { type SxProp } from '../sx';
 import type { FormValidationStatus } from '../utils/types/FormValidationStatus';
 export type CheckboxProps = {
     /**
@@ -27,7 +26,7 @@ export type CheckboxProps = {
      * Used during form submission and to identify which checkbox inputs are selected
      */
     value?: string;
-} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> & SxProp;
+} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'>;
 /**
  * An accessible, native checkbox component
  */

package/dist/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAiD,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AACxH,OAAO,EAAC,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAA;AAM7E,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,MAAM,CAAA;AAER;;GAEG;AACH,QAAA,MAAM,QAAQ,qGAsEb,CAAA;AAID,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAiD,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAExH,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAA;AAK7E,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,CAAA;AAE3D;;GAEG;AACH,QAAA,MAAM,QAAQ,qGAgDb,CAAA;AAID,eAAe,QAAQ,CAAA"}