npm - @primer/react-brand - Versions diffs - 0.79.1-rc.ed00156c → 0.80.0-rc.4bfa3a79 - Mend

@primer/react-brand 0.79.1-rc.ed00156c → 0.80.0-rc.4bfa3a79

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 (684) 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/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";

package/esm/FeatureComparisonTable/FeatureComparisonTable.module-BH8n2Ttj.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable___dngKP{--brand-FeatureComparisonTable-itemCount:1;--brand-FeatureComparisonTable-featureColumnWidth:var(--brand-FeatureComparisonTable-default-featureColumnWidth);width:100%;color:var(--brand-color-text-default);background-color:var(--brand-color-canvas-default);container-type:inline-size}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--items2___x2QKi{--brand-FeatureComparisonTable-itemCount:2}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--items3___PBf2a{--brand-FeatureComparisonTable-itemCount:3}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--items4___C1tK_{--brand-FeatureComparisonTable-itemCount:4;--brand-FeatureComparisonTable-featureColumnWidth:var(--brand-FeatureComparisonTable-fourItems-featureColumnWidth)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrowHeading___olgb8{padding:var(--base-size-60) var(--base-size-20);text-align:center}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrowHeading___olgb8:before{content:none}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__table___M6UcH{border-collapse:collapse;table-layout:fixed;width:100%;display:none}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableHeading___qntyG{text-align:start}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeading___lLU9H{align-items:center;gap:var(--base-size-8);display:inline-flex}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowDescription___aPLbp{margin-block-start:var(--base-size-8)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cell___KoDID{justify-content:center;align-items:center;gap:var(--base-size-8);text-align:center;word-wrap:anywhere;max-width:100%;display:inline-flex}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon___li3MO{flex:0 0 var(--base-size-24);width:var(--base-size-24);height:var(--base-size-24);justify-content:center;align-items:center;display:inline-flex}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--included___gb5E0,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--unlimited___6S4_o,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--refresh___VM2hn{border-radius:var(--brand-borderRadius-full)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--included___gb5E0{color:var(--brand-FeatureComparisonTable-includedIndicator-fgColor);background-color:var(--brand-FeatureComparisonTable-includedIndicator-bgColor)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--unlimited___6S4_o{color:var(--brand-FeatureComparisonTable-unlimitedIndicator-fgColor);background-color:var(--brand-FeatureComparisonTable-unlimitedIndicator-bgColor)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--refresh___VM2hn{color:var(--brand-FeatureComparisonTable-refreshIndicator-fgColor);background-color:var(--brand-FeatureComparisonTable-refreshIndicator-bgColor)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__group___XE2zK{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__group___XE2zK~.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__group___XE2zK{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__summary___8PpmB{justify-content:space-between;align-items:center;gap:var(--base-size-12);min-height:var(--base-size-80);padding:var(--base-size-24) var(--base-size-20) var(--base-size-4);cursor:pointer;list-style:none;display:flex}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__summary___8PpmB::-webkit-details-marker{display:none}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__chevron___FtiUb{width:var(--base-size-16);height:var(--base-size-16);margin-inline:var(--base-size-6);flex-shrink:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__chevron--expanded___3WPYL{transform:rotate(180deg)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:first-child{border-block-start:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeading___lLU9H{min-height:var(--base-size-48);padding:var(--base-size-12) var(--base-size-20);justify-content:space-between;display:flex}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeadingContent___KSfue{padding:var(--base-size-12) var(--base-size-20)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeadingContent___KSfue .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeading___lLU9H{min-height:auto;padding:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planName___DTywr{word-wrap:anywhere}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cell___KoDID{text-align:end;justify-content:flex-end}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValues___bZ2yv{grid-template-columns:minmax(0,1fr) minmax(0,2fr);margin:0;display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planTerm___mzmmH,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValue___Ph_zM{min-width:0;min-height:calc(var(--base-size-28) + var(--base-size-24));padding-block:var(--base-size-12);margin:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planTerm___mzmmH{padding-inline:var(--base-size-20) var(--base-size-8)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValue___Ph_zM{padding-inline:var(--base-size-8) var(--base-size-20);text-align:end}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC{grid-row:1/span 4;grid-template-rows:subgrid;border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);text-align:start;align-content:start;display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item--hasLabel___hvCZl{border-block-start:0;grid-row-end:span 5}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item--offset___WWEYj{grid-row-start:2}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__itemContent___xO24j{grid-row:1/span 4;grid-template-rows:subgrid;grid-template-columns:minmax(0, 1fr) fit-content(calc((100% - var(--base-size-8)) / 2));grid-column-gap:var(--base-size-8);-moz-column-gap:var(--base-size-8);column-gap:var(--base-size-8);min-width:0;padding:var(--base-size-16) var(--base-size-28);align-content:start;justify-self:stretch;display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__itemContent--hasLabel___YTcaZ{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);grid-row:2/span 4}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__labelCell___5nPTu{padding:calc(var(--base-size-16) - var(--brand-borderWidth-thin)) var(--base-size-28) var(--base-size-16);border-block-start:var(--brand-borderWidth-thin) solid var(--brand-FeatureComparisonTable-label-accentColor);grid-row:1;justify-self:stretch;align-items:center;display:flex;position:relative}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__labelCell___5nPTu:before{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);content:"";pointer-events:none;position:absolute;inset:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__label___WoGfw{font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);font-weight:var(--base-text-weight-medium);letter-spacing:var(--brand-text-letterSpacing-100);line-height:var(--brand-text-lineHeight-200);text-transform:uppercase;display:inline-block}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__itemHeading___6bVkq{word-wrap:anywhere;grid-row:1;align-self:start}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__description___A5hme{grid-area:2/1/auto/-1;margin-block-start:var(--base-size-12)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__price___5a2qj{text-align:end;word-wrap:anywhere;grid-area:1/2;align-self:start;margin:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__actions___LF_4R{grid-gap:var(--base-size-12);gap:var(--base-size-12);width:100%;grid-area:4/1/auto/-1;align-self:start;margin-block-start:var(--base-size-12);display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planTerm___mzmmH,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValue___Ph_zM,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx{transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:focus-within{background-color:var(--brand-FeatureComparisonTable-rowHighlight-bgColor)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY a:focus-visible,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY button:focus-visible{z-index:1;position:relative}@media (width>=48rem){.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy{max-width:38.625rem;margin-inline:auto}}@media (width>=80rem){.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable___dngKP{padding-block-start:var(--base-size-60)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__table___M6UcH{display:table}:where(.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell___Y2QpE,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider___tbGNF){padding:var(--base-size-12) var(--base-size-28);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);vertical-align:top}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell___Y2QpE,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider___tbGNF{text-align:start}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:last-child>*,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider--noVisibleRows____IfnP{border-block-end:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid___uc4oR:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider___tbGNF:after{content:none}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx{text-align:center;vertical-align:middle}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:first-child,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:last-child,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx:last-child,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC{position:relative}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:first-child:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:last-child:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx:last-child:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC:before{content:"";pointer-events:none;position:absolute;inset:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC:before{inset-block-end:var(--brand-borderWidth-thin)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:first-child:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC:before{border-inline-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx:last-child:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:last-child:before{border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__featureColumn___yPFyJ{width:var(--brand-FeatureComparisonTable-featureColumnWidth)}:where(.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--stickyHeaders___Vg9gu) .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell___Y2QpE{background-color:var(--brand-color-canvas-default)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--stickyHeaders___Vg9gu .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid___uc4oR:before{content:"";border:0;-o-border-image:linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) 0;border-image:linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) fill 0;z-index:-1;border-image-outset:0 100vw;height:auto;inset:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--stickyHeaders___Vg9gu .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid___uc4oR:after{z-index:4}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider___tbGNF{padding-block:var(--base-size-48) var(--base-size-4);position:relative}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid___uc4oR{grid-template-columns:minmax(0, var(--brand-FeatureComparisonTable-featureColumnWidth)) repeat(var(--brand-FeatureComparisonTable-itemCount), minmax(0, 1fr));display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ{pointer-events:none;position:absolute;inset:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupControl___srZUw{justify-content:flex-start;align-items:center;gap:var(--base-size-12);min-height:calc(var(--base-size-28) + var(--base-size-24));color:inherit;font:inherit;text-align:inherit;cursor:pointer;background:0 0;border:0;padding:0;display:inline-flex;position:relative}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__chevron___FtiUb{margin-inline:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid___uc4oR{grid-template-rows:repeat(4,auto);width:100cqw}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid--hasLabel___z1_Pw{grid-template-rows:repeat(5,auto)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--stickyHeaders___Vg9gu .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__head___iGAPA{z-index:2;position:sticky;inset-block-start:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell___Y2QpE{grid-row:1/span 4;grid-template-rows:subgrid;border-block:0;padding:0;display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell--hasLabel___5QsYF{grid-row-end:span 5}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableHeading___qntyG{padding:var(--base-size-28);align-self:end}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell___Y2QpE:last-child .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC:before{border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableHeading--hasLabel___mUlr7{grid-row:2/-1;align-self:start;padding-block:0;position:relative;inset-block-start:var(--base-size-16)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__highlightedColumn___RwptH{background-color:var(--brand-FeatureComparisonTable-highlightedColumn-bgColor)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:focus-within>*{background-color:var(--brand-FeatureComparisonTable-rowHighlight-bgColor)}}@media (hover:hover) and (pointer:fine){.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:hover{background-color:var(--brand-FeatureComparisonTable-rowHighlight-bgColor)}}@media (hover:hover) and (pointer:fine) and (width>=80rem){.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:hover>*{background-color:var(--brand-FeatureComparisonTable-rowHighlight-bgColor)}}@media (prefers-reduced-motion:reduce){.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planTerm___mzmmH,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValue___Ph_zM,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx{transition-duration:0s}}

package/esm/FeatureComparisonTable/FeatureComparisonTable.module.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import './FeatureComparisonTable.module-CGnj3YJu.css';//#region src/FeatureComparisonTable/FeatureComparisonTable.module.css
+import './FeatureComparisonTable.module-BH8n2Ttj.css';//#region src/FeatureComparisonTable/FeatureComparisonTable.module.css
 var e = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable___dngKP", t = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrowHeading___olgb8", n = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__table___M6UcH", r = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableHeading___qntyG", i = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeading___lLU9H", a = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowDescription___aPLbp", o = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cell___KoDID", s = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon___li3MO", c = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__group___XE2zK", l = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__summary___8PpmB", u = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__chevron___FtiUb", d = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy", f = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY", p = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeadingContent___KSfue", m = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planName___DTywr", h = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValues___bZ2yv", g = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planTerm___mzmmH", _ = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValue___Ph_zM", v = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC", y = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__itemContent___xO24j", b = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__labelCell___5nPTu", x = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__label___WoGfw", S = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__itemHeading___6bVkq", C = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__description___A5hme", w = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__price___5a2qj", T = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__actions___LF_4R", E = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn", D = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx", O = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell___Y2QpE", k = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider___tbGNF", A = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid___uc4oR", j = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ", M = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__featureColumn___yPFyJ", N = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupControl___srZUw", P = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__head___iGAPA", F = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__highlightedColumn___RwptH", I = {
 	FeatureComparisonTable: e,
 	"FeatureComparisonTable--items2": "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--items2___x2QKi",
@@ -42,7 +42,6 @@ var e = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable___d
 	FeatureComparisonTable__groupDivider: k,
 	"FeatureComparisonTable__groupDivider--noVisibleRows": "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider--noVisibleRows____IfnP",
 	FeatureComparisonTable__headingGrid: A,
-	"FeatureComparisonTable__tableCell--hasVariant": "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell--hasVariant___a9jCs",
 	FeatureComparisonTable__groupBackground: j,
 	FeatureComparisonTable__featureColumn: M,
 	"FeatureComparisonTable--stickyHeaders": "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--stickyHeaders___Vg9gu",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FeatureComparisonTable.module.js","names":[],"sources":["../../src/FeatureComparisonTable/FeatureComparisonTable.module.css"],"sourcesContent":[".FeatureComparisonTable {\n --brand-FeatureComparisonTable-itemCount: 1;\n --brand-FeatureComparisonTable-featureColumnWidth: var(--brand-FeatureComparisonTable-default-featureColumnWidth);\n\n container-type: inline-size;\n width: 100%;\n color: var(--brand-color-text-default);\n}\n\n.FeatureComparisonTable--items2 {\n --brand-FeatureComparisonTable-itemCount: 2;\n}\n\n.FeatureComparisonTable--items3 {\n --brand-FeatureComparisonTable-itemCount: 3;\n}\n\n.FeatureComparisonTable--items4 {\n --brand-FeatureComparisonTable-itemCount: 4;\n --brand-FeatureComparisonTable-featureColumnWidth: var(--brand-FeatureComparisonTable-fourItems-featureColumnWidth);\n}\n\n.FeatureComparisonTable__narrowHeading {\n padding: var(--base-size-60) var(--base-size-20);\n text-align: center;\n}\n\n.FeatureComparisonTable__narrowHeading::before {\n content: none;\n}\n\n.FeatureComparisonTable__table {\n display: none;\n width: 100%;\n border-collapse: collapse;\n table-layout: fixed;\n}\n\n.FeatureComparisonTable__tableHeading {\n text-align: start;\n}\n\n.FeatureComparisonTable__rowHeading {\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-8);\n}\n\n.FeatureComparisonTable__rowDescription {\n margin-block-start: var(--base-size-8);\n}\n\n.FeatureComparisonTable__cell {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--base-size-8);\n max-width: 100%;\n text-align: center;\n overflow-wrap: anywhere;\n}\n\n.FeatureComparisonTable__cellIcon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 var(--base-size-24);\n width: var(--base-size-24);\n height: var(--base-size-24);\n}\n\n.FeatureComparisonTable__cellIcon--included,\n.FeatureComparisonTable__cellIcon--unlimited,\n.FeatureComparisonTable__cellIcon--refresh {\n border-radius: var(--brand-borderRadius-full);\n}\n\n.FeatureComparisonTable__cellIcon--included {\n color: var(--brand-FeatureComparisonTable-includedIndicator-fgColor);\n background-color: var(--brand-FeatureComparisonTable-includedIndicator-bgColor);\n}\n\n.FeatureComparisonTable__cellIcon--unlimited {\n color: var(--brand-FeatureComparisonTable-unlimitedIndicator-fgColor);\n background-color: var(--brand-FeatureComparisonTable-unlimitedIndicator-bgColor);\n}\n\n.FeatureComparisonTable__cellIcon--refresh {\n color: var(--brand-FeatureComparisonTable-refreshIndicator-fgColor);\n background-color: var(--brand-FeatureComparisonTable-refreshIndicator-bgColor);\n}\n\n.FeatureComparisonTable__group {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.FeatureComparisonTable__group ~ .FeatureComparisonTable__group {\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.FeatureComparisonTable__summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--base-size-12);\n min-height: var(--base-size-80);\n padding: var(--base-size-24) var(--base-size-20) var(--base-size-4);\n list-style: none;\n cursor: pointer;\n}\n\n.FeatureComparisonTable__summary::-webkit-details-marker {\n display: none;\n}\n\n.FeatureComparisonTable__chevron {\n flex-shrink: 0;\n width: var(--base-size-16);\n height: var(--base-size-16);\n margin-inline: var(--base-size-6);\n}\n\n.FeatureComparisonTable__chevron--expanded {\n transform: rotate(180deg);\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__row {\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__row:first-child {\n border-block-start: 0;\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__rowHeading {\n display: flex;\n justify-content: space-between;\n min-height: var(--base-size-48);\n padding: var(--base-size-12) var(--base-size-20);\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__rowHeadingContent {\n padding: var(--base-size-12) var(--base-size-20);\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__rowHeadingContent .FeatureComparisonTable__rowHeading {\n min-height: auto;\n padding: 0;\n}\n\n.FeatureComparisonTable__planName {\n overflow-wrap: anywhere;\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__cell {\n justify-content: flex-end;\n text-align: end;\n}\n\n.FeatureComparisonTable__planValues {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);\n margin: 0;\n}\n\n.FeatureComparisonTable__planTerm,\n.FeatureComparisonTable__planValue {\n margin: 0;\n min-width: 0;\n min-height: calc(var(--base-size-28) + var(--base-size-24));\n padding-block: var(--base-size-12);\n}\n\n.FeatureComparisonTable__planTerm {\n padding-inline: var(--base-size-20) var(--base-size-8);\n}\n\n.FeatureComparisonTable__planValue {\n padding-inline: var(--base-size-8) var(--base-size-20);\n text-align: end;\n}\n\n.FeatureComparisonTable__item {\n display: grid;\n grid-row: 1 / span 4;\n grid-template-rows: subgrid;\n align-content: start;\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n text-align: start;\n}\n\n.FeatureComparisonTable__item--hasLabel {\n grid-row-end: span 5;\n border-block-start: 0;\n}\n\n.FeatureComparisonTable__item--offset {\n grid-row-start: 2;\n}\n\n.FeatureComparisonTable__itemContent {\n display: grid;\n grid-row: 1 / span 4;\n grid-template-rows: subgrid;\n grid-template-columns: minmax(0, 1fr) fit-content(calc((100% - var(--base-size-8)) / 2));\n column-gap: var(--base-size-8);\n align-content: start;\n justify-self: stretch;\n min-width: 0;\n padding: var(--base-size-16) var(--base-size-28);\n}\n\n.FeatureComparisonTable__itemContent--hasLabel {\n grid-row: 2 / span 4;\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n.FeatureComparisonTable__labelCell {\n position: relative;\n display: flex;\n grid-row: 1;\n align-items: center;\n justify-self: stretch;\n padding: calc(var(--base-size-16) - var(--brand-borderWidth-thin)) var(--base-size-28) var(--base-size-16);\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-FeatureComparisonTable-label-accentColor);\n}\n\n.FeatureComparisonTable__labelCell::before {\n position: absolute;\n inset: 0;\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n content: '';\n pointer-events: none;\n}\n\n.FeatureComparisonTable__label {\n display: inline-block;\n font-family: var(--brand-fontStack-monospace);\n font-size: var(--brand-text-size-100);\n font-weight: var(--base-text-weight-medium);\n letter-spacing: var(--brand-text-letterSpacing-100);\n line-height: var(--brand-text-lineHeight-200);\n text-transform: uppercase;\n}\n\n.FeatureComparisonTable__itemHeading {\n grid-row: 1;\n align-self: start;\n overflow-wrap: anywhere;\n}\n\n.FeatureComparisonTable__description {\n grid-row: 2;\n grid-column: 1 / -1;\n margin-block-start: var(--base-size-12);\n}\n\n.FeatureComparisonTable__price {\n grid-row: 1;\n grid-column: 2;\n align-self: start;\n margin: 0;\n text-align: end;\n overflow-wrap: anywhere;\n}\n\n.FeatureComparisonTable__actions {\n display: grid;\n grid-row: 4;\n grid-column: 1 / -1;\n gap: var(--base-size-12);\n align-self: start;\n width: 100%;\n margin-block-start: var(--base-size-12);\n}\n\n.FeatureComparisonTable__row,\n.FeatureComparisonTable__planTerm,\n.FeatureComparisonTable__planValue,\n.FeatureComparisonTable__rowHeaderCell,\n.FeatureComparisonTable__tableCell {\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.FeatureComparisonTable__row:focus-within {\n background-color: var(--brand-FeatureComparisonTable-rowHighlight-bgColor);\n}\n\n.FeatureComparisonTable__row :is(a, button):focus-visible {\n position: relative;\n z-index: 1;\n}\n\n@media (min-width: 48rem) {\n .FeatureComparisonTable__narrow {\n max-width: 38.625rem;\n margin-inline: auto;\n }\n}\n\n@media (min-width: 80rem) {\n .FeatureComparisonTable {\n padding-block-start: var(--base-size-60);\n }\n\n .FeatureComparisonTable__table {\n display: table;\n }\n\n :where(\n .FeatureComparisonTable__headerCell,\n .FeatureComparisonTable__rowHeaderCell,\n .FeatureComparisonTable__tableCell,\n .FeatureComparisonTable__groupDivider\n ) {\n padding: var(--base-size-12) var(--base-size-28);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n vertical-align: top;\n }\n\n .FeatureComparisonTable__headerCell,\n .FeatureComparisonTable__rowHeaderCell,\n .FeatureComparisonTable__groupDivider {\n text-align: start;\n }\n\n .FeatureComparisonTable__row:last-child > ,\n .FeatureComparisonTable__groupDivider--noVisibleRows {\n border-block-end: 0;\n }\n\n .FeatureComparisonTable__headingGrid::before,\n .FeatureComparisonTable__groupDivider::after {\n content: none;\n }\n\n .FeatureComparisonTable__tableCell {\n text-align: center;\n }\n\n .FeatureComparisonTable__tableCell--hasVariant {\n vertical-align: middle;\n }\n\n .FeatureComparisonTable__rowHeaderCell,\n .FeatureComparisonTable__tableCell:last-child,\n .FeatureComparisonTable__groupBackground > :is(:first-child, :last-child),\n .FeatureComparisonTable__item {\n position: relative;\n }\n\n .FeatureComparisonTable__rowHeaderCell::before,\n .FeatureComparisonTable__tableCell:last-child::before,\n .FeatureComparisonTable__groupBackground > :is(:first-child, :last-child)::before,\n .FeatureComparisonTable__item::before {\n position: absolute;\n inset: 0;\n content: '';\n pointer-events: none;\n }\n\n .FeatureComparisonTable__item::before {\n inset-block-end: var(--brand-borderWidth-thin);\n }\n\n .FeatureComparisonTable__rowHeaderCell::before,\n .FeatureComparisonTable__groupBackground > :first-child::before,\n .FeatureComparisonTable__item::before {\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .FeatureComparisonTable__tableCell:last-child::before,\n .FeatureComparisonTable__groupBackground > :last-child::before {\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .FeatureComparisonTable__featureColumn {\n width: var(--brand-FeatureComparisonTable-featureColumnWidth);\n }\n\n :where(.FeatureComparisonTable--stickyHeaders) .FeatureComparisonTable__headerCell {\n background-color: var(--brand-color-canvas-default);\n }\n\n .FeatureComparisonTable--stickyHeaders .FeatureComparisonTable__headingGrid::after {\n z-index: 4;\n }\n\n .FeatureComparisonTable__groupDivider {\n position: relative;\n padding-block: var(--base-size-48) var(--base-size-4);\n }\n\n .FeatureComparisonTable__groupBackground,\n .FeatureComparisonTable__headingGrid {\n display: grid;\n grid-template-columns:\n minmax(0, var(--brand-FeatureComparisonTable-featureColumnWidth))\n repeat(var(--brand-FeatureComparisonTable-itemCount), minmax(0, 1fr));\n }\n\n .FeatureComparisonTable__groupBackground {\n position: absolute;\n inset: 0;\n pointer-events: none;\n }\n\n .FeatureComparisonTable__groupControl {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n gap: var(--base-size-12);\n min-height: calc(var(--base-size-28) + var(--base-size-24));\n padding: 0;\n color: inherit;\n font: inherit;\n text-align: inherit;\n background: transparent;\n border: 0;\n cursor: pointer;\n }\n\n .FeatureComparisonTable__chevron {\n margin-inline: 0;\n }\n\n .FeatureComparisonTable__headingGrid {\n width: 100cqw;\n grid-template-rows: repeat(4, auto);\n }\n\n .FeatureComparisonTable__headingGrid--hasLabel {\n grid-template-rows: repeat(5, auto);\n }\n\n .FeatureComparisonTable--stickyHeaders .FeatureComparisonTable__head {\n position: sticky;\n z-index: 2;\n inset-block-start: 0;\n }\n\n .FeatureComparisonTable__headerCell {\n display: grid;\n grid-row: 1 / span 4;\n grid-template-rows: subgrid;\n padding: 0;\n border-block-start: 0;\n border-block-end: 0;\n }\n\n .FeatureComparisonTable__headerCell--hasLabel {\n grid-row-end: span 5;\n }\n\n .FeatureComparisonTable__tableHeading {\n align-self: end;\n padding: var(--base-size-28);\n }\n\n .FeatureComparisonTable__headerCell:last-child .FeatureComparisonTable__item::before {\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .FeatureComparisonTable__tableHeading--hasLabel {\n position: relative;\n grid-row: 2 / -1;\n align-self: start;\n padding-block: 0;\n inset-block-start: var(--base-size-16);\n }\n\n .FeatureComparisonTable__highlightedColumn {\n background-color: var(--brand-FeatureComparisonTable-highlightedColumn-bgColor);\n }\n\n .FeatureComparisonTable__row:focus-within > {\n background-color: var(--brand-FeatureComparisonTable-rowHighlight-bgColor);\n }\n}\n\n@media (hover: hover) and (pointer: fine) {\n .FeatureComparisonTable__row:hover {\n background-color: var(--brand-FeatureComparisonTable-rowHighlight-bgColor);\n }\n}\n\n@media (hover: hover) and (pointer: fine) and (min-width: 80rem) {\n .FeatureComparisonTable__row:hover > * {\n background-color: var(--brand-FeatureComparisonTable-rowHighlight-bgColor);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .FeatureComparisonTable__row,\n .FeatureComparisonTable__planTerm,\n .FeatureComparisonTable__planValue,\n .FeatureComparisonTable__rowHeaderCell,\n .FeatureComparisonTable__tableCell {\n transition-duration: 0s;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"FeatureComparisonTable.module.js","names":[],"sources":["../../src/FeatureComparisonTable/FeatureComparisonTable.module.css"],"sourcesContent":[".FeatureComparisonTable {\n --brand-FeatureComparisonTable-itemCount: 1;\n --brand-FeatureComparisonTable-featureColumnWidth: var(--brand-FeatureComparisonTable-default-featureColumnWidth);\n\n container-type: inline-size;\n width: 100%;\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-default);\n}\n\n.FeatureComparisonTable--items2 {\n --brand-FeatureComparisonTable-itemCount: 2;\n}\n\n.FeatureComparisonTable--items3 {\n --brand-FeatureComparisonTable-itemCount: 3;\n}\n\n.FeatureComparisonTable--items4 {\n --brand-FeatureComparisonTable-itemCount: 4;\n --brand-FeatureComparisonTable-featureColumnWidth: var(--brand-FeatureComparisonTable-fourItems-featureColumnWidth);\n}\n\n.FeatureComparisonTable__narrowHeading {\n padding: var(--base-size-60) var(--base-size-20);\n text-align: center;\n}\n\n.FeatureComparisonTable__narrowHeading::before {\n content: none;\n}\n\n.FeatureComparisonTable__table {\n display: none;\n width: 100%;\n border-collapse: collapse;\n table-layout: fixed;\n}\n\n.FeatureComparisonTable__tableHeading {\n text-align: start;\n}\n\n.FeatureComparisonTable__rowHeading {\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-8);\n}\n\n.FeatureComparisonTable__rowDescription {\n margin-block-start: var(--base-size-8);\n}\n\n.FeatureComparisonTable__cell {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--base-size-8);\n max-width: 100%;\n text-align: center;\n overflow-wrap: anywhere;\n}\n\n.FeatureComparisonTable__cellIcon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 var(--base-size-24);\n width: var(--base-size-24);\n height: var(--base-size-24);\n}\n\n.FeatureComparisonTable__cellIcon--included,\n.FeatureComparisonTable__cellIcon--unlimited,\n.FeatureComparisonTable__cellIcon--refresh {\n border-radius: var(--brand-borderRadius-full);\n}\n\n.FeatureComparisonTable__cellIcon--included {\n color: var(--brand-FeatureComparisonTable-includedIndicator-fgColor);\n background-color: var(--brand-FeatureComparisonTable-includedIndicator-bgColor);\n}\n\n.FeatureComparisonTable__cellIcon--unlimited {\n color: var(--brand-FeatureComparisonTable-unlimitedIndicator-fgColor);\n background-color: var(--brand-FeatureComparisonTable-unlimitedIndicator-bgColor);\n}\n\n.FeatureComparisonTable__cellIcon--refresh {\n color: var(--brand-FeatureComparisonTable-refreshIndicator-fgColor);\n background-color: var(--brand-FeatureComparisonTable-refreshIndicator-bgColor);\n}\n\n.FeatureComparisonTable__group {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.FeatureComparisonTable__group ~ .FeatureComparisonTable__group {\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.FeatureComparisonTable__summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--base-size-12);\n min-height: var(--base-size-80);\n padding: var(--base-size-24) var(--base-size-20) var(--base-size-4);\n list-style: none;\n cursor: pointer;\n}\n\n.FeatureComparisonTable__summary::-webkit-details-marker {\n display: none;\n}\n\n.FeatureComparisonTable__chevron {\n flex-shrink: 0;\n width: var(--base-size-16);\n height: var(--base-size-16);\n margin-inline: var(--base-size-6);\n}\n\n.FeatureComparisonTable__chevron--expanded {\n transform: rotate(180deg);\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__row {\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__row:first-child {\n border-block-start: 0;\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__rowHeading {\n display: flex;\n justify-content: space-between;\n min-height: var(--base-size-48);\n padding: var(--base-size-12) var(--base-size-20);\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__rowHeadingContent {\n padding: var(--base-size-12) var(--base-size-20);\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__rowHeadingContent .FeatureComparisonTable__rowHeading {\n min-height: auto;\n padding: 0;\n}\n\n.FeatureComparisonTable__planName {\n overflow-wrap: anywhere;\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__cell {\n justify-content: flex-end;\n text-align: end;\n}\n\n.FeatureComparisonTable__planValues {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);\n margin: 0;\n}\n\n.FeatureComparisonTable__planTerm,\n.FeatureComparisonTable__planValue {\n margin: 0;\n min-width: 0;\n min-height: calc(var(--base-size-28) + var(--base-size-24));\n padding-block: var(--base-size-12);\n}\n\n.FeatureComparisonTable__planTerm {\n padding-inline: var(--base-size-20) var(--base-size-8);\n}\n\n.FeatureComparisonTable__planValue {\n padding-inline: var(--base-size-8) var(--base-size-20);\n text-align: end;\n}\n\n.FeatureComparisonTable__item {\n display: grid;\n grid-row: 1 / span 4;\n grid-template-rows: subgrid;\n align-content: start;\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n text-align: start;\n}\n\n.FeatureComparisonTable__item--hasLabel {\n grid-row-end: span 5;\n border-block-start: 0;\n}\n\n.FeatureComparisonTable__item--offset {\n grid-row-start: 2;\n}\n\n.FeatureComparisonTable__itemContent {\n display: grid;\n grid-row: 1 / span 4;\n grid-template-rows: subgrid;\n grid-template-columns: minmax(0, 1fr) fit-content(calc((100% - var(--base-size-8)) / 2));\n column-gap: var(--base-size-8);\n align-content: start;\n justify-self: stretch;\n min-width: 0;\n padding: var(--base-size-16) var(--base-size-28);\n}\n\n.FeatureComparisonTable__itemContent--hasLabel {\n grid-row: 2 / span 4;\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n.FeatureComparisonTable__labelCell {\n position: relative;\n display: flex;\n grid-row: 1;\n align-items: center;\n justify-self: stretch;\n padding: calc(var(--base-size-16) - var(--brand-borderWidth-thin)) var(--base-size-28) var(--base-size-16);\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-FeatureComparisonTable-label-accentColor);\n}\n\n.FeatureComparisonTable__labelCell::before {\n position: absolute;\n inset: 0;\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n content: '';\n pointer-events: none;\n}\n\n.FeatureComparisonTable__label {\n display: inline-block;\n font-family: var(--brand-fontStack-monospace);\n font-size: var(--brand-text-size-100);\n font-weight: var(--base-text-weight-medium);\n letter-spacing: var(--brand-text-letterSpacing-100);\n line-height: var(--brand-text-lineHeight-200);\n text-transform: uppercase;\n}\n\n.FeatureComparisonTable__itemHeading {\n grid-row: 1;\n align-self: start;\n overflow-wrap: anywhere;\n}\n\n.FeatureComparisonTable__description {\n grid-row: 2;\n grid-column: 1 / -1;\n margin-block-start: var(--base-size-12);\n}\n\n.FeatureComparisonTable__price {\n grid-row: 1;\n grid-column: 2;\n align-self: start;\n margin: 0;\n text-align: end;\n overflow-wrap: anywhere;\n}\n\n.FeatureComparisonTable__actions {\n display: grid;\n grid-row: 4;\n grid-column: 1 / -1;\n gap: var(--base-size-12);\n align-self: start;\n width: 100%;\n margin-block-start: var(--base-size-12);\n}\n\n.FeatureComparisonTable__row,\n.FeatureComparisonTable__planTerm,\n.FeatureComparisonTable__planValue,\n.FeatureComparisonTable__rowHeaderCell,\n.FeatureComparisonTable__tableCell {\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.FeatureComparisonTable__row:focus-within {\n background-color: var(--brand-FeatureComparisonTable-rowHighlight-bgColor);\n}\n\n.FeatureComparisonTable__row :is(a, button):focus-visible {\n position: relative;\n z-index: 1;\n}\n\n@media (min-width: 48rem) {\n .FeatureComparisonTable__narrow {\n max-width: 38.625rem;\n margin-inline: auto;\n }\n}\n\n@media (min-width: 80rem) {\n .FeatureComparisonTable {\n padding-block-start: var(--base-size-60);\n }\n\n .FeatureComparisonTable__table {\n display: table;\n }\n\n :where(\n .FeatureComparisonTable__headerCell,\n .FeatureComparisonTable__rowHeaderCell,\n .FeatureComparisonTable__tableCell,\n .FeatureComparisonTable__groupDivider\n ) {\n padding: var(--base-size-12) var(--base-size-28);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n vertical-align: top;\n }\n\n .FeatureComparisonTable__headerCell,\n .FeatureComparisonTable__rowHeaderCell,\n .FeatureComparisonTable__groupDivider {\n text-align: start;\n }\n\n .FeatureComparisonTable__row:last-child > ,\n .FeatureComparisonTable__groupDivider--noVisibleRows {\n border-block-end: 0;\n }\n\n .FeatureComparisonTable__headingGrid::before,\n .FeatureComparisonTable__groupDivider::after {\n content: none;\n }\n\n .FeatureComparisonTable__tableCell {\n text-align: center;\n vertical-align: middle;\n }\n\n .FeatureComparisonTable__rowHeaderCell,\n .FeatureComparisonTable__tableCell:last-child,\n .FeatureComparisonTable__groupBackground > :is(:first-child, :last-child),\n .FeatureComparisonTable__item {\n position: relative;\n }\n\n .FeatureComparisonTable__rowHeaderCell::before,\n .FeatureComparisonTable__tableCell:last-child::before,\n .FeatureComparisonTable__groupBackground > :is(:first-child, :last-child)::before,\n .FeatureComparisonTable__item::before {\n position: absolute;\n inset: 0;\n content: '';\n pointer-events: none;\n }\n\n .FeatureComparisonTable__item::before {\n inset-block-end: var(--brand-borderWidth-thin);\n }\n\n .FeatureComparisonTable__rowHeaderCell::before,\n .FeatureComparisonTable__groupBackground > :first-child::before,\n .FeatureComparisonTable__item::before {\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .FeatureComparisonTable__tableCell:last-child::before,\n .FeatureComparisonTable__groupBackground > :last-child::before {\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .FeatureComparisonTable__featureColumn {\n width: var(--brand-FeatureComparisonTable-featureColumnWidth);\n }\n\n :where(.FeatureComparisonTable--stickyHeaders) .FeatureComparisonTable__headerCell {\n background-color: var(--brand-color-canvas-default);\n }\n\n .FeatureComparisonTable--stickyHeaders .FeatureComparisonTable__headingGrid::before {\n content: '';\n inset: 0;\n height: auto;\n border: 0;\n border-image: linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) fill 0;\n border-image-outset: 0 100vw;\n z-index: -1;\n }\n\n .FeatureComparisonTable--stickyHeaders .FeatureComparisonTable__headingGrid::after {\n z-index: 4;\n }\n\n .FeatureComparisonTable__groupDivider {\n position: relative;\n padding-block: var(--base-size-48) var(--base-size-4);\n }\n\n .FeatureComparisonTable__groupBackground,\n .FeatureComparisonTable__headingGrid {\n display: grid;\n grid-template-columns:\n minmax(0, var(--brand-FeatureComparisonTable-featureColumnWidth))\n repeat(var(--brand-FeatureComparisonTable-itemCount), minmax(0, 1fr));\n }\n\n .FeatureComparisonTable__groupBackground {\n position: absolute;\n inset: 0;\n pointer-events: none;\n }\n\n .FeatureComparisonTable__groupControl {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n gap: var(--base-size-12);\n min-height: calc(var(--base-size-28) + var(--base-size-24));\n padding: 0;\n color: inherit;\n font: inherit;\n text-align: inherit;\n background: transparent;\n border: 0;\n cursor: pointer;\n }\n\n .FeatureComparisonTable__chevron {\n margin-inline: 0;\n }\n\n .FeatureComparisonTable__headingGrid {\n width: 100cqw;\n grid-template-rows: repeat(4, auto);\n }\n\n .FeatureComparisonTable__headingGrid--hasLabel {\n grid-template-rows: repeat(5, auto);\n }\n\n .FeatureComparisonTable--stickyHeaders .FeatureComparisonTable__head {\n position: sticky;\n z-index: 2;\n inset-block-start: 0;\n }\n\n .FeatureComparisonTable__headerCell {\n display: grid;\n grid-row: 1 / span 4;\n grid-template-rows: subgrid;\n padding: 0;\n border-block-start: 0;\n border-block-end: 0;\n }\n\n .FeatureComparisonTable__headerCell--hasLabel {\n grid-row-end: span 5;\n }\n\n .FeatureComparisonTable__tableHeading {\n align-self: end;\n padding: var(--base-size-28);\n }\n\n .FeatureComparisonTable__headerCell:last-child .FeatureComparisonTable__item::before {\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .FeatureComparisonTable__tableHeading--hasLabel {\n position: relative;\n grid-row: 2 / -1;\n align-self: start;\n padding-block: 0;\n inset-block-start: var(--base-size-16);\n }\n\n .FeatureComparisonTable__highlightedColumn {\n background-color: var(--brand-FeatureComparisonTable-highlightedColumn-bgColor);\n }\n\n .FeatureComparisonTable__row:focus-within > {\n background-color: var(--brand-FeatureComparisonTable-rowHighlight-bgColor);\n }\n}\n\n@media (hover: hover) and (pointer: fine) {\n .FeatureComparisonTable__row:hover {\n background-color: var(--brand-FeatureComparisonTable-rowHighlight-bgColor);\n }\n}\n\n@media (hover: hover) and (pointer: fine) and (min-width: 80rem) {\n .FeatureComparisonTable__row:hover > * {\n background-color: var(--brand-FeatureComparisonTable-rowHighlight-bgColor);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .FeatureComparisonTable__row,\n .FeatureComparisonTable__planTerm,\n .FeatureComparisonTable__planValue,\n .FeatureComparisonTable__rowHeaderCell,\n .FeatureComparisonTable__tableCell {\n transition-duration: 0s;\n }\n}\n"],"mappings":""}

package/esm/FeatureComparisonTable/sub-components/FeatureComparisonTableRow.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FeatureComparisonTableRow.d.ts","sourceRoot":"","sources":["../../../src/FeatureComparisonTable/sub-components/FeatureComparisonTableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAA;AAI9D,OAAO,EAAC,KAAK,+BAA+B,EAA2B,MAAM,kCAAkC,CAAA;AAO/G,MAAM,MAAM,8BAA8B,GAAG,iBAAiB,CAAC,+BAA+B,CAAC,cAAc,CAAC,CAAC,CAAA;AAE/G,eAAO,MAAM,yBAAyB,GAAI,yBAAuB,8BAA8B,~~sBAoF9F~~,CAAA"}
1	+ {"version":3,"file":"FeatureComparisonTableRow.d.ts","sourceRoot":"","sources":["../../../src/FeatureComparisonTable/sub-components/FeatureComparisonTableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAA;AAI9D,OAAO,EAAC,KAAK,+BAA+B,EAA2B,MAAM,kCAAkC,CAAA;AAO/G,MAAM,MAAM,8BAA8B,GAAG,iBAAiB,CAAC,+BAA+B,CAAC,cAAc,CAAC,CAAC,CAAA;AAE/G,eAAO,MAAM,yBAAyB,GAAI,yBAAuB,8BAA8B,sBAmF9F,CAAA"}

package/esm/FeatureComparisonTable/sub-components/FeatureComparisonTableRow.js CHANGED Viewed

@@ -28,7 +28,7 @@ var h = ({ children: h, className: g }) => {
 			"data-testid": n.rowHeading,
 			children: C
 		}), _.map((t, n) => /* @__PURE__ */ p("td", {
-			className: e(i.FeatureComparisonTable__tableCell, o(t) && i.FeatureComparisonTable__highlightedColumn, S[n]?.props.variant && i["FeatureComparisonTable__tableCell--hasVariant"]),
+			className: e(i.FeatureComparisonTable__tableCell, o(t) && i.FeatureComparisonTable__highlightedColumn),
 			children: S[n]
 		}, t.key))]
 	}) : /* @__PURE__ */ m("div", {

package/esm/FeatureComparisonTable/sub-components/FeatureComparisonTableRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FeatureComparisonTableRow.js","names":[],"sources":["../../../src/FeatureComparisonTable/sub-components/FeatureComparisonTableRow.tsx"],"sourcesContent":["import React, {type PropsWithChildren, useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {Text} from '../../Text'\nimport styles from '../FeatureComparisonTable.module.css'\nimport {type FeatureComparisonTableBaseProps, useTableContext, testIds} from '../FeatureComparisonTableContext'\nimport {getChildrenOfType, hasItemLabel} from '../FeatureComparisonTableHelpers'\nimport {FeatureComparisonTableRowHeading} from './FeatureComparisonTableRowHeading'\nimport {FeatureComparisonTableRowDescription} from './FeatureComparisonTableRowDescription'\nimport {FeatureComparisonTableCell} from './FeatureComparisonTableCell'\nimport {FeatureComparisonTableItemHeading} from './FeatureComparisonTableItemHeading'\n\nexport type FeatureComparisonTableRowProps = PropsWithChildren<FeatureComparisonTableBaseProps<HTMLDivElement>>\n\nexport const FeatureComparisonTableRow = ({children, className}: FeatureComparisonTableRowProps) => {\n const {items, breakpoint} = useTableContext()\n const rowChildren = React.Children.toArray(children)\n const heading = getChildrenOfType(rowChildren, FeatureComparisonTableRowHeading).at(-1)\n const description = getChildrenOfType(rowChildren, FeatureComparisonTableRowDescription).at(-1)\n const cells = getChildrenOfType(rowChildren, FeatureComparisonTableCell)\n\n useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && cells.length !== items.length) {\n // eslint-disable-next-line no-console\n console.warn(\n `FeatureComparisonTable.Row: expected ${items.length} Cell children to match the number of items, but received ${cells.length}. Missing cells render empty and extra cells are ignored.`,\n )\n }\n }, [cells.length, items.length])\n\n const rowHeading =\n heading && description ? (\n <div className={styles.FeatureComparisonTable__rowHeadingContent}>\n {heading}\n {description}\n </div>\n ) : (\n heading\n )\n\n if (breakpoint === 'wide') {\n return (\n <tr className={clsx(styles.FeatureComparisonTable__row, className)} data-testid={testIds.row}>\n <th className={styles.FeatureComparisonTable__rowHeaderCell} scope=\"row\" data-testid={testIds.rowHeading}>\n {rowHeading}\n </th>\n {items.map((item, index) => (\n <td\n className={clsx(\n styles.FeatureComparisonTable__tableCell,\n hasItemLabel(item) && styles.FeatureComparisonTable__highlightedColumn,\n ~~cells[index]?.props.variant && styles['FeatureComparisonTable__tableCell--hasVariant'],\n~~ )}\n key={item.key}\n >\n {cells[index]}\n </td>\n ))}\n </tr>\n )\n }\n\n return (\n <div className={clsx(styles.FeatureComparisonTable__row, className)} data-testid={testIds.row}>\n <div data-testid={testIds.rowHeading}>{rowHeading}</div>\n <dl className={styles.FeatureComparisonTable__planValues}>\n {items.map((item, index) => {\n const itemHeading = getChildrenOfType(\n React.Children.toArray(item.props.children),\n FeatureComparisonTableItemHeading,\n ).at(-1)\n const hasLabel = hasItemLabel(item)\n return (\n <React.Fragment key={item.key}>\n <dt\n className={clsx(\n styles.FeatureComparisonTable__planTerm,\n hasLabel && styles.FeatureComparisonTable__highlightedColumn,\n )}\n >\n <Text as=\"div\" size=\"200\" variant=\"muted\" className={styles.FeatureComparisonTable__planName}>\n {itemHeading ? itemHeading.props.children : index + 1}\n </Text>\n </dt>\n <dd\n className={clsx(\n styles.FeatureComparisonTable__planValue,\n hasLabel && styles.FeatureComparisonTable__highlightedColumn,\n )}\n >\n {cells[index]}\n </dd>\n </React.Fragment>\n )\n })}\n </dl>\n </div>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAaA,IAAa,KAA6B,EAAC,aAAU,mBAA+C;CAClG,IAAM,EAAC,UAAO,kBAAc,EAAgB,GACtC,IAAc,EAAM,SAAS,QAAQ,CAAQ,GAC7C,IAAU,EAAkB,GAAa,CAAgC,CAAC,CAAC,GAAG,EAAE,GAChF,IAAc,EAAkB,GAAa,CAAoC,CAAC,CAAC,GAAG,EAAE,GACxF,IAAQ,EAAkB,GAAa,CAA0B;CAEvE,QAAgB;EACd,AAAA,QAAA,IAAA,aAA6B,gBAAgB,EAAM,WAAW,EAAM,UAElE,QAAQ,KACN,wCAAwC,EAAM,OAAO,4DAA4D,EAAM,OAAO,0DAChI;CAEJ,GAAG,CAAC,EAAM,QAAQ,EAAM,MAAM,CAAC;CAE/B,IAAM,IACJ,KAAW,IACT,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACG,GACA,CACE;MAEL;~~CAyBJ~~,~~OAtBI~~,MAAe,SAEf,kBAAC,MAAD;EAAI,WAAW,EAAK,EAAO,6BAA6B,CAAS;EAAG,eAAa,EAAQ;YAAzF,CACE,kBAAC,MAAD;GAAI,WAAW,EAAO;GAAuC,OAAM;GAAM,eAAa,EAAQ;aAC3F;EACC,CAAA,GACH,EAAM,KAAK,GAAM,MAChB,kBAAC,MAAD;GACE,WAAW,EACT,EAAO,mCACP,EAAa,CAAI,KAAK,EAAO,~~2CAC7B,EAAM,EAAM,EAAE,MAAM,WAAW,EAAO,gDACxC~~;aAGC,EAAM;EACL,GAHG,EAAK,GAGR,CACL,CACC;MAKN,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,6BAA6B,CAAS;EAAG,eAAa,EAAQ;YAA1F,CACE,kBAAC,OAAD;GAAK,eAAa,EAAQ;aAAa;EAAgB,CAAA,GACvD,kBAAC,MAAD;GAAI,WAAW,EAAO;aACnB,EAAM,KAAK,GAAM,MAAU;IAC1B,IAAM,IAAc,EAClB,EAAM,SAAS,QAAQ,EAAK,MAAM,QAAQ,GAC1C,CACF,CAAC,CAAC,GAAG,EAAE,GACD,IAAW,EAAa,CAAI;IAClC,OACE,kBAAC,EAAM,UAAP,EAAA,UAAA,CACE,kBAAC,MAAD;KACE,WAAW,EACT,EAAO,kCACP,KAAY,EAAO,yCACrB;eAEA,kBAAC,GAAD;MAAM,IAAG;MAAM,MAAK;MAAM,SAAQ;MAAQ,WAAW,EAAO;gBACzD,IAAc,EAAY,MAAM,WAAW,IAAQ;KAChD,CAAA;IACJ,CAAA,GACJ,kBAAC,MAAD;KACE,WAAW,EACT,EAAO,mCACP,KAAY,EAAO,yCACrB;eAEC,EAAM;IACL,CAAA,CACU,EAAA,GAnBK,EAAK,GAmBV;GAEpB,CAAC;EACC,CAAA,CACD;;AAET"}
1	+ {"version":3,"file":"FeatureComparisonTableRow.js","names":[],"sources":["../../../src/FeatureComparisonTable/sub-components/FeatureComparisonTableRow.tsx"],"sourcesContent":["import React, {type PropsWithChildren, useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {Text} from '../../Text'\nimport styles from '../FeatureComparisonTable.module.css'\nimport {type FeatureComparisonTableBaseProps, useTableContext, testIds} from '../FeatureComparisonTableContext'\nimport {getChildrenOfType, hasItemLabel} from '../FeatureComparisonTableHelpers'\nimport {FeatureComparisonTableRowHeading} from './FeatureComparisonTableRowHeading'\nimport {FeatureComparisonTableRowDescription} from './FeatureComparisonTableRowDescription'\nimport {FeatureComparisonTableCell} from './FeatureComparisonTableCell'\nimport {FeatureComparisonTableItemHeading} from './FeatureComparisonTableItemHeading'\n\nexport type FeatureComparisonTableRowProps = PropsWithChildren<FeatureComparisonTableBaseProps<HTMLDivElement>>\n\nexport const FeatureComparisonTableRow = ({children, className}: FeatureComparisonTableRowProps) => {\n const {items, breakpoint} = useTableContext()\n const rowChildren = React.Children.toArray(children)\n const heading = getChildrenOfType(rowChildren, FeatureComparisonTableRowHeading).at(-1)\n const description = getChildrenOfType(rowChildren, FeatureComparisonTableRowDescription).at(-1)\n const cells = getChildrenOfType(rowChildren, FeatureComparisonTableCell)\n\n useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && cells.length !== items.length) {\n // eslint-disable-next-line no-console\n console.warn(\n `FeatureComparisonTable.Row: expected ${items.length} Cell children to match the number of items, but received ${cells.length}. Missing cells render empty and extra cells are ignored.`,\n )\n }\n }, [cells.length, items.length])\n\n const rowHeading =\n heading && description ? (\n <div className={styles.FeatureComparisonTable__rowHeadingContent}>\n {heading}\n {description}\n </div>\n ) : (\n heading\n )\n\n if (breakpoint === 'wide') {\n return (\n <tr className={clsx(styles.FeatureComparisonTable__row, className)} data-testid={testIds.row}>\n <th className={styles.FeatureComparisonTable__rowHeaderCell} scope=\"row\" data-testid={testIds.rowHeading}>\n {rowHeading}\n </th>\n {items.map((item, index) => (\n <td\n className={clsx(\n styles.FeatureComparisonTable__tableCell,\n hasItemLabel(item) && styles.FeatureComparisonTable__highlightedColumn,\n )}\n key={item.key}\n >\n {cells[index]}\n </td>\n ))}\n </tr>\n )\n }\n\n return (\n <div className={clsx(styles.FeatureComparisonTable__row, className)} data-testid={testIds.row}>\n <div data-testid={testIds.rowHeading}>{rowHeading}</div>\n <dl className={styles.FeatureComparisonTable__planValues}>\n {items.map((item, index) => {\n const itemHeading = getChildrenOfType(\n React.Children.toArray(item.props.children),\n FeatureComparisonTableItemHeading,\n ).at(-1)\n const hasLabel = hasItemLabel(item)\n return (\n <React.Fragment key={item.key}>\n <dt\n className={clsx(\n styles.FeatureComparisonTable__planTerm,\n hasLabel && styles.FeatureComparisonTable__highlightedColumn,\n )}\n >\n <Text as=\"div\" size=\"200\" variant=\"muted\" className={styles.FeatureComparisonTable__planName}>\n {itemHeading ? itemHeading.props.children : index + 1}\n </Text>\n </dt>\n <dd\n className={clsx(\n styles.FeatureComparisonTable__planValue,\n hasLabel && styles.FeatureComparisonTable__highlightedColumn,\n )}\n >\n {cells[index]}\n </dd>\n </React.Fragment>\n )\n })}\n </dl>\n </div>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAaA,IAAa,KAA6B,EAAC,aAAU,mBAA+C;CAClG,IAAM,EAAC,UAAO,kBAAc,EAAgB,GACtC,IAAc,EAAM,SAAS,QAAQ,CAAQ,GAC7C,IAAU,EAAkB,GAAa,CAAgC,CAAC,CAAC,GAAG,EAAE,GAChF,IAAc,EAAkB,GAAa,CAAoC,CAAC,CAAC,GAAG,EAAE,GACxF,IAAQ,EAAkB,GAAa,CAA0B;CAEvE,QAAgB;EACd,AAAA,QAAA,IAAA,aAA6B,gBAAgB,EAAM,WAAW,EAAM,UAElE,QAAQ,KACN,wCAAwC,EAAM,OAAO,4DAA4D,EAAM,OAAO,0DAChI;CAEJ,GAAG,CAAC,EAAM,QAAQ,EAAM,MAAM,CAAC;CAE/B,IAAM,IACJ,KAAW,IACT,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACG,GACA,CACE;MAEL;CAwBJ,OArBI,MAAe,SAEf,kBAAC,MAAD;EAAI,WAAW,EAAK,EAAO,6BAA6B,CAAS;EAAG,eAAa,EAAQ;YAAzF,CACE,kBAAC,MAAD;GAAI,WAAW,EAAO;GAAuC,OAAM;GAAM,eAAa,EAAQ;aAC3F;EACC,CAAA,GACH,EAAM,KAAK,GAAM,MAChB,kBAAC,MAAD;GACE,WAAW,EACT,EAAO,mCACP,EAAa,CAAI,KAAK,EAAO,yCAC/B;aAGC,EAAM;EACL,GAHG,EAAK,GAGR,CACL,CACC;MAKN,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,6BAA6B,CAAS;EAAG,eAAa,EAAQ;YAA1F,CACE,kBAAC,OAAD;GAAK,eAAa,EAAQ;aAAa;EAAgB,CAAA,GACvD,kBAAC,MAAD;GAAI,WAAW,EAAO;aACnB,EAAM,KAAK,GAAM,MAAU;IAC1B,IAAM,IAAc,EAClB,EAAM,SAAS,QAAQ,EAAK,MAAM,QAAQ,GAC1C,CACF,CAAC,CAAC,GAAG,EAAE,GACD,IAAW,EAAa,CAAI;IAClC,OACE,kBAAC,EAAM,UAAP,EAAA,UAAA,CACE,kBAAC,MAAD;KACE,WAAW,EACT,EAAO,kCACP,KAAY,EAAO,yCACrB;eAEA,kBAAC,GAAD;MAAM,IAAG;MAAM,MAAK;MAAM,SAAQ;MAAQ,WAAW,EAAO;gBACzD,IAAc,EAAY,MAAM,WAAW,IAAQ;KAChD,CAAA;IACJ,CAAA,GACJ,kBAAC,MAAD;KACE,WAAW,EACT,EAAO,mCACP,KAAY,EAAO,yCACrB;eAEC,EAAM;IACL,CAAA,CACU,EAAA,GAnBK,EAAK,GAmBV;GAEpB,CAAC;EACC,CAAA,CACD;;AAET"}

package/esm/FrostedGlassVFX/FrostedGlassVFX.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/colors-with-modes-CMw13Yda.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/base-BlFewKzM.css';/* empty css                                                                                                  */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/colors-with-modes-fV7rwA0l.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/base-BlFewKzM.css';/* empty css                                                                                                  */
 /* empty css                                                                                                               */
 import t from "./FrostedGlassVFX.module.js";
 import "react";

package/esm/Grid/Grid.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/grid/colors-with-modes-6QocK2fy.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/grid/grid-Cjk6fsH8.css';/* empty css                                                                                     */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/grid/colors-with-modes-Chf_t26p.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/grid/grid-Cjk6fsH8.css';/* empty css                                                                                     */
 /* empty css                                                                                                  */
 import t from "./Grid.module.js";
 import { useId as n } from "../hooks/useId.js";