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

package/dist/composite/hero/minimal.js

@@ -1,54 +1,35 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const Styles = require("@universityofmaryland/web-styles-library");
-const theme = require("@universityofmaryland/web-utilities-library/theme");
-require("@universityofmaryland/web-styles-library/element");
-require("@universityofmaryland/web-styles-library/layout");
-require("@universityofmaryland/web-styles-library/animation");
-require("@universityofmaryland/web-styles-library/typography");
-require("@universityofmaryland/web-utilities-library/media");
-require("@universityofmaryland/web-utilities-library/dom");
-require("@universityofmaryland/web-icons-library/controls");
-require("@universityofmaryland/web-icons-library/communication");
-require("@universityofmaryland/web-icons-library/files");
-require("@universityofmaryland/web-icons-library/brand");
-require("@universityofmaryland/web-icons-library/arrows");
-require("../../atomic/animations/actions/indicator.js");
-require("../../atomic/animations/brand/chevron-scroll.js");
-require("../../atomic/animations/brand/card-stack.js");
-const background = require("../../atomic/assets/image/background.js");
-require("@universityofmaryland/web-utilities-library/performance");
-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");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
+import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
+import "@universityofmaryland/web-styles-library/typography";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/controls";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "@universityofmaryland/web-icons-library/arrows";
+import "../../atomic/animations/actions/indicator.js";
+import "../../atomic/animations/brand/chevron-scroll.js";
+import "../../atomic/animations/brand/card-stack.js";
+import { createImageBackground } from "../../atomic/assets/image/background.js";
+import "@universityofmaryland/web-utilities-library/performance";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
+import "../../atomic/layout/block/stacked.js";
+import "../../atomic/layout/overlay/modal.js";
+import "../../atomic/layout/person/columns.js";
+import "@universityofmaryland/web-icons-library/social";
+import "../../atomic/text-lockup/date.js";
+import { createTextLockupLarge } from "../../atomic/text-lockup/large.js";
+import "../../atomic/text-lockup/small.js";
 const createImageAsset = (image) => {
-  return background({
+  return createImageBackground({
     element: image,
     isScaled: true,
     isGifAllowed: true,
@@ -62,13 +43,13 @@ const buildAssetChildren = ({
   return [createImageAsset(image)];
 };
 const getBorderColor = (isThemeDark, isThemeMaryland) => {
-  return isThemeDark || isThemeMaryland ? token__namespace.color.gold : token__namespace.color.red;
+  return isThemeDark || isThemeMaryland ? token.color.gold : token.color.red;
 };
 const getBackgroundColor = (props) => {
   const { isThemeDark, isThemeLight, isThemeMaryland } = props;
-  if (isThemeDark) return token__namespace.color.black;
-  if (isThemeMaryland) return token__namespace.color.red;
-  if (isThemeLight) return token__namespace.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 }) => {
@@ -76,9 +57,9 @@ const createAsset = ({ image }) => {
   if (children.length === 0) {
     return null;
   }
-  return new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-minimal__asset").withChildren(...children).withStyles({
+  return new ElementBuilder().withClassName("umd-hero-minimal__asset").withChildren(...children).withStyles({
     element: {
-      [`@container (${token__namespace.media.queries.tablet.min})`]: {
+      [`@container (${token.media.queries.tablet.min})`]: {
         position: "absolute",
         right: 0,
         top: 0,
@@ -86,7 +67,7 @@ const createAsset = ({ image }) => {
         height: "100%"
       },
       ["& img"]: {
-        [`@container (${token__namespace.media.queries.tablet.min})`]: {
+        [`@container (${token.media.queries.tablet.min})`]: {
           objectFit: "cover",
           objectPosition: "center",
           height: "100%",
@@ -102,32 +83,32 @@ const createHeadline = (props) => {
   const characterCount = headline?.textContent?.trim().length || 0;
   const isOverwriteHeadline = characterCount > 40;
   if (!headline) return null;
-  return new webBuilderLibrary.ElementBuilder(headline).styled(
-    Styles__namespace.typography.campaign.compose("large", {
-      theme: theme.theme.fontColor(finalIsThemeDark)
+  return new ElementBuilder(headline).styled(
+    Styles.typography.campaign.compose("large", {
+      theme: theme.fontColor(finalIsThemeDark)
     })
   ).withStyles({
     element: {
       fontWeight: 800,
       textTransform: "uppercase",
-      [`@container (${token__namespace.media.queries.desktop.min})`]: {
+      [`@container (${token.media.queries.desktop.min})`]: {
         ...isOverwriteHeadline && {
           fontSize: "64px"
         }
       }
     },
     siblingAfter: {
-      marginTop: token__namespace.spacing.sm
+      marginTop: token.spacing.sm
     }
   }).build();
 };
 const buildTextWrapperStyles = (isThemeDark, isThemeMaryland) => {
   return {
     element: {
-      paddingLeft: token__namespace.spacing.md,
+      paddingLeft: token.spacing.md,
       borderLeft: `2px solid ${getBorderColor(isThemeDark, isThemeMaryland)}`,
-      [`@container (${token__namespace.media.queries.desktop.min})`]: {
-        paddingLeft: token__namespace.spacing.lg
+      [`@container (${token.media.queries.desktop.min})`]: {
+        paddingLeft: token.spacing.lg
       }
     }
   };
@@ -135,11 +116,11 @@ const buildTextWrapperStyles = (isThemeDark, isThemeMaryland) => {
 const buildTextContainerStyles = (hasAsset) => {
   return {
     element: {
-      padding: `${token__namespace.spacing.xl} 0`,
-      [`@container (${token__namespace.media.queries.tablet.min})`]: {
+      padding: `${token.spacing.xl} 0`,
+      [`@container (${token.media.queries.tablet.min})`]: {
         ...hasAsset && {
-          padding: `${token__namespace.spacing["4xl"]} 0`,
-          width: `calc(50% - ${token__namespace.spacing["4xl"]})`
+          padding: `${token.spacing["4xl"]} 0`,
+          width: `calc(50% - ${token.spacing["4xl"]})`
         }
       }
     }
@@ -147,16 +128,16 @@ const buildTextContainerStyles = (hasAsset) => {
 };
 const createText = (props, hasAsset) => {
   const { isThemeDark, isThemeMaryland } = props;
-  const textLockupElement = large({
+  const textLockupElement = createTextLockupLarge({
     eyebrow: props.eyebrow,
     headlineComposite: createHeadline(props),
     text: props.text,
     actions: props.actions,
     isThemeDark: isThemeDark || isThemeMaryland || false
   });
-  const textWrapper = new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-minimal__text-wrapper").withChild(textLockupElement).withStyles(buildTextWrapperStyles(isThemeDark, isThemeMaryland)).build();
-  const textContainer = new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-minimal__text").withChild(textWrapper).withStyles(buildTextContainerStyles(hasAsset)).build();
-  return new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.space.horizontal.larger).withChild(textContainer).withStyles({
+  const textWrapper = new ElementBuilder().withClassName("umd-hero-minimal__text-wrapper").withChild(textLockupElement).withStyles(buildTextWrapperStyles(isThemeDark, isThemeMaryland)).build();
+  const textContainer = new ElementBuilder().withClassName("umd-hero-minimal__text").withChild(textWrapper).withStyles(buildTextContainerStyles(hasAsset)).build();
+  return new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(textContainer).withStyles({
     element: {
       height: "100%",
       width: "100%",
@@ -164,19 +145,19 @@ const createText = (props, hasAsset) => {
     }
   }).build();
 };
-const minimal = (props) => {
+const createCompositeHeroMinimal = (props) => {
   const asset = createAsset(props);
   const text = createText(props, !!asset);
-  const container = new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-minimal").withChild(text).withStyles({
+  const container = new ElementBuilder().withClassName("umd-hero-minimal").withChild(text).withStyles({
     element: {
       backgroundColor: getBackgroundColor(props),
       position: "relative",
       display: "flex",
       containerType: "inline-size",
-      [`@container (${token__namespace.media.queries.large.max})`]: {
+      [`@container (${token.media.queries.large.max})`]: {
         flexDirection: "column-reverse"
       },
-      [`@container (${token__namespace.media.queries.tablet.min})`]: {
+      [`@container (${token.media.queries.tablet.min})`]: {
         minHeight: "288px",
         alignItems: "center"
       }
@@ -187,5 +168,7 @@ const minimal = (props) => {
   }
   return container.build();
 };
-module.exports = minimal;
+export {
+  createCompositeHeroMinimal
+};
 //# sourceMappingURL=minimal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"minimal.js","sources":["../../../source/composite/hero/minimal.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { type ElementModel } 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'>): ElementModel<HTMLElement>[] => {\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 new ElementBuilder()\n    .withClassName('umd-hero-minimal__asset')\n    .withChildren(...children)\n    .withStyles({\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    .build();\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroMinimalProps,\n    'headline' | 'isThemeDark' | 'isThemeLight' | 'isThemeMaryland'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const finalIsThemeDark = isThemeDark || isThemeMaryland;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 40;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.campaign.compose('large', {\n        theme: theme.fontColor(finalIsThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '64px',\n          }),\n        },\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\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 = new ElementBuilder()\n    .withClassName('umd-hero-minimal__text-wrapper')\n    .withChild(textLockupElement)\n    .withStyles(buildTextWrapperStyles(isThemeDark, isThemeMaryland))\n    .build();\n\n  const textContainer = new ElementBuilder()\n    .withClassName('umd-hero-minimal__text')\n    .withChild(textWrapper)\n    .withStyles(buildTextContainerStyles(hasAsset))\n    .build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContainer)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n};\n\nexport default (props: HeroMinimalProps) => {\n  const asset = createAsset(props);\n  const text = createText(props, !!asset);\n\n  const container = new ElementBuilder()\n    .withClassName('umd-hero-minimal')\n    .withChild(text)\n    .withStyles({\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  if (asset) {\n    container.withChild(asset);\n  }\n\n  return container.build();\n};\n"],"names":["assets.image.background","token","ElementBuilder","Styles","theme","textLockup.large"],"mappings":"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"}
+{"version":3,"file":"minimal.js","sources":["../../../source/composite/hero/minimal.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { type ElementModel } 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'>): ElementModel<HTMLElement>[] => {\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 new ElementBuilder()\n    .withClassName('umd-hero-minimal__asset')\n    .withChildren(...children)\n    .withStyles({\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    .build();\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroMinimalProps,\n    'headline' | 'isThemeDark' | 'isThemeLight' | 'isThemeMaryland'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const finalIsThemeDark = isThemeDark || isThemeMaryland;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 40;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.campaign.compose('large', {\n        theme: theme.fontColor(finalIsThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '64px',\n          }),\n        },\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\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 = new ElementBuilder()\n    .withClassName('umd-hero-minimal__text-wrapper')\n    .withChild(textLockupElement)\n    .withStyles(buildTextWrapperStyles(isThemeDark, isThemeMaryland))\n    .build();\n\n  const textContainer = new ElementBuilder()\n    .withClassName('umd-hero-minimal__text')\n    .withChild(textWrapper)\n    .withStyles(buildTextContainerStyles(hasAsset))\n    .build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContainer)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n};\n\nexport const createCompositeHeroMinimal = (props: HeroMinimalProps) => {\n  const asset = createAsset(props);\n  const text = createText(props, !!asset);\n\n  const container = new ElementBuilder()\n    .withClassName('umd-hero-minimal')\n    .withChild(text)\n    .withStyles({\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  if (asset) {\n    container.withChild(asset);\n  }\n\n  return container.build();\n};\n"],"names":["assets.image.background","textLockup.large"],"mappings":"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"}

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

@@ -1,4 +1,3 @@
 import { HeroOverlayProps } from './_types';
-declare const _default: (props: HeroOverlayProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export default _default;
+export declare const createCompositeHeroOverlay: (props: HeroOverlayProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 //# sourceMappingURL=overlay.d.ts.map

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":"AAMA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;yBAmOjC,OAAO,gBAAgB;AAAvC,wBA8DE"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/overlay.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAmOjD,eAAO,MAAM,0BAA0B,GAAI,OAAO,gBAAgB,kFA8DjE,CAAC"}

package/dist/composite/hero/overlay.js

@@ -1,54 +1,34 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const elementStyles = require("@universityofmaryland/web-styles-library/element");
-const Styles = require("@universityofmaryland/web-styles-library");
-require("@universityofmaryland/web-styles-library/layout");
-require("@universityofmaryland/web-styles-library/animation");
-require("@universityofmaryland/web-styles-library/typography");
-require("@universityofmaryland/web-utilities-library/media");
-require("@universityofmaryland/web-utilities-library/dom");
-require("@universityofmaryland/web-icons-library/controls");
-require("@universityofmaryland/web-icons-library/communication");
-require("@universityofmaryland/web-icons-library/files");
-require("@universityofmaryland/web-icons-library/brand");
-require("@universityofmaryland/web-icons-library/arrows");
-require("../../atomic/animations/actions/indicator.js");
-require("../../atomic/animations/brand/chevron-scroll.js");
-require("../../atomic/animations/brand/card-stack.js");
-const background = require("../../atomic/assets/image/background.js");
-require("@universityofmaryland/web-utilities-library/performance");
-const 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("@universityofmaryland/web-utilities-library/theme");
-require("../../atomic/layout/block/stacked.js");
-require("../../atomic/layout/overlay/modal.js");
-require("../../atomic/layout/person/columns.js");
-require("@universityofmaryland/web-icons-library/social");
-require("../../atomic/text-lockup/date.js");
-const large = require("../../atomic/text-lockup/large.js");
-require("../../atomic/text-lockup/small.js");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+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 "@universityofmaryland/web-icons-library/arrows";
+import "../../atomic/animations/actions/indicator.js";
+import "../../atomic/animations/brand/chevron-scroll.js";
+import "../../atomic/animations/brand/card-stack.js";
+import { createImageBackground } from "../../atomic/assets/image/background.js";
+import "@universityofmaryland/web-utilities-library/performance";
+import { imagePlaceholder } from "../../atomic/assets/image/placeholder.js";
+import { createVideoObservedAutoPlay } from "../../atomic/assets/video/observed-auto-play.js";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
+import "@universityofmaryland/web-utilities-library/theme";
+import "../../atomic/layout/block/stacked.js";
+import "../../atomic/layout/overlay/modal.js";
+import "../../atomic/layout/person/columns.js";
+import "@universityofmaryland/web-icons-library/social";
+import "../../atomic/text-lockup/date.js";
+import { createTextLockupLarge } from "../../atomic/text-lockup/large.js";
+import "../../atomic/text-lockup/small.js";
 const ANIMATION_CONFIG = {
   RESIZE: {
     DURATION: "1.5s",
@@ -88,13 +68,13 @@ const keyFrameHeroSlideUp = `
   }
 `;
 const createVideoAsset = (video) => {
-  return observedAutoPlay({
+  return createVideoObservedAutoPlay({
     video,
     isScaled: true
   });
 };
 const createImageAsset = (image) => {
-  return background({
+  return createImageBackground({
     element: image,
     isScaled: true,
     isGifAllowed: true,
@@ -111,7 +91,7 @@ const buildAssetChildren = ({
   if (image) {
     return [createImageAsset(image)];
   }
-  return [placeholder.fearlessForward()];
+  return [imagePlaceholder.fearlessForward()];
 };
 const createAsset = ({
   image,
@@ -122,18 +102,18 @@ const createAsset = ({
   if (children.length === 0) {
     return null;
   }
-  return new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-overlay__asset").withChildren(...children).withStyles({
+  return new ElementBuilder().withClassName("umd-hero-overlay__asset").withChildren(...children).withStyles({
     element: {
-      [`@media (${token__namespace.media.queries.large.max})`]: {
-        [`&:has(.${elementStyles__namespace.asset.gif.toggle.className})`]: {
+      [`@media (${token.media.queries.large.max})`]: {
+        [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {
           minHeight: "56vw",
           display: "grid"
         }
       },
-      [`@container (${token__namespace.media.queries.tablet.min})`]: {
+      [`@container (${token.media.queries.tablet.min})`]: {
         position: "absolute",
         width: "60%",
-        height: `calc(100% - ${token__namespace.spacing["5xl"]})`,
+        height: `calc(100% - ${token.spacing["5xl"]})`,
         right: 0,
         top: 0,
         overflow: "visible",
@@ -155,37 +135,37 @@ const createHeadline = (props) => {
   const characterCount = headline?.textContent?.trim().length || 0;
   const isOverwriteHeadline = characterCount > 30;
   if (!headline) return null;
-  return new webBuilderLibrary.ElementBuilder(headline).styled(Styles__namespace.typography.campaign.fonts.extraLarge).withStyles({
+  return new ElementBuilder(headline).styled(Styles.typography.campaign.fonts.extraLarge).withStyles({
     element: {
       textTransform: "uppercase",
       textWrap: "pretty",
-      color: token__namespace.color.white,
-      [`@container (${token__namespace.media.queries.desktop.min})`]: {
+      color: token.color.white,
+      [`@container (${token.media.queries.desktop.min})`]: {
         ...isOverwriteHeadline && {
           fontSize: "80px"
         }
       }
     },
     siblingAfter: {
-      marginTop: token__namespace.spacing.md
+      marginTop: token.spacing.md
     }
   }).build();
 };
 const createTextContent = (props) => {
-  const textLockupElement = large({
+  const textLockupElement = createTextLockupLarge({
     ribbon: props.eyebrow,
     headlineComposite: createHeadline(props),
     text: props.text,
     actions: props.actions,
     isThemeDark: true
   });
-  return new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-overlay__text-content").withChild(textLockupElement).withStyles({
+  return new ElementBuilder().withClassName("umd-hero-overlay__text-content").withChild(textLockupElement).withStyles({
     element: {
-      [`@container (${token__namespace.media.queries.tablet.min})`]: {
+      [`@container (${token.media.queries.tablet.min})`]: {
         maxWidth: "55%"
       },
-      [`& .${elementStyles__namespace.text.rich.simpleLargeDark.className}`]: {
-        [`@container (${token__namespace.media.queries.tablet.min})`]: {
+      [`& .${elementStyles.text.rich.simpleLargeDark.className}`]: {
+        [`@container (${token.media.queries.tablet.min})`]: {
           maxWidth: "60%"
         }
       }
@@ -195,22 +175,22 @@ const createTextContent = (props) => {
 const createText = (props) => {
   const { includesAnimation } = props;
   const textContent = createTextContent(props);
-  const lock = new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.space.horizontal.larger).withChild(textContent).withStyles({
+  const lock = new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(textContent).withStyles({
     element: {
       height: "100%",
       width: "100%",
       position: "relative"
     }
   }).build();
-  return new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-overlay__text").withChild(lock).withStyles({
+  return new ElementBuilder().withClassName("umd-hero-overlay__text").withChild(lock).withStyles({
     element: {
-      padding: `${token__namespace.spacing.lg} 0`,
+      padding: `${token.spacing.lg} 0`,
       display: "flex",
       position: "relative",
       zIndex: 999,
       width: "100%",
-      [`@container (${token__namespace.media.queries.tablet.min})`]: {
-        padding: `${token__namespace.spacing["5xl"]} 0`,
+      [`@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}`
@@ -220,19 +200,19 @@ const createText = (props) => {
     }
   }).build();
 };
-const overlay = (props) => {
+const createCompositeHeroOverlay = (props) => {
   const text = createText(props);
   const asset = createAsset(props);
-  const container = new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-overlay__container").withChild(text).withStyles({
+  const container = new ElementBuilder().withClassName("umd-hero-overlay__container").withChild(text).withStyles({
     element: {
       position: "relative",
-      backgroundColor: token__namespace.color.black,
+      backgroundColor: token.color.black,
       overflow: "clip",
-      [`@container (${token__namespace.media.queries.large.max})`]: {
+      [`@container (${token.media.queries.large.max})`]: {
         display: "flex",
         flexDirection: "column-reverse"
       },
-      [`@container (${token__namespace.media.queries.tablet.min})`]: {
+      [`@container (${token.media.queries.tablet.min})`]: {
         minHeight: "640px",
         display: "flex",
         alignItems: "center",
@@ -247,7 +227,7 @@ const overlay = (props) => {
           zIndex: 999
         }
       },
-      [`@container (${token__namespace.media.queries.desktop.min})`]: {
+      [`@container (${token.media.queries.desktop.min})`]: {
         minHeight: "764px"
       }
     }
@@ -256,7 +236,7 @@ const overlay = (props) => {
     container.withChild(asset);
   }
   const containerBuilt = container.build();
-  const composite = new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-overlay").withChild(containerBuilt).withStyles({
+  const composite = new ElementBuilder().withClassName("umd-hero-overlay").withChild(containerBuilt).withStyles({
     element: {
       containerType: "inline-size"
     }
@@ -265,5 +245,7 @@ const overlay = (props) => {
   composite.styles += keyFrameHeroSlideUp;
   return composite;
 };
-module.exports = overlay;
+export {
+  createCompositeHeroOverlay
+};
 //# sourceMappingURL=overlay.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","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","ElementBuilder","token","elementStyles","Styles","textLockup.large"],"mappings":"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"}
+{"version":3,"file":"overlay.js","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 const createCompositeHeroOverlay = (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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"}