npm - @primer/react-brand - Versions diffs - 0.80.0-rc.e1dc6447 → 0.80.0-rc.ff22e366 - Mend

@primer/react-brand 0.80.0-rc.e1dc6447 → 0.80.0-rc.ff22e366

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (695) hide show

package/esm/Accordion/Accordion.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.module.js","names":[],"sources":["../../src/Accordion/Accordion.module.css"],"sourcesContent":[".Accordion {\n --brand-Accordion-content-height: 0px;\n\n box-sizing: border-box;\n position: relative;\n}\n\n.Accordion--disableAnimation::after,\n.Accordion--disableAnimation .Accordion__summary-toggleIcon,\n.Accordion--disableAnimation > .Accordion__content,\n.Accordion--disableAnimation > .Accordion__content > .Accordion__content-inner {\n transition: none;\n}\n\n.Accordion--default {\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__summary {\n background-color: var(--brand-color-canvas-subtle);\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n padding-block: var(--base-size-20);\n padding-inline: var(--base-size-20);\n gap: 0;\n justify-content: flex-start;\n align-items: center;\n}\n\n.Accordion__summary--emphasis::before {\n content: '';\n display: block;\n width: calc(var(--base-size-8) - 1px);\n height: var(--base-size-12);\n flex-shrink: 0;\n margin-inline-end: var(--base-size-12);\n background-color: var(--brand-Accordion-indicator-idle);\n}\n\n.Accordion__summary--emphasis:hover::before {\n background-color: var(--brand-Accordion-indicator-hover);\n}\n\ndetails[open] > .Accordion__summary--emphasis::before {\n background-color: var(--brand-Accordion-indicator-active);\n}\n\n.Accordion__summary--emphasis :is(h3, h4, h5, h6) {\n font-family: var(--brand-fontStack-monospace);\n font-size: var(--brand-text-size-100);\n font-weight: var(--brand-text-weight-500);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: 0.15px;\n text-transform: uppercase;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion)\n + .Accordion--emphasis:not(.Accordion .Accordion)\n > .Accordion__summary {\n border-block-start: none;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content > .Accordion__content-inner {\n padding-block-start: var(--base-size-12);\n padding-inline: var(--base-size-20);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content > .Accordion__content-inner::after {\n block-size: var(--base-size-12);\n}\n\n.Accordion--emphasis .Accordion--default:last-child {\n border-bottom: none;\n}\n\n.Accordion--emphasis .Accordion--default:last-child::after {\n display: none;\n}\n\n.Accordion--default::after {\n content: '';\n background-color: var(--brand-Accordion-border-color-default);\n height: var(--brand-borderWidth-thin);\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n transform: scaleY(0);\n transform-origin: 50% 100%;\n width: 100%;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n\n.Accordion--default:hover::after,\ndetails[open].Accordion--default::after {\n background-color: var(--brand-color-accent-primary);\n transform: scaleY(1);\n}\n\n.Accordion__summary {\n cursor: pointer;\n padding: var(--base-size-24) 0;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.Accordion__summary--reversed-toggles {\n padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__summary::-webkit-details-marker {\n display: none;\n}\n\n.Accordion__summary:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n/* When open, move focus ring to the details element to wrap summary + content as one unit /\ndetails[open].Accordion:has(> summary:focus-visible) {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\ndetails[open].Accordion > .Accordion__summary:focus-visible {\n outline: none;\n}\n\n.Accordion__summary-toggle {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--base-size-24);\n width: var(--base-size-24);\n color: var(--brand-color-text-emphasized);\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary-toggle {\n right: 0;\n}\n\n.Accordion__summary--emphasis .Accordion__summary-toggle {\n position: static;\n transform: none;\n order: 1;\n margin-inline-start: auto;\n color: var(--brand-color-text-default);\n}\n\n.Accordion__summary--reversed-toggles .Accordion__summary-toggle {\n left: 0;\n}\n\n.Accordion__summary--default .Accordion__summary-toggle {\n color: var(--brand-Accordion-toggle-color-start, var(--brand-color-text-emphasized));\n}\n\n.Accordion__summary-toggleIcon {\n transform-origin: 50% 50%;\n transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\ndetails[open] > .Accordion__summary .Accordion__summary-toggleIcon {\n transform: rotate(-180deg);\n}\n\n.Accordion__summary--toggleColor-default {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-default);\n}\n\n.Accordion__summary--toggleColor-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue);\n}\n\n.Accordion__summary--toggleColor-blue-purple {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue-purple-start);\n}\n\n.Accordion__summary--toggleColor-coral {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-coral);\n}\n\n.Accordion__summary--toggleColor-green {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green);\n}\n\n.Accordion__summary--toggleColor-green-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green-blue-start);\n}\n\n.Accordion__summary--toggleColor-gray {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-gray);\n}\n\n.Accordion__summary--toggleColor-indigo {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-indigo);\n}\n\n.Accordion__summary--toggleColor-lemon {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lemon);\n}\n\n.Accordion__summary--toggleColor-lime {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lime);\n}\n\n.Accordion__summary--toggleColor-orange {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-orange);\n}\n\n.Accordion__summary--toggleColor-pink {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink);\n}\n\n.Accordion__summary--toggleColor-pink-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink-blue-start);\n}\n\n.Accordion__summary--toggleColor-purple {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple);\n}\n\n.Accordion__summary--toggleColor-purple-red {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple-red-start);\n}\n\n.Accordion__summary--toggleColor-red {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red);\n}\n\n.Accordion__summary--toggleColor-red-orange {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red-orange-start);\n}\n\n.Accordion__summary--toggleColor-teal {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-teal);\n}\n\n.Accordion__summary--toggleColor-yellow {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-yellow);\n}\n\n.Accordion__summary--default:not(.Accordion__summary--reversed-toggles) {\n padding-inline-end: var(--base-size-48);\n}\n\n.Accordion__summary--reversed-toggles {\n padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__content,\n.Accordion__content p,\n.Accordion__content span:not(.Accordion__summary-toggle),\n.Accordion__content ul,\n.Accordion__content ol {\n color: var(--brand-color-text-muted);\n font-family: var(--brand-fontStack-sansSerif);\n font-weight: var(--brand-text-weight-200);\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n}\n\n.Accordion__content {\n overflow: hidden;\n max-height: 0;\n transition: max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n position: relative;\n}\n\n.Accordion__content-inner {\n opacity: 0;\n transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.Accordion--default > .Accordion__content {\n top: calc(var(--base-size-2) - var(--base-size-24));\n}\n\n.Accordion__summary--default + .Accordion__content > .Accordion__content-inner::before {\n content: '';\n display: block;\n block-size: var(--base-size-12);\n}\n\n.Accordion__content-inner::after {\n content: '';\n display: block;\n}\n\n[data-color-mode='dark'] .Accordion__content {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: auto;\n}\n\n.Accordion__content p:not(:first-child) {\n margin-block-start: var(--base-size-16);\n}\n\n.Accordion__content a {\n color: var(--brand-InlineLink-color-rest);\n position: relative;\n text-decoration: underline;\n text-decoration-color: var(--brand-InlineLink-color-rest);\n text-decoration-thickness: var(--brand-borderWidth-thin);\n text-underline-position: under;\n transition: var(--brand-InlineLink-transition-timing) text-decoration;\n}\n\n.Accordion__content a:hover {\n text-decoration-thickness: var(--brand-borderWidth-thick);\n}\n\n.Accordion__content a,\n.Accordion__content a > span {\n font-weight: inherit;\n color: var(--brand-InlineLink-color-rest);\n}\n\n.Accordion__content a:active,\n.Accordion__content a:active > span {\n color: var(--brand-InlineLink-color-pressed);\n}\n\ndetails[open] > .Accordion__content {\n max-height: var(--brand-Accordion-content-height);\n position: relative;\n z-index: 0;\n}\n\ndetails[open].Accordion--disableAnimation > .Accordion__content {\n max-height: none;\n}\n\ndetails[open] > .Accordion__content > .Accordion__content-inner {\n opacity: 1;\n}\n\ndetails.Accordion--closing > .Accordion__content {\n max-height: 0;\n}\n\ndetails.Accordion--closing > .Accordion__content > .Accordion__content-inner {\n opacity: 0;\n}\n\n.Accordion__summary--default + .Accordion__content {\n margin-block-start: 0;\n}\n\ndetails[open] > .Accordion__summary--default + .Accordion__content {\n margin-block-start: 0;\n}\n\ndetails.Accordion--closing > .Accordion__summary--default + .Accordion__content {\n margin-block-start: 0;\n}\n\ndetails.Accordion--closing > .Accordion__summary .Accordion__summary-toggleIcon {\n transform: rotate(0deg);\n}\n\ndetails[open] > .Accordion__summary--reversed-toggles + .Accordion__content {\n padding-inline-start: var(--base-size-48);\n}\n\n/ Medium breakpoint and up /\n@media screen and (min-width: 48rem) {\n .Accordion__summary {\n gap: var(--base-size-40);\n }\n}\n\n/ Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .Accordion,\n .Accordion::before,\n .Accordion::after,\n .Accordion {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Accordion.module.js","names":[],"sources":["../../src/Accordion/Accordion.module.css"],"sourcesContent":[".Accordion {\n --brand-Accordion-content-height: 0px;\n\n box-sizing: border-box;\n position: relative;\n}\n\n.Accordion--disableAnimation::after,\n.Accordion--disableAnimation .Accordion__summary-toggleIcon,\n.Accordion--disableAnimation > .Accordion__content,\n.Accordion--disableAnimation > .Accordion__content > .Accordion__content-inner {\n transition: none;\n}\n\n.Accordion--default {\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__summary {\n background-color: var(--brand-color-canvas-subtle);\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n padding-block: var(--base-size-20);\n padding-inline: var(--base-size-20);\n gap: 0;\n justify-content: flex-start;\n align-items: center;\n}\n\n.Accordion__summary--emphasis::before {\n content: '';\n display: block;\n width: calc(var(--base-size-8) - 1px);\n height: var(--base-size-12);\n flex-shrink: 0;\n margin-inline-end: var(--base-size-12);\n background-color: var(--brand-Accordion-indicator-idle);\n}\n\n.Accordion__summary--emphasis:hover::before {\n background-color: var(--brand-Accordion-indicator-hover);\n}\n\ndetails[open] > .Accordion__summary--emphasis::before {\n background-color: var(--brand-Accordion-indicator-active);\n}\n\n.Accordion__summary--emphasis :is(h3, h4, h5, h6) {\n font-family: var(--brand-fontStack-monospace);\n font-size: var(--brand-text-size-100);\n font-weight: var(--brand-text-weight-500);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: 0.15px;\n text-transform: uppercase;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion)\n + .Accordion--emphasis:not(.Accordion .Accordion)\n > .Accordion__summary {\n border-block-start: none;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content > .Accordion__content-inner {\n padding-block-start: var(--base-size-12);\n padding-inline: var(--base-size-20);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content > .Accordion__content-inner::after {\n block-size: var(--base-size-12);\n}\n\n.Accordion--emphasis .Accordion--default:last-child {\n border-bottom: none;\n}\n\n.Accordion--emphasis .Accordion--default:last-child::after {\n display: none;\n}\n\n.Accordion--default::after {\n content: '';\n background-color: var(--brand-Accordion-border-color-default);\n height: var(--brand-borderWidth-thin);\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n transform: scaleY(0);\n transform-origin: 50% 100%;\n width: 100%;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n\n.Accordion--default:hover::after,\ndetails[open].Accordion--default::after {\n background-color: var(--brand-color-accent-primary);\n transform: scaleY(1);\n}\n\n.Accordion__summary {\n cursor: pointer;\n padding: var(--base-size-24) 0;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.Accordion__summary--reversed-toggles {\n padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__summary::-webkit-details-marker {\n display: none;\n}\n\n.Accordion__summary:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n/* When open, move focus ring to the details element to wrap summary + content as one unit /\ndetails[open].Accordion:has(> summary:focus-visible) {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\ndetails[open].Accordion > .Accordion__summary:focus-visible {\n outline: none;\n}\n\n.Accordion__summary-toggle {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--base-size-24);\n width: var(--base-size-24);\n color: var(--brand-color-text-emphasized);\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary-toggle {\n right: 0;\n}\n\n.Accordion__summary--emphasis .Accordion__summary-toggle {\n position: static;\n transform: none;\n order: 1;\n margin-inline-start: auto;\n color: var(--brand-color-text-default);\n}\n\n.Accordion__summary--reversed-toggles .Accordion__summary-toggle {\n left: 0;\n}\n\n.Accordion__summary--default .Accordion__summary-toggle {\n color: var(--brand-Accordion-toggle-color-start, var(--brand-color-text-emphasized));\n}\n\n.Accordion__summary-toggleIcon {\n transform-origin: 50% 50%;\n transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\ndetails[open] > .Accordion__summary .Accordion__summary-toggleIcon {\n transform: rotate(-180deg);\n}\n\n.Accordion__summary--toggleColor-default {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-default);\n}\n\n.Accordion__summary--toggleColor-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue);\n}\n\n.Accordion__summary--toggleColor-blue-purple {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue-purple-start);\n}\n\n.Accordion__summary--toggleColor-coral {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-coral);\n}\n\n.Accordion__summary--toggleColor-green {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green);\n}\n\n.Accordion__summary--toggleColor-green-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green-blue-start);\n}\n\n.Accordion__summary--toggleColor-gray {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-gray);\n}\n\n.Accordion__summary--toggleColor-indigo {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-indigo);\n}\n\n.Accordion__summary--toggleColor-lemon {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lemon);\n}\n\n.Accordion__summary--toggleColor-lime {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lime);\n}\n\n.Accordion__summary--toggleColor-orange {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-orange);\n}\n\n.Accordion__summary--toggleColor-pink {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink);\n}\n\n.Accordion__summary--toggleColor-pink-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink-blue-start);\n}\n\n.Accordion__summary--toggleColor-purple {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple);\n}\n\n.Accordion__summary--toggleColor-purple-red {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple-red-start);\n}\n\n.Accordion__summary--toggleColor-red {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red);\n}\n\n.Accordion__summary--toggleColor-red-orange {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red-orange-start);\n}\n\n.Accordion__summary--toggleColor-teal {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-teal);\n}\n\n.Accordion__summary--toggleColor-yellow {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-yellow);\n}\n\n.Accordion__summary--default:not(.Accordion__summary--reversed-toggles) {\n padding-inline-end: var(--base-size-48);\n}\n\n.Accordion__summary--reversed-toggles {\n padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__content,\n.Accordion__content p,\n.Accordion__content span:not(.Accordion__summary-toggle),\n.Accordion__content ul,\n.Accordion__content ol {\n color: var(--brand-color-text-muted);\n font-family: var(--brand-fontStack-sansSerif);\n font-weight: var(--brand-text-weight-200);\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n}\n\n.Accordion__content {\n overflow: hidden;\n max-height: 0;\n transition: max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n position: relative;\n}\n\n.Accordion__content-inner {\n opacity: 0;\n transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.Accordion--default > .Accordion__content {\n top: calc(var(--base-size-2) - var(--base-size-24));\n}\n\n.Accordion__summary--default + .Accordion__content > .Accordion__content-inner::before {\n content: '';\n display: block;\n block-size: var(--base-size-12);\n}\n\n.Accordion__content-inner::after {\n content: '';\n display: block;\n}\n\n[data-color-mode='dark'] .Accordion__content {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: auto;\n}\n\n@media (prefers-color-scheme: dark) {\n [data-color-mode='auto'] .Accordion__content {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: auto;\n }\n}\n\n.Accordion__content p:not(:first-child) {\n margin-block-start: var(--base-size-16);\n}\n\n.Accordion__content a {\n color: var(--brand-InlineLink-color-rest);\n position: relative;\n text-decoration: underline;\n text-decoration-color: var(--brand-InlineLink-color-rest);\n text-decoration-thickness: var(--brand-borderWidth-thin);\n text-underline-position: under;\n transition: var(--brand-InlineLink-transition-timing) text-decoration;\n}\n\n.Accordion__content a:hover {\n text-decoration-thickness: var(--brand-borderWidth-thick);\n}\n\n.Accordion__content a,\n.Accordion__content a > span {\n font-weight: inherit;\n color: var(--brand-InlineLink-color-rest);\n}\n\n.Accordion__content a:active,\n.Accordion__content a:active > span {\n color: var(--brand-InlineLink-color-pressed);\n}\n\ndetails[open] > .Accordion__content {\n max-height: var(--brand-Accordion-content-height);\n position: relative;\n z-index: 0;\n}\n\ndetails[open].Accordion--disableAnimation > .Accordion__content {\n max-height: none;\n}\n\ndetails[open] > .Accordion__content > .Accordion__content-inner {\n opacity: 1;\n}\n\ndetails.Accordion--closing > .Accordion__content {\n max-height: 0;\n}\n\ndetails.Accordion--closing > .Accordion__content > .Accordion__content-inner {\n opacity: 0;\n}\n\n.Accordion__summary--default + .Accordion__content {\n margin-block-start: 0;\n}\n\ndetails[open] > .Accordion__summary--default + .Accordion__content {\n margin-block-start: 0;\n}\n\ndetails.Accordion--closing > .Accordion__summary--default + .Accordion__content {\n margin-block-start: 0;\n}\n\ndetails.Accordion--closing > .Accordion__summary .Accordion__summary-toggleIcon {\n transform: rotate(0deg);\n}\n\ndetails[open] > .Accordion__summary--reversed-toggles + .Accordion__content {\n padding-inline-start: var(--base-size-48);\n}\n\n/ Medium breakpoint and up /\n@media screen and (min-width: 48rem) {\n .Accordion__summary {\n gap: var(--base-size-40);\n }\n}\n\n/ Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .Accordion,\n .Accordion::before,\n .Accordion::after,\n .Accordion {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}

package/esm/ActionMenu/ActionMenu.js CHANGED Viewed

@@ -11,7 +11,7 @@ import { useKeyboardEscape as l } from "../hooks/useKeyboardEscape.js";
 import { ActionMenuButtonModes as u, ActionMenuProvider as d, ActionMenuSizes as f, useActionMenuContext as p } from "./ActionMenuContext.js";
 import { CheckIcon as m } from "../node_modules/@primer/octicons-react/dist/icons/CheckIcon.js";
 import { ChevronDownIcon as h } from "../node_modules/@primer/octicons-react/dist/icons/ChevronDownIcon.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes-mgXFtgvP.css';/* empty css                                                                                                         */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes-CyS5r4GY.css';/* empty css                                                                                                         */
 import g from "./ActionMenu.module.js";
 import _, { Children as v, cloneElement as y, forwardRef as b, isValidElement as x, memo as S, useCallback as C, useEffect as w, useMemo as T, useRef as E, useState as D } from "react";
 import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
@@ -359,9 +359,9 @@ var N = {
 		children: S
 	});
 }, B = b(({ children: t, className: n, "data-testid": r, menuOpen: i, ...s }, c) => {
-	let { colorMode: l } = o();
+	let { originalColorMode: l, colorMode: u } = o();
 	return /* @__PURE__ */ k(a, {
-		colorMode: n?.includes("ActionMenu__menu--split") ? "light" : l,
+		colorMode: n?.includes("ActionMenu__menu--split") ? "light" : l ?? u,
 		children: /* @__PURE__ */ k("ul", {
 			ref: c,
 			className: e(n),

package/esm/ActionMenu/ActionMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionMenu.js","names":[],"sources":["../../src/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, {\n Children,\n isValidElement,\n cloneElement,\n useRef,\n useCallback,\n useState,\n useEffect,\n PropsWithChildren,\n forwardRef,\n memo,\n ReactElement,\n useMemo,\n} from 'react'\nimport {Button, ButtonProps} from '../Button'\nimport {IconButton, type IconButtonProps} from '../IconButton'\nimport {Text} from '../Text'\nimport {ThemeProvider, useTheme} from '../ThemeProvider'\nimport {useAnchoredPosition} from '../hooks/useAnchoredPosition'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {\n ActionMenuProvider,\n useActionMenuContext,\n type ActionMenuButtonModes as ActionMenuButtonMode,\n type ActionMenuSizes as ActionMenuSize,\n} from './ActionMenuContext'\n\nimport {clsx} from 'clsx'\nimport {CheckIcon, ChevronDownIcon, type Icon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\n\nimport {FocusKeys, type PositionSettings, focusZone} from '@primer/behaviors'\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './ActionMenu.module.css'\n\nconst testIds = {\n root: 'ActionMenu',\n get button() {\n return `${this.root}-button`\n },\n get overlay() {\n return `${this.root}-overlay`\n },\n get list() {\n return `${this.root}-list`\n },\n get item() {\n return `${this.root}-list-item`\n },\n}\n\n// primer behaviors doesn't export these values, recreating manually\n// https://github.com/primer/behaviors/blob/main/src/anchored-position.ts#L5\nexport const actionMenuOverlaySides = [\n 'inside-top',\n 'inside-bottom',\n 'inside-left',\n 'inside-right',\n 'inside-center',\n 'outside-top',\n 'outside-bottom',\n 'outside-left',\n 'outside-right',\n] as PositionSettings['side'][]\n\nexport {ActionMenuButtonModes, ActionMenuProvider, ActionMenuSizes, useActionMenuContext} from './ActionMenuContext'\n\nexport type ActionMenuProps = {\n /\n The content of the ActionMenu. Must include an ActionMenu.Button or ActionMenu.IconButton and an ActionMenu.Overlay\n /\n children:\n \| ReactElement<ActionMenuButtonProps>\n \| ReactElement<ActionMenuIconButtonProps>\n \| ReactElement<ActionMenuOverlayProps>\n \| Array<\n \| ReactElement<ActionMenuButtonProps>\n \| ReactElement<ActionMenuIconButtonProps>\n \| ReactElement<ActionMenuOverlayProps>\n >\n /\n Determines whether the ActionMenu is disabled\n /\n disabled?: boolean\n /\n Determines whether the ActionMenu is open by default\n /\n open?: boolean\n /\n Callback that is called when an item is selected.\n * The value of the selected item is passed as an argument.\n /\n onSelect?: (newValue: string) => void\n /\n The selection variant of the ActionMenu.\n * - `single`: Only one item can be selected at a time. Menu items as a menuitemradio.\n * - `none`: No items can be selected. Menu items as a menuitem.\n /\n selectionVariant?: 'single' \| 'none'\n /\n Test id for the ActionMenu\n /\n 'data-testid'?: string\n /\n Horizontal alignment of the menu relative to the bottom of the button\n /\n menuAlignment?: 'start' \| 'end'\n /\n Size configuratin of the ActionMenu\n /\n size?: ActionMenuSize\n /\n * Side the menu overlay appears\n /\n menuSide?: PositionSettings['side']\n /\n Alternative behavior for the button and menu items\n * - `default`: The button and menu items behave as a standard button and menu item.\n * - `split-button`: The button behaves as a split button, and the menu items behave as links.\n /\n mode?: ActionMenuButtonMode\n} & BaseProps<HTMLDivElement>\n\nconst _ActionMenuRoot = memo(\n ({\n id,\n children,\n 'data-testid': testId,\n disabled,\n open = false,\n selectionVariant = 'none',\n menuAlignment = 'end',\n size = 'medium',\n menuSide,\n onSelect,\n mode = 'default',\n }: ActionMenuProps) => {\n const [showMenu, setShowMenu] = useState(open)\n const floatingElementRef = useRef<HTMLUListElement>(null)\n const anchorElementRef = useRef<HTMLButtonElement>(null)\n const instanceId = useId(id)\n\n useOnClickOutside(floatingElementRef, () => setShowMenu(false), anchorElementRef)\n\n const closeMenuCallback = useCallback(() => {\n setShowMenu(false)\n }, [])\n\n useKeyboardEscape(closeMenuCallback)\n\n const toggleMenu = useCallback(() => {\n setShowMenu(!showMenu)\n }, [showMenu])\n\n const handleOnSelect = useCallback(\n (newValue: string) => {\n if (onSelect) onSelect(newValue)\n toggleMenu()\n },\n [onSelect, toggleMenu],\n )\n\n const handleItemSelection = useCallback(\n (newValue: string) => {\n handleOnSelect(newValue)\n toggleMenu()\n anchorElementRef.current?.focus()\n },\n [handleOnSelect, toggleMenu, anchorElementRef],\n )\n\n useEffect(() => {\n if (showMenu && floatingElementRef.current) {\n const floatingElement = floatingElementRef.current\n const isSplitLayout = mode === 'split-button'\n const splitLayoutFilter = isSplitLayout ? element => element.tagName === 'A' : undefined\n\n focusZone(floatingElementRef.current, {\n bindKeys: FocusKeys.ArrowVertical,\n focusableElementFilter: splitLayoutFilter,\n focusInStrategy: isSplitLayout ? 'first' : undefined,\n })\n\n // enter selects item\n floatingElement.addEventListener('keydown', event => {\n if (event.key === 'Enter') {\n const target = event.target as HTMLElement\n\n // Get the proper element containing the data-value\n const targetElement = target.tagName === 'A' ? target.closest('li') : target\n\n if (!targetElement \|\| targetElement.getAttribute('aria-disabled') === 'true') return\n\n const value = targetElement.getAttribute('data-value')\n if (value) {\n handleOnSelect(value)\n setShowMenu(false)\n setTimeout(() => {\n anchorElementRef.current?.focus()\n }, 10)\n }\n }\n })\n\n const targetSelector = isSplitLayout ? 'a' : 'li'\n\n // focusses first item\n const firstItem = floatingElementRef.current.querySelector(targetSelector)\n if (firstItem) {\n setTimeout(() => {\n firstItem.focus()\n }, 10)\n }\n\n const lastItem =\n floatingElement.querySelectorAll(targetSelector)[floatingElement.querySelectorAll(targetSelector).length - 1]\n lastItem.addEventListener('keydown', (event: Event) => {\n const keyboardEvent = event as KeyboardEvent\n if (keyboardEvent.key === 'ArrowDown') {\n keyboardEvent.preventDefault()\n firstItem?.focus()\n }\n })\n\n firstItem?.addEventListener('keydown', (event: Event) => {\n const keyboardEvent = event as KeyboardEvent\n if (keyboardEvent.key === 'ArrowUp') {\n keyboardEvent.preventDefault()\n lastItem.focus()\n }\n })\n\n //on escape refocus\n floatingElement.addEventListener('keydown', (event: Event) => {\n const keyboardEvent = event as KeyboardEvent\n if (keyboardEvent.key === 'Escape') {\n anchorElementRef.current?.focus()\n }\n })\n }\n }, [showMenu, floatingElementRef, mode, handleItemSelection, toggleMenu, handleOnSelect])\n\n // Calculate the position of the menu\n const {position} = useAnchoredPosition(\n {\n floatingElementRef,\n anchorElementRef,\n align: menuAlignment,\n allowOutOfBounds: true,\n side: menuSide,\n },\n [showMenu],\n )\n\n const childrenArray = Children.toArray(children)\n const menuLabel = childrenArray.find(\n (child): child is ReactElement<ActionMenuOverlayProps> =>\n isValidElement<ActionMenuOverlayProps>(child) && child.type === ActionMenuOverlay,\n )?.props['aria-label']\n\n const {Button: SelectButton, Overlay: SelectOverlay} = childrenArray.reduce<{\n Button?: ReactElement<ActionMenuButtonProps \| ActionMenuIconButtonProps>\n Overlay?: ReactElement<ActionMenuOverlayProps>\n }>((acc, child) => {\n if (isValidElement<ActionMenuButtonProps>(child) && child.type === ActionMenuButton) {\n acc.Button = cloneElement(child, {\n ref: anchorElementRef as React.RefObject<HTMLButtonElement>,\n className: clsx(child.props.className, styles[`ActionMenu__button--${mode}`], showMenu),\n menuOpen: showMenu,\n disabled,\n id: `${instanceId}-button`,\n size,\n })\n } else if (isValidElement<ActionMenuIconButtonInternalProps>(child) && child.type === ActionMenuIconButton) {\n acc.Button = cloneElement(child, {\n ref: anchorElementRef as React.RefObject<HTMLButtonElement>,\n className: clsx(child.props.className, mode === 'split-button' && styles['ActionMenu__button--split-button']),\n menuOpen: showMenu,\n disabled,\n id: `${instanceId}-button`,\n size,\n })\n } else if (isValidElement<ActionMenuOverlayProps>(child) && child.type === ActionMenuOverlay) {\n acc.Overlay = cloneElement(child, {\n ref: floatingElementRef as React.RefObject<HTMLUListElement>,\n className: clsx(\n styles.ActionMenu__menu,\n position && styles['ActionMenu__menu--visible'],\n position && styles[`ActionMenu__menu--pos-${position.anchorSide}`],\n styles[`ActionMenu__menu--${size}`],\n mode === 'split-button' && 'ActionMenu__menu--split',\n ),\n style: {\n top: `${position?.top ?? 0}px`,\n left: `${position?.left ?? 0}px`,\n },\n id: `${instanceId}-menu`,\n children: Children.map(child.props.children, item => {\n if (isValidElement<ActionMenuItemBaseProps>(item)) {\n return cloneElement(item, {\n handler: handleItemSelection,\n type: mode === 'split-button' ? 'link' : selectionVariant,\n })\n }\n return item\n }),\n })\n }\n return acc\n }, {})\n\n return (\n <ActionMenuProvider size={size} mode={mode} menuLabel={menuLabel} onMenuToggle={toggleMenu}>\n <div\n id={instanceId}\n className={clsx(styles.ActionMenu, disabled && styles['ActionMenu--disabled'])}\n data-testid={testId \|\| testIds.root}\n >\n {SelectButton}\n {showMenu ? SelectOverlay : null}\n </div>\n </ActionMenuProvider>\n )\n },\n)\n\ntype ActionMenuButtonProps = PropsWithChildren<\n BaseProps<HTMLButtonElement> & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' \| 'disabled' \| 'onClick'>\n> & {\n as?: ButtonProps<'a'>['as']\n href?: ButtonProps<'a'>['href']\n menuOpen?: boolean\n 'data-testid'?: string\n size?: ActionMenuSize\n variant?: ButtonProps<'a'>['variant']\n leadingVisual?: ButtonProps<'a'>['leadingVisual']\n}\n\nconst ActionMenuButton = forwardRef<HTMLButtonElement, ActionMenuButtonProps>(\n (\n {\n as,\n href,\n id,\n children,\n className,\n 'data-testid': testId,\n disabled,\n menuOpen,\n size,\n onClick,\n leadingVisual,\n variant,\n ...props\n },\n ref,\n ) => {\n const {menuLabel, mode, onMenuToggle} = useActionMenuContext()\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled) {\n event.preventDefault()\n return\n }\n\n onClick?.(event)\n\n if (!event.defaultPrevented) {\n onMenuToggle?.()\n }\n },\n [disabled, onClick, onMenuToggle],\n )\n const handlePrimaryActionClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled) {\n event.preventDefault()\n return\n }\n\n onClick?.(event)\n },\n [disabled, onClick],\n )\n\n if (mode === 'split-button') {\n const splitButtonVariant = variant ?? 'primary'\n\n return (\n <div className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}>\n <Button\n as={as}\n href={href}\n className={clsx(\n styles['ActionMenu__innerButton--split-button'],\n styles['ActionMenu__innerButton--split-button-primary'],\n styles[`ActionMenu__innerButton--${splitButtonVariant}`],\n styles[`ActionMenu__innerButton--${size}`],\n disabled && styles['ActionMenu__innerButton--disabled'],\n )}\n variant={splitButtonVariant}\n aria-disabled={disabled}\n data-testid={testId \|\| testIds.button}\n size={size}\n leadingVisual={leadingVisual}\n onClick={handlePrimaryActionClick}\n {...props}\n >\n <span className={styles['ActionMenu__button-text']}>{children}</span>\n </Button>\n <Button\n ref={ref}\n id={id}\n as=\"button\"\n className={clsx(\n styles['ActionMenu__innerButton--split-button'],\n styles['ActionMenu__innerButton--split-button-menu'],\n )}\n variant={splitButtonVariant}\n aria-haspopup=\"true\"\n aria-label={menuLabel}\n size={size}\n aria-expanded={menuOpen ? 'true' : 'false'}\n onClick={onMenuToggle}\n disabled={disabled}\n >\n <ChevronDownIcon className={styles['ActionMenu__inner-button-dropdown-icon']} />\n </Button>\n </div>\n )\n }\n\n return (\n <Button\n ref={ref}\n id={id}\n className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}\n aria-haspopup=\"true\"\n aria-expanded={menuOpen ? 'true' : 'false'}\n disabled={disabled}\n data-testid={testId \|\| testIds.button}\n size={size}\n variant={variant}\n leadingVisual={leadingVisual}\n trailingVisual={<ChevronDownIcon />}\n onClick={handleClick}\n {...props}\n >\n <span className={styles['ActionMenu__button-text']}>{children}</span>\n </Button>\n )\n },\n)\n\nexport type ActionMenuIconButtonProps<C extends React.ElementType = 'button'> = Omit<IconButtonProps<C>, 'size'> & {\n 'data-testid'?: string\n}\n\ntype ActionMenuIconButtonInternalProps = React.PropsWithoutRef<ActionMenuIconButtonProps<React.ElementType>> & {\n ref?: React.Ref<HTMLButtonElement>\n menuOpen?: boolean\n size?: ActionMenuSize\n}\n\ntype ActionMenuIconButtonComponent = <C extends React.ElementType = 'button'>(\n props: ActionMenuIconButtonProps<C> & React.RefAttributes<HTMLButtonElement>,\n) => React.ReactElement \| null\n\nconst ActionMenuIconButton = forwardRef<HTMLButtonElement, ActionMenuIconButtonInternalProps>(\n (\n {\n as,\n id,\n icon,\n className,\n 'aria-label': ariaLabel,\n 'data-testid': testId,\n disabled,\n menuOpen,\n size,\n variant,\n onClick,\n ...props\n },\n ref,\n ) => {\n const {menuLabel, mode, onMenuToggle} = useActionMenuContext()\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled) {\n event.preventDefault()\n return\n }\n\n onClick?.(event)\n\n if (!event.defaultPrevented) {\n onMenuToggle?.()\n }\n },\n [disabled, onClick, onMenuToggle],\n )\n const handlePrimaryActionClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled) {\n event.preventDefault()\n return\n }\n\n onClick?.(event)\n },\n [disabled, onClick],\n )\n\n if (mode === 'split-button') {\n const splitButtonVariant = variant ?? 'primary'\n\n return (\n <div className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}>\n <IconButton\n {...props}\n as={as}\n icon={icon}\n aria-label={ariaLabel}\n className={clsx(\n styles['ActionMenu__innerButton--split-button'],\n styles['ActionMenu__innerButton--split-button-primary'],\n styles[`ActionMenu__innerButton--${splitButtonVariant}`],\n styles[`ActionMenu__innerButton--${size}`],\n disabled && styles['ActionMenu__innerButton--disabled'],\n )}\n variant={splitButtonVariant}\n aria-disabled={disabled}\n data-testid={testId \|\| testIds.button}\n size={size}\n onClick={handlePrimaryActionClick}\n />\n <IconButton\n ref={ref}\n id={id}\n icon={ChevronDownIcon}\n aria-label={menuLabel}\n className={clsx(\n styles['ActionMenu__innerButton--split-button'],\n styles['ActionMenu__innerButton--split-button-menu'],\n )}\n variant={splitButtonVariant}\n aria-haspopup=\"menu\"\n size={size}\n aria-expanded={menuOpen ? 'true' : 'false'}\n onClick={onMenuToggle}\n disabled={disabled}\n />\n </div>\n )\n }\n\n return (\n <IconButton\n {...props}\n ref={ref}\n as={as}\n id={id}\n icon={icon}\n aria-label={ariaLabel}\n className={className}\n aria-haspopup=\"menu\"\n aria-expanded={menuOpen ? 'true' : 'false'}\n disabled={disabled}\n data-testid={testId \|\| testIds.button}\n size={size}\n variant={variant}\n onClick={handleClick}\n />\n )\n },\n) as ActionMenuIconButtonComponent\n\ntype ActionMenuItemBaseProps = {\n handler?: (newValue: string) => void\n type?: 'none' \| 'single' \| 'link'\n disabled?: boolean\n size?: ActionMenuSize\n leadingVisual?: React.ReactElement \| React.ReactNode \| Icon\n} & PropsWithChildren<React.HTMLProps<HTMLLIElement>>\n\ntype ActionMenuItemAnchorProps = ActionMenuItemBaseProps & {\n as: 'a'\n} & Omit<React.HTMLProps<HTMLAnchorElement>, keyof ActionMenuItemBaseProps \| 'as'>\n\n// Type for when 'as' is not set or is anything other than 'a'\ntype ActionMenuItemDefaultProps = ActionMenuItemBaseProps & {\n as?: string\n value?: string\n selected?: boolean\n} & Omit<React.HTMLProps<HTMLLIElement>, keyof ActionMenuItemBaseProps \| 'as'>\n\nconst roleTypeMap = {\n none: 'menuitem',\n single: 'menuitemradio',\n link: 'menuitem',\n}\n\nconst ActionMenuItem = ({\n as,\n children,\n className,\n disabled,\n handler,\n selected,\n type,\n value,\n onClick,\n onKeyDown,\n leadingVisual: LeadingVisual,\n ...props\n}: ActionMenuItemAnchorProps \| ActionMenuItemDefaultProps) => {\n const {size} = useActionMenuContext()\n\n const handleClick = useCallback(\n (e: React.MouseEvent<HTMLLIElement>) => {\n onClick?.(e)\n\n if (!disabled) {\n handler?.(String(value))\n }\n },\n [handler, value, disabled, onClick],\n )\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLLIElement>) => {\n onKeyDown?.(e)\n\n if (!disabled && e.key === 'Enter') {\n handler?.(String(value))\n }\n },\n [handler, value, disabled, onKeyDown],\n )\n\n const liProps = useMemo<React.HTMLProps<HTMLLIElement> & {'data-value': unknown}>(\n () => ({\n className: clsx(\n styles.ActionMenu__item,\n type === 'single' && styles[`ActionMenu__item--selection-type-${type}`],\n size && styles[`ActionMenu__item--${size}`],\n className,\n ),\n role: roleTypeMap[type \|\| 'single'],\n 'aria-disabled': disabled,\n tabIndex: -1,\n 'data-value': value,\n ...props,\n }),\n [props, type, size, className, disabled, value],\n )\n\n const contents = useMemo(\n () => (\n <>\n {React.isValidElement<{width?: number; height?: number}>(LeadingVisual)\n ? React.cloneElement(LeadingVisual, {\n width: LeadingVisual.props.width \|\| 20,\n height: LeadingVisual.props.width \|\| 20,\n })\n : null}\n {type === 'single' && (\n <span className={styles['ActionMenu__item-leadingVisual']}>\n {selected && (\n <CheckIcon\n className={clsx(styles['ActionMenu__item-icon'], disabled && styles['ActionMenu__item-icon--disabled'])}\n size={16}\n />\n )}\n </span>\n )}\n\n <span className={styles['ActionMenu__item-text']}>\n <Text\n variant={disabled ? 'muted' : 'default'}\n size={size === 'medium' ? '200' : '100'}\n className={clsx(disabled && styles['ActionMenu__item-content--disabled'])}\n >\n {children}\n </Text>\n </span>\n </>\n ),\n [LeadingVisual, children, selected, disabled, size, type],\n )\n\n if (as === 'a') {\n return (\n <li\n // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n role=\"menuitem\"\n {...liProps}\n // Intentionally not calling handle[Click/KeyDown] here so as to not call the handler\n onClick={onClick}\n onKeyDown={onKeyDown}\n >\n <a\n className={clsx(styles['ActionMenu__item-anchor'], disabled && styles['ActionMenu__item--disabled'])}\n href={props.href}\n >\n {contents}\n </a>\n </li>\n )\n }\n\n return (\n // eslint-disable-next-line jsx-a11y/role-supports-aria-props\n <li\n // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n role=\"menuitem\"\n {...liProps}\n aria-checked={type === 'none' ? undefined : selected ? 'true' : 'false'}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n >\n {contents}\n </li>\n )\n}\n\ntype ActionMenuOverlayProps = PropsWithChildren<\n BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>\n> & {\n 'aria-label': string\n id?: string\n 'data-testid'?: string\n menuOpen?: boolean\n style?: React.CSSProperties\n}\n\nconst ActionMenuOverlay = forwardRef<HTMLUListElement, ActionMenuOverlayProps>(\n ({children, className, 'data-testid': testId, menuOpen, ...rest}, ref) => {\n const {colorMode: defaultColorMode} = useTheme()\n\n const colorMode = className?.includes('ActionMenu__menu--split') ? 'light' : defaultColorMode\n\n return (\n <ThemeProvider colorMode={colorMode}>\n <ul ref={ref} className={clsx(className)} role=\"menu\" data-testid={testId \|\| testIds.list} {...rest}>\n {children}\n </ul>\n </ThemeProvider>\n )\n },\n)\n\n/\n Use ActionMenu to display a list of actions or selections that expand through a trigger button.\n * @see https://primer.style/brand/components/ActionMenu\n */\nexport const ActionMenu = Object.assign(_ActionMenuRoot, {\n Button: ActionMenuButton,\n IconButton: ActionMenuIconButton,\n Item: ActionMenuItem,\n Overlay: ActionMenuOverlay,\n testIds,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"ActionMenu.js","names":[],"sources":["../../src/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, {\n Children,\n isValidElement,\n cloneElement,\n useRef,\n useCallback,\n useState,\n useEffect,\n PropsWithChildren,\n forwardRef,\n memo,\n ReactElement,\n useMemo,\n} from 'react'\nimport {Button, ButtonProps} from '../Button'\nimport {IconButton, type IconButtonProps} from '../IconButton'\nimport {Text} from '../Text'\nimport {ThemeProvider, useTheme} from '../ThemeProvider'\nimport {useAnchoredPosition} from '../hooks/useAnchoredPosition'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {\n ActionMenuProvider,\n useActionMenuContext,\n type ActionMenuButtonModes as ActionMenuButtonMode,\n type ActionMenuSizes as ActionMenuSize,\n} from './ActionMenuContext'\n\nimport {clsx} from 'clsx'\nimport {CheckIcon, ChevronDownIcon, type Icon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\n\nimport {FocusKeys, type PositionSettings, focusZone} from '@primer/behaviors'\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './ActionMenu.module.css'\n\nconst testIds = {\n root: 'ActionMenu',\n get button() {\n return `${this.root}-button`\n },\n get overlay() {\n return `${this.root}-overlay`\n },\n get list() {\n return `${this.root}-list`\n },\n get item() {\n return `${this.root}-list-item`\n },\n}\n\n// primer behaviors doesn't export these values, recreating manually\n// https://github.com/primer/behaviors/blob/main/src/anchored-position.ts#L5\nexport const actionMenuOverlaySides = [\n 'inside-top',\n 'inside-bottom',\n 'inside-left',\n 'inside-right',\n 'inside-center',\n 'outside-top',\n 'outside-bottom',\n 'outside-left',\n 'outside-right',\n] as PositionSettings['side'][]\n\nexport {ActionMenuButtonModes, ActionMenuProvider, ActionMenuSizes, useActionMenuContext} from './ActionMenuContext'\n\nexport type ActionMenuProps = {\n /\n The content of the ActionMenu. Must include an ActionMenu.Button or ActionMenu.IconButton and an ActionMenu.Overlay\n /\n children:\n \| ReactElement<ActionMenuButtonProps>\n \| ReactElement<ActionMenuIconButtonProps>\n \| ReactElement<ActionMenuOverlayProps>\n \| Array<\n \| ReactElement<ActionMenuButtonProps>\n \| ReactElement<ActionMenuIconButtonProps>\n \| ReactElement<ActionMenuOverlayProps>\n >\n /\n Determines whether the ActionMenu is disabled\n /\n disabled?: boolean\n /\n Determines whether the ActionMenu is open by default\n /\n open?: boolean\n /\n Callback that is called when an item is selected.\n * The value of the selected item is passed as an argument.\n /\n onSelect?: (newValue: string) => void\n /\n The selection variant of the ActionMenu.\n * - `single`: Only one item can be selected at a time. Menu items as a menuitemradio.\n * - `none`: No items can be selected. Menu items as a menuitem.\n /\n selectionVariant?: 'single' \| 'none'\n /\n Test id for the ActionMenu\n /\n 'data-testid'?: string\n /\n Horizontal alignment of the menu relative to the bottom of the button\n /\n menuAlignment?: 'start' \| 'end'\n /\n Size configuratin of the ActionMenu\n /\n size?: ActionMenuSize\n /\n * Side the menu overlay appears\n /\n menuSide?: PositionSettings['side']\n /\n Alternative behavior for the button and menu items\n * - `default`: The button and menu items behave as a standard button and menu item.\n * - `split-button`: The button behaves as a split button, and the menu items behave as links.\n /\n mode?: ActionMenuButtonMode\n} & BaseProps<HTMLDivElement>\n\nconst _ActionMenuRoot = memo(\n ({\n id,\n children,\n 'data-testid': testId,\n disabled,\n open = false,\n selectionVariant = 'none',\n menuAlignment = 'end',\n size = 'medium',\n menuSide,\n onSelect,\n mode = 'default',\n }: ActionMenuProps) => {\n const [showMenu, setShowMenu] = useState(open)\n const floatingElementRef = useRef<HTMLUListElement>(null)\n const anchorElementRef = useRef<HTMLButtonElement>(null)\n const instanceId = useId(id)\n\n useOnClickOutside(floatingElementRef, () => setShowMenu(false), anchorElementRef)\n\n const closeMenuCallback = useCallback(() => {\n setShowMenu(false)\n }, [])\n\n useKeyboardEscape(closeMenuCallback)\n\n const toggleMenu = useCallback(() => {\n setShowMenu(!showMenu)\n }, [showMenu])\n\n const handleOnSelect = useCallback(\n (newValue: string) => {\n if (onSelect) onSelect(newValue)\n toggleMenu()\n },\n [onSelect, toggleMenu],\n )\n\n const handleItemSelection = useCallback(\n (newValue: string) => {\n handleOnSelect(newValue)\n toggleMenu()\n anchorElementRef.current?.focus()\n },\n [handleOnSelect, toggleMenu, anchorElementRef],\n )\n\n useEffect(() => {\n if (showMenu && floatingElementRef.current) {\n const floatingElement = floatingElementRef.current\n const isSplitLayout = mode === 'split-button'\n const splitLayoutFilter = isSplitLayout ? element => element.tagName === 'A' : undefined\n\n focusZone(floatingElementRef.current, {\n bindKeys: FocusKeys.ArrowVertical,\n focusableElementFilter: splitLayoutFilter,\n focusInStrategy: isSplitLayout ? 'first' : undefined,\n })\n\n // enter selects item\n floatingElement.addEventListener('keydown', event => {\n if (event.key === 'Enter') {\n const target = event.target as HTMLElement\n\n // Get the proper element containing the data-value\n const targetElement = target.tagName === 'A' ? target.closest('li') : target\n\n if (!targetElement \|\| targetElement.getAttribute('aria-disabled') === 'true') return\n\n const value = targetElement.getAttribute('data-value')\n if (value) {\n handleOnSelect(value)\n setShowMenu(false)\n setTimeout(() => {\n anchorElementRef.current?.focus()\n }, 10)\n }\n }\n })\n\n const targetSelector = isSplitLayout ? 'a' : 'li'\n\n // focusses first item\n const firstItem = floatingElementRef.current.querySelector(targetSelector)\n if (firstItem) {\n setTimeout(() => {\n firstItem.focus()\n }, 10)\n }\n\n const lastItem =\n floatingElement.querySelectorAll(targetSelector)[floatingElement.querySelectorAll(targetSelector).length - 1]\n lastItem.addEventListener('keydown', (event: Event) => {\n const keyboardEvent = event as KeyboardEvent\n if (keyboardEvent.key === 'ArrowDown') {\n keyboardEvent.preventDefault()\n firstItem?.focus()\n }\n })\n\n firstItem?.addEventListener('keydown', (event: Event) => {\n const keyboardEvent = event as KeyboardEvent\n if (keyboardEvent.key === 'ArrowUp') {\n keyboardEvent.preventDefault()\n lastItem.focus()\n }\n })\n\n //on escape refocus\n floatingElement.addEventListener('keydown', (event: Event) => {\n const keyboardEvent = event as KeyboardEvent\n if (keyboardEvent.key === 'Escape') {\n anchorElementRef.current?.focus()\n }\n })\n }\n }, [showMenu, floatingElementRef, mode, handleItemSelection, toggleMenu, handleOnSelect])\n\n // Calculate the position of the menu\n const {position} = useAnchoredPosition(\n {\n floatingElementRef,\n anchorElementRef,\n align: menuAlignment,\n allowOutOfBounds: true,\n side: menuSide,\n },\n [showMenu],\n )\n\n const childrenArray = Children.toArray(children)\n const menuLabel = childrenArray.find(\n (child): child is ReactElement<ActionMenuOverlayProps> =>\n isValidElement<ActionMenuOverlayProps>(child) && child.type === ActionMenuOverlay,\n )?.props['aria-label']\n\n const {Button: SelectButton, Overlay: SelectOverlay} = childrenArray.reduce<{\n Button?: ReactElement<ActionMenuButtonProps \| ActionMenuIconButtonProps>\n Overlay?: ReactElement<ActionMenuOverlayProps>\n }>((acc, child) => {\n if (isValidElement<ActionMenuButtonProps>(child) && child.type === ActionMenuButton) {\n acc.Button = cloneElement(child, {\n ref: anchorElementRef as React.RefObject<HTMLButtonElement>,\n className: clsx(child.props.className, styles[`ActionMenu__button--${mode}`], showMenu),\n menuOpen: showMenu,\n disabled,\n id: `${instanceId}-button`,\n size,\n })\n } else if (isValidElement<ActionMenuIconButtonInternalProps>(child) && child.type === ActionMenuIconButton) {\n acc.Button = cloneElement(child, {\n ref: anchorElementRef as React.RefObject<HTMLButtonElement>,\n className: clsx(child.props.className, mode === 'split-button' && styles['ActionMenu__button--split-button']),\n menuOpen: showMenu,\n disabled,\n id: `${instanceId}-button`,\n size,\n })\n } else if (isValidElement<ActionMenuOverlayProps>(child) && child.type === ActionMenuOverlay) {\n acc.Overlay = cloneElement(child, {\n ref: floatingElementRef as React.RefObject<HTMLUListElement>,\n className: clsx(\n styles.ActionMenu__menu,\n position && styles['ActionMenu__menu--visible'],\n position && styles[`ActionMenu__menu--pos-${position.anchorSide}`],\n styles[`ActionMenu__menu--${size}`],\n mode === 'split-button' && 'ActionMenu__menu--split',\n ),\n style: {\n top: `${position?.top ?? 0}px`,\n left: `${position?.left ?? 0}px`,\n },\n id: `${instanceId}-menu`,\n children: Children.map(child.props.children, item => {\n if (isValidElement<ActionMenuItemBaseProps>(item)) {\n return cloneElement(item, {\n handler: handleItemSelection,\n type: mode === 'split-button' ? 'link' : selectionVariant,\n })\n }\n return item\n }),\n })\n }\n return acc\n }, {})\n\n return (\n <ActionMenuProvider size={size} mode={mode} menuLabel={menuLabel} onMenuToggle={toggleMenu}>\n <div\n id={instanceId}\n className={clsx(styles.ActionMenu, disabled && styles['ActionMenu--disabled'])}\n data-testid={testId \|\| testIds.root}\n >\n {SelectButton}\n {showMenu ? SelectOverlay : null}\n </div>\n </ActionMenuProvider>\n )\n },\n)\n\ntype ActionMenuButtonProps = PropsWithChildren<\n BaseProps<HTMLButtonElement> & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' \| 'disabled' \| 'onClick'>\n> & {\n as?: ButtonProps<'a'>['as']\n href?: ButtonProps<'a'>['href']\n menuOpen?: boolean\n 'data-testid'?: string\n size?: ActionMenuSize\n variant?: ButtonProps<'a'>['variant']\n leadingVisual?: ButtonProps<'a'>['leadingVisual']\n}\n\nconst ActionMenuButton = forwardRef<HTMLButtonElement, ActionMenuButtonProps>(\n (\n {\n as,\n href,\n id,\n children,\n className,\n 'data-testid': testId,\n disabled,\n menuOpen,\n size,\n onClick,\n leadingVisual,\n variant,\n ...props\n },\n ref,\n ) => {\n const {menuLabel, mode, onMenuToggle} = useActionMenuContext()\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled) {\n event.preventDefault()\n return\n }\n\n onClick?.(event)\n\n if (!event.defaultPrevented) {\n onMenuToggle?.()\n }\n },\n [disabled, onClick, onMenuToggle],\n )\n const handlePrimaryActionClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled) {\n event.preventDefault()\n return\n }\n\n onClick?.(event)\n },\n [disabled, onClick],\n )\n\n if (mode === 'split-button') {\n const splitButtonVariant = variant ?? 'primary'\n\n return (\n <div className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}>\n <Button\n as={as}\n href={href}\n className={clsx(\n styles['ActionMenu__innerButton--split-button'],\n styles['ActionMenu__innerButton--split-button-primary'],\n styles[`ActionMenu__innerButton--${splitButtonVariant}`],\n styles[`ActionMenu__innerButton--${size}`],\n disabled && styles['ActionMenu__innerButton--disabled'],\n )}\n variant={splitButtonVariant}\n aria-disabled={disabled}\n data-testid={testId \|\| testIds.button}\n size={size}\n leadingVisual={leadingVisual}\n onClick={handlePrimaryActionClick}\n {...props}\n >\n <span className={styles['ActionMenu__button-text']}>{children}</span>\n </Button>\n <Button\n ref={ref}\n id={id}\n as=\"button\"\n className={clsx(\n styles['ActionMenu__innerButton--split-button'],\n styles['ActionMenu__innerButton--split-button-menu'],\n )}\n variant={splitButtonVariant}\n aria-haspopup=\"true\"\n aria-label={menuLabel}\n size={size}\n aria-expanded={menuOpen ? 'true' : 'false'}\n onClick={onMenuToggle}\n disabled={disabled}\n >\n <ChevronDownIcon className={styles['ActionMenu__inner-button-dropdown-icon']} />\n </Button>\n </div>\n )\n }\n\n return (\n <Button\n ref={ref}\n id={id}\n className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}\n aria-haspopup=\"true\"\n aria-expanded={menuOpen ? 'true' : 'false'}\n disabled={disabled}\n data-testid={testId \|\| testIds.button}\n size={size}\n variant={variant}\n leadingVisual={leadingVisual}\n trailingVisual={<ChevronDownIcon />}\n onClick={handleClick}\n {...props}\n >\n <span className={styles['ActionMenu__button-text']}>{children}</span>\n </Button>\n )\n },\n)\n\nexport type ActionMenuIconButtonProps<C extends React.ElementType = 'button'> = Omit<IconButtonProps<C>, 'size'> & {\n 'data-testid'?: string\n}\n\ntype ActionMenuIconButtonInternalProps = React.PropsWithoutRef<ActionMenuIconButtonProps<React.ElementType>> & {\n ref?: React.Ref<HTMLButtonElement>\n menuOpen?: boolean\n size?: ActionMenuSize\n}\n\ntype ActionMenuIconButtonComponent = <C extends React.ElementType = 'button'>(\n props: ActionMenuIconButtonProps<C> & React.RefAttributes<HTMLButtonElement>,\n) => React.ReactElement \| null\n\nconst ActionMenuIconButton = forwardRef<HTMLButtonElement, ActionMenuIconButtonInternalProps>(\n (\n {\n as,\n id,\n icon,\n className,\n 'aria-label': ariaLabel,\n 'data-testid': testId,\n disabled,\n menuOpen,\n size,\n variant,\n onClick,\n ...props\n },\n ref,\n ) => {\n const {menuLabel, mode, onMenuToggle} = useActionMenuContext()\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled) {\n event.preventDefault()\n return\n }\n\n onClick?.(event)\n\n if (!event.defaultPrevented) {\n onMenuToggle?.()\n }\n },\n [disabled, onClick, onMenuToggle],\n )\n const handlePrimaryActionClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled) {\n event.preventDefault()\n return\n }\n\n onClick?.(event)\n },\n [disabled, onClick],\n )\n\n if (mode === 'split-button') {\n const splitButtonVariant = variant ?? 'primary'\n\n return (\n <div className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}>\n <IconButton\n {...props}\n as={as}\n icon={icon}\n aria-label={ariaLabel}\n className={clsx(\n styles['ActionMenu__innerButton--split-button'],\n styles['ActionMenu__innerButton--split-button-primary'],\n styles[`ActionMenu__innerButton--${splitButtonVariant}`],\n styles[`ActionMenu__innerButton--${size}`],\n disabled && styles['ActionMenu__innerButton--disabled'],\n )}\n variant={splitButtonVariant}\n aria-disabled={disabled}\n data-testid={testId \|\| testIds.button}\n size={size}\n onClick={handlePrimaryActionClick}\n />\n <IconButton\n ref={ref}\n id={id}\n icon={ChevronDownIcon}\n aria-label={menuLabel}\n className={clsx(\n styles['ActionMenu__innerButton--split-button'],\n styles['ActionMenu__innerButton--split-button-menu'],\n )}\n variant={splitButtonVariant}\n aria-haspopup=\"menu\"\n size={size}\n aria-expanded={menuOpen ? 'true' : 'false'}\n onClick={onMenuToggle}\n disabled={disabled}\n />\n </div>\n )\n }\n\n return (\n <IconButton\n {...props}\n ref={ref}\n as={as}\n id={id}\n icon={icon}\n aria-label={ariaLabel}\n className={className}\n aria-haspopup=\"menu\"\n aria-expanded={menuOpen ? 'true' : 'false'}\n disabled={disabled}\n data-testid={testId \|\| testIds.button}\n size={size}\n variant={variant}\n onClick={handleClick}\n />\n )\n },\n) as ActionMenuIconButtonComponent\n\ntype ActionMenuItemBaseProps = {\n handler?: (newValue: string) => void\n type?: 'none' \| 'single' \| 'link'\n disabled?: boolean\n size?: ActionMenuSize\n leadingVisual?: React.ReactElement \| React.ReactNode \| Icon\n} & PropsWithChildren<React.HTMLProps<HTMLLIElement>>\n\ntype ActionMenuItemAnchorProps = ActionMenuItemBaseProps & {\n as: 'a'\n} & Omit<React.HTMLProps<HTMLAnchorElement>, keyof ActionMenuItemBaseProps \| 'as'>\n\n// Type for when 'as' is not set or is anything other than 'a'\ntype ActionMenuItemDefaultProps = ActionMenuItemBaseProps & {\n as?: string\n value?: string\n selected?: boolean\n} & Omit<React.HTMLProps<HTMLLIElement>, keyof ActionMenuItemBaseProps \| 'as'>\n\nconst roleTypeMap = {\n none: 'menuitem',\n single: 'menuitemradio',\n link: 'menuitem',\n}\n\nconst ActionMenuItem = ({\n as,\n children,\n className,\n disabled,\n handler,\n selected,\n type,\n value,\n onClick,\n onKeyDown,\n leadingVisual: LeadingVisual,\n ...props\n}: ActionMenuItemAnchorProps \| ActionMenuItemDefaultProps) => {\n const {size} = useActionMenuContext()\n\n const handleClick = useCallback(\n (e: React.MouseEvent<HTMLLIElement>) => {\n onClick?.(e)\n\n if (!disabled) {\n handler?.(String(value))\n }\n },\n [handler, value, disabled, onClick],\n )\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLLIElement>) => {\n onKeyDown?.(e)\n\n if (!disabled && e.key === 'Enter') {\n handler?.(String(value))\n }\n },\n [handler, value, disabled, onKeyDown],\n )\n\n const liProps = useMemo<React.HTMLProps<HTMLLIElement> & {'data-value': unknown}>(\n () => ({\n className: clsx(\n styles.ActionMenu__item,\n type === 'single' && styles[`ActionMenu__item--selection-type-${type}`],\n size && styles[`ActionMenu__item--${size}`],\n className,\n ),\n role: roleTypeMap[type \|\| 'single'],\n 'aria-disabled': disabled,\n tabIndex: -1,\n 'data-value': value,\n ...props,\n }),\n [props, type, size, className, disabled, value],\n )\n\n const contents = useMemo(\n () => (\n <>\n {React.isValidElement<{width?: number; height?: number}>(LeadingVisual)\n ? React.cloneElement(LeadingVisual, {\n width: LeadingVisual.props.width \|\| 20,\n height: LeadingVisual.props.width \|\| 20,\n })\n : null}\n {type === 'single' && (\n <span className={styles['ActionMenu__item-leadingVisual']}>\n {selected && (\n <CheckIcon\n className={clsx(styles['ActionMenu__item-icon'], disabled && styles['ActionMenu__item-icon--disabled'])}\n size={16}\n />\n )}\n </span>\n )}\n\n <span className={styles['ActionMenu__item-text']}>\n <Text\n variant={disabled ? 'muted' : 'default'}\n size={size === 'medium' ? '200' : '100'}\n className={clsx(disabled && styles['ActionMenu__item-content--disabled'])}\n >\n {children}\n </Text>\n </span>\n </>\n ),\n [LeadingVisual, children, selected, disabled, size, type],\n )\n\n if (as === 'a') {\n return (\n <li\n // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n role=\"menuitem\"\n {...liProps}\n // Intentionally not calling handle[Click/KeyDown] here so as to not call the handler\n onClick={onClick}\n onKeyDown={onKeyDown}\n >\n <a\n className={clsx(styles['ActionMenu__item-anchor'], disabled && styles['ActionMenu__item--disabled'])}\n href={props.href}\n >\n {contents}\n </a>\n </li>\n )\n }\n\n return (\n // eslint-disable-next-line jsx-a11y/role-supports-aria-props\n <li\n // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n role=\"menuitem\"\n {...liProps}\n aria-checked={type === 'none' ? undefined : selected ? 'true' : 'false'}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n >\n {contents}\n </li>\n )\n}\n\ntype ActionMenuOverlayProps = PropsWithChildren<\n BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>\n> & {\n 'aria-label': string\n id?: string\n 'data-testid'?: string\n menuOpen?: boolean\n style?: React.CSSProperties\n}\n\nconst ActionMenuOverlay = forwardRef<HTMLUListElement, ActionMenuOverlayProps>(\n ({children, className, 'data-testid': testId, menuOpen, ...rest}, ref) => {\n const {originalColorMode, colorMode: defaultColorMode} = useTheme()\n\n const colorMode = className?.includes('ActionMenu__menu--split') ? 'light' : originalColorMode ?? defaultColorMode\n\n return (\n <ThemeProvider colorMode={colorMode}>\n <ul ref={ref} className={clsx(className)} role=\"menu\" data-testid={testId \|\| testIds.list} {...rest}>\n {children}\n </ul>\n </ThemeProvider>\n )\n },\n)\n\n/\n Use ActionMenu to display a list of actions or selections that expand through a trigger button.\n * @see https://primer.style/brand/components/ActionMenu\n */\nexport const ActionMenu = Object.assign(_ActionMenuRoot, {\n Button: ActionMenuButton,\n IconButton: ActionMenuIconButton,\n Item: ActionMenuItem,\n Overlay: ActionMenuOverlay,\n testIds,\n})\n"],"mappings":"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"}

package/esm/AnchorNav/AnchorNav.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { ChevronUpIcon as o } from "../node_modules/@primer/octicons-react/dist/
 import { useWindowSize as s } from "../hooks/useWindowSize.js";
 import c from "./AnchorNav.module.js";
 import { useExpandedMenu as l } from "./useExpandedMenu.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/anchor-nav/colors-with-modes-98imfMkq.css';/* empty css                                                                                                        */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/anchor-nav/colors-with-modes-CD0Na993.css';/* empty css                                                                                                        */
 import u, { useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/AnchorNav/AnchorNav.tsx

package/esm/Breadcrumbs/Breadcrumbs.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Text as t } from "../Text/Text.js";
 import { InlineLink as n } from "../InlineLink/InlineLink.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/breadcrumbs/colors-with-modes-DYugDcQy.css';/* empty css                                                                                                         */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/breadcrumbs/colors-with-modes-BngjsaKj.css';/* empty css                                                                                                         */
 import r from "./Breadcrumbs.module.js";
 import { forwardRef as i } from "react";
 import { jsx as a } from "react/jsx-runtime";

package/esm/Button/Button.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useAnimation as t } from "../animation/useAnimation.js";
 import { Text as n } from "../Text/Text.js";
 import { ExpandableArrow as r } from "../ExpandableArrow/ExpandableArrow.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes-kII0kqk3.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/button/base-DhkVnZYz.css';/* empty css                                                                                       */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes-Bog-yunW.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/button/base-DhkVnZYz.css';/* empty css                                                                                       */
 /* empty css                                                                                                    */
 import i from "./Button.module.js";
 import a, { forwardRef as o, useCallback as s } from "react";

package/esm/CTABanner/CTABanner.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { Heading as r } from "../Heading/Heading.js";
 import { ButtonGroup as i } from "../ButtonGroup/ButtonGroup.js";
 import { Image as a } from "../Image/Image.js";
 import { Link as o } from "../Link/Link.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes-B9zRp3WA.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes-Bj7XtHMY.css';/* empty css                                                                                                         */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes-HElP20qs.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes-B72y-n-A.css';/* empty css                                                                                                         */
 /* empty css                                                                                                        */
 import s from "./CTABanner.module.js";
 import c, { forwardRef as l, useCallback as u, useMemo as d } from "react";

package/esm/Card/Card.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { Heading as a } from "../Heading/Heading.js";
 import { ExpandableArrow as o } from "../ExpandableArrow/ExpandableArrow.js";
 import { Image as s } from "../Image/Image.js";
 import c from "../Link/Link.module.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes-C43pQ5wc.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/base-DgOt50dE.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes-Bj7XtHMY.css';/* empty css                                                                                                         */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes-BbjIdlS-.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/base-DgOt50dE.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes-B72y-n-A.css';/* empty css                                                                                                         */
 import { Icon as l } from "../Icon/Icon.js";
 import { Token as u } from "../Token/Token.js";
 import { isFragmentElement as d } from "../utils/isFragmentElement.js";

package/esm/CarouselPagination/CarouselPagination.d.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/carousel-pagination/colors-with-modes.css';
+export type CarouselPaginationItemAttributes = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'disabled' | 'aria-disabled' | 'aria-current'> & {
+    [attribute: `data-${string}`]: string | number | boolean | undefined;
+};
+export type CarouselPaginationLabels = {
+    previous?: string;
+    next?: string;
+    /** Complete selector label using {current} and {total}. */
+    item?: string;
+};
+export type CarouselPaginationProps = BaseProps<HTMLDivElement> & Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> & {
+    /** Total number of carousel items. */
+    itemCount: number;
+    /** The current active item */
+    activeIndex: number;
+    /** Requests a new activeIndex; the parent updates selection. */
+    onChange: (activeIndex: number) => void;
+    /** Enables looping navigation between the first and last items. */
+    loop?: boolean;
+    /** Accessible control labels for localization. */
+    labels?: CarouselPaginationLabels;
+    /** Builds attributes for each item selector. */
+    itemAttributesBuilder?: (index: number) => CarouselPaginationItemAttributes;
+    /** Accessible name for the controls. */
+    'aria-label': string;
+    'data-testid'?: string;
+};
+/**
+ * Use CarouselPagination to navigate a collection of items.
+ * @see https://primer.style/brand/components/CarouselPagination/
+ */
+export declare const CarouselPagination: React.ForwardRefExoticComponent<Omit<CarouselPaginationProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    testIds: {
+        root: string;
+    };
+};
+//# sourceMappingURL=CarouselPagination.d.ts.map

package/esm/CarouselPagination/CarouselPagination.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CarouselPagination.d.ts","sourceRoot":"","sources":["../../src/CarouselPagination/CarouselPagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAK/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,uHAAuH,CAAA;AAQ9H,MAAM,MAAM,gCAAgC,GAAG,IAAI,CACjD,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,cAAc,CACvD,GAAG;IAAC,CAAC,SAAS,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;CAAC,CAAA;AAE1E,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,SAAS,CAAC,cAAc,CAAC,GAC7D,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IACpE,sCAAsC;IACtC,SAAS,EAAE,MAAM,CAAA;IACjB,8BAA8B;IAC9B,WAAW,EAAE,MAAM,CAAA;IACnB,gEAAgE;IAChE,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,mEAAmE;IACnE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,kDAAkD;IAClD,MAAM,CAAC,EAAE,wBAAwB,CAAA;IACjC,gDAAgD;IAChD,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,gCAAgC,CAAA;IAC3E,wCAAwC;IACxC,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AA+JH;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;;CAAiC,CAAA"}

package/esm/CarouselPagination/CarouselPagination.js ADDED Viewed

@@ -0,0 +1,97 @@
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
+import t from "../hooks/useIsomorphicLayoutEffect.js";
+import { IconButton as n } from "../IconButton/IconButton.js";
+import { ChevronLeftIcon as r } from "../node_modules/@primer/octicons-react/dist/icons/ChevronLeftIcon.js";
+import { ChevronRightIcon as i } from "../node_modules/@primer/octicons-react/dist/icons/ChevronRightIcon.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/carousel-pagination/colors-with-modes-IFYKunDL.css';/* empty css                                                                                                                 */
+import a from "./CarouselPagination.module.js";
+import { createElement as o, forwardRef as s, useRef as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/CarouselPagination/CarouselPagination.tsx
+var d = { root: "CarouselPagination" }, f = {
+	previous: "Previous item",
+	next: "Next item",
+	item: "Go to item {current}"
+};
+function p({ itemCount: s, activeIndex: p, onChange: m, loop: h = !1, labels: g, itemAttributesBuilder: _, className: v, "data-testid": y, ...b }, x) {
+	let S = c(null), C = Math.max(0, Math.min(Number.isInteger(p) ? p : 0, s - 1)), w = (e, t) => e.replace(/\{(current|total)\}/g, (e, n) => String(n === "current" ? t + 1 : n === "total" ? s : e));
+	if (t(() => {
+		let e = S.current, t = e?.querySelector("[aria-current=\"true\"]");
+		if (!e || !t) return;
+		let n = () => {
+			if (e.clientWidth === 0) return;
+			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = t.previousElementSibling?.getBoundingClientRect(), a = t.nextElementSibling?.getBoundingClientRect(), o = n.left + e.clientLeft, s = o + e.clientWidth, c = [r, ...a ? [a] : []], l = [...c, ...i ? [i] : []], u = Math.min(...l.map((e) => e.left)), d = Math.max(...l.map((e) => e.right));
+			d - u > e.clientWidth && (u = Math.min(...c.map((e) => e.left)), d = Math.max(...c.map((e) => e.right))), d - u > e.clientWidth && (u = r.left, d = r.right), u < o ? e.scrollLeft += u - o : d > s && (e.scrollLeft += d - s);
+		};
+		n();
+		let r = new ResizeObserver(n);
+		r.observe(e);
+		let i = (e) => {
+			e.target === t && e.propertyName === "width" && n();
+		};
+		return t.addEventListener("transitionend", i), () => {
+			r.disconnect(), t.removeEventListener("transitionend", i);
+		};
+	}, [C, s]), !Number.isInteger(s) || s <= 1) return null;
+	let T = !h && C === 0, E = !h && C === s - 1;
+	return /* @__PURE__ */ u("div", {
+		...b,
+		ref: x,
+		role: "group",
+		className: e(a.CarouselPagination, v),
+		"data-testid": y || d.root,
+		children: [
+			/* @__PURE__ */ l(n, {
+				type: "button",
+				icon: r,
+				size: "small",
+				variant: "secondary",
+				rounded: !0,
+				inactive: T,
+				className: e(a.CarouselPagination__arrowButton, a[`CarouselPagination__arrowButton--${T ? "inactive" : "available"}`]),
+				"aria-label": g?.previous ?? f.previous,
+				onClick: () => {
+					T || m(C === 0 ? s - 1 : C - 1);
+				}
+			}),
+			/* @__PURE__ */ l("div", {
+				ref: S,
+				className: a.CarouselPagination__indicators,
+				style: { "--carousel-pagination-item-count": s },
+				children: Array.from({ length: s }, (t, n) => {
+					let { className: r, onClick: i, ...s } = _?.(n) ?? {}, c = n === C;
+					return /* @__PURE__ */ o("button", {
+						...s,
+						key: n,
+						type: "button",
+						className: e(a.CarouselPagination__indicator, c && a["CarouselPagination__indicator--active"], r),
+						"aria-label": s["aria-label"] ?? w(g?.item ?? f.item, n),
+						"aria-current": c ? "true" : void 0,
+						"aria-disabled": c || void 0,
+						onClick: (e) => {
+							i?.(e), !e.defaultPrevented && !c && m(n);
+						}
+					});
+				})
+			}),
+			/* @__PURE__ */ l(n, {
+				type: "button",
+				icon: i,
+				size: "small",
+				variant: "secondary",
+				rounded: !0,
+				inactive: E,
+				className: e(a.CarouselPagination__arrowButton, a[`CarouselPagination__arrowButton--${E ? "inactive" : "available"}`]),
+				"aria-label": g?.next ?? f.next,
+				onClick: () => {
+					E || m(C === s - 1 ? 0 : C + 1);
+				}
+			})
+		]
+	});
+}
+var m = s(p), h = Object.assign(m, { testIds: d });
+//#endregion
+export { h as CarouselPagination };
+//# sourceMappingURL=CarouselPagination.js.map

package/esm/CarouselPagination/CarouselPagination.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../src/CarouselPagination/CarouselPagination.tsx"],"sourcesContent":["import React, {forwardRef, useRef} from 'react'\nimport {clsx} from 'clsx'\nimport {ChevronLeftIcon, ChevronRightIcon} from '@primer/octicons-react'\nimport {IconButton} from '../IconButton'\nimport useIsomorphicLayoutEffect from '../hooks/useIsomorphicLayoutEffect'\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/carousel-pagination/colors-with-modes.css'\n/** Main Stylesheet (as a CSS Module) */\nimport styles from './CarouselPagination.module.css'\n\nconst testIds = {\n root: 'CarouselPagination',\n}\n\nexport type CarouselPaginationItemAttributes = Omit<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n 'type' | 'disabled' | 'aria-disabled' | 'aria-current'\n> & {[attribute: `data-${string}`]: string | number | boolean | undefined}\n\nexport type CarouselPaginationLabels = {\n previous?: string\n next?: string\n /** Complete selector label using {current} and {total}. */\n item?: string\n}\n\nexport type CarouselPaginationProps = BaseProps<HTMLDivElement> &\n Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> & {\n /** Total number of carousel items. */\n itemCount: number\n /** The current active item */\n activeIndex: number\n /** Requests a new activeIndex; the parent updates selection. */\n onChange: (activeIndex: number) => void\n /** Enables looping navigation between the first and last items. */\n loop?: boolean\n /** Accessible control labels for localization. */\n labels?: CarouselPaginationLabels\n /** Builds attributes for each item selector. */\n itemAttributesBuilder?: (index: number) => CarouselPaginationItemAttributes\n /** Accessible name for the controls. */\n 'aria-label': string\n 'data-testid'?: string\n }\n\nconst defaultLabels = {\n previous: 'Previous item',\n next: 'Next item',\n item: 'Go to item {current}',\n}\n\nfunction CarouselPaginationBase(\n {\n itemCount,\n activeIndex,\n onChange,\n loop = false,\n labels,\n itemAttributesBuilder,\n className,\n 'data-testid': testId,\n ...props\n }: CarouselPaginationProps,\n ref: React.ForwardedRef<HTMLDivElement>,\n) {\n const indicatorsRef = useRef<HTMLDivElement>(null)\n const currentIndex = Math.max(0, Math.min(Number.isInteger(activeIndex) ? activeIndex : 0, itemCount - 1))\n const formatItemLabel = (template: string, index: number) =>\n template.replace(/\\{(current|total)\\}/g, (placeholder, name) =>\n String(name === 'current' ? index + 1 : name === 'total' ? itemCount : placeholder),\n )\n\n useIsomorphicLayoutEffect(() => {\n const indicators = indicatorsRef.current\n const activeIndicator = indicators?.querySelector<HTMLButtonElement>('[aria-current=\"true\"]')\n if (!indicators || !activeIndicator) return\n\n const keepActiveIndicatorVisible = () => {\n if (indicators.clientWidth === 0) return\n const containerBounds = indicators.getBoundingClientRect()\n const indicatorBounds = activeIndicator.getBoundingClientRect()\n const previousBounds = activeIndicator.previousElementSibling?.getBoundingClientRect()\n const nextBounds = activeIndicator.nextElementSibling?.getBoundingClientRect()\n const visibleLeft = containerBounds.left + indicators.clientLeft\n const visibleRight = visibleLeft + indicators.clientWidth\n const selectionBounds = [indicatorBounds, ...(nextBounds ? [nextBounds] : [])]\n const surroundingBounds = [...selectionBounds, ...(previousBounds ? [previousBounds] : [])]\n let targetLeft = Math.min(...surroundingBounds.map(bounds => bounds.left))\n let targetRight = Math.max(...surroundingBounds.map(bounds => bounds.right))\n\n if (targetRight - targetLeft > indicators.clientWidth) {\n targetLeft = Math.min(...selectionBounds.map(bounds => bounds.left))\n targetRight = Math.max(...selectionBounds.map(bounds => bounds.right))\n }\n if (targetRight - targetLeft > indicators.clientWidth) {\n targetLeft = indicatorBounds.left\n targetRight = indicatorBounds.right\n }\n\n if (targetLeft < visibleLeft) {\n indicators.scrollLeft += targetLeft - visibleLeft\n } else if (targetRight > visibleRight) {\n indicators.scrollLeft += targetRight - visibleRight\n }\n }\n\n keepActiveIndicatorVisible()\n const observer = new ResizeObserver(keepActiveIndicatorVisible)\n observer.observe(indicators)\n const finishIndicatorTransition = (event: TransitionEvent) => {\n if (event.target === activeIndicator && event.propertyName === 'width') keepActiveIndicatorVisible()\n }\n activeIndicator.addEventListener('transitionend', finishIndicatorTransition)\n return () => {\n observer.disconnect()\n activeIndicator.removeEventListener('transitionend', finishIndicatorTransition)\n }\n }, [currentIndex, itemCount])\n\n // Short circuit if the carousel has less than 2 items\n if (!Number.isInteger(itemCount) || itemCount <= 1) return null\n\n const previousUnavailable = !loop && currentIndex === 0\n const nextUnavailable = !loop && currentIndex === itemCount - 1\n\n return (\n <div\n {...props}\n ref={ref}\n role=\"group\"\n className={clsx(styles.CarouselPagination, className)}\n data-testid={testId || testIds.root}\n >\n <IconButton\n type=\"button\"\n icon={ChevronLeftIcon}\n size=\"small\"\n variant=\"secondary\"\n rounded\n inactive={previousUnavailable}\n className={clsx(\n styles.CarouselPagination__arrowButton,\n styles[`CarouselPagination__arrowButton--${previousUnavailable ? 'inactive' : 'available'}`],\n )}\n aria-label={labels?.previous ?? defaultLabels.previous}\n onClick={() => {\n if (!previousUnavailable) onChange(currentIndex === 0 ? itemCount - 1 : currentIndex - 1)\n }}\n />\n <div\n ref={indicatorsRef}\n className={styles.CarouselPagination__indicators}\n style={{'--carousel-pagination-item-count': itemCount} as React.CSSProperties}\n >\n {Array.from({length: itemCount}, (_, index) => {\n const attributes = itemAttributesBuilder?.(index)\n const {className: itemClassName, onClick, ...itemAttributes} = attributes ?? {}\n const isActive = index === currentIndex\n\n return (\n <button\n {...itemAttributes}\n key={index}\n type=\"button\"\n className={clsx(\n styles.CarouselPagination__indicator,\n isActive && styles['CarouselPagination__indicator--active'],\n itemClassName,\n )}\n aria-label={itemAttributes['aria-label'] ?? formatItemLabel(labels?.item ?? defaultLabels.item, index)}\n aria-current={isActive ? 'true' : undefined}\n aria-disabled={isActive || undefined}\n onClick={event => {\n onClick?.(event)\n if (!event.defaultPrevented && !isActive) onChange(index)\n }}\n />\n )\n })}\n </div>\n <IconButton\n type=\"button\"\n icon={ChevronRightIcon}\n size=\"small\"\n variant=\"secondary\"\n rounded\n inactive={nextUnavailable}\n className={clsx(\n styles.CarouselPagination__arrowButton,\n styles[`CarouselPagination__arrowButton--${nextUnavailable ? 'inactive' : 'available'}`],\n )}\n aria-label={labels?.next ?? defaultLabels.next}\n onClick={() => {\n if (!nextUnavailable) onChange(currentIndex === itemCount - 1 ? 0 : currentIndex + 1)\n }}\n />\n </div>\n )\n}\n\nconst Root = forwardRef<HTMLDivElement, CarouselPaginationProps>(CarouselPaginationBase)\n\n/**\n * Use CarouselPagination to navigate a collection of items.\n * @see https://primer.style/brand/components/CarouselPagination/\n */\nexport const CarouselPagination = Object.assign(Root, {testIds})\n"],"mappings":"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"}

package/esm/CarouselPagination/CarouselPagination.module-F-qylhO7.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__CarouselPagination-module__CarouselPagination___PH90q{align-items:center;gap:calc(var(--base-size-8) + var(--base-size-2));width:max-content;min-width:0;max-width:100%;padding:var(--base-size-6);border-radius:var(--brand-borderRadius-full);background:var(--brand-CarouselPagination-bgColor);flex:0 auto;display:inline-flex}.Primer_Brand__CarouselPagination-module__CarouselPagination___PH90q .Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton___yQphd{width:calc(var(--base-size-28) + var(--base-size-2));min-width:calc(var(--base-size-28) + var(--base-size-2));height:calc(var(--base-size-28) + var(--base-size-2));min-height:calc(var(--base-size-28) + var(--base-size-2));color:var(--brand-CarouselPagination-arrowButton-fgColor);background:var(--brand-color-canvas-default);border:var(--brand-borderWidth-thin) solid var(--brand-CarouselPagination-arrowButton-borderColor);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}.Primer_Brand__CarouselPagination-module__CarouselPagination___PH90q .Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton--inactive___euhyS,.Primer_Brand__CarouselPagination-module__CarouselPagination___PH90q .Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton--inactive___euhyS:hover{color:var(--brand-CarouselPagination-arrowButton-inactive-fgColor);background:var(--brand-color-canvas-default);border-color:#0000}.Primer_Brand__CarouselPagination-module__CarouselPagination___PH90q .Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton___yQphd svg{width:var(--base-size-16);height:var(--base-size-16)}@media (hover:hover) and (pointer:fine){.Primer_Brand__CarouselPagination-module__CarouselPagination___PH90q .Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton--available___fw1dN:hover{background:var(--brand-CarouselPagination-bgColor);border-color:var(--brand-CarouselPagination-arrowButton-borderColor);box-shadow:none}}.Primer_Brand__CarouselPagination-module__CarouselPagination__indicators___ReV_f{align-items:center;gap:var(--base-size-6);width:calc(var(--base-size-6) * (var(--carousel-pagination-item-count) * 2 + .5));min-width:0;height:calc(var(--base-size-28) + var(--base-size-2));scroll-behavior:smooth;scrollbar-width:none;display:flex;overflow-x:auto}.Primer_Brand__CarouselPagination-module__CarouselPagination__indicator___cq9Tv{width:var(--base-size-6);height:var(--base-size-6);border-radius:var(--brand-borderRadius-full);background:var(--brand-CarouselPagination-indicator-bgColor);cursor:pointer;transition:width var(--brand-animation-duration-fast) cubic-bezier(.4, 0, .2, 1), background-color var(--brand-animation-duration-fast) cubic-bezier(.4, 0, .2, 1);border:0;flex:none;padding:0;position:relative}.Primer_Brand__CarouselPagination-module__CarouselPagination__indicator___cq9Tv:before{width:calc(100% + var(--base-size-6));height:calc(var(--base-size-28) + var(--base-size-2));content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Primer_Brand__CarouselPagination-module__CarouselPagination__indicator--active___vC6GZ{width:calc(var(--base-size-6) * 2.5);background:var(--brand-CarouselPagination-indicator-active-bgColor)}.Primer_Brand__CarouselPagination-module__CarouselPagination__indicator___cq9Tv:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-4)}.Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton___yQphd:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}@media (prefers-reduced-motion:reduce){.Primer_Brand__CarouselPagination-module__CarouselPagination__indicators___ReV_f{scroll-behavior:auto}.Primer_Brand__CarouselPagination-module__CarouselPagination__indicator___cq9Tv{transition:none}}@media (forced-colors:active){.Primer_Brand__CarouselPagination-module__CarouselPagination__indicator___cq9Tv{background:buttontext}.Primer_Brand__CarouselPagination-module__CarouselPagination__indicator--active___vC6GZ{forced-color-adjust:none;background:highlight}}

package/esm/CarouselPagination/CarouselPagination.module.js ADDED Viewed

@@ -0,0 +1,14 @@
+import './CarouselPagination.module-F-qylhO7.css';//#region src/CarouselPagination/CarouselPagination.module.css
+var e = "Primer_Brand__CarouselPagination-module__CarouselPagination___PH90q", t = "Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton___yQphd", n = "Primer_Brand__CarouselPagination-module__CarouselPagination__indicators___ReV_f", r = "Primer_Brand__CarouselPagination-module__CarouselPagination__indicator___cq9Tv", i = {
+	CarouselPagination: e,
+	CarouselPagination__arrowButton: t,
+	"CarouselPagination__arrowButton--inactive": "Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton--inactive___euhyS",
+	"CarouselPagination__arrowButton--available": "Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton--available___fw1dN",
+	CarouselPagination__indicators: n,
+	CarouselPagination__indicator: r,
+	"CarouselPagination__indicator--active": "Primer_Brand__CarouselPagination-module__CarouselPagination__indicator--active___vC6GZ"
+};
+//#endregion
+export { e as CarouselPagination, t as CarouselPagination__arrowButton, r as CarouselPagination__indicator, n as CarouselPagination__indicators, i as default };
+//# sourceMappingURL=CarouselPagination.module.js.map

package/esm/CarouselPagination/CarouselPagination.module.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CarouselPagination.module.js","names":[],"sources":["../../src/CarouselPagination/CarouselPagination.module.css"],"sourcesContent":[".CarouselPagination {\n display: inline-flex;\n flex: 0 1 auto;\n min-width: 0;\n align-items: center;\n gap: calc(var(--base-size-8) + var(--base-size-2));\n width: max-content;\n max-width: 100%;\n padding: var(--base-size-6);\n border-radius: var(--brand-borderRadius-full);\n background: var(--brand-CarouselPagination-bgColor);\n}\n\n.CarouselPagination .CarouselPagination__arrowButton {\n width: calc(var(--base-size-28) + var(--base-size-2));\n min-width: calc(var(--base-size-28) + var(--base-size-2));\n height: calc(var(--base-size-28) + var(--base-size-2));\n min-height: calc(var(--base-size-28) + var(--base-size-2));\n padding: 0;\n color: var(--brand-CarouselPagination-arrowButton-fgColor);\n background: var(--brand-color-canvas-default);\n border: var(--brand-borderWidth-thin) solid var(--brand-CarouselPagination-arrowButton-borderColor);\n box-shadow: none;\n backdrop-filter: none;\n}\n\n.CarouselPagination .CarouselPagination__arrowButton--inactive,\n.CarouselPagination .CarouselPagination__arrowButton--inactive:hover {\n color: var(--brand-CarouselPagination-arrowButton-inactive-fgColor);\n background: var(--brand-color-canvas-default);\n border-color: transparent;\n}\n\n.CarouselPagination .CarouselPagination__arrowButton svg {\n width: var(--base-size-16);\n height: var(--base-size-16);\n}\n\n@media (hover: hover) and (pointer: fine) {\n .CarouselPagination .CarouselPagination__arrowButton--available:hover {\n background: var(--brand-CarouselPagination-bgColor);\n border-color: var(--brand-CarouselPagination-arrowButton-borderColor);\n box-shadow: none;\n }\n}\n\n.CarouselPagination__indicators {\n display: flex;\n align-items: center;\n gap: var(--base-size-6);\n width: calc(var(--base-size-6) * (var(--carousel-pagination-item-count) * 2 + 0.5));\n min-width: 0;\n height: calc(var(--base-size-28) + var(--base-size-2));\n overflow-x: auto;\n scroll-behavior: smooth;\n scrollbar-width: none;\n}\n\n.CarouselPagination__indicator {\n position: relative;\n flex: none;\n width: var(--base-size-6);\n height: var(--base-size-6);\n padding: 0;\n border: 0;\n border-radius: var(--brand-borderRadius-full);\n background: var(--brand-CarouselPagination-indicator-bgColor);\n cursor: pointer;\n transition: width var(--brand-animation-duration-fast) cubic-bezier(0.4, 0, 0.2, 1),\n background-color var(--brand-animation-duration-fast) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.CarouselPagination__indicator::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: calc(100% + var(--base-size-6));\n height: calc(var(--base-size-28) + var(--base-size-2));\n content: '';\n transform: translate(-50%, -50%);\n}\n\n.CarouselPagination__indicator--active {\n width: calc(var(--base-size-6) * 2.5);\n background: var(--brand-CarouselPagination-indicator-active-bgColor);\n}\n\n.CarouselPagination__indicator:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-4);\n}\n\n.CarouselPagination__arrowButton:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .CarouselPagination__indicators {\n scroll-behavior: auto;\n }\n\n .CarouselPagination__indicator {\n transition: none;\n }\n}\n\n@media (forced-colors: active) {\n .CarouselPagination__indicator {\n background: ButtonText;\n }\n\n .CarouselPagination__indicator--active {\n background: Highlight;\n forced-color-adjust: none;\n }\n}\n"],"mappings":""}

package/esm/CarouselPagination/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './CarouselPagination';
2	+ //# sourceMappingURL=index.d.ts.map

package/esm/CarouselPagination/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CarouselPagination/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}

package/esm/ComparisonTable/ComparisonTable.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useAnimation as t } from "../animation/useAnimation.js";
 import { Text as n } from "../Text/Text.js";
 import { Heading as r } from "../Heading/Heading.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/comparison-table/comparison-table-L50b0Mii.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes-D2oNfyDt.css';/* empty css                                                                                                              */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/comparison-table/comparison-table-L50b0Mii.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes-q-NjRozG.css';/* empty css                                                                                                              */
 /* empty css                                                                                                             */
 import i from "./ComparisonTable.module.js";
 import a, { forwardRef as o, useMemo as s } from "react";

package/esm/EyebrowBanner/EyebrowBanner.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { BiColorGradients as t, Colors as n } from "../constants.js";
 import { Text as r } from "../Text/Text.js";
 import { ExpandableArrow as i } from "../ExpandableArrow/ExpandableArrow.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes-BzV3LYhH.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner-CPW2Ri4S.css';/* empty css                                                                                                         */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes-BTVqJ9iR.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner-CPW2Ri4S.css';/* empty css                                                                                                         */
 /* empty css                                                                                                            */
 import a from "./EyebrowBanner.module.js";
 import o, { forwardRef as s, useCallback as c } from "react";

package/esm/FAQ/FAQ.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { useAnimation as t } from "../animation/useAnimation.js";
 import { Heading as n } from "../Heading/Heading.js";
 import { AccordionContent as r, AccordionHeading as i, AccordionRoot as a } from "../Accordion/Accordion.js";
 import { isFragmentElement as o } from "../utils/isFragmentElement.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/faq-s_zeJJpd.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes-Dc8Ya1HV.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/base-BIIAD0RC.css';/* empty css                                                                                    */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/faq-s_zeJJpd.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes-BygKJG38.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/base-BIIAD0RC.css';/* empty css                                                                                    */
 /* empty css                                                                                                 */
 /* empty css                                                                                   */
 import s from "./FAQ.module.js";

package/esm/FAQ/FAQGroup.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { Stack as r } from "../Stack/Stack.js";
 import { Box as i } from "../Box/Box.js";
 import { Heading as a } from "../Heading/Heading.js";
 import { Accordion as o } from "../Accordion/Accordion.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/faq-s_zeJJpd.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes-Dc8Ya1HV.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/base-BIIAD0RC.css';/* empty css                                                                                    */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/faq-s_zeJJpd.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes-BygKJG38.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/base-BIIAD0RC.css';/* empty css                                                                                    */
 /* empty css                                                                                                 */
 /* empty css                                                                                   */
 import { FAQ as s } from "./FAQ.js";

package/esm/FeatureComparisonTable/FeatureComparisonTable.js CHANGED Viewed

@@ -22,7 +22,7 @@ import { FeatureComparisonTableCell as S } from "./sub-components/FeatureCompari
 import { FeatureComparisonTableRow as C } from "./sub-components/FeatureComparisonTableRow.js";
 import { FeatureComparisonTableGroupHeading as w } from "./sub-components/FeatureComparisonTableGroupHeading.js";
 import { FeatureComparisonTableGroup as T } from "./sub-components/FeatureComparisonTableGroup.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/feature-comparison-table/colors-with-modes-Dw8AMSYp.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/feature-comparison-table/base-44NysoUh.css';/* empty css                                                                                                         */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/feature-comparison-table/colors-with-modes-k7YIWAQV.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/feature-comparison-table/base-44NysoUh.css';/* empty css                                                                                                         */
 /* empty css                                                                                                                      */
 import E, { forwardRef as D, useEffect as O, useRef as k, useState as A } from "react";
 import { jsx as j, jsxs as M } from "react/jsx-runtime";