@primer/react 38.19.0-rc.25e0da649 → 38.19.0-rc.369db52c6
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.
- package/CHANGELOG.md +8 -2
- package/dist/ActionList/Item.js +169 -171
- package/dist/AnchoredOverlay/AnchoredOverlay.js +1 -1
- package/dist/Stack/Stack-58c33984.css +2 -0
- package/dist/Stack/Stack-58c33984.css.map +1 -0
- package/dist/Stack/Stack.d.ts +12 -2
- package/dist/Stack/Stack.d.ts.map +1 -1
- package/dist/Stack/Stack.js +89 -61
- package/dist/Stack/Stack.module.css.js +1 -1
- package/dist/hooks/useAnchoredPosition.d.ts.map +1 -1
- package/dist/hooks/useAnchoredPosition.js +47 -0
- package/generated/components.json +24 -2
- package/package.json +1 -1
- package/dist/Stack/Stack-9e7b935d.css +0 -2
- package/dist/Stack/Stack-9e7b935d.css.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,12 +4,16 @@
|
|
|
4
4
|
|
|
5
5
|
### Minor Changes
|
|
6
6
|
|
|
7
|
-
- [#7686](https://github.com/primer/react/pull/7686) [`6cd13c0`](https://github.com/primer/react/commit/6cd13c03a0293732af6d9499f1f925bf7d95d82b) Thanks [@JelloBagel](https://github.com/JelloBagel)! - StateLabel: Add new type: `archived`
|
|
8
|
-
|
|
9
7
|
- [#7677](https://github.com/primer/react/pull/7677) [`c1a81b1`](https://github.com/primer/react/commit/c1a81b178742ba547b85a3df3ed3c27bcff6b7c5) Thanks [@TylerJDev](https://github.com/TylerJDev)! - AnchoredOverlay: Add Popover API to AnchoredOverlay (behind `primer_react_css_anchor_positioning` feature flag)
|
|
10
8
|
|
|
9
|
+
- [#7697](https://github.com/primer/react/pull/7697) [`990ce7b`](https://github.com/primer/react/commit/990ce7b625bcf90ef3867e93086d0c74835a9068) Thanks [@hectahertz](https://github.com/hectahertz)! - **Stack**: Add `tight` (4px) and `cozy` (12px) spacing values to `gap` and `padding` props. Add `paddingBlock` and `paddingInline` props for directional padding control.
|
|
10
|
+
|
|
11
11
|
### Patch Changes
|
|
12
12
|
|
|
13
|
+
- [#7652](https://github.com/primer/react/pull/7652) [`5d19e2b`](https://github.com/primer/react/commit/5d19e2bb5bbd444f2e82d98eef300c221863941c) Thanks [@owenniblock](https://github.com/owenniblock)! - useAnchoredPosition: recalculate overlay position when any scrollable ancestor (or the window) is scrolled.
|
|
14
|
+
|
|
15
|
+
- [#7707](https://github.com/primer/react/pull/7707) [`6431bfe`](https://github.com/primer/react/commit/6431bfecd72e24db1dfa90b02f8a42834e63843b) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Fix anchor-name not being set on the anchor element when SelectPanel is opened in Copilot code agent.
|
|
16
|
+
|
|
13
17
|
- [#7638](https://github.com/primer/react/pull/7638) [`f04e85d`](https://github.com/primer/react/commit/f04e85df536cd6e8047f70b070bd3cf7c0961f92) Thanks [@iansan5653](https://github.com/iansan5653)! - Update internal implementations of combined refs to improve performance and add support for React 19 callback refs
|
|
14
18
|
|
|
15
19
|
- [#7695](https://github.com/primer/react/pull/7695) [`780fc3d`](https://github.com/primer/react/commit/780fc3d7b52fd0f9b63f313af6355398180a0118) Thanks [@mattcosta7](https://github.com/mattcosta7)! - perf(ThemeProvider): Reduce unnecessary renders and effect cascades
|
|
@@ -19,6 +23,8 @@
|
|
|
19
23
|
- Cache `getServerHandoff` DOM read + JSON.parse per ID (runs once, not on every call)
|
|
20
24
|
- Memoize context value object to prevent unnecessary re-renders of all consumers
|
|
21
25
|
|
|
26
|
+
- [#7706](https://github.com/primer/react/pull/7706) [`fd8910a`](https://github.com/primer/react/commit/fd8910abff851f43d19805ceaa439a9a18c4f226) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - ActionList.Item: fix inline descriptions being referenced via `aria-labelledby` instead of `aria-describedby`
|
|
27
|
+
|
|
22
28
|
## 38.18.0
|
|
23
29
|
|
|
24
30
|
### Minor Changes
|
package/dist/ActionList/Item.js
CHANGED
|
@@ -158,7 +158,7 @@ const selectableRoles = ['menuitemradio', 'menuitemcheckbox', 'option'];
|
|
|
158
158
|
const listRoleTypes = ['listbox', 'menu', 'list'];
|
|
159
159
|
const UnwrappedItem = (t0, forwardedRef) => {
|
|
160
160
|
var _slots$trailingVisual, _slots$description$pr, _slots$description;
|
|
161
|
-
const $ = c(
|
|
161
|
+
const $ = c(159);
|
|
162
162
|
let _PrivateItemWrapper;
|
|
163
163
|
let className;
|
|
164
164
|
let id;
|
|
@@ -422,41 +422,39 @@ const UnwrappedItem = (t0, forwardedRef) => {
|
|
|
422
422
|
const hasTrailingVisualSlot = Boolean(slots.trailingVisual);
|
|
423
423
|
const hasDescriptionSlot = Boolean(slots.description);
|
|
424
424
|
let parts;
|
|
425
|
-
if ($[42] !==
|
|
425
|
+
if ($[42] !== hasTrailingVisualSlot || $[43] !== labelId || $[44] !== trailingVisualId) {
|
|
426
426
|
parts = [labelId];
|
|
427
427
|
if (hasTrailingVisualSlot) {
|
|
428
428
|
parts.push(trailingVisualId);
|
|
429
429
|
}
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
$[
|
|
434
|
-
$[43] = hasDescriptionSlot;
|
|
435
|
-
$[44] = hasTrailingVisualSlot;
|
|
436
|
-
$[45] = inlineDescriptionId;
|
|
437
|
-
$[46] = labelId;
|
|
438
|
-
$[47] = trailingVisualId;
|
|
439
|
-
$[48] = parts;
|
|
430
|
+
$[42] = hasTrailingVisualSlot;
|
|
431
|
+
$[43] = labelId;
|
|
432
|
+
$[44] = trailingVisualId;
|
|
433
|
+
$[45] = parts;
|
|
440
434
|
} else {
|
|
441
|
-
parts = $[
|
|
435
|
+
parts = $[45];
|
|
442
436
|
}
|
|
443
437
|
const ariaLabelledBy = parts.join(" ");
|
|
444
438
|
let parts_0;
|
|
445
|
-
if ($[
|
|
439
|
+
if ($[46] !== blockDescriptionId || $[47] !== descriptionVariant || $[48] !== hasDescriptionSlot || $[49] !== inactiveWarningId || $[50] !== inlineDescriptionId) {
|
|
446
440
|
parts_0 = [];
|
|
447
441
|
if (hasDescriptionSlot && descriptionVariant === "block") {
|
|
448
442
|
parts_0.push(blockDescriptionId);
|
|
449
443
|
}
|
|
444
|
+
if (hasDescriptionSlot && descriptionVariant === "inline") {
|
|
445
|
+
parts_0.push(inlineDescriptionId);
|
|
446
|
+
}
|
|
450
447
|
if (inactiveWarningId) {
|
|
451
448
|
parts_0.push(inactiveWarningId);
|
|
452
449
|
}
|
|
453
|
-
$[
|
|
454
|
-
$[
|
|
455
|
-
$[
|
|
456
|
-
$[
|
|
457
|
-
$[
|
|
450
|
+
$[46] = blockDescriptionId;
|
|
451
|
+
$[47] = descriptionVariant;
|
|
452
|
+
$[48] = hasDescriptionSlot;
|
|
453
|
+
$[49] = inactiveWarningId;
|
|
454
|
+
$[50] = inlineDescriptionId;
|
|
455
|
+
$[51] = parts_0;
|
|
458
456
|
} else {
|
|
459
|
-
parts_0 = $[
|
|
457
|
+
parts_0 = $[51];
|
|
460
458
|
}
|
|
461
459
|
const ariaDescribedBy = parts_0.length > 0 ? parts_0.join(" ") : undefined;
|
|
462
460
|
const t14 = !buttonSemantics ? keyPressHandler : undefined;
|
|
@@ -465,19 +463,19 @@ const UnwrappedItem = (t0, forwardedRef) => {
|
|
|
465
463
|
const t17 = loading && !inactive ? true : undefined;
|
|
466
464
|
const t18 = focusable ? undefined : 0;
|
|
467
465
|
let t19;
|
|
468
|
-
if ($[
|
|
466
|
+
if ($[52] !== includeSelectionAttribute || $[53] !== itemSelectionAttribute || $[54] !== selected) {
|
|
469
467
|
t19 = includeSelectionAttribute && {
|
|
470
468
|
[itemSelectionAttribute]: selected
|
|
471
469
|
};
|
|
472
|
-
$[
|
|
473
|
-
$[
|
|
474
|
-
$[
|
|
475
|
-
$[
|
|
470
|
+
$[52] = includeSelectionAttribute;
|
|
471
|
+
$[53] = itemSelectionAttribute;
|
|
472
|
+
$[54] = selected;
|
|
473
|
+
$[55] = t19;
|
|
476
474
|
} else {
|
|
477
|
-
t19 = $[
|
|
475
|
+
t19 = $[55];
|
|
478
476
|
}
|
|
479
477
|
let t20;
|
|
480
|
-
if ($[
|
|
478
|
+
if ($[56] !== ariaDescribedBy || $[57] !== ariaLabelledBy || $[58] !== clickHandler || $[59] !== itemId || $[60] !== itemRole || $[61] !== t14 || $[62] !== t15 || $[63] !== t16 || $[64] !== t17 || $[65] !== t18 || $[66] !== t19) {
|
|
481
479
|
t20 = {
|
|
482
480
|
onClick: clickHandler,
|
|
483
481
|
onKeyPress: t14,
|
|
@@ -491,24 +489,24 @@ const UnwrappedItem = (t0, forwardedRef) => {
|
|
|
491
489
|
role: itemRole,
|
|
492
490
|
id: itemId
|
|
493
491
|
};
|
|
494
|
-
$[
|
|
495
|
-
$[
|
|
496
|
-
$[
|
|
497
|
-
$[
|
|
498
|
-
$[
|
|
499
|
-
$[
|
|
500
|
-
$[
|
|
501
|
-
$[
|
|
502
|
-
$[
|
|
503
|
-
$[
|
|
504
|
-
$[
|
|
505
|
-
$[
|
|
506
|
-
} else {
|
|
507
|
-
t20 = $[
|
|
492
|
+
$[56] = ariaDescribedBy;
|
|
493
|
+
$[57] = ariaLabelledBy;
|
|
494
|
+
$[58] = clickHandler;
|
|
495
|
+
$[59] = itemId;
|
|
496
|
+
$[60] = itemRole;
|
|
497
|
+
$[61] = t14;
|
|
498
|
+
$[62] = t15;
|
|
499
|
+
$[63] = t16;
|
|
500
|
+
$[64] = t17;
|
|
501
|
+
$[65] = t18;
|
|
502
|
+
$[66] = t19;
|
|
503
|
+
$[67] = t20;
|
|
504
|
+
} else {
|
|
505
|
+
t20 = $[67];
|
|
508
506
|
}
|
|
509
507
|
const menuItemProps = t20;
|
|
510
508
|
let t21;
|
|
511
|
-
if ($[
|
|
509
|
+
if ($[68] !== _PrivateItemWrapper || $[69] !== forwardedRef || $[70] !== itemRole || $[71] !== listSemantics || $[72] !== menuItemProps || $[73] !== props) {
|
|
512
510
|
t21 = _PrivateItemWrapper ? {
|
|
513
511
|
role: itemRole ? "none" : undefined,
|
|
514
512
|
...props
|
|
@@ -517,38 +515,38 @@ const UnwrappedItem = (t0, forwardedRef) => {
|
|
|
517
515
|
...props,
|
|
518
516
|
ref: forwardedRef
|
|
519
517
|
} || {};
|
|
520
|
-
$[
|
|
521
|
-
$[
|
|
522
|
-
$[
|
|
523
|
-
$[
|
|
524
|
-
$[
|
|
525
|
-
$[
|
|
526
|
-
$[
|
|
518
|
+
$[68] = _PrivateItemWrapper;
|
|
519
|
+
$[69] = forwardedRef;
|
|
520
|
+
$[70] = itemRole;
|
|
521
|
+
$[71] = listSemantics;
|
|
522
|
+
$[72] = menuItemProps;
|
|
523
|
+
$[73] = props;
|
|
524
|
+
$[74] = t21;
|
|
527
525
|
} else {
|
|
528
|
-
t21 = $[
|
|
526
|
+
t21 = $[74];
|
|
529
527
|
}
|
|
530
528
|
const containerProps = t21;
|
|
531
529
|
let t22;
|
|
532
|
-
if ($[
|
|
530
|
+
if ($[75] !== _PrivateItemWrapper || $[76] !== forwardedRef || $[77] !== listSemantics || $[78] !== menuItemProps || $[79] !== props) {
|
|
533
531
|
t22 = _PrivateItemWrapper ? menuItemProps : !listSemantics && {
|
|
534
532
|
...menuItemProps,
|
|
535
533
|
...props,
|
|
536
534
|
ref: forwardedRef
|
|
537
535
|
};
|
|
538
|
-
$[
|
|
539
|
-
$[
|
|
540
|
-
$[
|
|
541
|
-
$[
|
|
542
|
-
$[
|
|
543
|
-
$[
|
|
536
|
+
$[75] = _PrivateItemWrapper;
|
|
537
|
+
$[76] = forwardedRef;
|
|
538
|
+
$[77] = listSemantics;
|
|
539
|
+
$[78] = menuItemProps;
|
|
540
|
+
$[79] = props;
|
|
541
|
+
$[80] = t22;
|
|
544
542
|
} else {
|
|
545
|
-
t22 = $[
|
|
543
|
+
t22 = $[80];
|
|
546
544
|
}
|
|
547
545
|
const wrapperProps = t22;
|
|
548
546
|
const t23 = Boolean(inactiveText);
|
|
549
547
|
const t24 = buttonSemantics ? setTruncatedText : undefined;
|
|
550
548
|
let t25;
|
|
551
|
-
if ($[
|
|
549
|
+
if ($[81] !== blockDescriptionId || $[82] !== disabled || $[83] !== inlineDescriptionId || $[84] !== size || $[85] !== t23 || $[86] !== t24 || $[87] !== trailingVisualId || $[88] !== variant) {
|
|
552
550
|
t25 = {
|
|
553
551
|
variant,
|
|
554
552
|
size,
|
|
@@ -559,17 +557,17 @@ const UnwrappedItem = (t0, forwardedRef) => {
|
|
|
559
557
|
trailingVisualId,
|
|
560
558
|
setTruncatedText: t24
|
|
561
559
|
};
|
|
562
|
-
$[
|
|
563
|
-
$[
|
|
564
|
-
$[
|
|
565
|
-
$[
|
|
566
|
-
$[
|
|
567
|
-
$[
|
|
568
|
-
$[
|
|
569
|
-
$[
|
|
570
|
-
$[
|
|
571
|
-
} else {
|
|
572
|
-
t25 = $[
|
|
560
|
+
$[81] = blockDescriptionId;
|
|
561
|
+
$[82] = disabled;
|
|
562
|
+
$[83] = inlineDescriptionId;
|
|
563
|
+
$[84] = size;
|
|
564
|
+
$[85] = t23;
|
|
565
|
+
$[86] = t24;
|
|
566
|
+
$[87] = trailingVisualId;
|
|
567
|
+
$[88] = variant;
|
|
568
|
+
$[89] = t25;
|
|
569
|
+
} else {
|
|
570
|
+
t25 = $[89];
|
|
573
571
|
}
|
|
574
572
|
const itemContextValue = t25;
|
|
575
573
|
const t26 = listSemantics ? forwardedRef : null;
|
|
@@ -580,41 +578,41 @@ const UnwrappedItem = (t0, forwardedRef) => {
|
|
|
580
578
|
const t31 = slots.subItem ? true : undefined;
|
|
581
579
|
const t32 = slots.description ? true : false;
|
|
582
580
|
let t33;
|
|
583
|
-
if ($[
|
|
581
|
+
if ($[90] !== className) {
|
|
584
582
|
t33 = clsx(classes.ActionListItem, className);
|
|
585
|
-
$[
|
|
586
|
-
$[
|
|
583
|
+
$[90] = className;
|
|
584
|
+
$[91] = t33;
|
|
587
585
|
} else {
|
|
588
|
-
t33 = $[
|
|
586
|
+
t33 = $[91];
|
|
589
587
|
}
|
|
590
588
|
let t34;
|
|
591
589
|
let t35;
|
|
592
|
-
if ($[
|
|
590
|
+
if ($[92] === Symbol.for("react.memo_cache_sentinel")) {
|
|
593
591
|
t34 = {};
|
|
594
592
|
t35 = /*#__PURE__*/jsx("span", {
|
|
595
593
|
className: classes.Spacer
|
|
596
594
|
});
|
|
597
|
-
$[
|
|
598
|
-
$[
|
|
595
|
+
$[92] = t34;
|
|
596
|
+
$[93] = t35;
|
|
599
597
|
} else {
|
|
600
|
-
t34 = $[
|
|
601
|
-
t35 = $[
|
|
598
|
+
t34 = $[92];
|
|
599
|
+
t35 = $[93];
|
|
602
600
|
}
|
|
603
601
|
let t36;
|
|
604
|
-
if ($[
|
|
602
|
+
if ($[94] !== selected) {
|
|
605
603
|
t36 = /*#__PURE__*/jsx(Selection, {
|
|
606
604
|
selected: selected,
|
|
607
605
|
className: classes.LeadingAction
|
|
608
606
|
});
|
|
609
|
-
$[
|
|
610
|
-
$[
|
|
607
|
+
$[94] = selected;
|
|
608
|
+
$[95] = t36;
|
|
611
609
|
} else {
|
|
612
|
-
t36 = $[
|
|
610
|
+
t36 = $[95];
|
|
613
611
|
}
|
|
614
612
|
const t37 = showInactiveIndicator ? inactiveText : undefined;
|
|
615
613
|
const t38 = Boolean(slots.leadingVisual);
|
|
616
614
|
let t39;
|
|
617
|
-
if ($[
|
|
615
|
+
if ($[96] !== labelId || $[97] !== loading || $[98] !== slots.leadingVisual || $[99] !== t37 || $[100] !== t38) {
|
|
618
616
|
t39 = /*#__PURE__*/jsx(VisualOrIndicator, {
|
|
619
617
|
inactiveText: t37,
|
|
620
618
|
itemHasLeadingVisual: t38,
|
|
@@ -623,61 +621,61 @@ const UnwrappedItem = (t0, forwardedRef) => {
|
|
|
623
621
|
position: "leading",
|
|
624
622
|
children: slots.leadingVisual
|
|
625
623
|
});
|
|
626
|
-
$[
|
|
627
|
-
$[
|
|
628
|
-
$[
|
|
629
|
-
$[
|
|
630
|
-
$[
|
|
631
|
-
$[
|
|
624
|
+
$[96] = labelId;
|
|
625
|
+
$[97] = loading;
|
|
626
|
+
$[98] = slots.leadingVisual;
|
|
627
|
+
$[99] = t37;
|
|
628
|
+
$[100] = t38;
|
|
629
|
+
$[101] = t39;
|
|
632
630
|
} else {
|
|
633
|
-
t39 = $[
|
|
631
|
+
t39 = $[101];
|
|
634
632
|
}
|
|
635
633
|
const t40 = !!slots.description;
|
|
636
634
|
let t41;
|
|
637
|
-
if ($[
|
|
635
|
+
if ($[102] !== inactive || $[103] !== loading) {
|
|
638
636
|
t41 = loading === true && !inactive && /*#__PURE__*/jsx(VisuallyHidden, {
|
|
639
637
|
children: "Loading"
|
|
640
638
|
});
|
|
641
|
-
$[
|
|
642
|
-
$[
|
|
643
|
-
$[
|
|
639
|
+
$[102] = inactive;
|
|
640
|
+
$[103] = loading;
|
|
641
|
+
$[104] = t41;
|
|
644
642
|
} else {
|
|
645
|
-
t41 = $[
|
|
643
|
+
t41 = $[104];
|
|
646
644
|
}
|
|
647
645
|
let t42;
|
|
648
|
-
if ($[
|
|
646
|
+
if ($[105] !== childrenWithoutSlots || $[106] !== labelId || $[107] !== t41) {
|
|
649
647
|
t42 = /*#__PURE__*/jsxs("span", {
|
|
650
648
|
id: labelId,
|
|
651
649
|
className: classes.ItemLabel,
|
|
652
650
|
children: [childrenWithoutSlots, t41]
|
|
653
651
|
});
|
|
654
|
-
$[
|
|
655
|
-
$[
|
|
656
|
-
$[
|
|
657
|
-
$[
|
|
652
|
+
$[105] = childrenWithoutSlots;
|
|
653
|
+
$[106] = labelId;
|
|
654
|
+
$[107] = t41;
|
|
655
|
+
$[108] = t42;
|
|
658
656
|
} else {
|
|
659
|
-
t42 = $[
|
|
657
|
+
t42 = $[108];
|
|
660
658
|
}
|
|
661
659
|
let t43;
|
|
662
|
-
if ($[
|
|
660
|
+
if ($[109] !== descriptionVariant || $[110] !== slots.description || $[111] !== t40 || $[112] !== t42) {
|
|
663
661
|
t43 = /*#__PURE__*/jsxs(ConditionalWrapper, {
|
|
664
662
|
if: t40,
|
|
665
663
|
className: classes.ItemDescriptionWrap,
|
|
666
664
|
"data-description-variant": descriptionVariant,
|
|
667
665
|
children: [t42, slots.description]
|
|
668
666
|
});
|
|
669
|
-
$[
|
|
670
|
-
$[
|
|
671
|
-
$[
|
|
672
|
-
$[
|
|
673
|
-
$[
|
|
667
|
+
$[109] = descriptionVariant;
|
|
668
|
+
$[110] = slots.description;
|
|
669
|
+
$[111] = t40;
|
|
670
|
+
$[112] = t42;
|
|
671
|
+
$[113] = t43;
|
|
674
672
|
} else {
|
|
675
|
-
t43 = $[
|
|
673
|
+
t43 = $[113];
|
|
676
674
|
}
|
|
677
675
|
const t44 = showInactiveIndicator ? inactiveText : undefined;
|
|
678
676
|
const t45 = Boolean(slots.leadingVisual);
|
|
679
677
|
let t46;
|
|
680
|
-
if ($[
|
|
678
|
+
if ($[114] !== labelId || $[115] !== loading || $[116] !== t44 || $[117] !== t45 || $[118] !== trailingVisual) {
|
|
681
679
|
t46 = /*#__PURE__*/jsx(VisualOrIndicator, {
|
|
682
680
|
inactiveText: t44,
|
|
683
681
|
itemHasLeadingVisual: t45,
|
|
@@ -686,58 +684,58 @@ const UnwrappedItem = (t0, forwardedRef) => {
|
|
|
686
684
|
position: "trailing",
|
|
687
685
|
children: trailingVisual
|
|
688
686
|
});
|
|
689
|
-
$[
|
|
690
|
-
$[
|
|
691
|
-
$[
|
|
692
|
-
$[
|
|
693
|
-
$[
|
|
694
|
-
$[
|
|
687
|
+
$[114] = labelId;
|
|
688
|
+
$[115] = loading;
|
|
689
|
+
$[116] = t44;
|
|
690
|
+
$[117] = t45;
|
|
691
|
+
$[118] = trailingVisual;
|
|
692
|
+
$[119] = t46;
|
|
695
693
|
} else {
|
|
696
|
-
t46 = $[
|
|
694
|
+
t46 = $[119];
|
|
697
695
|
}
|
|
698
696
|
let t47;
|
|
699
|
-
if ($[
|
|
697
|
+
if ($[120] !== inactiveText || $[121] !== inactiveWarningId || $[122] !== showInactiveIndicator) {
|
|
700
698
|
t47 = !showInactiveIndicator && inactiveText ? /*#__PURE__*/jsx("span", {
|
|
701
699
|
className: classes.InactiveWarning,
|
|
702
700
|
id: inactiveWarningId,
|
|
703
701
|
children: inactiveText
|
|
704
702
|
}) : null;
|
|
705
|
-
$[
|
|
706
|
-
$[
|
|
707
|
-
$[
|
|
708
|
-
$[
|
|
703
|
+
$[120] = inactiveText;
|
|
704
|
+
$[121] = inactiveWarningId;
|
|
705
|
+
$[122] = showInactiveIndicator;
|
|
706
|
+
$[123] = t47;
|
|
709
707
|
} else {
|
|
710
|
-
t47 = $[
|
|
708
|
+
t47 = $[123];
|
|
711
709
|
}
|
|
712
710
|
let t48;
|
|
713
|
-
if ($[
|
|
711
|
+
if ($[124] !== t43 || $[125] !== t46 || $[126] !== t47) {
|
|
714
712
|
t48 = /*#__PURE__*/jsxs("span", {
|
|
715
713
|
className: classes.ActionListSubContent,
|
|
716
714
|
"data-component": "ActionList.Item--DividerContainer",
|
|
717
715
|
children: [t43, t46, t47]
|
|
718
716
|
});
|
|
719
|
-
$[
|
|
720
|
-
$[
|
|
721
|
-
$[
|
|
722
|
-
$[
|
|
717
|
+
$[124] = t43;
|
|
718
|
+
$[125] = t46;
|
|
719
|
+
$[126] = t47;
|
|
720
|
+
$[127] = t48;
|
|
723
721
|
} else {
|
|
724
|
-
t48 = $[
|
|
722
|
+
t48 = $[127];
|
|
725
723
|
}
|
|
726
724
|
let t49;
|
|
727
|
-
if ($[
|
|
725
|
+
if ($[128] !== t36 || $[129] !== t39 || $[130] !== t48) {
|
|
728
726
|
t49 = /*#__PURE__*/jsxs(TooltipContext.Provider, {
|
|
729
727
|
value: t34,
|
|
730
728
|
children: [t35, t36, t39, t48]
|
|
731
729
|
});
|
|
732
|
-
$[
|
|
733
|
-
$[
|
|
734
|
-
$[
|
|
735
|
-
$[
|
|
730
|
+
$[128] = t36;
|
|
731
|
+
$[129] = t39;
|
|
732
|
+
$[130] = t48;
|
|
733
|
+
$[131] = t49;
|
|
736
734
|
} else {
|
|
737
|
-
t49 = $[
|
|
735
|
+
t49 = $[131];
|
|
738
736
|
}
|
|
739
737
|
let t50;
|
|
740
|
-
if ($[
|
|
738
|
+
if ($[132] !== ItemWrapper || $[133] !== forwardedRef || $[134] !== size || $[135] !== t49 || $[136] !== wrapperProps) {
|
|
741
739
|
t50 = /*#__PURE__*/jsx(ItemWrapper, {
|
|
742
740
|
...wrapperProps,
|
|
743
741
|
className: classes.ActionListContent,
|
|
@@ -745,34 +743,34 @@ const UnwrappedItem = (t0, forwardedRef) => {
|
|
|
745
743
|
ref: forwardedRef,
|
|
746
744
|
children: t49
|
|
747
745
|
});
|
|
748
|
-
$[
|
|
749
|
-
$[
|
|
750
|
-
$[
|
|
751
|
-
$[
|
|
752
|
-
$[
|
|
753
|
-
$[
|
|
746
|
+
$[132] = ItemWrapper;
|
|
747
|
+
$[133] = forwardedRef;
|
|
748
|
+
$[134] = size;
|
|
749
|
+
$[135] = t49;
|
|
750
|
+
$[136] = wrapperProps;
|
|
751
|
+
$[137] = t50;
|
|
754
752
|
} else {
|
|
755
|
-
t50 = $[
|
|
753
|
+
t50 = $[137];
|
|
756
754
|
}
|
|
757
755
|
let t51;
|
|
758
|
-
if ($[
|
|
756
|
+
if ($[138] !== buttonSemantics || $[139] !== forwardedRef || $[140] !== t50 || $[141] !== truncatedText) {
|
|
759
757
|
t51 = /*#__PURE__*/jsx(ConditionalTooltip, {
|
|
760
758
|
ref: forwardedRef,
|
|
761
759
|
text: truncatedText,
|
|
762
760
|
enabled: buttonSemantics,
|
|
763
761
|
children: t50
|
|
764
762
|
});
|
|
765
|
-
$[
|
|
766
|
-
$[
|
|
767
|
-
$[
|
|
768
|
-
$[
|
|
769
|
-
$[
|
|
763
|
+
$[138] = buttonSemantics;
|
|
764
|
+
$[139] = forwardedRef;
|
|
765
|
+
$[140] = t50;
|
|
766
|
+
$[141] = truncatedText;
|
|
767
|
+
$[142] = t51;
|
|
770
768
|
} else {
|
|
771
|
-
t51 = $[
|
|
769
|
+
t51 = $[142];
|
|
772
770
|
}
|
|
773
771
|
const t52 = !inactive && !loading && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction;
|
|
774
772
|
let t53;
|
|
775
|
-
if ($[
|
|
773
|
+
if ($[143] !== containerProps || $[144] !== slots.subItem || $[145] !== t26 || $[146] !== t27 || $[147] !== t28 || $[148] !== t29 || $[149] !== t30 || $[150] !== t31 || $[151] !== t32 || $[152] !== t33 || $[153] !== t51 || $[154] !== t52) {
|
|
776
774
|
t53 = /*#__PURE__*/jsxs("li", {
|
|
777
775
|
...containerProps,
|
|
778
776
|
ref: t26,
|
|
@@ -785,33 +783,33 @@ const UnwrappedItem = (t0, forwardedRef) => {
|
|
|
785
783
|
className: t33,
|
|
786
784
|
children: [t51, t52, slots.subItem]
|
|
787
785
|
});
|
|
788
|
-
$[
|
|
789
|
-
$[
|
|
790
|
-
$[
|
|
791
|
-
$[
|
|
792
|
-
$[
|
|
793
|
-
$[
|
|
794
|
-
$[
|
|
795
|
-
$[
|
|
796
|
-
$[
|
|
797
|
-
$[
|
|
798
|
-
$[
|
|
799
|
-
$[
|
|
800
|
-
$[
|
|
801
|
-
} else {
|
|
802
|
-
t53 = $[
|
|
786
|
+
$[143] = containerProps;
|
|
787
|
+
$[144] = slots.subItem;
|
|
788
|
+
$[145] = t26;
|
|
789
|
+
$[146] = t27;
|
|
790
|
+
$[147] = t28;
|
|
791
|
+
$[148] = t29;
|
|
792
|
+
$[149] = t30;
|
|
793
|
+
$[150] = t31;
|
|
794
|
+
$[151] = t32;
|
|
795
|
+
$[152] = t33;
|
|
796
|
+
$[153] = t51;
|
|
797
|
+
$[154] = t52;
|
|
798
|
+
$[155] = t53;
|
|
799
|
+
} else {
|
|
800
|
+
t53 = $[155];
|
|
803
801
|
}
|
|
804
802
|
let t54;
|
|
805
|
-
if ($[
|
|
803
|
+
if ($[156] !== itemContextValue || $[157] !== t53) {
|
|
806
804
|
t54 = /*#__PURE__*/jsx(ItemContext.Provider, {
|
|
807
805
|
value: itemContextValue,
|
|
808
806
|
children: t53
|
|
809
807
|
});
|
|
810
|
-
$[
|
|
811
|
-
$[
|
|
812
|
-
$[
|
|
808
|
+
$[156] = itemContextValue;
|
|
809
|
+
$[157] = t53;
|
|
810
|
+
$[158] = t54;
|
|
813
811
|
} else {
|
|
814
|
-
t54 = $[
|
|
812
|
+
t54 = $[158];
|
|
815
813
|
}
|
|
816
814
|
return t54;
|
|
817
815
|
};
|
|
@@ -144,7 +144,7 @@ const AnchoredOverlay = ({
|
|
|
144
144
|
overlay.style.removeProperty('position-anchor');
|
|
145
145
|
}
|
|
146
146
|
};
|
|
147
|
-
}, [cssAnchorPositioning, anchorRef, overlayRef, id]);
|
|
147
|
+
}, [cssAnchorPositioning, anchorRef, overlayRef, id, open]);
|
|
148
148
|
|
|
149
149
|
// Track the overlay element so we can re-run the effect when it changes.
|
|
150
150
|
// The overlay unmounts when closed, so each open creates a new DOM node -
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.prc-Stack-Stack-UQ9k6{align-content:flex-start;align-items:stretch;display:flex;flex-flow:column;gap:var(--stack-gap,var(--stack-gap-normal,1rem))}.prc-Stack-Stack-UQ9k6[data-padding-narrow=none],.prc-Stack-Stack-UQ9k6[data-padding=none]{padding-block:0;padding-inline:0}.prc-Stack-Stack-UQ9k6[data-padding-narrow=tight],.prc-Stack-Stack-UQ9k6[data-padding=tight]{padding-block:var(--base-size-4,.25rem);padding-inline:var(--base-size-4,.25rem)}.prc-Stack-Stack-UQ9k6[data-padding-narrow=condensed],.prc-Stack-Stack-UQ9k6[data-padding=condensed]{padding-block:var(--stack-padding-condensed,.5rem);padding-inline:var(--stack-padding-condensed,.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-narrow=cozy],.prc-Stack-Stack-UQ9k6[data-padding=cozy]{padding-block:var(--base-size-12,.75rem);padding-inline:var(--base-size-12,.75rem)}.prc-Stack-Stack-UQ9k6[data-padding-narrow=normal],.prc-Stack-Stack-UQ9k6[data-padding=normal]{padding-block:var(--stack-padding-normal,1rem);padding-inline:var(--stack-padding-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-padding-narrow=spacious],.prc-Stack-Stack-UQ9k6[data-padding=spacious]{padding-block:var(--stack-padding-spacious,1.5rem);padding-inline:var(--stack-padding-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-direction-narrow=horizontal],.prc-Stack-Stack-UQ9k6[data-direction=horizontal]{flex-flow:row}.prc-Stack-Stack-UQ9k6[data-direction-narrow=vertical],.prc-Stack-Stack-UQ9k6[data-direction=vertical]{flex-flow:column}.prc-Stack-Stack-UQ9k6[data-gap-narrow=none],.prc-Stack-Stack-UQ9k6[data-gap=none]{--stack-gap:0}.prc-Stack-Stack-UQ9k6[data-gap-narrow=tight],.prc-Stack-Stack-UQ9k6[data-gap=tight]{--stack-gap:var(--base-size-4,0.25rem)}.prc-Stack-Stack-UQ9k6[data-gap-narrow=condensed],.prc-Stack-Stack-UQ9k6[data-gap=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.prc-Stack-Stack-UQ9k6[data-gap-narrow=cozy],.prc-Stack-Stack-UQ9k6[data-gap=cozy]{--stack-gap:var(--base-size-12,0.75rem)}.prc-Stack-Stack-UQ9k6[data-gap-narrow=normal],.prc-Stack-Stack-UQ9k6[data-gap=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-gap-narrow=spacious],.prc-Stack-Stack-UQ9k6[data-gap=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-align-narrow=start],.prc-Stack-Stack-UQ9k6[data-align=start]{align-items:flex-start}.prc-Stack-Stack-UQ9k6[data-align-narrow=center],.prc-Stack-Stack-UQ9k6[data-align=center]{align-items:center}.prc-Stack-Stack-UQ9k6[data-align-narrow=end],.prc-Stack-Stack-UQ9k6[data-align=end]{align-items:flex-end}.prc-Stack-Stack-UQ9k6[data-align-narrow=baseline],.prc-Stack-Stack-UQ9k6[data-align=baseline]{align-items:baseline}.prc-Stack-Stack-UQ9k6[data-justify-narrow=start],.prc-Stack-Stack-UQ9k6[data-justify=start]{justify-content:flex-start}.prc-Stack-Stack-UQ9k6[data-justify-narrow=center],.prc-Stack-Stack-UQ9k6[data-justify=center]{justify-content:center}.prc-Stack-Stack-UQ9k6[data-justify-narrow=end],.prc-Stack-Stack-UQ9k6[data-justify=end]{justify-content:flex-end}.prc-Stack-Stack-UQ9k6[data-justify-narrow=space-between],.prc-Stack-Stack-UQ9k6[data-justify=space-between]{justify-content:space-between}.prc-Stack-Stack-UQ9k6[data-justify-narrow=space-evenly],.prc-Stack-Stack-UQ9k6[data-justify=space-evenly]{justify-content:space-evenly}.prc-Stack-Stack-UQ9k6[data-wrap-narrow=wrap],.prc-Stack-Stack-UQ9k6[data-wrap=wrap]{flex-wrap:wrap}.prc-Stack-Stack-UQ9k6[data-wrap-narrow=nowrap],.prc-Stack-Stack-UQ9k6[data-wrap=nowrap]{flex-wrap:nowrap}.prc-Stack-Stack-UQ9k6[data-padding-block-narrow=none],.prc-Stack-Stack-UQ9k6[data-padding-block=none]{padding-block:0}.prc-Stack-Stack-UQ9k6[data-padding-block-narrow=tight],.prc-Stack-Stack-UQ9k6[data-padding-block=tight]{padding-block:var(--base-size-4,.25rem)}.prc-Stack-Stack-UQ9k6[data-padding-block-narrow=condensed],.prc-Stack-Stack-UQ9k6[data-padding-block=condensed]{padding-block:var(--stack-padding-condensed,.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-block-narrow=cozy],.prc-Stack-Stack-UQ9k6[data-padding-block=cozy]{padding-block:var(--base-size-12,.75rem)}.prc-Stack-Stack-UQ9k6[data-padding-block-narrow=normal],.prc-Stack-Stack-UQ9k6[data-padding-block=normal]{padding-block:var(--stack-padding-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-padding-block-narrow=spacious],.prc-Stack-Stack-UQ9k6[data-padding-block=spacious]{padding-block:var(--stack-padding-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-inline-narrow=none],.prc-Stack-Stack-UQ9k6[data-padding-inline=none]{padding-inline:0}.prc-Stack-Stack-UQ9k6[data-padding-inline-narrow=tight],.prc-Stack-Stack-UQ9k6[data-padding-inline=tight]{padding-inline:var(--base-size-4,.25rem)}.prc-Stack-Stack-UQ9k6[data-padding-inline-narrow=condensed],.prc-Stack-Stack-UQ9k6[data-padding-inline=condensed]{padding-inline:var(--stack-padding-condensed,.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-inline-narrow=cozy],.prc-Stack-Stack-UQ9k6[data-padding-inline=cozy]{padding-inline:var(--base-size-12,.75rem)}.prc-Stack-Stack-UQ9k6[data-padding-inline-narrow=normal],.prc-Stack-Stack-UQ9k6[data-padding-inline=normal]{padding-inline:var(--stack-padding-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-padding-inline-narrow=spacious],.prc-Stack-Stack-UQ9k6[data-padding-inline=spacious]{padding-inline:var(--stack-padding-spacious,1.5rem)}@media (min-width:48rem){.prc-Stack-Stack-UQ9k6[data-padding-regular=none]{padding-block:0;padding-inline:0}.prc-Stack-Stack-UQ9k6[data-padding-regular=tight]{padding-block:var(--base-size-4,.25rem);padding-inline:var(--base-size-4,.25rem)}.prc-Stack-Stack-UQ9k6[data-padding-regular=condensed]{padding-block:var(--stack-padding-condensed,.5rem);padding-inline:var(--stack-padding-condensed,.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-regular=cozy]{padding-block:var(--base-size-12,.75rem);padding-inline:var(--base-size-12,.75rem)}.prc-Stack-Stack-UQ9k6[data-padding-regular=normal]{padding-block:var(--stack-padding-normal,1rem);padding-inline:var(--stack-padding-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-padding-regular=spacious]{padding-block:var(--stack-padding-spacious,1.5rem);padding-inline:var(--stack-padding-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-direction-regular=horizontal]{flex-flow:row}.prc-Stack-Stack-UQ9k6[data-direction-regular=vertical]{flex-flow:column}.prc-Stack-Stack-UQ9k6[data-gap-regular=none]{--stack-gap:0}.prc-Stack-Stack-UQ9k6[data-gap-regular=tight]{--stack-gap:var(--base-size-4,0.25rem)}.prc-Stack-Stack-UQ9k6[data-gap-regular=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.prc-Stack-Stack-UQ9k6[data-gap-regular=cozy]{--stack-gap:var(--base-size-12,0.75rem)}.prc-Stack-Stack-UQ9k6[data-gap-regular=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-gap-regular=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-align-regular=start]{align-items:flex-start}.prc-Stack-Stack-UQ9k6[data-align-regular=center]{align-items:center}.prc-Stack-Stack-UQ9k6[data-align-regular=end]{align-items:flex-end}.prc-Stack-Stack-UQ9k6[data-align-regular=baseline]{align-items:baseline}.prc-Stack-Stack-UQ9k6[data-justify-regular=start]{justify-content:flex-start}.prc-Stack-Stack-UQ9k6[data-justify-regular=center]{justify-content:center}.prc-Stack-Stack-UQ9k6[data-justify-regular=end]{justify-content:flex-end}.prc-Stack-Stack-UQ9k6[data-justify-regular=space-between]{justify-content:space-between}.prc-Stack-Stack-UQ9k6[data-justify-regular=space-evenly]{justify-content:space-evenly}.prc-Stack-Stack-UQ9k6[data-wrap-regular=wrap]{flex-wrap:wrap}.prc-Stack-Stack-UQ9k6[data-wrap-regular=nowrap]{flex-wrap:nowrap}.prc-Stack-Stack-UQ9k6[data-padding-block-regular=none]{padding-block:0}.prc-Stack-Stack-UQ9k6[data-padding-block-regular=tight]{padding-block:var(--base-size-4,.25rem)}.prc-Stack-Stack-UQ9k6[data-padding-block-regular=condensed]{padding-block:var(--stack-padding-condensed,.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-block-regular=cozy]{padding-block:var(--base-size-12,.75rem)}.prc-Stack-Stack-UQ9k6[data-padding-block-regular=normal]{padding-block:var(--stack-padding-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-padding-block-regular=spacious]{padding-block:var(--stack-padding-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-inline-regular=none]{padding-inline:0}.prc-Stack-Stack-UQ9k6[data-padding-inline-regular=tight]{padding-inline:var(--base-size-4,.25rem)}.prc-Stack-Stack-UQ9k6[data-padding-inline-regular=condensed]{padding-inline:var(--stack-padding-condensed,.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-inline-regular=cozy]{padding-inline:var(--base-size-12,.75rem)}.prc-Stack-Stack-UQ9k6[data-padding-inline-regular=normal]{padding-inline:var(--stack-padding-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-padding-inline-regular=spacious]{padding-inline:var(--stack-padding-spacious,1.5rem)}}@media (min-width:87.5rem){.prc-Stack-Stack-UQ9k6[data-padding-wide=none]{padding-block:0;padding-inline:0}.prc-Stack-Stack-UQ9k6[data-padding-wide=tight]{padding-block:var(--base-size-4,.25rem);padding-inline:var(--base-size-4,.25rem)}.prc-Stack-Stack-UQ9k6[data-padding-wide=condensed]{padding-block:var(--stack-padding-condensed,.5rem);padding-inline:var(--stack-padding-condensed,.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-wide=cozy]{padding-block:var(--base-size-12,.75rem);padding-inline:var(--base-size-12,.75rem)}.prc-Stack-Stack-UQ9k6[data-padding-wide=normal]{padding-block:var(--stack-padding-normal,1rem);padding-inline:var(--stack-padding-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-padding-wide=spacious]{padding-block:var(--stack-padding-spacious,1.5rem);padding-inline:var(--stack-padding-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-direction-wide=horizontal]{flex-flow:row}.prc-Stack-Stack-UQ9k6[data-direction-wide=vertical]{flex-flow:column}.prc-Stack-Stack-UQ9k6[data-gap-wide=none]{--stack-gap:0}.prc-Stack-Stack-UQ9k6[data-gap-wide=tight]{--stack-gap:var(--base-size-4,0.25rem)}.prc-Stack-Stack-UQ9k6[data-gap-wide=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.prc-Stack-Stack-UQ9k6[data-gap-wide=cozy]{--stack-gap:var(--base-size-12,0.75rem)}.prc-Stack-Stack-UQ9k6[data-gap-wide=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-gap-wide=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-align-wide=start]{align-items:flex-start}.prc-Stack-Stack-UQ9k6[data-align-wide=center]{align-items:center}.prc-Stack-Stack-UQ9k6[data-align-wide=end]{align-items:flex-end}.prc-Stack-Stack-UQ9k6[data-align-wide=baseline]{align-items:baseline}.prc-Stack-Stack-UQ9k6[data-justify-wide=start]{justify-content:flex-start}.prc-Stack-Stack-UQ9k6[data-justify-wide=center]{justify-content:center}.prc-Stack-Stack-UQ9k6[data-justify-wide=end]{justify-content:flex-end}.prc-Stack-Stack-UQ9k6[data-justify-wide=space-between]{justify-content:space-between}.prc-Stack-Stack-UQ9k6[data-justify-wide=space-evenly]{justify-content:space-evenly}.prc-Stack-Stack-UQ9k6[data-wrap-wide=wrap]{flex-wrap:wrap}.prc-Stack-Stack-UQ9k6[data-wrap-wide=nowrap]{flex-wrap:nowrap}.prc-Stack-Stack-UQ9k6[data-padding-block-wide=none]{padding-block:0}.prc-Stack-Stack-UQ9k6[data-padding-block-wide=tight]{padding-block:var(--base-size-4,.25rem)}.prc-Stack-Stack-UQ9k6[data-padding-block-wide=condensed]{padding-block:var(--stack-padding-condensed,.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-block-wide=cozy]{padding-block:var(--base-size-12,.75rem)}.prc-Stack-Stack-UQ9k6[data-padding-block-wide=normal]{padding-block:var(--stack-padding-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-padding-block-wide=spacious]{padding-block:var(--stack-padding-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-inline-wide=none]{padding-inline:0}.prc-Stack-Stack-UQ9k6[data-padding-inline-wide=tight]{padding-inline:var(--base-size-4,.25rem)}.prc-Stack-Stack-UQ9k6[data-padding-inline-wide=condensed]{padding-inline:var(--stack-padding-condensed,.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-inline-wide=cozy]{padding-inline:var(--base-size-12,.75rem)}.prc-Stack-Stack-UQ9k6[data-padding-inline-wide=normal]{padding-inline:var(--stack-padding-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-padding-inline-wide=spacious]{padding-inline:var(--stack-padding-spacious,1.5rem)}}.prc-Stack-StackItem-TzbLx{flex:0 1 auto;min-inline-size:0}.prc-Stack-StackItem-TzbLx[data-shrink-narrow=false],.prc-Stack-StackItem-TzbLx[data-shrink=false]{flex-shrink:0}.prc-Stack-StackItem-TzbLx[data-grow-narrow=true],.prc-Stack-StackItem-TzbLx[data-grow=true]{flex-grow:1}@media (min-width:48rem){.prc-Stack-StackItem-TzbLx[data-grow-regular=true]{flex-grow:1}.prc-Stack-StackItem-TzbLx[data-grow-regular=false]{flex-grow:0}.prc-Stack-StackItem-TzbLx[data-shrink-regular=true]{flex-shrink:1}.prc-Stack-StackItem-TzbLx[data-shrink-regular=false]{flex-shrink:0}}@media (min-width:87.5rem){.prc-Stack-StackItem-TzbLx[data-grow-wide=true]{flex-grow:1}.prc-Stack-StackItem-TzbLx[data-grow-wide=false]{flex-grow:0}.prc-Stack-StackItem-TzbLx[data-shrink-wide=true]{flex-shrink:1}.prc-Stack-StackItem-TzbLx[data-shrink-wide=false]{flex-shrink:0}}
|
|
2
|
+
/*# sourceMappingURL=Stack-58c33984.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Stack/Stack.module.css.js"],"names":[],"mappings":"AAAA,uBAIE,wBAAyB,CADzB,mBAAoB,CAFpB,YAAa,CACb,gBAAiB,CAGjB,iDA4hBF,CA1hBE,2FAEE,eAAgB,CAChB,gBACF,CAEA,6FAEE,uCAAiC,CACjC,wCACF,CAEA,qGAGE,kDAA6C,CAE7C,mDACF,CAEA,2FAEE,wCAAkC,CAClC,yCACF,CAEA,+FAGE,8CAA0C,CAE1C,+CACF,CAEA,mGAGE,kDAA4C,CAE5C,mDACF,CAEA,2GAEE,aACF,CAEA,uGAEE,gBACF,CAEA,mFAEE,aACF,CAEA,qFAEE,sCACF,CAEA,6FAEE,6CACF,CAEA,mFAEE,uCACF,CAEA,uFAEE,wCACF,CAEA,2FAEE,4CACF,CAEA,yFAEE,sBACF,CAEA,2FAEE,kBACF,CAEA,qFAEE,oBACF,CAEA,+FAEE,oBACF,CAEA,6FAEE,0BACF,CAEA,+FAEE,sBACF,CAEA,yFAEE,wBACF,CAEA,6GAEE,6BACF,CAEA,2GAEE,4BACF,CAEA,qFAEE,cACF,CAEA,yFAEE,gBACF,CAEA,uGAEE,eACF,CAEA,yGAEE,uCACF,CAEA,iHAGE,kDACF,CAEA,uGAEE,wCACF,CAEA,2GAGE,8CACF,CAEA,+GAGE,kDACF,CAEA,yGAEE,gBACF,CAEA,2GAEE,wCACF,CAEA,mHAGE,mDACF,CAEA,yGAEE,yCACF,CAEA,6GAGE,+CACF,CAEA,iHAGE,mDACF,CAEA,yBACE,kDACE,eAAgB,CAChB,gBACF,CAEA,mDACE,uCAAiC,CACjC,wCACF,CAEA,uDAEE,kDAA6C,CAE7C,mDACF,CAEA,kDACE,wCAAkC,CAClC,yCACF,CAEA,oDAEE,8CAA0C,CAE1C,+CACF,CAEA,sDAEE,kDAA4C,CAE5C,mDACF,CAEA,0DACE,aACF,CAEA,wDACE,gBACF,CAEA,8CACE,aACF,CAEA,+CACE,sCACF,CAEA,mDACE,6CACF,CAEA,8CACE,uCACF,CAEA,gDACE,wCACF,CAEA,kDACE,4CACF,CAEA,iDACE,sBACF,CAEA,kDACE,kBACF,CAEA,+CACE,oBACF,CAEA,oDACE,oBACF,CAEA,mDACE,0BACF,CAEA,oDACE,sBACF,CAEA,iDACE,wBACF,CAEA,2DACE,6BACF,CAEA,0DACE,4BACF,CAEA,+CACE,cACF,CAEA,iDACE,gBACF,CAEA,wDACE,eACF,CAEA,yDACE,uCACF,CAEA,6DAEE,kDACF,CAEA,wDACE,wCACF,CAEA,0DAEE,8CACF,CAEA,4DAEE,kDACF,CAEA,yDACE,gBACF,CAEA,0DACE,wCACF,CAEA,8DAEE,mDACF,CAEA,yDACE,yCACF,CAEA,2DAEE,+CACF,CAEA,6DAEE,mDACF,CACF,CAEA,2BACE,+CACE,eAAgB,CAChB,gBACF,CAEA,gDACE,uCAAiC,CACjC,wCACF,CAEA,oDAEE,kDAA6C,CAE7C,mDACF,CAEA,+CACE,wCAAkC,CAClC,yCACF,CAEA,iDAEE,8CAA0C,CAE1C,+CACF,CAEA,mDAEE,kDAA4C,CAE5C,mDACF,CAEA,uDACE,aACF,CAEA,qDACE,gBACF,CAEA,2CACE,aACF,CAEA,4CACE,sCACF,CAEA,gDACE,6CACF,CAEA,2CACE,uCACF,CAEA,6CACE,wCACF,CAEA,+CACE,4CACF,CAEA,8CACE,sBACF,CAEA,+CACE,kBACF,CAEA,4CACE,oBACF,CAEA,iDACE,oBACF,CAEA,gDACE,0BACF,CAEA,iDACE,sBACF,CAEA,8CACE,wBACF,CAEA,wDACE,6BACF,CAEA,uDACE,4BACF,CAEA,4CACE,cACF,CAEA,8CACE,gBACF,CAEA,qDACE,eACF,CAEA,sDACE,uCACF,CAEA,0DAEE,kDACF,CAEA,qDACE,wCACF,CAEA,uDAEE,8CACF,CAEA,yDAEE,kDACF,CAEA,sDACE,gBACF,CAEA,uDACE,wCACF,CAEA,2DAEE,mDACF,CAEA,sDACE,yCACF,CAEA,wDAEE,+CACF,CAEA,0DAEE,mDACF,CACF,CAGF,2BACE,aAAc,CACd,iBA+CF,CA7CE,mGAEE,aACF,CAEA,6FAEE,WACF,CAEA,yBACE,mDACE,WACF,CAEA,oDACE,WACF,CAEA,qDACE,aACF,CAEA,sDACE,aACF,CACF,CAEA,2BACE,gDACE,WACF,CAEA,iDACE,WACF,CAEA,kDACE,aACF,CAEA,mDACE,aACF,CACF","file":"Stack-58c33984.css","sourcesContent":[".Stack {\n display: flex;\n flex-flow: column;\n align-items: stretch;\n align-content: flex-start;\n gap: var(--stack-gap, var(--stack-gap-normal));\n\n &[data-padding='none'],\n &[data-padding-narrow='none'] {\n padding-block: 0;\n padding-inline: 0;\n }\n\n &[data-padding='tight'],\n &[data-padding-narrow='tight'] {\n padding-block: var(--base-size-4);\n padding-inline: var(--base-size-4);\n }\n\n &[data-padding='condensed'],\n &[data-padding-narrow='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-condensed);\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-condensed);\n }\n\n &[data-padding='cozy'],\n &[data-padding-narrow='cozy'] {\n padding-block: var(--base-size-12);\n padding-inline: var(--base-size-12);\n }\n\n &[data-padding='normal'],\n &[data-padding-narrow='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-normal);\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-normal);\n }\n\n &[data-padding='spacious'],\n &[data-padding-narrow='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-spacious);\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-spacious);\n }\n\n &[data-direction='horizontal'],\n &[data-direction-narrow='horizontal'] {\n flex-flow: row;\n }\n\n &[data-direction='vertical'],\n &[data-direction-narrow='vertical'] {\n flex-flow: column;\n }\n\n &[data-gap='none'],\n &[data-gap-narrow='none'] {\n --stack-gap: 0;\n }\n\n &[data-gap='tight'],\n &[data-gap-narrow='tight'] {\n --stack-gap: var(--base-size-4);\n }\n\n &[data-gap='condensed'],\n &[data-gap-narrow='condensed'] {\n --stack-gap: var(--stack-gap-condensed);\n }\n\n &[data-gap='cozy'],\n &[data-gap-narrow='cozy'] {\n --stack-gap: var(--base-size-12);\n }\n\n &[data-gap='normal'],\n &[data-gap-narrow='normal'] {\n --stack-gap: var(--stack-gap-normal);\n }\n\n &[data-gap='spacious'],\n &[data-gap-narrow='spacious'] {\n --stack-gap: var(--stack-gap-spacious);\n }\n\n &[data-align='start'],\n &[data-align-narrow='start'] {\n align-items: flex-start;\n }\n\n &[data-align='center'],\n &[data-align-narrow='center'] {\n align-items: center;\n }\n\n &[data-align='end'],\n &[data-align-narrow='end'] {\n align-items: flex-end;\n }\n\n &[data-align='baseline'],\n &[data-align-narrow='baseline'] {\n align-items: baseline;\n }\n\n &[data-justify='start'],\n &[data-justify-narrow='start'] {\n justify-content: flex-start;\n }\n\n &[data-justify='center'],\n &[data-justify-narrow='center'] {\n justify-content: center;\n }\n\n &[data-justify='end'],\n &[data-justify-narrow='end'] {\n justify-content: flex-end;\n }\n\n &[data-justify='space-between'],\n &[data-justify-narrow='space-between'] {\n justify-content: space-between;\n }\n\n &[data-justify='space-evenly'],\n &[data-justify-narrow='space-evenly'] {\n justify-content: space-evenly;\n }\n\n &[data-wrap='wrap'],\n &[data-wrap-narrow='wrap'] {\n flex-wrap: wrap;\n }\n\n &[data-wrap='nowrap'],\n &[data-wrap-narrow='nowrap'] {\n flex-wrap: nowrap;\n }\n\n &[data-padding-block='none'],\n &[data-padding-block-narrow='none'] {\n padding-block: 0;\n }\n\n &[data-padding-block='tight'],\n &[data-padding-block-narrow='tight'] {\n padding-block: var(--base-size-4);\n }\n\n &[data-padding-block='condensed'],\n &[data-padding-block-narrow='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-condensed);\n }\n\n &[data-padding-block='cozy'],\n &[data-padding-block-narrow='cozy'] {\n padding-block: var(--base-size-12);\n }\n\n &[data-padding-block='normal'],\n &[data-padding-block-narrow='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-normal);\n }\n\n &[data-padding-block='spacious'],\n &[data-padding-block-narrow='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-spacious);\n }\n\n &[data-padding-inline='none'],\n &[data-padding-inline-narrow='none'] {\n padding-inline: 0;\n }\n\n &[data-padding-inline='tight'],\n &[data-padding-inline-narrow='tight'] {\n padding-inline: var(--base-size-4);\n }\n\n &[data-padding-inline='condensed'],\n &[data-padding-inline-narrow='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-condensed);\n }\n\n &[data-padding-inline='cozy'],\n &[data-padding-inline-narrow='cozy'] {\n padding-inline: var(--base-size-12);\n }\n\n &[data-padding-inline='normal'],\n &[data-padding-inline-narrow='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-normal);\n }\n\n &[data-padding-inline='spacious'],\n &[data-padding-inline-narrow='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-spacious);\n }\n\n @media (--viewportRange-regular) {\n &[data-padding-regular='none'] {\n padding-block: 0;\n padding-inline: 0;\n }\n\n &[data-padding-regular='tight'] {\n padding-block: var(--base-size-4);\n padding-inline: var(--base-size-4);\n }\n\n &[data-padding-regular='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-condensed);\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-condensed);\n }\n\n &[data-padding-regular='cozy'] {\n padding-block: var(--base-size-12);\n padding-inline: var(--base-size-12);\n }\n\n &[data-padding-regular='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-normal);\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-normal);\n }\n\n &[data-padding-regular='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-spacious);\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-spacious);\n }\n\n &[data-direction-regular='horizontal'] {\n flex-flow: row;\n }\n\n &[data-direction-regular='vertical'] {\n flex-flow: column;\n }\n\n &[data-gap-regular='none'] {\n --stack-gap: 0;\n }\n\n &[data-gap-regular='tight'] {\n --stack-gap: var(--base-size-4);\n }\n\n &[data-gap-regular='condensed'] {\n --stack-gap: var(--stack-gap-condensed);\n }\n\n &[data-gap-regular='cozy'] {\n --stack-gap: var(--base-size-12);\n }\n\n &[data-gap-regular='normal'] {\n --stack-gap: var(--stack-gap-normal);\n }\n\n &[data-gap-regular='spacious'] {\n --stack-gap: var(--stack-gap-spacious);\n }\n\n &[data-align-regular='start'] {\n align-items: flex-start;\n }\n\n &[data-align-regular='center'] {\n align-items: center;\n }\n\n &[data-align-regular='end'] {\n align-items: flex-end;\n }\n\n &[data-align-regular='baseline'] {\n align-items: baseline;\n }\n\n &[data-justify-regular='start'] {\n justify-content: flex-start;\n }\n\n &[data-justify-regular='center'] {\n justify-content: center;\n }\n\n &[data-justify-regular='end'] {\n justify-content: flex-end;\n }\n\n &[data-justify-regular='space-between'] {\n justify-content: space-between;\n }\n\n &[data-justify-regular='space-evenly'] {\n justify-content: space-evenly;\n }\n\n &[data-wrap-regular='wrap'] {\n flex-wrap: wrap;\n }\n\n &[data-wrap-regular='nowrap'] {\n flex-wrap: nowrap;\n }\n\n &[data-padding-block-regular='none'] {\n padding-block: 0;\n }\n\n &[data-padding-block-regular='tight'] {\n padding-block: var(--base-size-4);\n }\n\n &[data-padding-block-regular='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-condensed);\n }\n\n &[data-padding-block-regular='cozy'] {\n padding-block: var(--base-size-12);\n }\n\n &[data-padding-block-regular='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-normal);\n }\n\n &[data-padding-block-regular='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-spacious);\n }\n\n &[data-padding-inline-regular='none'] {\n padding-inline: 0;\n }\n\n &[data-padding-inline-regular='tight'] {\n padding-inline: var(--base-size-4);\n }\n\n &[data-padding-inline-regular='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-condensed);\n }\n\n &[data-padding-inline-regular='cozy'] {\n padding-inline: var(--base-size-12);\n }\n\n &[data-padding-inline-regular='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-normal);\n }\n\n &[data-padding-inline-regular='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-spacious);\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-padding-wide='none'] {\n padding-block: 0;\n padding-inline: 0;\n }\n\n &[data-padding-wide='tight'] {\n padding-block: var(--base-size-4);\n padding-inline: var(--base-size-4);\n }\n\n &[data-padding-wide='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-condensed);\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-condensed);\n }\n\n &[data-padding-wide='cozy'] {\n padding-block: var(--base-size-12);\n padding-inline: var(--base-size-12);\n }\n\n &[data-padding-wide='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-normal);\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-normal);\n }\n\n &[data-padding-wide='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-spacious);\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-spacious);\n }\n\n &[data-direction-wide='horizontal'] {\n flex-flow: row;\n }\n\n &[data-direction-wide='vertical'] {\n flex-flow: column;\n }\n\n &[data-gap-wide='none'] {\n --stack-gap: 0;\n }\n\n &[data-gap-wide='tight'] {\n --stack-gap: var(--base-size-4);\n }\n\n &[data-gap-wide='condensed'] {\n --stack-gap: var(--stack-gap-condensed);\n }\n\n &[data-gap-wide='cozy'] {\n --stack-gap: var(--base-size-12);\n }\n\n &[data-gap-wide='normal'] {\n --stack-gap: var(--stack-gap-normal);\n }\n\n &[data-gap-wide='spacious'] {\n --stack-gap: var(--stack-gap-spacious);\n }\n\n &[data-align-wide='start'] {\n align-items: flex-start;\n }\n\n &[data-align-wide='center'] {\n align-items: center;\n }\n\n &[data-align-wide='end'] {\n align-items: flex-end;\n }\n\n &[data-align-wide='baseline'] {\n align-items: baseline;\n }\n\n &[data-justify-wide='start'] {\n justify-content: flex-start;\n }\n\n &[data-justify-wide='center'] {\n justify-content: center;\n }\n\n &[data-justify-wide='end'] {\n justify-content: flex-end;\n }\n\n &[data-justify-wide='space-between'] {\n justify-content: space-between;\n }\n\n &[data-justify-wide='space-evenly'] {\n justify-content: space-evenly;\n }\n\n &[data-wrap-wide='wrap'] {\n flex-wrap: wrap;\n }\n\n &[data-wrap-wide='nowrap'] {\n flex-wrap: nowrap;\n }\n\n &[data-padding-block-wide='none'] {\n padding-block: 0;\n }\n\n &[data-padding-block-wide='tight'] {\n padding-block: var(--base-size-4);\n }\n\n &[data-padding-block-wide='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-condensed);\n }\n\n &[data-padding-block-wide='cozy'] {\n padding-block: var(--base-size-12);\n }\n\n &[data-padding-block-wide='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-normal);\n }\n\n &[data-padding-block-wide='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--stack-padding-spacious);\n }\n\n &[data-padding-inline-wide='none'] {\n padding-inline: 0;\n }\n\n &[data-padding-inline-wide='tight'] {\n padding-inline: var(--base-size-4);\n }\n\n &[data-padding-inline-wide='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-condensed);\n }\n\n &[data-padding-inline-wide='cozy'] {\n padding-inline: var(--base-size-12);\n }\n\n &[data-padding-inline-wide='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-normal);\n }\n\n &[data-padding-inline-wide='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-spacious);\n }\n }\n}\n\n.StackItem {\n flex: 0 1 auto;\n min-inline-size: 0;\n\n &[data-shrink='false'],\n &[data-shrink-narrow='false'] {\n flex-shrink: 0;\n }\n\n &[data-grow='true'],\n &[data-grow-narrow='true'] {\n flex-grow: 1;\n }\n\n @media (--viewportRange-regular) {\n &[data-grow-regular='true'] {\n flex-grow: 1;\n }\n\n &[data-grow-regular='false'] {\n flex-grow: 0;\n }\n\n &[data-shrink-regular='true'] {\n flex-shrink: 1;\n }\n\n &[data-shrink-regular='false'] {\n flex-shrink: 0;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-grow-wide='true'] {\n flex-grow: 1;\n }\n\n &[data-grow-wide='false'] {\n flex-grow: 0;\n }\n\n &[data-shrink-wide='true'] {\n flex-shrink: 1;\n }\n\n &[data-shrink-wide='false'] {\n flex-shrink: 0;\n }\n }\n}\n"]}
|
package/dist/Stack/Stack.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import type React from 'react';
|
|
|
2
2
|
import { type ElementType } from 'react';
|
|
3
3
|
import type { ResponsiveValue } from '../hooks/useResponsiveValue';
|
|
4
4
|
import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
|
|
5
|
-
type GapScale = 'none' | 'condensed' | 'normal' | 'spacious';
|
|
5
|
+
type GapScale = 'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious';
|
|
6
6
|
type Gap = GapScale | ResponsiveValue<GapScale>;
|
|
7
7
|
type DirectionScale = 'horizontal' | 'vertical';
|
|
8
8
|
type Direction = DirectionScale | ResponsiveValue<DirectionScale>;
|
|
@@ -12,7 +12,7 @@ type WrapScale = 'wrap' | 'nowrap';
|
|
|
12
12
|
type Wrap = WrapScale | ResponsiveValue<WrapScale>;
|
|
13
13
|
type JustifyScale = 'start' | 'center' | 'end' | 'space-between' | 'space-evenly';
|
|
14
14
|
type Justify = JustifyScale | ResponsiveValue<JustifyScale>;
|
|
15
|
-
type PaddingScale = 'none' | 'condensed' | 'normal' | 'spacious';
|
|
15
|
+
type PaddingScale = 'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious';
|
|
16
16
|
type Padding = PaddingScale | ResponsiveValue<PaddingScale>;
|
|
17
17
|
type StackProps<As> = React.PropsWithChildren<{
|
|
18
18
|
/**
|
|
@@ -48,6 +48,16 @@ type StackProps<As> = React.PropsWithChildren<{
|
|
|
48
48
|
* @default none
|
|
49
49
|
*/
|
|
50
50
|
padding?: Padding;
|
|
51
|
+
/**
|
|
52
|
+
* Specify the block (vertical) padding of the stack container.
|
|
53
|
+
* Overrides the block axis of `padding` when both are set.
|
|
54
|
+
*/
|
|
55
|
+
paddingBlock?: Padding;
|
|
56
|
+
/**
|
|
57
|
+
* Specify the inline (horizontal) padding of the stack container.
|
|
58
|
+
* Overrides the inline axis of `padding` when both are set.
|
|
59
|
+
*/
|
|
60
|
+
paddingInline?: Padding;
|
|
51
61
|
className?: string;
|
|
52
62
|
}>;
|
|
53
63
|
declare const Stack: PolymorphicForwardRefComponent<ElementType, StackProps<ElementType>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../src/Stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAa,KAAK,WAAW,EAAC,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAIhE,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,KAAK,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../src/Stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAa,KAAK,WAAW,EAAC,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAIhE,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,KAAK,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;AAC/E,KAAK,GAAG,GAAG,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;AAE/C,KAAK,cAAc,GAAG,YAAY,GAAG,UAAU,CAAA;AAC/C,KAAK,SAAS,GAAG,cAAc,GAAG,eAAe,CAAC,cAAc,CAAC,CAAA;AAEjE,KAAK,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAA;AACrE,KAAK,KAAK,GAAG,UAAU,GAAG,eAAe,CAAC,UAAU,CAAC,CAAA;AAErD,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAA;AAClC,KAAK,IAAI,GAAG,SAAS,GAAG,eAAe,CAAC,SAAS,CAAC,CAAA;AAElD,KAAK,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,GAAG,cAAc,CAAA;AACjF,KAAK,OAAO,GAAG,YAAY,GAAG,eAAe,CAAC,YAAY,CAAC,CAAA;AAE3D,KAAK,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;AACnF,KAAK,OAAO,GAAG,YAAY,GAAG,eAAe,CAAC,YAAY,CAAC,CAAA;AAE3D,KAAK,UAAU,CAAC,EAAE,IAAI,KAAK,CAAC,iBAAiB,CAAC;IAC5C;;OAEG;IACH,EAAE,CAAC,EAAE,EAAE,CAAA;IAEP;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAA;IAET;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IAErB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;IAEb;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAA;IAEX;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,QAAA,MAAM,KAAK,EAoCN,8BAA8B,CAAC,WAAW,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,CAAA;AAEzE,KAAK,cAAc,CAAC,EAAE,IAAI,KAAK,CAAC,iBAAiB,CAAC;IAChD;;OAEG;IACH,EAAE,CAAC,EAAE,EAAE,CAAA;IAEP;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAEzC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAE3C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,QAAA,MAAM,SAAS,EAYT,8BAA8B,CAAC,WAAW,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,CAAA;AAE1E,OAAO,EAAC,KAAK,EAAE,SAAS,EAAC,CAAA;AACzB,YAAY,EAAC,UAAU,EAAE,cAAc,EAAC,CAAA"}
|
package/dist/Stack/Stack.js
CHANGED
|
@@ -6,10 +6,12 @@ import { clsx } from 'clsx';
|
|
|
6
6
|
import { jsx } from 'react/jsx-runtime';
|
|
7
7
|
|
|
8
8
|
const Stack = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
|
|
9
|
-
const $ = c(
|
|
9
|
+
const $ = c(45);
|
|
10
10
|
let children;
|
|
11
11
|
let className;
|
|
12
12
|
let gap;
|
|
13
|
+
let paddingBlock;
|
|
14
|
+
let paddingInline;
|
|
13
15
|
let rest;
|
|
14
16
|
let t1;
|
|
15
17
|
let t2;
|
|
@@ -26,6 +28,8 @@ const Stack = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
|
|
|
26
28
|
gap,
|
|
27
29
|
justify: t4,
|
|
28
30
|
padding: t5,
|
|
31
|
+
paddingBlock,
|
|
32
|
+
paddingInline,
|
|
29
33
|
wrap: t6,
|
|
30
34
|
className,
|
|
31
35
|
...rest
|
|
@@ -34,24 +38,28 @@ const Stack = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
|
|
|
34
38
|
$[1] = children;
|
|
35
39
|
$[2] = className;
|
|
36
40
|
$[3] = gap;
|
|
37
|
-
$[4] =
|
|
38
|
-
$[5] =
|
|
39
|
-
$[6] =
|
|
40
|
-
$[7] =
|
|
41
|
-
$[8] =
|
|
42
|
-
$[9] =
|
|
43
|
-
$[10] =
|
|
41
|
+
$[4] = paddingBlock;
|
|
42
|
+
$[5] = paddingInline;
|
|
43
|
+
$[6] = rest;
|
|
44
|
+
$[7] = t1;
|
|
45
|
+
$[8] = t2;
|
|
46
|
+
$[9] = t3;
|
|
47
|
+
$[10] = t4;
|
|
48
|
+
$[11] = t5;
|
|
49
|
+
$[12] = t6;
|
|
44
50
|
} else {
|
|
45
51
|
children = $[1];
|
|
46
52
|
className = $[2];
|
|
47
53
|
gap = $[3];
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
54
|
+
paddingBlock = $[4];
|
|
55
|
+
paddingInline = $[5];
|
|
56
|
+
rest = $[6];
|
|
57
|
+
t1 = $[7];
|
|
58
|
+
t2 = $[8];
|
|
59
|
+
t3 = $[9];
|
|
60
|
+
t4 = $[10];
|
|
61
|
+
t5 = $[11];
|
|
62
|
+
t6 = $[12];
|
|
55
63
|
}
|
|
56
64
|
const Component = t1 === undefined ? "div" : t1;
|
|
57
65
|
const align = t2 === undefined ? "stretch" : t2;
|
|
@@ -60,64 +68,80 @@ const Stack = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
|
|
|
60
68
|
const padding = t5 === undefined ? "none" : t5;
|
|
61
69
|
const wrap = t6 === undefined ? "nowrap" : t6;
|
|
62
70
|
let t7;
|
|
63
|
-
if ($[
|
|
71
|
+
if ($[13] !== className) {
|
|
64
72
|
t7 = clsx(className, classes.Stack);
|
|
65
|
-
$[
|
|
66
|
-
$[
|
|
73
|
+
$[13] = className;
|
|
74
|
+
$[14] = t7;
|
|
67
75
|
} else {
|
|
68
|
-
t7 = $[
|
|
76
|
+
t7 = $[14];
|
|
69
77
|
}
|
|
70
78
|
let t8;
|
|
71
|
-
if ($[
|
|
79
|
+
if ($[15] !== gap) {
|
|
72
80
|
t8 = getResponsiveAttributes("gap", gap);
|
|
73
|
-
$[
|
|
74
|
-
$[
|
|
81
|
+
$[15] = gap;
|
|
82
|
+
$[16] = t8;
|
|
75
83
|
} else {
|
|
76
|
-
t8 = $[
|
|
84
|
+
t8 = $[16];
|
|
77
85
|
}
|
|
78
86
|
let t9;
|
|
79
|
-
if ($[
|
|
87
|
+
if ($[17] !== direction) {
|
|
80
88
|
t9 = getResponsiveAttributes("direction", direction);
|
|
81
|
-
$[
|
|
82
|
-
$[
|
|
89
|
+
$[17] = direction;
|
|
90
|
+
$[18] = t9;
|
|
83
91
|
} else {
|
|
84
|
-
t9 = $[
|
|
92
|
+
t9 = $[18];
|
|
85
93
|
}
|
|
86
94
|
let t10;
|
|
87
|
-
if ($[
|
|
95
|
+
if ($[19] !== align) {
|
|
88
96
|
t10 = getResponsiveAttributes("align", align);
|
|
89
|
-
$[
|
|
90
|
-
$[
|
|
97
|
+
$[19] = align;
|
|
98
|
+
$[20] = t10;
|
|
91
99
|
} else {
|
|
92
|
-
t10 = $[
|
|
100
|
+
t10 = $[20];
|
|
93
101
|
}
|
|
94
102
|
let t11;
|
|
95
|
-
if ($[
|
|
103
|
+
if ($[21] !== wrap) {
|
|
96
104
|
t11 = getResponsiveAttributes("wrap", wrap);
|
|
97
|
-
$[
|
|
98
|
-
$[
|
|
105
|
+
$[21] = wrap;
|
|
106
|
+
$[22] = t11;
|
|
99
107
|
} else {
|
|
100
|
-
t11 = $[
|
|
108
|
+
t11 = $[22];
|
|
101
109
|
}
|
|
102
110
|
let t12;
|
|
103
|
-
if ($[
|
|
111
|
+
if ($[23] !== justify) {
|
|
104
112
|
t12 = getResponsiveAttributes("justify", justify);
|
|
105
|
-
$[
|
|
106
|
-
$[
|
|
113
|
+
$[23] = justify;
|
|
114
|
+
$[24] = t12;
|
|
107
115
|
} else {
|
|
108
|
-
t12 = $[
|
|
116
|
+
t12 = $[24];
|
|
109
117
|
}
|
|
110
118
|
let t13;
|
|
111
|
-
if ($[
|
|
119
|
+
if ($[25] !== padding) {
|
|
112
120
|
t13 = getResponsiveAttributes("padding", padding);
|
|
113
|
-
$[
|
|
114
|
-
$[
|
|
121
|
+
$[25] = padding;
|
|
122
|
+
$[26] = t13;
|
|
115
123
|
} else {
|
|
116
|
-
t13 = $[
|
|
124
|
+
t13 = $[26];
|
|
117
125
|
}
|
|
118
126
|
let t14;
|
|
119
|
-
if ($[
|
|
120
|
-
t14 =
|
|
127
|
+
if ($[27] !== paddingBlock) {
|
|
128
|
+
t14 = getResponsiveAttributes("padding-block", paddingBlock);
|
|
129
|
+
$[27] = paddingBlock;
|
|
130
|
+
$[28] = t14;
|
|
131
|
+
} else {
|
|
132
|
+
t14 = $[28];
|
|
133
|
+
}
|
|
134
|
+
let t15;
|
|
135
|
+
if ($[29] !== paddingInline) {
|
|
136
|
+
t15 = getResponsiveAttributes("padding-inline", paddingInline);
|
|
137
|
+
$[29] = paddingInline;
|
|
138
|
+
$[30] = t15;
|
|
139
|
+
} else {
|
|
140
|
+
t15 = $[30];
|
|
141
|
+
}
|
|
142
|
+
let t16;
|
|
143
|
+
if ($[31] !== Component || $[32] !== children || $[33] !== forwardedRef || $[34] !== rest || $[35] !== t10 || $[36] !== t11 || $[37] !== t12 || $[38] !== t13 || $[39] !== t14 || $[40] !== t15 || $[41] !== t7 || $[42] !== t8 || $[43] !== t9) {
|
|
144
|
+
t16 = /*#__PURE__*/jsx(Component, {
|
|
121
145
|
ref: forwardedRef,
|
|
122
146
|
...rest,
|
|
123
147
|
className: t7,
|
|
@@ -127,24 +151,28 @@ const Stack = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
|
|
|
127
151
|
...t11,
|
|
128
152
|
...t12,
|
|
129
153
|
...t13,
|
|
154
|
+
...t14,
|
|
155
|
+
...t15,
|
|
130
156
|
children: children
|
|
131
157
|
});
|
|
132
|
-
$[
|
|
133
|
-
$[
|
|
134
|
-
$[
|
|
135
|
-
$[
|
|
136
|
-
$[
|
|
137
|
-
$[
|
|
138
|
-
$[
|
|
139
|
-
$[
|
|
140
|
-
$[
|
|
141
|
-
$[
|
|
142
|
-
$[
|
|
143
|
-
$[
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
}
|
|
147
|
-
|
|
158
|
+
$[31] = Component;
|
|
159
|
+
$[32] = children;
|
|
160
|
+
$[33] = forwardedRef;
|
|
161
|
+
$[34] = rest;
|
|
162
|
+
$[35] = t10;
|
|
163
|
+
$[36] = t11;
|
|
164
|
+
$[37] = t12;
|
|
165
|
+
$[38] = t13;
|
|
166
|
+
$[39] = t14;
|
|
167
|
+
$[40] = t15;
|
|
168
|
+
$[41] = t7;
|
|
169
|
+
$[42] = t8;
|
|
170
|
+
$[43] = t9;
|
|
171
|
+
$[44] = t16;
|
|
172
|
+
} else {
|
|
173
|
+
t16 = $[44];
|
|
174
|
+
}
|
|
175
|
+
return t16;
|
|
148
176
|
});
|
|
149
177
|
const StackItem = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
|
|
150
178
|
const $ = c(21);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAnchoredPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnchoredPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"useAnchoredPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnchoredPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AA0BvE,MAAM,WAAW,4BAA6B,SAAQ,OAAO,CAAC,gBAAgB,CAAC;IAC7E,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACpD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAA;CAClE;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,CAAC,EAAE,4BAA4B,EACvC,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IACD,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACnD,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACjD,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAA;CACrC,CA4GA"}
|
|
@@ -4,6 +4,26 @@ import { useProvidedRefOrCreate } from './useProvidedRefOrCreate.js';
|
|
|
4
4
|
import { useResizeObserver } from './useResizeObserver.js';
|
|
5
5
|
import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* Returns all scrollable ancestor elements of the given element, plus the window.
|
|
9
|
+
* An element is scrollable if its computed overflow/overflow-x/overflow-y is
|
|
10
|
+
* 'auto', 'scroll', or 'overlay'.
|
|
11
|
+
*/
|
|
12
|
+
function getScrollableAncestors(element) {
|
|
13
|
+
const scrollables = [];
|
|
14
|
+
let current = element.parentElement;
|
|
15
|
+
while (current) {
|
|
16
|
+
const style = getComputedStyle(current);
|
|
17
|
+
const overflowY = style.overflowY;
|
|
18
|
+
const overflowX = style.overflowX;
|
|
19
|
+
if (/auto|scroll|overlay/.test(overflowY) || /auto|scroll|overlay/.test(overflowX)) {
|
|
20
|
+
scrollables.push(current);
|
|
21
|
+
}
|
|
22
|
+
current = current.parentElement;
|
|
23
|
+
}
|
|
24
|
+
scrollables.push(window);
|
|
25
|
+
return scrollables;
|
|
26
|
+
}
|
|
7
27
|
/**
|
|
8
28
|
* Calculates the top and left values for an absolutely-positioned floating element
|
|
9
29
|
* to be anchored to some anchor element. Returns refs for the floating element
|
|
@@ -76,6 +96,33 @@ function useAnchoredPosition(settings, dependencies = []) {
|
|
|
76
96
|
useResizeObserver(updatePosition); // watches for changes in window size
|
|
77
97
|
useResizeObserver(updatePosition, floatingElementRef); // watches for changes in floating element size
|
|
78
98
|
|
|
99
|
+
// Recalculate position when any scrollable ancestor of the anchor scrolls.
|
|
100
|
+
// Uses requestAnimationFrame to avoid layout thrashing during scroll.
|
|
101
|
+
React.useEffect(() => {
|
|
102
|
+
const anchorEl = anchorElementRef.current;
|
|
103
|
+
if (!anchorEl) return;
|
|
104
|
+
let rafId = null;
|
|
105
|
+
const handleScroll = () => {
|
|
106
|
+
if (rafId !== null) return;
|
|
107
|
+
rafId = requestAnimationFrame(() => {
|
|
108
|
+
rafId = null;
|
|
109
|
+
updatePosition();
|
|
110
|
+
});
|
|
111
|
+
};
|
|
112
|
+
const scrollables = getScrollableAncestors(anchorEl);
|
|
113
|
+
for (const scrollable of scrollables) {
|
|
114
|
+
// eslint-disable-next-line github/prefer-observers -- IntersectionObserver cannot detect continuous scroll position changes needed for repositioning
|
|
115
|
+
scrollable.addEventListener('scroll', handleScroll);
|
|
116
|
+
}
|
|
117
|
+
return () => {
|
|
118
|
+
for (const scrollable of scrollables) {
|
|
119
|
+
scrollable.removeEventListener('scroll', handleScroll);
|
|
120
|
+
}
|
|
121
|
+
if (rafId !== null) {
|
|
122
|
+
cancelAnimationFrame(rafId);
|
|
123
|
+
}
|
|
124
|
+
};
|
|
125
|
+
}, [anchorElementRef, updatePosition]);
|
|
79
126
|
return {
|
|
80
127
|
floatingElementRef,
|
|
81
128
|
anchorElementRef,
|
|
@@ -7009,6 +7009,18 @@
|
|
|
7009
7009
|
"id": "components-stack--default",
|
|
7010
7010
|
"code": "() => (\n <Stack>\n <div\n style={{\n background: 'var(--display-lemon-bgColor-muted)',\n borderRadius: 'var(--borderRadius-medium)',\n padding: 'var(--base-size-8)',\n }}\n >\n First\n </div>\n <div\n style={{\n background: 'var(--display-olive-bgColor-muted)',\n borderRadius: 'var(--borderRadius-medium)',\n padding: 'var(--base-size-8)',\n }}\n >\n Second\n </div>\n <div\n style={{\n background: 'var(--display-lime-bgColor-muted)',\n borderRadius: 'var(--borderRadius-medium)',\n padding: 'var(--base-size-8)',\n }}\n >\n Third\n </div>\n </Stack>\n)"
|
|
7011
7011
|
},
|
|
7012
|
+
{
|
|
7013
|
+
"id": "components-stack-features--gap-scale",
|
|
7014
|
+
"code": "() => (\n <Stack gap=\"spacious\">\n {(\n ['none', 'tight', 'condensed', 'cozy', 'normal', 'spacious'] as const\n ).map((gap) => (\n <Stack key={gap}>\n <span\n style={{\n fontSize: 'var(--text-body-size-small)',\n color: 'var(--fgColor-muted)',\n }}\n >\n gap="{gap}"\n </span>\n <Stack direction=\"horizontal\" gap={gap}>\n <Placeholder label=\"A\" />\n <Placeholder label=\"B\" />\n <Placeholder label=\"C\" />\n </Stack>\n </Stack>\n ))}\n </Stack>\n)"
|
|
7015
|
+
},
|
|
7016
|
+
{
|
|
7017
|
+
"id": "components-stack-features--directional-padding",
|
|
7018
|
+
"code": "() => (\n <Stack gap=\"normal\">\n <Stack\n padding=\"normal\"\n style={{\n backgroundColor: 'var(--bgColor-muted)',\n }}\n >\n <Placeholder label='padding=\"normal\" (all sides)' />\n </Stack>\n <Stack\n padding=\"normal\"\n paddingInline=\"spacious\"\n style={{\n backgroundColor: 'var(--bgColor-muted)',\n }}\n >\n <Placeholder label='padding=\"normal\" paddingInline=\"spacious\"' />\n </Stack>\n <Stack\n paddingBlock=\"condensed\"\n paddingInline=\"spacious\"\n style={{\n backgroundColor: 'var(--bgColor-muted)',\n }}\n >\n <Placeholder label='paddingBlock=\"condensed\" paddingInline=\"spacious\"' />\n </Stack>\n </Stack>\n)"
|
|
7019
|
+
},
|
|
7020
|
+
{
|
|
7021
|
+
"id": "components-stack-features--padding-scale",
|
|
7022
|
+
"code": "() => (\n <Stack gap=\"spacious\">\n {(\n ['none', 'tight', 'condensed', 'cozy', 'normal', 'spacious'] as const\n ).map((padding) => (\n <Stack key={padding}>\n <span\n style={{\n fontSize: 'var(--text-body-size-small)',\n color: 'var(--fgColor-muted)',\n }}\n >\n padding="{padding}"\n </span>\n <Stack\n padding={padding}\n style={{\n backgroundColor: 'var(--bgColor-muted)',\n }}\n >\n <Placeholder label=\"Content\" />\n </Stack>\n </Stack>\n ))}\n </Stack>\n)"
|
|
7023
|
+
},
|
|
7012
7024
|
{
|
|
7013
7025
|
"id": "components-stack-features--shrinking-stack-items",
|
|
7014
7026
|
"code": "() => (\n <div\n style={{\n maxWidth: '200px',\n padding: 'var(--base-size-8)',\n }}\n >\n <Stack direction=\"horizontal\" gap=\"condensed\">\n <Stack.Item shrink={false}>\n <ShieldLockIcon size=\"small\" />\n </Stack.Item>\n <Stack.Item>\n This stack has the leading icon set to prevent shrinking\n </Stack.Item>\n </Stack>\n <Stack direction=\"horizontal\" gap=\"condensed\">\n <Stack.Item shrink={true}>\n <ShieldLockIcon size=\"small\" />\n </Stack.Item>\n <Stack.Item>\n This stack item does not have the icon set to prevent shrinking\n </Stack.Item>\n </Stack>\n </div>\n)"
|
|
@@ -7018,7 +7030,7 @@
|
|
|
7018
7030
|
"props": [
|
|
7019
7031
|
{
|
|
7020
7032
|
"name": "gap",
|
|
7021
|
-
"type": "'none' | 'condensed' | 'normal' | 'spacious' | ResponsiveValue<'none' | 'condensed' | 'normal' | 'spacious'>",
|
|
7033
|
+
"type": "'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious' | ResponsiveValue<'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious'>",
|
|
7022
7034
|
"description": "Specify the gap between children elements in the stack."
|
|
7023
7035
|
},
|
|
7024
7036
|
{
|
|
@@ -7043,9 +7055,19 @@
|
|
|
7043
7055
|
},
|
|
7044
7056
|
{
|
|
7045
7057
|
"name": "padding",
|
|
7046
|
-
"type": "'none' | 'condensed' | 'normal' | 'spacious' | ResponsiveValue<'none' | 'condensed' | 'normal' | 'spacious'>",
|
|
7058
|
+
"type": "'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious' | ResponsiveValue<'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious'>",
|
|
7047
7059
|
"description": "Specify the padding of the stack container."
|
|
7048
7060
|
},
|
|
7061
|
+
{
|
|
7062
|
+
"name": "paddingBlock",
|
|
7063
|
+
"type": "'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious' | ResponsiveValue<'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious'>",
|
|
7064
|
+
"description": "Specify the block (vertical) padding of the stack container. Overrides the block axis of padding when both are set."
|
|
7065
|
+
},
|
|
7066
|
+
{
|
|
7067
|
+
"name": "paddingInline",
|
|
7068
|
+
"type": "'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious' | ResponsiveValue<'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious'>",
|
|
7069
|
+
"description": "Specify the inline (horizontal) padding of the stack container. Overrides the inline axis of padding when both are set."
|
|
7070
|
+
},
|
|
7049
7071
|
{
|
|
7050
7072
|
"name": "className",
|
|
7051
7073
|
"type": "string"
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
.prc-Stack-Stack-UQ9k6{align-content:flex-start;align-items:stretch;display:flex;flex-flow:column;gap:var(--stack-gap,var(--stack-gap-normal,1rem))}.prc-Stack-Stack-UQ9k6[data-padding-narrow=none],.prc-Stack-Stack-UQ9k6[data-padding=none]{padding:0}.prc-Stack-Stack-UQ9k6[data-padding-narrow=condensed],.prc-Stack-Stack-UQ9k6[data-padding=condensed]{padding:var(--stack-padding-condensed,.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-narrow=normal],.prc-Stack-Stack-UQ9k6[data-padding=normal]{padding:var(--stack-padding-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-padding-narrow=spacious],.prc-Stack-Stack-UQ9k6[data-padding=spacious]{padding:var(--stack-padding-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-direction-narrow=horizontal],.prc-Stack-Stack-UQ9k6[data-direction=horizontal]{flex-flow:row}.prc-Stack-Stack-UQ9k6[data-direction-narrow=vertical],.prc-Stack-Stack-UQ9k6[data-direction=vertical]{flex-flow:column}.prc-Stack-Stack-UQ9k6[data-gap-narrow=none],.prc-Stack-Stack-UQ9k6[data-gap=none]{--stack-gap:0}.prc-Stack-Stack-UQ9k6[data-gap-narrow=condensed],.prc-Stack-Stack-UQ9k6[data-gap=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.prc-Stack-Stack-UQ9k6[data-gap-narrow=normal],.prc-Stack-Stack-UQ9k6[data-gap=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-gap-narrow=spacious],.prc-Stack-Stack-UQ9k6[data-gap=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-align-narrow=start],.prc-Stack-Stack-UQ9k6[data-align=start]{align-items:flex-start}.prc-Stack-Stack-UQ9k6[data-align-narrow=center],.prc-Stack-Stack-UQ9k6[data-align=center]{align-items:center}.prc-Stack-Stack-UQ9k6[data-align-narrow=end],.prc-Stack-Stack-UQ9k6[data-align=end]{align-items:flex-end}.prc-Stack-Stack-UQ9k6[data-align-narrow=baseline],.prc-Stack-Stack-UQ9k6[data-align=baseline]{align-items:baseline}.prc-Stack-Stack-UQ9k6[data-justify-narrow=start],.prc-Stack-Stack-UQ9k6[data-justify=start]{justify-content:flex-start}.prc-Stack-Stack-UQ9k6[data-justify-narrow=center],.prc-Stack-Stack-UQ9k6[data-justify=center]{justify-content:center}.prc-Stack-Stack-UQ9k6[data-justify-narrow=end],.prc-Stack-Stack-UQ9k6[data-justify=end]{justify-content:flex-end}.prc-Stack-Stack-UQ9k6[data-justify-narrow=space-between],.prc-Stack-Stack-UQ9k6[data-justify=space-between]{justify-content:space-between}.prc-Stack-Stack-UQ9k6[data-justify-narrow=space-evenly],.prc-Stack-Stack-UQ9k6[data-justify=space-evenly]{justify-content:space-evenly}.prc-Stack-Stack-UQ9k6[data-wrap-narrow=wrap],.prc-Stack-Stack-UQ9k6[data-wrap=wrap]{flex-wrap:wrap}.prc-Stack-Stack-UQ9k6[data-wrap-narrow=nowrap],.prc-Stack-Stack-UQ9k6[data-wrap=nowrap]{flex-wrap:nowrap}@media (min-width:48rem){.prc-Stack-Stack-UQ9k6[data-padding-regular=none]{padding:0}.prc-Stack-Stack-UQ9k6[data-padding-regular=condensed]{padding:var(--stack-padding-condensed,.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-regular=normal]{padding:var(--stack-padding-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-padding-regular=spacious]{padding:var(--stack-padding-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-direction-regular=horizontal]{flex-flow:row}.prc-Stack-Stack-UQ9k6[data-direction-regular=vertical]{flex-flow:column}.prc-Stack-Stack-UQ9k6[data-gap-regular=none]{--stack-gap:0}.prc-Stack-Stack-UQ9k6[data-gap-regular=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.prc-Stack-Stack-UQ9k6[data-gap-regular=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-gap-regular=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-align-regular=start]{align-items:flex-start}.prc-Stack-Stack-UQ9k6[data-align-regular=center]{align-items:center}.prc-Stack-Stack-UQ9k6[data-align-regular=end]{align-items:flex-end}.prc-Stack-Stack-UQ9k6[data-align-regular=baseline]{align-items:baseline}.prc-Stack-Stack-UQ9k6[data-justify-regular=start]{justify-content:flex-start}.prc-Stack-Stack-UQ9k6[data-justify-regular=center]{justify-content:center}.prc-Stack-Stack-UQ9k6[data-justify-regular=end]{justify-content:flex-end}.prc-Stack-Stack-UQ9k6[data-justify-regular=space-between]{justify-content:space-between}.prc-Stack-Stack-UQ9k6[data-justify-regular=space-evenly]{justify-content:space-evenly}.prc-Stack-Stack-UQ9k6[data-wrap-regular=wrap]{flex-wrap:wrap}.prc-Stack-Stack-UQ9k6[data-wrap-regular=nowrap]{flex-wrap:nowrap}}@media (min-width:87.5rem){.prc-Stack-Stack-UQ9k6[data-padding-wide=none]{padding:0}.prc-Stack-Stack-UQ9k6[data-padding-wide=condensed]{padding:var(--stack-padding-condensed,.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-wide=normal]{padding:var(--stack-padding-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-padding-wide=spacious]{padding:var(--stack-padding-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-direction-wide=horizontal]{flex-flow:row}.prc-Stack-Stack-UQ9k6[data-direction-wide=vertical]{flex-flow:column}.prc-Stack-Stack-UQ9k6[data-gap-wide=none]{--stack-gap:0}.prc-Stack-Stack-UQ9k6[data-gap-wide=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.prc-Stack-Stack-UQ9k6[data-gap-wide=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-gap-wide=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-align-wide=start]{align-items:flex-start}.prc-Stack-Stack-UQ9k6[data-align-wide=center]{align-items:center}.prc-Stack-Stack-UQ9k6[data-align-wide=end]{align-items:flex-end}.prc-Stack-Stack-UQ9k6[data-align-wide=baseline]{align-items:baseline}.prc-Stack-Stack-UQ9k6[data-justify-wide=start]{justify-content:flex-start}.prc-Stack-Stack-UQ9k6[data-justify-wide=center]{justify-content:center}.prc-Stack-Stack-UQ9k6[data-justify-wide=end]{justify-content:flex-end}.prc-Stack-Stack-UQ9k6[data-justify-wide=space-between]{justify-content:space-between}.prc-Stack-Stack-UQ9k6[data-justify-wide=space-evenly]{justify-content:space-evenly}.prc-Stack-Stack-UQ9k6[data-wrap-wide=wrap]{flex-wrap:wrap}.prc-Stack-Stack-UQ9k6[data-wrap-wide=nowrap]{flex-wrap:nowrap}}.prc-Stack-StackItem-TzbLx{flex:0 1 auto;min-inline-size:0}.prc-Stack-StackItem-TzbLx[data-shrink-narrow=false],.prc-Stack-StackItem-TzbLx[data-shrink=false]{flex-shrink:0}.prc-Stack-StackItem-TzbLx[data-grow-narrow=true],.prc-Stack-StackItem-TzbLx[data-grow=true]{flex-grow:1}@media (min-width:48rem){.prc-Stack-StackItem-TzbLx[data-grow-regular=true]{flex-grow:1}.prc-Stack-StackItem-TzbLx[data-grow-regular=false]{flex-grow:0}.prc-Stack-StackItem-TzbLx[data-shrink-regular=true]{flex-shrink:1}.prc-Stack-StackItem-TzbLx[data-shrink-regular=false]{flex-shrink:0}}@media (min-width:87.5rem){.prc-Stack-StackItem-TzbLx[data-grow-wide=true]{flex-grow:1}.prc-Stack-StackItem-TzbLx[data-grow-wide=false]{flex-grow:0}.prc-Stack-StackItem-TzbLx[data-shrink-wide=true]{flex-shrink:1}.prc-Stack-StackItem-TzbLx[data-shrink-wide=false]{flex-shrink:0}}
|
|
2
|
-
/*# sourceMappingURL=Stack-9e7b935d.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Stack/Stack.module.css.js"],"names":[],"mappings":"AAAA,uBAIE,wBAAyB,CADzB,mBAAoB,CAFpB,YAAa,CACb,gBAAiB,CAGjB,iDA+RF,CA7RE,2FAEE,SACF,CAEA,qGAGE,4CACF,CAEA,+FAGE,wCACF,CAEA,mGAGE,4CACF,CAEA,2GAEE,aACF,CAEA,uGAEE,gBACF,CAEA,mFAEE,aACF,CAEA,6FAEE,6CACF,CAEA,uFAEE,wCACF,CAEA,2FAEE,4CACF,CAEA,yFAEE,sBACF,CAEA,2FAEE,kBACF,CAEA,qFAEE,oBACF,CAEA,+FAEE,oBACF,CAEA,6FAEE,0BACF,CAEA,+FAEE,sBACF,CAEA,yFAEE,wBACF,CAEA,6GAEE,6BACF,CAEA,2GAEE,4BACF,CAEA,qFAEE,cACF,CAEA,yFAEE,gBACF,CAEA,yBACE,kDACE,SACF,CAEA,uDAEE,4CACF,CAEA,oDAEE,wCACF,CAEA,sDAEE,4CACF,CAEA,0DACE,aACF,CAEA,wDACE,gBACF,CAEA,8CACE,aACF,CAEA,mDACE,6CACF,CAEA,gDACE,wCACF,CAEA,kDACE,4CACF,CAEA,iDACE,sBACF,CAEA,kDACE,kBACF,CAEA,+CACE,oBACF,CAEA,oDACE,oBACF,CAEA,mDACE,0BACF,CAEA,oDACE,sBACF,CAEA,iDACE,wBACF,CAEA,2DACE,6BACF,CAEA,0DACE,4BACF,CAEA,+CACE,cACF,CAEA,iDACE,gBACF,CACF,CAEA,2BACE,+CACE,SACF,CAEA,oDAEE,4CACF,CAEA,iDAEE,wCACF,CAEA,mDAEE,4CACF,CAEA,uDACE,aACF,CAEA,qDACE,gBACF,CAEA,2CACE,aACF,CAEA,gDACE,6CACF,CAEA,6CACE,wCACF,CAEA,+CACE,4CACF,CAEA,8CACE,sBACF,CAEA,+CACE,kBACF,CAEA,4CACE,oBACF,CAEA,iDACE,oBACF,CAEA,gDACE,0BACF,CAEA,iDACE,sBACF,CAEA,8CACE,wBACF,CAEA,wDACE,6BACF,CAEA,uDACE,4BACF,CAEA,4CACE,cACF,CAEA,8CACE,gBACF,CACF,CAGF,2BACE,aAAc,CACd,iBA+CF,CA7CE,mGAEE,aACF,CAEA,6FAEE,WACF,CAEA,yBACE,mDACE,WACF,CAEA,oDACE,WACF,CAEA,qDACE,aACF,CAEA,sDACE,aACF,CACF,CAEA,2BACE,gDACE,WACF,CAEA,iDACE,WACF,CAEA,kDACE,aACF,CAEA,mDACE,aACF,CACF","file":"Stack-9e7b935d.css","sourcesContent":[".Stack {\n display: flex;\n flex-flow: column;\n align-items: stretch;\n align-content: flex-start;\n gap: var(--stack-gap, var(--stack-gap-normal));\n\n &[data-padding='none'],\n &[data-padding-narrow='none'] {\n padding: 0;\n }\n\n &[data-padding='condensed'],\n &[data-padding-narrow='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-condensed);\n }\n\n &[data-padding='normal'],\n &[data-padding-narrow='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-normal);\n }\n\n &[data-padding='spacious'],\n &[data-padding-narrow='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-spacious);\n }\n\n &[data-direction='horizontal'],\n &[data-direction-narrow='horizontal'] {\n flex-flow: row;\n }\n\n &[data-direction='vertical'],\n &[data-direction-narrow='vertical'] {\n flex-flow: column;\n }\n\n &[data-gap='none'],\n &[data-gap-narrow='none'] {\n --stack-gap: 0;\n }\n\n &[data-gap='condensed'],\n &[data-gap-narrow='condensed'] {\n --stack-gap: var(--stack-gap-condensed);\n }\n\n &[data-gap='normal'],\n &[data-gap-narrow='normal'] {\n --stack-gap: var(--stack-gap-normal);\n }\n\n &[data-gap='spacious'],\n &[data-gap-narrow='spacious'] {\n --stack-gap: var(--stack-gap-spacious);\n }\n\n &[data-align='start'],\n &[data-align-narrow='start'] {\n align-items: flex-start;\n }\n\n &[data-align='center'],\n &[data-align-narrow='center'] {\n align-items: center;\n }\n\n &[data-align='end'],\n &[data-align-narrow='end'] {\n align-items: flex-end;\n }\n\n &[data-align='baseline'],\n &[data-align-narrow='baseline'] {\n align-items: baseline;\n }\n\n &[data-justify='start'],\n &[data-justify-narrow='start'] {\n justify-content: flex-start;\n }\n\n &[data-justify='center'],\n &[data-justify-narrow='center'] {\n justify-content: center;\n }\n\n &[data-justify='end'],\n &[data-justify-narrow='end'] {\n justify-content: flex-end;\n }\n\n &[data-justify='space-between'],\n &[data-justify-narrow='space-between'] {\n justify-content: space-between;\n }\n\n &[data-justify='space-evenly'],\n &[data-justify-narrow='space-evenly'] {\n justify-content: space-evenly;\n }\n\n &[data-wrap='wrap'],\n &[data-wrap-narrow='wrap'] {\n flex-wrap: wrap;\n }\n\n &[data-wrap='nowrap'],\n &[data-wrap-narrow='nowrap'] {\n flex-wrap: nowrap;\n }\n\n @media (--viewportRange-regular) {\n &[data-padding-regular='none'] {\n padding: 0;\n }\n\n &[data-padding-regular='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-condensed);\n }\n\n &[data-padding-regular='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-normal);\n }\n\n &[data-padding-regular='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-spacious);\n }\n\n &[data-direction-regular='horizontal'] {\n flex-flow: row;\n }\n\n &[data-direction-regular='vertical'] {\n flex-flow: column;\n }\n\n &[data-gap-regular='none'] {\n --stack-gap: 0;\n }\n\n &[data-gap-regular='condensed'] {\n --stack-gap: var(--stack-gap-condensed);\n }\n\n &[data-gap-regular='normal'] {\n --stack-gap: var(--stack-gap-normal);\n }\n\n &[data-gap-regular='spacious'] {\n --stack-gap: var(--stack-gap-spacious);\n }\n\n &[data-align-regular='start'] {\n align-items: flex-start;\n }\n\n &[data-align-regular='center'] {\n align-items: center;\n }\n\n &[data-align-regular='end'] {\n align-items: flex-end;\n }\n\n &[data-align-regular='baseline'] {\n align-items: baseline;\n }\n\n &[data-justify-regular='start'] {\n justify-content: flex-start;\n }\n\n &[data-justify-regular='center'] {\n justify-content: center;\n }\n\n &[data-justify-regular='end'] {\n justify-content: flex-end;\n }\n\n &[data-justify-regular='space-between'] {\n justify-content: space-between;\n }\n\n &[data-justify-regular='space-evenly'] {\n justify-content: space-evenly;\n }\n\n &[data-wrap-regular='wrap'] {\n flex-wrap: wrap;\n }\n\n &[data-wrap-regular='nowrap'] {\n flex-wrap: nowrap;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-padding-wide='none'] {\n padding: 0;\n }\n\n &[data-padding-wide='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-condensed);\n }\n\n &[data-padding-wide='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-normal);\n }\n\n &[data-padding-wide='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-spacious);\n }\n\n &[data-direction-wide='horizontal'] {\n flex-flow: row;\n }\n\n &[data-direction-wide='vertical'] {\n flex-flow: column;\n }\n\n &[data-gap-wide='none'] {\n --stack-gap: 0;\n }\n\n &[data-gap-wide='condensed'] {\n --stack-gap: var(--stack-gap-condensed);\n }\n\n &[data-gap-wide='normal'] {\n --stack-gap: var(--stack-gap-normal);\n }\n\n &[data-gap-wide='spacious'] {\n --stack-gap: var(--stack-gap-spacious);\n }\n\n &[data-align-wide='start'] {\n align-items: flex-start;\n }\n\n &[data-align-wide='center'] {\n align-items: center;\n }\n\n &[data-align-wide='end'] {\n align-items: flex-end;\n }\n\n &[data-align-wide='baseline'] {\n align-items: baseline;\n }\n\n &[data-justify-wide='start'] {\n justify-content: flex-start;\n }\n\n &[data-justify-wide='center'] {\n justify-content: center;\n }\n\n &[data-justify-wide='end'] {\n justify-content: flex-end;\n }\n\n &[data-justify-wide='space-between'] {\n justify-content: space-between;\n }\n\n &[data-justify-wide='space-evenly'] {\n justify-content: space-evenly;\n }\n\n &[data-wrap-wide='wrap'] {\n flex-wrap: wrap;\n }\n\n &[data-wrap-wide='nowrap'] {\n flex-wrap: nowrap;\n }\n }\n}\n\n.StackItem {\n flex: 0 1 auto;\n min-inline-size: 0;\n\n &[data-shrink='false'],\n &[data-shrink-narrow='false'] {\n flex-shrink: 0;\n }\n\n &[data-grow='true'],\n &[data-grow-narrow='true'] {\n flex-grow: 1;\n }\n\n @media (--viewportRange-regular) {\n &[data-grow-regular='true'] {\n flex-grow: 1;\n }\n\n &[data-grow-regular='false'] {\n flex-grow: 0;\n }\n\n &[data-shrink-regular='true'] {\n flex-shrink: 1;\n }\n\n &[data-shrink-regular='false'] {\n flex-shrink: 0;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-grow-wide='true'] {\n flex-grow: 1;\n }\n\n &[data-grow-wide='false'] {\n flex-grow: 0;\n }\n\n &[data-shrink-wide='true'] {\n flex-shrink: 1;\n }\n\n &[data-shrink-wide='false'] {\n flex-shrink: 0;\n }\n }\n}\n"]}
|