@universityofmaryland/web-elements-library 1.5.2 → 1.5.5

package/dist/composite/pathway/_common.mjs

@@ -1,9 +1,12 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
-import { createDiv } from "../../model/elements/index.mjs";
-import "@universityofmaryland/web-styles-library/token";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import * as animation from "@universityofmaryland/web-styles-library/animation";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
+import { wrapTextNodeInSpan } from "@universityofmaryland/web-utilities-library/dom";
 import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-styles-library/layout";
 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";
@@ -13,6 +16,7 @@ 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-styles-library";
 import "@universityofmaryland/web-utilities-library/performance";
 import observedAutoPlay from "../../atomic/assets/video/observed-auto-play.mjs";
 import "@universityofmaryland/web-icons-library/location";
@@ -24,8 +28,6 @@ import "@universityofmaryland/web-icons-library/social";
 import "../../atomic/text-lockup/date.mjs";
 import medium from "../../atomic/text-lockup/medium.mjs";
 import "../../atomic/text-lockup/small.mjs";
-import "@universityofmaryland/web-styles-library/typography";
-import { sansLargest } from "../../model/elements/headline.mjs";
 const createCompositeHeadline = ({
   headline,
   isThemeDark,
@@ -33,60 +35,58 @@ const createCompositeHeadline = ({
 }) => {
   const characterCount = headline?.textContent?.trim().length || 0;
   const isOverwriteHeadline = characterCount > 30;
+  const finalIsThemeDark = isThemeDark || isThemeMaryland;
   if (!headline) return null;
-  const desktopStyles = {
-    [`@container (${Styles.token.media.queries.desktop.min})`]: {
-      ...isOverwriteHeadline && {
-        fontSize: "40px"
-      }
-    }
+  const headlineStyles = {
+    ...typography.sans.compose("largest", {
+      theme: theme.fontColor(finalIsThemeDark)
+    }),
+    ...animation.line.composeSlideUnder({
+      color: theme.foreground(finalIsThemeDark)
+    })
   };
-  return sansLargest({
-    element: headline,
-    isThemeDark: isThemeDark || isThemeMaryland,
-    elementStyles: {
-      element: {
-        fontWeight: 800,
-        textTransform: "uppercase",
-        textWrap: "balance",
-        color: Styles.token.color.black,
-        ...desktopStyles
-      },
-      siblingAfter: {
-        marginTop: Styles.token.spacing.md
+  return new ElementBuilder(headline).styled(headlineStyles).withStyles({
+    element: {
+      fontWeight: 800,
+      textTransform: "uppercase",
+      textWrap: "balance",
+      [`@container (${token.media.queries.desktop.min})`]: {
+        ...isOverwriteHeadline && {
+          fontSize: "40px"
+        }
       }
+    },
+    siblingAfter: {
+      marginTop: token.spacing.md
     }
-  });
+  }).withModifier((el) => wrapTextNodeInSpan(el)).build();
 };
 const createCompositeStat = ({
   stats
 }) => {
   const mediumSize = 800;
   if (!stats) return null;
-  const statWrapper = createDiv({
-    className: "text-lockup-medium-stats",
-    elementStyles: {
-      element: {
-        marginTop: Styles.token.spacing.lg,
+  const statWrapper = new ElementBuilder().withClassName("text-lockup-medium-stats").withStyles({
+    element: {
+      marginTop: token.spacing.lg,
+      [`&:has(> *:nth-child(2))`]: {
+        display: `grid`,
+        gridGap: `${token.spacing.md}`
+      },
+      [`@container (max-width: ${mediumSize - 1}px)`]: {
+        marginTop: token.spacing.lg,
+        paddingTop: token.spacing.md,
+        borderTop: `1px solid ${token.color.gray.light}`
+      },
+      [`@container (min-width: ${mediumSize}px)`]: {
+        marginTop: token.spacing["2xl"],
         [`&:has(> *:nth-child(2))`]: {
-          display: `grid`,
-          gridGap: `${Styles.token.spacing.md}`
-        },
-        [`@container (max-width: ${mediumSize - 1}px)`]: {
-          marginTop: Styles.token.spacing.lg,
-          paddingTop: Styles.token.spacing.md,
-          borderTop: `1px solid ${Styles.token.color.gray.light}`
-        },
-        [`@container (min-width: ${mediumSize}px)`]: {
-          marginTop: Styles.token.spacing["2xl"],
-          [`&:has(> *:nth-child(2))`]: {
-            gridGap: `${Styles.token.spacing.lg}`,
-            gridTemplateColumns: `repeat(2, 1fr)`
-          }
+          gridGap: `${token.spacing.lg}`,
+          gridTemplateColumns: `repeat(2, 1fr)`
         }
       }
     }
-  });
+  }).build();
   statWrapper.element.innerHTML = stats.innerHTML;
   return statWrapper;
 };
@@ -125,22 +125,18 @@ const createAssetContent = (props) => {
       })
     );
   }
-  return createDiv({
-    className: "pathway-image-container-wrapper",
-    children,
-    elementStyles: {
-      element: {
-        position: "relative",
-        overflow: "hidden",
-        height: "100%",
-        width: "100%",
-        display: "grid",
-        [`&:has(.image-container)`]: {
-          alignItems: "center"
-        }
+  return new ElementBuilder().withClassName("pathway-image-container-wrapper").withChildren(...children).withStyles({
+    element: {
+      position: "relative",
+      overflow: "hidden",
+      height: "100%",
+      width: "100%",
+      display: "grid",
+      [`&:has(.image-container)`]: {
+        alignItems: "center"
       }
     }
-  });
+  }).build();
 };
 export {
   createAssetContent,

package/dist/composite/pathway/_common.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"_common.mjs","sources":["../../../source/composite/pathway/_common.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport * as Atomic from 'atomic';\nimport { type PathwayTextLockupProps, type PathwayAssetProps } from './_types';\n\nexport const createCompositeHeadline = ({\n  headline,\n  isThemeDark,\n  isThemeMaryland,\n}: Pick<\n  PathwayTextLockupProps,\n  'headline' | 'isThemeDark' | 'isThemeMaryland'\n>) => {\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: '40px',\n      }),\n    },\n  };\n\n  return ElementModel.headline.sansLargest({\n    element: headline,\n    isThemeDark: isThemeDark || isThemeMaryland,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        textWrap: 'balance',\n        color: Styles.token.color.black,\n        ...desktopStyles,\n      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.md,\n      },\n    },\n  });\n};\n\nexport const createCompositeStat = ({\n  stats,\n}: Pick<PathwayTextLockupProps, 'stats'>) => {\n  const mediumSize = 800;\n\n  if (!stats) return null;\n\n  const statWrapper = ElementModel.createDiv({\n    className: 'text-lockup-medium-stats',\n    elementStyles: {\n      element: {\n        marginTop: Styles.token.spacing.lg,\n\n        [`&:has(> *:nth-child(2))`]: {\n          display: `grid`,\n          gridGap: `${Styles.token.spacing.md}`,\n        },\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          marginTop: Styles.token.spacing.lg,\n          paddingTop: Styles.token.spacing.md,\n          borderTop: `1px solid ${Styles.token.color.gray.light}`,\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          marginTop: Styles.token.spacing['2xl'],\n\n          [`&:has(> *:nth-child(2))`]: {\n            gridGap: `${Styles.token.spacing.lg}`,\n            gridTemplateColumns: `repeat(2, 1fr)`,\n          },\n        },\n      },\n    },\n  });\n\n  statWrapper.element.innerHTML = stats.innerHTML;\n\n  return statWrapper;\n};\n\nexport const createTextLockupMedium = (\n  props: Pick<\n    PathwayTextLockupProps,\n    | 'stats'\n    | 'actions'\n    | 'eventDetails'\n    | 'eyebrow'\n    | 'headline'\n    | 'stats'\n    | 'text'\n    | 'isThemeDark'\n    | 'isThemeMaryland'\n  >,\n) =>\n  Atomic.textLockup.medium({\n    ...props,\n    ribbon: props.eyebrow,\n    compositeHeadline: createCompositeHeadline(props),\n    compositeStats: createCompositeStat(props),\n  });\n\nexport const createAssetContent = (\n  props: Pick<\n    PathwayAssetProps,\n    'dateSign' | 'image' | 'video' | 'isImageScaled'\n  >,\n) => {\n  const { dateSign, image, video, isImageScaled = true } = props;\n  const children = [];\n\n  if (video) {\n    children.push(\n      Atomic.assets.video.observedAutoPlay({\n        video,\n        isScaled: isImageScaled,\n        additionalElementStyles: {\n          [`& video`]: {\n            objectFit: 'cover',\n            width: '100%',\n            height: '100%',\n          },\n        },\n      }),\n    );\n  }\n\n  if (!video && image) {\n    children.push(\n      Atomic.assets.image.background({\n        element: image,\n        isScaled: isImageScaled,\n        isShowCaption: true,\n        isGifAllowed: true,\n        dateSign,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'pathway-image-container-wrapper',\n    children,\n    elementStyles: {\n      element: {\n        position: 'relative',\n        overflow: 'hidden',\n        height: '100%',\n        width: '100%',\n        display: 'grid',\n\n        [`&:has(.image-container)`]: {\n          alignItems: 'center',\n        },\n      },\n    },\n  });\n};\n"],"names":["ElementModel.headline.sansLargest","ElementModel.createDiv","Atomic.textLockup.medium","Atomic.assets.video.observedAutoPlay","Atomic.assets.image.background"],"mappings":"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"}
+{"version":3,"file":"_common.mjs","sources":["../../../source/composite/pathway/_common.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport * as Atomic from 'atomic';\nimport { type PathwayTextLockupProps, type PathwayAssetProps } from './_types';\n\nexport const createCompositeHeadline = ({\n  headline,\n  isThemeDark,\n  isThemeMaryland,\n}: Pick<\n  PathwayTextLockupProps,\n  'headline' | 'isThemeDark' | 'isThemeMaryland'\n>) => {\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n  const finalIsThemeDark = isThemeDark || isThemeMaryland;\n\n  if (!headline) return null;\n\n  const headlineStyles = {\n    ...typography.sans.compose('largest', {\n      theme: theme.fontColor(finalIsThemeDark),\n    }),\n    ...animationStyles.line.composeSlideUnder({\n      color: theme.foreground(finalIsThemeDark),\n    }),\n  };\n\n  return new ElementBuilder(headline)\n    .styled(headlineStyles)\n    .withStyles({\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        textWrap: 'balance',\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '40px',\n          }),\n        },\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .withModifier((el) => wrapTextNodeInSpan(el))\n    .build();\n};\n\nexport const createCompositeStat = ({\n  stats,\n}: Pick<PathwayTextLockupProps, 'stats'>) => {\n  const mediumSize = 800;\n\n  if (!stats) return null;\n\n  const statWrapper = new ElementBuilder()\n    .withClassName('text-lockup-medium-stats')\n    .withStyles({\n      element: {\n        marginTop: token.spacing.lg,\n\n        [`&:has(> *:nth-child(2))`]: {\n          display: `grid`,\n          gridGap: `${token.spacing.md}`,\n        },\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          marginTop: token.spacing.lg,\n          paddingTop: token.spacing.md,\n          borderTop: `1px solid ${token.color.gray.light}`,\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          marginTop: token.spacing['2xl'],\n\n          [`&:has(> *:nth-child(2))`]: {\n            gridGap: `${token.spacing.lg}`,\n            gridTemplateColumns: `repeat(2, 1fr)`,\n          },\n        },\n      },\n    })\n    .build();\n\n  statWrapper.element.innerHTML = stats.innerHTML;\n\n  return statWrapper;\n};\n\nexport const createTextLockupMedium = (\n  props: Pick<\n    PathwayTextLockupProps,\n    | 'stats'\n    | 'actions'\n    | 'eventDetails'\n    | 'eyebrow'\n    | 'headline'\n    | 'stats'\n    | 'text'\n    | 'isThemeDark'\n    | 'isThemeMaryland'\n  >,\n) =>\n  Atomic.textLockup.medium({\n    ...props,\n    ribbon: props.eyebrow,\n    compositeHeadline: createCompositeHeadline(props),\n    compositeStats: createCompositeStat(props),\n  });\n\nexport const createAssetContent = (\n  props: Pick<\n    PathwayAssetProps,\n    'dateSign' | 'image' | 'video' | 'isImageScaled'\n  >,\n) => {\n  const { dateSign, image, video, isImageScaled = true } = props;\n  const children = [];\n\n  if (video) {\n    children.push(\n      Atomic.assets.video.observedAutoPlay({\n        video,\n        isScaled: isImageScaled,\n        additionalElementStyles: {\n          [`& video`]: {\n            objectFit: 'cover',\n            width: '100%',\n            height: '100%',\n          },\n        },\n      }),\n    );\n  }\n\n  if (!video && image) {\n    children.push(\n      Atomic.assets.image.background({\n        element: image,\n        isScaled: isImageScaled,\n        isShowCaption: true,\n        isGifAllowed: true,\n        dateSign,\n      }),\n    );\n  }\n\n  return new ElementBuilder()\n    .withClassName('pathway-image-container-wrapper')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        position: 'relative',\n        overflow: 'hidden',\n        height: '100%',\n        width: '100%',\n        display: 'grid',\n\n        [`&:has(.image-container)`]: {\n          alignItems: 'center',\n        },\n      },\n    })\n    .build();\n};\n"],"names":["animationStyles","Atomic.textLockup.medium","Atomic.assets.video.observedAutoPlay","Atomic.assets.image.background"],"mappings":"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"}

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

@@ -9,10 +9,6 @@ interface PathwayHeroProps {
     text: HTMLElement | null;
     video: HTMLVideoElement | null;
 }
-declare const _default: (props: PathwayHeroProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: (props: PathwayHeroProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=hero.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/hero.ts"],"names":[],"mappings":"AAMA,UAAU,gBAAgB;IACxB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAChC;yBA+Re,OAAO,gBAAgB;;;;;AAAvC,wBAgBE"}
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/hero.ts"],"names":[],"mappings":"AAMA,UAAU,gBAAgB;IACxB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAChC;yBA2Re,OAAO,gBAAgB;AAAvC,wBAgBE"}

package/dist/composite/pathway/hero.js

@@ -1,8 +1,12 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
+const Styles = require("@universityofmaryland/web-styles-library");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
-const index = require("../../model/elements/index.js");
 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");
@@ -18,6 +22,7 @@ require("@universityofmaryland/web-utilities-library/performance");
 const observedAutoPlay = require("../../atomic/assets/video/observed-auto-play.js");
 require("@universityofmaryland/web-icons-library/location");
 require("@universityofmaryland/web-icons-library/calendar");
+require("@universityofmaryland/web-utilities-library/theme");
 require("../../atomic/layout/block/stacked.js");
 require("../../atomic/layout/overlay/modal.js");
 require("../../atomic/layout/person/columns.js");
@@ -25,9 +30,6 @@ 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) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -45,6 +47,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
 const BREAK_SMALL = 999;
 const BREAK_MEDIUM = 1e3;
 const BREAK_LARGE = 1300;
@@ -92,10 +95,39 @@ const createAssetColumn = ({
   includesAnimation,
   isImagePositionLeft
 }) => {
-  const children = [];
   if (!image && !video) return;
+  const builder = new webBuilderLibrary.ElementBuilder().withClassName("pathway-hero-container-asset-wrapper").withStyles({
+    element: {
+      overflow: "hidden",
+      position: "relative",
+      [`@container (max-width: ${BREAK_SMALL}px)`]: {
+        aspectRatio: "16 / 9"
+      },
+      [`@container (min-width: ${BREAK_MEDIUM}px)`]: {
+        width: "50%",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        height: "100%",
+        ...!isImagePositionLeft && {
+          left: "inherit",
+          right: 0
+        }
+      },
+      [`& img, & video`]: {
+        [`@container (min-width: ${BREAK_MEDIUM}px)`]: {
+          ...includesAnimation && {
+            ...styles.withViewTimelineAnimation({
+              animation: `pathway-hero-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`
+            })
+          }
+        }
+      }
+    }
+  });
   if (video) {
-    children.push(
+    builder.withChild(
       observedAutoPlay({
         video,
         isScaled: true,
@@ -108,7 +140,7 @@ const createAssetColumn = ({
     );
   }
   if (image && !video) {
-    children.push(
+    builder.withChild(
       background({
         element: image,
         isScaled: true,
@@ -117,179 +149,126 @@ const createAssetColumn = ({
       })
     );
   }
-  return index.createDiv({
-    className: "pathway-hero-container-asset-wrapper",
-    children,
-    elementStyles: {
-      element: {
-        overflow: "hidden",
-        position: "relative",
-        [`@container (max-width: ${BREAK_SMALL}px)`]: {
-          aspectRatio: "16 / 9"
-        },
-        [`@container (min-width: ${BREAK_MEDIUM}px)`]: {
-          width: "50%",
-          position: "absolute",
-          top: 0,
-          left: 0,
-          bottom: 0,
-          height: "100%",
-          ...!isImagePositionLeft && {
-            left: "inherit",
-            right: 0
-          }
-        },
-        [`& img, & video`]: {
-          [`@container (min-width: ${BREAK_MEDIUM}px)`]: {
-            ...includesAnimation && {
-              ...styles.withViewTimelineAnimation({
-                animation: `pathway-hero-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`
-              })
-            }
-          }
-        }
-      }
-    }
-  });
+  return builder.build();
 };
 const createHeadline = (props) => {
-  const { headline: headline$1 } = props;
-  const characterCount = headline$1?.textContent?.trim().length || 0;
+  const { headline } = props;
+  const characterCount = headline?.textContent?.trim().length || 0;
   const isOverwriteHeadline = characterCount > 30;
-  if (!headline$1) return null;
-  const desktopStyles = {
-    [`@container (${token__namespace.media.queries.desktop.min})`]: {
-      ...isOverwriteHeadline && {
-        fontSize: "80px"
-      }
-    }
-  };
-  const elementStyles = {
+  if (!headline) return null;
+  return new webBuilderLibrary.ElementBuilder(headline).styled(Styles__namespace.typography.campaign.fonts.extraLarge).withStyles({
     element: {
       color: token__namespace.color.black,
       margin: "0 auto",
       textTransform: "uppercase",
       marginTop: `${token__namespace.spacing.sm}`,
-      ...desktopStyles
+      [`@container (${token__namespace.media.queries.desktop.min})`]: {
+        ...isOverwriteHeadline && {
+          fontSize: "80px"
+        }
+      },
+      ["& a:hover, & a:focus"]: {
+        textDecoration: "underline"
+      }
     },
     siblingAfter: {
       marginTop: `${token__namespace.spacing.md}`
     }
-  };
-  return headline.campaignExtraLarge({
-    element: headline$1,
-    elementStyles
-  });
+  }).build();
 };
 const createTextColumn = (props) => {
-  const { headline: headline2, eyebrow, text, ...rest } = props;
+  const { headline, eyebrow, text, ...rest } = props;
   return large({
     ...rest,
     ribbon: eyebrow,
     textLargest: text,
-    headlineComposite: createHeadline({ headline: headline2 }),
+    headlineComposite: createHeadline({ headline }),
     additionalStyles: {
       maxWidth: "720px"
     }
   });
 };
-const createTextWrapper = (props) => index.createDiv({
-  className: "pathway-hero-container-lock-wrapper",
-  children: [createTextColumn(props)],
-  elementStyles: {
-    element: {
-      width: "100%",
-      [`@container  (max-width: ${BREAK_SMALL}px)`]: {
-        padding: `${token__namespace.spacing.md} 0`
+const createTextWrapper = (props) => new webBuilderLibrary.ElementBuilder().withClassName("pathway-hero-container-lock-wrapper").withChild(createTextColumn(props)).withStyles({
+  element: {
+    width: "100%",
+    [`@container  (max-width: ${BREAK_SMALL}px)`]: {
+      padding: `${token__namespace.spacing.md} 0`
+    },
+    [`@container  (min-width: ${BREAK_MEDIUM}px)`]: {
+      padding: `${token__namespace.spacing["4xl"]} 0`,
+      ...props.isImagePositionLeft && {
+        paddingRight: 0
       },
-      [`@container  (min-width: ${BREAK_MEDIUM}px)`]: {
-        padding: `${token__namespace.spacing["4xl"]} 0`,
-        ...props.isImagePositionLeft && {
-          paddingRight: 0
-        },
-        ...!props.isImagePositionLeft && {
-          paddingLeft: 0
-        },
-        ...props.includesAnimation && {
-          ...styles.withViewTimelineAnimation({
-            animation: `pathway-hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`
-          })
-        }
+      ...!props.isImagePositionLeft && {
+        paddingLeft: 0
       },
-      [`@container  (min-width: ${BREAK_LARGE}px)`]: {
-        padding: `${token__namespace.spacing["8xl"]} 0`
+      ...props.includesAnimation && {
+        ...styles.withViewTimelineAnimation({
+          animation: `pathway-hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`
+        })
       }
+    },
+    [`@container  (min-width: ${BREAK_LARGE}px)`]: {
+      padding: `${token__namespace.spacing["8xl"]} 0`
     }
   }
-});
-const createLockColumn = (props) => layout.spaceHorizontalLarger({
-  element: document.createElement("div"),
-  children: [createTextWrapper(props)],
-  elementStyles: {
-    element: {
-      position: "relative",
-      [`@container (min-width: ${BREAK_MEDIUM}px)`]: {
-        display: "flex",
-        alignItems: "center",
-        minHeight: "720px",
-        ...props.isImagePositionLeft && {
-          paddingRight: token__namespace.spacing["2xl"]
-        },
-        ...!props.isImagePositionLeft && {
-          paddingLeft: token__namespace.spacing["2xl"],
-          order: 1
-        }
+}).build();
+const createLockColumn = (props) => new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.space.horizontal.larger).withChild(createTextWrapper(props)).withStyles({
+  element: {
+    position: "relative",
+    [`@container (min-width: ${BREAK_MEDIUM}px)`]: {
+      display: "flex",
+      alignItems: "center",
+      minHeight: "720px",
+      ...props.isImagePositionLeft && {
+        paddingRight: token__namespace.spacing["2xl"]
       },
-      [`@container (min-width: ${BREAK_LARGE}px)`]: {
-        ...!props.isImagePositionLeft && {
-          paddingRight: token__namespace.spacing["4xl"]
-        },
-        ...props.isImagePositionLeft && {
-          paddingLeft: token__namespace.spacing["4xl"]
-        }
+      ...!props.isImagePositionLeft && {
+        paddingLeft: token__namespace.spacing["2xl"],
+        order: 1
+      }
+    },
+    [`@container (min-width: ${BREAK_LARGE}px)`]: {
+      ...!props.isImagePositionLeft && {
+        paddingRight: token__namespace.spacing["4xl"]
+      },
+      ...props.isImagePositionLeft && {
+        paddingLeft: token__namespace.spacing["4xl"]
       }
     }
   }
-});
+}).build();
 const createWrapper = (props) => {
   const { isImagePositionLeft = false } = props;
   const imageColumn = createAssetColumn(props);
-  const children = [];
-  if (imageColumn) {
-    children.push(imageColumn);
-  }
-  children.push(createLockColumn(props));
-  return index.createDiv({
-    className: "pathway-hero-container-wrapper",
-    elementStyles: {
-      element: {
-        position: "relative",
-        ...isImagePositionLeft && {
-          [`@container (min-width: ${BREAK_MEDIUM}px)`]: {
-            paddingLeft: "50%"
-          }
-        },
-        ...!isImagePositionLeft && {
-          [`@container (min-width: ${BREAK_MEDIUM}px)`]: {
-            paddingRight: "50%"
-          }
+  const builder = new webBuilderLibrary.ElementBuilder().withClassName("pathway-hero-container-wrapper").withStyles({
+    element: {
+      position: "relative",
+      ...isImagePositionLeft && {
+        [`@container (min-width: ${BREAK_MEDIUM}px)`]: {
+          paddingLeft: "50%"
+        }
+      },
+      ...!isImagePositionLeft && {
+        [`@container (min-width: ${BREAK_MEDIUM}px)`]: {
+          paddingRight: "50%"
         }
       }
-    },
-    children
+    }
   });
+  if (imageColumn) {
+    builder.withChild(imageColumn);
+  }
+  builder.withChild(createLockColumn(props));
+  return builder.build();
 };
 const hero = (props) => {
-  const composite = index.createDiv({
-    className: "pathway-hero-container",
-    children: [createWrapper(props)],
-    elementStyles: {
-      element: {
-        containerType: "inline-size",
-        position: "relative"
-      }
+  const composite = new webBuilderLibrary.ElementBuilder().withClassName("pathway-hero-container").withChild(createWrapper(props)).withStyles({
+    element: {
+      containerType: "inline-size",
+      position: "relative"
     }
-  });
+  }).build();
   composite.styles += keyFramePathwayResize;
   composite.styles += keyFramePathwaySlideUp;
   return composite;

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

@@ -1 +1 @@
-{"version":3,"file":"hero.js","sources":["../../../source/composite/pathway/hero.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { assets, textLockup } from 'atomic';\nimport { type ElementVisual } from '../../_types';\n\ninterface PathwayHeroProps {\n  actions: HTMLElement | null;\n  eyebrow: HTMLElement | null;\n  headline: HTMLElement | null;\n  image: HTMLImageElement | null;\n  includesAnimation?: boolean;\n  isImagePositionLeft?: boolean;\n  isThemeDark?: boolean;\n  text: HTMLElement | null;\n  video: HTMLVideoElement | null;\n}\n\n// Constants\nconst BREAK_SMALL = 999;\nconst BREAK_MEDIUM = 1000;\nconst BREAK_LARGE = 1300;\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\n// Keyframe animations\nconst keyFramePathwayResize = `\n  @keyframes pathway-hero-resize {\n    from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n    to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n  }\n`;\n\nconst keyFramePathwaySlideUp = `\n  @keyframes pathway-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 createAssetColumn = ({\n  image,\n  video,\n  includesAnimation,\n  isImagePositionLeft,\n}: Pick<\n  PathwayHeroProps,\n  'image' | 'video' | 'includesAnimation' | 'isImagePositionLeft'\n>) => {\n  const children: ElementVisual[] = [];\n\n  if (!image && !video) return;\n\n  if (video) {\n    children.push(\n      assets.video.observedAutoPlay({\n        video,\n        isScaled: true,\n        additionalElementStyles: {\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n        },\n      }),\n    );\n  }\n\n  if (image && !video) {\n    children.push(\n      assets.image.background({\n        element: image,\n        isScaled: true,\n        isShowCaption: true,\n        isGifAllowed: true,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'pathway-hero-container-asset-wrapper',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        position: 'relative',\n\n        [`@container (max-width: ${BREAK_SMALL}px)`]: {\n          aspectRatio: '16 / 9',\n        },\n\n        [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n          width: '50%',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          bottom: 0,\n          height: '100%',\n\n          ...(!isImagePositionLeft && {\n            left: 'inherit',\n            right: 0,\n          }),\n        },\n\n        [`& img, & video`]: {\n          [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n            ...(includesAnimation && {\n              ...withViewTimelineAnimation({\n                animation: `pathway-hero-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n              }),\n            }),\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createHeadline = (props: Pick<PathwayHeroProps, '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 elementStyles = {\n    element: {\n      color: token.color.black,\n      margin: '0 auto',\n      textTransform: 'uppercase',\n      marginTop: `${token.spacing.sm}`,\n      ...desktopStyles,\n    },\n    siblingAfter: {\n      marginTop: `${token.spacing.md}`,\n    },\n  };\n\n  return ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles,\n  });\n};\n\nconst createTextColumn = (\n  props: Pick<\n    PathwayHeroProps,\n    'actions' | 'eyebrow' | 'headline' | 'isThemeDark' | 'text'\n  >,\n) => {\n  const { headline, eyebrow, text, ...rest } = props;\n\n  return textLockup.large({\n    ...rest,\n    ribbon: eyebrow,\n    textLargest: text,\n    headlineComposite: createHeadline({ headline }),\n    additionalStyles: {\n      maxWidth: '720px',\n    },\n  });\n};\n\nconst createTextWrapper = (props: PathwayHeroProps) =>\n  ElementModel.createDiv({\n    className: 'pathway-hero-container-lock-wrapper',\n    children: [createTextColumn(props)],\n    elementStyles: {\n      element: {\n        width: '100%',\n\n        [`@container  (max-width: ${BREAK_SMALL}px)`]: {\n          padding: `${token.spacing.md} 0`,\n        },\n\n        [`@container  (min-width: ${BREAK_MEDIUM}px)`]: {\n          padding: `${token.spacing['4xl']} 0`,\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: 0,\n          }),\n\n          ...(!props.isImagePositionLeft && {\n            paddingLeft: 0,\n          }),\n\n          ...(props.includesAnimation && {\n            ...withViewTimelineAnimation({\n              animation: `pathway-hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n            }),\n          }),\n        },\n\n        [`@container  (min-width: ${BREAK_LARGE}px)`]: {\n          padding: `${token.spacing['8xl']} 0`,\n        },\n      },\n    },\n  });\n\nconst createLockColumn = (props: PathwayHeroProps) =>\n  ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [createTextWrapper(props)],\n    elementStyles: {\n      element: {\n        position: 'relative',\n\n        [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n          minHeight: '720px',\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: token.spacing['2xl'],\n          }),\n\n          ...(!props.isImagePositionLeft && {\n            paddingLeft: token.spacing['2xl'],\n            order: 1,\n          }),\n        },\n\n        [`@container (min-width: ${BREAK_LARGE}px)`]: {\n          ...(!props.isImagePositionLeft && {\n            paddingRight: token.spacing['4xl'],\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingLeft: token.spacing['4xl'],\n          }),\n        },\n      },\n    },\n  });\n\nconst createWrapper = (props: PathwayHeroProps) => {\n  const { isImagePositionLeft = false } = props;\n  const imageColumn = createAssetColumn(props);\n  const children: ElementVisual[] = [];\n\n  if (imageColumn) {\n    children.push(imageColumn);\n  }\n\n  children.push(createLockColumn(props));\n\n  return ElementModel.createDiv({\n    className: 'pathway-hero-container-wrapper',\n    elementStyles: {\n      element: {\n        position: 'relative',\n\n        ...(isImagePositionLeft && {\n          [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n            paddingLeft: '50%',\n          },\n        }),\n\n        ...(!isImagePositionLeft && {\n          [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n            paddingRight: '50%',\n          },\n        }),\n      },\n    },\n    children,\n  });\n};\n\nexport default (props: PathwayHeroProps) => {\n  const composite = ElementModel.createDiv({\n    className: 'pathway-hero-container',\n    children: [createWrapper(props)],\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        position: 'relative',\n      },\n    },\n  });\n\n  composite.styles += keyFramePathwayResize;\n  composite.styles += keyFramePathwaySlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","ElementModel.createDiv","withViewTimelineAnimation","headline","token","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
+{"version":3,"file":"hero.js","sources":["../../../source/composite/pathway/hero.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\n\ninterface PathwayHeroProps {\n  actions: HTMLElement | null;\n  eyebrow: HTMLElement | null;\n  headline: HTMLElement | null;\n  image: HTMLImageElement | null;\n  includesAnimation?: boolean;\n  isImagePositionLeft?: boolean;\n  isThemeDark?: boolean;\n  text: HTMLElement | null;\n  video: HTMLVideoElement | null;\n}\n\n// Constants\nconst BREAK_SMALL = 999;\nconst BREAK_MEDIUM = 1000;\nconst BREAK_LARGE = 1300;\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\n// Keyframe animations\nconst keyFramePathwayResize = `\n  @keyframes pathway-hero-resize {\n    from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n    to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n  }\n`;\n\nconst keyFramePathwaySlideUp = `\n  @keyframes pathway-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 createAssetColumn = ({\n  image,\n  video,\n  includesAnimation,\n  isImagePositionLeft,\n}: Pick<\n  PathwayHeroProps,\n  'image' | 'video' | 'includesAnimation' | 'isImagePositionLeft'\n>) => {\n  if (!image && !video) return;\n\n  const builder = new ElementBuilder()\n    .withClassName('pathway-hero-container-asset-wrapper')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        position: 'relative',\n\n        [`@container (max-width: ${BREAK_SMALL}px)`]: {\n          aspectRatio: '16 / 9',\n        },\n\n        [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n          width: '50%',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          bottom: 0,\n          height: '100%',\n\n          ...(!isImagePositionLeft && {\n            left: 'inherit',\n            right: 0,\n          }),\n        },\n\n        [`& img, & video`]: {\n          [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n            ...(includesAnimation && {\n              ...withViewTimelineAnimation({\n                animation: `pathway-hero-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n              }),\n            }),\n          },\n        },\n      },\n    });\n\n  if (video) {\n    builder.withChild(\n      assets.video.observedAutoPlay({\n        video,\n        isScaled: true,\n        additionalElementStyles: {\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n        },\n      }),\n    );\n  }\n\n  if (image && !video) {\n    builder.withChild(\n      assets.image.background({\n        element: image,\n        isScaled: true,\n        isShowCaption: true,\n        isGifAllowed: true,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n\nconst createHeadline = (props: Pick<PathwayHeroProps, '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  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.extraLarge)\n    .withStyles({\n      element: {\n        color: token.color.black,\n        margin: '0 auto',\n        textTransform: 'uppercase',\n        marginTop: `${token.spacing.sm}`,\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '80px',\n          }),\n        },\n\n        ['& a:hover, & a:focus']: {\n          textDecoration: 'underline',\n        },\n      },\n      siblingAfter: {\n        marginTop: `${token.spacing.md}`,\n      },\n    })\n    .build();\n};\n\nconst createTextColumn = (\n  props: Pick<\n    PathwayHeroProps,\n    'actions' | 'eyebrow' | 'headline' | 'isThemeDark' | 'text'\n  >,\n) => {\n  const { headline, eyebrow, text, ...rest } = props;\n\n  return textLockup.large({\n    ...rest,\n    ribbon: eyebrow,\n    textLargest: text,\n    headlineComposite: createHeadline({ headline }),\n    additionalStyles: {\n      maxWidth: '720px',\n    },\n  });\n};\n\nconst createTextWrapper = (props: PathwayHeroProps) =>\n  new ElementBuilder()\n    .withClassName('pathway-hero-container-lock-wrapper')\n    .withChild(createTextColumn(props))\n    .withStyles({\n      element: {\n        width: '100%',\n\n        [`@container  (max-width: ${BREAK_SMALL}px)`]: {\n          padding: `${token.spacing.md} 0`,\n        },\n\n        [`@container  (min-width: ${BREAK_MEDIUM}px)`]: {\n          padding: `${token.spacing['4xl']} 0`,\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: 0,\n          }),\n\n          ...(!props.isImagePositionLeft && {\n            paddingLeft: 0,\n          }),\n\n          ...(props.includesAnimation && {\n            ...withViewTimelineAnimation({\n              animation: `pathway-hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n            }),\n          }),\n        },\n\n        [`@container  (min-width: ${BREAK_LARGE}px)`]: {\n          padding: `${token.spacing['8xl']} 0`,\n        },\n      },\n    })\n    .build();\n\nconst createLockColumn = (props: PathwayHeroProps) =>\n  new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(createTextWrapper(props))\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n          minHeight: '720px',\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: token.spacing['2xl'],\n          }),\n\n          ...(!props.isImagePositionLeft && {\n            paddingLeft: token.spacing['2xl'],\n            order: 1,\n          }),\n        },\n\n        [`@container (min-width: ${BREAK_LARGE}px)`]: {\n          ...(!props.isImagePositionLeft && {\n            paddingRight: token.spacing['4xl'],\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingLeft: token.spacing['4xl'],\n          }),\n        },\n      },\n    })\n    .build();\n\nconst createWrapper = (props: PathwayHeroProps) => {\n  const { isImagePositionLeft = false } = props;\n  const imageColumn = createAssetColumn(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('pathway-hero-container-wrapper')\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        ...(isImagePositionLeft && {\n          [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n            paddingLeft: '50%',\n          },\n        }),\n\n        ...(!isImagePositionLeft && {\n          [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n            paddingRight: '50%',\n          },\n        }),\n      },\n    });\n\n  if (imageColumn) {\n    builder.withChild(imageColumn);\n  }\n\n  builder.withChild(createLockColumn(props));\n\n  return builder.build();\n};\n\nexport default (props: PathwayHeroProps) => {\n  const composite = new ElementBuilder()\n    .withClassName('pathway-hero-container')\n    .withChild(createWrapper(props))\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        position: 'relative',\n      },\n    })\n    .build();\n\n  composite.styles += keyFramePathwayResize;\n  composite.styles += keyFramePathwaySlideUp;\n\n  return composite;\n};\n"],"names":["ElementBuilder","withViewTimelineAnimation","assets.video.observedAutoPlay","assets.image.background","Styles","token","textLockup.large"],"mappings":"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"}