@universityofmaryland/web-elements-library 1.5.9 → 1.6.0-beta.1

package/dist/composite/hero/custom/expand.js.map

@@ -1 +1 @@
-{"version":3,"file":"expand.js","sources":["../../../../source/composite/hero/custom/expand.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets } from 'atomic';\nimport { type ElementModel, type ContentElement } from '../../../_types';\nimport { type HeroExpandProps as BaseHeroExpandProps } from '../_types';\n\ninterface HeroExpandProps extends BaseHeroExpandProps {\n  eyebrow?: ContentElement;\n  additional?: HTMLSlotElement | null;\n}\n\nconst ANIMATION_CONFIG = {\n  IMAGE_OVERLAY: {\n    NAME: 'img-overlay',\n    RANGE: {\n      START: '70vh',\n      END: '100vh',\n    },\n  },\n  IMAGE_SIZE: {\n    NAME: 'img-size',\n    INITIAL_HEIGHT: '50vh',\n    FINAL_HEIGHT: '100vh',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      END_TABLET: '200vh',\n    },\n  },\n  COMPONENT_SIZE: {\n    NAME: 'component-size',\n    NAME_TABLET: 'component-size-tablet',\n    INITIAL_WIDTH: '10%',\n    INITIAL_WIDTH_TABLET: '60%',\n    FINAL_WIDTH: '100vw',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      START_TABLET: '60vh',\n      END_TABLET: '200vh',\n    },\n  },\n} as const;\n\nconst keyFrameImgOverlay = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\nconst keyFrameImgSize = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_SIZE.NAME} {\n    from { height: ${ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT}; }\n    to { height: ${ANIMATION_CONFIG.IMAGE_SIZE.FINAL_HEIGHT}; }\n  }\n`;\n\nconst keyFrameComponentSize = `\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n`;\n\nconst createImageOverlay = () =>\n  new ElementBuilder()\n    .withClassName('hero-expand-image-overlay')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        height: '100%',\n        width: '100%',\n        background: 'rgba(0,0,0,0.65)',\n        opacity: 1,\n\n        ...withViewTimelineAnimation({\n          opacity: 0,\n          animation: `${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.END,\n        }),\n      },\n    })\n    .build();\n\nconst createAssetElement = ({\n  image,\n  video,\n}: Pick<\n  HeroExpandProps,\n  'image' | 'video'\n>): ElementModel<HTMLElement> | null => {\n  if (video) {\n    return assets.video.toggle({\n      video,\n      additionalElementStyles: {\n        width: '100%',\n        height: '100%',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    });\n  }\n  if (image) {\n    return assets.image.background({\n      element: image,\n      isScaled: true,\n      isGifAllowed: true,\n      isShowCaption: true,\n    });\n  }\n\n  return null;\n};\n\nconst createImageSize = (props: Pick<HeroExpandProps, 'image' | 'video'>) => {\n  const overlay = createImageOverlay();\n  const asset = createAssetElement(props);\n\n  const container = new ElementBuilder()\n    .withClassName('hero-expand-image-size')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        position: 'relative',\n        height: '100%',\n        width: '100%',\n\n        ...withViewTimelineAnimation({\n          height: ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT,\n          animation: `${ANIMATION_CONFIG.IMAGE_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END,\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    });\n\n  if (asset) {\n    container.withChild(asset);\n  }\n  container.withChild(overlay);\n\n  return container.build();\n};\n\nconst createAssetContainer = (\n  props: Pick<HeroExpandProps, 'image' | 'video'>,\n) =>\n  new ElementBuilder()\n    .withClassName('hero-expand-image-container')\n    .withChild(createImageSize(props))\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: '50%',\n        transform: 'translateX(-50%)',\n        width: '100vw',\n        height: '100%',\n        overflow: 'clip',\n        display: 'flex',\n        alignItems: 'center',\n\n        ...withViewTimelineAnimation({\n          width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH,\n          position: 'absolute',\n          top: 0,\n          left: '50%',\n          transform: 'translateX(-50%)',\n          animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END,\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET,\n            animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} ease-in-out forwards`,\n            animationTimeline: 'view()',\n            animationRangeStart:\n              ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START_TABLET,\n            animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    })\n    .build();\n\nconst createEyebrow = (eyebrow?: HTMLElement | null) => {\n  if (!eyebrow) return null;\n\n  return new ElementBuilder(eyebrow)\n    .styled(Styles.element.text.decoration.ribbon)\n    .withStyles({\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.maximum)\n    .withStyles({\n      element: {\n        color: token.color.white,\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        textWrap: 'balance',\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '96px',\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst createTopTextChildren = ({\n  eyebrow,\n  headline,\n}: Pick<\n  HeroExpandProps,\n  'eyebrow' | 'headline'\n>): ElementModel<HTMLElement>[] => {\n  const children: ElementModel<HTMLElement>[] = [];\n\n  const eyebrowElement = createEyebrow(eyebrow);\n  if (eyebrowElement) {\n    children.push(eyebrowElement);\n  }\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  return children;\n};\n\nconst createBottomTextChildren = ({\n  actions,\n  additional,\n}: Pick<\n  HeroExpandProps,\n  'actions' | 'additional'\n>): ElementModel<HTMLElement>[] => {\n  const children: ElementModel<HTMLElement>[] = [];\n\n  if (actions) {\n    const actionsContainer = new ElementBuilder()\n      .withClassName('hero-expand-text-actions')\n      .withChild(actions)\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      })\n      .build();\n    children.push(actionsContainer);\n  }\n\n  if (additional) {\n    const additionalContainer = new ElementBuilder()\n      .withClassName('hero-expand-text-additional')\n      .withChild(additional)\n      .build();\n    children.push(additionalContainer);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<\n    HeroExpandProps,\n    'eyebrow' | 'headline' | 'actions' | 'additional'\n  >,\n) => {\n  const container = new ElementBuilder()\n    .withClassName('hero-expand-text-container')\n    .withStyles({\n      element: {\n        position: 'relative',\n        height: '100%',\n        zIndex: 9999,\n        textAlign: 'center',\n        padding: `${token.spacing.md} 0`,\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['3xl']} 0`,\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'space-between',\n        },\n\n        [`@container (${token.media.queries.highDef.min})`]: {\n          padding: `${token.spacing['6xl']} 0`,\n        },\n      },\n    });\n\n  const topTextChildren = createTopTextChildren(props);\n  if (topTextChildren.length > 0) {\n    const topText = new ElementBuilder()\n      .styled(Styles.layout.space.horizontal.normal)\n      .withChildren(...topTextChildren)\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      })\n      .build();\n    container.withChild(topText);\n  }\n\n  const bottomTextChildren = createBottomTextChildren(props);\n  if (bottomTextChildren.length > 0) {\n    const bottomText = new ElementBuilder()\n      .styled(Styles.layout.space.horizontal.normal)\n      .withChildren(...bottomTextChildren)\n      .withStyles({\n        element: {\n          width: '100%',\n        },\n      })\n      .build();\n    container.withChild(bottomText);\n  }\n\n  return container.build();\n};\n\nconst createSticky = (props: HeroExpandProps) => {\n  const assetContainer = createAssetContainer(props);\n  const textContainer = createTextContainer(props);\n\n  return new ElementBuilder()\n    .withClassName('hero-expand-sticky')\n    .withChildren(assetContainer, textContainer)\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          ...withViewTimelineAnimation({\n            position: 'sticky',\n            top: 0,\n            height: '100vh',\n          }),\n        },\n\n        [`@supports (not (animation-timeline: view()))`]: {\n          top: '0 !important',\n        },\n      },\n    })\n    .build();\n};\n\nexport default (props: HeroExpandProps) => {\n  const sticky = createSticky(props);\n\n  const composite = new ElementBuilder()\n    .withClassName('umd-hero-expand')\n    .withChild(sticky)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        ...withViewTimelineAnimation({\n          position: 'relative',\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            height: '200vh',\n          },\n        }),\n\n        ['& img, & video']: {\n          display: 'block',\n          width: '100%',\n          height: '100%',\n          objectFit: 'cover',\n        },\n      },\n    })\n    .build();\n\n  const setTopPosition = ({ value }: { value: string | null }) => {\n    sticky.element.style.top = value || '0';\n  };\n\n  composite.styles += keyFrameImgOverlay;\n  composite.styles += keyFrameImgSize;\n  composite.styles += keyFrameComponentSize;\n\n  return {\n    ...composite,\n    events: {\n      setTopPosition,\n    },\n  };\n};\n"],"names":["ElementBuilder","withViewTimelineAnimation","assets.video.toggle","assets.image.background","token","Styles"],"mappings":"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"}
+{"version":3,"file":"expand.js","sources":["../../../../source/composite/hero/custom/expand.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets } from 'atomic';\nimport { type ElementModel, type ContentElement } from '../../../_types';\nimport { type HeroExpandProps as BaseHeroExpandProps } from '../_types';\n\ninterface HeroExpandProps extends BaseHeroExpandProps {\n  eyebrow?: ContentElement;\n  additional?: HTMLSlotElement | null;\n}\n\nconst ANIMATION_CONFIG = {\n  IMAGE_OVERLAY: {\n    NAME: 'img-overlay',\n    RANGE: {\n      START: '70vh',\n      END: '100vh',\n    },\n  },\n  IMAGE_SIZE: {\n    NAME: 'img-size',\n    INITIAL_HEIGHT: '50vh',\n    FINAL_HEIGHT: '100vh',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      END_TABLET: '200vh',\n    },\n  },\n  COMPONENT_SIZE: {\n    NAME: 'component-size',\n    NAME_TABLET: 'component-size-tablet',\n    INITIAL_WIDTH: '10%',\n    INITIAL_WIDTH_TABLET: '60%',\n    FINAL_WIDTH: '100vw',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      START_TABLET: '60vh',\n      END_TABLET: '200vh',\n    },\n  },\n} as const;\n\nconst keyFrameImgOverlay = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\nconst keyFrameImgSize = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_SIZE.NAME} {\n    from { height: ${ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT}; }\n    to { height: ${ANIMATION_CONFIG.IMAGE_SIZE.FINAL_HEIGHT}; }\n  }\n`;\n\nconst keyFrameComponentSize = `\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n`;\n\nconst createImageOverlay = () =>\n  new ElementBuilder()\n    .withClassName('hero-expand-image-overlay')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        height: '100%',\n        width: '100%',\n        background: 'rgba(0,0,0,0.65)',\n        opacity: 1,\n\n        ...withViewTimelineAnimation({\n          opacity: 0,\n          animation: `${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.END,\n        }),\n      },\n    })\n    .build();\n\nconst createAssetElement = ({\n  image,\n  video,\n}: Pick<\n  HeroExpandProps,\n  'image' | 'video'\n>): ElementModel<HTMLElement> | null => {\n  if (video) {\n    return assets.video.toggle({\n      video,\n      additionalElementStyles: {\n        width: '100%',\n        height: '100%',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    });\n  }\n  if (image) {\n    return assets.image.background({\n      element: image,\n      isScaled: true,\n      isGifAllowed: true,\n      isShowCaption: true,\n    });\n  }\n\n  return null;\n};\n\nconst createImageSize = (props: Pick<HeroExpandProps, 'image' | 'video'>) => {\n  const overlay = createImageOverlay();\n  const asset = createAssetElement(props);\n\n  const container = new ElementBuilder()\n    .withClassName('hero-expand-image-size')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        position: 'relative',\n        height: '100%',\n        width: '100%',\n\n        ...withViewTimelineAnimation({\n          height: ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT,\n          animation: `${ANIMATION_CONFIG.IMAGE_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END,\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    });\n\n  if (asset) {\n    container.withChild(asset);\n  }\n  container.withChild(overlay);\n\n  return container.build();\n};\n\nconst createAssetContainer = (\n  props: Pick<HeroExpandProps, 'image' | 'video'>,\n) =>\n  new ElementBuilder()\n    .withClassName('hero-expand-image-container')\n    .withChild(createImageSize(props))\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: '50%',\n        transform: 'translateX(-50%)',\n        width: '100vw',\n        height: '100%',\n        overflow: 'clip',\n        display: 'flex',\n        alignItems: 'center',\n\n        ...withViewTimelineAnimation({\n          width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH,\n          position: 'absolute',\n          top: 0,\n          left: '50%',\n          transform: 'translateX(-50%)',\n          animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END,\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET,\n            animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} ease-in-out forwards`,\n            animationTimeline: 'view()',\n            animationRangeStart:\n              ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START_TABLET,\n            animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    })\n    .build();\n\nconst createEyebrow = (eyebrow?: HTMLElement | null) => {\n  if (!eyebrow) return null;\n\n  return new ElementBuilder(eyebrow)\n    .styled(Styles.element.text.decoration.ribbon)\n    .withStyles({\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.maximum)\n    .withStyles({\n      element: {\n        color: token.color.white,\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        textWrap: 'balance',\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '96px',\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst createTopTextChildren = ({\n  eyebrow,\n  headline,\n}: Pick<\n  HeroExpandProps,\n  'eyebrow' | 'headline'\n>): ElementModel<HTMLElement>[] => {\n  const children: ElementModel<HTMLElement>[] = [];\n\n  const eyebrowElement = createEyebrow(eyebrow);\n  if (eyebrowElement) {\n    children.push(eyebrowElement);\n  }\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  return children;\n};\n\nconst createBottomTextChildren = ({\n  actions,\n  additional,\n}: Pick<\n  HeroExpandProps,\n  'actions' | 'additional'\n>): ElementModel<HTMLElement>[] => {\n  const children: ElementModel<HTMLElement>[] = [];\n\n  if (actions) {\n    const actionsContainer = new ElementBuilder()\n      .withClassName('hero-expand-text-actions')\n      .withChild(actions)\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      })\n      .build();\n    children.push(actionsContainer);\n  }\n\n  if (additional) {\n    const additionalContainer = new ElementBuilder()\n      .withClassName('hero-expand-text-additional')\n      .withChild(additional)\n      .build();\n    children.push(additionalContainer);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<\n    HeroExpandProps,\n    'eyebrow' | 'headline' | 'actions' | 'additional'\n  >,\n) => {\n  const container = new ElementBuilder()\n    .withClassName('hero-expand-text-container')\n    .withStyles({\n      element: {\n        position: 'relative',\n        height: '100%',\n        zIndex: 9999,\n        textAlign: 'center',\n        padding: `${token.spacing.md} 0`,\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['3xl']} 0`,\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'space-between',\n        },\n\n        [`@container (${token.media.queries.highDef.min})`]: {\n          padding: `${token.spacing['6xl']} 0`,\n        },\n      },\n    });\n\n  const topTextChildren = createTopTextChildren(props);\n  if (topTextChildren.length > 0) {\n    const topText = new ElementBuilder()\n      .styled(Styles.layout.space.horizontal.normal)\n      .withChildren(...topTextChildren)\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      })\n      .build();\n    container.withChild(topText);\n  }\n\n  const bottomTextChildren = createBottomTextChildren(props);\n  if (bottomTextChildren.length > 0) {\n    const bottomText = new ElementBuilder()\n      .styled(Styles.layout.space.horizontal.normal)\n      .withChildren(...bottomTextChildren)\n      .withStyles({\n        element: {\n          width: '100%',\n        },\n      })\n      .build();\n    container.withChild(bottomText);\n  }\n\n  return container.build();\n};\n\nconst createSticky = (props: HeroExpandProps) => {\n  const assetContainer = createAssetContainer(props);\n  const textContainer = createTextContainer(props);\n\n  return new ElementBuilder()\n    .withClassName('hero-expand-sticky')\n    .withChildren(assetContainer, textContainer)\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          ...withViewTimelineAnimation({\n            position: 'sticky',\n            top: 0,\n            height: '100vh',\n          }),\n        },\n\n        [`@supports (not (animation-timeline: view()))`]: {\n          top: '0 !important',\n        },\n      },\n    })\n    .build();\n};\n\nexport const createCompositeHeroExpand = (props: HeroExpandProps) => {\n  const sticky = createSticky(props);\n\n  const composite = new ElementBuilder()\n    .withClassName('umd-hero-expand')\n    .withChild(sticky)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        ...withViewTimelineAnimation({\n          position: 'relative',\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            height: '200vh',\n          },\n        }),\n\n        ['& img, & video']: {\n          display: 'block',\n          width: '100%',\n          height: '100%',\n          objectFit: 'cover',\n        },\n      },\n    })\n    .build();\n\n  const setTopPosition = ({ value }: { value: string | null }) => {\n    sticky.element.style.top = value || '0';\n  };\n\n  composite.styles += keyFrameImgOverlay;\n  composite.styles += keyFrameImgSize;\n  composite.styles += keyFrameComponentSize;\n\n  return {\n    ...composite,\n    events: {\n      setTopPosition,\n    },\n  };\n};\n"],"names":["assets.video.toggle","assets.image.background"],"mappings":"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"}

package/dist/composite/hero/custom/grid.d.ts

@@ -15,6 +15,6 @@ interface HeroGridProps {
     center: CenterProps | null;
     isThemeDark?: boolean;
 }
-declare const _default: (props: HeroGridProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement> | null;
-export default _default;
+export declare const createCompositeHeroGrid: (props: HeroGridProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement> | null;
+export {};
 //# sourceMappingURL=grid.d.ts.map

package/dist/composite/hero/custom/grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/grid.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,cAAc,EAAqB,MAAM,iBAAiB,CAAC;AAEzE,UAAU,WAAW;IACnB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChC,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,WAAW;IACnB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACjC;AAED,UAAU,aAAa;IACrB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC5B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;yBAmYe,OAAO,aAAa;AAApC,wBAwCE"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/grid.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,cAAc,EAAqB,MAAM,iBAAiB,CAAC;AAEzE,UAAU,WAAW;IACnB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChC,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,WAAW;IACnB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACjC;AAED,UAAU,aAAa;IACrB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC5B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAmYD,eAAO,MAAM,uBAAuB,GAAI,OAAO,aAAa,yFAwC3D,CAAC"}

package/dist/composite/hero/custom/grid.js

@@ -1,55 +1,36 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const Styles = require("@universityofmaryland/web-styles-library");
-const accessibility = require("@universityofmaryland/web-utilities-library/accessibility");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-require("@universityofmaryland/web-styles-library/element");
-require("@universityofmaryland/web-styles-library/layout");
-require("@universityofmaryland/web-styles-library/animation");
-require("@universityofmaryland/web-styles-library/typography");
-require("@universityofmaryland/web-utilities-library/media");
-require("@universityofmaryland/web-utilities-library/dom");
-require("@universityofmaryland/web-icons-library/controls");
-require("@universityofmaryland/web-icons-library/communication");
-require("@universityofmaryland/web-icons-library/files");
-require("@universityofmaryland/web-icons-library/brand");
-require("@universityofmaryland/web-icons-library/arrows");
-require("../../../atomic/animations/actions/indicator.js");
-require("../../../atomic/animations/brand/chevron-scroll.js");
-require("../../../atomic/animations/brand/card-stack.js");
-const background = require("../../../atomic/assets/image/background.js");
-require("@universityofmaryland/web-utilities-library/performance");
-const observedAutoPlay = require("../../../atomic/assets/video/observed-auto-play.js");
-require("@universityofmaryland/web-icons-library/location");
-require("@universityofmaryland/web-icons-library/calendar");
-require("@universityofmaryland/web-utilities-library/theme");
-require("../../../atomic/layout/block/stacked.js");
-require("../../../atomic/layout/overlay/modal.js");
-require("../../../atomic/layout/person/columns.js");
-require("@universityofmaryland/web-icons-library/social");
-require("../../../atomic/text-lockup/date.js");
-const large = require("../../../atomic/text-lockup/large.js");
-require("../../../atomic/text-lockup/small.js");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
-const isPreferReducedMotion = accessibility.isPreferredReducedMotion();
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { isPreferredReducedMotion } from "@universityofmaryland/web-utilities-library/accessibility";
+import { withViewTimelineAnimation } from "@universityofmaryland/web-utilities-library/styles";
+import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
+import "@universityofmaryland/web-styles-library/typography";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/controls";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "@universityofmaryland/web-icons-library/arrows";
+import "../../../atomic/animations/actions/indicator.js";
+import "../../../atomic/animations/brand/chevron-scroll.js";
+import "../../../atomic/animations/brand/card-stack.js";
+import { createImageBackground } from "../../../atomic/assets/image/background.js";
+import "@universityofmaryland/web-utilities-library/performance";
+import { createVideoObservedAutoPlay } from "../../../atomic/assets/video/observed-auto-play.js";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
+import "@universityofmaryland/web-utilities-library/theme";
+import "../../../atomic/layout/block/stacked.js";
+import "../../../atomic/layout/overlay/modal.js";
+import "../../../atomic/layout/person/columns.js";
+import "@universityofmaryland/web-icons-library/social";
+import "../../../atomic/text-lockup/date.js";
+import { createTextLockupLarge } from "../../../atomic/text-lockup/large.js";
+import "../../../atomic/text-lockup/small.js";
+const isPreferReducedMotion = isPreferredReducedMotion();
 const isScrollTimelineSupported = () => "ScrollTimeline" in window || CSS.supports("animation-timeline", "scroll()");
 const isDisplayWithoutAnimation = isPreferReducedMotion || !isScrollTimelineSupported();
 const ANIMATION_RANGES = {
@@ -104,27 +85,27 @@ const keyFrameTint = `
 const columnBase = {
   display: "grid",
   gridAutoFlow: "row dense",
-  gridGap: `${token__namespace.spacing.min}`,
+  gridGap: `${token.spacing.min}`,
   width: "100%",
   height: "100vh",
-  [`@media (${token__namespace.media.queries.tablet.min})`]: {
-    gridGap: `${token__namespace.spacing.md}`
+  [`@media (${token.media.queries.tablet.min})`]: {
+    gridGap: `${token.spacing.md}`
   },
-  [`@media (${token__namespace.media.queries.desktop.min})`]: {
-    gridGap: `${token__namespace.spacing.lg}`
+  [`@media (${token.media.queries.desktop.min})`]: {
+    gridGap: `${token.spacing.lg}`
   },
   ["& > *"]: {
     overflow: "hidden",
     position: "relative"
   }
 };
-const createImageWrapper = (image) => background({
+const createImageWrapper = (image) => createImageBackground({
   element: image,
   isScaled: true,
   isGifAllowed: true,
   isShowCaption: true
 });
-const createVideoWrapper = (video) => observedAutoPlay({
+const createVideoWrapper = (video) => createVideoObservedAutoPlay({
   video,
   isAutoplay: true,
   additionalElementStyles: {
@@ -143,7 +124,7 @@ const createVideoWrapper = (video) => observedAutoPlay({
 });
 const createCorner = ({ images, isCornerLeft }) => {
   const children = images.map((image) => createImageWrapper(image));
-  return new webBuilderLibrary.ElementBuilder().withClassName(
+  return new ElementBuilder().withClassName(
     isCornerLeft ? "hero-grid-corner-left" : "hero-grid-corner-right"
   ).withChildren(...children).withStyles({
     element: {
@@ -156,7 +137,7 @@ const createCorner = ({ images, isCornerLeft }) => {
   ).build();
 };
 const createCenter = ({ images, video }) => {
-  const tint = new webBuilderLibrary.ElementBuilder().withClassName("hero-grid-tint").withStyles({
+  const tint = new ElementBuilder().withClassName("hero-grid-tint").withStyles({
     element: {
       width: "100%",
       height: "100%",
@@ -166,7 +147,7 @@ const createCenter = ({ images, video }) => {
       backgroundColor: "rgba(0, 0, 0, 0.5)",
       zIndex: 9,
       opacity: 0,
-      ...styles.withViewTimelineAnimation({
+      ...withViewTimelineAnimation({
         animation: "tint-fade ease-in-out forwards",
         animationTimeline: "view()",
         animationRangeStart: ANIMATION_RANGES.TINT_FADE.start,
@@ -174,11 +155,11 @@ const createCenter = ({ images, video }) => {
       })
     }
   }).withAttribute("role", "region").withAttribute("aria-label", "Main hero content").build();
-  const container = new webBuilderLibrary.ElementBuilder().withClassName("hero-grid-center").withChild(tint).withStyles({
+  const container = new ElementBuilder().withClassName("hero-grid-center").withChild(tint).withStyles({
     element: {
       ...columnBase,
       gridTemplateRows: GRID_LAYOUT.ROWS.INITIAL,
-      ...styles.withViewTimelineAnimation({
+      ...withViewTimelineAnimation({
         animation: "grid-rows ease-in-out forwards",
         animationTimeline: "view()",
         animationRangeStart: ANIMATION_RANGES.GRID_ROWS.start,
@@ -201,21 +182,21 @@ const createHeadline = (props) => {
   const isOverwriteHeadline = characterCount > 30;
   if (!headline) return null;
   const desktopStyles = {
-    [`@container (${token__namespace.media.queries.desktop.min})`]: {
+    [`@container (${token.media.queries.desktop.min})`]: {
       ...isOverwriteHeadline && {
         fontSize: "80px"
       }
     }
   };
-  return new webBuilderLibrary.ElementBuilder(headline).styled(Styles__namespace.typography.campaign.fonts.extraLarge).withStyles({
+  return new ElementBuilder(headline).styled(Styles.typography.campaign.fonts.extraLarge).withStyles({
     element: {
-      color: token__namespace.color.white,
+      color: token.color.white,
       textTransform: "uppercase",
       textWrap: "pretty",
       ...desktopStyles
     },
     siblingAfter: {
-      marginTop: token__namespace.spacing.md
+      marginTop: token.spacing.md
     }
   }).build();
 };
@@ -228,40 +209,40 @@ const createTextContainer = (props) => {
   if (!text && !actions && !headline) {
     return null;
   }
-  const textContainer = new webBuilderLibrary.ElementBuilder().withClassName("hero-expand-text-container").withStyles({
+  const textContainer = new ElementBuilder().withClassName("hero-expand-text-container").withStyles({
     element: {
       position: "relative",
       height: "100%",
       zIndex: 9999,
       textAlign: "center",
-      padding: `${token__namespace.spacing.md} 0`,
-      [`@container (${token__namespace.media.queries.tablet.min})`]: {
-        padding: `${token__namespace.spacing["3xl"]} 0`,
+      padding: `${token.spacing.md} 0`,
+      [`@container (${token.media.queries.tablet.min})`]: {
+        padding: `${token.spacing["3xl"]} 0`,
         display: "flex",
         flexDirection: "column",
         justifyContent: "space-between"
       },
-      [`@container (${token__namespace.media.queries.highDef.min})`]: {
-        padding: `${token__namespace.spacing["6xl"]} 0`
+      [`@container (${token.media.queries.highDef.min})`]: {
+        padding: `${token.spacing["6xl"]} 0`
       },
-      ...styles.withViewTimelineAnimation({
+      ...withViewTimelineAnimation({
         paddingTop: "140vh"
       }),
       ["*"]: {
         ...shouldRenderBlackText && {
-          color: `${token__namespace.color.black} !important`
+          color: `${token.color.black} !important`
         }
       }
     }
   }).build();
-  const lock = new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.space.horizontal.smallest).withStyles({
+  const lock = new ElementBuilder().styled(Styles.layout.space.horizontal.smallest).withStyles({
     element: {
       height: "100%",
       width: "100%",
       position: "relative"
     }
   }).build();
-  const textLockupElement = large({
+  const textLockupElement = createTextLockupLarge({
     headlineComposite: createHeadline(props),
     textLargest: text,
     actions,
@@ -312,14 +293,14 @@ const createGridLayout = (leftCorner, rightCorner, center) => {
     height: "100vh",
     width: "100%",
     display: "grid",
-    gridGap: `${token__namespace.spacing.min}`,
-    [`@media (${token__namespace.media.queries.tablet.min})`]: {
-      gridGap: `${token__namespace.spacing.md}`
+    gridGap: `${token.spacing.min}`,
+    [`@media (${token.media.queries.tablet.min})`]: {
+      gridGap: `${token.spacing.md}`
     },
-    [`@media (${token__namespace.media.queries.desktop.min})`]: {
-      gridGap: `${token__namespace.spacing.lg}`
+    [`@media (${token.media.queries.desktop.min})`]: {
+      gridGap: `${token.spacing.lg}`
     },
-    ...styles.withViewTimelineAnimation({
+    ...withViewTimelineAnimation({
       position: "sticky",
       top: 0,
       animation: "grid-columns ease-in-out forwards",
@@ -328,24 +309,24 @@ const createGridLayout = (leftCorner, rightCorner, center) => {
       animationRangeEnd: ANIMATION_RANGES.GRID_COLUMNS.end
     })
   };
-  return new webBuilderLibrary.ElementBuilder().withClassName("hero-grid-layout").withChildren(
+  return new ElementBuilder().withClassName("hero-grid-layout").withChildren(
     createCorner(leftCorner),
     createCenter(center),
     createCorner(rightCorner)
   ).withStyles({ element: gridStyles }).withAttribute("role", "region").withAttribute("aria-label", "Hero grid layout").build();
 };
-const grid = (props) => {
+const createCompositeHeroGrid = (props) => {
   const validated = validateGridProps(props);
   if (!validated) return null;
   const { leftCorner, rightCorner, center } = validated;
   const text = createTextContainer(props);
-  const grid2 = createGridLayout(leftCorner, rightCorner, center);
-  const composite = new webBuilderLibrary.ElementBuilder().withClassName("hero-grid-container").withChild(grid2).withStyles({
+  const grid = createGridLayout(leftCorner, rightCorner, center);
+  const composite = new ElementBuilder().withClassName("hero-grid-container").withChild(grid).withStyles({
     element: {
       width: "100%",
       display: "block",
       containerType: "inline-size",
-      ...styles.withViewTimelineAnimation({
+      ...withViewTimelineAnimation({
         height: "300vh"
       }),
       ["img, video"]: {
@@ -364,5 +345,7 @@ const grid = (props) => {
   built.styles += keyFrameTint;
   return built;
 };
-module.exports = grid;
+export {
+  createCompositeHeroGrid
+};
 //# sourceMappingURL=grid.js.map

package/dist/composite/hero/custom/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","sources":["../../../../source/composite/hero/custom/grid.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\nimport { type ContentElement, type ElementModel } from '../../../_types';\n\ninterface CornerProps {\n  images: Array<HTMLImageElement>;\n  isCornerLeft: boolean;\n}\n\ninterface CenterProps {\n  images: Array<HTMLImageElement>;\n  video?: HTMLVideoElement | null;\n}\n\ninterface HeroGridProps {\n  headline?: ContentElement;\n  text?: ContentElement;\n  actions?: ContentElement;\n  corners: Array<CornerProps>;\n  center: CenterProps | null;\n  isThemeDark?: boolean;\n}\n\nconst isPreferReducedMotion = isPreferredReducedMotion();\nconst isScrollTimelineSupported = () =>\n  'ScrollTimeline' in window || CSS.supports('animation-timeline', 'scroll()');\nconst isDisplayWithoutAnimation =\n  isPreferReducedMotion || !isScrollTimelineSupported();\n\nconst ANIMATION_RANGES = {\n  GRID_COLUMNS: { start: '110vh', end: '230vh' },\n  GRID_ROWS: { start: '110vh', end: '230vh' },\n  TINT_FADE: { start: '50vh', end: '140vh' },\n} as const;\n\nconst GRID_LAYOUT = {\n  COLUMNS: {\n    INITIAL: '20% 60% 20%',\n    FINAL: '0 100% 0',\n    DEFAULT: '25% 50% 25%',\n  },\n  ROWS: {\n    INITIAL: '25vh 1fr 25vh',\n    FINAL: '0 1fr 0',\n    TRIPLE: '1fr 1fr 1fr',\n  },\n} as const;\n\nconst keyFrameColumns = `\n  @keyframes grid-columns {\n    from {\n      grid-template-columns: ${GRID_LAYOUT.COLUMNS.INITIAL};\n    }\n    to {\n      grid-template-columns: ${GRID_LAYOUT.COLUMNS.FINAL};\n      grid-gap: 0;\n    }\n  }\n`;\n\nconst keyFrameRows = `\n  @keyframes grid-rows {\n    from {\n      grid-template-rows: ${GRID_LAYOUT.ROWS.INITIAL};\n    }\n    to {\n      grid-template-rows: ${GRID_LAYOUT.ROWS.FINAL};\n      grid-gap: 0;\n    }\n  }\n`;\n\nconst keyFrameTint = `\n  @keyframes tint-fade {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n`;\n\nconst columnBase = {\n  display: 'grid',\n  gridAutoFlow: 'row dense',\n  gridGap: `${token.spacing.min}`,\n  width: '100%',\n  height: '100vh',\n\n  [`@media (${token.media.queries.tablet.min})`]: {\n    gridGap: `${token.spacing.md}`,\n  },\n\n  [`@media (${token.media.queries.desktop.min})`]: {\n    gridGap: `${token.spacing.lg}`,\n  },\n\n  ['& > *']: {\n    overflow: 'hidden',\n    position: 'relative',\n  },\n};\n\nconst createImageWrapper = (image: HTMLImageElement) =>\n  assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n\nconst createVideoWrapper = (video: HTMLVideoElement) =>\n  assets.video.observedAutoPlay({\n    video,\n    isAutoplay: true,\n    additionalElementStyles: {\n      additionalElementStyles: {\n        width: '100%',\n        aspectRatio: '1 / 1',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    },\n  });\n\nconst createCorner = ({ images, isCornerLeft }: CornerProps) => {\n  const children = images.map((image) => createImageWrapper(image));\n\n  return new ElementBuilder()\n    .withClassName(\n      isCornerLeft ? 'hero-grid-corner-left' : 'hero-grid-corner-right',\n    )\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        ...columnBase,\n        gridTemplateRows: GRID_LAYOUT.ROWS.TRIPLE,\n      },\n    })\n    .withAttribute('role', 'region')\n    .withAttribute(\n      'aria-label',\n      `${isCornerLeft ? 'Left' : 'Right'} decorative image grid`,\n    )\n    .build();\n};\n\nconst createCenter = ({ images, video }: CenterProps) => {\n  const tint = new ElementBuilder()\n    .withClassName('hero-grid-tint')\n    .withStyles({\n      element: {\n        width: '100%',\n        height: '100%',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        backgroundColor: 'rgba(0, 0, 0, 0.5)',\n        zIndex: 9,\n        opacity: 0,\n        ...withViewTimelineAnimation({\n          animation: 'tint-fade ease-in-out forwards',\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_RANGES.TINT_FADE.start,\n          animationRangeEnd: ANIMATION_RANGES.TINT_FADE.end,\n        }),\n      },\n    })\n    .withAttribute('role', 'region')\n    .withAttribute('aria-label', 'Main hero content')\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('hero-grid-center')\n    .withChild(tint)\n    .withStyles({\n      element: {\n        ...columnBase,\n        gridTemplateRows: GRID_LAYOUT.ROWS.INITIAL,\n        ...withViewTimelineAnimation({\n          animation: 'grid-rows ease-in-out forwards',\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_RANGES.GRID_ROWS.start,\n          animationRangeEnd: ANIMATION_RANGES.GRID_ROWS.end,\n        }),\n      },\n    });\n\n  if (video) {\n    container\n      .withChild(createImageWrapper(images[0]))\n      .withChild(createVideoWrapper(video))\n      .withChild(createImageWrapper(images[1]));\n  } else {\n    images.forEach((image) => {\n      container.withChild(createImageWrapper(image));\n    });\n  }\n\n  return container.build();\n};\n\nconst createHeadline = (\n  props: Pick<HeroGridProps, 'headline'>,\n): ElementModel<HTMLElement> | null => {\n  const { headline } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n\n  if (!headline) return null;\n\n  const desktopStyles = {\n    [`@container (${token.media.queries.desktop.min})`]: {\n      ...(isOverwriteHeadline && {\n        fontSize: '80px',\n      }),\n    },\n  };\n\n  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.extraLarge)\n    .withStyles({\n      element: {\n        color: token.color.white,\n        textTransform: 'uppercase',\n        textWrap: 'pretty',\n        ...desktopStyles,\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createTextContainer = (\n  props: Pick<HeroGridProps, 'headline' | 'text' | 'actions' | 'isThemeDark'>,\n) => {\n  const { actions, headline, text, isThemeDark } = props;\n  let shouldRenderBlackText = null;\n\n  if (isDisplayWithoutAnimation && !isThemeDark) {\n    shouldRenderBlackText = true;\n  }\n\n  if (!text && !actions && !headline) {\n    return null;\n  }\n\n  const textContainer = new ElementBuilder()\n    .withClassName('hero-expand-text-container')\n    .withStyles({\n      element: {\n        position: 'relative',\n        height: '100%',\n        zIndex: 9999,\n        textAlign: 'center',\n        padding: `${token.spacing.md} 0`,\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['3xl']} 0`,\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'space-between',\n        },\n\n        [`@container (${token.media.queries.highDef.min})`]: {\n          padding: `${token.spacing['6xl']} 0`,\n        },\n\n        ...withViewTimelineAnimation({\n          paddingTop: '140vh',\n        }),\n\n        ['*']: {\n          ...(shouldRenderBlackText && {\n            color: `${token.color.black} !important`,\n          }),\n        },\n      },\n    })\n    .build();\n\n  const lock = new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.smallest)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n\n  const textLockupElement = textLockup.large({\n    headlineComposite: createHeadline(props),\n    textLargest: text,\n    actions,\n    isThemeDark: true,\n  });\n\n  lock.element.appendChild(textLockupElement.element);\n  lock.styles += textLockupElement.styles;\n\n  textContainer.element.appendChild(lock.element);\n  textContainer.styles += lock.styles;\n\n  return textContainer;\n};\n\nconst validateGridProps = (\n  props: HeroGridProps,\n): {\n  leftCorner: CornerProps;\n  rightCorner: CornerProps;\n  center: CenterProps;\n} | null => {\n  const leftCorner = props.corners.find((c) => c.isCornerLeft);\n  const rightCorner = props.corners.find((c) => !c.isCornerLeft);\n\n  const errors = [];\n\n  // Validate corners\n  if (!leftCorner) {\n    errors.push('Left corner is required for hero grid');\n  } else if (!leftCorner.images || leftCorner.images.length === 0) {\n    errors.push('Left corner must have at least one image');\n  }\n\n  if (!rightCorner) {\n    errors.push('Right corner is required for hero grid');\n  } else if (!rightCorner.images || rightCorner.images.length === 0) {\n    errors.push('Right corner must have at least one image');\n  }\n\n  // Validate center\n  if (!props.center) {\n    errors.push('Center is required for hero grid');\n  } else {\n    if (!props.center.images || props.center.images.length === 0) {\n      errors.push('Center must have at least one image');\n    } else if (props.center.video && props.center.images.length < 2) {\n      errors.push('Center must have at least 2 images when video is provided');\n    }\n  }\n\n  if (errors.length > 0) {\n    errors.forEach((error) => console.log('Hero Grid Error:', error));\n    return null;\n  }\n\n  return {\n    leftCorner: leftCorner as CornerProps,\n    rightCorner: rightCorner as CornerProps,\n    center: props.center as CenterProps,\n  };\n};\n\nconst createGridLayout = (\n  leftCorner: CornerProps,\n  rightCorner: CornerProps,\n  center: CenterProps,\n) => {\n  const gridStyles = {\n    gridTemplateColumns: GRID_LAYOUT.COLUMNS.DEFAULT,\n    height: '100vh',\n    width: '100%',\n    display: 'grid',\n    gridGap: `${token.spacing.min}`,\n\n    [`@media (${token.media.queries.tablet.min})`]: {\n      gridGap: `${token.spacing.md}`,\n    },\n\n    [`@media (${token.media.queries.desktop.min})`]: {\n      gridGap: `${token.spacing.lg}`,\n    },\n\n    ...withViewTimelineAnimation({\n      position: 'sticky',\n      top: 0,\n      animation: 'grid-columns ease-in-out forwards',\n      animationTimeline: 'view()',\n      animationRangeStart: ANIMATION_RANGES.GRID_COLUMNS.start,\n      animationRangeEnd: ANIMATION_RANGES.GRID_COLUMNS.end,\n    }),\n  };\n\n  return new ElementBuilder()\n    .withClassName('hero-grid-layout')\n    .withChildren(\n      createCorner(leftCorner),\n      createCenter(center),\n      createCorner(rightCorner),\n    )\n    .withStyles({ element: gridStyles })\n    .withAttribute('role', 'region')\n    .withAttribute('aria-label', 'Hero grid layout')\n    .build();\n};\n\nexport default (props: HeroGridProps) => {\n  const validated = validateGridProps(props);\n  if (!validated) return null;\n\n  const { leftCorner, rightCorner, center } = validated;\n  const text = createTextContainer(props);\n  const grid = createGridLayout(leftCorner, rightCorner, center);\n\n  const composite = new ElementBuilder()\n    .withClassName('hero-grid-container')\n    .withChild(grid)\n    .withStyles({\n      element: {\n        width: '100%',\n        display: 'block',\n        containerType: 'inline-size',\n        ...withViewTimelineAnimation({\n          height: '300vh',\n        }),\n        ['img, video']: {\n          objectFit: 'cover',\n          width: '100%',\n          height: '100%',\n        },\n      },\n    })\n    .withAttribute('role', 'main')\n    .withAttribute('aria-label', 'Hero section');\n\n  if (text) {\n    composite.withChild(text);\n  }\n\n  const built = composite.build();\n\n  built.styles += keyFrameColumns;\n  built.styles += keyFrameRows;\n  built.styles += keyFrameTint;\n\n  return built;\n};\n"],"names":["isPreferredReducedMotion","token","assets.image.background","assets.video.observedAutoPlay","ElementBuilder","withViewTimelineAnimation","Styles","textLockup.large","grid"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,wBAAwBA,cAAAA,yBAAA;AAC9B,MAAM,4BAA4B,MAChC,oBAAoB,UAAU,IAAI,SAAS,sBAAsB,UAAU;AAC7E,MAAM,4BACJ,yBAAyB,CAAC,0BAAA;AAE5B,MAAM,mBAAmB;AAAA,EACvB,cAAc,EAAE,OAAO,SAAS,KAAK,QAAA;AAAA,EACrC,WAAW,EAAE,OAAO,SAAS,KAAK,QAAA;AAAA,EAClC,WAAW,EAAE,OAAO,QAAQ,KAAK,QAAA;AACnC;AAEA,MAAM,cAAc;AAAA,EAClB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAEZ;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA,+BAGO,YAAY,QAAQ,OAAO;AAAA;AAAA;AAAA,+BAG3B,YAAY,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAMxD,MAAM,eAAe;AAAA;AAAA;AAAA,4BAGO,YAAY,KAAK,OAAO;AAAA;AAAA;AAAA,4BAGxB,YAAY,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAMlD,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWrB,MAAM,aAAa;AAAA,EACjB,SAAS;AAAA,EACT,cAAc;AAAA,EACd,SAAS,GAAGC,iBAAM,QAAQ,GAAG;AAAA,EAC7B,OAAO;AAAA,EACP,QAAQ;AAAA,EAER,CAAC,WAAWA,iBAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,IAC9C,SAAS,GAAGA,iBAAM,QAAQ,EAAE;AAAA,EAAA;AAAA,EAG9B,CAAC,WAAWA,iBAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,IAC/C,SAAS,GAAGA,iBAAM,QAAQ,EAAE;AAAA,EAAA;AAAA,EAG9B,CAAC,OAAO,GAAG;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,EAAA;AAEd;AAEA,MAAM,qBAAqB,CAAC,UAC1BC,WAAwB;AAAA,EACtB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AACjB,CAAC;AAEH,MAAM,qBAAqB,CAAC,UAC1BC,iBAA8B;AAAA,EAC5B;AAAA,EACA,YAAY;AAAA,EACZ,yBAAyB;AAAA,IACvB,yBAAyB;AAAA,MACvB,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,UAAU;AAAA,MAEV,CAAC,SAAS,GAAG;AAAA,QACX,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF;AAEJ,CAAC;AAEH,MAAM,eAAe,CAAC,EAAE,QAAQ,mBAAgC;AAC9D,QAAM,WAAW,OAAO,IAAI,CAAC,UAAU,mBAAmB,KAAK,CAAC;AAEhE,SAAO,IAAIC,kBAAAA,iBACR;AAAA,IACC,eAAe,0BAA0B;AAAA,EAAA,EAE1C,aAAa,GAAG,QAAQ,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,kBAAkB,YAAY,KAAK;AAAA,IAAA;AAAA,EACrC,CACD,EACA,cAAc,QAAQ,QAAQ,EAC9B;AAAA,IACC;AAAA,IACA,GAAG,eAAe,SAAS,OAAO;AAAA,EAAA,EAEnC,MAAA;AACL;AAEA,MAAM,eAAe,CAAC,EAAE,QAAQ,YAAyB;AACvD,QAAM,OAAO,IAAIA,kBAAAA,eAAA,EACd,cAAc,gBAAgB,EAC9B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,GAAGC,iCAA0B;AAAA,QAC3B,WAAW;AAAA,QACX,mBAAmB;AAAA,QACnB,qBAAqB,iBAAiB,UAAU;AAAA,QAChD,mBAAmB,iBAAiB,UAAU;AAAA,MAAA,CAC/C;AAAA,IAAA;AAAA,EACH,CACD,EACA,cAAc,QAAQ,QAAQ,EAC9B,cAAc,cAAc,mBAAmB,EAC/C,MAAA;AAEH,QAAM,YAAY,IAAID,kBAAAA,eAAA,EACnB,cAAc,kBAAkB,EAChC,UAAU,IAAI,EACd,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,kBAAkB,YAAY,KAAK;AAAA,MACnC,GAAGC,iCAA0B;AAAA,QAC3B,WAAW;AAAA,QACX,mBAAmB;AAAA,QACnB,qBAAqB,iBAAiB,UAAU;AAAA,QAChD,mBAAmB,iBAAiB,UAAU;AAAA,MAAA,CAC/C;AAAA,IAAA;AAAA,EACH,CACD;AAEH,MAAI,OAAO;AACT,cACG,UAAU,mBAAmB,OAAO,CAAC,CAAC,CAAC,EACvC,UAAU,mBAAmB,KAAK,CAAC,EACnC,UAAU,mBAAmB,OAAO,CAAC,CAAC,CAAC;AAAA,EAC5C,OAAO;AACL,WAAO,QAAQ,CAAC,UAAU;AACxB,gBAAU,UAAU,mBAAmB,KAAK,CAAC;AAAA,IAC/C,CAAC;AAAA,EACH;AAEA,SAAO,UAAU,MAAA;AACnB;AAEA,MAAM,iBAAiB,CACrB,UACqC;AACrC,QAAM,EAAE,aAAa;AACrB,QAAM,iBAAiB,UAAU,aAAa,KAAA,EAAO,UAAU;AAC/D,QAAM,sBAAsB,iBAAiB;AAE7C,MAAI,CAAC,SAAU,QAAO;AAEtB,QAAM,gBAAgB;AAAA,IACpB,CAAC,eAAeJ,iBAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,MACnD,GAAI,uBAAuB;AAAA,QACzB,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF;AAGF,SAAO,IAAIG,kBAAAA,eAAe,QAAQ,EAC/B,OAAOE,kBAAO,WAAW,SAAS,MAAM,UAAU,EAClD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,OAAOL,iBAAM,MAAM;AAAA,MACnB,eAAe;AAAA,MACf,UAAU;AAAA,MACV,GAAG;AAAA,IAAA;AAAA,IAEL,cAAc;AAAA,MACZ,WAAWA,iBAAM,QAAQ;AAAA,IAAA;AAAA,EAC3B,CACD,EACA,MAAA;AACL;AAEA,MAAM,sBAAsB,CAC1B,UACG;AACH,QAAM,EAAE,SAAS,UAAU,MAAM,gBAAgB;AACjD,MAAI,wBAAwB;AAE5B,MAAI,6BAA6B,CAAC,aAAa;AAC7C,4BAAwB;AAAA,EAC1B;AAEA,MAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,UAAU;AAClC,WAAO;AAAA,EACT;AAEA,QAAM,gBAAgB,IAAIG,kBAAAA,eAAA,EACvB,cAAc,4BAA4B,EAC1C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS,GAAGH,iBAAM,QAAQ,EAAE;AAAA,MAE5B,CAAC,eAAeA,iBAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAClD,SAAS,GAAGA,iBAAM,QAAQ,KAAK,CAAC;AAAA,QAChC,SAAS;AAAA,QACT,eAAe;AAAA,QACf,gBAAgB;AAAA,MAAA;AAAA,MAGlB,CAAC,eAAeA,iBAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QACnD,SAAS,GAAGA,iBAAM,QAAQ,KAAK,CAAC;AAAA,MAAA;AAAA,MAGlC,GAAGI,iCAA0B;AAAA,QAC3B,YAAY;AAAA,MAAA,CACb;AAAA,MAED,CAAC,GAAG,GAAG;AAAA,QACL,GAAI,yBAAyB;AAAA,UAC3B,OAAO,GAAGJ,iBAAM,MAAM,KAAK;AAAA,QAAA;AAAA,MAC7B;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AAEH,QAAM,OAAO,IAAIG,iCAAA,EACd,OAAOE,kBAAO,OAAO,MAAM,WAAW,QAAQ,EAC9C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,MAAA;AAEH,QAAM,oBAAoBC,MAAiB;AAAA,IACzC,mBAAmB,eAAe,KAAK;AAAA,IACvC,aAAa;AAAA,IACb;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,OAAK,QAAQ,YAAY,kBAAkB,OAAO;AAClD,OAAK,UAAU,kBAAkB;AAEjC,gBAAc,QAAQ,YAAY,KAAK,OAAO;AAC9C,gBAAc,UAAU,KAAK;AAE7B,SAAO;AACT;AAEA,MAAM,oBAAoB,CACxB,UAKU;AACV,QAAM,aAAa,MAAM,QAAQ,KAAK,CAAC,MAAM,EAAE,YAAY;AAC3D,QAAM,cAAc,MAAM,QAAQ,KAAK,CAAC,MAAM,CAAC,EAAE,YAAY;AAE7D,QAAM,SAAS,CAAA;AAGf,MAAI,CAAC,YAAY;AACf,WAAO,KAAK,uCAAuC;AAAA,EACrD,WAAW,CAAC,WAAW,UAAU,WAAW,OAAO,WAAW,GAAG;AAC/D,WAAO,KAAK,0CAA0C;AAAA,EACxD;AAEA,MAAI,CAAC,aAAa;AAChB,WAAO,KAAK,wCAAwC;AAAA,EACtD,WAAW,CAAC,YAAY,UAAU,YAAY,OAAO,WAAW,GAAG;AACjE,WAAO,KAAK,2CAA2C;AAAA,EACzD;AAGA,MAAI,CAAC,MAAM,QAAQ;AACjB,WAAO,KAAK,kCAAkC;AAAA,EAChD,OAAO;AACL,QAAI,CAAC,MAAM,OAAO,UAAU,MAAM,OAAO,OAAO,WAAW,GAAG;AAC5D,aAAO,KAAK,qCAAqC;AAAA,IACnD,WAAW,MAAM,OAAO,SAAS,MAAM,OAAO,OAAO,SAAS,GAAG;AAC/D,aAAO,KAAK,2DAA2D;AAAA,IACzE;AAAA,EACF;AAEA,MAAI,OAAO,SAAS,GAAG;AACrB,WAAO,QAAQ,CAAC,UAAU,QAAQ,IAAI,oBAAoB,KAAK,CAAC;AAChE,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,QAAQ,MAAM;AAAA,EAAA;AAElB;AAEA,MAAM,mBAAmB,CACvB,YACA,aACA,WACG;AACH,QAAM,aAAa;AAAA,IACjB,qBAAqB,YAAY,QAAQ;AAAA,IACzC,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS,GAAGN,iBAAM,QAAQ,GAAG;AAAA,IAE7B,CAAC,WAAWA,iBAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,MAC9C,SAAS,GAAGA,iBAAM,QAAQ,EAAE;AAAA,IAAA;AAAA,IAG9B,CAAC,WAAWA,iBAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,MAC/C,SAAS,GAAGA,iBAAM,QAAQ,EAAE;AAAA,IAAA;AAAA,IAG9B,GAAGI,iCAA0B;AAAA,MAC3B,UAAU;AAAA,MACV,KAAK;AAAA,MACL,WAAW;AAAA,MACX,mBAAmB;AAAA,MACnB,qBAAqB,iBAAiB,aAAa;AAAA,MACnD,mBAAmB,iBAAiB,aAAa;AAAA,IAAA,CAClD;AAAA,EAAA;AAGH,SAAO,IAAID,kBAAAA,eAAA,EACR,cAAc,kBAAkB,EAChC;AAAA,IACC,aAAa,UAAU;AAAA,IACvB,aAAa,MAAM;AAAA,IACnB,aAAa,WAAW;AAAA,EAAA,EAEzB,WAAW,EAAE,SAAS,YAAY,EAClC,cAAc,QAAQ,QAAQ,EAC9B,cAAc,cAAc,kBAAkB,EAC9C,MAAA;AACL;AAEA,MAAA,OAAe,CAAC,UAAyB;AACvC,QAAM,YAAY,kBAAkB,KAAK;AACzC,MAAI,CAAC,UAAW,QAAO;AAEvB,QAAM,EAAE,YAAY,aAAa,OAAA,IAAW;AAC5C,QAAM,OAAO,oBAAoB,KAAK;AACtC,QAAMI,QAAO,iBAAiB,YAAY,aAAa,MAAM;AAE7D,QAAM,YAAY,IAAIJ,kBAAAA,eAAA,EACnB,cAAc,qBAAqB,EACnC,UAAUI,KAAI,EACd,WAAW;AAAA,IACV,SAAS;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,MACT,eAAe;AAAA,MACf,GAAGH,iCAA0B;AAAA,QAC3B,QAAQ;AAAA,MAAA,CACT;AAAA,MACD,CAAC,YAAY,GAAG;AAAA,QACd,WAAW;AAAA,QACX,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EACF,CACD,EACA,cAAc,QAAQ,MAAM,EAC5B,cAAc,cAAc,cAAc;AAE7C,MAAI,MAAM;AACR,cAAU,UAAU,IAAI;AAAA,EAC1B;AAEA,QAAM,QAAQ,UAAU,MAAA;AAExB,QAAM,UAAU;AAChB,QAAM,UAAU;AAChB,QAAM,UAAU;AAEhB,SAAO;AACT;;"}
+{"version":3,"file":"grid.js","sources":["../../../../source/composite/hero/custom/grid.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\nimport { type ContentElement, type ElementModel } from '../../../_types';\n\ninterface CornerProps {\n  images: Array<HTMLImageElement>;\n  isCornerLeft: boolean;\n}\n\ninterface CenterProps {\n  images: Array<HTMLImageElement>;\n  video?: HTMLVideoElement | null;\n}\n\ninterface HeroGridProps {\n  headline?: ContentElement;\n  text?: ContentElement;\n  actions?: ContentElement;\n  corners: Array<CornerProps>;\n  center: CenterProps | null;\n  isThemeDark?: boolean;\n}\n\nconst isPreferReducedMotion = isPreferredReducedMotion();\nconst isScrollTimelineSupported = () =>\n  'ScrollTimeline' in window || CSS.supports('animation-timeline', 'scroll()');\nconst isDisplayWithoutAnimation =\n  isPreferReducedMotion || !isScrollTimelineSupported();\n\nconst ANIMATION_RANGES = {\n  GRID_COLUMNS: { start: '110vh', end: '230vh' },\n  GRID_ROWS: { start: '110vh', end: '230vh' },\n  TINT_FADE: { start: '50vh', end: '140vh' },\n} as const;\n\nconst GRID_LAYOUT = {\n  COLUMNS: {\n    INITIAL: '20% 60% 20%',\n    FINAL: '0 100% 0',\n    DEFAULT: '25% 50% 25%',\n  },\n  ROWS: {\n    INITIAL: '25vh 1fr 25vh',\n    FINAL: '0 1fr 0',\n    TRIPLE: '1fr 1fr 1fr',\n  },\n} as const;\n\nconst keyFrameColumns = `\n  @keyframes grid-columns {\n    from {\n      grid-template-columns: ${GRID_LAYOUT.COLUMNS.INITIAL};\n    }\n    to {\n      grid-template-columns: ${GRID_LAYOUT.COLUMNS.FINAL};\n      grid-gap: 0;\n    }\n  }\n`;\n\nconst keyFrameRows = `\n  @keyframes grid-rows {\n    from {\n      grid-template-rows: ${GRID_LAYOUT.ROWS.INITIAL};\n    }\n    to {\n      grid-template-rows: ${GRID_LAYOUT.ROWS.FINAL};\n      grid-gap: 0;\n    }\n  }\n`;\n\nconst keyFrameTint = `\n  @keyframes tint-fade {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n`;\n\nconst columnBase = {\n  display: 'grid',\n  gridAutoFlow: 'row dense',\n  gridGap: `${token.spacing.min}`,\n  width: '100%',\n  height: '100vh',\n\n  [`@media (${token.media.queries.tablet.min})`]: {\n    gridGap: `${token.spacing.md}`,\n  },\n\n  [`@media (${token.media.queries.desktop.min})`]: {\n    gridGap: `${token.spacing.lg}`,\n  },\n\n  ['& > *']: {\n    overflow: 'hidden',\n    position: 'relative',\n  },\n};\n\nconst createImageWrapper = (image: HTMLImageElement) =>\n  assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n\nconst createVideoWrapper = (video: HTMLVideoElement) =>\n  assets.video.observedAutoPlay({\n    video,\n    isAutoplay: true,\n    additionalElementStyles: {\n      additionalElementStyles: {\n        width: '100%',\n        aspectRatio: '1 / 1',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    },\n  });\n\nconst createCorner = ({ images, isCornerLeft }: CornerProps) => {\n  const children = images.map((image) => createImageWrapper(image));\n\n  return new ElementBuilder()\n    .withClassName(\n      isCornerLeft ? 'hero-grid-corner-left' : 'hero-grid-corner-right',\n    )\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        ...columnBase,\n        gridTemplateRows: GRID_LAYOUT.ROWS.TRIPLE,\n      },\n    })\n    .withAttribute('role', 'region')\n    .withAttribute(\n      'aria-label',\n      `${isCornerLeft ? 'Left' : 'Right'} decorative image grid`,\n    )\n    .build();\n};\n\nconst createCenter = ({ images, video }: CenterProps) => {\n  const tint = new ElementBuilder()\n    .withClassName('hero-grid-tint')\n    .withStyles({\n      element: {\n        width: '100%',\n        height: '100%',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        backgroundColor: 'rgba(0, 0, 0, 0.5)',\n        zIndex: 9,\n        opacity: 0,\n        ...withViewTimelineAnimation({\n          animation: 'tint-fade ease-in-out forwards',\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_RANGES.TINT_FADE.start,\n          animationRangeEnd: ANIMATION_RANGES.TINT_FADE.end,\n        }),\n      },\n    })\n    .withAttribute('role', 'region')\n    .withAttribute('aria-label', 'Main hero content')\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('hero-grid-center')\n    .withChild(tint)\n    .withStyles({\n      element: {\n        ...columnBase,\n        gridTemplateRows: GRID_LAYOUT.ROWS.INITIAL,\n        ...withViewTimelineAnimation({\n          animation: 'grid-rows ease-in-out forwards',\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_RANGES.GRID_ROWS.start,\n          animationRangeEnd: ANIMATION_RANGES.GRID_ROWS.end,\n        }),\n      },\n    });\n\n  if (video) {\n    container\n      .withChild(createImageWrapper(images[0]))\n      .withChild(createVideoWrapper(video))\n      .withChild(createImageWrapper(images[1]));\n  } else {\n    images.forEach((image) => {\n      container.withChild(createImageWrapper(image));\n    });\n  }\n\n  return container.build();\n};\n\nconst createHeadline = (\n  props: Pick<HeroGridProps, 'headline'>,\n): ElementModel<HTMLElement> | null => {\n  const { headline } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n\n  if (!headline) return null;\n\n  const desktopStyles = {\n    [`@container (${token.media.queries.desktop.min})`]: {\n      ...(isOverwriteHeadline && {\n        fontSize: '80px',\n      }),\n    },\n  };\n\n  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.extraLarge)\n    .withStyles({\n      element: {\n        color: token.color.white,\n        textTransform: 'uppercase',\n        textWrap: 'pretty',\n        ...desktopStyles,\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createTextContainer = (\n  props: Pick<HeroGridProps, 'headline' | 'text' | 'actions' | 'isThemeDark'>,\n) => {\n  const { actions, headline, text, isThemeDark } = props;\n  let shouldRenderBlackText = null;\n\n  if (isDisplayWithoutAnimation && !isThemeDark) {\n    shouldRenderBlackText = true;\n  }\n\n  if (!text && !actions && !headline) {\n    return null;\n  }\n\n  const textContainer = new ElementBuilder()\n    .withClassName('hero-expand-text-container')\n    .withStyles({\n      element: {\n        position: 'relative',\n        height: '100%',\n        zIndex: 9999,\n        textAlign: 'center',\n        padding: `${token.spacing.md} 0`,\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['3xl']} 0`,\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'space-between',\n        },\n\n        [`@container (${token.media.queries.highDef.min})`]: {\n          padding: `${token.spacing['6xl']} 0`,\n        },\n\n        ...withViewTimelineAnimation({\n          paddingTop: '140vh',\n        }),\n\n        ['*']: {\n          ...(shouldRenderBlackText && {\n            color: `${token.color.black} !important`,\n          }),\n        },\n      },\n    })\n    .build();\n\n  const lock = new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.smallest)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n\n  const textLockupElement = textLockup.large({\n    headlineComposite: createHeadline(props),\n    textLargest: text,\n    actions,\n    isThemeDark: true,\n  });\n\n  lock.element.appendChild(textLockupElement.element);\n  lock.styles += textLockupElement.styles;\n\n  textContainer.element.appendChild(lock.element);\n  textContainer.styles += lock.styles;\n\n  return textContainer;\n};\n\nconst validateGridProps = (\n  props: HeroGridProps,\n): {\n  leftCorner: CornerProps;\n  rightCorner: CornerProps;\n  center: CenterProps;\n} | null => {\n  const leftCorner = props.corners.find((c) => c.isCornerLeft);\n  const rightCorner = props.corners.find((c) => !c.isCornerLeft);\n\n  const errors = [];\n\n  // Validate corners\n  if (!leftCorner) {\n    errors.push('Left corner is required for hero grid');\n  } else if (!leftCorner.images || leftCorner.images.length === 0) {\n    errors.push('Left corner must have at least one image');\n  }\n\n  if (!rightCorner) {\n    errors.push('Right corner is required for hero grid');\n  } else if (!rightCorner.images || rightCorner.images.length === 0) {\n    errors.push('Right corner must have at least one image');\n  }\n\n  // Validate center\n  if (!props.center) {\n    errors.push('Center is required for hero grid');\n  } else {\n    if (!props.center.images || props.center.images.length === 0) {\n      errors.push('Center must have at least one image');\n    } else if (props.center.video && props.center.images.length < 2) {\n      errors.push('Center must have at least 2 images when video is provided');\n    }\n  }\n\n  if (errors.length > 0) {\n    errors.forEach((error) => console.log('Hero Grid Error:', error));\n    return null;\n  }\n\n  return {\n    leftCorner: leftCorner as CornerProps,\n    rightCorner: rightCorner as CornerProps,\n    center: props.center as CenterProps,\n  };\n};\n\nconst createGridLayout = (\n  leftCorner: CornerProps,\n  rightCorner: CornerProps,\n  center: CenterProps,\n) => {\n  const gridStyles = {\n    gridTemplateColumns: GRID_LAYOUT.COLUMNS.DEFAULT,\n    height: '100vh',\n    width: '100%',\n    display: 'grid',\n    gridGap: `${token.spacing.min}`,\n\n    [`@media (${token.media.queries.tablet.min})`]: {\n      gridGap: `${token.spacing.md}`,\n    },\n\n    [`@media (${token.media.queries.desktop.min})`]: {\n      gridGap: `${token.spacing.lg}`,\n    },\n\n    ...withViewTimelineAnimation({\n      position: 'sticky',\n      top: 0,\n      animation: 'grid-columns ease-in-out forwards',\n      animationTimeline: 'view()',\n      animationRangeStart: ANIMATION_RANGES.GRID_COLUMNS.start,\n      animationRangeEnd: ANIMATION_RANGES.GRID_COLUMNS.end,\n    }),\n  };\n\n  return new ElementBuilder()\n    .withClassName('hero-grid-layout')\n    .withChildren(\n      createCorner(leftCorner),\n      createCenter(center),\n      createCorner(rightCorner),\n    )\n    .withStyles({ element: gridStyles })\n    .withAttribute('role', 'region')\n    .withAttribute('aria-label', 'Hero grid layout')\n    .build();\n};\n\nexport const createCompositeHeroGrid = (props: HeroGridProps) => {\n  const validated = validateGridProps(props);\n  if (!validated) return null;\n\n  const { leftCorner, rightCorner, center } = validated;\n  const text = createTextContainer(props);\n  const grid = createGridLayout(leftCorner, rightCorner, center);\n\n  const composite = new ElementBuilder()\n    .withClassName('hero-grid-container')\n    .withChild(grid)\n    .withStyles({\n      element: {\n        width: '100%',\n        display: 'block',\n        containerType: 'inline-size',\n        ...withViewTimelineAnimation({\n          height: '300vh',\n        }),\n        ['img, video']: {\n          objectFit: 'cover',\n          width: '100%',\n          height: '100%',\n        },\n      },\n    })\n    .withAttribute('role', 'main')\n    .withAttribute('aria-label', 'Hero section');\n\n  if (text) {\n    composite.withChild(text);\n  }\n\n  const built = composite.build();\n\n  built.styles += keyFrameColumns;\n  built.styles += keyFrameRows;\n  built.styles += keyFrameTint;\n\n  return built;\n};\n"],"names":["assets.image.background","assets.video.observedAutoPlay","textLockup.large"],"mappings":"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"}

package/dist/composite/hero/custom/index.d.ts

@@ -1,4 +1,4 @@
-export { default as grid } from './grid';
-export { default as expand } from './expand';
-export { default as videoArrow } from './video-arrow';
+export { createCompositeHeroGrid as grid } from './grid';
+export { createCompositeHeroExpand as expand } from './expand';
+export { createCompositeHeroVideoArrow as videoArrow } from './video-arrow';
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/hero/custom/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzD,OAAO,EAAE,yBAAyB,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC/D,OAAO,EAAE,6BAA6B,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/composite/hero/custom/index.js

@@ -1,9 +1,9 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const grid = require("./grid.js");
-const expand = require("./expand.js");
-const videoArrow = require("./video-arrow.js");
-exports.grid = grid;
-exports.expand = expand;
-exports.videoArrow = videoArrow;
+import { createCompositeHeroGrid } from "./grid.js";
+import { createCompositeHeroExpand } from "./expand.js";
+import { createCompositeHeroVideoArrow } from "./video-arrow.js";
+export {
+  createCompositeHeroExpand as expand,
+  createCompositeHeroGrid as grid,
+  createCompositeHeroVideoArrow as videoArrow
+};
 //# sourceMappingURL=index.js.map

package/dist/composite/hero/custom/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/composite/hero/custom/video-arrow.d.ts

@@ -3,7 +3,7 @@ interface HeroVideoArrowProps extends Omit<BaseHeroVideoArrowProps, 'video'> {
     video: HTMLVideoElement;
     isAnimationOnLoad?: boolean;
 }
-declare const _default: (props: HeroVideoArrowProps) => {
+export declare const createCompositeHeroVideoArrow: (props: HeroVideoArrowProps) => {
     events: {
         load: () => void;
     };
@@ -12,5 +12,5 @@ declare const _default: (props: HeroVideoArrowProps) => {
     update?: (props: Partial<import('@universityofmaryland/web-builder-library').BuilderOptions>) => void;
     destroy?: () => void;
 };
-export default _default;
+export {};
 //# sourceMappingURL=video-arrow.d.ts.map

package/dist/composite/hero/custom/video-arrow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video-arrow.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,mBAAmB,IAAI,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAGhF,UAAU,mBAAoB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,OAAO,CAAC;IAC1E,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;yBA+Ke,OAAO,mBAAmB;;;;;;;;;AAA1C,wBAyDE"}
+{"version":3,"file":"video-arrow.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,mBAAmB,IAAI,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAGhF,UAAU,mBAAoB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,OAAO,CAAC;IAC1E,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AA+KD,eAAO,MAAM,6BAA6B,GAAI,OAAO,mBAAmB;;;;;;;;CAyDvE,CAAC"}