@primer/react 38.40.1-rc.1028b70d8 → 38.40.1-rc.6186010d9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/ActionList/Item.js +116 -115
  3. package/dist/AvatarStack/{AvatarStack-e6a99916.css → AvatarStack-937ec7c1.css} +2 -2
  4. package/dist/AvatarStack/{AvatarStack-e6a99916.css.map → AvatarStack-937ec7c1.css.map} +1 -1
  5. package/dist/AvatarStack/AvatarStack.module.css.js +1 -1
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -6,8 +6,12 @@
6
6
 
7
7
  - [#8413](https://github.com/primer/react/pull/8413) [`d4e30ed`](https://github.com/primer/react/commit/d4e30ed186af6ae781b3adcf83278e0c2001a834) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - SelectPanel: Announce the filter input label when focus moves into the panel
8
8
 
9
+ - [#8434](https://github.com/primer/react/pull/8434) [`6794582`](https://github.com/primer/react/commit/67945828439898ace865bd5f7417c562033bcbc2) Thanks [@siddharthkp](https://github.com/siddharthkp)! - AvatarStack: Prevent a thin edge from a masked avatar over the next avatar
10
+
9
11
  - [#8443](https://github.com/primer/react/pull/8443) [`e2d6cb9`](https://github.com/primer/react/commit/e2d6cb931bbde9446701056f204b055789b16dd9) Thanks [@siddharthkp](https://github.com/siddharthkp)! - UnderlineNav: Avoid adding a default `href` when items render as custom link components
10
12
 
13
+ - [#8429](https://github.com/primer/react/pull/8429) [`f2c075a`](https://github.com/primer/react/commit/f2c075a5d4d0b51a279c39effa18226ad909929d) Thanks [@tay1orjones](https://github.com/tay1orjones)! - SelectPanel: Prevent console warnings when measuring virtualized items
14
+
11
15
  - [#8442](https://github.com/primer/react/pull/8442) [`68019e8`](https://github.com/primer/react/commit/68019e8945a754bb0f97c9e963b90e2a9ccaaf85) Thanks [@joshfarrant](https://github.com/joshfarrant)! - SegmentedControl: Allow controls to grow vertically and preserve visible labels when they wrap
12
16
 
13
17
  ## 38.40.0
package/dist/ActionList/Item.js CHANGED
@@ -471,33 +471,34 @@ const UnwrappedItem = (t0, forwardedRef) => {
471
471
  $[92] = t35;
472
472
  } else t35 = $[92];
473
473
  const t36 = (_PrivateTooltipText2 = _PrivateTooltipText) !== null && _PrivateTooltipText2 !== void 0 ? _PrivateTooltipText2 : truncatedText;
474
- let t37;
474
+ const t37 = listSemantics ? null : forwardedRef;
475
475
  let t38;
476
+ let t39;
476
477
  if ($[93] === Symbol.for("react.memo_cache_sentinel")) {
477
- t37 = {};
478
- t38 = /*#__PURE__*/ jsx("span", { className: ActionList_module_css_default.Spacer });
479
- $[93] = t37;
480
- $[94] = t38;
478
+ t38 = {};
479
+ t39 = /*#__PURE__*/ jsx("span", { className: ActionList_module_css_default.Spacer });
480
+ $[93] = t38;
481
+ $[94] = t39;
481
482
  } else {
482
- t37 = $[93];
483
- t38 = $[94];
483
+ t38 = $[93];
484
+ t39 = $[94];
484
485
  }
485
- let t39;
486
+ let t40;
486
487
  if ($[95] !== selected) {
487
- t39 = /*#__PURE__*/ jsx(Selection, {
488
+ t40 = /*#__PURE__*/ jsx(Selection, {
488
489
  selected,
489
490
  className: ActionList_module_css_default.LeadingAction
490
491
  });
491
492
  $[95] = selected;
492
- $[96] = t39;
493
- } else t39 = $[96];
494
- const t40 = showInactiveIndicator ? inactiveText : void 0;
495
- const t41 = Boolean(slots.leadingVisual);
496
- let t42;
497
- if ($[97] !== labelId || $[98] !== loading || $[99] !== slots.leadingVisual || $[100] !== t40 || $[101] !== t41) {
498
- t42 = /*#__PURE__*/ jsx(VisualOrIndicator, {
499
- inactiveText: t40,
500
- itemHasLeadingVisual: t41,
493
+ $[96] = t40;
494
+ } else t40 = $[96];
495
+ const t41 = showInactiveIndicator ? inactiveText : void 0;
496
+ const t42 = Boolean(slots.leadingVisual);
497
+ let t43;
498
+ if ($[97] !== labelId || $[98] !== loading || $[99] !== slots.leadingVisual || $[100] !== t41 || $[101] !== t42) {
499
+ t43 = /*#__PURE__*/ jsx(VisualOrIndicator, {
500
+ inactiveText: t41,
501
+ itemHasLeadingVisual: t42,
501
502
  labelId,
502
503
  loading,
503
504
  position: "leading",
@@ -506,52 +507,52 @@ const UnwrappedItem = (t0, forwardedRef) => {
506
507
  $[97] = labelId;
507
508
  $[98] = loading;
508
509
  $[99] = slots.leadingVisual;
509
- $[100] = t40;
510
- $[101] = t41;
511
- $[102] = t42;
512
- } else t42 = $[102];
513
- const t43 = !!slots.description;
514
- let t44;
510
+ $[100] = t41;
511
+ $[101] = t42;
512
+ $[102] = t43;
513
+ } else t43 = $[102];
514
+ const t44 = !!slots.description;
515
+ let t45;
515
516
  if ($[103] !== inactive || $[104] !== loading) {
516
- t44 = loading === true && !inactive && /*#__PURE__*/ jsx(VisuallyHidden, { children: "Loading" });
517
+ t45 = loading === true && !inactive && /*#__PURE__*/ jsx(VisuallyHidden, { children: "Loading" });
517
518
  $[103] = inactive;
518
519
  $[104] = loading;
519
- $[105] = t44;
520
- } else t44 = $[105];
521
- let t45;
522
- if ($[106] !== childrenWithoutSlots || $[107] !== labelId || $[108] !== t44) {
523
- t45 = /*#__PURE__*/ jsxs("span", {
520
+ $[105] = t45;
521
+ } else t45 = $[105];
522
+ let t46;
523
+ if ($[106] !== childrenWithoutSlots || $[107] !== labelId || $[108] !== t45) {
524
+ t46 = /*#__PURE__*/ jsxs("span", {
524
525
  id: labelId,
525
526
  className: ActionList_module_css_default.ItemLabel,
526
527
  "data-component": "ActionList.Item.Label",
527
- children: [childrenWithoutSlots, t44]
528
+ children: [childrenWithoutSlots, t45]
528
529
  });
529
530
  $[106] = childrenWithoutSlots;
530
531
  $[107] = labelId;
531
- $[108] = t44;
532
- $[109] = t45;
533
- } else t45 = $[109];
534
- let t46;
535
- if ($[110] !== descriptionVariant || $[111] !== slots.description || $[112] !== t43 || $[113] !== t45) {
536
- t46 = /*#__PURE__*/ jsxs(ConditionalWrapper, {
537
- if: t43,
532
+ $[108] = t45;
533
+ $[109] = t46;
534
+ } else t46 = $[109];
535
+ let t47;
536
+ if ($[110] !== descriptionVariant || $[111] !== slots.description || $[112] !== t44 || $[113] !== t46) {
537
+ t47 = /*#__PURE__*/ jsxs(ConditionalWrapper, {
538
+ if: t44,
538
539
  className: ActionList_module_css_default.ItemDescriptionWrap,
539
540
  "data-description-variant": descriptionVariant,
540
- children: [t45, slots.description]
541
+ children: [t46, slots.description]
541
542
  });
542
543
  $[110] = descriptionVariant;
543
544
  $[111] = slots.description;
544
- $[112] = t43;
545
- $[113] = t45;
546
- $[114] = t46;
547
- } else t46 = $[114];
548
- const t47 = showInactiveIndicator ? inactiveText : void 0;
549
- const t48 = Boolean(slots.leadingVisual);
550
- let t49;
551
- if ($[115] !== labelId || $[116] !== loading || $[117] !== t47 || $[118] !== t48 || $[119] !== trailingVisual) {
552
- t49 = /*#__PURE__*/ jsx(VisualOrIndicator, {
553
- inactiveText: t47,
554
- itemHasLeadingVisual: t48,
545
+ $[112] = t44;
546
+ $[113] = t46;
547
+ $[114] = t47;
548
+ } else t47 = $[114];
549
+ const t48 = showInactiveIndicator ? inactiveText : void 0;
550
+ const t49 = Boolean(slots.leadingVisual);
551
+ let t50;
552
+ if ($[115] !== labelId || $[116] !== loading || $[117] !== t48 || $[118] !== t49 || $[119] !== trailingVisual) {
553
+ t50 = /*#__PURE__*/ jsx(VisualOrIndicator, {
554
+ inactiveText: t48,
555
+ itemHasLeadingVisual: t49,
555
556
  labelId,
556
557
  loading,
557
558
  position: "trailing",
@@ -559,14 +560,14 @@ const UnwrappedItem = (t0, forwardedRef) => {
559
560
  });
560
561
  $[115] = labelId;
561
562
  $[116] = loading;
562
- $[117] = t47;
563
- $[118] = t48;
563
+ $[117] = t48;
564
+ $[118] = t49;
564
565
  $[119] = trailingVisual;
565
- $[120] = t49;
566
- } else t49 = $[120];
567
- let t50;
566
+ $[120] = t50;
567
+ } else t50 = $[120];
568
+ let t51;
568
569
  if ($[121] !== inactiveText || $[122] !== inactiveWarningId || $[123] !== showInactiveIndicator) {
569
- t50 = !showInactiveIndicator && inactiveText ? /*#__PURE__*/ jsx("span", {
570
+ t51 = !showInactiveIndicator && inactiveText ? /*#__PURE__*/ jsx("span", {
570
571
  className: ActionList_module_css_default.InactiveWarning,
571
572
  id: inactiveWarningId,
572
573
  children: inactiveText
@@ -574,74 +575,74 @@ const UnwrappedItem = (t0, forwardedRef) => {
574
575
  $[121] = inactiveText;
575
576
  $[122] = inactiveWarningId;
576
577
  $[123] = showInactiveIndicator;
577
- $[124] = t50;
578
- } else t50 = $[124];
579
- let t51;
580
- if ($[125] !== t46 || $[126] !== t49 || $[127] !== t50) {
581
- t51 = /*#__PURE__*/ jsxs("span", {
578
+ $[124] = t51;
579
+ } else t51 = $[124];
580
+ let t52;
581
+ if ($[125] !== t47 || $[126] !== t50 || $[127] !== t51) {
582
+ t52 = /*#__PURE__*/ jsxs("span", {
582
583
  className: ActionList_module_css_default.ActionListSubContent,
583
584
  "data-component": "ActionList.Item--DividerContainer",
584
585
  children: [
585
- t46,
586
- t49,
587
- t50
586
+ t47,
587
+ t50,
588
+ t51
588
589
  ]
589
590
  });
590
- $[125] = t46;
591
- $[126] = t49;
592
- $[127] = t50;
593
- $[128] = t51;
594
- } else t51 = $[128];
595
- let t52;
596
- if ($[129] !== t39 || $[130] !== t42 || $[131] !== t51) {
597
- t52 = /*#__PURE__*/ jsxs(TooltipContext.Provider, {
598
- value: t37,
591
+ $[125] = t47;
592
+ $[126] = t50;
593
+ $[127] = t51;
594
+ $[128] = t52;
595
+ } else t52 = $[128];
596
+ let t53;
597
+ if ($[129] !== t40 || $[130] !== t43 || $[131] !== t52) {
598
+ t53 = /*#__PURE__*/ jsxs(TooltipContext.Provider, {
599
+ value: t38,
599
600
  children: [
600
- t38,
601
601
  t39,
602
- t42,
603
- t51
602
+ t40,
603
+ t43,
604
+ t52
604
605
  ]
605
606
  });
606
- $[129] = t39;
607
- $[130] = t42;
608
- $[131] = t51;
609
- $[132] = t52;
610
- } else t52 = $[132];
611
- let t53;
612
- if ($[133] !== ItemWrapper || $[134] !== forwardedRef || $[135] !== size || $[136] !== t52 || $[137] !== wrapperProps) {
613
- t53 = /*#__PURE__*/ jsx(ItemWrapper, {
607
+ $[129] = t40;
608
+ $[130] = t43;
609
+ $[131] = t52;
610
+ $[132] = t53;
611
+ } else t53 = $[132];
612
+ let t54;
613
+ if ($[133] !== ItemWrapper || $[134] !== size || $[135] !== t37 || $[136] !== t53 || $[137] !== wrapperProps) {
614
+ t54 = /*#__PURE__*/ jsx(ItemWrapper, {
614
615
  ...wrapperProps,
615
616
  className: ActionList_module_css_default.ActionListContent,
616
617
  "data-size": size,
617
- ref: forwardedRef,
618
- children: t52
618
+ ref: t37,
619
+ children: t53
619
620
  });
620
621
  $[133] = ItemWrapper;
621
- $[134] = forwardedRef;
622
- $[135] = size;
623
- $[136] = t52;
622
+ $[134] = size;
623
+ $[135] = t37;
624
+ $[136] = t53;
624
625
  $[137] = wrapperProps;
625
- $[138] = t53;
626
- } else t53 = $[138];
627
- let t54;
628
- if ($[139] !== buttonSemantics || $[140] !== forwardedRef || $[141] !== t36 || $[142] !== t53) {
629
- t54 = /*#__PURE__*/ jsx(ConditionalTooltip, {
626
+ $[138] = t54;
627
+ } else t54 = $[138];
628
+ let t55;
629
+ if ($[139] !== buttonSemantics || $[140] !== forwardedRef || $[141] !== t36 || $[142] !== t54) {
630
+ t55 = /*#__PURE__*/ jsx(ConditionalTooltip, {
630
631
  ref: forwardedRef,
631
632
  text: t36,
632
633
  enabled: buttonSemantics,
633
- children: t53
634
+ children: t54
634
635
  });
635
636
  $[139] = buttonSemantics;
636
637
  $[140] = forwardedRef;
637
638
  $[141] = t36;
638
- $[142] = t53;
639
- $[143] = t54;
640
- } else t54 = $[143];
641
- const t55 = !inactive && !loading && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction;
642
- let t56;
643
- if ($[144] !== containerProps || $[145] !== slots.subItem || $[146] !== t26 || $[147] !== t27 || $[148] !== t28 || $[149] !== t29 || $[150] !== t30 || $[151] !== t31 || $[152] !== t32 || $[153] !== t33 || $[154] !== t34 || $[155] !== t35 || $[156] !== t54 || $[157] !== t55) {
644
- t56 = /*#__PURE__*/ jsxs("li", {
639
+ $[142] = t54;
640
+ $[143] = t55;
641
+ } else t55 = $[143];
642
+ const t56 = !inactive && !loading && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction;
643
+ let t57;
644
+ if ($[144] !== containerProps || $[145] !== slots.subItem || $[146] !== t26 || $[147] !== t27 || $[148] !== t28 || $[149] !== t29 || $[150] !== t30 || $[151] !== t31 || $[152] !== t32 || $[153] !== t33 || $[154] !== t34 || $[155] !== t35 || $[156] !== t55 || $[157] !== t56) {
645
+ t57 = /*#__PURE__*/ jsxs("li", {
645
646
  ...containerProps,
646
647
  ref: t26,
647
648
  "data-component": "ActionList.Item",
@@ -655,8 +656,8 @@ const UnwrappedItem = (t0, forwardedRef) => {
655
656
  "data-trailing-action-loading": t34,
656
657
  className: t35,
657
658
  children: [
658
- t54,
659
659
  t55,
660
+ t56,
660
661
  slots.subItem
661
662
  ]
662
663
  });
@@ -672,21 +673,21 @@ const UnwrappedItem = (t0, forwardedRef) => {
672
673
  $[153] = t33;
673
674
  $[154] = t34;
674
675
  $[155] = t35;
675
- $[156] = t54;
676
- $[157] = t55;
677
- $[158] = t56;
678
- } else t56 = $[158];
679
- let t57;
680
- if ($[159] !== itemContextValue || $[160] !== t56) {
681
- t57 = /*#__PURE__*/ jsx(ItemContext.Provider, {
676
+ $[156] = t55;
677
+ $[157] = t56;
678
+ $[158] = t57;
679
+ } else t57 = $[158];
680
+ let t58;
681
+ if ($[159] !== itemContextValue || $[160] !== t57) {
682
+ t58 = /*#__PURE__*/ jsx(ItemContext.Provider, {
682
683
  value: itemContextValue,
683
- children: t56
684
+ children: t57
684
685
  });
685
686
  $[159] = itemContextValue;
686
- $[160] = t56;
687
- $[161] = t57;
688
- } else t57 = $[161];
689
- return t57;
687
+ $[160] = t57;
688
+ $[161] = t58;
689
+ } else t58 = $[161];
690
+ return t58;
690
691
  };
691
692
  const Item = Object.assign(fixedForwardRef(UnwrappedItem), {
692
693
  displayName: "ActionList.Item",
package/dist/AvatarStack/{AvatarStack-e6a99916.css → AvatarStack-937ec7c1.css} RENAMED
@@ -1,2 +1,2 @@
1
- .prc-AvatarStack-AvatarStack-vkIK2{--avatar-border-width:1px;--mask-size:calc(100% + var(--avatar-border-width)*2);--mask-start:-1;--opacity-step:15%;display:flex;height:var(--avatar-stack-size);isolation:isolate;min-width:var(--avatar-stack-size);position:relative}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]){--overlap-size:calc(var(--avatar-stack-size)*0.55);--overlap-size-avatar-three-plus:calc(var(--avatar-stack-size)*0.85)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=stack]){--overlap-size:calc(var(--avatar-stack-size)*0.55);--overlap-size-avatar-three-plus:calc(var(--avatar-stack-size)*0.55)}@media screen and (max-width:calc(48rem - 0.02px)){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-narrow)}}@media screen and (min-width:48rem){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-regular)}}@media screen and (min-width:87.5rem){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-wide)}}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=circle]) .prc-AvatarStack-AvatarItem-70eW3:where([data-component=Avatar]){box-shadow:0 0 0 var(--avatar-border-width) var(--avatar-borderColor,#1f232826)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3{box-shadow:1px 0 #000}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=square][data-align-right]) .prc-AvatarStack-AvatarItem-70eW3{box-shadow:-1px 0 #000}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="2"]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size))}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3"][data-variant=cascade]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size) + var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3"][data-variant=stack]){min-width:calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3+"][data-variant=cascade]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3+"][data-variant=stack]){min-width:calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*3);--overlap-size:var(--overlap-size-avatar-three-plus)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-align-right]){--mask-start:1;direction:rtl}.prc-AvatarStack-AvatarStackBody-JFK4u{display:flex;position:absolute}.prc-AvatarStack-AvatarStackBody-JFK4u:where([data-disable-expand]){position:relative}.prc-AvatarStack-AvatarItem-70eW3{--avatarSize-regular:var(--avatar-stack-size);display:flex;flex-shrink:0;height:var(--avatar-stack-size);overflow:hidden;position:relative;transition:margin .2s ease-in-out,opacity .2s ease-in-out,mask-position .2s ease-in-out,mask-size .2s ease-in-out;width:var(--avatar-stack-size)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=circle]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:0 0 0 var(--avatar-border-width) transparent}.prc-AvatarStack-AvatarItem-70eW3:not([data-component=Avatar]):not(:has([data-square])){border-radius:50%}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:1px 0 #fff}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square][data-align-right]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:-1px 0 #fff}.prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}.prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){margin-inline-start:calc(var(--overlap-size)*-1);mask-composite:exclude;mask-position:calc((var(--avatar-stack-size) - var(--overlap-size))*var(--mask-start) - var(--avatar-border-width)) center,0 0;mask-repeat:no-repeat,no-repeat;mask-size:var(--mask-size) var(--mask-size),auto;padding:.1px}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=circle]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){mask-image:radial-gradient(at 50% 50%,#000 70%,transparent 71%),linear-gradient(#000 0 0)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){mask-image:linear-gradient(at 50% 50%,#000 70%,transparent 71%),linear-gradient(#000 0 0)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+3){--overlap-size:var(--overlap-size-avatar-three-plus);opacity:calc(100% - var(--opacity-step)*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+4){opacity:calc(100% - var(--opacity-step)*3)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+5){opacity:calc(100% - var(--opacity-step)*4)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:first-child{z-index:5}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(2){z-index:4}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(3){z-index:3}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(4){z-index:2}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(5){z-index:1}.prc-AvatarStack-AvatarItem-70eW3:nth-child(n+6){opacity:0;position:absolute;visibility:hidden}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within,.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover{width:auto}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within .prc-AvatarStack-AvatarItem-70eW3{--mask-size:100%;margin-inline-start:var(--base-size-4,.25rem);mask-position:calc(var(--avatar-stack-size)*var(--mask-start)) center,0 0;opacity:1;position:relative;visibility:visible}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover .prc-AvatarStack-AvatarItem-70eW3{--mask-size:100%;margin-inline-start:var(--base-size-4,.25rem);mask-position:calc(var(--avatar-stack-size)*var(--mask-start)) center,0 0;opacity:1;position:relative;visibility:visible}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover .prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within .prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}
2
- /*# sourceMappingURL=AvatarStack-e6a99916.css.map */
1
+ .prc-AvatarStack-AvatarStack-vkIK2{--avatar-border-width:1px;--mask-size:calc(100% + var(--avatar-border-width)*2);--mask-start:-1;--opacity-step:15%;display:flex;height:var(--avatar-stack-size);isolation:isolate;min-width:var(--avatar-stack-size);position:relative}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]){--overlap-size:calc(var(--avatar-stack-size)*0.55);--overlap-size-avatar-three-plus:calc(var(--avatar-stack-size)*0.85)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=stack]){--overlap-size:calc(var(--avatar-stack-size)*0.55);--overlap-size-avatar-three-plus:calc(var(--avatar-stack-size)*0.55)}@media screen and (max-width:calc(48rem - 0.02px)){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-narrow)}}@media screen and (min-width:48rem){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-regular)}}@media screen and (min-width:87.5rem){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-wide)}}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=circle]) .prc-AvatarStack-AvatarItem-70eW3:where([data-component=Avatar]){box-shadow:0 0 0 var(--avatar-border-width) var(--avatar-borderColor,#1f232826)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3{box-shadow:1px 0 #000}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=square][data-align-right]) .prc-AvatarStack-AvatarItem-70eW3{box-shadow:-1px 0 #000}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="2"]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size))}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3"][data-variant=cascade]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size) + var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3"][data-variant=stack]){min-width:calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3+"][data-variant=cascade]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3+"][data-variant=stack]){min-width:calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*3);--overlap-size:var(--overlap-size-avatar-three-plus)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-align-right]){--mask-start:1;direction:rtl}.prc-AvatarStack-AvatarStackBody-JFK4u{display:flex;position:absolute}.prc-AvatarStack-AvatarStackBody-JFK4u:where([data-disable-expand]){position:relative}.prc-AvatarStack-AvatarItem-70eW3{--avatarSize-regular:var(--avatar-stack-size);display:flex;flex-shrink:0;height:var(--avatar-stack-size);overflow:hidden;position:relative;transition:margin .2s ease-in-out,opacity .2s ease-in-out,mask-position .2s ease-in-out,mask-size .2s ease-in-out;width:var(--avatar-stack-size)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=circle]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:0 0 0 var(--avatar-border-width) transparent}.prc-AvatarStack-AvatarItem-70eW3:not([data-component=Avatar]):not(:has([data-square])){border-radius:50%}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:1px 0 #fff}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square][data-align-right]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:-1px 0 #fff}.prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}.prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){margin-inline-start:calc(var(--overlap-size)*-1);mask-composite:exclude;mask-position:calc((var(--avatar-stack-size) - var(--overlap-size))*var(--mask-start) - var(--avatar-border-width)) center,0 0;mask-repeat:no-repeat,no-repeat;mask-size:var(--mask-size) var(--mask-size),auto;padding:.1px}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=circle]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){mask-image:radial-gradient(at 50% 50%,#000 70%,transparent 71%),linear-gradient(#000 0 0)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){mask-image:linear-gradient(at 50% 50%,#000 70%,transparent 71%),linear-gradient(#000 0 0)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+3){--overlap-size:var(--overlap-size-avatar-three-plus);opacity:calc(100% - var(--opacity-step)*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+4){opacity:calc(100% - var(--opacity-step)*3)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+5){opacity:calc(100% - var(--opacity-step)*4)}.prc-AvatarStack-AvatarItem-70eW3:first-child{z-index:5}.prc-AvatarStack-AvatarItem-70eW3:nth-child(2){z-index:4}.prc-AvatarStack-AvatarItem-70eW3:nth-child(3){z-index:3}.prc-AvatarStack-AvatarItem-70eW3:nth-child(4){z-index:2}.prc-AvatarStack-AvatarItem-70eW3:nth-child(5){z-index:1}.prc-AvatarStack-AvatarItem-70eW3:nth-child(n+6){opacity:0;position:absolute;visibility:hidden}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within,.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover{width:auto}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within .prc-AvatarStack-AvatarItem-70eW3{--mask-size:100%;margin-inline-start:var(--base-size-4,.25rem);mask-position:calc(var(--avatar-stack-size)*var(--mask-start)) center,0 0;opacity:1;position:relative;visibility:visible}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover .prc-AvatarStack-AvatarItem-70eW3{--mask-size:100%;margin-inline-start:var(--base-size-4,.25rem);mask-position:calc(var(--avatar-stack-size)*var(--mask-start)) center,0 0;opacity:1;position:relative;visibility:visible}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover .prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within .prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}
2
+ /*# sourceMappingURL=AvatarStack-937ec7c1.css.map */
package/dist/AvatarStack/{AvatarStack-e6a99916.css.map → AvatarStack-937ec7c1.css.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/AvatarStack/AvatarStack.module.css.js"],"names":[],"mappings":"AACA,mCACE,yBAA0B,CAC1B,qDAA0D,CAC1D,eAAgB,CAChB,kBAAmB,CAGnB,YAAa,CAEb,+BAAgC,CAChC,iBAAkB,CAFlB,kCAAmC,CAFnC,iBA2GF,CArGE,iEACE,kDAAqD,CACrD,oEACF,CAEA,+DACE,kDAAqD,CACrD,oEACF,CAGE,mDADF,4DAEI,2CAUJ,CATE,CAEA,oCALF,4DAMI,4CAMJ,CALE,CAEA,sCATF,4DAUI,yCAEJ,CADE,CAIA,sJAEE,+EACF,CAGF,uHAEE,qBACF,CAEA,yIAEE,sBACF,CAEA,kEAME,yFACF,CAEA,wFAOE,4JAIF,CAEA,sFAME,+GACF,CAEA,yFAOE,gKAIF,CAEA,uFAME,+GAAkH,CAElH,oDACF,CAEA,6DACE,cAAe,CAEf,aACF,CAGF,uCAEE,YAAa,CADb,iBAMF,CAHE,oEACE,iBACF,CAGF,kCACE,6CAA8C,CAG9C,YAAa,CAIb,aAAc,CAFd,+BAAgC,CAChC,eAAgB,CAJhB,iBAAkB,CAMlB,iHAI4B,CAR5B,8BAqHF,CA1GE,mGAEE,uDACF,CAGA,wFACE,iBACF,CAGA,mGAEE,qBACF,CAGA,qHAEE,sBACF,CAEA,8CACE,qBACF,CAEA,iDAEE,gDAAmD,CAKnD,sBAAuB,CAQvB,8HAEK,CAdL,+BAAiC,CACjC,gDAEM,CAeN,YACF,CAGA,+GACE,yFACF,CAGA,+GAEE,yFACF,CAGA,kHACE,oDAAqD,CAGrD,0CACF,CAGA,kHAEE,0CACF,CAGA,kHAEE,0CACF,CAEA,4GACE,SACF,CAEA,6GACE,SACF,CAEA,6GACE,SACF,CAEA,6GACE,SACF,CAEA,6GACE,SACF,CAEA,iDAGE,SAAU,CAFV,iBAAkB,CAClB,iBAEF,CAGF,uJAEE,UAuBF,CArBE,iHACE,gBAAiB,CAGjB,6CAAuC,CASvC,yEAEK,CATL,SAAU,CAHV,iBAAkB,CAElB,kBAeF,CApBA,0GACE,gBAAiB,CAGjB,6CAAuC,CASvC,yEAEK,CATL,SAAU,CAHV,iBAAkB,CAElB,kBAeF,CAHE,sHACE,qBACF,CAFA,6HACE,qBACF","file":"AvatarStack-e6a99916.css","sourcesContent":["/* stylelint-disable selector-max-specificity */\n.AvatarStack {\n --avatar-border-width: 1px;\n --mask-size: calc(100% + (var(--avatar-border-width) * 2));\n --mask-start: -1;\n --opacity-step: 15%;\n\n position: relative;\n display: flex;\n min-width: var(--avatar-stack-size);\n height: var(--avatar-stack-size);\n isolation: isolate;\n\n &:where([data-variant='cascade']) {\n --overlap-size: calc(var(--avatar-stack-size) * 0.55);\n --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.85);\n }\n\n &:where([data-variant='stack']) {\n --overlap-size: calc(var(--avatar-stack-size) * 0.55);\n --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.55);\n }\n\n &:where([data-responsive]) {\n @media screen and (--viewportRange-narrow) {\n --avatar-stack-size: var(--stackSize-narrow);\n }\n\n @media screen and (--viewportRange-regular) {\n --avatar-stack-size: var(--stackSize-regular);\n }\n\n @media screen and (--viewportRange-wide) {\n --avatar-stack-size: var(--stackSize-wide);\n }\n }\n\n &:where([data-avatar-count='1'][data-shape='circle']) {\n .AvatarItem:where([data-component='Avatar']) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor);\n }\n }\n\n &:where([data-avatar-count='1'][data-shape='square']) .AvatarItem {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 1px 0 rgb(0, 0, 0, 1);\n }\n\n &:where([data-avatar-count='1'][data-shape='square'][data-align-right]) .AvatarItem {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: -1px 0 rgb(0, 0, 0, 1);\n }\n\n &:where([data-avatar-count='2']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)));\n }\n\n &:where([data-avatar-count='3'][data-variant='cascade']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n plus the visible part of the 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)\n */\n min-width: calc(\n var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))\n );\n }\n\n &:where([data-avatar-count='3'][data-variant='stack']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar & 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 2\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2);\n }\n\n &:where([data-avatar-count='3+'][data-variant='cascade']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n plus the visible part of the 3rd AND 4th avatar ➡️ (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n */\n min-width: calc(\n var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n );\n }\n\n &:where([data-avatar-count='3+'][data-variant='stack']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd to 4th avatars ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 3\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 3);\n\n --overlap-size: var(--overlap-size-avatar-three-plus);\n }\n\n &:where([data-align-right]) {\n --mask-start: 1;\n\n direction: rtl;\n }\n}\n\n.AvatarStackBody {\n position: absolute;\n display: flex;\n\n &:where([data-disable-expand]) {\n position: relative;\n }\n}\n\n.AvatarItem {\n --avatarSize-regular: var(--avatar-stack-size);\n\n position: relative;\n display: flex;\n width: var(--avatar-stack-size);\n height: var(--avatar-stack-size);\n overflow: hidden;\n flex-shrink: 0;\n transition:\n margin 0.2s ease-in-out,\n opacity 0.2s ease-in-out,\n mask-position 0.2s ease-in-out,\n mask-size 0.2s ease-in-out;\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='circle']) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 0 0 var(--avatar-border-width) transparent;\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:not([data-component='Avatar']):not(:has([data-square])) {\n border-radius: 50%;\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='square']) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 1px 0 rgb(255, 255, 255, 1);\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='square'][data-align-right]) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: -1px 0 rgb(255, 255, 255, 1);\n }\n\n &:first-child {\n margin-inline-start: 0;\n }\n\n &:nth-child(n + 2) {\n /* stylelint-disable-next-line primer/spacing */\n margin-inline-start: calc(var(--overlap-size) * -1);\n mask-repeat: no-repeat, no-repeat;\n mask-size:\n var(--mask-size) var(--mask-size),\n auto;\n mask-composite: exclude;\n\n /*\n HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n width of the visible part of the avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n subtract the avatar border width ➡️ var(--avatar-border-width)\n */\n mask-position:\n calc((var(--avatar-stack-size) - var(--overlap-size)) * var(--mask-start) - var(--avatar-border-width)) center,\n 0 0;\n\n /* HACK: This padding fixes a weird rendering bug where a tiiiiny outline is visible at the edges of the element */\n /* stylelint-disable-next-line primer/spacing */\n padding: 0.1px;\n }\n\n /* Circular mask */\n .AvatarStack:where([data-shape='circle']) &:nth-child(n + 2) {\n mask-image: radial-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);\n }\n\n /* Square mask */\n .AvatarStack:where([data-shape='square']) &:nth-child(n + 2) {\n /* stylelint-disable-next-line declaration-property-value-no-unknown */\n mask-image: linear-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);\n }\n\n /* Cascade variant override for nth-child(n + 3) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 3) {\n --overlap-size: var(--overlap-size-avatar-three-plus);\n\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 2 * var(--opacity-step));\n }\n\n /* Cascade variant override for nth-child(n + 4) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 4) {\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 3 * var(--opacity-step));\n }\n\n /* Cascade variant override for nth-child(n + 5) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 5) {\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 4 * var(--opacity-step));\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(1) {\n z-index: 5;\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(2) {\n z-index: 4;\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(3) {\n z-index: 3;\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(4) {\n z-index: 2;\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(5) {\n z-index: 1;\n }\n\n &:nth-child(n + 6) {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n }\n}\n\n.AvatarStackBody:not([data-disable-expand]):hover,\n.AvatarStackBody:not([data-disable-expand]):focus-within {\n width: auto;\n\n .AvatarItem {\n --mask-size: 100%; /* reset size of the mask to prevent unintentionally clipping due to the additional size created by the border width */\n\n position: relative;\n margin-inline-start: var(--base-size-4);\n visibility: visible;\n opacity: 1;\n\n /*\n HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n width of the full avatar ➡️ var(--avatar-stack-size)\n multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n */\n mask-position:\n calc(var(--avatar-stack-size) * var(--mask-start)) center,\n 0 0;\n\n &:first-child {\n margin-inline-start: 0;\n }\n }\n}\n"]}
1
+ {"version":3,"sources":["../src/AvatarStack/AvatarStack.module.css.js"],"names":[],"mappings":"AACA,mCACE,yBAA0B,CAC1B,qDAA0D,CAC1D,eAAgB,CAChB,kBAAmB,CAGnB,YAAa,CAEb,+BAAgC,CAChC,iBAAkB,CAFlB,kCAAmC,CAFnC,iBA2GF,CArGE,iEACE,kDAAqD,CACrD,oEACF,CAEA,+DACE,kDAAqD,CACrD,oEACF,CAGE,mDADF,4DAEI,2CAUJ,CATE,CAEA,oCALF,4DAMI,4CAMJ,CALE,CAEA,sCATF,4DAUI,yCAEJ,CADE,CAIA,sJAEE,+EACF,CAGF,uHAEE,qBACF,CAEA,yIAEE,sBACF,CAEA,kEAME,yFACF,CAEA,wFAOE,4JAIF,CAEA,sFAME,+GACF,CAEA,yFAOE,gKAIF,CAEA,uFAME,+GAAkH,CAElH,oDACF,CAEA,6DACE,cAAe,CAEf,aACF,CAGF,uCAEE,YAAa,CADb,iBAMF,CAHE,oEACE,iBACF,CAGF,kCACE,6CAA8C,CAG9C,YAAa,CAIb,aAAc,CAFd,+BAAgC,CAChC,eAAgB,CAJhB,iBAAkB,CAMlB,iHAI4B,CAR5B,8BAqHF,CA1GE,mGAEE,uDACF,CAGA,wFACE,iBACF,CAGA,mGAEE,qBACF,CAGA,qHAEE,sBACF,CAEA,8CACE,qBACF,CAEA,iDAEE,gDAAmD,CAKnD,sBAAuB,CAQvB,8HAEK,CAdL,+BAAiC,CACjC,gDAEM,CAeN,YACF,CAGA,+GACE,yFACF,CAGA,+GAEE,yFACF,CAGA,kHACE,oDAAqD,CAGrD,0CACF,CAGA,kHAEE,0CACF,CAGA,kHAEE,0CACF,CAEA,8CACE,SACF,CAEA,+CACE,SACF,CAEA,+CACE,SACF,CAEA,+CACE,SACF,CAEA,+CACE,SACF,CAEA,iDAGE,SAAU,CAFV,iBAAkB,CAClB,iBAEF,CAGF,uJAEE,UAuBF,CArBE,iHACE,gBAAiB,CAGjB,6CAAuC,CASvC,yEAEK,CATL,SAAU,CAHV,iBAAkB,CAElB,kBAeF,CApBA,0GACE,gBAAiB,CAGjB,6CAAuC,CASvC,yEAEK,CATL,SAAU,CAHV,iBAAkB,CAElB,kBAeF,CAHE,sHACE,qBACF,CAFA,6HACE,qBACF","file":"AvatarStack-937ec7c1.css","sourcesContent":["/* stylelint-disable selector-max-specificity */\n.AvatarStack {\n --avatar-border-width: 1px;\n --mask-size: calc(100% + (var(--avatar-border-width) * 2));\n --mask-start: -1;\n --opacity-step: 15%;\n\n position: relative;\n display: flex;\n min-width: var(--avatar-stack-size);\n height: var(--avatar-stack-size);\n isolation: isolate;\n\n &:where([data-variant='cascade']) {\n --overlap-size: calc(var(--avatar-stack-size) * 0.55);\n --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.85);\n }\n\n &:where([data-variant='stack']) {\n --overlap-size: calc(var(--avatar-stack-size) * 0.55);\n --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.55);\n }\n\n &:where([data-responsive]) {\n @media screen and (--viewportRange-narrow) {\n --avatar-stack-size: var(--stackSize-narrow);\n }\n\n @media screen and (--viewportRange-regular) {\n --avatar-stack-size: var(--stackSize-regular);\n }\n\n @media screen and (--viewportRange-wide) {\n --avatar-stack-size: var(--stackSize-wide);\n }\n }\n\n &:where([data-avatar-count='1'][data-shape='circle']) {\n .AvatarItem:where([data-component='Avatar']) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor);\n }\n }\n\n &:where([data-avatar-count='1'][data-shape='square']) .AvatarItem {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 1px 0 rgb(0, 0, 0, 1);\n }\n\n &:where([data-avatar-count='1'][data-shape='square'][data-align-right]) .AvatarItem {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: -1px 0 rgb(0, 0, 0, 1);\n }\n\n &:where([data-avatar-count='2']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)));\n }\n\n &:where([data-avatar-count='3'][data-variant='cascade']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n plus the visible part of the 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)\n */\n min-width: calc(\n var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))\n );\n }\n\n &:where([data-avatar-count='3'][data-variant='stack']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar & 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 2\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2);\n }\n\n &:where([data-avatar-count='3+'][data-variant='cascade']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n plus the visible part of the 3rd AND 4th avatar ➡️ (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n */\n min-width: calc(\n var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n );\n }\n\n &:where([data-avatar-count='3+'][data-variant='stack']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd to 4th avatars ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 3\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 3);\n\n --overlap-size: var(--overlap-size-avatar-three-plus);\n }\n\n &:where([data-align-right]) {\n --mask-start: 1;\n\n direction: rtl;\n }\n}\n\n.AvatarStackBody {\n position: absolute;\n display: flex;\n\n &:where([data-disable-expand]) {\n position: relative;\n }\n}\n\n.AvatarItem {\n --avatarSize-regular: var(--avatar-stack-size);\n\n position: relative;\n display: flex;\n width: var(--avatar-stack-size);\n height: var(--avatar-stack-size);\n overflow: hidden;\n flex-shrink: 0;\n transition:\n margin 0.2s ease-in-out,\n opacity 0.2s ease-in-out,\n mask-position 0.2s ease-in-out,\n mask-size 0.2s ease-in-out;\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='circle']) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 0 0 var(--avatar-border-width) transparent;\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:not([data-component='Avatar']):not(:has([data-square])) {\n border-radius: 50%;\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='square']) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 1px 0 rgb(255, 255, 255, 1);\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='square'][data-align-right]) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: -1px 0 rgb(255, 255, 255, 1);\n }\n\n &:first-child {\n margin-inline-start: 0;\n }\n\n &:nth-child(n + 2) {\n /* stylelint-disable-next-line primer/spacing */\n margin-inline-start: calc(var(--overlap-size) * -1);\n mask-repeat: no-repeat, no-repeat;\n mask-size:\n var(--mask-size) var(--mask-size),\n auto;\n mask-composite: exclude;\n\n /*\n HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n width of the visible part of the avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n subtract the avatar border width ➡️ var(--avatar-border-width)\n */\n mask-position:\n calc((var(--avatar-stack-size) - var(--overlap-size)) * var(--mask-start) - var(--avatar-border-width)) center,\n 0 0;\n\n /* HACK: This padding fixes a weird rendering bug where a tiiiiny outline is visible at the edges of the element */\n /* stylelint-disable-next-line primer/spacing */\n padding: 0.1px;\n }\n\n /* Circular mask */\n .AvatarStack:where([data-shape='circle']) &:nth-child(n + 2) {\n mask-image: radial-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);\n }\n\n /* Square mask */\n .AvatarStack:where([data-shape='square']) &:nth-child(n + 2) {\n /* stylelint-disable-next-line declaration-property-value-no-unknown */\n mask-image: linear-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);\n }\n\n /* Cascade variant override for nth-child(n + 3) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 3) {\n --overlap-size: var(--overlap-size-avatar-three-plus);\n\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 2 * var(--opacity-step));\n }\n\n /* Cascade variant override for nth-child(n + 4) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 4) {\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 3 * var(--opacity-step));\n }\n\n /* Cascade variant override for nth-child(n + 5) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 5) {\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 4 * var(--opacity-step));\n }\n\n &:nth-child(1) {\n z-index: 5;\n }\n\n &:nth-child(2) {\n z-index: 4;\n }\n\n &:nth-child(3) {\n z-index: 3;\n }\n\n &:nth-child(4) {\n z-index: 2;\n }\n\n &:nth-child(5) {\n z-index: 1;\n }\n\n &:nth-child(n + 6) {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n }\n}\n\n.AvatarStackBody:not([data-disable-expand]):hover,\n.AvatarStackBody:not([data-disable-expand]):focus-within {\n width: auto;\n\n .AvatarItem {\n --mask-size: 100%; /* reset size of the mask to prevent unintentionally clipping due to the additional size created by the border width */\n\n position: relative;\n margin-inline-start: var(--base-size-4);\n visibility: visible;\n opacity: 1;\n\n /*\n HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n width of the full avatar ➡️ var(--avatar-stack-size)\n multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n */\n mask-position:\n calc(var(--avatar-stack-size) * var(--mask-start)) center,\n 0 0;\n\n &:first-child {\n margin-inline-start: 0;\n }\n }\n}\n"]}
package/dist/AvatarStack/AvatarStack.module.css.js CHANGED
@@ -1,4 +1,4 @@
1
- import "./AvatarStack-e6a99916.css";
1
+ import "./AvatarStack-937ec7c1.css";
2
2
  //#region src/AvatarStack/AvatarStack.module.css.js
3
3
  var AvatarStack_module_css_default = {
4
4
  "AvatarStack": "prc-AvatarStack-AvatarStack-vkIK2",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.40.1-rc.1028b70d8",
4
+ "version": "38.40.1-rc.6186010d9",
5
5
  "description": "An implementation of GitHub's Primer Design System using React",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",