@primer/react 38.30.1-rc.abed95e7d → 38.30.1-rc.bce2a87c7

package/CHANGELOG.md

@@ -4,6 +4,10 @@
 
 ### Patch Changes
 
+- [#8054](https://github.com/primer/react/pull/8054) [`1775f2e`](https://github.com/primer/react/commit/1775f2e8b968d59a1189456b14cff15e527937cb) Thanks [@joshblack](https://github.com/joshblack)! - AvatarStack: Improve rendering performance with React Compiler support
+
+- [#8053](https://github.com/primer/react/pull/8053) [`b2151ae`](https://github.com/primer/react/commit/b2151ae2d5719f09efb0b89731e52e4ca50e8bf1) Thanks [@joshblack](https://github.com/joshblack)! - Checkbox, CheckboxGroup, and RadioGroup: Improve rendering performance with React Compiler support
+
 - [#8052](https://github.com/primer/react/pull/8052) [`a1b24cf`](https://github.com/primer/react/commit/a1b24cf3411566641aeb846e62069dc26505da6b) Thanks [@joshblack](https://github.com/joshblack)! - Heading, Link, Pagehead, Portal, and SideNav: Improve rendering performance with React Compiler support
 
 ## 38.30.0

package/dist/AvatarStack/AvatarStack.js

@@ -1,10 +1,11 @@
+import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import React, { useState, useRef, useEffect } from 'react';
 import { DEFAULT_AVATAR_SIZE } from '../Avatar/Avatar.js';
 import { isResponsiveValue } from '../hooks/useResponsiveValue.js';
 import classes from './AvatarStack.module.css.js';
 import { hasInteractiveNodes } from '../internal/utils/hasInteractiveNodes.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const transformChildren = (children, shape) => {
   return React.Children.map(children, child => {
@@ -16,136 +17,249 @@ const transformChildren = (children, shape) => {
     });
   });
 };
-const AvatarStackBody = ({
-  disableExpand,
-  hasInteractiveChildren,
-  stackContainer,
-  children
-}) => {
-  return /*#__PURE__*/jsx("div", {
-    "data-component": "AvatarStack.Body",
-    "data-disable-expand": disableExpand ? '' : undefined,
-    className: clsx({
-      'pc-AvatarStack--disableExpand': disableExpand
-    }, 'pc-AvatarStackBody', classes.AvatarStackBody),
-    tabIndex: !hasInteractiveChildren && !disableExpand ? 0 : undefined,
-    ref: stackContainer,
-    children: children
-  });
+const AvatarStackBody = t0 => {
+  const $ = c(8);
+  const {
+    disableExpand,
+    hasInteractiveChildren,
+    stackContainer,
+    children
+  } = t0;
+  const t1 = disableExpand ? "" : undefined;
+  let t2;
+  if ($[0] !== disableExpand) {
+    t2 = clsx({
+      "pc-AvatarStack--disableExpand": disableExpand
+    }, "pc-AvatarStackBody", classes.AvatarStackBody);
+    $[0] = disableExpand;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const t3 = !hasInteractiveChildren && !disableExpand ? 0 : undefined;
+  let t4;
+  if ($[2] !== children || $[3] !== stackContainer || $[4] !== t1 || $[5] !== t2 || $[6] !== t3) {
+    t4 = /*#__PURE__*/jsx("div", {
+      "data-component": "AvatarStack.Body",
+      "data-disable-expand": t1,
+      className: t2,
+      tabIndex: t3,
+      ref: stackContainer,
+      children: children
+    });
+    $[2] = children;
+    $[3] = stackContainer;
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  return t4;
 };
-AvatarStackBody.displayName = "AvatarStackBody";
-const AvatarStack = ({
-  children,
-  variant = 'cascade',
-  shape = 'circle',
-  alignRight,
-  disableExpand,
-  size,
-  className,
-  style
-}) => {
+const AvatarStack = t0 => {
+  const $ = c(36);
+  const {
+    children,
+    variant: t1,
+    shape: t2,
+    alignRight,
+    disableExpand,
+    size,
+    className,
+    style
+  } = t0;
+  const variant = t1 === undefined ? "cascade" : t1;
+  const shape = t2 === undefined ? "circle" : t2;
   const [hasInteractiveChildren, setHasInteractiveChildren] = useState(false);
   const stackContainer = useRef(null);
   const count = React.Children.count(children);
-  const getAvatarChildSizes = () => {
-    const avatarSizeMap = {
-      narrow: [],
-      regular: [],
-      wide: []
-    };
-    return React.Children.toArray(children).reduce((acc, child) => {
-      // if child is not an Avatar, return the default avatar sizes from the accumulator
-      if (! /*#__PURE__*/React.isValidElement(child)) return acc;
-      for (const responsiveKey of Object.keys(avatarSizeMap)) {
-        // if the child has responsive `size` prop values, push the value to the appropriate viewport property in the avatarSizeMap
-        if (isResponsiveValue(child.props.size)) {
-          avatarSizeMap[responsiveKey].push(child.props.size[responsiveKey] || DEFAULT_AVATAR_SIZE);
+  let t3;
+  if ($[0] !== children) {
+    const getAvatarChildSizes = () => {
+      const avatarSizeMap = {
+        narrow: [],
+        regular: [],
+        wide: []
+      };
+      return React.Children.toArray(children).reduce((acc, child) => {
+        if (! /*#__PURE__*/React.isValidElement(child)) {
+          return acc;
         }
-        // otherwise, the size is a number (or undefined), so push the value to all viewport properties in the avatarSizeMap
-        else {
-          avatarSizeMap[responsiveKey].push(child.props.size || DEFAULT_AVATAR_SIZE);
+        for (const responsiveKey of Object.keys(avatarSizeMap)) {
+          if (isResponsiveValue(child.props.size)) {
+            avatarSizeMap[responsiveKey].push(child.props.size[responsiveKey] || DEFAULT_AVATAR_SIZE);
+          } else {
+            avatarSizeMap[responsiveKey].push(child.props.size || DEFAULT_AVATAR_SIZE);
+          }
+          acc[responsiveKey] = Math.min(...avatarSizeMap[responsiveKey]);
         }
-
-        // set the smallest size in each viewport property as the value for that viewport property in the accumulator
-        acc[responsiveKey] = Math.min(...avatarSizeMap[responsiveKey]);
-      }
-      return acc;
-    }, {
-      narrow: DEFAULT_AVATAR_SIZE,
-      regular: DEFAULT_AVATAR_SIZE,
-      wide: DEFAULT_AVATAR_SIZE
-    });
-  };
-  const childSizes = getAvatarChildSizes();
-  useEffect(() => {
-    if (stackContainer.current) {
-      const interactiveChildren = () => {
-        setHasInteractiveChildren(hasInteractiveNodes(stackContainer.current));
-      };
-      const observer = new MutationObserver(interactiveChildren);
-      observer.observe(stackContainer.current, {
-        childList: true
+        return acc;
+      }, {
+        narrow: DEFAULT_AVATAR_SIZE,
+        regular: DEFAULT_AVATAR_SIZE,
+        wide: DEFAULT_AVATAR_SIZE
       });
-
-      // Call on initial render, then call it again only if there's a mutation
-      // eslint-disable-next-line react-you-might-not-need-an-effect/no-initialize-state
-      interactiveChildren();
-      return () => {
-        observer.disconnect();
-      };
-    }
-  }, []);
-  const getResponsiveAvatarSizeStyles = () => {
-    // if there is no size set on the AvatarStack, use the `size` props of the Avatar children to set the `--avatar-stack-size` CSS variable
-    if (!size) {
-      return {
-        '--stackSize-narrow': `${childSizes.narrow}px`,
-        '--stackSize-regular': `${childSizes.regular}px`,
-        '--stackSize-wide': `${childSizes.wide}px`
-      };
-    }
-
-    // if the `size` prop is set and responsive, set the `--avatar-stack-size` CSS variable for each viewport
-    if (isResponsiveValue(size)) {
+    };
+    t3 = getAvatarChildSizes();
+    $[0] = children;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const childSizes = t3;
+  let t4;
+  let t5;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = () => {
+      if (stackContainer.current) {
+        const interactiveChildren = () => {
+          setHasInteractiveChildren(hasInteractiveNodes(stackContainer.current));
+        };
+        const observer = new MutationObserver(interactiveChildren);
+        observer.observe(stackContainer.current, {
+          childList: true
+        });
+        interactiveChildren();
+        return () => {
+          observer.disconnect();
+        };
+      }
+    };
+    t5 = [];
+    $[2] = t4;
+    $[3] = t5;
+  } else {
+    t4 = $[2];
+    t5 = $[3];
+  }
+  useEffect(t4, t5);
+  let t6;
+  if ($[4] !== childSizes || $[5] !== size) {
+    t6 = () => {
+      if (!size) {
+        return {
+          "--stackSize-narrow": `${childSizes.narrow}px`,
+          "--stackSize-regular": `${childSizes.regular}px`,
+          "--stackSize-wide": `${childSizes.wide}px`
+        };
+      }
+      if (isResponsiveValue(size)) {
+        return {
+          "--stackSize-narrow": `${size.narrow || DEFAULT_AVATAR_SIZE}px`,
+          "--stackSize-regular": `${size.regular || DEFAULT_AVATAR_SIZE}px`,
+          "--stackSize-wide": `${size.wide || DEFAULT_AVATAR_SIZE}px`
+        };
+      }
       return {
-        '--stackSize-narrow': `${size.narrow || DEFAULT_AVATAR_SIZE}px`,
-        '--stackSize-regular': `${size.regular || DEFAULT_AVATAR_SIZE}px`,
-        '--stackSize-wide': `${size.wide || DEFAULT_AVATAR_SIZE}px`
+        "--avatar-stack-size": `${size}px`
       };
-    }
-
-    // if the `size` prop is set and not responsive, it is a number, so we can just set the `--avatar-stack-size` CSS variable to that number
-    return {
-      '--avatar-stack-size': `${size}px`
     };
-  };
-  return /*#__PURE__*/jsx("span", {
-    "data-component": "AvatarStack",
-    "data-variant": variant,
-    "data-shape": shape,
-    "data-avatar-count": count > 3 ? '3+' : count,
-    "data-align-right": alignRight ? '' : undefined,
-    "data-responsive": !size || isResponsiveValue(size) ? '' : undefined,
-    className: clsx({
-      'pc-AvatarStack--variant': variant,
-      'pc-AvatarStack--shape': shape,
-      'pc-AvatarStack--two': count === 2,
-      'pc-AvatarStack--three': count === 3,
-      'pc-AvatarStack--three-plus': count > 3,
-      'pc-AvatarStack--right': alignRight
-    }, className, classes.AvatarStack),
-    style: {
-      ...getResponsiveAvatarSizeStyles(),
+    $[4] = childSizes;
+    $[5] = size;
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  const getResponsiveAvatarSizeStyles = t6;
+  const t7 = count > 3 ? "3+" : count;
+  const t8 = alignRight ? "" : undefined;
+  const t9 = !size || isResponsiveValue(size) ? "" : undefined;
+  const t10 = count === 2;
+  const t11 = count === 3;
+  const t12 = count > 3;
+  let t13;
+  if ($[7] !== alignRight || $[8] !== className || $[9] !== shape || $[10] !== t10 || $[11] !== t11 || $[12] !== t12 || $[13] !== variant) {
+    t13 = clsx({
+      "pc-AvatarStack--variant": variant,
+      "pc-AvatarStack--shape": shape,
+      "pc-AvatarStack--two": t10,
+      "pc-AvatarStack--three": t11,
+      "pc-AvatarStack--three-plus": t12,
+      "pc-AvatarStack--right": alignRight
+    }, className, classes.AvatarStack);
+    $[7] = alignRight;
+    $[8] = className;
+    $[9] = shape;
+    $[10] = t10;
+    $[11] = t11;
+    $[12] = t12;
+    $[13] = variant;
+    $[14] = t13;
+  } else {
+    t13 = $[14];
+  }
+  let t14;
+  if ($[15] !== getResponsiveAvatarSizeStyles) {
+    t14 = getResponsiveAvatarSizeStyles();
+    $[15] = getResponsiveAvatarSizeStyles;
+    $[16] = t14;
+  } else {
+    t14 = $[16];
+  }
+  let t15;
+  if ($[17] !== style || $[18] !== t14) {
+    t15 = {
+      ...t14,
       ...style
-    },
-    children: /*#__PURE__*/jsxs(AvatarStackBody, {
+    };
+    $[17] = style;
+    $[18] = t14;
+    $[19] = t15;
+  } else {
+    t15 = $[19];
+  }
+  let t16;
+  if ($[20] !== children || $[21] !== shape) {
+    t16 = transformChildren(children, shape);
+    $[20] = children;
+    $[21] = shape;
+    $[22] = t16;
+  } else {
+    t16 = $[22];
+  }
+  let t17;
+  if ($[23] !== disableExpand || $[24] !== hasInteractiveChildren || $[25] !== t16) {
+    t17 = /*#__PURE__*/jsxs(AvatarStackBody, {
       disableExpand: disableExpand,
       hasInteractiveChildren: hasInteractiveChildren,
       stackContainer: stackContainer,
-      children: [' ', transformChildren(children, shape)]
-    })
-  });
+      children: [" ", t16]
+    });
+    $[23] = disableExpand;
+    $[24] = hasInteractiveChildren;
+    $[25] = t16;
+    $[26] = t17;
+  } else {
+    t17 = $[26];
+  }
+  let t18;
+  if ($[27] !== shape || $[28] !== t13 || $[29] !== t15 || $[30] !== t17 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9 || $[34] !== variant) {
+    t18 = /*#__PURE__*/jsx("span", {
+      "data-component": "AvatarStack",
+      "data-variant": variant,
+      "data-shape": shape,
+      "data-avatar-count": t7,
+      "data-align-right": t8,
+      "data-responsive": t9,
+      className: t13,
+      style: t15,
+      children: t17
+    });
+    $[27] = shape;
+    $[28] = t13;
+    $[29] = t15;
+    $[30] = t17;
+    $[31] = t7;
+    $[32] = t8;
+    $[33] = t9;
+    $[34] = variant;
+    $[35] = t18;
+  } else {
+    t18 = $[35];
+  }
+  return t18;
 };
-AvatarStack.displayName = "AvatarStack";
 
 export { AvatarStack as default };

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 };

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

@@ -1,28 +1,40 @@
+import { c } from 'react-compiler-runtime';
 import React from 'react';
 import VisuallyHidden from '../../../_VisuallyHidden.js';
 import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext.js';
 import classes from './CheckboxOrRadioGroup.module.css.js';
 import { Stack } from '../../../Stack/index.js';
 import { clsx } from 'clsx';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-const CheckboxOrRadioGroupLabel = ({
-  children,
-  className,
-  visuallyHidden = false
-}) => {
+const CheckboxOrRadioGroupLabel = t0 => {
+  const $ = c(12);
+  const {
+    children,
+    className,
+    visuallyHidden: t1
+  } = t0;
+  const visuallyHidden = t1 === undefined ? false : t1;
   const {
     required,
     disabled,
     parentName
   } = React.useContext(CheckboxOrRadioGroupContext);
-  return /*#__PURE__*/jsx(VisuallyHidden, {
-    className: clsx(className, classes.RadioGroupLabel),
-    isVisible: !visuallyHidden,
-    title: required ? 'required field' : undefined,
-    "data-label-disabled": disabled ? '' : undefined,
-    "data-component": parentName ? `${parentName}.Label` : undefined,
-    children: required ? /*#__PURE__*/jsxs(Stack, {
+  let t2;
+  if ($[0] !== className) {
+    t2 = clsx(className, classes.RadioGroupLabel);
+    $[0] = className;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const t3 = !visuallyHidden;
+  const t4 = required ? "required field" : undefined;
+  const t5 = disabled ? "" : undefined;
+  const t6 = parentName ? `${parentName}.Label` : undefined;
+  let t7;
+  if ($[2] !== children || $[3] !== required) {
+    t7 = required ? /*#__PURE__*/jsxs(Stack, {
       direction: "horizontal",
       gap: "none",
       children: [/*#__PURE__*/jsx("div", {
@@ -31,10 +43,35 @@ const CheckboxOrRadioGroupLabel = ({
       }), /*#__PURE__*/jsx("span", {
         children: "*"
       })]
-    }) : children
-  });
+    }) : children;
+    $[2] = children;
+    $[3] = required;
+    $[4] = t7;
+  } else {
+    t7 = $[4];
+  }
+  let t8;
+  if ($[5] !== t2 || $[6] !== t3 || $[7] !== t4 || $[8] !== t5 || $[9] !== t6 || $[10] !== t7) {
+    t8 = /*#__PURE__*/jsx(VisuallyHidden, {
+      className: t2,
+      isVisible: t3,
+      title: t4,
+      "data-label-disabled": t5,
+      "data-component": t6,
+      children: t7
+    });
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
+    $[8] = t5;
+    $[9] = t6;
+    $[10] = t7;
+    $[11] = t8;
+  } else {
+    t8 = $[11];
+  }
+  return t8;
 };
-CheckboxOrRadioGroupLabel.displayName = "CheckboxOrRadioGroupLabel";
 CheckboxOrRadioGroupLabel.__SLOT__ = Symbol('CheckboxOrRadioGroup.Label');
 
 export { CheckboxOrRadioGroupLabel as default };

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

@@ -1,24 +1,39 @@
+import { c } from 'react-compiler-runtime';
 import React from 'react';
 import InputValidation from '../InputValidation.js';
 import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext.js';
 import { jsx } from 'react/jsx-runtime';
 
-const CheckboxOrRadioGroupValidation = ({
-  children,
-  variant
-}) => {
+const CheckboxOrRadioGroupValidation = t0 => {
+  const $ = c(5);
   const {
-    validationMessageId = '',
+    children,
+    variant
+  } = t0;
+  const {
+    validationMessageId: t1,
     parentName
   } = React.useContext(CheckboxOrRadioGroupContext);
-  return /*#__PURE__*/jsx(InputValidation, {
-    validationStatus: variant,
-    id: validationMessageId,
-    "data-component": parentName ? `${parentName}.Validation` : undefined,
-    children: children
-  });
+  const validationMessageId = t1 === undefined ? "" : t1;
+  const t2 = parentName ? `${parentName}.Validation` : undefined;
+  let t3;
+  if ($[0] !== children || $[1] !== t2 || $[2] !== validationMessageId || $[3] !== variant) {
+    t3 = /*#__PURE__*/jsx(InputValidation, {
+      validationStatus: variant,
+      id: validationMessageId,
+      "data-component": t2,
+      children: children
+    });
+    $[0] = children;
+    $[1] = t2;
+    $[2] = validationMessageId;
+    $[3] = variant;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
 };
-CheckboxOrRadioGroupValidation.displayName = "CheckboxOrRadioGroupValidation";
 CheckboxOrRadioGroupValidation.__SLOT__ = Symbol('CheckboxOrRadioGroup.Validation');
 
 export { CheckboxOrRadioGroupValidation as default };

package/dist/internal/components/InputValidation.js

@@ -2,7 +2,7 @@ import { c } from 'react-compiler-runtime';
 import { AlertFillIcon, CheckCircleFillIcon } from '@primer/octicons-react';
 import classes from './InputValidation.module.css.js';
 import { clsx } from 'clsx';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Text from '../../Text/Text.js';
 
 const validationIconMap = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.30.1-rc.abed95e7d",
+  "version": "38.30.1-rc.bce2a87c7",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",