@primer/react 37.29.0-rc.d46ec0131 → 38.0.0-rc.389f01088

package/lib-esm/SegmentedControl/SegmentedControlIconButton.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';
@@ -15,14 +16,14 @@ const SegmentedControlIconButton = t0 => {
   let description;
   let rest;
   let selected;
-  let sxProp;
+  let t1;
   let tooltipDirection;
   if ($[0] !== t0) {
     ({
       "aria-label": ariaLabel,
       icon: Icon,
       selected,
-      sx: sxProp,
+      sx: t1,
       className,
       description,
       tooltipDirection,
@@ -35,7 +36,7 @@ const SegmentedControlIconButton = t0 => {
     $[4] = description;
     $[5] = rest;
     $[6] = selected;
-    $[7] = sxProp;
+    $[7] = t1;
     $[8] = tooltipDirection;
   } else {
     Icon = $[1];
@@ -44,187 +45,188 @@ const SegmentedControlIconButton = t0 => {
     description = $[4];
     rest = $[5];
     selected = $[6];
-    sxProp = $[7];
+    t1 = $[7];
     tooltipDirection = $[8];
   }
+  const sxProp = t1 === undefined ? defaultSxProp : t1;
   const tooltipFlagEnabled = useFeatureFlag("primer_react_segmented_control_tooltip");
   if (tooltipFlagEnabled) {
-    let t1;
+    let t2;
     if ($[9] !== className) {
-      t1 = clsx(classes.Item, className);
+      t2 = clsx(classes.Item, className);
       $[9] = className;
-      $[10] = t1;
+      $[10] = t2;
     } else {
-      t1 = $[10];
+      t2 = $[10];
     }
-    const t2 = selected || undefined;
-    const t3 = description ? undefined : "label";
-    const t4 = description ? description : ariaLabel;
-    const t5 = description ? ariaLabel : undefined;
-    let t6;
+    const t3 = selected || undefined;
+    const t4 = description ? undefined : "label";
+    const t5 = description ? description : ariaLabel;
+    const t6 = description ? ariaLabel : undefined;
+    let t7;
     if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-      t6 = clsx(classes.Button, classes.IconButton);
-      $[11] = t6;
+      t7 = clsx(classes.Button, classes.IconButton);
+      $[11] = t7;
     } else {
-      t6 = $[11];
+      t7 = $[11];
     }
-    let t7;
+    let t8;
     if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-      t7 = clsx(classes.Content, "segmentedControl-content");
-      $[12] = t7;
+      t8 = clsx(classes.Content, "segmentedControl-content");
+      $[12] = t8;
     } else {
-      t7 = $[12];
+      t8 = $[12];
     }
-    let t8;
+    let t9;
     if ($[13] !== Icon) {
-      t8 = isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {});
+      t9 = isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {});
       $[13] = Icon;
-      $[14] = t8;
+      $[14] = t9;
     } else {
-      t8 = $[14];
+      t9 = $[14];
     }
-    let t9;
-    if ($[15] !== t8) {
-      t9 = /*#__PURE__*/jsx("span", {
-        className: t7,
-        children: t8
+    let t10;
+    if ($[15] !== t9) {
+      t10 = /*#__PURE__*/jsx("span", {
+        className: t8,
+        children: t9
       });
-      $[15] = t8;
-      $[16] = t9;
+      $[15] = t9;
+      $[16] = t10;
     } else {
-      t9 = $[16];
+      t10 = $[16];
     }
-    let t10;
-    if ($[17] !== rest || $[18] !== selected || $[19] !== t5 || $[20] !== t9) {
-      t10 = /*#__PURE__*/jsx(BoxWithFallback, {
+    let t11;
+    if ($[17] !== rest || $[18] !== selected || $[19] !== t10 || $[20] !== t6) {
+      t11 = /*#__PURE__*/jsx(BoxWithFallback, {
         as: "button",
         "aria-current": selected,
-        "aria-label": t5,
-        className: t6,
+        "aria-label": t6,
+        className: t7,
         ...rest,
-        children: t9
+        children: t10
       });
       $[17] = rest;
       $[18] = selected;
-      $[19] = t5;
-      $[20] = t9;
-      $[21] = t10;
+      $[19] = t10;
+      $[20] = t6;
+      $[21] = t11;
     } else {
-      t10 = $[21];
+      t11 = $[21];
     }
-    let t11;
-    if ($[22] !== t10 || $[23] !== t3 || $[24] !== t4 || $[25] !== tooltipDirection) {
-      t11 = /*#__PURE__*/jsx(Tooltip, {
-        type: t3,
-        text: t4,
+    let t12;
+    if ($[22] !== t11 || $[23] !== t4 || $[24] !== t5 || $[25] !== tooltipDirection) {
+      t12 = /*#__PURE__*/jsx(Tooltip, {
+        type: t4,
+        text: t5,
         direction: tooltipDirection,
-        children: t10
+        children: t11
       });
-      $[22] = t10;
-      $[23] = t3;
-      $[24] = t4;
+      $[22] = t11;
+      $[23] = t4;
+      $[24] = t5;
       $[25] = tooltipDirection;
-      $[26] = t11;
+      $[26] = t12;
     } else {
-      t11 = $[26];
+      t12 = $[26];
     }
-    let t12;
-    if ($[27] !== sxProp || $[28] !== t1 || $[29] !== t11 || $[30] !== t2) {
-      t12 = /*#__PURE__*/jsx(BoxWithFallback, {
+    let t13;
+    if ($[27] !== sxProp || $[28] !== t12 || $[29] !== t2 || $[30] !== t3) {
+      t13 = /*#__PURE__*/jsx(BoxWithFallback, {
         as: "li",
         sx: sxProp,
-        className: t1,
-        "data-selected": t2,
-        children: t11
+        className: t2,
+        "data-selected": t3,
+        children: t12
       });
       $[27] = sxProp;
-      $[28] = t1;
-      $[29] = t11;
-      $[30] = t2;
-      $[31] = t12;
+      $[28] = t12;
+      $[29] = t2;
+      $[30] = t3;
+      $[31] = t13;
     } else {
-      t12 = $[31];
+      t13 = $[31];
     }
-    return t12;
+    return t13;
   } else {
-    let t1;
+    let t2;
     if ($[32] !== className) {
-      t1 = clsx(classes.Item, className);
+      t2 = clsx(classes.Item, className);
       $[32] = className;
-      $[33] = t1;
+      $[33] = t2;
     } else {
-      t1 = $[33];
+      t2 = $[33];
     }
-    const t2 = selected || undefined;
-    let t3;
+    const t3 = selected || undefined;
+    let t4;
     if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
-      t3 = clsx(classes.Button, classes.IconButton);
-      $[34] = t3;
+      t4 = clsx(classes.Button, classes.IconButton);
+      $[34] = t4;
     } else {
-      t3 = $[34];
+      t4 = $[34];
     }
-    let t4;
+    let t5;
     if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
-      t4 = clsx(classes.Content, "segmentedControl-content");
-      $[35] = t4;
+      t5 = clsx(classes.Content, "segmentedControl-content");
+      $[35] = t5;
     } else {
-      t4 = $[35];
+      t5 = $[35];
     }
-    let t5;
+    let t6;
     if ($[36] !== Icon) {
-      t5 = isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {});
+      t6 = isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {});
       $[36] = Icon;
-      $[37] = t5;
+      $[37] = t6;
     } else {
-      t5 = $[37];
+      t6 = $[37];
     }
-    let t6;
-    if ($[38] !== t5) {
-      t6 = /*#__PURE__*/jsx("span", {
-        className: t4,
-        children: t5
+    let t7;
+    if ($[38] !== t6) {
+      t7 = /*#__PURE__*/jsx("span", {
+        className: t5,
+        children: t6
       });
-      $[38] = t5;
-      $[39] = t6;
+      $[38] = t6;
+      $[39] = t7;
     } else {
-      t6 = $[39];
+      t7 = $[39];
     }
-    let t7;
-    if ($[40] !== ariaLabel || $[41] !== rest || $[42] !== selected || $[43] !== t6) {
-      t7 = /*#__PURE__*/jsx(BoxWithFallback, {
+    let t8;
+    if ($[40] !== ariaLabel || $[41] !== rest || $[42] !== selected || $[43] !== t7) {
+      t8 = /*#__PURE__*/jsx(BoxWithFallback, {
         as: "button",
         "aria-label": ariaLabel,
         "aria-current": selected,
-        className: t3,
+        className: t4,
         ...rest,
-        children: t6
+        children: t7
       });
       $[40] = ariaLabel;
       $[41] = rest;
       $[42] = selected;
-      $[43] = t6;
-      $[44] = t7;
+      $[43] = t7;
+      $[44] = t8;
     } else {
-      t7 = $[44];
+      t8 = $[44];
     }
-    let t8;
-    if ($[45] !== sxProp || $[46] !== t1 || $[47] !== t2 || $[48] !== t7) {
-      t8 = /*#__PURE__*/jsx(BoxWithFallback, {
+    let t9;
+    if ($[45] !== sxProp || $[46] !== t2 || $[47] !== t3 || $[48] !== t8) {
+      t9 = /*#__PURE__*/jsx(BoxWithFallback, {
         as: "li",
         sx: sxProp,
-        className: t1,
-        "data-selected": t2,
-        children: t7
+        className: t2,
+        "data-selected": t3,
+        children: t8
       });
       $[45] = sxProp;
-      $[46] = t1;
-      $[47] = t2;
-      $[48] = t7;
-      $[49] = t8;
+      $[46] = t2;
+      $[47] = t3;
+      $[48] = t8;
+      $[49] = t9;
     } else {
-      t8 = $[49];
+      t9 = $[49];
     }
-    return t8;
+    return t9;
   }
 };
 

package/lib-esm/SideNav.js

@@ -1,5 +1,6 @@
 import { clsx } from 'clsx';
 import classes from './SideNav.module.css.js';
+import { defaultSxProp } from './utils/defaultSxProp.js';
 import { BoxWithFallback } from './internal/components/BoxWithFallback.js';
 import { jsx } from 'react/jsx-runtime';
 import Link from './Link/Link.js';
@@ -11,7 +12,7 @@ function SideNav({
   bordered,
   children,
   'aria-label': ariaLabel,
-  sx: sxProp
+  sx: sxProp = defaultSxProp
 }) {
   const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal';
   const newClassName = clsx(classes.SideNav, classes[`SideNavVariant--${variantClassName}`], 'sidenav', `variant-${variantClassName}`, className, {

package/lib-esm/Skeleton/SkeletonBox.d.ts

@@ -7,6 +7,6 @@ export type SkeletonBoxProps = {
     width?: CSSProperties['width'];
     /** The className of the skeleton box */
     className?: string;
-} & HTMLProps<HTMLElement>;
-export declare const SkeletonBox: React.ForwardRefExoticComponent<Omit<SkeletonBoxProps, "ref"> & React.RefAttributes<HTMLElement>>;
+} & HTMLProps<HTMLDivElement>;
+export declare const SkeletonBox: React.ForwardRefExoticComponent<Omit<SkeletonBoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=SkeletonBox.d.ts.map

package/lib-esm/Skeleton/SkeletonBox.js

@@ -34,46 +34,45 @@ const SkeletonBox = /*#__PURE__*/React.forwardRef(function SkeletonBox(t0, ref)
     style = $[4];
     width = $[5];
   }
-  const t1 = ref;
-  let t2;
+  let t1;
   if ($[6] !== className) {
-    t2 = clsx(className, classes.SkeletonBox);
+    t1 = clsx(className, classes.SkeletonBox);
     $[6] = className;
-    $[7] = t2;
+    $[7] = t1;
   } else {
-    t2 = $[7];
+    t1 = $[7];
   }
-  const t3 = style;
-  let t4;
-  if ($[8] !== height || $[9] !== t3 || $[10] !== width) {
-    t4 = merge(t3, {
+  const t2 = style;
+  let t3;
+  if ($[8] !== height || $[9] !== t2 || $[10] !== width) {
+    t3 = merge(t2, {
       height,
       width
     });
     $[8] = height;
-    $[9] = t3;
+    $[9] = t2;
     $[10] = width;
-    $[11] = t4;
+    $[11] = t3;
   } else {
-    t4 = $[11];
+    t3 = $[11];
   }
-  let t5;
-  if ($[12] !== props || $[13] !== t1 || $[14] !== t2 || $[15] !== t4) {
-    t5 = /*#__PURE__*/jsx("div", {
-      ref: t1,
-      className: t2,
-      style: t4,
-      ...props
+  let t4;
+  if ($[12] !== props || $[13] !== ref || $[14] !== t1 || $[15] !== t3) {
+    t4 = /*#__PURE__*/jsx("div", {
+      className: t1,
+      style: t3,
+      ...props,
+      ref: ref
     });
     $[12] = props;
-    $[13] = t1;
-    $[14] = t2;
-    $[15] = t4;
-    $[16] = t5;
+    $[13] = ref;
+    $[14] = t1;
+    $[15] = t3;
+    $[16] = t4;
   } else {
-    t5 = $[16];
+    t4 = $[16];
   }
-  return t5;
+  return t4;
 });
 
 export { SkeletonBox };

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

@@ -16,7 +16,7 @@ export type SpinnerProps = {
     className?: string;
     style?: React.CSSProperties;
 } & HTMLDataAttributes & SxProp;
-declare function StyledSpinner({ className, ...props }: SpinnerProps): React.JSX.Element;
+declare function StyledSpinner({ sx, className, ...props }: SpinnerProps): React.JSX.Element;
 declare namespace StyledSpinner {
     var displayName: string;
 }

package/lib-esm/Spinner/Spinner.js

@@ -1,7 +1,8 @@
 import { c } from 'react-compiler-runtime';
+import styled from 'styled-components';
+import sx from '../sx.js';
 import classes from './Spinner.module.css.js';
 import { clsx } from 'clsx';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useId } from '../hooks/useId.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
@@ -128,42 +129,75 @@ function Spinner(t0) {
   }
   return t9;
 }
+const StyledBaseSpinner = styled.div.withConfig({
+  displayName: "Spinner__StyledBaseSpinner",
+  componentId: "sc-1knt686-0"
+})(["", ""], sx);
 function StyledSpinner(t0) {
-  const $ = c(8);
+  const $ = c(15);
   let className;
   let props;
+  let sx;
   if ($[0] !== t0) {
     ({
+      sx,
       className,
       ...props
     } = t0);
     $[0] = t0;
     $[1] = className;
     $[2] = props;
+    $[3] = sx;
   } else {
     className = $[1];
     props = $[2];
+    sx = $[3];
+  }
+  if (sx) {
+    let t1;
+    if ($[4] !== className) {
+      t1 = clsx(className, classes.SpinnerAnimation);
+      $[4] = className;
+      $[5] = t1;
+    } else {
+      t1 = $[5];
+    }
+    let t2;
+    if ($[6] !== props || $[7] !== sx || $[8] !== t1) {
+      t2 = /*#__PURE__*/jsx(StyledBaseSpinner, {
+        sx: sx,
+        as: Spinner,
+        className: t1,
+        ...props
+      });
+      $[6] = props;
+      $[7] = sx;
+      $[8] = t1;
+      $[9] = t2;
+    } else {
+      t2 = $[9];
+    }
+    return t2;
   }
   let t1;
-  if ($[3] !== className) {
+  if ($[10] !== className) {
     t1 = clsx(className, classes.SpinnerAnimation);
-    $[3] = className;
-    $[4] = t1;
+    $[10] = className;
+    $[11] = t1;
   } else {
-    t1 = $[4];
+    t1 = $[11];
   }
   let t2;
-  if ($[5] !== props || $[6] !== t1) {
-    t2 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: Spinner,
+  if ($[12] !== props || $[13] !== t1) {
+    t2 = /*#__PURE__*/jsx(Spinner, {
       className: t1,
       ...props
     });
-    $[5] = props;
-    $[6] = t1;
-    $[7] = t2;
+    $[12] = props;
+    $[13] = t1;
+    $[14] = t2;
   } else {
-    t2 = $[7];
+    t2 = $[14];
   }
   return t2;
 }