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

package/dist/composite/pathway/hero.js

@@ -1,53 +1,34 @@
-"use strict";
-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");
-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");
-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 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 { withViewTimelineAnimation } from "@universityofmaryland/web-utilities-library/styles";
+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 { 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 BREAK_SMALL = 999;
 const BREAK_MEDIUM = 1e3;
 const BREAK_LARGE = 1300;
@@ -96,7 +77,7 @@ const createAssetColumn = ({
   isImagePositionLeft
 }) => {
   if (!image && !video) return;
-  const builder = new webBuilderLibrary.ElementBuilder().withClassName("pathway-hero-container-asset-wrapper").withStyles({
+  const builder = new ElementBuilder().withClassName("pathway-hero-container-asset-wrapper").withStyles({
     element: {
       overflow: "hidden",
       position: "relative",
@@ -118,7 +99,7 @@ const createAssetColumn = ({
       [`& img, & video`]: {
         [`@container (min-width: ${BREAK_MEDIUM}px)`]: {
           ...includesAnimation && {
-            ...styles.withViewTimelineAnimation({
+            ...withViewTimelineAnimation({
               animation: `pathway-hero-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`
             })
           }
@@ -128,7 +109,7 @@ const createAssetColumn = ({
   });
   if (video) {
     builder.withChild(
-      observedAutoPlay({
+      createVideoObservedAutoPlay({
         video,
         isScaled: true,
         additionalElementStyles: {
@@ -141,7 +122,7 @@ const createAssetColumn = ({
   }
   if (image && !video) {
     builder.withChild(
-      background({
+      createImageBackground({
         element: image,
         isScaled: true,
         isShowCaption: true,
@@ -156,13 +137,13 @@ 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: {
-      color: token__namespace.color.black,
+      color: token.color.black,
       margin: "0 auto",
       textTransform: "uppercase",
-      marginTop: `${token__namespace.spacing.sm}`,
-      [`@container (${token__namespace.media.queries.desktop.min})`]: {
+      marginTop: `${token.spacing.sm}`,
+      [`@container (${token.media.queries.desktop.min})`]: {
         ...isOverwriteHeadline && {
           fontSize: "80px"
         }
@@ -172,13 +153,13 @@ const createHeadline = (props) => {
       }
     },
     siblingAfter: {
-      marginTop: `${token__namespace.spacing.md}`
+      marginTop: `${token.spacing.md}`
     }
   }).build();
 };
 const createTextColumn = (props) => {
   const { headline, eyebrow, text, ...rest } = props;
-  return large({
+  return createTextLockupLarge({
     ...rest,
     ribbon: eyebrow,
     textLargest: text,
@@ -188,14 +169,14 @@ const createTextColumn = (props) => {
     }
   });
 };
-const createTextWrapper = (props) => new webBuilderLibrary.ElementBuilder().withClassName("pathway-hero-container-lock-wrapper").withChild(createTextColumn(props)).withStyles({
+const createTextWrapper = (props) => new 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`
+      padding: `${token.spacing.md} 0`
     },
     [`@container  (min-width: ${BREAK_MEDIUM}px)`]: {
-      padding: `${token__namespace.spacing["4xl"]} 0`,
+      padding: `${token.spacing["4xl"]} 0`,
       ...props.isImagePositionLeft && {
         paddingRight: 0
       },
@@ -203,17 +184,17 @@ const createTextWrapper = (props) => new webBuilderLibrary.ElementBuilder().with
         paddingLeft: 0
       },
       ...props.includesAnimation && {
-        ...styles.withViewTimelineAnimation({
+        ...withViewTimelineAnimation({
           animation: `pathway-hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`
         })
       }
     },
     [`@container  (min-width: ${BREAK_LARGE}px)`]: {
-      padding: `${token__namespace.spacing["8xl"]} 0`
+      padding: `${token.spacing["8xl"]} 0`
     }
   }
 }).build();
-const createLockColumn = (props) => new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.space.horizontal.larger).withChild(createTextWrapper(props)).withStyles({
+const createLockColumn = (props) => new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(createTextWrapper(props)).withStyles({
   element: {
     position: "relative",
     [`@container (min-width: ${BREAK_MEDIUM}px)`]: {
@@ -221,19 +202,19 @@ const createLockColumn = (props) => new webBuilderLibrary.ElementBuilder().style
       alignItems: "center",
       minHeight: "720px",
       ...props.isImagePositionLeft && {
-        paddingRight: token__namespace.spacing["2xl"]
+        paddingRight: token.spacing["2xl"]
       },
       ...!props.isImagePositionLeft && {
-        paddingLeft: token__namespace.spacing["2xl"],
+        paddingLeft: token.spacing["2xl"],
         order: 1
       }
     },
     [`@container (min-width: ${BREAK_LARGE}px)`]: {
       ...!props.isImagePositionLeft && {
-        paddingRight: token__namespace.spacing["4xl"]
+        paddingRight: token.spacing["4xl"]
       },
       ...props.isImagePositionLeft && {
-        paddingLeft: token__namespace.spacing["4xl"]
+        paddingLeft: token.spacing["4xl"]
       }
     }
   }
@@ -241,7 +222,7 @@ const createLockColumn = (props) => new webBuilderLibrary.ElementBuilder().style
 const createWrapper = (props) => {
   const { isImagePositionLeft = false } = props;
   const imageColumn = createAssetColumn(props);
-  const builder = new webBuilderLibrary.ElementBuilder().withClassName("pathway-hero-container-wrapper").withStyles({
+  const builder = new ElementBuilder().withClassName("pathway-hero-container-wrapper").withStyles({
     element: {
       position: "relative",
       ...isImagePositionLeft && {
@@ -262,8 +243,8 @@ const createWrapper = (props) => {
   builder.withChild(createLockColumn(props));
   return builder.build();
 };
-const hero = (props) => {
-  const composite = new webBuilderLibrary.ElementBuilder().withClassName("pathway-hero-container").withChild(createWrapper(props)).withStyles({
+const CreatePathwayHeroElement = (props) => {
+  const composite = new ElementBuilder().withClassName("pathway-hero-container").withChild(createWrapper(props)).withStyles({
     element: {
       containerType: "inline-size",
       position: "relative"
@@ -273,5 +254,8 @@ const hero = (props) => {
   composite.styles += keyFramePathwaySlideUp;
   return composite;
 };
-module.exports = hero;
+const createCompositePathwayHero = CreatePathwayHeroElement;
+export {
+  createCompositePathwayHero
+};
 //# sourceMappingURL=hero.js.map

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

@@ -1 +1 @@
-{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,cAAc;AACpB,MAAM,eAAe;AACrB,MAAM,cAAc;AAEpB,MAAM,mBAAmB;AAAA,EACvB,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,WAAW;AAAA,MACT,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,UAAU;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,MACT,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,IAEN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EACN;AAEJ;AAGA,MAAM,wBAAwB;AAAA;AAAA,wBAEN,iBAAiB,OAAO,UAAU,IAAI;AAAA,sBACxC,iBAAiB,OAAO,UAAU,EAAE;AAAA;AAAA;AAI1D,MAAM,yBAAyB;AAAA;AAAA;AAAA,mBAGZ,iBAAiB,SAAS,UAAU,IAAI;AAAA,iBAC1C,iBAAiB,SAAS,QAAQ,IAAI;AAAA;AAAA;AAAA,mBAGpC,iBAAiB,SAAS,UAAU,EAAE;AAAA,iBACxC,iBAAiB,SAAS,QAAQ,EAAE;AAAA;AAAA;AAAA;AAKrD,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAGM;AACJ,MAAI,CAAC,SAAS,CAAC,MAAO;AAEtB,QAAM,UAAU,IAAIA,kBAAAA,eAAA,EACjB,cAAc,sCAAsC,EACpD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,UAAU;AAAA,MAEV,CAAC,0BAA0B,WAAW,KAAK,GAAG;AAAA,QAC5C,aAAa;AAAA,MAAA;AAAA,MAGf,CAAC,0BAA0B,YAAY,KAAK,GAAG;AAAA,QAC7C,OAAO;AAAA,QACP,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,QAER,GAAI,CAAC,uBAAuB;AAAA,UAC1B,MAAM;AAAA,UACN,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAGF,CAAC,gBAAgB,GAAG;AAAA,QAClB,CAAC,0BAA0B,YAAY,KAAK,GAAG;AAAA,UAC7C,GAAI,qBAAqB;AAAA,YACvB,GAAGC,iCAA0B;AAAA,cAC3B,WAAW,gCAAgC,iBAAiB,OAAO,QAAQ;AAAA,YAAA,CAC5E;AAAA,UAAA;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAEH,MAAI,OAAO;AACT,YAAQ;AAAA,MACNC,iBAA8B;AAAA,QAC5B;AAAA,QACA,UAAU;AAAA,QACV,yBAAyB;AAAA,UACvB,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,QAAA;AAAA,MACd,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS,CAAC,OAAO;AACnB,YAAQ;AAAA,MACNC,WAAwB;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAe;AAAA,QACf,cAAc;AAAA,MAAA,CACf;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEA,MAAM,iBAAiB,CAAC,UAA8C;AACpE,QAAM,EAAE,aAAa;AACrB,QAAM,iBAAiB,UAAU,aAAa,KAAA,EAAO,UAAU;AAC/D,QAAM,sBAAsB,iBAAiB;AAE7C,MAAI,CAAC,SAAU,QAAO;AAEtB,SAAO,IAAIH,kBAAAA,eAAe,QAAQ,EAC/B,OAAOI,kBAAO,WAAW,SAAS,MAAM,UAAU,EAClD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,OAAOC,iBAAM,MAAM;AAAA,MACnB,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,WAAW,GAAGA,iBAAM,QAAQ,EAAE;AAAA,MAE9B,CAAC,eAAeA,iBAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QACnD,GAAI,uBAAuB;AAAA,UACzB,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,MAGF,CAAC,sBAAsB,GAAG;AAAA,QACxB,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,IAEF,cAAc;AAAA,MACZ,WAAW,GAAGA,iBAAM,QAAQ,EAAE;AAAA,IAAA;AAAA,EAChC,CACD,EACA,MAAA;AACL;AAEA,MAAM,mBAAmB,CACvB,UAIG;AACH,QAAM,EAAE,UAAU,SAAS,MAAM,GAAG,SAAS;AAE7C,SAAOC,MAAiB;AAAA,IACtB,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,mBAAmB,eAAe,EAAE,UAAU;AAAA,IAC9C,kBAAkB;AAAA,MAChB,UAAU;AAAA,IAAA;AAAA,EACZ,CACD;AACH;AAEA,MAAM,oBAAoB,CAAC,UACzB,IAAIN,kBAAAA,iBACD,cAAc,qCAAqC,EACnD,UAAU,iBAAiB,KAAK,CAAC,EACjC,WAAW;AAAA,EACV,SAAS;AAAA,IACP,OAAO;AAAA,IAEP,CAAC,2BAA2B,WAAW,KAAK,GAAG;AAAA,MAC7C,SAAS,GAAGK,iBAAM,QAAQ,EAAE;AAAA,IAAA;AAAA,IAG9B,CAAC,2BAA2B,YAAY,KAAK,GAAG;AAAA,MAC9C,SAAS,GAAGA,iBAAM,QAAQ,KAAK,CAAC;AAAA,MAEhC,GAAI,MAAM,uBAAuB;AAAA,QAC/B,cAAc;AAAA,MAAA;AAAA,MAGhB,GAAI,CAAC,MAAM,uBAAuB;AAAA,QAChC,aAAa;AAAA,MAAA;AAAA,MAGf,GAAI,MAAM,qBAAqB;AAAA,QAC7B,GAAGJ,iCAA0B;AAAA,UAC3B,WAAW,kCAAkC,iBAAiB,SAAS,QAAQ;AAAA,QAAA,CAChF;AAAA,MAAA;AAAA,IACH;AAAA,IAGF,CAAC,2BAA2B,WAAW,KAAK,GAAG;AAAA,MAC7C,SAAS,GAAGI,iBAAM,QAAQ,KAAK,CAAC;AAAA,IAAA;AAAA,EAClC;AAEJ,CAAC,EACA,MAAA;AAEL,MAAM,mBAAmB,CAAC,UACxB,IAAIL,kBAAAA,eAAA,EACD,OAAOI,kBAAO,OAAO,MAAM,WAAW,MAAM,EAC5C,UAAU,kBAAkB,KAAK,CAAC,EAClC,WAAW;AAAA,EACV,SAAS;AAAA,IACP,UAAU;AAAA,IAEV,CAAC,0BAA0B,YAAY,KAAK,GAAG;AAAA,MAC7C,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MAEX,GAAI,MAAM,uBAAuB;AAAA,QAC/B,cAAcC,iBAAM,QAAQ,KAAK;AAAA,MAAA;AAAA,MAGnC,GAAI,CAAC,MAAM,uBAAuB;AAAA,QAChC,aAAaA,iBAAM,QAAQ,KAAK;AAAA,QAChC,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAGF,CAAC,0BAA0B,WAAW,KAAK,GAAG;AAAA,MAC5C,GAAI,CAAC,MAAM,uBAAuB;AAAA,QAChC,cAAcA,iBAAM,QAAQ,KAAK;AAAA,MAAA;AAAA,MAGnC,GAAI,MAAM,uBAAuB;AAAA,QAC/B,aAAaA,iBAAM,QAAQ,KAAK;AAAA,MAAA;AAAA,IAClC;AAAA,EACF;AAEJ,CAAC,EACA,MAAA;AAEL,MAAM,gBAAgB,CAAC,UAA4B;AACjD,QAAM,EAAE,sBAAsB,MAAA,IAAU;AACxC,QAAM,cAAc,kBAAkB,KAAK;AAE3C,QAAM,UAAU,IAAIL,kBAAAA,eAAA,EACjB,cAAc,gCAAgC,EAC9C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MAEV,GAAI,uBAAuB;AAAA,QACzB,CAAC,0BAA0B,YAAY,KAAK,GAAG;AAAA,UAC7C,aAAa;AAAA,QAAA;AAAA,MACf;AAAA,MAGF,GAAI,CAAC,uBAAuB;AAAA,QAC1B,CAAC,0BAA0B,YAAY,KAAK,GAAG;AAAA,UAC7C,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IACF;AAAA,EACF,CACD;AAEH,MAAI,aAAa;AACf,YAAQ,UAAU,WAAW;AAAA,EAC/B;AAEA,UAAQ,UAAU,iBAAiB,KAAK,CAAC;AAEzC,SAAO,QAAQ,MAAA;AACjB;AAEA,MAAA,OAAe,CAAC,UAA4B;AAC1C,QAAM,YAAY,IAAIA,iCAAA,EACnB,cAAc,wBAAwB,EACtC,UAAU,cAAc,KAAK,CAAC,EAC9B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,MACf,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,MAAA;AAEH,YAAU,UAAU;AACpB,YAAU,UAAU;AAEpB,SAAO;AACT;;"}
+{"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\nconst CreatePathwayHeroElement = (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\nexport const createCompositePathwayHero = CreatePathwayHeroElement;\n"],"names":["assets.video.observedAutoPlay","assets.image.background","textLockup.large"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/highlight.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;yBAiLjC,OAAO,qBAAqB;AAA5C,wBASa"}
+{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/highlight.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAgMjD,eAAO,MAAM,+BAA+B,UAXE,qBAAqB,kFAWS,CAAC"}

package/dist/composite/pathway/highlight.js

@@ -1,56 +1,37 @@
-"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");
-const _common = require("./_common.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 { createTextLockupMedium } from "./_common.js";
 const mediumSize = 1e3;
 const largeSize = 1200;
 const createTextContent = (props) => {
-  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("pathway-text-container-wrapper").withChild(_common.createTextLockupMedium(props)).withStyles({
+  const wrapper = new ElementBuilder().withClassName("pathway-text-container-wrapper").withChild(createTextLockupMedium(props)).withStyles({
     element: {
       width: "100%",
       position: "relative"
     }
   }).build();
-  const container = new webBuilderLibrary.ElementBuilder().withClassName("pathway-text-container").withChild(wrapper).withStyles({
+  const container = new ElementBuilder().withClassName("pathway-text-container").withChild(wrapper).withStyles({
     element: {
       container: "inline-size",
       display: "flex",
       alignItems: "center",
       zIndex: "99",
       ...props.isThemeDark && {
-        backgroundColor: token__namespace.color.black
+        backgroundColor: token.color.black
       },
       ...props.isThemeMaryland && {
-        backgroundColor: token__namespace.color.red
+        backgroundColor: token.color.red
       },
       [`@container (max-width: ${mediumSize - 1}px)`]: {
-        paddingBottom: token__namespace.spacing.md
+        paddingBottom: token.spacing.md
       },
       [`@container (min-width: ${mediumSize}px)`]: {
-        paddingRight: token__namespace.spacing["4xl"]
+        paddingRight: token.spacing["4xl"]
       },
       [`@container (min-width: ${largeSize}px)`]: {
-        paddingRight: token__namespace.spacing["6xl"]
+        paddingRight: token.spacing["6xl"]
       }
     }
   }).build();
@@ -61,19 +42,19 @@ const createHighlightColumn = ({
   attribution,
   isThemeDark
 }) => {
-  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("pathway-highlight-column-wrapper").withStyles({
+  const wrapper = new ElementBuilder().withClassName("pathway-highlight-column-wrapper").withStyles({
     element: {
       [`@container (min-width: ${mediumSize}px)`]: {
-        paddingLeft: token__namespace.spacing["xl"],
+        paddingLeft: token.spacing["xl"],
         position: "relative"
       },
       "&:before": {
         content: "''",
         position: "absolute",
-        backgroundColor: token__namespace.color.red,
+        backgroundColor: token.color.red,
         [`@container (max-width: ${mediumSize - 1}px)`]: {
-          top: token__namespace.spacing["2xl"],
-          width: token__namespace.spacing["5xl"],
+          top: token.spacing["2xl"],
+          width: token.spacing["5xl"],
           height: "2px"
         },
         [`@container (min-width: ${mediumSize}px)`]: {
@@ -86,44 +67,47 @@ const createHighlightColumn = ({
   });
   if (quote) {
     wrapper.withChild(
-      new webBuilderLibrary.ElementBuilder(quote).styled(
-        Styles__namespace.typography.sans.compose("larger", {
-          theme: theme.theme.fontColor(isThemeDark)
+      new ElementBuilder(quote).styled(
+        Styles.typography.sans.compose("larger", {
+          theme: theme.fontColor(isThemeDark)
         })
       ).withStyles({
         element: {
-          fontWeight: "700"
+          fontWeight: "700",
+          ["& *"]: {
+            color: "currentColor"
+          }
         }
       }).build()
     );
   }
   if (attribution) {
     wrapper.withChild(
-      new webBuilderLibrary.ElementBuilder(attribution).styled(
-        Styles__namespace.typography.sans.compose("medium", {
-          theme: theme.theme.fontColor(isThemeDark)
+      new ElementBuilder(attribution).styled(
+        Styles.typography.sans.compose("medium", {
+          theme: theme.fontColor(isThemeDark)
         })
       ).withStyles({
         element: {
-          marginTop: token__namespace.spacing.sm
+          marginTop: token.spacing.sm
         }
       }).build()
     );
   }
   const wrapperBuilt = wrapper.build();
-  return new webBuilderLibrary.ElementBuilder().withClassName("pathway-highlight-column-container").withChild(wrapperBuilt).withStyles({
+  return new ElementBuilder().withClassName("pathway-highlight-column-container").withChild(wrapperBuilt).withStyles({
     element: {
-      backgroundColor: token__namespace.color.gray.lightest,
+      backgroundColor: token.color.gray.lightest,
       position: "relative",
-      padding: `${token__namespace.spacing["5xl"]} ${token__namespace.spacing.md} ${token__namespace.spacing.md} ${token__namespace.spacing.md}`,
+      padding: `${token.spacing["5xl"]} ${token.spacing.md} ${token.spacing.md} ${token.spacing.md}`,
       [`@container (min-width: ${mediumSize}px)`]: {
-        padding: `${token__namespace.spacing["4xl"]} ${token__namespace.spacing["2xl"]}`
+        padding: `${token.spacing["4xl"]} ${token.spacing["2xl"]}`
       },
       [`@container (min-width: ${largeSize}px)`]: {
-        padding: `${token__namespace.spacing["8xl"]} ${token__namespace.spacing["xl"]}`
+        padding: `${token.spacing["8xl"]} ${token.spacing["xl"]}`
       },
       ...isThemeDark && {
-        backgroundColor: token__namespace.color.gray.darker
+        backgroundColor: token.color.gray.darker
       }
     }
   }).build();
@@ -131,7 +115,7 @@ const createHighlightColumn = ({
 const createLock = (props) => {
   const textContent = createTextContent(props);
   const highlightColumn = createHighlightColumn(props);
-  return new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.space.horizontal.larger).withChild(textContent).withChild(highlightColumn).withStyles({
+  return new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(textContent).withChild(highlightColumn).withStyles({
     element: {
       [`@container (min-width: ${mediumSize}px)`]: {
         display: "flex",
@@ -143,10 +127,13 @@ const createLock = (props) => {
     }
   }).build();
 };
-const highlight = (props) => new webBuilderLibrary.ElementBuilder().withClassName("pathway-highlight-container").withChild(createLock(props)).withStyles({
+const CreatePathwayHighlightElement = (props) => new ElementBuilder().withClassName("pathway-highlight-container").withChild(createLock(props)).withStyles({
   element: {
     container: "inline-size"
   }
 }).build();
-module.exports = highlight;
+const createCompositePathwayHighlight = CreatePathwayHighlightElement;
+export {
+  createCompositePathwayHighlight
+};
 //# sourceMappingURL=highlight.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"highlight.js","sources":["../../../source/composite/pathway/highlight.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 { createTextLockupMedium } from './_common';\nimport { PathwayHighlightProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst mediumSize = 1000;\nconst largeSize = 1200;\n\nconst createTextContent = (\n  props: PathwayHighlightProps,\n): ElementModel<HTMLElement> => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-text-container-wrapper')\n    .withChild(createTextLockupMedium(props))\n    .withStyles({\n      element: {\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('pathway-text-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        container: 'inline-size',\n        display: 'flex',\n        alignItems: 'center',\n        zIndex: '99',\n\n        ...(props.isThemeDark && {\n          backgroundColor: token.color.black,\n        }),\n\n        ...(props.isThemeMaryland && {\n          backgroundColor: token.color.red,\n        }),\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingBottom: token.spacing.md,\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          paddingRight: token.spacing['4xl'],\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          paddingRight: token.spacing['6xl'],\n        },\n      },\n    })\n    .build();\n\n  return container;\n};\n\nconst createHighlightColumn = ({\n  quote,\n  attribution,\n  isThemeDark,\n}: Pick<\n  PathwayHighlightProps,\n  'quote' | 'attribution' | 'isThemeDark'\n>): ElementModel<HTMLElement> => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-highlight-column-wrapper')\n    .withStyles({\n      element: {\n        [`@container (min-width: ${mediumSize}px)`]: {\n          paddingLeft: token.spacing['xl'],\n          position: 'relative',\n        },\n\n        '&:before': {\n          content: \"''\",\n          position: 'absolute',\n          backgroundColor: token.color.red,\n\n          [`@container (max-width: ${mediumSize - 1}px)`]: {\n            top: token.spacing['2xl'],\n            width: token.spacing['5xl'],\n            height: '2px',\n          },\n\n          [`@container (min-width: ${mediumSize}px)`]: {\n            left: '0',\n            width: '2px',\n            height: '100%',\n          },\n        },\n      },\n    });\n\n  if (quote) {\n    wrapper.withChild(\n      new ElementBuilder(quote)\n        .styled(\n          Styles.typography.sans.compose('larger', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            fontWeight: '700',\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (attribution) {\n    wrapper.withChild(\n      new ElementBuilder(attribution)\n        .styled(\n          Styles.typography.sans.compose('medium', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  const wrapperBuilt = wrapper.build();\n\n  return new ElementBuilder()\n    .withClassName('pathway-highlight-column-container')\n    .withChild(wrapperBuilt)\n    .withStyles({\n      element: {\n        backgroundColor: token.color.gray.lightest,\n        position: 'relative',\n        padding: `${token.spacing['5xl']} ${token.spacing.md} ${token.spacing.md} ${token.spacing.md}`,\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          padding: `${token.spacing['4xl']} ${token.spacing['2xl']}`,\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          padding: `${token.spacing['8xl']} ${token.spacing['xl']}`,\n        },\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.gray.darker,\n        }),\n      },\n    })\n    .build();\n};\n\nconst createLock = (props: PathwayHighlightProps) => {\n  const textContent = createTextContent(props);\n  const highlightColumn = createHighlightColumn(props);\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContent)\n    .withChild(highlightColumn)\n    .withStyles({\n      element: {\n        [`@container (min-width: ${mediumSize}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n\n          [`& > *`]: {\n            width: '50%',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nexport default (props: PathwayHighlightProps) =>\n  new ElementBuilder()\n    .withClassName('pathway-highlight-container')\n    .withChild(createLock(props))\n    .withStyles({\n      element: {\n        container: 'inline-size',\n      },\n    })\n    .build();\n"],"names":["ElementBuilder","createTextLockupMedium","token","Styles","theme"],"mappings":"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"}
+{"version":3,"file":"highlight.js","sources":["../../../source/composite/pathway/highlight.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 { createTextLockupMedium } from './_common';\nimport { PathwayHighlightProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst mediumSize = 1000;\nconst largeSize = 1200;\n\nconst createTextContent = (\n  props: PathwayHighlightProps,\n): ElementModel<HTMLElement> => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-text-container-wrapper')\n    .withChild(createTextLockupMedium(props))\n    .withStyles({\n      element: {\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('pathway-text-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        container: 'inline-size',\n        display: 'flex',\n        alignItems: 'center',\n        zIndex: '99',\n\n        ...(props.isThemeDark && {\n          backgroundColor: token.color.black,\n        }),\n\n        ...(props.isThemeMaryland && {\n          backgroundColor: token.color.red,\n        }),\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingBottom: token.spacing.md,\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          paddingRight: token.spacing['4xl'],\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          paddingRight: token.spacing['6xl'],\n        },\n      },\n    })\n    .build();\n\n  return container;\n};\n\nconst createHighlightColumn = ({\n  quote,\n  attribution,\n  isThemeDark,\n}: Pick<\n  PathwayHighlightProps,\n  'quote' | 'attribution' | 'isThemeDark'\n>): ElementModel<HTMLElement> => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-highlight-column-wrapper')\n    .withStyles({\n      element: {\n        [`@container (min-width: ${mediumSize}px)`]: {\n          paddingLeft: token.spacing['xl'],\n          position: 'relative',\n        },\n\n        '&:before': {\n          content: \"''\",\n          position: 'absolute',\n          backgroundColor: token.color.red,\n\n          [`@container (max-width: ${mediumSize - 1}px)`]: {\n            top: token.spacing['2xl'],\n            width: token.spacing['5xl'],\n            height: '2px',\n          },\n\n          [`@container (min-width: ${mediumSize}px)`]: {\n            left: '0',\n            width: '2px',\n            height: '100%',\n          },\n        },\n      },\n    });\n\n  if (quote) {\n    wrapper.withChild(\n      new ElementBuilder(quote)\n        .styled(\n          Styles.typography.sans.compose('larger', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            fontWeight: '700',\n\n            ['& *']: {\n              color: 'currentColor',\n            },\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (attribution) {\n    wrapper.withChild(\n      new ElementBuilder(attribution)\n        .styled(\n          Styles.typography.sans.compose('medium', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  const wrapperBuilt = wrapper.build();\n\n  return new ElementBuilder()\n    .withClassName('pathway-highlight-column-container')\n    .withChild(wrapperBuilt)\n    .withStyles({\n      element: {\n        backgroundColor: token.color.gray.lightest,\n        position: 'relative',\n        padding: `${token.spacing['5xl']} ${token.spacing.md} ${token.spacing.md} ${token.spacing.md}`,\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          padding: `${token.spacing['4xl']} ${token.spacing['2xl']}`,\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          padding: `${token.spacing['8xl']} ${token.spacing['xl']}`,\n        },\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.gray.darker,\n        }),\n      },\n    })\n    .build();\n};\n\nconst createLock = (props: PathwayHighlightProps) => {\n  const textContent = createTextContent(props);\n  const highlightColumn = createHighlightColumn(props);\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContent)\n    .withChild(highlightColumn)\n    .withStyles({\n      element: {\n        [`@container (min-width: ${mediumSize}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n\n          [`& > *`]: {\n            width: '50%',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst CreatePathwayHighlightElement = (props: PathwayHighlightProps) =>\n  new ElementBuilder()\n    .withClassName('pathway-highlight-container')\n    .withChild(createLock(props))\n    .withStyles({\n      element: {\n        container: 'inline-size',\n      },\n    })\n    .build();\n\nexport const createCompositePathwayHighlight = CreatePathwayHighlightElement;\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-export { default as hero } from './hero';
-export { default as highlight } from './highlight';
-export { default as overlay } from './overlay';
-export { default as standard } from './standard';
-export { default as sticky } from './sticky';
+export { createCompositePathwayHero as hero } from './hero';
+export { createCompositePathwayHighlight as highlight } from './highlight';
+export { createCompositePathwayOverlay as overlay } from './overlay';
+export { createCompositePathwayStandard as standard } from './standard';
+export { createCompositePathwaySticky as sticky } from './sticky';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC5D,OAAO,EAAE,+BAA+B,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,EAAE,6BAA6B,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AACrE,OAAO,EAAE,8BAA8B,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACxE,OAAO,EAAE,4BAA4B,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/composite/pathway/index.js

@@ -1,13 +1,13 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const hero = require("./hero.js");
-const highlight = require("./highlight.js");
-const overlay = require("./overlay.js");
-const standard = require("./standard.js");
-const sticky = require("./sticky.js");
-exports.hero = hero;
-exports.highlight = highlight;
-exports.overlay = overlay;
-exports.standard = standard;
-exports.sticky = sticky;
+import { createCompositePathwayHero } from "./hero.js";
+import { createCompositePathwayHighlight } from "./highlight.js";
+import { createCompositePathwayOverlay } from "./overlay.js";
+import { createCompositePathwayStandard } from "./standard.js";
+import { createCompositePathwaySticky } from "./sticky.js";
+export {
+  createCompositePathwayHero as hero,
+  createCompositePathwayHighlight as highlight,
+  createCompositePathwayOverlay as overlay,
+  createCompositePathwayStandard as standard,
+  createCompositePathwaySticky as sticky
+};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

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

@@ -1,5 +1,5 @@
 import { PathwayOverlayProps } from './_types';
-declare const _default: (props: PathwayOverlayProps) => {
+export declare const createCompositePathwayOverlay: (props: PathwayOverlayProps) => {
     events: {
         loadAnimation: () => void;
     };
@@ -8,5 +8,4 @@ declare const _default: (props: PathwayOverlayProps) => {
     update?: (props: Partial<import('@universityofmaryland/web-builder-library').BuilderOptions>) => void;
     destroy?: () => void;
 };
-export default _default;
 //# sourceMappingURL=overlay.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/overlay.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;yBA+TpC,OAAO,mBAAmB;;;;;;;;;AAA1C,wBAiCE"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/overlay.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAkWpD,eAAO,MAAM,6BAA6B,UAnCE,mBAAmB;;;;;;;;CAmCS,CAAC"}