@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

package/dist/composite/hero/overlay.mjs

@@ -1,12 +1,16 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
 import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import * as Styles from "@universityofmaryland/web-styles-library";
+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 { 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";
@@ -17,6 +21,7 @@ import placeholder from "../../atomic/assets/image/placeholder.mjs";
 import observedAutoPlay from "../../atomic/assets/video/observed-auto-play.mjs";
 import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";
+import "@universityofmaryland/web-utilities-library/theme";
 import "../../atomic/layout/block/stacked.mjs";
 import "../../atomic/layout/overlay/modal.mjs";
 import "../../atomic/layout/person/columns.mjs";
@@ -24,9 +29,6 @@ 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 } from "../../model/elements/layout.mjs";
-import { campaignExtraLarge } from "../../model/elements/headline.mjs";
 const ANIMATION_CONFIG = {
   RESIZE: {
     DURATION: "1.5s",
@@ -100,65 +102,54 @@ const createAsset = ({
   if (children.length === 0) {
     return null;
   }
-  return createDiv({
-    className: "umd-hero-overlay__asset",
-    children,
-    elementStyles: {
-      element: {
-        [`@media (${token.media.queries.large.max})`]: {
-          [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {
-            minHeight: "56vw",
-            display: "grid"
-          }
-        },
-        [`@container (${token.media.queries.tablet.min})`]: {
-          position: "absolute",
-          width: "60%",
-          height: `calc(100% - ${token.spacing["5xl"]})`,
-          right: 0,
-          top: 0,
-          overflow: "visible",
-          ...includesAnimation && {
-            [`@media (prefers-reduced-motion: no-preference)`]: {
-              animation: `hero-overlay-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`
-            }
+  return new ElementBuilder().withClassName("umd-hero-overlay__asset").withChildren(...children).withStyles({
+    element: {
+      [`@media (${token.media.queries.large.max})`]: {
+        [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {
+          minHeight: "56vw",
+          display: "grid"
+        }
+      },
+      [`@container (${token.media.queries.tablet.min})`]: {
+        position: "absolute",
+        width: "60%",
+        height: `calc(100% - ${token.spacing["5xl"]})`,
+        right: 0,
+        top: 0,
+        overflow: "visible",
+        ...includesAnimation && {
+          [`@media (prefers-reduced-motion: no-preference)`]: {
+            animation: `hero-overlay-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`
           }
-        },
-        ["& img, & video"]: {
-          height: "100%",
-          minHeight: "300px"
         }
+      },
+      ["& img, & video"]: {
+        height: "100%",
+        minHeight: "300px"
       }
     }
-  });
+  }).build();
 };
 const createHeadline = (props) => {
   const { headline } = props;
   const characterCount = headline?.textContent?.trim().length || 0;
   const isOverwriteHeadline = characterCount > 30;
   if (!headline) return null;
-  const desktopStyles = {
-    [`@container (${token.media.queries.desktop.min})`]: {
-      ...isOverwriteHeadline && {
-        fontSize: "80px"
-      }
-    }
-  };
-  const headlineElement = campaignExtraLarge({
-    element: headline,
-    elementStyles: {
-      element: {
-        textTransform: "uppercase",
-        textWrap: "pretty",
-        ...desktopStyles
-      },
-      siblingAfter: {
-        marginTop: token.spacing.md
+  return new ElementBuilder(headline).styled(Styles.typography.campaign.fonts.extraLarge).withStyles({
+    element: {
+      textTransform: "uppercase",
+      textWrap: "pretty",
+      color: token.color.white,
+      [`@container (${token.media.queries.desktop.min})`]: {
+        ...isOverwriteHeadline && {
+          fontSize: "80px"
+        }
       }
     },
-    isThemeDark: true
-  });
-  return headlineElement;
+    siblingAfter: {
+      marginTop: token.spacing.md
+    }
+  }).build();
 };
 const createTextContent = (props) => {
   const textLockupElement = large({
@@ -168,108 +159,88 @@ const createTextContent = (props) => {
     actions: props.actions,
     isThemeDark: true
   });
-  return createDiv({
-    className: "umd-hero-overlay__text-content",
-    children: [textLockupElement],
-    elementStyles: {
-      element: {
+  return new ElementBuilder().withClassName("umd-hero-overlay__text-content").withChild(textLockupElement).withStyles({
+    element: {
+      [`@container (${token.media.queries.tablet.min})`]: {
+        maxWidth: "55%"
+      },
+      [`& .${elementStyles.text.rich.simpleLargeDark.className}`]: {
         [`@container (${token.media.queries.tablet.min})`]: {
-          maxWidth: "55%"
-        },
-        [`& .${elementStyles.text.rich.simpleLargeDark.className}`]: {
-          [`@container (${token.media.queries.tablet.min})`]: {
-            maxWidth: "60%"
-          }
+          maxWidth: "60%"
         }
       }
     }
-  });
+  }).build();
 };
 const createText = (props) => {
   const { includesAnimation } = props;
   const textContent = createTextContent(props);
-  const lock = spaceHorizontalLarger({
-    element: document.createElement("div"),
-    children: [textContent],
-    elementStyles: {
-      element: {
-        height: "100%",
-        width: "100%",
-        position: "relative"
-      }
+  const lock = new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(textContent).withStyles({
+    element: {
+      height: "100%",
+      width: "100%",
+      position: "relative"
     }
-  });
-  return createDiv({
-    className: "umd-hero-overlay__text",
-    children: [lock],
-    elementStyles: {
-      element: {
-        padding: `${token.spacing.lg} 0`,
-        display: "flex",
-        position: "relative",
-        zIndex: 999,
-        width: "100%",
-        [`@container (${token.media.queries.tablet.min})`]: {
-          padding: `${token.spacing["5xl"]} 0`,
-          ...includesAnimation && {
-            [`@media (prefers-reduced-motion: no-preference)`]: {
-              animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`
-            }
+  }).build();
+  return new ElementBuilder().withClassName("umd-hero-overlay__text").withChild(lock).withStyles({
+    element: {
+      padding: `${token.spacing.lg} 0`,
+      display: "flex",
+      position: "relative",
+      zIndex: 999,
+      width: "100%",
+      [`@container (${token.media.queries.tablet.min})`]: {
+        padding: `${token.spacing["5xl"]} 0`,
+        ...includesAnimation && {
+          [`@media (prefers-reduced-motion: no-preference)`]: {
+            animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`
           }
         }
       }
     }
-  });
+  }).build();
 };
 const overlay = (props) => {
   const text = createText(props);
   const asset = createAsset(props);
-  const children = [text];
-  if (asset) {
-    children.push(asset);
-  }
-  const container = createDiv({
-    className: "umd-hero-overlay__container",
-    children,
-    elementStyles: {
-      element: {
-        position: "relative",
-        backgroundColor: token.color.black,
-        overflow: "clip",
-        [`@container (${token.media.queries.large.max})`]: {
-          display: "flex",
-          flexDirection: "column-reverse"
-        },
-        [`@container (${token.media.queries.tablet.min})`]: {
-          minHeight: "640px",
-          display: "flex",
-          alignItems: "center",
-          ["&:before"]: {
-            content: '""',
-            position: "absolute",
-            left: 0,
-            right: "50px",
-            top: 0,
-            height: "100%",
-            background: "linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 75%)",
-            zIndex: 999
-          }
-        },
-        [`@container (${token.media.queries.desktop.min})`]: {
-          minHeight: "764px"
+  const container = new ElementBuilder().withClassName("umd-hero-overlay__container").withChild(text).withStyles({
+    element: {
+      position: "relative",
+      backgroundColor: token.color.black,
+      overflow: "clip",
+      [`@container (${token.media.queries.large.max})`]: {
+        display: "flex",
+        flexDirection: "column-reverse"
+      },
+      [`@container (${token.media.queries.tablet.min})`]: {
+        minHeight: "640px",
+        display: "flex",
+        alignItems: "center",
+        ["&:before"]: {
+          content: '""',
+          position: "absolute",
+          left: 0,
+          right: "50px",
+          top: 0,
+          height: "100%",
+          background: "linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 75%)",
+          zIndex: 999
         }
+      },
+      [`@container (${token.media.queries.desktop.min})`]: {
+        minHeight: "764px"
       }
     }
   });
-  const composite = createDiv({
-    className: "umd-hero-overlay",
-    children: [container],
-    elementStyles: {
-      element: {
-        containerType: "inline-size"
-      }
+  if (asset) {
+    container.withChild(asset);
+  }
+  const containerBuilt = container.build();
+  const composite = new ElementBuilder().withClassName("umd-hero-overlay").withChild(containerBuilt).withStyles({
+    element: {
+      containerType: "inline-size"
     }
-  });
+  }).build();
   composite.styles += keyFrameHeroResize;
   composite.styles += keyFrameHeroSlideUp;
   return composite;

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

@@ -1 +1 @@
-{"version":3,"file":"overlay.mjs","sources":["../../../source/composite/hero/overlay.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 HeroOverlayProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n  RESIZE: {\n    DURATION: '1.5s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n  SLIDE_UP: {\n    DURATION: '1.5s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n} as const;\n\nconst keyFrameHeroResize = `\n  @keyframes hero-overlay-resize {\n    from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n    to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n  }\n`;\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 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<HeroOverlayProps, 'image' | 'video'>): ElementVisual[] => {\n  if (video && video instanceof HTMLVideoElement) {\n    return [createVideoAsset(video)];\n  }\n\n  if (image) {\n    return [createImageAsset(image)];\n  }\n\n  return [assets.image.placeholder.fearlessForward()];\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroOverlayProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n\n  if (children.length === 0) {\n    return null;\n  }\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-overlay__asset',\n    children,\n    elementStyles: {\n      element: {\n        [`@media (${token.media.queries.large.max})`]: {\n          [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {\n            minHeight: '56vw',\n            display: 'grid',\n          },\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '60%',\n          height: `calc(100% - ${token.spacing['5xl']})`,\n          right: 0,\n          top: 0,\n          overflow: 'visible',\n\n          ...(includesAnimation && {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              animation: `hero-overlay-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n            },\n          }),\n        },\n\n        ['& img, & video']: {\n          height: '100%',\n          minHeight: '300px',\n        },\n      },\n    },\n  });\n};\n\nconst createHeadline = (props: Pick<HeroOverlayProps, 'headline'>) => {\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  const headlineElement = ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n        textWrap: 'pretty',\n        ...desktopStyles,\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    },\n    isThemeDark: true,\n  });\n\n  return headlineElement;\n};\n\nconst createTextContent = (\n  props: Pick<HeroOverlayProps, 'eyebrow' | 'headline' | 'text' | 'actions'>,\n) => {\n  const textLockupElement = textLockup.large({\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    text: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-overlay__text-content',\n    children: [textLockupElement],\n    elementStyles: {\n      element: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          maxWidth: '55%',\n        },\n\n        [`& .${elementStyles.text.rich.simpleLargeDark.className}`]: {\n          [`@container (${token.media.queries.tablet.min})`]: {\n            maxWidth: '60%',\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createText = (\n  props: Pick<\n    HeroOverlayProps,\n    'eyebrow' | 'headline' | 'text' | 'actions' | 'includesAnimation'\n  >,\n) => {\n  const { includesAnimation } = props;\n  const textContent = createTextContent(props);\n\n  const lock = ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [textContent],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-overlay__text',\n    children: [lock],\n    elementStyles: {\n      element: {\n        padding: `${token.spacing.lg} 0`,\n        display: 'flex',\n        position: 'relative',\n        zIndex: 999,\n        width: '100%',\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['5xl']} 0`,\n\n          ...(includesAnimation && {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n            },\n          }),\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroOverlayProps) => {\n  const text = createText(props);\n  const asset = createAsset(props);\n\n  const children: ElementVisual[] = [text];\n  if (asset) {\n    children.push(asset);\n  }\n\n  const container = ElementModel.createDiv({\n    className: 'umd-hero-overlay__container',\n    children,\n    elementStyles: {\n      element: {\n        position: 'relative',\n        backgroundColor: token.color.black,\n        overflow: 'clip',\n\n        [`@container (${token.media.queries.large.max})`]: {\n          display: 'flex',\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          minHeight: '640px',\n          display: 'flex',\n          alignItems: 'center',\n\n          ['&:before']: {\n            content: '\"\"',\n            position: 'absolute',\n            left: 0,\n            right: '50px',\n            top: 0,\n            height: '100%',\n            background:\n              'linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 75%)',\n            zIndex: 999,\n          },\n        },\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          minHeight: '764px',\n        },\n      },\n    },\n  });\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-hero-overlay',\n    children: [container],\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n      },\n    },\n  });\n\n  composite.styles += keyFrameHeroResize;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","ElementModel.createDiv","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
+{"version":3,"file":"overlay.mjs","sources":["../../../source/composite/hero/overlay.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { type ElementModel } from '../../_types';\nimport { type HeroOverlayProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n  RESIZE: {\n    DURATION: '1.5s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n  SLIDE_UP: {\n    DURATION: '1.5s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n} as const;\n\nconst keyFrameHeroResize = `\n  @keyframes hero-overlay-resize {\n    from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n    to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n  }\n`;\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 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<HeroOverlayProps, 'image' | 'video'>): ElementModel<HTMLElement>[] => {\n  if (video && video instanceof HTMLVideoElement) {\n    return [createVideoAsset(video)];\n  }\n\n  if (image) {\n    return [createImageAsset(image)];\n  }\n\n  return [assets.image.placeholder.fearlessForward()];\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroOverlayProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n\n  if (children.length === 0) {\n    return null;\n  }\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-overlay__asset')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        [`@media (${token.media.queries.large.max})`]: {\n          [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {\n            minHeight: '56vw',\n            display: 'grid',\n          },\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '60%',\n          height: `calc(100% - ${token.spacing['5xl']})`,\n          right: 0,\n          top: 0,\n          overflow: 'visible',\n\n          ...(includesAnimation && {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              animation: `hero-overlay-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n            },\n          }),\n        },\n\n        ['& img, & video']: {\n          height: '100%',\n          minHeight: '300px',\n        },\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<HeroOverlayProps, '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  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.extraLarge)\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n        textWrap: 'pretty',\n        color: token.color.white,\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '80px',\n          }),\n        },\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createTextContent = (\n  props: Pick<HeroOverlayProps, 'eyebrow' | 'headline' | 'text' | 'actions'>,\n) => {\n  const textLockupElement = textLockup.large({\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    text: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-overlay__text-content')\n    .withChild(textLockupElement)\n    .withStyles({\n      element: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          maxWidth: '55%',\n        },\n\n        [`& .${elementStyles.text.rich.simpleLargeDark.className}`]: {\n          [`@container (${token.media.queries.tablet.min})`]: {\n            maxWidth: '60%',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createText = (\n  props: Pick<\n    HeroOverlayProps,\n    'eyebrow' | 'headline' | 'text' | 'actions' | 'includesAnimation'\n  >,\n) => {\n  const { includesAnimation } = props;\n  const textContent = createTextContent(props);\n\n  const lock = new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContent)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-overlay__text')\n    .withChild(lock)\n    .withStyles({\n      element: {\n        padding: `${token.spacing.lg} 0`,\n        display: 'flex',\n        position: 'relative',\n        zIndex: 999,\n        width: '100%',\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['5xl']} 0`,\n\n          ...(includesAnimation && {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n            },\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nexport default (props: HeroOverlayProps) => {\n  const text = createText(props);\n  const asset = createAsset(props);\n\n  const container = new ElementBuilder()\n    .withClassName('umd-hero-overlay__container')\n    .withChild(text)\n    .withStyles({\n      element: {\n        position: 'relative',\n        backgroundColor: token.color.black,\n        overflow: 'clip',\n\n        [`@container (${token.media.queries.large.max})`]: {\n          display: 'flex',\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          minHeight: '640px',\n          display: 'flex',\n          alignItems: 'center',\n\n          ['&:before']: {\n            content: '\"\"',\n            position: 'absolute',\n            left: 0,\n            right: '50px',\n            top: 0,\n            height: '100%',\n            background:\n              'linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 75%)',\n            zIndex: 999,\n          },\n        },\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          minHeight: '764px',\n        },\n      },\n    });\n\n  if (asset) {\n    container.withChild(asset);\n  }\n\n  const containerBuilt = container.build();\n\n  const composite = new ElementBuilder()\n    .withClassName('umd-hero-overlay')\n    .withChild(containerBuilt)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n\n  composite.styles += keyFrameHeroResize;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","textLockup.large"],"mappings":"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"}

package/dist/composite/hero/stacked.d.ts

@@ -1,8 +1,4 @@
 import { HeroStackedProps } from './_types';
-declare const _default: (props: HeroStackedProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: (props: HeroStackedProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=stacked.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/stacked.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;yBAsTjC,OAAO,gBAAgB;;;;;AAAvC,wBAiCE"}
+{"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/stacked.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;yBAuTjC,OAAO,gBAAgB;AAAvC,wBAiCE"}