@primer/react 37.32.0-rc.f8e94f384 → 38.0.0-rc.1

package/lib-esm/ToggleSwitch/ToggleSwitch-65936b4b.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ToggleSwitch/ToggleSwitch.module.css"],"names":[],"mappings":"AAAA,qCAEE,kBAAmB,CADnB,mBAAoB,CAEpB,0BACF,CAEA,uEACE,kBACF,CAEA,mCAIE,oDAA6B,CAE7B,cAAe,CADf,8CAAuC,CAJvC,oCAA+B,CAC/B,qCAAgC,CAChC,iBAIF,CAEA,oDACE,4CACF,CAEA,uDACE,gDAA2B,CAC3B,kBACF,CAEA,uCACE,gBACF,CAEA,yDAEE,QAAS,CADT,iBAEF,CAEA,sCAEE,kBAAmB,CADnB,YAAa,CAGb,WAAY,CACZ,eAAgB,CAFhB,UAGF,CAEA,gCAGE,cAAe,CAFf,WAAY,CACZ,aAAc,CAGd,aAAc,CAEd,wBAAyB,CADzB,6BAEF,CAEA,8CACE,oIAA2G,CAC3G,uBACF,CAEA,kEACE,2BACF,CAEA,kEACE;;GAIF,CAEA,+CACE,8GAA2F,CAC3F,0BACF,CAEA,mEACE,uBACF,CAEA,mEACE,sIACF","file":"ToggleSwitch-65936b4b.css","sourcesContent":[".ToggleSwitch {\n  display: inline-flex;\n  align-items: center;\n  flex-direction: row-reverse;\n}\n\n.ToggleSwitch[data-status-label-position='start'] {\n  flex-direction: row;\n}\n\n.StatusText {\n  margin-left: var(--base-size-8);\n  margin-right: var(--base-size-8);\n  position: relative;\n  color: var(--fgColor-default);\n  font-size: var(--text-body-size-medium);\n  cursor: pointer;\n}\n\n.StatusText[data-size='small'] {\n  font-size: var(--text-body-size-small);\n}\n\n.StatusText[data-disabled='true'] {\n  color: var(--fgColor-muted);\n  cursor: not-allowed;\n}\n\n.StatusTextItem {\n  text-align: right;\n}\n\n.StatusTextItem[data-hidden='true'] {\n  visibility: hidden;\n  height: 0;\n}\n\n.IconContainer {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.IconBox {\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: 50%;\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 0;\n  transition-property: transform;\n  transition-duration: 80ms;\n}\n\n.IconBox[data-type='on'] {\n  color: var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, var(--fgColor-onEmphasis)));\n  transform: translateX(0);\n}\n\n.IconBox[data-type='on'][data-checked='false'] {\n  transform: translateX(-100%);\n}\n\n.IconBox[data-type='on'][data-disabled='true'] {\n  color: var(\n    --control-checked-fgColor-disabled,\n    var(--color-switch-track-checked-disabled-fg, var(--fgColor-onEmphasis))\n  );\n}\n\n.IconBox[data-type='off'] {\n  color: var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, var(--fgColor-muted)));\n  transform: translateX(100%);\n}\n\n.IconBox[data-type='off'][data-checked='false'] {\n  transform: translateX(0);\n}\n\n.IconBox[data-type='off'][data-disabled='true'] {\n  color: var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, var(--fgColor-onEmphasis)));\n}\n"]}

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

@@ -1,8 +1,7 @@
 import type { MouseEventHandler } from 'react';
 import React from 'react';
-import type { SxProp } from '../sx';
 import type { CellAlignment } from '../DataTable/column';
-export interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, SxProp {
+export interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** The id of the DOM node that labels the switch */
     ['aria-labelledby']: string;
     /** Uncontrolled - whether the switch is turned on */

package/lib-esm/ToggleSwitch/ToggleSwitch.js

@@ -2,18 +2,17 @@ import { c } from 'react-compiler-runtime';
 import React, { useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import { variant } from 'styled-system';
+import { clsx } from 'clsx';
 import { get } from '../constants.js';
-import sx from '../sx.js';
 import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles.js';
 import VisuallyHidden from '../_VisuallyHidden.js';
 import useSafeTimeout from '../hooks/useSafeTimeout.js';
+import classes from './ToggleSwitch.module.css.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useProvidedStateOrCreate } from '../hooks/useProvidedStateOrCreate.js';
 import { useId } from '../hooks/useId.js';
-import Box from '../Box/Box.js';
 import { AriaStatus } from '../live-region/AriaStatus.js';
 import StyledSpinner from '../Spinner/Spinner.js';
-import Text from '../Text/Text.js';
 
 const TRANSITION_DURATION = '80ms';
 const EASE_OUT_QUAD_CURVE = 'cubic-bezier(0.5, 1, 0.89, 1)';
@@ -101,7 +100,7 @@ const LineIcon = t0 => {
 const SwitchButton = styled.button.withConfig({
   displayName: "ToggleSwitch__SwitchButton",
   componentId: "sc-e6gszy-0"
-})(["vertical-align:middle;cursor:pointer;user-select:none;appearance:none;text-decoration:none;padding:0;transition-property:background-color,border-color;transition-duration:", ";transition-timing-function:", ";border-radius:", ";border-style:solid;border-width:1px;display:block;height:32px;width:64px;position:relative;overflow:hidden;", ";@media (pointer:coarse){&:before{content:'';position:absolute;left:0;right:0;transform:translateY(-50%);top:50%;min-height:44px;}}@media (prefers-reduced-motion){transition:none;*{transition:none;}}&:hover:not(:disabled):not([aria-disabled='true']),&:focus:focus-visible{background-color:", ";}&:active,&:active:focus-visible{background-color:", ";}", " ", " ", ""], TRANSITION_DURATION, EASE_OUT_QUAD_CURVE, get('radii.2'), getGlobalFocusStyles('3px'), get('colors.switchTrack.hoverBg'), get('colors.switchTrack.activeBg'), props => {
+})(["vertical-align:middle;cursor:pointer;user-select:none;appearance:none;text-decoration:none;padding:0;transition-property:background-color,border-color;transition-duration:", ";transition-timing-function:", ";border-radius:", ";border-style:solid;border-width:1px;display:block;height:32px;width:64px;position:relative;overflow:hidden;", ";@media (pointer:coarse){&:before{content:'';position:absolute;left:0;right:0;transform:translateY(-50%);top:50%;min-height:44px;}}@media (prefers-reduced-motion){transition:none;*{transition:none;}}&:hover:not(:disabled):not([aria-disabled='true']),&:focus:focus-visible{background-color:", ";}&:active,&:active:focus-visible{background-color:", ";}", " ", ""], TRANSITION_DURATION, EASE_OUT_QUAD_CURVE, get('radii.2'), getGlobalFocusStyles('3px'), get('colors.switchTrack.hoverBg'), get('colors.switchTrack.activeBg'), props => {
   if (props['aria-disabled']) {
     return css(["@media (forced-colors:active){border-color:GrayText;}background-color:", ";border-color:transparent;cursor:not-allowed;transition-property:none;"], get('colors.switchTrack.disabledBg'));
   }
@@ -110,7 +109,7 @@ const SwitchButton = styled.button.withConfig({
   } else {
     return css(["background-color:", ";border-color:var(--controlTrack-borderColor-rest,transparent);&:active{background-color:", ";}"], get('colors.switchTrack.bg'), get('colors.switchTrack.activeBg'));
   }
-}, sx, sizeVariants);
+}, sizeVariants);
 const ToggleKnob = styled.div.withConfig({
   displayName: "ToggleSwitch__ToggleKnob",
   componentId: "sc-e6gszy-1"
@@ -122,22 +121,18 @@ const ToggleKnob = styled.div.withConfig({
     return css(["border-color:", ";"], get('colors.switchKnob.checked.border'));
   }
 });
-const hiddenTextStyles = {
-  visibility: 'hidden',
-  height: 0
-};
 const ToggleSwitch = /*#__PURE__*/React.forwardRef(function ToggleSwitch(props, ref) {
-  const $ = c(94);
+  const $ = c(89);
   let ariaDescribedby;
   let ariaLabelledby;
   let checked;
+  let className;
   let defaultChecked;
   let disabled;
   let loading;
   let onChange;
   let onClick;
   let rest;
-  let sxProp;
   let t0;
   let t1;
   let t2;
@@ -158,20 +153,20 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef(function ToggleSwitch(props,
       statusLabelPosition: t2,
       loadingLabelDelay: t3,
       loadingLabel: t4,
-      sx: sxProp,
+      className,
       ...rest
     } = props);
     $[0] = props;
     $[1] = ariaDescribedby;
     $[2] = ariaLabelledby;
     $[3] = checked;
-    $[4] = defaultChecked;
-    $[5] = disabled;
-    $[6] = loading;
-    $[7] = onChange;
-    $[8] = onClick;
-    $[9] = rest;
-    $[10] = sxProp;
+    $[4] = className;
+    $[5] = defaultChecked;
+    $[6] = disabled;
+    $[7] = loading;
+    $[8] = onChange;
+    $[9] = onClick;
+    $[10] = rest;
     $[11] = t0;
     $[12] = t1;
     $[13] = t2;
@@ -181,13 +176,13 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef(function ToggleSwitch(props,
     ariaDescribedby = $[1];
     ariaLabelledby = $[2];
     checked = $[3];
-    defaultChecked = $[4];
-    disabled = $[5];
-    loading = $[6];
-    onChange = $[7];
-    onClick = $[8];
-    rest = $[9];
-    sxProp = $[10];
+    className = $[4];
+    defaultChecked = $[5];
+    disabled = $[6];
+    loading = $[7];
+    onChange = $[8];
+    onClick = $[9];
+    rest = $[10];
     t0 = $[11];
     t1 = $[12];
     t2 = $[13];
@@ -279,10 +274,17 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef(function ToggleSwitch(props,
   if (ariaDescribedby) {
     switchButtonDescribedBy = `${switchButtonDescribedBy} ${ariaDescribedby}`;
   }
-  const t10 = statusLabelPosition === "start" ? "row" : "row-reverse";
+  let t10;
+  if ($[35] !== className) {
+    t10 = clsx(classes.ToggleSwitch, className);
+    $[35] = className;
+    $[36] = t10;
+  } else {
+    t10 = $[36];
+  }
   const t11 = isLoadingLabelVisible && loadingLabel;
   let t12;
-  if ($[35] !== loadingLabelId || $[36] !== t11) {
+  if ($[37] !== loadingLabelId || $[38] !== t11) {
     t12 = /*#__PURE__*/jsx(VisuallyHidden, {
       children: /*#__PURE__*/jsx(AriaStatus, {
         announceOnShow: true,
@@ -290,251 +292,199 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef(function ToggleSwitch(props,
         children: t11
       })
     });
-    $[35] = loadingLabelId;
-    $[36] = t11;
-    $[37] = t12;
+    $[37] = loadingLabelId;
+    $[38] = t11;
+    $[39] = t12;
   } else {
-    t12 = $[37];
+    t12 = $[39];
   }
   let t13;
-  if ($[38] !== loading) {
+  if ($[40] !== loading) {
     t13 = loading ? /*#__PURE__*/jsx(StyledSpinner, {
       size: "small",
       srText: null
     }) : null;
-    $[38] = loading;
-    $[39] = t13;
-  } else {
-    t13 = $[39];
-  }
-  const t14 = acceptsInteraction ? "fg.default" : "fg.muted";
-  const t15 = size === "small" ? 0 : 1;
-  const t16 = acceptsInteraction ? "pointer" : "not-allowed";
-  let t17;
-  if ($[40] !== t16) {
-    t17 = {
-      position: "relative",
-      cursor: t16
-    };
-    $[40] = t16;
-    $[41] = t17;
+    $[40] = loading;
+    $[41] = t13;
   } else {
-    t17 = $[41];
+    t13 = $[41];
   }
-  const t18 = isOn ? null : hiddenTextStyles;
-  let t19;
-  if ($[42] !== t18) {
-    t19 = /*#__PURE__*/jsx(Box, {
-      textAlign: "right",
-      sx: t18,
+  const t14 = !acceptsInteraction;
+  const t15 = !isOn;
+  let t16;
+  if ($[42] !== t15) {
+    t16 = /*#__PURE__*/jsx("div", {
+      className: classes.StatusTextItem,
+      "data-hidden": t15,
       children: "On"
     });
-    $[42] = t18;
-    $[43] = t19;
+    $[42] = t15;
+    $[43] = t16;
   } else {
-    t19 = $[43];
+    t16 = $[43];
   }
-  const t20 = isOn ? hiddenTextStyles : null;
-  let t21;
-  if ($[44] !== t20) {
-    t21 = /*#__PURE__*/jsx(Box, {
-      textAlign: "right",
-      sx: t20,
+  let t17;
+  if ($[44] !== isOn) {
+    t17 = /*#__PURE__*/jsx("div", {
+      className: classes.StatusTextItem,
+      "data-hidden": isOn,
       children: "Off"
     });
-    $[44] = t20;
-    $[45] = t21;
+    $[44] = isOn;
+    $[45] = t17;
   } else {
-    t21 = $[45];
+    t17 = $[45];
   }
-  let t22;
-  if ($[46] !== handleToggleClick || $[47] !== t14 || $[48] !== t15 || $[49] !== t17 || $[50] !== t19 || $[51] !== t21) {
-    t22 = /*#__PURE__*/jsxs(Text, {
-      color: t14,
-      fontSize: t15,
-      mx: 2,
+  let t18;
+  if ($[46] !== handleToggleClick || $[47] !== size || $[48] !== t14 || $[49] !== t16 || $[50] !== t17) {
+    t18 = /*#__PURE__*/jsxs("span", {
+      className: classes.StatusText,
+      "data-size": size,
+      "data-disabled": t14,
       "aria-hidden": "true",
-      sx: t17,
       onClick: handleToggleClick,
-      children: [t19, t21]
+      children: [t16, t17]
     });
     $[46] = handleToggleClick;
-    $[47] = t14;
-    $[48] = t15;
-    $[49] = t17;
-    $[50] = t19;
-    $[51] = t21;
-    $[52] = t22;
-  } else {
-    t22 = $[52];
-  }
-  const t23 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : undefined;
-  const t24 = !acceptsInteraction;
-  const t25 = acceptsInteraction ? "switchTrack.checked.fg" : "switchTrack.checked.disabledFg";
-  const t26 = `translateX(${isOn ? "0" : "-100%"})`;
-  let t27;
-  if ($[53] !== t26) {
-    t27 = {
-      transform: t26,
-      transitionProperty: "transform",
-      transitionDuration: TRANSITION_DURATION
-    };
-    $[53] = t26;
-    $[54] = t27;
+    $[47] = size;
+    $[48] = t14;
+    $[49] = t16;
+    $[50] = t17;
+    $[51] = t18;
   } else {
-    t27 = $[54];
+    t18 = $[51];
   }
-  let t28;
-  if ($[55] !== size) {
-    t28 = /*#__PURE__*/jsx(LineIcon, {
+  const t19 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : undefined;
+  const t20 = !acceptsInteraction;
+  const t21 = !acceptsInteraction;
+  let t22;
+  if ($[52] !== size) {
+    t22 = /*#__PURE__*/jsx(LineIcon, {
       size: size
     });
-    $[55] = size;
-    $[56] = t28;
+    $[52] = size;
+    $[53] = t22;
   } else {
-    t28 = $[56];
+    t22 = $[53];
   }
-  let t29;
-  if ($[57] !== t25 || $[58] !== t27 || $[59] !== t28) {
-    t29 = /*#__PURE__*/jsx(Box, {
-      flexGrow: 1,
-      flexShrink: 0,
-      flexBasis: "50%",
-      color: t25,
-      lineHeight: "0",
-      sx: t27,
-      children: t28
+  let t23;
+  if ($[54] !== isOn || $[55] !== t21 || $[56] !== t22) {
+    t23 = /*#__PURE__*/jsx("div", {
+      className: classes.IconBox,
+      "data-type": "on",
+      "data-checked": isOn,
+      "data-disabled": t21,
+      children: t22
     });
-    $[57] = t25;
-    $[58] = t27;
-    $[59] = t28;
-    $[60] = t29;
-  } else {
-    t29 = $[60];
-  }
-  const t30 = acceptsInteraction ? "switchTrack.fg" : "switchTrack.disabledFg";
-  const t31 = `translateX(${isOn ? "100%" : "0"})`;
-  let t32;
-  if ($[61] !== t31) {
-    t32 = {
-      transform: t31,
-      transitionProperty: "transform",
-      transitionDuration: TRANSITION_DURATION
-    };
-    $[61] = t31;
-    $[62] = t32;
+    $[54] = isOn;
+    $[55] = t21;
+    $[56] = t22;
+    $[57] = t23;
   } else {
-    t32 = $[62];
+    t23 = $[57];
   }
-  let t33;
-  if ($[63] !== size) {
-    t33 = /*#__PURE__*/jsx(CircleIcon, {
+  const t24 = !acceptsInteraction;
+  let t25;
+  if ($[58] !== size) {
+    t25 = /*#__PURE__*/jsx(CircleIcon, {
       size: size
     });
-    $[63] = size;
-    $[64] = t33;
+    $[58] = size;
+    $[59] = t25;
   } else {
-    t33 = $[64];
+    t25 = $[59];
   }
-  let t34;
-  if ($[65] !== t30 || $[66] !== t32 || $[67] !== t33) {
-    t34 = /*#__PURE__*/jsx(Box, {
-      flexGrow: 1,
-      flexShrink: 0,
-      flexBasis: "50%",
-      color: t30,
-      lineHeight: "0",
-      sx: t32,
-      children: t33
+  let t26;
+  if ($[60] !== isOn || $[61] !== t24 || $[62] !== t25) {
+    t26 = /*#__PURE__*/jsx("div", {
+      className: classes.IconBox,
+      "data-type": "off",
+      "data-checked": isOn,
+      "data-disabled": t24,
+      children: t25
     });
-    $[65] = t30;
-    $[66] = t32;
-    $[67] = t33;
-    $[68] = t34;
+    $[60] = isOn;
+    $[61] = t24;
+    $[62] = t25;
+    $[63] = t26;
   } else {
-    t34 = $[68];
+    t26 = $[63];
   }
-  let t35;
-  if ($[69] !== t29 || $[70] !== t34) {
-    t35 = /*#__PURE__*/jsxs(Box, {
+  let t27;
+  if ($[64] !== t23 || $[65] !== t26) {
+    t27 = /*#__PURE__*/jsxs("div", {
       "aria-hidden": "true",
-      display: "flex",
-      alignItems: "center",
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      children: [t29, t34]
+      className: classes.IconContainer,
+      children: [t23, t26]
     });
-    $[69] = t29;
-    $[70] = t34;
-    $[71] = t35;
+    $[64] = t23;
+    $[65] = t26;
+    $[66] = t27;
   } else {
-    t35 = $[71];
+    t27 = $[66];
   }
-  const t36 = !acceptsInteraction;
-  let t37;
-  if ($[72] !== isOn || $[73] !== t36) {
-    t37 = /*#__PURE__*/jsx(ToggleKnob, {
+  const t28 = !acceptsInteraction;
+  let t29;
+  if ($[67] !== isOn || $[68] !== t28) {
+    t29 = /*#__PURE__*/jsx(ToggleKnob, {
       "aria-hidden": "true",
-      "aria-disabled": t36,
+      "aria-disabled": t28,
       checked: isOn
     });
-    $[72] = isOn;
-    $[73] = t36;
-    $[74] = t37;
+    $[67] = isOn;
+    $[68] = t28;
+    $[69] = t29;
   } else {
-    t37 = $[74];
+    t29 = $[69];
   }
-  let t38;
-  if ($[75] !== ariaLabelledby || $[76] !== buttonType || $[77] !== handleToggleClick || $[78] !== isOn || $[79] !== ref || $[80] !== size || $[81] !== t23 || $[82] !== t24 || $[83] !== t35 || $[84] !== t37) {
-    t38 = /*#__PURE__*/jsxs(SwitchButton, {
+  let t30;
+  if ($[70] !== ariaLabelledby || $[71] !== buttonType || $[72] !== handleToggleClick || $[73] !== isOn || $[74] !== ref || $[75] !== size || $[76] !== t19 || $[77] !== t20 || $[78] !== t27 || $[79] !== t29) {
+    t30 = /*#__PURE__*/jsxs(SwitchButton, {
       ref: ref,
       type: buttonType,
       onClick: handleToggleClick,
       "aria-labelledby": ariaLabelledby,
-      "aria-describedby": t23,
+      "aria-describedby": t19,
       "aria-pressed": isOn,
       checked: isOn,
       size: size,
-      "aria-disabled": t24,
-      children: [t35, t37]
+      "aria-disabled": t20,
+      children: [t27, t29]
     });
-    $[75] = ariaLabelledby;
-    $[76] = buttonType;
-    $[77] = handleToggleClick;
-    $[78] = isOn;
-    $[79] = ref;
-    $[80] = size;
-    $[81] = t23;
-    $[82] = t24;
-    $[83] = t35;
-    $[84] = t37;
-    $[85] = t38;
+    $[70] = ariaLabelledby;
+    $[71] = buttonType;
+    $[72] = handleToggleClick;
+    $[73] = isOn;
+    $[74] = ref;
+    $[75] = size;
+    $[76] = t19;
+    $[77] = t20;
+    $[78] = t27;
+    $[79] = t29;
+    $[80] = t30;
   } else {
-    t38 = $[85];
+    t30 = $[80];
   }
-  let t39;
-  if ($[86] !== rest || $[87] !== sxProp || $[88] !== t10 || $[89] !== t12 || $[90] !== t13 || $[91] !== t22 || $[92] !== t38) {
-    t39 = /*#__PURE__*/jsxs(Box, {
-      display: "inline-flex",
-      alignItems: "center",
-      flexDirection: t10,
-      sx: sxProp,
+  let t31;
+  if ($[81] !== rest || $[82] !== statusLabelPosition || $[83] !== t10 || $[84] !== t12 || $[85] !== t13 || $[86] !== t18 || $[87] !== t30) {
+    t31 = /*#__PURE__*/jsxs("div", {
+      className: t10,
+      "data-status-label-position": statusLabelPosition,
       ...rest,
-      children: [t12, t13, t22, t38]
+      children: [t12, t13, t18, t30]
     });
-    $[86] = rest;
-    $[87] = sxProp;
-    $[88] = t10;
-    $[89] = t12;
-    $[90] = t13;
-    $[91] = t22;
-    $[92] = t38;
-    $[93] = t39;
+    $[81] = rest;
+    $[82] = statusLabelPosition;
+    $[83] = t10;
+    $[84] = t12;
+    $[85] = t13;
+    $[86] = t18;
+    $[87] = t30;
+    $[88] = t31;
   } else {
-    t39 = $[93];
+    t31 = $[88];
   }
-  return t39;
+  return t31;
 });
 if (process.env.NODE_ENV !== "production") {
   ToggleSwitch.displayName = 'ToggleSwitch';

package/lib-esm/ToggleSwitch/ToggleSwitch.module.css.js

@@ -0,0 +1,5 @@
+import './ToggleSwitch-65936b4b.css';
+
+var classes = {"ToggleSwitch":"prc-ToggleSwitch-ToggleSwitch-E4lp0","StatusText":"prc-ToggleSwitch-StatusText-hWpj2","StatusTextItem":"prc-ToggleSwitch-StatusTextItem-fvvXa","IconContainer":"prc-ToggleSwitch-IconContainer-zLC02","IconBox":"prc-ToggleSwitch-IconBox-NNOYG"};
+
+export { classes as default };

package/lib-esm/Token/index.d.ts

@@ -3,5 +3,4 @@ export { default } from './Token';
 export type { TokenProps } from './Token';
 export { default as IssueLabelToken } from './IssueLabelToken';
 export type { IssueLabelTokenProps } from './IssueLabelToken';
-export { default as AvatarToken } from './AvatarToken';
 //# sourceMappingURL=index.d.ts.map

package/lib-esm/TreeView/shared.js

@@ -2,12 +2,12 @@
  * Returns the accessible name of an element
  */
 function getAccessibleName(element) {
-  var _document$getElementB, _document$getElementB2, _element$textContent;
+  var _document$getElementB, _document$getElementB2;
   const label = element.getAttribute('aria-label');
   const labelledby = element.getAttribute('aria-labelledby');
   if (label) return label;
   if (labelledby) return (_document$getElementB = (_document$getElementB2 = document.getElementById(labelledby)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.textContent) !== null && _document$getElementB !== void 0 ? _document$getElementB : '';
-  return (_element$textContent = element.textContent) !== null && _element$textContent !== void 0 ? _element$textContent : '';
+  return element.textContent;
 }
 
 export { getAccessibleName };

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

@@ -1,4 +1,3 @@
-import type { SxProp } from '../sx';
 import type React from 'react';
 import { type HTMLAttributes } from 'react';
 /**
@@ -14,5 +13,5 @@ import { type HTMLAttributes } from 'react';
 export declare const VisuallyHidden: ({ className, children, ...rest }: VisuallyHiddenProps) => React.JSX.Element;
 export type VisuallyHiddenProps = React.PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {
     className?: string;
-} & SxProp>;
+}>;
 //# sourceMappingURL=VisuallyHidden.d.ts.map

package/lib-esm/VisuallyHidden/VisuallyHidden.js

@@ -1,7 +1,6 @@
 import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import classes from './VisuallyHidden.module.css.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx } from 'react/jsx-runtime';
 
 const VisuallyHidden = t0 => {
@@ -34,8 +33,7 @@ const VisuallyHidden = t0 => {
   }
   let t2;
   if ($[6] !== children || $[7] !== rest || $[8] !== t1) {
-    t2 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: "span",
+    t2 = /*#__PURE__*/jsx("span", {
       className: t1,
       ...rest,
       children: children

package/lib-esm/deprecated/UnderlineNav/UnderlineNav.d.ts

@@ -1,8 +1,7 @@
 import type { To } from 'history';
 import type React from 'react';
-import type { SxProp } from '../../sx';
 import type { ComponentProps } from '../../utils/types';
-declare const UnderlineNavBase: import("styled-components").StyledComponent<"nav", any, SxProp, never>;
+declare const UnderlineNavBase: import("styled-components").StyledComponent<"nav", any, {}, never>;
 export type UnderlineNavProps = {
     actions?: React.ReactNode;
     align?: 'right';
@@ -13,7 +12,7 @@ declare function UnderlineNav({ actions, className, align, children, full, label
 type StyledUnderlineNavLinkProps = {
     to?: To;
     selected?: boolean;
-} & SxProp;
+};
 declare const UnderlineNavLink: import("styled-components").StyledComponent<"a", any, StyledUnderlineNavLinkProps, never>;
 export type UnderlineNavLinkProps = ComponentProps<typeof UnderlineNavLink>;
 /**

package/lib-esm/deprecated/UnderlineNav/UnderlineNav.js

@@ -2,7 +2,6 @@ import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import styled from 'styled-components';
 import { get } from '../../constants.js';
-import sx from '../../sx.js';
 import getGlobalFocusStyles from '../../internal/utils/getGlobalFocusStyles.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -11,7 +10,7 @@ const SELECTED_CLASS = 'PRC-selected';
 const UnderlineNavBase = styled.nav.withConfig({
   displayName: "UnderlineNav__UnderlineNavBase",
   componentId: "sc-11ejk33-0"
-})(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.PRC-UnderlineNav--right{justify-content:flex-end;.PRC-UnderlineNav-item{margin-right:0;margin-left:", ";}.PRC-UnderlineNav-actions{flex:1 1 auto;}}&.PRC-UnderlineNav--full{display:block;}.PRC-UnderlineNav-body{display:flex;margin-bottom:-1px;}.PRC-UnderlineNav-actions{align-self:center;}", ";"], get('colors.border.muted'), get('space.3'), sx);
+})(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.PRC-UnderlineNav--right{justify-content:flex-end;.PRC-UnderlineNav-item{margin-right:0;margin-left:", ";}.PRC-UnderlineNav-actions{flex:1 1 auto;}}&.PRC-UnderlineNav--full{display:block;}.PRC-UnderlineNav-body{display:flex;margin-bottom:-1px;}.PRC-UnderlineNav-actions{align-self:center;}"], get('colors.border.muted'), get('space.3'));
 function UnderlineNav(t0) {
   const $ = c(24);
   let actions;
@@ -113,7 +112,7 @@ const UnderlineNavLink = styled.a.attrs(props => ({
 })).withConfig({
   displayName: "UnderlineNav__UnderlineNavLink",
   componentId: "sc-11ejk33-1"
-})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:border-bottom-color 0.2s ease;.PRC-UnderlineNav-octicon{color:", ";}}&.PRC-selected{color:", ";border-bottom-color:", ";.PRC-UnderlineNav-octicon{color:", ";}}", ";", ";"], get('space.3'), get('space.2'), get('space.3'), get('fontSizes.1'), get('lineHeights.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.neutral.muted'), get('colors.fg.muted'), get('colors.fg.default'), get('colors.primer.border.active'), get('colors.fg.default'), getGlobalFocusStyles('-8px'), sx);
+})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:border-bottom-color 0.2s ease;.PRC-UnderlineNav-octicon{color:", ";}}&.PRC-selected{color:", ";border-bottom-color:", ";.PRC-UnderlineNav-octicon{color:", ";}}", ";"], get('space.3'), get('space.2'), get('space.3'), get('fontSizes.1'), get('lineHeights.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.neutral.muted'), get('colors.fg.muted'), get('colors.fg.default'), get('colors.primer.border.active'), get('colors.fg.default'), getGlobalFocusStyles('-8px'));
 UnderlineNavLink.displayName = 'UnderlineNav.Link';
 /**
  * @deprecated UnderlineNav is deprecated and will be replaced by the draft `UnderlineNav` in the next major release. See https://primer.style/react/drafts/UnderlineNav2 for more details.

package/lib-esm/deprecated/index.d.ts

@@ -23,6 +23,4 @@ export { default as TabNav } from '../TabNav';
 export type { TabNavProps, TabNavLinkProps } from '../TabNav';
 export { default as Tooltip } from '../Tooltip/Tooltip';
 export type { TooltipProps } from '../Tooltip/Tooltip';
-export { default as AvatarPair } from './AvatarPair';
-export type { AvatarPairProps } from './AvatarPair';
 //# sourceMappingURL=index.d.ts.map