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

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":";;;;;;;;;;;;;;;;;;;;AA+BA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,QAAQ;AACV,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,eAAe;AACjB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAoBK,IAAO,GAET,EACE,cACA,OAAO,IAAY,SACnB,aACA,4BACA,wBACA,sBACA,yBACA,aAAU,WACV,mBAAmB,GACnB,qBAAkB,IAClB,eAAe,IACf,GAAG,KAEL,MACG;CACH,IAAM,EACJ,gBACA,0BACA,kBACA,mBACA,mBACA,uBACA,4BACE,QAAc;EAChB,IAAM,IAAS,EAAM,SAAS,QAAQ,EAAS,CAAC,QAS7C,GAAK,OACA,EAAM,eAAe,EAAM,KACzB,EAAM,SAAS,KAAqB,EAAM,SAAS,IACrD,EAAI,YAAY,KAAK,EAAM,GAClB,EAAM,SAAS,IACxB,EAAI,uBAAuB,IAClB,EAAM,SAAS,IACxB,EAAI,iBAAiB,IACZ,EAAM,SAAS,IACxB,EAAI,iBAAiB,KAErB,EAAI,aAAa,KAAK,EAAM,EACxB,EAAM,SAAS,KAAa,EAAM,SAAS,KAAe,EAAM,SAAS,IAC3E,EAAI,mBAAmB,KAAK,EAAM,GACzB,EAAM,SAAS,MACxB,EAAI,uBAAuB,MAI1B,IAET;GACE,aAAa,EAAE;GACf,sBAAsB,KAAA;GACtB,cAAc,EAAE;GAChB,gBAAgB,KAAA;GAChB,gBAAgB,KAAA;GAChB,oBAAoB,EAAE;GACtB,sBAAsB,KAAA;GACvB,CACF;AAOD,SAJI,EAAO,kBAAkB,EAAO,mBAClC,EAAO,iBAAiB,KAAA,IAGnB;IACN,CAAC,EAAS,CAAC,EAER,IAAoB,GAAgB,MAAM,YAAY,GAAgB,MAAM,UAE5E,IACA,MAAY,yBAAyB,GAAmB,WAAW,UAAU,IAC/E,QAAA,IAAA,aAA6B,gBAE3B,QAAQ,KACN,yDAAyD,EAAkB,wCAC5E,EAEI,eAEF,KAAqB,aAExB,KAAwB,GAAgB,MAAM,gBAAgB,GAAgB,MAAM,gBAAgB,IACpG,IAAe,GAAgB,MAAM,WAAW,GAAgB,MAAM,WAAW,WACjF,IAAiB,EAA+B,SAAS,EAAyC,EAClG,IAAa,KAAkB,GAC/B,IAAa,MAAY,YACzB,IAAuB,MAAY,uBACnC,IAAqB,MAAkB;AAE7C,CACE,MAAY,aACZ,MAAiB,cAAA,QAAA,IAAA,aACS,iBAAA,QAAA,IAAA,aAA0C,WAGpE,QAAQ,KACN,iHAAiH,EAAa,IAC/H;CAGH,IAAM,IAA6B,KAAwB,MAAc,UACnE,IAAmB,IAA6B,UAAU;AAEhE,CAAI,MAAA,QAAA,IAAA,aAAwD,iBAAA,QAAA,IAAA,aAA0C,WAEpG,QAAQ,KAAK,wGAAkG;CAGjH,IAAM,MAAO,KAAc,MAAyB,IAAkB,IAAoB,IACpF,MACH,KAAc,MAAyB,IACpC;EACE,qBAAqB;EACrB,kBAAkB;EACnB,GACD,EAAE,EAEF,KAAsB,KAAc,MAAyB,GAC7D,IAAoB,KAAc,GAElC,KAAkB,IAAiB,EAAO,wBAAwB,EAAO,yBACzE,IAAgB,MAAkB,gBAElC,KAA2B,MAC/B,KACE,kBAAC,IAAD;EAAK,SAAS,IAAgB;GAAC,SAAS;GAAwB,OAAO;GAAM,UAAU;GAAK,GAAG,KAAA;YAC7F,kBAAC,OAAD;GAAK,WAAW,EAAO;aACrB,kBAAC,GAAD,EAAqB,CAAA;GACjB,CAAA;EACF,CAAA,EAGJ,UACJ,kBAAA,GAAA,EAAA,UAAA,CACG,IACA,EAAY,SAAS,KAAK,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAkB;EAAkB,CAAA,CACrF,EAAA,CAAA;AAGL,QACE,kBAAC,IAAD;EAAK,GAAI;YACP,kBAAC,EAAY,UAAb;GAAsB,OAAO;IAAC,eAAe;IAAe;IAAS;IAAO;IAAgB;IAAgB;aAC1G,kBAAC,WAAD;IACE,WAAW,EACT,EAAO,MACP,EAAO,iBAAiB,MACxB,CAAC,KAAkB,EAAO,eAAe,MACzC,KACC,KAAkB,MAAmB,EAAO,mBAAmB,OAC/D,KAAkB,MAAmB,KAAkB,EAAO,2BAC/D,KAAqB,EAAO,kCAC5B,EACD;IACI;IACL,mBAAgB;IAChB,eAAa,MAAU,EAAQ;IAC/B,GAAI;cAdN,CAgBE,kBAAC,GAAD;KACE,WAAW,CAAC,KAAsB,CAAC;KACnC,eAAa,EAAQ;KACrB,WAAW,EACT,EAAO,cACP,EAAO,cAAc,MACrB,KAAsB,CAAC,KAAwB,EAAO,yBACtD,KAAqB,EAAO,+BAC5B,KAAwB,EAAO,yBAChC;eAEA,IACC,kBAAA,GAAA,EAAA,UAAA,CAEE,kBAAC,EAAK,QAAN;MACE,MAAM;OAAC,QAAQ;OAAI,OAAO,IAAuB,IAAI;OAAE;MACvD,WAAW,EAAO;gBAElB,kBAAC,GAAD;OAAO,WAAU;OAAW,KAAI;OAAO,SAAQ;OAAO,YAAW;iBAC9D;OACK,CAAA;MACI,CAAA,EAEd,kBAAC,EAAK,QAAN;MACE,MAAM;OAAC,QAAQ;OAAI,OAAO,IAAuB,IAAI;OAAE;MACvD,WAAW,EAAO;gBAElB,kBAAC,GAAD;OAAO,WAAU;OAAW,KAAI;OAAO,SAAQ;OAAO,YAAW;iBAAjE;QACG;QACA,GAAe;QACf,EAAwB,EAAgB;QACnC;;MACI,CAAA,CACb,EAAA,CAAA,GAEH,kBAAA,GAAA,EAAA,UAAA;MAEG,KAAiB,KAAc,CAAC,KAC/B,kBAAC,EAAK,QAAN;OACE,KAAK;OACL,MAAM,EAAC,OAAO,GAAE;OAChB,WAAW,EACT,KACE,MAAiB,UACjB,EAAO,2BAA2B,MACpC,KACE,MAAiB,SACjB,EAAO,4CACT,KACE,MAAiB,UACjB,EAAO,6CACT,KAAqB,EAAO,wCAC7B;iBAED,kBAAC,OAAD;QACE,WAAW,EAAK,EAAO,wBAAwB,EAAwB;QACvE,OAAO;kBAEN;QACG,CAAA;OACM,CAAA;MAEhB,kBAAC,EAAK,QAAN;OAAa,MAAM,EAAC,OAAO,KAAc,IAAiB,IAAI,IAAG;iBAC/D,kBAAC,GAAD;QACE,WAAW,EACT,KAAqB,EAAO,sCAC5B,KAAqB,EAAO,uCAC7B;QACD,WAAU;QACV,KAAI;QACJ,SAAQ;QACR,YAAY,KAAgC,MAAU,UAAzB,eAAkD;QAC/E,gBAAgB,IAAiB,KAAA,IAAY,MAAU,UAAU,eAAe;kBATlF;SAWG;SACA,GAAe;SACf,EAAwB,KAAc,EAAgB;SACjD;;OACI,CAAA;MACb,CAAC,KAAiB,KAAc,CAAC,KAChC,kBAAC,EAAK,QAAN;OACE,KAAK;OACL,MAAM,EAAC,OAAO,IAAiB,IAAI,IAAG;OACtC,WAAW,EACT,KACE,MAAiB,UACjB,EAAO,2BAA2B,MACpC,KACE,MAAiB,SACjB,EAAO,4CACT,KACE,MAAiB,UACjB,EAAO,6CACT,KAAqB,EAAO,wCAC7B;iBAED,kBAAC,OAAD;QACE,WAAW,EAAK,EAAO,wBAAwB,EAAwB;QACvE,OAAO;kBAEN;QACG,CAAA;OACM,CAAA;MAEf,EAAA,CAAA;KAEA,CAAA,EACN,KAAc,KACb,kBAAC,OAAD;KACE,KAAK;KACL,eAAa,EAAQ;KACrB,WAAW,EACT,EAAO,sBACP,GACA,KACE,MAAiB,UACjB,EAAO,yBAAyB,MAClC,MAAiB,UAAU,EAAO,mCACnC;KACD,OAAO;eAEP,kBAAC,OAAD;MACE,WAAW,EACT,EAAO,4BACP,MAAiB,SAAS,EAAO,yCACjC,MAAiB,UAAU,EAAO,0CAClC,MAAyB,EAAO,0CACjC;gBAEA;MACG,CAAA;KACF,CAAA,CAEA;;GACW,CAAA;EACnB,CAAA;EAGX,EAEY,IAAO,OAAO,OAAO,GAAM;CACtC,SAAS;CACT,aAAa;CACb,aAAa;CAKb,eAAe;CAKf,iBAAiB;CACjB,OAAO;CACP,OAAO;CACP,OAAO;CACP,SAAS;CACT;CACD,CAAC"}
+{"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":";;;;;;;;;;;;;;;;;;;;AA+BA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,QAAQ;EACV,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,eAAe;EACjB,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAoBM,IAAO,GAET,EACE,cACA,OAAO,IAAY,SACnB,aACA,4BACA,wBACA,sBACA,yBACA,aAAU,WACV,mBAAmB,GACnB,qBAAkB,IAClB,eAAe,IACf,GAAG,KAEL,MACG;CACH,IAAM,EACJ,gBACA,0BACA,kBACA,mBACA,mBACA,uBACA,4BACE,QAAc;EAChB,IAAM,IAAS,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAAC,QAS7C,GAAK,OACA,EAAM,eAAe,CAAK,MACxB,EAAM,SAAS,KAAqB,EAAM,SAAS,IACrD,EAAI,YAAY,KAAK,CAAK,IACjB,EAAM,SAAS,IACxB,EAAI,uBAAuB,IAClB,EAAM,SAAS,IACxB,EAAI,iBAAiB,IACZ,EAAM,SAAS,IACxB,EAAI,iBAAiB,KAErB,EAAI,aAAa,KAAK,CAAK,GACvB,EAAM,SAAS,KAAa,EAAM,SAAS,KAAe,EAAM,SAAS,IAC3E,EAAI,mBAAmB,KAAK,CAAK,IACxB,EAAM,SAAS,MACxB,EAAI,uBAAuB,MAI1B,IAET;GACE,aAAa,CAAC;GACd,sBAAsB,KAAA;GACtB,cAAc,CAAC;GACf,gBAAgB,KAAA;GAChB,gBAAgB,KAAA;GAChB,oBAAoB,CAAC;GACrB,sBAAsB,KAAA;EACxB,CACF;EAOA,OAJI,EAAO,kBAAkB,EAAO,mBAClC,EAAO,iBAAiB,KAAA,IAGnB;CACT,GAAG,CAAC,CAAQ,CAAC,GAEP,IAAoB,GAAgB,MAAM,YAAY,GAAgB,MAAM,UAE5E,IACA,MAAY,yBAAyB,GAAmB,WAAW,SAAS,KAC9E,QAAA,IAAA,aAA6B,gBAE3B,QAAQ,KACN,yDAAyD,EAAkB,uCAC7E,GAEK,eAEF,KAAqB,aAExB,KAAwB,GAAgB,MAAM,gBAAgB,GAAgB,MAAM,gBAAgB,IACpG,IAAe,GAAgB,MAAM,WAAW,GAAgB,MAAM,WAAW,WACjF,IAAiB,EAA+B,SAAS,CAAwC,GACjG,IAAa,KAAkB,GAC/B,IAAa,MAAY,YACzB,IAAuB,MAAY,uBACnC,IAAqB,MAAkB;CAE7C,AACE,MAAY,aACZ,MAAiB,cAAA,QAAA,IAAA,aACS,iBAAA,QAAA,IAAA,aAA0C,WAGpE,QAAQ,KACN,iHAAiH,EAAa,GAChI;CAGF,IAAM,IAA6B,KAAwB,MAAc,UACnE,IAAmB,IAA6B,UAAU;CAEhE,AAAI,MAAA,QAAA,IAAA,aAAwD,iBAAA,QAAA,IAAA,aAA0C,WAEpG,QAAQ,KAAK,uGAAiG;CAGhH,IAAM,MAAO,KAAc,MAAyB,IAAkB,IAAoB,IACpF,MACH,KAAc,MAAyB,IACpC;EACE,qBAAqB;EACrB,kBAAkB;CACpB,IACA,CAAC,GAED,KAAsB,KAAc,MAAyB,GAC7D,IAAoB,KAAc,GAElC,KAAkB,IAAiB,EAAO,wBAAwB,EAAO,yBACzE,IAAgB,MAAkB,gBAElC,KAA2B,MAC/B,KACE,kBAAC,IAAD;EAAK,SAAS,IAAgB;GAAC,SAAS;GAAwB,OAAO;GAAM,UAAU;EAAI,IAAI,KAAA;YAC7F,kBAAC,OAAD;GAAK,WAAW,EAAO;aACrB,kBAAC,GAAD,CAAoB,CAAA;EACjB,CAAA;CACF,CAAA,GAGH,UACJ,kBAAA,GAAA,EAAA,UAAA,CACG,IACA,EAAY,SAAS,KAAK,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAkB;CAAiB,CAAA,CACrF,EAAA,CAAA;CAGJ,OACE,kBAAC,IAAD;EAAK,GAAI;YACP,kBAAC,EAAY,UAAb;GAAsB,OAAO;IAAC,eAAe;IAAe;IAAS;IAAO;IAAgB;GAAe;aACzG,kBAAC,WAAD;IACE,WAAW,EACT,EAAO,MACP,EAAO,iBAAiB,MACxB,CAAC,KAAkB,EAAO,eAAe,MACzC,KACC,KAAkB,MAAmB,EAAO,mBAAmB,OAC/D,KAAkB,MAAmB,KAAkB,EAAO,2BAC/D,KAAqB,EAAO,kCAC5B,CACF;IACK;IACL,mBAAgB;IAChB,eAAa,MAAU,EAAQ;IAC/B,GAAI;cAdN,CAgBE,kBAAC,GAAD;KACE,WAAW,CAAC,KAAsB,CAAC;KACnC,eAAa,EAAQ;KACrB,WAAW,EACT,EAAO,cACP,EAAO,cAAc,MACrB,KAAsB,CAAC,KAAwB,EAAO,yBACtD,KAAqB,EAAO,+BAC5B,KAAwB,EAAO,wBACjC;eAEC,IACC,kBAAA,GAAA,EAAA,UAAA,CAEE,kBAAC,EAAK,QAAN;MACE,MAAM;OAAC,QAAQ;OAAI,OAAO,IAAuB,IAAI;MAAC;MACtD,WAAW,EAAO;gBAElB,kBAAC,GAAD;OAAO,WAAU;OAAW,KAAI;OAAO,SAAQ;OAAO,YAAW;iBAC9D;MACI,CAAA;KACI,CAAA,GAEb,kBAAC,EAAK,QAAN;MACE,MAAM;OAAC,QAAQ;OAAI,OAAO,IAAuB,IAAI;MAAC;MACtD,WAAW,EAAO;gBAElB,kBAAC,GAAD;OAAO,WAAU;OAAW,KAAI;OAAO,SAAQ;OAAO,YAAW;iBAAjE;QACG;QACA,EAAc;QACd,EAAwB,CAAe;OACnC;;KACI,CAAA,CACb,EAAA,CAAA,IAEF,kBAAA,GAAA,EAAA,UAAA;MAEG,KAAiB,KAAc,CAAC,KAC/B,kBAAC,EAAK,QAAN;OACE,KAAK;OACL,MAAM,EAAC,OAAO,EAAC;OACf,WAAW,EACT,KACE,MAAiB,UACjB,EAAO,2BAA2B,MACpC,KACE,MAAiB,SACjB,EAAO,4CACT,KACE,MAAiB,UACjB,EAAO,6CACT,KAAqB,EAAO,uCAC9B;iBAEA,kBAAC,OAAD;QACE,WAAW,EAAK,EAAO,wBAAwB,CAAuB;QACtE,OAAO;kBAEN;OACE,CAAA;MACM,CAAA;MAEf,kBAAC,EAAK,QAAN;OAAa,MAAM,EAAC,OAAO,KAAc,IAAiB,IAAI,GAAE;iBAC9D,kBAAC,GAAD;QACE,WAAW,EACT,KAAqB,EAAO,sCAC5B,KAAqB,EAAO,sCAC9B;QACA,WAAU;QACV,KAAI;QACJ,SAAQ;QACR,YAAY,KAAgC,MAAU,UAAzB,eAAkD;QAC/E,gBAAgB,IAAiB,KAAA,IAAY,MAAU,UAAU,eAAe;kBATlF;SAWG;SACA,EAAc;SACd,EAAwB,KAAc,CAAe;QACjD;;MACI,CAAA;MACZ,CAAC,KAAiB,KAAc,CAAC,KAChC,kBAAC,EAAK,QAAN;OACE,KAAK;OACL,MAAM,EAAC,OAAO,IAAiB,IAAI,GAAE;OACrC,WAAW,EACT,KACE,MAAiB,UACjB,EAAO,2BAA2B,MACpC,KACE,MAAiB,SACjB,EAAO,4CACT,KACE,MAAiB,UACjB,EAAO,6CACT,KAAqB,EAAO,uCAC9B;iBAEA,kBAAC,OAAD;QACE,WAAW,EAAK,EAAO,wBAAwB,CAAuB;QACtE,OAAO;kBAEN;OACE,CAAA;MACM,CAAA;KAEf,EAAA,CAAA;IAEA,CAAA,GACL,KAAc,KACb,kBAAC,OAAD;KACE,KAAK;KACL,eAAa,EAAQ;KACrB,WAAW,EACT,EAAO,sBACP,GACA,KACE,MAAiB,UACjB,EAAO,yBAAyB,MAClC,MAAiB,UAAU,EAAO,kCACpC;KACA,OAAO;eAEP,kBAAC,OAAD;MACE,WAAW,EACT,EAAO,4BACP,MAAiB,SAAS,EAAO,yCACjC,MAAiB,UAAU,EAAO,0CAClC,MAAyB,EAAO,yCAClC;gBAEC;KACE,CAAA;IACF,CAAA,CAEA;;EACW,CAAA;CACnB,CAAA;AAET,CACF,GAEa,IAAO,OAAO,OAAO,GAAM;CACtC,SAAS;CACT,aAAa;CACb,aAAa;CAKb,eAAe;CAKf,iBAAiB;CACjB,OAAO;CACP,OAAO;CACP,OAAO;CACP,SAAS;CACT;AACF,CAAC"}

package/esm/Hero/Hero.module.js

@@ -1,5 +1,6 @@
-import './Hero.module-BfrAFYlo.css';var e = {
-	Hero: "Primer_Brand__Hero-module__Hero___It6gj",
+import './Hero.module-BfrAFYlo.css';//#region src/Hero/Hero.module.css
+var e = "Primer_Brand__Hero-module__Hero___It6gj", t = {
+	Hero: e,
 	"Hero--variant-default": "Primer_Brand__Hero-module__Hero--variant-default___lNgHw",
 	"Hero--align-start": "Primer_Brand__Hero-module__Hero--align-start___ouSp3",
 	"Hero--align-center": "Primer_Brand__Hero-module__Hero--align-center___6FMoH",
@@ -55,6 +56,6 @@ import './Hero.module-BfrAFYlo.css';var e = {
 	"Hero-expressive-body-column": "Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_"
 };
 //#endregion
-export { e as default };
+export { e as Hero, t as default };
 
 //# sourceMappingURL=Hero.module.js.map

package/esm/Hero/HeroContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroContext.js","names":[],"sources":["../../src/Hero/HeroContext.ts"],"sourcesContent":["import React from 'react'\n\nexport const HeroAlignOptions = ['start', 'center'] as const\nexport type HeroAlign = (typeof HeroAlignOptions)[number]\n\nexport const HeroVariantOptions = ['default', 'gridline', 'gridline-expressive'] as const\nexport type HeroVariant = (typeof HeroVariantOptions)[number]\n\nexport const HeroMediaPaddingOptions = ['default', 'none', 'all'] as const\nexport type HeroMediaPadding = (typeof HeroMediaPaddingOptions)[number]\n\nexport const HeroMediaPositionOptions = ['block-end', 'inline-start', 'inline-end'] as const\nexport const HeroMediaInlinePositionOptions = ['inline-start', 'inline-end'] as const\nexport type HeroMediaPosition = (typeof HeroMediaPositionOptions)[number]\nexport type HeroMediaInlinePosition = (typeof HeroMediaInlinePositionOptions)[number]\n\ntype HeroContextType = {\n  /**\n   * The active variant of the Hero component\n   */\n  variant: HeroVariant\n  /**\n   * The alignment of the Hero content\n   */\n  align: HeroAlign\n  /**\n   * Image position within the Hero\n   */\n  imagePosition: HeroMediaPosition\n  /**\n   * Hero.Image is an inline media position\n   */\n  hasInlineMedia: boolean\n  /**\n   * Whether animation is enabled for the Hero\n   */\n  enableAnimation: boolean\n}\n\nexport const HeroContext = React.createContext<HeroContextType | undefined>(undefined)\n\nexport const useHeroContext = (): HeroContextType => {\n  const context = React.useContext(HeroContext)\n  if (!context) {\n    throw new Error('useHeroContext must be used within a HeroProvider')\n  }\n\n  return context\n}\n"],"mappings":";;AAYA,IAAa,IAAiC,CAAC,gBAAgB,aAAa,EA2B/D,IAAc,EAAM,cAA2C,KAAA,EAAU,EAEzE,UAAwC;CACnD,IAAM,IAAU,EAAM,WAAW,EAAY;AAC7C,KAAI,CAAC,EACH,OAAU,MAAM,oDAAoD;AAGtE,QAAO"}
+{"version":3,"file":"HeroContext.js","names":[],"sources":["../../src/Hero/HeroContext.ts"],"sourcesContent":["import React from 'react'\n\nexport const HeroAlignOptions = ['start', 'center'] as const\nexport type HeroAlign = (typeof HeroAlignOptions)[number]\n\nexport const HeroVariantOptions = ['default', 'gridline', 'gridline-expressive'] as const\nexport type HeroVariant = (typeof HeroVariantOptions)[number]\n\nexport const HeroMediaPaddingOptions = ['default', 'none', 'all'] as const\nexport type HeroMediaPadding = (typeof HeroMediaPaddingOptions)[number]\n\nexport const HeroMediaPositionOptions = ['block-end', 'inline-start', 'inline-end'] as const\nexport const HeroMediaInlinePositionOptions = ['inline-start', 'inline-end'] as const\nexport type HeroMediaPosition = (typeof HeroMediaPositionOptions)[number]\nexport type HeroMediaInlinePosition = (typeof HeroMediaInlinePositionOptions)[number]\n\ntype HeroContextType = {\n  /**\n   * The active variant of the Hero component\n   */\n  variant: HeroVariant\n  /**\n   * The alignment of the Hero content\n   */\n  align: HeroAlign\n  /**\n   * Image position within the Hero\n   */\n  imagePosition: HeroMediaPosition\n  /**\n   * Hero.Image is an inline media position\n   */\n  hasInlineMedia: boolean\n  /**\n   * Whether animation is enabled for the Hero\n   */\n  enableAnimation: boolean\n}\n\nexport const HeroContext = React.createContext<HeroContextType | undefined>(undefined)\n\nexport const useHeroContext = (): HeroContextType => {\n  const context = React.useContext(HeroContext)\n  if (!context) {\n    throw new Error('useHeroContext must be used within a HeroProvider')\n  }\n\n  return context\n}\n"],"mappings":";;AAYA,IAAa,IAAiC,CAAC,gBAAgB,YAAY,GA2B9D,IAAc,EAAM,cAA2C,KAAA,CAAS,GAExE,UAAwC;CACnD,IAAM,IAAU,EAAM,WAAW,CAAW;CAC5C,IAAI,CAAC,GACH,MAAU,MAAM,mDAAmD;CAGrE,OAAO;AACT"}

package/esm/Hero/sub-components/HeroButtonGroup.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 { Box as t } from "../../Box/Box.js";
 import { useHeroContext as n } from "../HeroContext.js";
 import r from "../Hero.module.js";

package/esm/Hero/sub-components/HeroButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroButtonGroup.js","names":[],"sources":["../../../src/Hero/sub-components/HeroButtonGroup.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport {Box} from '../../Box'\nimport {ButtonGroup} from '../../ButtonGroup'\nimport {useHeroContext} from '../HeroContext'\n\nimport styles from '../Hero.module.css'\n\nexport type HeroButtonGroupProps = React.ComponentProps<typeof ButtonGroup>\n\nexport const HeroButtonGroup = forwardRef<HTMLDivElement, HeroButtonGroupProps>(\n  ({className, children, ...props}, ref) => {\n    const {variant, enableAnimation} = useHeroContext()\n    const isGridline = variant === 'gridline' || variant === 'gridline-expressive'\n    const Tag = isGridline ? Box : React.Fragment\n    const tagProps = isGridline\n      ? {\n          animate: enableAnimation\n            ? {\n                variant: 'slide-in-up' as const,\n                delay: 750,\n                duration: 1000,\n              }\n            : undefined,\n        }\n      : {}\n\n    return (\n      <Tag {...tagProps}>\n        <ButtonGroup ref={ref} className={clsx(styles['Hero-actions'], className)} {...props}>\n          {children}\n        </ButtonGroup>\n      </Tag>\n    )\n  },\n)\n"],"mappings":";;;;;;;;AAUA,IAAa,IAAkB,GAC5B,EAAC,cAAW,aAAU,GAAG,KAAQ,MAAQ;CACxC,IAAM,EAAC,YAAS,uBAAmB,GAAgB,EAC7C,IAAa,MAAY,cAAc,MAAY;AAczD,QACE,kBAdU,IAAa,IAAM,EAAM,UAcnC;EAAK,GAbU,IACb,EACE,SAAS,IACL;GACE,SAAS;GACT,OAAO;GACP,UAAU;GACX,GACD,KAAA,GACL,GACD,EAAE;YAIF,kBAAC,GAAD;GAAkB;GAAK,WAAW,EAAK,EAAO,iBAAiB,EAAU;GAAE,GAAI;GAC5E;GACW,CAAA;EACV,CAAA;EAGX"}
+{"version":3,"file":"HeroButtonGroup.js","names":[],"sources":["../../../src/Hero/sub-components/HeroButtonGroup.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport {Box} from '../../Box'\nimport {ButtonGroup} from '../../ButtonGroup'\nimport {useHeroContext} from '../HeroContext'\n\nimport styles from '../Hero.module.css'\n\nexport type HeroButtonGroupProps = React.ComponentProps<typeof ButtonGroup>\n\nexport const HeroButtonGroup = forwardRef<HTMLDivElement, HeroButtonGroupProps>(\n  ({className, children, ...props}, ref) => {\n    const {variant, enableAnimation} = useHeroContext()\n    const isGridline = variant === 'gridline' || variant === 'gridline-expressive'\n    const Tag = isGridline ? Box : React.Fragment\n    const tagProps = isGridline\n      ? {\n          animate: enableAnimation\n            ? {\n                variant: 'slide-in-up' as const,\n                delay: 750,\n                duration: 1000,\n              }\n            : undefined,\n        }\n      : {}\n\n    return (\n      <Tag {...tagProps}>\n        <ButtonGroup ref={ref} className={clsx(styles['Hero-actions'], className)} {...props}>\n          {children}\n        </ButtonGroup>\n      </Tag>\n    )\n  },\n)\n"],"mappings":";;;;;;;;AAUA,IAAa,IAAkB,GAC5B,EAAC,cAAW,aAAU,GAAG,KAAQ,MAAQ;CACxC,IAAM,EAAC,YAAS,uBAAmB,EAAe,GAC5C,IAAa,MAAY,cAAc,MAAY;CAczD,OACE,kBAdU,IAAa,IAAM,EAAM,UAcnC;EAAK,GAbU,IACb,EACE,SAAS,IACL;GACE,SAAS;GACT,OAAO;GACP,UAAU;EACZ,IACA,KAAA,EACN,IACA,CAAC;YAID,kBAAC,GAAD;GAAkB;GAAK,WAAW,EAAK,EAAO,iBAAiB,CAAS;GAAG,GAAI;GAC5E;EACU,CAAA;CACV,CAAA;AAET,CACF"}

package/esm/Hero/sub-components/HeroDescription.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 { useHeroContext as t } from "../HeroContext.js";
 import { Text as n } from "../../Text/Text.js";
 import r from "../Hero.module.js";

package/esm/Hero/sub-components/HeroDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroDescription.js","names":[],"sources":["../../../src/Hero/sub-components/HeroDescription.tsx"],"sourcesContent":["import {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {Text, TextSizes, TextWeightVariants, ResponsiveWeightMap, TextProps} from '../../Text'\nimport type {BaseProps} from '../../component-helpers'\n\nimport styles from '../Hero.module.css'\nimport {useHeroContext} from '../HeroContext'\n\nexport type HeroDescriptionProps = {\n  size?: (typeof TextSizes)[number]\n  weight?: TextWeightVariants | ResponsiveWeightMap\n} & BaseProps<HTMLParagraphElement> &\n  TextProps\n\nexport const HeroDescription = forwardRef<HTMLParagraphElement, PropsWithChildren<HeroDescriptionProps>>(\n  (\n    {size = '200', weight = 'normal', children, variant = 'muted', className}: PropsWithChildren<HeroDescriptionProps>,\n    ref,\n  ) => {\n    const {variant: heroVariant, enableAnimation} = useHeroContext()\n    const isGridlineVariant = heroVariant === 'gridline' || heroVariant === 'gridline-expressive'\n\n    return (\n      <Text\n        animate={\n          isGridlineVariant && enableAnimation\n            ? {\n                variant: 'slide-in-up',\n                delay: 500,\n                duration: 1000,\n              }\n            : undefined\n        }\n        ref={ref}\n        className={clsx(styles['Hero-description'], className)}\n        as=\"p\"\n        size={size}\n        weight={weight}\n        variant={variant}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n"],"mappings":";;;;;;;AAcA,IAAa,IAAkB,GAE3B,EAAC,UAAO,OAAO,YAAS,UAAU,aAAU,aAAU,SAAS,gBAC/D,MACG;CACH,IAAM,EAAC,SAAS,GAAa,uBAAmB,GAAgB;AAGhE,QACE,kBAAC,GAAD;EACE,UAJsB,MAAgB,cAAc,MAAgB,0BAK7C,IACjB;GACE,SAAS;GACT,OAAO;GACP,UAAU;GACX,GACD,KAAA;EAED;EACL,WAAW,EAAK,EAAO,qBAAqB,EAAU;EACtD,IAAG;EACG;EACE;EACC;EAER;EACI,CAAA;EAGZ"}
+{"version":3,"file":"HeroDescription.js","names":[],"sources":["../../../src/Hero/sub-components/HeroDescription.tsx"],"sourcesContent":["import {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {Text, TextSizes, TextWeightVariants, ResponsiveWeightMap, TextProps} from '../../Text'\nimport type {BaseProps} from '../../component-helpers'\n\nimport styles from '../Hero.module.css'\nimport {useHeroContext} from '../HeroContext'\n\nexport type HeroDescriptionProps = {\n  size?: (typeof TextSizes)[number]\n  weight?: TextWeightVariants | ResponsiveWeightMap\n} & BaseProps<HTMLParagraphElement> &\n  TextProps\n\nexport const HeroDescription = forwardRef<HTMLParagraphElement, PropsWithChildren<HeroDescriptionProps>>(\n  (\n    {size = '200', weight = 'normal', children, variant = 'muted', className}: PropsWithChildren<HeroDescriptionProps>,\n    ref,\n  ) => {\n    const {variant: heroVariant, enableAnimation} = useHeroContext()\n    const isGridlineVariant = heroVariant === 'gridline' || heroVariant === 'gridline-expressive'\n\n    return (\n      <Text\n        animate={\n          isGridlineVariant && enableAnimation\n            ? {\n                variant: 'slide-in-up',\n                delay: 500,\n                duration: 1000,\n              }\n            : undefined\n        }\n        ref={ref}\n        className={clsx(styles['Hero-description'], className)}\n        as=\"p\"\n        size={size}\n        weight={weight}\n        variant={variant}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n"],"mappings":";;;;;;;AAcA,IAAa,IAAkB,GAE3B,EAAC,UAAO,OAAO,YAAS,UAAU,aAAU,aAAU,SAAS,gBAC/D,MACG;CACH,IAAM,EAAC,SAAS,GAAa,uBAAmB,EAAe;CAG/D,OACE,kBAAC,GAAD;EACE,UAJsB,MAAgB,cAAc,MAAgB,0BAK7C,IACjB;GACE,SAAS;GACT,OAAO;GACP,UAAU;EACZ,IACA,KAAA;EAED;EACL,WAAW,EAAK,EAAO,qBAAqB,CAAS;EACrD,IAAG;EACG;EACE;EACC;EAER;CACG,CAAA;AAEV,CACF"}

package/esm/Hero/sub-components/HeroEyebrow.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 t from "../Hero.module.js";
 import { forwardRef as n } from "react";
 import { jsx as r } from "react/jsx-runtime";

package/esm/Hero/sub-components/HeroEyebrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroEyebrow.js","names":[],"sources":["../../../src/Hero/sub-components/HeroEyebrow.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../../component-helpers'\n\nimport styles from '../Hero.module.css'\n\nexport type HeroEyebrowProps = PropsWithChildren<BaseProps<HTMLDivElement>>\n\nexport const HeroEyebrow = forwardRef<HTMLDivElement, HeroEyebrowProps>(\n  ({children, className, ...rest}: PropsWithChildren<HeroEyebrowProps>, ref) => {\n    return (\n      <div ref={ref} className={clsx(styles['Hero-eyebrow'], className)} {...rest}>\n        {children}\n      </div>\n    )\n  },\n)\n"],"mappings":";;;;;AAQA,IAAa,IAAc,GACxB,EAAC,aAAU,cAAW,GAAG,KAA4C,MAElE,kBAAC,OAAD;CAAU;CAAK,WAAW,EAAK,EAAO,iBAAiB,EAAU;CAAE,GAAI;CACpE;CACG,CAAA,CAGX"}
+{"version":3,"file":"HeroEyebrow.js","names":[],"sources":["../../../src/Hero/sub-components/HeroEyebrow.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../../component-helpers'\n\nimport styles from '../Hero.module.css'\n\nexport type HeroEyebrowProps = PropsWithChildren<BaseProps<HTMLDivElement>>\n\nexport const HeroEyebrow = forwardRef<HTMLDivElement, HeroEyebrowProps>(\n  ({children, className, ...rest}: PropsWithChildren<HeroEyebrowProps>, ref) => {\n    return (\n      <div ref={ref} className={clsx(styles['Hero-eyebrow'], className)} {...rest}>\n        {children}\n      </div>\n    )\n  },\n)\n"],"mappings":";;;;;AAQA,IAAa,IAAc,GACxB,EAAC,aAAU,cAAW,GAAG,KAA4C,MAElE,kBAAC,OAAD;CAAU;CAAK,WAAW,EAAK,EAAO,iBAAiB,CAAS;CAAG,GAAI;CACpE;AACE,CAAA,CAGX"}

package/esm/Hero/sub-components/HeroHeading.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 { useHeroContext as t } from "../HeroContext.js";
 import n from "../Hero.module.js";
 import { Heading as r } from "../../Heading/Heading.js";

package/esm/Hero/sub-components/HeroHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroHeading.js","names":[],"sources":["../../../src/Hero/sub-components/HeroHeading.tsx"],"sourcesContent":["import {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps} from '../../Heading'\nimport {useHeroContext} from '../HeroContext'\n\nimport styles from '../Hero.module.css'\n\nexport type HeroHeadingProps = Omit<HeadingProps, 'as'> & {\n  fullWidth?: boolean\n}\n\nexport const HeroHeading = forwardRef<HTMLHeadingElement, HeroHeadingProps>(\n  ({children, fullWidth = false, size = '1', ...rest}: PropsWithChildren<HeroHeadingProps>, ref) => {\n    const {hasInlineMedia, variant: heroVariant, enableAnimation} = useHeroContext()\n    const isGridlineVariant = heroVariant === 'gridline' || heroVariant === 'gridline-expressive'\n\n    return (\n      <Heading\n        animate={\n          isGridlineVariant && enableAnimation\n            ? {\n                variant: 'reveal-in-up',\n                delay: 0,\n                duration: 1000,\n              }\n            : undefined\n        }\n        id=\"hero-section-brand-heading\"\n        className={clsx(styles['Hero-heading'], fullWidth && styles['Hero-heading--fullWidth'])}\n        as=\"h1\"\n        size={hasInlineMedia ? '2' : size}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n"],"mappings":";;;;;;;AAWA,IAAa,IAAc,GACxB,EAAC,aAAU,eAAY,IAAO,UAAO,KAAK,GAAG,KAA4C,MAAQ;CAChG,IAAM,EAAC,mBAAgB,SAAS,GAAa,uBAAmB,GAAgB;AAGhF,QACE,kBAAC,GAAD;EACE,UAJsB,MAAgB,cAAc,MAAgB,0BAK7C,IACjB;GACE,SAAS;GACT,OAAO;GACP,UAAU;GACX,GACD,KAAA;EAEN,IAAG;EACH,WAAW,EAAK,EAAO,iBAAiB,KAAa,EAAO,2BAA2B;EACvF,IAAG;EACH,MAAM,IAAiB,MAAM;EACxB;EACL,GAAI;EAEH;EACO,CAAA;EAGf"}
+{"version":3,"file":"HeroHeading.js","names":[],"sources":["../../../src/Hero/sub-components/HeroHeading.tsx"],"sourcesContent":["import {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps} from '../../Heading'\nimport {useHeroContext} from '../HeroContext'\n\nimport styles from '../Hero.module.css'\n\nexport type HeroHeadingProps = Omit<HeadingProps, 'as'> & {\n  fullWidth?: boolean\n}\n\nexport const HeroHeading = forwardRef<HTMLHeadingElement, HeroHeadingProps>(\n  ({children, fullWidth = false, size = '1', ...rest}: PropsWithChildren<HeroHeadingProps>, ref) => {\n    const {hasInlineMedia, variant: heroVariant, enableAnimation} = useHeroContext()\n    const isGridlineVariant = heroVariant === 'gridline' || heroVariant === 'gridline-expressive'\n\n    return (\n      <Heading\n        animate={\n          isGridlineVariant && enableAnimation\n            ? {\n                variant: 'reveal-in-up',\n                delay: 0,\n                duration: 1000,\n              }\n            : undefined\n        }\n        id=\"hero-section-brand-heading\"\n        className={clsx(styles['Hero-heading'], fullWidth && styles['Hero-heading--fullWidth'])}\n        as=\"h1\"\n        size={hasInlineMedia ? '2' : size}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n"],"mappings":";;;;;;;AAWA,IAAa,IAAc,GACxB,EAAC,aAAU,eAAY,IAAO,UAAO,KAAK,GAAG,KAA4C,MAAQ;CAChG,IAAM,EAAC,mBAAgB,SAAS,GAAa,uBAAmB,EAAe;CAG/E,OACE,kBAAC,GAAD;EACE,UAJsB,MAAgB,cAAc,MAAgB,0BAK7C,IACjB;GACE,SAAS;GACT,OAAO;GACP,UAAU;EACZ,IACA,KAAA;EAEN,IAAG;EACH,WAAW,EAAK,EAAO,iBAAiB,KAAa,EAAO,0BAA0B;EACtF,IAAG;EACH,MAAM,IAAiB,MAAM;EACxB;EACL,GAAI;EAEH;CACM,CAAA;AAEb,CACF"}

package/esm/Hero/sub-components/HeroImage.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 { useHeroContext as t } from "../HeroContext.js";
 import n from "../Hero.module.js";
 import { Image as r } from "../../Image/Image.js";

package/esm/Hero/sub-components/HeroImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroImage.js","names":[],"sources":["../../../src/Hero/sub-components/HeroImage.tsx"],"sourcesContent":["import {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport {Image, ImageProps} from '../../Image'\nimport type {BaseProps} from '../../component-helpers'\nimport {useHeroContext, type HeroMediaPadding, type HeroMediaPosition} from '../HeroContext'\n\nimport styles from '../Hero.module.css'\n\nexport type HeroImageProps = {\n  position?: HeroMediaPosition\n  padding?: HeroMediaPadding\n  enableBorder?: boolean\n} & ImageProps &\n  BaseProps<HTMLImageElement>\n\nexport const HeroImage = forwardRef<HTMLImageElement, HeroImageProps>(\n  ({position = 'block-end', padding = 'default', className, enableBorder, ...rest}: HeroImageProps, ref) => {\n    const {variant: heroVariant, enableAnimation} = useHeroContext()\n    const isInlinePosition = position.startsWith('inline')\n    return (\n      <Image\n        animate={\n          heroVariant === 'gridline' && enableAnimation\n            ? {\n                variant: 'slide-in-up',\n                delay: 0,\n                duration: 1000,\n              }\n            : undefined\n        }\n        ref={ref}\n        className={clsx(\n          styles['Hero-image'],\n          styles['Hero-media'],\n          styles[`Hero-media--pos-${position}`],\n          isInlinePosition && styles['Hero-media--pos-inline'],\n          padding === 'all' && styles['Hero-media--padding-all'],\n          padding === 'none' && styles['Hero-media--padding-none'],\n          className,\n        )}\n        {...rest}\n      />\n    )\n  },\n)\n"],"mappings":";;;;;;;AAeA,IAAa,IAAY,GACtB,EAAC,cAAW,aAAa,aAAU,WAAW,cAAW,iBAAc,GAAG,KAAuB,MAAQ;CACxG,IAAM,EAAC,SAAS,GAAa,uBAAmB,GAAgB,EAC1D,IAAmB,EAAS,WAAW,SAAS;AACtD,QACE,kBAAC,GAAD;EACE,SACE,MAAgB,cAAc,IAC1B;GACE,SAAS;GACT,OAAO;GACP,UAAU;GACX,GACD,KAAA;EAED;EACL,WAAW,EACT,EAAO,eACP,EAAO,eACP,EAAO,mBAAmB,MAC1B,KAAoB,EAAO,2BAC3B,MAAY,SAAS,EAAO,4BAC5B,MAAY,UAAU,EAAO,6BAC7B,EACD;EACD,GAAI;EACJ,CAAA;EAGP"}
+{"version":3,"file":"HeroImage.js","names":[],"sources":["../../../src/Hero/sub-components/HeroImage.tsx"],"sourcesContent":["import {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport {Image, ImageProps} from '../../Image'\nimport type {BaseProps} from '../../component-helpers'\nimport {useHeroContext, type HeroMediaPadding, type HeroMediaPosition} from '../HeroContext'\n\nimport styles from '../Hero.module.css'\n\nexport type HeroImageProps = {\n  position?: HeroMediaPosition\n  padding?: HeroMediaPadding\n  enableBorder?: boolean\n} & ImageProps &\n  BaseProps<HTMLImageElement>\n\nexport const HeroImage = forwardRef<HTMLImageElement, HeroImageProps>(\n  ({position = 'block-end', padding = 'default', className, enableBorder, ...rest}: HeroImageProps, ref) => {\n    const {variant: heroVariant, enableAnimation} = useHeroContext()\n    const isInlinePosition = position.startsWith('inline')\n    return (\n      <Image\n        animate={\n          heroVariant === 'gridline' && enableAnimation\n            ? {\n                variant: 'slide-in-up',\n                delay: 0,\n                duration: 1000,\n              }\n            : undefined\n        }\n        ref={ref}\n        className={clsx(\n          styles['Hero-image'],\n          styles['Hero-media'],\n          styles[`Hero-media--pos-${position}`],\n          isInlinePosition && styles['Hero-media--pos-inline'],\n          padding === 'all' && styles['Hero-media--padding-all'],\n          padding === 'none' && styles['Hero-media--padding-none'],\n          className,\n        )}\n        {...rest}\n      />\n    )\n  },\n)\n"],"mappings":";;;;;;;AAeA,IAAa,IAAY,GACtB,EAAC,cAAW,aAAa,aAAU,WAAW,cAAW,iBAAc,GAAG,KAAuB,MAAQ;CACxG,IAAM,EAAC,SAAS,GAAa,uBAAmB,EAAe,GACzD,IAAmB,EAAS,WAAW,QAAQ;CACrD,OACE,kBAAC,GAAD;EACE,SACE,MAAgB,cAAc,IAC1B;GACE,SAAS;GACT,OAAO;GACP,UAAU;EACZ,IACA,KAAA;EAED;EACL,WAAW,EACT,EAAO,eACP,EAAO,eACP,EAAO,mBAAmB,MAC1B,KAAoB,EAAO,2BAC3B,MAAY,SAAS,EAAO,4BAC5B,MAAY,UAAU,EAAO,6BAC7B,CACF;EACA,GAAI;CACL,CAAA;AAEL,CACF"}

package/esm/Hero/sub-components/HeroLabel.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 { useHeroContext as t } from "../HeroContext.js";
 import { TextCursorAnimation as n } from "../../TextCursorAnimation/TextCursorAnimation.js";
 import r from "../Hero.module.js";

package/esm/Hero/sub-components/HeroLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroLabel.js","names":[],"sources":["../../../src/Hero/sub-components/HeroLabel.tsx"],"sourcesContent":["import {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {TextProps} from '../../Text'\nimport type {BaseProps} from '../../component-helpers'\nimport {TextCursorAnimation} from '../../TextCursorAnimation'\n\nimport styles from '../Hero.module.css'\nimport {useHeroContext} from '../HeroContext'\n\nexport type HeroLabelProps = Omit<TextProps, 'as' | 'ref' | 'animate'> &\n  Omit<BaseProps<HTMLSpanElement>, 'animate'> & {\n    animate?: boolean\n    animationDelay?: number\n    initialText?: string\n  }\n\nexport const HeroLabel = forwardRef<HTMLSpanElement, HeroLabelProps>(\n  (\n    {\n      children,\n      className,\n      variant = 'muted',\n      animate = false,\n      animationDelay = 1000,\n      initialText,\n      ...rest\n    }: PropsWithChildren<HeroLabelProps>,\n    ref,\n  ) => {\n    const {variant: heroVariant, enableAnimation} = useHeroContext()\n    const isGridlineVariant = heroVariant === 'gridline' || heroVariant === 'gridline-expressive'\n\n    const shouldAnimate = enableAnimation || animate\n    const shouldHaveDelay = (isGridlineVariant && enableAnimation) || animate\n\n    return (\n      <span ref={ref} className={clsx(styles['Hero-label'], className)} {...rest}>\n        <TextCursorAnimation\n          variant={variant}\n          animate={shouldAnimate}\n          delay={shouldHaveDelay ? animationDelay : 0}\n          initialText={initialText}\n        >\n          {children}\n        </TextCursorAnimation>\n      </span>\n    )\n  },\n)\n"],"mappings":";;;;;;;AAgBA,IAAa,IAAY,GAErB,EACE,aACA,cACA,aAAU,SACV,aAAU,IACV,oBAAiB,KACjB,gBACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAa,uBAAmB,GAAgB,EAC1D,IAAoB,MAAgB,cAAc,MAAgB,uBAElE,IAAgB,KAAmB,GACnC,IAAmB,KAAqB,KAAoB;AAElE,QACE,kBAAC,QAAD;EAAW;EAAK,WAAW,EAAK,EAAO,eAAe,EAAU;EAAE,GAAI;YACpE,kBAAC,GAAD;GACW;GACT,SAAS;GACT,OAAO,IAAkB,IAAiB;GAC7B;GAEZ;GACmB,CAAA;EACjB,CAAA;EAGZ"}
+{"version":3,"file":"HeroLabel.js","names":[],"sources":["../../../src/Hero/sub-components/HeroLabel.tsx"],"sourcesContent":["import {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {TextProps} from '../../Text'\nimport type {BaseProps} from '../../component-helpers'\nimport {TextCursorAnimation} from '../../TextCursorAnimation'\n\nimport styles from '../Hero.module.css'\nimport {useHeroContext} from '../HeroContext'\n\nexport type HeroLabelProps = Omit<TextProps, 'as' | 'ref' | 'animate'> &\n  Omit<BaseProps<HTMLSpanElement>, 'animate'> & {\n    animate?: boolean\n    animationDelay?: number\n    initialText?: string\n  }\n\nexport const HeroLabel = forwardRef<HTMLSpanElement, HeroLabelProps>(\n  (\n    {\n      children,\n      className,\n      variant = 'muted',\n      animate = false,\n      animationDelay = 1000,\n      initialText,\n      ...rest\n    }: PropsWithChildren<HeroLabelProps>,\n    ref,\n  ) => {\n    const {variant: heroVariant, enableAnimation} = useHeroContext()\n    const isGridlineVariant = heroVariant === 'gridline' || heroVariant === 'gridline-expressive'\n\n    const shouldAnimate = enableAnimation || animate\n    const shouldHaveDelay = (isGridlineVariant && enableAnimation) || animate\n\n    return (\n      <span ref={ref} className={clsx(styles['Hero-label'], className)} {...rest}>\n        <TextCursorAnimation\n          variant={variant}\n          animate={shouldAnimate}\n          delay={shouldHaveDelay ? animationDelay : 0}\n          initialText={initialText}\n        >\n          {children}\n        </TextCursorAnimation>\n      </span>\n    )\n  },\n)\n"],"mappings":";;;;;;;AAgBA,IAAa,IAAY,GAErB,EACE,aACA,cACA,aAAU,SACV,aAAU,IACV,oBAAiB,KACjB,gBACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAa,uBAAmB,EAAe,GACzD,IAAoB,MAAgB,cAAc,MAAgB,uBAElE,IAAgB,KAAmB,GACnC,IAAmB,KAAqB,KAAoB;CAElE,OACE,kBAAC,QAAD;EAAW;EAAK,WAAW,EAAK,EAAO,eAAe,CAAS;EAAG,GAAI;YACpE,kBAAC,GAAD;GACW;GACT,SAAS;GACT,OAAO,IAAkB,IAAiB;GAC7B;GAEZ;EACkB,CAAA;CACjB,CAAA;AAEV,CACF"}

package/esm/Hero/sub-components/HeroPrimaryAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroPrimaryAction.js","names":[],"sources":["../../../src/Hero/sub-components/HeroPrimaryAction.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren} from 'react'\nimport {Button, ButtonBaseProps} from '../../Button'\nimport type {BaseProps} from '../../component-helpers'\nimport {useHeroContext} from '../HeroContext'\nimport {Box} from '../../Box'\n\ntype RestrictedPolymorphism =\n  | (BaseProps<HTMLAnchorElement> & {as?: 'a'})\n  | (BaseProps<HTMLButtonElement> & {as?: 'button'})\n\nexport type HeroPrimaryActionProps = {\n  as?: 'a' | 'button'\n  href: string\n} & ButtonBaseProps &\n  RestrictedPolymorphism\n\nexport const HeroPrimaryAction = forwardRef<\n  HTMLAnchorElement | HTMLButtonElement,\n  PropsWithChildren<HeroPrimaryActionProps>\n>(({href, as = 'a', children, ...rest}, ref) => {\n  const {variant: heroVariant, enableAnimation} = useHeroContext()\n  const isGridline = heroVariant === 'gridline' || heroVariant === 'gridline-expressive'\n  const Tag = isGridline ? Box : React.Fragment\n  const tagProps = isGridline\n    ? {\n        animate: enableAnimation\n          ? {\n              variant: 'slide-in-up' as const,\n              delay: 750,\n              duration: 1000,\n            }\n          : undefined,\n      }\n    : {}\n\n  return (\n    <Tag {...tagProps}>\n      <Button ref={ref as React.Ref<HTMLButtonElement>} as={as} variant=\"primary\" size=\"medium\" href={href} {...rest}>\n        {children}\n      </Button>\n    </Tag>\n  )\n})\n"],"mappings":";;;;;;AAgBA,IAAa,IAAoB,GAG9B,EAAC,SAAM,QAAK,KAAK,aAAU,GAAG,KAAO,MAAQ;CAC9C,IAAM,EAAC,SAAS,GAAa,uBAAmB,GAAgB,EAC1D,IAAa,MAAgB,cAAc,MAAgB;AAcjE,QACE,kBAdU,IAAa,IAAM,EAAM,UAcnC;EAAK,GAbU,IACb,EACE,SAAS,IACL;GACE,SAAS;GACT,OAAO;GACP,UAAU;GACX,GACD,KAAA,GACL,GACD,EAAE;YAIF,kBAAC,GAAD;GAAa;GAAyC;GAAI,SAAQ;GAAU,MAAK;GAAe;GAAM,GAAI;GACvG;GACM,CAAA;EACL,CAAA;EAER"}
+{"version":3,"file":"HeroPrimaryAction.js","names":[],"sources":["../../../src/Hero/sub-components/HeroPrimaryAction.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren} from 'react'\nimport {Button, ButtonBaseProps} from '../../Button'\nimport type {BaseProps} from '../../component-helpers'\nimport {useHeroContext} from '../HeroContext'\nimport {Box} from '../../Box'\n\ntype RestrictedPolymorphism =\n  | (BaseProps<HTMLAnchorElement> & {as?: 'a'})\n  | (BaseProps<HTMLButtonElement> & {as?: 'button'})\n\nexport type HeroPrimaryActionProps = {\n  as?: 'a' | 'button'\n  href: string\n} & ButtonBaseProps &\n  RestrictedPolymorphism\n\nexport const HeroPrimaryAction = forwardRef<\n  HTMLAnchorElement | HTMLButtonElement,\n  PropsWithChildren<HeroPrimaryActionProps>\n>(({href, as = 'a', children, ...rest}, ref) => {\n  const {variant: heroVariant, enableAnimation} = useHeroContext()\n  const isGridline = heroVariant === 'gridline' || heroVariant === 'gridline-expressive'\n  const Tag = isGridline ? Box : React.Fragment\n  const tagProps = isGridline\n    ? {\n        animate: enableAnimation\n          ? {\n              variant: 'slide-in-up' as const,\n              delay: 750,\n              duration: 1000,\n            }\n          : undefined,\n      }\n    : {}\n\n  return (\n    <Tag {...tagProps}>\n      <Button ref={ref as React.Ref<HTMLButtonElement>} as={as} variant=\"primary\" size=\"medium\" href={href} {...rest}>\n        {children}\n      </Button>\n    </Tag>\n  )\n})\n"],"mappings":";;;;;;AAgBA,IAAa,IAAoB,GAG9B,EAAC,SAAM,QAAK,KAAK,aAAU,GAAG,KAAO,MAAQ;CAC9C,IAAM,EAAC,SAAS,GAAa,uBAAmB,EAAe,GACzD,IAAa,MAAgB,cAAc,MAAgB;CAcjE,OACE,kBAdU,IAAa,IAAM,EAAM,UAcnC;EAAK,GAbU,IACb,EACE,SAAS,IACL;GACE,SAAS;GACT,OAAO;GACP,UAAU;EACZ,IACA,KAAA,EACN,IACA,CAAC;YAID,kBAAC,GAAD;GAAa;GAAyC;GAAI,SAAQ;GAAU,MAAK;GAAe;GAAM,GAAI;GACvG;EACK,CAAA;CACL,CAAA;AAET,CAAC"}

package/esm/Hero/sub-components/HeroSecondaryAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroSecondaryAction.js","names":[],"sources":["../../../src/Hero/sub-components/HeroSecondaryAction.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren} from 'react'\nimport {Button, ButtonBaseProps} from '../../Button'\nimport type {BaseProps} from '../../component-helpers'\nimport {Box} from '../..'\nimport {useHeroContext} from '../HeroContext'\n\ntype RestrictedPolymorphism =\n  | (BaseProps<HTMLAnchorElement> & {as?: 'a'})\n  | (BaseProps<HTMLButtonElement> & {as?: 'button'})\n\nexport type HeroSecondaryActionProps = {\n  as?: 'a' | 'button'\n  href: string\n} & ButtonBaseProps &\n  RestrictedPolymorphism\n\nexport const HeroSecondaryAction = forwardRef<\n  HTMLAnchorElement | HTMLButtonElement,\n  PropsWithChildren<HeroSecondaryActionProps>\n>(({href, as = 'a', children, ...rest}, ref) => {\n  const {variant: heroVariant, enableAnimation} = useHeroContext()\n  const isGridline = heroVariant === 'gridline' || heroVariant === 'gridline-expressive'\n  const Tag = isGridline ? Box : React.Fragment\n  const tagProps = isGridline\n    ? {\n        animate: enableAnimation\n          ? {\n              variant: 'slide-in-up' as const,\n              delay: 750,\n              duration: 1000,\n            }\n          : undefined,\n      }\n    : {}\n  return (\n    <Tag {...tagProps}>\n      <Button ref={ref as React.Ref<HTMLButtonElement>} as={as} variant=\"secondary\" size=\"medium\" href={href} {...rest}>\n        {children}\n      </Button>\n    </Tag>\n  )\n})\n"],"mappings":";;;;;;AAgBA,IAAa,IAAsB,GAGhC,EAAC,SAAM,QAAK,KAAK,aAAU,GAAG,KAAO,MAAQ;CAC9C,IAAM,EAAC,SAAS,GAAa,uBAAmB,GAAgB,EAC1D,IAAa,MAAgB,cAAc,MAAgB;AAajE,QACE,kBAbU,IAAa,IAAM,EAAM,UAanC;EAAK,GAZU,IACb,EACE,SAAS,IACL;GACE,SAAS;GACT,OAAO;GACP,UAAU;GACX,GACD,KAAA,GACL,GACD,EAAE;YAGF,kBAAC,GAAD;GAAa;GAAyC;GAAI,SAAQ;GAAY,MAAK;GAAe;GAAM,GAAI;GACzG;GACM,CAAA;EACL,CAAA;EAER"}
+{"version":3,"file":"HeroSecondaryAction.js","names":[],"sources":["../../../src/Hero/sub-components/HeroSecondaryAction.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren} from 'react'\nimport {Button, ButtonBaseProps} from '../../Button'\nimport type {BaseProps} from '../../component-helpers'\nimport {Box} from '../..'\nimport {useHeroContext} from '../HeroContext'\n\ntype RestrictedPolymorphism =\n  | (BaseProps<HTMLAnchorElement> & {as?: 'a'})\n  | (BaseProps<HTMLButtonElement> & {as?: 'button'})\n\nexport type HeroSecondaryActionProps = {\n  as?: 'a' | 'button'\n  href: string\n} & ButtonBaseProps &\n  RestrictedPolymorphism\n\nexport const HeroSecondaryAction = forwardRef<\n  HTMLAnchorElement | HTMLButtonElement,\n  PropsWithChildren<HeroSecondaryActionProps>\n>(({href, as = 'a', children, ...rest}, ref) => {\n  const {variant: heroVariant, enableAnimation} = useHeroContext()\n  const isGridline = heroVariant === 'gridline' || heroVariant === 'gridline-expressive'\n  const Tag = isGridline ? Box : React.Fragment\n  const tagProps = isGridline\n    ? {\n        animate: enableAnimation\n          ? {\n              variant: 'slide-in-up' as const,\n              delay: 750,\n              duration: 1000,\n            }\n          : undefined,\n      }\n    : {}\n  return (\n    <Tag {...tagProps}>\n      <Button ref={ref as React.Ref<HTMLButtonElement>} as={as} variant=\"secondary\" size=\"medium\" href={href} {...rest}>\n        {children}\n      </Button>\n    </Tag>\n  )\n})\n"],"mappings":";;;;;;AAgBA,IAAa,IAAsB,GAGhC,EAAC,SAAM,QAAK,KAAK,aAAU,GAAG,KAAO,MAAQ;CAC9C,IAAM,EAAC,SAAS,GAAa,uBAAmB,EAAe,GACzD,IAAa,MAAgB,cAAc,MAAgB;CAajE,OACE,kBAbU,IAAa,IAAM,EAAM,UAanC;EAAK,GAZU,IACb,EACE,SAAS,IACL;GACE,SAAS;GACT,OAAO;GACP,UAAU;EACZ,IACA,KAAA,EACN,IACA,CAAC;YAGD,kBAAC,GAAD;GAAa;GAAyC;GAAI,SAAQ;GAAY,MAAK;GAAe;GAAM,GAAI;GACzG;EACK,CAAA;CACL,CAAA;AAET,CAAC"}

package/esm/Hero/sub-components/HeroVideo.js

@@ -1,9 +1,9 @@
-import e from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../../node_modules/clsx/dist/clsx.js";
 import { useProvidedRefOrCreate as t } from "../../hooks/useRef.js";
 import { Box as n } from "../../Box/Box.js";
 import { Text as r } from "../../Text/Text.js";
 import i from "../Hero.module.js";
-import { MarkGithubIcon as a } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { MarkGithubIcon as a } from "../../node_modules/@primer/octicons-react/dist/icons/MarkGithubIcon.js";
 import { Image as o } from "../../Image/Image.js";
 import { PlayIcon as s } from "../../VideoPlayer/components/PlayIcon/PlayIcon.js";
 import c, { forwardRef as l } from "react";

package/esm/Hero/sub-components/HeroVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroVideo.js","names":[],"sources":["../../../src/Hero/sub-components/HeroVideo.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../../component-helpers'\nimport type {HeroMediaPadding, HeroMediaPosition} from '../HeroContext'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nimport styles from '../Hero.module.css'\nimport {Box, Image, Text} from '../..'\nimport {PlayIcon} from '../../VideoPlayer/components/PlayIcon'\nimport {MarkGithubIcon} from '@primer/octicons-react'\n\ntype HeroVideoBaseProps = {\n  position?: HeroMediaPosition\n  /**\n   * Controls the padding around media in gridline layouts. `default` preserves the padding recommended for the position.\n   */\n  padding?: HeroMediaPadding\n  enableBorder?: boolean\n  'data-testid'?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\n// discriminated union to ensure that if one poster* prop is set, all are required\ntype PosterProps =\n  | {poster?: never; posterAltText?: never; posterTitle?: never}\n  | {poster: string; posterAltText: string; posterTitle: string}\n\nexport type HeroVideoProps = HeroVideoBaseProps & PosterProps\n\nexport const HeroVideo = forwardRef<HTMLDivElement, HeroVideoProps>(\n  (\n    {\n      className,\n      children,\n      position = 'block-end',\n      padding = 'default',\n      poster,\n      posterTitle,\n      posterAltText,\n      enableBorder,\n      'data-testid': testId,\n      ...rest\n    }: HeroVideoProps,\n    ref,\n  ) => {\n    const [showVideo, setShowVideo] = React.useState(poster ? false : true)\n    const containerRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLDivElement>)\n    const isInlinePosition = position.startsWith('inline')\n\n    const mediaClasses = clsx(\n      styles['Hero-video'],\n      styles['Hero-media'],\n      styles[`Hero-media--pos-${position}`],\n      isInlinePosition && styles['Hero-media--pos-inline'],\n      padding === 'all' && styles['Hero-media--padding-all'],\n      padding === 'none' && styles['Hero-media--padding-none'],\n      className,\n    )\n\n    const handlePosterClick = () => setShowVideo(true)\n\n    const videoContent = (\n      <div className={mediaClasses} ref={containerRef} data-testid={testId || 'Hero-video'} {...rest}>\n        {children}\n      </div>\n    )\n\n    if (showVideo) {\n      return videoContent\n    }\n\n    return (\n      <PosterImage\n        posterSrc={poster!}\n        posterAlt={posterAltText!}\n        posterTitle={posterTitle!}\n        onClick={handlePosterClick}\n        className={mediaClasses}\n      />\n    )\n  },\n)\n\ntype PosterImageProps = {\n  posterSrc: string\n  posterAlt: string\n  posterTitle: string\n  onClick: () => void\n  className?: string\n}\n\nfunction PosterImage({posterSrc, posterAlt, posterTitle, onClick, className}: PosterImageProps) {\n  return (\n    <Box className={className}>\n      <button aria-label=\"Play video\" onClick={onClick} className={styles['Hero-video-poster-button']}>\n        <Image src={posterSrc} alt={posterAlt} className={styles['Hero-video-poster-image']} />\n        <PlayIcon className={styles['Hero-video-poster-icon']} />\n        <span className={styles['Hero-video-poster-header']}>\n          <MarkGithubIcon size={48} className={styles['Hero-video-header-poster-icon']} />\n          <Text size=\"350\" className={styles['Hero-video-poster-text']}>\n            {posterTitle}\n          </Text>\n        </span>\n      </button>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;AA4BA,IAAa,IAAY,GAErB,EACE,cACA,aACA,cAAW,aACX,aAAU,WACV,WACA,gBACA,kBACA,iBACA,eAAe,GACf,GAAG,KAEL,MACG;CACH,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAsB,EACjE,IAAe,EAAuB,EAAuC,EAC7E,IAAmB,EAAS,WAAW,SAAS,EAEhD,IAAe,EACnB,EAAO,eACP,EAAO,eACP,EAAO,mBAAmB,MAC1B,KAAoB,EAAO,2BAC3B,MAAY,SAAS,EAAO,4BAC5B,MAAY,UAAU,EAAO,6BAC7B,EACD,EAEK,UAA0B,EAAa,GAAK,EAE5C,IACJ,kBAAC,OAAD;EAAK,WAAW;EAAc,KAAK;EAAc,eAAa,KAAU;EAAc,GAAI;EACvF;EACG,CAAA;AAOR,QAJI,IACK,IAIP,kBAAC,GAAD;EACE,WAAW;EACX,WAAW;EACE;EACb,SAAS;EACT,WAAW;EACX,CAAA;EAGP;AAUD,SAAS,EAAY,EAAC,cAAW,cAAW,gBAAa,YAAS,gBAA8B;AAC9F,QACE,kBAAC,GAAD;EAAgB;YACd,kBAAC,UAAD;GAAQ,cAAW;GAAsB;GAAS,WAAW,EAAO;aAApE;IACE,kBAAC,GAAD;KAAO,KAAK;KAAW,KAAK;KAAW,WAAW,EAAO;KAA8B,CAAA;IACvF,kBAAC,GAAD,EAAU,WAAW,EAAO,2BAA6B,CAAA;IACzD,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAxB,CACE,kBAAC,GAAD;MAAgB,MAAM;MAAI,WAAW,EAAO;MAAoC,CAAA,EAChF,kBAAC,GAAD;MAAM,MAAK;MAAM,WAAW,EAAO;gBAChC;MACI,CAAA,CACF;;IACA;;EACL,CAAA"}
+{"version":3,"file":"HeroVideo.js","names":[],"sources":["../../../src/Hero/sub-components/HeroVideo.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../../component-helpers'\nimport type {HeroMediaPadding, HeroMediaPosition} from '../HeroContext'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nimport styles from '../Hero.module.css'\nimport {Box, Image, Text} from '../..'\nimport {PlayIcon} from '../../VideoPlayer/components/PlayIcon'\nimport {MarkGithubIcon} from '@primer/octicons-react'\n\ntype HeroVideoBaseProps = {\n  position?: HeroMediaPosition\n  /**\n   * Controls the padding around media in gridline layouts. `default` preserves the padding recommended for the position.\n   */\n  padding?: HeroMediaPadding\n  enableBorder?: boolean\n  'data-testid'?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\n// discriminated union to ensure that if one poster* prop is set, all are required\ntype PosterProps =\n  | {poster?: never; posterAltText?: never; posterTitle?: never}\n  | {poster: string; posterAltText: string; posterTitle: string}\n\nexport type HeroVideoProps = HeroVideoBaseProps & PosterProps\n\nexport const HeroVideo = forwardRef<HTMLDivElement, HeroVideoProps>(\n  (\n    {\n      className,\n      children,\n      position = 'block-end',\n      padding = 'default',\n      poster,\n      posterTitle,\n      posterAltText,\n      enableBorder,\n      'data-testid': testId,\n      ...rest\n    }: HeroVideoProps,\n    ref,\n  ) => {\n    const [showVideo, setShowVideo] = React.useState(poster ? false : true)\n    const containerRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLDivElement>)\n    const isInlinePosition = position.startsWith('inline')\n\n    const mediaClasses = clsx(\n      styles['Hero-video'],\n      styles['Hero-media'],\n      styles[`Hero-media--pos-${position}`],\n      isInlinePosition && styles['Hero-media--pos-inline'],\n      padding === 'all' && styles['Hero-media--padding-all'],\n      padding === 'none' && styles['Hero-media--padding-none'],\n      className,\n    )\n\n    const handlePosterClick = () => setShowVideo(true)\n\n    const videoContent = (\n      <div className={mediaClasses} ref={containerRef} data-testid={testId || 'Hero-video'} {...rest}>\n        {children}\n      </div>\n    )\n\n    if (showVideo) {\n      return videoContent\n    }\n\n    return (\n      <PosterImage\n        posterSrc={poster!}\n        posterAlt={posterAltText!}\n        posterTitle={posterTitle!}\n        onClick={handlePosterClick}\n        className={mediaClasses}\n      />\n    )\n  },\n)\n\ntype PosterImageProps = {\n  posterSrc: string\n  posterAlt: string\n  posterTitle: string\n  onClick: () => void\n  className?: string\n}\n\nfunction PosterImage({posterSrc, posterAlt, posterTitle, onClick, className}: PosterImageProps) {\n  return (\n    <Box className={className}>\n      <button aria-label=\"Play video\" onClick={onClick} className={styles['Hero-video-poster-button']}>\n        <Image src={posterSrc} alt={posterAlt} className={styles['Hero-video-poster-image']} />\n        <PlayIcon className={styles['Hero-video-poster-icon']} />\n        <span className={styles['Hero-video-poster-header']}>\n          <MarkGithubIcon size={48} className={styles['Hero-video-header-poster-icon']} />\n          <Text size=\"350\" className={styles['Hero-video-poster-text']}>\n            {posterTitle}\n          </Text>\n        </span>\n      </button>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;AA4BA,IAAa,IAAY,GAErB,EACE,cACA,aACA,cAAW,aACX,aAAU,WACV,WACA,gBACA,kBACA,iBACA,eAAe,GACf,GAAG,KAEL,MACG;CACH,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAqB,GAChE,IAAe,EAAuB,CAAsC,GAC5E,IAAmB,EAAS,WAAW,QAAQ,GAE/C,IAAe,EACnB,EAAO,eACP,EAAO,eACP,EAAO,mBAAmB,MAC1B,KAAoB,EAAO,2BAC3B,MAAY,SAAS,EAAO,4BAC5B,MAAY,UAAU,EAAO,6BAC7B,CACF,GAEM,UAA0B,EAAa,EAAI,GAE3C,IACJ,kBAAC,OAAD;EAAK,WAAW;EAAc,KAAK;EAAc,eAAa,KAAU;EAAc,GAAI;EACvF;CACE,CAAA;CAOP,OAJI,IACK,IAIP,kBAAC,GAAD;EACE,WAAW;EACX,WAAW;EACE;EACb,SAAS;EACT,WAAW;CACZ,CAAA;AAEL,CACF;AAUA,SAAS,EAAY,EAAC,cAAW,cAAW,gBAAa,YAAS,gBAA8B;CAC9F,OACE,kBAAC,GAAD;EAAgB;YACd,kBAAC,UAAD;GAAQ,cAAW;GAAsB;GAAS,WAAW,EAAO;aAApE;IACE,kBAAC,GAAD;KAAO,KAAK;KAAW,KAAK;KAAW,WAAW,EAAO;IAA6B,CAAA;IACtF,kBAAC,GAAD,EAAU,WAAW,EAAO,0BAA4B,CAAA;IACxD,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAxB,CACE,kBAAC,GAAD;MAAgB,MAAM;MAAI,WAAW,EAAO;KAAmC,CAAA,GAC/E,kBAAC,GAAD;MAAM,MAAK;MAAM,WAAW,EAAO;gBAChC;KACG,CAAA,CACF;;GACA;;CACL,CAAA;AAET"}

package/esm/IDE/IDE.d.ts

@@ -148,7 +148,7 @@ export declare const IDE: React.NamedExoticComponent<{
 } & BaseProps<HTMLDivElement> & {
     children?: React.ReactNode | undefined;
 }> & {
-    readonly type: ({ children, className, "data-testid": testId, height, variant, ...rest }: PropsWithChildren<IDEProps>) => import("react/jsx-runtime").JSX.Element;
+    readonly type: ({ children, className, "data-testid": testId, height, variant, ...rest }: PropsWithChildren<IDEProps>) => React.JSX.Element;
 } & {
     testIds: {
         root: string;

package/esm/IDE/IDE.js

@@ -1,8 +1,9 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import t from "../animation/Animation.module.js";
 import { useProvidedRefOrCreate as n } from "../hooks/useRef.js";
 import { Text as r } from "../Text/Text.js";
-import { CopilotIcon as i, PaperAirplaneIcon as a } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { CopilotIcon as i } from "../node_modules/@primer/octicons-react/dist/icons/CopilotIcon.js";
+import { PaperAirplaneIcon as a } from "../node_modules/@primer/octicons-react/dist/icons/PaperAirplaneIcon.js";
 import { useTabs as o } from "../hooks/useTabs.js";
 import { TextInput as s } from "../forms/TextInput/TextInput.js";
 import { Avatar as c } from "../Avatar/Avatar.js";