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

package/dist/composite/pathway/overlay.js

@@ -1,29 +1,9 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const layout = require("@universityofmaryland/web-styles-library/layout");
-const Styles = require("@universityofmaryland/web-styles-library");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-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 layout__namespace = /* @__PURE__ */ _interopNamespaceDefault(layout);
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as layout from "@universityofmaryland/web-styles-library/layout";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { withViewTimelineAnimation } from "@universityofmaryland/web-utilities-library/styles";
+import { createAssetContent, createTextLockupMedium } from "./_common.js";
 const REF_TEXT_ELEMENT = "pathway-text-container";
 const REF_IMAGE_ELEMENT = "pathway-image-container";
 const REF_KEY_FRAME_BACKGROUND_LEFT = "pathway-overlay-background-left";
@@ -105,12 +85,12 @@ const setupAnimation = (container) => {
 const createAssetColumn = (props) => {
   const { image, video, includesAnimation, isImagePositionLeft } = props;
   if (!image && !video) return null;
-  return new webBuilderLibrary.ElementBuilder().withClassName(REF_IMAGE_ELEMENT).withChild(_common.createAssetContent(props)).withStyles({
+  return new ElementBuilder().withClassName(REF_IMAGE_ELEMENT).withChild(createAssetContent(props)).withStyles({
     element: {
       position: "relative",
       height: "100%",
       ...includesAnimation && {
-        ...styles.withViewTimelineAnimation({
+        ...withViewTimelineAnimation({
           opacity: "0",
           transform: "translateY(100px)",
           transition: "opacity 1s, transform 1s",
@@ -135,14 +115,14 @@ const createAssetColumn = (props) => {
   }).build();
 };
 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: {
-      padding: `${token__namespace.spacing.md} 0`,
+      padding: `${token.spacing.md} 0`,
       [`@container (max-width: ${mediumSize - 1}px)`]: {
-        ...layout__namespace.space.horizontal.larger
+        ...layout.space.horizontal.larger
       },
       [`@container (min-width: ${mediumSize}px)`]: {
-        padding: `${token__namespace.spacing["4xl"]} ${token__namespace.spacing["2xl"]}`,
+        padding: `${token.spacing["4xl"]} ${token.spacing["2xl"]}`,
         ...props.isImagePositionLeft === false && {
           paddingLeft: "0"
         },
@@ -151,7 +131,7 @@ const createTextContent = (props) => {
         }
       },
       [`@container (min-width: ${largeSize}px)`]: {
-        padding: `${token__namespace.spacing["8xl"]} ${token__namespace.spacing["6xl"]}`,
+        padding: `${token.spacing["8xl"]} ${token.spacing["6xl"]}`,
         ...props.isImagePositionLeft === false && {
           paddingLeft: "0"
         },
@@ -161,11 +141,11 @@ const createTextContent = (props) => {
       }
     }
   }).build();
-  const container = new webBuilderLibrary.ElementBuilder().withClassName(REF_TEXT_ELEMENT).withChild(wrapper).withStyles({
+  const container = new ElementBuilder().withClassName(REF_TEXT_ELEMENT).withChild(wrapper).withStyles({
     element: {
       zIndex: "99",
       ...props.includesAnimation && {
-        ...styles.withViewTimelineAnimation({
+        ...withViewTimelineAnimation({
           opacity: "0",
           transform: "translateY(100px)",
           transition: "opacity 1s, transform 1s",
@@ -183,25 +163,25 @@ const createTextContent = (props) => {
 };
 const createBackground = (props) => {
   const getBackgroundColor = () => {
-    if (props.isThemeDark) return token__namespace.color.black;
-    if (props.isThemeLight) return token__namespace.color.gray.lighter;
-    if (props.isThemeMaryland) return token__namespace.color.red;
-    return token__namespace.color.white;
+    if (props.isThemeDark) return token.color.black;
+    if (props.isThemeLight) return token.color.gray.lighter;
+    if (props.isThemeMaryland) return token.color.red;
+    return token.color.white;
   };
-  return new webBuilderLibrary.ElementBuilder().withClassName("pathway-overlay-container-background").withStyles({
+  return new ElementBuilder().withClassName("pathway-overlay-container-background").withStyles({
     element: {
       position: "absolute",
       top: "0",
       bottom: "0",
-      right: `-${token__namespace.spacing.xl}`,
-      width: `calc(100% + ${token__namespace.spacing["6xl"]})`,
+      right: `-${token.spacing.xl}`,
+      width: `calc(100% + ${token.spacing["6xl"]})`,
       backgroundColor: getBackgroundColor(),
       [`@container (min-width: ${mediumSize}px)`]: {
         ...props.includesAnimation && {
           animationTimeline: "view()",
           animationRangeStart: "entry",
           animationRangeEnd: "contain",
-          ...styles.withViewTimelineAnimation({
+          ...withViewTimelineAnimation({
             width: "calc(75% + 1000px)",
             ...props.isImagePositionLeft === true && {
               right: "-1000px",
@@ -220,7 +200,7 @@ const createBackground = (props) => {
 };
 const createLock = (props) => {
   const isThemeApplied = props.isThemeDark || props.isThemeLight || props.isThemeMaryland;
-  const lockWrapper = new webBuilderLibrary.ElementBuilder().withClassName("pathway-overlay-container-lock-wrapper").withStyles({
+  const lockWrapper = new ElementBuilder().withClassName("pathway-overlay-container-lock-wrapper").withStyles({
     element: {
       position: "relative",
       [`@container (max-width: ${mediumSize - 1}px)`]: {
@@ -231,7 +211,7 @@ const createLock = (props) => {
         gridTemplateColumns: "1fr 1fr",
         alignItems: "center",
         ...isThemeApplied && {
-          padding: `${token__namespace.spacing["6xl"]} 0`
+          padding: `${token.spacing["6xl"]} 0`
         }
       }
     }
@@ -243,7 +223,7 @@ const createLock = (props) => {
   }
   lockWrapper.withChild(createTextContent(props));
   const lockWrapperBuilt = lockWrapper.build();
-  return new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.space.horizontal.larger).withChild(lockWrapperBuilt).withStyles({
+  return new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(lockWrapperBuilt).withStyles({
     element: {
       [`@container (max-width: ${mediumSize - 1}px)`]: {
         paddingLeft: 0,
@@ -252,9 +232,9 @@ const createLock = (props) => {
     }
   }).build();
 };
-const overlay = (props) => {
-  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("pathway-overlay-container-wrapper").withChild(createLock(props)).build();
-  const composite = new webBuilderLibrary.ElementBuilder().withClassName("pathway-overlay-container").withChild(wrapper).withStyles({
+const CreatePathwayOverlayElement = (props) => {
+  const wrapper = new ElementBuilder().withClassName("pathway-overlay-container-wrapper").withChild(createLock(props)).build();
+  const composite = new ElementBuilder().withClassName("pathway-overlay-container").withChild(wrapper).withStyles({
     element: {
       container: "inline-size",
       position: "relative",
@@ -275,5 +255,8 @@ const overlay = (props) => {
     }
   };
 };
-module.exports = overlay;
+const createCompositePathwayOverlay = CreatePathwayOverlayElement;
+export {
+  createCompositePathwayOverlay
+};
 //# sourceMappingURL=overlay.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../../source/composite/pathway/overlay.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { createTextLockupMedium, createAssetContent } from './_common';\nimport { type PathwayOverlayProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst REF_TEXT_ELEMENT = 'pathway-text-container';\nconst REF_IMAGE_ELEMENT = 'pathway-image-container';\n\nconst REF_KEY_FRAME_BACKGROUND_LEFT = 'pathway-overlay-background-left';\nconst REF_KEY_FRAME_BACKGROUND_RIGHT = 'pathway-overlay-background-right';\n\nconst mediumSize = 800;\nconst largeSize = 1200;\n\nconst keyFrameBackgroundLeft = `\n  @keyframes ${REF_KEY_FRAME_BACKGROUND_LEFT} {\n    from {\n      transform: translateX(30vw);\n   }\n    to {\n      transform: translateX(0);\n    }\n  }\n`;\n\nconst keyFrameBackgroundRight = `\n  @keyframes ${REF_KEY_FRAME_BACKGROUND_RIGHT} {\n    from {\n      transform: translateX(-30vw);\n   }\n    to {\n      transform: translateX(0);\n    }\n  }\n`;\n\nconst setupAnimation = (container: HTMLElement) => {\n  const textElement = container.querySelector(\n    `.${REF_TEXT_ELEMENT}`,\n  ) as HTMLElement;\n  const imageElement = container.querySelector(\n    `.${REF_IMAGE_ELEMENT}`,\n  ) as HTMLElement | null;\n\n  if (!textElement) return;\n\n  const rect = container.getBoundingClientRect();\n  const elementTop = rect.top + window.scrollY;\n  const viewportBottom = window.scrollY + window.innerHeight;\n  const hasAnimationOccured = elementTop < viewportBottom - rect.height * 0.65;\n  let isInitialCheck = true;\n\n  if (hasAnimationOccured) {\n    textElement.style.transition = 'opacity 0s, transform 0s';\n    textElement.style.opacity = '1';\n    textElement.style.transform = 'translateY(0)';\n\n    if (imageElement) {\n      imageElement.style.transition = 'opacity 0s, transform 0s';\n      imageElement.style.opacity = '1';\n      imageElement.style.transform = 'translateY(0)';\n    }\n    return;\n  }\n\n  const observer = new IntersectionObserver(\n    (entries, observer) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          if (isInitialCheck && entry.intersectionRatio >= 0.35) {\n            textElement.style.transition = 'opacity 0s, transform 0s';\n          }\n\n          textElement.style.opacity = '1';\n          textElement.style.transform = 'translateY(0)';\n\n          if (imageElement) {\n            if (isInitialCheck && entry.intersectionRatio >= 0.35) {\n              imageElement.style.transition = 'opacity 0s, transform 0s';\n            }\n            imageElement.style.opacity = '1';\n            imageElement.style.transform = 'translateY(0)';\n          }\n\n          observer.unobserve(entry.target);\n        }\n\n        isInitialCheck = false;\n      });\n    },\n    {\n      rootMargin: '0px',\n      threshold: [0.35],\n    },\n  );\n\n  observer.observe(container);\n};\n\nconst createAssetColumn = (\n  props: Pick<\n    PathwayOverlayProps,\n    | 'dateSign'\n    | 'isThemeDark'\n    | 'image'\n    | 'video'\n    | 'includesAnimation'\n    | 'isImagePositionLeft'\n    | 'isImageScaled'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const { image, video, includesAnimation, isImagePositionLeft } = props;\n\n  if (!image && !video) return null;\n\n  return new ElementBuilder()\n    .withClassName(REF_IMAGE_ELEMENT)\n    .withChild(createAssetContent(props))\n    .withStyles({\n      element: {\n        position: 'relative',\n        height: '100%',\n\n        ...(includesAnimation && {\n          ...withViewTimelineAnimation({\n            opacity: '0',\n            transform: 'translateY(100px)',\n            transition: 'opacity 1s, transform 1s',\n            transitionDelay: isImagePositionLeft ? '0s' : '0.5s',\n          }),\n        }),\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          display: 'grid',\n          minHeight: '56vw',\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          ...(isImagePositionLeft === false && {\n            order: '2',\n          }),\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          [`& img`]: {\n            minHeight: '656px',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextContent = (\n  props: PathwayOverlayProps,\n): ElementModel<HTMLElement> => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-text-container-wrapper')\n    .withChild(createTextLockupMedium(props))\n    .withStyles({\n      element: {\n        padding: `${token.spacing.md} 0`,\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          ...layout.space.horizontal.larger,\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          padding: `${token.spacing['4xl']} ${token.spacing['2xl']}`,\n\n          ...(props.isImagePositionLeft === false && {\n            paddingLeft: '0',\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: '0',\n          }),\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          padding: `${token.spacing['8xl']} ${token.spacing['6xl']}`,\n\n          ...(props.isImagePositionLeft === false && {\n            paddingLeft: '0',\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: '0',\n          }),\n        },\n      },\n    })\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName(REF_TEXT_ELEMENT)\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        zIndex: '99',\n\n        ...(props.includesAnimation && {\n          ...withViewTimelineAnimation({\n            opacity: '0',\n            transform: 'translateY(100px)',\n            transition: 'opacity 1s, transform 1s',\n            transitionDelay: props.isImagePositionLeft ? '0.5s' : '0s',\n          }),\n        }),\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          ...(props.isImagePositionLeft === false && {\n            order: '1',\n          }),\n        },\n      },\n    })\n    .build();\n\n  return container;\n};\n\nconst createBackground = (\n  props: PathwayOverlayProps,\n): ElementModel<HTMLElement> => {\n  const getBackgroundColor = () => {\n    if (props.isThemeDark) return token.color.black;\n    if (props.isThemeLight) return token.color.gray.lighter;\n    if (props.isThemeMaryland) return token.color.red;\n    return token.color.white;\n  };\n\n  return new ElementBuilder()\n    .withClassName('pathway-overlay-container-background')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: '0',\n        bottom: '0',\n        right: `-${token.spacing.xl}`,\n        width: `calc(100% + ${token.spacing['6xl']})`,\n        backgroundColor: getBackgroundColor(),\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          ...(props.includesAnimation && {\n            animationTimeline: 'view()',\n            animationRangeStart: 'entry',\n            animationRangeEnd: 'contain',\n\n            ...withViewTimelineAnimation({\n              width: 'calc(75% + 1000px)',\n\n              ...(props.isImagePositionLeft === true && {\n                right: '-1000px',\n                animationName: REF_KEY_FRAME_BACKGROUND_LEFT,\n              }),\n\n              ...(props.isImagePositionLeft === false && {\n                animationName: REF_KEY_FRAME_BACKGROUND_RIGHT,\n                left: '-1000px',\n                right: 'auto',\n              }),\n            }),\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst createLock = (props: PathwayOverlayProps) => {\n  const isThemeApplied =\n    props.isThemeDark || props.isThemeLight || props.isThemeMaryland;\n\n  const lockWrapper = new ElementBuilder()\n    .withClassName('pathway-overlay-container-lock-wrapper')\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          padding: '0',\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          display: 'grid',\n          gridTemplateColumns: '1fr 1fr',\n          alignItems: 'center',\n\n          ...(isThemeApplied && {\n            padding: `${token.spacing['6xl']} 0`,\n          }),\n        },\n      },\n    });\n\n  lockWrapper.withChild(createBackground(props));\n\n  const assetColumn = createAssetColumn(props);\n  if (assetColumn) {\n    lockWrapper.withChild(assetColumn);\n  }\n\n  lockWrapper.withChild(createTextContent(props));\n\n  const lockWrapperBuilt = lockWrapper.build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(lockWrapperBuilt)\n    .withStyles({\n      element: {\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingLeft: 0,\n          paddingRight: 0,\n        },\n      },\n    })\n    .build();\n};\n\nexport default (props: PathwayOverlayProps) => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-overlay-container-wrapper')\n    .withChild(createLock(props))\n    .build();\n\n  const composite = new ElementBuilder()\n    .withClassName('pathway-overlay-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        container: 'inline-size',\n        position: 'relative',\n        overflow: 'clip',\n      },\n    })\n    .build();\n\n  const loadAnimation = () => {\n    if (props.includesAnimation) {\n      setupAnimation(composite.element);\n    }\n  };\n\n  composite.styles += keyFrameBackgroundLeft;\n  composite.styles += keyFrameBackgroundRight;\n\n  return {\n    ...composite,\n    events: {\n      loadAnimation,\n    },\n  };\n};\n"],"names":["observer","ElementBuilder","createAssetContent","withViewTimelineAnimation","createTextLockupMedium","token","layout","Styles"],"mappings":"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"}
+{"version":3,"file":"overlay.js","sources":["../../../source/composite/pathway/overlay.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { createTextLockupMedium, createAssetContent } from './_common';\nimport { type PathwayOverlayProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst REF_TEXT_ELEMENT = 'pathway-text-container';\nconst REF_IMAGE_ELEMENT = 'pathway-image-container';\n\nconst REF_KEY_FRAME_BACKGROUND_LEFT = 'pathway-overlay-background-left';\nconst REF_KEY_FRAME_BACKGROUND_RIGHT = 'pathway-overlay-background-right';\n\nconst mediumSize = 800;\nconst largeSize = 1200;\n\nconst keyFrameBackgroundLeft = `\n  @keyframes ${REF_KEY_FRAME_BACKGROUND_LEFT} {\n    from {\n      transform: translateX(30vw);\n   }\n    to {\n      transform: translateX(0);\n    }\n  }\n`;\n\nconst keyFrameBackgroundRight = `\n  @keyframes ${REF_KEY_FRAME_BACKGROUND_RIGHT} {\n    from {\n      transform: translateX(-30vw);\n   }\n    to {\n      transform: translateX(0);\n    }\n  }\n`;\n\nconst setupAnimation = (container: HTMLElement) => {\n  const textElement = container.querySelector(\n    `.${REF_TEXT_ELEMENT}`,\n  ) as HTMLElement;\n  const imageElement = container.querySelector(\n    `.${REF_IMAGE_ELEMENT}`,\n  ) as HTMLElement | null;\n\n  if (!textElement) return;\n\n  const rect = container.getBoundingClientRect();\n  const elementTop = rect.top + window.scrollY;\n  const viewportBottom = window.scrollY + window.innerHeight;\n  const hasAnimationOccured = elementTop < viewportBottom - rect.height * 0.65;\n  let isInitialCheck = true;\n\n  if (hasAnimationOccured) {\n    textElement.style.transition = 'opacity 0s, transform 0s';\n    textElement.style.opacity = '1';\n    textElement.style.transform = 'translateY(0)';\n\n    if (imageElement) {\n      imageElement.style.transition = 'opacity 0s, transform 0s';\n      imageElement.style.opacity = '1';\n      imageElement.style.transform = 'translateY(0)';\n    }\n    return;\n  }\n\n  const observer = new IntersectionObserver(\n    (entries, observer) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          if (isInitialCheck && entry.intersectionRatio >= 0.35) {\n            textElement.style.transition = 'opacity 0s, transform 0s';\n          }\n\n          textElement.style.opacity = '1';\n          textElement.style.transform = 'translateY(0)';\n\n          if (imageElement) {\n            if (isInitialCheck && entry.intersectionRatio >= 0.35) {\n              imageElement.style.transition = 'opacity 0s, transform 0s';\n            }\n            imageElement.style.opacity = '1';\n            imageElement.style.transform = 'translateY(0)';\n          }\n\n          observer.unobserve(entry.target);\n        }\n\n        isInitialCheck = false;\n      });\n    },\n    {\n      rootMargin: '0px',\n      threshold: [0.35],\n    },\n  );\n\n  observer.observe(container);\n};\n\nconst createAssetColumn = (\n  props: Pick<\n    PathwayOverlayProps,\n    | 'dateSign'\n    | 'isThemeDark'\n    | 'image'\n    | 'video'\n    | 'includesAnimation'\n    | 'isImagePositionLeft'\n    | 'isImageScaled'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const { image, video, includesAnimation, isImagePositionLeft } = props;\n\n  if (!image && !video) return null;\n\n  return new ElementBuilder()\n    .withClassName(REF_IMAGE_ELEMENT)\n    .withChild(createAssetContent(props))\n    .withStyles({\n      element: {\n        position: 'relative',\n        height: '100%',\n\n        ...(includesAnimation && {\n          ...withViewTimelineAnimation({\n            opacity: '0',\n            transform: 'translateY(100px)',\n            transition: 'opacity 1s, transform 1s',\n            transitionDelay: isImagePositionLeft ? '0s' : '0.5s',\n          }),\n        }),\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          display: 'grid',\n          minHeight: '56vw',\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          ...(isImagePositionLeft === false && {\n            order: '2',\n          }),\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          [`& img`]: {\n            minHeight: '656px',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextContent = (\n  props: PathwayOverlayProps,\n): ElementModel<HTMLElement> => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-text-container-wrapper')\n    .withChild(createTextLockupMedium(props))\n    .withStyles({\n      element: {\n        padding: `${token.spacing.md} 0`,\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          ...layout.space.horizontal.larger,\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          padding: `${token.spacing['4xl']} ${token.spacing['2xl']}`,\n\n          ...(props.isImagePositionLeft === false && {\n            paddingLeft: '0',\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: '0',\n          }),\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          padding: `${token.spacing['8xl']} ${token.spacing['6xl']}`,\n\n          ...(props.isImagePositionLeft === false && {\n            paddingLeft: '0',\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: '0',\n          }),\n        },\n      },\n    })\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName(REF_TEXT_ELEMENT)\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        zIndex: '99',\n\n        ...(props.includesAnimation && {\n          ...withViewTimelineAnimation({\n            opacity: '0',\n            transform: 'translateY(100px)',\n            transition: 'opacity 1s, transform 1s',\n            transitionDelay: props.isImagePositionLeft ? '0.5s' : '0s',\n          }),\n        }),\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          ...(props.isImagePositionLeft === false && {\n            order: '1',\n          }),\n        },\n      },\n    })\n    .build();\n\n  return container;\n};\n\nconst createBackground = (\n  props: PathwayOverlayProps,\n): ElementModel<HTMLElement> => {\n  const getBackgroundColor = () => {\n    if (props.isThemeDark) return token.color.black;\n    if (props.isThemeLight) return token.color.gray.lighter;\n    if (props.isThemeMaryland) return token.color.red;\n    return token.color.white;\n  };\n\n  return new ElementBuilder()\n    .withClassName('pathway-overlay-container-background')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: '0',\n        bottom: '0',\n        right: `-${token.spacing.xl}`,\n        width: `calc(100% + ${token.spacing['6xl']})`,\n        backgroundColor: getBackgroundColor(),\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          ...(props.includesAnimation && {\n            animationTimeline: 'view()',\n            animationRangeStart: 'entry',\n            animationRangeEnd: 'contain',\n\n            ...withViewTimelineAnimation({\n              width: 'calc(75% + 1000px)',\n\n              ...(props.isImagePositionLeft === true && {\n                right: '-1000px',\n                animationName: REF_KEY_FRAME_BACKGROUND_LEFT,\n              }),\n\n              ...(props.isImagePositionLeft === false && {\n                animationName: REF_KEY_FRAME_BACKGROUND_RIGHT,\n                left: '-1000px',\n                right: 'auto',\n              }),\n            }),\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst createLock = (props: PathwayOverlayProps) => {\n  const isThemeApplied =\n    props.isThemeDark || props.isThemeLight || props.isThemeMaryland;\n\n  const lockWrapper = new ElementBuilder()\n    .withClassName('pathway-overlay-container-lock-wrapper')\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          padding: '0',\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          display: 'grid',\n          gridTemplateColumns: '1fr 1fr',\n          alignItems: 'center',\n\n          ...(isThemeApplied && {\n            padding: `${token.spacing['6xl']} 0`,\n          }),\n        },\n      },\n    });\n\n  lockWrapper.withChild(createBackground(props));\n\n  const assetColumn = createAssetColumn(props);\n  if (assetColumn) {\n    lockWrapper.withChild(assetColumn);\n  }\n\n  lockWrapper.withChild(createTextContent(props));\n\n  const lockWrapperBuilt = lockWrapper.build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(lockWrapperBuilt)\n    .withStyles({\n      element: {\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingLeft: 0,\n          paddingRight: 0,\n        },\n      },\n    })\n    .build();\n};\n\nconst CreatePathwayOverlayElement = (props: PathwayOverlayProps) => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-overlay-container-wrapper')\n    .withChild(createLock(props))\n    .build();\n\n  const composite = new ElementBuilder()\n    .withClassName('pathway-overlay-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        container: 'inline-size',\n        position: 'relative',\n        overflow: 'clip',\n      },\n    })\n    .build();\n\n  const loadAnimation = () => {\n    if (props.includesAnimation) {\n      setupAnimation(composite.element);\n    }\n  };\n\n  composite.styles += keyFrameBackgroundLeft;\n  composite.styles += keyFrameBackgroundRight;\n\n  return {\n    ...composite,\n    events: {\n      loadAnimation,\n    },\n  };\n};\n\nexport const createCompositePathwayOverlay = CreatePathwayOverlayElement;\n"],"names":["observer"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/standard.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,UAAU,CAAC;yBA8OrC,OAAO,oBAAoB;;;;;;;;;AAA3C,wBAwCE"}
+{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/standard.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAwRrD,eAAO,MAAM,8BAA8B,UA1CE,oBAAoB;;;;;;;;CA0CS,CAAC"}

package/dist/composite/pathway/standard.js

@@ -1,27 +1,8 @@
-"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");
-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 { withViewTimelineAnimation } from "@universityofmaryland/web-utilities-library/styles";
+import { createTextLockupMedium, createAssetContent } from "./_common.js";
 const mediumSize = 800;
 const largeSize = 1200;
 const setupAnimation = (container, textElement, imageElement) => {
@@ -77,12 +58,12 @@ const createAssetColumn = (props) => {
     isImageScaled
   } = props;
   if (!image && !video) return null;
-  return new webBuilderLibrary.ElementBuilder().withClassName("pathway-image-container").withChild(_common.createAssetContent(props)).withStyles({
+  return new ElementBuilder().withClassName("pathway-image-container").withChild(createAssetContent(props)).withStyles({
     element: {
       position: "relative",
       height: "100%",
       ...includesAnimation && {
-        ...styles.withViewTimelineAnimation({
+        ...withViewTimelineAnimation({
           opacity: "0",
           transform: "translateY(100px)",
           transition: "opacity 1s, transform 1s",
@@ -106,11 +87,11 @@ const createAssetColumn = (props) => {
   }).build();
 };
 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: {
-      padding: `${token__namespace.spacing.md} ${token__namespace.spacing.lg}`,
+      padding: `${token.spacing.md} ${token.spacing.lg}`,
       [`@container (min-width: ${mediumSize}px)`]: {
-        padding: `0 ${token__namespace.spacing["2xl"]}`,
+        padding: `0 ${token.spacing["2xl"]}`,
         ...props.isImagePositionLeft === false && {
           paddingLeft: "0"
         },
@@ -119,7 +100,7 @@ const createTextContent = (props) => {
         }
       },
       [`@container (min-width: ${largeSize}px)`]: {
-        padding: `0 ${token__namespace.spacing["6xl"]}`,
+        padding: `0 ${token.spacing["6xl"]}`,
         ...props.isImagePositionLeft === false && {
           paddingLeft: "0"
         },
@@ -129,11 +110,11 @@ const createTextContent = (props) => {
       }
     }
   }).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",
       ...props.includesAnimation && {
-        ...styles.withViewTimelineAnimation({
+        ...withViewTimelineAnimation({
           opacity: "0",
           transform: "translateY(100px)",
           transition: "opacity 1s, transform 1s",
@@ -141,12 +122,12 @@ const createTextContent = (props) => {
         })
       },
       ...props.isThemeDark && {
-        backgroundColor: token__namespace.color.black,
-        color: token__namespace.color.white
+        backgroundColor: token.color.black,
+        color: token.color.white
       },
       ...props.isThemeMaryland && {
-        backgroundColor: token__namespace.color.red,
-        color: token__namespace.color.white
+        backgroundColor: token.color.red,
+        color: token.color.white
       },
       [`@container (min-width: ${mediumSize}px)`]: {
         ...props.isImagePositionLeft === false && {
@@ -160,7 +141,7 @@ const createTextContent = (props) => {
 const createLock = (props) => {
   const textContent = createTextContent(props);
   const assetContent = createAssetColumn(props);
-  const lockWrapper = new webBuilderLibrary.ElementBuilder().withClassName("pathway-container-lock-wrapper").withStyles({
+  const lockWrapper = new ElementBuilder().withClassName("pathway-container-lock-wrapper").withStyles({
     element: {
       position: "relative",
       [`@container (min-width: ${mediumSize}px)`]: {
@@ -176,7 +157,7 @@ const createLock = (props) => {
   }
   lockWrapper.withChild(textContent);
   const lockWrapperBuilt = lockWrapper.build();
-  return new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.space.horizontal.larger).withChild(lockWrapperBuilt).withStyles({
+  return new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(lockWrapperBuilt).withStyles({
     element: {
       [`@container (max-width: ${mediumSize - 1}px)`]: {
         paddingLeft: 0,
@@ -185,9 +166,9 @@ const createLock = (props) => {
     }
   }).build();
 };
-const standard = (props) => {
-  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("pathway-container-wrapper").withChild(createLock(props)).build();
-  const composite = new webBuilderLibrary.ElementBuilder().withClassName("pathway-container").withChild(wrapper).withStyles({
+const CreatePathwayStandardElement = (props) => {
+  const wrapper = new ElementBuilder().withClassName("pathway-container-wrapper").withChild(createLock(props)).build();
+  const composite = new ElementBuilder().withClassName("pathway-container").withChild(wrapper).withStyles({
     element: {
       container: "inline-size",
       position: "relative",
@@ -214,5 +195,8 @@ const standard = (props) => {
     }
   };
 };
-module.exports = standard;
+const createCompositePathwayStandard = CreatePathwayStandardElement;
+export {
+  createCompositePathwayStandard
+};
 //# sourceMappingURL=standard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"standard.js","sources":["../../../source/composite/pathway/standard.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 { createTextLockupMedium, createAssetContent } from './_common';\nimport { type PathwayStandardProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst mediumSize = 800;\nconst largeSize = 1200;\n\nconst setupAnimation = (\n  container: HTMLElement,\n  textElement: HTMLElement,\n  imageElement: HTMLElement | null,\n) => {\n  const rect = container.getBoundingClientRect();\n  const elementTop = rect.top + window.scrollY;\n  const viewportBottom = window.scrollY + window.innerHeight;\n\n  if (elementTop < viewportBottom - rect.height * 0.65) {\n    textElement.style.transition = 'opacity 0s, transform 0s';\n    textElement.style.opacity = '1';\n    textElement.style.transform = 'translateY(0)';\n\n    if (imageElement) {\n      imageElement.style.transition = 'opacity 0s, transform 0s';\n      imageElement.style.opacity = '1';\n      imageElement.style.transform = 'translateY(0)';\n    }\n    return;\n  }\n\n  let isInitialCheck = true;\n\n  const observer = new IntersectionObserver(\n    (entries, observer) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          if (isInitialCheck && entry.intersectionRatio >= 0.35) {\n            textElement.style.transition = 'opacity 0s, transform 0s';\n          }\n\n          textElement.style.opacity = '1';\n          textElement.style.transform = 'translateY(0)';\n\n          if (imageElement) {\n            if (isInitialCheck && entry.intersectionRatio >= 0.35) {\n              imageElement.style.transition = 'opacity 0s, transform 0s';\n            }\n            imageElement.style.opacity = '1';\n            imageElement.style.transform = 'translateY(0)';\n          }\n\n          observer.unobserve(entry.target);\n        }\n\n        isInitialCheck = false;\n      });\n    },\n    {\n      rootMargin: '0px',\n      threshold: [0.35],\n    },\n  );\n\n  observer.observe(container);\n};\n\nconst createAssetColumn = (\n  props: Pick<\n    PathwayStandardProps,\n    | 'dateSign'\n    | 'isThemeDark'\n    | 'image'\n    | 'video'\n    | 'includesAnimation'\n    | 'isImagePositionLeft'\n    | 'isImageScaled'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const {\n    image,\n    video,\n    includesAnimation,\n    isImagePositionLeft,\n    isImageScaled,\n  } = props;\n\n  if (!image && !video) return null;\n\n  return new ElementBuilder()\n    .withClassName('pathway-image-container')\n    .withChild(createAssetContent(props))\n    .withStyles({\n      element: {\n        position: 'relative',\n        height: '100%',\n\n        ...(includesAnimation && {\n          ...withViewTimelineAnimation({\n            opacity: '0',\n            transform: 'translateY(100px)',\n            transition: 'opacity 1s, transform 1s',\n            transitionDelay: isImagePositionLeft ? '0s' : '0.5s',\n          }),\n        }),\n\n        ...(isImageScaled === false && {\n          display: 'flex',\n          justifyContent: 'center',\n        }),\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          display: 'grid',\n          height: '56vw',\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          ...(isImagePositionLeft === false && {\n            order: '2',\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextContent = (\n  props: PathwayStandardProps,\n): ElementModel<HTMLElement> => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-text-container-wrapper')\n    .withChild(createTextLockupMedium(props))\n    .withStyles({\n      element: {\n        padding: `${token.spacing.md} ${token.spacing.lg}`,\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          padding: `0 ${token.spacing['2xl']}`,\n\n          ...(props.isImagePositionLeft === false && {\n            paddingLeft: '0',\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: '0',\n          }),\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          padding: `0 ${token.spacing['6xl']}`,\n\n          ...(props.isImagePositionLeft === false && {\n            paddingLeft: '0',\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: '0',\n          }),\n        },\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\n        ...(props.includesAnimation && {\n          ...withViewTimelineAnimation({\n            opacity: '0',\n            transform: 'translateY(100px)',\n            transition: 'opacity 1s, transform 1s',\n            transitionDelay: props.isImagePositionLeft ? '0.5s' : '0s',\n          }),\n        }),\n\n        ...(props.isThemeDark && {\n          backgroundColor: token.color.black,\n          color: token.color.white,\n        }),\n\n        ...(props.isThemeMaryland && {\n          backgroundColor: token.color.red,\n          color: token.color.white,\n        }),\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          ...(props.isImagePositionLeft === false && {\n            order: '1',\n          }),\n        },\n      },\n    })\n    .build();\n\n  return container;\n};\n\nconst createLock = (props: PathwayStandardProps) => {\n  const textContent = createTextContent(props);\n  const assetContent = createAssetColumn(props);\n\n  const lockWrapper = new ElementBuilder()\n    .withClassName('pathway-container-lock-wrapper')\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          display: 'grid',\n          gridTemplateColumns: '50% 50%',\n          alignItems: 'center',\n          minHeight: '56vh',\n        },\n      },\n    });\n\n  if (assetContent) {\n    lockWrapper.withChild(assetContent);\n  }\n  lockWrapper.withChild(textContent);\n\n  const lockWrapperBuilt = lockWrapper.build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(lockWrapperBuilt)\n    .withStyles({\n      element: {\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingLeft: 0,\n          paddingRight: 0,\n        },\n      },\n    })\n    .build();\n};\n\nexport default (props: PathwayStandardProps) => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-container-wrapper')\n    .withChild(createLock(props))\n    .build();\n\n  const composite = new ElementBuilder()\n    .withClassName('pathway-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        container: 'inline-size',\n        position: 'relative',\n        overflow: 'hidden',\n      },\n    })\n    .build();\n\n  // Set up animation observer\n  const loadAnimation = () => {\n    if (props.includesAnimation) {\n      const textElement = composite.element.querySelector(\n        '.pathway-text-container',\n      ) as HTMLElement;\n      const imageElement = composite.element.querySelector(\n        '.pathway-image-container',\n      ) as HTMLElement | null;\n\n      if (textElement) {\n        setupAnimation(composite.element, textElement, imageElement);\n      }\n    }\n  };\n\n  return {\n    ...composite,\n    events: {\n      loadAnimation,\n    },\n  };\n};\n"],"names":["observer","ElementBuilder","createAssetContent","withViewTimelineAnimation","createTextLockupMedium","token","Styles"],"mappings":"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"}
+{"version":3,"file":"standard.js","sources":["../../../source/composite/pathway/standard.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 { createTextLockupMedium, createAssetContent } from './_common';\nimport { type PathwayStandardProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst mediumSize = 800;\nconst largeSize = 1200;\n\nconst setupAnimation = (\n  container: HTMLElement,\n  textElement: HTMLElement,\n  imageElement: HTMLElement | null,\n) => {\n  const rect = container.getBoundingClientRect();\n  const elementTop = rect.top + window.scrollY;\n  const viewportBottom = window.scrollY + window.innerHeight;\n\n  if (elementTop < viewportBottom - rect.height * 0.65) {\n    textElement.style.transition = 'opacity 0s, transform 0s';\n    textElement.style.opacity = '1';\n    textElement.style.transform = 'translateY(0)';\n\n    if (imageElement) {\n      imageElement.style.transition = 'opacity 0s, transform 0s';\n      imageElement.style.opacity = '1';\n      imageElement.style.transform = 'translateY(0)';\n    }\n    return;\n  }\n\n  let isInitialCheck = true;\n\n  const observer = new IntersectionObserver(\n    (entries, observer) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          if (isInitialCheck && entry.intersectionRatio >= 0.35) {\n            textElement.style.transition = 'opacity 0s, transform 0s';\n          }\n\n          textElement.style.opacity = '1';\n          textElement.style.transform = 'translateY(0)';\n\n          if (imageElement) {\n            if (isInitialCheck && entry.intersectionRatio >= 0.35) {\n              imageElement.style.transition = 'opacity 0s, transform 0s';\n            }\n            imageElement.style.opacity = '1';\n            imageElement.style.transform = 'translateY(0)';\n          }\n\n          observer.unobserve(entry.target);\n        }\n\n        isInitialCheck = false;\n      });\n    },\n    {\n      rootMargin: '0px',\n      threshold: [0.35],\n    },\n  );\n\n  observer.observe(container);\n};\n\nconst createAssetColumn = (\n  props: Pick<\n    PathwayStandardProps,\n    | 'dateSign'\n    | 'isThemeDark'\n    | 'image'\n    | 'video'\n    | 'includesAnimation'\n    | 'isImagePositionLeft'\n    | 'isImageScaled'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const {\n    image,\n    video,\n    includesAnimation,\n    isImagePositionLeft,\n    isImageScaled,\n  } = props;\n\n  if (!image && !video) return null;\n\n  return new ElementBuilder()\n    .withClassName('pathway-image-container')\n    .withChild(createAssetContent(props))\n    .withStyles({\n      element: {\n        position: 'relative',\n        height: '100%',\n\n        ...(includesAnimation && {\n          ...withViewTimelineAnimation({\n            opacity: '0',\n            transform: 'translateY(100px)',\n            transition: 'opacity 1s, transform 1s',\n            transitionDelay: isImagePositionLeft ? '0s' : '0.5s',\n          }),\n        }),\n\n        ...(isImageScaled === false && {\n          display: 'flex',\n          justifyContent: 'center',\n        }),\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          display: 'grid',\n          height: '56vw',\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          ...(isImagePositionLeft === false && {\n            order: '2',\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextContent = (\n  props: PathwayStandardProps,\n): ElementModel<HTMLElement> => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-text-container-wrapper')\n    .withChild(createTextLockupMedium(props))\n    .withStyles({\n      element: {\n        padding: `${token.spacing.md} ${token.spacing.lg}`,\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          padding: `0 ${token.spacing['2xl']}`,\n\n          ...(props.isImagePositionLeft === false && {\n            paddingLeft: '0',\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: '0',\n          }),\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          padding: `0 ${token.spacing['6xl']}`,\n\n          ...(props.isImagePositionLeft === false && {\n            paddingLeft: '0',\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: '0',\n          }),\n        },\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\n        ...(props.includesAnimation && {\n          ...withViewTimelineAnimation({\n            opacity: '0',\n            transform: 'translateY(100px)',\n            transition: 'opacity 1s, transform 1s',\n            transitionDelay: props.isImagePositionLeft ? '0.5s' : '0s',\n          }),\n        }),\n\n        ...(props.isThemeDark && {\n          backgroundColor: token.color.black,\n          color: token.color.white,\n        }),\n\n        ...(props.isThemeMaryland && {\n          backgroundColor: token.color.red,\n          color: token.color.white,\n        }),\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          ...(props.isImagePositionLeft === false && {\n            order: '1',\n          }),\n        },\n      },\n    })\n    .build();\n\n  return container;\n};\n\nconst createLock = (props: PathwayStandardProps) => {\n  const textContent = createTextContent(props);\n  const assetContent = createAssetColumn(props);\n\n  const lockWrapper = new ElementBuilder()\n    .withClassName('pathway-container-lock-wrapper')\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          display: 'grid',\n          gridTemplateColumns: '50% 50%',\n          alignItems: 'center',\n          minHeight: '56vh',\n        },\n      },\n    });\n\n  if (assetContent) {\n    lockWrapper.withChild(assetContent);\n  }\n  lockWrapper.withChild(textContent);\n\n  const lockWrapperBuilt = lockWrapper.build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(lockWrapperBuilt)\n    .withStyles({\n      element: {\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingLeft: 0,\n          paddingRight: 0,\n        },\n      },\n    })\n    .build();\n};\n\nconst CreatePathwayStandardElement = (props: PathwayStandardProps) => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-container-wrapper')\n    .withChild(createLock(props))\n    .build();\n\n  const composite = new ElementBuilder()\n    .withClassName('pathway-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        container: 'inline-size',\n        position: 'relative',\n        overflow: 'hidden',\n      },\n    })\n    .build();\n\n  // Set up animation observer\n  const loadAnimation = () => {\n    if (props.includesAnimation) {\n      const textElement = composite.element.querySelector(\n        '.pathway-text-container',\n      ) as HTMLElement;\n      const imageElement = composite.element.querySelector(\n        '.pathway-image-container',\n      ) as HTMLElement | null;\n\n      if (textElement) {\n        setupAnimation(composite.element, textElement, imageElement);\n      }\n    }\n  };\n\n  return {\n    ...composite,\n    events: {\n      loadAnimation,\n    },\n  };\n};\n\nexport const createCompositePathwayStandard = CreatePathwayStandardElement;\n"],"names":["observer"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"sticky.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/sticky.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;yBA+KnC,OAAO,kBAAkB;AAAzC,wBAgBE"}
+{"version":3,"file":"sticky.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/sticky.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAiMnD,eAAO,MAAM,4BAA4B,UAlBE,kBAAkB,kFAkBS,CAAC"}

package/dist/composite/pathway/sticky.js

@@ -1,34 +1,14 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const layout = require("@universityofmaryland/web-styles-library/layout");
-const Styles = require("@universityofmaryland/web-styles-library");
-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 layout__namespace = /* @__PURE__ */ _interopNamespaceDefault(layout);
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as layout from "@universityofmaryland/web-styles-library/layout";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { createTextLockupMedium, createAssetContent } from "./_common.js";
 const mediumSize = 800;
 const largeSize = 1200;
 const createAssetColumn = (props) => {
   const { image, video, isImagePositionLeft, isImageScaled } = props;
   if (!image && !video) return null;
-  return new webBuilderLibrary.ElementBuilder().withClassName("pathway-image-container").withChild(_common.createAssetContent(props)).withStyles({
+  return new ElementBuilder().withClassName("pathway-image-container").withChild(createAssetContent(props)).withStyles({
     element: {
       position: "sticky",
       top: "0",
@@ -60,14 +40,14 @@ const createAssetColumn = (props) => {
   }).build();
 };
 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: {
-      padding: `${token__namespace.spacing.md} 0`,
+      padding: `${token.spacing.md} 0`,
       [`@container (max-width: ${mediumSize - 1}px)`]: {
-        ...layout__namespace.space.horizontal.larger
+        ...layout.space.horizontal.larger
       },
       [`@container (min-width: ${mediumSize}px)`]: {
-        padding: `0 ${token__namespace.spacing["2xl"]}`,
+        padding: `0 ${token.spacing["2xl"]}`,
         ...props.isImagePositionLeft === false && {
           paddingLeft: "0"
         },
@@ -76,7 +56,7 @@ const createTextContent = (props) => {
         }
       },
       [`@container (min-width: ${largeSize}px)`]: {
-        padding: `0 ${token__namespace.spacing["6xl"]}`,
+        padding: `0 ${token.spacing["6xl"]}`,
         ...props.isImagePositionLeft === false && {
           paddingLeft: "0"
         },
@@ -86,15 +66,15 @@ const createTextContent = (props) => {
       }
     }
   }).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: {
       ...props.isThemeDark && {
-        backgroundColor: token__namespace.color.black,
-        color: token__namespace.color.white
+        backgroundColor: token.color.black,
+        color: token.color.white
       },
       ...props.isThemeMaryland && {
-        backgroundColor: token__namespace.color.red,
-        color: token__namespace.color.white
+        backgroundColor: token.color.red,
+        color: token.color.white
       },
       [`@container (min-width: ${mediumSize}px)`]: {
         ...props.isImagePositionLeft === false && {
@@ -108,7 +88,7 @@ const createTextContent = (props) => {
 const createLock = (props) => {
   const textContent = createTextContent(props);
   const assetContent = createAssetColumn(props);
-  const lockWrapper = new webBuilderLibrary.ElementBuilder().withClassName("pathway-container-lock-wrapper").withStyles({
+  const lockWrapper = new ElementBuilder().withClassName("pathway-container-lock-wrapper").withStyles({
     element: {
       position: "relative",
       [`@container (max-width: ${mediumSize - 1}px)`]: {
@@ -127,7 +107,7 @@ const createLock = (props) => {
   }
   lockWrapper.withChild(textContent);
   const lockWrapperBuilt = lockWrapper.build();
-  return new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.space.horizontal.larger).withChild(lockWrapperBuilt).withStyles({
+  return new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(lockWrapperBuilt).withStyles({
     element: {
       [`@container (max-width: ${mediumSize - 1}px)`]: {
         paddingLeft: 0,
@@ -136,14 +116,17 @@ const createLock = (props) => {
     }
   }).build();
 };
-const sticky = (props) => {
-  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("pathway-sticky-container-wrapper").withChild(createLock(props)).build();
-  return new webBuilderLibrary.ElementBuilder().withClassName("pathway-sticky-container").withChild(wrapper).withStyles({
+const CreatePathwayStickyElement = (props) => {
+  const wrapper = new ElementBuilder().withClassName("pathway-sticky-container-wrapper").withChild(createLock(props)).build();
+  return new ElementBuilder().withClassName("pathway-sticky-container").withChild(wrapper).withStyles({
     element: {
       container: "inline-size",
       position: "relative"
     }
   }).build();
 };
-module.exports = sticky;
+const createCompositePathwaySticky = CreatePathwayStickyElement;
+export {
+  createCompositePathwaySticky
+};
 //# sourceMappingURL=sticky.js.map