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

package/esm/FAQ/FAQ.module.js

@@ -1,16 +1,17 @@
-import './FAQ.module-BFCs33mw.css';var e = {
-	FAQ: "Primer_Brand__FAQ-module__FAQ___fhKat",
+import './FAQ.module-BFCs33mw.css';//#region src/FAQ/FAQ.module.css
+var e = "Primer_Brand__FAQ-module__FAQ___fhKat", t = "Primer_Brand__FAQ-module__FAQ__heading___8eTS4", n = "Primer_Brand__FAQ-module__FAQ__subheading___AVw7m", r = "Primer_Brand__FAQ-module__details__summary___1sVQ4", i = {
+	FAQ: e,
 	"FAQ--variant-gridline": "Primer_Brand__FAQ-module__FAQ--variant-gridline___oIn0f",
 	"FAQ__content-wrapper--gridline": "Primer_Brand__FAQ-module__FAQ__content-wrapper--gridline___AWSUU",
 	"FAQ__heading-wrapper--gridline": "Primer_Brand__FAQ-module__FAQ__heading-wrapper--gridline___c4m3j",
-	FAQ__heading: "Primer_Brand__FAQ-module__FAQ__heading___8eTS4",
-	FAQ__subheading: "Primer_Brand__FAQ-module__FAQ__subheading___AVw7m",
+	FAQ__heading: t,
+	FAQ__subheading: n,
 	"FAQ__heading--start": "Primer_Brand__FAQ-module__FAQ__heading--start___frhvf",
 	"FAQ__heading--center": "Primer_Brand__FAQ-module__FAQ__heading--center___dED8A",
 	"FAQ__heading--large": "Primer_Brand__FAQ-module__FAQ__heading--large___v8f53",
-	details__summary: "Primer_Brand__FAQ-module__details__summary___1sVQ4"
+	details__summary: r
 };
 //#endregion
-export { e as default };
+export { e as FAQ, t as FAQ__heading, n as FAQ__subheading, i as default, r as details__summary };
 
 //# sourceMappingURL=FAQ.module.js.map

package/esm/FAQ/FAQGroup.d.ts

@@ -6,14 +6,14 @@ import { FAQSubheadingProps } from './';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/faq.css';
-declare function HeadingBase({ children, className, as, ...rest }: FAQSubheadingProps): import("react/jsx-runtime").JSX.Element;
+declare function HeadingBase({ children, className, as, ...rest }: FAQSubheadingProps): React.JSX.Element;
 export type FAQGroupProps = React.PropsWithChildren<{
     id?: string;
     variant?: 'default' | 'gridline';
     defaultSelectedIndex?: number;
     tabAttributes?: (children: React.ReactNode, index: number) => Record<string, unknown>;
 }>;
-declare function FAQGroupBase({ children, id, variant, defaultSelectedIndex, tabAttributes, ...rest }: FAQGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function FAQGroupBase({ children, id, variant, defaultSelectedIndex, tabAttributes, ...rest }: FAQGroupProps): React.JSX.Element;
 /**
  * FAQGroup component:
  * {@link https://primer.style/brand/components/FAQ#grouped-faqs See usage examples}.

package/esm/FAQ/FAQGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FAQGroup.d.ts","sourceRoot":"","sources":["../../src/FAQ/FAQGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAC,kBAAkB,EAAoB,MAAM,IAAI,CAAA;AAGxD;;GAEG;AACH,OAAO,0FAA0F,CAAA;AACjG,OAAO,uGAAuG,CAAA;AAC9G,OAAO,yFAAyF,CAAA;AAOhG,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,EAAS,EAAE,GAAG,IAAI,EAAC,EAAE,kBAAkB,2CAMjF;AAED,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAClD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IAChC,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACtF,CAAC,CAAA;AAEF,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,EAAE,EACF,OAAmB,EACnB,oBAAwB,EACxB,aAAa,EACb,GAAG,IAAI,EACR,EAAE,aAAa,2CA8Mf;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ;;CAEnB,CAAA"}
+{"version":3,"file":"FAQGroup.d.ts","sourceRoot":"","sources":["../../src/FAQ/FAQGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAC,kBAAkB,EAAoB,MAAM,IAAI,CAAA;AAGxD;;GAEG;AACH,OAAO,0FAA0F,CAAA;AACjG,OAAO,uGAAuG,CAAA;AAC9G,OAAO,yFAAyF,CAAA;AAOhG,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,EAAS,EAAE,GAAG,IAAI,EAAC,EAAE,kBAAkB,qBAMjF;AAED,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAClD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IAChC,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACtF,CAAC,CAAA;AAEF,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,EAAE,EACF,OAAmB,EACnB,oBAAwB,EACxB,aAAa,EACb,GAAG,IAAI,EACR,EAAE,aAAa,qBA8Mf;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ;;CAEnB,CAAA"}

package/esm/FAQ/FAQGroup.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../hooks/useId.js";
 import { Grid as n } from "../Grid/Grid.js";
 import { Stack as r } from "../Stack/Stack.js";
@@ -26,11 +26,15 @@ function p({ children: a, id: p, variant: m = "default", defaultSelectedIndex: g
 		b(e), x || S(!0);
 	}, E = (e) => (t) => {
 		if (t.key === "ArrowUp") {
-			t.preventDefault(), b((e - 1 + D.length) % D.length), x || S(!0);
+			t.preventDefault();
+			let n = (e - 1 + D.length) % D.length;
+			b(n), x || S(!0);
 			return;
 		}
 		if (t.key === "ArrowDown") {
-			t.preventDefault(), b((e + 1) % D.length), x || S(!0);
+			t.preventDefault();
+			let n = (e + 1) % D.length;
+			b(n), x || S(!0);
 			return;
 		}
 	};

package/esm/FAQ/FAQGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FAQGroup.js","names":[],"sources":["../../src/FAQ/FAQGroup.tsx"],"sourcesContent":["import React from 'react'\nimport {useId} from '../hooks/useId'\nimport {clsx} from 'clsx'\n\nimport {FAQSubheadingProps, FAQRootProps, FAQ} from './'\nimport {Accordion, Grid, Heading, Stack, Box} from '../'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/faq.css'\n\n/**\n * Main stylesheet (as a CSS Module)\n */\nimport styles from './FAQGroup.module.css'\n\nfunction HeadingBase({children, className, as = 'h3', ...rest}: FAQSubheadingProps) {\n  return (\n    <Heading as={as} className={clsx(styles['FAQGroup__heading'], className)} {...rest}>\n      {children}\n    </Heading>\n  )\n}\n\nexport type FAQGroupProps = React.PropsWithChildren<{\n  id?: string\n  variant?: 'default' | 'gridline'\n  defaultSelectedIndex?: number\n  tabAttributes?: (children: React.ReactNode, index: number) => Record<string, unknown>\n}>\n\nfunction FAQGroupBase({\n  children,\n  id,\n  variant = 'default',\n  defaultSelectedIndex = 0,\n  tabAttributes,\n  ...rest\n}: FAQGroupProps) {\n  const [selectedIndex, setSelectedIndex] = React.useState(defaultSelectedIndex)\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n  const instanceId = useId(id)\n  const selectedTabRef = React.useRef<HTMLButtonElement>(null)\n\n  const handleTabClick = (index: number) => (_event: React.MouseEvent<HTMLButtonElement>) => {\n    setSelectedIndex(index)\n    if (!hasInteracted) setHasInteracted(true)\n  }\n\n  const handleKeyDown = (index: number) => (_event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (_event.key === 'ArrowUp') {\n      _event.preventDefault()\n      const prevIndex = (index - 1 + faqChildren.length) % faqChildren.length\n      setSelectedIndex(prevIndex)\n      if (!hasInteracted) setHasInteracted(true)\n      return\n    }\n\n    if (_event.key === 'ArrowDown') {\n      _event.preventDefault()\n      const nextIndex = (index + 1) % faqChildren.length\n      setSelectedIndex(nextIndex)\n      if (!hasInteracted) setHasInteracted(true)\n      return\n    }\n  }\n\n  React.useEffect(() => {\n    if (hasInteracted) selectedTabRef.current?.focus()\n  }, [hasInteracted, selectedIndex])\n\n  const faqChildren = React.Children.toArray(children).filter(\n    (child): child is React.ReactElement<FAQRootProps> =>\n      React.isValidElement<FAQRootProps>(child) && child.type === FAQ,\n  )\n\n  const Tabs = React.Children.map(faqChildren, (faqChild, index) => {\n    if (faqChild.props.children) {\n      const GroupHeadingChild = React.Children.toArray(faqChild.props.children).find(\n        (child): child is React.ReactElement<React.ComponentProps<typeof FAQ.Heading>> =>\n          React.isValidElement(child) && child.type === FAQ.Heading,\n      )\n\n      const tabContents = GroupHeadingChild?.props.children\n\n      const providedTabAttributes =\n        GroupHeadingChild && tabAttributes ? tabAttributes(tabContents ?? null, index) : undefined\n      const tabAttributeProps = providedTabAttributes ?? {}\n      const {ref: providedTabRef, ...tabAttributeRest} = tabAttributeProps as {\n        ref?: React.Ref<HTMLButtonElement>\n      }\n\n      const handleTabRef = (node: HTMLButtonElement | null) => {\n        if (selectedIndex === index) {\n          selectedTabRef.current = node\n        } else if (selectedTabRef.current === node) {\n          selectedTabRef.current = null\n        }\n\n        assignRef(providedTabRef, node)\n      }\n\n      return (\n        <button\n          type=\"button\"\n          role=\"tab\"\n          className={styles['FAQGroup__tablist-button']}\n          id={`${instanceId}-tab-${index}`}\n          aria-controls={`${instanceId}-panel-${index}`}\n          aria-selected={selectedIndex === index}\n          onClick={handleTabClick(index)}\n          onKeyDown={handleKeyDown(index)}\n          key={index}\n          data-testid={`FAQGroup-tab-${index + 1}`}\n          tabIndex={selectedIndex !== index ? -1 : undefined}\n          ref={handleTabRef}\n          {...tabAttributeRest}\n        >\n          {tabContents}\n        </button>\n      )\n    }\n    return null\n  })\n\n  const TabPanels = React.Children.map(faqChildren, (faqChild, index) => {\n    if (faqChild.props.children) {\n      const FAQItemChild = React.Children.map(faqChild.props.children, child =>\n        React.isValidElement(child) && child.type !== FAQ.Heading ? child : null,\n      )\n\n      const FAQItemHeadingText = React.Children.map(faqChild.props.children, child =>\n        React.isValidElement<{children?: React.ReactNode}>(child) && child.type === FAQ.Heading\n          ? child.props.children\n          : null,\n      )\n\n      return (\n        <div\n          role=\"tabpanel\"\n          id={`${instanceId}-panel-${index}`}\n          aria-labelledby={`${instanceId}-tab-${index}`}\n          hidden={selectedIndex !== index}\n          key={index}\n          data-testid={`FAQGroup-tab-panel-${index + 1}`}\n        >\n          {FAQItemHeadingText && (\n            <FAQ.Subheading\n              data-testid={`FAQGroup-tab-panel-heading-${index + 1}`}\n              className={clsx(styles['FAQGroup__panel-subHeading'])}\n            >\n              {FAQItemHeadingText}\n            </FAQ.Subheading>\n          )}\n          {FAQItemChild}\n        </div>\n      )\n    }\n  })\n\n  const SectionedAccordions = React.Children.map(faqChildren, (faqChild, index) => {\n    if (faqChild.props.children) {\n      const GroupHeadingChild = React.Children.toArray(faqChild.props.children).find(\n        (child): child is React.ReactElement<React.ComponentProps<typeof FAQ.Heading>> =>\n          React.isValidElement(child) && child.type === FAQ.Heading,\n      )\n      const FAQItemChild = React.Children.map(faqChild.props.children, child =>\n        React.isValidElement<{className?: string}>(child) && child.type !== FAQ.Heading\n          ? React.cloneElement(child, {\n              className: clsx(styles['FAQGroup__nested-accordion-item'], child.props.className),\n            })\n          : null,\n      )\n\n      if (!GroupHeadingChild || !FAQItemChild) return null\n\n      return (\n        <Accordion\n          key={index}\n          variant=\"emphasis\"\n          className={clsx(variant === 'gridline' && styles['FAQGroup__accordion--gridline'])}\n        >\n          <Accordion.Heading {...GroupHeadingChild.props} />\n          <Accordion.Content>{FAQItemChild}</Accordion.Content>\n        </Accordion>\n      )\n    }\n  })\n\n  const GroupHeading = React.Children.toArray(children).find(\n    (child): child is React.ReactElement<FAQSubheadingProps> =>\n      React.isValidElement(child) && child.type === HeadingBase,\n  )\n\n  const Tag = variant === 'gridline' ? Box : React.Fragment\n  const tagProps = variant === 'gridline' ? {className: clsx(styles['FAQGroup__gridline-wrapper'])} : {}\n\n  return (\n    <Tag {...tagProps}>\n      <div className={clsx(styles[`FAQGroup__heading-wrapper`], styles[`FAQGroup__heading-wrapper--${variant}`])}>\n        <Grid enableGutters={false} {...rest}>\n          <Grid.Column>\n            {GroupHeading && (\n              <Grid>\n                <Grid.Column>{GroupHeading}</Grid.Column>\n              </Grid>\n            )}\n          </Grid.Column>\n        </Grid>\n      </div>\n      <Grid enableGutters={false} {...rest}>\n        <Grid.Column span={12}>\n          <div className={clsx(styles.FAQGroup__accordion)}>{SectionedAccordions}</div>\n          <Grid className={clsx(styles.FAQGroup)}>\n            <Grid.Column\n              span={{medium: 5, large: 4}}\n              className={clsx(\n                styles.FAQGroup__tablist,\n                variant === 'gridline' && styles['FAQGroup__tablist--gridline'],\n              )}\n            >\n              <Stack\n                direction=\"vertical\"\n                aria-orientation=\"vertical\"\n                padding=\"none\"\n                role=\"tablist\"\n                gap=\"none\"\n                alignItems=\"flex-start\"\n              >\n                {Tabs}\n              </Stack>\n            </Grid.Column>\n            <Grid.Column\n              start={6}\n              span={7}\n              className={clsx(variant === 'gridline' && styles['FAQGroup__content--gridline'])}\n            >\n              {TabPanels}\n            </Grid.Column>\n          </Grid>\n        </Grid.Column>\n      </Grid>\n    </Tag>\n  )\n}\n\n/**\n * FAQGroup component:\n * {@link https://primer.style/brand/components/FAQ#grouped-faqs See usage examples}.\n */\nexport const FAQGroup = Object.assign(FAQGroupBase, {\n  Heading: HeadingBase,\n})\n\nfunction assignRef<T>(ref: React.Ref<T> | undefined, value: T | null) {\n  if (!ref) return\n  if (typeof ref === 'function') {\n    ref(value)\n    return\n  }\n\n  ;(ref as React.MutableRefObject<T | null>).current = value\n}\n"],"mappings":"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"}
+{"version":3,"file":"FAQGroup.js","names":[],"sources":["../../src/FAQ/FAQGroup.tsx"],"sourcesContent":["import React from 'react'\nimport {useId} from '../hooks/useId'\nimport {clsx} from 'clsx'\n\nimport {FAQSubheadingProps, FAQRootProps, FAQ} from './'\nimport {Accordion, Grid, Heading, Stack, Box} from '../'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/faq.css'\n\n/**\n * Main stylesheet (as a CSS Module)\n */\nimport styles from './FAQGroup.module.css'\n\nfunction HeadingBase({children, className, as = 'h3', ...rest}: FAQSubheadingProps) {\n  return (\n    <Heading as={as} className={clsx(styles['FAQGroup__heading'], className)} {...rest}>\n      {children}\n    </Heading>\n  )\n}\n\nexport type FAQGroupProps = React.PropsWithChildren<{\n  id?: string\n  variant?: 'default' | 'gridline'\n  defaultSelectedIndex?: number\n  tabAttributes?: (children: React.ReactNode, index: number) => Record<string, unknown>\n}>\n\nfunction FAQGroupBase({\n  children,\n  id,\n  variant = 'default',\n  defaultSelectedIndex = 0,\n  tabAttributes,\n  ...rest\n}: FAQGroupProps) {\n  const [selectedIndex, setSelectedIndex] = React.useState(defaultSelectedIndex)\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n  const instanceId = useId(id)\n  const selectedTabRef = React.useRef<HTMLButtonElement>(null)\n\n  const handleTabClick = (index: number) => (_event: React.MouseEvent<HTMLButtonElement>) => {\n    setSelectedIndex(index)\n    if (!hasInteracted) setHasInteracted(true)\n  }\n\n  const handleKeyDown = (index: number) => (_event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (_event.key === 'ArrowUp') {\n      _event.preventDefault()\n      const prevIndex = (index - 1 + faqChildren.length) % faqChildren.length\n      setSelectedIndex(prevIndex)\n      if (!hasInteracted) setHasInteracted(true)\n      return\n    }\n\n    if (_event.key === 'ArrowDown') {\n      _event.preventDefault()\n      const nextIndex = (index + 1) % faqChildren.length\n      setSelectedIndex(nextIndex)\n      if (!hasInteracted) setHasInteracted(true)\n      return\n    }\n  }\n\n  React.useEffect(() => {\n    if (hasInteracted) selectedTabRef.current?.focus()\n  }, [hasInteracted, selectedIndex])\n\n  const faqChildren = React.Children.toArray(children).filter(\n    (child): child is React.ReactElement<FAQRootProps> =>\n      React.isValidElement<FAQRootProps>(child) && child.type === FAQ,\n  )\n\n  const Tabs = React.Children.map(faqChildren, (faqChild, index) => {\n    if (faqChild.props.children) {\n      const GroupHeadingChild = React.Children.toArray(faqChild.props.children).find(\n        (child): child is React.ReactElement<React.ComponentProps<typeof FAQ.Heading>> =>\n          React.isValidElement(child) && child.type === FAQ.Heading,\n      )\n\n      const tabContents = GroupHeadingChild?.props.children\n\n      const providedTabAttributes =\n        GroupHeadingChild && tabAttributes ? tabAttributes(tabContents ?? null, index) : undefined\n      const tabAttributeProps = providedTabAttributes ?? {}\n      const {ref: providedTabRef, ...tabAttributeRest} = tabAttributeProps as {\n        ref?: React.Ref<HTMLButtonElement>\n      }\n\n      const handleTabRef = (node: HTMLButtonElement | null) => {\n        if (selectedIndex === index) {\n          selectedTabRef.current = node\n        } else if (selectedTabRef.current === node) {\n          selectedTabRef.current = null\n        }\n\n        assignRef(providedTabRef, node)\n      }\n\n      return (\n        <button\n          type=\"button\"\n          role=\"tab\"\n          className={styles['FAQGroup__tablist-button']}\n          id={`${instanceId}-tab-${index}`}\n          aria-controls={`${instanceId}-panel-${index}`}\n          aria-selected={selectedIndex === index}\n          onClick={handleTabClick(index)}\n          onKeyDown={handleKeyDown(index)}\n          key={index}\n          data-testid={`FAQGroup-tab-${index + 1}`}\n          tabIndex={selectedIndex !== index ? -1 : undefined}\n          ref={handleTabRef}\n          {...tabAttributeRest}\n        >\n          {tabContents}\n        </button>\n      )\n    }\n    return null\n  })\n\n  const TabPanels = React.Children.map(faqChildren, (faqChild, index) => {\n    if (faqChild.props.children) {\n      const FAQItemChild = React.Children.map(faqChild.props.children, child =>\n        React.isValidElement(child) && child.type !== FAQ.Heading ? child : null,\n      )\n\n      const FAQItemHeadingText = React.Children.map(faqChild.props.children, child =>\n        React.isValidElement<{children?: React.ReactNode}>(child) && child.type === FAQ.Heading\n          ? child.props.children\n          : null,\n      )\n\n      return (\n        <div\n          role=\"tabpanel\"\n          id={`${instanceId}-panel-${index}`}\n          aria-labelledby={`${instanceId}-tab-${index}`}\n          hidden={selectedIndex !== index}\n          key={index}\n          data-testid={`FAQGroup-tab-panel-${index + 1}`}\n        >\n          {FAQItemHeadingText && (\n            <FAQ.Subheading\n              data-testid={`FAQGroup-tab-panel-heading-${index + 1}`}\n              className={clsx(styles['FAQGroup__panel-subHeading'])}\n            >\n              {FAQItemHeadingText}\n            </FAQ.Subheading>\n          )}\n          {FAQItemChild}\n        </div>\n      )\n    }\n  })\n\n  const SectionedAccordions = React.Children.map(faqChildren, (faqChild, index) => {\n    if (faqChild.props.children) {\n      const GroupHeadingChild = React.Children.toArray(faqChild.props.children).find(\n        (child): child is React.ReactElement<React.ComponentProps<typeof FAQ.Heading>> =>\n          React.isValidElement(child) && child.type === FAQ.Heading,\n      )\n      const FAQItemChild = React.Children.map(faqChild.props.children, child =>\n        React.isValidElement<{className?: string}>(child) && child.type !== FAQ.Heading\n          ? React.cloneElement(child, {\n              className: clsx(styles['FAQGroup__nested-accordion-item'], child.props.className),\n            })\n          : null,\n      )\n\n      if (!GroupHeadingChild || !FAQItemChild) return null\n\n      return (\n        <Accordion\n          key={index}\n          variant=\"emphasis\"\n          className={clsx(variant === 'gridline' && styles['FAQGroup__accordion--gridline'])}\n        >\n          <Accordion.Heading {...GroupHeadingChild.props} />\n          <Accordion.Content>{FAQItemChild}</Accordion.Content>\n        </Accordion>\n      )\n    }\n  })\n\n  const GroupHeading = React.Children.toArray(children).find(\n    (child): child is React.ReactElement<FAQSubheadingProps> =>\n      React.isValidElement(child) && child.type === HeadingBase,\n  )\n\n  const Tag = variant === 'gridline' ? Box : React.Fragment\n  const tagProps = variant === 'gridline' ? {className: clsx(styles['FAQGroup__gridline-wrapper'])} : {}\n\n  return (\n    <Tag {...tagProps}>\n      <div className={clsx(styles[`FAQGroup__heading-wrapper`], styles[`FAQGroup__heading-wrapper--${variant}`])}>\n        <Grid enableGutters={false} {...rest}>\n          <Grid.Column>\n            {GroupHeading && (\n              <Grid>\n                <Grid.Column>{GroupHeading}</Grid.Column>\n              </Grid>\n            )}\n          </Grid.Column>\n        </Grid>\n      </div>\n      <Grid enableGutters={false} {...rest}>\n        <Grid.Column span={12}>\n          <div className={clsx(styles.FAQGroup__accordion)}>{SectionedAccordions}</div>\n          <Grid className={clsx(styles.FAQGroup)}>\n            <Grid.Column\n              span={{medium: 5, large: 4}}\n              className={clsx(\n                styles.FAQGroup__tablist,\n                variant === 'gridline' && styles['FAQGroup__tablist--gridline'],\n              )}\n            >\n              <Stack\n                direction=\"vertical\"\n                aria-orientation=\"vertical\"\n                padding=\"none\"\n                role=\"tablist\"\n                gap=\"none\"\n                alignItems=\"flex-start\"\n              >\n                {Tabs}\n              </Stack>\n            </Grid.Column>\n            <Grid.Column\n              start={6}\n              span={7}\n              className={clsx(variant === 'gridline' && styles['FAQGroup__content--gridline'])}\n            >\n              {TabPanels}\n            </Grid.Column>\n          </Grid>\n        </Grid.Column>\n      </Grid>\n    </Tag>\n  )\n}\n\n/**\n * FAQGroup component:\n * {@link https://primer.style/brand/components/FAQ#grouped-faqs See usage examples}.\n */\nexport const FAQGroup = Object.assign(FAQGroupBase, {\n  Heading: HeadingBase,\n})\n\nfunction assignRef<T>(ref: React.Ref<T> | undefined, value: T | null) {\n  if (!ref) return\n  if (typeof ref === 'function') {\n    ref(value)\n    return\n  }\n\n  ;(ref as React.MutableRefObject<T | null>).current = value\n}\n"],"mappings":"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"}

package/esm/FAQ/FAQGroup.module.js

@@ -1,20 +1,21 @@
-import './FAQGroup.module-qm5jP0zF.css';var e = {
-	FAQGroup: "Primer_Brand__FAQGroup-module__FAQGroup___YEL8U",
-	FAQGroup__accordion: "Primer_Brand__FAQGroup-module__FAQGroup__accordion___UP5VM",
+import './FAQGroup.module-qm5jP0zF.css';//#region src/FAQ/FAQGroup.module.css
+var e = "Primer_Brand__FAQGroup-module__FAQGroup___YEL8U", t = "Primer_Brand__FAQGroup-module__FAQGroup__accordion___UP5VM", n = "Primer_Brand__FAQGroup-module__FAQGroup__tablist___iBu9X", r = "Primer_Brand__FAQGroup-module__FAQ__heading___HjZwb", i = "Primer_Brand__FAQGroup-module__FAQGroup__heading___RypDB", a = {
+	FAQGroup: e,
+	FAQGroup__accordion: t,
 	"FAQGroup__panel-subHeading": "Primer_Brand__FAQGroup-module__FAQGroup__panel-subHeading___hpXCw",
-	FAQGroup__tablist: "Primer_Brand__FAQGroup-module__FAQGroup__tablist___iBu9X",
-	FAQ__heading: "Primer_Brand__FAQGroup-module__FAQ__heading___HjZwb",
+	FAQGroup__tablist: n,
+	FAQ__heading: r,
 	"FAQGroup__tablist-button": "Primer_Brand__FAQGroup-module__FAQGroup__tablist-button___VAe_R",
 	"FAQGroup__nested-accordion-item": "Primer_Brand__FAQGroup-module__FAQGroup__nested-accordion-item___Bh12D",
 	"FAQGroup__tablist--gridline": "Primer_Brand__FAQGroup-module__FAQGroup__tablist--gridline___9dsD5",
 	"FAQGroup__content--gridline": "Primer_Brand__FAQGroup-module__FAQGroup__content--gridline___Xu44n",
-	FAQGroup__heading: "Primer_Brand__FAQGroup-module__FAQGroup__heading___RypDB",
+	FAQGroup__heading: i,
 	"FAQGroup__gridline-wrapper": "Primer_Brand__FAQGroup-module__FAQGroup__gridline-wrapper___7IC44",
 	"FAQGroup__heading-wrapper": "Primer_Brand__FAQGroup-module__FAQGroup__heading-wrapper___pYwfs",
 	"FAQGroup__heading-wrapper--gridline": "Primer_Brand__FAQGroup-module__FAQGroup__heading-wrapper--gridline___nZYpp",
 	"FAQGroup__accordion--gridline": "Primer_Brand__FAQGroup-module__FAQGroup__accordion--gridline___6GLEm"
 };
 //#endregion
-export { e as default };
+export { e as FAQGroup, t as FAQGroup__accordion, i as FAQGroup__heading, n as FAQGroup__tablist, r as FAQ__heading, a as default };
 
 //# sourceMappingURL=FAQGroup.module.js.map

package/esm/Footnotes/Footnotes.d.ts

@@ -10,7 +10,7 @@ type FootnotesProps = {
     as?: (typeof FootnotesTags)[number];
     visuallyHiddenHeading?: string;
 } & FootnotesRestrictedPolymorphism;
-declare function Root({ as, className, children, visuallyHiddenHeading, ...rest }: FootnotesProps): import("react/jsx-runtime").JSX.Element;
+declare function Root({ as, className, children, visuallyHiddenHeading, ...rest }: FootnotesProps): React.JSX.Element;
 export declare const FootnotesItemTags: readonly ["a", "p"];
 type DefaultFootnotesItemProps = {
     _variant?: 'disclaimer';
@@ -20,7 +20,7 @@ type CitationFootnotesItemProps = {
     href?: string;
 };
 type FootnotesItemProps = (DefaultFootnotesItemProps | CitationFootnotesItemProps) & React.HTMLAttributes<HTMLParagraphElement> & BaseProps<HTMLParagraphElement>;
-declare function Item({ className, children, _variant, ...rest }: FootnotesItemProps): import("react/jsx-runtime").JSX.Element;
+declare function Item({ className, children, _variant, ...rest }: FootnotesItemProps): React.JSX.Element;
 /**
  * Footnotes component
  * {@link https://primer.style/brand/components/Footnotes/ See usage examples}.

package/esm/Footnotes/Footnotes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Footnotes.d.ts","sourceRoot":"","sources":["../../src/Footnotes/Footnotes.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAMnD,eAAO,MAAM,aAAa,wBAAyB,CAAA;AAEnD,KAAK,+BAA+B,GAChC,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAA;CAAC,CAAC,GACjF,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,SAAS,CAAC,gBAAgB,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAC,CAAC,CAAA;AAE5F,KAAK,cAAc,GAAG;IACpB,EAAE,CAAC,EAAE,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;IACnC,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B,GAAG,+BAA+B,CAAA;AAEnC,iBAAS,IAAI,CAAC,EAAC,EAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,qBAAmC,EAAE,GAAG,IAAI,EAAC,EAAE,cAAc,2CAyC3G;AAED,eAAO,MAAM,iBAAiB,qBAAsB,CAAA;AAEpD,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,YAAY,CAAA;CACxB,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,QAAQ,CAAC,EAAE,UAAU,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,KAAK,kBAAkB,GAAG,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,GAChF,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAC1C,SAAS,CAAC,oBAAoB,CAAC,CAAA;AAEjC,iBAAS,IAAI,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,QAAqB,EAAE,GAAG,IAAI,EAAC,EAAE,kBAAkB,2CAsBtF;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS;;CAA8B,CAAA"}
+{"version":3,"file":"Footnotes.d.ts","sourceRoot":"","sources":["../../src/Footnotes/Footnotes.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAMnD,eAAO,MAAM,aAAa,wBAAyB,CAAA;AAEnD,KAAK,+BAA+B,GAChC,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAA;CAAC,CAAC,GACjF,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,SAAS,CAAC,gBAAgB,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAC,CAAC,CAAA;AAE5F,KAAK,cAAc,GAAG;IACpB,EAAE,CAAC,EAAE,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;IACnC,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B,GAAG,+BAA+B,CAAA;AAEnC,iBAAS,IAAI,CAAC,EAAC,EAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,qBAAmC,EAAE,GAAG,IAAI,EAAC,EAAE,cAAc,qBAyC3G;AAED,eAAO,MAAM,iBAAiB,qBAAsB,CAAA;AAEpD,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,YAAY,CAAA;CACxB,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,QAAQ,CAAC,EAAE,UAAU,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,KAAK,kBAAkB,GAAG,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,GAChF,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAC1C,SAAS,CAAC,oBAAoB,CAAC,CAAA;AAEjC,iBAAS,IAAI,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,QAAqB,EAAE,GAAG,IAAI,EAAC,EAAE,kBAAkB,qBAsBtF;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS;;CAA8B,CAAA"}

package/esm/Footnotes/Footnotes.js

@@ -1,7 +1,7 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Text as t } from "../Text/Text.js";
 import { Heading as n } from "../Heading/Heading.js";
-import { ReplyIcon as r } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { ReplyIcon as r } from "../node_modules/@primer/octicons-react/dist/icons/ReplyIcon.js";
 import { InlineLink as i } from "../InlineLink/InlineLink.js";
 import a from "./Footnotes.module.js";
 import { getTextContent as o } from "../utils/getTextContent.js";

package/esm/Footnotes/Footnotes.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footnotes.js","names":[],"sources":["../../src/Footnotes/Footnotes.tsx"],"sourcesContent":["import React from 'react'\nimport {ReplyIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\n\nimport {Heading, InlineLink, Text} from '../'\nimport type {BaseProps} from '../component-helpers'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Footnotes.module.css'\nimport {getTextContent} from '../utils/getTextContent'\n\nexport const FootnotesTags = ['div', 'ol'] as const\n\ntype FootnotesRestrictedPolymorphism =\n  | (React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement> & {as?: 'div'})\n  | (React.HTMLAttributes<HTMLParagraphElement> & BaseProps<HTMLOListElement> & {as?: 'ol'})\n\ntype FootnotesProps = {\n  as?: (typeof FootnotesTags)[number]\n  visuallyHiddenHeading?: string\n} & FootnotesRestrictedPolymorphism\n\nfunction Root({as = 'ol', className, children, visuallyHiddenHeading = 'Footnotes', ...rest}: FootnotesProps) {\n  const memoizedChildren = React.useMemo(() => React.Children.toArray(children), [children])\n\n  if (as === 'div') {\n    const filteredChildren = memoizedChildren.map(child => {\n      if (React.isValidElement<FootnotesItemProps>(child) && child.type === Item) {\n        return React.cloneElement(child, {\n          _variant: 'disclaimer',\n          ...child.props,\n        })\n      }\n      return null\n    })\n    return (\n      <>\n        <Heading className=\"visually-hidden\" as=\"h2\" id=\"footnote-label\">\n          {visuallyHiddenHeading}\n        </Heading>\n        <div\n          className={clsx(styles.Footnotes, styles['Footnotes--variant-disclaimer'], className)}\n          {...(rest as BaseProps<HTMLDivElement>)}\n        >\n          {filteredChildren}\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <>\n      <Heading className=\"visually-hidden\" as=\"h2\" id=\"footnote-label\">\n        {visuallyHiddenHeading}\n      </Heading>\n      <ol\n        className={clsx(styles.Footnotes, styles['Footnotes--variant-citations'], className)}\n        {...(rest as BaseProps<HTMLOListElement>)}\n      >\n        {children}\n      </ol>\n    </>\n  )\n}\n\nexport const FootnotesItemTags = ['a', 'p'] as const\n\ntype DefaultFootnotesItemProps = {\n  _variant?: 'disclaimer'\n}\n\ntype CitationFootnotesItemProps = {\n  _variant?: 'citation'\n  href?: string\n}\n\ntype FootnotesItemProps = (DefaultFootnotesItemProps | CitationFootnotesItemProps) &\n  React.HTMLAttributes<HTMLParagraphElement> &\n  BaseProps<HTMLParagraphElement>\n\nfunction Item({className, children, _variant = 'citation', ...rest}: FootnotesItemProps) {\n  if (_variant === 'disclaimer') {\n    return (\n      <Text as=\"p\" variant=\"muted\" size=\"100\" className={clsx(styles.FootnotesItem, className)}>\n        {children}\n      </Text>\n    )\n  }\n\n  const {href, ...restSansHref} = rest as CitationFootnotesItemProps\n  return (\n    <li className={clsx(styles.FootnotesItem, className)} {...(restSansHref as CitationFootnotesItemProps)}>\n      <Text as=\"p\" variant=\"muted\" size=\"100\" className={clsx(styles.FootnotesItem__citationText)}>\n        {children}\n        {href && (\n          <InlineLink href={href} aria-label={`Back to content ${getTextContent(children)}`}>\n            <ReplyIcon className={styles.FootnotesItem__citationIcon} />\n          </InlineLink>\n        )}\n      </Text>\n    </li>\n  )\n}\n\n/**\n * Footnotes component\n * {@link https://primer.style/brand/components/Footnotes/ See usage examples}.\n */\nexport const Footnotes = Object.assign(Root, {Item})\n"],"mappings":";;;;;;;;;;AAWA,IAAa,IAAgB,CAAC,OAAO,KAAK;AAW1C,SAAS,EAAK,EAAC,QAAK,MAAM,cAAW,aAAU,2BAAwB,aAAa,GAAG,KAAuB;CAC5G,IAAM,IAAmB,EAAM,cAAc,EAAM,SAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC;AAE1F,KAAI,MAAO,OAAO;EAChB,IAAM,IAAmB,EAAiB,KAAI,MACxC,EAAM,eAAmC,EAAM,IAAI,EAAM,SAAS,IAC7D,EAAM,aAAa,GAAO;GAC/B,UAAU;GACV,GAAG,EAAM;GACV,CAAC,GAEG,KACP;AACF,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GAAS,WAAU;GAAkB,IAAG;GAAK,IAAG;aAC7C;GACO,CAAA,EACV,kBAAC,OAAD;GACE,WAAW,EAAK,EAAO,WAAW,EAAO,kCAAkC,EAAU;GACrF,GAAK;aAEJ;GACG,CAAA,CACL,EAAA,CAAA;;AAIP,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAAS,WAAU;EAAkB,IAAG;EAAK,IAAG;YAC7C;EACO,CAAA,EACV,kBAAC,MAAD;EACE,WAAW,EAAK,EAAO,WAAW,EAAO,iCAAiC,EAAU;EACpF,GAAK;EAEJ;EACE,CAAA,CACJ,EAAA,CAAA;;AAIP,IAAa,IAAoB,CAAC,KAAK,IAAI;AAe3C,SAAS,EAAK,EAAC,cAAW,aAAU,cAAW,YAAY,GAAG,KAA2B;AACvF,KAAI,MAAa,aACf,QACE,kBAAC,GAAD;EAAM,IAAG;EAAI,SAAQ;EAAQ,MAAK;EAAM,WAAW,EAAK,EAAO,eAAe,EAAU;EACrF;EACI,CAAA;CAIX,IAAM,EAAC,SAAM,GAAG,MAAgB;AAChC,QACE,kBAAC,MAAD;EAAI,WAAW,EAAK,EAAO,eAAe,EAAU;EAAE,GAAK;YACzD,kBAAC,GAAD;GAAM,IAAG;GAAI,SAAQ;GAAQ,MAAK;GAAM,WAAW,EAAK,EAAO,4BAA4B;aAA3F,CACG,GACA,KACC,kBAAC,GAAD;IAAkB;IAAM,cAAY,mBAAmB,EAAe,EAAS;cAC7E,kBAAC,GAAD,EAAW,WAAW,EAAO,6BAA+B,CAAA;IACjD,CAAA,CAEV;;EACJ,CAAA;;AAQT,IAAa,IAAY,OAAO,OAAO,GAAM,EAAC,SAAK,CAAC"}
+{"version":3,"file":"Footnotes.js","names":[],"sources":["../../src/Footnotes/Footnotes.tsx"],"sourcesContent":["import React from 'react'\nimport {ReplyIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\n\nimport {Heading, InlineLink, Text} from '../'\nimport type {BaseProps} from '../component-helpers'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Footnotes.module.css'\nimport {getTextContent} from '../utils/getTextContent'\n\nexport const FootnotesTags = ['div', 'ol'] as const\n\ntype FootnotesRestrictedPolymorphism =\n  | (React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement> & {as?: 'div'})\n  | (React.HTMLAttributes<HTMLParagraphElement> & BaseProps<HTMLOListElement> & {as?: 'ol'})\n\ntype FootnotesProps = {\n  as?: (typeof FootnotesTags)[number]\n  visuallyHiddenHeading?: string\n} & FootnotesRestrictedPolymorphism\n\nfunction Root({as = 'ol', className, children, visuallyHiddenHeading = 'Footnotes', ...rest}: FootnotesProps) {\n  const memoizedChildren = React.useMemo(() => React.Children.toArray(children), [children])\n\n  if (as === 'div') {\n    const filteredChildren = memoizedChildren.map(child => {\n      if (React.isValidElement<FootnotesItemProps>(child) && child.type === Item) {\n        return React.cloneElement(child, {\n          _variant: 'disclaimer',\n          ...child.props,\n        })\n      }\n      return null\n    })\n    return (\n      <>\n        <Heading className=\"visually-hidden\" as=\"h2\" id=\"footnote-label\">\n          {visuallyHiddenHeading}\n        </Heading>\n        <div\n          className={clsx(styles.Footnotes, styles['Footnotes--variant-disclaimer'], className)}\n          {...(rest as BaseProps<HTMLDivElement>)}\n        >\n          {filteredChildren}\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <>\n      <Heading className=\"visually-hidden\" as=\"h2\" id=\"footnote-label\">\n        {visuallyHiddenHeading}\n      </Heading>\n      <ol\n        className={clsx(styles.Footnotes, styles['Footnotes--variant-citations'], className)}\n        {...(rest as BaseProps<HTMLOListElement>)}\n      >\n        {children}\n      </ol>\n    </>\n  )\n}\n\nexport const FootnotesItemTags = ['a', 'p'] as const\n\ntype DefaultFootnotesItemProps = {\n  _variant?: 'disclaimer'\n}\n\ntype CitationFootnotesItemProps = {\n  _variant?: 'citation'\n  href?: string\n}\n\ntype FootnotesItemProps = (DefaultFootnotesItemProps | CitationFootnotesItemProps) &\n  React.HTMLAttributes<HTMLParagraphElement> &\n  BaseProps<HTMLParagraphElement>\n\nfunction Item({className, children, _variant = 'citation', ...rest}: FootnotesItemProps) {\n  if (_variant === 'disclaimer') {\n    return (\n      <Text as=\"p\" variant=\"muted\" size=\"100\" className={clsx(styles.FootnotesItem, className)}>\n        {children}\n      </Text>\n    )\n  }\n\n  const {href, ...restSansHref} = rest as CitationFootnotesItemProps\n  return (\n    <li className={clsx(styles.FootnotesItem, className)} {...(restSansHref as CitationFootnotesItemProps)}>\n      <Text as=\"p\" variant=\"muted\" size=\"100\" className={clsx(styles.FootnotesItem__citationText)}>\n        {children}\n        {href && (\n          <InlineLink href={href} aria-label={`Back to content ${getTextContent(children)}`}>\n            <ReplyIcon className={styles.FootnotesItem__citationIcon} />\n          </InlineLink>\n        )}\n      </Text>\n    </li>\n  )\n}\n\n/**\n * Footnotes component\n * {@link https://primer.style/brand/components/Footnotes/ See usage examples}.\n */\nexport const Footnotes = Object.assign(Root, {Item})\n"],"mappings":";;;;;;;;;;AAWA,IAAa,IAAgB,CAAC,OAAO,IAAI;AAWzC,SAAS,EAAK,EAAC,QAAK,MAAM,cAAW,aAAU,2BAAwB,aAAa,GAAG,KAAuB;CAC5G,IAAM,IAAmB,EAAM,cAAc,EAAM,SAAS,QAAQ,CAAQ,GAAG,CAAC,CAAQ,CAAC;CAEzF,IAAI,MAAO,OAAO;EAChB,IAAM,IAAmB,EAAiB,KAAI,MACxC,EAAM,eAAmC,CAAK,KAAK,EAAM,SAAS,IAC7D,EAAM,aAAa,GAAO;GAC/B,UAAU;GACV,GAAG,EAAM;EACX,CAAC,IAEI,IACR;EACD,OACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GAAS,WAAU;GAAkB,IAAG;GAAK,IAAG;aAC7C;EACM,CAAA,GACT,kBAAC,OAAD;GACE,WAAW,EAAK,EAAO,WAAW,EAAO,kCAAkC,CAAS;GACpF,GAAK;aAEJ;EACE,CAAA,CACL,EAAA,CAAA;CAEN;CAEA,OACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAAS,WAAU;EAAkB,IAAG;EAAK,IAAG;YAC7C;CACM,CAAA,GACT,kBAAC,MAAD;EACE,WAAW,EAAK,EAAO,WAAW,EAAO,iCAAiC,CAAS;EACnF,GAAK;EAEJ;CACC,CAAA,CACJ,EAAA,CAAA;AAEN;AAEA,IAAa,IAAoB,CAAC,KAAK,GAAG;AAe1C,SAAS,EAAK,EAAC,cAAW,aAAU,cAAW,YAAY,GAAG,KAA2B;CACvF,IAAI,MAAa,cACf,OACE,kBAAC,GAAD;EAAM,IAAG;EAAI,SAAQ;EAAQ,MAAK;EAAM,WAAW,EAAK,EAAO,eAAe,CAAS;EACpF;CACG,CAAA;CAIV,IAAM,EAAC,SAAM,GAAG,MAAgB;CAChC,OACE,kBAAC,MAAD;EAAI,WAAW,EAAK,EAAO,eAAe,CAAS;EAAG,GAAK;YACzD,kBAAC,GAAD;GAAM,IAAG;GAAI,SAAQ;GAAQ,MAAK;GAAM,WAAW,EAAK,EAAO,2BAA2B;aAA1F,CACG,GACA,KACC,kBAAC,GAAD;IAAkB;IAAM,cAAY,mBAAmB,EAAe,CAAQ;cAC5E,kBAAC,GAAD,EAAW,WAAW,EAAO,4BAA8B,CAAA;GACjD,CAAA,CAEV;;CACJ,CAAA;AAER;AAMA,IAAa,IAAY,OAAO,OAAO,GAAM,EAAC,QAAI,CAAC"}

package/esm/Footnotes/Footnotes.module.js

@@ -1,11 +1,12 @@
-import './Footnotes.module-DG9Vx76y.css';var e = {
-	Footnotes: "Primer_Brand__Footnotes-module__Footnotes___Nejyn",
+import './Footnotes.module-DG9Vx76y.css';//#region src/Footnotes/Footnotes.module.css
+var e = "Primer_Brand__Footnotes-module__Footnotes___Nejyn", t = "Primer_Brand__Footnotes-module__FootnotesItem___IfXmq", n = "Primer_Brand__Footnotes-module__FootnotesItem__citationIcon___gBAZT", r = "Primer_Brand__Footnotes-module__FootnotesItem__citationText___4Rjij", i = {
+	Footnotes: e,
 	"Footnotes--variant-citations": "Primer_Brand__Footnotes-module__Footnotes--variant-citations___CDvXV",
-	FootnotesItem: "Primer_Brand__Footnotes-module__FootnotesItem___IfXmq",
-	FootnotesItem__citationIcon: "Primer_Brand__Footnotes-module__FootnotesItem__citationIcon___gBAZT",
-	FootnotesItem__citationText: "Primer_Brand__Footnotes-module__FootnotesItem__citationText___4Rjij"
+	FootnotesItem: t,
+	FootnotesItem__citationIcon: n,
+	FootnotesItem__citationText: r
 };
 //#endregion
-export { e as default };
+export { e as Footnotes, t as FootnotesItem, n as FootnotesItem__citationIcon, r as FootnotesItem__citationText, i as default };
 
 //# sourceMappingURL=Footnotes.module.js.map

package/esm/FrostedGlassVFX/FrostedGlassVFX.d.ts

@@ -22,5 +22,5 @@ export type FrostedGlassVFXProps = BaseProps<HTMLDivElement> & React.HTMLAttribu
  * FrostedGlassVFX component
  * {@link https://primer.style/brand/components/FrostedGlassVFX/ See usage examples}.
  */
-export declare function FrostedGlassVFX({ hasBorderRadius, children, className, intensity, ...rest }: FrostedGlassVFXProps): import("react/jsx-runtime").JSX.Element;
+export declare function FrostedGlassVFX({ hasBorderRadius, children, className, intensity, ...rest }: FrostedGlassVFXProps): React.JSX.Element;
 //# sourceMappingURL=FrostedGlassVFX.d.ts.map

package/esm/FrostedGlassVFX/FrostedGlassVFX.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FrostedGlassVFX.d.ts","sourceRoot":"","sources":["../../src/FrostedGlassVFX/FrostedGlassVFX.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,wGAAwG,CAAA;AAC/G,OAAO,qHAAqH,CAAA;AAK5H,eAAO,MAAM,wBAAwB,oCAAqC,CAAA;AAC1E,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAA;AAChF,eAAO,MAAM,+BAA+B,EAAE,wBAAmC,CAAA;AAEjF,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC,cAAc,CAAC,GAC1D,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACrC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,wBAAwB,CAAA;CACrC,CAAA;AAEH;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,eAAsB,EACtB,QAAQ,EACR,SAAS,EACT,SAA2C,EAC3C,GAAG,IAAI,EACR,EAAE,oBAAoB,2CActB"}
+{"version":3,"file":"FrostedGlassVFX.d.ts","sourceRoot":"","sources":["../../src/FrostedGlassVFX/FrostedGlassVFX.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,wGAAwG,CAAA;AAC/G,OAAO,qHAAqH,CAAA;AAK5H,eAAO,MAAM,wBAAwB,oCAAqC,CAAA;AAC1E,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAA;AAChF,eAAO,MAAM,+BAA+B,EAAE,wBAAmC,CAAA;AAEjF,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC,cAAc,CAAC,GAC1D,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACrC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,wBAAwB,CAAA;CACrC,CAAA;AAEH;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,eAAsB,EACtB,QAAQ,EACR,SAAS,EACT,SAA2C,EAC3C,GAAG,IAAI,EACR,EAAE,oBAAoB,qBActB"}

package/esm/FrostedGlassVFX/FrostedGlassVFX.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/colors-with-modes-CMw13Yda.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/base-BlFewKzM.css';/* empty css                                                                                                  */
 /* empty css                                                                                                               */
 import t from "./FrostedGlassVFX.module.js";

package/esm/FrostedGlassVFX/FrostedGlassVFX.js.map

@@ -1 +1 @@
-{"version":3,"file":"FrostedGlassVFX.js","names":[],"sources":["../../src/FrostedGlassVFX/FrostedGlassVFX.tsx"],"sourcesContent":["import React from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './FrostedGlassVFX.module.css'\n\nexport const FrostedGlassVFXIntensity = ['low', 'medium', 'high'] as const\nexport type FrostedGlassVFXIntensity = (typeof FrostedGlassVFXIntensity)[number]\nexport const defaultFrostedGlassVFXIntensity: FrostedGlassVFXIntensity = 'medium'\n\nexport type FrostedGlassVFXProps = BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Applies rounded corners\n     */\n    hasBorderRadius?: boolean\n    /**\n     * Controls the blur amount\n     */\n    intensity?: FrostedGlassVFXIntensity\n  }\n\n/**\n * FrostedGlassVFX component\n * {@link https://primer.style/brand/components/FrostedGlassVFX/ See usage examples}.\n */\nexport function FrostedGlassVFX({\n  hasBorderRadius = true,\n  children,\n  className,\n  intensity = defaultFrostedGlassVFXIntensity,\n  ...rest\n}: FrostedGlassVFXProps) {\n  return (\n    <div\n      className={clsx(\n        styles.FrostedGlassVFX,\n        hasBorderRadius && styles['FrostedGlassVFX--rounded-corners'],\n        styles[`FrostedGlassVFX--intensity-${intensity}`],\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAaA,IAAa,IAA2B;CAAC;CAAO;CAAU;CAAO,EAEpD,IAA4D;AAkBzE,SAAgB,EAAgB,EAC9B,qBAAkB,IAClB,aACA,cACA,eAAY,GACZ,GAAG,KACoB;AACvB,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,iBACP,KAAmB,EAAO,qCAC1B,EAAO,8BAA8B,MACrC,EACD;EACD,GAAI;EAEH;EACG,CAAA"}
+{"version":3,"file":"FrostedGlassVFX.js","names":[],"sources":["../../src/FrostedGlassVFX/FrostedGlassVFX.tsx"],"sourcesContent":["import React from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './FrostedGlassVFX.module.css'\n\nexport const FrostedGlassVFXIntensity = ['low', 'medium', 'high'] as const\nexport type FrostedGlassVFXIntensity = (typeof FrostedGlassVFXIntensity)[number]\nexport const defaultFrostedGlassVFXIntensity: FrostedGlassVFXIntensity = 'medium'\n\nexport type FrostedGlassVFXProps = BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Applies rounded corners\n     */\n    hasBorderRadius?: boolean\n    /**\n     * Controls the blur amount\n     */\n    intensity?: FrostedGlassVFXIntensity\n  }\n\n/**\n * FrostedGlassVFX component\n * {@link https://primer.style/brand/components/FrostedGlassVFX/ See usage examples}.\n */\nexport function FrostedGlassVFX({\n  hasBorderRadius = true,\n  children,\n  className,\n  intensity = defaultFrostedGlassVFXIntensity,\n  ...rest\n}: FrostedGlassVFXProps) {\n  return (\n    <div\n      className={clsx(\n        styles.FrostedGlassVFX,\n        hasBorderRadius && styles['FrostedGlassVFX--rounded-corners'],\n        styles[`FrostedGlassVFX--intensity-${intensity}`],\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAaA,IAAa,IAA2B;CAAC;CAAO;CAAU;AAAM,GAEnD,IAA4D;AAkBzE,SAAgB,EAAgB,EAC9B,qBAAkB,IAClB,aACA,cACA,eAAY,GACZ,GAAG,KACoB;CACvB,OACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,iBACP,KAAmB,EAAO,qCAC1B,EAAO,8BAA8B,MACrC,CACF;EACA,GAAI;EAEH;CACE,CAAA;AAET"}

package/esm/FrostedGlassVFX/FrostedGlassVFX.module.js

@@ -1,11 +1,12 @@
-import './FrostedGlassVFX.module-CBwswPOI.css';var e = {
-	FrostedGlassVFX: "Primer_Brand__FrostedGlassVFX-module__FrostedGlassVFX___n7bAR",
+import './FrostedGlassVFX.module-CBwswPOI.css';//#region src/FrostedGlassVFX/FrostedGlassVFX.module.css
+var e = "Primer_Brand__FrostedGlassVFX-module__FrostedGlassVFX___n7bAR", t = {
+	FrostedGlassVFX: e,
 	"FrostedGlassVFX--rounded-corners": "Primer_Brand__FrostedGlassVFX-module__FrostedGlassVFX--rounded-corners___4Ve0_",
 	"FrostedGlassVFX--intensity-low": "Primer_Brand__FrostedGlassVFX-module__FrostedGlassVFX--intensity-low___sfdan",
 	"FrostedGlassVFX--intensity-medium": "Primer_Brand__FrostedGlassVFX-module__FrostedGlassVFX--intensity-medium___Tnplu",
 	"FrostedGlassVFX--intensity-high": "Primer_Brand__FrostedGlassVFX-module__FrostedGlassVFX--intensity-high___pdX39"
 };
 //#endregion
-export { e as default };
+export { e as FrostedGlassVFX, t as default };
 
 //# sourceMappingURL=FrostedGlassVFX.module.js.map

package/esm/Grid/Grid.d.ts

@@ -92,9 +92,9 @@ export declare const Grid: React.NamedExoticComponent<React.HTMLAttributes<"div"
 } & BaseProps<HTMLDivElement> & {
     children?: React.ReactNode | undefined;
 }> & {
-    readonly type: ({ className, children, as, fullWidth, enableOverlay, enableGutters, columnGap, rowGap, ["data-testid"]: testId, ...rest }: PropsWithChildren<GridProps>) => import("react/jsx-runtime").JSX.Element;
+    readonly type: ({ className, children, as, fullWidth, enableOverlay, enableGutters, columnGap, rowGap, ["data-testid"]: testId, ...rest }: PropsWithChildren<GridProps>) => JSX.Element;
 } & {
-    Column: React.MemoExoticComponent<({ children, as, span, start, className, ...rest }: PropsWithChildren<GridColumnProps>) => import("react/jsx-runtime").JSX.Element>;
+    Column: React.MemoExoticComponent<({ children, as, span, start, className, ...rest }: PropsWithChildren<GridColumnProps>) => JSX.Element>;
     testIds: {
         root: string;
     };

package/esm/Grid/Grid.js

@@ -1,5 +1,5 @@
-import e from "../node_modules/clsx/dist/clsx.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/grid/grid-Cjk6fsH8.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/grid/colors-with-modes-6QocK2fy.css';/* empty css                                                                                     */
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/grid/colors-with-modes-6QocK2fy.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/grid/grid-Cjk6fsH8.css';/* empty css                                                                                     */
 /* empty css                                                                                                  */
 import t from "./Grid.module.js";
 import { useId as n } from "../hooks/useId.js";

package/esm/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","names":[],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["import React, {HTMLAttributes, PropsWithChildren, memo} from 'react'\nimport type {JSX} from 'react'\n\nimport {clsx} from 'clsx'\n\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/grid/grid.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/grid/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Grid.module.css'\nimport {useId} from '../hooks/useId'\n\nconst testIds = {\n  root: 'Grid',\n}\n\ntype ResponsiveMap = {\n  xsmall?: GridColumnIndex\n  small?: GridColumnIndex\n  medium?: GridColumnIndex\n  large?: GridColumnIndex\n  xlarge?: GridColumnIndex\n  xxlarge?: GridColumnIndex\n}\n\nexport type GridColumnIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n\nexport type GridProps<T extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<T> & {\n  /**\n   * The HTML element used to render the grid.\n   */\n  as?: T | 'div' | 'span' | 'section'\n  /**\n   * Visual aid to help with alignment.\n   */\n  enableOverlay?: boolean\n  /**\n   * Enable/disable default gutters\n   */\n  enableGutters?: boolean\n  /**\n   * Sets the gap between columns.\n   */\n  columnGap?: 'none' | 'default'\n  /**\n   * Sets the gap between rows.\n   */\n  rowGap?: 'none' | 'default'\n  /**\n   * Fills the width of the parent container and removes the max-width.\n   */\n  fullWidth?: boolean\n  /**\n   * Test id for the root element.\n   */\n  ['data-testid']?: string\n} & (T extends 'span'\n    ? BaseProps<HTMLSpanElement>\n    : T extends 'section'\n    ? BaseProps<HTMLElement>\n    : BaseProps<HTMLDivElement>)\n\nconst _GridRoot = memo(\n  ({\n    className,\n    children,\n    as = 'div',\n    fullWidth = false,\n    enableOverlay = false,\n    enableGutters = true,\n    columnGap = 'default',\n    rowGap = 'default',\n    ['data-testid']: testId,\n    ...rest\n  }: PropsWithChildren<GridProps>) => {\n    const gridClass = clsx(\n      styles.Grid,\n      styles[`Grid--columnGap-${columnGap}`],\n      styles[`Grid--rowGap-${rowGap}`],\n      enableOverlay && styles['Grid--has-overlay'],\n      fullWidth && styles['Grid--full-width'],\n      enableGutters && styles['Grid--has-gutters'],\n      className,\n    )\n\n    const testIdUID = useId(testId)\n\n    const validElements = ['div', 'span', 'section']\n    const Component = validElements.includes(as) ? as : 'div'\n\n    return (\n      <Component\n        className={gridClass}\n        data-testid={testId || `${testIds.root}-${testIdUID}`}\n        {...(rest as HTMLAttributes<HTMLElement>)}\n      >\n        {children}\n      </Component>\n    )\n  },\n)\n\ntype GridColumnProps<T extends keyof JSX.IntrinsicElements = 'div'> = {\n  as?: T | 'div' | 'span' | 'section'\n  span?: GridColumnIndex | ResponsiveMap\n  start?: GridColumnIndex | ResponsiveMap\n} & (T extends 'span'\n  ? BaseProps<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement>\n  : T extends 'section'\n  ? BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement>\n  : BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>)\n\nconst Column = memo(\n  ({children, as = 'div', span = 12, start, className, ...rest}: PropsWithChildren<GridColumnProps>) => {\n    const validElements = ['div', 'span', 'section']\n    const Component = validElements.includes(as) ? as : 'div'\n\n    const columnClassArray = [styles['Grid__column']]\n\n    if (typeof span === 'number') {\n      columnClassArray.push(styles[`Grid__column--span-${span}`])\n    } else if (typeof span === 'object') {\n      for (const [key, value] of Object.entries(span)) {\n        if (key === 'xsmall') {\n          columnClassArray.push(styles[`Grid__column--xsmall-span-${value}`])\n        } else {\n          columnClassArray.push(styles[`Grid__column--${key}-span-${value}`])\n        }\n      }\n    }\n\n    if (typeof start === 'number') {\n      columnClassArray.push(styles[`Grid__column--start-${start}`])\n    } else if (typeof start === 'object') {\n      for (const [key, value] of Object.entries(start)) {\n        if (key === 'xsmall') {\n          columnClassArray.push(styles[`Grid__column--xsmall-start-${value}`])\n        } else {\n          columnClassArray.push(styles[`Grid__column--${key}-start-${value}`])\n        }\n      }\n    }\n\n    const classes = clsx(columnClassArray, className)\n    return (\n      <Component className={classes} {...rest}>\n        {children}\n      </Component>\n    )\n  },\n)\n\n/**\n * Use Grid to create flexible and responsive grid-based layouts\n * @see https://primer.style/brand/components/Grid\n * @example\n *   <Grid>\n *     <Grid.Column span=\"6\">\n *       ...\n *     </Grid.Column>\n *   </Grid>\n */\nexport const Grid = Object.assign(_GridRoot, {\n  Column,\n  testIds,\n})\n"],"mappings":";;;;;;;;AAiBA,IAAM,IAAU,EACd,MAAM,QACP,EAgDK,IAAY,GACf,EACC,cACA,aACA,QAAK,OACL,eAAY,IACZ,mBAAgB,IAChB,mBAAgB,IAChB,eAAY,WACZ,YAAS,WACR,eAAgB,GACjB,GAAG,QAC+B;CAClC,IAAM,IAAY,EAChB,EAAO,MACP,EAAO,mBAAmB,MAC1B,EAAO,gBAAgB,MACvB,KAAiB,EAAO,sBACxB,KAAa,EAAO,qBACpB,KAAiB,EAAO,sBACxB,EACD,EAEK,IAAY,EAAM,EAAO;AAK/B,QACE,kBAHgB;EADK;EAAO;EAAQ;EACpB,CAAc,SAAS,EAAG,GAAG,IAAK,OAGlD;EACE,WAAW;EACX,eAAa,KAAU,GAAG,EAAQ,KAAK,GAAG;EAC1C,GAAK;EAEJ;EACS,CAAA;EAGjB,EAYK,IAAS,GACZ,EAAC,aAAU,QAAK,OAAO,UAAO,IAAI,UAAO,cAAW,GAAG,QAA8C;CAEpG,IAAM,IAAY;EADK;EAAO;EAAQ;EACpB,CAAc,SAAS,EAAG,GAAG,IAAK,OAE9C,IAAmB,CAAC,EAAO,aAAgB;AAEjD,KAAI,OAAO,KAAS,SAClB,GAAiB,KAAK,EAAO,sBAAsB,KAAQ;UAClD,OAAO,KAAS,SACzB,MAAK,IAAM,CAAC,GAAK,MAAU,OAAO,QAAQ,EAAK,CAC7C,CAAI,MAAQ,WACV,EAAiB,KAAK,EAAO,6BAA6B,KAAS,GAEnE,EAAiB,KAAK,EAAO,iBAAiB,EAAI,QAAQ,KAAS;AAKzE,KAAI,OAAO,KAAU,SACnB,GAAiB,KAAK,EAAO,uBAAuB,KAAS;UACpD,OAAO,KAAU,SAC1B,MAAK,IAAM,CAAC,GAAK,MAAU,OAAO,QAAQ,EAAM,CAC9C,CAAI,MAAQ,WACV,EAAiB,KAAK,EAAO,8BAA8B,KAAS,GAEpE,EAAiB,KAAK,EAAO,iBAAiB,EAAI,SAAS,KAAS;AAM1E,QACE,kBAAC,GAAD;EAAW,WAFG,EAAK,GAAkB,EAEf;EAAS,GAAI;EAChC;EACS,CAAA;EAGjB,EAYY,IAAO,OAAO,OAAO,GAAW;CAC3C;CACA;CACD,CAAC"}
+{"version":3,"file":"Grid.js","names":[],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["import React, {HTMLAttributes, PropsWithChildren, memo} from 'react'\nimport type {JSX} from 'react'\n\nimport {clsx} from 'clsx'\n\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/grid/grid.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/grid/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Grid.module.css'\nimport {useId} from '../hooks/useId'\n\nconst testIds = {\n  root: 'Grid',\n}\n\ntype ResponsiveMap = {\n  xsmall?: GridColumnIndex\n  small?: GridColumnIndex\n  medium?: GridColumnIndex\n  large?: GridColumnIndex\n  xlarge?: GridColumnIndex\n  xxlarge?: GridColumnIndex\n}\n\nexport type GridColumnIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n\nexport type GridProps<T extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<T> & {\n  /**\n   * The HTML element used to render the grid.\n   */\n  as?: T | 'div' | 'span' | 'section'\n  /**\n   * Visual aid to help with alignment.\n   */\n  enableOverlay?: boolean\n  /**\n   * Enable/disable default gutters\n   */\n  enableGutters?: boolean\n  /**\n   * Sets the gap between columns.\n   */\n  columnGap?: 'none' | 'default'\n  /**\n   * Sets the gap between rows.\n   */\n  rowGap?: 'none' | 'default'\n  /**\n   * Fills the width of the parent container and removes the max-width.\n   */\n  fullWidth?: boolean\n  /**\n   * Test id for the root element.\n   */\n  ['data-testid']?: string\n} & (T extends 'span'\n    ? BaseProps<HTMLSpanElement>\n    : T extends 'section'\n    ? BaseProps<HTMLElement>\n    : BaseProps<HTMLDivElement>)\n\nconst _GridRoot = memo(\n  ({\n    className,\n    children,\n    as = 'div',\n    fullWidth = false,\n    enableOverlay = false,\n    enableGutters = true,\n    columnGap = 'default',\n    rowGap = 'default',\n    ['data-testid']: testId,\n    ...rest\n  }: PropsWithChildren<GridProps>) => {\n    const gridClass = clsx(\n      styles.Grid,\n      styles[`Grid--columnGap-${columnGap}`],\n      styles[`Grid--rowGap-${rowGap}`],\n      enableOverlay && styles['Grid--has-overlay'],\n      fullWidth && styles['Grid--full-width'],\n      enableGutters && styles['Grid--has-gutters'],\n      className,\n    )\n\n    const testIdUID = useId(testId)\n\n    const validElements = ['div', 'span', 'section']\n    const Component = validElements.includes(as) ? as : 'div'\n\n    return (\n      <Component\n        className={gridClass}\n        data-testid={testId || `${testIds.root}-${testIdUID}`}\n        {...(rest as HTMLAttributes<HTMLElement>)}\n      >\n        {children}\n      </Component>\n    )\n  },\n)\n\ntype GridColumnProps<T extends keyof JSX.IntrinsicElements = 'div'> = {\n  as?: T | 'div' | 'span' | 'section'\n  span?: GridColumnIndex | ResponsiveMap\n  start?: GridColumnIndex | ResponsiveMap\n} & (T extends 'span'\n  ? BaseProps<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement>\n  : T extends 'section'\n  ? BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement>\n  : BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>)\n\nconst Column = memo(\n  ({children, as = 'div', span = 12, start, className, ...rest}: PropsWithChildren<GridColumnProps>) => {\n    const validElements = ['div', 'span', 'section']\n    const Component = validElements.includes(as) ? as : 'div'\n\n    const columnClassArray = [styles['Grid__column']]\n\n    if (typeof span === 'number') {\n      columnClassArray.push(styles[`Grid__column--span-${span}`])\n    } else if (typeof span === 'object') {\n      for (const [key, value] of Object.entries(span)) {\n        if (key === 'xsmall') {\n          columnClassArray.push(styles[`Grid__column--xsmall-span-${value}`])\n        } else {\n          columnClassArray.push(styles[`Grid__column--${key}-span-${value}`])\n        }\n      }\n    }\n\n    if (typeof start === 'number') {\n      columnClassArray.push(styles[`Grid__column--start-${start}`])\n    } else if (typeof start === 'object') {\n      for (const [key, value] of Object.entries(start)) {\n        if (key === 'xsmall') {\n          columnClassArray.push(styles[`Grid__column--xsmall-start-${value}`])\n        } else {\n          columnClassArray.push(styles[`Grid__column--${key}-start-${value}`])\n        }\n      }\n    }\n\n    const classes = clsx(columnClassArray, className)\n    return (\n      <Component className={classes} {...rest}>\n        {children}\n      </Component>\n    )\n  },\n)\n\n/**\n * Use Grid to create flexible and responsive grid-based layouts\n * @see https://primer.style/brand/components/Grid\n * @example\n *   <Grid>\n *     <Grid.Column span=\"6\">\n *       ...\n *     </Grid.Column>\n *   </Grid>\n */\nexport const Grid = Object.assign(_GridRoot, {\n  Column,\n  testIds,\n})\n"],"mappings":";;;;;;;;AAiBA,IAAM,IAAU,EACd,MAAM,OACR,GAgDM,IAAY,GACf,EACC,cACA,aACA,QAAK,OACL,eAAY,IACZ,mBAAgB,IAChB,mBAAgB,IAChB,eAAY,WACZ,YAAS,WACR,eAAgB,GACjB,GAAG,QAC+B;CAClC,IAAM,IAAY,EAChB,EAAO,MACP,EAAO,mBAAmB,MAC1B,EAAO,gBAAgB,MACvB,KAAiB,EAAO,sBACxB,KAAa,EAAO,qBACpB,KAAiB,EAAO,sBACxB,CACF,GAEM,IAAY,EAAM,CAAM;CAK9B,OACE,kBAHgB;EADK;EAAO;EAAQ;CACpB,CAAA,CAAc,SAAS,CAAE,IAAI,IAAK,OAGlD;EACE,WAAW;EACX,eAAa,KAAU,GAAG,EAAQ,KAAK,GAAG;EAC1C,GAAK;EAEJ;CACQ,CAAA;AAEf,CACF,GAYM,IAAS,GACZ,EAAC,aAAU,QAAK,OAAO,UAAO,IAAI,UAAO,cAAW,GAAG,QAA8C;CAEpG,IAAM,IAAY;EADK;EAAO;EAAQ;CACpB,CAAA,CAAc,SAAS,CAAE,IAAI,IAAK,OAE9C,IAAmB,CAAC,EAAO,YAAe;CAEhD,IAAI,OAAO,KAAS,UAClB,EAAiB,KAAK,EAAO,sBAAsB,IAAO;MACrD,IAAI,OAAO,KAAS,UACzB,KAAK,IAAM,CAAC,GAAK,MAAU,OAAO,QAAQ,CAAI,GAC5C,AAAI,MAAQ,WACV,EAAiB,KAAK,EAAO,6BAA6B,IAAQ,IAElE,EAAiB,KAAK,EAAO,iBAAiB,EAAI,QAAQ,IAAQ;CAKxE,IAAI,OAAO,KAAU,UACnB,EAAiB,KAAK,EAAO,uBAAuB,IAAQ;MACvD,IAAI,OAAO,KAAU,UAC1B,KAAK,IAAM,CAAC,GAAK,MAAU,OAAO,QAAQ,CAAK,GAC7C,AAAI,MAAQ,WACV,EAAiB,KAAK,EAAO,8BAA8B,IAAQ,IAEnE,EAAiB,KAAK,EAAO,iBAAiB,EAAI,SAAS,IAAQ;CAMzE,OACE,kBAAC,GAAD;EAAW,WAFG,EAAK,GAAkB,CAEf;EAAS,GAAI;EAChC;CACQ,CAAA;AAEf,CACF,GAYa,IAAO,OAAO,OAAO,GAAW;CAC3C;CACA;AACF,CAAC"}

package/esm/Grid/Grid.module.js

@@ -1,11 +1,12 @@
-import './Grid.module-wbqYcimR.css';var e = {
-	Grid: "Primer_Brand__Grid-module__Grid___H4Yx1",
+import './Grid.module-wbqYcimR.css';//#region src/Grid/Grid.module.css
+var e = "Primer_Brand__Grid-module__Grid___H4Yx1", t = "Primer_Brand__Grid-module__Grid__column___bCs9w", n = {
+	Grid: e,
 	"Grid--columnGap-default": "Primer_Brand__Grid-module__Grid--columnGap-default___8j2YD",
 	"Grid--columnGap-none": "Primer_Brand__Grid-module__Grid--columnGap-none___65Ui8",
 	"Grid--rowGap-default": "Primer_Brand__Grid-module__Grid--rowGap-default___N2Nw3",
 	"Grid--rowGap-none": "Primer_Brand__Grid-module__Grid--rowGap-none___z0LWC",
 	"Grid--full-width": "Primer_Brand__Grid-module__Grid--full-width___G_Ie6",
-	Grid__column: "Primer_Brand__Grid-module__Grid__column___bCs9w",
+	Grid__column: t,
 	"Grid--has-overlay": "Primer_Brand__Grid-module__Grid--has-overlay___gHvxU",
 	"Grid--has-gutters": "Primer_Brand__Grid-module__Grid--has-gutters___VMoP7",
 	"Grid__column--span-1": "Primer_Brand__Grid-module__Grid__column--span-1___xENuz",
@@ -178,6 +179,6 @@ import './Grid.module-wbqYcimR.css';var e = {
 	"Grid__column--xxlarge-start-12": "Primer_Brand__Grid-module__Grid__column--xxlarge-start-12___UkQLu"
 };
 //#endregion
-export { e as default };
+export { e as Grid, t as Grid__column, n as default };
 
 //# sourceMappingURL=Grid.module.js.map

package/esm/Heading/Heading.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useAnimation as t } from "../animation/useAnimation.js";
 import n from "./Heading.module.js";
 import { forwardRef as r, useMemo as i } from "react";

package/esm/Heading/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","names":[],"sources":["../../src/Heading/Heading.tsx"],"sourcesContent":["import React, {PropsWithChildren, forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Heading.module.css'\nimport type {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\nexport const HeadingSizes = ['display', '1', '2', '3', '4', '5', '6', 'subhead-large', 'subhead-medium'] as const\nexport const HeadingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const\n\nexport const HeadingWeights = [\n  'heavy',\n  'extrabold',\n  'bold',\n  'semibold',\n  'medium',\n  'normal',\n  'light',\n  'extralight',\n] as const\nexport const HeadingStretch = ['condensed', 'normal', 'expanded'] as const\nexport const HeadingLetterSpacing = ['condensed', 'normal', 'none'] as const\nexport const HeadingFontVariants = ['mona-sans', 'hubot-sans', 'monospace'] as const\n\nexport const defaultHeadingTag = HeadingTags[1]\nexport const defaultHeadingFont = HeadingFontVariants[0]\n\ntype HeadingWeightVariants = (typeof HeadingWeights)[number]\ntype HeadingStretchVariants = (typeof HeadingStretch)[number]\ntype HeadingLetterSpacingVariants = (typeof HeadingLetterSpacing)[number]\ntype HeadingFontVariants = (typeof HeadingFontVariants)[number]\ntype HeadingTextWrapVariants = 'wrap' | 'balance'\n\ntype ResponsiveStretchMap = {\n  narrow?: HeadingStretchVariants\n  regular?: HeadingStretchVariants\n  wide?: HeadingStretchVariants\n}\n\ntype ResponsiveLetterSpacingMap = {\n  narrow?: HeadingLetterSpacingVariants\n  regular?: HeadingLetterSpacingVariants\n  wide?: HeadingLetterSpacingVariants\n}\n\ntype ResponsiveWeightMap = {\n  narrow?: HeadingWeightVariants\n  regular?: HeadingWeightVariants\n  wide?: HeadingWeightVariants\n}\n\nexport const classMap = {\n  h1: HeadingSizes[1],\n  h2: HeadingSizes[2],\n  h3: HeadingSizes[3],\n  h4: HeadingSizes[4],\n  h5: HeadingSizes[5],\n  h6: HeadingSizes[6],\n}\n\nexport type HeadingProps = {\n  /** Semantic heading level (`h1`–`h6`) only. Use `size` to apply the correct visual size. */\n  as?: (typeof HeadingTags)[number]\n  /**\n   * Controls the visual size, independent of `as`. Should be used whenever as prop is used, as the defaults may not be ideal for all use-cases.\n   *\n   * @example\n   * <Heading as=\"h2\" size=\"4\">This h2 will appear visually identical to an h4</Heading>\n   */\n  size?: (typeof HeadingSizes)[number]\n  weight?: HeadingWeightVariants | ResponsiveWeightMap\n  stretch?: HeadingStretchVariants | ResponsiveStretchMap\n  letterSpacing?: HeadingLetterSpacingVariants | ResponsiveLetterSpacingMap\n  font?: HeadingFontVariants\n  textWrap?: HeadingTextWrapVariants\n} & React.HTMLAttributes<HTMLHeadingElement> &\n  BaseProps<HTMLHeadingElement>\n\n/**\n * Use the heading component to render titles or subtitle text.\n */\nexport const Heading = forwardRef<HTMLHeadingElement, PropsWithChildren<HeadingProps>>(\n  (\n    {\n      animate,\n      className,\n      children,\n      as: HeadingComponent = defaultHeadingTag,\n      size,\n      letterSpacing,\n      weight,\n      stretch,\n      style,\n      font = 'mona-sans',\n      textWrap = 'balance',\n      ...rest\n    },\n    ref,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const buildClass = (type: string, value) => {\n      if (!value) return null\n      return typeof value === 'string'\n        ? styles[`Heading--${type}-${value}`]\n        : Object.keys(value)\n            .map(viewport => {\n              return styles[`Heading-${viewport}--${type}-${value[viewport]}`]\n            })\n            .join(' ')\n    }\n\n    const weightClass = useMemo(() => buildClass('weight', weight), [weight])\n    const stretchClass = useMemo(() => buildClass('stretch', stretch), [stretch])\n    const letterSpacingClass = useMemo(() => buildClass('letter-spacing', letterSpacing), [letterSpacing])\n\n    const headingClassNames = clsx(\n      animationClasses,\n      styles.Heading,\n      styles[`Heading-font--${font}`],\n      !size && styles[`Heading--${classMap[HeadingComponent]}`],\n      size && styles[`Heading--${size}`],\n      styles[`Heading--textWrap-${textWrap}`],\n      weight && weightClass,\n      stretch && stretchClass,\n      letterSpacingClass && letterSpacingClass,\n      className,\n    )\n\n    if (!HeadingTags.includes(HeadingComponent)) {\n      // eslint-disable-next-line no-console\n      console.error(`Heading: 'as' prop must be one of ${HeadingTags.join(', ')}`)\n      return null\n    }\n\n    return (\n      <HeadingComponent ref={ref} className={headingClassNames} style={{...animationInlineStyles, ...style}} {...rest}>\n        {children}\n      </HeadingComponent>\n    )\n  },\n)\n"],"mappings":";;;;;;AAMA,IAAa,IAAe;CAAC;CAAW;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAiB;CAAiB,EAC3F,IAAc;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAK,EAElD,IAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACY,IAAiB;CAAC;CAAa;CAAU;CAAW,EACpD,IAAuB;CAAC;CAAa;CAAU;CAAO,EACtD,IAAsB;CAAC;CAAa;CAAc;CAAY,EAE9D,IAAoB,EAAY,IAChC,IAAqB,EAAoB,IA0BzC,IAAW;CACtB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CAClB,EAuBY,IAAU,GAEnB,EACE,YACA,cACA,aACA,IAAI,IAAmB,GACvB,SACA,kBACA,WACA,YACA,UACA,UAAO,aACP,cAAW,WACX,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,KAAc,GAAc,MAC3B,IACE,OAAO,KAAU,WACpB,EAAO,YAAY,EAAK,GAAG,OAC3B,OAAO,KAAK,EAAM,CACf,KAAI,MACI,EAAO,WAAW,EAAS,IAAI,EAAK,GAAG,EAAM,MACpD,CACD,KAAK,IAAI,GAPG,MAUf,IAAc,QAAc,EAAW,UAAU,EAAO,EAAE,CAAC,EAAO,CAAC,EACnE,IAAe,QAAc,EAAW,WAAW,EAAQ,EAAE,CAAC,EAAQ,CAAC,EACvE,IAAqB,QAAc,EAAW,kBAAkB,EAAc,EAAE,CAAC,EAAc,CAAC,EAEhG,IAAoB,EACxB,GACA,EAAO,SACP,EAAO,iBAAiB,MACxB,CAAC,KAAQ,EAAO,YAAY,EAAS,OACrC,KAAQ,EAAO,YAAY,MAC3B,EAAO,qBAAqB,MAC5B,KAAU,GACV,KAAW,GACX,KAAsB,GACtB,EACD;AAQD,QANK,EAAY,SAAS,EAAiB,GAOzC,kBAAC,GAAD;EAAuB;EAAK,WAAW;EAAmB,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAAE,GAAI;EACxG;EACgB,CAAA,IAPnB,QAAQ,MAAM,qCAAqC,EAAY,KAAK,KAAK,GAAG,EACrE;EASZ"}
+{"version":3,"file":"Heading.js","names":[],"sources":["../../src/Heading/Heading.tsx"],"sourcesContent":["import React, {PropsWithChildren, forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Heading.module.css'\nimport type {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\nexport const HeadingSizes = ['display', '1', '2', '3', '4', '5', '6', 'subhead-large', 'subhead-medium'] as const\nexport const HeadingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const\n\nexport const HeadingWeights = [\n  'heavy',\n  'extrabold',\n  'bold',\n  'semibold',\n  'medium',\n  'normal',\n  'light',\n  'extralight',\n] as const\nexport const HeadingStretch = ['condensed', 'normal', 'expanded'] as const\nexport const HeadingLetterSpacing = ['condensed', 'normal', 'none'] as const\nexport const HeadingFontVariants = ['mona-sans', 'hubot-sans', 'monospace'] as const\n\nexport const defaultHeadingTag = HeadingTags[1]\nexport const defaultHeadingFont = HeadingFontVariants[0]\n\ntype HeadingWeightVariants = (typeof HeadingWeights)[number]\ntype HeadingStretchVariants = (typeof HeadingStretch)[number]\ntype HeadingLetterSpacingVariants = (typeof HeadingLetterSpacing)[number]\ntype HeadingFontVariants = (typeof HeadingFontVariants)[number]\ntype HeadingTextWrapVariants = 'wrap' | 'balance'\n\ntype ResponsiveStretchMap = {\n  narrow?: HeadingStretchVariants\n  regular?: HeadingStretchVariants\n  wide?: HeadingStretchVariants\n}\n\ntype ResponsiveLetterSpacingMap = {\n  narrow?: HeadingLetterSpacingVariants\n  regular?: HeadingLetterSpacingVariants\n  wide?: HeadingLetterSpacingVariants\n}\n\ntype ResponsiveWeightMap = {\n  narrow?: HeadingWeightVariants\n  regular?: HeadingWeightVariants\n  wide?: HeadingWeightVariants\n}\n\nexport const classMap = {\n  h1: HeadingSizes[1],\n  h2: HeadingSizes[2],\n  h3: HeadingSizes[3],\n  h4: HeadingSizes[4],\n  h5: HeadingSizes[5],\n  h6: HeadingSizes[6],\n}\n\nexport type HeadingProps = {\n  /** Semantic heading level (`h1`–`h6`) only. Use `size` to apply the correct visual size. */\n  as?: (typeof HeadingTags)[number]\n  /**\n   * Controls the visual size, independent of `as`. Should be used whenever as prop is used, as the defaults may not be ideal for all use-cases.\n   *\n   * @example\n   * <Heading as=\"h2\" size=\"4\">This h2 will appear visually identical to an h4</Heading>\n   */\n  size?: (typeof HeadingSizes)[number]\n  weight?: HeadingWeightVariants | ResponsiveWeightMap\n  stretch?: HeadingStretchVariants | ResponsiveStretchMap\n  letterSpacing?: HeadingLetterSpacingVariants | ResponsiveLetterSpacingMap\n  font?: HeadingFontVariants\n  textWrap?: HeadingTextWrapVariants\n} & React.HTMLAttributes<HTMLHeadingElement> &\n  BaseProps<HTMLHeadingElement>\n\n/**\n * Use the heading component to render titles or subtitle text.\n */\nexport const Heading = forwardRef<HTMLHeadingElement, PropsWithChildren<HeadingProps>>(\n  (\n    {\n      animate,\n      className,\n      children,\n      as: HeadingComponent = defaultHeadingTag,\n      size,\n      letterSpacing,\n      weight,\n      stretch,\n      style,\n      font = 'mona-sans',\n      textWrap = 'balance',\n      ...rest\n    },\n    ref,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const buildClass = (type: string, value) => {\n      if (!value) return null\n      return typeof value === 'string'\n        ? styles[`Heading--${type}-${value}`]\n        : Object.keys(value)\n            .map(viewport => {\n              return styles[`Heading-${viewport}--${type}-${value[viewport]}`]\n            })\n            .join(' ')\n    }\n\n    const weightClass = useMemo(() => buildClass('weight', weight), [weight])\n    const stretchClass = useMemo(() => buildClass('stretch', stretch), [stretch])\n    const letterSpacingClass = useMemo(() => buildClass('letter-spacing', letterSpacing), [letterSpacing])\n\n    const headingClassNames = clsx(\n      animationClasses,\n      styles.Heading,\n      styles[`Heading-font--${font}`],\n      !size && styles[`Heading--${classMap[HeadingComponent]}`],\n      size && styles[`Heading--${size}`],\n      styles[`Heading--textWrap-${textWrap}`],\n      weight && weightClass,\n      stretch && stretchClass,\n      letterSpacingClass && letterSpacingClass,\n      className,\n    )\n\n    if (!HeadingTags.includes(HeadingComponent)) {\n      // eslint-disable-next-line no-console\n      console.error(`Heading: 'as' prop must be one of ${HeadingTags.join(', ')}`)\n      return null\n    }\n\n    return (\n      <HeadingComponent ref={ref} className={headingClassNames} style={{...animationInlineStyles, ...style}} {...rest}>\n        {children}\n      </HeadingComponent>\n    )\n  },\n)\n"],"mappings":";;;;;;AAMA,IAAa,IAAe;CAAC;CAAW;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAiB;AAAgB,GAC1F,IAAc;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;AAAI,GAEjD,IAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACa,IAAiB;CAAC;CAAa;CAAU;AAAU,GACnD,IAAuB;CAAC;CAAa;CAAU;AAAM,GACrD,IAAsB;CAAC;CAAa;CAAc;AAAW,GAE7D,IAAoB,EAAY,IAChC,IAAqB,EAAoB,IA0BzC,IAAW;CACtB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;AACnB,GAuBa,IAAU,GAEnB,EACE,YACA,cACA,aACA,IAAI,IAAmB,GACvB,SACA,kBACA,WACA,YACA,UACA,UAAO,aACP,cAAW,WACX,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,CAAO,GAEjF,KAAc,GAAc,MAC3B,IACE,OAAO,KAAU,WACpB,EAAO,YAAY,EAAK,GAAG,OAC3B,OAAO,KAAK,CAAK,CAAC,CACf,KAAI,MACI,EAAO,WAAW,EAAS,IAAI,EAAK,GAAG,EAAM,KACrD,CAAC,CACD,KAAK,GAAG,IAPI,MAUf,IAAc,QAAc,EAAW,UAAU,CAAM,GAAG,CAAC,CAAM,CAAC,GAClE,IAAe,QAAc,EAAW,WAAW,CAAO,GAAG,CAAC,CAAO,CAAC,GACtE,IAAqB,QAAc,EAAW,kBAAkB,CAAa,GAAG,CAAC,CAAa,CAAC,GAE/F,IAAoB,EACxB,GACA,EAAO,SACP,EAAO,iBAAiB,MACxB,CAAC,KAAQ,EAAO,YAAY,EAAS,OACrC,KAAQ,EAAO,YAAY,MAC3B,EAAO,qBAAqB,MAC5B,KAAU,GACV,KAAW,GACX,KAAsB,GACtB,CACF;CAQA,OANK,EAAY,SAAS,CAAgB,IAOxC,kBAAC,GAAD;EAAuB;EAAK,WAAW;EAAmB,OAAO;GAAC,GAAG;GAAuB,GAAG;EAAK;EAAG,GAAI;EACxG;CACe,CAAA,KAPlB,QAAQ,MAAM,qCAAqC,EAAY,KAAK,IAAI,GAAG,GACpE;AAQX,CACF"}

package/esm/Heading/Heading.module.js

@@ -1,5 +1,6 @@
-import './Heading.module-YfiTxQkR.css';var e = {
-	Heading: "Primer_Brand__Heading-module__Heading___fudyh",
+import './Heading.module-YfiTxQkR.css';//#region src/Heading/Heading.module.css
+var e = "Primer_Brand__Heading-module__Heading___fudyh", t = {
+	Heading: e,
 	"Heading--textWrap-balance": "Primer_Brand__Heading-module__Heading--textWrap-balance___XJ9OD",
 	"Heading--textWrap-wrap": "Primer_Brand__Heading-module__Heading--textWrap-wrap___OlXJ0",
 	"Heading-font--hubot-sans": "Primer_Brand__Heading-module__Heading-font--hubot-sans___wXzzm",
@@ -73,6 +74,6 @@ import './Heading.module-YfiTxQkR.css';var e = {
 	"Heading-wide--letter-spacing-none": "Primer_Brand__Heading-module__Heading-wide--letter-spacing-none___Mtq_D"
 };
 //#endregion
-export { e as default };
+export { e as Heading, t as default };
 
 //# sourceMappingURL=Heading.module.js.map

package/esm/Hero/Hero.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Grid as t } from "../Grid/Grid.js";
 import { AnimationProvider as n } from "../animation/AnimationProvider/AnimationProvider.js";
 import { Stack as r } from "../Stack/Stack.js";

package/esm/Hero/Hero.js.map

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