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

package/dist/components.css

@@ -2010,8 +2010,7 @@ Add a border between the body and footer if:
     }
   }
 
-  &:focus,
-  &:focus-within {
+  &:focus-visible {
     @mixin focusOutline 2px;
   }
 
@@ -3775,91 +3774,6 @@ span wrapping svg or text */
   }
 }
 
-@keyframes prc_shimmer_DB3-6 {
-  from {
-    mask-position: 200%;
-  }
-
-  to {
-    mask-position: 0%;
-  }
-}
-
-.prc_SkeletonBox_nSZk3 {
-  display: block;
-  height: 1rem;
-  background-color: var(--skeletonLoader-bgColor);
-  border-radius: var(--borderRadius-small);
-  animation: prc_shimmer_DB3-6;
-
-  @media (prefers-reduced-motion: no-preference) {
-    mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);
-    mask-size: 200%;
-    animation: prc_shimmer_DB3-6;
-    animation-duration: var(--base-duration-1000);
-    animation-iteration-count: infinite;
-  }
-
-  @media (forced-colors: active) {
-    outline: 1px solid transparent;
-    outline-offset: -1px;
-  }
-}
-
-.prc_SkeletonAvatar_inefu {
-  &:where([data-component='SkeletonAvatar']) {
-    display: inline-block;
-    width: var(--avatarSize-regular);
-    height: var(--avatarSize-regular);
-    /* stylelint-disable-next-line primer/typography */
-    line-height: 1;
-    border-radius: 50%;
-  }
-
-  &:where([data-square]) {
-    /* stylelint-disable-next-line primer/borders */
-    border-radius: clamp(4px, var(--avatarSize-regular) - 24px, var(--borderRadius-medium));
-  }
-
-  &:where([data-responsive]) {
-    @media screen and (--viewportRange-narrow) {
-      width: var(--avatarSize-narrow);
-      height: var(--avatarSize-narrow);
-    }
-
-    @media screen and (--viewportRange-regular) {
-      width: var(--avatarSize-regular);
-      height: var(--avatarSize-regular);
-    }
-
-    @media screen and (--viewportRange-wide) {
-      width: var(--avatarSize-wide);
-      height: var(--avatarSize-wide);
-    }
-  }
-}
-
-.prc_AvatarPair_-TX3Y {
-  position: relative;
-  display: inline-flex;
-
-  [data-component='Avatar']:last-child,
-  [data-component='SkeletonAvatar']:last-child {
-    position: absolute;
-    right: -15%;
-    bottom: -9%;
-    box-shadow: var(--avatar-shadow);
-  }
-
-  [data-component='SkeletonAvatar']:last-child {
-    box-shadow: inset var(--avatar-shadow);
-  }
-}
-
-.prc_AvatarChild_8YokH {
-  background-color: var(--bgColor-default);
-}
-
 .prc_BranchName_jFtg- {
   display: inline-block;
   padding: var(--base-size-2) var(--base-size-6);
@@ -4192,11 +4106,48 @@ span wrapping svg or text */
   transform: translateY(-50%);
 }
 
+@keyframes prc_shimmer_DB3-6 {
+  from {
+    mask-position: 200%;
+  }
+
+  to {
+    mask-position: 0%;
+  }
+}
+
+.prc_SkeletonBox_nSZk3 {
+  display: block;
+  height: 1rem;
+  background-color: var(--skeletonLoader-bgColor);
+  border-radius: var(--borderRadius-small);
+  animation: prc_shimmer_DB3-6;
+
+  @media (prefers-reduced-motion: no-preference) {
+    mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);
+    mask-size: 200%;
+    animation: prc_shimmer_DB3-6;
+    animation-duration: var(--base-duration-1000);
+    animation-iteration-count: infinite;
+  }
+
+  @media (forced-colors: active) {
+    outline: 1px solid transparent;
+    outline-offset: -1px;
+  }
+}
+
 .prc_LoadingSkeleton_x9WXt {
   /* stylelint-disable-next-line primer/borders */
   border-radius: 4px;
 }
 
+.prc_Root_S5E74 {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
 .prc_Container_2A9NQ {
   display: flex;
   height: 100%;
@@ -5517,9 +5468,11 @@ span wrapping svg or text */
   display: flex;
   overflow: hidden;
   /* stylelint-disable-next-line primer/colors */
-  background-color: var(--borderColor-default);
+  background-color: var(--progressBar-track-bgColor);
   border-radius: var(--borderRadius-small);
   gap: 2px;
+  outline: solid 1px var(--progressBar-track-borderColor);
+  outline-offset: -1px;
 
   &:where([data-progress-display='inline']) {
     display: inline-flex;
@@ -5857,6 +5810,10 @@ span wrapping svg or text */
   justify-content: space-between;
 }
 
+.prc_Icon_NuDm4 {
+  margin-right: var(--base-size-4);
+}
+
 .prc_SubNav_rjui0 {
   display: flex;
   justify-content: space-between;
@@ -5927,6 +5884,90 @@ span wrapping svg or text */
   }
 }
 
+.prc_ToggleSwitch_E4lp0 {
+  display: inline-flex;
+  align-items: center;
+  flex-direction: row-reverse;
+}
+
+.prc_ToggleSwitch_E4lp0[data-status-label-position='start'] {
+  flex-direction: row;
+}
+
+.prc_StatusText_hWpj2 {
+  margin-left: var(--base-size-8);
+  margin-right: var(--base-size-8);
+  position: relative;
+  color: var(--fgColor-default);
+  font-size: var(--text-body-size-medium);
+  cursor: pointer;
+}
+
+.prc_StatusText_hWpj2[data-size='small'] {
+  font-size: var(--text-body-size-small);
+}
+
+.prc_StatusText_hWpj2[data-disabled='true'] {
+  color: var(--fgColor-muted);
+  cursor: not-allowed;
+}
+
+.prc_StatusTextItem_fvvXa {
+  text-align: right;
+}
+
+.prc_StatusTextItem_fvvXa[data-hidden='true'] {
+  visibility: hidden;
+  height: 0;
+}
+
+.prc_IconContainer_zLC02 {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.prc_IconBox_NNOYG {
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 50%;
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 0;
+  transition-property: transform;
+  transition-duration: 80ms;
+}
+
+.prc_IconBox_NNOYG[data-type='on'] {
+  color: var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, var(--fgColor-onEmphasis)));
+  transform: translateX(0);
+}
+
+.prc_IconBox_NNOYG[data-type='on'][data-checked='false'] {
+  transform: translateX(-100%);
+}
+
+.prc_IconBox_NNOYG[data-type='on'][data-disabled='true'] {
+  color: var(
+    --control-checked-fgColor-disabled,
+    var(--color-switch-track-checked-disabled-fg, var(--fgColor-onEmphasis))
+  );
+}
+
+.prc_IconBox_NNOYG[data-type='off'] {
+  color: var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, var(--fgColor-muted)));
+  transform: translateX(100%);
+}
+
+.prc_IconBox_NNOYG[data-type='off'][data-checked='false'] {
+  transform: translateX(0);
+}
+
+.prc_IconBox_NNOYG[data-type='off'][data-disabled='true'] {
+  color: var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, var(--fgColor-onEmphasis)));
+}
+
 .prc_Timeline_iQjcc {
   display: flex;
   flex-direction: column;
@@ -6036,43 +6077,6 @@ span wrapping svg or text */
   z-index: 1;
 }
 
-:root {
-  --spacing: calc(var(--base-size-4) * 2);
-}
-
-.prc_AvatarContainer_dBasr {
-  display: block;
-}
-
-.prc_Avatar_A1uRI {
-  width: 100%;
-  height: 100%;
-}
-
-.prc_Token_8GtFN {
-  padding-left: var(--base-size-4) !important;
-}
-
-.prc_AvatarContainer_dBasr:where([data-size='small']) {
-  width: calc(16px - var(--spacing));
-  height: calc(16px - var(--spacing));
-}
-
-.prc_AvatarContainer_dBasr:where([data-size='medium']) {
-  width: calc(20px - var(--spacing));
-  height: calc(20px - var(--spacing));
-}
-
-.prc_AvatarContainer_dBasr:where([data-size='large']) {
-  width: calc(24px - var(--spacing));
-  height: calc(24px - var(--spacing));
-}
-
-.prc_AvatarContainer_dBasr:where([data-size='xlarge']) {
-  width: calc(32px - var(--spacing));
-  height: calc(32px - var(--spacing));
-}
-
 .prc_TreeViewRootUlStyles_eZtxW {
   padding: 0;
   margin: 0;
@@ -6340,6 +6344,39 @@ span wrapping svg or text */
   width: var(--tree-item-loading-width, 67%);
 }
 
+.prc_SkeletonAvatar_inefu {
+  &:where([data-component='SkeletonAvatar']) {
+    display: inline-block;
+    width: var(--avatarSize-regular);
+    height: var(--avatarSize-regular);
+    /* stylelint-disable-next-line primer/typography */
+    line-height: 1;
+    border-radius: 50%;
+  }
+
+  &:where([data-square]) {
+    /* stylelint-disable-next-line primer/borders */
+    border-radius: clamp(4px, var(--avatarSize-regular) - 24px, var(--borderRadius-medium));
+  }
+
+  &:where([data-responsive]) {
+    @media screen and (--viewportRange-narrow) {
+      width: var(--avatarSize-narrow);
+      height: var(--avatarSize-narrow);
+    }
+
+    @media screen and (--viewportRange-regular) {
+      width: var(--avatarSize-regular);
+      height: var(--avatarSize-regular);
+    }
+
+    @media screen and (--viewportRange-wide) {
+      width: var(--avatarSize-wide);
+      height: var(--avatarSize-wide);
+    }
+  }
+}
+
 .prc_SkeletonText_tW5nH {
   --font-size: var(--text-body-size-medium);
   --line-height: var(--text-body-lineHeight-medium);