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

package/lib-esm/ToggleSwitch/ToggleSwitch-4b23d166.css

@@ -0,0 +1,2 @@
+.prc-ToggleSwitch-ToggleSwitch-E4lp0{--toggleSwitch-transition-duration:80ms;--toggleSwitch-transition-easing:cubic-bezier(0.5,1,0.89,1);align-items:center;display:inline-flex}.prc-ToggleSwitch-ToggleSwitch-E4lp0:where([data-status-label-position=start]){flex-direction:row}.prc-ToggleSwitch-ToggleSwitch-E4lp0:where([data-status-label-position=end]){flex-direction:row-reverse}.prc-ToggleSwitch-LoadingSpinner-jCYtC{display:inline-flex}.prc-ToggleSwitch-LoadingSpinner-jCYtC:where([data-status-label-position=end]){margin-left:var(--base-size-8,.5rem);margin-right:0}.prc-ToggleSwitch-StatusText-hWpj2{color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;font-size:var(--text-body-size-medium,.875rem);margin-left:var(--base-size-8,.5rem);margin-right:var(--base-size-8,.5rem);position:relative}.prc-ToggleSwitch-StatusText-hWpj2:where([data-disabled=true]){color:var(--fgColor-muted,var(--color-fg-muted));cursor:not-allowed}.prc-ToggleSwitch-StatusText-hWpj2:where([data-size=small]){font-size:var(--text-body-size-small,.75rem)}.prc-ToggleSwitch-StatusText-hWpj2:where([data-size=medium]){font-size:var(--text-body-size-medium,.875rem)}.prc-ToggleSwitch-StatusTextItem-fvvXa{display:block;text-align:right}.prc-ToggleSwitch-StatusTextItem-fvvXa:where([data-hidden=true]){height:0;visibility:hidden}.prc-ToggleSwitch-SwitchButton-5LRHX{appearance:none;border-radius:var(--borderRadius-medium,.375rem);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);cursor:pointer;display:block;height:32px;overflow:hidden;padding:0;position:relative;-webkit-text-decoration:none;text-decoration:none;transition-duration:var(--toggleSwitch-transition-duration);transition-property:background-color,border-color;transition-timing-function:var(--toggleSwitch-transition-easing);-webkit-user-select:none;user-select:none;width:64px}.prc-ToggleSwitch-SwitchButton-5LRHX:focus-visible{outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:3px}.prc-ToggleSwitch-SwitchButton-5LRHX:focus:not(:focus-visible){outline:1px solid transparent}@media (pointer:coarse){.prc-ToggleSwitch-SwitchButton-5LRHX:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}@media (prefers-reduced-motion){.prc-ToggleSwitch-SwitchButton-5LRHX,.prc-ToggleSwitch-SwitchButton-5LRHX *{transition:none}}.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-size=small]){height:24px;width:48px}.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-disabled=true]){background-color:var(--controlTrack-bgColor-disabled,var(--color-switch-track-disabled-bg,#8c959f));border-color:transparent;cursor:not-allowed;transition-property:none}@media (forced-colors:active){.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-disabled=true]){border-color:GrayText}}.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=false]:not([data-disabled=true])){background-color:var(--controlTrack-bgColor-rest,var(--color-switch-track-bg,#eaeef2));border-color:var(--controlTrack-borderColor-rest,var(--color-switch-track-border))}.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=false]:not([data-disabled=true]):focus-visible),.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=false]:not([data-disabled=true]):hover){background-color:var(--controlTrack-bgColor-hover,var(--color-switch-track-hover-bg,#dfe6ec))}.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=false]:not([data-disabled=true]):active),.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=false]:not([data-disabled=true]):active:focus-visible){background-color:var(--controlTrack-bgColor-active,var(--color-switch-track-active-bg,#d9e0e8))}.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=true]:not([data-disabled=true])){background-color:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg,#0969da));border-color:var(--control-checked-borderColor-rest,transparent)}.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=true]:not([data-disabled=true]):focus-visible),.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=true]:not([data-disabled=true]):hover){background-color:var(--control-checked-bgColor-hover,var(--color-switch-track-checked-hover-bg,#0860ca))}.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=true]:not([data-disabled=true]):active),.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=true]:not([data-disabled=true]):active:focus-visible){background-color:var(--control-checked-bgColor-active,var(--color-switch-track-checked-active-bg,#0757ba))}.prc-ToggleSwitch-SwitchButtonContent-nv4lE{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.prc-ToggleSwitch-IconContainer-zLC02{flex-basis:50%;flex-grow:1;flex-shrink:0;line-height:0;transition-duration:var(--toggleSwitch-transition-duration);transition-property:transform;transition-timing-function:var(--toggleSwitch-transition-easing)}@media (prefers-reduced-motion){.prc-ToggleSwitch-IconContainer-zLC02{transition:none}}.prc-ToggleSwitch-LineIconContainer-7sQm8{color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg,#fff))}.prc-ToggleSwitch-LineIconContainer-7sQm8:where([data-disabled=true]){color:var(--control-checked-fgColor-disabled,var(--color-switch-track-checked-disabled-fg,#fff))}.prc-ToggleSwitch-LineIconContainer-7sQm8:where([data-checked=true]){transform:translateX(0)}.prc-ToggleSwitch-LineIconContainer-7sQm8:where([data-checked=false]){transform:translateX(-100%)}.prc-ToggleSwitch-CircleIconContainer-gHYvi{color:var(--controlTrack-fgColor-rest,var(--color-switch-track-fg,#656d76))}.prc-ToggleSwitch-CircleIconContainer-gHYvi:where([data-disabled=true]){color:var(--controlTrack-fgColor-disabled,var(--color-switch-track-disabled-fg,#fff))}.prc-ToggleSwitch-CircleIconContainer-gHYvi:where([data-checked=true]){transform:translateX(100%)}.prc-ToggleSwitch-CircleIconContainer-gHYvi:where([data-checked=false]){transform:translateX(0)}.prc-ToggleSwitch-ToggleKnob-2e7Rm{background-color:var(--controlKnob-bgColor-rest,var(--color-switch-knob-bg,#fff));border-color:var(--controlKnob-borderColor-rest,var(--color-switch-knob-border,#858f99));border-radius:calc(var(--borderRadius-medium,.375rem) - var(--borderWidth-thin,.0625rem));border-style:solid;border-width:var(--borderWidth-thin,.0625rem);bottom:0;position:absolute;top:0;transition-duration:var(--toggleSwitch-transition-duration);transition-property:transform;transition-timing-function:var(--toggleSwitch-transition-easing);width:50%;z-index:1}@media (prefers-reduced-motion){.prc-ToggleSwitch-ToggleKnob-2e7Rm{transition:none}}.prc-ToggleSwitch-ToggleKnob-2e7Rm:where([data-checked=false]){transform:translateX(0)}.prc-ToggleSwitch-ToggleKnob-2e7Rm:where([data-checked=true]){border-color:var(--controlKnob-borderColor-checked,var(--color-switch-knob-checked-border,#0969da));transform:translateX(100%)}.prc-ToggleSwitch-ToggleKnob-2e7Rm:where([data-disabled=true]){border-color:var(--controlTrack-bgColor-disabled,var(--color-switch-track-disabled-bg,#8c959f))}@media (forced-colors:active){.prc-ToggleSwitch-ToggleKnob-2e7Rm:where([data-disabled=true]){color:GrayText}}
+/*# sourceMappingURL=ToggleSwitch-4b23d166.css.map */

package/lib-esm/ToggleSwitch/ToggleSwitch-4b23d166.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ToggleSwitch/ToggleSwitch.module.css"],"names":[],"mappings":"AAAA,qCACE,uCAAwC,CACxC,2DAA+D,CAG/D,kBAAmB,CADnB,mBAEF,CAEA,+EACE,kBACF,CAEA,6EACE,0BACF,CAEA,uCACE,mBACF,CAEA,+EAEE,oCAA+B,CAD/B,cAEF,CAEA,mCAIE,oDAA6B,CAE7B,cAAe,CADf,8CAAuC,CAJvC,oCAA+B,CAC/B,qCAAgC,CAChC,iBAIF,CAEA,+DAEE,gDAA2B,CAD3B,kBAEF,CAEA,4DACE,4CACF,CAEA,6DACE,8CACF,CAEA,uCACE,aAAc,CACd,gBACF,CAEA,iEAEE,QAAS,CADT,iBAEF,CAEA,qCAGE,eAAgB,CAMhB,gDAAyC,CACzC,kBAAmB,CACnB,6CAAqC,CAVrC,cAAe,CAWf,aAAc,CAKd,WAAY,CAHZ,eAAgB,CAThB,SAAU,CAQV,iBAAkB,CATlB,4BAAqB,CAArB,oBAAqB,CAGrB,2DAA4D,CAD5D,iDAAmD,CAEnD,gEAAiE,CANjE,wBAAiB,CAAjB,gBAAiB,CAgBjB,UAiCF,CA9BE,mDACE,kEAA4C,CAC5C,kBACF,CAEA,+DACE,6BACF,CAGA,wBACE,4CACE,UAAW,CAEX,MAAO,CAIP,eAAgB,CALhB,iBAAkB,CAElB,OAAQ,CAER,OAAQ,CADR,0BAGF,CACF,CAGA,gCAGE,4EACE,eACF,CACF,CAIF,8DACE,WAAY,CACZ,UACF,CAGA,iEAEE,mGAAsG,CACtG,wBAAyB,CACzB,kBAAmB,CACnB,wBAKF,CAHE,8BAPF,iEAQI,qBAEJ,CADE,CAGF,2FAEE,sFAAyF,CACzF,kFACF,CAEA,0MAGE,6FACF,CAEA,kNAGE,+FACF,CAEA,0FAEE,iGAAoG,CACpG,gEACF,CAEA,wMAGE,wGACF,CAEA,gNAGE,0GACF,CAEA,4CAEE,kBAAmB,CADnB,YAAa,CAGb,WAAY,CACZ,eAAgB,CAFhB,UAGF,CAEA,sCAGE,cAAe,CAFf,WAAY,CACZ,aAAc,CAGd,aAAc,CAEd,2DAA4D,CAD5D,6BAA8B,CAE9B,gEAKF,CAHE,gCAVF,sCAWI,eAEJ,CADE,CAGF,0CAEE,mFACF,CAEA,sEAEE,gGACF,CAEA,qEACE,uBACF,CAEA,sEACE,2BACF,CAEA,4CAEE,2EACF,CAEA,wEAEE,qFACF,CAEA,uEACE,0BACF,CAEA,wEACE,uBACF,CAEA,mCAEE,iFAAoF,CAIpF,wFAA2F,CAG3F,yFAAyE,CALzE,kBAAmB,CADnB,6CAAqC,CAUrC,QAAS,CAFT,iBAAkB,CAClB,KAAM,CAGN,2DAA4D,CAD5D,6BAA8B,CAE9B,gEAAiE,CANjE,SAAU,CAOV,SAKF,CAHE,gCAnBF,mCAoBI,eAEJ,CADE,CAGF,+DACE,uBACF,CAEA,8DAGE,mGAAsG,CAFtG,0BAGF,CAEA,+DAEE,+FAKF,CAHE,8BAJF,+DAKI,cAEJ,CADE","file":"ToggleSwitch-4b23d166.css","sourcesContent":[".ToggleSwitch {\n  --toggleSwitch-transition-duration: 80ms;\n  --toggleSwitch-transition-easing: cubic-bezier(0.5, 1, 0.89, 1);\n\n  display: inline-flex;\n  align-items: center;\n}\n\n.ToggleSwitch:where([data-status-label-position='start']) {\n  flex-direction: row;\n}\n\n.ToggleSwitch:where([data-status-label-position='end']) {\n  flex-direction: row-reverse;\n}\n\n.LoadingSpinner {\n  display: inline-flex;\n}\n\n.LoadingSpinner:where([data-status-label-position='end']) {\n  margin-right: 0;\n  margin-left: var(--base-size-8);\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:where([data-disabled='true']) {\n  cursor: not-allowed;\n  color: var(--fgColor-muted);\n}\n\n.StatusText:where([data-size='small']) {\n  font-size: var(--text-body-size-small);\n}\n\n.StatusText:where([data-size='medium']) {\n  font-size: var(--text-body-size-medium);\n}\n\n.StatusTextItem {\n  display: block;\n  text-align: right;\n}\n\n.StatusTextItem:where([data-hidden='true']) {\n  visibility: hidden;\n  height: 0;\n}\n\n.SwitchButton {\n  cursor: pointer;\n  user-select: none;\n  appearance: none;\n  text-decoration: none;\n  padding: 0;\n  transition-property: background-color, border-color;\n  transition-duration: var(--toggleSwitch-transition-duration);\n  transition-timing-function: var(--toggleSwitch-transition-easing);\n  border-radius: var(--borderRadius-medium);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  display: block;\n  position: relative;\n  overflow: hidden;\n\n  /* Default medium size */\n  height: 32px;\n  width: 64px;\n\n  /* Focus styles */\n  &:focus-visible {\n    outline: 2px solid var(--focus-outlineColor);\n    outline-offset: 3px;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: solid 1px transparent;\n  }\n\n  /* Touch device support */\n  @media (pointer: coarse) {\n    &::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      right: 0;\n      transform: translateY(-50%);\n      top: 50%;\n      min-height: 44px;\n    }\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion) {\n    transition: none;\n\n    * {\n      transition: none;\n    }\n  }\n}\n\n/* Size variants */\n.SwitchButton:where([data-size='small']) {\n  height: 24px;\n  width: 48px;\n}\n\n/* State variants */\n.SwitchButton:where([data-disabled='true']) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f));\n  border-color: transparent;\n  cursor: not-allowed;\n  transition-property: none;\n\n  @media (forced-colors: active) {\n    border-color: GrayText;\n  }\n}\n\n.SwitchButton:where([data-checked='false']:not([data-disabled='true'])) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--controlTrack-bgColor-rest, var(--color-switch-track-bg, #eaeef2));\n  border-color: var(--controlTrack-borderColor-rest);\n}\n\n.SwitchButton:where([data-checked='false']:not([data-disabled='true']):hover),\n.SwitchButton:where([data-checked='false']:not([data-disabled='true']):focus-visible) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsla(210deg, 24%, 90%, 1)));\n}\n\n.SwitchButton:where([data-checked='false']:not([data-disabled='true']):active),\n.SwitchButton:where([data-checked='false']:not([data-disabled='true']):active:focus-visible) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, hsla(210deg, 24%, 88%, 1)));\n}\n\n.SwitchButton:where([data-checked='true']:not([data-disabled='true'])) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--control-checked-bgColor-rest, var(--color-switch-track-checked-bg, #0969da));\n  border-color: var(--control-checked-borderColor-rest, transparent);\n}\n\n.SwitchButton:where([data-checked='true']:not([data-disabled='true']):hover),\n.SwitchButton:where([data-checked='true']:not([data-disabled='true']):focus-visible) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--control-checked-bgColor-hover, var(--color-switch-track-checked-hover-bg, #0860ca));\n}\n\n.SwitchButton:where([data-checked='true']:not([data-disabled='true']):active),\n.SwitchButton:where([data-checked='true']:not([data-disabled='true']):active:focus-visible) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--control-checked-bgColor-active, var(--color-switch-track-checked-active-bg, #0757ba));\n}\n\n.SwitchButtonContent {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.IconContainer {\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: var(--toggleSwitch-transition-duration);\n  transition-timing-function: var(--toggleSwitch-transition-easing);\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n  }\n}\n\n.LineIconContainer {\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, #fff));\n}\n\n.LineIconContainer:where([data-disabled='true']) {\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--control-checked-fgColor-disabled, var(--color-switch-track-checked-disabled-fg, #fff));\n}\n\n.LineIconContainer:where([data-checked='true']) {\n  transform: translateX(0);\n}\n\n.LineIconContainer:where([data-checked='false']) {\n  transform: translateX(-100%);\n}\n\n.CircleIconContainer {\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, #656d76));\n}\n\n.CircleIconContainer:where([data-disabled='true']) {\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, #fff));\n}\n\n.CircleIconContainer:where([data-checked='true']) {\n  transform: translateX(100%);\n}\n\n.CircleIconContainer:where([data-checked='false']) {\n  transform: translateX(0);\n}\n\n.ToggleKnob {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #fff));\n  border-width: var(--borderWidth-thin);\n  border-style: solid;\n  /* stylelint-disable-next-line primer/colors */\n  border-color: var(--controlKnob-borderColor-rest, var(--color-switch-knob-border, #858f99));\n  /* Use calc to account for 1px border around the control */\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: calc(var(--borderRadius-medium) - var(--borderWidth-thin));\n  width: 50%;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  transition-property: transform;\n  transition-duration: var(--toggleSwitch-transition-duration);\n  transition-timing-function: var(--toggleSwitch-transition-easing);\n  z-index: 1;\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n  }\n}\n\n.ToggleKnob:where([data-checked='false']) {\n  transform: translateX(0);\n}\n\n.ToggleKnob:where([data-checked='true']) {\n  transform: translateX(100%);\n  /* stylelint-disable-next-line primer/colors */\n  border-color: var(--controlKnob-borderColor-checked, var(--color-switch-knob-checked-border, #0969da));\n}\n\n.ToggleKnob:where([data-disabled='true']) {\n  /* stylelint-disable-next-line primer/colors */\n  border-color: var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f));\n\n  @media (forced-colors: active) {\n    color: GrayText;\n  }\n}\n"]}

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

@@ -35,8 +35,6 @@ export interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElem
     /** type of button to account for behavior when added to a form*/
     buttonType?: 'button' | 'submit' | 'reset';
 }
-declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLButtonElement>>;
+declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLButtonElement>>;
 export default ToggleSwitch;
 //# sourceMappingURL=ToggleSwitch.d.ts.map

package/lib-esm/ToggleSwitch/ToggleSwitch.js

@@ -1,10 +1,6 @@
 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 getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles.js';
 import VisuallyHidden from '../_VisuallyHidden.js';
 import useSafeTimeout from '../hooks/useSafeTimeout.js';
 import classes from './ToggleSwitch.module.css.js';
@@ -14,17 +10,6 @@ import { useId } from '../hooks/useId.js';
 import { AriaStatus } from '../live-region/AriaStatus.js';
 import StyledSpinner from '../Spinner/Spinner.js';
 
-const TRANSITION_DURATION = '80ms';
-const EASE_OUT_QUAD_CURVE = 'cubic-bezier(0.5, 1, 0.89, 1)';
-const sizeVariants = variant({
-  prop: 'size',
-  variants: {
-    small: {
-      height: '24px',
-      width: '48px'
-    }
-  }
-});
 const CircleIcon = t0 => {
   const $ = c(4);
   const {
@@ -97,32 +82,8 @@ const LineIcon = t0 => {
   }
   return t4;
 };
-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 => {
-  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'));
-  }
-  if (props.checked) {
-    return css(["background-color:", ";border-color:var(--control-checked-borderColor-rest,transparent);&:hover:not(:disabled):not([aria-disabled='true']),&:focus:focus-visible{background-color:", ";}&:active,&:active:focus-visible{background-color:", ";}"], get('colors.switchTrack.checked.bg'), get('colors.switchTrack.checked.hoverBg'), get('colors.switchTrack.checked.activeBg'));
-  } else {
-    return css(["background-color:", ";border-color:var(--controlTrack-borderColor-rest,transparent);&:active{background-color:", ";}"], get('colors.switchTrack.bg'), get('colors.switchTrack.activeBg'));
-  }
-}, sizeVariants);
-const ToggleKnob = styled.div.withConfig({
-  displayName: "ToggleSwitch__ToggleKnob",
-  componentId: "sc-e6gszy-1"
-})(["background-color:", ";border-width:1px;border-style:solid;border-color:", ";border-radius:calc(", " - 1px);width:50%;position:absolute;top:0;bottom:0;transition-property:transform;transition-duration:", ";transition-timing-function:", ";transform:", ";z-index:1;@media (prefers-reduced-motion){transition:none;}", ""], get('colors.switchKnob.bg'), props => props['aria-disabled'] ? get('colors.switchTrack.disabledBg') : get('colors.switchKnob.border'), get('radii.2'), TRANSITION_DURATION, EASE_OUT_QUAD_CURVE, props => `translateX(${props.checked ? '100%' : '0px'})`, props => {
-  if (props['aria-disabled']) {
-    return css(["@media (forced-colors:active){color:GrayText;}border-color:", ";"], get('colors.switchTrack.disabledBg'));
-  }
-  if (props.checked) {
-    return css(["border-color:", ";"], get('colors.switchKnob.checked.border'));
-  }
-});
 const ToggleSwitch = /*#__PURE__*/React.forwardRef(function ToggleSwitch(props, ref) {
-  const $ = c(89);
+  const $ = c(91);
   let ariaDescribedby;
   let ariaLabelledby;
   let checked;
@@ -299,44 +260,49 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef(function ToggleSwitch(props,
     t12 = $[39];
   }
   let t13;
-  if ($[40] !== loading) {
-    t13 = loading ? /*#__PURE__*/jsx(StyledSpinner, {
-      size: "small",
-      srText: null
+  if ($[40] !== loading || $[41] !== statusLabelPosition) {
+    t13 = loading ? /*#__PURE__*/jsx("div", {
+      className: classes.LoadingSpinner,
+      "data-status-label-position": statusLabelPosition,
+      children: /*#__PURE__*/jsx(StyledSpinner, {
+        size: "small",
+        srText: null
+      })
     }) : null;
     $[40] = loading;
-    $[41] = t13;
+    $[41] = statusLabelPosition;
+    $[42] = t13;
   } else {
-    t13 = $[41];
+    t13 = $[42];
   }
   const t14 = !acceptsInteraction;
   const t15 = !isOn;
   let t16;
-  if ($[42] !== t15) {
-    t16 = /*#__PURE__*/jsx("div", {
+  if ($[43] !== t15) {
+    t16 = /*#__PURE__*/jsx("span", {
       className: classes.StatusTextItem,
       "data-hidden": t15,
       children: "On"
     });
-    $[42] = t15;
-    $[43] = t16;
+    $[43] = t15;
+    $[44] = t16;
   } else {
-    t16 = $[43];
+    t16 = $[44];
   }
   let t17;
-  if ($[44] !== isOn) {
-    t17 = /*#__PURE__*/jsx("div", {
+  if ($[45] !== isOn) {
+    t17 = /*#__PURE__*/jsx("span", {
       className: classes.StatusTextItem,
       "data-hidden": isOn,
       children: "Off"
     });
-    $[44] = isOn;
-    $[45] = t17;
+    $[45] = isOn;
+    $[46] = t17;
   } else {
-    t17 = $[45];
+    t17 = $[46];
   }
   let t18;
-  if ($[46] !== handleToggleClick || $[47] !== size || $[48] !== t14 || $[49] !== t16 || $[50] !== t17) {
+  if ($[47] !== handleToggleClick || $[48] !== size || $[49] !== t14 || $[50] !== t16 || $[51] !== t17) {
     t18 = /*#__PURE__*/jsxs("span", {
       className: classes.StatusText,
       "data-size": size,
@@ -345,146 +311,149 @@ const ToggleSwitch = /*#__PURE__*/React.forwardRef(function ToggleSwitch(props,
       onClick: handleToggleClick,
       children: [t16, t17]
     });
-    $[46] = handleToggleClick;
-    $[47] = size;
-    $[48] = t14;
-    $[49] = t16;
-    $[50] = t17;
-    $[51] = t18;
+    $[47] = handleToggleClick;
+    $[48] = size;
+    $[49] = t14;
+    $[50] = t16;
+    $[51] = t17;
+    $[52] = t18;
   } else {
-    t18 = $[51];
+    t18 = $[52];
   }
-  const t19 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : undefined;
-  const t20 = !acceptsInteraction;
+  const t19 = !acceptsInteraction;
+  const t20 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : undefined;
   const t21 = !acceptsInteraction;
-  let t22;
-  if ($[52] !== size) {
-    t22 = /*#__PURE__*/jsx(LineIcon, {
+  const t22 = !acceptsInteraction;
+  let t23;
+  if ($[53] !== size) {
+    t23 = /*#__PURE__*/jsx(LineIcon, {
       size: size
     });
-    $[52] = size;
-    $[53] = t22;
+    $[53] = size;
+    $[54] = t23;
   } else {
-    t22 = $[53];
+    t23 = $[54];
   }
-  let t23;
-  if ($[54] !== isOn || $[55] !== t21 || $[56] !== t22) {
-    t23 = /*#__PURE__*/jsx("div", {
-      className: classes.IconBox,
-      "data-type": "on",
+  let t24;
+  if ($[55] !== isOn || $[56] !== t22 || $[57] !== t23) {
+    t24 = /*#__PURE__*/jsx("div", {
+      className: `${classes.IconContainer} ${classes.LineIconContainer}`,
       "data-checked": isOn,
-      "data-disabled": t21,
-      children: t22
+      "data-disabled": t22,
+      children: t23
     });
-    $[54] = isOn;
-    $[55] = t21;
+    $[55] = isOn;
     $[56] = t22;
     $[57] = t23;
+    $[58] = t24;
   } else {
-    t23 = $[57];
+    t24 = $[58];
   }
-  const t24 = !acceptsInteraction;
-  let t25;
-  if ($[58] !== size) {
-    t25 = /*#__PURE__*/jsx(CircleIcon, {
+  const t25 = !acceptsInteraction;
+  let t26;
+  if ($[59] !== size) {
+    t26 = /*#__PURE__*/jsx(CircleIcon, {
       size: size
     });
-    $[58] = size;
-    $[59] = t25;
+    $[59] = size;
+    $[60] = t26;
   } else {
-    t25 = $[59];
+    t26 = $[60];
   }
-  let t26;
-  if ($[60] !== isOn || $[61] !== t24 || $[62] !== t25) {
-    t26 = /*#__PURE__*/jsx("div", {
-      className: classes.IconBox,
-      "data-type": "off",
+  let t27;
+  if ($[61] !== isOn || $[62] !== t25 || $[63] !== t26) {
+    t27 = /*#__PURE__*/jsx("div", {
+      className: `${classes.IconContainer} ${classes.CircleIconContainer}`,
       "data-checked": isOn,
-      "data-disabled": t24,
-      children: t25
+      "data-disabled": t25,
+      children: t26
     });
-    $[60] = isOn;
-    $[61] = t24;
+    $[61] = isOn;
     $[62] = t25;
     $[63] = t26;
+    $[64] = t27;
   } else {
-    t26 = $[63];
+    t27 = $[64];
   }
-  let t27;
-  if ($[64] !== t23 || $[65] !== t26) {
-    t27 = /*#__PURE__*/jsxs("div", {
+  let t28;
+  if ($[65] !== t24 || $[66] !== t27) {
+    t28 = /*#__PURE__*/jsxs("div", {
+      className: classes.SwitchButtonContent,
       "aria-hidden": "true",
-      className: classes.IconContainer,
-      children: [t23, t26]
+      children: [t24, t27]
     });
-    $[64] = t23;
-    $[65] = t26;
+    $[65] = t24;
     $[66] = t27;
+    $[67] = t28;
   } else {
-    t27 = $[66];
+    t28 = $[67];
   }
-  const t28 = !acceptsInteraction;
-  let t29;
-  if ($[67] !== isOn || $[68] !== t28) {
-    t29 = /*#__PURE__*/jsx(ToggleKnob, {
-      "aria-hidden": "true",
-      "aria-disabled": t28,
-      checked: isOn
+  const t29 = !acceptsInteraction;
+  let t30;
+  if ($[68] !== isOn || $[69] !== t29) {
+    t30 = /*#__PURE__*/jsx("div", {
+      className: classes.ToggleKnob,
+      "data-checked": isOn,
+      "data-disabled": t29,
+      "aria-hidden": "true"
     });
-    $[67] = isOn;
-    $[68] = t28;
+    $[68] = isOn;
     $[69] = t29;
+    $[70] = t30;
   } else {
-    t29 = $[69];
+    t30 = $[70];
   }
-  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, {
+  let t31;
+  if ($[71] !== ariaLabelledby || $[72] !== buttonType || $[73] !== handleToggleClick || $[74] !== isOn || $[75] !== ref || $[76] !== size || $[77] !== t19 || $[78] !== t20 || $[79] !== t21 || $[80] !== t28 || $[81] !== t30) {
+    t31 = /*#__PURE__*/jsxs("button", {
       ref: ref,
       type: buttonType,
+      className: classes.SwitchButton,
+      "data-size": size,
+      "data-checked": isOn,
+      "data-disabled": t19,
       onClick: handleToggleClick,
       "aria-labelledby": ariaLabelledby,
-      "aria-describedby": t19,
+      "aria-describedby": t20,
       "aria-pressed": isOn,
-      checked: isOn,
-      size: size,
-      "aria-disabled": t20,
-      children: [t27, t29]
+      "aria-disabled": t21,
+      children: [t28, t30]
     });
-    $[70] = ariaLabelledby;
-    $[71] = buttonType;
-    $[72] = handleToggleClick;
-    $[73] = isOn;
-    $[74] = ref;
-    $[75] = size;
-    $[76] = t19;
-    $[77] = t20;
-    $[78] = t27;
-    $[79] = t29;
-    $[80] = t30;
+    $[71] = ariaLabelledby;
+    $[72] = buttonType;
+    $[73] = handleToggleClick;
+    $[74] = isOn;
+    $[75] = ref;
+    $[76] = size;
+    $[77] = t19;
+    $[78] = t20;
+    $[79] = t21;
+    $[80] = t28;
+    $[81] = t30;
+    $[82] = t31;
   } else {
-    t30 = $[80];
+    t31 = $[82];
   }
-  let t31;
-  if ($[81] !== rest || $[82] !== statusLabelPosition || $[83] !== t10 || $[84] !== t12 || $[85] !== t13 || $[86] !== t18 || $[87] !== t30) {
-    t31 = /*#__PURE__*/jsxs("div", {
+  let t32;
+  if ($[83] !== rest || $[84] !== statusLabelPosition || $[85] !== t10 || $[86] !== t12 || $[87] !== t13 || $[88] !== t18 || $[89] !== t31) {
+    t32 = /*#__PURE__*/jsxs("div", {
       className: t10,
       "data-status-label-position": statusLabelPosition,
       ...rest,
-      children: [t12, t13, t18, t30]
+      children: [t12, t13, t18, t31]
     });
-    $[81] = rest;
-    $[82] = statusLabelPosition;
-    $[83] = t10;
-    $[84] = t12;
-    $[85] = t13;
-    $[86] = t18;
-    $[87] = t30;
-    $[88] = t31;
+    $[83] = rest;
+    $[84] = statusLabelPosition;
+    $[85] = t10;
+    $[86] = t12;
+    $[87] = t13;
+    $[88] = t18;
+    $[89] = t31;
+    $[90] = t32;
   } else {
-    t31 = $[88];
+    t32 = $[90];
   }
-  return t31;
+  return t32;
 });
 if (process.env.NODE_ENV !== "production") {
   ToggleSwitch.displayName = 'ToggleSwitch';

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

@@ -1,5 +1,5 @@
-import './ToggleSwitch-65936b4b.css';
+import './ToggleSwitch-4b23d166.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"};
+var classes = {"ToggleSwitch":"prc-ToggleSwitch-ToggleSwitch-E4lp0","LoadingSpinner":"prc-ToggleSwitch-LoadingSpinner-jCYtC","StatusText":"prc-ToggleSwitch-StatusText-hWpj2","StatusTextItem":"prc-ToggleSwitch-StatusTextItem-fvvXa","SwitchButton":"prc-ToggleSwitch-SwitchButton-5LRHX","SwitchButtonContent":"prc-ToggleSwitch-SwitchButtonContent-nv4lE","IconContainer":"prc-ToggleSwitch-IconContainer-zLC02","LineIconContainer":"prc-ToggleSwitch-LineIconContainer-7sQm8","CircleIconContainer":"prc-ToggleSwitch-CircleIconContainer-gHYvi","ToggleKnob":"prc-ToggleSwitch-ToggleKnob-2e7Rm"};
 
 export { classes as default };

package/lib-esm/Token/IssueLabelToken-0dbbbcdf.css

@@ -0,0 +1,2 @@
+.prc-Token-IssueLabel-ZuoEW{--label-r:153;--label-g:153;--label-b:153;--label-h:0;--label-s:0;--label-l:60;--perceived-lightness:calc(var(--label-r)*0.2126/255 + var(--label-g)*0.7152/255 + var(--label-b)*0.0722/255);--lightness-switch:max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold))*-1000),1));border-style:solid;border-width:var(--borderWidth-thin,.0625rem);position:relative}.prc-Token-IssueLabel-ZuoEW:where([data-in-color-mode*=light],[data-in-color-mode=auto]){--lightness-threshold:0.453;--border-threshold:0.96;--border-alpha:max(0,min(calc((var(--perceived-lightness) - var(--border-threshold))*100),1));background:rgb(var(--label-r),var(--label-g),var(--label-b));border-color:hsla(var(--label-h),calc(var(--label-s)*1%),calc((var(--label-l) - 25)*1%),var(--border-alpha));color:hsl(0deg,0%,calc(var(--lightness-switch)*100%))}.prc-Token-IssueLabel-ZuoEW:where([data-in-color-mode*=dark]){--lightness-threshold:0.6;--background-alpha:0.18;--border-alpha:0.3;--lighten-by:calc((var(--lightness-threshold) - var(--perceived-lightness))*100*var(--lightness-switch));background:rgba(var(--label-r),var(--label-g),var(--label-b),var(--background-alpha));border-color:hsla(var(--label-h),calc(var(--label-s)*1%),calc((var(--label-l) + var(--lighten-by))*1%),var(--border-alpha));color:hsl(var(--label-h),calc(var(--label-s)*1%),calc((var(--label-l) + var(--lighten-by))*1%))}.prc-Token-IssueLabel-ZuoEW:where([data-selected=true][data-in-color-mode*=light],[data-selected=true][data-in-color-mode=auto]){background:hsl(var(--label-h),calc(var(--label-s)*1%),calc((var(--label-l) - 5)*1%))}.prc-Token-IssueLabel-ZuoEW:where([data-selected=true]){outline:none}.prc-Token-IssueLabel-ZuoEW:where([data-selected=true]):after{border-radius:var(--borderRadius-full,624.9375rem);bottom:calc(var(--base-size-2,.125rem)*-1);content:"";display:block;left:calc(var(--base-size-2,.125rem)*-1);pointer-events:none;position:absolute;right:calc(var(--base-size-2,.125rem)*-1);top:calc(var(--base-size-2,.125rem)*-1);z-index:1}.prc-Token-IssueLabel-ZuoEW:where([data-selected=true][data-in-color-mode*=light],[data-selected=true][data-in-color-mode=auto]):after{box-shadow:0 0 0 2px rgb(var(--label-r),var(--label-g),var(--label-b))}.prc-Token-IssueLabel-ZuoEW:where([data-selected=true][data-in-color-mode=dark]):after{box-shadow:0 0 0 2px hsl(var(--label-h),calc(var(--label-s)*1%),calc((var(--label-l) + var(--lighten-by))*1%))}.prc-Token-IssueLabel-ZuoEW:where([data-cursor-is-interactive=true]:hover[data-in-color-mode*=light],[data-cursor-is-interactive=true]:hover[data-in-color-mode=auto]){background-image:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)),linear-gradient(rgb(var(--label-r),var(--label-g),var(--label-b)),rgb(var(--label-r),var(--label-g),var(--label-b)));box-shadow:var(--shadow-resting-medium,var(--color-shadow-medium))}.prc-Token-IssueLabel-ZuoEW:where([data-cursor-is-interactive=true]:hover[data-in-color-mode=dark]){background:hsla(var(--label-h),calc(var(--label-s)*1%),calc((var(--label-l) + 10)*1%),.3);box-shadow:var(--shadow-resting-medium,var(--color-shadow-medium))}.prc-Token-IssueLabel-ZuoEW:where([data-has-remove-button=true]){padding-right:0}.prc-Token-RemoveButton-H4Dmg:where([data-has-multiple-action-targets=true]){position:relative;z-index:1}
+/*# sourceMappingURL=IssueLabelToken-0dbbbcdf.css.map */

package/lib-esm/Token/IssueLabelToken-0dbbbcdf.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Token/IssueLabelToken.module.css"],"names":[],"mappings":"AAAA,4BAEE,aAAc,CACd,aAAc,CACd,aAAc,CACd,WAAY,CACZ,WAAY,CACZ,YAAa,CACb,6GAEC,CACD,sGAA2G,CAI3G,kBAAmB,CADnB,6CAAqC,CADrC,iBAGF,CAGA,yFACE,2BAA4B,CAC5B,uBAAwB,CACxB,6FAAkG,CAElG,4DAA+D,CAI/D,4GAAoH,CAFpH,qDAGF,CAGA,8DACE,yBAA0B,CAC1B,uBAAwB,CACxB,kBAAmB,CACnB,wGAA+G,CAG/G,qFAAyF,CAIzF,2HAKC,CAPD,+FASF,CAGA,iIAKE,oFACF,CAEA,wDACE,YACF,CAEA,8DAUE,kDAAuC,CAJvC,0CAAqC,CALrC,UAAW,CAOX,aAAc,CADd,wCAAmC,CAEnC,mBAAoB,CAPpB,iBAAkB,CAGlB,yCAAoC,CADpC,uCAAkC,CADlC,SAQF,CAEA,uIAKE,sEACF,CAEA,uFAEE,8GACF,CAGA,uKAIE,sLAIG,CACH,kEACF,CAEA,oGAEE,yFAAsG,CACtG,kEACF,CAGA,iEACE,eACF,CAEA,6EACE,iBAAkB,CAClB,SACF","file":"IssueLabelToken-0dbbbcdf.css","sourcesContent":[".IssueLabel {\n  /* Color variables - dynamically set via inline CSS custom properties */\n  --label-r: 153;\n  --label-g: 153;\n  --label-b: 153;\n  --label-h: 0;\n  --label-s: 0;\n  --label-l: 60;\n  --perceived-lightness: calc(\n    ((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255\n  );\n  --lightness-switch: max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1));\n\n  position: relative;\n  border-width: var(--borderWidth-thin);\n  border-style: solid;\n}\n\n/* Light mode styles */\n.IssueLabel:where([data-in-color-mode*='light'], [data-in-color-mode='auto']) {\n  --lightness-threshold: 0.453;\n  --border-threshold: 0.96;\n  --border-alpha: max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1));\n  /* stylelint-disable-next-line primer/colors */\n  background: rgb(var(--label-r), var(--label-g), var(--label-b));\n  /* stylelint-disable-next-line primer/colors */\n  color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%));\n  /* stylelint-disable-next-line primer/colors */\n  border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-alpha));\n}\n\n/* Dark mode styles */\n.IssueLabel:where([data-in-color-mode*='dark']) {\n  --lightness-threshold: 0.6;\n  --background-alpha: 0.18;\n  --border-alpha: 0.3;\n  --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));\n\n  /* stylelint-disable-next-line primer/colors */\n  background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));\n  /* stylelint-disable-next-line primer/colors */\n  color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));\n  /* stylelint-disable primer/colors */\n  border-color: hsla(\n    var(--label-h),\n    calc(var(--label-s) * 1%),\n    calc((var(--label-l) + var(--lighten-by)) * 1%),\n    var(--border-alpha)\n  );\n  /* stylelint-enable primer/colors */\n}\n\n/* Selected state */\n.IssueLabel:where(\n    [data-selected='true'][data-in-color-mode*='light'],\n    [data-selected='true'][data-in-color-mode='auto']\n  ) {\n  /* stylelint-disable-next-line primer/colors */\n  background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%));\n}\n\n.IssueLabel:where([data-selected='true']) {\n  outline: none;\n}\n\n.IssueLabel:where([data-selected='true'])::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  top: calc(var(--base-size-2) * -1);\n  right: calc(var(--base-size-2) * -1);\n  bottom: calc(var(--base-size-2) * -1);\n  left: calc(var(--base-size-2) * -1);\n  display: block;\n  pointer-events: none;\n  border-radius: var(--borderRadius-full);\n}\n\n.IssueLabel:where(\n    [data-selected='true'][data-in-color-mode*='light'],\n    [data-selected='true'][data-in-color-mode='auto']\n  )::after {\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: 0 0 0 2px rgb(var(--label-r), var(--label-g), var(--label-b));\n}\n\n.IssueLabel:where([data-selected='true'][data-in-color-mode='dark'])::after {\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: 0 0 0 2px hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));\n}\n\n/* Interactive hover states */\n.IssueLabel:where(\n    [data-cursor-is-interactive='true']:hover[data-in-color-mode*='light'],\n    [data-cursor-is-interactive='true']:hover[data-in-color-mode='auto']\n  ) {\n  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),\n    linear-gradient(\n      rgb(var(--label-r), var(--label-g), var(--label-b)),\n      rgb(var(--label-r), var(--label-g), var(--label-b))\n    );\n  box-shadow: var(--shadow-resting-medium);\n}\n\n.IssueLabel:where([data-cursor-is-interactive='true']:hover[data-in-color-mode='dark']) {\n  /* stylelint-disable-next-line primer/colors */\n  background: hsla(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3);\n  box-shadow: var(--shadow-resting-medium);\n}\n\n/* Remove button styling */\n.IssueLabel:where([data-has-remove-button='true']) {\n  padding-right: 0;\n}\n\n.RemoveButton:where([data-has-multiple-action-targets='true']) {\n  position: relative;\n  z-index: 1;\n}\n"]}

package/lib-esm/Token/IssueLabelToken.js

@@ -8,28 +8,6 @@ import classes from './IssueLabelToken.module.css.js';
 import { clsx } from 'clsx';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-const tokenBorderWidthPx = 1;
-const lightModeStyles = {
-  '--lightness-threshold': '0.453',
-  '--border-threshold': '0.96',
-  '--border-alpha': 'max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1))',
-  background: 'rgb(var(--label-r), var(--label-g), var(--label-b))',
-  color: 'hsl(0, 0%, calc(var(--lightness-switch) * 100%))',
-  borderWidth: tokenBorderWidthPx,
-  borderStyle: 'solid',
-  borderColor: 'hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha))'
-};
-const darkModeStyles = {
-  '--lightness-threshold': '0.6',
-  '--background-alpha': '0.18',
-  '--border-alpha': '0.3',
-  '--lighten-by': 'calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch))',
-  borderWidth: tokenBorderWidthPx,
-  borderStyle: 'solid',
-  background: 'rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha))',
-  color: 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))',
-  borderColor: 'hsla(var(--label-h), calc(var(--label-s) * 1%),calc((var(--label-l) + var(--lighten-by)) * 1%),var(--border-alpha))'
-};
 const IssueLabelToken = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     as,
@@ -58,56 +36,18 @@ const IssueLabelToken = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     e.stopPropagation();
     onRemove && onRemove();
   };
-  const labelStyles = useMemo(() => {
+  const customProperties = useMemo(() => {
     const [r, g, b] = parseToRgba(fillColor);
     const [h, s, l] = parseToHsla(fillColor);
-    const isLightScheme = !(resolvedColorScheme !== null && resolvedColorScheme !== void 0 && resolvedColorScheme.startsWith('dark')); // fall back to light colors for unknown schemes
-
-    // label hack taken from https://github.com/github/github/blob/master/app/assets/stylesheets/hacks/hx_primer-labels.scss#L43-L108
-    // this logic should eventually live in primer/components. Also worthy of note is that the dotcom hack code will be moving to primer/css soon.
     return {
       '--label-r': String(r),
       '--label-g': String(g),
       '--label-b': String(b),
       '--label-h': String(Math.round(h)),
       '--label-s': String(Math.round(s * 100)),
-      '--label-l': String(Math.round(l * 100)),
-      '--perceived-lightness': 'calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255)',
-      '--lightness-switch': 'max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1))',
-      paddingRight: hideRemoveButton || !onRemove ? undefined : 0,
-      position: 'relative',
-      ...(isLightScheme ? lightModeStyles : darkModeStyles),
-      ...(isSelected ? {
-        background: isLightScheme ? 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%))' : darkModeStyles.background,
-        ':focus': {
-          outline: 'none'
-        },
-        ':after': {
-          content: '""',
-          position: 'absolute',
-          zIndex: 1,
-          top: `-${tokenBorderWidthPx * 2}px`,
-          right: `-${tokenBorderWidthPx * 2}px`,
-          bottom: `-${tokenBorderWidthPx * 2}px`,
-          left: `-${tokenBorderWidthPx * 2}px`,
-          display: 'block',
-          pointerEvents: 'none',
-          boxShadow: `0 0 0 ${tokenBorderWidthPx * 2}px ${isLightScheme ? 'rgb(var(--label-r), var(--label-g), var(--label-b))' : 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))'}`,
-          borderRadius: '999px'
-        }
-      } : {}),
-      ...(isTokenInteractive(props) ? {
-        '&:hover': {
-          ...(isLightScheme ? {
-            backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), linear-gradient(rgb(var(--label-r),var(--label-g),var(--label-b)), rgb(var(--label-r),var(--label-g),var(--label-b)))'
-          } : {
-            background: 'hsla(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3);'
-          }),
-          boxShadow: 'shadow.medium'
-        }
-      } : {})
+      '--label-l': String(Math.round(l * 100))
     };
-  }, [fillColor, resolvedColorScheme, hideRemoveButton, onRemove, isSelected, props]);
+  }, [fillColor]);
   return /*#__PURE__*/jsxs(TokenBase, {
     onRemove: onRemove,
     id: id === null || id === void 0 ? void 0 : id.toString(),
@@ -115,8 +55,10 @@ const IssueLabelToken = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className: clsx(classes.IssueLabel, className),
     text: text,
     size: size,
-    style: labelStyles,
+    style: customProperties,
     "data-has-remove-button": !hideRemoveButton && !!onRemove,
+    "data-selected": isSelected,
+    "data-in-color-mode": resolvedColorScheme || 'light',
     ...(!hasMultipleActionTargets ? interactiveTokenProps : {}),
     ...rest,
     ref: forwardedRef,
@@ -124,7 +66,7 @@ const IssueLabelToken = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       ...(hasMultipleActionTargets ? interactiveTokenProps : {}),
       children: text
     }), !hideRemoveButton && onRemove ? /*#__PURE__*/jsx(RemoveTokenButton, {
-      borderOffset: tokenBorderWidthPx,
+      borderOffset: 1,
       onClick: onRemoveClick,
       size: size,
       "aria-hidden": hasMultipleActionTargets ? 'true' : 'false',

package/lib-esm/Token/IssueLabelToken.module.css.js

@@ -1,4 +1,4 @@
-import './IssueLabelToken-99c9b914.css';
+import './IssueLabelToken-0dbbbcdf.css';
 
 var classes = {"IssueLabel":"prc-Token-IssueLabel-ZuoEW","RemoveButton":"prc-Token-RemoveButton-H4Dmg"};