@primer/react 38.0.0-rc.0 → 38.0.0-rc.1

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -4,18 +4,17 @@ var reactCompilerRuntime = require('react-compiler-runtime');
 var React = require('react');
 var styled = require('styled-components');
 var styledSystem = require('styled-system');
+var clsx = require('clsx');
 var constants = require('../constants.js');
-var sx = require('../sx.js');
 var getGlobalFocusStyles = require('../internal/utils/getGlobalFocusStyles.js');
 var _VisuallyHidden = require('../_VisuallyHidden.js');
 var useSafeTimeout = require('../hooks/useSafeTimeout.js');
+var ToggleSwitch_module = require('./ToggleSwitch.module.css.js');
 var jsxRuntime = require('react/jsx-runtime');
 var useProvidedStateOrCreate = require('../hooks/useProvidedStateOrCreate.js');
 var useId = require('../hooks/useId.js');
-var Box = require('../Box/Box.js');
 var AriaStatus = require('../live-region/AriaStatus.js');
 var Spinner = require('../Spinner/Spinner.js');
-var Text = require('../Text/Text.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -108,7 +107,7 @@ const LineIcon = t0 => {
 const SwitchButton = styled__default.default.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, constants.get('radii.2'), getGlobalFocusStyles('3px'), constants.get('colors.switchTrack.hoverBg'), constants.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, constants.get('radii.2'), getGlobalFocusStyles('3px'), constants.get('colors.switchTrack.hoverBg'), constants.get('colors.switchTrack.activeBg'), props => {
   if (props['aria-disabled']) {
     return styled.css(["@media (forced-colors:active){border-color:GrayText;}background-color:", ";border-color:transparent;cursor:not-allowed;transition-property:none;"], constants.get('colors.switchTrack.disabledBg'));
   }
@@ -117,7 +116,7 @@ const SwitchButton = styled__default.default.button.withConfig({
   } else {
     return styled.css(["background-color:", ";border-color:var(--controlTrack-borderColor-rest,transparent);&:active{background-color:", ";}"], constants.get('colors.switchTrack.bg'), constants.get('colors.switchTrack.activeBg'));
   }
-}, sx.default, sizeVariants);
+}, sizeVariants);
 const ToggleKnob = styled__default.default.div.withConfig({
   displayName: "ToggleSwitch__ToggleKnob",
   componentId: "sc-e6gszy-1"
@@ -129,22 +128,18 @@ const ToggleKnob = styled__default.default.div.withConfig({
     return styled.css(["border-color:", ";"], constants.get('colors.switchKnob.checked.border'));
   }
 });
-const hiddenTextStyles = {
-  visibility: 'hidden',
-  height: 0
-};
 const ToggleSwitch = /*#__PURE__*/React__default.default.forwardRef(function ToggleSwitch(props, ref) {
-  const $ = reactCompilerRuntime.c(94);
+  const $ = reactCompilerRuntime.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;
@@ -165,20 +160,20 @@ const ToggleSwitch = /*#__PURE__*/React__default.default.forwardRef(function Tog
       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;
@@ -188,13 +183,13 @@ const ToggleSwitch = /*#__PURE__*/React__default.default.forwardRef(function Tog
     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];
@@ -286,10 +281,17 @@ const ToggleSwitch = /*#__PURE__*/React__default.default.forwardRef(function Tog
   if (ariaDescribedby) {
     switchButtonDescribedBy = `${switchButtonDescribedBy} ${ariaDescribedby}`;
   }
-  const t10 = statusLabelPosition === "start" ? "row" : "row-reverse";
+  let t10;
+  if ($[35] !== className) {
+    t10 = clsx.clsx(ToggleSwitch_module.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__*/jsxRuntime.jsx(_VisuallyHidden, {
       children: /*#__PURE__*/jsxRuntime.jsx(AriaStatus.AriaStatus, {
         announceOnShow: true,
@@ -297,251 +299,199 @@ const ToggleSwitch = /*#__PURE__*/React__default.default.forwardRef(function Tog
         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__*/jsxRuntime.jsx(Spinner, {
       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__*/jsxRuntime.jsx(Box, {
-      textAlign: "right",
-      sx: t18,
+  const t14 = !acceptsInteraction;
+  const t15 = !isOn;
+  let t16;
+  if ($[42] !== t15) {
+    t16 = /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: ToggleSwitch_module.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__*/jsxRuntime.jsx(Box, {
-      textAlign: "right",
-      sx: t20,
+  let t17;
+  if ($[44] !== isOn) {
+    t17 = /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: ToggleSwitch_module.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__*/jsxRuntime.jsxs(Text, {
-      color: t14,
-      fontSize: t15,
-      mx: 2,
+  let t18;
+  if ($[46] !== handleToggleClick || $[47] !== size || $[48] !== t14 || $[49] !== t16 || $[50] !== t17) {
+    t18 = /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: ToggleSwitch_module.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__*/jsxRuntime.jsx(LineIcon, {
+  const t19 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : undefined;
+  const t20 = !acceptsInteraction;
+  const t21 = !acceptsInteraction;
+  let t22;
+  if ($[52] !== size) {
+    t22 = /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
+      className: ToggleSwitch_module.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__*/jsxRuntime.jsx(CircleIcon, {
+  const t24 = !acceptsInteraction;
+  let t25;
+  if ($[58] !== size) {
+    t25 = /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
+      className: ToggleSwitch_module.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__*/jsxRuntime.jsxs(Box, {
+  let t27;
+  if ($[64] !== t23 || $[65] !== t26) {
+    t27 = /*#__PURE__*/jsxRuntime.jsxs("div", {
       "aria-hidden": "true",
-      display: "flex",
-      alignItems: "center",
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      children: [t29, t34]
+      className: ToggleSwitch_module.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__*/jsxRuntime.jsx(ToggleKnob, {
+  const t28 = !acceptsInteraction;
+  let t29;
+  if ($[67] !== isOn || $[68] !== t28) {
+    t29 = /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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/ToggleSwitch/ToggleSwitch.module.css.js

@@ -0,0 +1,7 @@
+'use strict';
+
+require('./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"};
+
+module.exports = classes;

package/lib/ToggleSwitch/ToggleSwitchStoryWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitchStoryWrapper.d.ts","sourceRoot":"","sources":["../../src/ToggleSwitch/ToggleSwitchStoryWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAU/D,CAAA;AAED,eAAe,wBAAwB,CAAA"}
+{"version":3,"file":"ToggleSwitchStoryWrapper.d.ts","sourceRoot":"","sources":["../../src/ToggleSwitch/ToggleSwitchStoryWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAE/D,CAAA;AAED,eAAe,wBAAwB,CAAA"}

package/lib/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/Token/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Token/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAC,aAAa,EAAC,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAC,OAAO,EAAC,MAAM,SAAS,CAAA;AAC/B,YAAY,EAAC,UAAU,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAC,OAAO,IAAI,eAAe,EAAC,MAAM,mBAAmB,CAAA;AAC5D,YAAY,EAAC,oBAAoB,EAAC,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Token/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAC,aAAa,EAAC,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAC,OAAO,EAAC,MAAM,SAAS,CAAA;AAC/B,YAAY,EAAC,UAAU,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAC,OAAO,IAAI,eAAe,EAAC,MAAM,mBAAmB,CAAA;AAC5D,YAAY,EAAC,oBAAoB,EAAC,MAAM,mBAAmB,CAAA"}

package/lib/TreeView/shared.js

@@ -4,12 +4,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;
 }
 
 exports.getAccessibleName = getAccessibleName;

package/lib/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/VisuallyHidden/VisuallyHidden.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../src/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAIzC;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,GAAI,kCAAgC,mBAAmB,sBAMjF,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,iBAAiB,CACvD,cAAc,CAAC,eAAe,CAAC,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,MAAM,CACX,CAAA"}
+{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../src/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAGzC;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,GAAI,kCAAgC,mBAAmB,sBAMjF,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,iBAAiB,CACvD,cAAc,CAAC,eAAe,CAAC,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CACF,CAAA"}

package/lib/VisuallyHidden/VisuallyHidden.js

@@ -3,7 +3,6 @@
 var reactCompilerRuntime = require('react-compiler-runtime');
 var clsx = require('clsx');
 var VisuallyHidden_module = require('./VisuallyHidden.module.css.js');
-var BoxWithFallback = require('../internal/components/BoxWithFallback.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 const VisuallyHidden = t0 => {
@@ -36,8 +35,7 @@ const VisuallyHidden = t0 => {
   }
   let t2;
   if ($[6] !== children || $[7] !== rest || $[8] !== t1) {
-    t2 = /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
-      as: "span",
+    t2 = /*#__PURE__*/jsxRuntime.jsx("span", {
       className: t1,
       ...rest,
       children: children

package/lib/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/deprecated/UnderlineNav/UnderlineNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlineNav.d.ts","sourceRoot":"","sources":["../../../src/deprecated/UnderlineNav/UnderlineNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,SAAS,CAAA;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,UAAU,CAAA;AAEpC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAA;AAMrD,QAAA,MAAM,gBAAgB,wEA8BrB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE3C,iBAAS,YAAY,CAAC,EAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,qBAa1G;AAED,KAAK,2BAA2B,GAAG;IACjC,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,MAAM,CAAA;AAEV,QAAA,MAAM,gBAAgB,2FAoCrB,CAAA;AAID,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAC3E;;GAEG;;;;AACH,wBAAoE"}
+{"version":3,"file":"UnderlineNav.d.ts","sourceRoot":"","sources":["../../../src/deprecated/UnderlineNav/UnderlineNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,SAAS,CAAA;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAA;AAMrD,QAAA,MAAM,gBAAgB,oEA4BrB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE3C,iBAAS,YAAY,CAAC,EAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,qBAa1G;AAED,KAAK,2BAA2B,GAAG;IACjC,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,gBAAgB,2FAkCrB,CAAA;AAID,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAC3E;;GAEG;;;;AACH,wBAAoE"}