@primer/react 38.40.2-rc.fdfbe71e5 → 38.41.0-rc.61d283273
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 +11 -1
- package/dist/ActionBar/ActionBar.js +30 -33
- package/dist/ActionList/{ActionList-1ff5220c.css → ActionList-64885d7a.css} +2 -2
- package/dist/ActionList/ActionList-64885d7a.css.map +1 -0
- package/dist/ActionList/ActionList.module.css.js +1 -1
- package/dist/ActionList/Description.js +2 -2
- package/dist/ActionList/Divider.js +1 -1
- package/dist/ActionList/Group.js +12 -12
- package/dist/ActionList/GroupHeadingTrailingAction.js +1 -10
- package/dist/ActionList/Heading.js +1 -1
- package/dist/ActionList/Item.js +19 -19
- package/dist/ActionList/LinkItem.js +4 -4
- package/dist/ActionList/List.js +2 -2
- package/dist/ActionList/Selection.js +6 -6
- package/dist/ActionList/TrailingAction.js +3 -3
- package/dist/ActionList/Visuals.js +9 -9
- package/dist/ActionList/index.d.ts +1 -1
- package/dist/ActionList/shared.d.ts +1 -1
- package/dist/ActionMenu/ActionMenu.js +8 -11
- package/dist/AnchoredOverlay/AnchoredOverlay.js +4 -4
- package/dist/Autocomplete/Autocomplete.js +3 -3
- package/dist/Autocomplete/AutocompleteInput.js +1 -1
- package/dist/Autocomplete/AutocompleteMenu.js +111 -106
- package/dist/Autocomplete/AutocompleteOverlay.js +2 -2
- package/dist/Avatar/Avatar.js +1 -1
- package/dist/AvatarStack/AvatarStack.js +3 -3
- package/dist/Banner/Banner.js +21 -21
- package/dist/BaseStyles.js +1 -1
- package/dist/Blankslate/Blankslate.js +10 -11
- package/dist/BranchName/BranchName.js +1 -1
- package/dist/Breadcrumbs/Breadcrumbs.js +20 -29
- package/dist/Button/Button.js +1 -1
- package/dist/Button/ButtonBase-c8dab214.css +2 -0
- package/dist/Button/ButtonBase-c8dab214.css.map +1 -0
- package/dist/Button/ButtonBase.js +12 -9
- package/dist/Button/ButtonBase.module.css.js +1 -1
- package/dist/Button/IconButton.js +3 -3
- package/dist/Button/LinkButton.js +1 -1
- package/dist/ButtonGroup/ButtonGroup.js +2 -3
- package/dist/Card/Card.js +16 -16
- package/dist/Checkbox/Checkbox.js +1 -1
- package/dist/CheckboxGroup/CheckboxGroup.js +2 -2
- package/dist/CircleBadge/CircleBadge.js +2 -2
- package/dist/ConfirmationDialog/ConfirmationDialog.js +1 -5
- package/dist/CounterLabel/CounterLabel.js +2 -2
- package/dist/DataTable/DataTable.js +7 -8
- package/dist/DataTable/ErrorDialog.js +1 -1
- package/dist/DataTable/Pagination.js +23 -23
- package/dist/DataTable/Table.js +25 -27
- package/dist/DataTable/TableGroup.js +10 -10
- package/dist/Details/Details.js +2 -2
- package/dist/Dialog/Dialog.js +20 -23
- package/dist/FeatureFlags/DefaultFeatureFlags.js +2 -1
- package/dist/FeatureFlags/FeatureFlags.js +1 -1
- package/dist/FilteredActionList/FilteredActionList.js +18 -19
- package/dist/FilteredActionList/FilteredActionListInput.js +2 -2
- package/dist/FilteredActionList/FilteredActionListLoaders.js +10 -11
- package/dist/Flash/Flash.js +1 -4
- package/dist/FormControl/FormControl.js +8 -8
- package/dist/FormControl/FormControlCaption.js +1 -1
- package/dist/FormControl/FormControlLabel.js +1 -1
- package/dist/FormControl/FormControlLeadingVisual.js +1 -1
- package/dist/FormControl/_FormControlValidation.js +1 -1
- package/dist/Header/Header.js +3 -3
- package/dist/Heading/Heading.js +1 -1
- package/dist/Hidden/Hidden.js +1 -1
- package/dist/InlineMessage/InlineMessage.js +11 -11
- package/dist/KeybindingHint/KeybindingHint.js +3 -3
- package/dist/KeybindingHint/components/Chord.js +3 -3
- package/dist/KeybindingHint/components/Key.js +3 -3
- package/dist/KeybindingHint/components/Sequence.js +1 -1
- package/dist/KeybindingHint/platform.js +0 -8
- package/dist/Label/Label.js +1 -1
- package/dist/LabelGroup/LabelGroup.js +18 -18
- package/dist/Link/Link.js +1 -1
- package/dist/NavList/NavList.js +24 -24
- package/dist/Octicon/Octicon.js +1 -4
- package/dist/Overlay/Overlay.js +3 -3
- package/dist/PageHeader/PageHeader.js +21 -21
- package/dist/PageLayout/DragHandle.js +1 -1
- package/dist/PageLayout/PageLayout.js +26 -26
- package/dist/PageLayout/usePaneWidth.js +0 -5
- package/dist/Pagehead/Pagehead.js +1 -1
- package/dist/Pagination/Pagination.js +9 -10
- package/dist/Popover/Popover.js +3 -3
- package/dist/ProgressBar/ProgressBar.js +3 -3
- package/dist/Radio/Radio.js +1 -1
- package/dist/RadioGroup/RadioGroup.js +2 -2
- package/dist/RelativeTime/RelativeTime.js +1 -1
- package/dist/ScrollableRegion/ScrollableRegion.js +1 -1
- package/dist/SegmentedControl/SegmentedControl.js +13 -13
- package/dist/SegmentedControl/SegmentedControlAction.js +6 -6
- package/dist/SegmentedControl/SegmentedControlButton.js +8 -8
- package/dist/SegmentedControl/SegmentedControlDivider.js +1 -1
- package/dist/SegmentedControl/SegmentedControlIconButton.js +5 -5
- package/dist/Select/Select.js +9 -9
- package/dist/SelectPanel/SelectPanel.js +24 -27
- package/dist/SelectPanel/SelectPanelMessage.js +5 -5
- package/dist/SideNav.js +2 -2
- package/dist/Skeleton/SkeletonBox.js +1 -1
- package/dist/SkeletonAvatar/SkeletonAvatar.js +1 -1
- package/dist/SkeletonText/SkeletonText.js +3 -3
- package/dist/Spinner/Spinner.js +5 -5
- package/dist/SplitPageLayout/SplitPageLayout.js +6 -6
- package/dist/Stack/Stack.js +2 -2
- package/dist/StateLabel/StateLabel.js +2 -2
- package/dist/SubNav/SubNav.js +5 -5
- package/dist/TabNav/TabNav.js +4 -10
- package/dist/Text/Text.js +1 -1
- package/dist/TextInput/TextInput.js +13 -13
- package/dist/TextInputWithTokens/TextInputWithTokens.js +12 -15
- package/dist/Textarea/Textarea.js +7 -7
- package/dist/ThemeProvider.js +1 -2
- package/dist/Timeline/Timeline.js +11 -14
- package/dist/ToggleSwitch/ToggleSwitch.js +18 -18
- package/dist/Token/IssueLabelToken.js +3 -3
- package/dist/Token/Token.js +7 -7
- package/dist/Token/TokenBase.js +1 -1
- package/dist/Token/_RemoveTokenButton.js +4 -5
- package/dist/Token/_TokenTextContainer.js +1 -1
- package/dist/Tooltip/Tooltip.js +2 -5
- package/dist/TooltipV2/Tooltip.js +7 -7
- package/dist/TopicTag/TopicTag.js +1 -1
- package/dist/TopicTag/TopicTagGroup.js +1 -1
- package/dist/TreeView/TreeView.js +52 -59
- package/dist/TreeView/useRovingTabIndex.js +1 -0
- package/dist/TreeView/useTypeahead.js +3 -3
- package/dist/Truncate/Truncate.js +1 -2
- package/dist/UnderlineNav/UnderlineNav.js +18 -18
- package/dist/UnderlineNav/UnderlineNavItem.js +2 -2
- package/dist/VisuallyHidden/VisuallyHidden.js +1 -1
- package/dist/_VisuallyHidden.js +1 -1
- package/dist/deprecated/ActionList/Divider.js +1 -1
- package/dist/deprecated/ActionList/Group.js +2 -5
- package/dist/deprecated/ActionList/Header.js +2 -5
- package/dist/deprecated/ActionList/Item.js +17 -20
- package/dist/deprecated/ActionList/List.js +4 -13
- package/dist/deprecated/ActionMenu.js +4 -6
- package/dist/deprecated/DialogV1/Dialog.js +5 -5
- package/dist/deprecated/FilteredSearch/FilteredSearch.js +1 -1
- package/dist/deprecated/UnderlineNav/UnderlineNav.js +4 -4
- package/dist/experimental/IssueLabel/IssueLabel.js +4 -4
- package/dist/experimental/SelectPanel2/SelectPanel.js +42 -49
- package/dist/experimental/Tabs/Tabs.js +1 -1
- package/dist/experimental/UnderlinePanels/UnderlinePanels.js +6 -9
- package/dist/experimental/index.js +1 -1
- package/dist/hooks/useMergedRefs.js +0 -12
- package/dist/hooks/useResponsiveValue.js +0 -5
- package/dist/hooks/useSlots.js +0 -48
- package/dist/internal/components/ButtonReset.js +1 -1
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.js +9 -9
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.js +1 -1
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.js +4 -4
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.js +1 -1
- package/dist/internal/components/ConditionalWrapper.js +2 -2
- package/dist/internal/components/InputLabel.js +3 -3
- package/dist/internal/components/InputValidation.js +4 -4
- package/dist/internal/components/OverflowObserverProvider.js +1 -1
- package/dist/internal/components/TextInputInnerAction.js +6 -6
- package/dist/internal/components/TextInputInnerVisualSlot.js +5 -5
- package/dist/internal/components/TextInputWrapper.js +2 -2
- package/dist/internal/components/ThemeProviderBase.js +3 -3
- package/dist/internal/components/UnderlineTabbedInterface.js +11 -11
- package/dist/internal/components/UnstyledTextInput.js +1 -1
- package/dist/internal/components/ValidationAnimationContainer.js +2 -2
- package/dist/internal/hooks/useOverflowObserver.js +1 -2
- package/dist/live-region/Announce.js +1 -1
- package/dist/live-region/AriaAlert.js +1 -1
- package/dist/live-region/AriaStatus.js +1 -1
- package/dist/next/ThemeProvider.js +1 -1
- package/dist/utils/descendant-registry.js +1 -7
- package/dist/utils/modern-polymorphic.js +0 -10
- package/generated/components.json +13 -3
- package/generated/hooks.json +1 -1
- package/package.json +3 -3
- package/dist/ActionList/ActionList-1ff5220c.css.map +0 -1
- package/dist/Button/ButtonBase-014fae23.css +0 -2
- package/dist/Button/ButtonBase-014fae23.css.map +0 -1
|
@@ -18,7 +18,7 @@ const BreadcrumbsList = (t0) => {
|
|
|
18
18
|
const { children } = t0;
|
|
19
19
|
let t1;
|
|
20
20
|
if ($[0] !== children) {
|
|
21
|
-
t1 =
|
|
21
|
+
t1 = /* @__PURE__ */ jsx("ol", {
|
|
22
22
|
className: Breadcrumbs_module_css_default.BreadcrumbsList,
|
|
23
23
|
children
|
|
24
24
|
});
|
|
@@ -123,7 +123,7 @@ const BreadcrumbsMenuItem = /*#__PURE__*/ React.forwardRef((t0, menuRefCallback)
|
|
|
123
123
|
const t9 = isOpen ? "true" : "false";
|
|
124
124
|
let t10;
|
|
125
125
|
if ($[13] !== rest || $[14] !== t8 || $[15] !== t9) {
|
|
126
|
-
t10 =
|
|
126
|
+
t10 = /* @__PURE__ */ jsx(IconButton, {
|
|
127
127
|
as: "summary",
|
|
128
128
|
role: "button",
|
|
129
129
|
ref: menuButtonRef,
|
|
@@ -149,17 +149,17 @@ const BreadcrumbsMenuItem = /*#__PURE__*/ React.forwardRef((t0, menuRefCallback)
|
|
|
149
149
|
} else t11 = $[18];
|
|
150
150
|
let t12;
|
|
151
151
|
if ($[19] !== t11) {
|
|
152
|
-
t12 =
|
|
152
|
+
t12 = /* @__PURE__ */ jsx("div", {
|
|
153
153
|
ref: menuContainerRef,
|
|
154
154
|
className: Breadcrumbs_module_css_default.MenuOverlay,
|
|
155
|
-
children:
|
|
155
|
+
children: /* @__PURE__ */ jsx(ActionList, { children: t11 })
|
|
156
156
|
});
|
|
157
157
|
$[19] = t11;
|
|
158
158
|
$[20] = t12;
|
|
159
159
|
} else t12 = $[20];
|
|
160
160
|
let t13;
|
|
161
161
|
if ($[21] !== detailsRefCallback || $[22] !== t10 || $[23] !== t12) {
|
|
162
|
-
t13 =
|
|
162
|
+
t13 = /* @__PURE__ */ jsxs(Details, {
|
|
163
163
|
ref: detailsRefCallback,
|
|
164
164
|
className: Breadcrumbs_module_css_default.MenuDetails,
|
|
165
165
|
"data-component": "Breadcrumbs.MenuItem",
|
|
@@ -339,7 +339,7 @@ function Breadcrumbs(t0) {
|
|
|
339
339
|
const t11 = `${effectiveMenuItems.length} more breadcrumb items`;
|
|
340
340
|
let t12;
|
|
341
341
|
if ($[29] !== effectiveMenuItems || $[30] !== t11) {
|
|
342
|
-
t12 =
|
|
342
|
+
t12 = /* @__PURE__ */ jsx(BreadcrumbsMenuItem, {
|
|
343
343
|
ref: measureMenuButton,
|
|
344
344
|
items: effectiveMenuItems,
|
|
345
345
|
"aria-label": t11
|
|
@@ -350,12 +350,12 @@ function Breadcrumbs(t0) {
|
|
|
350
350
|
} else t12 = $[31];
|
|
351
351
|
let t13;
|
|
352
352
|
if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
|
|
353
|
-
t13 =
|
|
353
|
+
t13 = /* @__PURE__ */ jsx(ItemSeparator, {});
|
|
354
354
|
$[32] = t13;
|
|
355
355
|
} else t13 = $[32];
|
|
356
356
|
let t14;
|
|
357
357
|
if ($[33] !== t12) {
|
|
358
|
-
t14 =
|
|
358
|
+
t14 = /* @__PURE__ */ jsxs("li", {
|
|
359
359
|
className: Breadcrumbs_module_css_default.BreadcrumbsItem,
|
|
360
360
|
"data-overflow-menu": "",
|
|
361
361
|
children: [t12, t13]
|
|
@@ -367,12 +367,12 @@ function Breadcrumbs(t0) {
|
|
|
367
367
|
const visibleElements = visibleItems.map(_temp5);
|
|
368
368
|
let t15;
|
|
369
369
|
if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
|
|
370
|
-
t15 =
|
|
370
|
+
t15 = /* @__PURE__ */ jsx(ItemSeparator, {});
|
|
371
371
|
$[35] = t15;
|
|
372
372
|
} else t15 = $[35];
|
|
373
373
|
let t16;
|
|
374
374
|
if ($[36] !== rootItem) {
|
|
375
|
-
t16 =
|
|
375
|
+
t16 = /* @__PURE__ */ jsxs("li", {
|
|
376
376
|
className: Breadcrumbs_module_css_default.BreadcrumbsItem,
|
|
377
377
|
children: [rootItem, t15]
|
|
378
378
|
}, "rootElement");
|
|
@@ -404,13 +404,13 @@ function Breadcrumbs(t0) {
|
|
|
404
404
|
} else t11 = $[39];
|
|
405
405
|
let t12;
|
|
406
406
|
if ($[40] !== finalChildren) {
|
|
407
|
-
t12 =
|
|
407
|
+
t12 = /* @__PURE__ */ jsx(BreadcrumbsList, { children: finalChildren });
|
|
408
408
|
$[40] = finalChildren;
|
|
409
409
|
$[41] = t12;
|
|
410
410
|
} else t12 = $[41];
|
|
411
411
|
let t13;
|
|
412
412
|
if ($[42] !== overflow || $[43] !== style || $[44] !== t11 || $[45] !== t12 || $[46] !== variant) {
|
|
413
|
-
t13 =
|
|
413
|
+
t13 = /* @__PURE__ */ jsx("nav", {
|
|
414
414
|
className: t11,
|
|
415
415
|
"aria-label": "Breadcrumbs",
|
|
416
416
|
style,
|
|
@@ -430,19 +430,17 @@ function Breadcrumbs(t0) {
|
|
|
430
430
|
return t13;
|
|
431
431
|
}
|
|
432
432
|
function _temp5(child_1, index) {
|
|
433
|
-
return
|
|
433
|
+
return /* @__PURE__ */ jsxs("li", {
|
|
434
434
|
className: Breadcrumbs_module_css_default.BreadcrumbsItem,
|
|
435
|
-
children: [child_1,
|
|
435
|
+
children: [child_1, /* @__PURE__ */ jsx(ItemSeparator, {})]
|
|
436
436
|
}, `visible + ${index}`);
|
|
437
437
|
}
|
|
438
|
-
_temp5.displayName = "_temp5";
|
|
439
438
|
function _temp4(child_0) {
|
|
440
|
-
return
|
|
439
|
+
return /* @__PURE__ */ jsx("li", {
|
|
441
440
|
className: Breadcrumbs_module_css_default.ItemWrapper,
|
|
442
441
|
children: child_0
|
|
443
442
|
});
|
|
444
443
|
}
|
|
445
|
-
_temp4.displayName = "_temp4";
|
|
446
444
|
function _temp3(child) {
|
|
447
445
|
return child.offsetWidth;
|
|
448
446
|
}
|
|
@@ -453,15 +451,15 @@ const ItemSeparator = () => {
|
|
|
453
451
|
const $ = c(1);
|
|
454
452
|
let t0;
|
|
455
453
|
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
|
456
|
-
t0 =
|
|
454
|
+
t0 = /* @__PURE__ */ jsx("span", {
|
|
457
455
|
className: Breadcrumbs_module_css_default.ItemSeparator,
|
|
458
|
-
children:
|
|
456
|
+
children: /* @__PURE__ */ jsx("svg", {
|
|
459
457
|
width: "16",
|
|
460
458
|
height: "16",
|
|
461
459
|
viewBox: "0 0 16 16",
|
|
462
460
|
xmlns: "http://www.w3.org/2000/svg",
|
|
463
461
|
"aria-hidden": "true",
|
|
464
|
-
children:
|
|
462
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
465
463
|
d: "M10.956 1.27994L6.06418 14.7201L5 14.7201L9.89181 1.27994L10.956 1.27994Z",
|
|
466
464
|
fill: "currentcolor"
|
|
467
465
|
})
|
|
@@ -473,7 +471,7 @@ const ItemSeparator = () => {
|
|
|
473
471
|
};
|
|
474
472
|
const BreadcrumbsItem = fixedForwardRef((props, ref) => {
|
|
475
473
|
const { as: Component = "a", selected, className, ...rest } = props;
|
|
476
|
-
return
|
|
474
|
+
return /* @__PURE__ */ jsx(Component, {
|
|
477
475
|
className: clsx(className, Breadcrumbs_module_css_default.Item, selected && "selected"),
|
|
478
476
|
"aria-current": selected ? "page" : void 0,
|
|
479
477
|
ref,
|
|
@@ -488,21 +486,14 @@ var Breadcrumbs_default = Object.assign(Breadcrumbs, { Item: BreadcrumbsItemWith
|
|
|
488
486
|
* @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
|
|
489
487
|
*/
|
|
490
488
|
const Breadcrumb = Object.assign(Breadcrumbs, { Item: BreadcrumbsItem });
|
|
491
|
-
/**
|
|
492
|
-
* @deprecated Use the `BreadcrumbsProps` type instead
|
|
493
|
-
*/
|
|
494
|
-
/**
|
|
495
|
-
* @deprecated Use the `BreadcrumbsItemProps` type instead
|
|
496
|
-
*/
|
|
497
489
|
function _temp(item, index) {
|
|
498
490
|
const { children, selected, as: Component, ...itemProps } = item.props;
|
|
499
|
-
return
|
|
491
|
+
return /* @__PURE__ */ jsx(ActionList.LinkItem, {
|
|
500
492
|
as: Component,
|
|
501
493
|
...itemProps,
|
|
502
494
|
"aria-current": selected ? "page" : void 0,
|
|
503
495
|
children
|
|
504
496
|
}, index);
|
|
505
497
|
}
|
|
506
|
-
_temp.displayName = "_temp";
|
|
507
498
|
//#endregion
|
|
508
499
|
export { Breadcrumb, Breadcrumbs_default as default };
|
package/dist/Button/Button.js
CHANGED
|
@@ -18,7 +18,7 @@ const ButtonComponent = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
|
|
|
18
18
|
}
|
|
19
19
|
let t1;
|
|
20
20
|
if ($[3] !== children || $[4] !== forwardedRef || $[5] !== props) {
|
|
21
|
-
t1 =
|
|
21
|
+
t1 = /* @__PURE__ */ jsx(ButtonBase, {
|
|
22
22
|
ref: forwardedRef,
|
|
23
23
|
as: "button",
|
|
24
24
|
type: "button",
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.prc-Button-ButtonBase-9n-Xk{align-items:center;appearance:none;background-color:transparent;border:var(--borderWidth-thin,.0625rem) solid;border-color:var(--button-default-borderColor-rest,#d1d9e0);border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,#25292e);cursor:pointer;display:flex;font-family:inherit;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-8,.5rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);text-align:center;-webkit-text-decoration:none;text-decoration:none;transition:80ms cubic-bezier(.65,0,.35,1);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}.prc-Button-ButtonBase-9n-Xk:has([data-kbd-chord]){padding-inline-end:var(--base-size-6,.375rem)}.prc-Button-ButtonBase-9n-Xk:hover{transition-duration:80ms}.prc-Button-ButtonBase-9n-Xk:focus-visible{box-shadow:none;outline:2px solid var(--focus-outline-color,var(--focus-outlineColor,#0969da));outline-offset:-2px}.prc-Button-ButtonBase-9n-Xk:active{transition:none}.prc-Button-ButtonBase-9n-Xk:where([data-notification-indicator=button],[data-notification-indicator=icon].prc-Button-IconButton-fyge7){position:relative}.prc-Button-ButtonBase-9n-Xk:where([data-notification-indicator=leadingVisual]) .prc-Button-LeadingVisual-UySKu{position:relative}.prc-Button-ButtonBase-9n-Xk:where([data-notification-indicator=button]):before,.prc-Button-ButtonBase-9n-Xk:where([data-notification-indicator=icon].prc-Button-IconButton-fyge7):before,.prc-Button-ButtonBase-9n-Xk:where([data-notification-indicator=leadingVisual]) .prc-Button-LeadingVisual-UySKu:before{background-color:var(--fgColor-accent,#0969da);border-radius:var(--borderRadius-full,624.9375rem);box-shadow:0 0 0 calc(var(--base-size-4,.25rem)/2) var(--bgColor-inset,#f6f8fa);content:"";display:block;height:var(--base-size-8,.5rem);position:absolute;width:var(--base-size-8,.5rem)}.prc-Button-ButtonBase-9n-Xk:where([data-notification-indicator=button]):before{right:calc(var(--base-size-4,.25rem)/-2);top:calc(var(--base-size-4,.25rem)/-2)}.prc-Button-ButtonBase-9n-Xk:where([data-notification-indicator=icon].prc-Button-IconButton-fyge7):before{right:calc(50% - var(--base-size-12,.75rem));top:calc(50% - var(--base-size-12,.75rem))}.prc-Button-ButtonBase-9n-Xk:where([data-notification-indicator=leadingVisual]) .prc-Button-LeadingVisual-UySKu:before{right:calc(var(--base-size-4,.25rem)*-1);top:calc(var(--base-size-4,.25rem)*-1)}.prc-Button-ButtonBase-9n-Xk:disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:not([data-loading=true]),.prc-Button-ButtonBase-9n-Xk[aria-disabled=true][data-loading-disabled-styles=true]{box-shadow:none;cursor:not-allowed}.prc-Button-ButtonBase-9n-Xk:disabled:not(.prc-Button-does-not-exist-3ns8K) .prc-Button-CounterLabel-5hAs4,.prc-Button-ButtonBase-9n-Xk:disabled:not(.prc-Button-does-not-exist-3ns8K) .prc-Button-Visual-YNt2F,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:not([data-loading=true]) .prc-Button-CounterLabel-5hAs4,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:not([data-loading=true]) .prc-Button-Visual-YNt2F,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true][data-loading-disabled-styles=true] .prc-Button-CounterLabel-5hAs4,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true][data-loading-disabled-styles=true] .prc-Button-Visual-YNt2F{color:inherit}@media (forced-colors:active){.prc-Button-ButtonBase-9n-Xk:focus{outline:1px solid transparent}}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-Visual-YNt2F){color:var(--fgColor-muted,#59636e);display:flex;pointer-events:none}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-VisualWrap-E4cnq){display:flex;pointer-events:none}.prc-Button-ButtonBase-9n-Xk:where(.prc-Button-IconButton-fyge7){display:inline-grid;flex-shrink:0;min-width:unset;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.prc-Button-ButtonBase-9n-Xk:where(.prc-Button-IconButton-fyge7):where([data-size=small]){width:var(--control-small-size,1.75rem)}.prc-Button-ButtonBase-9n-Xk:where(.prc-Button-IconButton-fyge7):where([data-size=large]){width:var(--control-large-size,2.5rem)}.prc-Button-ButtonBase-9n-Xk:where([href]){display:inline-flex}.prc-Button-ButtonBase-9n-Xk:where([href]):hover{-webkit-text-decoration:none;text-decoration:none}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-ButtonContent-Iohp5){align-content:center;align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-ButtonContent-Iohp5)>:not(:last-child){margin-right:var(--base-size-8,.5rem)}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-ButtonContent-Iohp5):where([data-align=center]){justify-content:center}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-ButtonContent-Iohp5):where([data-align=start]){justify-content:flex-start}.prc-Button-ButtonBase-9n-Xk :where([data-component=leadingVisual]){grid-area:leadingVisual}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-Label-FWkx3){grid-area:text;line-height:var(--text-body-lineHeight-medium,1.5);white-space:nowrap}.prc-Button-ButtonBase-9n-Xk :where([data-component=trailingVisual]){grid-area:trailingVisual}.prc-Button-ButtonBase-9n-Xk :where([data-component=trailingAction]){margin-right:calc(var(--base-size-4,.25rem)*-1)}.prc-Button-ButtonBase-9n-Xk:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.prc-Button-ButtonBase-9n-Xk:where([data-size=small]) .prc-Button-ButtonContent-Iohp5>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.prc-Button-ButtonBase-9n-Xk:where([data-size=small]) .prc-Button-Label-FWkx3{line-height:var(--text-body-lineHeight-small,1.625)}.prc-Button-ButtonBase-9n-Xk:where([data-size=large]){gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.prc-Button-ButtonBase-9n-Xk:where([data-size=large]) .prc-Button-ButtonContent-Iohp5>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.prc-Button-ButtonBase-9n-Xk:where([data-size=large]):has([data-kbd-chord]){padding-inline-end:var(--base-size-8,.5rem)}.prc-Button-ButtonBase-9n-Xk:where([data-block=block]){width:100%}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]){height:unset;min-height:var(--control-medium-size,2rem);min-width:-moz-fit-content;min-width:fit-content}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]) .prc-Button-ButtonContent-Iohp5{align-self:stretch;flex:1 1 auto;padding-block:calc(var(--control-medium-paddingBlock,.375rem) - var(--base-size-2,.125rem))}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]) .prc-Button-Label-FWkx3{white-space:unset;word-break:break-word}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]):where([data-size=small]){height:unset;min-height:var(--control-small-size,1.75rem)}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]):where([data-size=small]) .prc-Button-ButtonContent-Iohp5{padding-block:calc(var(--control-small-paddingBlock,.25rem) - var(--base-size-2,.125rem))}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]):where([data-size=large]){height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem)}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]):where([data-size=large]) .prc-Button-ButtonContent-Iohp5{padding-block:calc(var(--control-large-paddingBlock,.625rem) - var(--base-size-2,.125rem))}.prc-Button-ButtonBase-9n-Xk:where([data-loading=true]) .prc-Button-LoadingSpinner-6KfaT:not([data-component=leadingVisual],[data-component=trailingVisual],[data-component=trailingAction]){grid-area:text;margin-right:0!important;place-self:center}.prc-Button-ButtonBase-9n-Xk:where([data-loading=true]) .prc-Button-LoadingSpinner-6KfaT:not([data-component=leadingVisual],[data-component=trailingVisual],[data-component=trailingAction])+.prc-Button-Label-FWkx3{visibility:hidden}.prc-Button-ButtonBase-9n-Xk .prc-Button-LoadingSpinner-6KfaT{align-items:center;display:flex;justify-content:center}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]){background-color:var(--button-default-bgColor-rest,#f6f8fa);box-shadow:var(--button-default-shadow-resting,0 1px 0 0 #1f23280a);color:var(--button-default-fgColor-rest,#25292e)}.prc-Button-ButtonBase-9n-Xk[aria-expanded=true]:where([data-variant=default]){background-color:var(--button-default-bgColor-active,#e6eaef);border-color:var(--button-default-borderColor-active,#d1d9e0)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]):hover{background-color:var(--button-default-bgColor-hover,#eff2f5);border-color:var(--button-default-borderColor-hover,#d1d9e0)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]):active{background-color:var(--button-default-bgColor-active,#e6eaef);border-color:var(--button-default-borderColor-active,#d1d9e0)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]):disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=default]):not([data-loading=true]),.prc-Button-ButtonBase-9n-Xk[aria-disabled=true][data-loading-disabled-styles=true]:where([data-variant=default]){background-color:var(--button-default-bgColor-disabled,#eff2f5);border-color:var(--button-default-borderColor-disabled,#818b981a);box-shadow:none;color:var(--control-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]):disabled:not(.prc-Button-does-not-exist-3ns8K) [data-kbd-chord]{background:var(--buttonKeybindingHint-default-bgColor-disabled,#eff2f5);border-color:var(--buttonKeybindingHint-default-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-default-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=default]):not([data-loading=true]) [data-kbd-chord]{background:var(--buttonKeybindingHint-default-bgColor-disabled,#eff2f5);border-color:var(--buttonKeybindingHint-default-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-default-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true][data-loading-disabled-styles=true]:where([data-variant=default]) [data-kbd-chord]{background:var(--buttonKeybindingHint-default-bgColor-disabled,#eff2f5);border-color:var(--buttonKeybindingHint-default-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-default-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-default-bgColor-rest,#818b981f)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]) [data-kbd-chord]{background:var(--buttonKeybindingHint-default-bgColor-rest,#eff2f5);border-color:var(--buttonKeybindingHint-default-borderColor-rest,#d1d9e0b3);color:var(--buttonKeybindingHint-default-fgColor-rest,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]):where(.prc-Button-IconButton-fyge7){color:var(--fgColor-muted,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]){background-color:var(--button-primary-bgColor-rest,#1f883d);border-color:var(--button-primary-borderColor-rest,#1f232826);box-shadow:var(--shadow-resting-small,0 1px 1px 0 #1f23280a,0 1px 2px 0 #1f232808);color:var(--button-primary-fgColor-rest,#fff)}.prc-Button-ButtonBase-9n-Xk[aria-expanded=true]:where([data-variant=primary]){background-color:var(--button-primary-bgColor-active,#197935);box-shadow:var(--button-primary-shadow-selected,inset 0 1px 0 0 #002d114d)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]):hover{background-color:var(--button-primary-bgColor-hover,#1c8139);border-color:var(--button-primary-borderColor-hover,#1f232826)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]):focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,#fff);outline:2px solid var(--focus-outline-color,var(--focus-outlineColor,#0969da));outline-offset:-2px}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]):active{background-color:var(--button-primary-bgColor-active,#197935);box-shadow:var(--button-primary-shadow-selected,inset 0 1px 0 0 #002d114d)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]):disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=primary]):not([data-loading=true]),.prc-Button-ButtonBase-9n-Xk[aria-disabled=true][data-loading-disabled-styles=true]:where([data-variant=primary]){background-color:var(--button-primary-bgColor-disabled,#95d8a6);border-color:var(--button-primary-borderColor-disabled,#95d8a6);box-shadow:none;color:var(--button-primary-fgColor-disabled,#ffffffcc)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]):disabled:not(.prc-Button-does-not-exist-3ns8K) [data-kbd-chord]{background:var(--buttonKeybindingHint-primary-bgColor-disabled,#002d111a);border-color:var(--buttonKeybindingHint-primary-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-primary-fgColor-disabled,#ffffffcc)}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=primary]):not([data-loading=true]) [data-kbd-chord]{background:var(--buttonKeybindingHint-primary-bgColor-disabled,#002d111a);border-color:var(--buttonKeybindingHint-primary-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-primary-fgColor-disabled,#ffffffcc)}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true][data-loading-disabled-styles=true]:where([data-variant=primary]) [data-kbd-chord]{background:var(--buttonKeybindingHint-primary-bgColor-disabled,#002d111a);border-color:var(--buttonKeybindingHint-primary-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-primary-fgColor-disabled,#ffffffcc)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-primary-bgColor-rest,#002d1133)!important;color:var(--button-primary-fgColor-rest,#fff)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]) [data-kbd-chord]{background:var(--buttonKeybindingHint-primary-bgColor-rest,#002d1133);border-color:var(--buttonKeybindingHint-primary-borderColor-rest,#1f232826);color:var(--buttonKeybindingHint-primary-fgColor-rest,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]) .prc-Button-Visual-YNt2F{color:var(--button-primary-fgColor-rest,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]){background-color:var(--button-danger-bgColor-rest,#f6f8fa);box-shadow:var(--button-default-shadow-resting,0 1px 0 0 #1f23280a);color:var(--button-danger-fgColor-rest,#d1242f)}.prc-Button-ButtonBase-9n-Xk[aria-expanded=true]:where([data-variant=danger]){background-color:var(--button-danger-bgColor-active,#a40e26);border-color:var(--button-danger-borderColor-active,#1f232826);box-shadow:var(--button-danger-shadow-selected,inset 0 1px 0 0 #4c001433);color:var(--button-danger-fgColor-active,#fff)}.prc-Button-ButtonBase-9n-Xk[aria-expanded=true]:where([data-variant=danger]) .prc-Button-Visual-YNt2F{color:var(--button-danger-iconColor-hover,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):hover{background-color:var(--button-danger-bgColor-hover,#cf222e);border-color:var(--button-danger-borderColor-hover,#1f232826);box-shadow:var(--shadow-resting-small,0 1px 1px 0 #1f23280a,0 1px 2px 0 #1f232808);color:var(--button-danger-fgColor-hover,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):hover .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-danger-bgColor-hover,#ffffff33)!important;color:var(--buttonCounter-danger-fgColor-hover,#fff)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):hover [data-kbd-chord]{background:var(--buttonKeybindingHint-danger-bgColor-hover,#1f232833);border-color:var(--buttonKeybindingHint-danger-borderColor-hover,#1f232826);color:var(--buttonKeybindingHint-danger-fgColor-hover,#fff);transition:80ms ease-out}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):hover .prc-Button-Visual-YNt2F{color:var(--button-danger-iconColor-hover,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):active{background-color:var(--button-danger-bgColor-active,#a40e26);border-color:var(--button-danger-borderColor-active,#1f232826);box-shadow:var(--button-danger-shadow-selected,inset 0 1px 0 0 #4c001433);color:var(--button-danger-fgColor-active,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):active .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-danger-bgColor-hover,#ffffff33)!important;color:var(--buttonCounter-danger-fgColor-hover,#fff)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):active [data-kbd-chord]{background:var(--buttonKeybindingHint-danger-bgColor-active,#1f232866);border-color:var(--buttonKeybindingHint-danger-borderColor-active,#1f232826);color:var(--buttonKeybindingHint-danger-fgColor-active,#fff);transition:80ms ease-out}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):active .prc-Button-Visual-YNt2F{color:var(--button-danger-iconColor-hover,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=danger]):not([data-loading=true]),.prc-Button-ButtonBase-9n-Xk[aria-disabled=true][data-loading-disabled-styles=true]:where([data-variant=danger]){background-color:var(--button-danger-bgColor-disabled,#eff2f5);border-color:var(--button-default-borderColor-disabled,#818b981a);box-shadow:none;color:var(--button-danger-fgColor-disabled,#d1242f80)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):disabled:not(.prc-Button-does-not-exist-3ns8K) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-danger-bgColor-disabled,#cf222e0d)!important;color:var(--buttonCounter-danger-fgColor-disabled,#d1242f80)!important}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=danger]):not([data-loading=true]) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-danger-bgColor-disabled,#cf222e0d)!important;color:var(--buttonCounter-danger-fgColor-disabled,#d1242f80)!important}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true][data-loading-disabled-styles=true]:where([data-variant=danger]) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-danger-bgColor-disabled,#cf222e0d)!important;color:var(--buttonCounter-danger-fgColor-disabled,#d1242f80)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):disabled:not(.prc-Button-does-not-exist-3ns8K) [data-kbd-chord]{background:var(--buttonKeybindingHint-danger-bgColor-disabled,#eff2f5);border-color:var(--buttonKeybindingHint-danger-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-danger-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=danger]):not([data-loading=true]) [data-kbd-chord]{background:var(--buttonKeybindingHint-danger-bgColor-disabled,#eff2f5);border-color:var(--buttonKeybindingHint-danger-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-danger-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true][data-loading-disabled-styles=true]:where([data-variant=danger]) [data-kbd-chord]{background:var(--buttonKeybindingHint-danger-bgColor-disabled,#eff2f5);border-color:var(--buttonKeybindingHint-danger-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-danger-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-danger-bgColor-rest,#cf222e1a)!important;color:var(--buttonCounter-danger-fgColor-rest,#c21c2c)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]) [data-kbd-chord]{background:var(--buttonKeybindingHint-danger-bgColor-rest,#eff2f5);border-color:var(--buttonKeybindingHint-danger-borderColor-rest,#d1d9e0b3);color:var(--buttonKeybindingHint-danger-fgColor-rest,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]) .prc-Button-Visual-YNt2F{color:var(--button-danger-iconColor-rest,#d1242f)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]){border-color:var(--button-invisible-borderColor-rest,#ffffff00);box-shadow:none;color:var(--button-default-fgColor-rest,#25292e)}.prc-Button-ButtonBase-9n-Xk[aria-expanded=true]:where([data-variant=invisible]){background-color:var(--button-invisible-bgColor-active,#818b9826)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):hover{background-color:var(--button-invisible-bgColor-hover,#818b981a);border-color:var(--button-invisible-borderColor-hover,#ffffff00)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):hover .prc-Button-Visual-YNt2F{color:var(--button-invisible-iconColor-hover,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):hover [data-kbd-chord]{background:var(--buttonKeybindingHint-invisible-bgColor-hover,#818b981a);transition:80ms ease-out}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):active{background-color:var(--button-invisible-bgColor-active,#818b9826)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):active .prc-Button-Visual-YNt2F{color:var(--button-invisible-iconColor-hover,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):active [data-kbd-chord]{background:var(--buttonKeybindingHint-invisible-bgColor-active,#818b9826);transition:80ms ease-out}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=invisible]):not([data-loading=true]),.prc-Button-ButtonBase-9n-Xk[aria-disabled=true][data-loading-disabled-styles=true]:where([data-variant=invisible]){background-color:var(--button-invisible-bgColor-disabled,#ffffff00);border-color:var(--button-invisible-borderColor-disabled,#ffffff00);box-shadow:none;color:var(--button-invisible-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):disabled:not(.prc-Button-does-not-exist-3ns8K) [data-kbd-chord]{background:var(--buttonKeybindingHint-invisible-bgColor-disabled,#ffffff00);border-color:var(--buttonKeybindingHint-invisible-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-invisible-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=invisible]):not([data-loading=true]) [data-kbd-chord]{background:var(--buttonKeybindingHint-invisible-bgColor-disabled,#ffffff00);border-color:var(--buttonKeybindingHint-invisible-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-invisible-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true][data-loading-disabled-styles=true]:where([data-variant=invisible]) [data-kbd-chord]{background:var(--buttonKeybindingHint-invisible-bgColor-disabled,#ffffff00);border-color:var(--buttonKeybindingHint-invisible-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-invisible-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]) .prc-Button-Visual-YNt2F{color:var(--button-invisible-iconColor-rest,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-invisible-bgColor-rest,#818b981f)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]) [data-kbd-chord]{background:var(--buttonKeybindingHint-invisible-bgColor-rest,#eff2f5);border-color:var(--buttonKeybindingHint-invisible-borderColor-rest,#ffffff00);color:var(--buttonKeybindingHint-invisible-fgColor-rest,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):where(.prc-Button-IconButton-fyge7){color:var(--button-invisible-iconColor-rest,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]){border:unset;border-radius:0;color:var(--fgColor-link,#0969da);display:inline-flex;font-size:inherit;height:unset;min-width:-moz-fit-content;min-width:fit-content;padding:0;text-align:left}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):where([data-no-visuals]:hover:not(:disabled,[aria-disabled=true],[data-inactive])){-webkit-text-decoration:underline;text-decoration:underline}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):where(:not([data-no-visuals]):hover:not(:disabled,[aria-disabled=true],[data-inactive])) .prc-Button-Label-FWkx3{-webkit-text-decoration:underline;text-decoration:underline}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):focus,.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):focus-visible{outline-offset:2px}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=link]):not([data-loading=true]),.prc-Button-ButtonBase-9n-Xk[aria-disabled=true][data-loading-disabled-styles=true]:where([data-variant=link]){background-color:transparent;border-color:transparent;color:var(--control-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]) .prc-Button-Label-FWkx3{white-space:unset}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):not([data-no-visuals]) .prc-Button-Label-FWkx3{text-underline-offset:.125rem}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):where([data-inactive]){background:transparent!important;color:var(--button-inactive-fgColor,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]) .prc-Button-Visual-YNt2F{color:var(--fgColor-link,#0969da)}[data-a11y-link-underlines=true] .prc-Button-ButtonBase-9n-Xk[data-no-visuals]:where([data-variant=link]){-webkit-text-decoration:underline;text-decoration:underline}[data-a11y-link-underlines=true] .prc-Button-ButtonBase-9n-Xk[data-no-visuals]:where([data-variant=link]):where(:hover:not([aria-disabled=true],[data-inactive],:disabled)){-webkit-text-decoration:none;text-decoration:none}[data-a11y-link-underlines=true] .prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):not([data-no-visuals]) .prc-Button-Label-FWkx3{-webkit-text-decoration:underline;text-decoration:underline}[data-a11y-link-underlines=true] .prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):not([data-no-visuals]):where(:hover:not([aria-disabled=true],[data-inactive],:disabled)) .prc-Button-Label-FWkx3{-webkit-text-decoration:none;text-decoration:none}[data-a11y-link-underlines=false] .prc-Button-ButtonBase-9n-Xk[data-no-visuals]:where([data-variant=link]){background-image:none;-webkit-text-decoration:none;text-decoration:none}[data-a11y-link-underlines=false] .prc-Button-ButtonBase-9n-Xk[data-no-visuals]:where([data-variant=link]):where(:hover:not([aria-disabled=true],[data-inactive],:disabled)){-webkit-text-decoration:underline;text-decoration:underline}[data-a11y-link-underlines=false] .prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):not([data-no-visuals]){background-image:none}[data-a11y-link-underlines=false] .prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):not([data-no-visuals]) .prc-Button-Label-FWkx3{-webkit-text-decoration:none;text-decoration:none}[data-a11y-link-underlines=false] .prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):not([data-no-visuals]):where(:hover:not([aria-disabled=true],[data-inactive],:disabled)) .prc-Button-Label-FWkx3{-webkit-text-decoration:underline;text-decoration:underline}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]),.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):active,.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):hover{background-color:var(--button-inactive-bgColor,#e6eaef);border-color:var(--button-inactive-bgColor,#e6eaef);box-shadow:none;color:var(--button-inactive-fgColor,#59636e);cursor:auto}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):not(.prc-Button-does-not-exist-3ns8K) .prc-Button-Visual-YNt2F{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):hover .prc-Button-Visual-YNt2F{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):active .prc-Button-Visual-YNt2F{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):not(.prc-Button-does-not-exist-3ns8K) .prc-Button-CounterLabel-5hAs4{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):hover .prc-Button-CounterLabel-5hAs4{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):active .prc-Button-CounterLabel-5hAs4{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):not(.prc-Button-does-not-exist-3ns8K) [data-kbd-chord]{background:var(--buttonKeybindingHint-inactive-bgColor,#eff2f5);border-color:var(--buttonKeybindingHint-inactive-borderColor,#d1d9e0b3);color:var(--buttonKeybindingHint-inactive-fgColor,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):hover [data-kbd-chord]{background:var(--buttonKeybindingHint-inactive-bgColor,#eff2f5);border-color:var(--buttonKeybindingHint-inactive-borderColor,#d1d9e0b3);color:var(--buttonKeybindingHint-inactive-fgColor,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):active [data-kbd-chord]{background:var(--buttonKeybindingHint-inactive-bgColor,#eff2f5);border-color:var(--buttonKeybindingHint-inactive-borderColor,#d1d9e0b3);color:var(--buttonKeybindingHint-inactive-fgColor,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-icon-only-counter]){padding-inline:var(--control-medium-paddingInline-condensed,.5rem)}.prc-Button-ButtonBase-9n-Xk:where([data-icon-only-counter]):where([data-size=small]){padding-inline:var(--control-xsmall-paddingInline-condensed,.25rem)}.prc-Button-ButtonBase-9n-Xk:where([data-icon-only-counter]):where([data-size=large]){padding-inline:var(--control-large-paddingInline-normal,.75rem)}.prc-Button-ConditionalWrapper-Rvbgb{display:block}.prc-Button-ConditionalWrapperLink-d0qv7{display:inline-flex}[data-kbd-chord]{transition:80ms ease-in;transition-property:color,background-color,border-color}
|
|
2
|
+
/*# sourceMappingURL=ButtonBase-c8dab214.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Button/ButtonBase.module.css.js","../../postcss-preset-primer/src/mixins/focusOutline.css","../../postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css"],"names":[],"mappings":"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","file":"ButtonBase-c8dab214.css","sourcesContent":["/* Base styles */\n.ButtonBase {\n display: flex;\n min-width: max-content;\n height: var(--control-medium-size);\n /* stylelint-disable-next-line primer/spacing */\n padding: 0 var(--control-medium-paddingInline-normal);\n font-family: inherit;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n color: var(--button-default-fgColor-rest);\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid;\n border-color: var(--button-default-borderColor-rest);\n border-radius: var(--borderRadius-medium);\n transition: 80ms cubic-bezier(0.65, 0, 0.35, 1);\n transition-property: color, fill, background-color, border-color;\n appearance: none;\n align-items: center;\n justify-content: space-between;\n gap: var(--base-size-8);\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:has([data-kbd-chord]) {\n padding-inline-end: var(--base-size-6);\n }\n\n &:hover {\n transition-duration: 80ms;\n }\n\n &:focus-visible {\n @mixin focusOutline;\n }\n\n &:active {\n transition: none;\n }\n\n &:where([data-notification-indicator='button'], [data-notification-indicator='icon'].IconButton) {\n position: relative;\n }\n\n &:where([data-notification-indicator='leadingVisual']) .LeadingVisual {\n position: relative;\n }\n\n &:where([data-notification-indicator='button'])::before,\n &:where([data-notification-indicator='icon'].IconButton)::before,\n &:where([data-notification-indicator='leadingVisual']) .LeadingVisual::before {\n position: absolute;\n display: block;\n width: var(--base-size-8);\n height: var(--base-size-8);\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--fgColor-accent);\n border-radius: var(--borderRadius-full);\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 0 0 calc(var(--base-size-4) / 2) var(--bgColor-inset);\n }\n\n &:where([data-notification-indicator='button'])::before {\n top: calc(var(--base-size-4) / -2);\n right: calc(var(--base-size-4) / -2);\n }\n\n &:where([data-notification-indicator='icon'].IconButton)::before {\n top: calc(50% - var(--base-size-12));\n right: calc(50% - var(--base-size-12));\n }\n\n &:where([data-notification-indicator='leadingVisual']) .LeadingVisual::before {\n top: calc(var(--base-size-4) * -1);\n right: calc(var(--base-size-4) * -1);\n }\n\n &:disabled,\n &[aria-disabled='true']:not([data-loading='true']),\n &[aria-disabled='true'][data-loading-disabled-styles='true'] {\n cursor: not-allowed;\n box-shadow: none;\n\n & .Visual,\n & .CounterLabel {\n color: inherit;\n }\n }\n\n @media (forced-colors: active) {\n &:focus {\n outline: solid 1px transparent;\n }\n }\n\n /* Visuals */\n & :where(.Visual) {\n display: flex;\n color: var(--fgColor-muted);\n pointer-events: none;\n }\n\n /* mostly for CounterLabel */\n & :where(.VisualWrap) {\n display: flex;\n pointer-events: none;\n }\n\n /* IconButton */\n\n &:where(.IconButton) {\n display: inline-grid;\n width: var(--control-medium-size);\n min-width: unset;\n /* stylelint-disable-next-line primer/spacing */\n padding: unset;\n place-content: center;\n flex-shrink: 0;\n\n &:where([data-size='small']) {\n width: var(--control-small-size);\n }\n\n &:where([data-size='large']) {\n width: var(--control-large-size);\n }\n }\n\n /* LinkButton */\n\n &:where([href]) {\n display: inline-flex;\n\n &:hover {\n text-decoration: none;\n }\n }\n\n /* Button layout */\n\n & :where(.ButtonContent) {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n align-content: center;\n\n & > :not(:last-child) {\n margin-right: var(--base-size-8);\n }\n\n /* Content alignment */\n\n &:where([data-align='center']) {\n justify-content: center;\n }\n\n &:where([data-align='start']) {\n justify-content: flex-start;\n }\n }\n\n & :where([data-component='leadingVisual']) {\n grid-area: leadingVisual;\n }\n\n & :where(.Label) {\n line-height: var(--text-body-lineHeight-medium);\n white-space: nowrap;\n grid-area: text;\n }\n\n & :where([data-component='trailingVisual']) {\n grid-area: trailingVisual;\n }\n\n & :where([data-component='trailingAction']) {\n margin-right: calc(var(--base-size-4) * -1);\n }\n\n /* Size */\n\n &:where([data-size='small']) {\n height: var(--control-small-size);\n /* stylelint-disable-next-line primer/spacing */\n padding: 0 var(--control-small-paddingInline-condensed);\n gap: var(--control-small-gap);\n font-size: var(--text-body-size-small);\n\n & .ButtonContent > :not(:last-child) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--control-small-gap);\n }\n\n & .Label {\n line-height: var(--text-body-lineHeight-small);\n }\n }\n\n &:where([data-size='large']) {\n height: var(--control-large-size);\n /* stylelint-disable-next-line primer/spacing */\n padding: 0 var(--control-large-paddingInline-spacious);\n gap: var(--control-large-gap);\n\n & .ButtonContent > :not(:last-child) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--control-large-gap);\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:has([data-kbd-chord]) {\n padding-inline-end: var(--base-size-8);\n }\n }\n\n /* Full width */\n\n &:where([data-block='block']) {\n width: 100%;\n }\n\n /* Wrap label text */\n\n &:where([data-label-wrap='true']) {\n min-width: fit-content;\n height: unset;\n min-height: var(--control-medium-size);\n\n & .ButtonContent {\n flex: 1 1 auto;\n align-self: stretch;\n /* stylelint-disable-next-line primer/spacing */\n padding-block: calc(var(--control-medium-paddingBlock) - var(--base-size-2));\n }\n\n & .Label {\n /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */\n word-break: break-word;\n white-space: unset;\n }\n\n &:where([data-size='small']) {\n height: unset;\n min-height: var(--control-small-size);\n\n & .ButtonContent {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: calc(var(--control-small-paddingBlock) - var(--base-size-2));\n }\n }\n\n &:where([data-size='large']) {\n height: unset;\n min-height: var(--control-large-size);\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--control-large-paddingInline-spacious);\n\n & .ButtonContent {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: calc(var(--control-large-paddingBlock) - var(--base-size-2));\n }\n }\n }\n\n /* Loading */\n\n /* only hide label if there's no leading/trailing visuals\n * move spinner to label spot if not leading/trailing visuals\n */\n\n &:where([data-loading='true']) {\n &\n .LoadingSpinner:not(\n [data-component='leadingVisual'],\n [data-component='trailingVisual'],\n [data-component='trailingAction']\n ) {\n grid-area: text;\n margin-right: 0 !important;\n place-self: center;\n\n & + .Label {\n visibility: hidden;\n }\n }\n }\n\n /* Styles for the spinner element displayed when the Button is in a loading state.\n * Ensures the spinner is centered within its container. */\n .LoadingSpinner {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n /* Default Variant */\n\n &:where([data-variant='default']) {\n color: var(--button-default-fgColor-rest);\n background-color: var(--button-default-bgColor-rest);\n box-shadow: var(--button-default-shadow-resting);\n\n &[aria-expanded='true'] {\n background-color: var(--button-default-bgColor-active);\n border-color: var(--button-default-borderColor-active);\n }\n\n &:hover {\n background-color: var(--button-default-bgColor-hover);\n border-color: var(--button-default-borderColor-hover);\n }\n\n &:active {\n background-color: var(--button-default-bgColor-active);\n border-color: var(--button-default-borderColor-active);\n }\n\n &:disabled,\n &[aria-disabled='true']:not([data-loading='true']),\n &[aria-disabled='true'][data-loading-disabled-styles='true'] {\n color: var(--control-fgColor-disabled);\n background-color: var(--button-default-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n box-shadow: none;\n\n & [data-kbd-chord] {\n background: var(--buttonKeybindingHint-default-bgColor-disabled);\n color: var(--buttonKeybindingHint-default-fgColor-disabled);\n border-color: var(--buttonKeybindingHint-default-borderColor-disabled);\n }\n }\n\n & .CounterLabel {\n background-color: var(--buttonCounter-default-bgColor-rest) !important; /* temporarily override our own sx prop */\n }\n\n & [data-kbd-chord] {\n background: var(--buttonKeybindingHint-default-bgColor-rest);\n color: var(--buttonKeybindingHint-default-fgColor-rest);\n border-color: var(--buttonKeybindingHint-default-borderColor-rest);\n }\n\n &:where(.IconButton) {\n color: var(--fgColor-muted);\n }\n }\n\n /* Primary variant */\n\n &:where([data-variant='primary']) {\n color: var(--button-primary-fgColor-rest);\n background-color: var(--button-primary-bgColor-rest);\n border-color: var(--button-primary-borderColor-rest);\n box-shadow: var(--shadow-resting-small);\n\n &[aria-expanded='true'] {\n background-color: var(--button-primary-bgColor-active);\n box-shadow: var(--button-primary-shadow-selected);\n }\n\n &:hover {\n background-color: var(--button-primary-bgColor-hover);\n border-color: var(--button-primary-borderColor-hover);\n }\n\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active {\n background-color: var(--button-primary-bgColor-active);\n box-shadow: var(--button-primary-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true']:not([data-loading='true']),\n &[aria-disabled='true'][data-loading-disabled-styles='true'] {\n color: var(--button-primary-fgColor-disabled);\n background-color: var(--button-primary-bgColor-disabled);\n border-color: var(--button-primary-borderColor-disabled);\n box-shadow: none;\n\n & [data-kbd-chord] {\n background: var(--buttonKeybindingHint-primary-bgColor-disabled);\n color: var(--buttonKeybindingHint-primary-fgColor-disabled);\n border-color: var(--buttonKeybindingHint-primary-borderColor-disabled);\n }\n }\n\n & .CounterLabel {\n color: var(--button-primary-fgColor-rest) !important; /* temporarily override our own sx prop */\n background-color: var(--buttonCounter-primary-bgColor-rest) !important; /* temporarily override our own sx prop */\n }\n\n & [data-kbd-chord] {\n background: var(--buttonKeybindingHint-primary-bgColor-rest);\n color: var(--buttonKeybindingHint-primary-fgColor-rest);\n border-color: var(--buttonKeybindingHint-primary-borderColor-rest);\n }\n\n /* temporarily using the fgColor to match legacy and reduce visual changes- will eventually be iconColor */\n & .Visual {\n color: var(--button-primary-fgColor-rest);\n }\n }\n\n /* Danger variant */\n\n &:where([data-variant='danger']) {\n color: var(--button-danger-fgColor-rest);\n background-color: var(--button-danger-bgColor-rest);\n box-shadow: var(--button-default-shadow-resting);\n\n &[aria-expanded='true'] {\n color: var(--button-danger-fgColor-active);\n background-color: var(--button-danger-bgColor-active);\n border-color: var(--button-danger-borderColor-active);\n box-shadow: var(--button-danger-shadow-selected);\n\n & .Visual {\n color: var(--button-danger-iconColor-hover);\n }\n }\n\n &:hover {\n color: var(--button-danger-fgColor-hover);\n background-color: var(--button-danger-bgColor-hover);\n border-color: var(--button-danger-borderColor-hover);\n box-shadow: var(--shadow-resting-small);\n\n & .CounterLabel {\n color: var(--buttonCounter-danger-fgColor-hover) !important; /* temporarily override our own sx prop */\n background-color: var(--buttonCounter-danger-bgColor-hover) !important;\n }\n\n & [data-kbd-chord] {\n background: var(--buttonKeybindingHint-danger-bgColor-hover);\n color: var(--buttonKeybindingHint-danger-fgColor-hover);\n border-color: var(--buttonKeybindingHint-danger-borderColor-hover);\n transition: 80ms ease-out;\n }\n\n & .Visual {\n color: var(--button-danger-iconColor-hover);\n }\n }\n\n &:active {\n color: var(--button-danger-fgColor-active);\n background-color: var(--button-danger-bgColor-active);\n border-color: var(--button-danger-borderColor-active);\n box-shadow: var(--button-danger-shadow-selected);\n\n & .CounterLabel {\n color: var(--buttonCounter-danger-fgColor-hover) !important; /* temporarily override our own sx prop */\n background-color: var(--buttonCounter-danger-bgColor-hover) !important;\n }\n\n & [data-kbd-chord] {\n background: var(--buttonKeybindingHint-danger-bgColor-active);\n color: var(--buttonKeybindingHint-danger-fgColor-active);\n border-color: var(--buttonKeybindingHint-danger-borderColor-active);\n transition: 80ms ease-out;\n }\n\n & .Visual {\n color: var(--button-danger-iconColor-hover);\n }\n }\n\n &:disabled,\n &[aria-disabled='true']:not([data-loading='true']),\n &[aria-disabled='true'][data-loading-disabled-styles='true'] {\n color: var(--button-danger-fgColor-disabled);\n background-color: var(--button-danger-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n box-shadow: none;\n\n & .CounterLabel {\n color: var(--buttonCounter-danger-fgColor-disabled) !important; /* temporarily override our own sx prop */\n background-color: var(--buttonCounter-danger-bgColor-disabled) !important;\n }\n\n & [data-kbd-chord] {\n background: var(--buttonKeybindingHint-danger-bgColor-disabled);\n color: var(--buttonKeybindingHint-danger-fgColor-disabled);\n border-color: var(--buttonKeybindingHint-danger-borderColor-disabled);\n }\n }\n\n & .CounterLabel {\n color: var(--buttonCounter-danger-fgColor-rest) !important; /* temporarily override our own sx prop */\n background-color: var(--buttonCounter-danger-bgColor-rest) !important;\n }\n\n & [data-kbd-chord] {\n background: var(--buttonKeybindingHint-danger-bgColor-rest);\n color: var(--buttonKeybindingHint-danger-fgColor-rest);\n border-color: var(--buttonKeybindingHint-danger-borderColor-rest);\n }\n\n & .Visual {\n color: var(--button-danger-iconColor-rest);\n }\n }\n\n /* Invisible variant */\n\n &:where([data-variant='invisible']) {\n color: var(--button-default-fgColor-rest);\n border-color: var(--button-invisible-borderColor-rest);\n box-shadow: none;\n\n &[aria-expanded='true'] {\n background-color: var(--button-invisible-bgColor-active);\n }\n\n &:hover {\n background-color: var(--button-invisible-bgColor-hover);\n border-color: var(--button-invisible-borderColor-hover);\n\n & .Visual {\n color: var(--button-invisible-iconColor-hover);\n }\n\n & [data-kbd-chord] {\n background: var(--buttonKeybindingHint-invisible-bgColor-hover);\n transition: 80ms ease-out;\n }\n }\n\n &:active {\n background-color: var(--button-invisible-bgColor-active);\n\n & .Visual {\n color: var(--button-invisible-iconColor-hover);\n }\n\n & [data-kbd-chord] {\n background: var(--buttonKeybindingHint-invisible-bgColor-active);\n transition: 80ms ease-out;\n }\n }\n\n &:disabled,\n &[aria-disabled='true']:not([data-loading='true']),\n &[aria-disabled='true'][data-loading-disabled-styles='true'] {\n color: var(--button-invisible-fgColor-disabled);\n background-color: var(--button-invisible-bgColor-disabled);\n border-color: var(--button-invisible-borderColor-disabled);\n box-shadow: none;\n\n & [data-kbd-chord] {\n background: var(--buttonKeybindingHint-invisible-bgColor-disabled);\n color: var(--buttonKeybindingHint-invisible-fgColor-disabled);\n border-color: var(--buttonKeybindingHint-invisible-borderColor-disabled);\n }\n }\n\n & .Visual {\n color: var(--button-invisible-iconColor-rest);\n }\n\n & .CounterLabel {\n background-color: var(--buttonCounter-invisible-bgColor-rest) !important;\n }\n\n & [data-kbd-chord] {\n background: var(--buttonKeybindingHint-invisible-bgColor-rest);\n color: var(--buttonKeybindingHint-invisible-fgColor-rest);\n border-color: var(--buttonKeybindingHint-invisible-borderColor-rest);\n }\n\n &:where(.IconButton) {\n color: var(--button-invisible-iconColor-rest);\n }\n }\n\n /* Link variant */\n\n &:where([data-variant='link']) {\n display: inline-flex;\n min-width: fit-content;\n height: unset;\n padding: 0;\n font-size: inherit;\n color: var(--fgColor-link);\n text-align: left;\n border: unset;\n border-radius: 0;\n\n &:where([data-no-visuals]:hover:not(:disabled, [aria-disabled='true'], [data-inactive])) {\n text-decoration: underline;\n }\n\n &:where(:not([data-no-visuals]):hover:not(:disabled, [aria-disabled='true'], [data-inactive])) .Label {\n text-decoration: underline;\n }\n\n &:focus-visible,\n &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true']:not([data-loading='true']),\n &[aria-disabled='true'][data-loading-disabled-styles='true'] {\n color: var(--control-fgColor-disabled);\n background-color: transparent;\n border-color: transparent;\n }\n\n & .Label {\n white-space: unset;\n }\n\n &:not([data-no-visuals]) .Label {\n text-underline-offset: 0.125rem;\n }\n\n &:where([data-inactive]) {\n color: var(--button-inactive-fgColor);\n background: transparent !important;\n }\n\n & .Visual {\n color: var(--fgColor-link);\n }\n }\n\n [data-a11y-link-underlines='true'] &:where([data-variant='link']) {\n &[data-no-visuals] {\n text-decoration: underline;\n\n &:where(:hover:not(:disabled, [aria-disabled='true'], [data-inactive])) {\n text-decoration: none;\n }\n }\n\n &:not([data-no-visuals]) {\n & .Label {\n text-decoration: underline;\n }\n\n &:where(:hover:not(:disabled, [aria-disabled='true'], [data-inactive])) .Label {\n text-decoration: none;\n }\n }\n }\n\n [data-a11y-link-underlines='false'] &:where([data-variant='link']) {\n &[data-no-visuals] {\n text-decoration: none;\n background-image: none;\n\n &:where(:hover:not(:disabled, [aria-disabled='true'], [data-inactive])) {\n text-decoration: underline;\n }\n }\n\n &:not([data-no-visuals]) {\n background-image: none;\n\n & .Label {\n text-decoration: none;\n }\n\n &:where(:hover:not(:disabled, [aria-disabled='true'], [data-inactive])) .Label {\n text-decoration: underline;\n }\n }\n }\n\n /* Inactive */\n\n &:where([data-inactive]),\n &:where([data-inactive]):hover,\n &:where([data-inactive]):active {\n color: var(--button-inactive-fgColor);\n cursor: auto;\n background-color: var(--button-inactive-bgColor);\n /* stylelint-disable-next-line primer/colors */\n border-color: var(--button-inactive-bgColor);\n box-shadow: none;\n\n & .Visual,\n & .CounterLabel {\n color: inherit !important;\n }\n\n & [data-kbd-chord] {\n background: var(--buttonKeybindingHint-inactive-bgColor);\n color: var(--buttonKeybindingHint-inactive-fgColor);\n border-color: var(--buttonKeybindingHint-inactive-borderColor);\n }\n }\n\n /* Icon-only + Counter */\n\n &:where([data-icon-only-counter]) {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--control-medium-paddingInline-condensed);\n\n &:where([data-size='small']) {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--control-xsmall-paddingInline-condensed);\n }\n\n &:where([data-size='large']) {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--control-large-paddingInline-normal);\n }\n }\n}\n\n.ConditionalWrapper {\n display: block;\n}\n\n.ConditionalWrapperLink {\n display: inline-flex;\n}\n\n[data-kbd-chord] {\n transition: 80ms ease-in;\n transition-property: color, background-color, border-color;\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outline-color, var(--focus-outlineColor)) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n","/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px,\n $outlineColor: var(--focus-outline-color, var(--focus-outlineColor)) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}
|
|
@@ -6,21 +6,23 @@ import Spinner from "../Spinner/Spinner.js";
|
|
|
6
6
|
import CounterLabel from "../CounterLabel/CounterLabel.js";
|
|
7
7
|
import { ConditionalWrapper } from "../internal/components/ConditionalWrapper.js";
|
|
8
8
|
import ButtonBase_module_css_default from "./ButtonBase.module.css.js";
|
|
9
|
+
import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
|
|
9
10
|
import React, { forwardRef } from "react";
|
|
10
11
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
11
12
|
import { clsx } from "clsx";
|
|
12
13
|
import { isElement } from "react-is";
|
|
13
14
|
//#region src/Button/ButtonBase.tsx
|
|
14
|
-
const
|
|
15
|
+
const BUTTON_LOADING_DISABLED_STYLES_FEATURE_FLAG = "primer_react_button_loading_disabled_styles";
|
|
16
|
+
const renderModuleVisual = (Visual, loading, visualName, counterLabel) => /* @__PURE__ */ jsx("span", {
|
|
15
17
|
"data-component": visualName,
|
|
16
18
|
className: clsx(!counterLabel && ButtonBase_module_css_default.Visual, visualName === "leadingVisual" && ButtonBase_module_css_default.LeadingVisual, loading ? ButtonBase_module_css_default.LoadingSpinner : ButtonBase_module_css_default.VisualWrap),
|
|
17
|
-
children: loading ?
|
|
19
|
+
children: loading ? /* @__PURE__ */ jsx(Spinner, { size: "small" }) : isElement(Visual) ? Visual : /* @__PURE__ */ jsx(Visual, {})
|
|
18
20
|
});
|
|
19
|
-
renderModuleVisual.displayName = "renderModuleVisual";
|
|
20
21
|
const ButtonBase = /*#__PURE__*/ forwardRef(({ children, as: Component = "button", ...props }, forwardedRef) => {
|
|
21
22
|
const { leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, trailingAction: TrailingAction, ["aria-describedby"]: ariaDescribedBy, ["aria-labelledby"]: ariaLabelledBy, count, icon: Icon, id, variant = "default", size = "medium", alignContent = "center", block = false, loading, loadingAnnouncement = "Loading", inactive, onClick, labelWrap, notificationIndicator, className, ...rest } = props;
|
|
22
23
|
const innerRef = React.useRef(null);
|
|
23
24
|
const mergedRef = useMergedRefs(forwardedRef, innerRef);
|
|
25
|
+
const loadingDisabledStylesEnabled = useFeatureFlag(BUTTON_LOADING_DISABLED_STYLES_FEATURE_FLAG);
|
|
24
26
|
const uuid = useId$1(id);
|
|
25
27
|
const loadingAnnouncementID = `${uuid}-loading-announcement`;
|
|
26
28
|
const ariaDescribedByIds = loading ? [loadingAnnouncementID, ariaDescribedBy] : [ariaDescribedBy];
|
|
@@ -29,11 +31,11 @@ const ButtonBase = /*#__PURE__*/ forwardRef(({ children, as: Component = "button
|
|
|
29
31
|
const el = innerRef.current;
|
|
30
32
|
if (el && !(el instanceof HTMLButtonElement) && !(el instanceof HTMLAnchorElement) && !(el.tagName === "SUMMARY")) console.warn("This component should be an instanceof a semantic button or anchor");
|
|
31
33
|
}
|
|
32
|
-
return
|
|
34
|
+
return /* @__PURE__ */ jsxs(ConditionalWrapper, {
|
|
33
35
|
if: typeof loading !== "undefined",
|
|
34
36
|
className: block ? ButtonBase_module_css_default.ConditionalWrapper : variant === "link" ? ButtonBase_module_css_default.ConditionalWrapperLink : void 0,
|
|
35
37
|
"data-loading-wrapper": true,
|
|
36
|
-
children: [
|
|
38
|
+
children: [/* @__PURE__ */ jsx(Component, {
|
|
37
39
|
"aria-disabled": loading ? true : void 0,
|
|
38
40
|
"data-component": "Button",
|
|
39
41
|
...rest,
|
|
@@ -42,6 +44,7 @@ const ButtonBase = /*#__PURE__*/ forwardRef(({ children, as: Component = "button
|
|
|
42
44
|
"data-block": block ? "block" : null,
|
|
43
45
|
"data-inactive": inactive ? true : void 0,
|
|
44
46
|
"data-loading": Boolean(loading),
|
|
47
|
+
"data-loading-disabled-styles": loadingDisabledStylesEnabled ? true : void 0,
|
|
45
48
|
"data-no-visuals": !LeadingVisual && !TrailingVisual && !TrailingAction ? true : void 0,
|
|
46
49
|
"data-size": size,
|
|
47
50
|
"data-variant": variant,
|
|
@@ -53,27 +56,27 @@ const ButtonBase = /*#__PURE__*/ forwardRef(({ children, as: Component = "button
|
|
|
53
56
|
"aria-labelledby": loading ? [`${uuid}-label`, ariaLabelledBy].filter((labelID) => Boolean(labelID)).join(" ") : ariaLabelledBy,
|
|
54
57
|
id,
|
|
55
58
|
onClick: loading ? void 0 : onClick,
|
|
56
|
-
children: Icon ? loading ?
|
|
59
|
+
children: Icon ? loading ? /* @__PURE__ */ jsx(Spinner, { size: "small" }) : isElement(Icon) ? Icon : /* @__PURE__ */ jsx(Icon, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
|
|
57
60
|
"data-component": "buttonContent",
|
|
58
61
|
"data-align": alignContent,
|
|
59
62
|
className: ButtonBase_module_css_default.ButtonContent,
|
|
60
63
|
children: [
|
|
61
64
|
loading && !LeadingVisual && !TrailingVisual && !TrailingAction && count === void 0 && renderModuleVisual(Spinner, loading, "loadingSpinner", false),
|
|
62
65
|
LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), "leadingVisual", false),
|
|
63
|
-
children &&
|
|
66
|
+
children && /* @__PURE__ */ jsx("span", {
|
|
64
67
|
"data-component": "text",
|
|
65
68
|
className: ButtonBase_module_css_default.Label,
|
|
66
69
|
id: loading ? `${uuid}-label` : void 0,
|
|
67
70
|
children
|
|
68
71
|
}),
|
|
69
|
-
count !== void 0 && !TrailingVisual ? renderModuleVisual(
|
|
72
|
+
count !== void 0 && !TrailingVisual ? renderModuleVisual(/* @__PURE__ */ jsx(CounterLabel, {
|
|
70
73
|
className: ButtonBase_module_css_default.CounterLabel,
|
|
71
74
|
"data-component": "ButtonCounter",
|
|
72
75
|
children: count
|
|
73
76
|
}), Boolean(loading) && !LeadingVisual, "trailingVisual", true) : TrailingVisual ? renderModuleVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, "trailingVisual", false) : null
|
|
74
77
|
]
|
|
75
78
|
}), TrailingAction && renderModuleVisual(TrailingAction, Boolean(loading) && !LeadingVisual && !TrailingVisual, "trailingAction", false)] })
|
|
76
|
-
}), loading &&
|
|
79
|
+
}), loading && /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(AriaStatus, {
|
|
77
80
|
id: loadingAnnouncementID,
|
|
78
81
|
children: loadingAnnouncement
|
|
79
82
|
}) })]
|
|
@@ -60,7 +60,7 @@ const IconButton = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
|
|
|
60
60
|
} else t2 = $[12];
|
|
61
61
|
let t3;
|
|
62
62
|
if ($[13] !== Icon || $[14] !== ariaLabel || $[15] !== disabled || $[16] !== forwardedRef || $[17] !== props || $[18] !== t2) {
|
|
63
|
-
t3 =
|
|
63
|
+
t3 = /* @__PURE__ */ jsx(ButtonBase, {
|
|
64
64
|
icon: Icon,
|
|
65
65
|
className: t2,
|
|
66
66
|
"data-component": "IconButton",
|
|
@@ -94,7 +94,7 @@ const IconButton = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
|
|
|
94
94
|
const t6 = description ? ariaLabel : void 0;
|
|
95
95
|
let t7;
|
|
96
96
|
if ($[22] !== Icon || $[23] !== props || $[24] !== t4 || $[25] !== t5 || $[26] !== t6) {
|
|
97
|
-
t7 =
|
|
97
|
+
t7 = /* @__PURE__ */ jsx(ButtonBase, {
|
|
98
98
|
icon: Icon,
|
|
99
99
|
className: t4,
|
|
100
100
|
"data-component": "IconButton",
|
|
@@ -112,7 +112,7 @@ const IconButton = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
|
|
|
112
112
|
} else t7 = $[27];
|
|
113
113
|
let t8;
|
|
114
114
|
if ($[28] !== forwardedRef || $[29] !== hasActivePopup || $[30] !== t2 || $[31] !== t3 || $[32] !== t7 || $[33] !== tooltipDirection || $[34] !== tooltipText) {
|
|
115
|
-
t8 =
|
|
115
|
+
t8 = /* @__PURE__ */ jsx(Tooltip, {
|
|
116
116
|
ref: forwardedRef,
|
|
117
117
|
text: tooltipText,
|
|
118
118
|
type: t2,
|
|
@@ -22,7 +22,7 @@ const LinkButton = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
|
|
|
22
22
|
const Component = t1 === void 0 ? "a" : t1;
|
|
23
23
|
let t2;
|
|
24
24
|
if ($[4] !== Component || $[5] !== children || $[6] !== forwardedRef || $[7] !== props) {
|
|
25
|
-
t2 =
|
|
25
|
+
t2 = /* @__PURE__ */ jsx(ButtonBase, {
|
|
26
26
|
as: Component,
|
|
27
27
|
ref: forwardedRef,
|
|
28
28
|
"data-component": "LinkButton",
|
|
@@ -66,7 +66,7 @@ const ButtonGroup = /*#__PURE__*/ React.forwardRef(function ButtonGroup(t0, forw
|
|
|
66
66
|
} else t5 = $[12];
|
|
67
67
|
let t6;
|
|
68
68
|
if ($[13] !== BaseComponent || $[14] !== appliedRef || $[15] !== buttons || $[16] !== rest || $[17] !== role || $[18] !== t5) {
|
|
69
|
-
t6 =
|
|
69
|
+
t6 = /* @__PURE__ */ jsx(BaseComponent, {
|
|
70
70
|
ref: appliedRef,
|
|
71
71
|
className: t5,
|
|
72
72
|
role,
|
|
@@ -86,11 +86,10 @@ const ButtonGroup = /*#__PURE__*/ React.forwardRef(function ButtonGroup(t0, forw
|
|
|
86
86
|
});
|
|
87
87
|
ButtonGroup.displayName = "ButtonGroup";
|
|
88
88
|
function _temp(child, index) {
|
|
89
|
-
return
|
|
89
|
+
return /* @__PURE__ */ jsx("div", {
|
|
90
90
|
className: ButtonGroup_module_css_default.Item,
|
|
91
91
|
children: child
|
|
92
92
|
}, index);
|
|
93
93
|
}
|
|
94
|
-
_temp.displayName = "_temp";
|
|
95
94
|
//#endregion
|
|
96
95
|
export { ButtonGroup as default };
|
package/dist/Card/Card.js
CHANGED
|
@@ -73,7 +73,7 @@ function CardComponent(props, ref) {
|
|
|
73
73
|
} else t15 = $[28];
|
|
74
74
|
let t16;
|
|
75
75
|
if ($[29] !== Component || $[30] !== borderRadius || $[31] !== children || $[32] !== layout || $[33] !== padding || $[34] !== ref || $[35] !== rest || $[36] !== t15) {
|
|
76
|
-
t16 =
|
|
76
|
+
t16 = /* @__PURE__ */ jsx(Component, {
|
|
77
77
|
ref,
|
|
78
78
|
className: t15,
|
|
79
79
|
"data-component": "Card",
|
|
@@ -95,7 +95,7 @@ function CardComponent(props, ref) {
|
|
|
95
95
|
} else t16 = $[37];
|
|
96
96
|
let t17;
|
|
97
97
|
if ($[38] !== t14 || $[39] !== t16) {
|
|
98
|
-
t17 =
|
|
98
|
+
t17 = /* @__PURE__ */ jsx(CardContext.Provider, {
|
|
99
99
|
value: t14,
|
|
100
100
|
children: t16
|
|
101
101
|
});
|
|
@@ -124,7 +124,7 @@ function CardComponent(props, ref) {
|
|
|
124
124
|
t8 = borderRadius;
|
|
125
125
|
t9 = layout;
|
|
126
126
|
t10 = rest;
|
|
127
|
-
t11 = (image || icon) &&
|
|
127
|
+
t11 = (image || icon) && /* @__PURE__ */ jsx("div", {
|
|
128
128
|
className: clsx(Card_module_css_default.CardHeader, image && Card_module_css_default.CardHeaderEdgeToEdge),
|
|
129
129
|
children: image || icon
|
|
130
130
|
});
|
|
@@ -175,7 +175,7 @@ function CardComponent(props, ref) {
|
|
|
175
175
|
if (t13 !== Symbol.for("react.early_return_sentinel")) return t13;
|
|
176
176
|
let t14;
|
|
177
177
|
if ($[45] !== description || $[46] !== heading) {
|
|
178
|
-
t14 =
|
|
178
|
+
t14 = /* @__PURE__ */ jsxs("div", {
|
|
179
179
|
className: Card_module_css_default.CardContent,
|
|
180
180
|
children: [heading, description]
|
|
181
181
|
});
|
|
@@ -185,7 +185,7 @@ function CardComponent(props, ref) {
|
|
|
185
185
|
} else t14 = $[47];
|
|
186
186
|
let t15;
|
|
187
187
|
if ($[48] !== metadata) {
|
|
188
|
-
t15 = metadata ?
|
|
188
|
+
t15 = metadata ? /* @__PURE__ */ jsx("div", {
|
|
189
189
|
className: Card_module_css_default.CardMetadataContainer,
|
|
190
190
|
children: metadata
|
|
191
191
|
}) : null;
|
|
@@ -194,7 +194,7 @@ function CardComponent(props, ref) {
|
|
|
194
194
|
} else t15 = $[49];
|
|
195
195
|
let t16;
|
|
196
196
|
if ($[50] !== t14 || $[51] !== t15) {
|
|
197
|
-
t16 =
|
|
197
|
+
t16 = /* @__PURE__ */ jsxs("div", {
|
|
198
198
|
className: Card_module_css_default.CardBody,
|
|
199
199
|
children: [t14, t15]
|
|
200
200
|
});
|
|
@@ -204,7 +204,7 @@ function CardComponent(props, ref) {
|
|
|
204
204
|
} else t16 = $[52];
|
|
205
205
|
let t17;
|
|
206
206
|
if ($[53] !== menu) {
|
|
207
|
-
t17 = menu ?
|
|
207
|
+
t17 = menu ? /* @__PURE__ */ jsx("div", {
|
|
208
208
|
className: Card_module_css_default.CardAction,
|
|
209
209
|
children: menu
|
|
210
210
|
}) : null;
|
|
@@ -213,7 +213,7 @@ function CardComponent(props, ref) {
|
|
|
213
213
|
} else t17 = $[54];
|
|
214
214
|
let t18;
|
|
215
215
|
if ($[55] !== T0 || $[56] !== t10 || $[57] !== t11 || $[58] !== t16 || $[59] !== t17 || $[60] !== t4 || $[61] !== t5 || $[62] !== t6 || $[63] !== t7 || $[64] !== t8 || $[65] !== t9) {
|
|
216
|
-
t18 =
|
|
216
|
+
t18 = /* @__PURE__ */ jsxs(T0, {
|
|
217
217
|
ref: t4,
|
|
218
218
|
className: t5,
|
|
219
219
|
"data-component": t6,
|
|
@@ -242,7 +242,7 @@ function CardComponent(props, ref) {
|
|
|
242
242
|
} else t18 = $[66];
|
|
243
243
|
let t19;
|
|
244
244
|
if ($[67] !== T1 || $[68] !== t12 || $[69] !== t18) {
|
|
245
|
-
t19 =
|
|
245
|
+
t19 = /* @__PURE__ */ jsx(T1, {
|
|
246
246
|
value: t12,
|
|
247
247
|
children: t18
|
|
248
248
|
});
|
|
@@ -268,13 +268,13 @@ function CardIcon(t0) {
|
|
|
268
268
|
const t3 = !ariaLabel;
|
|
269
269
|
let t4;
|
|
270
270
|
if ($[2] !== IconComponent) {
|
|
271
|
-
t4 =
|
|
271
|
+
t4 = /* @__PURE__ */ jsx(IconComponent, {});
|
|
272
272
|
$[2] = IconComponent;
|
|
273
273
|
$[3] = t4;
|
|
274
274
|
} else t4 = $[3];
|
|
275
275
|
let t5;
|
|
276
276
|
if ($[4] !== ariaLabel || $[5] !== t1 || $[6] !== t2 || $[7] !== t3 || $[8] !== t4) {
|
|
277
|
-
t5 =
|
|
277
|
+
t5 = /* @__PURE__ */ jsx("span", {
|
|
278
278
|
className: t1,
|
|
279
279
|
"data-component": "Card.Icon",
|
|
280
280
|
role: t2,
|
|
@@ -320,7 +320,7 @@ function CardImage(t0) {
|
|
|
320
320
|
} else t2 = $[6];
|
|
321
321
|
let t3;
|
|
322
322
|
if ($[7] !== alt || $[8] !== rest || $[9] !== src || $[10] !== t2) {
|
|
323
|
-
t3 =
|
|
323
|
+
t3 = /* @__PURE__ */ jsx("img", {
|
|
324
324
|
...rest,
|
|
325
325
|
src,
|
|
326
326
|
alt,
|
|
@@ -376,7 +376,7 @@ const CardHeading = /*#__PURE__*/ forwardRef(function CardHeading(t0, ref) {
|
|
|
376
376
|
} else t3 = $[7];
|
|
377
377
|
let t4;
|
|
378
378
|
if ($[8] !== Component || $[9] !== children || $[10] !== ref || $[11] !== rest || $[12] !== t2 || $[13] !== t3) {
|
|
379
|
-
t4 =
|
|
379
|
+
t4 = /* @__PURE__ */ jsx(Component, {
|
|
380
380
|
...rest,
|
|
381
381
|
ref,
|
|
382
382
|
id: t2,
|
|
@@ -419,7 +419,7 @@ const CardDescription = /*#__PURE__*/ forwardRef(function CardDescription(t0, re
|
|
|
419
419
|
} else t1 = $[5];
|
|
420
420
|
let t2;
|
|
421
421
|
if ($[6] !== children || $[7] !== ref || $[8] !== rest || $[9] !== t1) {
|
|
422
|
-
t2 =
|
|
422
|
+
t2 = /* @__PURE__ */ jsx("p", {
|
|
423
423
|
...rest,
|
|
424
424
|
ref,
|
|
425
425
|
className: t1,
|
|
@@ -447,7 +447,7 @@ function CardAction(t0) {
|
|
|
447
447
|
const { children } = t0;
|
|
448
448
|
let t1;
|
|
449
449
|
if ($[0] !== children) {
|
|
450
|
-
t1 =
|
|
450
|
+
t1 = /* @__PURE__ */ jsx("div", {
|
|
451
451
|
"data-component": "Card.Action",
|
|
452
452
|
children
|
|
453
453
|
});
|
|
@@ -481,7 +481,7 @@ const CardMetadata = /*#__PURE__*/ forwardRef(function CardMetadata(t0, ref) {
|
|
|
481
481
|
} else t1 = $[5];
|
|
482
482
|
let t2;
|
|
483
483
|
if ($[6] !== children || $[7] !== ref || $[8] !== rest || $[9] !== t1) {
|
|
484
|
-
t2 =
|
|
484
|
+
t2 = /* @__PURE__ */ jsx("div", {
|
|
485
485
|
...rest,
|
|
486
486
|
ref,
|
|
487
487
|
className: t1,
|
|
@@ -55,7 +55,7 @@ const Checkbox = /*#__PURE__*/ React.forwardRef(({ checked, className, defaultCh
|
|
|
55
55
|
if (indeterminate) checkbox.setAttribute("aria-checked", "mixed");
|
|
56
56
|
else checkbox.setAttribute("aria-checked", checkbox.checked ? "true" : "false");
|
|
57
57
|
});
|
|
58
|
-
return
|
|
58
|
+
return /* @__PURE__ */ jsx("input", {
|
|
59
59
|
...inputProps,
|
|
60
60
|
"data-component": dataComponent !== null && dataComponent !== void 0 ? dataComponent : "Checkbox",
|
|
61
61
|
className: clsx(className, shared_module_css_default.Input, Checkbox_module_css_default.Checkbox)
|
|
@@ -78,7 +78,7 @@ const CheckboxGroup = (t0) => {
|
|
|
78
78
|
} else t4 = $[16];
|
|
79
79
|
let t5;
|
|
80
80
|
if ($[17] !== children || $[18] !== disabled || $[19] !== rest) {
|
|
81
|
-
t5 =
|
|
81
|
+
t5 = /* @__PURE__ */ jsx(CheckboxOrRadioGroup_default, {
|
|
82
82
|
"data-component": "CheckboxGroup",
|
|
83
83
|
disabled,
|
|
84
84
|
...rest,
|
|
@@ -91,7 +91,7 @@ const CheckboxGroup = (t0) => {
|
|
|
91
91
|
} else t5 = $[20];
|
|
92
92
|
let t6;
|
|
93
93
|
if ($[21] !== t4 || $[22] !== t5) {
|
|
94
|
-
t6 =
|
|
94
|
+
t6 = /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, {
|
|
95
95
|
value: t4,
|
|
96
96
|
children: t5
|
|
97
97
|
});
|