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

package/dist/composite/hero/custom/video-arrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"video-arrow.js","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport { animations, assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\n// Extend base type to add animation property and ensure video is required\ninterface HeroVideoArrowProps extends Omit<BaseHeroVideoArrowProps, 'video'> {\n  video: HTMLVideoElement;\n  isAnimationOnLoad?: boolean;\n}\n\nconst OVERLAY_CLASS = 'hero-logo-brand-text-overlay';\n\nconst ANIMATION_CONFIG = {\n  TEXT_FADE: {\n    DURATION: '1000ms',\n    EASING: 'ease-in-out',\n    HEADLINE_DELAY: '600ms',\n    TEXT_DELAY: '1500ms',\n  },\n  OVERLAY_FADE: {\n    DURATION: '1500ms',\n    EASING: 'ease-in-out',\n  },\n} as const;\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  if (!headline) return null;\n\n  return ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.HEADLINE_DELAY,\n        textWrap: 'balance',\n      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.md,\n      },\n    },\n  });\n};\n\nconst createText = (text?: HTMLElement | null) => {\n  if (!text) return null;\n\n  return ElementModel.richText.simpleLargest({\n    element: text,\n    elementStyles: {\n      element: {\n        maxWidth: '720px',\n        marginLeft: 'auto',\n        marginRight: 'auto',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.TEXT_DELAY,\n\n        [`@media (max-width: 649px)`]: {\n          display: 'none',\n        },\n      },\n    },\n  });\n};\n\nconst createTextChildren = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n): ElementVisual[] => {\n  const { headline, text } = props;\n  const children: ElementVisual[] = [];\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  const textElement = createText(text);\n  if (textElement) {\n    children.push(textElement);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n) => {\n  const children = createTextChildren(props);\n\n  if (children.length === 0) return null;\n\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-text-container',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: 99,\n        textAlign: 'center',\n        width: `calc(100% - 24px)`,\n        maxWidth: '950px',\n        padding: `${Styles.token.spacing.xl} ${Styles.token.spacing.md}`,\n\n        ['& *']: {\n          color: Styles.token.color.white,\n        },\n      },\n    },\n  });\n\n  return ElementModel.create({\n    element: document.createElement('div'),\n    className: OVERLAY_CLASS,\n    children: [container],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        backgroundColor: 'rgba(0, 0, 0, 0.6)',\n        zIndex: 98,\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.OVERLAY_FADE.DURATION} ${ANIMATION_CONFIG.OVERLAY_FADE.EASING}`,\n      },\n    },\n  });\n};\n\nconst createVideo = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n    additionalElementStyles: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n    },\n  });\n};\n\nconst createAnimationSequence = (container: HTMLElement) => {\n  return () => {\n    const overlay = container.querySelector(\n      `.${OVERLAY_CLASS}`,\n    ) as HTMLDivElement;\n    const headline = container.querySelector(\n      `.${Styles.typography.campaign.fonts.extraLarge.className}`,\n    ) as HTMLDivElement;\n    const text = container.querySelector(\n      `.${Styles.element.text.rich.simpleLargest.className}`,\n    ) as HTMLDivElement;\n\n    if (overlay) overlay.style.opacity = '1';\n    if (headline) headline.style.opacity = '1';\n    if (text) text.style.opacity = '1';\n  };\n};\n\nconst createEventHandlers = (\n  composite: ElementVisual,\n  overlay: ReturnType<typeof animations.brand.chevronFlow>,\n) => {\n  const eventResize = () => {\n    if (composite.element.offsetHeight > window.innerHeight) {\n      composite.element.style.height = `${window.innerHeight * 0.9}px`;\n    }\n  };\n\n  const eventLoad = () => {\n    overlay.events.load();\n    eventResize();\n  };\n\n  window.addEventListener(\n    'resize',\n    Utils.performance.debounce(eventResize, 20),\n  );\n\n  return { load: eventLoad };\n};\n\nexport default (props: HeroVideoArrowProps) => {\n  const { video, isAnimationOnLoad } = props;\n\n  const composite = ElementModel.create({\n    element: document.createElement('section'),\n    className: 'umd-element-hero-brand-video',\n    elementStyles: {\n      element: {\n        aspectRatio: '16 / 9',\n        width: '100%',\n      },\n    },\n  });\n\n  const videoElement = createVideo(video);\n  const textContainer = createTextContainer(props);\n\n  const wrapperChildren: ElementVisual[] = [videoElement];\n  if (textContainer) {\n    wrapperChildren.push(textContainer);\n  }\n\n  const wrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-video-wrapper',\n    children: wrapperChildren,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        position: 'relative',\n        overflow: 'hidden',\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      },\n    },\n  });\n\n  const overlay = animations.brand.chevronFlow({\n    sizedContainer: composite.element,\n    sizedWrapper: wrapper.element,\n    completedCallback: createAnimationSequence(composite.element),\n    isAnimationOnLoad,\n  });\n\n  wrapper.element.appendChild(overlay.element);\n  wrapper.styles += overlay.styles;\n\n  composite.element.appendChild(wrapper.element);\n  composite.styles += wrapper.styles;\n\n  const events = createEventHandlers(composite, overlay);\n\n  return {\n    ...composite,\n    events,\n  };\n};\n"],"names":["headline","ElementModel.headline.campaignExtraLarge","Styles","ElementModel.richText.simpleLargest","ElementModel.create","assets.video.observedAutoPlay","Utils.performance.debounce","animations.brand.chevronFlow"],"mappings":"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"}
+{"version":3,"file":"video-arrow.js","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { ElementModel } from 'model';\nimport { animations, assets } from 'atomic';\nimport { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\ninterface HeroVideoArrowProps extends Omit<BaseHeroVideoArrowProps, 'video'> {\n  video: HTMLVideoElement;\n  isAnimationOnLoad?: boolean;\n}\n\nconst OVERLAY_CLASS = 'hero-logo-brand-text-overlay';\n\nconst ANIMATION_CONFIG = {\n  TEXT_FADE: {\n    DURATION: '1000ms',\n    EASING: 'ease-in-out',\n    HEADLINE_DELAY: '600ms',\n    TEXT_DELAY: '1500ms',\n  },\n  OVERLAY_FADE: {\n    DURATION: '1500ms',\n    EASING: 'ease-in-out',\n  },\n} as const;\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  if (!headline) return null;\n\n  return ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.HEADLINE_DELAY,\n        textWrap: 'balance',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    },\n  });\n};\n\nconst createText = (text?: HTMLElement | null) => {\n  if (!text) return null;\n\n  return ElementModel.richText.simpleLargest({\n    element: text,\n    elementStyles: {\n      element: {\n        maxWidth: '720px',\n        marginLeft: 'auto',\n        marginRight: 'auto',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.TEXT_DELAY,\n\n        [`@media (max-width: 649px)`]: {\n          display: 'none',\n        },\n      },\n    },\n  });\n};\n\nconst createTextChildren = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n): ElementVisual[] => {\n  const { headline, text } = props;\n  const children: ElementVisual[] = [];\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  const textElement = createText(text);\n  if (textElement) {\n    children.push(textElement);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n) => {\n  const children = createTextChildren(props);\n\n  if (children.length === 0) return null;\n\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-text-container',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: 99,\n        textAlign: 'center',\n        width: `calc(100% - 24px)`,\n        maxWidth: '950px',\n        padding: `${token.spacing.xl} ${token.spacing.md}`,\n\n        ['& *']: {\n          color: token.color.white,\n        },\n      },\n    },\n  });\n\n  return ElementModel.create({\n    element: document.createElement('div'),\n    className: OVERLAY_CLASS,\n    children: [container],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        backgroundColor: 'rgba(0, 0, 0, 0.6)',\n        zIndex: 98,\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.OVERLAY_FADE.DURATION} ${ANIMATION_CONFIG.OVERLAY_FADE.EASING}`,\n      },\n    },\n  });\n};\n\nconst createVideo = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n    additionalElementStyles: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n    },\n  });\n};\n\nconst createAnimationSequence = (container: HTMLElement) => {\n  return () => {\n    const overlay = container.querySelector(\n      `.${OVERLAY_CLASS}`,\n    ) as HTMLDivElement;\n    const headline = container.querySelector(\n      `.${typography.campaign.fonts.extraLarge.className}`,\n    ) as HTMLDivElement;\n    const text = container.querySelector(\n      `.${elementStyles.text.rich.simpleLargest.className}`,\n    ) as HTMLDivElement;\n\n    if (overlay) overlay.style.opacity = '1';\n    if (headline) headline.style.opacity = '1';\n    if (text) text.style.opacity = '1';\n  };\n};\n\nconst createEventHandlers = (\n  composite: ElementVisual,\n  overlay: ReturnType<typeof animations.brand.chevronFlow>,\n) => {\n  const eventResize = () => {\n    if (composite.element.offsetHeight > window.innerHeight) {\n      composite.element.style.height = `${window.innerHeight * 0.9}px`;\n    }\n  };\n\n  const eventLoad = () => {\n    overlay.events.load();\n    eventResize();\n  };\n\n  window.addEventListener('resize', debounce(eventResize, 20));\n\n  return { load: eventLoad };\n};\n\nexport default (props: HeroVideoArrowProps) => {\n  const { video, isAnimationOnLoad } = props;\n\n  const composite = ElementModel.create({\n    element: document.createElement('section'),\n    className: 'umd-element-hero-brand-video',\n    elementStyles: {\n      element: {\n        aspectRatio: '16 / 9',\n        width: '100%',\n      },\n    },\n  });\n\n  const videoElement = createVideo(video);\n  const textContainer = createTextContainer(props);\n\n  const wrapperChildren: ElementVisual[] = [videoElement];\n  if (textContainer) {\n    wrapperChildren.push(textContainer);\n  }\n\n  const wrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-video-wrapper',\n    children: wrapperChildren,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        position: 'relative',\n        overflow: 'hidden',\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      },\n    },\n  });\n\n  const overlay = animations.brand.chevronFlow({\n    sizedContainer: composite.element,\n    sizedWrapper: wrapper.element,\n    completedCallback: createAnimationSequence(composite.element),\n    isAnimationOnLoad,\n  });\n\n  wrapper.element.appendChild(overlay.element);\n  wrapper.styles += overlay.styles;\n\n  composite.element.appendChild(wrapper.element);\n  composite.styles += wrapper.styles;\n\n  const events = createEventHandlers(composite, overlay);\n\n  return {\n    ...composite,\n    events,\n  };\n};\n"],"names":["headline","ElementModel.headline.campaignExtraLarge","token","ElementModel.richText.simpleLargest","ElementModel.create","assets.video.observedAutoPlay","typography","elementStyles","debounce","animations.brand.chevronFlow"],"mappings":"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"}

package/dist/composite/hero/custom/video-arrow.mjs

@@ -1,17 +1,26 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
-import { debounce } from "../../../utilities/performance/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 * as token from "@universityofmaryland/web-styles-library/token";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import { debounce } from "@universityofmaryland/web-utilities-library/performance";
 import { create } from "../../../model/elements/index.mjs";
+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 chevronFlow from "../../../atomic/animations/brand/chevron-flow.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../../atomic/animations/brand/card-stack.mjs";
 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 "../../../atomic/text-lockup/small.mjs";
 import { campaignExtraLarge } from "../../../model/elements/headline.mjs";
@@ -42,7 +51,7 @@ const createHeadline = (headline) => {
         textWrap: "balance"
       },
       siblingAfter: {
-        marginTop: Styles.token.spacing.md
+        marginTop: token.spacing.md
       }
     }
   });
@@ -92,9 +101,9 @@ const createTextContainer = (props) => {
         textAlign: "center",
         width: `calc(100% - 24px)`,
         maxWidth: "950px",
-        padding: `${Styles.token.spacing.xl} ${Styles.token.spacing.md}`,
+        padding: `${token.spacing.xl} ${token.spacing.md}`,
         ["& *"]: {
-          color: Styles.token.color.white
+          color: token.color.white
         }
       }
     }
@@ -137,10 +146,10 @@ const createAnimationSequence = (container) => {
       `.${OVERLAY_CLASS}`
     );
     const headline = container.querySelector(
-      `.${Styles.typography.campaign.fonts.extraLarge.className}`
+      `.${typography.campaign.fonts.extraLarge.className}`
     );
     const text = container.querySelector(
-      `.${Styles.element.text.rich.simpleLargest.className}`
+      `.${elementStyles.text.rich.simpleLargest.className}`
     );
     if (overlay) overlay.style.opacity = "1";
     if (headline) headline.style.opacity = "1";
@@ -157,10 +166,7 @@ const createEventHandlers = (composite, overlay) => {
     overlay.events.load();
     eventResize();
   };
-  window.addEventListener(
-    "resize",
-    debounce(eventResize, 20)
-  );
+  window.addEventListener("resize", debounce(eventResize, 20));
   return { load: eventLoad };
 };
 const videoArrow = (props) => {

package/dist/composite/hero/custom/video-arrow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"video-arrow.mjs","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport { animations, assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\n// Extend base type to add animation property and ensure video is required\ninterface HeroVideoArrowProps extends Omit<BaseHeroVideoArrowProps, 'video'> {\n  video: HTMLVideoElement;\n  isAnimationOnLoad?: boolean;\n}\n\nconst OVERLAY_CLASS = 'hero-logo-brand-text-overlay';\n\nconst ANIMATION_CONFIG = {\n  TEXT_FADE: {\n    DURATION: '1000ms',\n    EASING: 'ease-in-out',\n    HEADLINE_DELAY: '600ms',\n    TEXT_DELAY: '1500ms',\n  },\n  OVERLAY_FADE: {\n    DURATION: '1500ms',\n    EASING: 'ease-in-out',\n  },\n} as const;\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  if (!headline) return null;\n\n  return ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.HEADLINE_DELAY,\n        textWrap: 'balance',\n      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.md,\n      },\n    },\n  });\n};\n\nconst createText = (text?: HTMLElement | null) => {\n  if (!text) return null;\n\n  return ElementModel.richText.simpleLargest({\n    element: text,\n    elementStyles: {\n      element: {\n        maxWidth: '720px',\n        marginLeft: 'auto',\n        marginRight: 'auto',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.TEXT_DELAY,\n\n        [`@media (max-width: 649px)`]: {\n          display: 'none',\n        },\n      },\n    },\n  });\n};\n\nconst createTextChildren = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n): ElementVisual[] => {\n  const { headline, text } = props;\n  const children: ElementVisual[] = [];\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  const textElement = createText(text);\n  if (textElement) {\n    children.push(textElement);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n) => {\n  const children = createTextChildren(props);\n\n  if (children.length === 0) return null;\n\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-text-container',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: 99,\n        textAlign: 'center',\n        width: `calc(100% - 24px)`,\n        maxWidth: '950px',\n        padding: `${Styles.token.spacing.xl} ${Styles.token.spacing.md}`,\n\n        ['& *']: {\n          color: Styles.token.color.white,\n        },\n      },\n    },\n  });\n\n  return ElementModel.create({\n    element: document.createElement('div'),\n    className: OVERLAY_CLASS,\n    children: [container],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        backgroundColor: 'rgba(0, 0, 0, 0.6)',\n        zIndex: 98,\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.OVERLAY_FADE.DURATION} ${ANIMATION_CONFIG.OVERLAY_FADE.EASING}`,\n      },\n    },\n  });\n};\n\nconst createVideo = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n    additionalElementStyles: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n    },\n  });\n};\n\nconst createAnimationSequence = (container: HTMLElement) => {\n  return () => {\n    const overlay = container.querySelector(\n      `.${OVERLAY_CLASS}`,\n    ) as HTMLDivElement;\n    const headline = container.querySelector(\n      `.${Styles.typography.campaign.fonts.extraLarge.className}`,\n    ) as HTMLDivElement;\n    const text = container.querySelector(\n      `.${Styles.element.text.rich.simpleLargest.className}`,\n    ) as HTMLDivElement;\n\n    if (overlay) overlay.style.opacity = '1';\n    if (headline) headline.style.opacity = '1';\n    if (text) text.style.opacity = '1';\n  };\n};\n\nconst createEventHandlers = (\n  composite: ElementVisual,\n  overlay: ReturnType<typeof animations.brand.chevronFlow>,\n) => {\n  const eventResize = () => {\n    if (composite.element.offsetHeight > window.innerHeight) {\n      composite.element.style.height = `${window.innerHeight * 0.9}px`;\n    }\n  };\n\n  const eventLoad = () => {\n    overlay.events.load();\n    eventResize();\n  };\n\n  window.addEventListener(\n    'resize',\n    Utils.performance.debounce(eventResize, 20),\n  );\n\n  return { load: eventLoad };\n};\n\nexport default (props: HeroVideoArrowProps) => {\n  const { video, isAnimationOnLoad } = props;\n\n  const composite = ElementModel.create({\n    element: document.createElement('section'),\n    className: 'umd-element-hero-brand-video',\n    elementStyles: {\n      element: {\n        aspectRatio: '16 / 9',\n        width: '100%',\n      },\n    },\n  });\n\n  const videoElement = createVideo(video);\n  const textContainer = createTextContainer(props);\n\n  const wrapperChildren: ElementVisual[] = [videoElement];\n  if (textContainer) {\n    wrapperChildren.push(textContainer);\n  }\n\n  const wrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-video-wrapper',\n    children: wrapperChildren,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        position: 'relative',\n        overflow: 'hidden',\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      },\n    },\n  });\n\n  const overlay = animations.brand.chevronFlow({\n    sizedContainer: composite.element,\n    sizedWrapper: wrapper.element,\n    completedCallback: createAnimationSequence(composite.element),\n    isAnimationOnLoad,\n  });\n\n  wrapper.element.appendChild(overlay.element);\n  wrapper.styles += overlay.styles;\n\n  composite.element.appendChild(wrapper.element);\n  composite.styles += wrapper.styles;\n\n  const events = createEventHandlers(composite, overlay);\n\n  return {\n    ...composite,\n    events,\n  };\n};\n"],"names":["ElementModel.headline.campaignExtraLarge","ElementModel.richText.simpleLargest","ElementModel.create","assets.video.observedAutoPlay","Utils.performance.debounce","animations.brand.chevronFlow"],"mappings":"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"}
+{"version":3,"file":"video-arrow.mjs","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { ElementModel } from 'model';\nimport { animations, assets } from 'atomic';\nimport { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\ninterface HeroVideoArrowProps extends Omit<BaseHeroVideoArrowProps, 'video'> {\n  video: HTMLVideoElement;\n  isAnimationOnLoad?: boolean;\n}\n\nconst OVERLAY_CLASS = 'hero-logo-brand-text-overlay';\n\nconst ANIMATION_CONFIG = {\n  TEXT_FADE: {\n    DURATION: '1000ms',\n    EASING: 'ease-in-out',\n    HEADLINE_DELAY: '600ms',\n    TEXT_DELAY: '1500ms',\n  },\n  OVERLAY_FADE: {\n    DURATION: '1500ms',\n    EASING: 'ease-in-out',\n  },\n} as const;\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  if (!headline) return null;\n\n  return ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.HEADLINE_DELAY,\n        textWrap: 'balance',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    },\n  });\n};\n\nconst createText = (text?: HTMLElement | null) => {\n  if (!text) return null;\n\n  return ElementModel.richText.simpleLargest({\n    element: text,\n    elementStyles: {\n      element: {\n        maxWidth: '720px',\n        marginLeft: 'auto',\n        marginRight: 'auto',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.TEXT_DELAY,\n\n        [`@media (max-width: 649px)`]: {\n          display: 'none',\n        },\n      },\n    },\n  });\n};\n\nconst createTextChildren = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n): ElementVisual[] => {\n  const { headline, text } = props;\n  const children: ElementVisual[] = [];\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  const textElement = createText(text);\n  if (textElement) {\n    children.push(textElement);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n) => {\n  const children = createTextChildren(props);\n\n  if (children.length === 0) return null;\n\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-text-container',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: 99,\n        textAlign: 'center',\n        width: `calc(100% - 24px)`,\n        maxWidth: '950px',\n        padding: `${token.spacing.xl} ${token.spacing.md}`,\n\n        ['& *']: {\n          color: token.color.white,\n        },\n      },\n    },\n  });\n\n  return ElementModel.create({\n    element: document.createElement('div'),\n    className: OVERLAY_CLASS,\n    children: [container],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        backgroundColor: 'rgba(0, 0, 0, 0.6)',\n        zIndex: 98,\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.OVERLAY_FADE.DURATION} ${ANIMATION_CONFIG.OVERLAY_FADE.EASING}`,\n      },\n    },\n  });\n};\n\nconst createVideo = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n    additionalElementStyles: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n    },\n  });\n};\n\nconst createAnimationSequence = (container: HTMLElement) => {\n  return () => {\n    const overlay = container.querySelector(\n      `.${OVERLAY_CLASS}`,\n    ) as HTMLDivElement;\n    const headline = container.querySelector(\n      `.${typography.campaign.fonts.extraLarge.className}`,\n    ) as HTMLDivElement;\n    const text = container.querySelector(\n      `.${elementStyles.text.rich.simpleLargest.className}`,\n    ) as HTMLDivElement;\n\n    if (overlay) overlay.style.opacity = '1';\n    if (headline) headline.style.opacity = '1';\n    if (text) text.style.opacity = '1';\n  };\n};\n\nconst createEventHandlers = (\n  composite: ElementVisual,\n  overlay: ReturnType<typeof animations.brand.chevronFlow>,\n) => {\n  const eventResize = () => {\n    if (composite.element.offsetHeight > window.innerHeight) {\n      composite.element.style.height = `${window.innerHeight * 0.9}px`;\n    }\n  };\n\n  const eventLoad = () => {\n    overlay.events.load();\n    eventResize();\n  };\n\n  window.addEventListener('resize', debounce(eventResize, 20));\n\n  return { load: eventLoad };\n};\n\nexport default (props: HeroVideoArrowProps) => {\n  const { video, isAnimationOnLoad } = props;\n\n  const composite = ElementModel.create({\n    element: document.createElement('section'),\n    className: 'umd-element-hero-brand-video',\n    elementStyles: {\n      element: {\n        aspectRatio: '16 / 9',\n        width: '100%',\n      },\n    },\n  });\n\n  const videoElement = createVideo(video);\n  const textContainer = createTextContainer(props);\n\n  const wrapperChildren: ElementVisual[] = [videoElement];\n  if (textContainer) {\n    wrapperChildren.push(textContainer);\n  }\n\n  const wrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-video-wrapper',\n    children: wrapperChildren,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        position: 'relative',\n        overflow: 'hidden',\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      },\n    },\n  });\n\n  const overlay = animations.brand.chevronFlow({\n    sizedContainer: composite.element,\n    sizedWrapper: wrapper.element,\n    completedCallback: createAnimationSequence(composite.element),\n    isAnimationOnLoad,\n  });\n\n  wrapper.element.appendChild(overlay.element);\n  wrapper.styles += overlay.styles;\n\n  composite.element.appendChild(wrapper.element);\n  composite.styles += wrapper.styles;\n\n  const events = createEventHandlers(composite, overlay);\n\n  return {\n    ...composite,\n    events,\n  };\n};\n"],"names":["ElementModel.headline.campaignExtraLarge","ElementModel.richText.simpleLargest","ElementModel.create","assets.video.observedAutoPlay","animations.brand.chevronFlow"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/logo.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;yBAyH9B,OAAO,aAAa;;;;;AAApC,wBA8BE"}
+{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/logo.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;yBAyH9B,OAAO,aAAa;;;;;AAApC,wBA8BE"}

package/dist/composite/hero/logo.js

@@ -1,19 +1,30 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const elementStyles = 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");
 const index = require("../../model/elements/index.js");
+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");
+require("@universityofmaryland/web-utilities-library/accessibility");
+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) {
@@ -32,13 +43,14 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
 const getBackgroundColor = (props) => {
   const { isThemeDark, isThemeMaryland, isThemeLight } = props;
-  if (isThemeDark) return Styles__namespace.token.color.black;
-  if (isThemeMaryland) return Styles__namespace.token.color.red;
-  if (isThemeLight) return Styles__namespace.token.color.gray.lightest;
-  return Styles__namespace.token.color.white;
+  if (isThemeDark) return token__namespace.color.black;
+  if (isThemeMaryland) return token__namespace.color.red;
+  if (isThemeLight) return token__namespace.color.gray.lightest;
+  return token__namespace.color.white;
 };
 const createAsset = ({ image }) => {
   if (!image) return null;
@@ -57,7 +69,7 @@ const createAsset = ({ image }) => {
         justifyContent: "center",
         maxWidth: "800px",
         margin: "0 auto",
-        marginBottom: Styles__namespace.token.spacing.xl,
+        marginBottom: token__namespace.spacing.xl,
         ["& img"]: {
           maxWidth: "100%",
           maxHeight: "500px",
@@ -78,7 +90,7 @@ const createHeadline = (props) => {
         textTransform: "uppercase"
       },
       siblingAfter: {
-        marginTop: Styles__namespace.token.spacing.sm
+        marginTop: token__namespace.spacing.sm
       }
     },
     isThemeDark: isThemeDark || isThemeMaryland || false
@@ -99,8 +111,8 @@ const createText = (props) => {
     children: [textLockupElement],
     elementStyles: {
       element: {
-        [`& .${Styles__namespace.element.text.rich.simpleLargest.className}`]: {
-          color: Styles__namespace.token.color.gray.dark
+        [`& .${elementStyles__namespace.text.rich.simpleLargest.className}`]: {
+          color: token__namespace.color.gray.dark
         }
       }
     }
@@ -137,12 +149,12 @@ const logo = (props) => {
     children: [makeLock(props)],
     elementStyles: {
       element: {
-        padding: `${Styles__namespace.token.spacing["5xl"]} 0 ${Styles__namespace.token.spacing.lg}`,
+        padding: `${token__namespace.spacing["5xl"]} 0 ${token__namespace.spacing.lg}`,
         backgroundColor: getBackgroundColor(props),
         // Dark them should have additonal padding at the bottom
-        [`@container (${Styles__namespace.token.media.queries.desktop.min})`]: {
+        [`@container (${token__namespace.media.queries.desktop.min})`]: {
           ...isThemeDark && {
-            paddingBottom: `${Styles__namespace.token.spacing["5xl"]}`
+            paddingBottom: `${token__namespace.spacing["5xl"]}`
           }
         }
       }

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

@@ -1 +1 @@
-{"version":3,"file":"logo.js","sources":["../../../source/composite/hero/logo.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type HeroLogoProps } from './_types';\nimport { type ElementVisual } from '../../_types';\n\nconst getBackgroundColor = (props: HeroLogoProps) => {\n  const { isThemeDark, isThemeMaryland, isThemeLight } = props;\n\n  if (isThemeDark) return Styles.token.color.black;\n  if (isThemeMaryland) return Styles.token.color.red;\n  if (isThemeLight) return Styles.token.color.gray.lightest;\n  return Styles.token.color.white;\n};\n\nconst createAsset = ({ image }: Pick<HeroLogoProps, 'image'>) => {\n  if (!image) return null;\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo__asset',\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    ],\n    elementStyles: {\n      element: {\n        textAlign: 'center',\n        display: 'flex',\n        justifyContent: 'center',\n        maxWidth: '800px',\n        margin: '0 auto',\n        marginBottom: Styles.token.spacing.xl,\n\n        ['& img']: {\n          maxWidth: '100%',\n          maxHeight: '500px',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        },\n      },\n    },\n  });\n};\n\nconst createHeadline = (\n  props: Pick<HeroLogoProps, 'headline' | 'isThemeDark' | 'isThemeMaryland'>,\n) => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n\n  if (!headline) return null;\n\n  const headlineElement = ElementModel.headline.campaignLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.sm,\n      },\n    },\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  return headlineElement;\n};\n\nconst createText = (\n  props: Omit<HeroLogoProps, 'image' | 'video' | 'includesAnimation' | 'logo'>,\n) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textContent = ElementModel.createDiv({\n    className: 'umd-hero-logo__text-content',\n    children: [textLockupElement],\n    elementStyles: {\n      element: {\n        [`& .${Styles.element.text.rich.simpleLargest.className}`]: {\n          color: Styles.token.color.gray.dark,\n        },\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo__text',\n    children: [textContent],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        textAlign: 'center',\n      },\n    },\n  });\n};\n\nconst makeLock = (props: HeroLogoProps) => {\n  const asset = createAsset(props);\n  const text = createText(props);\n  const children: ElementVisual[] = [];\n\n  if (asset) {\n    children.push(asset);\n  }\n\n  children.push(text);\n\n  return ElementModel.layout.spaceHorizontalSmall({\n    element: document.createElement('div'),\n    children,\n  });\n};\n\nexport default (props: HeroLogoProps) => {\n  const { isThemeDark } = props;\n\n  const container = ElementModel.createDiv({\n    className: 'umd-hero-logo__container',\n    children: [makeLock(props)],\n    elementStyles: {\n      element: {\n        padding: `${Styles.token.spacing['5xl']} 0 ${Styles.token.spacing.lg}`,\n        backgroundColor: getBackgroundColor(props),\n\n        // Dark them should have additonal padding at the bottom\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          ...(isThemeDark && {\n            paddingBottom: `${Styles.token.spacing['5xl']}`,\n          }),\n        },\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo',\n    children: [container],\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n      },\n    },\n  });\n};\n"],"names":["Styles","ElementModel.createDiv","assets.image.background","headline","ElementModel.headline.campaignLarge","textLockup.large","ElementModel.layout.spaceHorizontalSmall"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,qBAAqB,CAAC,UAAyB;AACnD,QAAM,EAAE,aAAa,iBAAiB,aAAA,IAAiB;AAEvD,MAAI,YAAa,QAAOA,kBAAO,MAAM,MAAM;AAC3C,MAAI,gBAAiB,QAAOA,kBAAO,MAAM,MAAM;AAC/C,MAAI,aAAc,QAAOA,kBAAO,MAAM,MAAM,KAAK;AACjD,SAAOA,kBAAO,MAAM,MAAM;AAC5B;AAEA,MAAM,cAAc,CAAC,EAAE,YAA0C;AAC/D,MAAI,CAAC,MAAO,QAAO;AAEnB,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU;AAAA,MACRC,WAAwB;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,IAEH,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW;AAAA,QACX,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,cAAcF,kBAAO,MAAM,QAAQ;AAAA,QAEnC,CAAC,OAAO,GAAG;AAAA,UACT,UAAU;AAAA,UACV,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,aAAa;AAAA,QAAA;AAAA,MACf;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,iBAAiB,CACrB,UACG;AACH,QAAM,YAAEG,YAAU,aAAa,gBAAA,IAAoB;AAEnD,MAAI,CAACA,WAAU,QAAO;AAEtB,QAAM,kBAAkBC,SAAAA,cAAoC;AAAA,IAC1D,SAASD;AAAAA,IACT,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,MAAA;AAAA,MAEjB,cAAc;AAAA,QACZ,WAAWH,kBAAO,MAAM,QAAQ;AAAA,MAAA;AAAA,IAClC;AAAA,IAEF,aAAa,eAAe,mBAAmB;AAAA,EAAA,CAChD;AAED,SAAO;AACT;AAEA,MAAM,aAAa,CACjB,UACG;AACH,QAAM,EAAE,aAAa,gBAAA,IAAoB;AAEzC,QAAM,oBAAoBK,MAAiB;AAAA,IACzC,QAAQ,MAAM;AAAA,IACd,mBAAmB,eAAe,KAAK;AAAA,IACvC,aAAa,MAAM;AAAA,IACnB,SAAS,MAAM;AAAA,IACf,aAAa,eAAe,mBAAmB;AAAA,EAAA,CAChD;AAED,QAAM,cAAcJ,MAAAA,UAAuB;AAAA,IACzC,WAAW;AAAA,IACX,UAAU,CAAC,iBAAiB;AAAA,IAC5B,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,MAAMD,kBAAO,QAAQ,KAAK,KAAK,cAAc,SAAS,EAAE,GAAG;AAAA,UAC1D,OAAOA,kBAAO,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,MACjC;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,WAAW;AAAA,IACtB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF,CACD;AACH;AAEA,MAAM,WAAW,CAAC,UAAyB;AACzC,QAAM,QAAQ,YAAY,KAAK;AAC/B,QAAM,OAAO,WAAW,KAAK;AAC7B,QAAM,WAA4B,CAAA;AAElC,MAAI,OAAO;AACT,aAAS,KAAK,KAAK;AAAA,EACrB;AAEA,WAAS,KAAK,IAAI;AAElB,SAAOK,4BAAyC;AAAA,IAC9C,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC;AAAA,EAAA,CACD;AACH;AAEA,MAAA,OAAe,CAAC,UAAyB;AACvC,QAAM,EAAE,gBAAgB;AAExB,QAAM,YAAYL,MAAAA,UAAuB;AAAA,IACvC,WAAW;AAAA,IACX,UAAU,CAAC,SAAS,KAAK,CAAC;AAAA,IAC1B,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS,GAAGD,kBAAO,MAAM,QAAQ,KAAK,CAAC,MAAMA,kBAAO,MAAM,QAAQ,EAAE;AAAA,QACpE,iBAAiB,mBAAmB,KAAK;AAAA;AAAA,QAGzC,CAAC,eAAeA,kBAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,UAC1D,GAAI,eAAe;AAAA,YACjB,eAAe,GAAGA,kBAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,UAAA;AAAA,QAC/C;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,SAAS;AAAA,IACpB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,MAAA;AAAA,IACjB;AAAA,EACF,CACD;AACH;;"}
+{"version":3,"file":"logo.js","sources":["../../../source/composite/hero/logo.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type HeroLogoProps } from './_types';\nimport { type ElementVisual } from '../../_types';\n\nconst getBackgroundColor = (props: HeroLogoProps) => {\n  const { isThemeDark, isThemeMaryland, isThemeLight } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return token.color.white;\n};\n\nconst createAsset = ({ image }: Pick<HeroLogoProps, 'image'>) => {\n  if (!image) return null;\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo__asset',\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    ],\n    elementStyles: {\n      element: {\n        textAlign: 'center',\n        display: 'flex',\n        justifyContent: 'center',\n        maxWidth: '800px',\n        margin: '0 auto',\n        marginBottom: token.spacing.xl,\n\n        ['& img']: {\n          maxWidth: '100%',\n          maxHeight: '500px',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        },\n      },\n    },\n  });\n};\n\nconst createHeadline = (\n  props: Pick<HeroLogoProps, 'headline' | 'isThemeDark' | 'isThemeMaryland'>,\n) => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n\n  if (!headline) return null;\n\n  const headlineElement = ElementModel.headline.campaignLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    },\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  return headlineElement;\n};\n\nconst createText = (\n  props: Omit<HeroLogoProps, 'image' | 'video' | 'includesAnimation' | 'logo'>,\n) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textContent = ElementModel.createDiv({\n    className: 'umd-hero-logo__text-content',\n    children: [textLockupElement],\n    elementStyles: {\n      element: {\n        [`& .${elementStyles.text.rich.simpleLargest.className}`]: {\n          color: token.color.gray.dark,\n        },\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo__text',\n    children: [textContent],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        textAlign: 'center',\n      },\n    },\n  });\n};\n\nconst makeLock = (props: HeroLogoProps) => {\n  const asset = createAsset(props);\n  const text = createText(props);\n  const children: ElementVisual[] = [];\n\n  if (asset) {\n    children.push(asset);\n  }\n\n  children.push(text);\n\n  return ElementModel.layout.spaceHorizontalSmall({\n    element: document.createElement('div'),\n    children,\n  });\n};\n\nexport default (props: HeroLogoProps) => {\n  const { isThemeDark } = props;\n\n  const container = ElementModel.createDiv({\n    className: 'umd-hero-logo__container',\n    children: [makeLock(props)],\n    elementStyles: {\n      element: {\n        padding: `${token.spacing['5xl']} 0 ${token.spacing.lg}`,\n        backgroundColor: getBackgroundColor(props),\n\n        // Dark them should have additonal padding at the bottom\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isThemeDark && {\n            paddingBottom: `${token.spacing['5xl']}`,\n          }),\n        },\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo',\n    children: [container],\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n      },\n    },\n  });\n};\n"],"names":["token","ElementModel.createDiv","assets.image.background","headline","ElementModel.headline.campaignLarge","textLockup.large","elementStyles","ElementModel.layout.spaceHorizontalSmall"],"mappings":"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"}

package/dist/composite/hero/logo.mjs

@@ -1,26 +1,37 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
-import "../../node_modules/postcss/lib/postcss.mjs";
-import "../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../node_modules/postcss-js/index.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import * as elementStyles from "@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 { createDiv } from "../../model/elements/index.mjs";
+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 "@universityofmaryland/web-utilities-library/accessibility";
+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 { spaceHorizontalSmall } from "../../model/elements/layout.mjs";
 import { campaignLarge } from "../../model/elements/headline.mjs";
 const getBackgroundColor = (props) => {
   const { isThemeDark, isThemeMaryland, isThemeLight } = props;
-  if (isThemeDark) return Styles.token.color.black;
-  if (isThemeMaryland) return Styles.token.color.red;
-  if (isThemeLight) return Styles.token.color.gray.lightest;
-  return Styles.token.color.white;
+  if (isThemeDark) return token.color.black;
+  if (isThemeMaryland) return token.color.red;
+  if (isThemeLight) return token.color.gray.lightest;
+  return token.color.white;
 };
 const createAsset = ({ image }) => {
   if (!image) return null;
@@ -39,7 +50,7 @@ const createAsset = ({ image }) => {
         justifyContent: "center",
         maxWidth: "800px",
         margin: "0 auto",
-        marginBottom: Styles.token.spacing.xl,
+        marginBottom: token.spacing.xl,
         ["& img"]: {
           maxWidth: "100%",
           maxHeight: "500px",
@@ -60,7 +71,7 @@ const createHeadline = (props) => {
         textTransform: "uppercase"
       },
       siblingAfter: {
-        marginTop: Styles.token.spacing.sm
+        marginTop: token.spacing.sm
       }
     },
     isThemeDark: isThemeDark || isThemeMaryland || false
@@ -81,8 +92,8 @@ const createText = (props) => {
     children: [textLockupElement],
     elementStyles: {
       element: {
-        [`& .${Styles.element.text.rich.simpleLargest.className}`]: {
-          color: Styles.token.color.gray.dark
+        [`& .${elementStyles.text.rich.simpleLargest.className}`]: {
+          color: token.color.gray.dark
         }
       }
     }
@@ -119,12 +130,12 @@ const logo = (props) => {
     children: [makeLock(props)],
     elementStyles: {
       element: {
-        padding: `${Styles.token.spacing["5xl"]} 0 ${Styles.token.spacing.lg}`,
+        padding: `${token.spacing["5xl"]} 0 ${token.spacing.lg}`,
         backgroundColor: getBackgroundColor(props),
         // Dark them should have additonal padding at the bottom
-        [`@container (${Styles.token.media.queries.desktop.min})`]: {
+        [`@container (${token.media.queries.desktop.min})`]: {
           ...isThemeDark && {
-            paddingBottom: `${Styles.token.spacing["5xl"]}`
+            paddingBottom: `${token.spacing["5xl"]}`
           }
         }
       }

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

@@ -1 +1 @@
-{"version":3,"file":"logo.mjs","sources":["../../../source/composite/hero/logo.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type HeroLogoProps } from './_types';\nimport { type ElementVisual } from '../../_types';\n\nconst getBackgroundColor = (props: HeroLogoProps) => {\n  const { isThemeDark, isThemeMaryland, isThemeLight } = props;\n\n  if (isThemeDark) return Styles.token.color.black;\n  if (isThemeMaryland) return Styles.token.color.red;\n  if (isThemeLight) return Styles.token.color.gray.lightest;\n  return Styles.token.color.white;\n};\n\nconst createAsset = ({ image }: Pick<HeroLogoProps, 'image'>) => {\n  if (!image) return null;\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo__asset',\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    ],\n    elementStyles: {\n      element: {\n        textAlign: 'center',\n        display: 'flex',\n        justifyContent: 'center',\n        maxWidth: '800px',\n        margin: '0 auto',\n        marginBottom: Styles.token.spacing.xl,\n\n        ['& img']: {\n          maxWidth: '100%',\n          maxHeight: '500px',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        },\n      },\n    },\n  });\n};\n\nconst createHeadline = (\n  props: Pick<HeroLogoProps, 'headline' | 'isThemeDark' | 'isThemeMaryland'>,\n) => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n\n  if (!headline) return null;\n\n  const headlineElement = ElementModel.headline.campaignLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.sm,\n      },\n    },\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  return headlineElement;\n};\n\nconst createText = (\n  props: Omit<HeroLogoProps, 'image' | 'video' | 'includesAnimation' | 'logo'>,\n) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textContent = ElementModel.createDiv({\n    className: 'umd-hero-logo__text-content',\n    children: [textLockupElement],\n    elementStyles: {\n      element: {\n        [`& .${Styles.element.text.rich.simpleLargest.className}`]: {\n          color: Styles.token.color.gray.dark,\n        },\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo__text',\n    children: [textContent],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        textAlign: 'center',\n      },\n    },\n  });\n};\n\nconst makeLock = (props: HeroLogoProps) => {\n  const asset = createAsset(props);\n  const text = createText(props);\n  const children: ElementVisual[] = [];\n\n  if (asset) {\n    children.push(asset);\n  }\n\n  children.push(text);\n\n  return ElementModel.layout.spaceHorizontalSmall({\n    element: document.createElement('div'),\n    children,\n  });\n};\n\nexport default (props: HeroLogoProps) => {\n  const { isThemeDark } = props;\n\n  const container = ElementModel.createDiv({\n    className: 'umd-hero-logo__container',\n    children: [makeLock(props)],\n    elementStyles: {\n      element: {\n        padding: `${Styles.token.spacing['5xl']} 0 ${Styles.token.spacing.lg}`,\n        backgroundColor: getBackgroundColor(props),\n\n        // Dark them should have additonal padding at the bottom\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          ...(isThemeDark && {\n            paddingBottom: `${Styles.token.spacing['5xl']}`,\n          }),\n        },\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo',\n    children: [container],\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n      },\n    },\n  });\n};\n"],"names":["ElementModel.createDiv","assets.image.background","ElementModel.headline.campaignLarge","textLockup.large","ElementModel.layout.spaceHorizontalSmall"],"mappings":"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"}
+{"version":3,"file":"logo.mjs","sources":["../../../source/composite/hero/logo.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type HeroLogoProps } from './_types';\nimport { type ElementVisual } from '../../_types';\n\nconst getBackgroundColor = (props: HeroLogoProps) => {\n  const { isThemeDark, isThemeMaryland, isThemeLight } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return token.color.white;\n};\n\nconst createAsset = ({ image }: Pick<HeroLogoProps, 'image'>) => {\n  if (!image) return null;\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo__asset',\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    ],\n    elementStyles: {\n      element: {\n        textAlign: 'center',\n        display: 'flex',\n        justifyContent: 'center',\n        maxWidth: '800px',\n        margin: '0 auto',\n        marginBottom: token.spacing.xl,\n\n        ['& img']: {\n          maxWidth: '100%',\n          maxHeight: '500px',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        },\n      },\n    },\n  });\n};\n\nconst createHeadline = (\n  props: Pick<HeroLogoProps, 'headline' | 'isThemeDark' | 'isThemeMaryland'>,\n) => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n\n  if (!headline) return null;\n\n  const headlineElement = ElementModel.headline.campaignLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    },\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  return headlineElement;\n};\n\nconst createText = (\n  props: Omit<HeroLogoProps, 'image' | 'video' | 'includesAnimation' | 'logo'>,\n) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textContent = ElementModel.createDiv({\n    className: 'umd-hero-logo__text-content',\n    children: [textLockupElement],\n    elementStyles: {\n      element: {\n        [`& .${elementStyles.text.rich.simpleLargest.className}`]: {\n          color: token.color.gray.dark,\n        },\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo__text',\n    children: [textContent],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        textAlign: 'center',\n      },\n    },\n  });\n};\n\nconst makeLock = (props: HeroLogoProps) => {\n  const asset = createAsset(props);\n  const text = createText(props);\n  const children: ElementVisual[] = [];\n\n  if (asset) {\n    children.push(asset);\n  }\n\n  children.push(text);\n\n  return ElementModel.layout.spaceHorizontalSmall({\n    element: document.createElement('div'),\n    children,\n  });\n};\n\nexport default (props: HeroLogoProps) => {\n  const { isThemeDark } = props;\n\n  const container = ElementModel.createDiv({\n    className: 'umd-hero-logo__container',\n    children: [makeLock(props)],\n    elementStyles: {\n      element: {\n        padding: `${token.spacing['5xl']} 0 ${token.spacing.lg}`,\n        backgroundColor: getBackgroundColor(props),\n\n        // Dark them should have additonal padding at the bottom\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isThemeDark && {\n            paddingBottom: `${token.spacing['5xl']}`,\n          }),\n        },\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo',\n    children: [container],\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n      },\n    },\n  });\n};\n"],"names":["ElementModel.createDiv","assets.image.background","ElementModel.headline.campaignLarge","textLockup.large","ElementModel.layout.spaceHorizontalSmall"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"minimal.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/minimal.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;yBAyKjC,OAAO,gBAAgB;;;;;AAAvC,wBA8BE"}
+{"version":3,"file":"minimal.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/minimal.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;yBAuKjC,OAAO,gBAAgB;;;;;AAAvC,wBA8BE"}

package/dist/composite/hero/minimal.js

@@ -1,19 +1,30 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+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");
 const index = require("../../model/elements/index.js");
+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");
+require("@universityofmaryland/web-utilities-library/accessibility");
+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) {
@@ -32,7 +43,7 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const createImageAsset = (image) => {
   return background({
     element: image,
@@ -48,13 +59,13 @@ const buildAssetChildren = ({
   return [createImageAsset(image)];
 };
 const getBorderColor = (isThemeDark, isThemeMaryland) => {
-  return isThemeDark || isThemeMaryland ? Styles__namespace.token.color.gold : Styles__namespace.token.color.red;
+  return isThemeDark || isThemeMaryland ? token__namespace.color.gold : token__namespace.color.red;
 };
 const getBackgroundColor = (props) => {
   const { isThemeDark, isThemeLight, isThemeMaryland } = props;
-  if (isThemeDark) return Styles__namespace.token.color.black;
-  if (isThemeMaryland) return Styles__namespace.token.color.red;
-  if (isThemeLight) return Styles__namespace.token.color.gray.lightest;
+  if (isThemeDark) return token__namespace.color.black;
+  if (isThemeMaryland) return token__namespace.color.red;
+  if (isThemeLight) return token__namespace.color.gray.lightest;
   return "transparent";
 };
 const createAsset = ({ image }) => {
@@ -67,7 +78,7 @@ const createAsset = ({ image }) => {
     children,
     elementStyles: {
       element: {
-        [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+        [`@container (${token__namespace.media.queries.tablet.min})`]: {
           position: "absolute",
           right: 0,
           top: 0,
@@ -75,7 +86,7 @@ const createAsset = ({ image }) => {
           height: "100%"
         },
         ["& img"]: {
-          [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+          [`@container (${token__namespace.media.queries.tablet.min})`]: {
             objectFit: "cover",
             objectPosition: "center",
             height: "100%",
@@ -92,7 +103,7 @@ const createHeadline = (props) => {
   const isOverwriteHeadline = characterCount > 40;
   if (!headline$1) return null;
   const desktopStyles = {
-    [`@container (${Styles__namespace.token.media.queries.desktop.min})`]: {
+    [`@container (${token__namespace.media.queries.desktop.min})`]: {
       ...isOverwriteHeadline && {
         fontSize: "64px"
       }
@@ -107,7 +118,7 @@ const createHeadline = (props) => {
         ...desktopStyles
       },
       siblingAfter: {
-        marginTop: Styles__namespace.token.spacing.sm
+        marginTop: token__namespace.spacing.sm
       }
     },
     isThemeDark: isThemeDark || isThemeMaryland
@@ -116,10 +127,10 @@ const createHeadline = (props) => {
 const buildTextWrapperStyles = (isThemeDark, isThemeMaryland) => {
   return {
     element: {
-      paddingLeft: Styles__namespace.token.spacing.md,
+      paddingLeft: token__namespace.spacing.md,
       borderLeft: `2px solid ${getBorderColor(isThemeDark, isThemeMaryland)}`,
-      [`@container (${Styles__namespace.token.media.queries.desktop.min})`]: {
-        paddingLeft: Styles__namespace.token.spacing.lg
+      [`@container (${token__namespace.media.queries.desktop.min})`]: {
+        paddingLeft: token__namespace.spacing.lg
       }
     }
   };
@@ -127,11 +138,11 @@ const buildTextWrapperStyles = (isThemeDark, isThemeMaryland) => {
 const buildTextContainerStyles = (hasAsset) => {
   return {
     element: {
-      padding: `${Styles__namespace.token.spacing.xl} 0`,
-      [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+      padding: `${token__namespace.spacing.xl} 0`,
+      [`@container (${token__namespace.media.queries.tablet.min})`]: {
         ...hasAsset && {
-          padding: `${Styles__namespace.token.spacing["4xl"]} 0`,
-          width: `calc(50% - ${Styles__namespace.token.spacing["4xl"]})`
+          padding: `${token__namespace.spacing["4xl"]} 0`,
+          width: `calc(50% - ${token__namespace.spacing["4xl"]})`
         }
       }
     }
@@ -184,10 +195,10 @@ const minimal = (props) => {
         position: "relative",
         display: "flex",
         containerType: "inline-size",
-        [`@container (${Styles__namespace.token.media.queries.large.max})`]: {
+        [`@container (${token__namespace.media.queries.large.max})`]: {
           flexDirection: "column-reverse"
         },
-        [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+        [`@container (${token__namespace.media.queries.tablet.min})`]: {
           minHeight: "288px",
           alignItems: "center"
         }