npm - @primer/react-brand - Versions diffs - 0.72.0-rc.f8b72452 → 0.72.1-rc.72b4db43 - Mend

@primer/react-brand 0.72.0-rc.f8b72452 → 0.72.1-rc.72b4db43

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 (518) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PricingOptions.module.js","names":[],"sources":["../../src/PricingOptions/PricingOptions.module.css"],"sourcesContent":["/* ---------------------------------------------------------- /\n/ Container /\n/ ---------------------------------------------------------- /\n\n.PricingOptions {\n --brand-pricing-options-item-gap: var(--brand-PricingOptions-items-gap);\n --brand-pricing-options-container-padding-inline: 0;\n --brand-pricing-options-column-count: 1;\n\n / prettier-ignore /\n --brand-pricing-options-template-areas: \n 'labels'\n 'leadingComponent'\n 'header'\n 'description'\n 'price'\n 'actions'\n 'feature-list'\n 'footnote'\n ;\n\n display: grid;\n row-gap: var(--brand-pricing-options-item-gap, 0);\n padding-inline: var(--brand-pricing-options-container-padding-inline);\n}\n\n@media screen and (max-width: 63.24rem) {\n .PricingOptions {\n margin-inline: auto;\n max-width: 488px;\n }\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions {\n grid-template-areas: var(--brand-pricing-options-template-areas);\n grid-template-columns: repeat(var(--brand-pricing-options-column-count), minmax(0, 1fr));\n column-gap: var(--brand-pricing-options-item-gap, 0);\n row-gap: 0;\n }\n\n .PricingOptions--items1 {\n --brand-pricing-options-column-count: 1;\n }\n\n .PricingOptions--items2 {\n --brand-pricing-options-column-count: 2;\n }\n\n .PricingOptions--items3 {\n --brand-pricing-options-column-count: 3;\n }\n\n .PricingOptions--items4 {\n --brand-pricing-options-column-count: 4;\n }\n}\n\n.PricingOptions__labels {\n display: none;\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions__labels {\n --brand-pricing-options-column-count: 1;\n\n display: grid;\n grid-column: 1 / -1;\n grid-row: labels;\n grid-template-columns: repeat(var(--brand-pricing-options-column-count), minmax(0, 1fr));\n column-gap: var(--brand-pricing-options-item-gap, 0);\n }\n\n .PricingOptions__label-cell {\n position: relative;\n display: flex;\n align-items: center;\n min-height: var(--base-size-54);\n padding-block: var(--base-size-16);\n background-color: var(--brand-PricingOptions-item-bgColor-solid);\n }\n\n / Accent top border — uses ::after so it can overflow into the column gap /\n .PricingOptions__label-cell--has-label::after {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: calc(var(--brand-pricing-options-item-gap, 0px) / 2 -1);\n inset-inline-end: calc(var(--brand-pricing-options-item-gap, 0px) / 2 * -1);\n height: var(--brand-borderWidth-thin);\n background-color: var(--brand-color-text-emphasized);\n z-index: 1;\n }\n\n /* First cell: don't overflow past container start (cards override below) /\n .PricingOptions__label-cell--has-label:first-child::after {\n inset-inline-start: 0;\n }\n\n / Last cell: don't overflow past container end (cards override below) /\n .PricingOptions__label-cell--has-label:last-child::after {\n inset-inline-end: 0;\n }\n\n .PricingOptions--layout-default .PricingOptions__label-cell--has-label::after {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n\n / ---- Default layout labels ---- /\n\n / Continuous bottom border across entire labels row — uses ::after to extend into container padding /\n .PricingOptions--layout-default .PricingOptions__labels {\n position: relative;\n }\n\n .PricingOptions--layout-default .PricingOptions__labels::after {\n content: '';\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: calc(var(--brand-pricing-options-container-padding-inline, 0px) -1);\n inset-inline-end: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);\n height: var(--brand-borderWidth-thin);\n background-color: var(--brand-color-border-subtle);\n }\n\n .PricingOptions--layout-default .PricingOptions__label-cell {\n margin-inline: calc(var(--brand-pricing-options-item-gap) / 2 * -1);\n padding-inline: calc(var(--brand-pricing-options-item-gap) / 2);\n }\n\n .PricingOptions--layout-default .PricingOptions__label-cell:first-child {\n margin-inline-start: calc(var(--brand-pricing-options-container-padding-inline) * -1);\n padding-inline-start: var(--brand-pricing-options-container-padding-inline);\n }\n\n .PricingOptions--layout-default .PricingOptions__label-cell:last-child {\n margin-inline-end: calc(var(--brand-pricing-options-container-padding-inline) * -1);\n padding-inline-end: var(--brand-pricing-options-container-padding-inline);\n }\n\n /* Empty cells: transparent bg/borders but structurally visible so dividers show /\n .PricingOptions--layout-default .PricingOptions__label-cell--empty {\n background-color: transparent;\n border-block-start-color: transparent;\n }\n\n / Vertical dividers between label cells, centered in the gap /\n .PricingOptions--layout-default .PricingOptions__label-cell + .PricingOptions__label-cell::before {\n content: '';\n position: absolute;\n inset-block: 0;\n width: var(--brand-borderWidth-thin);\n inset-inline-start: 0;\n background-color: var(--brand-color-border-subtle);\n }\n\n .PricingOptions--layout-default.PricingOptions--appearance-gradient\n .PricingOptions__label-cell\n + .PricingOptions__label-cell::before {\n mask-image: var(--brand-PricingOptions-borderMask);\n }\n\n / ---- Cards layout labels ---- /\n\n .PricingOptions--layout-cards .PricingOptions__label-cell {\n padding-inline: var(--base-size-28);\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n / border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted); /\n }\n\n .PricingOptions--layout-cards .PricingOptions__label-cell--empty {\n opacity: 0;\n pointer-events: none;\n }\n\n / Cards: keep accent border inside the card boundary /\n .PricingOptions--layout-cards .PricingOptions__label-cell--has-label::after {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n}\n\n/ ---------------------------------------------------------- /\n/ Layout: default /\n/ ---------------------------------------------------------- /\n\n.PricingOptions--layout-default {\n position: relative;\n}\n\n.PricingOptions--layout-default.PricingOptions--appearance-solid {\n border: solid 1px var(--brand-color-border-subtle);\n background-color: var(--brand-PricingOptions-item-bgColor-solid);\n}\n\n.PricingOptions--layout-default.PricingOptions--appearance-gradient,\n.PricingOptions--layout-cards.PricingOptions--appearance-gradient .PricingOptions__item {\n background: linear-gradient(\n 180deg,\n var(--brand-PricingOptions-item-bgColor-gradient-start) 0%,\n var(--brand-PricingOptions-item-bgColor-gradient-end) 100%\n );\n}\n\n.PricingOptions--layout-default.PricingOptions--appearance-gradient::before,\n.PricingOptions--layout-cards.PricingOptions--appearance-gradient .PricingOptions__item::before {\n position: absolute;\n content: '';\n inset: 0;\n pointer-events: none;\n border-radius: inherit;\n mask-image: var(--brand-PricingOptions-borderMask);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions--layout-default {\n padding-inline: var(--brand-pricing-options-container-padding-inline);\n }\n}\n\n.PricingOptions--layout-default .PricingOptions__item {\n --brand-pricing-options-item-padding-inline: var(--base-size-24);\n\n position: relative; / Used for positioning the divider between items /\n padding-inline: var(--base-size-24);\n padding-block: var(--base-size-20);\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions--layout-default .PricingOptions__item {\n --brand-pricing-options-item-padding-inline: 0;\n\n padding-inline: 0;\n padding-block: var(--base-size-40);\n }\n}\n\n/ Horizontal divider between items on small viewports /\n.PricingOptions--layout-default .PricingOptions__item + .PricingOptions__item::before {\n content: '';\n position: absolute;\n inset-inline: 0;\n height: 1px;\n background-color: var(--brand-color-border-subtle);\n}\n\n/ Vertical divider between items on larger viewports /\n@media (min-width: 63.25rem) {\n .PricingOptions--layout-default .PricingOptions__item + .PricingOptions__item::before {\n inset-inline: 0;\n inset-block: 0;\n width: 1px;\n height: auto;\n margin-block-start: 0;\n margin-inline-start: calc(var(--brand-pricing-options-item-gap) / 2 -1);\n }\n\n .PricingOptions--layout-default.PricingOptions--appearance-gradient\n .PricingOptions__item\n + .PricingOptions__item::before {\n mask-image: var(--brand-PricingOptions-borderMask);\n }\n}\n\n/* ---------------------------------------------------------- /\n/ Layout: cards /\n/ ---------------------------------------------------------- /\n\n.PricingOptions--layout-cards .PricingOptions__item {\n --brand-pricing-options-item-padding-inline: var(--base-size-32);\n\n position: relative;\n padding-inline: var(--base-size-32);\n padding-block: var(--base-size-32);\n}\n\n.PricingOptions--layout-cards.PricingOptions--appearance-solid .PricingOptions__item {\n background-color: var(--brand-PricingOptions-item-bgColor-solid);\n border: solid var(--brand-borderWidth-thin) var(--brand-color-border-subtle);\n}\n\n/ ---------------------------------------------------------- /\n/ Items /\n/ ---------------------------------------------------------- /\n\n@media (min-width: 48rem) {\n :where(.PricingOptions--layout-cards.PricingOptions--items4) {\n row-gap: var(--brand-pricing-options-item-gap);\n }\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions--items1 {\n width: 50%;\n margin-inline: auto;\n }\n\n .PricingOptions--layout-default.PricingOptions--items1 {\n --brand-pricing-options-container-padding-inline: var(--brand-PricingOptions-items1-container-paddingInline);\n }\n\n .PricingOptions--layout-default.PricingOptions--items2 {\n --brand-pricing-options-item-gap: var(--brand-PricingOptions-items2-gap);\n --brand-pricing-options-container-padding-inline: var(--brand-PricingOptions-items2-container-padding-inline);\n }\n\n .PricingOptions--layout-default.PricingOptions--items3 {\n --brand-pricing-options-item-gap: var(--brand-PricingOptions-items3-gap);\n --brand-pricing-options-container-padding-inline: var(--brand-PricingOptions-items3-container-padding-inline);\n }\n .PricingOptions--layout-default.PricingOptions--items4 {\n --brand-pricing-options-item-gap: var(--brand-PricingOptions-items4-gap);\n --brand-pricing-options-container-padding-inline: var(--brand-PricingOptions-items4-container-padding-inline);\n }\n}\n\n/ ---------------------------------------------------------- /\n/ Item inner layout /\n/ ---------------------------------------------------------- /\n\n.PricingOptions__item {\n display: grid;\n grid-template-areas: var(--brand-pricing-options-template-areas);\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions__item {\n grid-row: header / footnote;\n grid-template-rows: subgrid;\n }\n\n .PricingOptions__item--has-leading-component {\n grid-row: leadingComponent / footnote;\n }\n}\n\n.PricingOptions__item--align-center {\n justify-items: center;\n}\n\n.PricingOptions__item--align-center .PricingOptions__price,\n.PricingOptions__item--align-center .PricingOptions__description {\n text-align: center;\n justify-content: center;\n}\n\n/\n * Backwards compatibility for browsers that don't support subgrid.\n * Once subgrid is supported in the last 3 major versions of Safari (i.e., when Safari 18 is released), it can be fully removed.\n * https://caniuse.com/css-subgrid\n /\n@supports not (grid-template-rows: subgrid) {\n @media (min-width: 63.28rem) {\n .PricingOptions__item {\n grid-template-areas: var(--brand-pricing-options-template-areas);\n grid-template-columns: 1fr;\n grid-template-rows: auto;\n }\n }\n}\n\n/ ---------------------------------------------------------- /\n/ Content /\n/ ---------------------------------------------------------- /\n\n.PricingOptions__header {\n display: flex;\n grid-area: header;\n row-gap: var(--base-size-16);\n}\n\n/ When item is left-aligned, keep the heading at the start of the card /\n.PricingOptions__item:not(.PricingOptions__item--align-center) .PricingOptions__header {\n align-items: center;\n margin-block-end: var(--base-size-16);\n}\n\n.PricingOptions__item:not(.PricingOptions__item--align-center) .PricingOptions__heading {\n margin-block: var(--base-size-16);\n flex: 0 1 auto;\n order: 1;\n align-self: flex-start;\n}\n\n@media (min-width: 63.24rem) {\n .PricingOptions__item:not(.PricingOptions__item--align-center) .PricingOptions__heading {\n margin-block: 0;\n }\n}\n\n/ When item is centered, center the heading /\n.PricingOptions__item--align-center .PricingOptions__header {\n justify-content: center;\n}\n\n.PricingOptions__item--align-center .PricingOptions__heading {\n margin-block-start: 0;\n margin-block-end: var(--base-size-16);\n text-align: center;\n}\n\n.PricingOptions__leading-component {\n grid-row: leadingComponent;\n}\n\n.PricingOptions__label {\n color: var(--brand-color-text-default);\n font-family: var(--brand-fontStack-monospace);\n font-size: var(--brand-text-size-100);\n font-weight: var(--brand-text-weight-500);\n letter-spacing: var(--brand-text-letterSpacing-100);\n line-height: var(--brand-text-lineHeight-200);\n text-transform: uppercase;\n}\n\n.PricingOptions__heading {\n margin-block: var(--base-size-16);\n flex: 0 1 auto; / Minimum width before wrapping /\n order: 1;\n align-self: flex-start;\n}\n\n.PricingOptions__description {\n grid-row: description;\n}\n\n.PricingOptions__price {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n grid-row: price;\n padding-block-start: var(--base-size-20);\n padding-block-end: var(--base-size-8);\n}\n\n@media (max-width: 63.25rem) {\n .PricingOptions__price-value,\n .PricingOptions__price-currency-symbol {\n font-size: var(--brand-text-size-900);\n }\n}\n\n.PricingOptions__price-amount {\n display: flex;\n align-items: flex-end;\n}\n\n.PricingOptions__price-currency-code {\n margin-inline-start: var(--base-size-4);\n margin-block-end: var(--base-size-4);\n color: var(--brand-color-text-muted);\n}\n\n.PricingOptions__price-original-price {\n display: inline-flex;\n align-self: center;\n text-decoration: none;\n margin-inline-start: var(--base-size-8);\n}\n\n.PricingOptions__price-original-price-value {\n text-decoration: line-through;\n}\n\n.PricingOptions__price-trailing-text {\n flex: 1 0 100%;\n display: block;\n}\n\n.PricingOptions__actions {\n grid-row: actions;\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n align-items: flex-end;\n padding-block-start: var(--base-size-20);\n}\n\n.PricingOptions__actions-message {\n display: flex;\n gap: var(--base-size-12);\n align-items: flex-start;\n inline-size: 100%;\n max-inline-size: 100%;\n padding: var(--base-size-12);\n border-block: var(--brand-borderWidth-thin) solid var(--brand-PricingOptions-actionsMessage-borderColor);\n border-inline: 0;\n border-radius: 0;\n background-color: var(--brand-PricingOptions-actionsMessage-bgColor);\n}\n\n.PricingOptions__actions-message-leading-component {\n flex: 0 0 auto;\n display: flex;\n margin-block-start: var(--base-size-4);\n color: var(--brand-PricingOptions-actionsMessage-accentColor);\n}\n\n.PricingOptions__actions-message-leading-component :where(svg) {\n display: block;\n inline-size: var(--base-size-16);\n block-size: var(--base-size-16);\n}\n\n.PricingOptions__actions-message-content {\n flex: 1 1 auto;\n min-inline-size: 0;\n}\n\n.PricingOptions__actions-message-content :where(p) {\n margin: 0;\n}\n\n/ MenuAction: full-width ActionMenu wrapper /\n.PricingOptions__menu-action {\n width: 100%;\n}\n\n.PricingOptions__menu-action > {\n width: 100%;\n}\n\n/* Force ActionMenu button container to stretch full width /\n.PricingOptions__menu-action > > * {\n display: flex;\n width: 100%;\n}\n\n/* Make the primary button fill remaining space next to the chevron /\n.PricingOptions__menu-action > > * > :first-child {\n flex: 1;\n}\n\n.PricingOptions__footnote {\n grid-row: footnote;\n display: block;\n margin-block-start: var(--base-size-8);\n}\n\n/* ---------------------------------------------------------- /\n/ Feature list /\n/ ---------------------------------------------------------- /\n\n.PricingOptions__feature-list {\n --feature-list-font-size: var(--brand-text-size-200);\n --feature-list-line-height: var(--brand-text-lineHeight-200);\n\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n grid-row: feature-list;\n margin-block-start: var(--base-size-20);\n padding-block-start: var(--base-size-20);\n width: 100%;\n}\n\n.PricingOptions__feature-list--has-divider {\n position: relative;\n margin: 0;\n margin-block-start: var(--base-size-20);\n padding-block-start: var(--base-size-40);\n padding-inline: 0;\n}\n\n/ Edge-to-edge divider above feature list /\n.PricingOptions__feature-list--has-divider::before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: calc(var(--brand-pricing-options-item-padding-inline, 0px) -1);\n inset-inline-end: calc(var(--brand-pricing-options-item-padding-inline, 0px) * -1);\n height: var(--brand-borderWidth-thin);\n background-color: var(--brand-color-border-subtle);\n}\n\n/* Default layout: extend feature list divider into column gap /\n@media (min-width: 63.25rem) {\n .PricingOptions--layout-default .PricingOptions__feature-list--has-divider::before {\n inset-inline-start: calc(var(--brand-pricing-options-item-gap, 0px) / 2 -1);\n inset-inline-end: calc(var(--brand-pricing-options-item-gap, 0px) / 2 * -1);\n }\n\n /* First item: don't overflow past container start /\n .PricingOptions--layout-default .PricingOptions__item:first-child .PricingOptions__feature-list--has-divider::before,\n .PricingOptions--layout-default\n .PricingOptions__labels\n + .PricingOptions__item\n .PricingOptions__feature-list--has-divider::before {\n inset-inline-start: calc(var(--brand-pricing-options-container-padding-inline, 0px) -1);\n }\n\n /* Last item: don't overflow past container end /\n .PricingOptions--layout-default .PricingOptions__item:last-child .PricingOptions__feature-list--has-divider::before {\n inset-inline-end: calc(var(--brand-pricing-options-container-padding-inline, 0px) -1);\n }\n\n .PricingOptions--layout-default.PricingOptions--appearance-gradient\n .PricingOptions__feature-list--has-divider::before {\n mask-image: var(--brand-PricingOptions-borderMask);\n }\n}\n\n.PricingOptions__feature-list-set:nth-child(n + 2) {\n margin-block-start: var(--base-size-20);\n}\n\n.PricingOptions__feature-list-group-heading {\n color: var(--brand-PricingOptions-featureList-group-heading-color);\n margin-block-start: var(--base-size-12);\n margin-block-end: var(--base-size-8);\n}\n\n.PricingOptions__feature-list-item--excluded span {\n color: var(--brand-color-text-muted);\n}\n\n/* Info tooltip button /\n.PricingOptions__feature-list-item--has-info {\n flex-wrap: nowrap;\n}\n\n.PricingOptions__feature-list-item--has-info > span {\n flex: 1;\n display: inline-flex;\n align-items: baseline;\n justify-content: space-between;\n}\n\n.PricingOptions__feature-list-item-info {\n all: unset;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n cursor: pointer;\n color: var(--brand-color-text-muted);\n background-color: color-mix(in srgb, var(--brand-color-canvas-invert) 12%, transparent);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-radius: 50%;\n margin-inline-start: var(--base-size-8);\n vertical-align: middle;\n padding: var(--base-size-4);\n}\n\n.PricingOptions__feature-list-item-info svg {\n width: var(--base-size-12);\n height: var(--base-size-12);\n}\n\n.PricingOptions__feature-list-item-info:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: 2px;\n}\n\n.PricingOptions__feature-list + .PricingOptions__feature-list-group-heading {\n margin-block-start: var(--base-size-20);\n}\n\n.PricingOptions__feature-list-item,\n.PricingOptions__feature-list-item span {\n font-size: var(--feature-list-font-size) !important;\n line-height: var(--feature-list-line-height) !important;\n}\n\n.PricingOptions__feature-list-group-heading {\n font-size: var(--feature-list-font-size) !important;\n}\n\n.PricingOptions--items4 .PricingOptions__feature-list {\n --feature-list-font-size: var(--brand-text-size-100);\n --feature-list-line-height: var(--brand-text-lineHeight-100);\n}\n\n/\n * Accordion component overrides\n /\n\n/ paddings and borders /\n.PricingOptions__feature-list-accordion {\n border: 0;\n padding: 0;\n}\n\n/ Remove hover effect /\n.PricingOptions__feature-list-accordion::after {\n content: none !important;\n}\n\n/ Adjust heading spacing /\n.PricingOptions__feature-list-accordion-heading {\n padding: var(--base-size-8) 0;\n padding-inline-start: 0 !important; / Fixes dotcom specificity issue /\n padding-inline-end: 0 !important;\n margin-block-start: calc(var(--base-size-16) -1);\n margin-block-end: var(--base-size-8);\n}\n\n/* Accordion heading styling /\n.PricingOptions__feature-list-accordion .PricingOptions__feature-list-accordion-heading :is(h1, h2, h3, h4, h5, h6) {\n font-size: var(--feature-list-font-size);\n line-height: var(--feature-list-line-height);\n font-weight: var(--brand-text-subhead-weight-large);\n gap: var(--base-size-8);\n align-items: center;\n justify-content: space-between;\n display: flex;\n width: 100%;\n}\n\n/ Hide default icon /\n.PricingOptions__feature-list-accordion .PricingOptions__feature-list-accordion-heading span {\n display: none;\n}\n\n/ Adjust content paddings /\n.PricingOptions__feature-list-accordion .PricingOptions__feature-list-accordion-content {\n padding: 0;\n padding-block-start: var(--base-size-8);\n padding-inline-start: 0 !important;\n}\n\n.PricingOptions__feature-list-accordion-chevron {\n margin-inline-end: var(--base-size-4);\n}\n\n/ Chevron up icon */\n.PricingOptions__feature-list-accordion[open] .PricingOptions__feature-list-accordion-chevron {\n transform: rotate(180deg);\n}\n\n.PricingOptions__feature-list-accordion-content {\n animation: none !important;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"PricingOptions.module.js","names":[],"sources":["../../src/PricingOptions/PricingOptions.module.css"],"sourcesContent":["/* ---------------------------------------------------------- /\n/ Container /\n/ ---------------------------------------------------------- /\n\n.PricingOptions {\n --brand-pricing-options-item-gap: var(--brand-PricingOptions-items-gap);\n --brand-pricing-options-container-padding-inline: 0;\n --brand-pricing-options-column-count: 1;\n\n / prettier-ignore /\n --brand-pricing-options-template-areas: \n 'labels'\n 'leadingComponent'\n 'header'\n 'description'\n 'price'\n 'actions'\n 'feature-list'\n 'footnote'\n ;\n\n display: grid;\n row-gap: var(--brand-pricing-options-item-gap, 0);\n padding-inline: var(--brand-pricing-options-container-padding-inline);\n}\n\n@media screen and (max-width: 63.24rem) {\n .PricingOptions {\n margin-inline: auto;\n max-width: 488px;\n }\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions {\n grid-template-areas: var(--brand-pricing-options-template-areas);\n grid-template-columns: repeat(var(--brand-pricing-options-column-count), minmax(0, 1fr));\n column-gap: var(--brand-pricing-options-item-gap, 0);\n row-gap: 0;\n }\n\n .PricingOptions--items1 {\n --brand-pricing-options-column-count: 1;\n }\n\n .PricingOptions--items2 {\n --brand-pricing-options-column-count: 2;\n }\n\n .PricingOptions--items3 {\n --brand-pricing-options-column-count: 3;\n }\n\n .PricingOptions--items4 {\n --brand-pricing-options-column-count: 4;\n }\n}\n\n.PricingOptions__labels {\n display: none;\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions__labels {\n --brand-pricing-options-column-count: 1;\n\n display: grid;\n grid-column: 1 / -1;\n grid-row: labels;\n grid-template-columns: repeat(var(--brand-pricing-options-column-count), minmax(0, 1fr));\n column-gap: var(--brand-pricing-options-item-gap, 0);\n }\n\n .PricingOptions__label-cell {\n position: relative;\n display: flex;\n align-items: center;\n min-height: var(--base-size-54);\n padding-block: var(--base-size-16);\n background-color: var(--brand-PricingOptions-item-bgColor-solid);\n }\n\n / Accent top border — uses ::after so it can overflow into the column gap /\n .PricingOptions__label-cell--has-label::after {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: calc(var(--brand-pricing-options-item-gap, 0px) / 2 -1);\n inset-inline-end: calc(var(--brand-pricing-options-item-gap, 0px) / 2 * -1);\n height: var(--brand-borderWidth-thin);\n background-color: var(--brand-color-text-emphasized);\n z-index: 1;\n }\n\n /* First cell: don't overflow past container start (cards override below) /\n .PricingOptions__label-cell--has-label:first-child::after {\n inset-inline-start: 0;\n }\n\n / Last cell: don't overflow past container end (cards override below) /\n .PricingOptions__label-cell--has-label:last-child::after {\n inset-inline-end: 0;\n }\n\n .PricingOptions--layout-default .PricingOptions__label-cell--has-label::after {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n\n / ---- Default layout labels ---- /\n\n / Continuous bottom border across entire labels row — uses ::after to extend into container padding /\n .PricingOptions--layout-default .PricingOptions__labels {\n position: relative;\n }\n\n .PricingOptions--layout-default .PricingOptions__labels::after {\n content: '';\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: calc(var(--brand-pricing-options-container-padding-inline, 0px) -1);\n inset-inline-end: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);\n height: var(--brand-borderWidth-thin);\n background-color: var(--brand-color-border-subtle);\n }\n\n .PricingOptions--layout-default .PricingOptions__label-cell {\n margin-inline: calc(var(--brand-pricing-options-item-gap) / 2 * -1);\n padding-inline: calc(var(--brand-pricing-options-item-gap) / 2);\n }\n\n .PricingOptions--layout-default .PricingOptions__label-cell:first-child {\n margin-inline-start: calc(var(--brand-pricing-options-container-padding-inline) * -1);\n padding-inline-start: var(--brand-pricing-options-container-padding-inline);\n }\n\n .PricingOptions--layout-default .PricingOptions__label-cell:last-child {\n margin-inline-end: calc(var(--brand-pricing-options-container-padding-inline) * -1);\n padding-inline-end: var(--brand-pricing-options-container-padding-inline);\n }\n\n /* Empty cells: transparent bg/borders but structurally visible so dividers show /\n .PricingOptions--layout-default .PricingOptions__label-cell--empty {\n background-color: transparent;\n border-block-start-color: transparent;\n }\n\n / Vertical dividers between label cells, centered in the gap /\n .PricingOptions--layout-default .PricingOptions__label-cell + .PricingOptions__label-cell::before {\n content: '';\n position: absolute;\n inset-block: 0;\n width: var(--brand-borderWidth-thin);\n inset-inline-start: 0;\n background-color: var(--brand-color-border-subtle);\n }\n\n .PricingOptions--layout-default.PricingOptions--appearance-gradient\n .PricingOptions__label-cell\n + .PricingOptions__label-cell::before {\n mask-image: var(--brand-PricingOptions-borderMask);\n }\n\n / ---- Cards layout labels ---- /\n\n .PricingOptions--layout-cards .PricingOptions__label-cell {\n padding-inline: var(--base-size-28);\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n / border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted); /\n }\n\n .PricingOptions--layout-cards .PricingOptions__label-cell--empty {\n opacity: 0;\n pointer-events: none;\n }\n\n / Cards: keep accent border inside the card boundary /\n .PricingOptions--layout-cards .PricingOptions__label-cell--has-label::after {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n}\n\n/ ---------------------------------------------------------- /\n/ Layout: default /\n/ ---------------------------------------------------------- /\n\n.PricingOptions--layout-default {\n position: relative;\n}\n\n.PricingOptions--layout-default.PricingOptions--appearance-solid {\n border: solid 1px var(--brand-color-border-subtle);\n background-color: var(--brand-PricingOptions-item-bgColor-solid);\n}\n\n.PricingOptions--layout-default.PricingOptions--appearance-gradient,\n.PricingOptions--layout-cards.PricingOptions--appearance-gradient .PricingOptions__item {\n background: linear-gradient(\n 180deg,\n var(--brand-PricingOptions-item-bgColor-gradient-start) 0%,\n var(--brand-PricingOptions-item-bgColor-gradient-end) 100%\n );\n}\n\n.PricingOptions--layout-default.PricingOptions--appearance-gradient::before,\n.PricingOptions--layout-cards.PricingOptions--appearance-gradient .PricingOptions__item::before {\n position: absolute;\n content: '';\n inset: 0;\n pointer-events: none;\n border-radius: inherit;\n mask-image: var(--brand-PricingOptions-borderMask);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions--layout-default {\n padding-inline: var(--brand-pricing-options-container-padding-inline);\n }\n}\n\n.PricingOptions--layout-default .PricingOptions__item {\n --brand-pricing-options-item-padding-inline: var(--base-size-24);\n\n position: relative; / Used for positioning the divider between items /\n padding-inline: var(--base-size-24);\n padding-block: var(--base-size-20);\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions--layout-default .PricingOptions__item {\n --brand-pricing-options-item-padding-inline: 0;\n\n padding-inline: 0;\n padding-block: var(--base-size-40);\n }\n}\n\n/ Horizontal divider between items on small viewports /\n.PricingOptions--layout-default .PricingOptions__item + .PricingOptions__item::before {\n content: '';\n position: absolute;\n inset-inline: 0;\n height: 1px;\n background-color: var(--brand-color-border-subtle);\n}\n\n/ Vertical divider between items on larger viewports /\n@media (min-width: 63.25rem) {\n .PricingOptions--layout-default .PricingOptions__item + .PricingOptions__item::before {\n inset-inline: 0;\n inset-block: 0;\n width: 1px;\n height: auto;\n margin-block-start: 0;\n margin-inline-start: calc(var(--brand-pricing-options-item-gap) / 2 -1);\n }\n\n .PricingOptions--layout-default.PricingOptions--appearance-gradient\n .PricingOptions__item\n + .PricingOptions__item::before {\n mask-image: var(--brand-PricingOptions-borderMask);\n }\n}\n\n/* ---------------------------------------------------------- /\n/ Layout: cards /\n/ ---------------------------------------------------------- /\n\n.PricingOptions--layout-cards .PricingOptions__item {\n --brand-pricing-options-item-padding-inline: var(--base-size-32);\n\n position: relative;\n padding-inline: var(--base-size-32);\n padding-block: var(--base-size-32);\n}\n\n.PricingOptions--layout-cards.PricingOptions--appearance-solid .PricingOptions__item {\n background-color: var(--brand-PricingOptions-item-bgColor-solid);\n border: solid var(--brand-borderWidth-thin) var(--brand-color-border-subtle);\n}\n\n/ ---------------------------------------------------------- /\n/ Items /\n/ ---------------------------------------------------------- /\n\n@media (min-width: 48rem) {\n :where(.PricingOptions--layout-cards.PricingOptions--items4) {\n row-gap: var(--brand-pricing-options-item-gap);\n }\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions--items1 {\n width: 50%;\n margin-inline: auto;\n }\n\n .PricingOptions--layout-default.PricingOptions--items1 {\n --brand-pricing-options-container-padding-inline: var(--brand-PricingOptions-items1-container-paddingInline);\n }\n\n .PricingOptions--layout-default.PricingOptions--items2 {\n --brand-pricing-options-item-gap: var(--brand-PricingOptions-items2-gap);\n --brand-pricing-options-container-padding-inline: var(--brand-PricingOptions-items2-container-padding-inline);\n }\n\n .PricingOptions--layout-default.PricingOptions--items3 {\n --brand-pricing-options-item-gap: var(--brand-PricingOptions-items3-gap);\n --brand-pricing-options-container-padding-inline: var(--brand-PricingOptions-items3-container-padding-inline);\n }\n .PricingOptions--layout-default.PricingOptions--items4 {\n --brand-pricing-options-item-gap: var(--brand-PricingOptions-items4-gap);\n --brand-pricing-options-container-padding-inline: var(--brand-PricingOptions-items4-container-padding-inline);\n }\n}\n\n/ ---------------------------------------------------------- /\n/ Item inner layout /\n/ ---------------------------------------------------------- /\n\n.PricingOptions__item {\n display: grid;\n grid-template-areas: var(--brand-pricing-options-template-areas);\n}\n\n@media (min-width: 63.25rem) {\n .PricingOptions__item {\n grid-row: header / footnote;\n grid-template-rows: subgrid;\n }\n\n .PricingOptions__item--has-leading-component {\n grid-row: leadingComponent / footnote;\n }\n}\n\n.PricingOptions__item--align-center {\n justify-items: center;\n}\n\n.PricingOptions__item--align-center .PricingOptions__price,\n.PricingOptions__item--align-center .PricingOptions__description {\n text-align: center;\n justify-content: center;\n}\n\n/\n * Backwards compatibility for browsers that don't support subgrid.\n * Once subgrid is supported in the last 3 major versions of Safari (i.e., when Safari 18 is released), it can be fully removed.\n * https://caniuse.com/css-subgrid\n /\n@supports not (grid-template-rows: subgrid) {\n @media (min-width: 63.28rem) {\n .PricingOptions__item {\n grid-template-areas: var(--brand-pricing-options-template-areas);\n grid-template-columns: 1fr;\n grid-template-rows: auto;\n }\n }\n}\n\n/ ---------------------------------------------------------- /\n/ Content /\n/ ---------------------------------------------------------- /\n\n.PricingOptions__header {\n display: flex;\n grid-area: header;\n row-gap: var(--base-size-16);\n}\n\n/ When item is left-aligned, keep the heading at the start of the card /\n.PricingOptions__item:not(.PricingOptions__item--align-center) .PricingOptions__header {\n align-items: center;\n margin-block-end: var(--base-size-16);\n}\n\n.PricingOptions__item:not(.PricingOptions__item--align-center) .PricingOptions__heading {\n margin-block: var(--base-size-16);\n flex: 0 1 auto;\n order: 1;\n align-self: flex-start;\n}\n\n@media (min-width: 63.24rem) {\n .PricingOptions__item:not(.PricingOptions__item--align-center) .PricingOptions__heading {\n margin-block: 0;\n }\n}\n\n/ When item is centered, center the heading /\n.PricingOptions__item--align-center .PricingOptions__header {\n justify-content: center;\n}\n\n.PricingOptions__item--align-center .PricingOptions__heading {\n margin-block-start: 0;\n margin-block-end: var(--base-size-16);\n text-align: center;\n}\n\n.PricingOptions__leading-component {\n grid-row: leadingComponent;\n}\n\n.PricingOptions__leading-component :is(img, picture) {\n display: block;\n}\n\n.PricingOptions__label {\n color: var(--brand-color-text-default);\n font-family: var(--brand-fontStack-monospace);\n font-size: var(--brand-text-size-100);\n font-weight: var(--brand-text-weight-500);\n letter-spacing: var(--brand-text-letterSpacing-100);\n line-height: var(--brand-text-lineHeight-200);\n text-transform: uppercase;\n}\n\n.PricingOptions__heading {\n margin-block: var(--base-size-16);\n flex: 0 1 auto; / Minimum width before wrapping /\n order: 1;\n align-self: flex-start;\n}\n\n.PricingOptions__description {\n grid-row: description;\n}\n\n.PricingOptions__price {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n grid-row: price;\n padding-block-start: var(--base-size-20);\n padding-block-end: var(--base-size-8);\n}\n\n@media (max-width: 63.25rem) {\n .PricingOptions__price-value,\n .PricingOptions__price-currency-symbol {\n font-size: var(--brand-text-size-900);\n }\n}\n\n.PricingOptions__price-amount {\n display: flex;\n align-items: flex-end;\n}\n\n.PricingOptions__price-currency-code {\n margin-inline-start: var(--base-size-4);\n margin-block-end: var(--base-size-4);\n color: var(--brand-color-text-muted);\n}\n\n.PricingOptions__price-original-price {\n display: inline-flex;\n align-self: center;\n text-decoration: none;\n margin-inline-start: var(--base-size-8);\n}\n\n.PricingOptions__price-original-price-value {\n text-decoration: line-through;\n}\n\n.PricingOptions__price-trailing-text {\n flex: 1 0 100%;\n display: block;\n}\n\n.PricingOptions__actions {\n grid-row: actions;\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n align-items: flex-end;\n padding-block-start: var(--base-size-20);\n}\n\n.PricingOptions__actions-message {\n display: flex;\n gap: var(--base-size-12);\n align-items: flex-start;\n inline-size: 100%;\n max-inline-size: 100%;\n padding: var(--base-size-12);\n border-block: var(--brand-borderWidth-thin) solid var(--brand-PricingOptions-actionsMessage-borderColor);\n border-inline: 0;\n border-radius: 0;\n background-color: var(--brand-PricingOptions-actionsMessage-bgColor);\n}\n\n.PricingOptions__actions-message-leading-component {\n flex: 0 0 auto;\n display: flex;\n margin-block-start: var(--base-size-4);\n color: var(--brand-PricingOptions-actionsMessage-accentColor);\n}\n\n.PricingOptions__actions-message-leading-component :where(svg) {\n display: block;\n inline-size: var(--base-size-16);\n block-size: var(--base-size-16);\n}\n\n.PricingOptions__actions-message-content {\n flex: 1 1 auto;\n min-inline-size: 0;\n}\n\n.PricingOptions__actions-message-content :where(p) {\n margin: 0;\n}\n\n/ MenuAction: full-width ActionMenu wrapper /\n.PricingOptions__menu-action {\n width: 100%;\n}\n\n.PricingOptions__menu-action > {\n width: 100%;\n}\n\n/* Force ActionMenu button container to stretch full width /\n.PricingOptions__menu-action > > * {\n display: flex;\n width: 100%;\n}\n\n/* Make the primary button fill remaining space next to the chevron /\n.PricingOptions__menu-action > > * > :first-child {\n flex: 1;\n}\n\n.PricingOptions__footnote {\n grid-row: footnote;\n display: block;\n margin-block-start: var(--base-size-8);\n}\n\n/* ---------------------------------------------------------- /\n/ Feature list /\n/ ---------------------------------------------------------- /\n\n.PricingOptions__feature-list {\n --feature-list-font-size: var(--brand-text-size-200);\n --feature-list-line-height: var(--brand-text-lineHeight-200);\n\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n grid-row: feature-list;\n margin-block-start: var(--base-size-20);\n padding-block-start: var(--base-size-20);\n width: 100%;\n}\n\n.PricingOptions__feature-list--has-divider {\n position: relative;\n margin: 0;\n margin-block-start: var(--base-size-20);\n padding-block-start: var(--base-size-40);\n padding-inline: 0;\n}\n\n/ Edge-to-edge divider above feature list /\n.PricingOptions__feature-list--has-divider::before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: calc(var(--brand-pricing-options-item-padding-inline, 0px) -1);\n inset-inline-end: calc(var(--brand-pricing-options-item-padding-inline, 0px) * -1);\n height: var(--brand-borderWidth-thin);\n background-color: var(--brand-color-border-subtle);\n}\n\n/* Default layout: extend feature list divider into column gap /\n@media (min-width: 63.25rem) {\n .PricingOptions--layout-default .PricingOptions__feature-list--has-divider::before {\n inset-inline-start: calc(var(--brand-pricing-options-item-gap, 0px) / 2 -1);\n inset-inline-end: calc(var(--brand-pricing-options-item-gap, 0px) / 2 * -1);\n }\n\n /* First item: don't overflow past container start /\n .PricingOptions--layout-default .PricingOptions__item:first-child .PricingOptions__feature-list--has-divider::before,\n .PricingOptions--layout-default\n .PricingOptions__labels\n + .PricingOptions__item\n .PricingOptions__feature-list--has-divider::before {\n inset-inline-start: calc(var(--brand-pricing-options-container-padding-inline, 0px) -1);\n }\n\n /* Last item: don't overflow past container end /\n .PricingOptions--layout-default .PricingOptions__item:last-child .PricingOptions__feature-list--has-divider::before {\n inset-inline-end: calc(var(--brand-pricing-options-container-padding-inline, 0px) -1);\n }\n\n .PricingOptions--layout-default.PricingOptions--appearance-gradient\n .PricingOptions__feature-list--has-divider::before {\n mask-image: var(--brand-PricingOptions-borderMask);\n }\n}\n\n.PricingOptions__feature-list-set:nth-child(n + 2) {\n margin-block-start: var(--base-size-20);\n}\n\n.PricingOptions__feature-list-group-heading {\n color: var(--brand-PricingOptions-featureList-group-heading-color);\n margin-block-start: var(--base-size-12);\n margin-block-end: var(--base-size-8);\n}\n\n.PricingOptions__feature-list-item--excluded span {\n color: var(--brand-color-text-muted);\n}\n\n/* Info tooltip button /\n.PricingOptions__feature-list-item--has-info {\n flex-wrap: nowrap;\n}\n\n.PricingOptions__feature-list-item--has-info > span {\n flex: 1;\n display: inline-flex;\n align-items: baseline;\n justify-content: space-between;\n}\n\n.PricingOptions__feature-list-item-info {\n all: unset;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n cursor: pointer;\n color: var(--brand-color-text-muted);\n background-color: color-mix(in srgb, var(--brand-color-canvas-invert) 12%, transparent);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-radius: 50%;\n margin-inline-start: var(--base-size-8);\n vertical-align: middle;\n padding: var(--base-size-4);\n}\n\n.PricingOptions__feature-list-item-info svg {\n width: var(--base-size-12);\n height: var(--base-size-12);\n}\n\n.PricingOptions__feature-list-item-info:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: 2px;\n}\n\n.PricingOptions__feature-list + .PricingOptions__feature-list-group-heading {\n margin-block-start: var(--base-size-20);\n}\n\n.PricingOptions__feature-list-item,\n.PricingOptions__feature-list-item span {\n font-size: var(--feature-list-font-size) !important;\n line-height: var(--feature-list-line-height) !important;\n}\n\n.PricingOptions__feature-list-group-heading {\n font-size: var(--feature-list-font-size) !important;\n}\n\n.PricingOptions--items4 .PricingOptions__feature-list {\n --feature-list-font-size: var(--brand-text-size-100);\n --feature-list-line-height: var(--brand-text-lineHeight-100);\n}\n\n/\n * Accordion component overrides\n /\n\n/ paddings and borders /\n.PricingOptions__feature-list-accordion {\n border: 0;\n padding: 0;\n}\n\n/ Remove hover effect /\n.PricingOptions__feature-list-accordion::after {\n content: none !important;\n}\n\n/ Adjust heading spacing /\n.PricingOptions__feature-list-accordion-heading {\n padding: var(--base-size-8) 0;\n padding-inline-start: 0 !important; / Fixes dotcom specificity issue /\n padding-inline-end: 0 !important;\n margin-block-start: calc(var(--base-size-16) -1);\n margin-block-end: var(--base-size-8);\n}\n\n/* Accordion heading styling /\n.PricingOptions__feature-list-accordion .PricingOptions__feature-list-accordion-heading :is(h1, h2, h3, h4, h5, h6) {\n font-size: var(--feature-list-font-size);\n line-height: var(--feature-list-line-height);\n font-weight: var(--brand-text-subhead-weight-large);\n gap: var(--base-size-8);\n align-items: center;\n justify-content: space-between;\n display: flex;\n width: 100%;\n}\n\n/ Hide default icon /\n.PricingOptions__feature-list-accordion .PricingOptions__feature-list-accordion-heading span {\n display: none;\n}\n\n/ Adjust content paddings /\n.PricingOptions__feature-list-accordion .PricingOptions__feature-list-accordion-content {\n padding: 0;\n padding-block-start: var(--base-size-8);\n padding-inline-start: 0 !important;\n}\n\n.PricingOptions__feature-list-accordion-chevron {\n margin-inline-end: var(--base-size-4);\n}\n\n/ Chevron up icon */\n.PricingOptions__feature-list-accordion[open] .PricingOptions__feature-list-accordion-chevron {\n transform: rotate(180deg);\n}\n\n.PricingOptions__feature-list-accordion-content {\n animation: none !important;\n}\n"],"mappings":""}

package/esm/SectionIntro/SectionIntro.module-BbIW9pPO.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__SectionIntro-module__SectionIntro___lKLtX{gap:var(--base-size-16);padding-block:var(--base-size-24);flex-direction:column;align-items:flex-start;display:flex}.Primer_Brand__SectionIntro-module__SectionIntro___lKLtX img,.Primer_Brand__SectionIntro-module__SectionIntro___lKLtX picture{display:block}.Primer_Brand__SectionIntro-module__SectionIntro-heading--muted___KwvDG{color:var(--brand-color-text-muted)}.Primer_Brand__SectionIntro-module__SectionIntro-heading--muted___KwvDG em,.Primer_Brand__SectionIntro-module__SectionIntro-heading--muted___KwvDG b{color:var(--brand-color-text-default);font-style:normal;font-weight:inherit}.Primer_Brand__SectionIntro-module__SectionIntro--align-start___2iH9X{text-align:start}.Primer_Brand__SectionIntro-module__SectionIntro--align-center___gp5o5{text-align:center;padding-inline:var(--base-size-24);align-items:center}.Primer_Brand__SectionIntro-module__SectionIntro-heading___gqaMX{max-width:24ch}.Primer_Brand__SectionIntro-module__SectionIntro--full-width___oN_XO .Primer_Brand__SectionIntro-module__SectionIntro-heading___gqaMX{max-width:none}.Primer_Brand__SectionIntro-module__SectionIntro-label___qQQ95{margin-block-end:var(--base-size-2)}.Primer_Brand__SectionIntro-module__SectionIntro-description___3x7fL{max-width:50ch;padding-block-start:var(--base-size-2)}.Primer_Brand__SectionIntro-module__SectionIntro-link___fgioV{margin-top:var(--base-size-16)}

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

@@ -1,4 +1,4 @@
-import './SectionIntro.module-CiRymbla.css';var e = {
+import './SectionIntro.module-BbIW9pPO.css';var e = {
 	SectionIntro: "Primer_Brand__SectionIntro-module__SectionIntro___lKLtX",
 	"SectionIntro-heading--muted": "Primer_Brand__SectionIntro-module__SectionIntro-heading--muted___KwvDG",
 	"SectionIntro--align-start": "Primer_Brand__SectionIntro-module__SectionIntro--align-start___2iH9X",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionIntro.module.js","names":[],"sources":["../../src/SectionIntro/SectionIntro.module.css"],"sourcesContent":[".SectionIntro {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-16);\n align-items: flex-start;\n padding-block: var(--base-size-24);\n}\n\n.SectionIntro-heading--muted {\n color: var(--brand-color-text-muted);\n}\n\n.SectionIntro-heading--muted em,\n.SectionIntro-heading--muted b {\n color: var(--brand-color-text-default);\n font-style: normal;\n font-weight: inherit;\n}\n\n.SectionIntro--align-start {\n text-align: start;\n}\n\n.SectionIntro--align-center {\n align-items: center;\n text-align: center;\n padding-inline: var(--base-size-24);\n}\n\n.SectionIntro-heading {\n max-width: 24ch;\n}\n\n.SectionIntro--full-width .SectionIntro-heading {\n max-width: none;\n}\n\n.SectionIntro-label {\n margin-block-end: var(--base-size-2);\n}\n\n.SectionIntro-description {\n padding-block-start: var(--base-size-2);\n max-width: 50ch;\n}\n\n.SectionIntro-link {\n margin-top: var(--base-size-16);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"SectionIntro.module.js","names":[],"sources":["../../src/SectionIntro/SectionIntro.module.css"],"sourcesContent":[".SectionIntro {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-16);\n align-items: flex-start;\n padding-block: var(--base-size-24);\n}\n\n.SectionIntro :is(img, picture) {\n display: block;\n}\n\n.SectionIntro-heading--muted {\n color: var(--brand-color-text-muted);\n}\n\n.SectionIntro-heading--muted em,\n.SectionIntro-heading--muted b {\n color: var(--brand-color-text-default);\n font-style: normal;\n font-weight: inherit;\n}\n\n.SectionIntro--align-start {\n text-align: start;\n}\n\n.SectionIntro--align-center {\n align-items: center;\n text-align: center;\n padding-inline: var(--base-size-24);\n}\n\n.SectionIntro-heading {\n max-width: 24ch;\n}\n\n.SectionIntro--full-width .SectionIntro-heading {\n max-width: none;\n}\n\n.SectionIntro-label {\n margin-block-end: var(--base-size-2);\n}\n\n.SectionIntro-description {\n padding-block-start: var(--base-size-2);\n max-width: 50ch;\n}\n\n.SectionIntro-link {\n margin-top: var(--base-size-16);\n}\n"],"mappings":""}

package/esm/Statistic/Statistic.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Statistic.d.ts","sourceRoot":"","sources":["../../src/Statistic/Statistic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAGnE,OAAO,EAAO,SAAS,EAAe,MAAM,KAAK,CAAA;AAEjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,gGAAgG,CAAA;AAKvG,eAAO,MAAM,cAAc,uCAAwC,CAAA;AACnE,eAAO,MAAM,sBAAsB,sDAAuD,CAAA;AAE1F,KAAK,sBAAsB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAA;AAErE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3D,KAAK,aAAa,CAAC,CAAC,IAAI;IACtB,MAAM,CAAC,EAAE,CAAC,CAAA;IACV,OAAO,CAAC,EAAE,CAAC,CAAA;IACX,IAAI,CAAC,EAAE,CAAC,CAAA;CACT,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,iBAAiB,CAAC,GAAG;IAC1D;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,GAAG,aAAa,CAAC,sBAAsB,CAAC,CAAA;IACxE;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC1C;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC3C;;OAEG;IACH,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,SAAS,CAAC,cAAc,CAAC,GAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;~~AAkItC~~,KAAK,yBAAyB,GAAG,SAAS,CAAC,eAAe,CAAC,GACzD,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC,GAAG;IAClC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;CACzC,CAAA;AAmBH;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIpB,CAAA"}
1	+ {"version":3,"file":"Statistic.d.ts","sourceRoot":"","sources":["../../src/Statistic/Statistic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAGnE,OAAO,EAAO,SAAS,EAAe,MAAM,KAAK,CAAA;AAEjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,gGAAgG,CAAA;AAKvG,eAAO,MAAM,cAAc,uCAAwC,CAAA;AACnE,eAAO,MAAM,sBAAsB,sDAAuD,CAAA;AAE1F,KAAK,sBAAsB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAA;AAErE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3D,KAAK,aAAa,CAAC,CAAC,IAAI;IACtB,MAAM,CAAC,EAAE,CAAC,CAAA;IACV,OAAO,CAAC,EAAE,CAAC,CAAA;IACX,IAAI,CAAC,EAAE,CAAC,CAAA;CACT,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,iBAAiB,CAAC,GAAG;IAC1D;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,GAAG,aAAa,CAAC,sBAAsB,CAAC,CAAA;IACxE;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC1C;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC3C;;OAEG;IACH,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,SAAS,CAAC,cAAc,CAAC,GAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAwItC,KAAK,yBAAyB,GAAG,SAAS,CAAC,eAAe,CAAC,GACzD,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC,GAAG;IAClC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;CACzC,CAAA;AAmBH;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIpB,CAAA"}

package/esm/Statistic/Statistic.js CHANGED Viewed

@@ -33,7 +33,7 @@ var u = [
 		k
 	] }) })), /* @__PURE__ */ l("div", {
 		ref: w,
-		className: e(r[`Statistic--variant-${v}`], D, T, a),
+		className: e(r.Statistic, r[`Statistic--variant-${v}`], D, T, a),
 		style: {
 			...E,
 			...S

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Statistic.js","names":[],"sources":["../../src/Statistic/Statistic.tsx"],"sourcesContent":["import React, {PropsWithChildren, forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Text, TextProps, useAnimation} from '../'\n\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/statistic/base.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './Statistic.module.css'\n\nexport const StatisticSizes = ['small', 'medium', 'large'] as const\nexport const StatisticSpacingValues = ['none', 'condensed', 'normal', 'spacious'] as const\n\ntype StatisticSpacingValues = (typeof StatisticSpacingValues)[number]\n\nexport type StatisticSize = (typeof StatisticSizes)[number]\n\ntype ResponsiveMap<T> = {\n narrow?: T\n regular?: T\n wide?: T\n}\n\nexport type StatisticProps = BaseProps<HTMLAnchorElement> & {\n /\n The size of the Statistic\n /\n size?: StatisticSize\n /\n Adding padding to all internal sides of the component\n /\n padding?: StatisticSpacingValues \| ResponsiveMap<StatisticSpacingValues>\n /\n Specify alternative appearance\n /\n variant?: 'default' \| 'boxed'\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n /\n leadingComponent?: React.FunctionComponent\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n /\n trailingComponent?: React.FunctionComponent\n /\n Optional attirbute for testing\n /\n ['data-testid']?: string\n} & BaseProps<HTMLDivElement> &\n React.HTMLAttributes<HTMLDivElement>\n\nconst testIds = {\n root: 'Statistic',\n}\n\nconst _HeadingSizeMap: {\n [key in StatisticSize]: TextProps['size']\n} = {\n small: '600',\n medium: '800',\n large: '1000',\n}\n\nconst classBuilder = (property: string, value?: StatisticSpacingValues \| ResponsiveMap<StatisticSpacingValues>) => {\n if (!value) return ''\n\n if (typeof value === 'string' \|\| typeof value === 'number') {\n return styles[`Statistic--${property}-${value}`]\n } else {\n return Object.keys(value)\n .map(viewport => styles[`Statistic--${viewport}-${property}-${value[viewport]}`])\n .join(' ')\n }\n}\n\nconst _Statistic = forwardRef<HTMLDivElement, PropsWithChildren<StatisticProps>>(\n (\n {\n animate,\n className,\n children,\n 'data-testid': testId,\n size = 'large',\n variant = 'default',\n padding = 'none',\n leadingComponent: LeadingComponent,\n trailingComponent: TrailingComponent,\n style,\n ...rest\n },\n ref,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n const paddingClasses = useMemo(() => classBuilder('padding', padding), [padding])\n\n type HeadingElement = React.ReactElement<React.ComponentProps<typeof StatisticHeading>>\n type DescriptionElement = React.ReactElement<React.ComponentProps<typeof StatisticDescription>>\n\n const headingChild = useMemo(() => {\n const candidate = React.Children.toArray(children).find(child => {\n return (\n React.isValidElement<React.ComponentProps<typeof StatisticHeading>>(child) && child.type === StatisticHeading\n )\n })\n\n return React.isValidElement<React.ComponentProps<typeof StatisticHeading>>(candidate)\n ? (candidate as HeadingElement)\n : undefined\n }, [children])\n\n const descriptionChild = useMemo(() => {\n const candidate = React.Children.toArray(children).find(child => {\n return (\n React.isValidElement<React.ComponentProps<typeof StatisticDescription>>(child) &&\n child.type === StatisticDescription\n )\n })\n\n return React.isValidElement<React.ComponentProps<typeof StatisticDescription>>(candidate)\n ? (candidate as DescriptionElement)\n : undefined\n }, [children])\n\n let headingToRender = headingChild\n\n /\n To aid assistive technology, we append the optional description to the heading\n /\n if (descriptionChild && headingToRender) {\n headingToRender = React.cloneElement(headingToRender, {\n children: (\n <>\n {headingToRender.props.children} {descriptionChild}\n </>\n ),\n })\n }\n\n return (\n <div\n ref={ref}\n className={clsx(styles[`Statistic--variant-${variant}`], paddingClasses, animationClasses, className)}\n style={{...animationInlineStyles, ...style}}\n data-testid={testId \|\| testIds.root}\n {...rest}\n >\n {LeadingComponent && <LeadingComponent />}\n\n {headingToRender &&\n React.cloneElement(headingToRender, {\n size: headingToRender.props.size \|\| _HeadingSizeMap[size],\n })}\n\n {TrailingComponent && <TrailingComponent />}\n </div>\n )\n },\n)\n\ntype StatisticHeadingProps = TextProps\n\nconst StatisticHeading = forwardRef<HTMLParagraphElement, StatisticHeadingProps>(\n ({as = 'p', className, children, font = 'hubot-sans', weight = 'medium', size = '1000', ...rest}, ref) => {\n return (\n <Text\n as={as}\n ref={ref}\n className={clsx(styles[`Statistic__heading`], className)}\n font={font}\n weight={weight}\n size={size}\n {...rest}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype StatisticDescriptionProps = BaseProps<HTMLSpanElement> &\n Omit<TextProps, 'variant' \| 'as'> & {\n variant?: 'default' \| 'muted' \| 'accent'\n }\n\nconst StatisticDescription = forwardRef<HTMLSpanElement, PropsWithChildren<StatisticDescriptionProps>>(\n ({children, className, size = '300', variant = 'muted', ...rest}, ref) => {\n return (\n <Text\n variant={variant !== 'accent' ? variant : 'muted'}\n ref={ref}\n size={size}\n font=\"mona-sans\"\n className={clsx(styles['Statistic__description'], styles[`Statistic__description--${variant}`], className)}\n {...rest}\n >\n {children}\n </Text>\n )\n },\n)\n\n/\n Use the statistic component display concise numerical information\n * @see https://primer.style/brand/components/Statistic\n */\nexport const Statistic = Object.assign(_Statistic, {\n Heading: StatisticHeading,\n Description: StatisticDescription,\n testIds,\n})\n"],"mappings":";;;;;;;;AAeA,IAAa,IAAiB;CAAC;CAAS;CAAU;CAAQ,EAC7C,IAAyB;CAAC;CAAQ;CAAa;CAAU;CAAW,EA8C3E,IAAU,EACd,MAAM,aACP,EAEK,IAEF;CACF,OAAO;CACP,QAAQ;CACR,OAAO;CACR,EAEK,KAAgB,GAAkB,MACjC,IAED,OAAO,KAAU,YAAY,OAAO,KAAU,WACzC,EAAO,cAAc,EAAS,GAAG,OAEjC,OAAO,KAAK,EAAM,CACtB,KAAI,MAAY,EAAO,cAAc,EAAS,GAAG,EAAS,GAAG,EAAM,MAAa,CAChF,KAAK,IAAI,GAPK,IAWf,IAAa,GAEf,EACE,YACA,cACA,aACA,eAAe,GACf,UAAO,SACP,aAAU,WACV,aAAU,QACV,kBAAkB,GAClB,mBAAmB,GACnB,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAClF,IAAiB,QAAc,EAAa,WAAW,EAAQ,EAAE,CAAC,EAAQ,CAAC,EAK3E,IAAe,QAAc;EACjC,IAAM,IAAY,EAAM,SAAS,QAAQ,EAAS,CAAC,MAAK,MAEpD,EAAM,eAA8D,EAAM,IAAI,EAAM,SAAS,EAE/F;AAEF,SAAO,EAAM,eAA8D,EAAU,GAChF,IACD,KAAA;IACH,CAAC,EAAS,CAAC,EAER,IAAmB,QAAc;EACrC,IAAM,IAAY,EAAM,SAAS,QAAQ,EAAS,CAAC,MAAK,MAEpD,EAAM,eAAkE,EAAM,IAC9E,EAAM,SAAS,EAEjB;AAEF,SAAO,EAAM,eAAkE,EAAU,GACpF,IACD,KAAA;IACH,CAAC,EAAS,CAAC,EAEV,IAAkB;AAetB,QAVI,KAAoB,MACtB,IAAkB,EAAM,aAAa,GAAiB,EACpD,UACE,kBAAA,GAAA,EAAA,UAAA;EACG,EAAgB,MAAM;EAAS;EAAE;EACjC,EAAA,CAAA,EAEN,CAAC,GAIF,kBAAC,OAAD;EACO;EACL,WAAW,~~EAAK~~,EAAO,sBAAsB,~~MAAY~~,~~GAAgB~~,~~GAAkB~~,~~EAAU~~;~~EACrG~~,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,eAAa,KAAU,EAAQ;EAC/B,GAAI;~~YALN~~;~~GAOG~~,KAAoB,kBAAC,GAAD,EAAoB,CAAA;GAExC,KACC,EAAM,aAAa,GAAiB,EAClC,MAAM,EAAgB,MAAM,QAAQ,EAAgB,IACrD,CAAC;GAEH,KAAqB,kBAAC,GAAD,EAAqB,CAAA;GACvC;;EAGX,EAIK,IAAmB,GACtB,EAAC,QAAK,KAAK,cAAW,aAAU,UAAO,cAAc,YAAS,UAAU,UAAO,QAAQ,GAAG,KAAO,MAE9F,kBAAC,GAAD;CACM;CACC;CACL,WAAW,EAAK,EAAO,oBAAuB,EAAU;CAClD;CACE;CACF;CACN,GAAI;CAEH;CACI,CAAA,CAGZ,EAOK,IAAuB,GAC1B,EAAC,aAAU,cAAW,UAAO,OAAO,aAAU,SAAS,GAAG,KAAO,MAE9D,kBAAC,GAAD;CACE,SAAS,MAAY,WAAqB,UAAV;CAC3B;CACC;CACN,MAAK;CACL,WAAW,EAAK,EAAO,wBAA2B,EAAO,2BAA2B,MAAY,EAAU;CAC1G,GAAI;CAEH;CACI,CAAA,CAGZ,EAMY,IAAY,OAAO,OAAO,GAAY;CACjD,SAAS;CACT,aAAa;CACb;CACD,CAAC"}
1	+ {"version":3,"file":"Statistic.js","names":[],"sources":["../../src/Statistic/Statistic.tsx"],"sourcesContent":["import React, {PropsWithChildren, forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Text, TextProps, useAnimation} from '../'\n\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/statistic/base.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './Statistic.module.css'\n\nexport const StatisticSizes = ['small', 'medium', 'large'] as const\nexport const StatisticSpacingValues = ['none', 'condensed', 'normal', 'spacious'] as const\n\ntype StatisticSpacingValues = (typeof StatisticSpacingValues)[number]\n\nexport type StatisticSize = (typeof StatisticSizes)[number]\n\ntype ResponsiveMap<T> = {\n narrow?: T\n regular?: T\n wide?: T\n}\n\nexport type StatisticProps = BaseProps<HTMLAnchorElement> & {\n /\n The size of the Statistic\n /\n size?: StatisticSize\n /\n Adding padding to all internal sides of the component\n /\n padding?: StatisticSpacingValues \| ResponsiveMap<StatisticSpacingValues>\n /\n Specify alternative appearance\n /\n variant?: 'default' \| 'boxed'\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n /\n leadingComponent?: React.FunctionComponent\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n /\n trailingComponent?: React.FunctionComponent\n /\n Optional attirbute for testing\n /\n ['data-testid']?: string\n} & BaseProps<HTMLDivElement> &\n React.HTMLAttributes<HTMLDivElement>\n\nconst testIds = {\n root: 'Statistic',\n}\n\nconst _HeadingSizeMap: {\n [key in StatisticSize]: TextProps['size']\n} = {\n small: '600',\n medium: '800',\n large: '1000',\n}\n\nconst classBuilder = (property: string, value?: StatisticSpacingValues \| ResponsiveMap<StatisticSpacingValues>) => {\n if (!value) return ''\n\n if (typeof value === 'string' \|\| typeof value === 'number') {\n return styles[`Statistic--${property}-${value}`]\n } else {\n return Object.keys(value)\n .map(viewport => styles[`Statistic--${viewport}-${property}-${value[viewport]}`])\n .join(' ')\n }\n}\n\nconst _Statistic = forwardRef<HTMLDivElement, PropsWithChildren<StatisticProps>>(\n (\n {\n animate,\n className,\n children,\n 'data-testid': testId,\n size = 'large',\n variant = 'default',\n padding = 'none',\n leadingComponent: LeadingComponent,\n trailingComponent: TrailingComponent,\n style,\n ...rest\n },\n ref,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n const paddingClasses = useMemo(() => classBuilder('padding', padding), [padding])\n\n type HeadingElement = React.ReactElement<React.ComponentProps<typeof StatisticHeading>>\n type DescriptionElement = React.ReactElement<React.ComponentProps<typeof StatisticDescription>>\n\n const headingChild = useMemo(() => {\n const candidate = React.Children.toArray(children).find(child => {\n return (\n React.isValidElement<React.ComponentProps<typeof StatisticHeading>>(child) && child.type === StatisticHeading\n )\n })\n\n return React.isValidElement<React.ComponentProps<typeof StatisticHeading>>(candidate)\n ? (candidate as HeadingElement)\n : undefined\n }, [children])\n\n const descriptionChild = useMemo(() => {\n const candidate = React.Children.toArray(children).find(child => {\n return (\n React.isValidElement<React.ComponentProps<typeof StatisticDescription>>(child) &&\n child.type === StatisticDescription\n )\n })\n\n return React.isValidElement<React.ComponentProps<typeof StatisticDescription>>(candidate)\n ? (candidate as DescriptionElement)\n : undefined\n }, [children])\n\n let headingToRender = headingChild\n\n /\n To aid assistive technology, we append the optional description to the heading\n /\n if (descriptionChild && headingToRender) {\n headingToRender = React.cloneElement(headingToRender, {\n children: (\n <>\n {headingToRender.props.children} {descriptionChild}\n </>\n ),\n })\n }\n\n return (\n <div\n ref={ref}\n className={clsx(\n styles.Statistic,\n styles[`Statistic--variant-${variant}`],\n paddingClasses,\n animationClasses,\n className,\n )}\n style={{...animationInlineStyles, ...style}}\n data-testid={testId \|\| testIds.root}\n {...rest}\n >\n {LeadingComponent && <LeadingComponent />}\n\n {headingToRender &&\n React.cloneElement(headingToRender, {\n size: headingToRender.props.size \|\| _HeadingSizeMap[size],\n })}\n\n {TrailingComponent && <TrailingComponent />}\n </div>\n )\n },\n)\n\ntype StatisticHeadingProps = TextProps\n\nconst StatisticHeading = forwardRef<HTMLParagraphElement, StatisticHeadingProps>(\n ({as = 'p', className, children, font = 'hubot-sans', weight = 'medium', size = '1000', ...rest}, ref) => {\n return (\n <Text\n as={as}\n ref={ref}\n className={clsx(styles[`Statistic__heading`], className)}\n font={font}\n weight={weight}\n size={size}\n {...rest}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype StatisticDescriptionProps = BaseProps<HTMLSpanElement> &\n Omit<TextProps, 'variant' \| 'as'> & {\n variant?: 'default' \| 'muted' \| 'accent'\n }\n\nconst StatisticDescription = forwardRef<HTMLSpanElement, PropsWithChildren<StatisticDescriptionProps>>(\n ({children, className, size = '300', variant = 'muted', ...rest}, ref) => {\n return (\n <Text\n variant={variant !== 'accent' ? variant : 'muted'}\n ref={ref}\n size={size}\n font=\"mona-sans\"\n className={clsx(styles['Statistic__description'], styles[`Statistic__description--${variant}`], className)}\n {...rest}\n >\n {children}\n </Text>\n )\n },\n)\n\n/\n Use the statistic component display concise numerical information\n * @see https://primer.style/brand/components/Statistic\n */\nexport const Statistic = Object.assign(_Statistic, {\n Heading: StatisticHeading,\n Description: StatisticDescription,\n testIds,\n})\n"],"mappings":";;;;;;;;AAeA,IAAa,IAAiB;CAAC;CAAS;CAAU;CAAQ,EAC7C,IAAyB;CAAC;CAAQ;CAAa;CAAU;CAAW,EA8C3E,IAAU,EACd,MAAM,aACP,EAEK,IAEF;CACF,OAAO;CACP,QAAQ;CACR,OAAO;CACR,EAEK,KAAgB,GAAkB,MACjC,IAED,OAAO,KAAU,YAAY,OAAO,KAAU,WACzC,EAAO,cAAc,EAAS,GAAG,OAEjC,OAAO,KAAK,EAAM,CACtB,KAAI,MAAY,EAAO,cAAc,EAAS,GAAG,EAAS,GAAG,EAAM,MAAa,CAChF,KAAK,IAAI,GAPK,IAWf,IAAa,GAEf,EACE,YACA,cACA,aACA,eAAe,GACf,UAAO,SACP,aAAU,WACV,aAAU,QACV,kBAAkB,GAClB,mBAAmB,GACnB,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAClF,IAAiB,QAAc,EAAa,WAAW,EAAQ,EAAE,CAAC,EAAQ,CAAC,EAK3E,IAAe,QAAc;EACjC,IAAM,IAAY,EAAM,SAAS,QAAQ,EAAS,CAAC,MAAK,MAEpD,EAAM,eAA8D,EAAM,IAAI,EAAM,SAAS,EAE/F;AAEF,SAAO,EAAM,eAA8D,EAAU,GAChF,IACD,KAAA;IACH,CAAC,EAAS,CAAC,EAER,IAAmB,QAAc;EACrC,IAAM,IAAY,EAAM,SAAS,QAAQ,EAAS,CAAC,MAAK,MAEpD,EAAM,eAAkE,EAAM,IAC9E,EAAM,SAAS,EAEjB;AAEF,SAAO,EAAM,eAAkE,EAAU,GACpF,IACD,KAAA;IACH,CAAC,EAAS,CAAC,EAEV,IAAkB;AAetB,QAVI,KAAoB,MACtB,IAAkB,EAAM,aAAa,GAAiB,EACpD,UACE,kBAAA,GAAA,EAAA,UAAA;EACG,EAAgB,MAAM;EAAS;EAAE;EACjC,EAAA,CAAA,EAEN,CAAC,GAIF,kBAAC,OAAD;EACO;EACL,WAAW,EACT,EAAO,WACP,EAAO,sBAAsB,MAC7B,GACA,GACA,EACD;EACD,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,eAAa,KAAU,EAAQ;EAC/B,GAAI;YAXN;GAaG,KAAoB,kBAAC,GAAD,EAAoB,CAAA;GAExC,KACC,EAAM,aAAa,GAAiB,EAClC,MAAM,EAAgB,MAAM,QAAQ,EAAgB,IACrD,CAAC;GAEH,KAAqB,kBAAC,GAAD,EAAqB,CAAA;GACvC;;EAGX,EAIK,IAAmB,GACtB,EAAC,QAAK,KAAK,cAAW,aAAU,UAAO,cAAc,YAAS,UAAU,UAAO,QAAQ,GAAG,KAAO,MAE9F,kBAAC,GAAD;CACM;CACC;CACL,WAAW,EAAK,EAAO,oBAAuB,EAAU;CAClD;CACE;CACF;CACN,GAAI;CAEH;CACI,CAAA,CAGZ,EAOK,IAAuB,GAC1B,EAAC,aAAU,cAAW,UAAO,OAAO,aAAU,SAAS,GAAG,KAAO,MAE9D,kBAAC,GAAD;CACE,SAAS,MAAY,WAAqB,UAAV;CAC3B;CACC;CACN,MAAK;CACL,WAAW,EAAK,EAAO,wBAA2B,EAAO,2BAA2B,MAAY,EAAU;CAC1G,GAAI;CAEH;CACI,CAAA,CAGZ,EAMY,IAAY,OAAO,OAAO,GAAY;CACjD,SAAS;CACT,aAAa;CACb;CACD,CAAC"}

package/esm/Statistic/{Statistic.module-Dqb6n1GX.css → Statistic.module-DvdiSbXk.css} RENAMED Viewed

	@@ -1 +1 @@
1	- .Primer_Brand__Statistic-module__Statistic--variant-boxed___Y0Zpi{background-color:var(--brand-color-canvas-subtle);border-radius:var(--brand-borderRadius-large)}.Primer_Brand__Statistic-module__Statistic--variant-boxed___Y0Zpi,.Primer_Brand__Statistic-module__Statistic--variant-boxed___Y0Zpi.Primer_Brand__Statistic-module__Statistic--padding-none___GUt1Q{padding:var(--brand-Statistic-spacing-spacious)}.Primer_Brand__Statistic-module__Statistic--padding-none___GUt1Q{padding:0}.Primer_Brand__Statistic-module__Statistic--padding-condensed___JI2lY{padding:var(--brand-Statistic-spacing-condensed)}.Primer_Brand__Statistic-module__Statistic--padding-normal___vHbtv{padding:var(--brand-Statistic-spacing-normal)}.Primer_Brand__Statistic-module__Statistic--padding-spacious___Gvu_b{padding:var(--brand-Statistic-spacing-spacious)}.Primer_Brand__Statistic-module__Statistic--narrow-padding-condensed___vT33_{padding:var(--brand-box-spacing-condensed)}.Primer_Brand__Statistic-module__Statistic--narrow-padding-normal___aLI9P{padding:var(--brand-box-spacing-normal)}.Primer_Brand__Statistic-module__Statistic--narrow-padding-spacious___xpwvB{padding:var(--base-size-32)}.Primer_Brand__Statistic-module__Statistic--narrow-padding-none___Oy_ly{padding:0}@media screen and (width>=48rem){.Primer_Brand__Statistic-module__Statistic--regular-padding-condensed___PUIYI{padding:var(--brand-Statistic-spacing-condensed)}.Primer_Brand__Statistic-module__Statistic--regular-padding-normal___NfTzS{padding:var(--brand-Statistic-spacing-normal)}.Primer_Brand__Statistic-module__Statistic--regular-padding-spacious___HjVH1{padding:var(--brand-Statistic-spacing-spacious)}.Primer_Brand__Statistic-module__Statistic--regular-padding-none___1fBS8{padding:0}}@media screen and (width>=80rem){.Primer_Brand__Statistic-module__Statistic--wide-padding-condensed___GmGtC{padding:var(--brand-Statistic-spacing-condensed)}.Primer_Brand__Statistic-module__Statistic--wide-padding-normal___VpWHZ{padding:var(--brand-Statistic-spacing-normal)}.Primer_Brand__Statistic-module__Statistic--wide-padding-spacious___55ImP{padding:var(--brand-Statistic-spacing-spacious)}.Primer_Brand__Statistic-module__Statistic--wide-padding-none___36TdO{padding:0}}.Primer_Brand__Statistic-module__Statistic__heading___zkSQX{position:relative}.Primer_Brand__Statistic-module__Statistic__heading___zkSQX sup{font-size:var(--brand-text-size-100);line-height:0;font-weight:var(--brand-text-weight-100);vertical-align:top;top:var(--base-size-6);font-stretch:100%;position:relative}.Primer_Brand__Statistic-module__Statistic__heading___zkSQX sup a{padding:var(--base-size-4);line-height:1;display:inline-block}.Primer_Brand__Statistic-module__Statistic__description--accent___yiXP4{color:var(--brand-color-accent-primary)}.Primer_Brand__Statistic-module__Statistic__description___6v0Xv{margin-block-start:var(--base-size-8);font-stretch:100%;display:block;position:relative}.Primer_Brand__Statistic-module__Statistic__description___6v0Xv sup{font-size:var(--brand-text-size-100);vertical-align:top;line-height:0;position:relative;top:0}.Primer_Brand__Statistic-module__Statistic__description___6v0Xv sup a{padding:var(--base-size-4);line-height:1;display:inline-block}
1	+ .Primer_Brand__Statistic-module__Statistic___tRtgu img,.Primer_Brand__Statistic-module__Statistic___tRtgu picture{display:block}.Primer_Brand__Statistic-module__Statistic--variant-boxed___Y0Zpi{background-color:var(--brand-color-canvas-subtle);border-radius:var(--brand-borderRadius-large)}.Primer_Brand__Statistic-module__Statistic--variant-boxed___Y0Zpi,.Primer_Brand__Statistic-module__Statistic--variant-boxed___Y0Zpi.Primer_Brand__Statistic-module__Statistic--padding-none___GUt1Q{padding:var(--brand-Statistic-spacing-spacious)}.Primer_Brand__Statistic-module__Statistic--padding-none___GUt1Q{padding:0}.Primer_Brand__Statistic-module__Statistic--padding-condensed___JI2lY{padding:var(--brand-Statistic-spacing-condensed)}.Primer_Brand__Statistic-module__Statistic--padding-normal___vHbtv{padding:var(--brand-Statistic-spacing-normal)}.Primer_Brand__Statistic-module__Statistic--padding-spacious___Gvu_b{padding:var(--brand-Statistic-spacing-spacious)}.Primer_Brand__Statistic-module__Statistic--narrow-padding-condensed___vT33_{padding:var(--brand-box-spacing-condensed)}.Primer_Brand__Statistic-module__Statistic--narrow-padding-normal___aLI9P{padding:var(--brand-box-spacing-normal)}.Primer_Brand__Statistic-module__Statistic--narrow-padding-spacious___xpwvB{padding:var(--base-size-32)}.Primer_Brand__Statistic-module__Statistic--narrow-padding-none___Oy_ly{padding:0}@media screen and (width>=48rem){.Primer_Brand__Statistic-module__Statistic--regular-padding-condensed___PUIYI{padding:var(--brand-Statistic-spacing-condensed)}.Primer_Brand__Statistic-module__Statistic--regular-padding-normal___NfTzS{padding:var(--brand-Statistic-spacing-normal)}.Primer_Brand__Statistic-module__Statistic--regular-padding-spacious___HjVH1{padding:var(--brand-Statistic-spacing-spacious)}.Primer_Brand__Statistic-module__Statistic--regular-padding-none___1fBS8{padding:0}}@media screen and (width>=80rem){.Primer_Brand__Statistic-module__Statistic--wide-padding-condensed___GmGtC{padding:var(--brand-Statistic-spacing-condensed)}.Primer_Brand__Statistic-module__Statistic--wide-padding-normal___VpWHZ{padding:var(--brand-Statistic-spacing-normal)}.Primer_Brand__Statistic-module__Statistic--wide-padding-spacious___55ImP{padding:var(--brand-Statistic-spacing-spacious)}.Primer_Brand__Statistic-module__Statistic--wide-padding-none___36TdO{padding:0}}.Primer_Brand__Statistic-module__Statistic__heading___zkSQX{position:relative}.Primer_Brand__Statistic-module__Statistic__heading___zkSQX sup{font-size:var(--brand-text-size-100);line-height:0;font-weight:var(--brand-text-weight-100);vertical-align:top;top:var(--base-size-6);font-stretch:100%;position:relative}.Primer_Brand__Statistic-module__Statistic__heading___zkSQX sup a{padding:var(--base-size-4);line-height:1;display:inline-block}.Primer_Brand__Statistic-module__Statistic__description--accent___yiXP4{color:var(--brand-color-accent-primary)}.Primer_Brand__Statistic-module__Statistic__description___6v0Xv{margin-block-start:var(--base-size-8);font-stretch:100%;display:block;position:relative}.Primer_Brand__Statistic-module__Statistic__description___6v0Xv sup{font-size:var(--brand-text-size-100);vertical-align:top;line-height:0;position:relative;top:0}.Primer_Brand__Statistic-module__Statistic__description___6v0Xv sup a{padding:var(--base-size-4);line-height:1;display:inline-block}

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

@@ -1,4 +1,5 @@
-import './Statistic.module-Dqb6n1GX.css';var e = {
+import './Statistic.module-DvdiSbXk.css';var e = {
+	Statistic: "Primer_Brand__Statistic-module__Statistic___tRtgu",
 	"Statistic--variant-boxed": "Primer_Brand__Statistic-module__Statistic--variant-boxed___Y0Zpi",
 	"Statistic--padding-none": "Primer_Brand__Statistic-module__Statistic--padding-none___GUt1Q",
 	"Statistic--padding-condensed": "Primer_Brand__Statistic-module__Statistic--padding-condensed___JI2lY",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Statistic.module.js","names":[],"sources":["../../src/Statistic/Statistic.module.css"],"sourcesContent":["/*\n Variants\n /\n.Statistic--variant-boxed {\n background-color: var(--brand-color-canvas-subtle);\n border-radius: var(--brand-borderRadius-large);\n}\n\n.Statistic--variant-boxed,\n.Statistic--variant-boxed.Statistic--padding-none {\n padding: var(--brand-Statistic-spacing-spacious);\n}\n\n/\n Padding options\n /\n.Statistic--padding-none {\n padding: 0;\n}\n\n.Statistic--padding-condensed {\n padding: var(--brand-Statistic-spacing-condensed);\n}\n\n.Statistic--padding-normal {\n padding: var(--brand-Statistic-spacing-normal);\n}\n\n.Statistic--padding-spacious {\n padding: var(--brand-Statistic-spacing-spacious);\n}\n\n.Statistic--narrow-padding-condensed {\n padding: var(--brand-box-spacing-condensed);\n}\n.Statistic--narrow-padding-normal {\n padding: var(--brand-box-spacing-normal);\n}\n.Statistic--narrow-padding-spacious {\n padding: var(--base-size-32);\n}\n.Statistic--narrow-padding-none {\n padding: 0;\n}\n\n@media screen and (min-width: 48rem) {\n .Statistic--regular-padding-condensed {\n padding: var(--brand-Statistic-spacing-condensed);\n }\n .Statistic--regular-padding-normal {\n padding: var(--brand-Statistic-spacing-normal);\n }\n .Statistic--regular-padding-spacious {\n padding: var(--brand-Statistic-spacing-spacious);\n }\n .Statistic--regular-padding-none {\n padding: 0;\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Statistic--wide-padding-condensed {\n padding: var(--brand-Statistic-spacing-condensed);\n }\n .Statistic--wide-padding-normal {\n padding: var(--brand-Statistic-spacing-normal);\n }\n .Statistic--wide-padding-spacious {\n padding: var(--brand-Statistic-spacing-spacious);\n }\n .Statistic--wide-padding-none {\n padding: 0;\n }\n}\n\n.Statistic__heading {\n position: relative;\n}\n\n.Statistic__heading sup {\n font-size: var(--brand-text-size-100);\n line-height: 0;\n font-weight: var(--brand-text-weight-100);\n font-stretch: normal;\n vertical-align: top;\n top: var(--base-size-6); / Optical align to heading top /\n position: relative;\n}\n\n.Statistic__heading sup a {\n / Targets footnote links. Specificity not ideal, but these are passed through by the user /\n padding: var(--base-size-4);\n display: inline-block;\n line-height: 1;\n}\n\n/\n * Description\n /\n.Statistic__description--accent {\n color: var(--brand-color-accent-primary);\n}\n\n.Statistic__description {\n position: relative;\n display: block;\n margin-block-start: var(--base-size-8);\n font-stretch: normal;\n}\n\n.Statistic__description sup {\n font-size: var(--brand-text-size-100);\n vertical-align: top;\n top: 0;\n position: relative;\n line-height: 0;\n}\n\n.Statistic__description sup a {\n / Targets footnote links. Specificity not ideal, but these are passed through by the user */\n padding: var(--base-size-4);\n display: inline-block;\n line-height: 1;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Statistic.module.js","names":[],"sources":["../../src/Statistic/Statistic.module.css"],"sourcesContent":["/*\n Variants\n /\n.Statistic :is(img, picture) {\n display: block;\n}\n\n.Statistic--variant-boxed {\n background-color: var(--brand-color-canvas-subtle);\n border-radius: var(--brand-borderRadius-large);\n}\n\n.Statistic--variant-boxed,\n.Statistic--variant-boxed.Statistic--padding-none {\n padding: var(--brand-Statistic-spacing-spacious);\n}\n\n/\n Padding options\n /\n.Statistic--padding-none {\n padding: 0;\n}\n\n.Statistic--padding-condensed {\n padding: var(--brand-Statistic-spacing-condensed);\n}\n\n.Statistic--padding-normal {\n padding: var(--brand-Statistic-spacing-normal);\n}\n\n.Statistic--padding-spacious {\n padding: var(--brand-Statistic-spacing-spacious);\n}\n\n.Statistic--narrow-padding-condensed {\n padding: var(--brand-box-spacing-condensed);\n}\n.Statistic--narrow-padding-normal {\n padding: var(--brand-box-spacing-normal);\n}\n.Statistic--narrow-padding-spacious {\n padding: var(--base-size-32);\n}\n.Statistic--narrow-padding-none {\n padding: 0;\n}\n\n@media screen and (min-width: 48rem) {\n .Statistic--regular-padding-condensed {\n padding: var(--brand-Statistic-spacing-condensed);\n }\n .Statistic--regular-padding-normal {\n padding: var(--brand-Statistic-spacing-normal);\n }\n .Statistic--regular-padding-spacious {\n padding: var(--brand-Statistic-spacing-spacious);\n }\n .Statistic--regular-padding-none {\n padding: 0;\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Statistic--wide-padding-condensed {\n padding: var(--brand-Statistic-spacing-condensed);\n }\n .Statistic--wide-padding-normal {\n padding: var(--brand-Statistic-spacing-normal);\n }\n .Statistic--wide-padding-spacious {\n padding: var(--brand-Statistic-spacing-spacious);\n }\n .Statistic--wide-padding-none {\n padding: 0;\n }\n}\n\n.Statistic__heading {\n position: relative;\n}\n\n.Statistic__heading sup {\n font-size: var(--brand-text-size-100);\n line-height: 0;\n font-weight: var(--brand-text-weight-100);\n font-stretch: normal;\n vertical-align: top;\n top: var(--base-size-6); / Optical align to heading top /\n position: relative;\n}\n\n.Statistic__heading sup a {\n / Targets footnote links. Specificity not ideal, but these are passed through by the user /\n padding: var(--base-size-4);\n display: inline-block;\n line-height: 1;\n}\n\n/\n * Description\n /\n.Statistic__description--accent {\n color: var(--brand-color-accent-primary);\n}\n\n.Statistic__description {\n position: relative;\n display: block;\n margin-block-start: var(--base-size-8);\n font-stretch: normal;\n}\n\n.Statistic__description sup {\n font-size: var(--brand-text-size-100);\n vertical-align: top;\n top: 0;\n position: relative;\n line-height: 0;\n}\n\n.Statistic__description sup a {\n / Targets footnote links. Specificity not ideal, but these are passed through by the user */\n padding: var(--base-size-4);\n display: inline-block;\n line-height: 1;\n}\n"],"mappings":""}

package/esm/SubNav/SubNav.js CHANGED Viewed

@@ -2,12 +2,12 @@ import e from "../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../hooks/useId.js";
 import { useProvidedRefOrCreate as n } from "../hooks/useRef.js";
 import { Text as r } from "../Text/Text.js";
-import { TriangleDownIcon as i, TriangleUpIcon as a } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
-import { Button as o } from "../Button/Button.js";
-import { ThemeProvider as s } from "../ThemeProvider/ThemeProvider.js";
-import { useWindowSize as c } from "../hooks/useWindowSize.js";
-import { useOnClickOutside as l } from "../hooks/useOnClickOutside.js";
-import { useKeyboardEscape as u } from "../hooks/useKeyboardEscape.js";
+import { Button as i } from "../Button/Button.js";
+import { ThemeProvider as a } from "../ThemeProvider/ThemeProvider.js";
+import { useOnClickOutside as o } from "../hooks/useOnClickOutside.js";
+import { useKeyboardEscape as s } from "../hooks/useKeyboardEscape.js";
+import { TriangleDownIcon as c, TriangleUpIcon as l } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { useWindowSize as u } from "../hooks/useWindowSize.js";
 import { useFocusTrap as d } from "../hooks/useFocusTrap.js";
 import { useContainsFocus as f } from "./useContainsFocus.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes-5gfdihUt.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/sub-nav/base-DIkvLW-s.css';/* empty css                                                                                        */
@@ -63,18 +63,18 @@ function N({ children: t }) {
 		})]
 	});
 }
-var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _, hasShadow: y }, x) => {
-	let O = n(x), A = m.useRef(null), j = m.useRef(null), M = m.useRef(null), P = w(null), [L, V] = T(!1), H = t(), [ee, te] = T(!1), { isLarge: U } = c();
+var P = y(_(({ id: i, children: a, className: f, "data-testid": g, fullWidth: _, hasShadow: y }, x) => {
+	let O = n(x), A = m.useRef(null), j = m.useRef(null), M = m.useRef(null), P = w(null), [L, V] = T(!1), H = t(), [ee, te] = T(!1), { isLarge: U } = u();
 	d({
 		containerRef: A,
 		disabled: !L
 	});
-	let W = h.toArray(s), G = b(() => {
+	let W = h.toArray(a), G = b(() => {
 		U || V(!1);
 	}, [U]), K = b(() => {
 		U || V((e) => !e);
 	}, [U]);
-	l(A, G), u(G), S(() => {
+	o(A, G), s(G), S(() => {
 		let e = j.current, t = () => {
 			if (e) {
 				let t = e.getBoundingClientRect().top;
@@ -127,7 +127,7 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 					as: "span",
 					size: "100",
 					children: $
-				}), E(L ? a : i, {
+				}), E(L ? l : c, {
 					className: p["SubNav__overlay-toggle-icon"],
 					size: 13
 				})]
@@ -146,7 +146,7 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 		className: e(p.SubNav__container, Y && p["SubNav--has-sub-heading"], Y && Q && p["SubNav--subHeadingActive"], ee && p["SubNav__container--with-anchor-nav"]),
 		children: /* @__PURE__ */ E(N, { children: /* @__PURE__ */ E("nav", {
 			ref: j,
-			id: o,
+			id: i,
 			className: e(p.SubNav, L && p["SubNav--open"], y && p["SubNav--has-shadow"], _ && p["SubNav--full-width"], f),
 			"data-testid": g || k.root,
 			children: /* @__PURE__ */ D("div", {
@@ -195,16 +195,16 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 	"data-testid": k.heading || i,
 	...a,
 	children: n
-}), L = _(({ children: a, href: o, "aria-current": s, "data-testid": l, className: d, _subMenuVariant: m, variant: h, ...g }, _) => {
-	let v = t(), { isLarge: y } = c(), [x, C] = T(!1), O = n(_), A = w(null);
+}), L = _(({ children: i, href: a, "aria-current": o, "data-testid": l, className: d, _subMenuVariant: m, variant: h, ...g }, _) => {
+	let v = t(), { isLarge: y } = u(), [x, C] = T(!1), O = n(_), A = w(null);
 	f(O, (e) => {
 		e || C(!1);
 	});
-	let j = b(() => C(!0), []), M = b(() => C(!1), []), N = b(() => C((e) => !e), []), P = !!s && s !== "false";
-	u(M), S(() => {
+	let j = b(() => C(!0), []), M = b(() => C(!1), []), N = b(() => C((e) => !e), []), P = !!o && o !== "false";
+	s(M), S(() => {
 		A.current && A.current.toggleAttribute("inert", y && !x);
 	}, [y, x]);
-	let [F, I] = a;
+	let [F, I] = i;
 	return /* @__PURE__ */ D("div", {
 		className: e(p["SubNav__link--has-sub-menu"], x && p["SubNav__link--expanded"], P && p["SubNav__link--has-active-sub-menu"]),
 		"data-testid": l || k.subMenu,
@@ -215,9 +215,9 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 		onBlur: () => null,
 		children: [
 			/* @__PURE__ */ E("a", {
-				href: o,
-				className: e(p.SubNav__link, s && p["SubNav__link--active"], d),
-				"aria-current": s,
+				href: a,
+				className: e(p.SubNav__link, o && p["SubNav__link--active"], d),
+				"aria-current": o,
 				...g,
 				children: /* @__PURE__ */ E(r, {
 					as: "span",
@@ -233,7 +233,7 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 				"aria-expanded": x ? "true" : "false",
 				"aria-controls": v,
 				"aria-label": `${F?.toString().trim()} submenu`,
-				children: /* @__PURE__ */ E(i, {
+				children: /* @__PURE__ */ E(c, {
 					className: p["SubNav__sub-menu-icon"],
 					size: 16
 				})
@@ -288,16 +288,16 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 	}) });
 });
 function z({ children: t, className: n, variant: r = "dropdown", ...i }) {
-	let a = m.useContext(j), o = w(null), { isLarge: l } = c();
+	let o = m.useContext(j), s = w(null), { isLarge: c } = u();
 	return S(() => {
 		let e = (e) => {
-			o.current && !o.current.contains(e.target) || e.target instanceof HTMLAnchorElement || e.stopPropagation();
+			s.current && !s.current.contains(e.target) || e.target instanceof HTMLAnchorElement || e.stopPropagation();
 		};
 		return r === "anchor" && document.addEventListener("click", e, !0), () => {
 			document.removeEventListener("click", e, !0);
 		};
-	}, [r]), r === "anchor" && a?.portalRef.current ? O(/* @__PURE__ */ E("nav", {
-		ref: o,
+	}, [r]), r === "anchor" && o?.portalRef.current ? O(/* @__PURE__ */ E("nav", {
+		ref: s,
 		className: e(p["SubNav__sub-menu"], p["SubNav__sub-menu--anchor"], n),
 		role: "navigation",
 		"aria-label": "Sub navigation",
@@ -308,8 +308,8 @@ function z({ children: t, className: n, variant: r = "dropdown", ...i }) {
 				e.props.onClick?.(t);
 			} }) : null)
 		})
-	}), a.portalRef.current) : /* @__PURE__ */ E(l ? s : m.Fragment, {
-		...l ? { colorMode: "light" } : {},
+	}), o.portalRef.current) : /* @__PURE__ */ E(c ? a : m.Fragment, {
+		...c ? { colorMode: "light" } : {},
 		children: /* @__PURE__ */ E("ul", {
 			className: e(p["SubNav__sub-menu"], p[`SubNav__sub-menu--${r}`], n),
 			...i,
@@ -317,15 +317,15 @@ function z({ children: t, className: n, variant: r = "dropdown", ...i }) {
 		})
 	});
 }
-function B({ children: e, href: t, variant: n = "primary", size: r = "small", ...i }) {
-	return /* @__PURE__ */ E(o, {
+function B({ children: e, href: t, variant: n = "primary", size: r = "small", ...a }) {
+	return /* @__PURE__ */ E(i, {
 		className: p.SubNav__action,
 		as: "a",
 		href: t,
 		variant: n,
 		"data-testid": k.action,
 		size: r,
-		...i,
+		...a,
 		children: e
 	});
 }

package/esm/SubdomainNavBar/NavigationVisbilityObserver.js CHANGED Viewed

@@ -1,26 +1,26 @@
 import e from "../node_modules/clsx/dist/clsx.js";
 import { useProvidedRefOrCreate as t } from "../hooks/useRef.js";
-import { ChevronDownIcon as n } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
-import { useWindowSize as r } from "../hooks/useWindowSize.js";
-import { useVisibilityObserver as i } from "./useVisibilityObserver.js";
-import { useOnClickOutside as a } from "../hooks/useOnClickOutside.js";
-import o from "./SubdomainNavBar.module.js";
-import { useKeyboardEscape as s } from "../hooks/useKeyboardEscape.js";
+import { useOnClickOutside as n } from "../hooks/useOnClickOutside.js";
+import { useKeyboardEscape as r } from "../hooks/useKeyboardEscape.js";
+import { ChevronDownIcon as i } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { useWindowSize as a } from "../hooks/useWindowSize.js";
+import { useVisibilityObserver as o } from "./useVisibilityObserver.js";
+import s from "./SubdomainNavBar.module.js";
 import c, { forwardRef as l, useCallback as u, useRef as d, useState as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/SubdomainNavBar/NavigationVisbilityObserver.tsx
-var h = l(({ children: n, className: a, ...s }, l) => {
-	let u = t(l), [d] = i(u, n), { isMedium: f } = r(), h = Object.values(d).includes(!1);
+var h = l(({ children: n, className: r, ...i }, l) => {
+	let u = t(l), [d] = o(u, n), { isMedium: f } = a(), h = Object.values(d).includes(!1);
 	return /* @__PURE__ */ m("ul", {
-		className: e(o["SubdomainNavBar-primary-nav-list"], a),
+		className: e(s["SubdomainNavBar-primary-nav-list"], r),
 		ref: u,
-		...s,
+		...i,
 		children: [c.Children.map(n, (t) => {
 			if (c.isValidElement(t)) {
 				let n = t.props["data-navitemid"];
 				if (!n) return t;
 				let r = d[n];
-				return c.cloneElement(t, { className: e(t.props.className, f && r && o["SubdomainNavBar-primary-nav-list-item--visible"], f && r === !1 && o["SubdomainNavBar-primary-nav-list-item--invisible"]) });
+				return c.cloneElement(t, { className: e(t.props.className, f && r && s["SubdomainNavBar-primary-nav-list-item--visible"], f && r === !1 && s["SubdomainNavBar-primary-nav-list-item--invisible"]) });
 			}
 			return t;
 		}), h && /* @__PURE__ */ p(g, {
@@ -29,36 +29,36 @@ var h = l(({ children: n, className: a, ...s }, l) => {
 		})]
 	});
 });
-function g({ children: t, className: r, visibilityMap: i }) {
+function g({ children: t, className: a, visibilityMap: o }) {
 	let [l, h] = f(null), g = d(null);
-	a(g, () => y());
+	n(g, () => y());
 	let _ = !!l, v = (e) => {
 		l ? y() : h(e.currentTarget);
 	}, y = u(() => {
 		h(null);
 	}, []);
-	return s(y), /* @__PURE__ */ m("li", {
-		className: e(o["SubdomainNavBar-primary-nav-list-item--overflow"], r),
+	return r(y), /* @__PURE__ */ m("li", {
+		className: e(s["SubdomainNavBar-primary-nav-list-item--overflow"], a),
 		ref: g,
 		children: [/* @__PURE__ */ m("button", {
 			"aria-expanded": _ ? "true" : "false",
 			"aria-controls": "more-navigation",
 			"aria-haspopup": "true",
 			onClick: v,
-			className: e(o["SubdomainNavBar-link"], o["SubdomainNavBar-more-link"]),
-			children: ["More", /* @__PURE__ */ p(n, {})]
+			className: e(s["SubdomainNavBar-link"], s["SubdomainNavBar-more-link"]),
+			children: ["More", /* @__PURE__ */ p(i, {})]
 		}), /* @__PURE__ */ p("div", {
 			id: "more-navigation",
 			style: { display: _ ? "block" : "none" },
-			className: e(o["SubdomainNavBar-overflow-menu"]),
+			className: e(s["SubdomainNavBar-overflow-menu"]),
 			children: /* @__PURE__ */ p("ul", {
-				className: e(o["SubdomainNavBar-overflow-menu-list"]),
+				className: e(s["SubdomainNavBar-overflow-menu-list"]),
 				children: c.Children.map(t, (t) => {
 					if (c.isValidElement(t)) {
 						let n = t.props["data-navitemid"];
-						return !n || i[n] ? null : /* @__PURE__ */ p(c.Fragment, { children: c.cloneElement(t, {
+						return !n || o[n] ? null : /* @__PURE__ */ p(c.Fragment, { children: c.cloneElement(t, {
 							onClick: y,
-							className: e(o["SubdomainNavBar-overflow-menu-item"], t.props.className)
+							className: e(s["SubdomainNavBar-overflow-menu-item"], t.props.className)
 						}) });
 					}
 					return null;