@primer/react 38.3.0-rc.61ba31aeb → 38.3.0-rc.6bc07c24a

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.

Potentially problematic release.


This version of @primer/react might be problematic. Click here for more details.

Files changed (51) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/ActionBar/ActionBar-a41224b2.css +2 -0
  3. package/dist/ActionBar/ActionBar-a41224b2.css.map +1 -0
  4. package/dist/ActionBar/ActionBar.module.css.js +2 -2
  5. package/dist/ActionList/ActionList-370a46b8.css +2 -0
  6. package/dist/ActionList/ActionList-370a46b8.css.map +1 -0
  7. package/dist/ActionList/ActionList.module.css.js +2 -2
  8. package/dist/Banner/Banner-c1744c4b.css +1 -1
  9. package/dist/Banner/Banner-c1744c4b.css.map +1 -1
  10. package/dist/Banner/Banner.d.ts +10 -0
  11. package/dist/Banner/Banner.d.ts.map +1 -1
  12. package/dist/Banner/Banner.js +4 -2
  13. package/dist/Banner/index.d.ts +1 -0
  14. package/dist/Banner/index.d.ts.map +1 -1
  15. package/dist/Blankslate/Blankslate-2be5efdc.css +1 -1
  16. package/dist/Blankslate/Blankslate-2be5efdc.css.map +1 -1
  17. package/dist/Button/ButtonBase-781fba8b.css +1 -1
  18. package/dist/Button/ButtonBase-781fba8b.css.map +1 -1
  19. package/dist/FilteredActionList/FilteredActionList.d.ts +19 -1
  20. package/dist/FilteredActionList/FilteredActionList.d.ts.map +1 -1
  21. package/dist/FilteredActionList/FilteredActionList.js +9 -5
  22. package/dist/KeybindingHint/key-names.js +1 -1
  23. package/dist/SegmentedControl/SegmentedControl-5cfe12ab.css +2 -0
  24. package/dist/SegmentedControl/SegmentedControl-5cfe12ab.css.map +1 -0
  25. package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  26. package/dist/SegmentedControl/SegmentedControl.js +115 -52
  27. package/dist/SegmentedControl/SegmentedControl.module.css.js +2 -2
  28. package/dist/SkeletonText/SkeletonText-5cf908c1.css +1 -1
  29. package/dist/SkeletonText/SkeletonText-5cf908c1.css.map +1 -1
  30. package/dist/Text/Text-ca7603b7.css +1 -1
  31. package/dist/Text/Text-ca7603b7.css.map +1 -1
  32. package/dist/ThemeProvider.js +1 -1
  33. package/dist/Tooltip/Tooltip-fffa9948.css +1 -1
  34. package/dist/Tooltip/Tooltip-fffa9948.css.map +1 -1
  35. package/dist/TooltipV2/Tooltip-5a80d7b2.css +1 -1
  36. package/dist/TooltipV2/Tooltip-5a80d7b2.css.map +1 -1
  37. package/dist/VisuallyHidden/VisuallyHidden.d.ts +1 -1
  38. package/dist/experimental/IssueLabel/IssueLabel-d9c2c5cf.css +1 -1
  39. package/dist/experimental/IssueLabel/IssueLabel-d9c2c5cf.css.map +1 -1
  40. package/dist/internal/components/{UnderlineTabbedInterface-addc90dd.css → UnderlineTabbedInterface-20c3ba3d.css} +1 -1
  41. package/dist/internal/components/UnderlineTabbedInterface-20c3ba3d.css.map +1 -0
  42. package/dist/internal/components/UnderlineTabbedInterface.module.css.js +1 -1
  43. package/generated/components.json +34 -2
  44. package/package.json +2 -1
  45. package/dist/ActionBar/ActionBar-8ed12fe7.css +0 -2
  46. package/dist/ActionBar/ActionBar-8ed12fe7.css.map +0 -1
  47. package/dist/ActionList/ActionList-46e9c2db.css +0 -2
  48. package/dist/ActionList/ActionList-46e9c2db.css.map +0 -1
  49. package/dist/SegmentedControl/SegmentedControl-7f79ab74.css +0 -2
  50. package/dist/SegmentedControl/SegmentedControl-7f79ab74.css.map +0 -1
  51. package/dist/internal/components/UnderlineTabbedInterface-addc90dd.css.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Button/ButtonBase.module.css","../../postcss-preset-primer/src/mixins/focusOutline.css","../../postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css"],"names":[],"mappings":"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","file":"ButtonBase-781fba8b.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 &: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 &:disabled,\n &[aria-disabled='true']:not([data-loading='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 &: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 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 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 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 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 &:hover:not(:disabled, [data-inactive]) {\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 color: var(--control-fgColor-disabled);\n background-color: transparent;\n border-color: transparent;\n }\n\n & .Label {\n white-space: unset;\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 &:not(:has(.Visual)) {\n text-decoration: underline;\n }\n\n &:has(.Visual) {\n background-image: linear-gradient(to right, currentColor, currentColor);\n background-size: 100% 1.5px;\n background-position: 0 calc(100% - 2px);\n background-repeat: no-repeat;\n\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n [data-a11y-link-underlines='false'] &:where([data-variant='link']) {\n &:not(:has(.Visual)) {\n text-decoration: none;\n background-image: none;\n }\n\n &:has(.Visual) {\n background-image: none;\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-has-count]):has([data-component='leadingVisual']):not(:has([data-component='text'])) {\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[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-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, $outlineColor: 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"]}
1
+ {"version":3,"sources":["../src/Button/ButtonBase.module.css","../../postcss-preset-primer/src/mixins/focusOutline.css","../../postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css"],"names":[],"mappings":"AACA,6BAqBE,kBAAmB,CADnB,eAAgB,CANhB,4BAA6B,CAC7B,6CAAqC,CACrC,2EAAoD,CACpD,gDAAyC,CARzC,8DAAyC,CAGzC,cAAe,CAXf,YAAa,CAKb,mBAAoB,CACpB,8CAAuC,CACvC,8CAA2C,CAe3C,4BAAuB,CApBvB,sCAAkC,CAmBlC,6BAA8B,CApB9B,qBAAsB,CAGtB,2DAAqD,CAKrD,iBAAkB,CAClB,4BAAqB,CAArB,oBAAqB,CAOrB,yCAA+C,CAC/C,4DAAgE,CANhE,wBAAiB,CAAjB,gBA4nBF,CAhnBE,mDACE,6CACF,CAEA,mCACE,wBACF,CAEA,2CC/BA,eAAgB,CAFhB,kEAAgC,CAChC,mBDkCA,CAEA,oCACE,eACF,CAEA,gHAGE,eAAgB,CADhB,kBAOF,CAJE,kSAEE,aACF,CAGF,8BACE,mCACE,6BACF,CACF,CAGA,8DAEE,gDAA2B,CAD3B,YAAa,CAEb,mBACF,CAGA,kEACE,YAAa,CACb,mBACF,CAIA,iEACE,mBAAoB,CAMpB,aAAc,CAJd,eAAgB,CAEhB,aAAc,CACd,oBAAqB,CAJrB,qCAcF,CAPE,0FACE,uCACF,CAEA,0FACE,sCACF,CAKF,2CACE,mBAKF,CAHE,iDACE,4BAAqB,CAArB,oBACF,CAKF,qEAME,oBAAqB,CADrB,kBAAmB,CAHnB,YAAa,CADb,aAAc,CAEd,uDAAwD,CACxD,4DAiBF,CAbE,4FACE,qCACF,CAIA,qGACE,sBACF,CAEA,oGACE,0BACF,CAGF,oEACE,uBACF,CAEA,6DAGE,cAAe,CAFf,sDAA+C,CAC/C,kBAEF,CAEA,qEACE,wBACF,CAEA,qEACE,+CACF,CAIA,sDAKE,4CAAsC,CADtC,mCAA6B,CAH7B,wCAAiC,CAEjC,4DAYF,CARE,wGAEE,4CACF,CAEA,8EACE,qDACF,CAGF,sDAIE,kCAA6B,CAH7B,uCAAiC,CAEjC,0DAWF,CARE,wGAEE,2CACF,CAEA,4EACE,2CACF,CAKF,uDACE,UACF,CAIA,2DAEE,YAAa,CACb,0CAAsC,CAFtC,0BAAsB,CAAtB,qBAsCF,CAlCE,2FAEE,kBAAmB,CADnB,aAAc,CAGd,2FACF,CAEA,mFAGE,iBAAkB,CADlB,qBAEF,CAEA,oFACE,YAAa,CACb,4CAMF,CAJE,oHAEE,yFACF,CAGF,oFACE,YAAa,CACb,2CAAqC,CAErC,+DAMF,CAJE,oHAEE,0FACF,CAWF,6LAME,cAAe,CACf,wBAA0B,CAC1B,iBAKF,CAHE,0NACE,iBACF,CAMJ,8DAEE,kBAAmB,CADnB,YAAa,CAEb,sBACF,CAIA,2DAEE,uEAAoD,CACpD,uEAAgD,CAFhD,8DA8CF,CA1CE,+EACE,gFAAsD,CACtD,oFACF,CAEA,iEACE,8EAAqD,CACrD,kFACF,CAEA,kEACE,gFAAsD,CACtD,oFACF,CAEA,4KAGE,2EAAwD,CACxD,+EAAwD,CACxD,eAAgB,CAHhB,qEAUF,CALE,kMACE,uEAAgE,CAEhE,+EAAsE,CADtE,kEAEF,CAGF,0FACE,gGACF,CAEA,4EACE,mEAA4D,CAE5D,2EAAkE,CADlE,8DAEF,CAEA,+FACE,gDACF,CAKF,2DAEE,+EAAoD,CACpD,mFAAoD,CACpD,gEAAuC,CAHvC,sEAqDF,CAhDE,+EACE,0FAAsD,CACtD,yFACF,CAEA,iEACE,sFAAqD,CACrD,0FACF,CAEA,yEEpUF,gFAAqD,CAHrD,kEAAgC,CAChC,mBFwUE,CAEA,kEACE,0FAAsD,CACtD,yFACF,CAEA,4KAGE,4FAAwD,CACxD,gGAAwD,CACxD,eAAgB,CAHhB,mFAUF,CALE,kMACE,yEAAgE,CAEhE,+EAAsE,CADtE,oEAEF,CAGF,0FAEE,wGAAsE,CADtE,gFAEF,CAEA,4EACE,qEAA4D,CAE5D,2EAAkE,CADlE,2DAEF,CAGA,oFACE,sEACF,CAKF,0DAEE,sEAAmD,CACnD,uEAAgD,CAFhD,oEA8FF,CA1FE,8EAEE,wFAAqD,CACrD,4FAAqD,CACrD,uFAAgD,CAHhD,+EAQF,CAHE,uGACE,6EACF,CAGF,gEAEE,oFAAoD,CACpD,wFAAoD,CACpD,gEAAuC,CAHvC,2EAoBF,CAfE,+FAEE,6GAAsE,CADtE,kGAEF,CAEA,iFACE,qEAA4D,CAE5D,2EAAkE,CADlE,2DAAuD,CAEvD,wBACF,CAEA,yFACE,6EACF,CAGF,iEAEE,wFAAqD,CACrD,4FAAqD,CACrD,uFAAgD,CAHhD,+EAoBF,CAfE,gGAEE,6GAAsE,CADtE,kGAEF,CAEA,kFACE,sEAA6D,CAE7D,4EAAmE,CADnE,4DAAwD,CAExD,wBACF,CAEA,0FACE,6EACF,CAGF,0KAGE,0FAAuD,CACvD,+EAAwD,CACxD,eAAgB,CAHhB,iFAeF,CAVE,8MAEE,mHAAyE,CADzE,wGAEF,CAEA,gMACE,sEAA+D,CAE/D,8EAAqE,CADrE,iEAEF,CAGF,yFAEE,sGAAqE,CADrE,2FAEF,CAEA,2EACE,kEAA2D,CAE3D,0EAAiE,CADjE,6DAEF,CAEA,mFACE,sEACF,CAKF,6DAEE,iEAAsD,CACtD,eAAgB,CAFhB,8DAkEF,CA9DE,iFACE,uGACF,CAEA,mEACE,qGAAuD,CACvD,kEAUF,CARE,4FACE,qDACF,CAEA,oFACE,wEAA+D,CAC/D,wBACF,CAGF,oEACE,uGAUF,CARE,6FACE,qDACF,CAEA,qFACE,yEAAgE,CAChE,wBACF,CAGF,gLAGE,2GAA0D,CAC1D,2GAA0D,CAC1D,eAAgB,CAHhB,8EAUF,CALE,sMACE,2EAAkE,CAElE,iFAAwE,CADxE,oEAEF,CAGF,sFACE,oDACF,CAEA,4FACE,gFACF,CAEA,8EACE,qEAA8D,CAE9D,6EAAoE,CADpE,gEAEF,CAEA,iGACE,oDACF,CAKF,wDAQE,YAAa,CACb,eAAgB,CAHhB,gDAA0B,CAL1B,mBAAoB,CAIpB,iBAAkB,CAFlB,YAAa,CADb,0BAAsB,CAAtB,qBAAsB,CAEtB,SAAU,CAGV,eAgCF,CA5BE,6FACE,iCAA0B,CAA1B,yBACF,CAEA,oIAEE,kBACF,CAEA,sKAGE,4BAA6B,CAC7B,wBAAyB,CAFzB,qEAGF,CAEA,gFACE,iBACF,CAEA,+EAEE,gCAAkC,CADlC,4CAEF,CAEA,iFACE,gDACF,CAIA,kIACE,iCAA0B,CAA1B,yBACF,CAEA,4HACE,iEAAuE,CAEvE,sCAAuC,CACvC,2BAA4B,CAF5B,0BAOF,CAHE,kIACE,4BAAqB,CAArB,oBACF,CAKF,mIAEE,qBAAsB,CADtB,4BAAqB,CAArB,oBAEF,CAEA,6HACE,qBACF,CAKF,yKAKE,uDAAgD,CAEhD,mDAA4C,CAC5C,eAAgB,CALhB,4CAAqC,CACrC,WAgBF,CAVE,oZAEE,uBACF,CAEA,+LACE,+DAAwD,CAExD,uEAA8D,CAD9D,0DAEF,CAKF,0HAEE,kEAWF,CATE,mJAEE,mEACF,CAEA,mJAEE,+DACF,CAIJ,qCACE,aACF,CAEA,iBACE,uBAAwB,CACxB,uDACF","file":"ButtonBase-781fba8b.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 &: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 &:disabled,\n &[aria-disabled='true']:not([data-loading='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 &: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 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 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 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 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 &:hover:not(:disabled, [data-inactive]) {\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 color: var(--control-fgColor-disabled);\n background-color: transparent;\n border-color: transparent;\n }\n\n & .Label {\n white-space: unset;\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 &:not(:has(.Visual)) {\n text-decoration: underline;\n }\n\n &:has(.Visual) {\n background-image: linear-gradient(to right, currentColor, currentColor);\n background-size: 100% 1.5px;\n background-position: 0 calc(100% - 2px);\n background-repeat: no-repeat;\n\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n [data-a11y-link-underlines='false'] &:where([data-variant='link']) {\n &:not(:has(.Visual)) {\n text-decoration: none;\n background-image: none;\n }\n\n &:has(.Visual) {\n background-image: none;\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-has-count]):has([data-component='leadingVisual']):not(:has([data-component='text'])) {\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[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-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, $outlineColor: 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"]}
@@ -1,6 +1,7 @@
1
1
  import type { JSX } from 'react';
2
2
  import type React from 'react';
3
3
  import type { TextInputProps } from '../TextInput';
4
+ import { type ActionListProps } from '../ActionList';
4
5
  import type { GroupedListProps, ListPropsBase } from './';
5
6
  import type { FilteredActionListLoadingType } from './FilteredActionListLoaders';
6
7
  export interface FilteredActionListProps extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>, ListPropsBase {
@@ -11,6 +12,10 @@ export interface FilteredActionListProps extends Partial<Omit<GroupedListProps,
11
12
  onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement> | null) => void;
12
13
  onListContainerRefChanged?: (ref: HTMLElement | null) => void;
13
14
  onInputRefChanged?: (ref: React.RefObject<HTMLInputElement>) => void;
15
+ /**
16
+ * A ref assigned to the scrollable container wrapping the ActionList
17
+ */
18
+ scrollContainerRef?: React.Ref<HTMLDivElement | null>;
14
19
  textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>;
15
20
  inputRef?: React.RefObject<HTMLInputElement>;
16
21
  message?: React.ReactNode;
@@ -22,6 +27,19 @@ export interface FilteredActionListProps extends Partial<Omit<GroupedListProps,
22
27
  announcementsEnabled?: boolean;
23
28
  fullScreenOnNarrow?: boolean;
24
29
  onSelectAllChange?: (checked: boolean) => void;
30
+ /**
31
+ * Additional props to pass to the underlying ActionList component.
32
+ */
33
+ actionListProps?: Partial<ActionListProps>;
34
+ /**
35
+ * Determines how keyboard focus behaves when navigating beyond the first or last item in the list.
36
+ *
37
+ * - `'stop'`: Focus will stop at the first or last item; further navigation in that direction will not move focus.
38
+ * - `'wrap'`: Focus will wrap around to the opposite end of the list when navigating past the boundaries (e.g., pressing Down on the last item moves focus to the first).
39
+ *
40
+ * @default 'wrap'
41
+ */
42
+ focusOutBehavior?: 'stop' | 'wrap';
25
43
  /**
26
44
  * Private API for use internally only. Adds the ability to switch between
27
45
  * `active-descendant` and roving tabindex.
@@ -43,7 +61,7 @@ export interface FilteredActionListProps extends Partial<Omit<GroupedListProps,
43
61
  */
44
62
  _PrivateFocusManagement?: 'roving-tabindex' | 'active-descendant';
45
63
  }
46
- export declare function FilteredActionList({ loading, placeholderText, filterValue: externalFilterValue, loadingType, onFilterChange, onListContainerRefChanged, onInputRefChanged, items, textInputProps, inputRef: providedInputRef, groupMetadata, showItemDividers, message, messageText, className, selectionVariant, announcementsEnabled, fullScreenOnNarrow, onSelectAllChange, _PrivateFocusManagement, ...listProps }: FilteredActionListProps): JSX.Element;
64
+ export declare function FilteredActionList({ loading, placeholderText, filterValue: externalFilterValue, loadingType, onFilterChange, onListContainerRefChanged, onInputRefChanged, items, textInputProps, inputRef: providedInputRef, scrollContainerRef: providedScrollContainerRef, groupMetadata, showItemDividers, message, messageText, className, selectionVariant, announcementsEnabled, fullScreenOnNarrow, onSelectAllChange, actionListProps, focusOutBehavior, _PrivateFocusManagement, ...listProps }: FilteredActionListProps): JSX.Element;
47
65
  export declare namespace FilteredActionList {
48
66
  var displayName: string;
49
67
  }
@@ -1 +1 @@
1
- {"version":3,"file":"FilteredActionList.d.ts","sourceRoot":"","sources":["../../src/FilteredActionList/FilteredActionList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAuB,GAAG,EAAC,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,cAAc,CAAA;AAGhD,OAAO,KAAK,EAAC,gBAAgB,EAAE,aAAa,EAA0B,MAAM,IAAI,CAAA;AAOhF,OAAO,KAAK,EAAC,6BAA6B,EAAC,MAAM,6BAA6B,CAAA;AAY9E,MAAM,WAAW,uBAAwB,SAAQ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,aAAa,CAAC,CAAC,EAAE,aAAa;IAClH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,6BAA6B,CAAA;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IACtF,yBAAyB,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7D,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC,CAAA;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE;QACZ,KAAK,EAAE,MAAM,CAAA;QACb,WAAW,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C;;;;;;;;;;;;;;;;;;OAkBG;IACH,uBAAuB,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,CAAA;CAClE;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAe,EACf,eAAe,EACf,WAAW,EAAE,mBAAmB,EAChC,WAAwD,EACxD,cAAc,EACd,yBAAyB,EACzB,iBAAiB,EACjB,KAAK,EACL,cAAc,EACd,QAAQ,EAAE,gBAAgB,EAC1B,aAAa,EACb,gBAAgB,EAChB,OAAO,EACP,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,oBAA2B,EAC3B,kBAAkB,EAClB,iBAAiB,EACjB,uBAA6C,EAC7C,GAAG,SAAS,EACb,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAyTvC;yBA/Ue,kBAAkB"}
1
+ {"version":3,"file":"FilteredActionList.d.ts","sourceRoot":"","sources":["../../src/FilteredActionList/FilteredActionList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAuB,GAAG,EAAC,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,cAAc,CAAA;AAEhD,OAAO,EAAa,KAAK,eAAe,EAAC,MAAM,eAAe,CAAA;AAC9D,OAAO,KAAK,EAAC,gBAAgB,EAAE,aAAa,EAA0B,MAAM,IAAI,CAAA;AAOhF,OAAO,KAAK,EAAC,6BAA6B,EAAC,MAAM,6BAA6B,CAAA;AAW9E,MAAM,WAAW,uBAAwB,SAAQ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,aAAa,CAAC,CAAC,EAAE,aAAa;IAClH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,6BAA6B,CAAA;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IACtF,yBAAyB,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7D,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACpE;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACrD,cAAc,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC,CAAA;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE;QACZ,KAAK,EAAE,MAAM,CAAA;QACb,WAAW,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;IAC1C;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAClC;;;;;;;;;;;;;;;;;;OAkBG;IACH,uBAAuB,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,CAAA;CAClE;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAe,EACf,eAAe,EACf,WAAW,EAAE,mBAAmB,EAChC,WAAwD,EACxD,cAAc,EACd,yBAAyB,EACzB,iBAAiB,EACjB,KAAK,EACL,cAAc,EACd,QAAQ,EAAE,gBAAgB,EAC1B,kBAAkB,EAAE,0BAA0B,EAC9C,aAAa,EACb,gBAAgB,EAChB,OAAO,EACP,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,oBAA2B,EAC3B,kBAAkB,EAClB,iBAAiB,EACjB,eAAe,EACf,gBAAyB,EACzB,uBAA6C,EAC7C,GAAG,SAAS,EACb,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CA4TvC;yBArVe,kBAAkB"}
@@ -33,6 +33,7 @@ function FilteredActionList({
33
33
  items,
34
34
  textInputProps,
35
35
  inputRef: providedInputRef,
36
+ scrollContainerRef: providedScrollContainerRef,
36
37
  groupMetadata,
37
38
  showItemDividers,
38
39
  message,
@@ -42,6 +43,8 @@ function FilteredActionList({
42
43
  announcementsEnabled = true,
43
44
  fullScreenOnNarrow,
44
45
  onSelectAllChange,
46
+ actionListProps,
47
+ focusOutBehavior = 'wrap',
45
48
  _PrivateFocusManagement = 'active-descendant',
46
49
  ...listProps
47
50
  }) {
@@ -53,12 +56,12 @@ function FilteredActionList({
53
56
  }, [onFilterChange, setInternalFilterValue]);
54
57
  const inputAndListContainerRef = useRef(null);
55
58
  const listRef = useRef(null);
56
- const scrollContainerRef = useRef(null);
59
+ const scrollContainerRef = useProvidedRefOrCreate(providedScrollContainerRef);
57
60
  const inputRef = useProvidedRefOrCreate(providedInputRef);
58
61
  const usingRovingTabindex = _PrivateFocusManagement === 'roving-tabindex';
59
62
  const [listContainerElement, setListContainerElement] = useState(null);
60
63
  const activeDescendantRef = useRef();
61
- const listId = useId();
64
+ const listId = useId(actionListProps === null || actionListProps === void 0 ? void 0 : actionListProps.id);
62
65
  const inputDescriptionTextId = useId();
63
66
  const [isInputFocused, setIsInputFocused] = useState(false);
64
67
  const selectAllChecked = items.length > 0 && items.every(item => item.selected);
@@ -127,7 +130,7 @@ function FilteredActionList({
127
130
  current: listContainerElement
128
131
  },
129
132
  bindKeys: FocusKeys.ArrowVertical | FocusKeys.PageUpDown,
130
- focusOutBehavior: 'wrap',
133
+ focusOutBehavior,
131
134
  focusableElementFilter: element => {
132
135
  return !(element instanceof HTMLInputElement);
133
136
  },
@@ -146,7 +149,7 @@ function FilteredActionList({
146
149
  behavior: 'auto'
147
150
  });
148
151
  }
149
- }, [items, inputRef]);
152
+ }, [items, inputRef, scrollContainerRef]);
150
153
  useEffect(() => {
151
154
  if (usingRovingTabindex) {
152
155
  const inputAndListContainerElement = inputAndListContainerRef.current;
@@ -197,9 +200,10 @@ function FilteredActionList({
197
200
  showDividers: showItemDividers,
198
201
  selectionVariant: selectionVariant,
199
202
  ...listProps,
203
+ ...actionListProps,
200
204
  role: "listbox",
201
205
  id: listId,
202
- className: classes.ActionList,
206
+ className: clsx(classes.ActionList, actionListProps === null || actionListProps === void 0 ? void 0 : actionListProps.className),
203
207
  children: groupMetadata !== null && groupMetadata !== void 0 && groupMetadata.length ? groupMetadata.map((group, index) => {
204
208
  var _group$header, _group$header2;
205
209
  if (index === firstGroupIndex_0 && getItemListForEachGroup(group.groupId).length === 0) {
@@ -86,7 +86,7 @@ const accessibleKeyName = (key, isMacOS) => {
86
86
  printscreen: 'print screen',
87
87
  // We don't need to represent _every_ symbol - only those found on standard keyboards.
88
88
  // Other symbols should be avoided as keyboard shortcuts anyway.
89
- // These should match the colloqiual names of the keys, not the names of the symbols. Ie,
89
+ // These should match the colloquial names of the keys, not the names of the symbols. Ie,
90
90
  // "Equals" not "Equal Sign", "Dash" not "Minus", "Period" not "Dot", etc.
91
91
  '`': 'backtick',
92
92
  '~': 'tilde',
@@ -0,0 +1,2 @@
1
+ .prc-SegmentedControl-SegmentedControl-e7570{--segmented-control-icon-width:32px;background-color:var(--controlTrack-bgColor-rest,var(--color-switch-track-bg));border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent);border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;font-size:var(--text-body-size-medium,.875rem);height:32px;margin:0;padding:0}.prc-SegmentedControl-SegmentedControl-e7570[data-full-width=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-e7570[data-full-width=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-narrow=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-narrow=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-regular=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-regular=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-wide=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-regular=true]:not([data-full-width-wide=true]),.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-wide=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}.prc-SegmentedControl-SegmentedControl-e7570[data-variant=dropdown],.prc-SegmentedControl-SegmentedControl-e7570[data-variant=hideLabels] .prc-SegmentedControl-Text-c5gSh{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-e7570[data-variant-narrow=dropdown],.prc-SegmentedControl-SegmentedControl-e7570[data-variant-narrow=hideLabels] .prc-SegmentedControl-Text-c5gSh{display:none}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-e7570[data-variant-regular=dropdown],.prc-SegmentedControl-SegmentedControl-e7570[data-variant-regular=hideLabels] .prc-SegmentedControl-Text-c5gSh{display:none}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-e7570[data-variant-wide=dropdown],.prc-SegmentedControl-SegmentedControl-e7570[data-variant-wide=hideLabels] .prc-SegmentedControl-Text-c5gSh{display:none}}.prc-SegmentedControl-SegmentedControl-e7570:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.prc-SegmentedControl-DropdownContainer-QSnSd{display:none}.prc-SegmentedControl-DropdownContainer-QSnSd[data-variant=dropdown]{display:block}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownContainer-QSnSd[data-variant-narrow=dropdown]{display:block}}@media (min-width:48rem){.prc-SegmentedControl-DropdownContainer-QSnSd[data-variant-regular=dropdown]{display:block}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownContainer-QSnSd[data-variant-wide=dropdown]{display:block}}.prc-SegmentedControl-Item-7Aq6h{display:block;flex-grow:1;margin-bottom:-1px;margin-top:-1px;position:relative}.prc-SegmentedControl-Item-7Aq6h:not(:last-child){margin-right:1px}.prc-SegmentedControl-Item-7Aq6h:not(:last-child):after{background-color:var(--borderColor-default,var(--color-border-default));bottom:var(--base-size-8,.5rem);content:"";position:absolute;right:calc(var(--base-size-2,.125rem)*-1);top:var(--base-size-8,.5rem);width:1px}.prc-SegmentedControl-Item-7Aq6h:not(:last-child):has(+[data-selected]):after,.prc-SegmentedControl-Item-7Aq6h:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-7Aq6h:focus-within:has(:focus-visible){background-color:transparent}.prc-SegmentedControl-Item-7Aq6h:first-child{margin-left:-1px}.prc-SegmentedControl-Item-7Aq6h:last-child{margin-right:-1px}.prc-SegmentedControl-Item-7Aq6h .prc-SegmentedControl-Counter--H-pM{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-Button-ojWXD{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--base-text-weight-normal,400);height:100%;padding:var(--segmented-control-button-bg-inset);width:100%}.prc-SegmentedControl-Button-ojWXD svg{fill:var(--fgColor-muted,var(--color-fg-muted));color:var(--fgColor-muted,var(--color-fg-muted))}.prc-SegmentedControl-Button-ojWXD:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,var(--color-accent-fg));outline-offset:-1px}.prc-SegmentedControl-Button-ojWXD:focus:not(:disabled):not(:focus-visible){outline:1px solid transparent}.prc-SegmentedControl-Button-ojWXD:focus-visible:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,var(--color-accent-fg));outline-offset:-1px}.prc-SegmentedControl-Button-ojWXD:focus:focus-visible:not(:last-child):after{width:0}@media (pointer:coarse){.prc-SegmentedControl-Button-ojWXD:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-SegmentedControl-IconButton-O80Eh{width:var(--segmented-control-icon-width,32px)}.prc-SegmentedControl-Content-gnQ4n{align-items:center;border-color:transparent;border-radius:calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset)/2);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);display:flex;height:100%;justify-content:center;padding-left:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));padding-right:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset))}.prc-SegmentedControl-Button-ojWXD[aria-current=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-ojWXD[aria-current=true] .prc-SegmentedControl-Content-gnQ4n{background-color:var(--controlKnob-bgColor-rest,var(--color-switch-knob-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-switch-knob-border));border-radius:var(--segmented-control-outer-radius);padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding)}.prc-SegmentedControl-Button-ojWXD:not([aria-current=true]):hover .prc-SegmentedControl-Content-gnQ4n{background-color:var(--controlTrack-bgColor-hover,var(--color-switch-track-hover-bg))}.prc-SegmentedControl-Button-ojWXD:not([aria-current=true]):active .prc-SegmentedControl-Content-gnQ4n{background-color:var(--controlTrack-bgColor-active,var(--color-switch-track-active-bg))}.prc-SegmentedControl-Text-c5gSh:after{content:attr(data-text);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;visibility:hidden}.prc-SegmentedControl-LeadingIcon-dAHA8{margin-right:var(--base-size-4,.25rem)}
2
+ /*# sourceMappingURL=SegmentedControl-5cfe12ab.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css"],"names":[],"mappings":"AAAA,6CAEE,mCAAoC,CASpC,8EAAkD,CAClD,8FAAuF,CACvF,gDAAyC,CATzC,mBAAoB,CAMpB,8CAAuC,CAHvC,WAAY,CAEZ,QAAS,CADT,SA0HF,CAlHE,mEACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,oEACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CAEA,wCACE,0EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,2EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,yBACE,2EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,4EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,2BACE,wEACE,YAAa,CACb,UAAW,CAEX,mCACF,CASA,qLACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAQA,2KACE,YACF,CAEA,wCAKE,yLACE,YACF,CACF,CAEA,yBAKE,2LACE,YACF,CACF,CAEA,2BAKE,qLACE,YACF,CACF,CAEA,sEAGE,4CAAsC,CADtC,WAEF,CAGF,8CACE,YAwBF,CArBE,qEACE,aACF,CAEA,wCACE,4EACE,aACF,CACF,CAEA,yBACE,6EACE,aACF,CACF,CAEA,2BACE,0EACE,aACF,CACF,CAGF,iCAEE,aAAc,CAKd,WAAY,CADZ,kBAAmB,CAFnB,eAAgB,CAHhB,iBAgDF,CAxCE,kDAEE,gBAiBF,CAfE,wDAQE,uEAA4C,CAJ5C,+BAA0B,CAE1B,UAAW,CALX,iBAAkB,CAElB,yCAAoC,CADpC,4BAAuB,CAGvB,SAIF,CAEA,6JAEE,4BACF,CAGF,kEACE,4BACF,CAEA,6CAEE,gBACF,CAEA,4CAEE,iBACF,CAEA,qEAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAGF,mCAEE,6CAA8C,CAC9C,uCAAwC,CACxC,oEAA4D,CAW5D,4BAA6B,CAC7B,wBAAyB,CAGzB,mDAAoD,CAFpD,cAAe,CAJf,kBAAmB,CACnB,cAAe,CAJf,mBAAoB,CACpB,iBAAkB,CAClB,8CAA2C,CAL3C,WAAY,CAEZ,gDAAiD,CAHjD,UAwDF,CAzCE,uCACE,+CAA0B,CAC1B,gDACF,CAGA,wDAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAOF,CAHE,4EACE,6BACF,CAIF,gEAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAEF,CAGA,8EAEE,OACF,CAEA,wBACE,0CAME,UAAW,CAFX,MAAO,CACP,eAAgB,CAJhB,iBAAkB,CAElB,OAAQ,CADR,OAAQ,CAKR,0BACF,CACF,CAGF,uCACE,8CACF,CAEA,oCAiBE,kBAAmB,CAVnB,wBAAyB,CASzB,sGAAyG,CARzG,kBAAmB,CACnB,6CAAqC,CARrC,YAAa,CACb,WAAY,CAgBZ,sBAAuB,CAZvB,2GAA4G,CAF5G,4GAeF,CAEA,sDAEE,gDAA6C,CAD7C,SAaF,CAVE,0FAKE,4EAAiD,CACjD,gFAAiD,CAEjD,mDAAoD,CAJpD,0DAA2D,CAF3D,2DAOF,CAIA,sGACE,qFACF,CAEA,uGACE,uFACF,CAGF,uCAOE,uBAAwB,CANxB,aAAc,CAGd,gDAA6C,CAF7C,QAAS,CACT,eAAgB,CAEhB,mBAAoB,CAGpB,wBAAiB,CAAjB,gBAAiB,CAFjB,iBAGF,CAEA,wCACE,sCACF","file":"SegmentedControl-5cfe12ab.css","sourcesContent":[".SegmentedControl {\n /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n --segmented-control-icon-width: 32px;\n\n display: inline-flex;\n\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 32px;\n padding: 0;\n margin: 0;\n font-size: var(--text-body-size-medium);\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n border-radius: var(--borderRadius-medium);\n\n /* Responsive full-width */\n &[data-full-width='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-narrow='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-regular='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-wide='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n /* Hide when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: none;\n }\n\n /* Handle hideLabels variant - hide button text */\n &[data-variant='hideLabels'] .Text {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n\n &[data-variant-narrow='hideLabels'] .Text {\n display: none;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n\n &[data-variant-regular='hideLabels'] .Text {\n display: none;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n\n &[data-variant-wide='hideLabels'] .Text {\n display: none;\n }\n }\n\n &:where([data-size='small']) {\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 28px;\n font-size: var(--text-body-size-small);\n }\n}\n\n.DropdownContainer {\n display: none;\n\n /* Show when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: block;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: block;\n }\n }\n}\n\n.Item {\n position: relative;\n display: block;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: -1px;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: -1px;\n flex-grow: 1;\n\n &:not(:last-child) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: 1px;\n\n &::after {\n position: absolute;\n top: var(--base-size-8);\n right: calc(-1 * var(--base-size-2));\n bottom: var(--base-size-8);\n width: 1px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:has(+ [data-selected])::after,\n &:where([data-selected])::after {\n background-color: transparent;\n }\n }\n\n &:focus-within:has(:focus-visible) {\n background-color: transparent;\n }\n\n &:first-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -1px;\n }\n\n &:last-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: -1px;\n }\n\n .Counter {\n margin-inline-start: var(--base-size-8);\n display: flex;\n align-items: center;\n }\n}\n\n.Button {\n /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */\n --segmented-control-button-inner-padding: 12px;\n --segmented-control-button-bg-inset: 4px;\n --segmented-control-outer-radius: var(--borderRadius-medium);\n\n width: 100%;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--base-text-weight-normal);\n color: currentColor;\n cursor: pointer;\n background-color: transparent;\n border-color: transparent;\n border-width: 0;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n & svg {\n fill: var(--fgColor-muted);\n color: var(--fgColor-muted);\n }\n\n /* fallback :focus state */\n &:focus:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n }\n }\n\n /* default focus state */\n &:focus-visible:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n }\n\n /* stylelint-disable-next-line selector-max-specificity */\n &:focus:focus-visible:not(:last-child)::after {\n /* fixes an issue where the focus outline shows over the pseudo-element */\n width: 0;\n }\n\n @media (pointer: coarse) {\n &::before {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n min-height: 44px;\n content: '';\n transform: translateY(-50%);\n }\n }\n}\n\n.IconButton {\n width: var(--segmented-control-icon-width, 32px);\n}\n\n.Content {\n display: flex;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n /* stylelint-disable-next-line primer/spacing */\n padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border-color: transparent;\n border-style: solid;\n border-width: var(--borderWidth-thin);\n\n /*\n innerRadius = outerRadius - distance/2\n https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn\n */\n /* stylelint-disable-next-line primer/borders */\n border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);\n align-items: center;\n justify-content: center;\n}\n\n.Button[aria-current='true'] {\n padding: 0;\n font-weight: var(--base-text-weight-semibold);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--segmented-control-button-inner-padding);\n /* stylelint-disable-next-line primer/spacing */\n padding-left: var(--segmented-control-button-inner-padding);\n background-color: var(--controlKnob-bgColor-rest);\n border-color: var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n }\n}\n\n.Button:not([aria-current='true']) {\n &:hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n\n &:active .Content {\n background-color: var(--controlTrack-bgColor-active);\n }\n}\n\n.Text::after {\n display: block;\n height: 0;\n overflow: hidden;\n font-weight: var(--base-text-weight-semibold);\n pointer-events: none;\n visibility: hidden;\n content: attr(data-text);\n user-select: none;\n}\n\n.LeadingIcon {\n margin-right: var(--base-size-4);\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAK,EAAC,2BAA2B,EAAC,MAAM,0BAA0B,CAAA;AAEzE,OAAO,KAAK,EAAC,+BAA+B,EAAC,MAAM,8BAA8B,CAAA;AAIjF,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAEhE,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,kCAAkC,CAAA;AAMhF,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAC9C,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,6FAA6F;IAC7F,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,0BAA0B,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC,CAAA;IACxG,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA0MD,eAAO,MAAM,gBAAgB;;;;CAI3B,CAAA"}
1
+ {"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAK,EAAC,2BAA2B,EAAC,MAAM,0BAA0B,CAAA;AAEzE,OAAO,KAAK,EAAC,+BAA+B,EAAC,MAAM,8BAA8B,CAAA;AAIjF,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAEhE,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,kCAAkC,CAAA;AAMhF,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAC9C,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,6FAA6F;IAC7F,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,0BAA0B,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC,CAAA;IACxG,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA0LD,eAAO,MAAM,gBAAgB;;;;CAI3B,CAAA"}
@@ -3,16 +3,16 @@ import React, { useRef, useState } from 'react';
3
3
  import SegmentedControlButton from './SegmentedControlButton.js';
4
4
  import { SegmentedControlIconButton } from './SegmentedControlIconButton.js';
5
5
  import { ActionList } from '../ActionList/index.js';
6
- import { useResponsiveValue } from '../hooks/useResponsiveValue.js';
6
+ import { getResponsiveAttributes } from '../internal/utils/getResponsiveAttributes.js';
7
7
  import { isElement } from 'react-is';
8
8
  import classes from './SegmentedControl.module.css.js';
9
9
  import { clsx } from 'clsx';
10
10
  import { isSlot } from '../utils/is-slot.js';
11
- import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
11
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
12
12
  import { ActionMenu } from '../ActionMenu/ActionMenu.js';
13
13
 
14
14
  const Root = t0 => {
15
- const $ = c(27);
15
+ const $ = c(54);
16
16
  let ariaLabel;
17
17
  let ariaLabelledby;
18
18
  let children;
@@ -67,8 +67,6 @@ const Root = t0 => {
67
67
  t2 = $[12];
68
68
  }
69
69
  const isUncontrolled = t2;
70
- const responsiveVariant = useResponsiveValue(variant, "default");
71
- const isFullWidth = useResponsiveValue(fullWidth, false);
72
70
  let t3;
73
71
  if ($[13] !== children) {
74
72
  const selectedSegments = React.Children.toArray(children).map(_temp2);
@@ -82,15 +80,28 @@ const Root = t0 => {
82
80
  const selectedIndexExternal = t3;
83
81
  const [selectedIndexInternalState, setSelectedIndexInternalState] = useState(selectedIndexExternal);
84
82
  const selectedIndex = isUncontrolled ? selectedIndexInternalState : selectedIndexExternal;
83
+ let hasDropdownVariant;
85
84
  let t4;
86
- if ($[15] !== ariaLabel || $[16] !== ariaLabelledby || $[17] !== children || $[18] !== className || $[19] !== isFullWidth || $[20] !== isUncontrolled || $[21] !== onChange || $[22] !== responsiveVariant || $[23] !== rest || $[24] !== selectedIndex || $[25] !== size) {
85
+ if ($[15] !== ariaLabel || $[16] !== ariaLabelledby || $[17] !== children || $[18] !== isUncontrolled || $[19] !== onChange || $[20] !== selectedIndex || $[21] !== variant) {
87
86
  const selectedChild = /*#__PURE__*/React.isValidElement(React.Children.toArray(children)[selectedIndex]) ? React.Children.toArray(children)[selectedIndex] : undefined;
88
87
  const getChildIcon = _temp4;
89
88
  const getChildText = _temp5;
90
89
  if (!ariaLabel && !ariaLabelledby) {
91
90
  console.warn("Use the `aria-label` or `aria-labelledby` prop to provide an accessible label for assistive technologies");
92
91
  }
93
- t4 = responsiveVariant === "dropdown" ? /*#__PURE__*/jsx(Fragment, {
92
+ const responsiveVariant = typeof variant === "object" ? variant : undefined;
93
+ let t5;
94
+ if ($[24] !== responsiveVariant) {
95
+ t5 = responsiveVariant ? Object.values(responsiveVariant).includes("dropdown") : false;
96
+ $[24] = responsiveVariant;
97
+ $[25] = t5;
98
+ } else {
99
+ t5 = $[25];
100
+ }
101
+ hasDropdownVariant = t5;
102
+ t4 = hasDropdownVariant && /*#__PURE__*/jsx("div", {
103
+ className: classes.DropdownContainer,
104
+ ...getResponsiveAttributes("variant", variant),
94
105
  children: /*#__PURE__*/jsxs(ActionMenu, {
95
106
  children: [/*#__PURE__*/jsx(ActionMenu.Button, {
96
107
  "aria-label": ariaLabel && `${getChildText(selectedChild)}, ${ariaLabel}`,
@@ -118,15 +129,50 @@ const Root = t0 => {
118
129
  })
119
130
  })]
120
131
  })
121
- }) : /*#__PURE__*/jsx("ul", {
122
- "aria-label": ariaLabel,
123
- "aria-labelledby": ariaLabelledby,
124
- ref: segmentedControlContainerRef,
125
- className: clsx(classes.SegmentedControl, className),
126
- "data-full-width": isFullWidth || undefined,
127
- "data-size": size,
128
- ...rest,
129
- children: React.Children.map(children, (child_2, index_0) => {
132
+ });
133
+ $[15] = ariaLabel;
134
+ $[16] = ariaLabelledby;
135
+ $[17] = children;
136
+ $[18] = isUncontrolled;
137
+ $[19] = onChange;
138
+ $[20] = selectedIndex;
139
+ $[21] = variant;
140
+ $[22] = hasDropdownVariant;
141
+ $[23] = t4;
142
+ } else {
143
+ hasDropdownVariant = $[22];
144
+ t4 = $[23];
145
+ }
146
+ const dropdownContent = t4;
147
+ let t5;
148
+ if ($[26] !== className) {
149
+ t5 = clsx(classes.SegmentedControl, className);
150
+ $[26] = className;
151
+ $[27] = t5;
152
+ } else {
153
+ t5 = $[27];
154
+ }
155
+ let t6;
156
+ if ($[28] !== fullWidth) {
157
+ t6 = getResponsiveAttributes("full-width", fullWidth);
158
+ $[28] = fullWidth;
159
+ $[29] = t6;
160
+ } else {
161
+ t6 = $[29];
162
+ }
163
+ let t7;
164
+ if ($[30] !== variant) {
165
+ t7 = getResponsiveAttributes("variant", variant);
166
+ $[30] = variant;
167
+ $[31] = t7;
168
+ } else {
169
+ t7 = $[31];
170
+ }
171
+ let t8;
172
+ if ($[32] !== children || $[33] !== isUncontrolled || $[34] !== onChange || $[35] !== selectedIndex) {
173
+ let t9;
174
+ if ($[37] !== isUncontrolled || $[38] !== onChange || $[39] !== selectedIndex) {
175
+ t9 = (child_2, index_0) => {
130
176
  if (! /*#__PURE__*/React.isValidElement(child_2)) {
131
177
  return null;
132
178
  }
@@ -145,46 +191,63 @@ const Root = t0 => {
145
191
  ...child_2.props.style
146
192
  }
147
193
  };
148
- if (responsiveVariant === "hideLabels" && /*#__PURE__*/React.isValidElement(child_2) && (child_2.type === SegmentedControlButton || isSlot(child_2, SegmentedControlButton))) {
149
- const {
150
- "aria-label": childAriaLabel,
151
- leadingVisual: leadingVisual_0,
152
- leadingIcon,
153
- children: childPropsChildren,
154
- ...restChildProps
155
- } = child_2.props;
156
- const visual = leadingVisual_0 !== null && leadingVisual_0 !== void 0 ? leadingVisual_0 : leadingIcon;
157
- if (!visual) {
158
- console.warn("A `leadingVisual` or `leadingIcon` prop is required when hiding visible labels");
159
- } else {
160
- return /*#__PURE__*/jsx(SegmentedControlIconButton, {
161
- "aria-label": childAriaLabel || childPropsChildren,
162
- icon: visual,
163
- className: classes.IconButton,
164
- ...sharedChildProps,
165
- ...restChildProps
166
- });
167
- }
168
- }
169
194
  return /*#__PURE__*/React.cloneElement(child_2, sharedChildProps);
170
- })
195
+ };
196
+ $[37] = isUncontrolled;
197
+ $[38] = onChange;
198
+ $[39] = selectedIndex;
199
+ $[40] = t9;
200
+ } else {
201
+ t9 = $[40];
202
+ }
203
+ t8 = React.Children.map(children, t9);
204
+ $[32] = children;
205
+ $[33] = isUncontrolled;
206
+ $[34] = onChange;
207
+ $[35] = selectedIndex;
208
+ $[36] = t8;
209
+ } else {
210
+ t8 = $[36];
211
+ }
212
+ let t9;
213
+ if ($[41] !== ariaLabel || $[42] !== ariaLabelledby || $[43] !== rest || $[44] !== size || $[45] !== t5 || $[46] !== t6 || $[47] !== t7 || $[48] !== t8) {
214
+ t9 = /*#__PURE__*/jsx("ul", {
215
+ "aria-label": ariaLabel,
216
+ "aria-labelledby": ariaLabelledby,
217
+ ref: segmentedControlContainerRef,
218
+ className: t5,
219
+ ...t6,
220
+ ...t7,
221
+ "data-size": size,
222
+ ...rest,
223
+ children: t8
171
224
  });
172
- $[15] = ariaLabel;
173
- $[16] = ariaLabelledby;
174
- $[17] = children;
175
- $[18] = className;
176
- $[19] = isFullWidth;
177
- $[20] = isUncontrolled;
178
- $[21] = onChange;
179
- $[22] = responsiveVariant;
180
- $[23] = rest;
181
- $[24] = selectedIndex;
182
- $[25] = size;
183
- $[26] = t4;
225
+ $[41] = ariaLabel;
226
+ $[42] = ariaLabelledby;
227
+ $[43] = rest;
228
+ $[44] = size;
229
+ $[45] = t5;
230
+ $[46] = t6;
231
+ $[47] = t7;
232
+ $[48] = t8;
233
+ $[49] = t9;
234
+ } else {
235
+ t9 = $[49];
236
+ }
237
+ const segmentedControlContent = t9;
238
+ let t10;
239
+ if ($[50] !== dropdownContent || $[51] !== hasDropdownVariant || $[52] !== segmentedControlContent) {
240
+ t10 = hasDropdownVariant ? /*#__PURE__*/jsxs(Fragment, {
241
+ children: [dropdownContent, segmentedControlContent]
242
+ }) : segmentedControlContent;
243
+ $[50] = dropdownContent;
244
+ $[51] = hasDropdownVariant;
245
+ $[52] = segmentedControlContent;
246
+ $[53] = t10;
184
247
  } else {
185
- t4 = $[26];
248
+ t10 = $[53];
186
249
  }
187
- return t4;
250
+ return t10;
188
251
  };
189
252
  Root.displayName = 'SegmentedControl';
190
253
  const SegmentedControl = Object.assign(Root, {
@@ -1,5 +1,5 @@
1
- import './SegmentedControl-7f79ab74.css';
1
+ import './SegmentedControl-5cfe12ab.css';
2
2
 
3
- var classes = {"SegmentedControl":"prc-SegmentedControl-SegmentedControl-e7570","Item":"prc-SegmentedControl-Item-7Aq6h","Counter":"prc-SegmentedControl-Counter--H-pM","Button":"prc-SegmentedControl-Button-ojWXD","IconButton":"prc-SegmentedControl-IconButton-O80Eh","Content":"prc-SegmentedControl-Content-gnQ4n","Text":"prc-SegmentedControl-Text-c5gSh","LeadingIcon":"prc-SegmentedControl-LeadingIcon-dAHA8"};
3
+ var classes = {"SegmentedControl":"prc-SegmentedControl-SegmentedControl-e7570","Text":"prc-SegmentedControl-Text-c5gSh","DropdownContainer":"prc-SegmentedControl-DropdownContainer-QSnSd","Item":"prc-SegmentedControl-Item-7Aq6h","Counter":"prc-SegmentedControl-Counter--H-pM","Button":"prc-SegmentedControl-Button-ojWXD","IconButton":"prc-SegmentedControl-IconButton-O80Eh","Content":"prc-SegmentedControl-Content-gnQ4n","LeadingIcon":"prc-SegmentedControl-LeadingIcon-dAHA8"};
4
4
 
5
5
  export { classes as default };
@@ -1,2 +1,2 @@
1
- .prc-SkeletonText-SkeletonText-tW5nH{--font-size:var(--text-body-size-medium,0.875rem);--line-height:var(--text-body-lineHeight-medium,1.4285);--leading:calc(var(--font-size)*var(--line-height) - var(--font-size))}@supports (margin-block:mod(1px,1px)){.prc-SkeletonText-SkeletonText-tW5nH{--leading:mod(var(--font-size) * var(--line-height),var(--font-size))}}.prc-SkeletonText-SkeletonText-tW5nH{border-radius:var(--borderRadius-small,.1875rem);height:var(--font-size);margin-block:calc(var(--leading)/2)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-in-multiline]){margin-block-end:calc(var(--leading)*2)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-in-multiline]):last-child{margin-bottom:0;max-width:65%;min-width:50px}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=display]),.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=titleLarge]){border-radius:var(--borderRadius-medium,.375rem)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=display]){--font-size:var(--text-display-size,2.5rem);--line-height:var(--text-display-lineHeight,1.4)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=titleLarge]){--font-size:var(--text-title-size-large,2rem);--line-height:var(--text-title-lineHeight-large,1.5)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=titleMedium]){--font-size:var(--text-title-size-medium,1.25rem);--line-height:var(--text-title-lineHeight-medium,1.6)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=titleSmall]){--font-size:var(--text-title-size-small,1rem);--line-height:var(--text-title-lineHeight-small,1.5)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=subtitle]){--font-size:var(--text-subtitle-size,1.25rem);--line-height:var(--text-subtitle-lineHeight,1.6)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=bodyLarge]){--font-size:var(--text-body-size-large,1rem);--line-height:var(--text-body-lineHeight-large,1.5)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=bodySmall]){--font-size:var(--text-body-size-small,0.75rem);--line-height:var(--text-body-lineHeight-small,1.6666)}.prc-SkeletonText-SkeletonTextWrapper-3Z0sU{padding-block:.1px}
1
+ .prc-SkeletonText-SkeletonText-tW5nH{--font-size:var(--text-body-size-medium,0.875rem);--line-height:var(--text-body-lineHeight-medium,1.42857);--leading:calc(var(--font-size)*var(--line-height) - var(--font-size))}@supports (margin-block:mod(1px,1px)){.prc-SkeletonText-SkeletonText-tW5nH{--leading:mod(var(--font-size) * var(--line-height),var(--font-size))}}.prc-SkeletonText-SkeletonText-tW5nH{border-radius:var(--borderRadius-small,.1875rem);height:var(--font-size);margin-block:calc(var(--leading)/2)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-in-multiline]){margin-block-end:calc(var(--leading)*2)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-in-multiline]):last-child{margin-bottom:0;max-width:65%;min-width:50px}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=display]),.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=titleLarge]){border-radius:var(--borderRadius-medium,.375rem)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=display]){--font-size:var(--text-display-size,2.5rem);--line-height:var(--text-display-lineHeight,1.4)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=titleLarge]){--font-size:var(--text-title-size-large,2rem);--line-height:var(--text-title-lineHeight-large,1.5)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=titleMedium]){--font-size:var(--text-title-size-medium,1.25rem);--line-height:var(--text-title-lineHeight-medium,1.6)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=titleSmall]){--font-size:var(--text-title-size-small,1rem);--line-height:var(--text-title-lineHeight-small,1.5)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=subtitle]){--font-size:var(--text-subtitle-size,1.25rem);--line-height:var(--text-subtitle-lineHeight,1.6)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=bodyLarge]){--font-size:var(--text-body-size-large,1rem);--line-height:var(--text-body-lineHeight-large,1.5)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=bodySmall]){--font-size:var(--text-body-size-small,0.75rem);--line-height:var(--text-body-lineHeight-small,1.66667)}.prc-SkeletonText-SkeletonTextWrapper-3Z0sU{padding-block:.1px}
2
2
  /*# sourceMappingURL=SkeletonText-5cf908c1.css.map */
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/SkeletonText/SkeletonText.module.css"],"names":[],"mappings":"AAAA,qCACE,iDAAyC,CACzC,uDAAiD,CACjD,sEA6DF,CA3DE,sCALF,qCAMI,qEA0DJ,CAzDE,CAPF,qCAUE,gDAAwC,CADxC,uBAAwB,CAGxB,mCAoDF,CAlDE,gEAEE,uCAOF,CALE,2EAGE,eAAgB,CADhB,aAAc,CADd,cAGF,CAGF,+JAEE,gDACF,CAEA,8EACE,2CAAqC,CACrC,gDACF,CAEA,iFACE,6CAAyC,CACzC,oDACF,CAEA,kFACE,iDAA0C,CAC1C,qDACF,CAEA,iFACE,6CAAyC,CACzC,oDACF,CAEA,+EACE,6CAAsC,CACtC,iDACF,CAEA,gFACE,4CAAwC,CACxC,mDACF,CAEA,gFACE,+CAAwC,CACxC,sDACF,CAGF,4CAEE,kBACF","file":"SkeletonText-5cf908c1.css","sourcesContent":[".SkeletonText {\n --font-size: var(--text-body-size-medium);\n --line-height: var(--text-body-lineHeight-medium);\n --leading: calc(var(--font-size) * var(--line-height) - var(--font-size));\n\n @supports (margin-block: mod(1px, 1px)) {\n --leading: mod(var(--font-size) * var(--line-height), var(--font-size));\n }\n\n height: var(--font-size);\n border-radius: var(--borderRadius-small);\n /* stylelint-disable-next-line primer/spacing */\n margin-block: calc(var(--leading) / 2);\n\n &:where([data-in-multiline]) {\n /* stylelint-disable-next-line primer/spacing */\n margin-block-end: calc(var(--leading) * 2);\n\n &:last-child {\n min-width: 50px;\n max-width: 65%;\n margin-bottom: 0;\n }\n }\n\n &:where([data-text-skeleton-size='display']),\n &:where([data-text-skeleton-size='titleLarge']) {\n border-radius: var(--borderRadius-medium);\n }\n\n &:where([data-text-skeleton-size='display']) {\n --font-size: var(--text-display-size);\n --line-height: var(--text-display-lineHeight);\n }\n\n &:where([data-text-skeleton-size='titleLarge']) {\n --font-size: var(--text-title-size-large);\n --line-height: var(--text-title-lineHeight-large);\n }\n\n &:where([data-text-skeleton-size='titleMedium']) {\n --font-size: var(--text-title-size-medium);\n --line-height: var(--text-title-lineHeight-medium);\n }\n\n &:where([data-text-skeleton-size='titleSmall']) {\n --font-size: var(--text-title-size-small);\n --line-height: var(--text-title-lineHeight-small);\n }\n\n &:where([data-text-skeleton-size='subtitle']) {\n --font-size: var(--text-subtitle-size);\n --line-height: var(--text-subtitle-lineHeight);\n }\n\n &:where([data-text-skeleton-size='bodyLarge']) {\n --font-size: var(--text-body-size-large);\n --line-height: var(--text-body-lineHeight-large);\n }\n\n &:where([data-text-skeleton-size='bodySmall']) {\n --font-size: var(--text-body-size-small);\n --line-height: var(--text-body-lineHeight-small);\n }\n}\n\n.SkeletonTextWrapper {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: 0.1px;\n}\n"]}
1
+ {"version":3,"sources":["../src/SkeletonText/SkeletonText.module.css"],"names":[],"mappings":"AAAA,qCACE,iDAAyC,CACzC,wDAAiD,CACjD,sEA6DF,CA3DE,sCALF,qCAMI,qEA0DJ,CAzDE,CAPF,qCAUE,gDAAwC,CADxC,uBAAwB,CAGxB,mCAoDF,CAlDE,gEAEE,uCAOF,CALE,2EAGE,eAAgB,CADhB,aAAc,CADd,cAGF,CAGF,+JAEE,gDACF,CAEA,8EACE,2CAAqC,CACrC,gDACF,CAEA,iFACE,6CAAyC,CACzC,oDACF,CAEA,kFACE,iDAA0C,CAC1C,qDACF,CAEA,iFACE,6CAAyC,CACzC,oDACF,CAEA,+EACE,6CAAsC,CACtC,iDACF,CAEA,gFACE,4CAAwC,CACxC,mDACF,CAEA,gFACE,+CAAwC,CACxC,uDACF,CAGF,4CAEE,kBACF","file":"SkeletonText-5cf908c1.css","sourcesContent":[".SkeletonText {\n --font-size: var(--text-body-size-medium);\n --line-height: var(--text-body-lineHeight-medium);\n --leading: calc(var(--font-size) * var(--line-height) - var(--font-size));\n\n @supports (margin-block: mod(1px, 1px)) {\n --leading: mod(var(--font-size) * var(--line-height), var(--font-size));\n }\n\n height: var(--font-size);\n border-radius: var(--borderRadius-small);\n /* stylelint-disable-next-line primer/spacing */\n margin-block: calc(var(--leading) / 2);\n\n &:where([data-in-multiline]) {\n /* stylelint-disable-next-line primer/spacing */\n margin-block-end: calc(var(--leading) * 2);\n\n &:last-child {\n min-width: 50px;\n max-width: 65%;\n margin-bottom: 0;\n }\n }\n\n &:where([data-text-skeleton-size='display']),\n &:where([data-text-skeleton-size='titleLarge']) {\n border-radius: var(--borderRadius-medium);\n }\n\n &:where([data-text-skeleton-size='display']) {\n --font-size: var(--text-display-size);\n --line-height: var(--text-display-lineHeight);\n }\n\n &:where([data-text-skeleton-size='titleLarge']) {\n --font-size: var(--text-title-size-large);\n --line-height: var(--text-title-lineHeight-large);\n }\n\n &:where([data-text-skeleton-size='titleMedium']) {\n --font-size: var(--text-title-size-medium);\n --line-height: var(--text-title-lineHeight-medium);\n }\n\n &:where([data-text-skeleton-size='titleSmall']) {\n --font-size: var(--text-title-size-small);\n --line-height: var(--text-title-lineHeight-small);\n }\n\n &:where([data-text-skeleton-size='subtitle']) {\n --font-size: var(--text-subtitle-size);\n --line-height: var(--text-subtitle-lineHeight);\n }\n\n &:where([data-text-skeleton-size='bodyLarge']) {\n --font-size: var(--text-body-size-large);\n --line-height: var(--text-body-lineHeight-large);\n }\n\n &:where([data-text-skeleton-size='bodySmall']) {\n --font-size: var(--text-body-size-small);\n --line-height: var(--text-body-lineHeight-small);\n }\n}\n\n.SkeletonTextWrapper {\n /* stylelint-disable-next-line primer/spacing */\n padding-block: 0.1px;\n}\n"]}
@@ -1,2 +1,2 @@
1
- .prc-Text-Text-0ima0:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);line-height:var(--text-body-lineHeight-small,1.6666)}.prc-Text-Text-0ima0:where([data-size=medium]){font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.4285)}.prc-Text-Text-0ima0:where([data-size=large]){font-size:var(--text-body-size-large,1rem);line-height:var(--text-body-lineHeight-large,1.5)}.prc-Text-Text-0ima0:where([data-weight=light]){font-weight:var(--base-text-weight-light,300)}.prc-Text-Text-0ima0:where([data-weight=normal]){font-weight:var(--base-text-weight-normal,400)}.prc-Text-Text-0ima0:where([data-weight=medium]){font-weight:var(--base-text-weight-medium,500)}.prc-Text-Text-0ima0:where([data-weight=semibold]){font-weight:var(--base-text-weight-semibold,600)}
1
+ .prc-Text-Text-0ima0:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);line-height:var(--text-body-lineHeight-small,1.66667)}.prc-Text-Text-0ima0:where([data-size=medium]){font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.42857)}.prc-Text-Text-0ima0:where([data-size=large]){font-size:var(--text-body-size-large,1rem);line-height:var(--text-body-lineHeight-large,1.5)}.prc-Text-Text-0ima0:where([data-weight=light]){font-weight:var(--base-text-weight-light,300)}.prc-Text-Text-0ima0:where([data-weight=normal]){font-weight:var(--base-text-weight-normal,400)}.prc-Text-Text-0ima0:where([data-weight=medium]){font-weight:var(--base-text-weight-medium,500)}.prc-Text-Text-0ima0:where([data-weight=semibold]){font-weight:var(--base-text-weight-semibold,600)}
2
2
  /*# sourceMappingURL=Text-ca7603b7.css.map */
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Text/Text.module.css"],"names":[],"mappings":"AACE,8CACE,4CAAsC,CACtC,oDACF,CAEA,+CACE,8CAAuC,CACvC,qDACF,CAEA,8CACE,0CAAsC,CACtC,iDACF,CAEA,gDACE,6CACF,CAEA,iDACE,8CACF,CAEA,iDACE,8CACF,CAEA,mDACE,gDACF","file":"Text-ca7603b7.css","sourcesContent":[".Text {\n &:where([data-size='small']) {\n font-size: var(--text-body-size-small);\n line-height: var(--text-body-lineHeight-small);\n }\n\n &:where([data-size='medium']) {\n font-size: var(--text-body-size-medium);\n line-height: var(--text-body-lineHeight-medium);\n }\n\n &:where([data-size='large']) {\n font-size: var(--text-body-size-large);\n line-height: var(--text-body-lineHeight-large);\n }\n\n &:where([data-weight='light']) {\n font-weight: var(--base-text-weight-light);\n }\n\n &:where([data-weight='normal']) {\n font-weight: var(--base-text-weight-normal);\n }\n\n &:where([data-weight='medium']) {\n font-weight: var(--base-text-weight-medium);\n }\n\n &:where([data-weight='semibold']) {\n font-weight: var(--base-text-weight-semibold);\n }\n}\n"]}
1
+ {"version":3,"sources":["../src/Text/Text.module.css"],"names":[],"mappings":"AACE,8CACE,4CAAsC,CACtC,qDACF,CAEA,+CACE,8CAAuC,CACvC,sDACF,CAEA,8CACE,0CAAsC,CACtC,iDACF,CAEA,gDACE,6CACF,CAEA,iDACE,8CACF,CAEA,iDACE,8CACF,CAEA,mDACE,gDACF","file":"Text-ca7603b7.css","sourcesContent":[".Text {\n &:where([data-size='small']) {\n font-size: var(--text-body-size-small);\n line-height: var(--text-body-lineHeight-small);\n }\n\n &:where([data-size='medium']) {\n font-size: var(--text-body-size-medium);\n line-height: var(--text-body-lineHeight-medium);\n }\n\n &:where([data-size='large']) {\n font-size: var(--text-body-size-large);\n line-height: var(--text-body-lineHeight-large);\n }\n\n &:where([data-weight='light']) {\n font-weight: var(--base-text-weight-light);\n }\n\n &:where([data-weight='normal']) {\n font-weight: var(--base-text-weight-normal);\n }\n\n &:where([data-weight='medium']) {\n font-weight: var(--base-text-weight-medium);\n }\n\n &:where([data-weight='semibold']) {\n font-weight: var(--base-text-weight-semibold);\n }\n}\n"]}
@@ -26,7 +26,7 @@ const getServerHandoff = id => {
26
26
  const serverData = (_document$getElementB = document.getElementById(`__PRIMER_DATA_${id}__`)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.textContent;
27
27
  if (serverData) return JSON.parse(serverData);
28
28
  } catch (_error) {
29
- // if document/element does not exist or JSON is invalid, supress error
29
+ // if document/element does not exist or JSON is invalid, suppress error
30
30
  }
31
31
  return {};
32
32
  };
@@ -1,2 +1,2 @@
1
- .prc-Tooltip-Tooltip--1XZX{display:inline-block;position:relative}.prc-Tooltip-Tooltip--1XZX:after{display:none;font:normal normal var(--text-body-size-small,.75rem) /var(--text-body-lineHeight-small,1.6666) var(--fontStack-system,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");padding:.5em .75em;position:absolute;z-index:1000000;-webkit-font-smoothing:subpixel-antialiased;color:var(--tooltip-fgColor,var(--fgColor-onEmphasis,var(--color-fg-on-emphasis)));letter-spacing:normal;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-shadow:none;text-transform:none;word-wrap:break-word;background:var(--tooltip-bgColor,var(--bgColor-emphasis,var(--color-neutral-emphasis-plus)));border-radius:var(--borderRadius-medium,.375rem);content:attr(aria-label);opacity:0;pointer-events:none;white-space:pre}@keyframes prc-Tooltip-tooltip-appear-Vhjuv{0%{opacity:0}to{opacity:1}}.prc-Tooltip-Tooltip--1XZX:active:after,.prc-Tooltip-Tooltip--1XZX:focus-within:after,.prc-Tooltip-Tooltip--1XZX:focus:after,.prc-Tooltip-Tooltip--1XZX:hover:after{animation-delay:0s;animation-duration:.1s;animation-fill-mode:forwards;animation-name:prc-Tooltip-tooltip-appear-Vhjuv;animation-timing-function:ease-in;display:inline-block;-webkit-text-decoration:none;text-decoration:none}.prc-Tooltip-Tooltip--noDelay-Kl98W:active:after,.prc-Tooltip-Tooltip--noDelay-Kl98W:focus-within:after,.prc-Tooltip-Tooltip--noDelay-Kl98W:focus:after,.prc-Tooltip-Tooltip--noDelay-Kl98W:hover:after{animation-delay:0s}.prc-Tooltip-Tooltip--multiline-5KYEu:active:after,.prc-Tooltip-Tooltip--multiline-5KYEu:focus-within:after,.prc-Tooltip-Tooltip--multiline-5KYEu:focus:after,.prc-Tooltip-Tooltip--multiline-5KYEu:hover:after{display:table-cell}.prc-Tooltip-Tooltip--s-Z845o:after,.prc-Tooltip-Tooltip--se-4uqz7:after,.prc-Tooltip-Tooltip--sw-P5gHD:after{margin-top:6px;right:50%;top:100%}.prc-Tooltip-Tooltip--se-4uqz7:after{left:50%;margin-left:calc(var(--base-size-16,1rem)*-1);right:auto}.prc-Tooltip-Tooltip--sw-P5gHD:after{margin-right:calc(var(--base-size-16,1rem)*-1)}.prc-Tooltip-Tooltip--n-BOOzB:after,.prc-Tooltip-Tooltip--ne-t2n1x:after,.prc-Tooltip-Tooltip--nw-PVis4:after{bottom:100%;margin-bottom:6px;right:50%}.prc-Tooltip-Tooltip--ne-t2n1x:after{left:50%;margin-left:calc(var(--base-size-16,1rem)*-1);right:auto}.prc-Tooltip-Tooltip--nw-PVis4:after{margin-right:calc(var(--base-size-16,1rem)*-1)}.prc-Tooltip-Tooltip--n-BOOzB:after,.prc-Tooltip-Tooltip--s-Z845o:after{transform:translateX(50%)}.prc-Tooltip-Tooltip--w-c6nR3:after{margin-right:6px;right:100%}.prc-Tooltip-Tooltip--e-a4x1s:after,.prc-Tooltip-Tooltip--w-c6nR3:after{bottom:50%;transform:translateY(50%)}.prc-Tooltip-Tooltip--e-a4x1s:after{left:100%;margin-left:6px}.prc-Tooltip-Tooltip--multiline-5KYEu:after{max-width:250px;width:max-content;word-wrap:break-word;border-collapse:separate;white-space:pre-line}.prc-Tooltip-Tooltip--multiline-5KYEu.prc-Tooltip-Tooltip--n-BOOzB:after,.prc-Tooltip-Tooltip--multiline-5KYEu.prc-Tooltip-Tooltip--s-Z845o:after{left:50%;right:auto;transform:translateX(-50%)}.prc-Tooltip-Tooltip--multiline-5KYEu.prc-Tooltip-Tooltip--e-a4x1s:after,.prc-Tooltip-Tooltip--multiline-5KYEu.prc-Tooltip-Tooltip--w-c6nR3:after{right:100%}.prc-Tooltip-Tooltip--alignRight-DdgpM:after{margin-right:0;right:0}.prc-Tooltip-Tooltip--alignLeft-7wr84:after{left:0;margin-left:0}
1
+ .prc-Tooltip-Tooltip--1XZX{display:inline-block;position:relative}.prc-Tooltip-Tooltip--1XZX:after{display:none;font:normal normal var(--text-body-size-small,.75rem) /var(--text-body-lineHeight-small,1.66667) var(--fontStack-system,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");padding:.5em .75em;position:absolute;z-index:1000000;-webkit-font-smoothing:subpixel-antialiased;color:var(--tooltip-fgColor,var(--fgColor-onEmphasis,var(--color-fg-on-emphasis)));letter-spacing:normal;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-shadow:none;text-transform:none;word-wrap:break-word;background:var(--tooltip-bgColor,var(--bgColor-emphasis,var(--color-neutral-emphasis-plus)));border-radius:var(--borderRadius-medium,.375rem);content:attr(aria-label);opacity:0;pointer-events:none;white-space:pre}@keyframes prc-Tooltip-tooltip-appear-Vhjuv{0%{opacity:0}to{opacity:1}}.prc-Tooltip-Tooltip--1XZX:active:after,.prc-Tooltip-Tooltip--1XZX:focus-within:after,.prc-Tooltip-Tooltip--1XZX:focus:after,.prc-Tooltip-Tooltip--1XZX:hover:after{animation-delay:0s;animation-duration:.1s;animation-fill-mode:forwards;animation-name:prc-Tooltip-tooltip-appear-Vhjuv;animation-timing-function:ease-in;display:inline-block;-webkit-text-decoration:none;text-decoration:none}.prc-Tooltip-Tooltip--noDelay-Kl98W:active:after,.prc-Tooltip-Tooltip--noDelay-Kl98W:focus-within:after,.prc-Tooltip-Tooltip--noDelay-Kl98W:focus:after,.prc-Tooltip-Tooltip--noDelay-Kl98W:hover:after{animation-delay:0s}.prc-Tooltip-Tooltip--multiline-5KYEu:active:after,.prc-Tooltip-Tooltip--multiline-5KYEu:focus-within:after,.prc-Tooltip-Tooltip--multiline-5KYEu:focus:after,.prc-Tooltip-Tooltip--multiline-5KYEu:hover:after{display:table-cell}.prc-Tooltip-Tooltip--s-Z845o:after,.prc-Tooltip-Tooltip--se-4uqz7:after,.prc-Tooltip-Tooltip--sw-P5gHD:after{margin-top:6px;right:50%;top:100%}.prc-Tooltip-Tooltip--se-4uqz7:after{left:50%;margin-left:calc(var(--base-size-16,1rem)*-1);right:auto}.prc-Tooltip-Tooltip--sw-P5gHD:after{margin-right:calc(var(--base-size-16,1rem)*-1)}.prc-Tooltip-Tooltip--n-BOOzB:after,.prc-Tooltip-Tooltip--ne-t2n1x:after,.prc-Tooltip-Tooltip--nw-PVis4:after{bottom:100%;margin-bottom:6px;right:50%}.prc-Tooltip-Tooltip--ne-t2n1x:after{left:50%;margin-left:calc(var(--base-size-16,1rem)*-1);right:auto}.prc-Tooltip-Tooltip--nw-PVis4:after{margin-right:calc(var(--base-size-16,1rem)*-1)}.prc-Tooltip-Tooltip--n-BOOzB:after,.prc-Tooltip-Tooltip--s-Z845o:after{transform:translateX(50%)}.prc-Tooltip-Tooltip--w-c6nR3:after{margin-right:6px;right:100%}.prc-Tooltip-Tooltip--e-a4x1s:after,.prc-Tooltip-Tooltip--w-c6nR3:after{bottom:50%;transform:translateY(50%)}.prc-Tooltip-Tooltip--e-a4x1s:after{left:100%;margin-left:6px}.prc-Tooltip-Tooltip--multiline-5KYEu:after{max-width:250px;width:max-content;word-wrap:break-word;border-collapse:separate;white-space:pre-line}.prc-Tooltip-Tooltip--multiline-5KYEu.prc-Tooltip-Tooltip--n-BOOzB:after,.prc-Tooltip-Tooltip--multiline-5KYEu.prc-Tooltip-Tooltip--s-Z845o:after{left:50%;right:auto;transform:translateX(-50%)}.prc-Tooltip-Tooltip--multiline-5KYEu.prc-Tooltip-Tooltip--e-a4x1s:after,.prc-Tooltip-Tooltip--multiline-5KYEu.prc-Tooltip-Tooltip--w-c6nR3:after{right:100%}.prc-Tooltip-Tooltip--alignRight-DdgpM:after{margin-right:0;right:0}.prc-Tooltip-Tooltip--alignLeft-7wr84:after{left:0;margin-left:0}
2
2
  /*# sourceMappingURL=Tooltip-fffa9948.css.map */