@primer/react 37.29.0-rc.d46ec0131 → 38.0.0-rc.195178541

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

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { type SxProp } from '../sx';
-declare const Pagehead: ({ className, ...rest }: PageheadProps) => React.JSX.Element;
+declare const Pagehead: ({ className, sx: sxProp, ...rest }: PageheadProps) => React.JSX.Element;
 /**
  * @deprecated
  */

package/lib-esm/Pagehead/Pagehead.js

@@ -1,13 +1,22 @@
 import { clsx } from 'clsx';
 import classes from './Pagehead.module.css.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { jsx } from 'react/jsx-runtime';
+import Box from '../Box/Box.js';
 
 const Pagehead = ({
   className,
+  sx: sxProp = defaultSxProp,
   ...rest
 }) => {
-  return /*#__PURE__*/jsx(BoxWithFallback, {
+  if (sxProp !== defaultSxProp || rest.as) {
+    return /*#__PURE__*/jsx(Box, {
+      sx: sxProp,
+      className: clsx(classes.Pagehead, className),
+      ...rest
+    });
+  }
+  return /*#__PURE__*/jsx("div", {
     className: clsx(classes.Pagehead, className),
     ...rest
   });

package/lib-esm/Radio/Radio.js

@@ -4,14 +4,15 @@ import { RadioGroupContext } from '../RadioGroup/RadioGroup.js';
 import { clsx } from 'clsx';
 import sharedClasses from '../Checkbox/shared.module.css.js';
 import classes from './Radio.module.css.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { jsx } from 'react/jsx-runtime';
+import Box from '../Box/Box.js';
 
 /**
  * An accessible, native radio component for selecting one option from a list.
  */
 const Radio = /*#__PURE__*/React.forwardRef((t0, ref) => {
-  const $ = c(26);
+  const $ = c(42);
   let checked;
   let className;
   let disabled;
@@ -20,6 +21,7 @@ const Radio = /*#__PURE__*/React.forwardRef((t0, ref) => {
   let required;
   let rest;
   let t1;
+  let t2;
   let value;
   if ($[0] !== t0) {
     ({
@@ -27,10 +29,11 @@ const Radio = /*#__PURE__*/React.forwardRef((t0, ref) => {
       disabled,
       name: nameProp,
       onChange,
+      sx: t1,
       required,
       value,
       className,
-      "aria-hidden": t1,
+      "aria-hidden": t2,
       ...rest
     } = t0);
     $[0] = t0;
@@ -42,7 +45,8 @@ const Radio = /*#__PURE__*/React.forwardRef((t0, ref) => {
     $[6] = required;
     $[7] = rest;
     $[8] = t1;
-    $[9] = value;
+    $[9] = t2;
+    $[10] = value;
   } else {
     checked = $[1];
     className = $[2];
@@ -52,67 +56,114 @@ const Radio = /*#__PURE__*/React.forwardRef((t0, ref) => {
     required = $[6];
     rest = $[7];
     t1 = $[8];
-    value = $[9];
+    t2 = $[9];
+    value = $[10];
   }
-  const ariaHidden = t1 === undefined ? false : t1;
+  const sxProp = t1 === undefined ? defaultSxProp : t1;
+  const ariaHidden = t2 === undefined ? false : t2;
   const radioGroupContext = useContext(RadioGroupContext);
-  let t2;
-  if ($[10] !== onChange || $[11] !== radioGroupContext) {
-    t2 = e => {
+  let t3;
+  if ($[11] !== onChange || $[12] !== radioGroupContext) {
+    t3 = e => {
       (radioGroupContext === null || radioGroupContext === void 0 ? void 0 : radioGroupContext.onChange) && radioGroupContext.onChange(e);
       onChange && onChange(e);
     };
-    $[10] = onChange;
-    $[11] = radioGroupContext;
-    $[12] = t2;
+    $[11] = onChange;
+    $[12] = radioGroupContext;
+    $[13] = t3;
   } else {
-    t2 = $[12];
+    t3 = $[13];
   }
-  const handleOnChange = t2;
+  const handleOnChange = t3;
   const name = nameProp || (radioGroupContext === null || radioGroupContext === void 0 ? void 0 : radioGroupContext.name);
   if (!name && !ariaHidden) {
     console.warn("A radio input must have a `name` attribute. Pass `name` as a prop directly to each Radio, or nest them in a `RadioGroup` component with a `name` prop");
   }
-  const t3 = checked ? "true" : "false";
-  let t4;
-  if ($[13] !== className) {
-    t4 = clsx(className, sharedClasses.Input, classes.Radio);
-    $[13] = className;
-    $[14] = t4;
-  } else {
-    t4 = $[14];
+  if (sxProp !== defaultSxProp) {
+    const t4 = checked ? "true" : "false";
+    let t5;
+    if ($[14] !== className) {
+      t5 = clsx(className, sharedClasses.Input, classes.Radio);
+      $[14] = className;
+      $[15] = t5;
+    } else {
+      t5 = $[15];
+    }
+    let t6;
+    if ($[16] !== ariaHidden || $[17] !== checked || $[18] !== disabled || $[19] !== handleOnChange || $[20] !== name || $[21] !== ref || $[22] !== required || $[23] !== rest || $[24] !== sxProp || $[25] !== t4 || $[26] !== t5 || $[27] !== value) {
+      t6 = /*#__PURE__*/jsx(Box, {
+        as: "input",
+        sx: sxProp,
+        type: "radio",
+        value: value,
+        name: name,
+        ref: ref,
+        disabled: disabled,
+        checked: checked,
+        "aria-checked": t4,
+        required: required,
+        onChange: handleOnChange,
+        className: t5,
+        "aria-hidden": ariaHidden,
+        ...rest
+      });
+      $[16] = ariaHidden;
+      $[17] = checked;
+      $[18] = disabled;
+      $[19] = handleOnChange;
+      $[20] = name;
+      $[21] = ref;
+      $[22] = required;
+      $[23] = rest;
+      $[24] = sxProp;
+      $[25] = t4;
+      $[26] = t5;
+      $[27] = value;
+      $[28] = t6;
+    } else {
+      t6 = $[28];
+    }
+    return t6;
   }
+  const t4 = checked ? "true" : "false";
   let t5;
-  if ($[15] !== checked || $[16] !== disabled || $[17] !== handleOnChange || $[18] !== name || $[19] !== ref || $[20] !== required || $[21] !== rest || $[22] !== t3 || $[23] !== t4 || $[24] !== value) {
-    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: "input",
+  if ($[29] !== className) {
+    t5 = clsx(className, sharedClasses.Input, classes.Radio);
+    $[29] = className;
+    $[30] = t5;
+  } else {
+    t5 = $[30];
+  }
+  let t6;
+  if ($[31] !== checked || $[32] !== disabled || $[33] !== handleOnChange || $[34] !== name || $[35] !== ref || $[36] !== required || $[37] !== rest || $[38] !== t4 || $[39] !== t5 || $[40] !== value) {
+    t6 = /*#__PURE__*/jsx("input", {
       type: "radio",
       value: value,
       name: name,
       ref: ref,
       disabled: disabled,
       checked: checked,
-      "aria-checked": t3,
+      "aria-checked": t4,
       required: required,
       onChange: handleOnChange,
-      className: t4,
+      className: t5,
       ...rest
     });
-    $[15] = checked;
-    $[16] = disabled;
-    $[17] = handleOnChange;
-    $[18] = name;
-    $[19] = ref;
-    $[20] = required;
-    $[21] = rest;
-    $[22] = t3;
-    $[23] = t4;
-    $[24] = value;
-    $[25] = t5;
+    $[31] = checked;
+    $[32] = disabled;
+    $[33] = handleOnChange;
+    $[34] = name;
+    $[35] = ref;
+    $[36] = required;
+    $[37] = rest;
+    $[38] = t4;
+    $[39] = t5;
+    $[40] = value;
+    $[41] = t6;
   } else {
-    t5 = $[25];
+    t6 = $[41];
   }
-  return t5;
+  return t6;
 });
 Radio.displayName = 'Radio';
 

package/lib-esm/SegmentedControl/SegmentedControl.js

@@ -5,6 +5,7 @@ import { SegmentedControlIconButton } from './SegmentedControlIconButton.js';
 import { ActionList } from '../ActionList/index.js';
 import { useTheme } from '../ThemeProvider.js';
 import { useResponsiveValue } from '../hooks/useResponsiveValue.js';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { isElement } from 'react-is';
 import classes from './SegmentedControl.module.css.js';
 import { clsx } from 'clsx';
@@ -22,8 +23,8 @@ const Root = t0 => {
   let onChange;
   let rest;
   let size;
-  let sxProp;
   let t1;
+  let t2;
   if ($[0] !== t0) {
     ({
       "aria-label": ariaLabel,
@@ -32,8 +33,8 @@ const Root = t0 => {
       fullWidth,
       onChange,
       size,
-      sx: sxProp,
-      variant: t1,
+      sx: t1,
+      variant: t2,
       className,
       ...rest
     } = t0);
@@ -46,8 +47,8 @@ const Root = t0 => {
     $[6] = onChange;
     $[7] = rest;
     $[8] = size;
-    $[9] = sxProp;
-    $[10] = t1;
+    $[9] = t1;
+    $[10] = t2;
   } else {
     ariaLabel = $[1];
     ariaLabelledby = $[2];
@@ -57,40 +58,41 @@ const Root = t0 => {
     onChange = $[6];
     rest = $[7];
     size = $[8];
-    sxProp = $[9];
-    t1 = $[10];
+    t1 = $[9];
+    t2 = $[10];
   }
-  const variant = t1 === undefined ? "default" : t1;
+  const sxProp = t1 === undefined ? defaultSxProp : t1;
+  const variant = t2 === undefined ? "default" : t2;
   const segmentedControlContainerRef = useRef(null);
   const {
     theme
   } = useTheme();
-  let t2;
+  let t3;
   if ($[11] !== children || $[12] !== onChange) {
-    t2 = onChange === undefined || React.Children.toArray(children).some(_temp);
+    t3 = onChange === undefined || React.Children.toArray(children).some(_temp);
     $[11] = children;
     $[12] = onChange;
-    $[13] = t2;
+    $[13] = t3;
   } else {
-    t2 = $[13];
+    t3 = $[13];
   }
-  const isUncontrolled = t2;
+  const isUncontrolled = t3;
   const responsiveVariant = useResponsiveValue(variant, "default");
   const isFullWidth = useResponsiveValue(fullWidth, false);
-  let t3;
+  let t4;
   if ($[14] !== children) {
     const selectedSegments = React.Children.toArray(children).map(_temp2);
     const hasSelectedButton = selectedSegments.some(_temp3);
-    t3 = hasSelectedButton ? selectedSegments.indexOf(true) : 0;
+    t4 = hasSelectedButton ? selectedSegments.indexOf(true) : 0;
     $[14] = children;
-    $[15] = t3;
+    $[15] = t4;
   } else {
-    t3 = $[15];
+    t4 = $[15];
   }
-  const selectedIndexExternal = t3;
+  const selectedIndexExternal = t4;
   const [selectedIndexInternalState, setSelectedIndexInternalState] = useState(selectedIndexExternal);
   const selectedIndex = isUncontrolled ? selectedIndexInternalState : selectedIndexExternal;
-  let t4;
+  let t5;
   if ($[16] !== ariaLabel || $[17] !== ariaLabelledby || $[18] !== children || $[19] !== className || $[20] !== isFullWidth || $[21] !== isUncontrolled || $[22] !== onChange || $[23] !== responsiveVariant || $[24] !== rest || $[25] !== selectedIndex || $[26] !== size || $[27] !== sxProp || $[28] !== (theme === null || theme === void 0 ? void 0 : theme.colors)) {
     const selectedChild = /*#__PURE__*/React.isValidElement(React.Children.toArray(children)[selectedIndex]) ? React.Children.toArray(children)[selectedIndex] : undefined;
     const getChildIcon = _temp4;
@@ -98,7 +100,7 @@ const Root = t0 => {
     if (!ariaLabel && !ariaLabelledby) {
       console.warn("Use the `aria-label` or `aria-labelledby` prop to provide an accessible label for assistive technologies");
     }
-    t4 = responsiveVariant === "dropdown" ? /*#__PURE__*/jsx(Fragment, {
+    t5 = responsiveVariant === "dropdown" ? /*#__PURE__*/jsx(Fragment, {
       children: /*#__PURE__*/jsxs(ActionMenu, {
         children: [/*#__PURE__*/jsx(ActionMenu.Button, {
           "aria-label": ariaLabel && `${getChildText(selectedChild)}, ${ariaLabel}`,
@@ -198,11 +200,11 @@ const Root = t0 => {
     $[26] = size;
     $[27] = sxProp;
     $[28] = theme === null || theme === void 0 ? void 0 : theme.colors;
-    $[29] = t4;
+    $[29] = t5;
   } else {
-    t4 = $[29];
+    t5 = $[29];
   }
-  return t4;
+  return t5;
 };
 Root.displayName = 'SegmentedControl';
 const SegmentedControl = Object.assign(Root, {

package/lib-esm/SegmentedControl/SegmentedControlButton.js

@@ -1,4 +1,5 @@
 import { c } from 'react-compiler-runtime';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { isElement } from 'react-is';
 import classes from './SegmentedControl.module.css.js';
 import { clsx } from 'clsx';
@@ -12,138 +13,139 @@ const SegmentedControlButton = t0 => {
   let className;
   let rest;
   let selected;
-  let sxProp;
+  let t1;
   if ($[0] !== t0) {
     const {
-      children: t1,
-      leadingIcon: t2,
-      selected: t3,
-      sx: t4,
-      className: t5,
+      children: t2,
+      leadingIcon: t3,
+      selected: t4,
+      sx: t5,
+      className: t6,
       defaultSelected: _defaultSelected,
-      ...t6
+      ...t7
     } = t0;
-    children = t1;
-    LeadingIcon = t2;
-    selected = t3;
-    sxProp = t4;
-    className = t5;
-    rest = t6;
+    children = t2;
+    LeadingIcon = t3;
+    selected = t4;
+    t1 = t5;
+    className = t6;
+    rest = t7;
     $[0] = t0;
     $[1] = LeadingIcon;
     $[2] = children;
     $[3] = className;
     $[4] = rest;
     $[5] = selected;
-    $[6] = sxProp;
+    $[6] = t1;
   } else {
     LeadingIcon = $[1];
     children = $[2];
     className = $[3];
     rest = $[4];
     selected = $[5];
-    sxProp = $[6];
+    t1 = $[6];
   }
-  let t1;
+  const sxProp = t1 === undefined ? defaultSxProp : t1;
+  let t2;
   if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = clsx(classes.Item);
-    $[7] = t1;
+    t2 = clsx(classes.Item);
+    $[7] = t2;
   } else {
-    t1 = $[7];
+    t2 = $[7];
   }
-  const t2 = selected ? "" : undefined;
-  let t3;
+  const t3 = selected ? "" : undefined;
+  let t4;
   if ($[8] !== className) {
-    t3 = clsx(classes.Button, className);
+    t4 = clsx(classes.Button, className);
     $[8] = className;
-    $[9] = t3;
+    $[9] = t4;
   } else {
-    t3 = $[9];
+    t4 = $[9];
   }
-  let t4;
+  let t5;
   if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = clsx(classes.Content, "segmentedControl-content");
-    $[10] = t4;
+    t5 = clsx(classes.Content, "segmentedControl-content");
+    $[10] = t5;
   } else {
-    t4 = $[10];
+    t5 = $[10];
   }
-  let t5;
+  let t6;
   if ($[11] !== LeadingIcon) {
-    t5 = LeadingIcon && /*#__PURE__*/jsx("div", {
+    t6 = LeadingIcon && /*#__PURE__*/jsx("div", {
       className: classes.LeadingIcon,
       children: isElement(LeadingIcon) ? LeadingIcon : /*#__PURE__*/jsx(LeadingIcon, {})
     });
     $[11] = LeadingIcon;
-    $[12] = t5;
+    $[12] = t6;
   } else {
-    t5 = $[12];
+    t6 = $[12];
   }
-  let t6;
+  let t7;
   if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = clsx(classes.Text, "segmentedControl-text");
-    $[13] = t6;
+    t7 = clsx(classes.Text, "segmentedControl-text");
+    $[13] = t7;
   } else {
-    t6 = $[13];
+    t7 = $[13];
   }
-  let t7;
+  let t8;
   if ($[14] !== children) {
-    t7 = /*#__PURE__*/jsx("div", {
-      className: t6,
+    t8 = /*#__PURE__*/jsx("div", {
+      className: t7,
       "data-text": children,
       children: children
     });
     $[14] = children;
-    $[15] = t7;
+    $[15] = t8;
   } else {
-    t7 = $[15];
+    t8 = $[15];
   }
-  let t8;
-  if ($[16] !== t5 || $[17] !== t7) {
-    t8 = /*#__PURE__*/jsxs("span", {
-      className: t4,
-      children: [t5, t7]
+  let t9;
+  if ($[16] !== t6 || $[17] !== t8) {
+    t9 = /*#__PURE__*/jsxs("span", {
+      className: t5,
+      children: [t6, t8]
     });
-    $[16] = t5;
-    $[17] = t7;
-    $[18] = t8;
+    $[16] = t6;
+    $[17] = t8;
+    $[18] = t9;
   } else {
-    t8 = $[18];
+    t9 = $[18];
   }
-  let t9;
-  if ($[19] !== rest || $[20] !== selected || $[21] !== t3 || $[22] !== t8) {
-    t9 = /*#__PURE__*/jsx(BoxWithFallback, {
+  let t10;
+  if ($[19] !== rest || $[20] !== selected || $[21] !== t4 || $[22] !== t9) {
+    t10 = /*#__PURE__*/jsx(BoxWithFallback, {
       as: "button",
       "aria-current": selected,
-      className: t3,
+      className: t4,
       type: "button",
       ...rest,
-      children: t8
+      children: t9
     });
     $[19] = rest;
     $[20] = selected;
-    $[21] = t3;
-    $[22] = t8;
-    $[23] = t9;
+    $[21] = t4;
+    $[22] = t9;
+    $[23] = t10;
   } else {
-    t9 = $[23];
+    t10 = $[23];
   }
-  let t10;
-  if ($[24] !== sxProp || $[25] !== t2 || $[26] !== t9) {
-    t10 = /*#__PURE__*/jsx(BoxWithFallback, {
+  let t11;
+  if ($[24] !== sxProp || $[25] !== t10 || $[26] !== t3) {
+    t11 = /*#__PURE__*/jsx(BoxWithFallback, {
       as: "li",
       sx: sxProp,
-      className: t1,
-      "data-selected": t2,
-      children: t9
+      className: t2,
+      "data-selected": t3,
+      children: t10
     });
     $[24] = sxProp;
-    $[25] = t2;
-    $[26] = t9;
-    $[27] = t10;
+    $[25] = t10;
+    $[26] = t3;
+    $[27] = t11;
   } else {
-    t10 = $[27];
+    t11 = $[27];
   }
-  return t10;
+  return t11;
 };
 
 export { SegmentedControlButton as default };