@primer/react 38.30.0-rc.dc0369509 → 38.30.1-rc.0d136c1b7

package/dist/UnderlineNav/UnderlineNavItem.js

@@ -1,46 +1,39 @@
-import React, { forwardRef, useRef, useContext } from 'react';
+import React, { forwardRef, useRef, useContext, useSyncExternalStore, useCallback } from 'react';
 import { UnderlineNavContext } from './UnderlineNavContext.js';
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
 import { UnderlineItem } from '../internal/components/UnderlineTabbedInterface.js';
 import classes from './UnderlineNavItem.module.css.js';
+import { UnderlineNavItemsRegistry } from './UnderlineNavItemsRegistry.js';
 import { jsx } from 'react/jsx-runtime';
 
-const UnderlineNavItem = /*#__PURE__*/forwardRef(({
-  as: Component = 'a',
-  href = '#',
-  children,
-  counter,
-  onSelect,
-  'aria-current': ariaCurrent,
-  icon: Icon,
-  leadingVisual,
-  ...props
-}, forwardedRef) => {
-  const backupRef = useRef(null);
-  const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
+const UnderlineNavItem = /*#__PURE__*/forwardRef((allProps, forwardedRef) => {
   const {
-    setChildrenWidth,
-    setNoIconChildrenWidth,
-    loadingCounters,
-    iconsVisible
+    as: Component = 'a',
+    href = '#',
+    children,
+    counter,
+    onSelect,
+    'aria-current': ariaCurrent,
+    icon: Icon,
+    leadingVisual,
+    ...props
+  } = allProps;
+  const ref = useRef(null);
+  const {
+    loadingCounters
   } = useContext(UnderlineNavContext);
-  useIsomorphicLayoutEffect(() => {
-    if (ref.current) {
-      const domRect = ref.current.getBoundingClientRect();
-      const icon = Array.from(ref.current.children).find(child => child.getAttribute('data-component') === 'icon');
-      const content = Array.from(ref.current.children).find(child => child.getAttribute('data-component') === 'text');
-      const text = content.textContent;
-      const iconWidthWithMargin = icon ? icon.getBoundingClientRect().width + Number(getComputedStyle(icon).marginRight.slice(0, -2)) + Number(getComputedStyle(icon).marginLeft.slice(0, -2)) : 0;
-      setChildrenWidth({
-        text,
-        width: domRect.width
-      });
-      setNoIconChildrenWidth({
-        text,
-        width: domRect.width - iconWidthWithMargin
-      });
-    }
-  }, [ref, setChildrenWidth, setNoIconChildrenWidth]);
+  const isOverflowing = useSyncExternalStore(useCallback(onChange => {
+    const observer = new IntersectionObserver(() => onChange(), {
+      threshold: 1
+    });
+    if (ref.current) observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref]),
+  // Note: the IntersectionObserver is just being used as a trigger to re-check
+  // `offsetTop > 0`; this is fast and simpler than checking visibility from
+  // the observed entry. When an item wraps, it will move to the next row which
+  // increases its `offsetTop`
+  () => ref.current ? ref.current.offsetTop > 0 : false, () => false);
+  UnderlineNavItemsRegistry.useRegisterDescendant(isOverflowing ? allProps : null);
   const keyDownHandler = React.useCallback(event => {
     if ((event.key === ' ' || event.key === 'Enter') && !event.defaultPrevented && typeof onSelect === 'function') {
       onSelect(event);
@@ -53,8 +46,10 @@ const UnderlineNavItem = /*#__PURE__*/forwardRef(({
   }, [onSelect]);
   return /*#__PURE__*/jsx("li", {
     className: classes.UnderlineNavItem,
+    ref: ref,
+    "aria-hidden": isOverflowing ? true : allProps['aria-hidden'],
     children: /*#__PURE__*/jsx(UnderlineItem, {
-      ref: ref,
+      ref: forwardedRef,
       as: Component,
       href: href,
       "aria-current": ariaCurrent,
@@ -63,8 +58,8 @@ const UnderlineNavItem = /*#__PURE__*/forwardRef(({
       counter: counter,
       icon: leadingVisual !== null && leadingVisual !== void 0 ? leadingVisual : Icon,
       loadingCounters: loadingCounters,
-      iconsVisible: iconsVisible,
       ...props,
+      tabIndex: isOverflowing ? -1 : allProps.tabIndex,
       children: children
     })
   });

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

@@ -1,4 +1,4 @@
-import './UnderlineNavItem-b65e8fd3.css';
+import './UnderlineNavItem-402cd41c.css';
 
 var classes = {"UnderlineNavItem":"prc-UnderlineNav-UnderlineNavItem-syRjR"};
 

package/dist/UnderlineNav/UnderlineNavItemsRegistry.d.ts

@@ -0,0 +1,51 @@
+import type { IconProps } from '@primer/octicons-react';
+type LinkProps = {
+    download?: string;
+    href?: string;
+    hrefLang?: string;
+    media?: string;
+    ping?: string;
+    rel?: string;
+    target?: string;
+    type?: string;
+    referrerPolicy?: React.AnchorHTMLAttributes<HTMLAnchorElement>['referrerPolicy'];
+};
+export type UnderlineNavItemProps = {
+    /**
+     * Primary content for an UnderlineNav
+     */
+    children?: React.ReactNode;
+    /**
+     * Callback that will trigger both on click selection and keyboard selection.
+     */
+    onSelect?: (event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>) => void;
+    /**
+     * Is `UnderlineNav.Item` current page?
+     */
+    'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean;
+    /**
+     *  Icon before the text
+     *  @deprecated Use the `leadingVisual` prop instead
+     */
+    icon?: React.FunctionComponent<IconProps> | React.ReactElement<any>;
+    /**
+     * Render a visual before the text
+     */
+    leadingVisual?: React.ReactElement;
+    /**
+     * Renders `UnderlineNav.Item` as given component i.e. react-router's Link
+     **/
+    as?: React.ElementType | 'a';
+    /**
+     * Counter
+     */
+    counter?: number | string;
+} & LinkProps;
+/** Registry of currently-overflowing underline items. If an item is not overflowing, its value will be `null`. */
+export declare const UnderlineNavItemsRegistry: {
+    Provider: ({ children, setRegistry }: import("../utils/descendant-registry").ProviderProps<UnderlineNavItemProps | null>) => import("react").JSX.Element;
+    useRegistryState: () => [ReadonlyMap<string, UnderlineNavItemProps | null> | undefined, import("react").Dispatch<import("react").SetStateAction<ReadonlyMap<string, UnderlineNavItemProps | null> | undefined>>];
+    useRegisterDescendant: (value: UnderlineNavItemProps | null) => string;
+};
+export {};
+//# sourceMappingURL=UnderlineNavItemsRegistry.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnderlineNavItemsRegistry.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNavItemsRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAIrD,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,CAAC,CAAA;CACjF,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAExG;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IAE5F;;;OAGG;IAEH,IAAI,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAEnE;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IAElC;;QAEI;IACJ,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,GAAG,CAAA;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC1B,GAAG,SAAS,CAAA;AAEb,kHAAkH;AAClH,eAAO,MAAM,yBAAyB;;;;CAA2D,CAAA"}

package/dist/UnderlineNav/UnderlineNavItemsRegistry.js

@@ -0,0 +1,8 @@
+import { createDescendantRegistry } from '../utils/descendant-registry.js';
+
+// adopted from React.AnchorHTMLAttributes
+
+/** Registry of currently-overflowing underline items. If an item is not overflowing, its value will be `null`. */
+const UnderlineNavItemsRegistry = createDescendantRegistry();
+
+export { UnderlineNavItemsRegistry };

package/dist/UnderlineNav/index.d.ts

@@ -1,5 +1,5 @@
 import type { UnderlineNavProps } from './UnderlineNav';
-import type { UnderlineNavItemProps } from './UnderlineNavItem';
+import type { UnderlineNavItemProps } from './UnderlineNavItemsRegistry';
 declare const UnderlineNav: import("react").ForwardRefExoticComponent<UnderlineNavProps & import("react").RefAttributes<unknown>> & {
     Item: import("../utils/polymorphic").ForwardRefComponent<"a", UnderlineNavItemProps>;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAA;AAErD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAA;AAG7D,QAAA,MAAM,YAAY;;CAEhB,CAAA;AAEF,OAAO,EAAC,YAAY,EAAC,CAAA;AACrB,YAAY,EAAC,iBAAiB,EAAE,qBAAqB,EAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAA;AAErD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,6BAA6B,CAAA;AAGtE,QAAA,MAAM,YAAY;;CAEhB,CAAA;AAEF,OAAO,EAAC,YAAY,EAAC,CAAA;AACrB,YAAY,EAAC,iBAAiB,EAAE,qBAAqB,EAAC,CAAA"}

package/dist/UnderlineNav/utils.d.ts

@@ -1,3 +1,5 @@
 import React from 'react';
+import type { UnderlineNavItemProps } from './UnderlineNavItemsRegistry';
 export declare const getValidChildren: (children: React.ReactNode) => React.ReactElement<any>[];
+export declare const isCurrent: (props: UnderlineNavItemProps) => boolean;
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,gBAAgB,GAAI,UAAU,KAAK,CAAC,SAAS,KAEgC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAChH,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,6BAA6B,CAAA;AAEtE,eAAO,MAAM,gBAAgB,GAAI,UAAU,KAAK,CAAC,SAAS,KAEgC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAChH,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,qBAAqB,YACuD,CAAA"}

package/dist/UnderlineNav/utils.js

@@ -4,5 +4,6 @@ const getValidChildren = children => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child));
 };
+const isCurrent = props => props['aria-current'] !== undefined && props['aria-current'] !== false && props['aria-current'] !== 'false';
 
-export { getValidChildren };
+export { getValidChildren, isCurrent };

package/dist/experimental/UnderlinePanels/UnderlinePanels-162f9aed.css

@@ -0,0 +1,2 @@
+.prc-UnderlinePanels-StyledUnderlineWrapper-aiLna{overflow-x:auto;overflow-y:hidden;width:100%;-webkit-overflow-scrolling:auto}
+/*# sourceMappingURL=UnderlinePanels-162f9aed.css.map */

package/dist/experimental/UnderlinePanels/UnderlinePanels-162f9aed.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/experimental/UnderlinePanels/UnderlinePanels.module.css.js"],"names":[],"mappings":"AAAA,kDAEE,eAAgB,CAChB,iBAAkB,CAFlB,UAAW,CAGX,+BACF","file":"UnderlinePanels-162f9aed.css","sourcesContent":[".StyledUnderlineWrapper {\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: auto;\n}\n"]}

package/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlinePanels.d.ts","sourceRoot":"","sources":["../../../src/experimental/UnderlinePanels/UnderlinePanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAerD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,iBAAiB,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxG;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAA;CACrB,CAAC,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;;;;;AA8M7D,wBAA2D"}
+{"version":3,"file":"UnderlinePanels.d.ts","sourceRoot":"","sources":["../../../src/experimental/UnderlinePanels/UnderlinePanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAerD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,iBAAiB,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxG;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAA;CACrB,CAAC,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;;;;;AA6M7D,wBAA2D"}

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -138,7 +138,7 @@ const UnderlinePanels = ({
 };
 UnderlinePanels.displayName = "UnderlinePanels";
 const TabImpl = t0 => {
-  const $ = c(16);
+  const $ = c(15);
   let ariaSelected;
   let onSelect;
   let props;
@@ -158,7 +158,6 @@ const TabImpl = t0 => {
     props = $[3];
   }
   const {
-    iconsVisible,
     loadingCounters
   } = useContext(UnderlinePanelsContext);
   let t1;
@@ -189,7 +188,7 @@ const TabImpl = t0 => {
   const keyDownHandler = t2;
   const t3 = ariaSelected ? 0 : -1;
   let t4;
-  if ($[8] !== ariaSelected || $[9] !== clickHandler || $[10] !== iconsVisible || $[11] !== keyDownHandler || $[12] !== loadingCounters || $[13] !== props || $[14] !== t3) {
+  if ($[8] !== ariaSelected || $[9] !== clickHandler || $[10] !== keyDownHandler || $[11] !== loadingCounters || $[12] !== props || $[13] !== t3) {
     t4 = /*#__PURE__*/jsx(UnderlineItem, {
       as: "button",
       role: "tab",
@@ -198,20 +197,18 @@ const TabImpl = t0 => {
       type: "button",
       onClick: clickHandler,
       onKeyDown: keyDownHandler,
-      iconsVisible: iconsVisible,
       loadingCounters: loadingCounters,
       ...props
     });
     $[8] = ariaSelected;
     $[9] = clickHandler;
-    $[10] = iconsVisible;
-    $[11] = keyDownHandler;
-    $[12] = loadingCounters;
-    $[13] = props;
-    $[14] = t3;
-    $[15] = t4;
+    $[10] = keyDownHandler;
+    $[11] = loadingCounters;
+    $[12] = props;
+    $[13] = t3;
+    $[14] = t4;
   } else {
-    t4 = $[15];
+    t4 = $[14];
   }
   return t4;
 };

package/dist/experimental/UnderlinePanels/UnderlinePanels.module.css.js

@@ -1,4 +1,4 @@
-import './UnderlinePanels-e4b325b9.css';
+import './UnderlinePanels-162f9aed.css';
 
 var classes = {"StyledUnderlineWrapper":"prc-UnderlinePanels-StyledUnderlineWrapper-aiLna"};
 

package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.js

@@ -1,3 +1,4 @@
+import { c } from 'react-compiler-runtime';
 import React from 'react';
 import ValidationAnimationContainer from '../ValidationAnimationContainer.js';
 import { useId } from '../../../hooks/useId.js';
@@ -9,22 +10,33 @@ import VisuallyHidden from '../../../_VisuallyHidden.js';
 import { useSlots } from '../../../hooks/useSlots.js';
 import classes from './CheckboxOrRadioGroup.module.css.js';
 import { clsx } from 'clsx';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-const CheckboxOrRadioGroup = ({
-  'aria-labelledby': ariaLabelledby,
-  children,
-  disabled = false,
-  id: idProp,
-  required = false,
-  className,
-  'data-component': dataComponentProp
-}) => {
-  const [slots, rest] = useSlots(children, {
-    caption: CheckboxOrRadioGroupCaption,
-    label: CheckboxOrRadioGroupLabel,
-    validation: CheckboxOrRadioGroupValidation
-  });
+const CheckboxOrRadioGroup = t0 => {
+  const $ = c(51);
+  const {
+    "aria-labelledby": ariaLabelledby,
+    children,
+    disabled: t1,
+    id: idProp,
+    required: t2,
+    className,
+    "data-component": dataComponentProp
+  } = t0;
+  const disabled = t1 === undefined ? false : t1;
+  const required = t2 === undefined ? false : t2;
+  let t3;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      caption: CheckboxOrRadioGroupCaption,
+      label: CheckboxOrRadioGroupLabel,
+      validation: CheckboxOrRadioGroupValidation
+    };
+    $[0] = t3;
+  } else {
+    t3 = $[0];
+  }
+  const [slots, rest] = useSlots(children, t3);
   const labelChild = slots.label;
   const validationChild = slots.validation;
   const captionChild = slots.caption;
@@ -33,78 +45,187 @@ const CheckboxOrRadioGroup = ({
   const captionId = captionChild ? `${id}-caption` : undefined;
   const requiredMessageId = required ? `${id}-requiredMessage` : undefined;
   if (!labelChild && !ariaLabelledby) {
-    // eslint-disable-next-line no-console
-    console.warn('A choice group must be labelled using a `CheckboxOrRadioGroup.Label` child, or by passing `aria-labelledby` to the CheckboxOrRadioGroup component.');
+    console.warn("A choice group must be labelled using a `CheckboxOrRadioGroup.Label` child, or by passing `aria-labelledby` to the CheckboxOrRadioGroup component.");
+  }
+  let t4;
+  if ($[1] !== labelChild) {
+    t4 = /*#__PURE__*/React.isValidElement(labelChild) && !labelChild.props.visuallyHidden;
+    $[1] = labelChild;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
   }
-  const isLegendVisible = /*#__PURE__*/React.isValidElement(labelChild) && !labelChild.props.visuallyHidden;
-  const Component = labelChild ? 'fieldset' : 'div';
-  return /*#__PURE__*/jsx(CheckboxOrRadioGroupContext.Provider, {
-    value: {
+  const isLegendVisible = t4;
+  const Component = labelChild ? "fieldset" : "div";
+  let t5;
+  if ($[3] !== captionId || $[4] !== dataComponentProp || $[5] !== disabled || $[6] !== required || $[7] !== validationMessageId) {
+    t5 = {
       disabled,
       required,
       captionId,
       validationMessageId,
       parentName: dataComponentProp
-    },
-    children: /*#__PURE__*/jsxs("div", {
-      children: [/*#__PURE__*/jsxs(Component, {
-        "data-component": dataComponentProp,
-        className: clsx(className, classes.GroupFieldset),
-        "data-validation": validationChild ? '' : undefined,
-        ...(labelChild ? {
-          disabled
-        } : {}),
-        children: [labelChild ?
-        /*#__PURE__*/
-        /*
-              Placing the caption text and validation text in the <legend> provides a better user
-              experience for more screenreaders.
-               Reference: https://blog.tenon.io/accessible-validation-of-checkbox-and-radiobutton-groups/
-            */
-        jsxs("legend", {
-          className: classes.GroupLegend,
-          "data-legend-visible": isLegendVisible ? '' : undefined,
-          children: [slots.label, required && /*#__PURE__*/jsx(VisuallyHidden, {
-            children: ", required"
-          }), slots.caption, /*#__PURE__*/React.isValidElement(slots.validation) && slots.validation.props.children && /*#__PURE__*/jsx(VisuallyHidden, {
-            children: slots.validation.props.children
-          })]
-        }) :
-        /*#__PURE__*/
-        /*
-          If CheckboxOrRadioGroup.Label wasn't passed as a child, we don't render a <legend>
-          but we still want to render a caption
-        */
-        jsxs(Fragment, {
-          children: [slots.caption, required && requiredMessageId && /*#__PURE__*/jsx(VisuallyHidden, {
-            id: requiredMessageId,
-            children: "Required"
-          })]
-        }), /*#__PURE__*/jsx("div", {
-          className: classes.Body,
-          ...(!labelChild ? {
-            ['aria-labelledby']: ariaLabelledby,
-            ['aria-describedby']: [validationMessageId, captionId, requiredMessageId].filter(Boolean).join(' '),
-            as: 'div',
-            role: 'group'
-          } : {}),
-          children: React.Children.toArray(rest).filter(child => /*#__PURE__*/React.isValidElement(child))
-        })]
-      }), validationChild && /*#__PURE__*/jsx(ValidationAnimationContainer
-      // If we have CheckboxOrRadioGroup.Label as a child, we render a screenreader-accessible validation message in the <legend>
-      , {
-        "aria-hidden": Boolean(labelChild),
-        show: true,
-        children: slots.validation
+    };
+    $[3] = captionId;
+    $[4] = dataComponentProp;
+    $[5] = disabled;
+    $[6] = required;
+    $[7] = validationMessageId;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== className) {
+    t6 = clsx(className, classes.GroupFieldset);
+    $[9] = className;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  const t7 = validationChild ? "" : undefined;
+  let t8;
+  if ($[11] !== disabled || $[12] !== labelChild) {
+    t8 = labelChild ? {
+      disabled
+    } : {};
+    $[11] = disabled;
+    $[12] = labelChild;
+    $[13] = t8;
+  } else {
+    t8 = $[13];
+  }
+  let t9;
+  if ($[14] !== isLegendVisible || $[15] !== labelChild || $[16] !== required || $[17] !== requiredMessageId || $[18] !== slots.caption || $[19] !== slots.label || $[20] !== slots.validation) {
+    t9 = labelChild ? /*#__PURE__*/jsxs("legend", {
+      className: classes.GroupLegend,
+      "data-legend-visible": isLegendVisible ? "" : undefined,
+      children: [slots.label, required && /*#__PURE__*/jsx(VisuallyHidden, {
+        children: ", required"
+      }), slots.caption, /*#__PURE__*/React.isValidElement(slots.validation) && slots.validation.props.children && /*#__PURE__*/jsx(VisuallyHidden, {
+        children: slots.validation.props.children
+      })]
+    }) : /*#__PURE__*/jsxs(Fragment, {
+      children: [slots.caption, required && requiredMessageId && /*#__PURE__*/jsx(VisuallyHidden, {
+        id: requiredMessageId,
+        children: "Required"
       })]
-    })
-  });
+    });
+    $[14] = isLegendVisible;
+    $[15] = labelChild;
+    $[16] = required;
+    $[17] = requiredMessageId;
+    $[18] = slots.caption;
+    $[19] = slots.label;
+    $[20] = slots.validation;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  let t10;
+  if ($[22] !== ariaLabelledby || $[23] !== captionId || $[24] !== labelChild || $[25] !== requiredMessageId || $[26] !== validationMessageId) {
+    t10 = !labelChild ? {
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": [validationMessageId, captionId, requiredMessageId].filter(Boolean).join(" "),
+      as: "div",
+      role: "group"
+    } : {};
+    $[22] = ariaLabelledby;
+    $[23] = captionId;
+    $[24] = labelChild;
+    $[25] = requiredMessageId;
+    $[26] = validationMessageId;
+    $[27] = t10;
+  } else {
+    t10 = $[27];
+  }
+  let t11;
+  if ($[28] !== rest) {
+    t11 = React.Children.toArray(rest).filter(_temp);
+    $[28] = rest;
+    $[29] = t11;
+  } else {
+    t11 = $[29];
+  }
+  let t12;
+  if ($[30] !== t10 || $[31] !== t11) {
+    t12 = /*#__PURE__*/jsx("div", {
+      className: classes.Body,
+      ...t10,
+      children: t11
+    });
+    $[30] = t10;
+    $[31] = t11;
+    $[32] = t12;
+  } else {
+    t12 = $[32];
+  }
+  let t13;
+  if ($[33] !== Component || $[34] !== dataComponentProp || $[35] !== t12 || $[36] !== t6 || $[37] !== t7 || $[38] !== t8 || $[39] !== t9) {
+    t13 = /*#__PURE__*/jsxs(Component, {
+      "data-component": dataComponentProp,
+      className: t6,
+      "data-validation": t7,
+      ...t8,
+      children: [t9, t12]
+    });
+    $[33] = Component;
+    $[34] = dataComponentProp;
+    $[35] = t12;
+    $[36] = t6;
+    $[37] = t7;
+    $[38] = t8;
+    $[39] = t9;
+    $[40] = t13;
+  } else {
+    t13 = $[40];
+  }
+  let t14;
+  if ($[41] !== labelChild || $[42] !== slots.validation || $[43] !== validationChild) {
+    t14 = validationChild && /*#__PURE__*/jsx(ValidationAnimationContainer, {
+      "aria-hidden": Boolean(labelChild),
+      show: true,
+      children: slots.validation
+    });
+    $[41] = labelChild;
+    $[42] = slots.validation;
+    $[43] = validationChild;
+    $[44] = t14;
+  } else {
+    t14 = $[44];
+  }
+  let t15;
+  if ($[45] !== t13 || $[46] !== t14) {
+    t15 = /*#__PURE__*/jsxs("div", {
+      children: [t13, t14]
+    });
+    $[45] = t13;
+    $[46] = t14;
+    $[47] = t15;
+  } else {
+    t15 = $[47];
+  }
+  let t16;
+  if ($[48] !== t15 || $[49] !== t5) {
+    t16 = /*#__PURE__*/jsx(CheckboxOrRadioGroupContext.Provider, {
+      value: t5,
+      children: t15
+    });
+    $[48] = t15;
+    $[49] = t5;
+    $[50] = t16;
+  } else {
+    t16 = $[50];
+  }
+  return t16;
 };
-CheckboxOrRadioGroup.displayName = "CheckboxOrRadioGroup";
 var CheckboxOrRadioGroup$1 = Object.assign(CheckboxOrRadioGroup, {
   Caption: CheckboxOrRadioGroupCaption,
   Label: CheckboxOrRadioGroupLabel,
   Validation: CheckboxOrRadioGroupValidation
 });
+function _temp(child) {
+  return /*#__PURE__*/React.isValidElement(child);
+}
 
 export { CheckboxOrRadioGroup$1 as default };

package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.js

@@ -1,3 +1,4 @@
+import { c } from 'react-compiler-runtime';
 import React from 'react';
 import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext.js';
 import classes from './CheckboxOrRadioGroup.module.css.js';
@@ -5,22 +6,43 @@ import { clsx } from 'clsx';
 import { jsx } from 'react/jsx-runtime';
 import Text from '../../../Text/Text.js';
 
-const CheckboxOrRadioGroupCaption = ({
-  className,
-  children
-}) => {
+const CheckboxOrRadioGroupCaption = t0 => {
+  const $ = c(7);
+  const {
+    className,
+    children
+  } = t0;
   const {
     captionId,
     parentName
   } = React.useContext(CheckboxOrRadioGroupContext);
-  return /*#__PURE__*/jsx(Text, {
-    className: clsx(className, classes.CheckboxOrRadioGroupCaption),
-    id: captionId,
-    "data-component": parentName ? `${parentName}.Caption` : undefined,
-    children: children
-  });
+  let t1;
+  if ($[0] !== className) {
+    t1 = clsx(className, classes.CheckboxOrRadioGroupCaption);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const t2 = parentName ? `${parentName}.Caption` : undefined;
+  let t3;
+  if ($[2] !== captionId || $[3] !== children || $[4] !== t1 || $[5] !== t2) {
+    t3 = /*#__PURE__*/jsx(Text, {
+      className: t1,
+      id: captionId,
+      "data-component": t2,
+      children: children
+    });
+    $[2] = captionId;
+    $[3] = children;
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
 };
-CheckboxOrRadioGroupCaption.displayName = "CheckboxOrRadioGroupCaption";
 CheckboxOrRadioGroupCaption.__SLOT__ = Symbol('CheckboxOrRadioGroup.Caption');
 
 export { CheckboxOrRadioGroupCaption as default };