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

package/lib-esm/DataTable/Table.js

@@ -5,12 +5,13 @@ import React from 'react';
 import VisuallyHidden from '../_VisuallyHidden.js';
 import { SortDirection } from './sorting.js';
 import { useTableLayout } from './useTable.js';
+import { SkeletonText } from '../experimental/Skeleton/SkeletonText.js';
 import { Button } from '../internal/components/ButtonReset.js';
 import classes from './Table.module.css.js';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ScrollableRegion } from '../ScrollableRegion/ScrollableRegion.js';
-import { SkeletonText } from '../SkeletonText/SkeletonText.js';
 import Text from '../Text/Text.js';
 
 const Table = /*#__PURE__*/React.forwardRef(function Table(t0, ref) {
@@ -455,48 +456,55 @@ function TableCellPlaceholder(t0) {
 // ----------------------------------------------------------------------------
 
 function TableContainer(t0) {
-  const $ = c(10);
+  const $ = c(12);
   let children;
   let className;
   let rest;
+  let t1;
   if ($[0] !== t0) {
     ({
       children,
       className,
+      sx: t1,
       ...rest
     } = t0);
     $[0] = t0;
     $[1] = children;
     $[2] = className;
     $[3] = rest;
+    $[4] = t1;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
+    t1 = $[4];
   }
-  let t1;
-  if ($[4] !== className) {
-    t1 = clsx(className, classes.TableContainer);
-    $[4] = className;
-    $[5] = t1;
+  const sxProp = t1 === undefined ? defaultSxProp : t1;
+  let t2;
+  if ($[5] !== className) {
+    t2 = clsx(className, classes.TableContainer);
+    $[5] = className;
+    $[6] = t2;
   } else {
-    t1 = $[5];
+    t2 = $[6];
   }
-  let t2;
-  if ($[6] !== children || $[7] !== rest || $[8] !== t1) {
-    t2 = /*#__PURE__*/jsx(BoxWithFallback, {
+  let t3;
+  if ($[7] !== children || $[8] !== rest || $[9] !== sxProp || $[10] !== t2) {
+    t3 = /*#__PURE__*/jsx(BoxWithFallback, {
       ...rest,
-      className: t1,
+      className: t2,
+      sx: sxProp,
       children: children
     });
-    $[6] = children;
-    $[7] = rest;
-    $[8] = t1;
-    $[9] = t2;
+    $[7] = children;
+    $[8] = rest;
+    $[9] = sxProp;
+    $[10] = t2;
+    $[11] = t3;
   } else {
-    t2 = $[9];
+    t3 = $[11];
   }
-  return t2;
+  return t3;
 }
 const TableTitle = /*#__PURE__*/React.forwardRef(function TableTitle(t0, ref) {
   const $ = c(6);

package/lib-esm/Details/Details.js

@@ -3,36 +3,42 @@ import React, { useState, useEffect } from 'react';
 import { clsx } from 'clsx';
 import classes from './Details.module.css.js';
 import { useMergedRefs } from '../internal/hooks/useMergedRefs.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import Box from '../Box/Box.js';
 
 const Root = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
-  const $ = c(16);
+  const $ = c(28);
   let children;
   let className;
   let rest;
+  let t1;
   if ($[0] !== t0) {
     ({
       className,
       children,
+      sx: t1,
       ...rest
     } = t0);
     $[0] = t0;
     $[1] = children;
     $[2] = className;
     $[3] = rest;
+    $[4] = t1;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
+    t1 = $[4];
   }
+  const sxProp = t1 === undefined ? defaultSxProp : t1;
   const detailsRef = React.useRef(null);
   const ref = useMergedRefs(forwardRef, detailsRef);
   const [hasSummary, setHasSummary] = useState(false);
-  let t1;
   let t2;
-  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = () => {
+  let t3;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
       const {
         current: details
       } = detailsRef;
@@ -55,52 +61,93 @@ const Root = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
         observer.disconnect();
       };
     };
-    t2 = [];
-    $[4] = t1;
+    t3 = [];
     $[5] = t2;
+    $[6] = t3;
   } else {
-    t1 = $[4];
     t2 = $[5];
+    t3 = $[6];
   }
-  useEffect(t1, t2);
-  let t3;
-  if ($[6] !== className) {
-    t3 = clsx(className, classes.Details);
-    $[6] = className;
-    $[7] = t3;
-  } else {
-    t3 = $[7];
+  useEffect(t2, t3);
+  if (sxProp !== defaultSxProp) {
+    let t4;
+    if ($[7] !== className) {
+      t4 = clsx(className, classes.Details);
+      $[7] = className;
+      $[8] = t4;
+    } else {
+      t4 = $[8];
+    }
+    let t5;
+    if ($[9] !== hasSummary) {
+      t5 = !hasSummary && /*#__PURE__*/jsx(Details.Summary, {
+        "data-default-summary": true,
+        children: "See Details"
+      });
+      $[9] = hasSummary;
+      $[10] = t5;
+    } else {
+      t5 = $[10];
+    }
+    let t6;
+    if ($[11] !== children || $[12] !== ref || $[13] !== rest || $[14] !== sxProp || $[15] !== t4 || $[16] !== t5) {
+      t6 = /*#__PURE__*/jsxs(Box, {
+        as: "details",
+        className: t4,
+        ...rest,
+        sx: sxProp,
+        ref: ref,
+        children: [t5, children]
+      });
+      $[11] = children;
+      $[12] = ref;
+      $[13] = rest;
+      $[14] = sxProp;
+      $[15] = t4;
+      $[16] = t5;
+      $[17] = t6;
+    } else {
+      t6 = $[17];
+    }
+    return t6;
   }
   let t4;
-  if ($[8] !== hasSummary) {
-    t4 = !hasSummary && /*#__PURE__*/jsx(Details.Summary, {
+  if ($[18] !== className) {
+    t4 = clsx(className, classes.Details);
+    $[18] = className;
+    $[19] = t4;
+  } else {
+    t4 = $[19];
+  }
+  let t5;
+  if ($[20] !== hasSummary) {
+    t5 = !hasSummary && /*#__PURE__*/jsx(Details.Summary, {
       "data-default-summary": true,
       children: "See Details"
     });
-    $[8] = hasSummary;
-    $[9] = t4;
+    $[20] = hasSummary;
+    $[21] = t5;
   } else {
-    t4 = $[9];
+    t5 = $[21];
   }
-  let t5;
-  if ($[10] !== children || $[11] !== ref || $[12] !== rest || $[13] !== t3 || $[14] !== t4) {
-    t5 = /*#__PURE__*/jsxs(BoxWithFallback, {
-      as: "details",
-      className: t3,
+  let t6;
+  if ($[22] !== children || $[23] !== ref || $[24] !== rest || $[25] !== t4 || $[26] !== t5) {
+    t6 = /*#__PURE__*/jsxs("details", {
+      className: t4,
       ...rest,
       ref: ref,
-      children: [t4, children]
+      children: [t5, children]
     });
-    $[10] = children;
-    $[11] = ref;
-    $[12] = rest;
-    $[13] = t3;
-    $[14] = t4;
-    $[15] = t5;
+    $[22] = children;
+    $[23] = ref;
+    $[24] = rest;
+    $[25] = t4;
+    $[26] = t5;
+    $[27] = t6;
   } else {
-    t5 = $[15];
+    t6 = $[27];
   }
-  return t5;
+  return t6;
 });
 Root.displayName = 'Details';
 function Summary(t0) {

package/lib-esm/FilteredActionList/FilteredActionListLoaders.js

@@ -1,10 +1,10 @@
 import { c } from 'react-compiler-runtime';
 import { Stack } from '../Stack/Stack.js';
-import { SkeletonBox } from '../Skeleton/SkeletonBox.js';
 import classes from './FilteredActionListLoaders.module.css.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import Box from '../Box/Box.js';
 import StyledSpinner from '../Spinner/Spinner.js';
+import { SkeletonBox } from '../Skeleton/SkeletonBox.js';
 
 class FilteredActionListLoadingType {
   constructor(name, appearsInBody) {

package/lib-esm/FormControl/FormControl.js

@@ -12,7 +12,7 @@ import FormControlValidation from './_FormControlValidation.js';
 import { FormControlContextProvider } from './_FormControlContext.js';
 import { warning } from '../utils/warning.js';
 import classes from './FormControl.module.css.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import CheckboxOrRadioGroupContext from '../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.js';
 import Autocomplete from '../Autocomplete/Autocomplete.js';
@@ -22,6 +22,7 @@ import TextInput from '../TextInput/TextInput.js';
 import TextInputWithTokens from '../TextInputWithTokens/TextInputWithTokens.js';
 import Textarea from '../Textarea/Textarea.js';
 import { SelectPanel } from '../SelectPanel/SelectPanel.js';
+import Box from '../Box/Box.js';
 
 const FormControl = /*#__PURE__*/React.forwardRef((t0, ref) => {
   var _slots$validation, _slots$label;
@@ -161,15 +162,23 @@ const FormControl = /*#__PURE__*/React.forwardRef((t0, ref) => {
   } else {
     t10 = $[23];
   }
-  const t11 = isChoiceInput || layout === "horizontal" ? /*#__PURE__*/jsx(BoxWithFallback, {
+  const t11 = isChoiceInput || layout === "horizontal" ? sx !== defaultSxProp ? /*#__PURE__*/jsx(Box, {
     ref: ref,
     "data-has-leading-visual": slots.leadingVisual ? "" : undefined,
     sx: sx,
     className: clsx(className, classes.ControlHorizontalLayout),
     children: InputChildren
-  }) : /*#__PURE__*/jsxs(BoxWithFallback, {
+  }) : /*#__PURE__*/jsx("div", {
+    ref: ref,
+    "data-has-leading-visual": slots.leadingVisual ? "" : undefined,
+    className: clsx(className, classes.ControlHorizontalLayout),
+    children: InputChildren
+  }) : /*#__PURE__*/jsxs(Box, {
     ref: ref,
     "data-has-label": !isLabelHidden ? "" : undefined,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
     sx: sx,
     className: clsx(className, classes.ControlVerticalLayout),
     children: [slots.label, /*#__PURE__*/React.isValidElement(InputComponent) && /*#__PURE__*/React.cloneElement(InputComponent, Object.assign({

package/lib-esm/Header/Header.js

@@ -2,20 +2,23 @@ import { c } from 'react-compiler-runtime';
 import React from 'react';
 import { clsx } from 'clsx';
 import classes from './Header.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 Header = /*#__PURE__*/React.forwardRef(function Header(t0, forwardRef) {
-  const $ = c(13);
+  const $ = c(22);
   let children;
   let className;
   let rest;
   let t1;
+  let t2;
   if ($[0] !== t0) {
     ({
       children,
       className,
-      as: t1,
+      sx: t1,
+      as: t2,
       ...rest
     } = t0);
     $[0] = t0;
@@ -23,52 +26,86 @@ const Header = /*#__PURE__*/React.forwardRef(function Header(t0, forwardRef) {
     $[2] = className;
     $[3] = rest;
     $[4] = t1;
+    $[5] = t2;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
     t1 = $[4];
+    t2 = $[5];
   }
-  const as = t1 === undefined ? "header" : t1;
-  let t2;
-  if ($[5] !== className) {
-    t2 = clsx(className, classes.Header);
-    $[5] = className;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
+  const sxProp = t1 === undefined ? defaultSxProp : t1;
+  const as = t2 === undefined ? "header" : t2;
+  if (sxProp !== defaultSxProp || as !== "header") {
+    let t3;
+    if ($[6] !== className) {
+      t3 = clsx(className, classes.Header);
+      $[6] = className;
+      $[7] = t3;
+    } else {
+      t3 = $[7];
+    }
+    let t4;
+    if ($[8] !== as || $[9] !== children || $[10] !== forwardRef || $[11] !== rest || $[12] !== sxProp || $[13] !== t3) {
+      t4 = /*#__PURE__*/jsx(Box, {
+        as: as,
+        sx: sxProp,
+        ref: forwardRef,
+        className: t3,
+        ...rest,
+        children: children
+      });
+      $[8] = as;
+      $[9] = children;
+      $[10] = forwardRef;
+      $[11] = rest;
+      $[12] = sxProp;
+      $[13] = t3;
+      $[14] = t4;
+    } else {
+      t4 = $[14];
+    }
+    return t4;
   }
   let t3;
-  if ($[7] !== as || $[8] !== children || $[9] !== forwardRef || $[10] !== rest || $[11] !== t2) {
-    t3 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: as,
+  if ($[15] !== className) {
+    t3 = clsx(className, classes.Header);
+    $[15] = className;
+    $[16] = t3;
+  } else {
+    t3 = $[16];
+  }
+  let t4;
+  if ($[17] !== children || $[18] !== forwardRef || $[19] !== rest || $[20] !== t3) {
+    t4 = /*#__PURE__*/jsx("header", {
       ref: forwardRef,
-      className: t2,
+      className: t3,
       ...rest,
       children: children
     });
-    $[7] = as;
-    $[8] = children;
-    $[9] = forwardRef;
-    $[10] = rest;
-    $[11] = t2;
-    $[12] = t3;
+    $[17] = children;
+    $[18] = forwardRef;
+    $[19] = rest;
+    $[20] = t3;
+    $[21] = t4;
   } else {
-    t3 = $[12];
+    t4 = $[21];
   }
-  return t3;
+  return t4;
 });
 Header.displayName = 'Header';
 const HeaderItem = /*#__PURE__*/React.forwardRef(function HeaderItem(t0, forwardRef) {
-  const $ = c(13);
+  const $ = c(23);
   let children;
   let className;
   let full;
   let rest;
+  let t1;
   if ($[0] !== t0) {
     ({
       children,
       className,
+      sx: t1,
       full,
       ...rest
     } = t0);
@@ -77,52 +114,89 @@ const HeaderItem = /*#__PURE__*/React.forwardRef(function HeaderItem(t0, forward
     $[2] = className;
     $[3] = full;
     $[4] = rest;
+    $[5] = t1;
   } else {
     children = $[1];
     className = $[2];
     full = $[3];
     rest = $[4];
+    t1 = $[5];
   }
-  let t1;
-  if ($[5] !== className) {
-    t1 = clsx(className, classes.HeaderItem);
-    $[5] = className;
-    $[6] = t1;
-  } else {
-    t1 = $[6];
+  const sxProp = t1 === undefined ? defaultSxProp : t1;
+  if (sxProp !== defaultSxProp) {
+    let t2;
+    if ($[6] !== className) {
+      t2 = clsx(className, classes.HeaderItem);
+      $[6] = className;
+      $[7] = t2;
+    } else {
+      t2 = $[7];
+    }
+    let t3;
+    if ($[8] !== children || $[9] !== forwardRef || $[10] !== full || $[11] !== rest || $[12] !== sxProp || $[13] !== t2) {
+      t3 = /*#__PURE__*/jsx(Box, {
+        as: "div",
+        sx: sxProp,
+        ref: forwardRef,
+        className: t2,
+        "data-full": full,
+        ...rest,
+        children: children
+      });
+      $[8] = children;
+      $[9] = forwardRef;
+      $[10] = full;
+      $[11] = rest;
+      $[12] = sxProp;
+      $[13] = t2;
+      $[14] = t3;
+    } else {
+      t3 = $[14];
+    }
+    return t3;
   }
   let t2;
-  if ($[7] !== children || $[8] !== forwardRef || $[9] !== full || $[10] !== rest || $[11] !== t1) {
-    t2 = /*#__PURE__*/jsx(BoxWithFallback, {
+  if ($[15] !== className) {
+    t2 = clsx(className, classes.HeaderItem);
+    $[15] = className;
+    $[16] = t2;
+  } else {
+    t2 = $[16];
+  }
+  let t3;
+  if ($[17] !== children || $[18] !== forwardRef || $[19] !== full || $[20] !== rest || $[21] !== t2) {
+    t3 = /*#__PURE__*/jsx("div", {
       ref: forwardRef,
-      className: t1,
+      className: t2,
       "data-full": full,
       ...rest,
       children: children
     });
-    $[7] = children;
-    $[8] = forwardRef;
-    $[9] = full;
-    $[10] = rest;
-    $[11] = t1;
-    $[12] = t2;
+    $[17] = children;
+    $[18] = forwardRef;
+    $[19] = full;
+    $[20] = rest;
+    $[21] = t2;
+    $[22] = t3;
   } else {
-    t2 = $[12];
+    t3 = $[22];
   }
-  return t2;
+  return t3;
 });
 HeaderItem.displayName = 'Header.Item';
 const HeaderLink = /*#__PURE__*/React.forwardRef(function HeaderLink(t0, forwardRef) {
-  const $ = c(13);
+  const $ = c(22);
   let children;
   let className;
   let rest;
   let t1;
+  let t2;
   if ($[0] !== t0) {
     ({
       children,
       className,
-      as: t1,
+      sx: t1,
+      as: t2,
       ...rest
     } = t0);
     $[0] = t0;
@@ -130,40 +204,72 @@ const HeaderLink = /*#__PURE__*/React.forwardRef(function HeaderLink(t0, forward
     $[2] = className;
     $[3] = rest;
     $[4] = t1;
+    $[5] = t2;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
     t1 = $[4];
+    t2 = $[5];
   }
-  const as = t1 === undefined ? "a" : t1;
-  let t2;
-  if ($[5] !== className) {
-    t2 = clsx(className, classes.HeaderLink);
-    $[5] = className;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
+  const sxProp = t1 === undefined ? defaultSxProp : t1;
+  const as = t2 === undefined ? "a" : t2;
+  if (sxProp !== defaultSxProp || as !== "a") {
+    let t3;
+    if ($[6] !== className) {
+      t3 = clsx(className, classes.HeaderLink);
+      $[6] = className;
+      $[7] = t3;
+    } else {
+      t3 = $[7];
+    }
+    let t4;
+    if ($[8] !== as || $[9] !== children || $[10] !== forwardRef || $[11] !== rest || $[12] !== sxProp || $[13] !== t3) {
+      t4 = /*#__PURE__*/jsx(Box, {
+        as: as,
+        sx: sxProp,
+        ref: forwardRef,
+        className: t3,
+        ...rest,
+        children: children
+      });
+      $[8] = as;
+      $[9] = children;
+      $[10] = forwardRef;
+      $[11] = rest;
+      $[12] = sxProp;
+      $[13] = t3;
+      $[14] = t4;
+    } else {
+      t4 = $[14];
+    }
+    return t4;
   }
   let t3;
-  if ($[7] !== as || $[8] !== children || $[9] !== forwardRef || $[10] !== rest || $[11] !== t2) {
-    t3 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: as,
+  if ($[15] !== className) {
+    t3 = clsx(className, classes.HeaderLink);
+    $[15] = className;
+    $[16] = t3;
+  } else {
+    t3 = $[16];
+  }
+  let t4;
+  if ($[17] !== children || $[18] !== forwardRef || $[19] !== rest || $[20] !== t3) {
+    t4 = /*#__PURE__*/jsx("a", {
       ref: forwardRef,
-      className: t2,
+      className: t3,
       ...rest,
       children: children
     });
-    $[7] = as;
-    $[8] = children;
-    $[9] = forwardRef;
-    $[10] = rest;
-    $[11] = t2;
-    $[12] = t3;
+    $[17] = children;
+    $[18] = forwardRef;
+    $[19] = rest;
+    $[20] = t3;
+    $[21] = t4;
   } else {
-    t3 = $[12];
+    t4 = $[21];
   }
-  return t3;
+  return t4;
 });
 HeaderLink.displayName = 'Header.Link';
 var Header$1 = Object.assign(Header, {

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

@@ -11,6 +11,6 @@ export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> & SxProp
      */
     variant: MessageVariant;
 };
-export declare function InlineMessage({ children, className, size, variant, ...rest }: InlineMessageProps): React.JSX.Element;
+export declare function InlineMessage({ children, className, size, variant, sx: sxProp, ...rest }: InlineMessageProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=InlineMessage.d.ts.map