@primer/react-brand 0.75.0-rc.c3abcc84 → 0.75.0

package/esm/SectionIntroStacked/SectionIntroStacked.module.js

@@ -1,5 +1,6 @@
-import './SectionIntroStacked.module-w4PEL6ek.css';var e = {
-	SectionIntroStacked: "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked___UM_8Y",
+import './SectionIntroStacked.module-w4PEL6ek.css';//#region src/SectionIntroStacked/SectionIntroStacked.module.css
+var e = "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked___UM_8Y", t = "Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__content___kUlfY", n = "Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__icon___PkmCx", r = {
+	SectionIntroStacked: e,
 	"SectionIntroStacked--variant-gridline": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi",
 	"SectionIntroStacked-heading--muted": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH",
 	"SectionIntroStackedItem__item-text--muted": "Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text--muted___PAxL5",
@@ -12,10 +13,10 @@ import './SectionIntroStacked.module-w4PEL6ek.css';var e = {
 	"SectionIntroStacked-content": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-content___Sh_hs",
 	"SectionIntroStackedItem-item": "Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws",
 	"SectionIntroStackedItem-item--with-icon": "Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item--with-icon___XYMFo",
-	SectionIntroStackedItem__content: "Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__content___kUlfY",
-	SectionIntroStackedItem__icon: "Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__icon___PkmCx"
+	SectionIntroStackedItem__content: t,
+	SectionIntroStackedItem__icon: n
 };
 //#endregion
-export { e as default };
+export { e as SectionIntroStacked, t as SectionIntroStackedItem__content, n as SectionIntroStackedItem__icon, r as default };
 
 //# sourceMappingURL=SectionIntroStacked.module.js.map

package/esm/Stack/Stack.js

@@ -1,5 +1,5 @@
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/size-SXubYfUg.css';/* empty css                                                                          */
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { BaseSizeScale as t } from "../constants.js";
 import { useAnimation as n } from "../animation/useAnimation.js";
 import r from "./Stack.module.js";

package/esm/Stack/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","names":[],"sources":["../../src/Stack/Stack.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\n\nimport type {BaseProps} from '../component-helpers'\nimport {BaseSizeScale} from '../constants'\nimport {useAnimation} from '../animation'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/size/size.css'\nimport styles from './Stack.module.css'\n\nexport const StackDirectionVariants = ['horizontal', 'vertical'] as const\ntype StackDirectionVariants = (typeof StackDirectionVariants)[number]\nexport const defaultStackDirection = StackDirectionVariants[1]\n\nexport const StackSpacingVariants = ['none', 'condensed', 'normal', 'spacious', ...BaseSizeScale] as const\ntype StackSpacingVariants = (typeof StackSpacingVariants)[number]\nexport const defaultStackSpacing = StackSpacingVariants[1]\n\nexport const StackAlignItemVariants = ['center', 'flex-start', 'flex-end'] as const\ntype StackAlignItemVariants = (typeof StackAlignItemVariants)[number]\n\nexport const StackFlexWrapVariants = ['wrap', 'nowrap'] as const\ntype StackFlexWrapVariants = (typeof StackFlexWrapVariants)[number]\n\nexport const StackJustifyContentVariants = [\n  ...StackAlignItemVariants,\n  'space-between',\n  'space-around',\n  'space-evenly',\n] as const\ntype justifyContentVariants = (typeof StackJustifyContentVariants)[number]\n\ntype ResponsiveJustifyContentMap = {\n  narrow?: justifyContentVariants\n  regular?: justifyContentVariants\n  wide?: justifyContentVariants\n}\n\ntype ResponsiveAlignItemsMap = {\n  narrow?: StackAlignItemVariants\n  regular?: StackAlignItemVariants\n  wide?: StackAlignItemVariants\n}\n\ntype ResponsiveDirectionMap = {\n  narrow?: StackDirectionVariants\n  regular?: StackDirectionVariants\n  wide?: StackDirectionVariants\n}\n\ntype ResponsiveSpacingMap = {\n  narrow?: StackSpacingVariants\n  regular?: StackSpacingVariants\n  wide?: StackSpacingVariants\n}\n\ntype ResponsiveFlexWrapMap = {\n  narrow?: StackFlexWrapVariants\n  regular?: StackFlexWrapVariants\n  wide?: StackFlexWrapVariants\n}\n\nexport type StackProps = BaseProps<HTMLElement> & {\n  children: React.ReactNode[] | React.ReactNode\n  /**\n   * Defines the flex-direction CSS property.\n   * A string value will be applied to all viewports.\n   * An object can be used to define different values for different viewports.\n   */\n  direction?: StackDirectionVariants | ResponsiveDirectionMap\n  /**\n   * Defines the gap CSS property.\n   * A string value will be applied to all viewports.\n   * An object can be used to define different values for different viewports.\n   */\n  gap?: StackSpacingVariants | ResponsiveSpacingMap\n  /**\n   * Applies vertical alignment to child elements relative to the Stack, using the align-items CSS property.\n   * A string value will be applied to all viewports.\n   * An object can be used to define different values for different viewports.\n   */\n  alignItems?: StackAlignItemVariants | ResponsiveAlignItemsMap\n  /**\n   * Defines the padding CSS property on the parent Stack.\n   * A string value will be applied to all viewports.\n   * An object can be used to define different values for different viewports.\n   */\n  padding?: StackSpacingVariants | ResponsiveSpacingMap\n  /**\n   * Applies horizontal alignment to child elements relative to the Stack, using the justify-content CSS property.\n   * A string value will be applied to all viewports.\n   * An object can be used to define different values for different viewports.\n   */\n  justifyContent?: justifyContentVariants | ResponsiveJustifyContentMap\n  /**\n   * Forward inline styles\n   */\n  style?: React.CSSProperties\n  /**\n   * Applies flex-wrap to the Stack, using the flex-wrap CSS property.\n   */\n  flexWrap?: StackFlexWrapVariants | ResponsiveFlexWrapMap\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst StackBase = (\n  {\n    animate,\n    children,\n    direction = defaultStackDirection,\n    gap = defaultStackSpacing,\n    alignItems,\n    padding = defaultStackSpacing,\n    justifyContent,\n    className,\n    style,\n    flexWrap,\n    ...rest\n  }: StackProps,\n  ref,\n): React.ReactElement => {\n  const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n  const directionClass = useMemo(\n    () =>\n      typeof direction === 'string'\n        ? styles[`Stack--${direction}`]\n        : Object.keys(direction)\n            .map(viewport => styles[`Stack-${viewport}--${direction[viewport]}`])\n            .join(' '),\n    [direction],\n  )\n\n  const gapClass = useMemo(\n    () =>\n      typeof gap === 'string' || typeof gap === 'number'\n        ? styles[`Stack--gap-${gap}`]\n        : Object.keys(gap)\n            .map(viewport => styles[`Stack-${viewport}--gap-${gap[viewport]}`])\n            .join(' '),\n    [gap],\n  )\n\n  const paddingClass = useMemo(\n    () =>\n      typeof padding === 'string' || typeof padding === 'number'\n        ? styles[`Stack--padding-${padding}`]\n        : Object.keys(padding)\n            .map(viewport => styles[`Stack-${viewport}--padding-${padding[viewport]}`])\n            .join(' '),\n    [padding],\n  )\n\n  const alignItemsClass = useMemo(\n    () =>\n      typeof alignItems === 'string'\n        ? styles[`Stack--align-items-${alignItems}`]\n        : typeof alignItems === 'object'\n        ? Object.keys(alignItems)\n            .map(viewport => styles[`Stack-${viewport}--align-items-${alignItems[viewport]}`])\n            .join(' ')\n        : null,\n    [alignItems],\n  )\n\n  const justifyContentClass = useMemo(\n    () =>\n      typeof justifyContent === 'string'\n        ? styles[`Stack--justify-content-${justifyContent}`]\n        : typeof justifyContent === 'object'\n        ? Object.keys(justifyContent)\n            .map(viewport => styles[`Stack-${viewport}--justify-content-${justifyContent[viewport]}`])\n            .join(' ')\n        : null,\n    [justifyContent],\n  )\n\n  const flexWrapClass = useMemo(\n    () =>\n      typeof flexWrap === 'string'\n        ? styles[`Stack-flexWrap--${flexWrap}`]\n        : typeof flexWrap === 'object'\n        ? Object.keys(flexWrap)\n            .map(viewport => styles[`Stack-${viewport}-flexWrap--${flexWrap[viewport]}`])\n            .join(' ')\n        : null,\n    [flexWrap],\n  )\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        animationClasses,\n        styles.Stack,\n        directionClass,\n        gapClass,\n        alignItemsClass,\n        justifyContentClass,\n        paddingClass,\n        flexWrapClass,\n        className,\n      )}\n      style={{...animationInlineStyles, ...style}}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * Stack enables layout of its immediate children along the vertical or horizontal axis\n * @see https://primer.style/brand/components/Stack\n */\nexport const Stack = forwardRef(StackBase)\n"],"mappings":";;;;;;;;AAUA,IAAa,IAAyB,CAAC,cAAc,WAAW,EAEnD,IAAwB,EAAuB,IAE/C,IAAuB;CAAC;CAAQ;CAAa;CAAU;CAAY,GAAG;CAAc,EAEpF,IAAsB,EAAqB,IAE3C,IAAyB;CAAC;CAAU;CAAc;CAAW,EAG7D,IAAwB,CAAC,QAAQ,SAAS,EAG1C,IAA8B;CACzC,GAAG;CACH;CACA;CACA;CACD,EA0LY,IAAQ,GA7GnB,EACE,YACA,aACA,eAAY,GACZ,SAAM,GACN,eACA,aAAU,GACV,mBACA,cACA,UACA,aACA,GAAG,KAEL,MACuB;CACvB,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAiB,QAEnB,OAAO,KAAc,WACjB,EAAO,UAAU,OACjB,OAAO,KAAK,EAAU,CACnB,KAAI,MAAY,EAAO,SAAS,EAAS,IAAI,EAAU,MAAa,CACpE,KAAK,IAAI,EAClB,CAAC,EAAU,CACZ,EAEK,IAAW,QAEb,OAAO,KAAQ,YAAY,OAAO,KAAQ,WACtC,EAAO,cAAc,OACrB,OAAO,KAAK,EAAI,CACb,KAAI,MAAY,EAAO,SAAS,EAAS,QAAQ,EAAI,MAAa,CAClE,KAAK,IAAI,EAClB,CAAC,EAAI,CACN,EAEK,IAAe,QAEjB,OAAO,KAAY,YAAY,OAAO,KAAY,WAC9C,EAAO,kBAAkB,OACzB,OAAO,KAAK,EAAQ,CACjB,KAAI,MAAY,EAAO,SAAS,EAAS,YAAY,EAAQ,MAAa,CAC1E,KAAK,IAAI,EAClB,CAAC,EAAQ,CACV,EAEK,IAAkB,QAEpB,OAAO,KAAe,WAClB,EAAO,sBAAsB,OAC7B,OAAO,KAAe,WACtB,OAAO,KAAK,EAAW,CACpB,KAAI,MAAY,EAAO,SAAS,EAAS,gBAAgB,EAAW,MAAa,CACjF,KAAK,IAAI,GACZ,MACN,CAAC,EAAW,CACb,EAEK,IAAsB,QAExB,OAAO,KAAmB,WACtB,EAAO,0BAA0B,OACjC,OAAO,KAAmB,WAC1B,OAAO,KAAK,EAAe,CACxB,KAAI,MAAY,EAAO,SAAS,EAAS,oBAAoB,EAAe,MAAa,CACzF,KAAK,IAAI,GACZ,MACN,CAAC,EAAe,CACjB,EAEK,IAAgB,QAElB,OAAO,KAAa,WAChB,EAAO,mBAAmB,OAC1B,OAAO,KAAa,WACpB,OAAO,KAAK,EAAS,CAClB,KAAI,MAAY,EAAO,SAAS,EAAS,aAAa,EAAS,MAAa,CAC5E,KAAK,IAAI,GACZ,MACN,CAAC,EAAS,CACX;AAED,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,GACA,EAAO,OACP,GACA,GACA,GACA,GACA,GACA,GACA,EACD;EACD,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;EAEH;EACG,CAAA;EAQgC"}
+{"version":3,"file":"Stack.js","names":[],"sources":["../../src/Stack/Stack.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\n\nimport type {BaseProps} from '../component-helpers'\nimport {BaseSizeScale} from '../constants'\nimport {useAnimation} from '../animation'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/size/size.css'\nimport styles from './Stack.module.css'\n\nexport const StackDirectionVariants = ['horizontal', 'vertical'] as const\ntype StackDirectionVariants = (typeof StackDirectionVariants)[number]\nexport const defaultStackDirection = StackDirectionVariants[1]\n\nexport const StackSpacingVariants = ['none', 'condensed', 'normal', 'spacious', ...BaseSizeScale] as const\ntype StackSpacingVariants = (typeof StackSpacingVariants)[number]\nexport const defaultStackSpacing = StackSpacingVariants[1]\n\nexport const StackAlignItemVariants = ['center', 'flex-start', 'flex-end'] as const\ntype StackAlignItemVariants = (typeof StackAlignItemVariants)[number]\n\nexport const StackFlexWrapVariants = ['wrap', 'nowrap'] as const\ntype StackFlexWrapVariants = (typeof StackFlexWrapVariants)[number]\n\nexport const StackJustifyContentVariants = [\n  ...StackAlignItemVariants,\n  'space-between',\n  'space-around',\n  'space-evenly',\n] as const\ntype justifyContentVariants = (typeof StackJustifyContentVariants)[number]\n\ntype ResponsiveJustifyContentMap = {\n  narrow?: justifyContentVariants\n  regular?: justifyContentVariants\n  wide?: justifyContentVariants\n}\n\ntype ResponsiveAlignItemsMap = {\n  narrow?: StackAlignItemVariants\n  regular?: StackAlignItemVariants\n  wide?: StackAlignItemVariants\n}\n\ntype ResponsiveDirectionMap = {\n  narrow?: StackDirectionVariants\n  regular?: StackDirectionVariants\n  wide?: StackDirectionVariants\n}\n\ntype ResponsiveSpacingMap = {\n  narrow?: StackSpacingVariants\n  regular?: StackSpacingVariants\n  wide?: StackSpacingVariants\n}\n\ntype ResponsiveFlexWrapMap = {\n  narrow?: StackFlexWrapVariants\n  regular?: StackFlexWrapVariants\n  wide?: StackFlexWrapVariants\n}\n\nexport type StackProps = BaseProps<HTMLElement> & {\n  children: React.ReactNode[] | React.ReactNode\n  /**\n   * Defines the flex-direction CSS property.\n   * A string value will be applied to all viewports.\n   * An object can be used to define different values for different viewports.\n   */\n  direction?: StackDirectionVariants | ResponsiveDirectionMap\n  /**\n   * Defines the gap CSS property.\n   * A string value will be applied to all viewports.\n   * An object can be used to define different values for different viewports.\n   */\n  gap?: StackSpacingVariants | ResponsiveSpacingMap\n  /**\n   * Applies vertical alignment to child elements relative to the Stack, using the align-items CSS property.\n   * A string value will be applied to all viewports.\n   * An object can be used to define different values for different viewports.\n   */\n  alignItems?: StackAlignItemVariants | ResponsiveAlignItemsMap\n  /**\n   * Defines the padding CSS property on the parent Stack.\n   * A string value will be applied to all viewports.\n   * An object can be used to define different values for different viewports.\n   */\n  padding?: StackSpacingVariants | ResponsiveSpacingMap\n  /**\n   * Applies horizontal alignment to child elements relative to the Stack, using the justify-content CSS property.\n   * A string value will be applied to all viewports.\n   * An object can be used to define different values for different viewports.\n   */\n  justifyContent?: justifyContentVariants | ResponsiveJustifyContentMap\n  /**\n   * Forward inline styles\n   */\n  style?: React.CSSProperties\n  /**\n   * Applies flex-wrap to the Stack, using the flex-wrap CSS property.\n   */\n  flexWrap?: StackFlexWrapVariants | ResponsiveFlexWrapMap\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst StackBase = (\n  {\n    animate,\n    children,\n    direction = defaultStackDirection,\n    gap = defaultStackSpacing,\n    alignItems,\n    padding = defaultStackSpacing,\n    justifyContent,\n    className,\n    style,\n    flexWrap,\n    ...rest\n  }: StackProps,\n  ref,\n): React.ReactElement => {\n  const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n  const directionClass = useMemo(\n    () =>\n      typeof direction === 'string'\n        ? styles[`Stack--${direction}`]\n        : Object.keys(direction)\n            .map(viewport => styles[`Stack-${viewport}--${direction[viewport]}`])\n            .join(' '),\n    [direction],\n  )\n\n  const gapClass = useMemo(\n    () =>\n      typeof gap === 'string' || typeof gap === 'number'\n        ? styles[`Stack--gap-${gap}`]\n        : Object.keys(gap)\n            .map(viewport => styles[`Stack-${viewport}--gap-${gap[viewport]}`])\n            .join(' '),\n    [gap],\n  )\n\n  const paddingClass = useMemo(\n    () =>\n      typeof padding === 'string' || typeof padding === 'number'\n        ? styles[`Stack--padding-${padding}`]\n        : Object.keys(padding)\n            .map(viewport => styles[`Stack-${viewport}--padding-${padding[viewport]}`])\n            .join(' '),\n    [padding],\n  )\n\n  const alignItemsClass = useMemo(\n    () =>\n      typeof alignItems === 'string'\n        ? styles[`Stack--align-items-${alignItems}`]\n        : typeof alignItems === 'object'\n        ? Object.keys(alignItems)\n            .map(viewport => styles[`Stack-${viewport}--align-items-${alignItems[viewport]}`])\n            .join(' ')\n        : null,\n    [alignItems],\n  )\n\n  const justifyContentClass = useMemo(\n    () =>\n      typeof justifyContent === 'string'\n        ? styles[`Stack--justify-content-${justifyContent}`]\n        : typeof justifyContent === 'object'\n        ? Object.keys(justifyContent)\n            .map(viewport => styles[`Stack-${viewport}--justify-content-${justifyContent[viewport]}`])\n            .join(' ')\n        : null,\n    [justifyContent],\n  )\n\n  const flexWrapClass = useMemo(\n    () =>\n      typeof flexWrap === 'string'\n        ? styles[`Stack-flexWrap--${flexWrap}`]\n        : typeof flexWrap === 'object'\n        ? Object.keys(flexWrap)\n            .map(viewport => styles[`Stack-${viewport}-flexWrap--${flexWrap[viewport]}`])\n            .join(' ')\n        : null,\n    [flexWrap],\n  )\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        animationClasses,\n        styles.Stack,\n        directionClass,\n        gapClass,\n        alignItemsClass,\n        justifyContentClass,\n        paddingClass,\n        flexWrapClass,\n        className,\n      )}\n      style={{...animationInlineStyles, ...style}}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * Stack enables layout of its immediate children along the vertical or horizontal axis\n * @see https://primer.style/brand/components/Stack\n */\nexport const Stack = forwardRef(StackBase)\n"],"mappings":";;;;;;;;AAUA,IAAa,IAAyB,CAAC,cAAc,UAAU,GAElD,IAAwB,EAAuB,IAE/C,IAAuB;CAAC;CAAQ;CAAa;CAAU;CAAY,GAAG;AAAa,GAEnF,IAAsB,EAAqB,IAE3C,IAAyB;CAAC;CAAU;CAAc;AAAU,GAG5D,IAAwB,CAAC,QAAQ,QAAQ,GAGzC,IAA8B;CACzC,GAAG;CACH;CACA;CACA;AACF,GA0La,IAAQ,GA7GnB,EACE,YACA,aACA,eAAY,GACZ,SAAM,GACN,eACA,aAAU,GACV,mBACA,cACA,UACA,aACA,GAAG,KAEL,MACuB;CACvB,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,CAAO,GAEjF,IAAiB,QAEnB,OAAO,KAAc,WACjB,EAAO,UAAU,OACjB,OAAO,KAAK,CAAS,CAAC,CACnB,KAAI,MAAY,EAAO,SAAS,EAAS,IAAI,EAAU,KAAY,CAAC,CACpE,KAAK,GAAG,GACjB,CAAC,CAAS,CACZ,GAEM,IAAW,QAEb,OAAO,KAAQ,YAAY,OAAO,KAAQ,WACtC,EAAO,cAAc,OACrB,OAAO,KAAK,CAAG,CAAC,CACb,KAAI,MAAY,EAAO,SAAS,EAAS,QAAQ,EAAI,KAAY,CAAC,CAClE,KAAK,GAAG,GACjB,CAAC,CAAG,CACN,GAEM,IAAe,QAEjB,OAAO,KAAY,YAAY,OAAO,KAAY,WAC9C,EAAO,kBAAkB,OACzB,OAAO,KAAK,CAAO,CAAC,CACjB,KAAI,MAAY,EAAO,SAAS,EAAS,YAAY,EAAQ,KAAY,CAAC,CAC1E,KAAK,GAAG,GACjB,CAAC,CAAO,CACV,GAEM,IAAkB,QAEpB,OAAO,KAAe,WAClB,EAAO,sBAAsB,OAC7B,OAAO,KAAe,WACtB,OAAO,KAAK,CAAU,CAAC,CACpB,KAAI,MAAY,EAAO,SAAS,EAAS,gBAAgB,EAAW,KAAY,CAAC,CACjF,KAAK,GAAG,IACX,MACN,CAAC,CAAU,CACb,GAEM,IAAsB,QAExB,OAAO,KAAmB,WACtB,EAAO,0BAA0B,OACjC,OAAO,KAAmB,WAC1B,OAAO,KAAK,CAAc,CAAC,CACxB,KAAI,MAAY,EAAO,SAAS,EAAS,oBAAoB,EAAe,KAAY,CAAC,CACzF,KAAK,GAAG,IACX,MACN,CAAC,CAAc,CACjB,GAEM,IAAgB,QAElB,OAAO,KAAa,WAChB,EAAO,mBAAmB,OAC1B,OAAO,KAAa,WACpB,OAAO,KAAK,CAAQ,CAAC,CAClB,KAAI,MAAY,EAAO,SAAS,EAAS,aAAa,EAAS,KAAY,CAAC,CAC5E,KAAK,GAAG,IACX,MACN,CAAC,CAAQ,CACX;CAEA,OACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,GACA,EAAO,OACP,GACA,GACA,GACA,GACA,GACA,GACA,CACF;EACA,OAAO;GAAC,GAAG;GAAuB,GAAG;EAAK;EAC1C,GAAI;EAEH;CACE,CAAA;AAET,CAMyC"}

package/esm/Stack/Stack.module.js

@@ -1,5 +1,6 @@
-import './Stack.module-BlpDkOqI.css';var e = {
-	Stack: "Primer_Brand__Stack-module__Stack___kkChc",
+import './Stack.module-BlpDkOqI.css';//#region src/Stack/Stack.module.css
+var e = "Primer_Brand__Stack-module__Stack___kkChc", t = {
+	Stack: e,
 	"Stack--vertical": "Primer_Brand__Stack-module__Stack--vertical___bDZvE",
 	"Stack--horizontal": "Primer_Brand__Stack-module__Stack--horizontal___SffMX",
 	"Stack-narrow--vertical": "Primer_Brand__Stack-module__Stack-narrow--vertical___IAUDe",
@@ -238,6 +239,6 @@ import './Stack.module-BlpDkOqI.css';var e = {
 	"Stack-wide-flexWrap--no-wrap": "Primer_Brand__Stack-module__Stack-wide-flexWrap--no-wrap___7PGRZ"
 };
 //#endregion
-export { e as default };
+export { e as Stack, t as default };
 
 //# sourceMappingURL=Stack.module.js.map

package/esm/Statistic/Statistic.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useAnimation as t } from "../animation/useAnimation.js";
 import { Text as n } from "../Text/Text.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/statistic/base-DWOQrMC8.css';/* empty css                                                                                          */

package/esm/Statistic/Statistic.js.map

@@ -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(\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"}
+{"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;AAAO,GAC5C,IAAyB;CAAC;CAAQ;CAAa;CAAU;AAAU,GA8C1E,IAAU,EACd,MAAM,YACR,GAEM,IAEF;CACF,OAAO;CACP,QAAQ;CACR,OAAO;AACT,GAEM,KAAgB,GAAkB,MACjC,IAED,OAAO,KAAU,YAAY,OAAO,KAAU,WACzC,EAAO,cAAc,EAAS,GAAG,OAEjC,OAAO,KAAK,CAAK,CAAC,CACtB,KAAI,MAAY,EAAO,cAAc,EAAS,GAAG,EAAS,GAAG,EAAM,KAAY,CAAC,CAChF,KAAK,GAAG,IAPM,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,CAAO,GACjF,IAAiB,QAAc,EAAa,WAAW,CAAO,GAAG,CAAC,CAAO,CAAC,GAK1E,IAAe,QAAc;EACjC,IAAM,IAAY,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAAC,MAAK,MAEpD,EAAM,eAA8D,CAAK,KAAK,EAAM,SAAS,CAEhG;EAED,OAAO,EAAM,eAA8D,CAAS,IAC/E,IACD,KAAA;CACN,GAAG,CAAC,CAAQ,CAAC,GAEP,IAAmB,QAAc;EACrC,IAAM,IAAY,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAAC,MAAK,MAEpD,EAAM,eAAkE,CAAK,KAC7E,EAAM,SAAS,CAElB;EAED,OAAO,EAAM,eAAkE,CAAS,IACnF,IACD,KAAA;CACN,GAAG,CAAC,CAAQ,CAAC,GAET,IAAkB;CAetB,OAVI,KAAoB,MACtB,IAAkB,EAAM,aAAa,GAAiB,EACpD,UACE,kBAAA,GAAA,EAAA,UAAA;EACG,EAAgB,MAAM;EAAS;EAAE;CAClC,EAAA,CAAA,EAEN,CAAC,IAID,kBAAC,OAAD;EACO;EACL,WAAW,EACT,EAAO,WACP,EAAO,sBAAsB,MAC7B,GACA,GACA,CACF;EACA,OAAO;GAAC,GAAG;GAAuB,GAAG;EAAK;EAC1C,eAAa,KAAU,EAAQ;EAC/B,GAAI;YAXN;GAaG,KAAoB,kBAAC,GAAD,CAAmB,CAAA;GAEvC,KACC,EAAM,aAAa,GAAiB,EAClC,MAAM,EAAgB,MAAM,QAAQ,EAAgB,GACtD,CAAC;GAEF,KAAqB,kBAAC,GAAD,CAAoB,CAAA;EACvC;;AAET,CACF,GAIM,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,CAAS;CACjD;CACE;CACF;CACN,GAAI;CAEH;AACG,CAAA,CAGZ,GAOM,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,CAAS;CACzG,GAAI;CAEH;AACG,CAAA,CAGZ,GAMa,IAAY,OAAO,OAAO,GAAY;CACjD,SAAS;CACT,aAAa;CACb;AACF,CAAC"}

package/esm/Statistic/Statistic.module.js

@@ -1,5 +1,6 @@
-import './Statistic.module-DvdiSbXk.css';var e = {
-	Statistic: "Primer_Brand__Statistic-module__Statistic___tRtgu",
+import './Statistic.module-DvdiSbXk.css';//#region src/Statistic/Statistic.module.css
+var e = "Primer_Brand__Statistic-module__Statistic___tRtgu", t = "Primer_Brand__Statistic-module__Statistic__heading___zkSQX", n = "Primer_Brand__Statistic-module__Statistic__description___6v0Xv", r = {
+	Statistic: e,
 	"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",
@@ -17,11 +18,11 @@ import './Statistic.module-DvdiSbXk.css';var e = {
 	"Statistic--wide-padding-normal": "Primer_Brand__Statistic-module__Statistic--wide-padding-normal___VpWHZ",
 	"Statistic--wide-padding-spacious": "Primer_Brand__Statistic-module__Statistic--wide-padding-spacious___55ImP",
 	"Statistic--wide-padding-none": "Primer_Brand__Statistic-module__Statistic--wide-padding-none___36TdO",
-	Statistic__heading: "Primer_Brand__Statistic-module__Statistic__heading___zkSQX",
+	Statistic__heading: t,
 	"Statistic__description--accent": "Primer_Brand__Statistic-module__Statistic__description--accent___yiXP4",
-	Statistic__description: "Primer_Brand__Statistic-module__Statistic__description___6v0Xv"
+	Statistic__description: n
 };
 //#endregion
-export { e as default };
+export { e as Statistic, n as Statistic__description, t as Statistic__heading, r as default };
 
 //# sourceMappingURL=Statistic.module.js.map

package/esm/SubNav/SubNav.d.ts

@@ -41,7 +41,7 @@ type LinkBaseProps = {
 type SubMenuProps = {
     variant?: SubMenuVariants;
 } & React.HTMLAttributes<HTMLUListElement> & BaseProps<HTMLUListElement>;
-declare function SubMenuBase({ children, className, variant, ...props }: SubMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function SubMenuBase({ children, className, variant, ...props }: SubMenuProps): React.JSX.Element;
 type SubNavActionProps = {
     /**
      * Required path or location for the action button to link to.
@@ -56,14 +56,14 @@ type SubNavActionProps = {
      */
     variant?: (typeof ButtonVariants)[number];
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
-declare function ActionBase({ children, href, variant, size, ...rest }: SubNavActionProps): import("react/jsx-runtime").JSX.Element;
+declare function ActionBase({ children, href, variant, size, ...rest }: SubNavActionProps): React.JSX.Element;
 /**
  * Use SubNav to display a secondary navigation beneath a primary header.
  * @see https://primer.style/brand/components/SubNav
  */
 export declare const SubNav: React.NamedExoticComponent<Omit<SubNavProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
-    Heading: ({ href, children, className, "data-testid": testID, ...props }: HeadingBaseProps) => import("react/jsx-runtime").JSX.Element;
-    SubHeading: ({ href, children, className, "data-testid": testID, ...props }: SubHeadingBaseProps) => import("react/jsx-runtime").JSX.Element;
+    Heading: ({ href, children, className, "data-testid": testID, ...props }: HeadingBaseProps) => React.JSX.Element;
+    SubHeading: ({ href, children, className, "data-testid": testID, ...props }: SubHeadingBaseProps) => React.JSX.Element;
     Link: React.ForwardRefExoticComponent<Omit<LinkBaseProps, "ref"> & React.RefAttributes<HTMLAnchorElement | HTMLDivElement>>;
     Action: typeof ActionBase;
     SubMenu: typeof SubMenuBase;

package/esm/SubNav/SubNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubNav.d.ts","sourceRoot":"","sources":["../../src/SubNav/SubNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAYZ,KAAK,iBAAiB,EAEtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,EAAS,WAAW,EAAE,cAAc,EAAQ,SAAS,EAA+B,MAAM,IAAI,CAAA;AAWrG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,8FAA8F,CAAA;AACrG,OAAO,2GAA2G,CAAA;AA4BlH,eAAO,MAAM,qBAAqB,iCAAkC,CAAA;AACpE,KAAK,eAAe,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;CAC5C,CAAA;AAID,eAAO,MAAM,gBAAgB,yBAM5B,CAAA;AA6CD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;AA+PhD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAe9B,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAe9B,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC9B,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AA6J9B,KAAK,YAAY,GAAG;IAClB,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GACxC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAE7B,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,OAAoB,EAAE,GAAG,KAAK,EAAC,EAAE,YAAY,2CAgEvF;AAED,KAAK,iBAAiB,GAAG;IACvB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;CAC1C,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAA;AAE/D,iBAAS,UAAU,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,OAAmB,EAAE,IAAc,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,2CAcpG;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM;8EA7SgE,gBAAgB;iFAmBb,mBAAmB;;;;;;;;;;;;;CAiSvG,CAAA"}
+{"version":3,"file":"SubNav.d.ts","sourceRoot":"","sources":["../../src/SubNav/SubNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAYZ,KAAK,iBAAiB,EAEtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,EAAS,WAAW,EAAE,cAAc,EAAQ,SAAS,EAA+B,MAAM,IAAI,CAAA;AAWrG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,8FAA8F,CAAA;AACrG,OAAO,2GAA2G,CAAA;AA4BlH,eAAO,MAAM,qBAAqB,iCAAkC,CAAA;AACpE,KAAK,eAAe,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;CAC5C,CAAA;AAID,eAAO,MAAM,gBAAgB,yBAM5B,CAAA;AA6CD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;AA+PhD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAe9B,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAe9B,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC9B,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AA6J9B,KAAK,YAAY,GAAG;IAClB,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GACxC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAE7B,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,OAAoB,EAAE,GAAG,KAAK,EAAC,EAAE,YAAY,qBAgEvF;AAED,KAAK,iBAAiB,GAAG;IACvB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;CAC1C,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAA;AAE/D,iBAAS,UAAU,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,OAAmB,EAAE,IAAc,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,qBAcpG;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM;8EA7SgE,gBAAgB;iFAmBb,mBAAmB;;;;;;;;;;;;;CAiSvG,CAAA"}

package/esm/SubNav/SubNav.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as 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";
@@ -6,7 +6,8 @@ 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 { TriangleDownIcon as c } from "../node_modules/@primer/octicons-react/dist/icons/TriangleDownIcon.js";
+import { TriangleUpIcon as l } from "../node_modules/@primer/octicons-react/dist/icons/TriangleUpIcon.js";
 import { useWindowSize as u } from "../hooks/useWindowSize.js";
 import { useFocusTrap as d } from "../hooks/useFocusTrap.js";
 import { useContainsFocus as f } from "./useContainsFocus.js";
@@ -87,13 +88,14 @@ var P = y(_(({ id: i, children: a, className: f, "data-testid": g, fullWidth: _,
 	}, [L, U]);
 	let q = W.find((e) => v(e) && !!e.props["aria-current"]);
 	S(() => {
-		te(W.some((e) => {
+		let e = W.some((e) => {
 			if (v(e) && e.type === R) {
 				let t = h.toArray(e.props.children)[1];
 				if (v(t) && t.type === z && t.props.variant === "anchor") return !0;
 			}
 			return !1;
-		}));
+		});
+		te(e);
 	}, [W]);
 	let { heading: J, subheading: Y, links: ne, action: re } = W.reduce((e, t) => {
 		if (v(t)) if (t.type === F) e.heading = t;

package/esm/SubNav/SubNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubNav.js","names":[],"sources":["../../src/SubNav/SubNav.tsx"],"sourcesContent":["import React, {\n  Children,\n  createContext,\n  forwardRef,\n  isValidElement,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefObject,\n} from 'react'\nimport {Button, ButtonSizes, ButtonVariants, Text, TextProps, ThemeProvider, useWindowSize} from '..'\n\nimport {clsx} from 'clsx'\nimport {TriangleDownIcon, TriangleUpIcon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useFocusTrap} from '../hooks/useFocusTrap'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {useContainsFocus} from './useContainsFocus'\n\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './SubNav.module.css'\nimport {createPortal} from 'react-dom'\n\nconst testIds = {\n  root: 'SubNav-root',\n  get button() {\n    return `${this.root}-button`\n  },\n  get overlay() {\n    return `${this.root}-overlay`\n  },\n  get link() {\n    return `${this.root}-link`\n  },\n  get heading() {\n    return `${this.root}-heading`\n  },\n  get action() {\n    return `${this.root}-action`\n  },\n  get subMenu() {\n    return `${this.root}-sub-menu`\n  },\n}\n\nexport const SubNavSubMenuVariants = ['dropdown', 'anchor'] as const\ntype SubMenuVariants = (typeof SubNavSubMenuVariants)[number]\n\ntype SubNavContextType = {\n  portalRef: RefObject<HTMLDivElement | null>\n}\n\nconst SubNavContext = createContext<SubNavContextType | undefined>(undefined)\n\nexport const useSubNavContext = () => {\n  const context = useContext(SubNavContext)\n  if (!context) {\n    throw new Error('useSubNavContext must be used within a SubNavProvider')\n  }\n  return context\n}\n\nfunction SubNavProvider({children}: {children: React.ReactNode}) {\n  const anchoredNavOuterPortalRef = React.useRef<HTMLDivElement>(null)\n  const anchoredNavPortalRef = React.useRef<HTMLDivElement>(null)\n\n  const value = useMemo(\n    () => ({\n      portalRef: anchoredNavPortalRef,\n    }),\n    [],\n  )\n\n  useEffect(() => {\n    const menuContainer = anchoredNavOuterPortalRef.current\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        entry.target.classList.toggle(styles['SubNav__anchor-menu-outer-container--stuck'], entry.intersectionRatio < 1)\n      },\n      {threshold: [1]},\n    )\n\n    if (menuContainer) {\n      observer.observe(menuContainer)\n    }\n\n    return () => {\n      if (menuContainer) {\n        observer.unobserve(menuContainer)\n      }\n    }\n  }, [])\n\n  return (\n    <SubNavContext.Provider value={value}>\n      {children}\n\n      <div className={styles['SubNav__anchor-menu-outer-container']} ref={anchoredNavOuterPortalRef}>\n        <div className={clsx(styles['SubNav__anchor-menu-container'])} ref={anchoredNavPortalRef} />\n      </div>\n    </SubNavContext.Provider>\n  )\n}\n\nexport type SubNavProps = {\n  /**\n   * @deprecated The hasShadow prop is deprecated and will be removed in a future release.\n   */\n  hasShadow?: boolean\n  /**\n   * Allows the SubNav to be used at full width,\n   * removing any internal padding and guttering.\n   */\n  fullWidth?: boolean\n  'data-testid'?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\nconst SubNavRoot = memo(\n  forwardRef<HTMLDivElement, SubNavProps>(\n    ({id, children, className, 'data-testid': testId, fullWidth, hasShadow}, ref) => {\n      const rootRef = useProvidedRefOrCreate<HTMLDivElement>(ref as RefObject<HTMLDivElement>)\n      const innerRootRef = React.useRef<HTMLDivElement>(null)\n      const navRef = React.useRef<HTMLElement>(null)\n      const overlayRef = React.useRef<HTMLUListElement>(null)\n      const narrowButtonRef = useRef<HTMLButtonElement>(null)\n      const [isOpenAtNarrow, setIsOpenAtNarrow] = useState(false)\n      const idForLinkContainer = useId()\n      const [hasAnchoredNav, setHasAnchoredNav] = useState(false)\n\n      const {isLarge} = useWindowSize()\n\n      useFocusTrap({containerRef: innerRootRef, disabled: !isOpenAtNarrow})\n\n      const childrenArr = Children.toArray(children)\n\n      const closeMenuCallback = useCallback(() => {\n        if (isLarge) return\n        setIsOpenAtNarrow(false)\n      }, [isLarge])\n\n      const handleMenuToggle = useCallback(() => {\n        if (isLarge) return\n        setIsOpenAtNarrow(prev => !prev)\n      }, [isLarge])\n\n      useOnClickOutside(innerRootRef, closeMenuCallback)\n      useKeyboardEscape(closeMenuCallback)\n\n      useEffect(() => {\n        const navElement = navRef.current\n\n        const updateAvailableHeight = () => {\n          if (navElement) {\n            const navTop = navElement.getBoundingClientRect().top\n            navElement.style.setProperty('--subnav-available-height', `${window.innerHeight - navTop}px`)\n          }\n        }\n\n        if (isOpenAtNarrow && !isLarge) {\n          document.body.style.overflow = 'hidden'\n          updateAvailableHeight()\n          // eslint-disable-next-line github/prefer-observers\n          window.addEventListener('resize', updateAvailableHeight)\n        } else {\n          document.body.style.overflow = 'auto'\n\n          if (navElement) {\n            navElement.style.removeProperty('--subnav-available-height')\n          }\n        }\n\n        return () => {\n          document.body.style.overflow = 'auto'\n          window.removeEventListener('resize', updateAvailableHeight)\n\n          if (navElement) {\n            navElement.style.removeProperty('--subnav-available-height')\n          }\n        }\n      }, [isOpenAtNarrow, isLarge])\n\n      const activeLink = childrenArr.find(child => {\n        return isValidElement<LinkBaseProps>(child) && Boolean(child.props['aria-current'])\n      }) as React.ReactElement<LinkBaseProps> | undefined\n\n      useEffect(() => {\n        // check if there is an anchored nav in the SubNav.SubMenu child\n        const hasAnchorVariant = childrenArr.some(child => {\n          if (isValidElement<LinkBaseProps>(child) && child.type === LinkBase) {\n            const childNodes = Children.toArray(child.props.children)\n            const maybeSubMenu = childNodes[1]\n            if (\n              isValidElement<SubMenuProps>(maybeSubMenu) &&\n              maybeSubMenu.type === SubMenuBase &&\n              maybeSubMenu.props.variant === 'anchor'\n            ) {\n              return true\n            }\n          }\n          return false\n        })\n        setHasAnchoredNav(hasAnchorVariant)\n      }, [childrenArr])\n\n      const {\n        heading: HeadingChild,\n        subheading: SubHeadingChild,\n        links: LinkChildren,\n        action: ActionChild,\n      } = childrenArr.reduce(\n        (\n          acc: {\n            heading?: React.ReactElement<HeadingBaseProps>\n            subheading?: React.ReactElement<SubHeadingBaseProps>\n            links: React.ReactElement<LinkBaseProps>[]\n            action?: React.ReactElement<SubNavActionProps>\n          },\n          child,\n        ) => {\n          if (isValidElement(child)) {\n            if (child.type === HeadingBase) {\n              acc.heading = child as React.ReactElement<HeadingBaseProps>\n            } else if (child.type === SubHeadingBase) {\n              acc.subheading = child as React.ReactElement<SubHeadingBaseProps>\n            } else if (child.type === LinkBase) {\n              const linkChild = child as React.ReactElement<LinkBaseProps>\n              const childNodes = Children.toArray(linkChild.props.children)\n              const [link, subMenu] = childNodes\n              const isAnchorVariant =\n                isValidElement<SubMenuProps>(subMenu) &&\n                subMenu.type === SubMenuBase &&\n                subMenu.props.variant === 'anchor'\n\n              acc.links.push(\n                React.cloneElement(linkChild, {\n                  ...(isAnchorVariant ? {children: [link]} : {}),\n                  onClick: linkChild.props['aria-current'] ? closeMenuCallback : linkChild.props.onClick,\n                }),\n              )\n            } else if (child.type === ActionBase) {\n              acc.action = child as React.ReactElement<SubNavActionProps>\n            }\n          }\n          return acc\n        },\n        {heading: undefined, subheading: undefined, links: [], action: undefined},\n      )\n\n      const activeLinkChildren = activeLink ? Children.toArray(activeLink.props.children) : []\n      const activeLinklabel = activeLinkChildren[0]\n\n      // needed to prevent rendering of anchor subnav inside the narrow <button> element\n      const maybeSubMenu = activeLinkChildren[1]\n      const MaybeSubNav =\n        isValidElement<SubMenuProps>(maybeSubMenu) &&\n        maybeSubMenu.type === SubMenuBase &&\n        maybeSubMenu.props.variant === 'anchor'\n          ? maybeSubMenu\n          : null\n\n      const subHeadingIsActive =\n        isValidElement<SubHeadingBaseProps>(SubHeadingChild) &&\n        SubHeadingChild.type === SubHeadingBase &&\n        Boolean(SubHeadingChild.props['aria-current'])\n      const narrowButtonLabel = SubHeadingChild ? activeLinklabel : null\n\n      const NarrowButton = useMemo(\n        () => (\n          <div\n            className={clsx(styles['SubNav__overlay-toggle'], isOpenAtNarrow && styles['SubNav__overlay-toggle--open'])}\n          >\n            <span\n              className={clsx(\n                styles['SubNav__overlay-toggle-content'],\n                !narrowButtonLabel && styles['SubNav__overlay-toggle-content--end'],\n              )}\n            >\n              <button\n                ref={narrowButtonRef}\n                className={styles['SubNav__overlay-toggle-label']}\n                data-testid={testIds.button}\n                onClick={isOpenAtNarrow ? closeMenuCallback : handleMenuToggle}\n                aria-expanded={isOpenAtNarrow ? 'true' : 'false'}\n                aria-controls={idForLinkContainer}\n                aria-label={activeLinklabel ? `Navigation menu. Current page: ${activeLinklabel}` : 'Navigation menu'}\n              >\n                {narrowButtonLabel && (\n                  <Text as=\"span\" size=\"100\">\n                    {narrowButtonLabel}\n                  </Text>\n                )}\n                {isOpenAtNarrow ? (\n                  <TriangleUpIcon className={styles['SubNav__overlay-toggle-icon']} size={13} />\n                ) : (\n                  <TriangleDownIcon className={styles['SubNav__overlay-toggle-icon']} size={13} />\n                )}\n              </button>\n            </span>\n          </div>\n        ),\n        [activeLinklabel, closeMenuCallback, handleMenuToggle, idForLinkContainer, isOpenAtNarrow, narrowButtonLabel],\n      )\n\n      return (\n        <div\n          ref={rootRef}\n          className={clsx(\n            styles['SubNav__container'],\n            SubHeadingChild && styles['SubNav--has-sub-heading'],\n            SubHeadingChild && subHeadingIsActive && styles['SubNav--subHeadingActive'],\n            hasAnchoredNav && styles['SubNav__container--with-anchor-nav'],\n          )}\n        >\n          <SubNavProvider>\n            <nav\n              ref={navRef}\n              id={id}\n              className={clsx(\n                styles.SubNav,\n                isOpenAtNarrow && styles['SubNav--open'],\n                hasShadow && styles['SubNav--has-shadow'],\n                fullWidth && styles['SubNav--full-width'],\n                className,\n              )}\n              data-testid={testId || testIds.root}\n            >\n              <div ref={innerRootRef} className={styles['SubNav--header-container-outer']}>\n                <div className={styles['SubNav__header-container']}>\n                  {HeadingChild && <div className={styles['SubNav__heading-container']}>{HeadingChild}</div>}\n\n                  {SubHeadingChild && (\n                    <div\n                      className={clsx(\n                        styles['SubNav__heading-container'],\n                        styles['SubNav__subheading-container'],\n                        subHeadingIsActive && styles['SubNav__subheading-container-active'],\n                      )}\n                    >\n                      {SubHeadingChild}\n                    </div>\n                  )}\n\n                  {!isLarge && (!SubHeadingChild || subHeadingIsActive) && NarrowButton}\n\n                  {MaybeSubNav && MaybeSubNav}\n                </div>\n                {!isLarge && SubHeadingChild && !subHeadingIsActive && NarrowButton}\n                {LinkChildren.length > 0 && (\n                  <ul\n                    ref={overlayRef}\n                    id={idForLinkContainer}\n                    className={clsx(\n                      styles['SubNav__links-overlay'],\n                      isOpenAtNarrow && styles['SubNav__links-overlay--open'],\n                    )}\n                    data-testid={testIds.overlay}\n                  >\n                    {LinkChildren}\n                    {ActionChild && <li className={styles['SubNav__action-container']}>{ActionChild}</li>}\n                  </ul>\n                )}\n              </div>\n            </nav>\n          </SubNavProvider>\n        </div>\n      )\n    },\n  ),\n)\n\ntype HeadingBaseProps = {\n  href: string\n  'data-testid'?: string\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n  BaseProps<HTMLAnchorElement>\n\nconst HeadingBase = ({href, children, className, 'data-testid': testID, ...props}: HeadingBaseProps) => {\n  return (\n    <a\n      href={href}\n      className={clsx(styles['SubNav__heading'], className)}\n      data-testid={testIds.heading || testID}\n      {...props}\n    >\n      {children}\n    </a>\n  )\n}\n\ntype SubHeadingBaseProps = {\n  href: string\n  'data-testid'?: string\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n  BaseProps<HTMLAnchorElement>\n\nconst SubHeadingBase = ({href, children, className, 'data-testid': testID, ...props}: SubHeadingBaseProps) => {\n  return (\n    <a\n      href={href}\n      className={clsx(styles['SubNav__heading'], styles['SubNav__link'], styles['SubNav__subHeading'], className)}\n      data-testid={testIds.heading || testID}\n      {...props}\n    >\n      {children}\n    </a>\n  )\n}\n\ntype LinkBaseProps = {\n  href: string\n  'data-testid'?: string\n  variant?: TextProps['variant']\n  _subMenuVariant?: SubMenuVariants\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n  BaseProps<HTMLAnchorElement>\n\nconst LinkBaseWithSubmenu = forwardRef<HTMLDivElement, LinkBaseProps>(\n  (\n    {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, className, _subMenuVariant, variant, ...props},\n    forwardedRef,\n  ) => {\n    const submenuId = useId()\n    const {isLarge} = useWindowSize()\n\n    const [isExpanded, setIsExpanded] = useState(false)\n    const ref = useProvidedRefOrCreate(forwardedRef as RefObject<HTMLDivElement>)\n    const subMenuChildrenRef = useRef<HTMLDivElement>(null)\n\n    useContainsFocus(ref, (containsFocus: boolean) => {\n      if (!containsFocus) {\n        setIsExpanded(false)\n      }\n    })\n\n    const expand = useCallback(() => setIsExpanded(true), [])\n    const collapse = useCallback(() => setIsExpanded(false), [])\n    const toggleExpanded = useCallback(() => setIsExpanded(prev => !prev), [])\n    const isAriaCurrent = Boolean(ariaCurrent) && ariaCurrent !== 'false'\n\n    useKeyboardEscape(collapse)\n\n    useEffect(() => {\n      if (subMenuChildrenRef.current) {\n        // Workaround to avoid React 18 / 19 type mismatches with the `inert` attribute.\n        // This approach won't immediately apply the attribute in pure SSR contexts, only post-hydration\n        // TODO: Move back to JSX when React 19 is fully adopted in Dotcom.\n        // `inert` removes the collapsed submenu from tab order and the accessibility tree\n        // without affecting visual appearance\n        subMenuChildrenRef.current.toggleAttribute('inert', isLarge && !isExpanded)\n      }\n    }, [isLarge, isExpanded])\n\n    const [label, SubMenuChildren] = children as ReactNode[]\n\n    return (\n      <div\n        className={clsx(\n          styles['SubNav__link--has-sub-menu'],\n          isExpanded && styles['SubNav__link--expanded'],\n          isAriaCurrent && styles['SubNav__link--has-active-sub-menu'],\n        )}\n        data-testid={testId || testIds.subMenu}\n        ref={ref}\n        onMouseOver={expand}\n        onMouseOut={collapse}\n        /**\n         * onFocus and onBlur need to be defined to keep the jsx-a11y/mouse-events-have-key-events\n         * eslint rule happy. The focus/blur behaviour is handled by useContainsFocus\n         */\n        onFocus={() => null}\n        onBlur={() => null}\n      >\n        <a\n          href={href}\n          className={clsx(styles['SubNav__link'], ariaCurrent && styles['SubNav__link--active'], className)}\n          aria-current={ariaCurrent}\n          {...props}\n        >\n          <Text as=\"span\" size=\"100\" weight=\"medium\" className={styles['SubNav__link-label']}>\n            {label}\n          </Text>\n        </a>\n        {isLarge && (\n          <button\n            className={styles['SubNav__sub-menu-toggle']}\n            onClick={toggleExpanded}\n            aria-expanded={isExpanded ? 'true' : 'false'}\n            aria-controls={submenuId}\n            aria-label={`${label?.toString().trim()} submenu`}\n          >\n            <TriangleDownIcon className={styles['SubNav__sub-menu-icon']} size={16} />\n          </button>\n        )}\n\n        <div id={submenuId} className={styles['SubNav__sub-menu-children']} ref={subMenuChildrenRef}>\n          {SubMenuChildren}\n        </div>\n      </div>\n    )\n  },\n)\n\nconst LinkBase = forwardRef<HTMLAnchorElement | HTMLDivElement, LinkBaseProps>((props, ref) => {\n  const [isInView, setIsInView] = useState(false)\n  const childrenArr = Children.toArray(props.children)\n\n  const hasSubMenu = childrenArr.some(child => {\n    if (isValidElement(child)) {\n      return child.type === SubMenuBase\n    }\n  })\n\n  useEffect(() => {\n    if (hasSubMenu) return\n    const targetId = props.href.replace('#', '')\n    const target = document.getElementById(targetId)\n    if (!target) return\n\n    const topOfWindow = '0px 0px -100%'\n    const observerParams = {threshold: 0, root: null, rootMargin: topOfWindow}\n\n    const handleIntersectionUpdate: IntersectionObserverCallback = ([entry]) => {\n      setIsInView(entry.isIntersecting)\n    }\n\n    const observer = new IntersectionObserver(handleIntersectionUpdate, observerParams)\n    observer.observe(target)\n    return () => observer.disconnect()\n  }, [hasSubMenu, props.href])\n\n  if (hasSubMenu) {\n    const isAnchorVariantSubMenu = childrenArr.some(child => {\n      return isValidElement<SubMenuProps>(child) && child.type === SubMenuBase && child.props.variant === 'anchor'\n    })\n\n    return (\n      <li>\n        <LinkBaseWithSubmenu\n          ref={ref as RefObject<HTMLDivElement>}\n          {...props}\n          _subMenuVariant={isAnchorVariantSubMenu ? 'anchor' : undefined}\n        />\n      </li>\n    )\n  }\n\n  const {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, variant, className, ...rest} = props\n\n  return (\n    <li>\n      <a\n        href={href}\n        className={clsx(\n          styles['SubNav__link'],\n          ariaCurrent && styles['SubNav__link--active'],\n          isInView && styles['SubNav__link--is-in-view'],\n          className,\n        )}\n        aria-current={ariaCurrent}\n        data-testid={testId || testIds.link}\n        ref={ref as RefObject<HTMLAnchorElement>}\n        {...rest}\n      >\n        <Text as=\"span\" size=\"100\" weight=\"medium\" className={styles['SubNav__link-label']}>\n          {children}\n        </Text>\n      </a>\n    </li>\n  )\n})\n\ntype SubMenuProps = {\n  variant?: SubMenuVariants\n} & React.HTMLAttributes<HTMLUListElement> &\n  BaseProps<HTMLUListElement>\n\nfunction SubMenuBase({children, className, variant = 'dropdown', ...props}: SubMenuProps) {\n  const context = React.useContext(SubNavContext)\n  const navRef = useRef<HTMLElement>(null)\n\n  const {isLarge} = useWindowSize()\n\n  /**\n   * Effect is needed to prevent the bubbling of onClick events to the overlay trigger.\n   * Removing this effect will cause clicks on the anchor nav element to toggle the overlay.\n   */\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (navRef.current && !navRef.current.contains(e.target as Node)) {\n        return\n      }\n\n      if (!(e.target instanceof HTMLAnchorElement)) {\n        e.stopPropagation()\n      }\n    }\n\n    if (variant === 'anchor') {\n      document.addEventListener('click', handleClick, true) // Capture phase\n    }\n\n    return () => {\n      document.removeEventListener('click', handleClick, true)\n    }\n  }, [variant])\n\n  if (variant === 'anchor' && context?.portalRef.current) {\n    return createPortal(\n      <nav\n        ref={navRef}\n        className={clsx(styles['SubNav__sub-menu'], styles['SubNav__sub-menu--anchor'], className)}\n        role=\"navigation\"\n        aria-label=\"Sub navigation\"\n      >\n        <ul className={styles['SubNav__sub-menu-list']} {...props}>\n          {React.Children.map(children, child => {\n            if (isValidElement<LinkBaseProps>(child) && child.type === LinkBase) {\n              return React.cloneElement(child, {\n                onClick: e => {\n                  child.props.onClick?.(e)\n                },\n              })\n            }\n            return null\n          })}\n        </ul>\n      </nav>,\n      context.portalRef.current,\n    )\n  } else {\n    const Tag = isLarge ? ThemeProvider : React.Fragment\n\n    return (\n      <Tag {...(isLarge ? {colorMode: 'light'} : {})}>\n        <ul className={clsx(styles['SubNav__sub-menu'], styles[`SubNav__sub-menu--${variant}`], className)} {...props}>\n          {children}\n        </ul>\n      </Tag>\n    )\n  }\n}\n\ntype SubNavActionProps = {\n  /**\n   * Required path or location for the action button to link to.\n   */\n  href: string\n  /**\n   * Optional sizes for the button.\n   */\n  size?: (typeof ButtonSizes)[number]\n  /**\n   * Optional sizes for the button.\n   */\n  variant?: (typeof ButtonVariants)[number]\n} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>\n\nfunction ActionBase({children, href, variant = 'primary', size = 'small', ...rest}: SubNavActionProps) {\n  return (\n    <Button\n      className={styles['SubNav__action']}\n      as=\"a\"\n      href={href}\n      variant={variant}\n      data-testid={testIds.action}\n      size={size}\n      {...rest}\n    >\n      {children}\n    </Button>\n  )\n}\n\n/**\n * Use SubNav to display a secondary navigation beneath a primary header.\n * @see https://primer.style/brand/components/SubNav\n */\nexport const SubNav = Object.assign(SubNavRoot, {\n  Heading: HeadingBase,\n  SubHeading: SubHeadingBase,\n  Link: LinkBase,\n  Action: ActionBase,\n  SubMenu: SubMenuBase,\n  testIds,\n})\n"],"mappings":"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"}
+{"version":3,"file":"SubNav.js","names":[],"sources":["../../src/SubNav/SubNav.tsx"],"sourcesContent":["import React, {\n  Children,\n  createContext,\n  forwardRef,\n  isValidElement,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefObject,\n} from 'react'\nimport {Button, ButtonSizes, ButtonVariants, Text, TextProps, ThemeProvider, useWindowSize} from '..'\n\nimport {clsx} from 'clsx'\nimport {TriangleDownIcon, TriangleUpIcon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useFocusTrap} from '../hooks/useFocusTrap'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {useContainsFocus} from './useContainsFocus'\n\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './SubNav.module.css'\nimport {createPortal} from 'react-dom'\n\nconst testIds = {\n  root: 'SubNav-root',\n  get button() {\n    return `${this.root}-button`\n  },\n  get overlay() {\n    return `${this.root}-overlay`\n  },\n  get link() {\n    return `${this.root}-link`\n  },\n  get heading() {\n    return `${this.root}-heading`\n  },\n  get action() {\n    return `${this.root}-action`\n  },\n  get subMenu() {\n    return `${this.root}-sub-menu`\n  },\n}\n\nexport const SubNavSubMenuVariants = ['dropdown', 'anchor'] as const\ntype SubMenuVariants = (typeof SubNavSubMenuVariants)[number]\n\ntype SubNavContextType = {\n  portalRef: RefObject<HTMLDivElement | null>\n}\n\nconst SubNavContext = createContext<SubNavContextType | undefined>(undefined)\n\nexport const useSubNavContext = () => {\n  const context = useContext(SubNavContext)\n  if (!context) {\n    throw new Error('useSubNavContext must be used within a SubNavProvider')\n  }\n  return context\n}\n\nfunction SubNavProvider({children}: {children: React.ReactNode}) {\n  const anchoredNavOuterPortalRef = React.useRef<HTMLDivElement>(null)\n  const anchoredNavPortalRef = React.useRef<HTMLDivElement>(null)\n\n  const value = useMemo(\n    () => ({\n      portalRef: anchoredNavPortalRef,\n    }),\n    [],\n  )\n\n  useEffect(() => {\n    const menuContainer = anchoredNavOuterPortalRef.current\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        entry.target.classList.toggle(styles['SubNav__anchor-menu-outer-container--stuck'], entry.intersectionRatio < 1)\n      },\n      {threshold: [1]},\n    )\n\n    if (menuContainer) {\n      observer.observe(menuContainer)\n    }\n\n    return () => {\n      if (menuContainer) {\n        observer.unobserve(menuContainer)\n      }\n    }\n  }, [])\n\n  return (\n    <SubNavContext.Provider value={value}>\n      {children}\n\n      <div className={styles['SubNav__anchor-menu-outer-container']} ref={anchoredNavOuterPortalRef}>\n        <div className={clsx(styles['SubNav__anchor-menu-container'])} ref={anchoredNavPortalRef} />\n      </div>\n    </SubNavContext.Provider>\n  )\n}\n\nexport type SubNavProps = {\n  /**\n   * @deprecated The hasShadow prop is deprecated and will be removed in a future release.\n   */\n  hasShadow?: boolean\n  /**\n   * Allows the SubNav to be used at full width,\n   * removing any internal padding and guttering.\n   */\n  fullWidth?: boolean\n  'data-testid'?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\nconst SubNavRoot = memo(\n  forwardRef<HTMLDivElement, SubNavProps>(\n    ({id, children, className, 'data-testid': testId, fullWidth, hasShadow}, ref) => {\n      const rootRef = useProvidedRefOrCreate<HTMLDivElement>(ref as RefObject<HTMLDivElement>)\n      const innerRootRef = React.useRef<HTMLDivElement>(null)\n      const navRef = React.useRef<HTMLElement>(null)\n      const overlayRef = React.useRef<HTMLUListElement>(null)\n      const narrowButtonRef = useRef<HTMLButtonElement>(null)\n      const [isOpenAtNarrow, setIsOpenAtNarrow] = useState(false)\n      const idForLinkContainer = useId()\n      const [hasAnchoredNav, setHasAnchoredNav] = useState(false)\n\n      const {isLarge} = useWindowSize()\n\n      useFocusTrap({containerRef: innerRootRef, disabled: !isOpenAtNarrow})\n\n      const childrenArr = Children.toArray(children)\n\n      const closeMenuCallback = useCallback(() => {\n        if (isLarge) return\n        setIsOpenAtNarrow(false)\n      }, [isLarge])\n\n      const handleMenuToggle = useCallback(() => {\n        if (isLarge) return\n        setIsOpenAtNarrow(prev => !prev)\n      }, [isLarge])\n\n      useOnClickOutside(innerRootRef, closeMenuCallback)\n      useKeyboardEscape(closeMenuCallback)\n\n      useEffect(() => {\n        const navElement = navRef.current\n\n        const updateAvailableHeight = () => {\n          if (navElement) {\n            const navTop = navElement.getBoundingClientRect().top\n            navElement.style.setProperty('--subnav-available-height', `${window.innerHeight - navTop}px`)\n          }\n        }\n\n        if (isOpenAtNarrow && !isLarge) {\n          document.body.style.overflow = 'hidden'\n          updateAvailableHeight()\n          // eslint-disable-next-line github/prefer-observers\n          window.addEventListener('resize', updateAvailableHeight)\n        } else {\n          document.body.style.overflow = 'auto'\n\n          if (navElement) {\n            navElement.style.removeProperty('--subnav-available-height')\n          }\n        }\n\n        return () => {\n          document.body.style.overflow = 'auto'\n          window.removeEventListener('resize', updateAvailableHeight)\n\n          if (navElement) {\n            navElement.style.removeProperty('--subnav-available-height')\n          }\n        }\n      }, [isOpenAtNarrow, isLarge])\n\n      const activeLink = childrenArr.find(child => {\n        return isValidElement<LinkBaseProps>(child) && Boolean(child.props['aria-current'])\n      }) as React.ReactElement<LinkBaseProps> | undefined\n\n      useEffect(() => {\n        // check if there is an anchored nav in the SubNav.SubMenu child\n        const hasAnchorVariant = childrenArr.some(child => {\n          if (isValidElement<LinkBaseProps>(child) && child.type === LinkBase) {\n            const childNodes = Children.toArray(child.props.children)\n            const maybeSubMenu = childNodes[1]\n            if (\n              isValidElement<SubMenuProps>(maybeSubMenu) &&\n              maybeSubMenu.type === SubMenuBase &&\n              maybeSubMenu.props.variant === 'anchor'\n            ) {\n              return true\n            }\n          }\n          return false\n        })\n        setHasAnchoredNav(hasAnchorVariant)\n      }, [childrenArr])\n\n      const {\n        heading: HeadingChild,\n        subheading: SubHeadingChild,\n        links: LinkChildren,\n        action: ActionChild,\n      } = childrenArr.reduce(\n        (\n          acc: {\n            heading?: React.ReactElement<HeadingBaseProps>\n            subheading?: React.ReactElement<SubHeadingBaseProps>\n            links: React.ReactElement<LinkBaseProps>[]\n            action?: React.ReactElement<SubNavActionProps>\n          },\n          child,\n        ) => {\n          if (isValidElement(child)) {\n            if (child.type === HeadingBase) {\n              acc.heading = child as React.ReactElement<HeadingBaseProps>\n            } else if (child.type === SubHeadingBase) {\n              acc.subheading = child as React.ReactElement<SubHeadingBaseProps>\n            } else if (child.type === LinkBase) {\n              const linkChild = child as React.ReactElement<LinkBaseProps>\n              const childNodes = Children.toArray(linkChild.props.children)\n              const [link, subMenu] = childNodes\n              const isAnchorVariant =\n                isValidElement<SubMenuProps>(subMenu) &&\n                subMenu.type === SubMenuBase &&\n                subMenu.props.variant === 'anchor'\n\n              acc.links.push(\n                React.cloneElement(linkChild, {\n                  ...(isAnchorVariant ? {children: [link]} : {}),\n                  onClick: linkChild.props['aria-current'] ? closeMenuCallback : linkChild.props.onClick,\n                }),\n              )\n            } else if (child.type === ActionBase) {\n              acc.action = child as React.ReactElement<SubNavActionProps>\n            }\n          }\n          return acc\n        },\n        {heading: undefined, subheading: undefined, links: [], action: undefined},\n      )\n\n      const activeLinkChildren = activeLink ? Children.toArray(activeLink.props.children) : []\n      const activeLinklabel = activeLinkChildren[0]\n\n      // needed to prevent rendering of anchor subnav inside the narrow <button> element\n      const maybeSubMenu = activeLinkChildren[1]\n      const MaybeSubNav =\n        isValidElement<SubMenuProps>(maybeSubMenu) &&\n        maybeSubMenu.type === SubMenuBase &&\n        maybeSubMenu.props.variant === 'anchor'\n          ? maybeSubMenu\n          : null\n\n      const subHeadingIsActive =\n        isValidElement<SubHeadingBaseProps>(SubHeadingChild) &&\n        SubHeadingChild.type === SubHeadingBase &&\n        Boolean(SubHeadingChild.props['aria-current'])\n      const narrowButtonLabel = SubHeadingChild ? activeLinklabel : null\n\n      const NarrowButton = useMemo(\n        () => (\n          <div\n            className={clsx(styles['SubNav__overlay-toggle'], isOpenAtNarrow && styles['SubNav__overlay-toggle--open'])}\n          >\n            <span\n              className={clsx(\n                styles['SubNav__overlay-toggle-content'],\n                !narrowButtonLabel && styles['SubNav__overlay-toggle-content--end'],\n              )}\n            >\n              <button\n                ref={narrowButtonRef}\n                className={styles['SubNav__overlay-toggle-label']}\n                data-testid={testIds.button}\n                onClick={isOpenAtNarrow ? closeMenuCallback : handleMenuToggle}\n                aria-expanded={isOpenAtNarrow ? 'true' : 'false'}\n                aria-controls={idForLinkContainer}\n                aria-label={activeLinklabel ? `Navigation menu. Current page: ${activeLinklabel}` : 'Navigation menu'}\n              >\n                {narrowButtonLabel && (\n                  <Text as=\"span\" size=\"100\">\n                    {narrowButtonLabel}\n                  </Text>\n                )}\n                {isOpenAtNarrow ? (\n                  <TriangleUpIcon className={styles['SubNav__overlay-toggle-icon']} size={13} />\n                ) : (\n                  <TriangleDownIcon className={styles['SubNav__overlay-toggle-icon']} size={13} />\n                )}\n              </button>\n            </span>\n          </div>\n        ),\n        [activeLinklabel, closeMenuCallback, handleMenuToggle, idForLinkContainer, isOpenAtNarrow, narrowButtonLabel],\n      )\n\n      return (\n        <div\n          ref={rootRef}\n          className={clsx(\n            styles['SubNav__container'],\n            SubHeadingChild && styles['SubNav--has-sub-heading'],\n            SubHeadingChild && subHeadingIsActive && styles['SubNav--subHeadingActive'],\n            hasAnchoredNav && styles['SubNav__container--with-anchor-nav'],\n          )}\n        >\n          <SubNavProvider>\n            <nav\n              ref={navRef}\n              id={id}\n              className={clsx(\n                styles.SubNav,\n                isOpenAtNarrow && styles['SubNav--open'],\n                hasShadow && styles['SubNav--has-shadow'],\n                fullWidth && styles['SubNav--full-width'],\n                className,\n              )}\n              data-testid={testId || testIds.root}\n            >\n              <div ref={innerRootRef} className={styles['SubNav--header-container-outer']}>\n                <div className={styles['SubNav__header-container']}>\n                  {HeadingChild && <div className={styles['SubNav__heading-container']}>{HeadingChild}</div>}\n\n                  {SubHeadingChild && (\n                    <div\n                      className={clsx(\n                        styles['SubNav__heading-container'],\n                        styles['SubNav__subheading-container'],\n                        subHeadingIsActive && styles['SubNav__subheading-container-active'],\n                      )}\n                    >\n                      {SubHeadingChild}\n                    </div>\n                  )}\n\n                  {!isLarge && (!SubHeadingChild || subHeadingIsActive) && NarrowButton}\n\n                  {MaybeSubNav && MaybeSubNav}\n                </div>\n                {!isLarge && SubHeadingChild && !subHeadingIsActive && NarrowButton}\n                {LinkChildren.length > 0 && (\n                  <ul\n                    ref={overlayRef}\n                    id={idForLinkContainer}\n                    className={clsx(\n                      styles['SubNav__links-overlay'],\n                      isOpenAtNarrow && styles['SubNav__links-overlay--open'],\n                    )}\n                    data-testid={testIds.overlay}\n                  >\n                    {LinkChildren}\n                    {ActionChild && <li className={styles['SubNav__action-container']}>{ActionChild}</li>}\n                  </ul>\n                )}\n              </div>\n            </nav>\n          </SubNavProvider>\n        </div>\n      )\n    },\n  ),\n)\n\ntype HeadingBaseProps = {\n  href: string\n  'data-testid'?: string\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n  BaseProps<HTMLAnchorElement>\n\nconst HeadingBase = ({href, children, className, 'data-testid': testID, ...props}: HeadingBaseProps) => {\n  return (\n    <a\n      href={href}\n      className={clsx(styles['SubNav__heading'], className)}\n      data-testid={testIds.heading || testID}\n      {...props}\n    >\n      {children}\n    </a>\n  )\n}\n\ntype SubHeadingBaseProps = {\n  href: string\n  'data-testid'?: string\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n  BaseProps<HTMLAnchorElement>\n\nconst SubHeadingBase = ({href, children, className, 'data-testid': testID, ...props}: SubHeadingBaseProps) => {\n  return (\n    <a\n      href={href}\n      className={clsx(styles['SubNav__heading'], styles['SubNav__link'], styles['SubNav__subHeading'], className)}\n      data-testid={testIds.heading || testID}\n      {...props}\n    >\n      {children}\n    </a>\n  )\n}\n\ntype LinkBaseProps = {\n  href: string\n  'data-testid'?: string\n  variant?: TextProps['variant']\n  _subMenuVariant?: SubMenuVariants\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n  BaseProps<HTMLAnchorElement>\n\nconst LinkBaseWithSubmenu = forwardRef<HTMLDivElement, LinkBaseProps>(\n  (\n    {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, className, _subMenuVariant, variant, ...props},\n    forwardedRef,\n  ) => {\n    const submenuId = useId()\n    const {isLarge} = useWindowSize()\n\n    const [isExpanded, setIsExpanded] = useState(false)\n    const ref = useProvidedRefOrCreate(forwardedRef as RefObject<HTMLDivElement>)\n    const subMenuChildrenRef = useRef<HTMLDivElement>(null)\n\n    useContainsFocus(ref, (containsFocus: boolean) => {\n      if (!containsFocus) {\n        setIsExpanded(false)\n      }\n    })\n\n    const expand = useCallback(() => setIsExpanded(true), [])\n    const collapse = useCallback(() => setIsExpanded(false), [])\n    const toggleExpanded = useCallback(() => setIsExpanded(prev => !prev), [])\n    const isAriaCurrent = Boolean(ariaCurrent) && ariaCurrent !== 'false'\n\n    useKeyboardEscape(collapse)\n\n    useEffect(() => {\n      if (subMenuChildrenRef.current) {\n        // Workaround to avoid React 18 / 19 type mismatches with the `inert` attribute.\n        // This approach won't immediately apply the attribute in pure SSR contexts, only post-hydration\n        // TODO: Move back to JSX when React 19 is fully adopted in Dotcom.\n        // `inert` removes the collapsed submenu from tab order and the accessibility tree\n        // without affecting visual appearance\n        subMenuChildrenRef.current.toggleAttribute('inert', isLarge && !isExpanded)\n      }\n    }, [isLarge, isExpanded])\n\n    const [label, SubMenuChildren] = children as ReactNode[]\n\n    return (\n      <div\n        className={clsx(\n          styles['SubNav__link--has-sub-menu'],\n          isExpanded && styles['SubNav__link--expanded'],\n          isAriaCurrent && styles['SubNav__link--has-active-sub-menu'],\n        )}\n        data-testid={testId || testIds.subMenu}\n        ref={ref}\n        onMouseOver={expand}\n        onMouseOut={collapse}\n        /**\n         * onFocus and onBlur need to be defined to keep the jsx-a11y/mouse-events-have-key-events\n         * eslint rule happy. The focus/blur behaviour is handled by useContainsFocus\n         */\n        onFocus={() => null}\n        onBlur={() => null}\n      >\n        <a\n          href={href}\n          className={clsx(styles['SubNav__link'], ariaCurrent && styles['SubNav__link--active'], className)}\n          aria-current={ariaCurrent}\n          {...props}\n        >\n          <Text as=\"span\" size=\"100\" weight=\"medium\" className={styles['SubNav__link-label']}>\n            {label}\n          </Text>\n        </a>\n        {isLarge && (\n          <button\n            className={styles['SubNav__sub-menu-toggle']}\n            onClick={toggleExpanded}\n            aria-expanded={isExpanded ? 'true' : 'false'}\n            aria-controls={submenuId}\n            aria-label={`${label?.toString().trim()} submenu`}\n          >\n            <TriangleDownIcon className={styles['SubNav__sub-menu-icon']} size={16} />\n          </button>\n        )}\n\n        <div id={submenuId} className={styles['SubNav__sub-menu-children']} ref={subMenuChildrenRef}>\n          {SubMenuChildren}\n        </div>\n      </div>\n    )\n  },\n)\n\nconst LinkBase = forwardRef<HTMLAnchorElement | HTMLDivElement, LinkBaseProps>((props, ref) => {\n  const [isInView, setIsInView] = useState(false)\n  const childrenArr = Children.toArray(props.children)\n\n  const hasSubMenu = childrenArr.some(child => {\n    if (isValidElement(child)) {\n      return child.type === SubMenuBase\n    }\n  })\n\n  useEffect(() => {\n    if (hasSubMenu) return\n    const targetId = props.href.replace('#', '')\n    const target = document.getElementById(targetId)\n    if (!target) return\n\n    const topOfWindow = '0px 0px -100%'\n    const observerParams = {threshold: 0, root: null, rootMargin: topOfWindow}\n\n    const handleIntersectionUpdate: IntersectionObserverCallback = ([entry]) => {\n      setIsInView(entry.isIntersecting)\n    }\n\n    const observer = new IntersectionObserver(handleIntersectionUpdate, observerParams)\n    observer.observe(target)\n    return () => observer.disconnect()\n  }, [hasSubMenu, props.href])\n\n  if (hasSubMenu) {\n    const isAnchorVariantSubMenu = childrenArr.some(child => {\n      return isValidElement<SubMenuProps>(child) && child.type === SubMenuBase && child.props.variant === 'anchor'\n    })\n\n    return (\n      <li>\n        <LinkBaseWithSubmenu\n          ref={ref as RefObject<HTMLDivElement>}\n          {...props}\n          _subMenuVariant={isAnchorVariantSubMenu ? 'anchor' : undefined}\n        />\n      </li>\n    )\n  }\n\n  const {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, variant, className, ...rest} = props\n\n  return (\n    <li>\n      <a\n        href={href}\n        className={clsx(\n          styles['SubNav__link'],\n          ariaCurrent && styles['SubNav__link--active'],\n          isInView && styles['SubNav__link--is-in-view'],\n          className,\n        )}\n        aria-current={ariaCurrent}\n        data-testid={testId || testIds.link}\n        ref={ref as RefObject<HTMLAnchorElement>}\n        {...rest}\n      >\n        <Text as=\"span\" size=\"100\" weight=\"medium\" className={styles['SubNav__link-label']}>\n          {children}\n        </Text>\n      </a>\n    </li>\n  )\n})\n\ntype SubMenuProps = {\n  variant?: SubMenuVariants\n} & React.HTMLAttributes<HTMLUListElement> &\n  BaseProps<HTMLUListElement>\n\nfunction SubMenuBase({children, className, variant = 'dropdown', ...props}: SubMenuProps) {\n  const context = React.useContext(SubNavContext)\n  const navRef = useRef<HTMLElement>(null)\n\n  const {isLarge} = useWindowSize()\n\n  /**\n   * Effect is needed to prevent the bubbling of onClick events to the overlay trigger.\n   * Removing this effect will cause clicks on the anchor nav element to toggle the overlay.\n   */\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (navRef.current && !navRef.current.contains(e.target as Node)) {\n        return\n      }\n\n      if (!(e.target instanceof HTMLAnchorElement)) {\n        e.stopPropagation()\n      }\n    }\n\n    if (variant === 'anchor') {\n      document.addEventListener('click', handleClick, true) // Capture phase\n    }\n\n    return () => {\n      document.removeEventListener('click', handleClick, true)\n    }\n  }, [variant])\n\n  if (variant === 'anchor' && context?.portalRef.current) {\n    return createPortal(\n      <nav\n        ref={navRef}\n        className={clsx(styles['SubNav__sub-menu'], styles['SubNav__sub-menu--anchor'], className)}\n        role=\"navigation\"\n        aria-label=\"Sub navigation\"\n      >\n        <ul className={styles['SubNav__sub-menu-list']} {...props}>\n          {React.Children.map(children, child => {\n            if (isValidElement<LinkBaseProps>(child) && child.type === LinkBase) {\n              return React.cloneElement(child, {\n                onClick: e => {\n                  child.props.onClick?.(e)\n                },\n              })\n            }\n            return null\n          })}\n        </ul>\n      </nav>,\n      context.portalRef.current,\n    )\n  } else {\n    const Tag = isLarge ? ThemeProvider : React.Fragment\n\n    return (\n      <Tag {...(isLarge ? {colorMode: 'light'} : {})}>\n        <ul className={clsx(styles['SubNav__sub-menu'], styles[`SubNav__sub-menu--${variant}`], className)} {...props}>\n          {children}\n        </ul>\n      </Tag>\n    )\n  }\n}\n\ntype SubNavActionProps = {\n  /**\n   * Required path or location for the action button to link to.\n   */\n  href: string\n  /**\n   * Optional sizes for the button.\n   */\n  size?: (typeof ButtonSizes)[number]\n  /**\n   * Optional sizes for the button.\n   */\n  variant?: (typeof ButtonVariants)[number]\n} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>\n\nfunction ActionBase({children, href, variant = 'primary', size = 'small', ...rest}: SubNavActionProps) {\n  return (\n    <Button\n      className={styles['SubNav__action']}\n      as=\"a\"\n      href={href}\n      variant={variant}\n      data-testid={testIds.action}\n      size={size}\n      {...rest}\n    >\n      {children}\n    </Button>\n  )\n}\n\n/**\n * Use SubNav to display a secondary navigation beneath a primary header.\n * @see https://primer.style/brand/components/SubNav\n */\nexport const SubNav = Object.assign(SubNavRoot, {\n  Heading: HeadingBase,\n  SubHeading: SubHeadingBase,\n  Link: LinkBase,\n  Action: ActionBase,\n  SubMenu: SubMenuBase,\n  testIds,\n})\n"],"mappings":"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"}

package/esm/SubNav/SubNav.module.js

@@ -1,10 +1,11 @@
-import './SubNav.module-D-gLr0JO.css';var e = {
-	SubNav__container: "Primer_Brand__SubNav-module__SubNav__container___e4u9B",
+import './SubNav.module-D-gLr0JO.css';//#region src/SubNav/SubNav.module.css
+var e = "Primer_Brand__SubNav-module__SubNav__container___e4u9B", t = "Primer_Brand__SubNav-module__SubNav___txUks", n = "Primer_Brand__SubNav-module__SubNav__heading___d8v1r", r = "Primer_Brand__SubNav-module__SubNav__subHeading___cmfhs", i = "Primer_Brand__SubNav-module__SubNav__link___rY_yE", a = "Primer_Brand__SubNav-module__SubNav__action___Yrrhg", o = {
+	SubNav__container: e,
 	"SubNav__container--with-anchor-nav": "Primer_Brand__SubNav-module__SubNav__container--with-anchor-nav___jf8vj",
-	SubNav: "Primer_Brand__SubNav-module__SubNav___txUks",
-	SubNav__heading: "Primer_Brand__SubNav-module__SubNav__heading___d8v1r",
-	SubNav__subHeading: "Primer_Brand__SubNav-module__SubNav__subHeading___cmfhs",
-	SubNav__link: "Primer_Brand__SubNav-module__SubNav__link___rY_yE",
+	SubNav: t,
+	SubNav__heading: n,
+	SubNav__subHeading: r,
+	SubNav__link: i,
 	"SubNav__link-label": "Primer_Brand__SubNav-module__SubNav__link-label___NVLOG",
 	"SubNav--header-container-outer": "Primer_Brand__SubNav-module__SubNav--header-container-outer___TODOB",
 	"SubNav__heading-container": "Primer_Brand__SubNav-module__SubNav__heading-container___09GuE",
@@ -36,7 +37,7 @@ import './SubNav.module-D-gLr0JO.css';var e = {
 	"SubNav__overlay-toggle-content": "Primer_Brand__SubNav-module__SubNav__overlay-toggle-content___r7g9W",
 	"SubNav__overlay-toggle-label": "Primer_Brand__SubNav-module__SubNav__overlay-toggle-label___FRenU",
 	"SubNav__link--has-sub-menu": "Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p",
-	SubNav__action: "Primer_Brand__SubNav-module__SubNav__action___Yrrhg",
+	SubNav__action: a,
 	"SubNav__sub-menu": "Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd",
 	"SubNav__sub-menu--dropdown": "Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU",
 	"SubNav__overlay-toggle-icon": "Primer_Brand__SubNav-module__SubNav__overlay-toggle-icon___Fo5xs",
@@ -47,6 +48,6 @@ import './SubNav.module-D-gLr0JO.css';var e = {
 	"fade-in-down": "Primer_Brand__SubNav-module__fade-in-down___UKi30"
 };
 //#endregion
-export { e as default };
+export { t as SubNav, a as SubNav__action, e as SubNav__container, n as SubNav__heading, i as SubNav__link, r as SubNav__subHeading, o as default };
 
 //# sourceMappingURL=SubNav.module.js.map

package/esm/SubNav/useContainsFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useContainsFocus.js","names":[],"sources":["../../src/SubNav/useContainsFocus.ts"],"sourcesContent":["import {useCallback, useEffect, useState, type RefObject} from 'react'\n\n/**\n * Determine if a child element of the provided ref is currently focussed.\n * @param containerRef The ref to the container element.\n * @param onFocusChange The callback to be called when the focus state changes.\n * @type T The type of the container element.\n * @returns The ref to be applied to the container element.\n */\nexport const useContainsFocus = <T extends HTMLElement>(\n  containerRef?: RefObject<T | null>,\n  onFocusChange?: (isFocussed: boolean) => void,\n) => {\n  const [isChildFocused, setIsChildFocused] = useState(false)\n\n  const updateState = useCallback(\n    (isFocused: boolean) => {\n      if (isFocused !== isChildFocused) {\n        setIsChildFocused(isFocused)\n        onFocusChange?.(isFocused)\n      }\n    },\n    [isChildFocused, onFocusChange],\n  )\n\n  useEffect(() => {\n    if (!containerRef) {\n      return\n    }\n\n    const handleFocusIn = () => {\n      updateState(true)\n    }\n\n    const handleFocusOut = (event: FocusEvent) => {\n      if (containerRef.current && !containerRef.current.contains(event.relatedTarget as Node)) {\n        updateState(false)\n      }\n    }\n\n    const container = containerRef.current\n\n    if (container) {\n      container.addEventListener('focusin', handleFocusIn, true)\n      container.addEventListener('focusout', handleFocusOut, true)\n\n      return () => {\n        container.removeEventListener('focusin', handleFocusIn, true)\n        container.removeEventListener('focusout', handleFocusOut, true)\n      }\n    }\n  }, [updateState, containerRef])\n}\n"],"mappings":";;AASA,IAAa,KACX,GACA,MACG;CACH,IAAM,CAAC,GAAgB,KAAqB,EAAS,GAAM,EAErD,IAAc,GACjB,MAAuB;AACtB,EAAI,MAAc,MAChB,EAAkB,EAAU,EAC5B,IAAgB,EAAU;IAG9B,CAAC,GAAgB,EAAc,CAChC;AAED,SAAgB;AACd,MAAI,CAAC,EACH;EAGF,IAAM,UAAsB;AAC1B,KAAY,GAAK;KAGb,KAAkB,MAAsB;AAC5C,GAAI,EAAa,WAAW,CAAC,EAAa,QAAQ,SAAS,EAAM,cAAsB,IACrF,EAAY,GAAM;KAIhB,IAAY,EAAa;AAE/B,MAAI,EAIF,QAHA,EAAU,iBAAiB,WAAW,GAAe,GAAK,EAC1D,EAAU,iBAAiB,YAAY,GAAgB,GAAK,QAE/C;AAEX,GADA,EAAU,oBAAoB,WAAW,GAAe,GAAK,EAC7D,EAAU,oBAAoB,YAAY,GAAgB,GAAK;;IAGlE,CAAC,GAAa,EAAa,CAAC"}
+{"version":3,"file":"useContainsFocus.js","names":[],"sources":["../../src/SubNav/useContainsFocus.ts"],"sourcesContent":["import {useCallback, useEffect, useState, type RefObject} from 'react'\n\n/**\n * Determine if a child element of the provided ref is currently focussed.\n * @param containerRef The ref to the container element.\n * @param onFocusChange The callback to be called when the focus state changes.\n * @type T The type of the container element.\n * @returns The ref to be applied to the container element.\n */\nexport const useContainsFocus = <T extends HTMLElement>(\n  containerRef?: RefObject<T | null>,\n  onFocusChange?: (isFocussed: boolean) => void,\n) => {\n  const [isChildFocused, setIsChildFocused] = useState(false)\n\n  const updateState = useCallback(\n    (isFocused: boolean) => {\n      if (isFocused !== isChildFocused) {\n        setIsChildFocused(isFocused)\n        onFocusChange?.(isFocused)\n      }\n    },\n    [isChildFocused, onFocusChange],\n  )\n\n  useEffect(() => {\n    if (!containerRef) {\n      return\n    }\n\n    const handleFocusIn = () => {\n      updateState(true)\n    }\n\n    const handleFocusOut = (event: FocusEvent) => {\n      if (containerRef.current && !containerRef.current.contains(event.relatedTarget as Node)) {\n        updateState(false)\n      }\n    }\n\n    const container = containerRef.current\n\n    if (container) {\n      container.addEventListener('focusin', handleFocusIn, true)\n      container.addEventListener('focusout', handleFocusOut, true)\n\n      return () => {\n        container.removeEventListener('focusin', handleFocusIn, true)\n        container.removeEventListener('focusout', handleFocusOut, true)\n      }\n    }\n  }, [updateState, containerRef])\n}\n"],"mappings":";;AASA,IAAa,KACX,GACA,MACG;CACH,IAAM,CAAC,GAAgB,KAAqB,EAAS,EAAK,GAEpD,IAAc,GACjB,MAAuB;EACtB,AAAI,MAAc,MAChB,EAAkB,CAAS,GAC3B,IAAgB,CAAS;CAE7B,GACA,CAAC,GAAgB,CAAa,CAChC;CAEA,QAAgB;EACd,IAAI,CAAC,GACH;EAGF,IAAM,UAAsB;GAC1B,EAAY,EAAI;EAClB,GAEM,KAAkB,MAAsB;GAC5C,AAAI,EAAa,WAAW,CAAC,EAAa,QAAQ,SAAS,EAAM,aAAqB,KACpF,EAAY,EAAK;EAErB,GAEM,IAAY,EAAa;EAE/B,IAAI,GAIF,OAHA,EAAU,iBAAiB,WAAW,GAAe,EAAI,GACzD,EAAU,iBAAiB,YAAY,GAAgB,EAAI,SAE9C;GAEX,AADA,EAAU,oBAAoB,WAAW,GAAe,EAAI,GAC5D,EAAU,oBAAoB,YAAY,GAAgB,EAAI;EAChE;CAEJ,GAAG,CAAC,GAAa,CAAY,CAAC;AAChC"}

package/esm/SubdomainNavBar/NavigationVisbilityObserver.js

@@ -1,9 +1,10 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useProvidedRefOrCreate as t } from "../hooks/useRef.js";
 import { useAnchoredPosition as n } from "../hooks/useAnchoredPosition.js";
 import { useOnClickOutside as r } from "../hooks/useOnClickOutside.js";
 import { useKeyboardEscape as i } from "../hooks/useKeyboardEscape.js";
-import { TriangleDownIcon as a, TriangleUpIcon as o } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { TriangleDownIcon as a } from "../node_modules/@primer/octicons-react/dist/icons/TriangleDownIcon.js";
+import { TriangleUpIcon as o } from "../node_modules/@primer/octicons-react/dist/icons/TriangleUpIcon.js";
 import { useWindowSize as s } from "../hooks/useWindowSize.js";
 import { useVisibilityObserver as c } from "./useVisibilityObserver.js";
 import l from "./SubdomainNavBar.module.js";
@@ -82,7 +83,7 @@ var y = f(({ children: a, className: o, overflowMenuLabel: f, ...y }, S) => {
 }), b = f(({ ariaControls: n, buttonRef: r, className: i, menuOpen: s, onClick: c, order: u, overflowMenuLabel: d, visible: f }, p) => {
 	let m = t(p);
 	return /* @__PURE__ */ _("li", {
-		"aria-hidden": f ? void 0 : !0,
+		"aria-hidden": !f || void 0,
 		className: e(l["SubdomainNavBar-primary-nav-list-item--overflow"], i),
 		ref: m,
 		style: { order: u },

package/esm/SubdomainNavBar/NavigationVisbilityObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationVisbilityObserver.js","names":[],"sources":["../../src/SubdomainNavBar/NavigationVisbilityObserver.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useEffect, useRef, useState, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {TriangleDownIcon, TriangleUpIcon} from '@primer/octicons-react'\n\nimport {BaseProps} from '../component-helpers'\nimport {useVisibilityObserver} from './useVisibilityObserver'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport type {VisibilityMap} from './useVisibilityObserver'\nimport type {SubdomainNavBarLinkProps} from './SubdomainNavBar'\n\nimport styles from './SubdomainNavBar.module.css'\nimport {useAnchoredPosition} from '../hooks/useAnchoredPosition'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {useWindowSize} from '../hooks/useWindowSize'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {SubdomainNavBarLinkContext} from './SubdomainNavBarLinkContext'\n\ntype NavigationVisibilityObserverProps = PropsWithChildren<\n  BaseProps<HTMLUListElement> &\n    React.HTMLAttributes<HTMLUListElement> & {\n      overflowMenuLabel: string\n    }\n>\n\nexport const NavigationVisbilityObserver = forwardRef<HTMLUListElement, NavigationVisibilityObserverProps>(\n  ({children, className, overflowMenuLabel, ...rest}, forwardedRef) => {\n    const navRef = useProvidedRefOrCreate<HTMLUListElement>(\n      forwardedRef as React.RefObject<HTMLUListElement> | React.RefCallback<HTMLUListElement> | null,\n    )\n    const overflowRef = useRef<HTMLLIElement | null>(null)\n    const overflowButtonRef = useRef<HTMLButtonElement | null>(null)\n    const overflowMenuRef = useRef<HTMLDivElement | null>(null)\n    const {isMedium} = useWindowSize()\n    const measurementKey = React.Children.toArray(children)\n      .map((child, index) => {\n        if (React.isValidElement<SubdomainNavBarLinkProps>(child)) {\n          return `${index}:${typeof child.props.children === 'string' ? child.props.children : ''}`\n        }\n\n        return `${index}:`\n      })\n      .join('|')\n    const [visibilityMap] = useVisibilityObserver(navRef, overflowRef, measurementKey, !isMedium)\n    const [menuOpen, setMenuOpen] = useState(false)\n\n    const showOverflow = Object.values(visibilityMap).includes(false)\n    const overflowMenuId = React.useId()\n    const firstOverflowedItemIndex = React.Children.toArray(children).findIndex((child, index) => {\n      if (React.isValidElement<SubdomainNavBarLinkProps>(child)) {\n        return visibilityMap[index] === false\n      }\n\n      return false\n    })\n    const overflowOrder =\n      firstOverflowedItemIndex === -1 ? React.Children.count(children) * 2 : firstOverflowedItemIndex * 2 - 1\n\n    const navItems = React.Children.map(children, (child, index) => {\n      if (React.isValidElement<SubdomainNavBarLinkProps>(child)) {\n        const isOverflowed = isMedium && visibilityMap[index] === false\n        return (\n          <SubdomainNavBarLinkContext.Provider value={{isOverflowed}}>\n            {React.cloneElement(child, {\n              className: clsx(\n                child.props.className,\n                isOverflowed && styles['SubdomainNavBar-primary-nav-list-item--overflowed'],\n              ),\n              style: {\n                ...child.props.style,\n                order: index * 2,\n              },\n            })}\n          </SubdomainNavBarLinkContext.Provider>\n        )\n      }\n\n      return child\n    })\n\n    const handleClose = useCallback(() => {\n      setMenuOpen(false)\n    }, [])\n\n    const handleOverflowButtonClick = () => {\n      setMenuOpen(prevMenuOpen => !prevMenuOpen)\n    }\n\n    const handleEscape = useCallback(() => {\n      if (menuOpen) {\n        handleClose()\n        overflowButtonRef.current?.focus()\n      }\n    }, [handleClose, menuOpen])\n\n    useEffect(() => {\n      if (!showOverflow) {\n        handleClose()\n      }\n    }, [handleClose, showOverflow])\n\n    useOnClickOutside(overflowRef, handleClose, overflowMenuRef)\n    useKeyboardEscape(handleEscape)\n\n    const {position} = useAnchoredPosition(\n      {\n        floatingElementRef: overflowMenuRef,\n        anchorElementRef: overflowButtonRef,\n        align: 'end',\n        side: 'outside-bottom',\n      },\n      [menuOpen, showOverflow, overflowOrder, visibilityMap],\n    )\n\n    if (!isMedium) {\n      return (\n        <ul className={clsx(styles['SubdomainNavBar-primary-nav-list'], className)} ref={navRef} {...rest}>\n          {children}\n        </ul>\n      )\n    }\n\n    return (\n      <div\n        className={clsx(\n          styles['SubdomainNavBar-primary-nav-overflow'],\n          showOverflow && styles['SubdomainNavBar-primary-nav-overflow--has-overflow'],\n          className,\n        )}\n      >\n        <ul className={styles['SubdomainNavBar-primary-nav-list']} ref={navRef} {...rest}>\n          {navItems}\n          <OverflowButton\n            ariaControls={overflowMenuId}\n            buttonRef={overflowButtonRef}\n            menuOpen={menuOpen}\n            onClick={handleOverflowButtonClick}\n            order={overflowOrder}\n            overflowMenuLabel={overflowMenuLabel}\n            ref={overflowRef}\n            visible={showOverflow}\n          />\n        </ul>\n        <OverflowMenu\n          id={overflowMenuId}\n          menuOpen={menuOpen}\n          onClose={handleClose}\n          position={position}\n          ref={overflowMenuRef}\n          visibilityMap={visibilityMap}\n        >\n          {children}\n        </OverflowMenu>\n      </div>\n    )\n  },\n)\n\ntype OverflowButtonProps = {\n  ariaControls: string\n  buttonRef: React.RefObject<HTMLButtonElement | null>\n  menuOpen: boolean\n  onClick: () => void\n  order: number\n  overflowMenuLabel: string\n  visible: boolean\n} & BaseProps<HTMLLIElement>\n\nconst OverflowButton = forwardRef<HTMLLIElement, OverflowButtonProps>(\n  ({ariaControls, buttonRef, className, menuOpen, onClick, order, overflowMenuLabel, visible}, forwardedRef) => {\n    const ref = useProvidedRefOrCreate<HTMLLIElement>(\n      forwardedRef as React.RefObject<HTMLLIElement> | React.RefCallback<HTMLLIElement> | null,\n    )\n\n    return (\n      <li\n        aria-hidden={visible ? undefined : true}\n        className={clsx(styles['SubdomainNavBar-primary-nav-list-item--overflow'], className)}\n        ref={ref}\n        style={{order}}\n      >\n        <button\n          aria-expanded={menuOpen ? 'true' : 'false'}\n          aria-controls={ariaControls}\n          onClick={onClick}\n          className={clsx(styles['SubdomainNavBar-link'], styles['SubdomainNavBar-more-link'])}\n          ref={buttonRef}\n          tabIndex={visible ? undefined : -1}\n        >\n          <span className={styles['SubdomainNavBar-link-content']}>\n            {overflowMenuLabel}\n            {menuOpen ? <TriangleUpIcon /> : <TriangleDownIcon />}\n          </span>\n        </button>\n      </li>\n    )\n  },\n)\n\ntype OverflowMenuProps = {\n  id: string\n  menuOpen: boolean\n  onClose: () => void\n  position?: {top: number; left: number}\n  visibilityMap: VisibilityMap\n} & BaseProps<HTMLDivElement>\n\nconst OverflowMenu = forwardRef<HTMLDivElement, React.PropsWithChildren<OverflowMenuProps>>(\n  ({children, className, id, menuOpen, onClose, position, visibilityMap}, forwardedRef) => {\n    if (!menuOpen) {\n      return null\n    }\n\n    return (\n      <div\n        id={id}\n        ref={forwardedRef}\n        style={{\n          top: `${position?.top ?? 0}px`,\n          left: `${position?.left ?? 0}px`,\n          visibility: position ? undefined : 'hidden',\n        }}\n        className={clsx(styles['SubdomainNavBar-overflow-menu'], className)}\n      >\n        <ul className={clsx(styles['SubdomainNavBar-overflow-menu-list'])}>\n          {React.Children.map(children, (child, index) => {\n            if (React.isValidElement<SubdomainNavBarLinkProps>(child)) {\n              if (visibilityMap[index] !== false) {\n                return null\n              }\n\n              return (\n                <SubdomainNavBarLinkContext.Provider value={{isOverflowed: false, onLinkClick: onClose}}>\n                  {React.cloneElement(child, {\n                    className: clsx(styles['SubdomainNavBar-overflow-menu-item'], child.props.className),\n                  })}\n                </SubdomainNavBarLinkContext.Provider>\n              )\n            }\n            return null\n          })}\n        </ul>\n      </div>\n    )\n  },\n)\n"],"mappings":"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"}
+{"version":3,"file":"NavigationVisbilityObserver.js","names":[],"sources":["../../src/SubdomainNavBar/NavigationVisbilityObserver.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useEffect, useRef, useState, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {TriangleDownIcon, TriangleUpIcon} from '@primer/octicons-react'\n\nimport {BaseProps} from '../component-helpers'\nimport {useVisibilityObserver} from './useVisibilityObserver'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport type {VisibilityMap} from './useVisibilityObserver'\nimport type {SubdomainNavBarLinkProps} from './SubdomainNavBar'\n\nimport styles from './SubdomainNavBar.module.css'\nimport {useAnchoredPosition} from '../hooks/useAnchoredPosition'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {useWindowSize} from '../hooks/useWindowSize'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {SubdomainNavBarLinkContext} from './SubdomainNavBarLinkContext'\n\ntype NavigationVisibilityObserverProps = PropsWithChildren<\n  BaseProps<HTMLUListElement> &\n    React.HTMLAttributes<HTMLUListElement> & {\n      overflowMenuLabel: string\n    }\n>\n\nexport const NavigationVisbilityObserver = forwardRef<HTMLUListElement, NavigationVisibilityObserverProps>(\n  ({children, className, overflowMenuLabel, ...rest}, forwardedRef) => {\n    const navRef = useProvidedRefOrCreate<HTMLUListElement>(\n      forwardedRef as React.RefObject<HTMLUListElement> | React.RefCallback<HTMLUListElement> | null,\n    )\n    const overflowRef = useRef<HTMLLIElement | null>(null)\n    const overflowButtonRef = useRef<HTMLButtonElement | null>(null)\n    const overflowMenuRef = useRef<HTMLDivElement | null>(null)\n    const {isMedium} = useWindowSize()\n    const measurementKey = React.Children.toArray(children)\n      .map((child, index) => {\n        if (React.isValidElement<SubdomainNavBarLinkProps>(child)) {\n          return `${index}:${typeof child.props.children === 'string' ? child.props.children : ''}`\n        }\n\n        return `${index}:`\n      })\n      .join('|')\n    const [visibilityMap] = useVisibilityObserver(navRef, overflowRef, measurementKey, !isMedium)\n    const [menuOpen, setMenuOpen] = useState(false)\n\n    const showOverflow = Object.values(visibilityMap).includes(false)\n    const overflowMenuId = React.useId()\n    const firstOverflowedItemIndex = React.Children.toArray(children).findIndex((child, index) => {\n      if (React.isValidElement<SubdomainNavBarLinkProps>(child)) {\n        return visibilityMap[index] === false\n      }\n\n      return false\n    })\n    const overflowOrder =\n      firstOverflowedItemIndex === -1 ? React.Children.count(children) * 2 : firstOverflowedItemIndex * 2 - 1\n\n    const navItems = React.Children.map(children, (child, index) => {\n      if (React.isValidElement<SubdomainNavBarLinkProps>(child)) {\n        const isOverflowed = isMedium && visibilityMap[index] === false\n        return (\n          <SubdomainNavBarLinkContext.Provider value={{isOverflowed}}>\n            {React.cloneElement(child, {\n              className: clsx(\n                child.props.className,\n                isOverflowed && styles['SubdomainNavBar-primary-nav-list-item--overflowed'],\n              ),\n              style: {\n                ...child.props.style,\n                order: index * 2,\n              },\n            })}\n          </SubdomainNavBarLinkContext.Provider>\n        )\n      }\n\n      return child\n    })\n\n    const handleClose = useCallback(() => {\n      setMenuOpen(false)\n    }, [])\n\n    const handleOverflowButtonClick = () => {\n      setMenuOpen(prevMenuOpen => !prevMenuOpen)\n    }\n\n    const handleEscape = useCallback(() => {\n      if (menuOpen) {\n        handleClose()\n        overflowButtonRef.current?.focus()\n      }\n    }, [handleClose, menuOpen])\n\n    useEffect(() => {\n      if (!showOverflow) {\n        handleClose()\n      }\n    }, [handleClose, showOverflow])\n\n    useOnClickOutside(overflowRef, handleClose, overflowMenuRef)\n    useKeyboardEscape(handleEscape)\n\n    const {position} = useAnchoredPosition(\n      {\n        floatingElementRef: overflowMenuRef,\n        anchorElementRef: overflowButtonRef,\n        align: 'end',\n        side: 'outside-bottom',\n      },\n      [menuOpen, showOverflow, overflowOrder, visibilityMap],\n    )\n\n    if (!isMedium) {\n      return (\n        <ul className={clsx(styles['SubdomainNavBar-primary-nav-list'], className)} ref={navRef} {...rest}>\n          {children}\n        </ul>\n      )\n    }\n\n    return (\n      <div\n        className={clsx(\n          styles['SubdomainNavBar-primary-nav-overflow'],\n          showOverflow && styles['SubdomainNavBar-primary-nav-overflow--has-overflow'],\n          className,\n        )}\n      >\n        <ul className={styles['SubdomainNavBar-primary-nav-list']} ref={navRef} {...rest}>\n          {navItems}\n          <OverflowButton\n            ariaControls={overflowMenuId}\n            buttonRef={overflowButtonRef}\n            menuOpen={menuOpen}\n            onClick={handleOverflowButtonClick}\n            order={overflowOrder}\n            overflowMenuLabel={overflowMenuLabel}\n            ref={overflowRef}\n            visible={showOverflow}\n          />\n        </ul>\n        <OverflowMenu\n          id={overflowMenuId}\n          menuOpen={menuOpen}\n          onClose={handleClose}\n          position={position}\n          ref={overflowMenuRef}\n          visibilityMap={visibilityMap}\n        >\n          {children}\n        </OverflowMenu>\n      </div>\n    )\n  },\n)\n\ntype OverflowButtonProps = {\n  ariaControls: string\n  buttonRef: React.RefObject<HTMLButtonElement | null>\n  menuOpen: boolean\n  onClick: () => void\n  order: number\n  overflowMenuLabel: string\n  visible: boolean\n} & BaseProps<HTMLLIElement>\n\nconst OverflowButton = forwardRef<HTMLLIElement, OverflowButtonProps>(\n  ({ariaControls, buttonRef, className, menuOpen, onClick, order, overflowMenuLabel, visible}, forwardedRef) => {\n    const ref = useProvidedRefOrCreate<HTMLLIElement>(\n      forwardedRef as React.RefObject<HTMLLIElement> | React.RefCallback<HTMLLIElement> | null,\n    )\n\n    return (\n      <li\n        aria-hidden={visible ? undefined : true}\n        className={clsx(styles['SubdomainNavBar-primary-nav-list-item--overflow'], className)}\n        ref={ref}\n        style={{order}}\n      >\n        <button\n          aria-expanded={menuOpen ? 'true' : 'false'}\n          aria-controls={ariaControls}\n          onClick={onClick}\n          className={clsx(styles['SubdomainNavBar-link'], styles['SubdomainNavBar-more-link'])}\n          ref={buttonRef}\n          tabIndex={visible ? undefined : -1}\n        >\n          <span className={styles['SubdomainNavBar-link-content']}>\n            {overflowMenuLabel}\n            {menuOpen ? <TriangleUpIcon /> : <TriangleDownIcon />}\n          </span>\n        </button>\n      </li>\n    )\n  },\n)\n\ntype OverflowMenuProps = {\n  id: string\n  menuOpen: boolean\n  onClose: () => void\n  position?: {top: number; left: number}\n  visibilityMap: VisibilityMap\n} & BaseProps<HTMLDivElement>\n\nconst OverflowMenu = forwardRef<HTMLDivElement, React.PropsWithChildren<OverflowMenuProps>>(\n  ({children, className, id, menuOpen, onClose, position, visibilityMap}, forwardedRef) => {\n    if (!menuOpen) {\n      return null\n    }\n\n    return (\n      <div\n        id={id}\n        ref={forwardedRef}\n        style={{\n          top: `${position?.top ?? 0}px`,\n          left: `${position?.left ?? 0}px`,\n          visibility: position ? undefined : 'hidden',\n        }}\n        className={clsx(styles['SubdomainNavBar-overflow-menu'], className)}\n      >\n        <ul className={clsx(styles['SubdomainNavBar-overflow-menu-list'])}>\n          {React.Children.map(children, (child, index) => {\n            if (React.isValidElement<SubdomainNavBarLinkProps>(child)) {\n              if (visibilityMap[index] !== false) {\n                return null\n              }\n\n              return (\n                <SubdomainNavBarLinkContext.Provider value={{isOverflowed: false, onLinkClick: onClose}}>\n                  {React.cloneElement(child, {\n                    className: clsx(styles['SubdomainNavBar-overflow-menu-item'], child.props.className),\n                  })}\n                </SubdomainNavBarLinkContext.Provider>\n              )\n            }\n            return null\n          })}\n        </ul>\n      </div>\n    )\n  },\n)\n"],"mappings":"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"}

package/esm/SubdomainNavBar/SubdomainNavBar.d.ts

@@ -73,7 +73,7 @@ export type SubdomainNavBarLinkProps = {
     href: string;
     isExternal?: boolean;
 } & React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
-declare function Link({ href, className, children, isExternal, 'aria-current': ariaCurrent, 'aria-hidden': ariaHidden, tabIndex, ...rest }: PropsWithChildren<SubdomainNavBarLinkProps>): import("react/jsx-runtime").JSX.Element;
+declare function Link({ href, className, children, isExternal, 'aria-current': ariaCurrent, 'aria-hidden': ariaHidden, tabIndex, ...rest }: PropsWithChildren<SubdomainNavBarLinkProps>): React.JSX.Element;
 export type SubdomainNavBarSearchResultProps = {
     title: string;
     description: string;
@@ -157,8 +157,8 @@ export type SubdomainNavBarSearchProps = {
 type CTAActionProps = {
     href: string;
 } & React.HTMLAttributes<HTMLAnchorElement>;
-declare function PrimaryAction({ children, href, ...rest }: PropsWithChildren<CTAActionProps>): import("react/jsx-runtime").JSX.Element;
-declare function SecondaryAction({ children, href, ...rest }: PropsWithChildren<CTAActionProps>): import("react/jsx-runtime").JSX.Element;
+declare function PrimaryAction({ children, href, ...rest }: PropsWithChildren<CTAActionProps>): React.JSX.Element;
+declare function SecondaryAction({ children, href, ...rest }: PropsWithChildren<CTAActionProps>): React.JSX.Element;
 export declare const SubdomainNavBar: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "title" | "children"> & {
     /**
      * Valid child elements are `SubdomainNavBar.Link`, `SubdomainNavBar.PrimaryAction`,