@primer/react-brand 0.68.0-rc.5bd56cbb → 0.68.0-rc.b6d410ef

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'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from '../river-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    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          animationClasses,\n          className,\n        )}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {ContentChild}\n        {VisualChild}\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>\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              className: clsx(HeadingChild.props.className, styles['River__heading-inner']),\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 RiverVisualBackgroundColors = ['default', 'subtle'] as const\nexport type RiverVisualBackgroundColor = (typeof RiverVisualBackgroundColors)[number]\n\nexport type RiverVisualProps = 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     * Applies a background color with padding around the media.\n     */\n    imageBackgroundColor?: RiverVisualBackgroundColor\n  }>\n\nexport const Visual = forwardRef(\n  (\n    {\n      fillMedia = true,\n      children,\n      className,\n      hasShadow = false,\n      rounded = true,\n      imageBackgroundColor,\n      ...rest\n    }: PropsWithChildren<RiverVisualProps>,\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          imageBackgroundColor === 'subtle' && styles['River__visual--has-background'],\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\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} 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'\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    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        {VisualChild}\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>\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              className: clsx(HeadingChild.props.className, styles['River__heading-inner']),\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 RiverVisualBackgroundColors = ['default', 'subtle'] as const\nexport type RiverVisualBackgroundColor = (typeof RiverVisualBackgroundColors)[number]\n\nexport type RiverVisualProps = 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     * Applies a background color with padding around the media.\n     */\n    imageBackgroundColor?: RiverVisualBackgroundColor\n  }>\n\nexport const Visual = forwardRef(\n  (\n    {\n      fillMedia = true,\n      children,\n      className,\n      hasShadow = false,\n      rounded = true,\n      imageBackgroundColor,\n      ...rest\n    }: PropsWithChildren<RiverVisualProps>,\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          imageBackgroundColor === 'subtle' && styles['River__visual--has-background'],\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\n/**\n * Alternating text and image pairs.\n */\nexport const River = Object.assign(Root, {Visual, Content: RiverContent})\n"],"mappings":";;;;;;;;;;;;;;AAoDA,IAAa,IAA6B,SAC7B,IAAoB,SACpB,IAAoC,WAO3C,IAAO,GAET,EACE,YACA,oBAAiB,GACjB,WAAQ,GACR,aAAU,GACV,cACA,aACA,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,EAAC,QAAQ,GAAa,SAAS,MAAgB,EAAM,SAAS,QAAQ,EAAS,CAAC,QACnF,GAAK,OACA,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,aACnD,EAAM,SAAS,MACjB,EAAI,SAAS,IAEX,EAAM,SAAS,MACjB,EAAI,UAAU,KAGX,IAET;EAAC,QAAQ;EAAM,SAAS;EAAK,CAC9B;AAED,QACE,kBAAC,WAAD;EACO;EACL,WAAW,EACT,EAAO,OACP,EAAO,UAAU,EAAe,QAAQ,KAAK,IAAI,KACjD,EAAO,gBAAgB,MACvB,EAAO,kBAAkB,MACzB,MAAY,cAAc,EAAe,UACzC,GACA,EACD;EACD,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAZN,CAcG,GACA,EACO;;EAGf,EAkCY,IAAe,GAExB,EACE,WAAQ,UACR,YACA,aACA,cACA,kBAAkB,GAClB,mBAAmB,GACnB,8BAA2B,IAC3B,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAW,QAAc,EAAM,SAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC,EAEtE,IAAe,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAQ,EAE5F,IAAY,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAK,EAEtF,IAAY,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAK,EAEtF,IAAa,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAM,EAExF,IAAmB,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAY;AAE1G,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EAAK,GAAkB,EAAO,gBAAgB,EAAO,yBAAyB,MAAU,EAAU;EAC7G,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAJN;GAMG,EAAM,eAAe,EAAW,IAAI,CAAC,KACpC,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAA8C,EAAE,CAAC;IACjE,CAAA;GAGP,CAAC,KAAc,EAAM,eAAe,EAAiB,IAAI,CAAC,KACzD,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAe;IAAuB,CAAA;GAG9D,CAAC,KAAc,CAAC,KAAoB,KACnC,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD,EAAoB,CAAA,EAChB,CAAA;GAGP,EAAM,eAA6B,EAAa,IAC/C,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAAkD;KAEpE,IAAI,EAAa,MAAM,MAAM;KAC7B,MAAM,EAAa,MAAM,QAAQ;KACjC,QAAQ,EAAa,MAAM;KAC3B,WAAW,EAAK,EAAa,MAAM,WAAW,EAAO,wBAAwB;KAC9E,CAAC;IACE,CAAA;GAGP,EAAM,eAA0B,EAAU,IACzC,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAA4C;KAC9D,SAAS;KACT,IAAI;KACJ,WAAW,EAAK,EAAO,aAAa,EAAU,MAAM,UAAU;KAC/D,CAAC;IACE,CAAA;GAEP,EAAM,eAA0B,EAAU,IACzC,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAA4C;KAC9D,MAAM;KACN,SAAS,EAAU,MAAM,WAAW;KACrC,CAAC;IACE,CAAA;GAEP,KACC,kBAAC,OAAD;IACE,WAAW,EACT,EAAO,0BACP,KAA4B,EAAO,qCACpC;cAED,kBAAC,GAAD,EAAqB,CAAA;IACjB,CAAA;GAEJ;;EAGX,EA6BY,IAAS,GAElB,EACE,eAAY,IACZ,aACA,cACA,eAAY,IACZ,aAAU,IACV,yBACA,GAAG,KAEL,MAGE,kBAAC,OAAD;CACO;CACL,WAAW,EACT,EAAO,eACP,KAAa,EAAO,8BACpB,KAAa,EAAO,8BACpB,KAAW,EAAO,2BAClB,MAAyB,YAAY,EAAO,kCAC5C,EACD;CACD,GAAI;CAEH;CACG,CAAA,CAGX,EAKY,IAAQ,OAAO,OAAO,GAAM;CAAC;CAAQ,SAAS;CAAa,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"RiverAccordion.d.ts","sourceRoot":"","sources":["../../../src/river/RiverAccordion/RiverAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiG,MAAM,OAAO,CAAA;AAIrH,OAAO,EAAU,KAAK,YAAY,EAAa,MAAM,OAAO,CAAA;AAI5D;;GAEG;AACH,OAAO,6FAA6F,CAAA;AAoCpG,eAAO,MAAM,sBAAsB,kCAAmC,CAAA;AACtE,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3E,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACxD,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACvB,OAAO,CAAC,EAAE,qBAAqB,CAAA;CAChC,CAAC,GACA,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAiEtC,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAC3E,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,GAAG,0BAA0B,CAAC,EAAE,CAAA;IACvF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAwED,MAAM,MAAM,0BAA0B,GAAG,YAAY,CAAA;AA+BrD,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAiC7E,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAgB5E;;;GAGG;AACH,eAAO,MAAM,cAAc;YAnOjB,OAAO,GAAG,KAAK;cACb,qBAAqB;;;;iDA+K+B,0BAA0B;2DA/BH,0BAA0B;qDAxE7C,uBAAuB;sCAwItC,yBAAyB;CAuB5E,CAAA"}
+{"version":3,"file":"RiverAccordion.d.ts","sourceRoot":"","sources":["../../../src/river/RiverAccordion/RiverAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiG,MAAM,OAAO,CAAA;AAIrH,OAAO,EAAU,KAAK,YAAY,EAAa,MAAM,OAAO,CAAA;AAI5D;;GAEG;AACH,OAAO,6FAA6F,CAAA;AAsCpG,eAAO,MAAM,sBAAsB,kCAAmC,CAAA;AACtE,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3E,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACxD,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACvB,OAAO,CAAC,EAAE,qBAAqB,CAAA;CAChC,CAAC,GACA,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAmEtC,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAC3E,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,GAAG,0BAA0B,CAAC,EAAE,CAAA;IACvF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAwED,MAAM,MAAM,0BAA0B,GAAG,YAAY,CAAA;AA+BrD,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAiC7E,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AA2B5E;;;GAGG;AACH,eAAO,MAAM,cAAc;YAhPjB,OAAO,GAAG,KAAK;cACb,qBAAqB;;;;iDAiL+B,0BAA0B;2DA/BH,0BAA0B;qDAxE7C,uBAAuB;sCAwItC,yBAAyB;CAkC5E,CAAA"}

package/esm/river/RiverAccordion/RiverAccordion.js

@@ -6,137 +6,146 @@ import { Heading as i } from "../../Heading/Heading.js";
 import { ChevronDownIcon as a, ChevronUpIcon as o } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
 import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-QteO10lt.css';/* empty css                                                                                          */
 import s from "./RiverAccordion.module.js";
-import { Link as c } from "../../Link/Link.js";
-import l, { createContext as u, forwardRef as d, useCallback as f, useContext as p, useEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import c from "../../component-helpers/shared.module.js";
+import { Link as l } from "../../Link/Link.js";
+import u, { createContext as d, forwardRef as f, useCallback as p, useContext as m, useEffect as h, useMemo as g, useRef as _, useState as v } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
 //#region src/river/RiverAccordion/RiverAccordion.tsx
-var b = u(null), x = () => {
-	let e = p(b);
+var x = d(null), S = () => {
+	let e = m(x);
 	if (e === null) throw Error("useRiverAccordionContext must be used within a RiverAccordion component");
 	return e;
-}, S = u(null), C = () => {
-	let e = p(S);
+}, C = d(null), w = () => {
+	let e = m(C);
 	if (e === null) throw Error("useRiverAccordionItemContext must be used within a RiverAccordion component");
 	return e;
-}, w = ["default", "gridline"], T = d(({ align: t = "start", variant: r = "default", children: i, className: a, ...o }, c) => {
-	let u = n(c), [d, f] = _(0), p = h(() => l.Children.toArray(i).reduce((e, t) => {
-		if (!j(t)) return e;
-		let n = l.Children.toArray(t.props.children).find(P);
+}, T = ["default", "gridline"], E = f(({ align: t = "start", variant: r = "default", children: i, className: a, ...o }, l) => {
+	let d = n(l), [f, p] = v(0), m = g(() => u.Children.toArray(i).reduce((e, t) => {
+		if (!M(t)) return e;
+		let n = u.Children.toArray(t.props.children).find(F);
 		return n && (e.items.push(t), e.visuals.push(n)), e;
 	}, {
 		items: [],
 		visuals: []
-	}), [i]), m = p.items.map((e, t) => l.cloneElement(e, {
+	}), [i]), h = m.items.map((e, t) => u.cloneElement(e, {
 		key: t,
 		index: t
-	})), g = p.visuals.map((e, t) => l.cloneElement(e, {
+	})), _ = m.visuals.map((e, t) => u.cloneElement(e, {
 		key: t,
 		"aria-hidden": !0
-	})), x = h(() => ({
-		openIndex: d,
-		setOpenIndex: f
-	}), [d, f]);
-	return /* @__PURE__ */ v(b.Provider, {
-		value: x,
-		children: /* @__PURE__ */ y("div", {
-			ref: u,
-			className: e(s.RiverAccordion, s[`RiverAccordion__align-${t}`], s[`RiverAccordion--variant-${r}`], a),
+	})), S = g(() => ({
+		openIndex: f,
+		setOpenIndex: p,
+		variant: r
+	}), [
+		f,
+		p,
+		r
+	]);
+	return /* @__PURE__ */ y(x.Provider, {
+		value: S,
+		children: /* @__PURE__ */ b("div", {
+			ref: d,
+			className: e(s.RiverAccordion, s[`RiverAccordion__align-${t}`], s[`RiverAccordion--variant-${r}`], r === "gridline" && c.gridline, a),
 			...o,
-			children: [/* @__PURE__ */ v("div", {
+			children: [/* @__PURE__ */ y("div", {
 				className: s.RiverAccordion__accordionContainer,
-				children: m
-			}), /* @__PURE__ */ v("div", {
+				children: h
+			}), /* @__PURE__ */ y("div", {
 				className: s.RiverAccordion__visualsContainer,
-				children: /* @__PURE__ */ v("div", {
+				children: /* @__PURE__ */ y("div", {
 					className: s.RiverAccordion__visualsWrapper,
-					children: g
+					children: _
 				})
 			})]
 		})
 	});
-}), E = ({ className: n, index: r, children: i, ...a }) => {
-	let { openIndex: o } = x(), c = t(), u = r === o, d = g(null);
-	m(() => {
-		d.current && d.current.toggleAttribute("inert", !u);
-	}, [u]);
-	let f = h(() => ({
+}), D = ({ className: n, index: r, children: i, ...a }) => {
+	let { openIndex: o } = S(), c = t(), l = r === o, d = _(null);
+	h(() => {
+		d.current && d.current.toggleAttribute("inert", !l);
+	}, [l]);
+	let f = g(() => ({
 		id: c,
 		index: r,
-		isOpen: u
+		isOpen: l
 	}), [
 		c,
 		r,
-		u
-	]), { heading: p, content: _, visual: b } = h(() => l.Children.toArray(i).reduce((e, t) => (N(t) && (e.heading = t), M(t) && (e.content = t), P(t) && (e.visual = t), e), {
+		l
+	]), { heading: p, content: m, visual: v } = g(() => u.Children.toArray(i).reduce((e, t) => (P(t) && (e.heading = t), N(t) && (e.content = t), F(t) && (e.visual = t), e), {
 		heading: null,
 		content: null,
 		visual: null
 	}), [i]);
-	return !p || !_ || !b ? null : /* @__PURE__ */ v(S.Provider, {
+	return !p || !m || !v ? null : /* @__PURE__ */ y(C.Provider, {
 		value: f,
-		children: /* @__PURE__ */ y("div", {
-			className: e(s.RiverAccordion__item, u && s["RiverAccordion__item--open"], n),
+		children: /* @__PURE__ */ b("div", {
+			className: e(s.RiverAccordion__item, l && s["RiverAccordion__item--open"], n),
 			...a,
-			children: [p, /* @__PURE__ */ y("div", {
+			children: [p, /* @__PURE__ */ b("div", {
 				ref: d,
 				className: s.RiverAccordion__panel,
 				id: c,
-				"aria-hidden": !u,
-				children: [_, b]
+				"aria-hidden": !l,
+				children: [m, v]
 			})]
 		})
 	});
-}, D = ({ as: t = "h3", children: n, className: r, size: c = "6", ...l }) => {
-	let { setOpenIndex: u } = x(), { id: d, index: p, isOpen: m } = C(), h = f(() => {
-		m || u(p);
+}, O = ({ as: t = "h3", children: n, className: r, size: c = "6", ...l }) => {
+	let { setOpenIndex: u } = S(), { id: d, index: f, isOpen: m } = w(), h = p(() => {
+		m || u(f);
 	}, [
-		p,
+		f,
 		m,
 		u
 	]);
-	return /* @__PURE__ */ v(i, {
+	return /* @__PURE__ */ y(i, {
 		size: c,
 		as: t,
 		className: e(s.RiverAccordion__heading, r),
 		...l,
-		children: /* @__PURE__ */ y("button", {
+		children: /* @__PURE__ */ b("button", {
 			type: "button",
 			className: s.RiverAccordion__trigger,
 			onClick: h,
 			"aria-disabled": m,
 			"aria-controls": d,
 			"aria-expanded": m,
-			children: [n, /* @__PURE__ */ v("span", {
+			children: [n, /* @__PURE__ */ y("span", {
 				"aria-hidden": "true",
 				className: s.RiverAccordion__icon,
-				children: v(m ? o : a, { size: 24 })
+				children: y(m ? o : a, { size: 24 })
 			})]
 		})
 	});
-}, O = ({ className: t, children: n, ...i }) => {
-	let a = h(() => {
-		let e = A(c), t = A(r);
-		return l.Children.toArray(n).map((n) => t(n) ? l.cloneElement(n, {
+}, k = ({ className: t, children: n, ...i }) => {
+	let a = g(() => {
+		let e = j(l), t = j(r);
+		return u.Children.toArray(n).map((n) => t(n) ? u.cloneElement(n, {
 			as: n.props.as ?? "p",
 			variant: n.props.variant ?? "muted",
 			size: n.props.size ?? "300"
-		}) : e(n) ? l.cloneElement(n, { variant: n.props.variant ?? "accent" }) : n);
+		}) : e(n) ? u.cloneElement(n, { variant: n.props.variant ?? "accent" }) : n);
 	}, [n]);
-	return /* @__PURE__ */ v("div", {
+	return /* @__PURE__ */ y("div", {
 		className: e(s.RiverAccordion__content, t),
 		...i,
 		children: a
 	});
-}, k = ({ className: t, ...n }) => /* @__PURE__ */ v("div", {
-	className: e(s.RiverAccordion__visual, t),
-	...n
-}), A = (e) => (t) => l.isValidElement(t) && t.type === e, j = A(E), M = A(O), N = A(D), P = A(k), F = Object.assign(T, {
-	Content: O,
-	Heading: D,
-	Item: E,
-	Visual: k
+}, A = ({ className: t, ...n }) => {
+	let { variant: r } = S();
+	return /* @__PURE__ */ y("div", {
+		className: e(s.RiverAccordion__visual, r === "gridline" && s["RiverAccordion__visual--has-background"], t),
+		...n
+	});
+}, j = (e) => (t) => u.isValidElement(t) && t.type === e, M = j(D), N = j(k), P = j(O), F = j(A), I = Object.assign(E, {
+	Content: k,
+	Heading: O,
+	Item: D,
+	Visual: A
 });
 //#endregion
-export { F as RiverAccordion, w as RiverAccordionVariants };
+export { I as RiverAccordion, T as RiverAccordionVariants };
 
 //# sourceMappingURL=RiverAccordion.js.map

package/esm/river/RiverAccordion/RiverAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"RiverAccordion.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.tsx"],"sourcesContent":["import React, {createContext, forwardRef, useCallback, useContext, useMemo, useState, useRef, useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {ChevronDownIcon, ChevronUpIcon} from '@primer/octicons-react'\n\nimport {Heading, type HeadingProps, Link, Text} from '../..'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\nimport {useId} from '../../hooks/useId'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/** Main Stylesheet (as a CSS Module) */\nimport styles from './RiverAccordion.module.css'\n\ntype RiverAccordionContextType = {\n  openIndex: number\n  setOpenIndex: (index: number) => void\n}\n\nconst RiverAccordionContext = createContext<RiverAccordionContextType | null>(null)\n\nconst useRiverAccordionContext = (): RiverAccordionContextType => {\n  const context = useContext(RiverAccordionContext)\n  if (context === null) {\n    throw new Error('useRiverAccordionContext must be used within a RiverAccordion component')\n  }\n  return context\n}\n\ntype RiverAccordionItemContextType = {\n  index: number\n  isOpen: boolean\n  id: string\n}\n\nconst RiverAccordionItemContext = createContext<RiverAccordionItemContextType | null>(null)\n\nconst useRiverAccordionItemContext = (): RiverAccordionItemContextType => {\n  const context = useContext(RiverAccordionItemContext)\n  if (context === null) {\n    throw new Error('useRiverAccordionItemContext must be used within a RiverAccordion component')\n  }\n  return context\n}\n\nexport const RiverAccordionVariants = ['default', 'gridline'] as const\nexport type RiverAccordionVariant = (typeof RiverAccordionVariants)[number]\n\nexport type RiverAccordionProps = React.PropsWithChildren<{\n  align?: 'start' | 'end'\n  variant?: RiverAccordionVariant\n}> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionRoot = forwardRef<HTMLDivElement, RiverAccordionProps>(\n  ({align = 'start', variant = 'default', children, className, ...rest}, forwardedRef) => {\n    const containerRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)\n    const [openIndex, setOpenIndex] = useState(0)\n\n    const accordionComponents = useMemo(() => {\n      return React.Children.toArray(children).reduce<{\n        items: React.ReactElement<RiverAccordionItemProps>[]\n        visuals: React.ReactElement<RiverAccordionVisualProps>[]\n      }>(\n        (acc, child) => {\n          if (!isRiverAccordionItem(child)) {\n            return acc\n          }\n\n          const visualChild = React.Children.toArray(child.props.children).find(isRiverAccordionVisual)\n\n          if (visualChild) {\n            acc.items.push(child)\n            acc.visuals.push(visualChild)\n          }\n\n          return acc\n        },\n        {items: [], visuals: []},\n      )\n    }, [children])\n\n    const items = accordionComponents.items.map((item, index) => React.cloneElement(item, {key: index, index}))\n    const visuals = accordionComponents.visuals.map((visual, index) =>\n      React.cloneElement(visual, {key: index, 'aria-hidden': true}),\n    )\n\n    const contextValue = useMemo(\n      () => ({\n        openIndex,\n        setOpenIndex,\n      }),\n      [openIndex, setOpenIndex],\n    )\n\n    return (\n      <RiverAccordionContext.Provider value={contextValue}>\n        <div\n          ref={containerRef}\n          className={clsx(\n            styles.RiverAccordion,\n            styles[`RiverAccordion__align-${align}`],\n            styles[`RiverAccordion--variant-${variant}`],\n            className,\n          )}\n          {...rest}\n        >\n          <div className={styles.RiverAccordion__accordionContainer}>{items}</div>\n          <div className={styles.RiverAccordion__visualsContainer}>\n            <div className={styles.RiverAccordion__visualsWrapper}>{visuals}</div>\n          </div>\n        </div>\n      </RiverAccordionContext.Provider>\n    )\n  },\n)\n\nexport type RiverAccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {\n  children: React.ReactElement<RiverAccordionHeadingProps | RiverAccordionContentProps>[]\n  index?: number\n}\n\nconst RiverAccordionItem = ({className, index, children, ...props}: RiverAccordionItemProps) => {\n  const {openIndex} = useRiverAccordionContext()\n  const panelId = useId()\n  const isOpen = index === openIndex\n  const panelRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (panelRef.current) {\n      // Workaround to avoid React 18 / 19 type mismatches with the `inert` attribute.\n      // This approach won't immediately apply the attribute in pure SSR contexts, only post-hydration\n      // TODO: Move back to JSX when React 19 is fully adopted in Dotcom.\n      panelRef.current.toggleAttribute('inert', !isOpen)\n    }\n  }, [isOpen])\n\n  const itemContextValue = useMemo(\n    () => ({\n      id: panelId,\n      // Index optional for consumers, but always provided by parent\n      index: index as number,\n      isOpen,\n    }),\n    [panelId, index, isOpen],\n  )\n\n  const {heading, content, visual} = useMemo(() => {\n    return React.Children.toArray(children).reduce<{\n      heading: React.ReactElement<RiverAccordionHeadingProps> | null\n      content: React.ReactElement<RiverAccordionContentProps> | null\n      visual: React.ReactElement<RiverAccordionVisualProps> | null\n    }>(\n      (acc, child) => {\n        if (isRiverAccordionHeading(child)) {\n          acc.heading = child\n        }\n\n        if (isRiverAccordionContent(child)) {\n          acc.content = child\n        }\n\n        if (isRiverAccordionVisual(child)) {\n          acc.visual = child\n        }\n\n        return acc\n      },\n      {heading: null, content: null, visual: null},\n    )\n  }, [children])\n\n  if (!heading || !content || !visual) {\n    return null\n  }\n\n  return (\n    <RiverAccordionItemContext.Provider value={itemContextValue}>\n      <div\n        className={clsx(styles.RiverAccordion__item, isOpen && styles['RiverAccordion__item--open'], className)}\n        {...props}\n      >\n        {heading}\n        <div ref={panelRef} className={styles.RiverAccordion__panel} id={panelId} aria-hidden={!isOpen}>\n          {content}\n          {visual}\n        </div>\n      </div>\n    </RiverAccordionItemContext.Provider>\n  )\n}\n\nexport type RiverAccordionHeadingProps = HeadingProps\n\nconst RiverAccordionHeading = ({as = 'h3', children, className, size = '6', ...props}: RiverAccordionHeadingProps) => {\n  const {setOpenIndex} = useRiverAccordionContext()\n  const {id, index, isOpen} = useRiverAccordionItemContext()\n\n  const onClick = useCallback(() => {\n    if (!isOpen) {\n      setOpenIndex(index)\n    }\n  }, [index, isOpen, setOpenIndex])\n\n  return (\n    <Heading size={size} as={as} className={clsx(styles.RiverAccordion__heading, className)} {...props}>\n      <button\n        type=\"button\"\n        className={styles.RiverAccordion__trigger}\n        onClick={onClick}\n        aria-disabled={isOpen}\n        aria-controls={id}\n        aria-expanded={isOpen}\n      >\n        {children}\n        <span aria-hidden=\"true\" className={styles.RiverAccordion__icon}>\n          {isOpen ? <ChevronUpIcon size={24} /> : <ChevronDownIcon size={24} />}\n        </span>\n      </button>\n    </Heading>\n  )\n}\n\nexport type RiverAccordionContentProps = React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionContent = ({className, children, ...props}: RiverAccordionContentProps) => {\n  const childrenWithStyledText = useMemo(() => {\n    const isLink = createComponentTypeGuard(Link)\n    const isText = createComponentTypeGuard(Text)\n\n    return React.Children.toArray(children).map(child => {\n      if (isText(child)) {\n        return React.cloneElement(child, {\n          as: child.props.as ?? 'p',\n          variant: child.props.variant ?? 'muted',\n          size: child.props.size ?? '300',\n        })\n      }\n\n      if (isLink(child)) {\n        return React.cloneElement(child, {\n          variant: child.props.variant ?? 'accent',\n        })\n      }\n\n      return child\n    })\n  }, [children])\n\n  return (\n    <div className={clsx(styles.RiverAccordion__content, className)} {...props}>\n      {childrenWithStyledText}\n    </div>\n  )\n}\n\nexport type RiverAccordionVisualProps = React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionVisual = ({className, ...props}: RiverAccordionVisualProps) => {\n  return <div className={clsx(styles.RiverAccordion__visual, className)} {...props} />\n}\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement(element) && element.type === componentType\n\nconst isRiverAccordionItem = createComponentTypeGuard(RiverAccordionItem)\nconst isRiverAccordionContent = createComponentTypeGuard(RiverAccordionContent)\nconst isRiverAccordionHeading = createComponentTypeGuard(RiverAccordionHeading)\nconst isRiverAccordionVisual = createComponentTypeGuard(RiverAccordionVisual)\n\n/**\n * Use the RiverAccordion to create collapsible content panels with associated visuals.\n * @see https://primer.style/brand/components/RiverAccordion\n */\nexport const RiverAccordion = Object.assign(RiverAccordionRoot, {\n  Content: RiverAccordionContent,\n  Heading: RiverAccordionHeading,\n  Item: RiverAccordionItem,\n  Visual: RiverAccordionVisual,\n})\n"],"mappings":"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"}
+{"version":3,"file":"RiverAccordion.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.tsx"],"sourcesContent":["import React, {createContext, forwardRef, useCallback, useContext, useMemo, useState, useRef, useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {ChevronDownIcon, ChevronUpIcon} from '@primer/octicons-react'\n\nimport {Heading, type HeadingProps, Link, Text} from '../..'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\nimport {useId} from '../../hooks/useId'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/** Main Stylesheet (as a CSS Module) */\nimport styles from './RiverAccordion.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\ntype RiverAccordionContextType = {\n  openIndex: number\n  setOpenIndex: (index: number) => void\n  variant: RiverAccordionVariant\n}\n\nconst RiverAccordionContext = createContext<RiverAccordionContextType | null>(null)\n\nconst useRiverAccordionContext = (): RiverAccordionContextType => {\n  const context = useContext(RiverAccordionContext)\n  if (context === null) {\n    throw new Error('useRiverAccordionContext must be used within a RiverAccordion component')\n  }\n  return context\n}\n\ntype RiverAccordionItemContextType = {\n  index: number\n  isOpen: boolean\n  id: string\n}\n\nconst RiverAccordionItemContext = createContext<RiverAccordionItemContextType | null>(null)\n\nconst useRiverAccordionItemContext = (): RiverAccordionItemContextType => {\n  const context = useContext(RiverAccordionItemContext)\n  if (context === null) {\n    throw new Error('useRiverAccordionItemContext must be used within a RiverAccordion component')\n  }\n  return context\n}\n\nexport const RiverAccordionVariants = ['default', 'gridline'] as const\nexport type RiverAccordionVariant = (typeof RiverAccordionVariants)[number]\n\nexport type RiverAccordionProps = React.PropsWithChildren<{\n  align?: 'start' | 'end'\n  variant?: RiverAccordionVariant\n}> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionRoot = forwardRef<HTMLDivElement, RiverAccordionProps>(\n  ({align = 'start', variant = 'default', children, className, ...rest}, forwardedRef) => {\n    const containerRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)\n    const [openIndex, setOpenIndex] = useState(0)\n\n    const accordionComponents = useMemo(() => {\n      return React.Children.toArray(children).reduce<{\n        items: React.ReactElement<RiverAccordionItemProps>[]\n        visuals: React.ReactElement<RiverAccordionVisualProps>[]\n      }>(\n        (acc, child) => {\n          if (!isRiverAccordionItem(child)) {\n            return acc\n          }\n\n          const visualChild = React.Children.toArray(child.props.children).find(isRiverAccordionVisual)\n\n          if (visualChild) {\n            acc.items.push(child)\n            acc.visuals.push(visualChild)\n          }\n\n          return acc\n        },\n        {items: [], visuals: []},\n      )\n    }, [children])\n\n    const items = accordionComponents.items.map((item, index) => React.cloneElement(item, {key: index, index}))\n    const visuals = accordionComponents.visuals.map((visual, index) =>\n      React.cloneElement(visual, {key: index, 'aria-hidden': true}),\n    )\n\n    const contextValue = useMemo(\n      () => ({\n        openIndex,\n        setOpenIndex,\n        variant,\n      }),\n      [openIndex, setOpenIndex, variant],\n    )\n\n    return (\n      <RiverAccordionContext.Provider value={contextValue}>\n        <div\n          ref={containerRef}\n          className={clsx(\n            styles.RiverAccordion,\n            styles[`RiverAccordion__align-${align}`],\n            styles[`RiverAccordion--variant-${variant}`],\n            variant === 'gridline' && gridlineStyles.gridline,\n            className,\n          )}\n          {...rest}\n        >\n          <div className={styles.RiverAccordion__accordionContainer}>{items}</div>\n          <div className={styles.RiverAccordion__visualsContainer}>\n            <div className={styles.RiverAccordion__visualsWrapper}>{visuals}</div>\n          </div>\n        </div>\n      </RiverAccordionContext.Provider>\n    )\n  },\n)\n\nexport type RiverAccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {\n  children: React.ReactElement<RiverAccordionHeadingProps | RiverAccordionContentProps>[]\n  index?: number\n}\n\nconst RiverAccordionItem = ({className, index, children, ...props}: RiverAccordionItemProps) => {\n  const {openIndex} = useRiverAccordionContext()\n  const panelId = useId()\n  const isOpen = index === openIndex\n  const panelRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (panelRef.current) {\n      // Workaround to avoid React 18 / 19 type mismatches with the `inert` attribute.\n      // This approach won't immediately apply the attribute in pure SSR contexts, only post-hydration\n      // TODO: Move back to JSX when React 19 is fully adopted in Dotcom.\n      panelRef.current.toggleAttribute('inert', !isOpen)\n    }\n  }, [isOpen])\n\n  const itemContextValue = useMemo(\n    () => ({\n      id: panelId,\n      // Index optional for consumers, but always provided by parent\n      index: index as number,\n      isOpen,\n    }),\n    [panelId, index, isOpen],\n  )\n\n  const {heading, content, visual} = useMemo(() => {\n    return React.Children.toArray(children).reduce<{\n      heading: React.ReactElement<RiverAccordionHeadingProps> | null\n      content: React.ReactElement<RiverAccordionContentProps> | null\n      visual: React.ReactElement<RiverAccordionVisualProps> | null\n    }>(\n      (acc, child) => {\n        if (isRiverAccordionHeading(child)) {\n          acc.heading = child\n        }\n\n        if (isRiverAccordionContent(child)) {\n          acc.content = child\n        }\n\n        if (isRiverAccordionVisual(child)) {\n          acc.visual = child\n        }\n\n        return acc\n      },\n      {heading: null, content: null, visual: null},\n    )\n  }, [children])\n\n  if (!heading || !content || !visual) {\n    return null\n  }\n\n  return (\n    <RiverAccordionItemContext.Provider value={itemContextValue}>\n      <div\n        className={clsx(styles.RiverAccordion__item, isOpen && styles['RiverAccordion__item--open'], className)}\n        {...props}\n      >\n        {heading}\n        <div ref={panelRef} className={styles.RiverAccordion__panel} id={panelId} aria-hidden={!isOpen}>\n          {content}\n          {visual}\n        </div>\n      </div>\n    </RiverAccordionItemContext.Provider>\n  )\n}\n\nexport type RiverAccordionHeadingProps = HeadingProps\n\nconst RiverAccordionHeading = ({as = 'h3', children, className, size = '6', ...props}: RiverAccordionHeadingProps) => {\n  const {setOpenIndex} = useRiverAccordionContext()\n  const {id, index, isOpen} = useRiverAccordionItemContext()\n\n  const onClick = useCallback(() => {\n    if (!isOpen) {\n      setOpenIndex(index)\n    }\n  }, [index, isOpen, setOpenIndex])\n\n  return (\n    <Heading size={size} as={as} className={clsx(styles.RiverAccordion__heading, className)} {...props}>\n      <button\n        type=\"button\"\n        className={styles.RiverAccordion__trigger}\n        onClick={onClick}\n        aria-disabled={isOpen}\n        aria-controls={id}\n        aria-expanded={isOpen}\n      >\n        {children}\n        <span aria-hidden=\"true\" className={styles.RiverAccordion__icon}>\n          {isOpen ? <ChevronUpIcon size={24} /> : <ChevronDownIcon size={24} />}\n        </span>\n      </button>\n    </Heading>\n  )\n}\n\nexport type RiverAccordionContentProps = React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionContent = ({className, children, ...props}: RiverAccordionContentProps) => {\n  const childrenWithStyledText = useMemo(() => {\n    const isLink = createComponentTypeGuard(Link)\n    const isText = createComponentTypeGuard(Text)\n\n    return React.Children.toArray(children).map(child => {\n      if (isText(child)) {\n        return React.cloneElement(child, {\n          as: child.props.as ?? 'p',\n          variant: child.props.variant ?? 'muted',\n          size: child.props.size ?? '300',\n        })\n      }\n\n      if (isLink(child)) {\n        return React.cloneElement(child, {\n          variant: child.props.variant ?? 'accent',\n        })\n      }\n\n      return child\n    })\n  }, [children])\n\n  return (\n    <div className={clsx(styles.RiverAccordion__content, className)} {...props}>\n      {childrenWithStyledText}\n    </div>\n  )\n}\n\nexport type RiverAccordionVisualProps = React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionVisual = ({className, ...props}: RiverAccordionVisualProps) => {\n  const {variant} = useRiverAccordionContext()\n\n  return (\n    <div\n      className={clsx(\n        styles.RiverAccordion__visual,\n        variant === 'gridline' && styles['RiverAccordion__visual--has-background'],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement(element) && element.type === componentType\n\nconst isRiverAccordionItem = createComponentTypeGuard(RiverAccordionItem)\nconst isRiverAccordionContent = createComponentTypeGuard(RiverAccordionContent)\nconst isRiverAccordionHeading = createComponentTypeGuard(RiverAccordionHeading)\nconst isRiverAccordionVisual = createComponentTypeGuard(RiverAccordionVisual)\n\n/**\n * Use the RiverAccordion to create collapsible content panels with associated visuals.\n * @see https://primer.style/brand/components/RiverAccordion\n */\nexport const RiverAccordion = Object.assign(RiverAccordionRoot, {\n  Content: RiverAccordionContent,\n  Heading: RiverAccordionHeading,\n  Item: RiverAccordionItem,\n  Visual: RiverAccordionVisual,\n})\n"],"mappings":";;;;;;;;;;;;;AAuBA,IAAM,IAAwB,EAAgD,KAAK,EAE7E,UAA4D;CAChE,IAAM,IAAU,EAAW,EAAsB;AACjD,KAAI,MAAY,KACd,OAAU,MAAM,0EAA0E;AAE5F,QAAO;GASH,IAA4B,EAAoD,KAAK,EAErF,UAAoE;CACxE,IAAM,IAAU,EAAW,EAA0B;AACrD,KAAI,MAAY,KACd,OAAU,MAAM,8EAA8E;AAEhG,QAAO;GAGI,IAAyB,CAAC,WAAW,WAAW,EASvD,IAAqB,GACxB,EAAC,WAAQ,SAAS,aAAU,WAAW,aAAU,cAAW,GAAG,KAAO,MAAiB;CACtF,IAAM,IAAe,EAAuC,EAAgD,EACtG,CAAC,GAAW,KAAgB,EAAS,EAAE,EAEvC,IAAsB,QACnB,EAAM,SAAS,QAAQ,EAAS,CAAC,QAIrC,GAAK,MAAU;AACd,MAAI,CAAC,EAAqB,EAAM,CAC9B,QAAO;EAGT,IAAM,IAAc,EAAM,SAAS,QAAQ,EAAM,MAAM,SAAS,CAAC,KAAK,EAAuB;AAO7F,SALI,MACF,EAAI,MAAM,KAAK,EAAM,EACrB,EAAI,QAAQ,KAAK,EAAY,GAGxB;IAET;EAAC,OAAO,EAAE;EAAE,SAAS,EAAE;EAAC,CACzB,EACA,CAAC,EAAS,CAAC,EAER,IAAQ,EAAoB,MAAM,KAAK,GAAM,MAAU,EAAM,aAAa,GAAM;EAAC,KAAK;EAAO;EAAM,CAAC,CAAC,EACrG,IAAU,EAAoB,QAAQ,KAAK,GAAQ,MACvD,EAAM,aAAa,GAAQ;EAAC,KAAK;EAAO,eAAe;EAAK,CAAC,CAC9D,EAEK,IAAe,SACZ;EACL;EACA;EACA;EACD,GACD;EAAC;EAAW;EAAc;EAAQ,CACnC;AAED,QACE,kBAAC,EAAsB,UAAvB;EAAgC,OAAO;YACrC,kBAAC,OAAD;GACE,KAAK;GACL,WAAW,EACT,EAAO,gBACP,EAAO,yBAAyB,MAChC,EAAO,2BAA2B,MAClC,MAAY,cAAc,EAAe,UACzC,EACD;GACD,GAAI;aATN,CAWE,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAqC;IAAY,CAAA,EACxE,kBAAC,OAAD;IAAK,WAAW,EAAO;cACrB,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAiC;KAAc,CAAA;IAClE,CAAA,CACF;;EACyB,CAAA;EAGtC,EAOK,KAAsB,EAAC,cAAW,UAAO,aAAU,GAAG,QAAoC;CAC9F,IAAM,EAAC,iBAAa,GAA0B,EACxC,IAAU,GAAO,EACjB,IAAS,MAAU,GACnB,IAAW,EAAuB,KAAK;AAE7C,SAAgB;AACd,EAAI,EAAS,WAIX,EAAS,QAAQ,gBAAgB,SAAS,CAAC,EAAO;IAEnD,CAAC,EAAO,CAAC;CAEZ,IAAM,IAAmB,SAChB;EACL,IAAI;EAEG;EACP;EACD,GACD;EAAC;EAAS;EAAO;EAAO,CACzB,EAEK,EAAC,YAAS,YAAS,cAAU,QAC1B,EAAM,SAAS,QAAQ,EAAS,CAAC,QAKrC,GAAK,OACA,EAAwB,EAAM,KAChC,EAAI,UAAU,IAGZ,EAAwB,EAAM,KAChC,EAAI,UAAU,IAGZ,EAAuB,EAAM,KAC/B,EAAI,SAAS,IAGR,IAET;EAAC,SAAS;EAAM,SAAS;EAAM,QAAQ;EAAK,CAC7C,EACA,CAAC,EAAS,CAAC;AAMd,QAJI,CAAC,KAAW,CAAC,KAAW,CAAC,IACpB,OAIP,kBAAC,EAA0B,UAA3B;EAAoC,OAAO;YACzC,kBAAC,OAAD;GACE,WAAW,EAAK,EAAO,sBAAsB,KAAU,EAAO,+BAA+B,EAAU;GACvG,GAAI;aAFN,CAIG,GACD,kBAAC,OAAD;IAAK,KAAK;IAAU,WAAW,EAAO;IAAuB,IAAI;IAAS,eAAa,CAAC;cAAxF,CACG,GACA,EACG;MACF;;EAC6B,CAAA;GAMnC,KAAyB,EAAC,QAAK,MAAM,aAAU,cAAW,UAAO,KAAK,GAAG,QAAuC;CACpH,IAAM,EAAC,oBAAgB,GAA0B,EAC3C,EAAC,OAAI,UAAO,cAAU,GAA8B,EAEpD,IAAU,QAAkB;AAChC,EAAK,KACH,EAAa,EAAM;IAEpB;EAAC;EAAO;EAAQ;EAAa,CAAC;AAEjC,QACE,kBAAC,GAAD;EAAe;EAAU;EAAI,WAAW,EAAK,EAAO,yBAAyB,EAAU;EAAE,GAAI;YAC3F,kBAAC,UAAD;GACE,MAAK;GACL,WAAW,EAAO;GACT;GACT,iBAAe;GACf,iBAAe;GACf,iBAAe;aANjB,CAQG,GACD,kBAAC,QAAD;IAAM,eAAY;IAAO,WAAW,EAAO;cAC/B,EAAT,IAAU,IAA8B,GAA/B,EAAe,MAAM,IAAM,CAAgC;IAChE,CAAA,CACA;;EACD,CAAA;GAMR,KAAyB,EAAC,cAAW,aAAU,GAAG,QAAuC;CAC7F,IAAM,IAAyB,QAAc;EAC3C,IAAM,IAAS,EAAyB,EAAK,EACvC,IAAS,EAAyB,EAAK;AAE7C,SAAO,EAAM,SAAS,QAAQ,EAAS,CAAC,KAAI,MACtC,EAAO,EAAM,GACR,EAAM,aAAa,GAAO;GAC/B,IAAI,EAAM,MAAM,MAAM;GACtB,SAAS,EAAM,MAAM,WAAW;GAChC,MAAM,EAAM,MAAM,QAAQ;GAC3B,CAAC,GAGA,EAAO,EAAM,GACR,EAAM,aAAa,GAAO,EAC/B,SAAS,EAAM,MAAM,WAAW,UACjC,CAAC,GAGG,EACP;IACD,CAAC,EAAS,CAAC;AAEd,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,yBAAyB,EAAU;EAAE,GAAI;YAClE;EACG,CAAA;GAMJ,KAAwB,EAAC,cAAW,GAAG,QAAsC;CACjF,IAAM,EAAC,eAAW,GAA0B;AAE5C,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,wBACP,MAAY,cAAc,EAAO,2CACjC,EACD;EACD,GAAI;EACJ,CAAA;GAIA,KACC,OACJ,MACC,EAAM,eAAe,EAAQ,IAAI,EAAQ,SAAS,GAEhD,IAAuB,EAAyB,EAAmB,EACnE,IAA0B,EAAyB,EAAsB,EACzE,IAA0B,EAAyB,EAAsB,EACzE,IAAyB,EAAyB,EAAqB,EAMhE,IAAiB,OAAO,OAAO,GAAoB;CAC9D,SAAS;CACT,SAAS;CACT,MAAM;CACN,QAAQ;CACT,CAAC"}

package/esm/river/RiverAccordion/RiverAccordion.module-nlZZH3O7.css

@@ -0,0 +1 @@
+.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB{grid-gap:0;grid-template:"visual""accordion"/1fr;gap:0;display:grid;position:relative}@media (width>=48rem){.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB{--gap-width:var(--brand-Grid-spacing-column-gap);--column-and-gap-width:calc((100% + var(--gap-width)) / 12);--4-grid-columns:calc(4 * var(--column-and-gap-width));--7-grid-columns-minus-last-gap:calc((7 * var(--column-and-gap-width)) - var(--gap-width));gap:var(--column-and-gap-width);grid-template-rows:auto}.Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3{grid-template-columns:var(--4-grid-columns) var(--7-grid-columns-minus-last-gap);grid-template-areas:"accordion visual"}.Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ{grid-template-columns:var(--7-grid-columns-minus-last-gap) var(--4-grid-columns);grid-template-areas:"visual accordion"}}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{padding-inline:var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);padding-block:var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);position:relative}@media (width>=48rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{--gap-width:var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);--half-column:calc(50% - var(--gap-width) / 2);gap:var(--gap-width);align-items:center}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3{grid-template-columns:var(--half-column) var(--half-column);grid-template-areas:"accordion visual"}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ{grid-template-columns:var(--half-column) var(--half-column);grid-template-areas:"visual accordion"}}@media (width>=80rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6{border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx{margin-inline:calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerInline));margin-block-start:calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock))}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB){border-radius:0}.Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{grid-area:accordion}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx{grid-area:visual}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6{border-radius:var(--brand-borderRadius-xlarge);grid-template-columns:subgrid;grid-template-rows:subgrid;width:100%;display:grid;overflow:hidden}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob{opacity:0;width:100%;height:100%;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), scale var(--brand-animation-duration-default) var(--brand-animation-easing-default);grid-area:1/1;align-items:center;display:flex;scale:1.05}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>*{border-radius:var(--brand-borderRadius-xlarge);-o-object-fit:contain;object-fit:contain;width:100%;height:auto;display:block;overflow:hidden}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>*{border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob img,.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob picture,.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob video{border-radius:inherit;-o-object-fit:contain;object-fit:contain;width:100%;height:auto;display:block}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>* img,.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>* video{border-radius:inherit;-o-object-fit:cover;object-fit:cover;width:100%;height:100%;display:block}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB{padding:var(--base-size-32);background:var(--brand-RiverAccordion-visual-background,var(--brand-color-canvas-subtle));justify-content:center;align-items:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB>*{border-radius:var(--brand-borderRadius-large);justify-content:center;align-items:center;max-width:100%;height:auto;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB img,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB picture,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB video{border-radius:var(--brand-borderRadius-large);max-width:100%;height:100%}@media (width>=48rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB){grid-template-columns:1fr 1fr;align-items:stretch;gap:0;padding:0}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{padding:var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock) var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);flex-direction:column;justify-content:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{padding-inline-end:var(--brand-RiverAccordion-variant-gridline-spacing-contentGap)}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{padding-inline-start:var(--brand-RiverAccordion-variant-gridline-spacing-contentGap)}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx{margin:0}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB){height:100%}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB{padding:var(--base-size-64);justify-content:center;align-items:center}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB>*,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB img,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB picture,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB video{border-radius:var(--brand-borderRadius-large)}}:is(.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:first-child) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:first-child,.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(2)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(2),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(3)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(3),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(4)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(4),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(5)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(5),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(6)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(6),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(7)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(7),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(8)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(8),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(9)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(9),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(10)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(10),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:not(:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:first-child){opacity:1;z-index:1;scale:1}.Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob{clip:rect(0, 0, 0, 0);word-wrap:normal;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block-start:var(--base-size-32);position:relative}.Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX:not(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2) .Primer_Brand__RiverAccordion-module__RiverAccordion__heading___O56M6{color:var(--brand-color-text-muted)}.Primer_Brand__RiverAccordion-module__RiverAccordion__trigger___1RM50{color:inherit;cursor:pointer;font:inherit;text-align:left;width:100%;padding:0;padding:var(--base-size-4);margin:0;margin:calc(var(--base-size-4) * -1);background:0 0;border:none;justify-content:space-between;align-items:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2 .Primer_Brand__RiverAccordion-module__RiverAccordion__trigger___1RM50{cursor:auto;cursor:initial}.Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX:not(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2) .Primer_Brand__RiverAccordion-module__RiverAccordion__trigger___1RM50:after{content:"";width:100%;height:100%;display:block;position:absolute}.Primer_Brand__RiverAccordion-module__RiverAccordion__panel___Y4GUN{transition:grid-template-rows var(--brand-animation-duration-default) var(--brand-animation-easing-default), margin-block-start var(--brand-animation-duration-default) var(--brand-animation-easing-default), padding-block-end var(--brand-animation-duration-default) var(--brand-animation-easing-default);grid-template-rows:0fr;margin-block-start:var(--base-size-32);display:grid;overflow-y:clip}.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2 .Primer_Brand__RiverAccordion-module__RiverAccordion__panel___Y4GUN{grid-template-rows:1fr;margin-block-start:var(--base-size-12);padding-block-end:var(--base-size-32)}.Primer_Brand__RiverAccordion-module__RiverAccordion__content___87sh8{align-items:flex-start;gap:var(--base-size-20);flex-direction:column;min-height:0;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion__icon___FMAZH{color:var(--brand-color-text-muted);flex-shrink:0;align-items:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2 .Primer_Brand__RiverAccordion-module__RiverAccordion__icon___FMAZH{color:var(--brand-color-text-default)}

package/esm/river/RiverAccordion/RiverAccordion.module.js

@@ -1,11 +1,12 @@
-import './RiverAccordion.module-DrtqdEOQ.css';var e = {
+import './RiverAccordion.module-nlZZH3O7.css';var e = {
 	RiverAccordion: "Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB",
 	"RiverAccordion__align-start": "Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3",
 	"RiverAccordion__align-end": "Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ",
 	"RiverAccordion--variant-gridline": "Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4",
 	RiverAccordion__visualsWrapper: "Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6",
-	RiverAccordion__accordionContainer: "Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds",
+	"RiverAccordion__visual--has-background": "Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB",
 	RiverAccordion__visualsContainer: "Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx",
+	RiverAccordion__accordionContainer: "Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds",
 	RiverAccordion__visual: "Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob",
 	"RiverAccordion__item--open": "Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2",
 	RiverAccordion__item: "Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX",

package/esm/river/RiverAccordion/RiverAccordion.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"RiverAccordion.module.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.module.css"],"sourcesContent":[".RiverAccordion {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: auto auto;\n  grid-template-areas:\n    'visual'\n    'accordion';\n  gap: 0;\n  position: relative;\n}\n\n@media (min-width: 48rem) {\n  .RiverAccordion {\n    --gap-width: var(--brand-Grid-spacing-column-gap);\n    --column-and-gap-width: calc((100% + var(--gap-width)) / 12);\n\n    --4-grid-columns: calc(4 * var(--column-and-gap-width));\n    --7-grid-columns-minus-last-gap: calc((7 * var(--column-and-gap-width)) - var(--gap-width));\n\n    grid-template-rows: auto;\n    gap: var(--column-and-gap-width);\n  }\n\n  .RiverAccordion__align-start {\n    grid-template-columns: var(--4-grid-columns) var(--7-grid-columns-minus-last-gap);\n    grid-template-areas: 'accordion visual';\n  }\n\n  .RiverAccordion__align-end {\n    grid-template-columns: var(--7-grid-columns-minus-last-gap) var(--4-grid-columns);\n    grid-template-areas: 'visual accordion';\n  }\n}\n\n/* Gridline variant */\n\n.RiverAccordion--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n  padding-block: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);\n}\n\n.RiverAccordion--variant-gridline::before,\n.RiverAccordion--variant-gridline::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 100vw;\n  height: 0;\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  z-index: 1;\n}\n\n.RiverAccordion--variant-gridline::before {\n  top: 0;\n}\n\n.RiverAccordion--variant-gridline::after {\n  bottom: 0;\n}\n\n@media (min-width: 48rem) {\n  .RiverAccordion--variant-gridline {\n    --gap-width: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n    --half-column: calc(50% - var(--gap-width) / 2);\n\n    gap: var(--gap-width);\n    align-items: center;\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-start {\n    grid-template-columns: var(--half-column) var(--half-column);\n    grid-template-areas: 'accordion visual';\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-end {\n    grid-template-columns: var(--half-column) var(--half-column);\n    grid-template-areas: 'visual accordion';\n  }\n}\n\n@media (min-width: 80rem) {\n  .RiverAccordion--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper {\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverAccordion__accordionContainer {\n  grid-area: accordion;\n}\n\n.RiverAccordion__visualsContainer {\n  grid-area: visual;\n}\n\n.RiverAccordion__visualsWrapper {\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-xlarge);\n  display: grid;\n  grid-template-columns: subgrid;\n  grid-template-rows: subgrid;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual {\n  grid-column: 1;\n  grid-row: 1;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  scale: 1.05;\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    scale var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {\n  width: 100%;\n  object-fit: contain;\n}\n\n/* Show the visual when the corresponding accordion item is open */\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(1)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(2)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(2),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(3)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(3),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(4)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(4),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(5)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(5),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(6)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(6),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(7)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(7),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(8)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(8),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(9)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(9),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(10)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(10),\n/* Just in case all accordions are somehow closed, show the first visual */\n.RiverAccordion:not(:has(.RiverAccordion__item--open)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1) {\n  opacity: 1;\n  scale: 1;\n  z-index: 1;\n}\n\n/* Visually hide visuals inside the accordion */\n.RiverAccordion__accordionContainer .RiverAccordion__visual {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  word-wrap: normal;\n  border: 0;\n}\n\n.RiverAccordion__item {\n  position: relative;\n  padding-block-start: var(--base-size-32);\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__heading {\n  color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__trigger {\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  text-align: left;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--base-size-4);\n  margin: calc(var(--base-size-4) * -1);\n}\n\n.RiverAccordion__item--open .RiverAccordion__trigger {\n  cursor: initial;\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__trigger::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.RiverAccordion__panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    margin-block-start var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    padding-block-end var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n  margin-block-start: var(--base-size-32);\n  overflow-y: clip;\n}\n\n.RiverAccordion__item--open .RiverAccordion__panel {\n  margin-block-start: var(--base-size-12);\n  padding-block-end: var(--base-size-32);\n  grid-template-rows: 1fr;\n}\n\n.RiverAccordion__content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  min-height: 0;\n  gap: var(--base-size-20);\n}\n\n.RiverAccordion__icon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__item--open .RiverAccordion__icon {\n  color: var(--brand-color-text-default);\n}\n"],"mappings":""}
+{"version":3,"file":"RiverAccordion.module.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.module.css"],"sourcesContent":[".RiverAccordion {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: auto auto;\n  grid-template-areas:\n    'visual'\n    'accordion';\n  gap: 0;\n  position: relative;\n}\n\n@media (min-width: 48rem) {\n  .RiverAccordion {\n    --gap-width: var(--brand-Grid-spacing-column-gap);\n    --column-and-gap-width: calc((100% + var(--gap-width)) / 12);\n\n    --4-grid-columns: calc(4 * var(--column-and-gap-width));\n    --7-grid-columns-minus-last-gap: calc((7 * var(--column-and-gap-width)) - var(--gap-width));\n\n    grid-template-rows: auto;\n    gap: var(--column-and-gap-width);\n  }\n\n  .RiverAccordion__align-start {\n    grid-template-columns: var(--4-grid-columns) var(--7-grid-columns-minus-last-gap);\n    grid-template-areas: 'accordion visual';\n  }\n\n  .RiverAccordion__align-end {\n    grid-template-columns: var(--7-grid-columns-minus-last-gap) var(--4-grid-columns);\n    grid-template-areas: 'visual accordion';\n  }\n}\n\n/* Gridline variant */\n\n.RiverAccordion--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n  padding-block: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);\n}\n\n@media (min-width: 48rem) {\n  .RiverAccordion--variant-gridline {\n    --gap-width: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n    --half-column: calc(50% - var(--gap-width) / 2);\n\n    gap: var(--gap-width);\n    align-items: center;\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-start {\n    grid-template-columns: var(--half-column) var(--half-column);\n    grid-template-areas: 'accordion visual';\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-end {\n    grid-template-columns: var(--half-column) var(--half-column);\n    grid-template-areas: 'visual accordion';\n  }\n}\n\n@media (min-width: 80rem) {\n  .RiverAccordion--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper {\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {\n  margin-inline: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerInline));\n  margin-block-start: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock));\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {\n  border-radius: 0;\n}\n\n.RiverAccordion__accordionContainer {\n  grid-area: accordion;\n}\n\n.RiverAccordion__visualsContainer {\n  grid-area: visual;\n}\n\n.RiverAccordion__visualsWrapper {\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-xlarge);\n  display: grid;\n  grid-template-columns: subgrid;\n  grid-template-rows: subgrid;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual {\n  grid-column: 1;\n  grid-row: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  opacity: 0;\n  scale: 1.05;\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    scale var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {\n  display: block;\n  width: 100%;\n  height: auto;\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-xlarge);\n  object-fit: contain;\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual img,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual picture,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual video {\n  display: block;\n  width: 100%;\n  height: auto;\n  border-radius: inherit;\n  object-fit: contain;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * img,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  object-fit: cover;\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--base-size-32);\n  background: var(--brand-RiverAccordion-visual-background, var(--brand-color-canvas-subtle));\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > * {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n  height: auto;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {\n  max-width: 100%;\n  height: 100%;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n@media (min-width: 48rem) {\n  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) {\n    padding: 0;\n    gap: 0;\n    align-items: stretch;\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__accordionContainer {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    padding: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock)\n      var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-start:has(.RiverAccordion__visual--has-background)\n    .RiverAccordion__accordionContainer {\n    padding-inline-end: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-end:has(.RiverAccordion__visual--has-background)\n    .RiverAccordion__accordionContainer {\n    padding-inline-start: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n  }\n\n  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {\n    margin: 0;\n  }\n\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {\n    height: 100%;\n  }\n\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {\n    align-items: center;\n    justify-content: center;\n    padding: var(--base-size-64);\n  }\n\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > *,\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {\n    border-radius: var(--brand-borderRadius-large);\n  }\n}\n\n/* Show the visual when the corresponding accordion item is open */\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(1)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(2)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(2),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(3)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(3),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(4)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(4),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(5)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(5),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(6)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(6),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(7)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(7),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(8)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(8),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(9)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(9),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(10)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(10),\n/* Just in case all accordions are somehow closed, show the first visual */\n.RiverAccordion:not(:has(.RiverAccordion__item--open)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1) {\n  opacity: 1;\n  scale: 1;\n  z-index: 1;\n}\n\n/* Visually hide visuals inside the accordion */\n.RiverAccordion__accordionContainer .RiverAccordion__visual {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  word-wrap: normal;\n  border: 0;\n}\n\n.RiverAccordion__item {\n  position: relative;\n  padding-block-start: var(--base-size-32);\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__heading {\n  color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__trigger {\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  text-align: left;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--base-size-4);\n  margin: calc(var(--base-size-4) * -1);\n}\n\n.RiverAccordion__item--open .RiverAccordion__trigger {\n  cursor: initial;\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__trigger::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.RiverAccordion__panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    margin-block-start var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    padding-block-end var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n  margin-block-start: var(--base-size-32);\n  overflow-y: clip;\n}\n\n.RiverAccordion__item--open .RiverAccordion__panel {\n  margin-block-start: var(--base-size-12);\n  padding-block-end: var(--base-size-32);\n  grid-template-rows: 1fr;\n}\n\n.RiverAccordion__content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  min-height: 0;\n  gap: var(--base-size-20);\n}\n\n.RiverAccordion__icon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__item--open .RiverAccordion__icon {\n  color: var(--brand-color-text-default);\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"RiverBreakout.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakout/RiverBreakout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAA;AAQnC,eAAO,MAAM,qBAAqB,kCAAmC,CAAA;AACrE,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzE,KAAK,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,gBAAgB,CAAC,GAAG;IACvE;;;OAGG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AA4CD,eAAO,MAAM,aAAa;;;oCANkB,KAAK,CAAC,iBAAiB,CAAC;QAAC,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;KAAC,CAAC;CAMoB,CAAA"}
+{"version":3,"file":"RiverBreakout.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakout/RiverBreakout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAA;AASnC,eAAO,MAAM,qBAAqB,kCAAmC,CAAA;AACrE,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzE,KAAK,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,gBAAgB,CAAC,GAAG;IACvE;;;OAGG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AA6CD,eAAO,MAAM,aAAa;;;oCANkB,KAAK,CAAC,iBAAiB,CAAC;QAAC,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;KAAC,CAAC;CAMoB,CAAA"}

package/esm/river/RiverBreakout/RiverBreakout.js

@@ -1,34 +1,35 @@
 import e from "../../node_modules/clsx/dist/clsx.js";
 import { useAnimation as t } from "../../animation/useAnimation.js";
 import { Heading as n } from "../../Heading/Heading.js";
-import r from "../river-shared.module.js";
-import { RiverContent as i, Visual as a } from "../River/River.js";
-import o from "../../findElementInChildren.js";
-import { forwardRef as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
+import r from "../../component-helpers/shared.module.js";
+import i from "../river-shared.module.js";
+import { RiverContent as a, Visual as o } from "../River/River.js";
+import s from "../../findElementInChildren.js";
+import { forwardRef as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
 //#region src/river/RiverBreakout/RiverBreakout.tsx
-var l = ["default", "gridline"], u = s(({ animate: n, className: i, children: a, style: s, variant: l = "default", ...u }, f) => {
-	let { classes: p, styles: m } = t(n), h = o(a, "b") || o(a, "em") ? "muted" : "default";
-	return o(a, d) || (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("RiverBreakout: A11yHeading child is required. This element will not be visible, only read by screenreaders."), /* @__PURE__ */ c("section", {
-		ref: f,
-		className: e(r.RiverBreakout, l === "gridline" && r["RiverBreakout--variant-gridline"], h === "muted" && r["RiverBreakout--muted"], p, i),
+var u = ["default", "gridline"], d = c(({ animate: n, className: a, children: o, style: c, variant: u = "default", ...d }, p) => {
+	let { classes: m, styles: h } = t(n), g = s(o, "b") || s(o, "em") ? "muted" : "default";
+	return s(o, f) || (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("RiverBreakout: A11yHeading child is required. This element will not be visible, only read by screenreaders."), /* @__PURE__ */ l("section", {
+		ref: p,
+		className: e(i.RiverBreakout, u === "gridline" && i["RiverBreakout--variant-gridline"], u === "gridline" && r.gridline, g === "muted" && i["RiverBreakout--muted"], m, a),
 		style: {
-			...m,
-			...s
+			...h,
+			...c
 		},
-		...u,
-		children: a
+		...d,
+		children: o
 	});
-}), d = ({ as: e = "h3", children: t }) => /* @__PURE__ */ c(n, {
+}), f = ({ as: e = "h3", children: t }) => /* @__PURE__ */ l(n, {
 	className: "visually-hidden",
 	as: e,
 	children: t
-}), f = Object.assign(u, {
-	Visual: a,
-	Content: i,
-	A11yHeading: d
+}), p = Object.assign(d, {
+	Visual: o,
+	Content: a,
+	A11yHeading: f
 });
 //#endregion
-export { f as RiverBreakout, l as RiverBreakoutVariants };
+export { p as RiverBreakout, u as RiverBreakoutVariants };
 
 //# sourceMappingURL=RiverBreakout.js.map

package/esm/river/RiverBreakout/RiverBreakout.js.map

@@ -1 +1 @@
-{"version":3,"file":"RiverBreakout.js","names":[],"sources":["../../../src/river/RiverBreakout/RiverBreakout.tsx"],"sourcesContent":["import React, {Ref, forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport {RiverProps} from '../River'\nimport {Visual as RiverVisual, RiverContent} from '../River/River'\nimport {useAnimation} from '../../animation'\nimport findElementInChildren from '../../findElementInChildren'\nimport {Heading} from '../../Heading'\n\nimport styles from '../river-shared.module.css'\n\nexport const RiverBreakoutVariants = ['default', 'gridline'] as const\nexport type RiverBreakoutVariant = (typeof RiverBreakoutVariants)[number]\n\ntype RiverBreakoutProps = Omit<RiverProps, 'align' | 'imageTextRatio'> & {\n  /**\n   * Apply a visual variant. The default is `default`.\n   * `gridline` adds horizontal border lines and lateral spacing.\n   */\n  variant?: RiverBreakoutVariant\n}\n\nconst Root = forwardRef(\n  ({animate, className, children, style, variant = 'default', ...rest}: RiverBreakoutProps, ref: Ref<HTMLElement>) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    // TODO: when Firefox supports :has() selector, we should use that instead of JS\n    const defaultColor =\n      findElementInChildren(children, 'b') || findElementInChildren(children, 'em') ? 'muted' : 'default'\n\n    if (!findElementInChildren(children, A11yHeading)) {\n      if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'RiverBreakout: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n        )\n      }\n    }\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          styles.RiverBreakout,\n          variant === 'gridline' && styles['RiverBreakout--variant-gridline'],\n          defaultColor === 'muted' && styles['RiverBreakout--muted'],\n          animationClasses,\n          className,\n        )}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {children}\n      </section>\n    )\n  },\n)\n\nconst A11yHeading = ({as = 'h3', children}: React.PropsWithChildren<{as?: 'h2' | 'h3'}>) => (\n  <Heading className=\"visually-hidden\" as={as}>\n    {children}\n  </Heading>\n)\n\nexport const RiverBreakout = Object.assign(Root, {Visual: RiverVisual, Content: RiverContent, A11yHeading})\n"],"mappings":";;;;;;;;;AAUA,IAAa,IAAwB,CAAC,WAAW,WAAW,EAWtD,IAAO,GACV,EAAC,YAAS,cAAW,aAAU,UAAO,aAAU,WAAW,GAAG,KAA2B,MAA0B;CAClH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAGlF,IACJ,EAAsB,GAAU,IAAI,IAAI,EAAsB,GAAU,KAAK,GAAG,UAAU;AAW5F,QATK,EAAsB,GAAU,EAAY,8BAClB,iBAAA,QAAA,IAAA,aAA0C,WAErE,QAAQ,KACN,8GACD,EAKH,kBAAC,WAAD;EACO;EACL,WAAW,EACT,EAAO,eACP,MAAY,cAAc,EAAO,oCACjC,MAAiB,WAAW,EAAO,yBACnC,GACA,EACD;EACD,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;EAEH;EACO,CAAA;EAGf,EAEK,KAAe,EAAC,QAAK,MAAM,kBAC/B,kBAAC,GAAD;CAAS,WAAU;CAAsB;CACtC;CACO,CAAA,EAGC,IAAgB,OAAO,OAAO,GAAM;CAAS;CAAa,SAAS;CAAc;CAAY,CAAC"}
+{"version":3,"file":"RiverBreakout.js","names":[],"sources":["../../../src/river/RiverBreakout/RiverBreakout.tsx"],"sourcesContent":["import React, {Ref, forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport {RiverProps} from '../River'\nimport {Visual as RiverVisual, RiverContent} from '../River/River'\nimport {useAnimation} from '../../animation'\nimport findElementInChildren from '../../findElementInChildren'\nimport {Heading} from '../../Heading'\n\nimport styles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\nexport const RiverBreakoutVariants = ['default', 'gridline'] as const\nexport type RiverBreakoutVariant = (typeof RiverBreakoutVariants)[number]\n\ntype RiverBreakoutProps = Omit<RiverProps, 'align' | 'imageTextRatio'> & {\n  /**\n   * Apply a visual variant. The default is `default`.\n   * `gridline` adds horizontal border lines and lateral spacing.\n   */\n  variant?: RiverBreakoutVariant\n}\n\nconst Root = forwardRef(\n  ({animate, className, children, style, variant = 'default', ...rest}: RiverBreakoutProps, ref: Ref<HTMLElement>) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    // TODO: when Firefox supports :has() selector, we should use that instead of JS\n    const defaultColor =\n      findElementInChildren(children, 'b') || findElementInChildren(children, 'em') ? 'muted' : 'default'\n\n    if (!findElementInChildren(children, A11yHeading)) {\n      if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'RiverBreakout: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n        )\n      }\n    }\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          styles.RiverBreakout,\n          variant === 'gridline' && styles['RiverBreakout--variant-gridline'],\n          variant === 'gridline' && gridlineStyles.gridline,\n          defaultColor === 'muted' && styles['RiverBreakout--muted'],\n          animationClasses,\n          className,\n        )}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {children}\n      </section>\n    )\n  },\n)\n\nconst A11yHeading = ({as = 'h3', children}: React.PropsWithChildren<{as?: 'h2' | 'h3'}>) => (\n  <Heading className=\"visually-hidden\" as={as}>\n    {children}\n  </Heading>\n)\n\nexport const RiverBreakout = Object.assign(Root, {Visual: RiverVisual, Content: RiverContent, A11yHeading})\n"],"mappings":";;;;;;;;;;AAWA,IAAa,IAAwB,CAAC,WAAW,WAAW,EAWtD,IAAO,GACV,EAAC,YAAS,cAAW,aAAU,UAAO,aAAU,WAAW,GAAG,KAA2B,MAA0B;CAClH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAGlF,IACJ,EAAsB,GAAU,IAAI,IAAI,EAAsB,GAAU,KAAK,GAAG,UAAU;AAW5F,QATK,EAAsB,GAAU,EAAY,8BAClB,iBAAA,QAAA,IAAA,aAA0C,WAErE,QAAQ,KACN,8GACD,EAKH,kBAAC,WAAD;EACO;EACL,WAAW,EACT,EAAO,eACP,MAAY,cAAc,EAAO,oCACjC,MAAY,cAAc,EAAe,UACzC,MAAiB,WAAW,EAAO,yBACnC,GACA,EACD;EACD,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;EAEH;EACO,CAAA;EAGf,EAEK,KAAe,EAAC,QAAK,MAAM,kBAC/B,kBAAC,GAAD;CAAS,WAAU;CAAsB;CACtC;CACO,CAAA,EAGC,IAAgB,OAAO,OAAO,GAAM;CAAS;CAAa,SAAS;CAAc;CAAY,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"RiverBreakoutTabs.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoF,MAAM,OAAO,CAAA;AAGxG,OAAO,EAAiC,KAAK,YAAY,EAAC,MAAM,OAAO,CAAA;AACvE,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAwB,KAAK,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAM3E;;GAEG;AACH,OAAO,4FAA4F,CAAA;AACnG,OAAO,6FAA6F,CAAA;AAUpG,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3C,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAA;AAErD,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,iCAAiC,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACtE,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAC,CAAA;AAEF,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAA;AAExD,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAA;AAqalD;;GAEG;AACH,eAAO,MAAM,iBAAiB;2BA3bL,MAAM;oBACb,MAAM;eACX,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;;;;wCAwCqB,iCAAiC;iDA6B/B,6BAA6B;mEAZ7F,6BAA6B;gCAX4B,0BAA0B;yBAR3C,0BAA0B;;CA0ZnE,CAAA"}
+{"version":3,"file":"RiverBreakoutTabs.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoF,MAAM,OAAO,CAAA;AAGxG,OAAO,EAAiC,KAAK,YAAY,EAAC,MAAM,OAAO,CAAA;AACvE,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAwB,KAAK,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAO3E;;GAEG;AACH,OAAO,4FAA4F,CAAA;AACnG,OAAO,6FAA6F,CAAA;AAUpG,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3C,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAA;AAErD,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,iCAAiC,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACtE,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAC,CAAA;AAEF,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAA;AAExD,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAA;AAsalD;;GAEG;AACH,eAAO,MAAM,iBAAiB;2BA5bL,MAAM;oBACb,MAAM;eACX,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;;;;wCAwCqB,iCAAiC;iDA6B/B,6BAA6B;mEAZ7F,6BAA6B;gCAX4B,0BAA0B;yBAR3C,0BAA0B;;CA2ZnE,CAAA"}