@universityofmaryland/web-elements-library 1.4.8 → 1.5.0

package/dist/composite/hero/stacked.mjs

@@ -1,20 +1,30 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
-import "../../node_modules/postcss/lib/postcss.mjs";
-import "../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../node_modules/postcss-js/index.mjs";
-import { withViewTimelineAnimation } from "../../utilities/theme/media.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import { withViewTimelineAnimation } from "@universityofmaryland/web-utilities-library/styles";
+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 { createDiv } from "../../model/elements/index.mjs";
+import "@universityofmaryland/web-icons-library/arrows";
 import "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../atomic/animations/brand/card-stack.mjs";
 import imageContainer from "../../atomic/assets/image/background.mjs";
+import "@universityofmaryland/web-utilities-library/performance";
 import observedAutoPlay from "../../atomic/assets/video/observed-auto-play.mjs";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
 import "../../atomic/layout/block/stacked.mjs";
 import "../../atomic/layout/overlay/modal.mjs";
 import "../../atomic/layout/person/columns.mjs";
+import "@universityofmaryland/web-icons-library/social";
 import "../../atomic/text-lockup/date.mjs";
 import large from "../../atomic/text-lockup/large.mjs";
 import "../../atomic/text-lockup/small.mjs";
+import "@universityofmaryland/web-styles-library/typography";
 import { spaceHorizontalLarger, spaceHorizontalSmall } from "../../model/elements/layout.mjs";
 import { campaignLarge } from "../../model/elements/headline.mjs";
 const REF_KEY_FRAME_FADE_OVER = "hero-stacked-fade-over";
@@ -27,8 +37,8 @@ const keyFrameFadeOver = `
 `;
 const keyFrameFontColor = `
   @keyframes ${REF_KEY_FRAME_FONT_COLOR} {
-    from { color: ${Styles.token.color.black}; }
-    to { color: ${Styles.token.color.white}; }
+    from { color: ${token.color.black}; }
+    to { color: ${token.color.white}; }
   }
 `;
 const createVideoAsset = (video) => {
@@ -44,17 +54,17 @@ const createImageAsset = (image) => {
     isGifAllowed: true,
     isShowCaption: true,
     customStyles: {
-      [`@media (${Styles.token.media.queries.large.max})`]: {
-        [`&:has(.${Styles.element.asset.gif.toggle.className})`]: {
+      [`@media (${token.media.queries.large.max})`]: {
+        [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {
           minHeight: "56vw"
         }
       },
-      [`@media (${Styles.token.media.queries.tablet.min})`]: {
-        [`&:has(.${Styles.element.asset.gif.toggle.className})`]: {
+      [`@media (${token.media.queries.tablet.min})`]: {
+        [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {
           minHeight: "550px"
         }
       },
-      [`& .${Styles.element.asset.gif.toggle.className} button`]: {
+      [`& .${elementStyles.asset.gif.toggle.className} button`]: {
         zIndex: 99999
       }
     }
@@ -76,7 +86,7 @@ const createOverlay = (includesAnimation) => {
         zIndex: 99,
         opacity: 0,
         ...includesAnimation && {
-          [`@media (${Styles.token.media.queries.tablet.min})`]: {
+          [`@media (${token.media.queries.tablet.min})`]: {
             [`@media (prefers-reduced-motion: no-preference)`]: {
               [`@supports (animation-timeline: scroll())`]: {
                 animation: `${REF_KEY_FRAME_FADE_OVER} ease-in-out forwards`,
@@ -139,7 +149,7 @@ const createAsset = ({
         ["& img, & video"]: {
           objectFit: "cover",
           aspectRatio: "5 / 4",
-          [`@container (${Styles.token.media.queries.tablet.min})`]: {
+          [`@container (${token.media.queries.tablet.min})`]: {
             maxHeight: "700px",
             minHeight: "300px",
             ...!isHeightSmall && {
@@ -159,14 +169,14 @@ const createHeadline = (props) => {
   const isOverwriteHeadline = characterCount < 30;
   if (!headline) return null;
   const desktopStyles = {
-    [`@container (${Styles.token.media.queries.desktop.min})`]: {
+    [`@container (${token.media.queries.desktop.min})`]: {
       ...isOverwriteHeadline && {
         fontSize: "80px"
       }
     }
   };
   const animationStyles = {
-    [`@container (${Styles.token.media.queries.tablet.min})`]: {
+    [`@container (${token.media.queries.tablet.min})`]: {
       ...withViewTimelineAnimation({
         animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,
         animationTimeline: "view()",
@@ -179,15 +189,15 @@ const createHeadline = (props) => {
       })
     }
   };
-  const elementStyles = {
+  const elementStyles2 = {
     element: {
-      color: Styles.token.color.black,
+      color: token.color.black,
       maxWidth: "700px",
       margin: "0 auto",
       textTransform: "uppercase",
-      marginTop: `${Styles.token.spacing.sm}`,
+      marginTop: `${token.spacing.sm}`,
       ...isThemeDark && {
-        color: Styles.token.color.white
+        color: token.color.white
       },
       ...includesAnimation && {
         ...!isThemeDark && {
@@ -197,12 +207,12 @@ const createHeadline = (props) => {
       ...desktopStyles
     },
     siblingAfter: {
-      marginTop: `${Styles.token.spacing.md}`
+      marginTop: `${token.spacing.md}`
     }
   };
   return campaignLarge({
     element: headline,
-    elementStyles
+    elementStyles: elementStyles2
   });
 };
 const createText = (props) => {
@@ -228,17 +238,17 @@ const createText = (props) => {
     children: [lock],
     elementStyles: {
       element: {
-        padding: `${Styles.token.spacing.lg} 0`,
+        padding: `${token.spacing.lg} 0`,
         display: "flex",
         justifyContent: "center",
         textAlign: "center",
         position: "relative",
         zIndex: "999",
-        [`@container (${Styles.token.media.queries.tablet.min})`]: {
-          padding: `${Styles.token.spacing["6xl"]} 0 ${Styles.token.spacing["3xl"]}`
+        [`@container (${token.media.queries.tablet.min})`]: {
+          padding: `${token.spacing["6xl"]} 0 ${token.spacing["3xl"]}`
         },
         ...includesAnimation && {
-          [`@container (${Styles.token.media.queries.tablet.min})`]: {
+          [`@container (${token.media.queries.tablet.min})`]: {
             ...withViewTimelineAnimation({
               position: "sticky",
               top: additionalSpread || 0
@@ -248,7 +258,7 @@ const createText = (props) => {
         [`& *`]: {
           ...includesAnimation && {
             ...!isThemeDark && {
-              [`@container (${Styles.token.media.queries.tablet.min})`]: {
+              [`@container (${token.media.queries.tablet.min})`]: {
                 ...withViewTimelineAnimation({
                   animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,
                   animationTimeline: "view()",
@@ -263,10 +273,10 @@ const createText = (props) => {
             }
           }
         },
-        [`& .${Styles.element.text.decoration.ribbon.className[0]}`]: {
+        [`& .${elementStyles.text.decoration.ribbon.className[0]}`]: {
           animation: "none !important"
         },
-        [`& .${Styles.element.text.rich.simpleLargest.className}`]: {
+        [`& .${elementStyles.text.rich.simpleLargest.className}`]: {
           maxWidth: "860px",
           marginLeft: "auto",
           marginRight: "auto"
@@ -294,7 +304,7 @@ const stacked = (props) => {
       element: {
         containerType: "inline-size",
         ...props.isThemeDark && {
-          backgroundColor: Styles.token.color.black
+          backgroundColor: token.color.black
         }
       }
     }

package/dist/composite/hero/stacked.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"stacked.mjs","sources":["../../../source/composite/hero/stacked.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroStackedProps } from './_types';\n\nconst REF_KEY_FRAME_FADE_OVER = 'hero-stacked-fade-over';\nconst REF_KEY_FRAME_FONT_COLOR = 'hero-stacked-font-color';\n\nconst keyFrameFadeOver = `\n  @keyframes ${REF_KEY_FRAME_FADE_OVER} {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\nconst keyFrameFontColor = `\n  @keyframes ${REF_KEY_FRAME_FONT_COLOR} {\n    from { color: ${Styles.token.color.black}; }\n    to { color: ${Styles.token.color.white}; }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n    customStyles: {\n      [`@media (${Styles.token.media.queries.large.max})`]: {\n        [`&:has(.${Styles.element.asset.gif.toggle.className})`]: {\n          minHeight: '56vw',\n        },\n      },\n\n      [`@media (${Styles.token.media.queries.tablet.min})`]: {\n        [`&:has(.${Styles.element.asset.gif.toggle.className})`]: {\n          minHeight: '550px',\n        },\n      },\n\n      [`& .${Styles.element.asset.gif.toggle.className} button`]: {\n        zIndex: 99999,\n      },\n    },\n  });\n};\n\nconst createOverlay = (includesAnimation?: boolean) => {\n  return ElementModel.createDiv({\n    className: 'umd-hero-stacked__overlay',\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n        height: '100vh',\n        width: '100vw',\n        display: 'block',\n        backgroundColor: 'rgba(0,0,0,.7)',\n        zIndex: 99,\n        opacity: 0,\n\n        ...(includesAnimation && {\n          [`@media (${Styles.token.media.queries.tablet.min})`]: {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              [`@supports (animation-timeline: scroll())`]: {\n                animation: `${REF_KEY_FRAME_FADE_OVER} ease-in-out forwards`,\n                animationTimeline: 'view()',\n                animationRangeStart: '30vh',\n                animationRangeEnd: '70vh',\n              },\n            },\n          },\n        }),\n      },\n    },\n  });\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n  isWidthLarge = false,\n  isHeightSmall = false,\n}: Pick<\n  HeroStackedProps,\n  'image' | 'video' | 'includesAnimation' | 'isWidthLarge' | 'isHeightSmall'\n>) => {\n  let mediaElement: ElementVisual | null = null;\n\n  if (video && video instanceof HTMLVideoElement) {\n    mediaElement = createVideoAsset(video);\n  } else if (image) {\n    mediaElement = createImageAsset(image);\n  }\n\n  if (!mediaElement) {\n    return null;\n  }\n\n  const assetInteriorElement = ElementModel.createDiv({\n    className: 'umd-hero-stacked__asset--interior',\n    children: [mediaElement, createOverlay(includesAnimation)],\n    elementStyles: {\n      element: {\n        overflow: 'clip',\n        position: 'relative',\n        height: '100%',\n      },\n    },\n  });\n\n  const horizontalLock = ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [assetInteriorElement],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n      },\n    },\n  });\n\n  const assetContainer = ElementModel.createDiv({\n    className: 'umd-hero-stacked__asset',\n    children: isWidthLarge\n      ? [horizontalLock]\n      : [mediaElement, createOverlay(includesAnimation)],\n    elementStyles: {\n      element: {\n        position: 'relative',\n        overflow: 'clip',\n        display: 'grid',\n\n        ['& img, & video']: {\n          objectFit: 'cover',\n          aspectRatio: '5 / 4',\n\n          [`@container (${Styles.token.media.queries.tablet.min})`]: {\n            maxHeight: '700px',\n            minHeight: '300px',\n\n            ...(!isHeightSmall && {\n              minHeight: '400px',\n              height: '65vh !important',\n            }),\n          },\n        },\n      },\n    },\n  });\n\n  return assetContainer;\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroStackedProps,\n    'headline' | 'isHeightSmall' | 'includesAnimation' | 'isThemeDark'\n  >,\n) => {\n  const { headline, isHeightSmall, includesAnimation, isThemeDark } = 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 (${Styles.token.media.queries.desktop.min})`]: {\n      ...(isOverwriteHeadline && {\n        fontSize: '80px',\n      }),\n    },\n  };\n\n  const animationStyles = {\n    [`@container (${Styles.token.media.queries.tablet.min})`]: {\n      ...Utils.theme.media.withViewTimelineAnimation({\n        animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,\n        animationTimeline: 'view()',\n        animationRangeStart: '100vh',\n        animationRangeEnd: '130vh',\n\n        ...(isHeightSmall && {\n          animationRangeStart: '120vh',\n          animationRangeEnd: '150vh',\n        }),\n      }),\n    },\n  };\n\n  const elementStyles = {\n    element: {\n      color: Styles.token.color.black,\n      maxWidth: '700px',\n      margin: '0 auto',\n      textTransform: 'uppercase',\n      marginTop: `${Styles.token.spacing.sm}`,\n\n      ...(isThemeDark && {\n        color: Styles.token.color.white,\n      }),\n\n      ...(includesAnimation && {\n        ...(!isThemeDark && {\n          ...animationStyles,\n        }),\n      }),\n\n      ...desktopStyles,\n    },\n    siblingAfter: {\n      marginTop: `${Styles.token.spacing.md}`,\n    },\n  };\n\n  return ElementModel.headline.campaignLarge({\n    element: headline,\n    elementStyles,\n  });\n};\n\nconst createText = (\n  props: Omit<HeroStackedProps, 'image' | 'video' | 'isWidthLarge'>,\n) => {\n  const { topPosition, isThemeDark, includesAnimation, isHeightSmall } = props;\n  const additionalSpread = topPosition ? parseInt(topPosition) : null;\n  const textLockupElement = textLockup.large({\n    ...props,\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    textLargest: props.text,\n  });\n\n  const lock = ElementModel.layout.spaceHorizontalSmall({\n    element: document.createElement('div'),\n    children: [textLockupElement],\n    elementStyles: {\n      element: {\n        position: 'relative',\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-stacked__text',\n    children: [lock],\n    elementStyles: {\n      element: {\n        padding: `${Styles.token.spacing.lg} 0`,\n        display: 'flex',\n        justifyContent: 'center',\n        textAlign: 'center',\n        position: 'relative',\n        zIndex: '999',\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          padding: `${Styles.token.spacing['6xl']} 0 ${Styles.token.spacing['3xl']}`,\n        },\n\n        ...(includesAnimation && {\n          [`@container (${Styles.token.media.queries.tablet.min})`]: {\n            ...Utils.theme.media.withViewTimelineAnimation({\n              position: 'sticky',\n              top: additionalSpread || 0,\n            }),\n          },\n        }),\n\n        [`& *`]: {\n          ...(includesAnimation && {\n            ...(!isThemeDark && {\n              [`@container (${Styles.token.media.queries.tablet.min})`]: {\n                ...Utils.theme.media.withViewTimelineAnimation({\n                  animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,\n                  animationTimeline: 'view()',\n                  animationRangeStart: '90vh',\n                  animationRangeEnd: '110vh',\n\n                  ...(isHeightSmall && {\n                    animationRangeStart: '90vh',\n                    animationRangeEnd: '110vh',\n                  }),\n                }),\n              },\n            }),\n          }),\n        },\n\n        [`& .${Styles.element.text.decoration.ribbon.className[0]}`]: {\n          animation: 'none !important',\n        },\n\n        [`& .${Styles.element.text.rich.simpleLargest.className}`]: {\n          maxWidth: '860px',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroStackedProps) => {\n  const asset = createAsset(props);\n  const hasAsset = asset !== null;\n  const shouldAnimateText = hasAsset && props.includesAnimation;\n\n  const text = createText({\n    ...props,\n    includesAnimation: shouldAnimateText,\n  });\n\n  const children: ElementVisual[] = [text];\n  if (hasAsset) {\n    children.push(asset);\n  }\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-hero-stacked',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n\n        ...(props.isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n        }),\n      },\n    },\n  });\n\n  composite.styles += keyFrameFadeOver;\n  composite.styles += keyFrameFontColor;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","ElementModel.createDiv","ElementModel.layout.spaceHorizontalLarger","Utils.theme.media.withViewTimelineAnimation","ElementModel.headline.campaignLarge","textLockup.large","ElementModel.layout.spaceHorizontalSmall"],"mappings":"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"}
+{"version":3,"file":"stacked.mjs","sources":["../../../source/composite/hero/stacked.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroStackedProps } from './_types';\n\nconst REF_KEY_FRAME_FADE_OVER = 'hero-stacked-fade-over';\nconst REF_KEY_FRAME_FONT_COLOR = 'hero-stacked-font-color';\n\nconst keyFrameFadeOver = `\n  @keyframes ${REF_KEY_FRAME_FADE_OVER} {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\nconst keyFrameFontColor = `\n  @keyframes ${REF_KEY_FRAME_FONT_COLOR} {\n    from { color: ${token.color.black}; }\n    to { color: ${token.color.white}; }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n    customStyles: {\n      [`@media (${token.media.queries.large.max})`]: {\n        [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {\n          minHeight: '56vw',\n        },\n      },\n\n      [`@media (${token.media.queries.tablet.min})`]: {\n        [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {\n          minHeight: '550px',\n        },\n      },\n\n      [`& .${elementStyles.asset.gif.toggle.className} button`]: {\n        zIndex: 99999,\n      },\n    },\n  });\n};\n\nconst createOverlay = (includesAnimation?: boolean) => {\n  return ElementModel.createDiv({\n    className: 'umd-hero-stacked__overlay',\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n        height: '100vh',\n        width: '100vw',\n        display: 'block',\n        backgroundColor: 'rgba(0,0,0,.7)',\n        zIndex: 99,\n        opacity: 0,\n\n        ...(includesAnimation && {\n          [`@media (${token.media.queries.tablet.min})`]: {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              [`@supports (animation-timeline: scroll())`]: {\n                animation: `${REF_KEY_FRAME_FADE_OVER} ease-in-out forwards`,\n                animationTimeline: 'view()',\n                animationRangeStart: '30vh',\n                animationRangeEnd: '70vh',\n              },\n            },\n          },\n        }),\n      },\n    },\n  });\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n  isWidthLarge = false,\n  isHeightSmall = false,\n}: Pick<\n  HeroStackedProps,\n  'image' | 'video' | 'includesAnimation' | 'isWidthLarge' | 'isHeightSmall'\n>) => {\n  let mediaElement: ElementVisual | null = null;\n\n  if (video && video instanceof HTMLVideoElement) {\n    mediaElement = createVideoAsset(video);\n  } else if (image) {\n    mediaElement = createImageAsset(image);\n  }\n\n  if (!mediaElement) {\n    return null;\n  }\n\n  const assetInteriorElement = ElementModel.createDiv({\n    className: 'umd-hero-stacked__asset--interior',\n    children: [mediaElement, createOverlay(includesAnimation)],\n    elementStyles: {\n      element: {\n        overflow: 'clip',\n        position: 'relative',\n        height: '100%',\n      },\n    },\n  });\n\n  const horizontalLock = ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [assetInteriorElement],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n      },\n    },\n  });\n\n  const assetContainer = ElementModel.createDiv({\n    className: 'umd-hero-stacked__asset',\n    children: isWidthLarge\n      ? [horizontalLock]\n      : [mediaElement, createOverlay(includesAnimation)],\n    elementStyles: {\n      element: {\n        position: 'relative',\n        overflow: 'clip',\n        display: 'grid',\n\n        ['& img, & video']: {\n          objectFit: 'cover',\n          aspectRatio: '5 / 4',\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            maxHeight: '700px',\n            minHeight: '300px',\n\n            ...(!isHeightSmall && {\n              minHeight: '400px',\n              height: '65vh !important',\n            }),\n          },\n        },\n      },\n    },\n  });\n\n  return assetContainer;\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroStackedProps,\n    'headline' | 'isHeightSmall' | 'includesAnimation' | 'isThemeDark'\n  >,\n) => {\n  const { headline, isHeightSmall, includesAnimation, isThemeDark } = 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  const animationStyles = {\n    [`@container (${token.media.queries.tablet.min})`]: {\n      ...withViewTimelineAnimation({\n        animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,\n        animationTimeline: 'view()',\n        animationRangeStart: '100vh',\n        animationRangeEnd: '130vh',\n\n        ...(isHeightSmall && {\n          animationRangeStart: '120vh',\n          animationRangeEnd: '150vh',\n        }),\n      }),\n    },\n  };\n\n  const elementStyles = {\n    element: {\n      color: token.color.black,\n      maxWidth: '700px',\n      margin: '0 auto',\n      textTransform: 'uppercase',\n      marginTop: `${token.spacing.sm}`,\n\n      ...(isThemeDark && {\n        color: token.color.white,\n      }),\n\n      ...(includesAnimation && {\n        ...(!isThemeDark && {\n          ...animationStyles,\n        }),\n      }),\n\n      ...desktopStyles,\n    },\n    siblingAfter: {\n      marginTop: `${token.spacing.md}`,\n    },\n  };\n\n  return ElementModel.headline.campaignLarge({\n    element: headline,\n    elementStyles,\n  });\n};\n\nconst createText = (\n  props: Omit<HeroStackedProps, 'image' | 'video' | 'isWidthLarge'>,\n) => {\n  const { topPosition, isThemeDark, includesAnimation, isHeightSmall } = props;\n  const additionalSpread = topPosition ? parseInt(topPosition) : null;\n  const textLockupElement = textLockup.large({\n    ...props,\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    textLargest: props.text,\n  });\n\n  const lock = ElementModel.layout.spaceHorizontalSmall({\n    element: document.createElement('div'),\n    children: [textLockupElement],\n    elementStyles: {\n      element: {\n        position: 'relative',\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-stacked__text',\n    children: [lock],\n    elementStyles: {\n      element: {\n        padding: `${token.spacing.lg} 0`,\n        display: 'flex',\n        justifyContent: 'center',\n        textAlign: 'center',\n        position: 'relative',\n        zIndex: '999',\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['6xl']} 0 ${token.spacing['3xl']}`,\n        },\n\n        ...(includesAnimation && {\n          [`@container (${token.media.queries.tablet.min})`]: {\n            ...withViewTimelineAnimation({\n              position: 'sticky',\n              top: additionalSpread || 0,\n            }),\n          },\n        }),\n\n        [`& *`]: {\n          ...(includesAnimation && {\n            ...(!isThemeDark && {\n              [`@container (${token.media.queries.tablet.min})`]: {\n                ...withViewTimelineAnimation({\n                  animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,\n                  animationTimeline: 'view()',\n                  animationRangeStart: '90vh',\n                  animationRangeEnd: '110vh',\n\n                  ...(isHeightSmall && {\n                    animationRangeStart: '90vh',\n                    animationRangeEnd: '110vh',\n                  }),\n                }),\n              },\n            }),\n          }),\n        },\n\n        [`& .${elementStyles.text.decoration.ribbon.className[0]}`]: {\n          animation: 'none !important',\n        },\n\n        [`& .${elementStyles.text.rich.simpleLargest.className}`]: {\n          maxWidth: '860px',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroStackedProps) => {\n  const asset = createAsset(props);\n  const hasAsset = asset !== null;\n  const shouldAnimateText = hasAsset && props.includesAnimation;\n\n  const text = createText({\n    ...props,\n    includesAnimation: shouldAnimateText,\n  });\n\n  const children: ElementVisual[] = [text];\n  if (hasAsset) {\n    children.push(asset);\n  }\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-hero-stacked',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n\n        ...(props.isThemeDark && {\n          backgroundColor: token.color.black,\n        }),\n      },\n    },\n  });\n\n  composite.styles += keyFrameFadeOver;\n  composite.styles += keyFrameFontColor;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","ElementModel.createDiv","ElementModel.layout.spaceHorizontalLarger","elementStyles","ElementModel.headline.campaignLarge","textLockup.large","ElementModel.layout.spaceHorizontalSmall"],"mappings":"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"}

package/dist/composite/hero/standard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/standard.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAC;yBAsQlC,OAAO,iBAAiB;;;;;AAAxC,wBA+CE"}
+{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/standard.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAC;yBAsQlC,OAAO,iBAAiB;;;;;AAAxC,wBA+CE"}

package/dist/composite/hero/standard.js

@@ -1,21 +1,31 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const elementStyles = require("@universityofmaryland/web-styles-library/element");
+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");
 const index = require("../../model/elements/index.js");
+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 placeholder = require("../../atomic/assets/image/placeholder.js");
 const observedAutoPlay = require("../../atomic/assets/video/observed-auto-play.js");
+require("@universityofmaryland/web-icons-library/location");
+require("@universityofmaryland/web-icons-library/calendar");
 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");
+require("@universityofmaryland/web-styles-library/typography");
 const layout = require("../../model/elements/layout.js");
 const headline = require("../../model/elements/headline.js");
 function _interopNamespaceDefault(e) {
@@ -34,7 +44,8 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
 const ANIMATION_CONFIG = {
   SLIDE_UP: {
     DURATION: "1s",
@@ -110,10 +121,10 @@ const buildAssetChildren = ({
 const buildAssetStyles = (includesAnimation) => {
   return {
     element: {
-      [`@container (${Styles__namespace.token.media.queries.large.max})`]: {
+      [`@container (${token__namespace.media.queries.large.max})`]: {
         aspectRatio: "16 / 9"
       },
-      [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+      [`@container (${token__namespace.media.queries.tablet.min})`]: {
         position: "absolute",
         top: 0,
         left: 0,
@@ -122,7 +133,7 @@ const buildAssetStyles = (includesAnimation) => {
         overflow: "hidden"
       },
       [`&:before`]: {
-        [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+        [`@container (${token__namespace.media.queries.tablet.min})`]: {
           content: '""',
           position: "absolute",
           top: 0,
@@ -149,11 +160,11 @@ const createAsset = ({
   includesAnimation
 }) => {
   const children = buildAssetChildren({ image, video });
-  const elementStyles = buildAssetStyles(includesAnimation);
+  const elementStyles2 = buildAssetStyles(includesAnimation);
   return index.createDiv({
     className: "umd-hero-default__asset",
     children,
-    elementStyles
+    elementStyles: elementStyles2
   });
 };
 const createHeadline = (props) => {
@@ -165,7 +176,7 @@ const createHeadline = (props) => {
     maxWidth: "700px",
     marginLeft: "auto",
     marginRight: "auto",
-    color: Styles__namespace.token.color.white
+    color: token__namespace.color.white
   };
   const desktopStyles = {
     maxWidth: "816px",
@@ -176,14 +187,14 @@ const createHeadline = (props) => {
     elementStyles: {
       element: {
         textTransform: "uppercase",
-        [`@media (${Styles__namespace.token.media.queries.tablet.min})`]: tabletStyles,
-        [`@media (${Styles__namespace.token.media.queries.desktop.min})`]: desktopStyles
+        [`@media (${token__namespace.media.queries.tablet.min})`]: tabletStyles,
+        [`@media (${token__namespace.media.queries.desktop.min})`]: desktopStyles
       },
       subElement: {
         color: "currentColor"
       },
       siblingAfter: {
-        marginTop: Styles__namespace.token.spacing.sm
+        marginTop: token__namespace.spacing.sm
       }
     },
     isThemeDark
@@ -222,10 +233,10 @@ const createText = (props) => {
         ...includesAnimation && {
           animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`
         },
-        [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+        [`@container (${token__namespace.media.queries.tablet.min})`]: {
           maxWidth: "736px",
-          paddingTop: `${Styles__namespace.token.spacing["2xl"]}`,
-          paddingBottom: `${Styles__namespace.token.spacing["2xl"]}`,
+          paddingTop: `${token__namespace.spacing["2xl"]}`,
+          paddingBottom: `${token__namespace.spacing["2xl"]}`,
           ...!isTextCenter && {
             width: "80%"
           },
@@ -235,7 +246,7 @@ const createText = (props) => {
             display: "flex"
           }
         },
-        [`@container (${Styles__namespace.token.media.queries.desktop.min})`]: {
+        [`@container (${token__namespace.media.queries.desktop.min})`]: {
           maxWidth: "808px"
         }
       }
@@ -250,9 +261,9 @@ const createText = (props) => {
         width: "100%",
         position: "relative",
         zIndex: 99,
-        [`@container (${Styles__namespace.token.media.queries.tablet.max})`]: {
-          paddingTop: `${Styles__namespace.token.spacing.sm}`,
-          [`&:has(.${Styles__namespace.element.text.decoration.ribbon.className})`]: {
+        [`@container (${token__namespace.media.queries.tablet.max})`]: {
+          paddingTop: `${token__namespace.spacing.sm}`,
+          [`&:has(.${elementStyles__namespace.text.decoration.ribbon.className})`]: {
             paddingTop: `0`,
             marginTop: "-14px"
           }
@@ -274,25 +285,25 @@ const standard = (props) => {
         overflow: "hidden",
         containerType: "inline-size",
         ...isThemeDark && {
-          backgroundColor: Styles__namespace.token.color.black
+          backgroundColor: token__namespace.color.black
         },
-        [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+        [`@container (${token__namespace.media.queries.tablet.min})`]: {
           ...!isHeightSmall && {
             height: "75vh",
             minHeight: "480px"
           }
         },
-        [`@container (${Styles__namespace.token.media.queries.desktop.min})`]: {
+        [`@container (${token__namespace.media.queries.desktop.min})`]: {
           ...!isHeightSmall && {
             minHeight: "720px"
           }
         }
       },
       subElement: {
-        [`@container (${Styles__namespace.token.media.queries.large.max})`]: {
-          [`*:not(.${Styles__namespace.element.asset.image.caption.className})`]: {
+        [`@container (${token__namespace.media.queries.large.max})`]: {
+          [`*:not(.${elementStyles__namespace.asset.image.caption.className})`]: {
             ...!isThemeDark && {
-              color: `${Styles__namespace.token.color.black} !important`
+              color: `${token__namespace.color.black} !important`
             }
           }
         }

package/dist/composite/hero/standard.js.map

@@ -1 +1 @@
-{"version":3,"file":"standard.js","sources":["../../../source/composite/hero/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroStandardProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n  SLIDE_UP: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n  SCALE_DOWN: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n} as const;\n\nconst keyFrameHeroSlideUp = `\n  @keyframes hero-slide-up {\n    from {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst keyFrameHeroScaleDown = `\n  @keyframes hero-scale-down {\n    from {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.TO};\n    }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n};\n\nconst buildAssetChildren = ({\n  image,\n  video,\n}: Pick<HeroStandardProps, 'image' | 'video'>): ElementVisual[] => {\n  const children: ElementVisual[] = [];\n\n  if (video) {\n    children.push(createVideoAsset(video));\n  }\n\n  if (image && !video) {\n    children.push(createImageAsset(image));\n  }\n\n  if (!image && !video) {\n    children.push(assets.image.placeholder.fearlessForward());\n  }\n\n  return children;\n};\n\nconst buildAssetStyles = (includesAnimation?: boolean) => {\n  return {\n    element: {\n      [`@container (${Styles.token.media.queries.large.max})`]: {\n        aspectRatio: '16 / 9',\n      },\n\n      [`@container (${Styles.token.media.queries.tablet.min})`]: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        overflow: 'hidden',\n      },\n\n      [`&:before`]: {\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 85%)',\n          zIndex: '99',\n        },\n      },\n\n      ['& img']: {\n        ...(includesAnimation && {\n          [`@media (prefers-reduced-motion: no-preference)`]: {\n            animation: `hero-scale-down forwards ${ANIMATION_CONFIG.SCALE_DOWN.DURATION}`,\n          },\n        }),\n      },\n    },\n  };\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroStandardProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n  const elementStyles = buildAssetStyles(includesAnimation);\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-default__asset',\n    children,\n    elementStyles,\n  });\n};\n\nconst createHeadline = (\n  props: Pick<HeroStandardProps, 'headline' | 'isHeightSmall' | 'isThemeDark'>,\n) => {\n  const { headline, isHeightSmall, isThemeDark } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 10 && isHeightSmall;\n\n  if (!headline) return null;\n\n  const tabletStyles = {\n    maxWidth: '700px',\n    marginLeft: 'auto',\n    marginRight: 'auto',\n    color: Styles.token.color.white,\n  };\n\n  const desktopStyles = {\n    maxWidth: '816px',\n    ...(isOverwriteHeadline && { fontSize: '80px' }),\n  };\n\n  const headlineElement = ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n        [`@media (${Styles.token.media.queries.tablet.min})`]: tabletStyles,\n        [`@media (${Styles.token.media.queries.desktop.min})`]: desktopStyles,\n      },\n      subElement: {\n        color: 'currentColor',\n      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.sm,\n      },\n    },\n    isThemeDark,\n  });\n\n  return headlineElement;\n};\n\nconst createText = (props: HeroStandardProps) => {\n  const {\n    isTextCenter = false,\n    isHeightSmall = false,\n    includesAnimation,\n    isThemeDark,\n  } = props;\n\n  const text = textLockup.large({\n    headlineComposite: createHeadline(props),\n    ribbon: props.eyebrow,\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  const textContainer = ElementModel.createDiv({\n    className: 'umd-hero-default__text',\n    children: [text],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        alignItems: 'flex-end',\n        height: '100%',\n        ...(isTextCenter && {\n          textAlign: 'center',\n          justifyContent: 'center',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n          maxWidth: '928px',\n        }),\n\n        ...(includesAnimation && {\n          animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n        }),\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          maxWidth: '736px',\n          paddingTop: `${Styles.token.spacing['2xl']}`,\n          paddingBottom: `${Styles.token.spacing['2xl']}`,\n          ...(!isTextCenter && {\n            width: '80%',\n          }),\n          ...(isHeightSmall && {\n            minHeight: '400px',\n            alignItems: 'flex-end',\n            display: 'flex',\n          }),\n        },\n\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          maxWidth: '808px',\n        },\n      },\n    },\n  });\n\n  return ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [textContainer],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n        zIndex: 99,\n\n        [`@container (${Styles.token.media.queries.tablet.max})`]: {\n          paddingTop: `${Styles.token.spacing.sm}`,\n\n          [`&:has(.${Styles.element.text.decoration.ribbon.className})`]: {\n            paddingTop: `0`,\n            marginTop: '-14px',\n          },\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroStandardProps) => {\n  const { isHeightSmall, isThemeDark } = props;\n  const asset = createAsset(props);\n  const text = createText(props);\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-hero-default',\n    children: [asset, text],\n    elementStyles: {\n      element: {\n        position: 'relative',\n        overflow: 'hidden',\n        containerType: 'inline-size',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n        }),\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          ...(!isHeightSmall && {\n            height: '75vh',\n            minHeight: '480px',\n          }),\n        },\n\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          ...(!isHeightSmall && {\n            minHeight: '720px',\n          }),\n        },\n      },\n      subElement: {\n        [`@container (${Styles.token.media.queries.large.max})`]: {\n          [`*:not(.${Styles.element.asset.image.caption.className})`]: {\n            ...(!isThemeDark && {\n              color: `${Styles.token.color.black} !important`,\n            }),\n          },\n        },\n      },\n    },\n  });\n\n  composite.styles += keyFrameHeroScaleDown;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","Styles","ElementModel.createDiv","headline","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
+{"version":3,"file":"standard.js","sources":["../../../source/composite/hero/standard.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroStandardProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n  SLIDE_UP: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n  SCALE_DOWN: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n} as const;\n\nconst keyFrameHeroSlideUp = `\n  @keyframes hero-slide-up {\n    from {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst keyFrameHeroScaleDown = `\n  @keyframes hero-scale-down {\n    from {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.TO};\n    }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n};\n\nconst buildAssetChildren = ({\n  image,\n  video,\n}: Pick<HeroStandardProps, 'image' | 'video'>): ElementVisual[] => {\n  const children: ElementVisual[] = [];\n\n  if (video) {\n    children.push(createVideoAsset(video));\n  }\n\n  if (image && !video) {\n    children.push(createImageAsset(image));\n  }\n\n  if (!image && !video) {\n    children.push(assets.image.placeholder.fearlessForward());\n  }\n\n  return children;\n};\n\nconst buildAssetStyles = (includesAnimation?: boolean) => {\n  return {\n    element: {\n      [`@container (${token.media.queries.large.max})`]: {\n        aspectRatio: '16 / 9',\n      },\n\n      [`@container (${token.media.queries.tablet.min})`]: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        overflow: 'hidden',\n      },\n\n      [`&:before`]: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 85%)',\n          zIndex: '99',\n        },\n      },\n\n      ['& img']: {\n        ...(includesAnimation && {\n          [`@media (prefers-reduced-motion: no-preference)`]: {\n            animation: `hero-scale-down forwards ${ANIMATION_CONFIG.SCALE_DOWN.DURATION}`,\n          },\n        }),\n      },\n    },\n  };\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroStandardProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n  const elementStyles = buildAssetStyles(includesAnimation);\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-default__asset',\n    children,\n    elementStyles,\n  });\n};\n\nconst createHeadline = (\n  props: Pick<HeroStandardProps, 'headline' | 'isHeightSmall' | 'isThemeDark'>,\n) => {\n  const { headline, isHeightSmall, isThemeDark } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 10 && isHeightSmall;\n\n  if (!headline) return null;\n\n  const tabletStyles = {\n    maxWidth: '700px',\n    marginLeft: 'auto',\n    marginRight: 'auto',\n    color: token.color.white,\n  };\n\n  const desktopStyles = {\n    maxWidth: '816px',\n    ...(isOverwriteHeadline && { fontSize: '80px' }),\n  };\n\n  const headlineElement = ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n        [`@media (${token.media.queries.tablet.min})`]: tabletStyles,\n        [`@media (${token.media.queries.desktop.min})`]: desktopStyles,\n      },\n      subElement: {\n        color: 'currentColor',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    },\n    isThemeDark,\n  });\n\n  return headlineElement;\n};\n\nconst createText = (props: HeroStandardProps) => {\n  const {\n    isTextCenter = false,\n    isHeightSmall = false,\n    includesAnimation,\n    isThemeDark,\n  } = props;\n\n  const text = textLockup.large({\n    headlineComposite: createHeadline(props),\n    ribbon: props.eyebrow,\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  const textContainer = ElementModel.createDiv({\n    className: 'umd-hero-default__text',\n    children: [text],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        alignItems: 'flex-end',\n        height: '100%',\n        ...(isTextCenter && {\n          textAlign: 'center',\n          justifyContent: 'center',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n          maxWidth: '928px',\n        }),\n\n        ...(includesAnimation && {\n          animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n        }),\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          maxWidth: '736px',\n          paddingTop: `${token.spacing['2xl']}`,\n          paddingBottom: `${token.spacing['2xl']}`,\n          ...(!isTextCenter && {\n            width: '80%',\n          }),\n          ...(isHeightSmall && {\n            minHeight: '400px',\n            alignItems: 'flex-end',\n            display: 'flex',\n          }),\n        },\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          maxWidth: '808px',\n        },\n      },\n    },\n  });\n\n  return ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [textContainer],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n        zIndex: 99,\n\n        [`@container (${token.media.queries.tablet.max})`]: {\n          paddingTop: `${token.spacing.sm}`,\n\n          [`&:has(.${elementStyles.text.decoration.ribbon.className})`]: {\n            paddingTop: `0`,\n            marginTop: '-14px',\n          },\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroStandardProps) => {\n  const { isHeightSmall, isThemeDark } = props;\n  const asset = createAsset(props);\n  const text = createText(props);\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-hero-default',\n    children: [asset, text],\n    elementStyles: {\n      element: {\n        position: 'relative',\n        overflow: 'hidden',\n        containerType: 'inline-size',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.black,\n        }),\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          ...(!isHeightSmall && {\n            height: '75vh',\n            minHeight: '480px',\n          }),\n        },\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(!isHeightSmall && {\n            minHeight: '720px',\n          }),\n        },\n      },\n      subElement: {\n        [`@container (${token.media.queries.large.max})`]: {\n          [`*:not(.${elementStyles.asset.image.caption.className})`]: {\n            ...(!isThemeDark && {\n              color: `${token.color.black} !important`,\n            }),\n          },\n        },\n      },\n    },\n  });\n\n  composite.styles += keyFrameHeroScaleDown;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","token","elementStyles","ElementModel.createDiv","headline","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}