@universityofmaryland/web-elements-library 1.4.7 → 1.5.0-beta.0

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

@@ -1 +1 @@
-{"version":3,"file":"highlight.mjs","sources":["../../../source/composite/pathway/highlight.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { createTextLockupMedium } from './_common';\nimport { PathwayHighlightProps } from './_types';\nimport { type ElementVisual } from '../../_types';\n\nconst mediumSize = 1000;\nconst largeSize = 1200;\n\nconst createTextContent = (props: PathwayHighlightProps): ElementVisual => {\n  const wrapper = ElementModel.createDiv({\n    className: 'pathway-text-container-wrapper',\n    children: [createTextLockupMedium(props)],\n    elementStyles: {\n      element: {\n        width: '100%',\n        position: 'relative',\n      },\n    },\n  });\n\n  const container = ElementModel.createDiv({\n    className: 'pathway-text-container',\n    children: [wrapper],\n    elementStyles: {\n      element: {\n        container: 'inline-size',\n        display: 'flex',\n        alignItems: 'center',\n        zIndex: '99',\n\n        ...(props.isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n          color: Styles.token.color.white,\n        }),\n\n        ...(props.isThemeMaryland && {\n          backgroundColor: Styles.token.color.red,\n          color: Styles.token.color.white,\n        }),\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingBottom: Styles.token.spacing.md,\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          paddingRight: Styles.token.spacing['4xl'],\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          paddingRight: Styles.token.spacing['6xl'],\n        },\n      },\n    },\n  });\n\n  return container;\n};\n\nconst createHighlightColumn = ({\n  quote,\n  attribution,\n  isThemeDark,\n}: Pick<\n  PathwayHighlightProps,\n  'quote' | 'attribution' | 'isThemeDark'\n>): ElementVisual => {\n  const children: ElementVisual[] = [];\n\n  if (quote) {\n    children.push(\n      ElementModel.headline.sansLarger({\n        element: quote,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            color: Styles.token.color.black,\n            fontWeight: '700',\n          },\n        },\n      }),\n    );\n  }\n\n  if (attribution) {\n    children.push(\n      ElementModel.headline.sansMedium({\n        element: attribution,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  const wrapper = ElementModel.createDiv({\n    className: 'pathway-highlight-column-wrapper',\n    children,\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${mediumSize}px)`]: {\n          paddingLeft: Styles.token.spacing['xl'],\n          position: 'relative',\n        },\n\n        '&:before': {\n          content: \"''\",\n          position: 'absolute',\n          backgroundColor: Styles.token.color.red,\n\n          [`@container (max-width: ${mediumSize - 1}px)`]: {\n            top: Styles.token.spacing['2xl'],\n            width: Styles.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\n  return ElementModel.createDiv({\n    className: 'pathway-highlight-column-container',\n    children: [wrapper],\n    elementStyles: {\n      element: {\n        backgroundColor: Styles.token.color.gray.lightest,\n        position: 'relative',\n        padding: `${Styles.token.spacing['5xl']} ${Styles.token.spacing.md} ${Styles.token.spacing.md} ${Styles.token.spacing.md}`,\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          padding: `${Styles.token.spacing['4xl']} ${Styles.token.spacing['2xl']}`,\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          padding: `${Styles.token.spacing['8xl']} ${Styles.token.spacing['xl']}`,\n        },\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.gray.darker,\n\n          [`& *`]: {\n            color: Styles.token.color.white,\n          },\n        }),\n      },\n    },\n  });\n};\n\nconst createLock = (props: PathwayHighlightProps) => {\n  const textContent = createTextContent(props);\n  const highlightColumn = createHighlightColumn(props);\n  const children: ElementVisual[] = [textContent, highlightColumn];\n\n  return ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children,\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${mediumSize}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n\n          [`& > *`]: {\n            width: '50%',\n          },\n        },\n      },\n    },\n  });\n};\n\nexport default (props: PathwayHighlightProps) =>\n  ElementModel.createDiv({\n    className: 'pathway-highlight-container',\n    children: [createLock(props)],\n    elementStyles: {\n      element: {\n        container: 'inline-size',\n      },\n    },\n  });\n"],"names":["ElementModel.createDiv","ElementModel.headline.sansLarger","ElementModel.headline.sansMedium","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
+{"version":3,"file":"highlight.mjs","sources":["../../../source/composite/pathway/highlight.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { createTextLockupMedium } from './_common';\nimport { PathwayHighlightProps } from './_types';\nimport { type ElementVisual } from '../../_types';\n\nconst mediumSize = 1000;\nconst largeSize = 1200;\n\nconst createTextContent = (props: PathwayHighlightProps): ElementVisual => {\n  const wrapper = ElementModel.createDiv({\n    className: 'pathway-text-container-wrapper',\n    children: [createTextLockupMedium(props)],\n    elementStyles: {\n      element: {\n        width: '100%',\n        position: 'relative',\n      },\n    },\n  });\n\n  const container = ElementModel.createDiv({\n    className: 'pathway-text-container',\n    children: [wrapper],\n    elementStyles: {\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          color: token.color.white,\n        }),\n\n        ...(props.isThemeMaryland && {\n          backgroundColor: token.color.red,\n          color: token.color.white,\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  });\n\n  return container;\n};\n\nconst createHighlightColumn = ({\n  quote,\n  attribution,\n  isThemeDark,\n}: Pick<\n  PathwayHighlightProps,\n  'quote' | 'attribution' | 'isThemeDark'\n>): ElementVisual => {\n  const children: ElementVisual[] = [];\n\n  if (quote) {\n    children.push(\n      ElementModel.headline.sansLarger({\n        element: quote,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            color: token.color.black,\n            fontWeight: '700',\n          },\n        },\n      }),\n    );\n  }\n\n  if (attribution) {\n    children.push(\n      ElementModel.headline.sansMedium({\n        element: attribution,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  const wrapper = ElementModel.createDiv({\n    className: 'pathway-highlight-column-wrapper',\n    children,\n    elementStyles: {\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\n  return ElementModel.createDiv({\n    className: 'pathway-highlight-column-container',\n    children: [wrapper],\n    elementStyles: {\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            color: token.color.white,\n          },\n        }),\n      },\n    },\n  });\n};\n\nconst createLock = (props: PathwayHighlightProps) => {\n  const textContent = createTextContent(props);\n  const highlightColumn = createHighlightColumn(props);\n  const children: ElementVisual[] = [textContent, highlightColumn];\n\n  return ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children,\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${mediumSize}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n\n          [`& > *`]: {\n            width: '50%',\n          },\n        },\n      },\n    },\n  });\n};\n\nexport default (props: PathwayHighlightProps) =>\n  ElementModel.createDiv({\n    className: 'pathway-highlight-container',\n    children: [createLock(props)],\n    elementStyles: {\n      element: {\n        container: 'inline-size',\n      },\n    },\n  });\n"],"names":["ElementModel.createDiv","ElementModel.headline.sansLarger","ElementModel.headline.sansMedium","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}

package/dist/composite/pathway/overlay.js

@@ -1,10 +1,8 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
+const token = require("@universityofmaryland/web-styles-library/token");
+const layout$1 = require("@universityofmaryland/web-styles-library/layout");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
 const index = require("../../model/elements/index.js");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
-const media = require("../../utilities/theme/media.js");
 const _common = require("./_common.js");
 const layout = require("../../model/elements/layout.js");
 function _interopNamespaceDefault(e) {
@@ -23,7 +21,8 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const layout__namespace = /* @__PURE__ */ _interopNamespaceDefault(layout$1);
 const REF_TEXT_ELEMENT = "pathway-text-container";
 const REF_IMAGE_ELEMENT = "pathway-image-container";
 const REF_KEY_FRAME_BACKGROUND_LEFT = "pathway-overlay-background-left";
@@ -113,7 +112,7 @@ const createAssetColumn = (props) => {
         position: "relative",
         height: "100%",
         ...includesAnimation && {
-          ...media.withViewTimelineAnimation({
+          ...styles.withViewTimelineAnimation({
             opacity: "0",
             transform: "translateY(100px)",
             transition: "opacity 1s, transform 1s",
@@ -144,12 +143,12 @@ const createTextContent = (props) => {
     children: [_common.createTextLockupMedium(props)],
     elementStyles: {
       element: {
-        padding: `${Styles__namespace.token.spacing.md} 0`,
+        padding: `${token__namespace.spacing.md} 0`,
         [`@container (max-width: ${mediumSize - 1}px)`]: {
-          ...Styles__namespace.layout.space.horizontal.larger
+          ...layout__namespace.space.horizontal.larger
         },
         [`@container (min-width: ${mediumSize}px)`]: {
-          padding: `${Styles__namespace.token.spacing["4xl"]} ${Styles__namespace.token.spacing["2xl"]}`,
+          padding: `${token__namespace.spacing["4xl"]} ${token__namespace.spacing["2xl"]}`,
           ...props.isImagePositionLeft === false && {
             paddingLeft: "0"
           },
@@ -158,7 +157,7 @@ const createTextContent = (props) => {
           }
         },
         [`@container (min-width: ${largeSize}px)`]: {
-          padding: `${Styles__namespace.token.spacing["8xl"]} ${Styles__namespace.token.spacing["6xl"]}`,
+          padding: `${token__namespace.spacing["8xl"]} ${token__namespace.spacing["6xl"]}`,
           ...props.isImagePositionLeft === false && {
             paddingLeft: "0"
           },
@@ -176,7 +175,7 @@ const createTextContent = (props) => {
       element: {
         zIndex: "99",
         ...props.includesAnimation && {
-          ...media.withViewTimelineAnimation({
+          ...styles.withViewTimelineAnimation({
             opacity: "0",
             transform: "translateY(100px)",
             transition: "opacity 1s, transform 1s",
@@ -195,10 +194,10 @@ const createTextContent = (props) => {
 };
 const createBackground = (props) => {
   const getBackgroundColor = () => {
-    if (props.isThemeDark) return Styles__namespace.token.color.black;
-    if (props.isThemeLight) return Styles__namespace.token.color.gray.lighter;
-    if (props.isThemeMaryland) return Styles__namespace.token.color.red;
-    return Styles__namespace.token.color.white;
+    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;
   };
   return index.createDiv({
     className: "pathway-overlay-container-background",
@@ -207,15 +206,15 @@ const createBackground = (props) => {
         position: "absolute",
         top: "0",
         bottom: "0",
-        right: `-${Styles__namespace.token.spacing.xl}`,
-        width: `calc(100% + ${Styles__namespace.token.spacing["6xl"]})`,
+        right: `-${token__namespace.spacing.xl}`,
+        width: `calc(100% + ${token__namespace.spacing["6xl"]})`,
         backgroundColor: getBackgroundColor(),
         [`@container (min-width: ${mediumSize}px)`]: {
           ...props.includesAnimation && {
             animationTimeline: "view()",
             animationRangeStart: "entry",
             animationRangeEnd: "contain",
-            ...media.withViewTimelineAnimation({
+            ...styles.withViewTimelineAnimation({
               width: "calc(75% + 1000px)",
               ...props.isImagePositionLeft === true && {
                 right: "-1000px",
@@ -254,7 +253,7 @@ const createLock = (props) => {
           gridTemplateColumns: "1fr 1fr",
           alignItems: "center",
           ...isThemeApplied && {
-            padding: `${Styles__namespace.token.spacing["6xl"]} 0`
+            padding: `${token__namespace.spacing["6xl"]} 0`
           }
         }
       }

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

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../../source/composite/pathway/overlay.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Atomic from 'atomic';\nimport { ElementModel } from 'model';\nimport { theme } from 'utilities';\nimport { createTextLockupMedium, createAssetContent } from './_common';\nimport { type PathwayOverlayProps } from './_types';\nimport { type ElementVisual } 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): ElementVisual | null => {\n  const { image, video, includesAnimation, isImagePositionLeft } = props;\n\n  if (!image && !video) return null;\n\n  return ElementModel.createDiv({\n    className: REF_IMAGE_ELEMENT,\n    children: [createAssetContent(props)],\n    elementStyles: {\n      element: {\n        position: 'relative',\n        height: '100%',\n\n        ...(includesAnimation && {\n          ...theme.media.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  });\n};\n\nconst createTextContent = (props: PathwayOverlayProps): ElementVisual => {\n  const wrapper = ElementModel.createDiv({\n    className: 'pathway-text-container-wrapper',\n    children: [createTextLockupMedium(props)],\n    elementStyles: {\n      element: {\n        padding: `${Styles.token.spacing.md} 0`,\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          ...Styles.layout.space.horizontal.larger,\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          padding: `${Styles.token.spacing['4xl']} ${Styles.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: `${Styles.token.spacing['8xl']} ${Styles.token.spacing['6xl']}`,\n\n          ...(props.isImagePositionLeft === false && {\n            paddingLeft: '0',\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: '0',\n          }),\n        },\n      },\n    },\n  });\n\n  const container = ElementModel.createDiv({\n    className: REF_TEXT_ELEMENT,\n    children: [wrapper],\n    elementStyles: {\n      element: {\n        zIndex: '99',\n\n        ...(props.includesAnimation && {\n          ...theme.media.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  });\n\n  return container;\n};\n\nconst createBackground = (props: PathwayOverlayProps): ElementVisual => {\n  const getBackgroundColor = () => {\n    if (props.isThemeDark) return Styles.token.color.black;\n    if (props.isThemeLight) return Styles.token.color.gray.lighter;\n    if (props.isThemeMaryland) return Styles.token.color.red;\n    return Styles.token.color.white;\n  };\n\n  return ElementModel.createDiv({\n    className: 'pathway-overlay-container-background',\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: '0',\n        bottom: '0',\n        right: `-${Styles.token.spacing.xl}`,\n        width: `calc(100% + ${Styles.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            ...theme.media.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  });\n};\n\nconst createLock = (props: PathwayOverlayProps) => {\n  const children = [\n    createBackground(props),\n    createAssetColumn(props),\n    createTextContent(props),\n  ].filter((item): item is ElementVisual => item !== null);\n  const isThemeApplied =\n    props.isThemeDark || props.isThemeLight || props.isThemeMaryland;\n\n  const lockWrapper = ElementModel.createDiv({\n    className: 'pathway-overlay-container-lock-wrapper',\n    children,\n    elementStyles: {\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: `${Styles.token.spacing['6xl']} 0`,\n          }),\n        },\n      },\n    },\n  });\n\n  return ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [lockWrapper],\n    elementStyles: {\n      element: {\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingLeft: 0,\n          paddingRight: 0,\n        },\n      },\n    },\n  });\n};\n\nexport default (props: PathwayOverlayProps) => {\n  const composite = ElementModel.createDiv({\n    className: 'pathway-overlay-container',\n    children: [\n      ElementModel.createDiv({\n        className: 'pathway-overlay-container-wrapper',\n        children: [createLock(props)],\n      }),\n    ],\n    elementStyles: {\n      element: {\n        container: 'inline-size',\n        position: 'relative',\n        overflow: 'clip',\n      },\n    },\n  });\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","ElementModel.createDiv","createAssetContent","theme.media.withViewTimelineAnimation","createTextLockupMedium","Styles","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
+{"version":3,"file":"overlay.js","sources":["../../../source/composite/pathway/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { createTextLockupMedium, createAssetContent } from './_common';\nimport { type PathwayOverlayProps } from './_types';\nimport { type ElementVisual } 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): ElementVisual | null => {\n  const { image, video, includesAnimation, isImagePositionLeft } = props;\n\n  if (!image && !video) return null;\n\n  return ElementModel.createDiv({\n    className: REF_IMAGE_ELEMENT,\n    children: [createAssetContent(props)],\n    elementStyles: {\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  });\n};\n\nconst createTextContent = (props: PathwayOverlayProps): ElementVisual => {\n  const wrapper = ElementModel.createDiv({\n    className: 'pathway-text-container-wrapper',\n    children: [createTextLockupMedium(props)],\n    elementStyles: {\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  });\n\n  const container = ElementModel.createDiv({\n    className: REF_TEXT_ELEMENT,\n    children: [wrapper],\n    elementStyles: {\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  });\n\n  return container;\n};\n\nconst createBackground = (props: PathwayOverlayProps): ElementVisual => {\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 ElementModel.createDiv({\n    className: 'pathway-overlay-container-background',\n    elementStyles: {\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  });\n};\n\nconst createLock = (props: PathwayOverlayProps) => {\n  const children = [\n    createBackground(props),\n    createAssetColumn(props),\n    createTextContent(props),\n  ].filter((item): item is ElementVisual => item !== null);\n  const isThemeApplied =\n    props.isThemeDark || props.isThemeLight || props.isThemeMaryland;\n\n  const lockWrapper = ElementModel.createDiv({\n    className: 'pathway-overlay-container-lock-wrapper',\n    children,\n    elementStyles: {\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\n  return ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [lockWrapper],\n    elementStyles: {\n      element: {\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingLeft: 0,\n          paddingRight: 0,\n        },\n      },\n    },\n  });\n};\n\nexport default (props: PathwayOverlayProps) => {\n  const composite = ElementModel.createDiv({\n    className: 'pathway-overlay-container',\n    children: [\n      ElementModel.createDiv({\n        className: 'pathway-overlay-container-wrapper',\n        children: [createLock(props)],\n      }),\n    ],\n    elementStyles: {\n      element: {\n        container: 'inline-size',\n        position: 'relative',\n        overflow: 'clip',\n      },\n    },\n  });\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","ElementModel.createDiv","createAssetContent","withViewTimelineAnimation","createTextLockupMedium","token","layout","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}

package/dist/composite/pathway/overlay.mjs

@@ -1,9 +1,7 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import * as layout from "@universityofmaryland/web-styles-library/layout";
+import { withViewTimelineAnimation } from "@universityofmaryland/web-utilities-library/styles";
 import { createDiv } from "../../model/elements/index.mjs";
-import "../../node_modules/postcss/lib/postcss.mjs";
-import "../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../node_modules/postcss-js/index.mjs";
-import { withViewTimelineAnimation } from "../../utilities/theme/media.mjs";
 import { createAssetContent, createTextLockupMedium } from "./_common.mjs";
 import { spaceHorizontalLarger } from "../../model/elements/layout.mjs";
 const REF_TEXT_ELEMENT = "pathway-text-container";
@@ -126,12 +124,12 @@ const createTextContent = (props) => {
     children: [createTextLockupMedium(props)],
     elementStyles: {
       element: {
-        padding: `${Styles.token.spacing.md} 0`,
+        padding: `${token.spacing.md} 0`,
         [`@container (max-width: ${mediumSize - 1}px)`]: {
-          ...Styles.layout.space.horizontal.larger
+          ...layout.space.horizontal.larger
         },
         [`@container (min-width: ${mediumSize}px)`]: {
-          padding: `${Styles.token.spacing["4xl"]} ${Styles.token.spacing["2xl"]}`,
+          padding: `${token.spacing["4xl"]} ${token.spacing["2xl"]}`,
           ...props.isImagePositionLeft === false && {
             paddingLeft: "0"
           },
@@ -140,7 +138,7 @@ const createTextContent = (props) => {
           }
         },
         [`@container (min-width: ${largeSize}px)`]: {
-          padding: `${Styles.token.spacing["8xl"]} ${Styles.token.spacing["6xl"]}`,
+          padding: `${token.spacing["8xl"]} ${token.spacing["6xl"]}`,
           ...props.isImagePositionLeft === false && {
             paddingLeft: "0"
           },
@@ -177,10 +175,10 @@ const createTextContent = (props) => {
 };
 const createBackground = (props) => {
   const getBackgroundColor = () => {
-    if (props.isThemeDark) return Styles.token.color.black;
-    if (props.isThemeLight) return Styles.token.color.gray.lighter;
-    if (props.isThemeMaryland) return Styles.token.color.red;
-    return Styles.token.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 createDiv({
     className: "pathway-overlay-container-background",
@@ -189,8 +187,8 @@ const createBackground = (props) => {
         position: "absolute",
         top: "0",
         bottom: "0",
-        right: `-${Styles.token.spacing.xl}`,
-        width: `calc(100% + ${Styles.token.spacing["6xl"]})`,
+        right: `-${token.spacing.xl}`,
+        width: `calc(100% + ${token.spacing["6xl"]})`,
         backgroundColor: getBackgroundColor(),
         [`@container (min-width: ${mediumSize}px)`]: {
           ...props.includesAnimation && {
@@ -236,7 +234,7 @@ const createLock = (props) => {
           gridTemplateColumns: "1fr 1fr",
           alignItems: "center",
           ...isThemeApplied && {
-            padding: `${Styles.token.spacing["6xl"]} 0`
+            padding: `${token.spacing["6xl"]} 0`
           }
         }
       }

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

@@ -1 +1 @@
-{"version":3,"file":"overlay.mjs","sources":["../../../source/composite/pathway/overlay.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Atomic from 'atomic';\nimport { ElementModel } from 'model';\nimport { theme } from 'utilities';\nimport { createTextLockupMedium, createAssetContent } from './_common';\nimport { type PathwayOverlayProps } from './_types';\nimport { type ElementVisual } 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): ElementVisual | null => {\n  const { image, video, includesAnimation, isImagePositionLeft } = props;\n\n  if (!image && !video) return null;\n\n  return ElementModel.createDiv({\n    className: REF_IMAGE_ELEMENT,\n    children: [createAssetContent(props)],\n    elementStyles: {\n      element: {\n        position: 'relative',\n        height: '100%',\n\n        ...(includesAnimation && {\n          ...theme.media.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  });\n};\n\nconst createTextContent = (props: PathwayOverlayProps): ElementVisual => {\n  const wrapper = ElementModel.createDiv({\n    className: 'pathway-text-container-wrapper',\n    children: [createTextLockupMedium(props)],\n    elementStyles: {\n      element: {\n        padding: `${Styles.token.spacing.md} 0`,\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          ...Styles.layout.space.horizontal.larger,\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          padding: `${Styles.token.spacing['4xl']} ${Styles.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: `${Styles.token.spacing['8xl']} ${Styles.token.spacing['6xl']}`,\n\n          ...(props.isImagePositionLeft === false && {\n            paddingLeft: '0',\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: '0',\n          }),\n        },\n      },\n    },\n  });\n\n  const container = ElementModel.createDiv({\n    className: REF_TEXT_ELEMENT,\n    children: [wrapper],\n    elementStyles: {\n      element: {\n        zIndex: '99',\n\n        ...(props.includesAnimation && {\n          ...theme.media.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  });\n\n  return container;\n};\n\nconst createBackground = (props: PathwayOverlayProps): ElementVisual => {\n  const getBackgroundColor = () => {\n    if (props.isThemeDark) return Styles.token.color.black;\n    if (props.isThemeLight) return Styles.token.color.gray.lighter;\n    if (props.isThemeMaryland) return Styles.token.color.red;\n    return Styles.token.color.white;\n  };\n\n  return ElementModel.createDiv({\n    className: 'pathway-overlay-container-background',\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: '0',\n        bottom: '0',\n        right: `-${Styles.token.spacing.xl}`,\n        width: `calc(100% + ${Styles.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            ...theme.media.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  });\n};\n\nconst createLock = (props: PathwayOverlayProps) => {\n  const children = [\n    createBackground(props),\n    createAssetColumn(props),\n    createTextContent(props),\n  ].filter((item): item is ElementVisual => item !== null);\n  const isThemeApplied =\n    props.isThemeDark || props.isThemeLight || props.isThemeMaryland;\n\n  const lockWrapper = ElementModel.createDiv({\n    className: 'pathway-overlay-container-lock-wrapper',\n    children,\n    elementStyles: {\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: `${Styles.token.spacing['6xl']} 0`,\n          }),\n        },\n      },\n    },\n  });\n\n  return ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [lockWrapper],\n    elementStyles: {\n      element: {\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingLeft: 0,\n          paddingRight: 0,\n        },\n      },\n    },\n  });\n};\n\nexport default (props: PathwayOverlayProps) => {\n  const composite = ElementModel.createDiv({\n    className: 'pathway-overlay-container',\n    children: [\n      ElementModel.createDiv({\n        className: 'pathway-overlay-container-wrapper',\n        children: [createLock(props)],\n      }),\n    ],\n    elementStyles: {\n      element: {\n        container: 'inline-size',\n        position: 'relative',\n        overflow: 'clip',\n      },\n    },\n  });\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","ElementModel.createDiv","theme.media.withViewTimelineAnimation","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
+{"version":3,"file":"overlay.mjs","sources":["../../../source/composite/pathway/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { createTextLockupMedium, createAssetContent } from './_common';\nimport { type PathwayOverlayProps } from './_types';\nimport { type ElementVisual } 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): ElementVisual | null => {\n  const { image, video, includesAnimation, isImagePositionLeft } = props;\n\n  if (!image && !video) return null;\n\n  return ElementModel.createDiv({\n    className: REF_IMAGE_ELEMENT,\n    children: [createAssetContent(props)],\n    elementStyles: {\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  });\n};\n\nconst createTextContent = (props: PathwayOverlayProps): ElementVisual => {\n  const wrapper = ElementModel.createDiv({\n    className: 'pathway-text-container-wrapper',\n    children: [createTextLockupMedium(props)],\n    elementStyles: {\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  });\n\n  const container = ElementModel.createDiv({\n    className: REF_TEXT_ELEMENT,\n    children: [wrapper],\n    elementStyles: {\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  });\n\n  return container;\n};\n\nconst createBackground = (props: PathwayOverlayProps): ElementVisual => {\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 ElementModel.createDiv({\n    className: 'pathway-overlay-container-background',\n    elementStyles: {\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  });\n};\n\nconst createLock = (props: PathwayOverlayProps) => {\n  const children = [\n    createBackground(props),\n    createAssetColumn(props),\n    createTextContent(props),\n  ].filter((item): item is ElementVisual => item !== null);\n  const isThemeApplied =\n    props.isThemeDark || props.isThemeLight || props.isThemeMaryland;\n\n  const lockWrapper = ElementModel.createDiv({\n    className: 'pathway-overlay-container-lock-wrapper',\n    children,\n    elementStyles: {\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\n  return ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [lockWrapper],\n    elementStyles: {\n      element: {\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingLeft: 0,\n          paddingRight: 0,\n        },\n      },\n    },\n  });\n};\n\nexport default (props: PathwayOverlayProps) => {\n  const composite = ElementModel.createDiv({\n    className: 'pathway-overlay-container',\n    children: [\n      ElementModel.createDiv({\n        className: 'pathway-overlay-container-wrapper',\n        children: [createLock(props)],\n      }),\n    ],\n    elementStyles: {\n      element: {\n        container: 'inline-size',\n        position: 'relative',\n        overflow: 'clip',\n      },\n    },\n  });\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","ElementModel.createDiv","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}

package/dist/composite/pathway/standard.js

@@ -1,10 +1,7 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
+const token = require("@universityofmaryland/web-styles-library/token");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
 const index = require("../../model/elements/index.js");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
-const media = require("../../utilities/theme/media.js");
 const _common = require("./_common.js");
 const layout = require("../../model/elements/layout.js");
 function _interopNamespaceDefault(e) {
@@ -23,7 +20,7 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const mediumSize = 800;
 const largeSize = 1200;
 const setupAnimation = (container, textElement, imageElement) => {
@@ -87,7 +84,7 @@ const createAssetColumn = (props) => {
         position: "relative",
         height: "100%",
         ...includesAnimation && {
-          ...media.withViewTimelineAnimation({
+          ...styles.withViewTimelineAnimation({
             opacity: "0",
             transform: "translateY(100px)",
             transition: "opacity 1s, transform 1s",
@@ -117,9 +114,9 @@ const createTextContent = (props) => {
     children: [_common.createTextLockupMedium(props)],
     elementStyles: {
       element: {
-        padding: `${Styles__namespace.token.spacing.md} ${Styles__namespace.token.spacing.lg}`,
+        padding: `${token__namespace.spacing.md} ${token__namespace.spacing.lg}`,
         [`@container (min-width: ${mediumSize}px)`]: {
-          padding: `0 ${Styles__namespace.token.spacing["2xl"]}`,
+          padding: `0 ${token__namespace.spacing["2xl"]}`,
           ...props.isImagePositionLeft === false && {
             paddingLeft: "0"
           },
@@ -128,7 +125,7 @@ const createTextContent = (props) => {
           }
         },
         [`@container (min-width: ${largeSize}px)`]: {
-          padding: `0 ${Styles__namespace.token.spacing["6xl"]}`,
+          padding: `0 ${token__namespace.spacing["6xl"]}`,
           ...props.isImagePositionLeft === false && {
             paddingLeft: "0"
           },
@@ -146,7 +143,7 @@ const createTextContent = (props) => {
       element: {
         container: "inline-size",
         ...props.includesAnimation && {
-          ...media.withViewTimelineAnimation({
+          ...styles.withViewTimelineAnimation({
             opacity: "0",
             transform: "translateY(100px)",
             transition: "opacity 1s, transform 1s",
@@ -154,12 +151,12 @@ const createTextContent = (props) => {
           })
         },
         ...props.isThemeDark && {
-          backgroundColor: Styles__namespace.token.color.black,
-          color: Styles__namespace.token.color.white
+          backgroundColor: token__namespace.color.black,
+          color: token__namespace.color.white
         },
         ...props.isThemeMaryland && {
-          backgroundColor: Styles__namespace.token.color.red,
-          color: Styles__namespace.token.color.white
+          backgroundColor: token__namespace.color.red,
+          color: token__namespace.color.white
         },
         [`@container (min-width: ${mediumSize}px)`]: {
           ...props.isImagePositionLeft === false && {

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

@@ -1 +1 @@
-{"version":3,"file":"standard.js","sources":["../../../source/composite/pathway/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { theme } from 'utilities';\nimport { createTextLockupMedium, createAssetContent } from './_common';\nimport { type ElementVisual } from '../../_types';\nimport { type PathwayStandardProps } 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): ElementVisual | 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 ElementModel.createDiv({\n    className: 'pathway-image-container',\n    children: [createAssetContent(props)],\n    elementStyles: {\n      element: {\n        position: 'relative',\n        height: '100%',\n\n        ...(includesAnimation && {\n          ...theme.media.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  });\n};\n\nconst createTextContent = (props: PathwayStandardProps): ElementVisual => {\n  const wrapper = ElementModel.createDiv({\n    className: 'pathway-text-container-wrapper',\n    children: [createTextLockupMedium(props)],\n    elementStyles: {\n      element: {\n        padding: `${Styles.token.spacing.md} ${Styles.token.spacing.lg}`,\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          padding: `0 ${Styles.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 ${Styles.token.spacing['6xl']}`,\n\n          ...(props.isImagePositionLeft === false && {\n            paddingLeft: '0',\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: '0',\n          }),\n        },\n      },\n    },\n  });\n\n  const container = ElementModel.createDiv({\n    className: 'pathway-text-container',\n    children: [wrapper],\n    elementStyles: {\n      element: {\n        container: 'inline-size',\n\n        ...(props.includesAnimation && {\n          ...theme.media.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: Styles.token.color.black,\n          color: Styles.token.color.white,\n        }),\n\n        ...(props.isThemeMaryland && {\n          backgroundColor: Styles.token.color.red,\n          color: Styles.token.color.white,\n        }),\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          ...(props.isImagePositionLeft === false && {\n            order: '1',\n          }),\n        },\n      },\n    },\n  });\n\n  return container;\n};\n\nconst createLock = (props: PathwayStandardProps) => {\n  const textContent = createTextContent(props);\n  const assetContent = createAssetColumn(props);\n  const children: ElementVisual[] = [];\n\n  if (assetContent) {\n    children.push(assetContent);\n  }\n  children.push(textContent);\n\n  const lockWrapper = ElementModel.createDiv({\n    className: 'pathway-container-lock-wrapper',\n    children,\n    elementStyles: {\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\n  return ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [lockWrapper],\n    elementStyles: {\n      element: {\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingLeft: 0,\n          paddingRight: 0,\n        },\n      },\n    },\n  });\n};\n\nexport default (props: PathwayStandardProps) => {\n  const composite = ElementModel.createDiv({\n    className: 'pathway-container',\n    children: [\n      ElementModel.createDiv({\n        className: 'pathway-container-wrapper',\n        children: [createLock(props)],\n      }),\n    ],\n    elementStyles: {\n      element: {\n        container: 'inline-size',\n        position: 'relative',\n        overflow: 'hidden',\n      },\n    },\n  });\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","ElementModel.createDiv","createAssetContent","theme.media.withViewTimelineAnimation","createTextLockupMedium","Styles","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
+{"version":3,"file":"standard.js","sources":["../../../source/composite/pathway/standard.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { createTextLockupMedium, createAssetContent } from './_common';\nimport { type ElementVisual } from '../../_types';\nimport { type PathwayStandardProps } 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): ElementVisual | 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 ElementModel.createDiv({\n    className: 'pathway-image-container',\n    children: [createAssetContent(props)],\n    elementStyles: {\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  });\n};\n\nconst createTextContent = (props: PathwayStandardProps): ElementVisual => {\n  const wrapper = ElementModel.createDiv({\n    className: 'pathway-text-container-wrapper',\n    children: [createTextLockupMedium(props)],\n    elementStyles: {\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  });\n\n  const container = ElementModel.createDiv({\n    className: 'pathway-text-container',\n    children: [wrapper],\n    elementStyles: {\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  });\n\n  return container;\n};\n\nconst createLock = (props: PathwayStandardProps) => {\n  const textContent = createTextContent(props);\n  const assetContent = createAssetColumn(props);\n  const children: ElementVisual[] = [];\n\n  if (assetContent) {\n    children.push(assetContent);\n  }\n  children.push(textContent);\n\n  const lockWrapper = ElementModel.createDiv({\n    className: 'pathway-container-lock-wrapper',\n    children,\n    elementStyles: {\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\n  return ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [lockWrapper],\n    elementStyles: {\n      element: {\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingLeft: 0,\n          paddingRight: 0,\n        },\n      },\n    },\n  });\n};\n\nexport default (props: PathwayStandardProps) => {\n  const composite = ElementModel.createDiv({\n    className: 'pathway-container',\n    children: [\n      ElementModel.createDiv({\n        className: 'pathway-container-wrapper',\n        children: [createLock(props)],\n      }),\n    ],\n    elementStyles: {\n      element: {\n        container: 'inline-size',\n        position: 'relative',\n        overflow: 'hidden',\n      },\n    },\n  });\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","ElementModel.createDiv","createAssetContent","withViewTimelineAnimation","createTextLockupMedium","token","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}

package/dist/composite/pathway/standard.mjs

@@ -1,9 +1,6 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { withViewTimelineAnimation } from "@universityofmaryland/web-utilities-library/styles";
 import { createDiv } from "../../model/elements/index.mjs";
-import "../../node_modules/postcss/lib/postcss.mjs";
-import "../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../node_modules/postcss-js/index.mjs";
-import { withViewTimelineAnimation } from "../../utilities/theme/media.mjs";
 import { createTextLockupMedium, createAssetContent } from "./_common.mjs";
 import { spaceHorizontalLarger } from "../../model/elements/layout.mjs";
 const mediumSize = 800;
@@ -99,9 +96,9 @@ const createTextContent = (props) => {
     children: [createTextLockupMedium(props)],
     elementStyles: {
       element: {
-        padding: `${Styles.token.spacing.md} ${Styles.token.spacing.lg}`,
+        padding: `${token.spacing.md} ${token.spacing.lg}`,
         [`@container (min-width: ${mediumSize}px)`]: {
-          padding: `0 ${Styles.token.spacing["2xl"]}`,
+          padding: `0 ${token.spacing["2xl"]}`,
           ...props.isImagePositionLeft === false && {
             paddingLeft: "0"
           },
@@ -110,7 +107,7 @@ const createTextContent = (props) => {
           }
         },
         [`@container (min-width: ${largeSize}px)`]: {
-          padding: `0 ${Styles.token.spacing["6xl"]}`,
+          padding: `0 ${token.spacing["6xl"]}`,
           ...props.isImagePositionLeft === false && {
             paddingLeft: "0"
           },
@@ -136,12 +133,12 @@ const createTextContent = (props) => {
           })
         },
         ...props.isThemeDark && {
-          backgroundColor: Styles.token.color.black,
-          color: Styles.token.color.white
+          backgroundColor: token.color.black,
+          color: token.color.white
         },
         ...props.isThemeMaryland && {
-          backgroundColor: Styles.token.color.red,
-          color: Styles.token.color.white
+          backgroundColor: token.color.red,
+          color: token.color.white
         },
         [`@container (min-width: ${mediumSize}px)`]: {
           ...props.isImagePositionLeft === false && {