@primer/react 38.0.0-rc.195178541 → 38.0.0-rc.2

package/lib-esm/Header/Header.js

@@ -2,23 +2,20 @@ import { c } from 'react-compiler-runtime';
 import React from 'react';
 import { clsx } from 'clsx';
 import classes from './Header.module.css.js';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
+import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx } from 'react/jsx-runtime';
-import Box from '../Box/Box.js';
 
 const Header = /*#__PURE__*/React.forwardRef(function Header(t0, forwardRef) {
-  const $ = c(22);
+  const $ = c(13);
   let children;
   let className;
   let rest;
   let t1;
-  let t2;
   if ($[0] !== t0) {
     ({
       children,
       className,
-      sx: t1,
-      as: t2,
+      as: t1,
       ...rest
     } = t0);
     $[0] = t0;
@@ -26,86 +23,52 @@ 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 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 ($[15] !== className) {
-    t3 = clsx(className, classes.Header);
-    $[15] = className;
-    $[16] = t3;
+  const as = t1 === undefined ? "header" : t1;
+  let t2;
+  if ($[5] !== className) {
+    t2 = clsx(className, classes.Header);
+    $[5] = className;
+    $[6] = t2;
   } else {
-    t3 = $[16];
+    t2 = $[6];
   }
-  let t4;
-  if ($[17] !== children || $[18] !== forwardRef || $[19] !== rest || $[20] !== t3) {
-    t4 = /*#__PURE__*/jsx("header", {
+  let t3;
+  if ($[7] !== as || $[8] !== children || $[9] !== forwardRef || $[10] !== rest || $[11] !== t2) {
+    t3 = /*#__PURE__*/jsx(BoxWithFallback, {
+      as: as,
       ref: forwardRef,
-      className: t3,
+      className: t2,
       ...rest,
       children: children
     });
-    $[17] = children;
-    $[18] = forwardRef;
-    $[19] = rest;
-    $[20] = t3;
-    $[21] = t4;
+    $[7] = as;
+    $[8] = children;
+    $[9] = forwardRef;
+    $[10] = rest;
+    $[11] = t2;
+    $[12] = t3;
   } else {
-    t4 = $[21];
+    t3 = $[12];
   }
-  return t4;
+  return t3;
 });
 Header.displayName = 'Header';
 const HeaderItem = /*#__PURE__*/React.forwardRef(function HeaderItem(t0, forwardRef) {
-  const $ = c(23);
+  const $ = c(13);
   let children;
   let className;
   let full;
   let rest;
-  let t1;
   if ($[0] !== t0) {
     ({
       children,
       className,
-      sx: t1,
       full,
       ...rest
     } = t0);
@@ -114,89 +77,52 @@ 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];
-  }
-  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 ($[15] !== className) {
-    t2 = clsx(className, classes.HeaderItem);
-    $[15] = className;
-    $[16] = t2;
+  let t1;
+  if ($[5] !== className) {
+    t1 = clsx(className, classes.HeaderItem);
+    $[5] = className;
+    $[6] = t1;
   } else {
-    t2 = $[16];
+    t1 = $[6];
   }
-  let t3;
-  if ($[17] !== children || $[18] !== forwardRef || $[19] !== full || $[20] !== rest || $[21] !== t2) {
-    t3 = /*#__PURE__*/jsx("div", {
+  let t2;
+  if ($[7] !== children || $[8] !== forwardRef || $[9] !== full || $[10] !== rest || $[11] !== t1) {
+    t2 = /*#__PURE__*/jsx(BoxWithFallback, {
       ref: forwardRef,
-      className: t2,
+      className: t1,
       "data-full": full,
       ...rest,
       children: children
     });
-    $[17] = children;
-    $[18] = forwardRef;
-    $[19] = full;
-    $[20] = rest;
-    $[21] = t2;
-    $[22] = t3;
+    $[7] = children;
+    $[8] = forwardRef;
+    $[9] = full;
+    $[10] = rest;
+    $[11] = t1;
+    $[12] = t2;
   } else {
-    t3 = $[22];
+    t2 = $[12];
   }
-  return t3;
+  return t2;
 });
 HeaderItem.displayName = 'Header.Item';
 const HeaderLink = /*#__PURE__*/React.forwardRef(function HeaderLink(t0, forwardRef) {
-  const $ = c(22);
+  const $ = c(13);
   let children;
   let className;
   let rest;
   let t1;
-  let t2;
   if ($[0] !== t0) {
     ({
       children,
       className,
-      sx: t1,
-      as: t2,
+      as: t1,
       ...rest
     } = t0);
     $[0] = t0;
@@ -204,72 +130,40 @@ 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 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 ($[15] !== className) {
-    t3 = clsx(className, classes.HeaderLink);
-    $[15] = className;
-    $[16] = t3;
+  const as = t1 === undefined ? "a" : t1;
+  let t2;
+  if ($[5] !== className) {
+    t2 = clsx(className, classes.HeaderLink);
+    $[5] = className;
+    $[6] = t2;
   } else {
-    t3 = $[16];
+    t2 = $[6];
   }
-  let t4;
-  if ($[17] !== children || $[18] !== forwardRef || $[19] !== rest || $[20] !== t3) {
-    t4 = /*#__PURE__*/jsx("a", {
+  let t3;
+  if ($[7] !== as || $[8] !== children || $[9] !== forwardRef || $[10] !== rest || $[11] !== t2) {
+    t3 = /*#__PURE__*/jsx(BoxWithFallback, {
+      as: as,
       ref: forwardRef,
-      className: t3,
+      className: t2,
       ...rest,
       children: children
     });
-    $[17] = children;
-    $[18] = forwardRef;
-    $[19] = rest;
-    $[20] = t3;
-    $[21] = t4;
+    $[7] = as;
+    $[8] = children;
+    $[9] = forwardRef;
+    $[10] = rest;
+    $[11] = t2;
+    $[12] = t3;
   } else {
-    t4 = $[21];
+    t3 = $[12];
   }
-  return t4;
+  return t3;
 });
 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, sx: sxProp, ...rest }: InlineMessageProps): React.JSX.Element;
+export declare function InlineMessage({ children, className, size, variant, ...rest }: InlineMessageProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=InlineMessage.d.ts.map

package/lib-esm/InlineMessage/InlineMessage.js

@@ -2,9 +2,8 @@ import { c } from 'react-compiler-runtime';
 import { AlertFillIcon, CheckCircleFillIcon, AlertIcon, CheckCircleIcon } from '@primer/octicons-react';
 import { clsx } from 'clsx';
 import classes from './InlineMessage.module.css.js';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
+import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import Box from '../Box/Box.js';
 
 const variantToIcon = variant => {
   const icons = {
@@ -45,12 +44,11 @@ const variantToSmallIcon = variant => {
   return icons[variant];
 };
 function InlineMessage(t0) {
-  const $ = c(29);
+  const $ = c(18);
   let children;
   let className;
   let rest;
   let t1;
-  let t2;
   let variant;
   if ($[0] !== t0) {
     ({
@@ -58,7 +56,6 @@ function InlineMessage(t0) {
       className,
       size: t1,
       variant,
-      sx: t2,
       ...rest
     } = t0);
     $[0] = t0;
@@ -66,88 +63,53 @@ function InlineMessage(t0) {
     $[2] = className;
     $[3] = rest;
     $[4] = t1;
-    $[5] = t2;
-    $[6] = variant;
+    $[5] = variant;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
     t1 = $[4];
-    t2 = $[5];
-    variant = $[6];
+    variant = $[5];
   }
   const size = t1 === undefined ? "medium" : t1;
-  const sxProp = t2 === undefined ? defaultSxProp : t2;
-  let t3;
-  if ($[7] !== size || $[8] !== variant) {
-    t3 = size === "small" ? variantToSmallIcon(variant) : variantToIcon(variant);
-    $[7] = size;
-    $[8] = variant;
-    $[9] = t3;
+  let t2;
+  if ($[6] !== size || $[7] !== variant) {
+    t2 = size === "small" ? variantToSmallIcon(variant) : variantToIcon(variant);
+    $[6] = size;
+    $[7] = variant;
+    $[8] = t2;
   } else {
-    t3 = $[9];
-  }
-  const icon = t3;
-  if (sxProp !== defaultSxProp) {
-    let t4;
-    if ($[10] !== className) {
-      t4 = clsx(className, classes.InlineMessage);
-      $[10] = className;
-      $[11] = t4;
-    } else {
-      t4 = $[11];
-    }
-    let t5;
-    if ($[12] !== children || $[13] !== icon || $[14] !== rest || $[15] !== size || $[16] !== sxProp || $[17] !== t4 || $[18] !== variant) {
-      t5 = /*#__PURE__*/jsxs(Box, {
-        sx: sxProp,
-        className: t4,
-        ...rest,
-        "data-size": size,
-        "data-variant": variant,
-        children: [icon, children]
-      });
-      $[12] = children;
-      $[13] = icon;
-      $[14] = rest;
-      $[15] = size;
-      $[16] = sxProp;
-      $[17] = t4;
-      $[18] = variant;
-      $[19] = t5;
-    } else {
-      t5 = $[19];
-    }
-    return t5;
+    t2 = $[8];
   }
-  let t4;
-  if ($[20] !== className) {
-    t4 = clsx(className, classes.InlineMessage);
-    $[20] = className;
-    $[21] = t4;
+  const icon = t2;
+  let t3;
+  if ($[9] !== className) {
+    t3 = clsx(className, classes.InlineMessage);
+    $[9] = className;
+    $[10] = t3;
   } else {
-    t4 = $[21];
+    t3 = $[10];
   }
-  let t5;
-  if ($[22] !== children || $[23] !== icon || $[24] !== rest || $[25] !== size || $[26] !== t4 || $[27] !== variant) {
-    t5 = /*#__PURE__*/jsxs("div", {
-      className: t4,
+  let t4;
+  if ($[11] !== children || $[12] !== icon || $[13] !== rest || $[14] !== size || $[15] !== t3 || $[16] !== variant) {
+    t4 = /*#__PURE__*/jsxs(BoxWithFallback, {
+      className: t3,
       ...rest,
       "data-size": size,
       "data-variant": variant,
       children: [icon, children]
     });
-    $[22] = children;
-    $[23] = icon;
-    $[24] = rest;
-    $[25] = size;
-    $[26] = t4;
-    $[27] = variant;
-    $[28] = t5;
+    $[11] = children;
+    $[12] = icon;
+    $[13] = rest;
+    $[14] = size;
+    $[15] = t3;
+    $[16] = variant;
+    $[17] = t4;
   } else {
-    t5 = $[28];
+    t4 = $[17];
   }
-  return t5;
+  return t4;
 }
 
 export { InlineMessage };

package/lib-esm/Label/Label.js

@@ -6,7 +6,7 @@ import { jsx } from 'react/jsx-runtime';
 import Box from '../Box/Box.js';
 
 const Label = /*#__PURE__*/React.forwardRef(function Label(t0, ref) {
-  const $ = c(23);
+  const $ = c(24);
   let as;
   let className;
   let rest;
@@ -76,21 +76,23 @@ const Label = /*#__PURE__*/React.forwardRef(function Label(t0, ref) {
     t3 = $[16];
   }
   let t4;
-  if ($[17] !== Component || $[18] !== rest || $[19] !== size || $[20] !== t3 || $[21] !== variant) {
+  if ($[17] !== Component || $[18] !== ref || $[19] !== rest || $[20] !== size || $[21] !== t3 || $[22] !== variant) {
     t4 = /*#__PURE__*/jsx(Component, {
       className: t3,
       "data-size": size,
       "data-variant": variant,
+      ref: ref,
       ...rest
     });
     $[17] = Component;
-    $[18] = rest;
-    $[19] = size;
-    $[20] = t3;
-    $[21] = variant;
-    $[22] = t4;
+    $[18] = ref;
+    $[19] = rest;
+    $[20] = size;
+    $[21] = t3;
+    $[22] = variant;
+    $[23] = t4;
   } else {
-    t4 = $[22];
+    t4 = $[23];
   }
   return t4;
 });

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { SxProp } from '../sx';
 export type LabelGroupProps = {
     /** Customize the element type of the rendered container */
     as?: React.ElementType;
@@ -8,7 +7,7 @@ export type LabelGroupProps = {
     /** How many tokens to show. `'auto'` truncates the tokens to fit in the parent container. Passing a number will truncate after that number tokens. If this is undefined, tokens will never be truncated. */
     visibleChildCount?: 'auto' | number;
     className?: string;
-} & SxProp;
+};
 declare const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>>;
 export default LabelGroup;
 //# sourceMappingURL=LabelGroup.d.ts.map

package/lib-esm/LabelGroup/LabelGroup.js

@@ -8,15 +8,13 @@ import VisuallyHidden from '../_VisuallyHidden.js';
 import { IconButton } from '../Button/IconButton.js';
 import { ButtonComponent } from '../Button/Button.js';
 import { useTheme } from '../ThemeProvider.js';
-import sx from '../sx.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { AnchoredOverlay } from '../AnchoredOverlay/AnchoredOverlay.js';
-import Box from '../Box/Box.js';
 
 const StyledLabelGroupContainer = styled.div.withConfig({
   displayName: "LabelGroup__StyledLabelGroupContainer",
   componentId: "sc-6tqg8q-0"
-})(["display:flex;flex-wrap:nowrap;gap:", ";line-height:1;max-width:100%;overflow:hidden;&[data-overflow='inline']{flex-wrap:wrap;}&[data-list]{padding-inline-start:0;margin-block-start:0;margin-block-end:0;list-style-type:none;}", ";"], get('space.1'), sx);
+})(["display:flex;flex-wrap:nowrap;gap:", ";line-height:1;max-width:100%;overflow:hidden;&[data-overflow='inline']{flex-wrap:wrap;}&[data-list]{padding-inline-start:0;margin-block-start:0;margin-block-end:0;list-style-type:none;}"], get('space.1'));
 const ItemWrapper = styled.div.withConfig({
   displayName: "LabelGroup__ItemWrapper",
   componentId: "sc-6tqg8q-1"
@@ -109,16 +107,18 @@ const OverlayToggle = t0 => {
       focusZoneSettings: {
         disabled: true
       },
-      children: /*#__PURE__*/jsxs(Box, {
-        alignItems: "flex-start",
-        display: "flex",
-        width: overlayWidth,
-        padding: `${overlayPaddingPx}px`,
-        children: [/*#__PURE__*/jsx(Box, {
+      children: /*#__PURE__*/jsxs("div", {
+        style: {
+          alignItems: "flex-start",
           display: "flex",
-          flexWrap: "wrap",
-          sx: {
-            gap: 1
+          width: overlayWidth,
+          padding: `${overlayPaddingPx}px`
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          style: {
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "4px"
           },
           children: children
         }), /*#__PURE__*/jsx(IconButton, {
@@ -126,7 +126,7 @@ const OverlayToggle = t0 => {
           icon: XIcon,
           "aria-label": "Close",
           variant: "invisible",
-          sx: {
+          style: {
             flexShrink: 0
           }
         })]
@@ -152,7 +152,6 @@ const LabelGroup = ({
   children,
   visibleChildCount,
   overflowStyle = 'overlay',
-  sx: sxProp,
   as = 'ul',
   className
 }) => {
@@ -311,7 +310,6 @@ const LabelGroup = ({
     ref: containerRef,
     "data-overflow": overflowStyle === 'inline' && isOverflowShown ? 'inline' : undefined,
     "data-list": isList || undefined,
-    sx: sxProp,
     className: className,
     as: as,
     children: [React.Children.map(children, (child_0, index) => /*#__PURE__*/jsx(ItemWrapper
@@ -345,7 +343,6 @@ const LabelGroup = ({
   }) : /*#__PURE__*/jsx(StyledLabelGroupContainer, {
     "data-overflow": "inline",
     "data-list": isList || undefined,
-    sx: sxProp,
     as: as,
     className: className,
     children: isList ? React.Children.map(children, (child_1, index_0) => {