@universityofmaryland/web-elements-library 1.4.8 → 1.5.0

package/dist/composite/hero/minimal.js

@@ -1,19 +1,30 @@
 "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");
+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");
+require("@universityofmaryland/web-utilities-library/accessibility");
+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) {
@@ -32,7 +43,7 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const createImageAsset = (image) => {
   return background({
     element: image,
@@ -48,13 +59,13 @@ const buildAssetChildren = ({
   return [createImageAsset(image)];
 };
 const getBorderColor = (isThemeDark, isThemeMaryland) => {
-  return isThemeDark || isThemeMaryland ? Styles__namespace.token.color.gold : Styles__namespace.token.color.red;
+  return isThemeDark || isThemeMaryland ? token__namespace.color.gold : token__namespace.color.red;
 };
 const getBackgroundColor = (props) => {
   const { isThemeDark, isThemeLight, isThemeMaryland } = props;
-  if (isThemeDark) return Styles__namespace.token.color.black;
-  if (isThemeMaryland) return Styles__namespace.token.color.red;
-  if (isThemeLight) return Styles__namespace.token.color.gray.lightest;
+  if (isThemeDark) return token__namespace.color.black;
+  if (isThemeMaryland) return token__namespace.color.red;
+  if (isThemeLight) return token__namespace.color.gray.lightest;
   return "transparent";
 };
 const createAsset = ({ image }) => {
@@ -67,7 +78,7 @@ const createAsset = ({ image }) => {
     children,
     elementStyles: {
       element: {
-        [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+        [`@container (${token__namespace.media.queries.tablet.min})`]: {
           position: "absolute",
           right: 0,
           top: 0,
@@ -75,7 +86,7 @@ const createAsset = ({ image }) => {
           height: "100%"
         },
         ["& img"]: {
-          [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+          [`@container (${token__namespace.media.queries.tablet.min})`]: {
             objectFit: "cover",
             objectPosition: "center",
             height: "100%",
@@ -92,7 +103,7 @@ const createHeadline = (props) => {
   const isOverwriteHeadline = characterCount > 40;
   if (!headline$1) return null;
   const desktopStyles = {
-    [`@container (${Styles__namespace.token.media.queries.desktop.min})`]: {
+    [`@container (${token__namespace.media.queries.desktop.min})`]: {
       ...isOverwriteHeadline && {
         fontSize: "64px"
       }
@@ -107,7 +118,7 @@ const createHeadline = (props) => {
         ...desktopStyles
       },
       siblingAfter: {
-        marginTop: Styles__namespace.token.spacing.sm
+        marginTop: token__namespace.spacing.sm
       }
     },
     isThemeDark: isThemeDark || isThemeMaryland
@@ -116,10 +127,10 @@ const createHeadline = (props) => {
 const buildTextWrapperStyles = (isThemeDark, isThemeMaryland) => {
   return {
     element: {
-      paddingLeft: Styles__namespace.token.spacing.md,
+      paddingLeft: token__namespace.spacing.md,
       borderLeft: `2px solid ${getBorderColor(isThemeDark, isThemeMaryland)}`,
-      [`@container (${Styles__namespace.token.media.queries.desktop.min})`]: {
-        paddingLeft: Styles__namespace.token.spacing.lg
+      [`@container (${token__namespace.media.queries.desktop.min})`]: {
+        paddingLeft: token__namespace.spacing.lg
       }
     }
   };
@@ -127,11 +138,11 @@ const buildTextWrapperStyles = (isThemeDark, isThemeMaryland) => {
 const buildTextContainerStyles = (hasAsset) => {
   return {
     element: {
-      padding: `${Styles__namespace.token.spacing.xl} 0`,
-      [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+      padding: `${token__namespace.spacing.xl} 0`,
+      [`@container (${token__namespace.media.queries.tablet.min})`]: {
         ...hasAsset && {
-          padding: `${Styles__namespace.token.spacing["4xl"]} 0`,
-          width: `calc(50% - ${Styles__namespace.token.spacing["4xl"]})`
+          padding: `${token__namespace.spacing["4xl"]} 0`,
+          width: `calc(50% - ${token__namespace.spacing["4xl"]})`
         }
       }
     }
@@ -184,10 +195,10 @@ const minimal = (props) => {
         position: "relative",
         display: "flex",
         containerType: "inline-size",
-        [`@container (${Styles__namespace.token.media.queries.large.max})`]: {
+        [`@container (${token__namespace.media.queries.large.max})`]: {
           flexDirection: "column-reverse"
         },
-        [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+        [`@container (${token__namespace.media.queries.tablet.min})`]: {
           minHeight: "288px",
           alignItems: "center"
         }

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

@@ -1 +1 @@
-{"version":3,"file":"minimal.js","sources":["../../../source/composite/hero/minimal.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 HeroMinimalProps } from './_types';\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}: Pick<HeroMinimalProps, 'image'>): ElementVisual[] => {\n  if (!image) return [];\n  return [createImageAsset(image)];\n};\n\nconst getBorderColor = (isThemeDark?: boolean, isThemeMaryland?: boolean) => {\n  return isThemeDark || isThemeMaryland\n    ? Styles.token.color.gold\n    : Styles.token.color.red;\n};\n\nconst getBackgroundColor = (props: HeroMinimalProps) => {\n  const { isThemeDark, isThemeLight, isThemeMaryland } = props;\n\n  if (isThemeDark) return Styles.token.color.black;\n  if (isThemeMaryland) return Styles.token.color.red;\n  if (isThemeLight) return Styles.token.color.gray.lightest;\n  return 'transparent';\n};\n\nconst createAsset = ({ image }: Pick<HeroMinimalProps, 'image'>) => {\n  const children = buildAssetChildren({ image });\n\n  if (children.length === 0) {\n    return null;\n  }\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-minimal__asset',\n    children,\n    elementStyles: {\n      element: {\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          right: 0,\n          top: 0,\n          width: '50%',\n          height: '100%',\n        },\n\n        ['& img']: {\n          [`@container (${Styles.token.media.queries.tablet.min})`]: {\n            objectFit: 'cover',\n            objectPosition: 'center',\n            height: '100%',\n            width: '100%',\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroMinimalProps,\n    'headline' | 'isThemeDark' | 'isThemeLight' | 'isThemeMaryland'\n  >,\n) => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 40;\n\n  if (!headline) return null;\n\n  const desktopStyles = {\n    [`@container (${Styles.token.media.queries.desktop.min})`]: {\n      ...(isOverwriteHeadline && {\n        fontSize: '64px',\n      }),\n    },\n  };\n\n  return ElementModel.headline.campaignLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        ...desktopStyles,\n      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.sm,\n      },\n    },\n    isThemeDark: isThemeDark || isThemeMaryland,\n  });\n};\n\nconst buildTextWrapperStyles = (\n  isThemeDark?: boolean,\n  isThemeMaryland?: boolean,\n) => {\n  return {\n    element: {\n      paddingLeft: Styles.token.spacing.md,\n      borderLeft: `2px solid ${getBorderColor(isThemeDark, isThemeMaryland)}`,\n\n      [`@container (${Styles.token.media.queries.desktop.min})`]: {\n        paddingLeft: Styles.token.spacing.lg,\n      },\n    },\n  };\n};\n\nconst buildTextContainerStyles = (hasAsset: boolean) => {\n  return {\n    element: {\n      padding: `${Styles.token.spacing.xl} 0`,\n\n      [`@container (${Styles.token.media.queries.tablet.min})`]: {\n        ...(hasAsset && {\n          padding: `${Styles.token.spacing['4xl']} 0`,\n          width: `calc(50% - ${Styles.token.spacing['4xl']})`,\n        }),\n      },\n    },\n  };\n};\n\nconst createText = (props: HeroMinimalProps, hasAsset: boolean) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    eyebrow: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    text: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textWrapper = ElementModel.createDiv({\n    className: 'umd-hero-minimal__text-wrapper',\n    children: [textLockupElement],\n    elementStyles: buildTextWrapperStyles(isThemeDark, isThemeMaryland),\n  });\n\n  const textContainer = ElementModel.createDiv({\n    className: 'umd-hero-minimal__text',\n    children: [textWrapper],\n    elementStyles: buildTextContainerStyles(hasAsset),\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      },\n    },\n  });\n};\n\nexport default (props: HeroMinimalProps) => {\n  const asset = createAsset(props);\n  const text = createText(props, !!asset);\n\n  const children: ElementVisual[] = [text];\n  if (asset) {\n    children.push(asset);\n  }\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-minimal',\n    children,\n    elementStyles: {\n      element: {\n        backgroundColor: getBackgroundColor(props),\n        position: 'relative',\n        display: 'flex',\n        containerType: 'inline-size',\n\n        [`@container (${Styles.token.media.queries.large.max})`]: {\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          minHeight: '288px',\n          alignItems: 'center',\n        },\n      },\n    },\n  });\n};\n"],"names":["assets.image.background","Styles","ElementModel.createDiv","headline","ElementModel.headline.campaignLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
+{"version":3,"file":"minimal.js","sources":["../../../source/composite/hero/minimal.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroMinimalProps } from './_types';\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}: Pick<HeroMinimalProps, 'image'>): ElementVisual[] => {\n  if (!image) return [];\n  return [createImageAsset(image)];\n};\n\nconst getBorderColor = (isThemeDark?: boolean, isThemeMaryland?: boolean) => {\n  return isThemeDark || isThemeMaryland ? token.color.gold : token.color.red;\n};\n\nconst getBackgroundColor = (props: HeroMinimalProps) => {\n  const { isThemeDark, isThemeLight, isThemeMaryland } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return 'transparent';\n};\n\nconst createAsset = ({ image }: Pick<HeroMinimalProps, 'image'>) => {\n  const children = buildAssetChildren({ image });\n\n  if (children.length === 0) {\n    return null;\n  }\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-minimal__asset',\n    children,\n    elementStyles: {\n      element: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          right: 0,\n          top: 0,\n          width: '50%',\n          height: '100%',\n        },\n\n        ['& img']: {\n          [`@container (${token.media.queries.tablet.min})`]: {\n            objectFit: 'cover',\n            objectPosition: 'center',\n            height: '100%',\n            width: '100%',\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroMinimalProps,\n    'headline' | 'isThemeDark' | 'isThemeLight' | 'isThemeMaryland'\n  >,\n) => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 40;\n\n  if (!headline) return null;\n\n  const desktopStyles = {\n    [`@container (${token.media.queries.desktop.min})`]: {\n      ...(isOverwriteHeadline && {\n        fontSize: '64px',\n      }),\n    },\n  };\n\n  return ElementModel.headline.campaignLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        ...desktopStyles,\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    },\n    isThemeDark: isThemeDark || isThemeMaryland,\n  });\n};\n\nconst buildTextWrapperStyles = (\n  isThemeDark?: boolean,\n  isThemeMaryland?: boolean,\n) => {\n  return {\n    element: {\n      paddingLeft: token.spacing.md,\n      borderLeft: `2px solid ${getBorderColor(isThemeDark, isThemeMaryland)}`,\n\n      [`@container (${token.media.queries.desktop.min})`]: {\n        paddingLeft: token.spacing.lg,\n      },\n    },\n  };\n};\n\nconst buildTextContainerStyles = (hasAsset: boolean) => {\n  return {\n    element: {\n      padding: `${token.spacing.xl} 0`,\n\n      [`@container (${token.media.queries.tablet.min})`]: {\n        ...(hasAsset && {\n          padding: `${token.spacing['4xl']} 0`,\n          width: `calc(50% - ${token.spacing['4xl']})`,\n        }),\n      },\n    },\n  };\n};\n\nconst createText = (props: HeroMinimalProps, hasAsset: boolean) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    eyebrow: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    text: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textWrapper = ElementModel.createDiv({\n    className: 'umd-hero-minimal__text-wrapper',\n    children: [textLockupElement],\n    elementStyles: buildTextWrapperStyles(isThemeDark, isThemeMaryland),\n  });\n\n  const textContainer = ElementModel.createDiv({\n    className: 'umd-hero-minimal__text',\n    children: [textWrapper],\n    elementStyles: buildTextContainerStyles(hasAsset),\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      },\n    },\n  });\n};\n\nexport default (props: HeroMinimalProps) => {\n  const asset = createAsset(props);\n  const text = createText(props, !!asset);\n\n  const children: ElementVisual[] = [text];\n  if (asset) {\n    children.push(asset);\n  }\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-minimal',\n    children,\n    elementStyles: {\n      element: {\n        backgroundColor: getBackgroundColor(props),\n        position: 'relative',\n        display: 'flex',\n        containerType: 'inline-size',\n\n        [`@container (${token.media.queries.large.max})`]: {\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          minHeight: '288px',\n          alignItems: 'center',\n        },\n      },\n    },\n  });\n};\n"],"names":["assets.image.background","token","ElementModel.createDiv","headline","ElementModel.headline.campaignLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}

package/dist/composite/hero/minimal.mjs

@@ -1,18 +1,29 @@
-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 * as token from "@universityofmaryland/web-styles-library/token";
+import "@universityofmaryland/web-styles-library/element";
+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 "@universityofmaryland/web-utilities-library/accessibility";
+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 } from "../../model/elements/layout.mjs";
 import { campaignLarge } from "../../model/elements/headline.mjs";
 const createImageAsset = (image) => {
@@ -30,13 +41,13 @@ const buildAssetChildren = ({
   return [createImageAsset(image)];
 };
 const getBorderColor = (isThemeDark, isThemeMaryland) => {
-  return isThemeDark || isThemeMaryland ? Styles.token.color.gold : Styles.token.color.red;
+  return isThemeDark || isThemeMaryland ? token.color.gold : token.color.red;
 };
 const getBackgroundColor = (props) => {
   const { isThemeDark, isThemeLight, isThemeMaryland } = props;
-  if (isThemeDark) return Styles.token.color.black;
-  if (isThemeMaryland) return Styles.token.color.red;
-  if (isThemeLight) return Styles.token.color.gray.lightest;
+  if (isThemeDark) return token.color.black;
+  if (isThemeMaryland) return token.color.red;
+  if (isThemeLight) return token.color.gray.lightest;
   return "transparent";
 };
 const createAsset = ({ image }) => {
@@ -49,7 +60,7 @@ const createAsset = ({ image }) => {
     children,
     elementStyles: {
       element: {
-        [`@container (${Styles.token.media.queries.tablet.min})`]: {
+        [`@container (${token.media.queries.tablet.min})`]: {
           position: "absolute",
           right: 0,
           top: 0,
@@ -57,7 +68,7 @@ const createAsset = ({ image }) => {
           height: "100%"
         },
         ["& img"]: {
-          [`@container (${Styles.token.media.queries.tablet.min})`]: {
+          [`@container (${token.media.queries.tablet.min})`]: {
             objectFit: "cover",
             objectPosition: "center",
             height: "100%",
@@ -74,7 +85,7 @@ const createHeadline = (props) => {
   const isOverwriteHeadline = characterCount > 40;
   if (!headline) return null;
   const desktopStyles = {
-    [`@container (${Styles.token.media.queries.desktop.min})`]: {
+    [`@container (${token.media.queries.desktop.min})`]: {
       ...isOverwriteHeadline && {
         fontSize: "64px"
       }
@@ -89,7 +100,7 @@ const createHeadline = (props) => {
         ...desktopStyles
       },
       siblingAfter: {
-        marginTop: Styles.token.spacing.sm
+        marginTop: token.spacing.sm
       }
     },
     isThemeDark: isThemeDark || isThemeMaryland
@@ -98,10 +109,10 @@ const createHeadline = (props) => {
 const buildTextWrapperStyles = (isThemeDark, isThemeMaryland) => {
   return {
     element: {
-      paddingLeft: Styles.token.spacing.md,
+      paddingLeft: token.spacing.md,
       borderLeft: `2px solid ${getBorderColor(isThemeDark, isThemeMaryland)}`,
-      [`@container (${Styles.token.media.queries.desktop.min})`]: {
-        paddingLeft: Styles.token.spacing.lg
+      [`@container (${token.media.queries.desktop.min})`]: {
+        paddingLeft: token.spacing.lg
       }
     }
   };
@@ -109,11 +120,11 @@ const buildTextWrapperStyles = (isThemeDark, isThemeMaryland) => {
 const buildTextContainerStyles = (hasAsset) => {
   return {
     element: {
-      padding: `${Styles.token.spacing.xl} 0`,
-      [`@container (${Styles.token.media.queries.tablet.min})`]: {
+      padding: `${token.spacing.xl} 0`,
+      [`@container (${token.media.queries.tablet.min})`]: {
         ...hasAsset && {
-          padding: `${Styles.token.spacing["4xl"]} 0`,
-          width: `calc(50% - ${Styles.token.spacing["4xl"]})`
+          padding: `${token.spacing["4xl"]} 0`,
+          width: `calc(50% - ${token.spacing["4xl"]})`
         }
       }
     }
@@ -166,10 +177,10 @@ const minimal = (props) => {
         position: "relative",
         display: "flex",
         containerType: "inline-size",
-        [`@container (${Styles.token.media.queries.large.max})`]: {
+        [`@container (${token.media.queries.large.max})`]: {
           flexDirection: "column-reverse"
         },
-        [`@container (${Styles.token.media.queries.tablet.min})`]: {
+        [`@container (${token.media.queries.tablet.min})`]: {
           minHeight: "288px",
           alignItems: "center"
         }

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

@@ -1 +1 @@
-{"version":3,"file":"minimal.mjs","sources":["../../../source/composite/hero/minimal.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 HeroMinimalProps } from './_types';\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}: Pick<HeroMinimalProps, 'image'>): ElementVisual[] => {\n  if (!image) return [];\n  return [createImageAsset(image)];\n};\n\nconst getBorderColor = (isThemeDark?: boolean, isThemeMaryland?: boolean) => {\n  return isThemeDark || isThemeMaryland\n    ? Styles.token.color.gold\n    : Styles.token.color.red;\n};\n\nconst getBackgroundColor = (props: HeroMinimalProps) => {\n  const { isThemeDark, isThemeLight, isThemeMaryland } = props;\n\n  if (isThemeDark) return Styles.token.color.black;\n  if (isThemeMaryland) return Styles.token.color.red;\n  if (isThemeLight) return Styles.token.color.gray.lightest;\n  return 'transparent';\n};\n\nconst createAsset = ({ image }: Pick<HeroMinimalProps, 'image'>) => {\n  const children = buildAssetChildren({ image });\n\n  if (children.length === 0) {\n    return null;\n  }\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-minimal__asset',\n    children,\n    elementStyles: {\n      element: {\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          right: 0,\n          top: 0,\n          width: '50%',\n          height: '100%',\n        },\n\n        ['& img']: {\n          [`@container (${Styles.token.media.queries.tablet.min})`]: {\n            objectFit: 'cover',\n            objectPosition: 'center',\n            height: '100%',\n            width: '100%',\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroMinimalProps,\n    'headline' | 'isThemeDark' | 'isThemeLight' | 'isThemeMaryland'\n  >,\n) => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 40;\n\n  if (!headline) return null;\n\n  const desktopStyles = {\n    [`@container (${Styles.token.media.queries.desktop.min})`]: {\n      ...(isOverwriteHeadline && {\n        fontSize: '64px',\n      }),\n    },\n  };\n\n  return ElementModel.headline.campaignLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        ...desktopStyles,\n      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.sm,\n      },\n    },\n    isThemeDark: isThemeDark || isThemeMaryland,\n  });\n};\n\nconst buildTextWrapperStyles = (\n  isThemeDark?: boolean,\n  isThemeMaryland?: boolean,\n) => {\n  return {\n    element: {\n      paddingLeft: Styles.token.spacing.md,\n      borderLeft: `2px solid ${getBorderColor(isThemeDark, isThemeMaryland)}`,\n\n      [`@container (${Styles.token.media.queries.desktop.min})`]: {\n        paddingLeft: Styles.token.spacing.lg,\n      },\n    },\n  };\n};\n\nconst buildTextContainerStyles = (hasAsset: boolean) => {\n  return {\n    element: {\n      padding: `${Styles.token.spacing.xl} 0`,\n\n      [`@container (${Styles.token.media.queries.tablet.min})`]: {\n        ...(hasAsset && {\n          padding: `${Styles.token.spacing['4xl']} 0`,\n          width: `calc(50% - ${Styles.token.spacing['4xl']})`,\n        }),\n      },\n    },\n  };\n};\n\nconst createText = (props: HeroMinimalProps, hasAsset: boolean) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    eyebrow: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    text: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textWrapper = ElementModel.createDiv({\n    className: 'umd-hero-minimal__text-wrapper',\n    children: [textLockupElement],\n    elementStyles: buildTextWrapperStyles(isThemeDark, isThemeMaryland),\n  });\n\n  const textContainer = ElementModel.createDiv({\n    className: 'umd-hero-minimal__text',\n    children: [textWrapper],\n    elementStyles: buildTextContainerStyles(hasAsset),\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      },\n    },\n  });\n};\n\nexport default (props: HeroMinimalProps) => {\n  const asset = createAsset(props);\n  const text = createText(props, !!asset);\n\n  const children: ElementVisual[] = [text];\n  if (asset) {\n    children.push(asset);\n  }\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-minimal',\n    children,\n    elementStyles: {\n      element: {\n        backgroundColor: getBackgroundColor(props),\n        position: 'relative',\n        display: 'flex',\n        containerType: 'inline-size',\n\n        [`@container (${Styles.token.media.queries.large.max})`]: {\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          minHeight: '288px',\n          alignItems: 'center',\n        },\n      },\n    },\n  });\n};\n"],"names":["assets.image.background","ElementModel.createDiv","ElementModel.headline.campaignLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
+{"version":3,"file":"minimal.mjs","sources":["../../../source/composite/hero/minimal.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroMinimalProps } from './_types';\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}: Pick<HeroMinimalProps, 'image'>): ElementVisual[] => {\n  if (!image) return [];\n  return [createImageAsset(image)];\n};\n\nconst getBorderColor = (isThemeDark?: boolean, isThemeMaryland?: boolean) => {\n  return isThemeDark || isThemeMaryland ? token.color.gold : token.color.red;\n};\n\nconst getBackgroundColor = (props: HeroMinimalProps) => {\n  const { isThemeDark, isThemeLight, isThemeMaryland } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return 'transparent';\n};\n\nconst createAsset = ({ image }: Pick<HeroMinimalProps, 'image'>) => {\n  const children = buildAssetChildren({ image });\n\n  if (children.length === 0) {\n    return null;\n  }\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-minimal__asset',\n    children,\n    elementStyles: {\n      element: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          right: 0,\n          top: 0,\n          width: '50%',\n          height: '100%',\n        },\n\n        ['& img']: {\n          [`@container (${token.media.queries.tablet.min})`]: {\n            objectFit: 'cover',\n            objectPosition: 'center',\n            height: '100%',\n            width: '100%',\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroMinimalProps,\n    'headline' | 'isThemeDark' | 'isThemeLight' | 'isThemeMaryland'\n  >,\n) => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 40;\n\n  if (!headline) return null;\n\n  const desktopStyles = {\n    [`@container (${token.media.queries.desktop.min})`]: {\n      ...(isOverwriteHeadline && {\n        fontSize: '64px',\n      }),\n    },\n  };\n\n  return ElementModel.headline.campaignLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        ...desktopStyles,\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    },\n    isThemeDark: isThemeDark || isThemeMaryland,\n  });\n};\n\nconst buildTextWrapperStyles = (\n  isThemeDark?: boolean,\n  isThemeMaryland?: boolean,\n) => {\n  return {\n    element: {\n      paddingLeft: token.spacing.md,\n      borderLeft: `2px solid ${getBorderColor(isThemeDark, isThemeMaryland)}`,\n\n      [`@container (${token.media.queries.desktop.min})`]: {\n        paddingLeft: token.spacing.lg,\n      },\n    },\n  };\n};\n\nconst buildTextContainerStyles = (hasAsset: boolean) => {\n  return {\n    element: {\n      padding: `${token.spacing.xl} 0`,\n\n      [`@container (${token.media.queries.tablet.min})`]: {\n        ...(hasAsset && {\n          padding: `${token.spacing['4xl']} 0`,\n          width: `calc(50% - ${token.spacing['4xl']})`,\n        }),\n      },\n    },\n  };\n};\n\nconst createText = (props: HeroMinimalProps, hasAsset: boolean) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    eyebrow: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    text: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textWrapper = ElementModel.createDiv({\n    className: 'umd-hero-minimal__text-wrapper',\n    children: [textLockupElement],\n    elementStyles: buildTextWrapperStyles(isThemeDark, isThemeMaryland),\n  });\n\n  const textContainer = ElementModel.createDiv({\n    className: 'umd-hero-minimal__text',\n    children: [textWrapper],\n    elementStyles: buildTextContainerStyles(hasAsset),\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      },\n    },\n  });\n};\n\nexport default (props: HeroMinimalProps) => {\n  const asset = createAsset(props);\n  const text = createText(props, !!asset);\n\n  const children: ElementVisual[] = [text];\n  if (asset) {\n    children.push(asset);\n  }\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-minimal',\n    children,\n    elementStyles: {\n      element: {\n        backgroundColor: getBackgroundColor(props),\n        position: 'relative',\n        display: 'flex',\n        containerType: 'inline-size',\n\n        [`@container (${token.media.queries.large.max})`]: {\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          minHeight: '288px',\n          alignItems: 'center',\n        },\n      },\n    },\n  });\n};\n"],"names":["assets.image.background","ElementModel.createDiv","ElementModel.headline.campaignLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/overlay.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;yBAsOjC,OAAO,gBAAgB;;;;;AAAvC,wBA8DE"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/overlay.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;yBAsOjC,OAAO,gBAAgB;;;;;AAAvC,wBA8DE"}

package/dist/composite/hero/overlay.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 = {
   RESIZE: {
     DURATION: "1.5s",
@@ -113,16 +124,16 @@ const createAsset = ({
     children,
     elementStyles: {
       element: {
-        [`@media (${Styles__namespace.token.media.queries.large.max})`]: {
-          [`&:has(.${Styles__namespace.element.asset.gif.toggle.className})`]: {
+        [`@media (${token__namespace.media.queries.large.max})`]: {
+          [`&:has(.${elementStyles__namespace.asset.gif.toggle.className})`]: {
             minHeight: "56vw",
             display: "grid"
           }
         },
-        [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+        [`@container (${token__namespace.media.queries.tablet.min})`]: {
           position: "absolute",
           width: "60%",
-          height: `calc(100% - ${Styles__namespace.token.spacing["5xl"]})`,
+          height: `calc(100% - ${token__namespace.spacing["5xl"]})`,
           right: 0,
           top: 0,
           overflow: "visible",
@@ -146,7 +157,7 @@ const createHeadline = (props) => {
   const isOverwriteHeadline = characterCount > 30;
   if (!headline$1) return null;
   const desktopStyles = {
-    [`@container (${Styles__namespace.token.media.queries.desktop.min})`]: {
+    [`@container (${token__namespace.media.queries.desktop.min})`]: {
       ...isOverwriteHeadline && {
         fontSize: "80px"
       }
@@ -161,7 +172,7 @@ const createHeadline = (props) => {
         ...desktopStyles
       },
       siblingAfter: {
-        marginTop: Styles__namespace.token.spacing.md
+        marginTop: token__namespace.spacing.md
       }
     },
     isThemeDark: true
@@ -181,11 +192,11 @@ const createTextContent = (props) => {
     children: [textLockupElement],
     elementStyles: {
       element: {
-        [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+        [`@container (${token__namespace.media.queries.tablet.min})`]: {
           maxWidth: "55%"
         },
-        [`& .${Styles__namespace.element.text.rich.simpleLargeDark.className}`]: {
-          [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+        [`& .${elementStyles__namespace.text.rich.simpleLargeDark.className}`]: {
+          [`@container (${token__namespace.media.queries.tablet.min})`]: {
             maxWidth: "60%"
           }
         }
@@ -212,13 +223,13 @@ const createText = (props) => {
     children: [lock],
     elementStyles: {
       element: {
-        padding: `${Styles__namespace.token.spacing.lg} 0`,
+        padding: `${token__namespace.spacing.lg} 0`,
         display: "flex",
         position: "relative",
         zIndex: 999,
         width: "100%",
-        [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
-          padding: `${Styles__namespace.token.spacing["5xl"]} 0`,
+        [`@container (${token__namespace.media.queries.tablet.min})`]: {
+          padding: `${token__namespace.spacing["5xl"]} 0`,
           ...includesAnimation && {
             [`@media (prefers-reduced-motion: no-preference)`]: {
               animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`
@@ -242,13 +253,13 @@ const overlay = (props) => {
     elementStyles: {
       element: {
         position: "relative",
-        backgroundColor: Styles__namespace.token.color.black,
+        backgroundColor: token__namespace.color.black,
         overflow: "clip",
-        [`@container (${Styles__namespace.token.media.queries.large.max})`]: {
+        [`@container (${token__namespace.media.queries.large.max})`]: {
           display: "flex",
           flexDirection: "column-reverse"
         },
-        [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+        [`@container (${token__namespace.media.queries.tablet.min})`]: {
           minHeight: "640px",
           display: "flex",
           alignItems: "center",
@@ -263,7 +274,7 @@ const overlay = (props) => {
             zIndex: 999
           }
         },
-        [`@container (${Styles__namespace.token.media.queries.desktop.min})`]: {
+        [`@container (${token__namespace.media.queries.desktop.min})`]: {
           minHeight: "764px"
         }
       }

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

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../../source/composite/hero/overlay.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 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 (${Styles.token.media.queries.large.max})`]: {\n          [`&:has(.${Styles.element.asset.gif.toggle.className})`]: {\n            minHeight: '56vw',\n            display: 'grid',\n          },\n        },\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '60%',\n          height: `calc(100% - ${Styles.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 (${Styles.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: Styles.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 (${Styles.token.media.queries.tablet.min})`]: {\n          maxWidth: '55%',\n        },\n\n        [`& .${Styles.element.text.rich.simpleLargeDark.className}`]: {\n          [`@container (${Styles.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: `${Styles.token.spacing.lg} 0`,\n        display: 'flex',\n        position: 'relative',\n        zIndex: 999,\n        width: '100%',\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          padding: `${Styles.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: Styles.token.color.black,\n        overflow: 'clip',\n\n        [`@container (${Styles.token.media.queries.large.max})`]: {\n          display: 'flex',\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${Styles.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 (${Styles.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","Styles","headline","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
+{"version":3,"file":"overlay.js","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","token","elementStyles","headline","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}