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

package/dist/composite/pathway/hero.js

@@ -1,21 +1,31 @@
 "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");
+require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-utilities-library/media");
+require("@universityofmaryland/web-utilities-library/dom");
+require("@universityofmaryland/web-icons-library/controls");
+require("@universityofmaryland/web-icons-library/communication");
+require("@universityofmaryland/web-icons-library/files");
+require("@universityofmaryland/web-icons-library/brand");
+require("@universityofmaryland/web-icons-library/arrows");
 require("../../atomic/animations/actions/indicator.js");
 require("../../atomic/animations/brand/chevron-scroll.js");
 require("../../atomic/animations/brand/card-stack.js");
 const background = require("../../atomic/assets/image/background.js");
+require("@universityofmaryland/web-utilities-library/performance");
 const observedAutoPlay = require("../../atomic/assets/video/observed-auto-play.js");
+require("@universityofmaryland/web-icons-library/location");
+require("@universityofmaryland/web-icons-library/calendar");
 require("../../atomic/layout/block/stacked.js");
 require("../../atomic/layout/overlay/modal.js");
 require("../../atomic/layout/person/columns.js");
+require("@universityofmaryland/web-icons-library/social");
 require("../../atomic/text-lockup/date.js");
 const large = require("../../atomic/text-lockup/large.js");
 require("../../atomic/text-lockup/small.js");
+require("@universityofmaryland/web-styles-library/typography");
 const layout = require("../../model/elements/layout.js");
 const headline = require("../../model/elements/headline.js");
 function _interopNamespaceDefault(e) {
@@ -34,7 +44,7 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const BREAK_SMALL = 999;
 const BREAK_MEDIUM = 1e3;
 const BREAK_LARGE = 1300;
@@ -132,7 +142,7 @@ const createAssetColumn = ({
         [`& img, & video`]: {
           [`@container (min-width: ${BREAK_MEDIUM}px)`]: {
             ...includesAnimation && {
-              ...media.withViewTimelineAnimation({
+              ...styles.withViewTimelineAnimation({
                 animation: `pathway-hero-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`
               })
             }
@@ -148,7 +158,7 @@ const createHeadline = (props) => {
   const isOverwriteHeadline = characterCount > 30;
   if (!headline$1) return null;
   const desktopStyles = {
-    [`@container (${Styles__namespace.token.media.queries.desktop.min})`]: {
+    [`@container (${token__namespace.media.queries.desktop.min})`]: {
       ...isOverwriteHeadline && {
         fontSize: "80px"
       }
@@ -156,14 +166,14 @@ const createHeadline = (props) => {
   };
   const elementStyles = {
     element: {
-      color: Styles__namespace.token.color.black,
+      color: token__namespace.color.black,
       margin: "0 auto",
       textTransform: "uppercase",
-      marginTop: `${Styles__namespace.token.spacing.sm}`,
+      marginTop: `${token__namespace.spacing.sm}`,
       ...desktopStyles
     },
     siblingAfter: {
-      marginTop: `${Styles__namespace.token.spacing.md}`
+      marginTop: `${token__namespace.spacing.md}`
     }
   };
   return headline.campaignExtraLarge({
@@ -190,10 +200,10 @@ const createTextWrapper = (props) => index.createDiv({
     element: {
       width: "100%",
       [`@container  (max-width: ${BREAK_SMALL}px)`]: {
-        padding: `${Styles__namespace.token.spacing.md} 0`
+        padding: `${token__namespace.spacing.md} 0`
       },
       [`@container  (min-width: ${BREAK_MEDIUM}px)`]: {
-        padding: `${Styles__namespace.token.spacing["4xl"]} 0`,
+        padding: `${token__namespace.spacing["4xl"]} 0`,
         ...props.isImagePositionLeft && {
           paddingRight: 0
         },
@@ -201,13 +211,13 @@ const createTextWrapper = (props) => index.createDiv({
           paddingLeft: 0
         },
         ...props.includesAnimation && {
-          ...media.withViewTimelineAnimation({
+          ...styles.withViewTimelineAnimation({
             animation: `pathway-hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`
           })
         }
       },
       [`@container  (min-width: ${BREAK_LARGE}px)`]: {
-        padding: `${Styles__namespace.token.spacing["8xl"]} 0`
+        padding: `${token__namespace.spacing["8xl"]} 0`
       }
     }
   }
@@ -223,19 +233,19 @@ const createLockColumn = (props) => layout.spaceHorizontalLarger({
         alignItems: "center",
         minHeight: "720px",
         ...props.isImagePositionLeft && {
-          paddingRight: Styles__namespace.token.spacing["2xl"]
+          paddingRight: token__namespace.spacing["2xl"]
         },
         ...!props.isImagePositionLeft && {
-          paddingLeft: Styles__namespace.token.spacing["2xl"],
+          paddingLeft: token__namespace.spacing["2xl"],
           order: 1
         }
       },
       [`@container (min-width: ${BREAK_LARGE}px)`]: {
         ...!props.isImagePositionLeft && {
-          paddingRight: Styles__namespace.token.spacing["4xl"]
+          paddingRight: token__namespace.spacing["4xl"]
         },
         ...props.isImagePositionLeft && {
-          paddingLeft: Styles__namespace.token.spacing["4xl"]
+          paddingLeft: token__namespace.spacing["4xl"]
         }
       }
     }

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

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

package/dist/composite/pathway/hero.mjs

@@ -1,20 +1,30 @@
-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 "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/controls";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "@universityofmaryland/web-icons-library/arrows";
 import "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../atomic/animations/brand/card-stack.mjs";
 import imageContainer from "../../atomic/assets/image/background.mjs";
+import "@universityofmaryland/web-utilities-library/performance";
 import observedAutoPlay from "../../atomic/assets/video/observed-auto-play.mjs";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
 import "../../atomic/layout/block/stacked.mjs";
 import "../../atomic/layout/overlay/modal.mjs";
 import "../../atomic/layout/person/columns.mjs";
+import "@universityofmaryland/web-icons-library/social";
 import "../../atomic/text-lockup/date.mjs";
 import large from "../../atomic/text-lockup/large.mjs";
 import "../../atomic/text-lockup/small.mjs";
+import "@universityofmaryland/web-styles-library/typography";
 import { spaceHorizontalLarger } from "../../model/elements/layout.mjs";
 import { campaignExtraLarge } from "../../model/elements/headline.mjs";
 const BREAK_SMALL = 999;
@@ -130,7 +140,7 @@ const createHeadline = (props) => {
   const isOverwriteHeadline = characterCount > 30;
   if (!headline) return null;
   const desktopStyles = {
-    [`@container (${Styles.token.media.queries.desktop.min})`]: {
+    [`@container (${token.media.queries.desktop.min})`]: {
       ...isOverwriteHeadline && {
         fontSize: "80px"
       }
@@ -138,14 +148,14 @@ const createHeadline = (props) => {
   };
   const elementStyles = {
     element: {
-      color: Styles.token.color.black,
+      color: token.color.black,
       margin: "0 auto",
       textTransform: "uppercase",
-      marginTop: `${Styles.token.spacing.sm}`,
+      marginTop: `${token.spacing.sm}`,
       ...desktopStyles
     },
     siblingAfter: {
-      marginTop: `${Styles.token.spacing.md}`
+      marginTop: `${token.spacing.md}`
     }
   };
   return campaignExtraLarge({
@@ -172,10 +182,10 @@ const createTextWrapper = (props) => createDiv({
     element: {
       width: "100%",
       [`@container  (max-width: ${BREAK_SMALL}px)`]: {
-        padding: `${Styles.token.spacing.md} 0`
+        padding: `${token.spacing.md} 0`
       },
       [`@container  (min-width: ${BREAK_MEDIUM}px)`]: {
-        padding: `${Styles.token.spacing["4xl"]} 0`,
+        padding: `${token.spacing["4xl"]} 0`,
         ...props.isImagePositionLeft && {
           paddingRight: 0
         },
@@ -189,7 +199,7 @@ const createTextWrapper = (props) => createDiv({
         }
       },
       [`@container  (min-width: ${BREAK_LARGE}px)`]: {
-        padding: `${Styles.token.spacing["8xl"]} 0`
+        padding: `${token.spacing["8xl"]} 0`
       }
     }
   }
@@ -205,19 +215,19 @@ const createLockColumn = (props) => spaceHorizontalLarger({
         alignItems: "center",
         minHeight: "720px",
         ...props.isImagePositionLeft && {
-          paddingRight: Styles.token.spacing["2xl"]
+          paddingRight: token.spacing["2xl"]
         },
         ...!props.isImagePositionLeft && {
-          paddingLeft: Styles.token.spacing["2xl"],
+          paddingLeft: token.spacing["2xl"],
           order: 1
         }
       },
       [`@container (min-width: ${BREAK_LARGE}px)`]: {
         ...!props.isImagePositionLeft && {
-          paddingRight: Styles.token.spacing["4xl"]
+          paddingRight: token.spacing["4xl"]
         },
         ...props.isImagePositionLeft && {
-          paddingLeft: Styles.token.spacing["4xl"]
+          paddingLeft: token.spacing["4xl"]
         }
       }
     }

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

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

package/dist/composite/pathway/highlight.js

@@ -1,5 +1,5 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
+const token = require("@universityofmaryland/web-styles-library/token");
 const index = require("../../model/elements/index.js");
 const _common = require("./_common.js");
 const layout = require("../../model/elements/layout.js");
@@ -20,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 = 1e3;
 const largeSize = 1200;
 const createTextContent = (props) => {
@@ -44,21 +44,21 @@ const createTextContent = (props) => {
         alignItems: "center",
         zIndex: "99",
         ...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 (max-width: ${mediumSize - 1}px)`]: {
-          paddingBottom: Styles__namespace.token.spacing.md
+          paddingBottom: token__namespace.spacing.md
         },
         [`@container (min-width: ${mediumSize}px)`]: {
-          paddingRight: Styles__namespace.token.spacing["4xl"]
+          paddingRight: token__namespace.spacing["4xl"]
         },
         [`@container (min-width: ${largeSize}px)`]: {
-          paddingRight: Styles__namespace.token.spacing["6xl"]
+          paddingRight: token__namespace.spacing["6xl"]
         }
       }
     }
@@ -78,7 +78,7 @@ const createHighlightColumn = ({
         isThemeDark,
         elementStyles: {
           element: {
-            color: Styles__namespace.token.color.black,
+            color: token__namespace.color.black,
             fontWeight: "700"
           }
         }
@@ -92,7 +92,7 @@ const createHighlightColumn = ({
         isThemeDark,
         elementStyles: {
           element: {
-            marginTop: Styles__namespace.token.spacing.sm
+            marginTop: token__namespace.spacing.sm
           }
         }
       })
@@ -104,16 +104,16 @@ const createHighlightColumn = ({
     elementStyles: {
       element: {
         [`@container (min-width: ${mediumSize}px)`]: {
-          paddingLeft: Styles__namespace.token.spacing["xl"],
+          paddingLeft: token__namespace.spacing["xl"],
           position: "relative"
         },
         "&:before": {
           content: "''",
           position: "absolute",
-          backgroundColor: Styles__namespace.token.color.red,
+          backgroundColor: token__namespace.color.red,
           [`@container (max-width: ${mediumSize - 1}px)`]: {
-            top: Styles__namespace.token.spacing["2xl"],
-            width: Styles__namespace.token.spacing["5xl"],
+            top: token__namespace.spacing["2xl"],
+            width: token__namespace.spacing["5xl"],
             height: "2px"
           },
           [`@container (min-width: ${mediumSize}px)`]: {
@@ -130,19 +130,19 @@ const createHighlightColumn = ({
     children: [wrapper],
     elementStyles: {
       element: {
-        backgroundColor: Styles__namespace.token.color.gray.lightest,
+        backgroundColor: token__namespace.color.gray.lightest,
         position: "relative",
-        padding: `${Styles__namespace.token.spacing["5xl"]} ${Styles__namespace.token.spacing.md} ${Styles__namespace.token.spacing.md} ${Styles__namespace.token.spacing.md}`,
+        padding: `${token__namespace.spacing["5xl"]} ${token__namespace.spacing.md} ${token__namespace.spacing.md} ${token__namespace.spacing.md}`,
         [`@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"]}`
         },
         [`@container (min-width: ${largeSize}px)`]: {
-          padding: `${Styles__namespace.token.spacing["8xl"]} ${Styles__namespace.token.spacing["xl"]}`
+          padding: `${token__namespace.spacing["8xl"]} ${token__namespace.spacing["xl"]}`
         },
         ...isThemeDark && {
-          backgroundColor: Styles__namespace.token.color.gray.darker,
+          backgroundColor: token__namespace.color.gray.darker,
           [`& *`]: {
-            color: Styles__namespace.token.color.white
+            color: token__namespace.color.white
           }
         }
       }

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

@@ -1 +1 @@
-{"version":3,"file":"highlight.js","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","createTextLockupMedium","Styles","ElementModel.headline.sansLarger","ElementModel.headline.sansMedium","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
+{"version":3,"file":"highlight.js","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","createTextLockupMedium","token","ElementModel.headline.sansLarger","ElementModel.headline.sansMedium","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}

package/dist/composite/pathway/highlight.mjs

@@ -1,4 +1,4 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
+import * as token from "@universityofmaryland/web-styles-library/token";
 import { createDiv } from "../../model/elements/index.mjs";
 import { createTextLockupMedium } from "./_common.mjs";
 import { spaceHorizontalLarger } from "../../model/elements/layout.mjs";
@@ -26,21 +26,21 @@ const createTextContent = (props) => {
         alignItems: "center",
         zIndex: "99",
         ...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 (max-width: ${mediumSize - 1}px)`]: {
-          paddingBottom: Styles.token.spacing.md
+          paddingBottom: token.spacing.md
         },
         [`@container (min-width: ${mediumSize}px)`]: {
-          paddingRight: Styles.token.spacing["4xl"]
+          paddingRight: token.spacing["4xl"]
         },
         [`@container (min-width: ${largeSize}px)`]: {
-          paddingRight: Styles.token.spacing["6xl"]
+          paddingRight: token.spacing["6xl"]
         }
       }
     }
@@ -60,7 +60,7 @@ const createHighlightColumn = ({
         isThemeDark,
         elementStyles: {
           element: {
-            color: Styles.token.color.black,
+            color: token.color.black,
             fontWeight: "700"
           }
         }
@@ -74,7 +74,7 @@ const createHighlightColumn = ({
         isThemeDark,
         elementStyles: {
           element: {
-            marginTop: Styles.token.spacing.sm
+            marginTop: token.spacing.sm
           }
         }
       })
@@ -86,16 +86,16 @@ const createHighlightColumn = ({
     elementStyles: {
       element: {
         [`@container (min-width: ${mediumSize}px)`]: {
-          paddingLeft: Styles.token.spacing["xl"],
+          paddingLeft: token.spacing["xl"],
           position: "relative"
         },
         "&:before": {
           content: "''",
           position: "absolute",
-          backgroundColor: Styles.token.color.red,
+          backgroundColor: token.color.red,
           [`@container (max-width: ${mediumSize - 1}px)`]: {
-            top: Styles.token.spacing["2xl"],
-            width: Styles.token.spacing["5xl"],
+            top: token.spacing["2xl"],
+            width: token.spacing["5xl"],
             height: "2px"
           },
           [`@container (min-width: ${mediumSize}px)`]: {
@@ -112,19 +112,19 @@ const createHighlightColumn = ({
     children: [wrapper],
     elementStyles: {
       element: {
-        backgroundColor: Styles.token.color.gray.lightest,
+        backgroundColor: token.color.gray.lightest,
         position: "relative",
-        padding: `${Styles.token.spacing["5xl"]} ${Styles.token.spacing.md} ${Styles.token.spacing.md} ${Styles.token.spacing.md}`,
+        padding: `${token.spacing["5xl"]} ${token.spacing.md} ${token.spacing.md} ${token.spacing.md}`,
         [`@container (min-width: ${mediumSize}px)`]: {
-          padding: `${Styles.token.spacing["4xl"]} ${Styles.token.spacing["2xl"]}`
+          padding: `${token.spacing["4xl"]} ${token.spacing["2xl"]}`
         },
         [`@container (min-width: ${largeSize}px)`]: {
-          padding: `${Styles.token.spacing["8xl"]} ${Styles.token.spacing["xl"]}`
+          padding: `${token.spacing["8xl"]} ${token.spacing["xl"]}`
         },
         ...isThemeDark && {
-          backgroundColor: Styles.token.color.gray.darker,
+          backgroundColor: token.color.gray.darker,
           [`& *`]: {
-            color: Styles.token.color.white
+            color: token.color.white
           }
         }
       }