@primer/react-brand 0.70.0-rc.4599efb5 → 0.70.0-rc.9ef718be

package/esm/Hero/Hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.js","names":[],"sources":["../../src/Hero/Hero.tsx"],"sourcesContent":["import React, {forwardRef, Fragment, PropsWithChildren, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {Grid} from '../Grid'\nimport {Stack} from '../Stack'\nimport {Box} from '../Box'\nimport type {BaseProps} from '../component-helpers'\nimport {AnimationProvider} from '../animation'\n\nimport {HeroContext, heroMediaInlinePositions} from './HeroContext'\nimport type {HeroMediaInlinePositions, HeroAlign, HeroVariant} from './HeroContext'\nimport {\n  HeroLabel,\n  HeroHeading,\n  HeroDescription,\n  HeroImage,\n  HeroVideo,\n  HeroEyebrow,\n  HeroPrimaryAction,\n  HeroSecondaryAction,\n} from './sub-components'\nimport type {HeroImageProps, HeroVideoProps} from './sub-components'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/hero/base.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Hero.module.css'\n\nconst testIds = {\n  root: 'Hero',\n  get video() {\n    return `${this.root}-video`\n  },\n  get grid() {\n    return `${this.root}-grid`\n  },\n  get imageWrapper() {\n    return `${this.root}-imageWrapper`\n  },\n}\n\nexport type HeroProps = BaseProps<HTMLElement> & {\n  align?: HeroAlign\n  imageContainerClassName?: string\n  imageContainerStyle?: React.CSSProperties\n  imageContainerRef?: React.RefObject<HTMLDivElement | null>\n  imageBackgroundColor?: 'default' | 'subtle'\n  variant?: HeroVariant\n  enableAnimation?: boolean\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  'data-testid'?: string\n}\n\nconst Root = forwardRef<HTMLElement, PropsWithChildren<HeroProps>>(\n  (\n    {\n      className,\n      align = 'start',\n      children,\n      imageContainerClassName,\n      imageContainerStyle,\n      imageContainerRef,\n      imageBackgroundColor,\n      variant = 'default',\n      trailingComponent: TrailingComponent,\n      enableAnimation = false,\n      'data-testid': testId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const {HeroActions, HeroChildren, HeroImageChild, HeroVideoChild, HeroHeaderChildren, HeroDescriptionChild} =\n      useMemo(() => {\n        const result = React.Children.toArray(children).reduce<{\n          HeroActions: React.ReactElement[]\n          HeroImageChild?: React.ReactElement<HeroImageProps>\n          HeroVideoChild?: React.ReactElement<HeroVideoProps>\n          HeroChildren: React.ReactElement[]\n          HeroHeaderChildren: React.ReactElement[]\n          HeroDescriptionChild?: React.ReactElement\n        }>(\n          (acc, child) => {\n            if (React.isValidElement(child)) {\n              if (child.type === HeroPrimaryAction || child.type === HeroSecondaryAction) {\n                acc.HeroActions.push(child)\n              } else if (child.type === HeroImage) {\n                acc.HeroImageChild = child as React.ReactElement<HeroImageProps>\n              } else if (child.type === HeroVideo) {\n                acc.HeroVideoChild = child as React.ReactElement<HeroVideoProps>\n              } else {\n                acc.HeroChildren.push(child)\n                if (child.type === HeroLabel || child.type === HeroEyebrow || child.type === HeroHeading) {\n                  acc.HeroHeaderChildren.push(child)\n                } else if (child.type === HeroDescription) {\n                  acc.HeroDescriptionChild = child\n                }\n              }\n            }\n            return acc\n          },\n          {\n            HeroActions: [],\n            HeroChildren: [],\n            HeroImageChild: undefined,\n            HeroVideoChild: undefined,\n            HeroHeaderChildren: [],\n            HeroDescriptionChild: undefined,\n          },\n        )\n\n        // Prefer Hero.Image - don't show both\n        if (result.HeroImageChild && result.HeroVideoChild) {\n          result.HeroVideoChild = undefined\n        }\n\n        return result\n      }, [children])\n\n    const mediaPositionProp = HeroImageChild?.props.position || HeroVideoChild?.props.position\n\n    const mediaPosition = (() => {\n      if (variant === 'gridline-expressive' && mediaPositionProp?.startsWith('inline-')) {\n        if (process.env.NODE_ENV !== 'production') {\n          // eslint-disable-next-line no-console\n          console.warn(\n            `Hero: \"gridline-expressive\" variant does not support \"${mediaPositionProp}\" position. Defaulting to \"block-end\".`,\n          )\n        }\n        return 'block-end'\n      }\n      return mediaPositionProp || 'block-end'\n    })()\n    const mediaWrapperHasBorder = HeroImageChild?.props.enableBorder ?? HeroVideoChild?.props.enableBorder ?? true\n    const hasInlineMedia = heroMediaInlinePositions.includes(mediaPosition as HeroMediaInlinePositions)\n    const inlineMediaPosition = hasInlineMedia ? mediaPosition : undefined\n    const mediaChild = HeroImageChild || HeroVideoChild\n    const isGridline = variant === 'gridline'\n    const isGridlineExpressive = variant === 'gridline-expressive'\n    const isBlockEndPosition = mediaPosition === 'block-end' || mediaPosition === 'block-end-padded'\n    const isBlockEndPadded = mediaPosition === 'block-end-padded'\n\n    const Tag = (isGridline || isGridlineExpressive) && enableAnimation ? AnimationProvider : Fragment\n    const tagProps =\n      (isGridline || isGridlineExpressive) && enableAnimation\n        ? {\n            autoStaggerChildren: false,\n            animationTrigger: 'immediate' as const,\n          }\n        : {}\n\n    const useContainedLayout = (isGridline || isGridlineExpressive) && isBlockEndPosition\n    const useInlineGridline = isGridline && hasInlineMedia\n\n    const heroLayoutClass = HeroImageChild ? styles['Hero--layout-image'] : styles['Hero--layout-default']\n    const isInlineStart = mediaPosition === 'inline-start' || mediaPosition === 'inline-start-padded'\n\n    const renderTrailingComponent = (shouldAnimate: boolean) =>\n      TrailingComponent && (\n        <Box animate={shouldAnimate ? {variant: 'slide-in-up' as const, delay: 1000, duration: 1000} : undefined}>\n          <div className={styles['Hero-trailing']}>\n            <TrailingComponent />\n          </div>\n        </Box>\n      )\n\n    const renderActions = () => HeroActions.length > 0 && <div className={styles['Hero-actions']}>{HeroActions}</div>\n\n    return (\n      <Tag {...tagProps}>\n        <HeroContext.Provider value={{imagePosition: mediaPosition, variant, align, hasInlineMedia, enableAnimation}}>\n          <section\n            className={clsx(\n              styles.Hero,\n              styles[`Hero--variant-${variant}`],\n              !hasInlineMedia && styles[`Hero--align-${align}`],\n              heroLayoutClass,\n              (HeroImageChild || HeroVideoChild) && styles[`Hero--image-pos-${mediaPosition}`],\n              (HeroImageChild || HeroVideoChild) && hasInlineMedia && styles['Hero--image-pos-inline'],\n              useInlineGridline && styles['Hero--variant-inline-gridline'],\n              className,\n            )}\n            ref={ref}\n            aria-labelledby=\"hero-section-brand-heading\"\n            data-testid={testId || testIds.root}\n            {...rest}\n          >\n            <Grid\n              fullWidth={!useContainedLayout && !useInlineGridline}\n              data-testid={testIds.grid}\n              className={clsx(\n                styles['Hero-grid'],\n                styles[`Hero-grid--${mediaPosition}`],\n                useContainedLayout && !isGridlineExpressive && styles['Hero-grid--contained'],\n                useInlineGridline && styles['Hero-grid--bordered-inline'],\n                isGridlineExpressive && styles['Hero-grid--expressive'],\n              )}\n            >\n              {isGridlineExpressive ? (\n                <>\n                  {/* Expressive variant: header column (left) */}\n                  <Grid.Column\n                    span={{medium: 12, large: HeroDescriptionChild ? 7 : 6}}\n                    className={styles['Hero-expressive-header-column']}\n                  >\n                    <Stack direction=\"vertical\" gap=\"none\" padding=\"none\" alignItems=\"flex-start\">\n                      {HeroHeaderChildren}\n                    </Stack>\n                  </Grid.Column>\n                  {/* Expressive variant: body column (right) */}\n                  <Grid.Column\n                    span={{medium: 12, large: HeroDescriptionChild ? 5 : 6}}\n                    className={styles['Hero-expressive-body-column']}\n                  >\n                    <Stack direction=\"vertical\" gap=\"none\" padding=\"none\" alignItems=\"flex-start\">\n                      {HeroDescriptionChild}\n                      {renderActions()}\n                      {renderTrailingComponent(enableAnimation)}\n                    </Stack>\n                  </Grid.Column>\n                </>\n              ) : (\n                <>\n                  {/* Standard GridLine variant: text column */}\n                  {isInlineStart && mediaChild && !useContainedLayout && (\n                    <Grid.Column\n                      ref={imageContainerRef}\n                      span={{large: 6}}\n                      className={clsx(\n                        imageBackgroundColor && styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],\n                        useInlineGridline &&\n                          inlineMediaPosition?.includes('padded') &&\n                          styles['Hero-imageContainer--inline-bg-padded'],\n                        useInlineGridline && styles['Hero-imageContainer--inline-bordered'],\n                      )}\n                    >\n                      <div\n                        className={clsx(styles['Hero-mediaContainer'], imageContainerClassName)}\n                        style={imageContainerStyle}\n                      >\n                        {mediaChild}\n                      </div>\n                    </Grid.Column>\n                  )}\n                  <Grid.Column span={{large: mediaChild && hasInlineMedia ? 6 : 12}}>\n                    <Stack\n                      className={clsx(\n                        useInlineGridline && styles['Hero-text-column--inline-gridline'],\n                        useInlineGridline && styles['Hero-contentColumn--bordered-inline'],\n                      )}\n                      direction=\"vertical\"\n                      gap=\"none\"\n                      padding=\"none\"\n                      alignItems={hasInlineMedia ? 'flex-start' : align === 'start' ? 'flex-start' : 'center'}\n                      justifyContent={hasInlineMedia ? undefined : align === 'start' ? 'flex-start' : 'center'}\n                    >\n                      {HeroChildren}\n                      {renderActions()}\n                      {renderTrailingComponent(isGridline && enableAnimation)}\n                    </Stack>\n                  </Grid.Column>\n                  {!isInlineStart && mediaChild && !useContainedLayout && (\n                    <Grid.Column\n                      ref={imageContainerRef}\n                      span={{large: hasInlineMedia ? 6 : 12}}\n                      className={clsx(\n                        imageBackgroundColor && styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],\n                        useInlineGridline &&\n                          inlineMediaPosition?.includes('padded') &&\n                          styles['Hero-imageContainer--inline-bg-padded'],\n                        useInlineGridline && styles['Hero-imageContainer--inline-bordered'],\n                      )}\n                    >\n                      <div\n                        className={clsx(styles['Hero-mediaContainer'], imageContainerClassName)}\n                        style={imageContainerStyle}\n                      >\n                        {mediaChild}\n                      </div>\n                    </Grid.Column>\n                  )}\n                </>\n              )}\n            </Grid>\n            {mediaChild && useContainedLayout && (\n              <div\n                ref={imageContainerRef}\n                data-testid={testIds.imageWrapper}\n                className={clsx(\n                  styles['Hero-imageWrapper'],\n                  isBlockEndPadded && styles['Hero-imageWrapper--block-end-padded'],\n                  imageContainerClassName,\n                  imageBackgroundColor && styles[`Hero-imageWrapper--bg-${imageBackgroundColor}`],\n                )}\n                style={imageContainerStyle}\n              >\n                <div\n                  className={clsx(\n                    styles['Hero-imageWrapper-inner'],\n                    isBlockEndPadded && styles['Hero-imageWrapper-inner--padded'],\n                    mediaWrapperHasBorder && styles['Hero-imageWrapper-inner--with-gridline'],\n                  )}\n                >\n                  {mediaChild}\n                </div>\n              </div>\n            )}\n          </section>\n        </HeroContext.Provider>\n      </Tag>\n    )\n  },\n)\n\nexport const Hero = Object.assign(Root, {\n  Heading: HeroHeading,\n  Description: HeroDescription,\n  PrimaryAction: HeroPrimaryAction,\n  SecondaryAction: HeroSecondaryAction,\n  Image: HeroImage,\n  Video: HeroVideo,\n  Label: HeroLabel,\n  Eyebrow: HeroEyebrow,\n  testIds,\n})\n"],"mappings":"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"}
+{"version":3,"file":"Hero.js","names":[],"sources":["../../src/Hero/Hero.tsx"],"sourcesContent":["import React, {forwardRef, Fragment, PropsWithChildren, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {Grid} from '../Grid'\nimport {Stack} from '../Stack'\nimport {Box} from '../Box'\nimport type {BaseProps} from '../component-helpers'\nimport {AnimationProvider} from '../animation'\n\nimport {HeroContext, heroMediaInlinePositions} from './HeroContext'\nimport type {HeroMediaInlinePositions, HeroAlign, HeroVariant} from './HeroContext'\nimport {\n  HeroLabel,\n  HeroHeading,\n  HeroDescription,\n  HeroImage,\n  HeroVideo,\n  HeroEyebrow,\n  HeroPrimaryAction,\n  HeroSecondaryAction,\n} from './sub-components'\nimport type {HeroImageProps, HeroVideoProps} from './sub-components'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/hero/base.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Hero.module.css'\n\nconst testIds = {\n  root: 'Hero',\n  get video() {\n    return `${this.root}-video`\n  },\n  get grid() {\n    return `${this.root}-grid`\n  },\n  get imageWrapper() {\n    return `${this.root}-imageWrapper`\n  },\n}\n\nexport type HeroProps = BaseProps<HTMLElement> & {\n  align?: HeroAlign\n  imageContainerClassName?: string\n  imageContainerStyle?: React.CSSProperties\n  imageContainerRef?: React.RefObject<HTMLDivElement | null>\n  imageBackgroundColor?: 'default' | 'subtle'\n  variant?: HeroVariant\n  enableAnimation?: boolean\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  'data-testid'?: string\n}\n\nconst Root = forwardRef<HTMLElement, PropsWithChildren<HeroProps>>(\n  (\n    {\n      className,\n      align: alignProp = 'start',\n      children,\n      imageContainerClassName,\n      imageContainerStyle,\n      imageContainerRef,\n      imageBackgroundColor,\n      variant = 'default',\n      trailingComponent: TrailingComponent,\n      enableAnimation = false,\n      'data-testid': testId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const {HeroActions, HeroChildren, HeroImageChild, HeroVideoChild, HeroHeaderChildren, HeroDescriptionChild} =\n      useMemo(() => {\n        const result = React.Children.toArray(children).reduce<{\n          HeroActions: React.ReactElement[]\n          HeroImageChild?: React.ReactElement<HeroImageProps>\n          HeroVideoChild?: React.ReactElement<HeroVideoProps>\n          HeroChildren: React.ReactElement[]\n          HeroHeaderChildren: React.ReactElement[]\n          HeroDescriptionChild?: React.ReactElement\n        }>(\n          (acc, child) => {\n            if (React.isValidElement(child)) {\n              if (child.type === HeroPrimaryAction || child.type === HeroSecondaryAction) {\n                acc.HeroActions.push(child)\n              } else if (child.type === HeroImage) {\n                acc.HeroImageChild = child as React.ReactElement<HeroImageProps>\n              } else if (child.type === HeroVideo) {\n                acc.HeroVideoChild = child as React.ReactElement<HeroVideoProps>\n              } else {\n                acc.HeroChildren.push(child)\n                if (child.type === HeroLabel || child.type === HeroEyebrow || child.type === HeroHeading) {\n                  acc.HeroHeaderChildren.push(child)\n                } else if (child.type === HeroDescription) {\n                  acc.HeroDescriptionChild = child\n                }\n              }\n            }\n            return acc\n          },\n          {\n            HeroActions: [],\n            HeroChildren: [],\n            HeroImageChild: undefined,\n            HeroVideoChild: undefined,\n            HeroHeaderChildren: [],\n            HeroDescriptionChild: undefined,\n          },\n        )\n\n        // Prefer Hero.Image - don't show both\n        if (result.HeroImageChild && result.HeroVideoChild) {\n          result.HeroVideoChild = undefined\n        }\n\n        return result\n      }, [children])\n\n    const mediaPositionProp = HeroImageChild?.props.position || HeroVideoChild?.props.position\n\n    const mediaPosition = (() => {\n      if (variant === 'gridline-expressive' && mediaPositionProp?.startsWith('inline-')) {\n        if (process.env.NODE_ENV !== 'production') {\n          // eslint-disable-next-line no-console\n          console.warn(\n            `Hero: \"gridline-expressive\" variant does not support \"${mediaPositionProp}\" position. Defaulting to \"block-end\".`,\n          )\n        }\n        return 'block-end'\n      }\n      return mediaPositionProp || 'block-end'\n    })()\n    const mediaWrapperHasBorder = HeroImageChild?.props.enableBorder ?? HeroVideoChild?.props.enableBorder ?? true\n    const hasInlineMedia = heroMediaInlinePositions.includes(mediaPosition as HeroMediaInlinePositions)\n    const inlineMediaPosition = hasInlineMedia ? mediaPosition : undefined\n    const mediaChild = HeroImageChild || HeroVideoChild\n    const isGridline = variant === 'gridline'\n    const isGridlineExpressive = variant === 'gridline-expressive'\n    const isBlockEndPosition = mediaPosition === 'block-end' || mediaPosition === 'block-end-padded'\n    const isBlockEndPadded = mediaPosition === 'block-end-padded'\n\n    const isInvalidGridlineAlignment = isGridlineExpressive && alignProp === 'center'\n    const align: HeroAlign = isInvalidGridlineAlignment ? 'start' : alignProp\n\n    if (isInvalidGridlineAlignment && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n      // eslint-disable-next-line no-console\n      console.warn('Hero: the \"gridline-expressive\" variant does not support align=\"center\"; using \"start\" instead.')\n    }\n\n    const Tag = (isGridline || isGridlineExpressive) && enableAnimation ? AnimationProvider : Fragment\n    const tagProps =\n      (isGridline || isGridlineExpressive) && enableAnimation\n        ? {\n            autoStaggerChildren: false,\n            animationTrigger: 'immediate' as const,\n          }\n        : {}\n\n    const useContainedLayout = (isGridline || isGridlineExpressive) && isBlockEndPosition\n    const useInlineGridline = isGridline && hasInlineMedia\n\n    const heroLayoutClass = HeroImageChild ? styles['Hero--layout-image'] : styles['Hero--layout-default']\n    const isInlineStart = mediaPosition === 'inline-start' || mediaPosition === 'inline-start-padded'\n\n    const renderTrailingComponent = (shouldAnimate: boolean) =>\n      TrailingComponent && (\n        <Box animate={shouldAnimate ? {variant: 'slide-in-up' as const, delay: 1000, duration: 1000} : undefined}>\n          <div className={styles['Hero-trailing']}>\n            <TrailingComponent />\n          </div>\n        </Box>\n      )\n\n    const renderActions = () => HeroActions.length > 0 && <div className={styles['Hero-actions']}>{HeroActions}</div>\n\n    return (\n      <Tag {...tagProps}>\n        <HeroContext.Provider value={{imagePosition: mediaPosition, variant, align, hasInlineMedia, enableAnimation}}>\n          <section\n            className={clsx(\n              styles.Hero,\n              styles[`Hero--variant-${variant}`],\n              !hasInlineMedia && styles[`Hero--align-${align}`],\n              heroLayoutClass,\n              (HeroImageChild || HeroVideoChild) && styles[`Hero--image-pos-${mediaPosition}`],\n              (HeroImageChild || HeroVideoChild) && hasInlineMedia && styles['Hero--image-pos-inline'],\n              useInlineGridline && styles['Hero--variant-inline-gridline'],\n              className,\n            )}\n            ref={ref}\n            aria-labelledby=\"hero-section-brand-heading\"\n            data-testid={testId || testIds.root}\n            {...rest}\n          >\n            <Grid\n              fullWidth={!useContainedLayout && !useInlineGridline}\n              data-testid={testIds.grid}\n              className={clsx(\n                styles['Hero-grid'],\n                styles[`Hero-grid--${mediaPosition}`],\n                useContainedLayout && !isGridlineExpressive && styles['Hero-grid--contained'],\n                useInlineGridline && styles['Hero-grid--bordered-inline'],\n                isGridlineExpressive && styles['Hero-grid--expressive'],\n              )}\n            >\n              {isGridlineExpressive ? (\n                <>\n                  {/* Expressive variant: header column (left) */}\n                  <Grid.Column\n                    span={{medium: 12, large: HeroDescriptionChild ? 7 : 6}}\n                    className={styles['Hero-expressive-header-column']}\n                  >\n                    <Stack direction=\"vertical\" gap=\"none\" padding=\"none\" alignItems=\"flex-start\">\n                      {HeroHeaderChildren}\n                    </Stack>\n                  </Grid.Column>\n                  {/* Expressive variant: body column (right) */}\n                  <Grid.Column\n                    span={{medium: 12, large: HeroDescriptionChild ? 5 : 6}}\n                    className={styles['Hero-expressive-body-column']}\n                  >\n                    <Stack direction=\"vertical\" gap=\"none\" padding=\"none\" alignItems=\"flex-start\">\n                      {HeroDescriptionChild}\n                      {renderActions()}\n                      {renderTrailingComponent(enableAnimation)}\n                    </Stack>\n                  </Grid.Column>\n                </>\n              ) : (\n                <>\n                  {/* Standard GridLine variant: text column */}\n                  {isInlineStart && mediaChild && !useContainedLayout && (\n                    <Grid.Column\n                      ref={imageContainerRef}\n                      span={{large: 6}}\n                      className={clsx(\n                        imageBackgroundColor && styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],\n                        useInlineGridline &&\n                          inlineMediaPosition?.includes('padded') &&\n                          styles['Hero-imageContainer--inline-bg-padded'],\n                        useInlineGridline && styles['Hero-imageContainer--inline-bordered'],\n                      )}\n                    >\n                      <div\n                        className={clsx(styles['Hero-mediaContainer'], imageContainerClassName)}\n                        style={imageContainerStyle}\n                      >\n                        {mediaChild}\n                      </div>\n                    </Grid.Column>\n                  )}\n                  <Grid.Column span={{large: mediaChild && hasInlineMedia ? 6 : 12}}>\n                    <Stack\n                      className={clsx(\n                        useInlineGridline && styles['Hero-text-column--inline-gridline'],\n                        useInlineGridline && styles['Hero-contentColumn--bordered-inline'],\n                      )}\n                      direction=\"vertical\"\n                      gap=\"none\"\n                      padding=\"none\"\n                      alignItems={hasInlineMedia ? 'flex-start' : align === 'start' ? 'flex-start' : 'center'}\n                      justifyContent={hasInlineMedia ? undefined : align === 'start' ? 'flex-start' : 'center'}\n                    >\n                      {HeroChildren}\n                      {renderActions()}\n                      {renderTrailingComponent(isGridline && enableAnimation)}\n                    </Stack>\n                  </Grid.Column>\n                  {!isInlineStart && mediaChild && !useContainedLayout && (\n                    <Grid.Column\n                      ref={imageContainerRef}\n                      span={{large: hasInlineMedia ? 6 : 12}}\n                      className={clsx(\n                        imageBackgroundColor && styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],\n                        useInlineGridline &&\n                          inlineMediaPosition?.includes('padded') &&\n                          styles['Hero-imageContainer--inline-bg-padded'],\n                        useInlineGridline && styles['Hero-imageContainer--inline-bordered'],\n                      )}\n                    >\n                      <div\n                        className={clsx(styles['Hero-mediaContainer'], imageContainerClassName)}\n                        style={imageContainerStyle}\n                      >\n                        {mediaChild}\n                      </div>\n                    </Grid.Column>\n                  )}\n                </>\n              )}\n            </Grid>\n            {mediaChild && useContainedLayout && (\n              <div\n                ref={imageContainerRef}\n                data-testid={testIds.imageWrapper}\n                className={clsx(\n                  styles['Hero-imageWrapper'],\n                  isBlockEndPadded && styles['Hero-imageWrapper--block-end-padded'],\n                  imageContainerClassName,\n                  imageBackgroundColor && styles[`Hero-imageWrapper--bg-${imageBackgroundColor}`],\n                )}\n                style={imageContainerStyle}\n              >\n                <div\n                  className={clsx(\n                    styles['Hero-imageWrapper-inner'],\n                    isBlockEndPadded && styles['Hero-imageWrapper-inner--padded'],\n                    mediaWrapperHasBorder && styles['Hero-imageWrapper-inner--with-gridline'],\n                  )}\n                >\n                  {mediaChild}\n                </div>\n              </div>\n            )}\n          </section>\n        </HeroContext.Provider>\n      </Tag>\n    )\n  },\n)\n\nexport const Hero = Object.assign(Root, {\n  Heading: HeroHeading,\n  Description: HeroDescription,\n  PrimaryAction: HeroPrimaryAction,\n  SecondaryAction: HeroSecondaryAction,\n  Image: HeroImage,\n  Video: HeroVideo,\n  Label: HeroLabel,\n  Eyebrow: HeroEyebrow,\n  testIds,\n})\n"],"mappings":"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"}

package/esm/NavList/NavList.d.ts

@@ -0,0 +1,86 @@
+import React, { type PropsWithChildren, type ReactElement, type ReactNode, type Ref } from 'react';
+import { type Icon } from '@primer/octicons-react';
+import type { BaseProps } from '../component-helpers';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/nav-list/colors-with-modes.css';
+export type NavListRootProps = {
+    /**
+     * Accessible label for the navigation landmark.
+     */
+    'aria-label': string;
+    /**
+     * ID of an element that labels the navigation landmark.
+     */
+    'aria-labelledby'?: string;
+    children: ReactNode;
+    'data-testid'?: string;
+} & BaseProps<HTMLElement> & Omit<React.HTMLAttributes<HTMLElement>, 'aria-label' | 'aria-labelledby'>;
+type Visual = ReactElement | React.ElementType | Icon;
+type NavListItemAs = 'a' | 'button';
+type NavListItemBaseProps = {
+    /**
+     * Leading visual rendered before the item label.
+     */
+    leadingVisual?: Visual;
+    /**
+     * Trailing visual rendered after the item label.
+     */
+    trailingVisual?: Visual;
+    /**
+     * Whether nested items should be expanded by default.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Controls the nested item expanded state.
+     */
+    expanded?: boolean;
+    /**
+     * Called when a nested item is expanded or collapsed.
+     */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * Marks the item as disabled. Disabled link items receive `aria-disabled`.
+     */
+    disabled?: boolean;
+    'data-testid'?: string;
+};
+export type NavListItemProps<C extends NavListItemAs = 'a'> = {
+    as?: C;
+} & NavListItemBaseProps & PropsWithChildren<BaseProps<HTMLElement>> & Omit<React.ComponentPropsWithoutRef<C>, keyof NavListItemBaseProps | keyof BaseProps<HTMLElement> | 'as' | 'children'>;
+export type NavListSubNavProps = {
+    children: ReactNode;
+    'data-testid'?: string;
+} & BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>;
+export type NavListGroupProps = {
+    /**
+     * Heading text for the group.
+     */
+    title?: ReactNode;
+    children: ReactNode;
+    'data-testid'?: string;
+} & BaseProps<HTMLLIElement> & Omit<React.LiHTMLAttributes<HTMLLIElement>, 'title'>;
+/**
+ * Use NavList to render vertical navigation links with groups and expandable nested lists.
+ * @see https://primer.style/brand/components/NavList
+ */
+export declare const NavList: React.ForwardRefExoticComponent<Omit<NavListRootProps, "ref"> & React.RefAttributes<HTMLElement>> & {
+    Item: <C extends NavListItemAs = "a">(props: NavListItemProps<C> & {
+        ref?: Ref<HTMLElement>;
+    }) => ReactElement | null;
+    SubNav: React.ForwardRefExoticComponent<Omit<NavListSubNavProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+    Group: React.ForwardRefExoticComponent<Omit<NavListGroupProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    testIds: {
+        root: string;
+        readonly list: string;
+        readonly item: string;
+        readonly link: string;
+        readonly leadingVisual: string;
+        readonly trailingVisual: string;
+        readonly subNav: string;
+        readonly group: string;
+        readonly groupTitle: string;
+        readonly groupList: string;
+        readonly toggle: string;
+    };
+};
+export {};
+//# sourceMappingURL=NavList.d.ts.map

package/esm/NavList/NavList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavList.d.ts","sourceRoot":"","sources":["../../src/NavList/NavList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAaZ,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,OAAO,CAAA;AAGd,OAAO,EAAmB,KAAK,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAClE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,OAAO,4GAA4G,CAAA;AAuCnH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,EAAE,SAAS,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,SAAS,CAAC,WAAW,CAAC,GACxB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,YAAY,GAAG,iBAAiB,CAAC,CAAA;AAgD3E,KAAK,MAAM,GAAG,YAAY,GAAG,KAAK,CAAC,WAAW,GAAG,IAAI,CAAA;AACrD,KAAK,aAAa,GAAG,GAAG,GAAG,QAAQ,CAAA;AAEnC,KAAK,oBAAoB,GAAG;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,aAAa,GAAG,GAAG,IAAI;IAC5D,EAAE,CAAC,EAAE,CAAC,CAAA;CACP,GAAG,oBAAoB,GACtB,iBAAiB,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,GACzC,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,oBAAoB,GAAG,MAAM,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,UAAU,CAAC,CAAA;AA6MxH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,SAAS,CAAC,gBAAgB,CAAC,GAC7B,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAA;AAkExC,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,EAAE,SAAS,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,SAAS,CAAC,aAAa,CAAC,GAC1B,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,CAAA;AA+DtD;;;GAGG;AACH,eAAO,MAAM,OAAO;WAnJd,CAAC,SAAS,aAAa,eAAe,gBAAgB,CAAC,CAAC,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,KAAK,YAAY,GAAG,IAAI;;;;;;;;;;;;;;;;CAwJhH,CAAA"}

package/esm/NavList/NavList.js

@@ -0,0 +1,277 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { useId as t } from "../hooks/useId.js";
+import { TriangleDownIcon as n } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/nav-list/colors-with-modes-CGyt2t8f.css';/* empty css                                                                                                      */
+import r from "./NavList.module.js";
+import i, { Children as a, createContext as o, forwardRef as s, isValidElement as c, useCallback as l, useContext as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/NavList/NavList.tsx
+var _ = {
+	root: "NavList",
+	get list() {
+		return `${this.root}-list`;
+	},
+	get item() {
+		return `${this.root}-item`;
+	},
+	get link() {
+		return `${this.root}-link`;
+	},
+	get leadingVisual() {
+		return `${this.root}-leading-visual`;
+	},
+	get trailingVisual() {
+		return `${this.root}-trailing-visual`;
+	},
+	get subNav() {
+		return `${this.root}-sub-nav`;
+	},
+	get group() {
+		return `${this.root}-group`;
+	},
+	get groupTitle() {
+		return `${this.root}-group-title`;
+	},
+	get groupList() {
+		return `${this.root}-group-list`;
+	},
+	get toggle() {
+		return `${this.root}-toggle`;
+	}
+}, v = 5, y = o(1), b = o({
+	expanded: !0,
+	level: 2
+}), x = s(({ children: t, className: n, "aria-label": i, "aria-labelledby": o, "data-testid": s, ...c }, l) => {
+	let u = f(() => a.toArray(t), [t]), d = f(() => u.some(j), [u]), p = f(() => u.some(M), [u]), m = d ? 1 : 2, g = !d && !p;
+	return /* @__PURE__ */ h("nav", {
+		ref: l,
+		className: e(r.NavList, n),
+		"aria-label": i,
+		"aria-labelledby": o,
+		"data-testid": s || _.root,
+		...c,
+		children: /* @__PURE__ */ h(y.Provider, {
+			value: m,
+			children: /* @__PURE__ */ h("ul", {
+				className: e(r.NavList__list, g && r["NavList__list--flat"]),
+				"data-testid": _.list,
+				children: t
+			})
+		})
+	});
+}), S = s(({ as: o, children: s, className: c, defaultExpanded: p = !1, disabled: x = !1, expanded: S, leadingVisual: C, onClick: w, onExpandedChange: T, trailingVisual: D, "aria-current": O, "data-testid": k, ...j }, M) => {
+	let te = o || "a", I = u(y), ne = t(), re = t(), L = f(() => a.toArray(s), [s]), R = f(() => L.filter(E), [L]), z = f(() => L.find(E), [L]), B = f(() => L.filter(N), [L]), V = f(() => z ? L.filter((e) => e !== z) : L, [L, z]), H = V.length > 0, U = !!z, W = I < v, ie = !U, G = z?.props.id ?? ne, K = f(() => ee(z?.props.children), [z?.props.children]), q = S !== void 0, [ae, J] = m(p || K), Y = !!(q ? S : ae), { href: X, id: oe, ...se } = j, Z = oe ?? re, Q = w, ce = f(() => {
+		if (B.length > 0) return "NavList.Item: NavList.Group is not supported as a child. Use NavList.SubNav for nested disclosure. NavList.Item will not be rendered.";
+		if (U && !W) return "NavList.Item: NavList supports up to 5 levels. Level 5 items cannot contain NavList.SubNav. NavList.Item will not be rendered.";
+		if (R.length > 1) return "NavList.Item: Only one NavList.SubNav child is supported. NavList.Item will not be rendered.";
+		if (U && !H) return "NavList.Item: A label is required when using NavList.SubNav. NavList.Item will not be rendered.";
+		if (U && (X !== void 0 || o !== void 0)) return "NavList.Item: `href` and `as` are not supported when using NavList.SubNav because expandable items render as buttons. NavList.Item will not be rendered.";
+	}, [
+		o,
+		W,
+		H,
+		U,
+		X,
+		B.length,
+		R.length
+	]);
+	d(() => {
+		K && !q && J(!0);
+	}, [K, q]);
+	let le = l((e) => {
+		q || J(e), T?.(e);
+	}, [q, T]), $ = l(() => {
+		le(!Y);
+	}, [Y, le]), ue = l((e) => {
+		if (x) {
+			e.preventDefault();
+			return;
+		}
+		Q?.(e);
+	}, [x, Q]), de = l((e) => {
+		A(M, e);
+	}, [M]), fe = l((e) => {
+		if (x) {
+			e.preventDefault();
+			return;
+		}
+		Q?.(e), e.defaultPrevented || $();
+	}, [
+		x,
+		Q,
+		$
+	]);
+	if (ce) return F(ce), null;
+	let pe = /* @__PURE__ */ g("span", {
+		className: r.NavList__labelArea,
+		children: [
+			P(C, r.NavList__leadingVisual, _.leadingVisual),
+			/* @__PURE__ */ h("span", {
+				className: r.NavList__label,
+				children: V
+			}),
+			P(D, r.NavList__trailingVisual, _.trailingVisual)
+		]
+	});
+	return /* @__PURE__ */ g("li", {
+		className: e(r.NavList__item, r[`NavList__item--level-${I}`], ie && r["NavList__item--leaf"], U && Y && r["NavList__item--expanded"], K && r["NavList__item--has-current-descendant"]),
+		"data-testid": k || _.item,
+		children: [/* @__PURE__ */ h("div", {
+			className: r.NavList__itemContent,
+			children: U && W ? /* @__PURE__ */ g("button", {
+				ref: de,
+				id: Z,
+				type: "button",
+				className: e(r.NavList__link, r.NavList__accordionButton, x && r["NavList__link--disabled"], c),
+				"aria-expanded": Y ? "true" : "false",
+				"aria-controls": G,
+				"data-testid": _.toggle,
+				...se,
+				disabled: x,
+				onClick: fe,
+				children: [/* @__PURE__ */ h(n, {
+					className: r.NavList__toggleIcon,
+					"aria-hidden": "true"
+				}), pe]
+			}) : /* @__PURE__ */ h(te, {
+				ref: M,
+				className: e(r.NavList__link, x && r["NavList__link--disabled"], c),
+				"aria-current": O,
+				"aria-disabled": x || void 0,
+				"data-testid": _.link,
+				onClick: ue,
+				...j,
+				children: pe
+			})
+		}), z ? /* @__PURE__ */ h(b.Provider, {
+			value: {
+				expanded: Y,
+				labelledBy: Z,
+				level: I + 1
+			},
+			children: i.cloneElement(z, { id: G })
+		}) : null]
+	});
+}), C = s(({ children: t, className: n, "aria-labelledby": i, "data-testid": a, ...o }, s) => {
+	let { expanded: c, labelledBy: f, level: m } = u(b), g = p(null), v = l((e) => {
+		e.style.setProperty("--brand-NavList-subNav-height", `${e.scrollHeight}px`);
+	}, []), x = l(() => {
+		let e = g.current;
+		for (; e;) v(e), e = e.parentElement?.closest(`.${r.NavList__subNav}`) ?? null;
+	}, [v]), S = l((e) => {
+		g.current = e, A(s, e);
+	}, [s]);
+	return d(() => {
+		x();
+	}, [
+		t,
+		c,
+		x
+	]), d(() => {
+		g.current?.toggleAttribute("inert", !c);
+	}, [c]), d(() => {
+		let e = g.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(x);
+		return t.observe(e), () => {
+			t.disconnect();
+		};
+	}, [x]), /* @__PURE__ */ h("ul", {
+		ref: S,
+		className: e(r.NavList__subNav, c && r["NavList__subNav--expanded"], n),
+		"aria-labelledby": i ?? f,
+		...o,
+		"aria-hidden": c ? void 0 : "true",
+		"data-testid": a || _.subNav,
+		children: /* @__PURE__ */ h(y.Provider, {
+			value: m,
+			children: t
+		})
+	});
+}), w = s(({ title: n, children: o, className: s, "data-testid": l, ...u }, d) => {
+	let p = t(), m = f(() => {
+		let e = (t) => a.toArray(t).flatMap((t) => D(t) ? [t] : c(t) && t.type === i.Fragment ? e(t.props.children) : []);
+		return e(o);
+	}, [o]);
+	return f(() => {
+		let e = (t) => a.toArray(t).some((t) => D(t) ? !1 : c(t) && t.type === i.Fragment ? e(t.props.children) : !0);
+		return e(o);
+	}, [o]) && F("NavList.Group: Only NavList.Item children are supported. Invalid children will not be rendered. Use NavList.SubNav as a child of NavList.Item for nested disclosure."), /* @__PURE__ */ g("li", {
+		ref: d,
+		className: e(r.NavList__group, s),
+		"data-testid": l || _.group,
+		...u,
+		children: [n ? /* @__PURE__ */ h("h3", {
+			id: p,
+			className: r.NavList__groupTitle,
+			"data-testid": _.groupTitle,
+			children: n
+		}) : null, /* @__PURE__ */ h("ul", {
+			className: r.NavList__groupList,
+			"aria-labelledby": n ? p : void 0,
+			"data-testid": _.groupList,
+			children: /* @__PURE__ */ h(y.Provider, {
+				value: 2,
+				children: m
+			})
+		})]
+	});
+}), T = Object.assign(x, {
+	Item: S,
+	SubNav: C,
+	Group: w,
+	testIds: _
+});
+function E(e) {
+	return c(e) && e.type === C;
+}
+function D(e) {
+	return c(e) && e.type === S;
+}
+function O(e) {
+	return c(e) && e.type === w;
+}
+function k(e) {
+	return !!e && e !== "false";
+}
+function ee(e) {
+	return a.toArray(e).some((e) => c(e) ? k(e.props["aria-current"]) ? !0 : ee(e.props.children) : !1);
+}
+function A(e, t) {
+	if (e) {
+		if (typeof e == "function") {
+			e(t);
+			return;
+		}
+		e.current = t;
+	}
+}
+function j(e) {
+	return c(e) ? e.type === i.Fragment ? a.toArray(e.props.children).some(j) : a.toArray(e.props.children).some(E) : !1;
+}
+function M(e) {
+	return c(e) ? e.type === i.Fragment ? a.toArray(e.props.children).some(M) : O(e) : !1;
+}
+function N(e) {
+	return c(e) ? e.type === i.Fragment ? a.toArray(e.props.children).some(N) : O(e) : !1;
+}
+function P(e, t, n) {
+	if (!e) return null;
+	let r = c(e) ? e : i.createElement(e);
+	return c(r) ? /* @__PURE__ */ h("span", {
+		className: t,
+		"data-testid": n,
+		children: i.cloneElement(r, {
+			className: r.props.className,
+			"aria-hidden": "true",
+			focusable: "false"
+		})
+	}) : null;
+}
+function F(e) {
+	(process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn(e);
+}
+//#endregion
+export { T as NavList };
+
+//# sourceMappingURL=NavList.js.map

package/esm/NavList/NavList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavList.js","names":[],"sources":["../../src/NavList/NavList.tsx"],"sourcesContent":["import React, {\n  Children,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type AriaAttributes,\n  type MutableRefObject,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react'\n\nimport {clsx} from 'clsx'\nimport {TriangleDownIcon, type Icon} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport {useId} from '../hooks/useId'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/nav-list/colors-with-modes.css'\n\n/** * Main stylesheet (as a CSS Module) */\nimport styles from './NavList.module.css'\n\nconst testIds = {\n  root: 'NavList',\n  get list() {\n    return `${this.root}-list`\n  },\n  get item() {\n    return `${this.root}-item`\n  },\n  get link() {\n    return `${this.root}-link`\n  },\n  get leadingVisual() {\n    return `${this.root}-leading-visual`\n  },\n  get trailingVisual() {\n    return `${this.root}-trailing-visual`\n  },\n  get subNav() {\n    return `${this.root}-sub-nav`\n  },\n  get group() {\n    return `${this.root}-group`\n  },\n  get groupTitle() {\n    return `${this.root}-group-title`\n  },\n  get groupList() {\n    return `${this.root}-group-list`\n  },\n  get toggle() {\n    return `${this.root}-toggle`\n  },\n}\n\nexport type NavListRootProps = {\n  /**\n   * Accessible label for the navigation landmark.\n   */\n  'aria-label': string\n  /**\n   * ID of an element that labels the navigation landmark.\n   */\n  'aria-labelledby'?: string\n  children: ReactNode\n  'data-testid'?: string\n} & BaseProps<HTMLElement> &\n  Omit<React.HTMLAttributes<HTMLElement>, 'aria-label' | 'aria-labelledby'>\n\ntype NavListLevel = 1 | 2 | 3 | 4 | 5\n\nconst MaxNavListLevel = 5\nconst NavListLevelContext = createContext<NavListLevel>(1)\nconst NavListSubNavContext = createContext<{\n  expanded: boolean\n  labelledBy?: string\n  level: NavListLevel\n}>({\n  expanded: true,\n  level: 2,\n})\n\nconst NavListRoot = forwardRef<HTMLElement, NavListRootProps>(\n  (\n    {children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'data-testid': testId, ...rest},\n    ref,\n  ) => {\n    const childrenArray = useMemo(() => Children.toArray(children), [children])\n    const hasTopLevelSubNav = useMemo(() => childrenArray.some(childHasDirectSubNav), [childrenArray])\n    const hasTopLevelGroup = useMemo(() => childrenArray.some(childIsNavListGroupElement), [childrenArray])\n    const rootLevel = hasTopLevelSubNav ? 1 : 2\n    const hasFlatRootList = !hasTopLevelSubNav && !hasTopLevelGroup\n\n    return (\n      <nav\n        ref={ref}\n        className={clsx(styles.NavList, className)}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        data-testid={testId || testIds.root}\n        {...rest}\n      >\n        <NavListLevelContext.Provider value={rootLevel}>\n          <ul\n            className={clsx(styles.NavList__list, hasFlatRootList && styles['NavList__list--flat'])}\n            data-testid={testIds.list}\n          >\n            {children}\n          </ul>\n        </NavListLevelContext.Provider>\n      </nav>\n    )\n  },\n)\n\ntype Visual = ReactElement | React.ElementType | Icon\ntype NavListItemAs = 'a' | 'button'\n\ntype NavListItemBaseProps = {\n  /**\n   * Leading visual rendered before the item label.\n   */\n  leadingVisual?: Visual\n  /**\n   * Trailing visual rendered after the item label.\n   */\n  trailingVisual?: Visual\n  /**\n   * Whether nested items should be expanded by default.\n   */\n  defaultExpanded?: boolean\n  /**\n   * Controls the nested item expanded state.\n   */\n  expanded?: boolean\n  /**\n   * Called when a nested item is expanded or collapsed.\n   */\n  onExpandedChange?: (expanded: boolean) => void\n  /**\n   * Marks the item as disabled. Disabled link items receive `aria-disabled`.\n   */\n  disabled?: boolean\n  'data-testid'?: string\n}\n\nexport type NavListItemProps<C extends NavListItemAs = 'a'> = {\n  as?: C\n} & NavListItemBaseProps &\n  PropsWithChildren<BaseProps<HTMLElement>> &\n  Omit<React.ComponentPropsWithoutRef<C>, keyof NavListItemBaseProps | keyof BaseProps<HTMLElement> | 'as' | 'children'>\n\ntype NavListSubNavElement = ReactElement<NavListSubNavProps>\n\nconst NavListItem = forwardRef(\n  (\n    {\n      as,\n      children,\n      className,\n      defaultExpanded = false,\n      disabled = false,\n      expanded,\n      leadingVisual,\n      onClick,\n      onExpandedChange,\n      trailingVisual,\n      'aria-current': ariaCurrent,\n      'data-testid': testId,\n      ...rest\n    }: NavListItemProps<NavListItemAs>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    const Component = (as || 'a') as React.ElementType\n    const level = useContext(NavListLevelContext)\n    const subNavId = useId()\n    const accordionButtonId = useId()\n    const childrenArray = useMemo(() => Children.toArray(children), [children])\n    const subNavChildren = useMemo(() => childrenArray.filter(isNavListSubNavElement), [childrenArray])\n    const subNav = useMemo(() => childrenArray.find(isNavListSubNavElement), [childrenArray])\n    const navListGroupChildren = useMemo(() => childrenArray.filter(childHasNavListGroupElement), [childrenArray])\n    const labelChildren = useMemo(\n      () => (subNav ? childrenArray.filter(child => child !== subNav) : childrenArray),\n      [childrenArray, subNav],\n    )\n    const hasLabelContent = labelChildren.length > 0\n    const hasSubNav = Boolean(subNav)\n    const canExpand = level < MaxNavListLevel\n    const isLeafItem = !hasSubNav\n    const controlledSubNavId = subNav?.props.id ?? subNavId\n    const hasCurrentSubNavItem = useMemo(() => hasCurrentDescendant(subNav?.props.children), [subNav?.props.children])\n    const isControlled = expanded !== undefined\n    const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded || hasCurrentSubNavItem)\n    const isExpanded = Boolean(isControlled ? expanded : uncontrolledExpanded)\n    const {\n      href,\n      id: accordionButtonIdProp,\n      ...accordionButtonProps\n    } = rest as React.ButtonHTMLAttributes<HTMLButtonElement> & {\n      href?: string\n    }\n    const controlledAccordionButtonId = accordionButtonIdProp ?? accordionButtonId\n    const itemOnClick = onClick as React.MouseEventHandler<HTMLElement> | undefined\n    const invalidMessage = useMemo(() => {\n      if (navListGroupChildren.length > 0) {\n        return 'NavList.Item: NavList.Group is not supported as a child. Use NavList.SubNav for nested disclosure. NavList.Item will not be rendered.'\n      }\n\n      if (hasSubNav && !canExpand) {\n        return 'NavList.Item: NavList supports up to 5 levels. Level 5 items cannot contain NavList.SubNav. NavList.Item will not be rendered.'\n      }\n\n      if (subNavChildren.length > 1) {\n        return 'NavList.Item: Only one NavList.SubNav child is supported. NavList.Item will not be rendered.'\n      }\n\n      if (hasSubNav && !hasLabelContent) {\n        return 'NavList.Item: A label is required when using NavList.SubNav. NavList.Item will not be rendered.'\n      }\n\n      if (hasSubNav && (href !== undefined || as !== undefined)) {\n        return 'NavList.Item: `href` and `as` are not supported when using NavList.SubNav because expandable items render as buttons. NavList.Item will not be rendered.'\n      }\n    }, [as, canExpand, hasLabelContent, hasSubNav, href, navListGroupChildren.length, subNavChildren.length])\n\n    useEffect(() => {\n      if (hasCurrentSubNavItem && !isControlled) {\n        setUncontrolledExpanded(true)\n      }\n    }, [hasCurrentSubNavItem, isControlled])\n\n    const setExpanded = useCallback(\n      (value: boolean) => {\n        if (!isControlled) {\n          setUncontrolledExpanded(value)\n        }\n        onExpandedChange?.(value)\n      },\n      [isControlled, onExpandedChange],\n    )\n\n    const toggleExpanded = useCallback(() => {\n      setExpanded(!isExpanded)\n    }, [isExpanded, setExpanded])\n\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLElement>) => {\n        if (disabled) {\n          event.preventDefault()\n          return\n        }\n\n        itemOnClick?.(event)\n      },\n      [disabled, itemOnClick],\n    )\n\n    const setAccordionButtonRef = useCallback(\n      (node: HTMLButtonElement | null) => {\n        assignRef(ref, node)\n      },\n      [ref],\n    )\n\n    const handleAccordionClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          event.preventDefault()\n          return\n        }\n\n        itemOnClick?.(event)\n\n        if (!event.defaultPrevented) {\n          toggleExpanded()\n        }\n      },\n      [disabled, itemOnClick, toggleExpanded],\n    )\n\n    if (invalidMessage) {\n      warnNavListValidation(invalidMessage)\n      return null\n    }\n\n    const labelArea = (\n      <span className={styles.NavList__labelArea}>\n        {renderVisual(leadingVisual, styles.NavList__leadingVisual, testIds.leadingVisual)}\n        <span className={styles.NavList__label}>{labelChildren}</span>\n        {renderVisual(trailingVisual, styles.NavList__trailingVisual, testIds.trailingVisual)}\n      </span>\n    )\n\n    return (\n      <li\n        className={clsx(\n          styles.NavList__item,\n          styles[`NavList__item--level-${level}`],\n          isLeafItem && styles['NavList__item--leaf'],\n          hasSubNav && isExpanded && styles['NavList__item--expanded'],\n          hasCurrentSubNavItem && styles['NavList__item--has-current-descendant'],\n        )}\n        data-testid={testId || testIds.item}\n      >\n        <div className={styles.NavList__itemContent}>\n          {hasSubNav && canExpand ? (\n            <button\n              ref={setAccordionButtonRef}\n              id={controlledAccordionButtonId}\n              type=\"button\"\n              className={clsx(\n                styles.NavList__link,\n                styles.NavList__accordionButton,\n                disabled && styles['NavList__link--disabled'],\n                className,\n              )}\n              aria-expanded={isExpanded ? 'true' : 'false'}\n              aria-controls={controlledSubNavId}\n              data-testid={testIds.toggle}\n              {...accordionButtonProps}\n              disabled={disabled}\n              onClick={handleAccordionClick}\n            >\n              <TriangleDownIcon className={styles.NavList__toggleIcon} aria-hidden=\"true\" />\n              {labelArea}\n            </button>\n          ) : (\n            <Component\n              ref={ref}\n              className={clsx(styles.NavList__link, disabled && styles['NavList__link--disabled'], className)}\n              aria-current={ariaCurrent}\n              aria-disabled={disabled || undefined}\n              data-testid={testIds.link}\n              onClick={handleClick}\n              {...rest}\n            >\n              {labelArea}\n            </Component>\n          )}\n        </div>\n\n        {subNav ? (\n          <NavListSubNavContext.Provider\n            value={{expanded: isExpanded, labelledBy: controlledAccordionButtonId, level: (level + 1) as NavListLevel}}\n          >\n            {React.cloneElement(subNav, {\n              id: controlledSubNavId,\n            })}\n          </NavListSubNavContext.Provider>\n        ) : null}\n      </li>\n    )\n  },\n) as <C extends NavListItemAs = 'a'>(props: NavListItemProps<C> & {ref?: Ref<HTMLElement>}) => ReactElement | null\n\nexport type NavListSubNavProps = {\n  children: ReactNode\n  'data-testid'?: string\n} & BaseProps<HTMLUListElement> &\n  React.HTMLAttributes<HTMLUListElement>\n\nconst NavListSubNav = forwardRef<HTMLUListElement, NavListSubNavProps>(\n  ({children, className, 'aria-labelledby': ariaLabelledBy, 'data-testid': testId, ...rest}, ref) => {\n    const {expanded, labelledBy, level} = useContext(NavListSubNavContext)\n    const subNavRef = useRef<HTMLUListElement | null>(null)\n\n    const setSubNavHeight = useCallback((subNav: HTMLUListElement) => {\n      subNav.style.setProperty('--brand-NavList-subNav-height', `${subNav.scrollHeight}px`)\n    }, [])\n\n    const setSubNavAndAncestorHeights = useCallback(() => {\n      let subNav = subNavRef.current\n\n      while (subNav) {\n        setSubNavHeight(subNav)\n        subNav = subNav.parentElement?.closest<HTMLUListElement>(`.${styles.NavList__subNav}`) ?? null\n      }\n    }, [setSubNavHeight])\n\n    const setSubNavRef = useCallback(\n      (node: HTMLUListElement | null) => {\n        subNavRef.current = node\n        assignRef(ref, node)\n      },\n      [ref],\n    )\n\n    useEffect(() => {\n      setSubNavAndAncestorHeights()\n    }, [children, expanded, setSubNavAndAncestorHeights])\n\n    useEffect(() => {\n      subNavRef.current?.toggleAttribute('inert', !expanded)\n    }, [expanded])\n\n    useEffect(() => {\n      const subNav = subNavRef.current\n\n      if (!subNav || typeof ResizeObserver === 'undefined') {\n        return\n      }\n\n      const resizeObserver = new ResizeObserver(setSubNavAndAncestorHeights)\n      resizeObserver.observe(subNav)\n\n      return () => {\n        resizeObserver.disconnect()\n      }\n    }, [setSubNavAndAncestorHeights])\n\n    return (\n      <ul\n        ref={setSubNavRef}\n        className={clsx(styles.NavList__subNav, expanded && styles['NavList__subNav--expanded'], className)}\n        aria-labelledby={ariaLabelledBy ?? labelledBy}\n        {...rest}\n        aria-hidden={expanded ? undefined : 'true'}\n        data-testid={testId || testIds.subNav}\n      >\n        <NavListLevelContext.Provider value={level}>{children}</NavListLevelContext.Provider>\n      </ul>\n    )\n  },\n)\n\nexport type NavListGroupProps = {\n  /**\n   * Heading text for the group.\n   */\n  title?: ReactNode\n  children: ReactNode\n  'data-testid'?: string\n} & BaseProps<HTMLLIElement> &\n  Omit<React.LiHTMLAttributes<HTMLLIElement>, 'title'>\n\nconst NavListGroup = forwardRef<HTMLLIElement, NavListGroupProps>(\n  ({title, children, className, 'data-testid': testId, ...rest}, ref) => {\n    const titleId = useId()\n    const validChildren = useMemo(() => {\n      const getValidChildren = (childrenToValidate: ReactNode): ReactNode[] =>\n        Children.toArray(childrenToValidate).flatMap(child => {\n          if (isNavListItemElement(child)) {\n            return [child]\n          }\n\n          if (isValidElement(child) && child.type === React.Fragment) {\n            return getValidChildren((child as ElementWithChildren).props.children)\n          }\n\n          return []\n        })\n\n      return getValidChildren(children)\n    }, [children])\n    const hasInvalidChild = useMemo(() => {\n      const containsInvalidChild = (childrenToValidate: ReactNode): boolean =>\n        Children.toArray(childrenToValidate).some(child => {\n          if (isNavListItemElement(child)) {\n            return false\n          }\n\n          if (isValidElement(child) && child.type === React.Fragment) {\n            return containsInvalidChild((child as ElementWithChildren).props.children)\n          }\n\n          return true\n        })\n\n      return containsInvalidChild(children)\n    }, [children])\n\n    if (hasInvalidChild) {\n      warnNavListValidation(\n        'NavList.Group: Only NavList.Item children are supported. Invalid children will not be rendered. Use NavList.SubNav as a child of NavList.Item for nested disclosure.',\n      )\n    }\n\n    return (\n      <li ref={ref} className={clsx(styles.NavList__group, className)} data-testid={testId || testIds.group} {...rest}>\n        {title ? (\n          <h3 id={titleId} className={styles.NavList__groupTitle} data-testid={testIds.groupTitle}>\n            {title}\n          </h3>\n        ) : null}\n        <ul\n          className={styles.NavList__groupList}\n          aria-labelledby={title ? titleId : undefined}\n          data-testid={testIds.groupList}\n        >\n          <NavListLevelContext.Provider value={2}>{validChildren}</NavListLevelContext.Provider>\n        </ul>\n      </li>\n    )\n  },\n)\n\n/**\n * Use NavList to render vertical navigation links with groups and expandable nested lists.\n * @see https://primer.style/brand/components/NavList\n */\nexport const NavList = Object.assign(NavListRoot, {\n  Item: NavListItem,\n  SubNav: NavListSubNav,\n  Group: NavListGroup,\n  testIds,\n})\n\ntype ElementWithChildren = ReactElement<{children?: ReactNode}>\ntype ElementWithCurrent = ReactElement<{children?: ReactNode; 'aria-current'?: AriaAttributes['aria-current']}>\n\nfunction isNavListSubNavElement(node: ReactNode): node is NavListSubNavElement {\n  return isValidElement<NavListSubNavProps>(node) && node.type === NavListSubNav\n}\n\nfunction isNavListItemElement(node: ReactNode): node is ReactElement<NavListItemProps> {\n  return isValidElement<NavListItemProps>(node) && node.type === NavListItem\n}\n\nfunction isNavListGroupElement(node: ReactNode): node is ReactElement<NavListGroupProps> {\n  return isValidElement<NavListGroupProps>(node) && node.type === NavListGroup\n}\n\nfunction isCurrentValue(value: AriaAttributes['aria-current']) {\n  return Boolean(value) && value !== 'false'\n}\n\nfunction hasCurrentDescendant(node: ReactNode): boolean {\n  return Children.toArray(node).some(child => {\n    if (!isValidElement(child)) return false\n\n    const currentChild = child as ElementWithCurrent\n    if (isCurrentValue(currentChild.props['aria-current'])) return true\n\n    return hasCurrentDescendant((child as ElementWithChildren).props.children)\n  })\n}\n\nfunction assignRef<T>(ref: Ref<T> | undefined, value: T | null) {\n  if (!ref) return\n\n  if (typeof ref === 'function') {\n    ref(value)\n    return\n  }\n\n  ;(ref as MutableRefObject<T | null>).current = value\n}\n\nfunction childHasDirectSubNav(node: ReactNode): boolean {\n  if (!isValidElement(node)) return false\n\n  if (node.type === React.Fragment) {\n    return Children.toArray((node as ElementWithChildren).props.children).some(childHasDirectSubNav)\n  }\n\n  return Children.toArray((node as ElementWithChildren).props.children).some(isNavListSubNavElement)\n}\n\nfunction childIsNavListGroupElement(node: ReactNode): boolean {\n  if (!isValidElement(node)) return false\n\n  if (node.type === React.Fragment) {\n    return Children.toArray((node as ElementWithChildren).props.children).some(childIsNavListGroupElement)\n  }\n\n  return isNavListGroupElement(node)\n}\n\nfunction childHasNavListGroupElement(node: ReactNode): boolean {\n  if (!isValidElement(node)) return false\n\n  if (node.type === React.Fragment) {\n    return Children.toArray((node as ElementWithChildren).props.children).some(childHasNavListGroupElement)\n  }\n\n  return isNavListGroupElement(node)\n}\n\nfunction renderVisual(visual: Visual | undefined, className: string, testId: string) {\n  if (!visual) return null\n\n  const visualElement = isValidElement(visual) ? visual : React.createElement(visual)\n\n  if (!isValidElement<{className?: string; ['aria-hidden']?: string; focusable?: string}>(visualElement)) return null\n\n  return (\n    <span className={className} data-testid={testId}>\n      {React.cloneElement(visualElement, {\n        className: visualElement.props.className,\n        'aria-hidden': 'true',\n        focusable: 'false',\n      })}\n    </span>\n  )\n}\n\nfunction warnNavListValidation(message: string) {\n  if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line no-console\n    console.warn(message)\n  }\n}\n"],"mappings":";;;;;;;;AA4BA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,gBAAgB;AAClB,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,iBAAiB;AACnB,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,SAAS;AACX,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,QAAQ;AACV,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,aAAa;AACf,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,YAAY;AACd,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,SAAS;AACX,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAkBK,IAAkB,GAClB,IAAsB,EAA4B,EAAE,EACpD,IAAuB,EAI1B;CACD,UAAU;CACV,OAAO;CACR,CAAC,EAEI,IAAc,GAEhB,EAAC,aAAU,cAAW,cAAc,GAAW,mBAAmB,GAAgB,eAAe,GAAQ,GAAG,KAC5G,MACG;CACH,IAAM,IAAgB,QAAc,EAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC,EACrE,IAAoB,QAAc,EAAc,KAAK,EAAqB,EAAE,CAAC,EAAc,CAAC,EAC5F,IAAmB,QAAc,EAAc,KAAK,EAA2B,EAAE,CAAC,EAAc,CAAC,EACjG,IAAY,IAAoB,IAAI,GACpC,IAAkB,CAAC,KAAqB,CAAC;AAE/C,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EAAK,EAAO,SAAS,EAAU;EAC1C,cAAY;EACZ,mBAAiB;EACjB,eAAa,KAAU,EAAQ;EAC/B,GAAI;YAEJ,kBAAC,EAAoB,UAArB;GAA8B,OAAO;aACnC,kBAAC,MAAD;IACE,WAAW,EAAK,EAAO,eAAe,KAAmB,EAAO,uBAAuB;IACvF,eAAa,EAAQ;IAEpB;IACE,CAAA;GACwB,CAAA;EAC3B,CAAA;EAGX,EAyCK,IAAc,GAEhB,EACE,OACA,aACA,cACA,qBAAkB,IAClB,cAAW,IACX,aACA,kBACA,YACA,qBACA,mBACA,gBAAgB,GAChB,eAAe,GACf,GAAG,KAEL,MACG;CACH,IAAM,KAAa,KAAM,KACnB,IAAQ,EAAW,EAAoB,EACvC,KAAW,GAAO,EAClB,KAAoB,GAAO,EAC3B,IAAgB,QAAc,EAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC,EACrE,IAAiB,QAAc,EAAc,OAAO,EAAuB,EAAE,CAAC,EAAc,CAAC,EAC7F,IAAS,QAAc,EAAc,KAAK,EAAuB,EAAE,CAAC,EAAc,CAAC,EACnF,IAAuB,QAAc,EAAc,OAAO,EAA4B,EAAE,CAAC,EAAc,CAAC,EACxG,IAAgB,QACb,IAAS,EAAc,QAAO,MAAS,MAAU,EAAO,GAAG,GAClE,CAAC,GAAe,EAAO,CACxB,EACK,IAAkB,EAAc,SAAS,GACzC,IAAY,EAAQ,GACpB,IAAY,IAAQ,GACpB,KAAa,CAAC,GACd,IAAqB,GAAQ,MAAM,MAAM,IACzC,IAAuB,QAAc,GAAqB,GAAQ,MAAM,SAAS,EAAE,CAAC,GAAQ,MAAM,SAAS,CAAC,EAC5G,IAAe,MAAa,KAAA,GAC5B,CAAC,IAAsB,KAA2B,EAAS,KAAmB,EAAqB,EACnG,IAAa,GAAQ,IAAe,IAAW,KAC/C,EACJ,SACA,IAAI,IACJ,GAAG,OACD,GAGE,IAA8B,MAAyB,IACvD,IAAc,GACd,KAAiB,QAAc;AACnC,MAAI,EAAqB,SAAS,EAChC,QAAO;AAGT,MAAI,KAAa,CAAC,EAChB,QAAO;AAGT,MAAI,EAAe,SAAS,EAC1B,QAAO;AAGT,MAAI,KAAa,CAAC,EAChB,QAAO;AAGT,MAAI,MAAc,MAAS,KAAA,KAAa,MAAO,KAAA,GAC7C,QAAO;IAER;EAAC;EAAI;EAAW;EAAiB;EAAW;EAAM,EAAqB;EAAQ,EAAe;EAAO,CAAC;AAEzG,SAAgB;AACd,EAAI,KAAwB,CAAC,KAC3B,EAAwB,GAAK;IAE9B,CAAC,GAAsB,EAAa,CAAC;CAExC,IAAM,KAAc,GACjB,MAAmB;AAIlB,EAHK,KACH,EAAwB,EAAM,EAEhC,IAAmB,EAAM;IAE3B,CAAC,GAAc,EAAiB,CACjC,EAEK,IAAiB,QAAkB;AACvC,KAAY,CAAC,EAAW;IACvB,CAAC,GAAY,GAAY,CAAC,EAEvB,KAAc,GACjB,MAAyC;AACxC,MAAI,GAAU;AACZ,KAAM,gBAAgB;AACtB;;AAGF,MAAc,EAAM;IAEtB,CAAC,GAAU,EAAY,CACxB,EAEK,KAAwB,GAC3B,MAAmC;AAClC,IAAU,GAAK,EAAK;IAEtB,CAAC,EAAI,CACN,EAEK,KAAuB,GAC1B,MAA+C;AAC9C,MAAI,GAAU;AACZ,KAAM,gBAAgB;AACtB;;AAKF,EAFA,IAAc,EAAM,EAEf,EAAM,oBACT,GAAgB;IAGpB;EAAC;EAAU;EAAa;EAAe,CACxC;AAED,KAAI,GAEF,QADA,EAAsB,GAAe,EAC9B;CAGT,IAAM,KACJ,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB;GACG,EAAa,GAAe,EAAO,wBAAwB,EAAQ,cAAc;GAClF,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAiB;IAAqB,CAAA;GAC7D,EAAa,GAAgB,EAAO,yBAAyB,EAAQ,eAAe;GAChF;;AAGT,QACE,kBAAC,MAAD;EACE,WAAW,EACT,EAAO,eACP,EAAO,wBAAwB,MAC/B,MAAc,EAAO,wBACrB,KAAa,KAAc,EAAO,4BAClC,KAAwB,EAAO,yCAChC;EACD,eAAa,KAAU,EAAQ;YARjC,CAUE,kBAAC,OAAD;GAAK,WAAW,EAAO;aACpB,KAAa,IACZ,kBAAC,UAAD;IACE,KAAK;IACL,IAAI;IACJ,MAAK;IACL,WAAW,EACT,EAAO,eACP,EAAO,0BACP,KAAY,EAAO,4BACnB,EACD;IACD,iBAAe,IAAa,SAAS;IACrC,iBAAe;IACf,eAAa,EAAQ;IACrB,GAAI;IACM;IACV,SAAS;cAfX,CAiBE,kBAAC,GAAD;KAAkB,WAAW,EAAO;KAAqB,eAAY;KAAS,CAAA,EAC7E,GACM;QAET,kBAAC,IAAD;IACO;IACL,WAAW,EAAK,EAAO,eAAe,KAAY,EAAO,4BAA4B,EAAU;IAC/F,gBAAc;IACd,iBAAe,KAAY,KAAA;IAC3B,eAAa,EAAQ;IACrB,SAAS;IACT,GAAI;cAEH;IACS,CAAA;GAEV,CAAA,EAEL,IACC,kBAAC,EAAqB,UAAtB;GACE,OAAO;IAAC,UAAU;IAAY,YAAY;IAA6B,OAAQ,IAAQ;IAAmB;aAEzG,EAAM,aAAa,GAAQ,EAC1B,IAAI,GACL,CAAC;GAC4B,CAAA,GAC9B,KACD;;EAGV,EAQK,IAAgB,GACnB,EAAC,aAAU,cAAW,mBAAmB,GAAgB,eAAe,GAAQ,GAAG,KAAO,MAAQ;CACjG,IAAM,EAAC,aAAU,eAAY,aAAS,EAAW,EAAqB,EAChE,IAAY,EAAgC,KAAK,EAEjD,IAAkB,GAAa,MAA6B;AAChE,IAAO,MAAM,YAAY,iCAAiC,GAAG,EAAO,aAAa,IAAI;IACpF,EAAE,CAAC,EAEA,IAA8B,QAAkB;EACpD,IAAI,IAAS,EAAU;AAEvB,SAAO,GAEL,CADA,EAAgB,EAAO,EACvB,IAAS,EAAO,eAAe,QAA0B,IAAI,EAAO,kBAAkB,IAAI;IAE3F,CAAC,EAAgB,CAAC,EAEf,IAAe,GAClB,MAAkC;AAEjC,EADA,EAAU,UAAU,GACpB,EAAU,GAAK,EAAK;IAEtB,CAAC,EAAI,CACN;AAyBD,QAvBA,QAAgB;AACd,KAA6B;IAC5B;EAAC;EAAU;EAAU;EAA4B,CAAC,EAErD,QAAgB;AACd,IAAU,SAAS,gBAAgB,SAAS,CAAC,EAAS;IACrD,CAAC,EAAS,CAAC,EAEd,QAAgB;EACd,IAAM,IAAS,EAAU;AAEzB,MAAI,CAAC,KAAU,OAAO,iBAAmB,IACvC;EAGF,IAAM,IAAiB,IAAI,eAAe,EAA4B;AAGtE,SAFA,EAAe,QAAQ,EAAO,QAEjB;AACX,KAAe,YAAY;;IAE5B,CAAC,EAA4B,CAAC,EAG/B,kBAAC,MAAD;EACE,KAAK;EACL,WAAW,EAAK,EAAO,iBAAiB,KAAY,EAAO,8BAA8B,EAAU;EACnG,mBAAiB,KAAkB;EACnC,GAAI;EACJ,eAAa,IAAW,KAAA,IAAY;EACpC,eAAa,KAAU,EAAQ;YAE/B,kBAAC,EAAoB,UAArB;GAA8B,OAAO;GAAQ;GAAwC,CAAA;EAClF,CAAA;EAGV,EAYK,IAAe,GAClB,EAAC,UAAO,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAO,MAAQ;CACrE,IAAM,IAAU,GAAO,EACjB,IAAgB,QAAc;EAClC,IAAM,KAAoB,MACxB,EAAS,QAAQ,EAAmB,CAAC,SAAQ,MACvC,EAAqB,EAAM,GACtB,CAAC,EAAM,GAGZ,EAAe,EAAM,IAAI,EAAM,SAAS,EAAM,WACzC,EAAkB,EAA8B,MAAM,SAAS,GAGjE,EAAE,CACT;AAEJ,SAAO,EAAiB,EAAS;IAChC,CAAC,EAAS,CAAC;AAwBd,QAvBwB,QAAc;EACpC,IAAM,KAAwB,MAC5B,EAAS,QAAQ,EAAmB,CAAC,MAAK,MACpC,EAAqB,EAAM,GACtB,KAGL,EAAe,EAAM,IAAI,EAAM,SAAS,EAAM,WACzC,EAAsB,EAA8B,MAAM,SAAS,GAGrE,GACP;AAEJ,SAAO,EAAqB,EAAS;IACpC,CAAC,EAAS,CAET,IACF,EACE,uKACD,EAID,kBAAC,MAAD;EAAS;EAAK,WAAW,EAAK,EAAO,gBAAgB,EAAU;EAAE,eAAa,KAAU,EAAQ;EAAO,GAAI;YAA3G,CACG,IACC,kBAAC,MAAD;GAAI,IAAI;GAAS,WAAW,EAAO;GAAqB,eAAa,EAAQ;aAC1E;GACE,CAAA,GACH,MACJ,kBAAC,MAAD;GACE,WAAW,EAAO;GAClB,mBAAiB,IAAQ,IAAU,KAAA;GACnC,eAAa,EAAQ;aAErB,kBAAC,EAAoB,UAArB;IAA8B,OAAO;cAAI;IAA6C,CAAA;GACnF,CAAA,CACF;;EAGV,EAMY,IAAU,OAAO,OAAO,GAAa;CAChD,MAAM;CACN,QAAQ;CACR,OAAO;CACP;CACD,CAAC;AAKF,SAAS,EAAuB,GAA+C;AAC7E,QAAO,EAAmC,EAAK,IAAI,EAAK,SAAS;;AAGnE,SAAS,EAAqB,GAAyD;AACrF,QAAO,EAAiC,EAAK,IAAI,EAAK,SAAS;;AAGjE,SAAS,EAAsB,GAA0D;AACvF,QAAO,EAAkC,EAAK,IAAI,EAAK,SAAS;;AAGlE,SAAS,EAAe,GAAuC;AAC7D,QAAO,EAAQ,KAAU,MAAU;;AAGrC,SAAS,GAAqB,GAA0B;AACtD,QAAO,EAAS,QAAQ,EAAK,CAAC,MAAK,MAC5B,EAAe,EAAM,GAGtB,EAAe,EAAa,MAAM,gBAAgB,GAAS,KAExD,GAAsB,EAA8B,MAAM,SAAS,GALvC,GAMnC;;AAGJ,SAAS,EAAa,GAAyB,GAAiB;AACzD,QAEL;MAAI,OAAO,KAAQ,YAAY;AAC7B,KAAI,EAAM;AACV;;AAGA,IAAmC,UAAU;;;AAGjD,SAAS,EAAqB,GAA0B;AAOtD,QANK,EAAe,EAAK,GAErB,EAAK,SAAS,EAAM,WACf,EAAS,QAAS,EAA6B,MAAM,SAAS,CAAC,KAAK,EAAqB,GAG3F,EAAS,QAAS,EAA6B,MAAM,SAAS,CAAC,KAAK,EAAuB,GANhE;;AASpC,SAAS,EAA2B,GAA0B;AAO5D,QANK,EAAe,EAAK,GAErB,EAAK,SAAS,EAAM,WACf,EAAS,QAAS,EAA6B,MAAM,SAAS,CAAC,KAAK,EAA2B,GAGjG,EAAsB,EAAK,GANA;;AASpC,SAAS,EAA4B,GAA0B;AAO7D,QANK,EAAe,EAAK,GAErB,EAAK,SAAS,EAAM,WACf,EAAS,QAAS,EAA6B,MAAM,SAAS,CAAC,KAAK,EAA4B,GAGlG,EAAsB,EAAK,GANA;;AASpC,SAAS,EAAa,GAA4B,GAAmB,GAAgB;AACnF,KAAI,CAAC,EAAQ,QAAO;CAEpB,IAAM,IAAgB,EAAe,EAAO,GAAG,IAAS,EAAM,cAAc,EAAO;AAInF,QAFK,EAAmF,EAAc,GAGpG,kBAAC,QAAD;EAAiB;EAAW,eAAa;YACtC,EAAM,aAAa,GAAe;GACjC,WAAW,EAAc,MAAM;GAC/B,eAAe;GACf,WAAW;GACZ,CAAC;EACG,CAAA,GATsG;;AAajH,SAAS,EAAsB,GAAiB;AAC9C,EAAA,QAAA,IAAA,aAA6B,iBAAA,QAAA,IAAA,aAA0C,WAErE,QAAQ,KAAK,EAAQ"}

package/esm/NavList/NavList.module-CZFnt8br.css

@@ -0,0 +1 @@
+.Primer_Brand__NavList-module__NavList___tuR_C{box-sizing:border-box;font-family:var(--brand-fontStack-sansSerif);color:var(--brand-color-text-default);width:100%;padding-inline-start:var(--base-size-16)}.Primer_Brand__NavList-module__NavList__list___gwquf,.Primer_Brand__NavList-module__NavList__subNav___Q4xI7,.Primer_Brand__NavList-module__NavList__groupList___Mtk4a{margin:0;padding:0;list-style:none}.Primer_Brand__NavList-module__NavList__list___gwquf{flex-direction:column;gap:0;display:flex}.Primer_Brand__NavList-module__NavList__list--flat___xvRQl,.Primer_Brand__NavList-module__NavList__groupList___Mtk4a{--brand-NavList-alignedLabel-paddingInlineStart:var(--base-size-2)}.Primer_Brand__NavList-module__NavList__groupList___Mtk4a{--brand-NavList-item-paddingInlineStart-level-2:var(--base-size-2)}.Primer_Brand__NavList-module__NavList__item___HTVCC,.Primer_Brand__NavList-module__NavList__group___Jnwkd{position:relative}.Primer_Brand__NavList-module__NavList__list___gwquf:not(.Primer_Brand__NavList-module__NavList__list--flat___xvRQl)>.Primer_Brand__NavList-module__NavList__item___HTVCC+.Primer_Brand__NavList-module__NavList__item___HTVCC,.Primer_Brand__NavList-module__NavList__list___gwquf:not(.Primer_Brand__NavList-module__NavList__list--flat___xvRQl)>.Primer_Brand__NavList-module__NavList__item___HTVCC+.Primer_Brand__NavList-module__NavList__group___Jnwkd,.Primer_Brand__NavList-module__NavList__list___gwquf:not(.Primer_Brand__NavList-module__NavList__list--flat___xvRQl)>.Primer_Brand__NavList-module__NavList__group___Jnwkd+.Primer_Brand__NavList-module__NavList__item___HTVCC,.Primer_Brand__NavList-module__NavList__list___gwquf:not(.Primer_Brand__NavList-module__NavList__list--flat___xvRQl)>.Primer_Brand__NavList-module__NavList__group___Jnwkd+.Primer_Brand__NavList-module__NavList__group___Jnwkd{background-image:repeating-linear-gradient(to right, var(--brand-color-border-muted) 0 var(--base-size-2), transparent var(--base-size-2) var(--base-size-4));background-repeat:no-repeat;background-size:100% var(--brand-borderWidth-thin);background-position:0 0}.Primer_Brand__NavList-module__NavList__groupTitle___r47_e{padding:var(--base-size-24) var(--base-size-16) var(--base-size-16);color:var(--brand-color-text-default);font-size:var(--brand-text-size-200);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-200);letter-spacing:var(--brand-text-letterSpacing-200);margin:0}.Primer_Brand__NavList-module__NavList__groupList___Mtk4a{flex-direction:column;gap:0;padding-block-end:var(--base-size-16);display:flex}.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{align-items:center;gap:var(--base-size-8);min-width:0;display:flex}.Primer_Brand__NavList-module__NavList__link___k0zio{align-items:center;gap:var(--base-size-8);border-radius:var(--brand-borderRadius-medium);min-width:0;color:var(--brand-color-text-muted);font-size:var(--brand-text-size-100);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-100);letter-spacing:var(--brand-text-letterSpacing-100);transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default), color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);flex:auto;padding:0;display:flex;position:relative;-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc{box-sizing:border-box;width:100%;color:var(--brand-color-text-muted);cursor:pointer;text-align:start;background:0 0;border:0;font-family:inherit;position:relative}.Primer_Brand__NavList-module__NavList__link___k0zio:hover{color:var(--brand-color-text-default);background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:hover{color:var(--brand-color-text-default);background-color:#0000}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{min-height:var(--base-size-32);order:2;padding-inline-start:var(--base-size-6)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:not(:disabled):hover .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:not(:disabled){color:var(--brand-color-text-default)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:not(:disabled) .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__link___k0zio:focus-visible,.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__NavList-module__NavList__subNav___Q4xI7 .Primer_Brand__NavList-module__NavList__link___k0zio:focus-visible,.Primer_Brand__NavList-module__NavList__subNav___Q4xI7 .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:focus-visible{outline-offset:calc(-1 * var(--base-size-2))}.Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]){color:var(--brand-color-text-default);background-color:var(--brand-color-canvas-subtle);padding-inline-start:var(--base-size-6)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n) .Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]):before{content:"";inset-block:var(--base-size-8);width:var(--base-size-4);border-radius:var(--base-size-2);background-color:var(--brand-NavList-activeIndicator-color);position:absolute;inset-inline-start:0}.Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:not(:disabled):before{content:"";block-size:var(--base-size-16);width:var(--base-size-4);border-radius:var(--base-size-2);background-color:var(--brand-NavList-activeIndicator-color);z-index:1;position:absolute;inset-block-start:50%;transform:translateY(-50%)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n.Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:before{inset-inline-start:calc(-1 * var(--base-size-8))}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:before{inset-inline-start:var(--base-size-4)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]{padding-inline-start:var(--base-size-12)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false] .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{padding-inline-start:var(--base-size-2)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]){padding-inline-start:0}.Primer_Brand__NavList-module__NavList__link--disabled___Eg304{color:var(--brand-color-text-disabled);pointer-events:none}.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:disabled{color:var(--brand-color-text-disabled);cursor:not-allowed}.Primer_Brand__NavList-module__NavList__label___ogBmt{word-break:break-word;min-width:0}.Primer_Brand__NavList-module__NavList__labelArea___c4ORu{align-items:center;gap:var(--base-size-8);border-radius:var(--brand-borderRadius-small);flex:auto;min-width:0;display:flex}.Primer_Brand__NavList-module__NavList__leadingVisual___KqRaq,.Primer_Brand__NavList-module__NavList__trailingVisual___BrZXI{color:inherit;flex:none;display:inline-flex}.Primer_Brand__NavList-module__NavList__trailingVisual___BrZXI{margin-inline-start:auto;margin-inline-end:var(--base-size-6)}.Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{transform-origin:50%;transition:transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);flex:none}.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=true] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{transform:rotate(-180deg)}.Primer_Brand__NavList-module__NavList__subNav___Q4xI7{opacity:0;max-height:0;transform:translateY(calc(-1 * var(--base-size-8)));visibility:hidden;transition:max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), visibility 0s linear var(--brand-animation-duration-fast);flex-direction:column;gap:0;margin:0;padding:0;display:flex;overflow:hidden}.Primer_Brand__NavList-module__NavList__subNav--expanded___ap3X8{max-height:none;max-height:var(--brand-NavList-subNav-height,none);opacity:1;visibility:visible;transition:max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), visibility 0s linear 0s;transform:translateY(0)}.Primer_Brand__NavList-module__NavList__subNav___Q4xI7[aria-hidden=true] .Primer_Brand__NavList-module__NavList__subNav___Q4xI7{visibility:hidden}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding:var(--base-size-24) var(--base-size-16) var(--base-size-16)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n.Primer_Brand__NavList-module__NavList__item--expanded___pH_PL{padding-block-end:var(--base-size-16)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio{font-size:var(--brand-text-size-200);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-200);order:1}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc{color:var(--brand-color-text-default);min-height:var(--base-size-32);margin-block:calc(-1 * var(--base-size-8));border-radius:var(--brand-borderRadius-small);padding-inline-start:0;padding-inline-end:var(--base-size-6)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc>*{z-index:1;position:relative}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:not(:disabled):hover:after,.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:not(:disabled):active:after,.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n.Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:not(:disabled):after{content:"";z-index:0;border-radius:var(--brand-borderRadius-small);background-color:var(--brand-color-canvas-subtle);pointer-events:none;position:absolute;inset-block:0;inset-inline:0}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{order:2;margin-inline-start:auto}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding-block:calc(var(--base-size-8) + var(--base-size-2));padding-inline-end:var(--base-size-16)}.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding-inline-start:var(--brand-NavList-item-paddingInlineStart-level-2,var(--base-size-24))}.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding-inline-start:var(--base-size-40)}.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding-inline-start:calc(var(--base-size-48) + var(--base-size-8))}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{min-height:var(--base-size-32);padding-block:0;padding-inline:var(--base-size-16)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding-inline-start:var(--brand-NavList-alignedLabel-paddingInlineStart,var(--base-size-24))}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding-inline-start:var(--base-size-40)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding-inline-start:calc(var(--base-size-48) + var(--base-size-8))}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ.Primer_Brand__NavList-module__NavList__item--level-5___4mJ4N>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding-inline-start:calc(var(--base-size-64) + var(--base-size-8))}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{order:1}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc{min-height:var(--base-size-32);margin-block:calc(-1 * var(--base-size-8));border-radius:var(--brand-borderRadius-small);padding-inline-start:var(--base-size-8)}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{position:absolute;inset-block-start:50%;inset-inline-start:calc(-1 * var(--base-size-8));transform:translateY(-50%)}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=true] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=true] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=true] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{transform:translateY(-50%)rotate(-180deg)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{inset-inline-start:calc(-1 * var(--base-size-16))}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-5___4mJ4N>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio{font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);order:2}.Primer_Brand__NavList-module__NavList__list--flat___xvRQl>.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio{font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200);letter-spacing:var(--brand-text-letterSpacing-200)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio{min-height:var(--base-size-32);border-radius:var(--brand-borderRadius-small);padding-inline-start:var(--base-size-8)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{min-height:calc(var(--base-size-32) - var(--brand-borderWidth-thin));margin-block-end:var(--brand-borderWidth-thin);padding-inline-start:var(--base-size-6)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n) .Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]){background-color:#0000;padding-inline-start:var(--base-size-8)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio:hover .Primer_Brand__NavList-module__NavList__labelArea___c4ORu,.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n) .Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]) .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio:hover{background-color:#0000;padding-inline-start:var(--base-size-8)}[data-color-mode=dark] .Primer_Brand__NavList-module__NavList___tuR_C{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-reduced-motion:reduce){.Primer_Brand__NavList-module__NavList___tuR_C,.Primer_Brand__NavList-module__NavList___tuR_C:before,.Primer_Brand__NavList-module__NavList___tuR_C:after,.Primer_Brand__NavList-module__NavList___tuR_C *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/NavList/NavList.module.js

@@ -0,0 +1,32 @@
+import './NavList.module-CZFnt8br.css';var e = {
+	NavList: "Primer_Brand__NavList-module__NavList___tuR_C",
+	NavList__list: "Primer_Brand__NavList-module__NavList__list___gwquf",
+	NavList__subNav: "Primer_Brand__NavList-module__NavList__subNav___Q4xI7",
+	NavList__groupList: "Primer_Brand__NavList-module__NavList__groupList___Mtk4a",
+	"NavList__list--flat": "Primer_Brand__NavList-module__NavList__list--flat___xvRQl",
+	NavList__item: "Primer_Brand__NavList-module__NavList__item___HTVCC",
+	NavList__group: "Primer_Brand__NavList-module__NavList__group___Jnwkd",
+	NavList__groupTitle: "Primer_Brand__NavList-module__NavList__groupTitle___r47_e",
+	NavList__itemContent: "Primer_Brand__NavList-module__NavList__itemContent___bYaVR",
+	NavList__link: "Primer_Brand__NavList-module__NavList__link___k0zio",
+	NavList__accordionButton: "Primer_Brand__NavList-module__NavList__accordionButton___F5tOc",
+	"NavList__item--level-1": "Primer_Brand__NavList-module__NavList__item--level-1___gWx1n",
+	NavList__labelArea: "Primer_Brand__NavList-module__NavList__labelArea___c4ORu",
+	"NavList__item--has-current-descendant": "Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ",
+	"NavList__item--leaf": "Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ",
+	"NavList__link--disabled": "Primer_Brand__NavList-module__NavList__link--disabled___Eg304",
+	NavList__label: "Primer_Brand__NavList-module__NavList__label___ogBmt",
+	NavList__leadingVisual: "Primer_Brand__NavList-module__NavList__leadingVisual___KqRaq",
+	NavList__trailingVisual: "Primer_Brand__NavList-module__NavList__trailingVisual___BrZXI",
+	NavList__toggleIcon: "Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF",
+	"NavList__subNav--expanded": "Primer_Brand__NavList-module__NavList__subNav--expanded___ap3X8",
+	"NavList__item--expanded": "Primer_Brand__NavList-module__NavList__item--expanded___pH_PL",
+	"NavList__item--level-2": "Primer_Brand__NavList-module__NavList__item--level-2___kXyLx",
+	"NavList__item--level-3": "Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ",
+	"NavList__item--level-4": "Primer_Brand__NavList-module__NavList__item--level-4___k3h0P",
+	"NavList__item--level-5": "Primer_Brand__NavList-module__NavList__item--level-5___4mJ4N"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=NavList.module.js.map