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

package/dist/Avatar/Avatar.js

@@ -2,17 +2,15 @@ import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import React from 'react';
 import { isResponsiveValue } from '../hooks/useResponsiveValue.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import classes from './Avatar.module.css.js';
 import { jsx } from 'react/jsx-runtime';
 
 const DEFAULT_AVATAR_SIZE = 20;
 const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(t0, ref) {
-  const $ = c(29);
+  const $ = c(27);
   let className;
   let rest;
   let style;
-  let sxProp;
   let t1;
   let t2;
   let t3;
@@ -21,7 +19,6 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(t0, ref) {
       alt: t1,
       size: t2,
       square: t3,
-      sx: sxProp,
       className,
       style,
       ...rest
@@ -30,33 +27,31 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(t0, ref) {
     $[1] = className;
     $[2] = rest;
     $[3] = style;
-    $[4] = sxProp;
-    $[5] = t1;
-    $[6] = t2;
-    $[7] = t3;
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
   } else {
     className = $[1];
     rest = $[2];
     style = $[3];
-    sxProp = $[4];
-    t1 = $[5];
-    t2 = $[6];
-    t3 = $[7];
+    t1 = $[4];
+    t2 = $[5];
+    t3 = $[6];
   }
   const alt = t1 === undefined ? "" : t1;
   const size = t2 === undefined ? DEFAULT_AVATAR_SIZE : t2;
   const square = t3 === undefined ? false : t3;
   let t4;
-  if ($[8] !== size) {
+  if ($[7] !== size) {
     t4 = isResponsiveValue(size);
-    $[8] = size;
-    $[9] = t4;
+    $[7] = size;
+    $[8] = t4;
   } else {
-    t4 = $[9];
+    t4 = $[8];
   }
   const isResponsive = t4;
   let cssSizeVars;
-  if ($[10] !== isResponsive || $[11] !== size) {
+  if ($[9] !== isResponsive || $[10] !== size) {
     cssSizeVars = {};
     if (isResponsive) {
       for (const [key, value] of Object.entries(size)) {
@@ -65,40 +60,39 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(t0, ref) {
     } else {
       cssSizeVars["--avatarSize-regular"] = `${size}px`;
     }
-    $[10] = isResponsive;
-    $[11] = size;
-    $[12] = cssSizeVars;
+    $[9] = isResponsive;
+    $[10] = size;
+    $[11] = cssSizeVars;
   } else {
-    cssSizeVars = $[12];
+    cssSizeVars = $[11];
   }
   let t5;
-  if ($[13] !== className) {
+  if ($[12] !== className) {
     t5 = clsx(className, classes.Avatar);
-    $[13] = className;
-    $[14] = t5;
+    $[12] = className;
+    $[13] = t5;
   } else {
-    t5 = $[14];
+    t5 = $[13];
   }
   const t6 = isResponsive ? "" : undefined;
   const t7 = square ? "" : undefined;
   const t8 = isResponsive ? undefined : size;
   const t9 = isResponsive ? undefined : size;
   let t10;
-  if ($[15] !== cssSizeVars || $[16] !== style) {
+  if ($[14] !== cssSizeVars || $[15] !== style) {
     t10 = style ? {
       ...cssSizeVars,
       ...style
     } : cssSizeVars;
-    $[15] = cssSizeVars;
-    $[16] = style;
-    $[17] = t10;
+    $[14] = cssSizeVars;
+    $[15] = style;
+    $[16] = t10;
   } else {
-    t10 = $[17];
+    t10 = $[16];
   }
   let t11;
-  if ($[18] !== alt || $[19] !== ref || $[20] !== rest || $[21] !== sxProp || $[22] !== t10 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9) {
-    t11 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: "img",
+  if ($[17] !== alt || $[18] !== ref || $[19] !== rest || $[20] !== t10 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8 || $[25] !== t9) {
+    t11 = /*#__PURE__*/jsx("img", {
       "data-component": "Avatar",
       className: t5,
       ref: ref,
@@ -108,22 +102,20 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(t0, ref) {
       width: t8,
       height: t9,
       style: t10,
-      sx: sxProp,
       ...rest
     });
-    $[18] = alt;
-    $[19] = ref;
-    $[20] = rest;
-    $[21] = sxProp;
-    $[22] = t10;
-    $[23] = t5;
-    $[24] = t6;
-    $[25] = t7;
-    $[26] = t8;
-    $[27] = t9;
-    $[28] = t11;
+    $[17] = alt;
+    $[18] = ref;
+    $[19] = rest;
+    $[20] = t10;
+    $[21] = t5;
+    $[22] = t6;
+    $[23] = t7;
+    $[24] = t8;
+    $[25] = t9;
+    $[26] = t11;
   } else {
-    t11 = $[28];
+    t11 = $[26];
   }
   return t11;
 });

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,8 +1,5 @@
 import type { To } from 'history';
 import React from 'react';
-import type { SxProp } from '../sx';
-import type { ComponentProps } from '../utils/types';
-import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
 export type BreadcrumbsProps = React.PropsWithChildren<{
     /**
      * Optional class name for the breadcrumbs container.
@@ -21,27 +18,33 @@ export type BreadcrumbsProps = React.PropsWithChildren<{
      * In the "spacious" option, the breadcrumbs will have increased padding and a more relaxed layout.
      */
     variant?: 'normal' | 'spacious';
-} & SxProp>;
-declare function Breadcrumbs({ className, children, sx: sxProp, overflow, variant }: BreadcrumbsProps): React.JSX.Element;
+    /**
+     * Allows passing of CSS custom properties to the breadcrumbs container.
+     */
+    style?: React.CSSProperties;
+}>;
+declare function Breadcrumbs({ className, children, style, overflow, variant }: BreadcrumbsProps): React.JSX.Element;
 declare namespace Breadcrumbs {
     var displayName: string;
 }
-type StyledBreadcrumbsItemProps = {
+type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends any ? Omit<T, TOmitted> : never;
+type StyledBreadcrumbsItemProps<As extends React.ElementType> = {
+    as?: As;
     to?: To;
     selected?: boolean;
     className?: string;
-} & SxProp & React.HTMLAttributes<HTMLAnchorElement> & React.ComponentPropsWithRef<'a'>;
-declare const BreadcrumbsItem: PolymorphicForwardRefComponent<"a", StyledBreadcrumbsItemProps>;
-export type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItem>;
+    style?: React.CSSProperties;
+} & DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? 'a' : As>, 'as'>;
+export type BreadcrumbsItemProps<As extends React.ElementType = 'a'> = StyledBreadcrumbsItemProps<As>;
 declare const _default: typeof Breadcrumbs & {
-    Item: PolymorphicForwardRefComponent<"a", StyledBreadcrumbsItemProps>;
+    Item: React.ForwardRefExoticComponent<Omit<StyledBreadcrumbsItemProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<any>>;
 };
 export default _default;
 /**
  * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
  */
 export declare const Breadcrumb: typeof Breadcrumbs & {
-    Item: PolymorphicForwardRefComponent<"a", StyledBreadcrumbsItemProps>;
+    Item: React.ForwardRefExoticComponent<Omit<StyledBreadcrumbsItemProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<any>>;
 };
 /**
  * @deprecated Use the `BreadcrumbsProps` type instead
@@ -50,5 +53,5 @@ export type BreadcrumbProps = BreadcrumbsProps;
 /**
  * @deprecated Use the `BreadcrumbsItemProps` type instead
  */
-export type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbsItem>;
+export type BreadcrumbItemProps<As extends React.ElementType = 'a'> = BreadcrumbsItemProps<As>;
 //# sourceMappingURL=Breadcrumbs.d.ts.map

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;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"}
+{"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,KAA6E,MAAM,OAAO,CAAA;AAYjG,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD;;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;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAC,CAAA;AA8GF,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAiB,EAAE,OAAkB,EAAC,EAAE,gBAAgB,qBA2MzG;kBA3MQ,WAAW;;;AAwNpB,KAAK,gBAAgB,CAAC,CAAC,EAAE,QAAQ,SAAS,WAAW,IAAI,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAA;AAElG,KAAK,0BAA0B,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IAC9D,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,GAAG,gBAAgB,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,WAAW,SAAS,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,CAAA;AAwBhG,MAAM,MAAM,oBAAoB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,0BAA0B,CAAC,EAAE,CAAC,CAAA;;;;AACrG,wBAAkE;AAElE;;GAEG;AACH,eAAO,MAAM,UAAU;;CAAsD,CAAA;AAE7E;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAA;AAE9C;;GAEG;AACH,MAAM,MAAM,mBAAmB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,oBAAoB,CAAC,EAAE,CAAC,CAAA"}

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -2,7 +2,6 @@ import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import React, { useRef, useCallback, useState, useMemo, useEffect } from 'react';
 import classes from './Breadcrumbs.module.css.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { ActionList } from '../ActionList/index.js';
 import { IconButton } from '../Button/IconButton.js';
 import { KebabHorizontalIcon } from '@primer/octicons-react';
@@ -208,7 +207,7 @@ const getValidChildren = children => {
 function Breadcrumbs({
   className,
   children,
-  sx: sxProp,
+  style,
   overflow = 'wrap',
   variant = 'normal'
 }) {
@@ -237,11 +236,6 @@ function Breadcrumbs({
   const [rootItemWidth, setRootItemWidth] = useState(0);
   const MENU_BUTTON_FALLBACK_WIDTH = 32; // Design system small IconButton
   const [menuButtonWidth, setMenuButtonWidth] = useState(MENU_BUTTON_FALLBACK_WIDTH);
-
-  // if (typeof window !== 'undefined') {
-  //   effectiveOverflow = overflow
-  // }
-
   useEffect(() => {
     var _containerRef$current;
     const listElement = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector('ol');
@@ -354,22 +348,20 @@ function Breadcrumbs({
       }
     }
   }, [overflowMenuEnabled, overflow, menuItems, effectiveHideRoot, measureMenuButton, visibleItems, rootItem, children]);
-  return overflowMenuEnabled ? /*#__PURE__*/jsx(BoxWithFallback, {
-    as: "nav",
+  return overflowMenuEnabled ? /*#__PURE__*/jsx("nav", {
     className: clsx(className, classes.BreadcrumbsBase),
     "aria-label": "Breadcrumbs",
-    sx: sxProp,
+    style: style,
     ref: containerRef,
     "data-overflow": overflow,
     "data-variant": variant,
     children: /*#__PURE__*/jsx(BreadcrumbsList, {
       children: finalChildren
     })
-  }) : /*#__PURE__*/jsx(BoxWithFallback, {
-    as: "nav",
+  }) : /*#__PURE__*/jsx("nav", {
     className: clsx(className, classes.BreadcrumbsBase),
     "aria-label": "Breadcrumbs",
-    sx: sxProp,
+    style: style,
     "data-variant": variant,
     children: /*#__PURE__*/jsx(BreadcrumbsList, {
       children: wrappedChildren
@@ -400,58 +392,67 @@ const ItemSeparator = () => {
   }
   return t0;
 };
-const BreadcrumbsItem = /*#__PURE__*/React.forwardRef((t0, ref) => {
-  const $ = c(12);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+function BreadcrumbsItemComponent(props, ref) {
+  const $ = c(14);
   let className;
   let rest;
   let selected;
-  if ($[0] !== t0) {
+  let t0;
+  if ($[0] !== props) {
     ({
+      as: t0,
       selected,
       className,
       ...rest
-    } = t0);
-    $[0] = t0;
+    } = props);
+    $[0] = props;
     $[1] = className;
     $[2] = rest;
     $[3] = selected;
+    $[4] = t0;
   } else {
     className = $[1];
     rest = $[2];
     selected = $[3];
+    t0 = $[4];
   }
+  const Component = t0 === undefined ? "a" : t0;
   const t1 = selected && "selected";
   let t2;
-  if ($[4] !== className || $[5] !== t1) {
+  if ($[5] !== className || $[6] !== t1) {
     t2 = clsx(className, classes.Item, t1);
-    $[4] = className;
-    $[5] = t1;
-    $[6] = t2;
+    $[5] = className;
+    $[6] = t1;
+    $[7] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[7];
   }
   const t3 = selected ? "page" : undefined;
   let t4;
-  if ($[7] !== ref || $[8] !== rest || $[9] !== t2 || $[10] !== t3) {
-    t4 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: "a",
+  if ($[8] !== Component || $[9] !== ref || $[10] !== rest || $[11] !== t2 || $[12] !== t3) {
+    t4 = /*#__PURE__*/jsx(Component, {
       className: t2,
       "aria-current": t3,
       ref: ref,
       ...rest
     });
-    $[7] = ref;
-    $[8] = rest;
-    $[9] = t2;
-    $[10] = t3;
-    $[11] = t4;
+    $[8] = Component;
+    $[9] = ref;
+    $[10] = rest;
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = t4;
   } else {
-    t4 = $[11];
+    t4 = $[13];
   }
   return t4;
-});
+}
+BreadcrumbsItemComponent.displayName = 'Breadcrumbs.Item';
+const BreadcrumbsItem = /*#__PURE__*/React.forwardRef(BreadcrumbsItemComponent);
 Breadcrumbs.displayName = 'Breadcrumbs';
-BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 var Breadcrumbs$1 = Object.assign(Breadcrumbs, {
   Item: BreadcrumbsItem
 });

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../src/Button/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAA;AA4BxC,QAAA,MAAM,UAAU,EAiSX,8BAA8B,CAAC,QAAQ,GAAG,GAAG,EAAE,WAAW,CAAC,CAAA;AAEhE,OAAO,EAAC,UAAU,EAAC,CAAA"}
+{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../src/Button/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAI/F,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAA;AAkCxC,QAAA,MAAM,UAAU,EAgSX,8BAA8B,CAAC,QAAQ,GAAG,GAAG,EAAE,WAAW,CAAC,CAAA;AAEhE,OAAO,EAAC,UAAU,EAAC,CAAA"}

package/dist/Button/ButtonBase.js

@@ -1,4 +1,6 @@
 import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import sx from '../sx.js';
 import { getAlignContentSize } from './styles.js';
 import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
 import { defaultSxProp } from '../utils/defaultSxProp.js';
@@ -8,12 +10,15 @@ import classes from './ButtonBase.module.css.js';
 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 Spinner from '../Spinner/Spinner.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 import { AriaStatus } from '../live-region/AriaStatus.js';
 import CounterLabel from '../CounterLabel/CounterLabel.js';
 
+const BoxTemporaryWorkaround = styled.span.withConfig({
+  displayName: "ButtonBase__BoxTemporaryWorkaround",
+  componentId: "sc-107cqdy-0"
+})(["", ";"], sx);
 const renderModuleVisual = (Visual, loading, visualName, counterLabel) => /*#__PURE__*/jsx("span", {
   "data-component": visualName,
   className: clsx(!counterLabel && classes.Visual, loading ? classes.LoadingSpinner : classes.VisualWrap),
@@ -79,7 +84,7 @@ const ButtonBase = /*#__PURE__*/forwardRef(({
       if: typeof loading !== 'undefined',
       className: block ? classes.ConditionalWrapper : undefined,
       "data-loading-wrapper": true,
-      children: [/*#__PURE__*/jsx(Box, {
+      children: [/*#__PURE__*/jsx(BoxTemporaryWorkaround, {
         as: Component,
         sx: sxProp,
         "aria-disabled": loading ? true : undefined,
@@ -105,8 +110,7 @@ const ButtonBase = /*#__PURE__*/forwardRef(({
         children: Icon ? loading ? /*#__PURE__*/jsx(Spinner, {
           size: "small"
         }) : isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {}) : /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsxs(Box, {
-            as: "span",
+          children: [/*#__PURE__*/jsxs(BoxTemporaryWorkaround, {
             "data-component": "buttonContent",
             sx: getAlignContentSize(alignContent),
             className: classes.ButtonContent,

package/dist/CheckboxGroup/CheckboxGroup.d.ts

@@ -2,7 +2,7 @@ import type { ChangeEvent, FC } from 'react';
 import React from 'react';
 import type { CheckboxOrRadioGroupProps } from '../internal/components/CheckboxOrRadioGroup';
 import { CheckboxGroupContext } from './CheckboxGroupContext';
-type CheckboxGroupProps = {
+export type CheckboxGroupProps = {
     /**
      * An onChange handler that gets called when any of the checkboxes change
      */

package/dist/CheckboxGroup/CheckboxGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,WAAW,EAAsB,EAAE,EAAC,MAAM,OAAO,CAAA;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,6CAA6C,CAAA;AAQ1F,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAA;AAE3D,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CAC3E,GAAG,yBAAyB,CAAA;AAmD7B,OAAO,EAAC,oBAAoB,EAAC,CAAA;;;;;;;;;;AAE7B,wBAIE"}
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,WAAW,EAAsB,EAAE,EAAC,MAAM,OAAO,CAAA;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,6CAA6C,CAAA;AAQ1F,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAA;AAE3D,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CAC3E,GAAG,yBAAyB,CAAA;AAmD7B,OAAO,EAAC,oBAAoB,EAAC,CAAA;;;;;;;;;;AAE7B,wBAIE"}

package/dist/CheckboxGroup/index.d.ts

@@ -1,2 +1,2 @@
-export { default, CheckboxGroupContext } from './CheckboxGroup';
+export { default, CheckboxGroupContext, type CheckboxGroupProps } from './CheckboxGroup';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CheckboxGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAE,oBAAoB,EAAC,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CheckboxGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAE,oBAAoB,EAAE,KAAK,kBAAkB,EAAC,MAAM,iBAAiB,CAAA"}

package/dist/CircleBadge/CircleBadge-87549d20.css

@@ -0,0 +1,2 @@
+.prc-CircleBadge-CircleBadge-AFS8i{align-items:center;background-color:var(--bgColor-default,var(--color-canvas-default));border-radius:50%;box-shadow:var(--shadow-resting-medium,var(--color-shadow-medium));display:flex;justify-content:center}.prc-CircleBadge-CircleBadge-AFS8i:where([data-inline]){display:inline-flex}.prc-CircleBadge-CircleBadgeIcon-sUrCi{height:auto;max-height:55%;max-width:60%}
+/*# sourceMappingURL=CircleBadge-87549d20.css.map */

package/dist/CircleBadge/CircleBadge-87549d20.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CircleBadge/CircleBadge.module.css"],"names":[],"mappings":"AAAA,mCAEE,kBAAmB,CAEnB,mEAAwC,CACxC,iBAAkB,CAClB,kEAAwC,CALxC,YAAa,CAEb,sBAQF,CAHE,wDACE,mBACF,CAGF,uCACE,WAAY,CACZ,cAAe,CACf,aACF","file":"CircleBadge-87549d20.css","sourcesContent":[".CircleBadge {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--bgColor-default);\n  border-radius: 50%;\n  box-shadow: var(--shadow-resting-medium);\n\n  &:where([data-inline]) {\n    display: inline-flex;\n  }\n}\n\n.CircleBadgeIcon {\n  height: auto;\n  max-height: 55%;\n  max-width: 60%;\n}\n"]}

package/dist/CircleBadge/CircleBadge.d.ts

@@ -1,31 +1,31 @@
-import type { SxProp } from '../sx';
 import type { ComponentProps } from '../utils/types';
+import type { OcticonProps } from '../Octicon';
 declare const variantSizes: {
     small: number;
     medium: number;
     large: number;
 };
-type StyledCircleBadgeProps = {
+export type CircleBadgeProps<As extends React.ElementType> = {
     inline?: boolean;
     variant?: keyof typeof variantSizes;
     size?: number;
-} & SxProp;
-declare const CircleBadge: import("styled-components").StyledComponent<"div", any, StyledCircleBadgeProps, never>;
-declare const CircleBadgeIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
-    icon: React.ElementType;
-    color?: string;
-} & import("@primer/octicons-react").IconProps & SxProp & import("react").RefAttributes<SVGSVGElement>>, any, SxProp, never>;
-export type CircleBadgeProps = ComponentProps<typeof CircleBadge>;
+    as?: As;
+    className?: string;
+} & React.ComponentPropsWithRef<React.ElementType extends As ? 'a' : As>;
+declare const CircleBadgeIcon: {
+    (props: OcticonProps): import("react").JSX.Element;
+    displayName: string;
+};
 export type CircleBadgeIconProps = ComponentProps<typeof CircleBadgeIcon>;
 /**
  * @deprecated This component is deprecated.
  * Replace component with specific icon imports from `@primer/octicons-react` and customized styling.
  */
-declare const _default: string & import("styled-components").StyledComponentBase<"div", any, StyledCircleBadgeProps, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
-    Icon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
-        icon: React.ElementType;
-        color?: string;
-    } & import("@primer/octicons-react").IconProps & SxProp & import("react").RefAttributes<SVGSVGElement>>, any, SxProp, never>;
+declare const _default: (<As extends React.ElementType>({ as: Component, ...props }: CircleBadgeProps<As>) => import("react").JSX.Element) & {
+    Icon: {
+        (props: OcticonProps): import("react").JSX.Element;
+        displayName: string;
+    };
 };
 export default _default;
 //# sourceMappingURL=CircleBadge.d.ts.map

package/dist/CircleBadge/CircleBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircleBadge.d.ts","sourceRoot":"","sources":["../../src/CircleBadge/CircleBadge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAGjC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAElD,QAAA,MAAM,YAAY;;;;CAIjB,CAAA;AAED,KAAK,sBAAsB,GAAG;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAA;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,GAAG,MAAM,CAAA;AAUV,QAAA,MAAM,WAAW,wFAShB,CAAA;AACD,QAAA,MAAM,eAAe;;;4HAIpB,CAAA;AAID,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAEjE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;AAEzE;;;GAGG;;;;;;;AACH,wBAAkE"}
+{"version":3,"file":"CircleBadge.d.ts","sourceRoot":"","sources":["../../src/CircleBadge/CircleBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAGlD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAG5C,QAAA,MAAM,YAAY;;;;CAIjB,CAAA;AAED,MAAM,MAAM,gBAAgB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAA;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,WAAW,SAAS,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC,CAAA;AAmBxE,QAAA,MAAM,eAAe;YAAW,YAAY;;CAA8D,CAAA;AAI1G,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;AAEzE;;;GAGG;0BAlBkB,EAAE,SAAS,KAAK,CAAC,WAAW,+BAAqC,gBAAgB,CAAC,EAAE,CAAC;;gBAS1E,YAAY;;;;AAU5C,wBAAkE"}

package/dist/CircleBadge/CircleBadge.js

@@ -1,7 +1,8 @@
-import styled from 'styled-components';
-import { get } from '../constants.js';
-import sx from '../sx.js';
+import { c } from 'react-compiler-runtime';
 import isNumeric from '../utils/isNumeric.js';
+import styles from './CircleBadge.module.css.js';
+import { clsx } from 'clsx';
+import { jsx } from 'react/jsx-runtime';
 import Octicon from '../Octicon/Octicon.js';
 
 const variantSizes = {
@@ -19,16 +20,71 @@ const sizeStyles = ({
     height: calc
   };
 };
-const CircleBadge = styled.div.withConfig({
-  displayName: "CircleBadge",
-  componentId: "sc-nywehb-0"
-})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";"], ({
-  inline = false
-}) => inline ? 'inline-flex' : 'flex', get('colors.canvas.default'), get('shadows.shadow.medium'), sizeStyles, sx);
-const CircleBadgeIcon = styled(Octicon).withConfig({
-  displayName: "CircleBadge__CircleBadgeIcon",
-  componentId: "sc-nywehb-1"
-})(["height:auto;max-width:60%;max-height:55%;"]);
+const CircleBadge = t0 => {
+  const $ = c(12);
+  let T0;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  if ($[0] !== t0) {
+    const {
+      as: t5,
+      ...props
+    } = t0;
+    const Component = t5 === undefined ? "div" : t5;
+    T0 = Component;
+    t1 = props;
+    t2 = clsx(styles.CircleBadge, props.className);
+    t3 = props.inline ? "" : undefined;
+    t4 = sizeStyles(props);
+    $[0] = t0;
+    $[1] = T0;
+    $[2] = t1;
+    $[3] = t2;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    T0 = $[1];
+    t1 = $[2];
+    t2 = $[3];
+    t3 = $[4];
+    t4 = $[5];
+  }
+  let t5;
+  if ($[6] !== T0 || $[7] !== t1 || $[8] !== t2 || $[9] !== t3 || $[10] !== t4) {
+    t5 = /*#__PURE__*/jsx(T0, {
+      ...t1,
+      className: t2,
+      "data-inline": t3,
+      style: t4
+    });
+    $[6] = T0;
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  return t5;
+};
+const CircleBadgeIcon = props => {
+  const $ = c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = /*#__PURE__*/jsx(Octicon, {
+      className: styles.CircleBadgeIcon,
+      ...props
+    });
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
 CircleBadgeIcon.displayName = 'CircleBadge.Icon';
 /**
  * @deprecated This component is deprecated.

package/dist/CircleBadge/CircleBadge.module.css.js

@@ -0,0 +1,5 @@
+import './CircleBadge-87549d20.css';
+
+var styles = {"CircleBadge":"prc-CircleBadge-CircleBadge-AFS8i","CircleBadgeIcon":"prc-CircleBadge-CircleBadgeIcon-sUrCi"};
+
+export { styles as default };