@primer/react-brand 0.74.0-rc.ad4a6851 → 0.74.0-rc.bca63c2e

package/esm/Label/Label.d.ts

@@ -25,7 +25,9 @@ export type LabelProps = BaseProps<HTMLSpanElement> & {
     ['data-testid']?: string;
 } & React.ComponentPropsWithoutRef<'span'>;
 /**
- * Use a Label to indicate the status of an object or to categorize it with metadata that describes it.
+ * Use Label to display short status or metadata attached to an object in product-like UI
+ * Prefer Token for general-purpose compact metadata, categories, statuses, and short pre-heading markers.
+ *
  * @see https://primer.style/brand/components/Label
  */
 export declare const Label: React.ForwardRefExoticComponent<Omit<LabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>> & {

package/esm/Label/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/Label/Label.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAK1D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD;;GAEG;AACH,OAAO,yGAAyG,CAAA;AAIhH,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAIhD,eAAO,MAAM,WAAW,mOAAqC,CAAA;AAC7D,eAAO,MAAM,UAAU,uCAAwC,CAAA;AAE/D,eAAO,MAAM,iBAAiB,WAAiB,CAAA;AAC/C,eAAO,MAAM,gBAAgB,UAAgB,CAAA;AAE7C,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,eAAe,CAAC,GAAG;IACpD;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;IAClC,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAA;AAiE1C;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;;CAAmC,CAAA"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/Label/Label.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAK1D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD;;GAEG;AACH,OAAO,yGAAyG,CAAA;AAIhH,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAIhD,eAAO,MAAM,WAAW,mOAAqC,CAAA;AAC7D,eAAO,MAAM,UAAU,uCAAwC,CAAA;AAE/D,eAAO,MAAM,iBAAiB,WAAiB,CAAA;AAC/C,eAAO,MAAM,gBAAgB,UAAgB,CAAA;AAE7C,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,eAAe,CAAC,GAAG;IACpD;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;IAClC,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAA;AAiE1C;;;;;GAKG;AACH,eAAO,MAAM,KAAK;;;;;CAAmC,CAAA"}

package/esm/Label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":[],"sources":["../../src/Label/Label.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, useMemo, type Ref} from 'react'\nimport {Text} from '../Text'\n\nimport {useAnimation} from '../animation'\n\nimport type {BaseProps} from '../component-helpers'\nimport {Colors, BiColorGradients, TriColorGradients} from '../constants'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/label/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Label.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\nconst Gradients = [...BiColorGradients, ...TriColorGradients] as const\n\nexport const LabelColors = [...Colors, ...Gradients] as const\nexport const LabelSizes = ['small', 'medium', 'large'] as const\n\nexport const defaultLabelColor = LabelColors[0]\nexport const defaultLabelSize = LabelSizes[1]\n\nexport type LabelProps = BaseProps<HTMLSpanElement> & {\n  /**\n   * The leading visual appears before the Label content\n   */\n  leadingVisual?: React.ReactNode | Icon\n  /**\n   * The color variations available in Label\n   */\n  color?: (typeof LabelColors)[number]\n  /**\n   * The size variations available in Label\n   */\n  size?: (typeof LabelSizes)[number]\n  ['data-testid']?: string\n} & React.ComponentPropsWithoutRef<'span'>\n\nconst testIds = {\n  root: 'Label',\n  get leadingVisual() {\n    return `${this.root}-leading-visual`\n  },\n}\n\nconst _Label = forwardRef<HTMLSpanElement, LabelProps>(\n  (\n    {\n      animate,\n      className,\n      size = defaultLabelSize,\n      color = defaultLabelColor,\n      children,\n      'data-testid': testId,\n      leadingVisual: LeadingVisual,\n      style,\n      ...props\n    },\n    ref: Ref<HTMLSpanElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const isGradient = useMemo(() => Gradients.find(gradient => gradient === color), [color])\n\n    return (\n      <span\n        ref={ref}\n        className={clsx(\n          animationClasses,\n          styles.Label,\n          styles[`Label--color-${color}`],\n          styles[`Label--size-${size}`],\n          isGradient && styles['Label--gradient'],\n          className,\n        )}\n        data-testid={testId || testIds.root}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {LeadingVisual && (\n          <span className={styles['Label__leading-visual']} data-testid={testIds.leadingVisual} aria-hidden=\"true\">\n            {typeof LeadingVisual === 'function' ? (\n              <LeadingVisual />\n            ) : (\n              React.isValidElement<{className?: string}>(LeadingVisual) &&\n              React.cloneElement(LeadingVisual, {\n                className: clsx(styles['Label__icon-visual']),\n              })\n            )}\n          </span>\n        )}\n        <span className={clsx(styles['Label__text'])}>\n          <Text as=\"span\" size={size === 'large' ? '200' : '100'} className={clsx(styles['Label__label'])}>\n            {children}\n          </Text>\n        </span>\n      </span>\n    )\n  },\n)\n\n/**\n * Use a Label to indicate the status of an object or to categorize it with metadata that describes it.\n * @see https://primer.style/brand/components/Label\n */\nexport const Label = Object.assign(_Label, {testIds})\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAAY,CAAC,GAAG,GAAkB,GAAG,EAAkB,EAEhD,IAAc,CAAC,GAAG,GAAQ,GAAG,EAAU,EACvC,IAAa;CAAC;CAAS;CAAU;CAAQ,EAEzC,IAAoB,EAAY,IAChC,IAAmB,EAAW,IAkBrC,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;AAClB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAEK,IAAS,GAEX,EACE,YACA,cACA,UAAO,GACP,WAAQ,GACR,aACA,eAAe,GACf,eAAe,GACf,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAa,QAAc,EAAU,MAAK,MAAY,MAAa,EAAM,EAAE,CAAC,EAAM,CAAC;AAEzF,QACE,kBAAC,QAAD;EACO;EACL,WAAW,EACT,GACA,EAAO,OACP,EAAO,gBAAgB,MACvB,EAAO,eAAe,MACtB,KAAc,EAAO,oBACrB,EACD;EACD,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAZN,CAcG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;GAA0B,eAAa,EAAQ;GAAe,eAAY;aAC/F,OAAO,KAAkB,aACxB,kBAAC,GAAD,EAAiB,CAAA,GAEjB,EAAM,eAAqC,EAAc,IACzD,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAO,sBAAsB,EAC9C,CAAC;GAEC,CAAA,EAET,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,YAAe;aAC1C,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAM,MAAS,UAAU,QAAQ;IAAO,WAAW,EAAK,EAAO,aAAgB;IAC5F;IACI,CAAA;GACF,CAAA,CACF;;EAGZ,EAMY,IAAQ,OAAO,OAAO,GAAQ,EAAC,YAAQ,CAAC"}
+{"version":3,"file":"Label.js","names":[],"sources":["../../src/Label/Label.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, useMemo, type Ref} from 'react'\nimport {Text} from '../Text'\n\nimport {useAnimation} from '../animation'\n\nimport type {BaseProps} from '../component-helpers'\nimport {Colors, BiColorGradients, TriColorGradients} from '../constants'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/label/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Label.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\nconst Gradients = [...BiColorGradients, ...TriColorGradients] as const\n\nexport const LabelColors = [...Colors, ...Gradients] as const\nexport const LabelSizes = ['small', 'medium', 'large'] as const\n\nexport const defaultLabelColor = LabelColors[0]\nexport const defaultLabelSize = LabelSizes[1]\n\nexport type LabelProps = BaseProps<HTMLSpanElement> & {\n  /**\n   * The leading visual appears before the Label content\n   */\n  leadingVisual?: React.ReactNode | Icon\n  /**\n   * The color variations available in Label\n   */\n  color?: (typeof LabelColors)[number]\n  /**\n   * The size variations available in Label\n   */\n  size?: (typeof LabelSizes)[number]\n  ['data-testid']?: string\n} & React.ComponentPropsWithoutRef<'span'>\n\nconst testIds = {\n  root: 'Label',\n  get leadingVisual() {\n    return `${this.root}-leading-visual`\n  },\n}\n\nconst _Label = forwardRef<HTMLSpanElement, LabelProps>(\n  (\n    {\n      animate,\n      className,\n      size = defaultLabelSize,\n      color = defaultLabelColor,\n      children,\n      'data-testid': testId,\n      leadingVisual: LeadingVisual,\n      style,\n      ...props\n    },\n    ref: Ref<HTMLSpanElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const isGradient = useMemo(() => Gradients.find(gradient => gradient === color), [color])\n\n    return (\n      <span\n        ref={ref}\n        className={clsx(\n          animationClasses,\n          styles.Label,\n          styles[`Label--color-${color}`],\n          styles[`Label--size-${size}`],\n          isGradient && styles['Label--gradient'],\n          className,\n        )}\n        data-testid={testId || testIds.root}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {LeadingVisual && (\n          <span className={styles['Label__leading-visual']} data-testid={testIds.leadingVisual} aria-hidden=\"true\">\n            {typeof LeadingVisual === 'function' ? (\n              <LeadingVisual />\n            ) : (\n              React.isValidElement<{className?: string}>(LeadingVisual) &&\n              React.cloneElement(LeadingVisual, {\n                className: clsx(styles['Label__icon-visual']),\n              })\n            )}\n          </span>\n        )}\n        <span className={clsx(styles['Label__text'])}>\n          <Text as=\"span\" size={size === 'large' ? '200' : '100'} className={clsx(styles['Label__label'])}>\n            {children}\n          </Text>\n        </span>\n      </span>\n    )\n  },\n)\n\n/**\n * Use Label to display short status or metadata attached to an object in product-like UI\n * Prefer Token for general-purpose compact metadata, categories, statuses, and short pre-heading markers.\n *\n * @see https://primer.style/brand/components/Label\n */\nexport const Label = Object.assign(_Label, {testIds})\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAAY,CAAC,GAAG,GAAkB,GAAG,EAAkB,EAEhD,IAAc,CAAC,GAAG,GAAQ,GAAG,EAAU,EACvC,IAAa;CAAC;CAAS;CAAU;CAAQ,EAEzC,IAAoB,EAAY,IAChC,IAAmB,EAAW,IAkBrC,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;AAClB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAEK,IAAS,GAEX,EACE,YACA,cACA,UAAO,GACP,WAAQ,GACR,aACA,eAAe,GACf,eAAe,GACf,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAa,QAAc,EAAU,MAAK,MAAY,MAAa,EAAM,EAAE,CAAC,EAAM,CAAC;AAEzF,QACE,kBAAC,QAAD;EACO;EACL,WAAW,EACT,GACA,EAAO,OACP,EAAO,gBAAgB,MACvB,EAAO,eAAe,MACtB,KAAc,EAAO,oBACrB,EACD;EACD,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAZN,CAcG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;GAA0B,eAAa,EAAQ;GAAe,eAAY;aAC/F,OAAO,KAAkB,aACxB,kBAAC,GAAD,EAAiB,CAAA,GAEjB,EAAM,eAAqC,EAAc,IACzD,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAO,sBAAsB,EAC9C,CAAC;GAEC,CAAA,EAET,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,YAAe;aAC1C,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAM,MAAS,UAAU,QAAQ;IAAO,WAAW,EAAK,EAAO,aAAgB;IAC5F;IACI,CAAA;GACF,CAAA,CACF;;EAGZ,EAQY,IAAQ,OAAO,OAAO,GAAQ,EAAC,YAAQ,CAAC"}

package/esm/Pillar/Pillar.d.ts

@@ -43,7 +43,7 @@ type PillarLinkProps = {
 } & Omit<LinkProps, 'size' | 'direction'> & BaseProps<HTMLAnchorElement>;
 /**
  * Pillar component:
- * {@link https://primer.style/brand/components/Pillar/ See usage examples}.
+ * @see https://primer.style/brand/components/Pillar
  */
 export declare const Pillar: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<PillarProps<"div">>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Icon: typeof PillarIcon;

package/esm/Pillar/Pillar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pillar.js","names":[],"sources":["../../src/Pillar/Pillar.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, HTMLAttributes, type Ref, type JSX} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps, Link, LinkProps} from '..'\nimport {Icon, type IconProps} from '../Icon'\nimport type {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\n/**\n * Main stylesheet (as a CSS Module)\n */\nimport styles from './Pillar.module.css'\n\nexport const defaultPillarIconColor = 'green'\nexport const defaultPillarIconSize = 32\nexport type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<C> & {\n  /**\n   * The HTML element used to render the Pillar.\n   */\n  as?: C | 'div' | 'article'\n  /**\n   * Aligns the pillar content\n   */\n  align?: 'start' | 'center'\n  /**\n   * Enables optional border around the pillar content\n   */\n  hasBorder?: boolean\n  /**\n   * Allows the pillar to fill the width of its parent container.\n   */\n  fullWidth?: boolean\n} & (C extends 'article' ? PropsWithChildren<BaseProps<HTMLElement>> : PropsWithChildren<BaseProps<HTMLDivElement>>)\n\nconst PillarRoot = forwardRef(\n  (\n    {\n      children,\n      className,\n      animate,\n      as = 'div',\n      align = 'start',\n      style,\n      hasBorder = false,\n      fullWidth = false,\n      ...rest\n    }: PropsWithChildren<PillarProps>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const filteredChildren = React.Children.toArray(children).filter(child => {\n      if (React.isValidElement(child) && typeof child.type !== 'string') {\n        if (\n          child.type === PillarImage ||\n          child.type === PillarIcon ||\n          child.type === PillarHeading ||\n          child.type === PillarDescription ||\n          child.type === PillarLink\n        ) {\n          return true\n        }\n      }\n      return false\n    })\n\n    const validElements = ['div', 'article']\n    const Component = validElements.includes(as) ? as : 'div'\n\n    return (\n      <Component\n        className={clsx(\n          styles.Pillar,\n          styles[`Pillar--align-${align}`],\n          hasBorder && styles['Pillar--has-border'],\n          !fullWidth && styles['Pillar--has-max-width'],\n          animationClasses,\n          className,\n        )}\n        ref={ref}\n        {...(rest as HTMLAttributes<HTMLElement>)}\n        style={{...animationInlineStyles, ...style}}\n      >\n        {filteredChildren}\n      </Component>\n    )\n  },\n)\n\ntype PillarImageProps = ImageProps\n\nfunction PillarImage({className, ...rest}: PillarImageProps) {\n  return (\n    <div className={styles.Pillar__image}>\n      <Image className={className} {...rest} />\n    </div>\n  )\n}\n\ntype IconComponentProps = React.SVGAttributes<SVGElement> & {size?: number}\ntype IconComponent = React.ComponentType<IconComponentProps> | React.ExoticComponent<IconComponentProps>\ntype IconElement = React.ReactElement<IconComponentProps>\n\nexport type PillarIconProps = Omit<IconProps, 'icon' | 'color'> & {\n  icon: IconElement | IconComponent\n}\n\nfunction PillarIcon({icon, className, hasBackground = true, size, ...props}: PillarIconProps) {\n  if (!hasBackground) {\n    const iconWrapperProps = {\n      ...(props as React.HTMLAttributes<HTMLSpanElement>),\n      className: clsx(styles.Pillar__icon, className),\n    }\n\n    let iconWithoutBackground: React.ReactNode\n\n    if (React.isValidElement<IconComponentProps>(icon)) {\n      iconWithoutBackground = icon\n    } else {\n      const IconWithoutBackground = icon\n      iconWithoutBackground = <IconWithoutBackground />\n    }\n\n    return <span {...iconWrapperProps}>{iconWithoutBackground}</span>\n  }\n\n  return (\n    <Icon\n      className={clsx(styles.Pillar__icon, styles['Pillar__icon--with-background'], className)}\n      color={defaultPillarIconColor}\n      hasBackground\n      icon={icon as IconProps['icon']}\n      size={size ?? defaultPillarIconSize}\n      {...props}\n    />\n  )\n}\n\ntype PillarHeadingProps = BaseProps<HTMLHeadingElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  as?: Exclude<HeadingProps['as'], 'h1'>\n} & HeadingProps\n\nconst PillarHeading = forwardRef<HTMLHeadingElement, PillarHeadingProps>(\n  ({children, as = 'h3', size = '6', className, ...rest}, ref) => {\n    return (\n      <Heading\n        size={size}\n        className={clsx(styles.Pillar__heading, styles[`Pillar__heading--size-${size}`], className)}\n        ref={ref}\n        as={as}\n        {...rest}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n\ntype PillarDescriptionProps = PropsWithChildren<BaseProps<HTMLParagraphElement>>\n\nconst PillarDescription = forwardRef<HTMLParagraphElement, PillarDescriptionProps>(\n  ({children, className, ...rest}, ref) => {\n    return (\n      <Text\n        variant=\"muted\"\n        ref={ref}\n        size=\"200\"\n        as=\"p\"\n        className={clsx(styles.Pillar__description, className)}\n        {...rest}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\ntype PillarLinkProps = {\n  href: string\n} & Omit<LinkProps, 'size' | 'direction'> &\n  BaseProps<HTMLAnchorElement>\n\nconst PillarLink = forwardRef(({className, children, href, ...props}: PillarLinkProps, ref: Ref<HTMLAnchorElement>) => {\n  return (\n    <Link variant=\"accent\" href={href} ref={ref} className={clsx(styles.Pillar__link, className)} {...props}>\n      {children}\n    </Link>\n  )\n})\n\n/**\n * Pillar component:\n * {@link https://primer.style/brand/components/Pillar/ See usage examples}.\n */\nexport const Pillar = Object.assign(PillarRoot, {\n  Icon: PillarIcon,\n  Image: PillarImage,\n  Heading: PillarHeading,\n  Description: PillarDescription,\n  Link: PillarLink,\n})\n"],"mappings":";;;;;;;;;;;AAYA,IAAa,IAAyB,SACzB,IAAwB,IAoB/B,IAAa,GAEf,EACE,aACA,cACA,YACA,QAAK,OACL,WAAQ,SACR,UACA,eAAY,IACZ,eAAY,IACZ,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAmB,EAAM,SAAS,QAAQ,EAAS,CAAC,QAAO,MAC/D,GAAI,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,aAErD,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,IAMnB;AAKF,QACE,kBAHgB,CADK,OAAO,UACZ,CAAc,SAAS,EAAG,GAAG,IAAK,OAGlD;EACE,WAAW,EACT,EAAO,QACP,EAAO,iBAAiB,MACxB,KAAa,EAAO,uBACpB,CAAC,KAAa,EAAO,0BACrB,GACA,EACD;EACI;EACL,GAAK;EACL,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;YAE1C;EACS,CAAA;EAGjB;AAID,SAAS,EAAY,EAAC,cAAW,GAAG,KAAyB;AAC3D,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YACrB,kBAAC,GAAD;GAAkB;GAAW,GAAI;GAAQ,CAAA;EACrC,CAAA;;AAYV,SAAS,EAAW,EAAC,SAAM,cAAW,mBAAgB,IAAM,SAAM,GAAG,KAAyB;AAC5F,KAAI,CAAC,GAAe;EAClB,IAAM,IAAmB;GACvB,GAAI;GACJ,WAAW,EAAK,EAAO,cAAc,EAAU;GAChD,EAEG;AASJ,SAPA,AAIE,IAJE,EAAM,eAAmC,EAAK,GACxB,IAGA,kBAAC,GAAD,EAAyB,CAAA,EAG5C,kBAAC,QAAD;GAAM,GAAI;aAAmB;GAA6B,CAAA;;AAGnE,QACE,kBAAC,GAAD;EACE,WAAW,EAAK,EAAO,cAAc,EAAO,kCAAkC,EAAU;EACxF,OAAO;EACP,eAAA;EACM;EACN,MAAM,KAAA;EACN,GAAI;EACJ,CAAA;;AASN,IAAM,IAAgB,GACnB,EAAC,aAAU,QAAK,MAAM,UAAO,KAAK,cAAW,GAAG,KAAO,MAEpD,kBAAC,GAAD;CACQ;CACN,WAAW,EAAK,EAAO,iBAAiB,EAAO,yBAAyB,MAAS,EAAU;CACtF;CACD;CACJ,GAAI;CAEH;CACO,CAAA,CAGf,EAIK,IAAoB,GACvB,EAAC,aAAU,cAAW,GAAG,KAAO,MAE7B,kBAAC,GAAD;CACE,SAAQ;CACH;CACL,MAAK;CACL,IAAG;CACH,WAAW,EAAK,EAAO,qBAAqB,EAAU;CACtD,GAAI;CAEH;CACI,CAAA,CAGZ,EAOK,IAAa,GAAY,EAAC,cAAW,aAAU,SAAM,GAAG,KAAyB,MAEnF,kBAAC,GAAD;CAAM,SAAQ;CAAe;CAAW;CAAK,WAAW,EAAK,EAAO,cAAc,EAAU;CAAE,GAAI;CAC/F;CACI,CAAA,CAET,EAMW,IAAS,OAAO,OAAO,GAAY;CAC9C,MAAM;CACN,OAAO;CACP,SAAS;CACT,aAAa;CACb,MAAM;CACP,CAAC"}
+{"version":3,"file":"Pillar.js","names":[],"sources":["../../src/Pillar/Pillar.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, HTMLAttributes, type Ref, type JSX} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps, Link, LinkProps} from '..'\nimport {Icon, type IconProps} from '../Icon'\nimport type {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\n/**\n * Main stylesheet (as a CSS Module)\n */\nimport styles from './Pillar.module.css'\n\nexport const defaultPillarIconColor = 'green'\nexport const defaultPillarIconSize = 32\nexport type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<C> & {\n  /**\n   * The HTML element used to render the Pillar.\n   */\n  as?: C | 'div' | 'article'\n  /**\n   * Aligns the pillar content\n   */\n  align?: 'start' | 'center'\n  /**\n   * Enables optional border around the pillar content\n   */\n  hasBorder?: boolean\n  /**\n   * Allows the pillar to fill the width of its parent container.\n   */\n  fullWidth?: boolean\n} & (C extends 'article' ? PropsWithChildren<BaseProps<HTMLElement>> : PropsWithChildren<BaseProps<HTMLDivElement>>)\n\nconst PillarRoot = forwardRef(\n  (\n    {\n      children,\n      className,\n      animate,\n      as = 'div',\n      align = 'start',\n      style,\n      hasBorder = false,\n      fullWidth = false,\n      ...rest\n    }: PropsWithChildren<PillarProps>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const filteredChildren = React.Children.toArray(children).filter(child => {\n      if (React.isValidElement(child) && typeof child.type !== 'string') {\n        if (\n          child.type === PillarImage ||\n          child.type === PillarIcon ||\n          child.type === PillarHeading ||\n          child.type === PillarDescription ||\n          child.type === PillarLink\n        ) {\n          return true\n        }\n      }\n      return false\n    })\n\n    const validElements = ['div', 'article']\n    const Component = validElements.includes(as) ? as : 'div'\n\n    return (\n      <Component\n        className={clsx(\n          styles.Pillar,\n          styles[`Pillar--align-${align}`],\n          hasBorder && styles['Pillar--has-border'],\n          !fullWidth && styles['Pillar--has-max-width'],\n          animationClasses,\n          className,\n        )}\n        ref={ref}\n        {...(rest as HTMLAttributes<HTMLElement>)}\n        style={{...animationInlineStyles, ...style}}\n      >\n        {filteredChildren}\n      </Component>\n    )\n  },\n)\n\ntype PillarImageProps = ImageProps\n\nfunction PillarImage({className, ...rest}: PillarImageProps) {\n  return (\n    <div className={styles.Pillar__image}>\n      <Image className={className} {...rest} />\n    </div>\n  )\n}\n\ntype IconComponentProps = React.SVGAttributes<SVGElement> & {size?: number}\ntype IconComponent = React.ComponentType<IconComponentProps> | React.ExoticComponent<IconComponentProps>\ntype IconElement = React.ReactElement<IconComponentProps>\n\nexport type PillarIconProps = Omit<IconProps, 'icon' | 'color'> & {\n  icon: IconElement | IconComponent\n}\n\nfunction PillarIcon({icon, className, hasBackground = true, size, ...props}: PillarIconProps) {\n  if (!hasBackground) {\n    const iconWrapperProps = {\n      ...(props as React.HTMLAttributes<HTMLSpanElement>),\n      className: clsx(styles.Pillar__icon, className),\n    }\n\n    let iconWithoutBackground: React.ReactNode\n\n    if (React.isValidElement<IconComponentProps>(icon)) {\n      iconWithoutBackground = icon\n    } else {\n      const IconWithoutBackground = icon\n      iconWithoutBackground = <IconWithoutBackground />\n    }\n\n    return <span {...iconWrapperProps}>{iconWithoutBackground}</span>\n  }\n\n  return (\n    <Icon\n      className={clsx(styles.Pillar__icon, styles['Pillar__icon--with-background'], className)}\n      color={defaultPillarIconColor}\n      hasBackground\n      icon={icon as IconProps['icon']}\n      size={size ?? defaultPillarIconSize}\n      {...props}\n    />\n  )\n}\n\ntype PillarHeadingProps = BaseProps<HTMLHeadingElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  as?: Exclude<HeadingProps['as'], 'h1'>\n} & HeadingProps\n\nconst PillarHeading = forwardRef<HTMLHeadingElement, PillarHeadingProps>(\n  ({children, as = 'h3', size = '6', className, ...rest}, ref) => {\n    return (\n      <Heading\n        size={size}\n        className={clsx(styles.Pillar__heading, styles[`Pillar__heading--size-${size}`], className)}\n        ref={ref}\n        as={as}\n        {...rest}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n\ntype PillarDescriptionProps = PropsWithChildren<BaseProps<HTMLParagraphElement>>\n\nconst PillarDescription = forwardRef<HTMLParagraphElement, PillarDescriptionProps>(\n  ({children, className, ...rest}, ref) => {\n    return (\n      <Text\n        variant=\"muted\"\n        ref={ref}\n        size=\"200\"\n        as=\"p\"\n        className={clsx(styles.Pillar__description, className)}\n        {...rest}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\ntype PillarLinkProps = {\n  href: string\n} & Omit<LinkProps, 'size' | 'direction'> &\n  BaseProps<HTMLAnchorElement>\n\nconst PillarLink = forwardRef(({className, children, href, ...props}: PillarLinkProps, ref: Ref<HTMLAnchorElement>) => {\n  return (\n    <Link variant=\"accent\" href={href} ref={ref} className={clsx(styles.Pillar__link, className)} {...props}>\n      {children}\n    </Link>\n  )\n})\n\n/**\n * Pillar component:\n * @see https://primer.style/brand/components/Pillar\n */\nexport const Pillar = Object.assign(PillarRoot, {\n  Icon: PillarIcon,\n  Image: PillarImage,\n  Heading: PillarHeading,\n  Description: PillarDescription,\n  Link: PillarLink,\n})\n"],"mappings":";;;;;;;;;;;AAYA,IAAa,IAAyB,SACzB,IAAwB,IAoB/B,IAAa,GAEf,EACE,aACA,cACA,YACA,QAAK,OACL,WAAQ,SACR,UACA,eAAY,IACZ,eAAY,IACZ,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAmB,EAAM,SAAS,QAAQ,EAAS,CAAC,QAAO,MAC/D,GAAI,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,aAErD,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,IAMnB;AAKF,QACE,kBAHgB,CADK,OAAO,UACZ,CAAc,SAAS,EAAG,GAAG,IAAK,OAGlD;EACE,WAAW,EACT,EAAO,QACP,EAAO,iBAAiB,MACxB,KAAa,EAAO,uBACpB,CAAC,KAAa,EAAO,0BACrB,GACA,EACD;EACI;EACL,GAAK;EACL,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;YAE1C;EACS,CAAA;EAGjB;AAID,SAAS,EAAY,EAAC,cAAW,GAAG,KAAyB;AAC3D,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YACrB,kBAAC,GAAD;GAAkB;GAAW,GAAI;GAAQ,CAAA;EACrC,CAAA;;AAYV,SAAS,EAAW,EAAC,SAAM,cAAW,mBAAgB,IAAM,SAAM,GAAG,KAAyB;AAC5F,KAAI,CAAC,GAAe;EAClB,IAAM,IAAmB;GACvB,GAAI;GACJ,WAAW,EAAK,EAAO,cAAc,EAAU;GAChD,EAEG;AASJ,SAPA,AAIE,IAJE,EAAM,eAAmC,EAAK,GACxB,IAGA,kBAAC,GAAD,EAAyB,CAAA,EAG5C,kBAAC,QAAD;GAAM,GAAI;aAAmB;GAA6B,CAAA;;AAGnE,QACE,kBAAC,GAAD;EACE,WAAW,EAAK,EAAO,cAAc,EAAO,kCAAkC,EAAU;EACxF,OAAO;EACP,eAAA;EACM;EACN,MAAM,KAAA;EACN,GAAI;EACJ,CAAA;;AASN,IAAM,IAAgB,GACnB,EAAC,aAAU,QAAK,MAAM,UAAO,KAAK,cAAW,GAAG,KAAO,MAEpD,kBAAC,GAAD;CACQ;CACN,WAAW,EAAK,EAAO,iBAAiB,EAAO,yBAAyB,MAAS,EAAU;CACtF;CACD;CACJ,GAAI;CAEH;CACO,CAAA,CAGf,EAIK,IAAoB,GACvB,EAAC,aAAU,cAAW,GAAG,KAAO,MAE7B,kBAAC,GAAD;CACE,SAAQ;CACH;CACL,MAAK;CACL,IAAG;CACH,WAAW,EAAK,EAAO,qBAAqB,EAAU;CACtD,GAAI;CAEH;CACI,CAAA,CAGZ,EAOK,IAAa,GAAY,EAAC,cAAW,aAAU,SAAM,GAAG,KAAyB,MAEnF,kBAAC,GAAD;CAAM,SAAQ;CAAe;CAAW;CAAK,WAAW,EAAK,EAAO,cAAc,EAAU;CAAE,GAAI;CAC/F;CACI,CAAA,CAET,EAMW,IAAS,OAAO,OAAO,GAAY;CAC9C,MAAM;CACN,OAAO;CACP,SAAS;CACT,aAAa;CACb,MAAM;CACP,CAAC"}

package/esm/Token/Token.d.ts

@@ -34,8 +34,8 @@ type TokenAnchorProps = BaseProps<HTMLAnchorElement> & TokenSharedProps & {
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
 export type TokenProps = TokenSpanProps | TokenAnchorProps;
 /**
- * Use a Token to group short metadata or categories, with optional leading visuals.
- * @see https://primer.style/brand
+ * Use Token to display compact metadata that describes or supports adjacent content.
+ * @see https://primer.style/brand/components/Token
  */
 export declare const Token: React.ForwardRefExoticComponent<(Omit<TokenSpanProps, "ref"> | Omit<TokenAnchorProps, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>> & {
     testIds: {

package/esm/Token/Token.js.map

@@ -1 +1 @@
-{"version":3,"file":"Token.js","names":[],"sources":["../../src/Token/Token.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref} from 'react'\n\nimport {Text} from '../Text'\nimport {useAnimation} from '../animation'\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/token/colors-with-modes.css'\n\nimport styles from './Token.module.css'\n\nexport const TokenVariants = ['default', 'accent', 'outline', 'invisible'] as const\n\nexport const defaultTokenVariant = TokenVariants[0]\n\ntype TokenLeadingVisual = React.ReactElement | React.ComponentType<{className?: string}>\n\ntype TokenSharedProps = {\n  /**\n   * The leading visual appears before the Token content.\n   * Pass an element to supply custom props, or a component type that accepts an optional className.\n   */\n  leadingVisual?: TokenLeadingVisual\n  /**\n   * The variant variations available in Token.\n   */\n  variant?: (typeof TokenVariants)[number]\n  /**\n   * The HTML element rendered by Token.\n   */\n  as?: 'span' | 'a'\n  ['data-testid']?: string\n}\n\ntype TokenSpanProps = BaseProps<HTMLSpanElement> &\n  TokenSharedProps & {\n    as?: 'span'\n  } & React.ComponentPropsWithoutRef<'span'>\n\ntype TokenAnchorProps = BaseProps<HTMLAnchorElement> &\n  TokenSharedProps & {\n    as: 'a'\n    href: string\n  } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>\n\nexport type TokenProps = TokenSpanProps | TokenAnchorProps\n\nconst testIds = {\n  root: 'Token',\n  get leadingVisual() {\n    return `${this.root}-leading-visual`\n  },\n}\n\nconst _Token = forwardRef<HTMLSpanElement | HTMLAnchorElement, TokenProps>(\n  (\n    {\n      animate,\n      variant = defaultTokenVariant,\n      as = 'span',\n      children,\n      className,\n      'data-testid': testId,\n      leadingVisual: LeadingVisual,\n      style,\n      ...props\n    },\n    ref: Ref<HTMLSpanElement | HTMLAnchorElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const tokenClassName = clsx(\n      animationClasses,\n      styles.Token,\n      LeadingVisual && styles['Token--hasLeadingVisual'],\n      as === 'a' && styles['Token--interactive'],\n      styles[`Token--variant-${variant}`],\n      className,\n    )\n\n    const tokenChildren = (\n      <>\n        {LeadingVisual && (\n          <span className={styles['Token__leading-visual']} data-testid={testIds.leadingVisual} aria-hidden=\"true\">\n            {typeof LeadingVisual === 'function' ? (\n              <LeadingVisual className={styles['Token__visual']} />\n            ) : (\n              React.isValidElement<{className?: string}>(LeadingVisual) &&\n              React.cloneElement(LeadingVisual, {\n                className: clsx(styles['Token__visual'], LeadingVisual.props.className),\n              })\n            )}\n          </span>\n        )}\n        <Text as=\"span\" size=\"100\" className={styles['Token__label']}>\n          {children}\n        </Text>\n      </>\n    )\n\n    if (as === 'a') {\n      return (\n        <a\n          ref={ref as Ref<HTMLAnchorElement>}\n          className={tokenClassName}\n          data-testid={testId || testIds.root}\n          style={{...animationInlineStyles, ...style}}\n          {...props}\n        >\n          {tokenChildren}\n        </a>\n      )\n    }\n\n    return (\n      <span\n        ref={ref as Ref<HTMLSpanElement>}\n        className={tokenClassName}\n        data-testid={testId || testIds.root}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {tokenChildren}\n      </span>\n    )\n  },\n)\n\n/**\n * Use a Token to group short metadata or categories, with optional leading visuals.\n * @see https://primer.style/brand\n */\nexport const Token = Object.assign(_Token, {testIds})\n"],"mappings":";;;;;;;;AAcA,IAAa,IAAgB;CAAC;CAAW;CAAU;CAAW;CAAY,EAE7D,IAAsB,EAAc,IAkC3C,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;AAClB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAEK,IAAS,GAEX,EACE,YACA,aAAU,GACV,QAAK,QACL,aACA,cACA,eAAe,GACf,eAAe,GACf,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAiB,EACrB,GACA,EAAO,OACP,KAAiB,EAAO,4BACxB,MAAO,OAAO,EAAO,uBACrB,EAAO,kBAAkB,MACzB,EACD,EAEK,IACJ,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,QAAD;EAAM,WAAW,EAAO;EAA0B,eAAa,EAAQ;EAAe,eAAY;YAC/F,OAAO,KAAkB,aACxB,kBAAC,GAAD,EAAe,WAAW,EAAO,eAAoB,CAAA,GAErD,EAAM,eAAqC,EAAc,IACzD,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAO,eAAkB,EAAc,MAAM,UAAU,EACxE,CAAC;EAEC,CAAA,EAET,kBAAC,GAAD;EAAM,IAAG;EAAO,MAAK;EAAM,WAAW,EAAO;EAC1C;EACI,CAAA,CACN,EAAA,CAAA;AAiBL,QAZI,EAFA,MAAO,MAEN,MAaF,QAbC;EACO;EACL,WAAW;EACX,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAEH;EACC,CAAA;EAgBX,EAMY,IAAQ,OAAO,OAAO,GAAQ,EAAC,YAAQ,CAAC"}
+{"version":3,"file":"Token.js","names":[],"sources":["../../src/Token/Token.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref} from 'react'\n\nimport {Text} from '../Text'\nimport {useAnimation} from '../animation'\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/token/colors-with-modes.css'\n\nimport styles from './Token.module.css'\n\nexport const TokenVariants = ['default', 'accent', 'outline', 'invisible'] as const\n\nexport const defaultTokenVariant = TokenVariants[0]\n\ntype TokenLeadingVisual = React.ReactElement | React.ComponentType<{className?: string}>\n\ntype TokenSharedProps = {\n  /**\n   * The leading visual appears before the Token content.\n   * Pass an element to supply custom props, or a component type that accepts an optional className.\n   */\n  leadingVisual?: TokenLeadingVisual\n  /**\n   * The variant variations available in Token.\n   */\n  variant?: (typeof TokenVariants)[number]\n  /**\n   * The HTML element rendered by Token.\n   */\n  as?: 'span' | 'a'\n  ['data-testid']?: string\n}\n\ntype TokenSpanProps = BaseProps<HTMLSpanElement> &\n  TokenSharedProps & {\n    as?: 'span'\n  } & React.ComponentPropsWithoutRef<'span'>\n\ntype TokenAnchorProps = BaseProps<HTMLAnchorElement> &\n  TokenSharedProps & {\n    as: 'a'\n    href: string\n  } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>\n\nexport type TokenProps = TokenSpanProps | TokenAnchorProps\n\nconst testIds = {\n  root: 'Token',\n  get leadingVisual() {\n    return `${this.root}-leading-visual`\n  },\n}\n\nconst _Token = forwardRef<HTMLSpanElement | HTMLAnchorElement, TokenProps>(\n  (\n    {\n      animate,\n      variant = defaultTokenVariant,\n      as = 'span',\n      children,\n      className,\n      'data-testid': testId,\n      leadingVisual: LeadingVisual,\n      style,\n      ...props\n    },\n    ref: Ref<HTMLSpanElement | HTMLAnchorElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const tokenClassName = clsx(\n      animationClasses,\n      styles.Token,\n      LeadingVisual && styles['Token--hasLeadingVisual'],\n      as === 'a' && styles['Token--interactive'],\n      styles[`Token--variant-${variant}`],\n      className,\n    )\n\n    const tokenChildren = (\n      <>\n        {LeadingVisual && (\n          <span className={styles['Token__leading-visual']} data-testid={testIds.leadingVisual} aria-hidden=\"true\">\n            {typeof LeadingVisual === 'function' ? (\n              <LeadingVisual className={styles['Token__visual']} />\n            ) : (\n              React.isValidElement<{className?: string}>(LeadingVisual) &&\n              React.cloneElement(LeadingVisual, {\n                className: clsx(styles['Token__visual'], LeadingVisual.props.className),\n              })\n            )}\n          </span>\n        )}\n        <Text as=\"span\" size=\"100\" className={styles['Token__label']}>\n          {children}\n        </Text>\n      </>\n    )\n\n    if (as === 'a') {\n      return (\n        <a\n          ref={ref as Ref<HTMLAnchorElement>}\n          className={tokenClassName}\n          data-testid={testId || testIds.root}\n          style={{...animationInlineStyles, ...style}}\n          {...props}\n        >\n          {tokenChildren}\n        </a>\n      )\n    }\n\n    return (\n      <span\n        ref={ref as Ref<HTMLSpanElement>}\n        className={tokenClassName}\n        data-testid={testId || testIds.root}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {tokenChildren}\n      </span>\n    )\n  },\n)\n\n/**\n * Use Token to display compact metadata that describes or supports adjacent content.\n * @see https://primer.style/brand/components/Token\n */\nexport const Token = Object.assign(_Token, {testIds})\n"],"mappings":";;;;;;;;AAcA,IAAa,IAAgB;CAAC;CAAW;CAAU;CAAW;CAAY,EAE7D,IAAsB,EAAc,IAkC3C,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;AAClB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAEK,IAAS,GAEX,EACE,YACA,aAAU,GACV,QAAK,QACL,aACA,cACA,eAAe,GACf,eAAe,GACf,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAiB,EACrB,GACA,EAAO,OACP,KAAiB,EAAO,4BACxB,MAAO,OAAO,EAAO,uBACrB,EAAO,kBAAkB,MACzB,EACD,EAEK,IACJ,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,QAAD;EAAM,WAAW,EAAO;EAA0B,eAAa,EAAQ;EAAe,eAAY;YAC/F,OAAO,KAAkB,aACxB,kBAAC,GAAD,EAAe,WAAW,EAAO,eAAoB,CAAA,GAErD,EAAM,eAAqC,EAAc,IACzD,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAO,eAAkB,EAAc,MAAM,UAAU,EACxE,CAAC;EAEC,CAAA,EAET,kBAAC,GAAD;EAAM,IAAG;EAAO,MAAK;EAAM,WAAW,EAAO;EAC1C;EACI,CAAA,CACN,EAAA,CAAA;AAiBL,QAZI,EAFA,MAAO,MAEN,MAaF,QAbC;EACO;EACL,WAAW;EACX,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAEH;EACC,CAAA;EAgBX,EAMY,IAAQ,OAAO,OAAO,GAAQ,EAAC,YAAQ,CAAC"}

package/esm/river/River/River.d.ts

@@ -2,6 +2,8 @@ import React, { PropsWithChildren } from 'react';
 import { type HeadingProps } from '../../Heading';
 import { type TextProps } from '../../Text';
 import { type LinkProps } from '../../Link';
+import { type LabelProps } from '../../Label';
+import { type EyebrowTextProps } from '../../EyebrowText';
 import type { BaseProps } from '../../component-helpers';
 /**
  * Design tokens
@@ -40,6 +42,7 @@ export type RiverProps = {
 export declare const defaultRiverImageTextRatio = "50:50";
 export declare const defaultRiverAlign = "start";
 export declare const defaultRiverVariant: RiverVariant;
+type RiverContentChild = React.ReactElement<EyebrowTextProps | HeadingProps | TextProps | LinkProps | LabelProps>;
 export type RiverContentProps = BaseProps<HTMLDivElement> & {
     /**
      * Aligns the content vertically within its container.
@@ -65,11 +68,12 @@ export type RiverContentProps = BaseProps<HTMLDivElement> & {
     leadingComponent?: React.FunctionComponent;
     /**
      * Only valid children are allowed.
-     * These include: `Heading`, `Text` and `Link`.
+     * These include: `EyebrowText`, `Heading`, `Text` and `Link`.
+     * Passing the standalone `Label` component is deprecated; use `EyebrowText` instead.
      * The declarative order of the children will be ignored in the rendered output
      * to enforce correct HTML semantics.
      */
-    children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[];
+    children: RiverContentChild | RiverContentChild[];
 } & React.HTMLAttributes<HTMLDivElement>;
 export declare const RiverContent: React.ForwardRefExoticComponent<Omit<RiverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const RiverVisualPositionOptions: readonly ["default", "center", "block-end", "block-end-inline-start", "block-end-inline-end"];
@@ -111,4 +115,5 @@ export declare const River: React.ForwardRefExoticComponent<Omit<RiverProps, "re
     Visual: React.ForwardRefExoticComponent<Omit<RiverVisualProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Content: React.ForwardRefExoticComponent<Omit<RiverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
+export {};
 //# sourceMappingURL=River.d.ts.map

package/esm/river/River/River.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"River.d.ts","sourceRoot":"","sources":["../../../src/river/River/River.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"River.d.ts","sourceRoot":"","sources":["../../../src/river/River/River.tsx"],"names":[],"mappings":"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"}

package/esm/river/River/River.js

@@ -31,8 +31,8 @@ var m = "50:50", h = "start", g = "default", _ = u(({ animate: n, imageTextRatio
 		children: [C, E]
 	});
 }), v = u(({ align: a = "center", animate: u, children: m, className: h, leadingComponent: g, trailingComponent: _, trailingComponentDivider: v = !1, style: y, ...b }, x) => {
-	let { classes: S, styles: C } = t(u), w = d(() => l.Children.toArray(m), [m]), T = w.find((e) => l.isValidElement(e) && e.type === i), E = w.find((e) => l.isValidElement(e) && e.type === n), D = w.find((e) => l.isValidElement(e) && e.type === o), O = w.find((e) => l.isValidElement(e) && e.type === s), k = w.find((e) => l.isValidElement(e) && e.type === r);
-	return /* @__PURE__ */ p("div", {
+	let { classes: S, styles: C } = t(u), w = d(() => l.Children.toArray(m), [m]), T = w.find((e) => l.isValidElement(e) && e.type === i), E = w.find((e) => l.isValidElement(e) && e.type === n), D = w.find((e) => l.isValidElement(e) && e.type === o), O = w.find((e) => l.isValidElement(e) && e.type === s), k = w.find((e) => l.isValidElement(e) && e.type === r), A = l.isValidElement(O) && !g;
+	return A && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("River.Content: standalone `Label` children are deprecated. Use `EyebrowText` instead."), /* @__PURE__ */ p("div", {
 		ref: x,
 		className: e(S, c.River__content, c[`River__content--align-${a}`], h),
 		style: {
@@ -41,7 +41,7 @@ var m = "50:50", h = "start", g = "default", _ = u(({ animate: n, imageTextRatio
 		},
 		...b,
 		children: [
-			l.isValidElement(O) && !g && /* @__PURE__ */ f("div", {
+			A && /* @__PURE__ */ f("div", {
 				className: c.River__label,
 				children: l.cloneElement(O, {})
 			}),

package/esm/river/River/River.js.map

@@ -1 +1 @@
-{"version":3,"file":"River.js","names":[],"sources":["../../../src/river/River/River.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, type HeadingProps} from '../../Heading'\nimport {Text, type TextProps} from '../../Text'\nimport {Link, type LinkProps} from '../../Link'\nimport {Label, type LabelProps} from '../../Label'\nimport {EyebrowText} from '../../EyebrowText'\nimport {useAnimation} from '../../animation'\nimport type {BaseProps} from '../../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\nexport const RiverVariants = ['default', 'gridline'] as const\nexport const BorderedGrid = 'gridline' as const\nexport const GridLine = 'gridline' as const\nexport type RiverVariant = (typeof RiverVariants)[number]\n\nexport const RiverContentAlignValues = ['center', 'block-end'] as const\nexport type RiverContentAlign = (typeof RiverContentAlignValues)[number]\n\nexport type RiverProps = {\n  /**\n   * Only specific children are valid.\n   * These include: `River.Visual` and `River.Content`.\n   * The declarative order of the children will be ignored in the rendered output\n   * to enforce correct HTML semantics.\n   */\n  children: React.ReactElement<RiverVisualProps | RiverContentProps>[]\n  /**\n   * Apply an alternative image to text column ratio. The default is `50:50`.\n   */\n  imageTextRatio?: '60:40' | '50:50'\n  /**\n   * Adjust the order of the `Content` column. The default is `start`.\n   */\n  align?: 'start' | 'end' | 'center'\n  /**\n   * Apply a visual variant. The default is `default`.\n   * `gridline` applies lateral spacing for use in bordered grid layouts.\n   */\n  variant?: RiverVariant\n} & BaseProps<HTMLElement> &\n  React.HTMLAttributes<HTMLElement>\n\nexport const defaultRiverImageTextRatio = '50:50'\nexport const defaultRiverAlign = 'start'\nexport const defaultRiverVariant: RiverVariant = 'default'\n\ntype ValidRootChildren = {\n  Visual: React.ReactElement<RiverVisualProps> | null\n  Content: React.ReactElement<RiverContentProps> | null\n}\n\nconst Root = forwardRef(\n  (\n    {\n      animate,\n      imageTextRatio = defaultRiverImageTextRatio,\n      align = defaultRiverAlign,\n      variant = defaultRiverVariant,\n      className,\n      children,\n      style,\n      ...rest\n    }: RiverProps,\n    ref: Ref<HTMLElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const {Visual: VisualChild, Content: ContentChild} = React.Children.toArray(children).reduce<ValidRootChildren>(\n      (acc, child) => {\n        if (React.isValidElement(child) && typeof child.type !== 'string') {\n          if (child.type === Visual) {\n            acc.Visual = child as React.ReactElement<RiverVisualProps>\n          }\n          if (child.type === RiverContent) {\n            acc.Content = child as React.ReactElement<RiverContentProps>\n          }\n        }\n        return acc\n      },\n      {Visual: null, Content: null},\n    )\n\n    const visualPosition = VisualChild?.props.position ?? 'default'\n    const visualPadding = VisualChild?.props.padding ?? 'default'\n    const hasNonDefaultPosition = visualPosition !== 'default'\n    const hasNonDefaultPadding = visualPadding !== 'default'\n    const hasVisualLayoutOverrides = hasNonDefaultPosition || hasNonDefaultPadding\n    const supportsVisualLayoutOverrides = variant === 'gridline'\n\n    if (\n      hasVisualLayoutOverrides &&\n      !supportsVisualLayoutOverrides &&\n      (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')\n    ) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `River: River.Visual position and padding are only supported when River uses variant=\"gridline\"; ignoring position=\"${visualPosition}\" and padding=\"${visualPadding}\".`,\n      )\n    }\n\n    const VisualChildWithVariantStyles = VisualChild\n      ? React.cloneElement(VisualChild, {\n          className: clsx(\n            VisualChild.props.className,\n            variant === 'gridline' && styles['River__visual--has-background'],\n          ),\n        })\n      : null\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          styles.River,\n          styles[`River--${imageTextRatio.replace(':', '-')}`],\n          styles[`River--align-${align}`],\n          styles[`River--variant-${variant}`],\n          variant === 'gridline' && gridlineStyles.gridline,\n          animationClasses,\n          className,\n        )}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {ContentChild}\n        {VisualChildWithVariantStyles}\n      </section>\n    )\n  },\n)\n\nexport type RiverContentProps = BaseProps<HTMLDivElement> & {\n  /**\n   * Aligns the content vertically within its container.\n   */\n  align?: RiverContentAlign\n  /**\n   * Escape-hatch for inserting custom React components.\n   * Warning:\n   *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n   *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n   */\n  trailingComponent?: React.FunctionComponent\n  /**\n   * When `true`, a divider will be rendered between the standard river and optional trailing content.\n   */\n  trailingComponentDivider?: 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  leadingComponent?: React.FunctionComponent\n  /**\n   * Only valid children are allowed.\n   * These include: `Heading`, `Text` and `Link`.\n   * The declarative order of the children will be ignored in the rendered output\n   * to enforce correct HTML semantics.\n   */\n  children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[]\n} & React.HTMLAttributes<HTMLDivElement>\n\nexport const RiverContent = forwardRef(\n  (\n    {\n      align = 'center',\n      animate,\n      children,\n      className,\n      leadingComponent: LeadingComponent,\n      trailingComponent: TrailingComponent,\n      trailingComponentDivider = false,\n      style,\n      ...rest\n    }: RiverContentProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const Children = useMemo(() => React.Children.toArray(children), [children])\n\n    const HeadingChild = Children.find(child => React.isValidElement(child) && child.type === Heading)\n\n    const TextChild = Children.find(child => React.isValidElement(child) && child.type === Text)\n\n    const LinkChild = Children.find(child => React.isValidElement(child) && child.type === Link)\n\n    const LabelChild = Children.find(child => React.isValidElement(child) && child.type === Label)\n\n    const EyebrowTextChild = Children.find(child => React.isValidElement(child) && child.type === EyebrowText)\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(animationClasses, styles.River__content, styles[`River__content--align-${align}`], className)}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {React.isValidElement(LabelChild) && !LeadingComponent && (\n          <div className={styles.River__label}>\n            {React.cloneElement(LabelChild as React.ReactElement<LabelProps>, {})}\n          </div>\n        )}\n\n        {!LabelChild && React.isValidElement(EyebrowTextChild) && !LeadingComponent && (\n          <div className={styles.River__label}>{EyebrowTextChild}</div>\n        )}\n\n        {!LabelChild && !EyebrowTextChild && LeadingComponent && (\n          <div className={styles.River__leadingComponent}>\n            <LeadingComponent />\n          </div>\n        )}\n\n        {React.isValidElement<HeadingProps>(HeadingChild) && (\n          <div className={styles.River__heading}>\n            {React.cloneElement(HeadingChild as React.ReactElement<HeadingProps>, {\n              // as uses h3 default, but can be overridden\n              as: HeadingChild.props.as || 'h3',\n              size: HeadingChild.props.size || '5',\n              weight: HeadingChild.props.weight,\n            })}\n          </div>\n        )}\n\n        {React.isValidElement<TextProps>(TextChild) && (\n          <div className={styles['River__body-text']}>\n            {React.cloneElement(TextChild as React.ReactElement<TextProps>, {\n              variant: 'muted',\n              as: 'p',\n              className: clsx(styles.River__text, TextChild.props.className),\n            })}\n          </div>\n        )}\n        {React.isValidElement<LinkProps>(LinkChild) && (\n          <div className={styles['River__call-to-action']}>\n            {React.cloneElement(LinkChild as React.ReactElement<LinkProps>, {\n              size: 'medium',\n              variant: LinkChild.props.variant || 'accent',\n            })}\n          </div>\n        )}\n        {TrailingComponent && (\n          <div\n            className={clsx(\n              styles.River__trailingComponent,\n              trailingComponentDivider && styles['River__trailingComponent--divider'],\n            )}\n          >\n            <TrailingComponent />\n          </div>\n        )}\n      </div>\n    )\n  },\n)\n\nexport const RiverVisualPositionOptions = [\n  'default',\n  'center',\n  'block-end',\n  'block-end-inline-start',\n  'block-end-inline-end',\n] as const\nexport type RiverVisualPosition = (typeof RiverVisualPositionOptions)[number]\n\nexport const RiverVisualPaddingOptions = ['default', 'none', 'all'] as const\nexport type RiverVisualPadding = (typeof RiverVisualPaddingOptions)[number]\n\nexport type RiverVisualBaseProps = BaseProps<HTMLDivElement> &\n  React.HtmlHTMLAttributes<HTMLDivElement> &\n  PropsWithChildren<{\n    /**\n     * Applies automatic size constraints to child images and video.\n     * This can be disabled by setting this prop to `false`.\n     */\n    fillMedia?: boolean\n    /**\n     * `img` and `video` elements will apply a shadow by default.\n     * This can be disabled by setting this prop to `false`.\n     */\n    hasShadow?: boolean\n    /**\n     * Enables rounded corners.\n     * Can optionally be disabled.\n     */\n    rounded?: boolean\n  }>\n\nexport type RiverVisualProps = RiverVisualBaseProps & {\n  /**\n   * Positions media within the visual region in the gridline variant.\n   */\n  position?: RiverVisualPosition\n  /**\n   * Controls media padding within the visual region in the gridline variant.\n   */\n  padding?: RiverVisualPadding\n}\n\nexport const RiverVisualBase = forwardRef<HTMLDivElement, RiverVisualBaseProps>(\n  (\n    {fillMedia = true, children, className, hasShadow = false, rounded = true, ...rest}: RiverVisualBaseProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          styles.River__visual,\n          hasShadow && styles['River__visual--has-shadow'],\n          fillMedia && styles['River__visual--fill-media'],\n          rounded && styles['River__visual--rounded'],\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nconst Visual = forwardRef<HTMLDivElement, RiverVisualProps>(\n  ({className, position = 'default', padding = 'default', ...rest}, ref) => (\n    <RiverVisualBase\n      ref={ref}\n      className={clsx(\n        position !== 'default' && styles[`River__visual--position-${position}`],\n        padding !== 'default' && styles[`River__visual--padding-${padding}`],\n        className,\n      )}\n      {...rest}\n    />\n  ),\n)\n\n/**\n * Alternating text and image pairs.\n */\nexport const River = Object.assign(Root, {Visual, Content: RiverContent})\n"],"mappings":"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"}
+{"version":3,"file":"River.js","names":[],"sources":["../../../src/river/River/River.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, type HeadingProps} from '../../Heading'\nimport {Text, type TextProps} from '../../Text'\nimport {Link, type LinkProps} from '../../Link'\nimport {Label, type LabelProps} from '../../Label'\nimport {EyebrowText, type EyebrowTextProps} from '../../EyebrowText'\nimport {useAnimation} from '../../animation'\nimport type {BaseProps} from '../../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\nexport const RiverVariants = ['default', 'gridline'] as const\nexport const BorderedGrid = 'gridline' as const\nexport const GridLine = 'gridline' as const\nexport type RiverVariant = (typeof RiverVariants)[number]\n\nexport const RiverContentAlignValues = ['center', 'block-end'] as const\nexport type RiverContentAlign = (typeof RiverContentAlignValues)[number]\n\nexport type RiverProps = {\n  /**\n   * Only specific children are valid.\n   * These include: `River.Visual` and `River.Content`.\n   * The declarative order of the children will be ignored in the rendered output\n   * to enforce correct HTML semantics.\n   */\n  children: React.ReactElement<RiverVisualProps | RiverContentProps>[]\n  /**\n   * Apply an alternative image to text column ratio. The default is `50:50`.\n   */\n  imageTextRatio?: '60:40' | '50:50'\n  /**\n   * Adjust the order of the `Content` column. The default is `start`.\n   */\n  align?: 'start' | 'end' | 'center'\n  /**\n   * Apply a visual variant. The default is `default`.\n   * `gridline` applies lateral spacing for use in bordered grid layouts.\n   */\n  variant?: RiverVariant\n} & BaseProps<HTMLElement> &\n  React.HTMLAttributes<HTMLElement>\n\nexport const defaultRiverImageTextRatio = '50:50'\nexport const defaultRiverAlign = 'start'\nexport const defaultRiverVariant: RiverVariant = 'default'\n\ntype ValidRootChildren = {\n  Visual: React.ReactElement<RiverVisualProps> | null\n  Content: React.ReactElement<RiverContentProps> | null\n}\n\nconst Root = forwardRef(\n  (\n    {\n      animate,\n      imageTextRatio = defaultRiverImageTextRatio,\n      align = defaultRiverAlign,\n      variant = defaultRiverVariant,\n      className,\n      children,\n      style,\n      ...rest\n    }: RiverProps,\n    ref: Ref<HTMLElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const {Visual: VisualChild, Content: ContentChild} = React.Children.toArray(children).reduce<ValidRootChildren>(\n      (acc, child) => {\n        if (React.isValidElement(child) && typeof child.type !== 'string') {\n          if (child.type === Visual) {\n            acc.Visual = child as React.ReactElement<RiverVisualProps>\n          }\n          if (child.type === RiverContent) {\n            acc.Content = child as React.ReactElement<RiverContentProps>\n          }\n        }\n        return acc\n      },\n      {Visual: null, Content: null},\n    )\n\n    const visualPosition = VisualChild?.props.position ?? 'default'\n    const visualPadding = VisualChild?.props.padding ?? 'default'\n    const hasNonDefaultPosition = visualPosition !== 'default'\n    const hasNonDefaultPadding = visualPadding !== 'default'\n    const hasVisualLayoutOverrides = hasNonDefaultPosition || hasNonDefaultPadding\n    const supportsVisualLayoutOverrides = variant === 'gridline'\n\n    if (\n      hasVisualLayoutOverrides &&\n      !supportsVisualLayoutOverrides &&\n      (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')\n    ) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `River: River.Visual position and padding are only supported when River uses variant=\"gridline\"; ignoring position=\"${visualPosition}\" and padding=\"${visualPadding}\".`,\n      )\n    }\n\n    const VisualChildWithVariantStyles = VisualChild\n      ? React.cloneElement(VisualChild, {\n          className: clsx(\n            VisualChild.props.className,\n            variant === 'gridline' && styles['River__visual--has-background'],\n          ),\n        })\n      : null\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          styles.River,\n          styles[`River--${imageTextRatio.replace(':', '-')}`],\n          styles[`River--align-${align}`],\n          styles[`River--variant-${variant}`],\n          variant === 'gridline' && gridlineStyles.gridline,\n          animationClasses,\n          className,\n        )}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {ContentChild}\n        {VisualChildWithVariantStyles}\n      </section>\n    )\n  },\n)\n\ntype RiverContentChild = React.ReactElement<EyebrowTextProps | HeadingProps | TextProps | LinkProps | LabelProps>\n\nexport type RiverContentProps = BaseProps<HTMLDivElement> & {\n  /**\n   * Aligns the content vertically within its container.\n   */\n  align?: RiverContentAlign\n  /**\n   * Escape-hatch for inserting custom React components.\n   * Warning:\n   *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n   *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n   */\n  trailingComponent?: React.FunctionComponent\n  /**\n   * When `true`, a divider will be rendered between the standard river and optional trailing content.\n   */\n  trailingComponentDivider?: 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  leadingComponent?: React.FunctionComponent\n  /**\n   * Only valid children are allowed.\n   * These include: `EyebrowText`, `Heading`, `Text` and `Link`.\n   * Passing the standalone `Label` component is deprecated; use `EyebrowText` instead.\n   * The declarative order of the children will be ignored in the rendered output\n   * to enforce correct HTML semantics.\n   */\n  children: RiverContentChild | RiverContentChild[]\n} & React.HTMLAttributes<HTMLDivElement>\n\nexport const RiverContent = forwardRef(\n  (\n    {\n      align = 'center',\n      animate,\n      children,\n      className,\n      leadingComponent: LeadingComponent,\n      trailingComponent: TrailingComponent,\n      trailingComponentDivider = false,\n      style,\n      ...rest\n    }: RiverContentProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const Children = useMemo(() => React.Children.toArray(children), [children])\n\n    const HeadingChild = Children.find(child => React.isValidElement(child) && child.type === Heading)\n\n    const TextChild = Children.find(child => React.isValidElement(child) && child.type === Text)\n\n    const LinkChild = Children.find(child => React.isValidElement(child) && child.type === Link)\n\n    const LabelChild = Children.find(child => React.isValidElement(child) && child.type === Label)\n\n    const EyebrowTextChild = Children.find(child => React.isValidElement(child) && child.type === EyebrowText)\n\n    const usesDeprecatedLabel = React.isValidElement<LabelProps>(LabelChild) && !LeadingComponent\n    if (usesDeprecatedLabel && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n      // eslint-disable-next-line no-console\n      console.warn('River.Content: standalone `Label` children are deprecated. Use `EyebrowText` instead.')\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(animationClasses, styles.River__content, styles[`River__content--align-${align}`], className)}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {usesDeprecatedLabel && (\n          <div className={styles.River__label}>\n            {React.cloneElement(LabelChild as React.ReactElement<LabelProps>, {})}\n          </div>\n        )}\n\n        {!LabelChild && React.isValidElement(EyebrowTextChild) && !LeadingComponent && (\n          <div className={styles.River__label}>{EyebrowTextChild}</div>\n        )}\n\n        {!LabelChild && !EyebrowTextChild && LeadingComponent && (\n          <div className={styles.River__leadingComponent}>\n            <LeadingComponent />\n          </div>\n        )}\n\n        {React.isValidElement<HeadingProps>(HeadingChild) && (\n          <div className={styles.River__heading}>\n            {React.cloneElement(HeadingChild as React.ReactElement<HeadingProps>, {\n              // as uses h3 default, but can be overridden\n              as: HeadingChild.props.as || 'h3',\n              size: HeadingChild.props.size || '5',\n              weight: HeadingChild.props.weight,\n            })}\n          </div>\n        )}\n\n        {React.isValidElement<TextProps>(TextChild) && (\n          <div className={styles['River__body-text']}>\n            {React.cloneElement(TextChild as React.ReactElement<TextProps>, {\n              variant: 'muted',\n              as: 'p',\n              className: clsx(styles.River__text, TextChild.props.className),\n            })}\n          </div>\n        )}\n        {React.isValidElement<LinkProps>(LinkChild) && (\n          <div className={styles['River__call-to-action']}>\n            {React.cloneElement(LinkChild as React.ReactElement<LinkProps>, {\n              size: 'medium',\n              variant: LinkChild.props.variant || 'accent',\n            })}\n          </div>\n        )}\n        {TrailingComponent && (\n          <div\n            className={clsx(\n              styles.River__trailingComponent,\n              trailingComponentDivider && styles['River__trailingComponent--divider'],\n            )}\n          >\n            <TrailingComponent />\n          </div>\n        )}\n      </div>\n    )\n  },\n)\n\nexport const RiverVisualPositionOptions = [\n  'default',\n  'center',\n  'block-end',\n  'block-end-inline-start',\n  'block-end-inline-end',\n] as const\nexport type RiverVisualPosition = (typeof RiverVisualPositionOptions)[number]\n\nexport const RiverVisualPaddingOptions = ['default', 'none', 'all'] as const\nexport type RiverVisualPadding = (typeof RiverVisualPaddingOptions)[number]\n\nexport type RiverVisualBaseProps = BaseProps<HTMLDivElement> &\n  React.HtmlHTMLAttributes<HTMLDivElement> &\n  PropsWithChildren<{\n    /**\n     * Applies automatic size constraints to child images and video.\n     * This can be disabled by setting this prop to `false`.\n     */\n    fillMedia?: boolean\n    /**\n     * `img` and `video` elements will apply a shadow by default.\n     * This can be disabled by setting this prop to `false`.\n     */\n    hasShadow?: boolean\n    /**\n     * Enables rounded corners.\n     * Can optionally be disabled.\n     */\n    rounded?: boolean\n  }>\n\nexport type RiverVisualProps = RiverVisualBaseProps & {\n  /**\n   * Positions media within the visual region in the gridline variant.\n   */\n  position?: RiverVisualPosition\n  /**\n   * Controls media padding within the visual region in the gridline variant.\n   */\n  padding?: RiverVisualPadding\n}\n\nexport const RiverVisualBase = forwardRef<HTMLDivElement, RiverVisualBaseProps>(\n  (\n    {fillMedia = true, children, className, hasShadow = false, rounded = true, ...rest}: RiverVisualBaseProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          styles.River__visual,\n          hasShadow && styles['River__visual--has-shadow'],\n          fillMedia && styles['River__visual--fill-media'],\n          rounded && styles['River__visual--rounded'],\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nconst Visual = forwardRef<HTMLDivElement, RiverVisualProps>(\n  ({className, position = 'default', padding = 'default', ...rest}, ref) => (\n    <RiverVisualBase\n      ref={ref}\n      className={clsx(\n        position !== 'default' && styles[`River__visual--position-${position}`],\n        padding !== 'default' && styles[`River__visual--padding-${padding}`],\n        className,\n      )}\n      {...rest}\n    />\n  ),\n)\n\n/**\n * Alternating text and image pairs.\n */\nexport const River = Object.assign(Root, {Visual, Content: RiverContent})\n"],"mappings":"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"}

package/lib/Card/Card.d.ts

@@ -97,7 +97,7 @@ type CardDescriptionProps = BaseProps<HTMLParagraphElement> & {
 };
 /**
  * Card component:
- * {@link https://primer.style/brand/components/Card/ See usage examples}.
+ * @see https://primer.style/brand/components/Card
  */
 export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Image: typeof CardImage;

package/lib/Label/Label.d.ts

@@ -25,7 +25,9 @@ export type LabelProps = BaseProps<HTMLSpanElement> & {
     ['data-testid']?: string;
 } & React.ComponentPropsWithoutRef<'span'>;
 /**
- * Use a Label to indicate the status of an object or to categorize it with metadata that describes it.
+ * Use Label to display short status or metadata attached to an object in product-like UI
+ * Prefer Token for general-purpose compact metadata, categories, statuses, and short pre-heading markers.
+ *
  * @see https://primer.style/brand/components/Label
  */
 export declare const Label: React.ForwardRefExoticComponent<Omit<LabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>> & {

package/lib/Pillar/Pillar.d.ts

@@ -43,7 +43,7 @@ type PillarLinkProps = {
 } & Omit<LinkProps, 'size' | 'direction'> & BaseProps<HTMLAnchorElement>;
 /**
  * Pillar component:
- * {@link https://primer.style/brand/components/Pillar/ See usage examples}.
+ * @see https://primer.style/brand/components/Pillar
  */
 export declare const Pillar: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<PillarProps<"div">>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Icon: typeof PillarIcon;

package/lib/Token/Token.d.ts

@@ -34,8 +34,8 @@ type TokenAnchorProps = BaseProps<HTMLAnchorElement> & TokenSharedProps & {
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
 export type TokenProps = TokenSpanProps | TokenAnchorProps;
 /**
- * Use a Token to group short metadata or categories, with optional leading visuals.
- * @see https://primer.style/brand
+ * Use Token to display compact metadata that describes or supports adjacent content.
+ * @see https://primer.style/brand/components/Token
  */
 export declare const Token: React.ForwardRefExoticComponent<(Omit<TokenSpanProps, "ref"> | Omit<TokenAnchorProps, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>> & {
     testIds: {