@universityofmaryland/web-elements-library 1.4.4 → 1.4.6

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

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

package/dist/composite/pathway/overlay.mjs

@@ -189,18 +189,18 @@ const createBackground = (props) => {
         position: "absolute",
         top: "0",
         bottom: "0",
-        right: "0",
-        width: "100%",
+        right: `-${Styles.token.spacing.xl}`,
+        width: `calc(100% + ${Styles.token.spacing["6xl"]})`,
         backgroundColor: getBackgroundColor(),
         [`@container (min-width: ${mediumSize}px)`]: {
-          right: "-1000px",
-          width: "calc(75% + 1000px)",
           ...props.includesAnimation && {
             animationTimeline: "view()",
             animationRangeStart: "entry",
             animationRangeEnd: "contain",
             ...withViewTimelineAnimation({
+              width: "calc(75% + 1000px)",
               ...props.isImagePositionLeft === true && {
+                right: "-1000px",
                 animationName: REF_KEY_FRAME_BACKGROUND_LEFT
               },
               ...props.isImagePositionLeft === false && {

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

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

package/dist/composite/person/bio/full.js

@@ -6,6 +6,7 @@ require("../../../node_modules/postcss-js/index.js");
 const index = require("../../../model/elements/index.js");
 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("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");

package/dist/composite/person/bio/full.js.map

@@ -1 +1 @@
-{"version":3,"file":"full.js","sources":["../../../../source/composite/person/bio/full.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type PersonBio } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\nexport default (props: PersonBio) => {\n  const { isThemeDark, image, actions, description } = props;\n  const { name, ...textProps } = props;\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    );\n  }\n\n  if (name) {\n    children.push(\n      ElementModel.headline.sansExtraLarge({\n        element: name,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.lg,\n            color: `${Styles.token.color.black}`,\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: Styles.token.spacing.min,\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textLockup.person(textProps));\n  children.push(textLockup.contact(props));\n\n  if (description) {\n    children.push(\n      ElementModel.richText.simpleLarge({\n        element: description,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.lg,\n            maxWidth: Styles.token.spacing.maxWidth.smallest,\n          },\n        },\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridInlineTabletRows({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-full-container',\n    children,\n    elementStyles: {\n      element: {\n        [`& .${Styles.element.asset.image.wrapper.className}`]: {\n          [`@container (max-width: ${Styles.token.media.breakpointValues.medium.max}px)`]:\n            {\n              display: 'flex',\n            },\n        },\n      },\n    },\n  });\n};\n"],"names":["assets.image.background","ElementModel.headline.sansExtraLarge","Styles","textLockup.person","textLockup.contact","ElementModel.richText.simpleLarge","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAA,OAAe,CAAC,UAAqB;AACnC,QAAM,EAAE,aAAa,OAAO,SAAS,gBAAgB;AACrD,QAAM,EAAE,MAAM,GAAG,UAAA,IAAc;AAC/B,MAAI,WAA4B,CAAA;AAEhC,MAAI,OAAO;AACT,aAAS;AAAA,MACPA,WAAwB;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPC,wBAAqC;AAAA,QACnC,SAAS;AAAA,QACT;AAAA,QACA,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAWC,kBAAO,MAAM,QAAQ;AAAA,YAChC,OAAO,GAAGA,kBAAO,MAAM,MAAM,KAAK;AAAA,YAClC,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,SAAS;AAAA,UAAA;AAAA,UAEX,cAAc;AAAA,YACZ,WAAWA,kBAAO,MAAM,QAAQ;AAAA,UAAA;AAAA,QAClC;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS,KAAKC,OAAkB,SAAS,CAAC;AAC1C,WAAS,KAAKC,QAAmB,KAAK,CAAC;AAEvC,MAAI,aAAa;AACf,aAAS;AAAA,MACPC,qBAAkC;AAAA,QAChC,SAAS;AAAA,QACT;AAAA,QACA,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAWH,kBAAO,MAAM,QAAQ;AAAA,YAChC,UAAUA,kBAAO,MAAM,QAAQ,SAAS;AAAA,UAAA;AAAA,QAC1C;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS;AACX,aAAS;AAAA,MACPI,4BAAyC;AAAA,QACvC,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAWJ,kBAAO,MAAM,QAAQ;AAAA,UAAA;AAAA,QAClC;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOK,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,MAAML,kBAAO,QAAQ,MAAM,MAAM,QAAQ,SAAS,EAAE,GAAG;AAAA,UACtD,CAAC,0BAA0BA,kBAAO,MAAM,MAAM,iBAAiB,OAAO,GAAG,KAAK,GAC5E;AAAA,YACE,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACJ;AAAA,IACF;AAAA,EACF,CACD;AACH;;"}
+{"version":3,"file":"full.js","sources":["../../../../source/composite/person/bio/full.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type PersonBio } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\nexport default (props: PersonBio) => {\n  const { isThemeDark, image, actions, description } = props;\n  const { name, ...textProps } = props;\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    );\n  }\n\n  if (name) {\n    children.push(\n      ElementModel.headline.sansExtraLarge({\n        element: name,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.lg,\n            color: `${Styles.token.color.black}`,\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: Styles.token.spacing.min,\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textLockup.person(textProps));\n  children.push(textLockup.contact(props));\n\n  if (description) {\n    children.push(\n      ElementModel.richText.simpleLarge({\n        element: description,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.lg,\n            maxWidth: Styles.token.spacing.maxWidth.smallest,\n          },\n        },\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridInlineTabletRows({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-full-container',\n    children,\n    elementStyles: {\n      element: {\n        [`& .${Styles.element.asset.image.wrapper.className}`]: {\n          [`@container (max-width: ${Styles.token.media.breakpointValues.medium.max}px)`]:\n            {\n              display: 'flex',\n            },\n        },\n      },\n    },\n  });\n};\n"],"names":["assets.image.background","ElementModel.headline.sansExtraLarge","Styles","textLockup.person","textLockup.contact","ElementModel.richText.simpleLarge","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAA,OAAe,CAAC,UAAqB;AACnC,QAAM,EAAE,aAAa,OAAO,SAAS,gBAAgB;AACrD,QAAM,EAAE,MAAM,GAAG,UAAA,IAAc;AAC/B,MAAI,WAA4B,CAAA;AAEhC,MAAI,OAAO;AACT,aAAS;AAAA,MACPA,WAAwB;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPC,wBAAqC;AAAA,QACnC,SAAS;AAAA,QACT;AAAA,QACA,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAWC,kBAAO,MAAM,QAAQ;AAAA,YAChC,OAAO,GAAGA,kBAAO,MAAM,MAAM,KAAK;AAAA,YAClC,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,SAAS;AAAA,UAAA;AAAA,UAEX,cAAc;AAAA,YACZ,WAAWA,kBAAO,MAAM,QAAQ;AAAA,UAAA;AAAA,QAClC;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS,KAAKC,OAAkB,SAAS,CAAC;AAC1C,WAAS,KAAKC,QAAmB,KAAK,CAAC;AAEvC,MAAI,aAAa;AACf,aAAS;AAAA,MACPC,qBAAkC;AAAA,QAChC,SAAS;AAAA,QACT;AAAA,QACA,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAWH,kBAAO,MAAM,QAAQ;AAAA,YAChC,UAAUA,kBAAO,MAAM,QAAQ,SAAS;AAAA,UAAA;AAAA,QAC1C;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS;AACX,aAAS;AAAA,MACPI,4BAAyC;AAAA,QACvC,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAWJ,kBAAO,MAAM,QAAQ;AAAA,UAAA;AAAA,QAClC;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOK,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,MAAML,kBAAO,QAAQ,MAAM,MAAM,QAAQ,SAAS,EAAE,GAAG;AAAA,UACtD,CAAC,0BAA0BA,kBAAO,MAAM,MAAM,iBAAiB,OAAO,GAAG,KAAK,GAC5E;AAAA,YACE,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACJ;AAAA,IACF;AAAA,EACF,CACD;AACH;;"}

package/dist/composite/person/bio/full.mjs

@@ -5,6 +5,7 @@ import "../../../node_modules/postcss-js/index.mjs";
 import { createDiv } from "../../../model/elements/index.mjs";
 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 "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";

package/dist/composite/person/bio/full.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"full.mjs","sources":["../../../../source/composite/person/bio/full.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type PersonBio } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\nexport default (props: PersonBio) => {\n  const { isThemeDark, image, actions, description } = props;\n  const { name, ...textProps } = props;\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    );\n  }\n\n  if (name) {\n    children.push(\n      ElementModel.headline.sansExtraLarge({\n        element: name,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.lg,\n            color: `${Styles.token.color.black}`,\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: Styles.token.spacing.min,\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textLockup.person(textProps));\n  children.push(textLockup.contact(props));\n\n  if (description) {\n    children.push(\n      ElementModel.richText.simpleLarge({\n        element: description,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.lg,\n            maxWidth: Styles.token.spacing.maxWidth.smallest,\n          },\n        },\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridInlineTabletRows({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-full-container',\n    children,\n    elementStyles: {\n      element: {\n        [`& .${Styles.element.asset.image.wrapper.className}`]: {\n          [`@container (max-width: ${Styles.token.media.breakpointValues.medium.max}px)`]:\n            {\n              display: 'flex',\n            },\n        },\n      },\n    },\n  });\n};\n"],"names":["assets.image.background","ElementModel.headline.sansExtraLarge","textLockup.person","textLockup.contact","ElementModel.richText.simpleLarge","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;AAMA,MAAA,OAAe,CAAC,UAAqB;AACnC,QAAM,EAAE,aAAa,OAAO,SAAS,gBAAgB;AACrD,QAAM,EAAE,MAAM,GAAG,UAAA,IAAc;AAC/B,MAAI,WAA4B,CAAA;AAEhC,MAAI,OAAO;AACT,aAAS;AAAA,MACPA,eAAwB;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPC,eAAqC;AAAA,QACnC,SAAS;AAAA,QACT;AAAA,QACA,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAW,OAAO,MAAM,QAAQ;AAAA,YAChC,OAAO,GAAG,OAAO,MAAM,MAAM,KAAK;AAAA,YAClC,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,SAAS;AAAA,UAAA;AAAA,UAEX,cAAc;AAAA,YACZ,WAAW,OAAO,MAAM,QAAQ;AAAA,UAAA;AAAA,QAClC;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS,KAAKC,OAAkB,SAAS,CAAC;AAC1C,WAAS,KAAKC,QAAmB,KAAK,CAAC;AAEvC,MAAI,aAAa;AACf,aAAS;AAAA,MACPC,YAAkC;AAAA,QAChC,SAAS;AAAA,QACT;AAAA,QACA,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAW,OAAO,MAAM,QAAQ;AAAA,YAChC,UAAU,OAAO,MAAM,QAAQ,SAAS;AAAA,UAAA;AAAA,QAC1C;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS;AACX,aAAS;AAAA,MACPC,qBAAyC;AAAA,QACvC,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAW,OAAO,MAAM,QAAQ;AAAA,UAAA;AAAA,QAClC;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,MAAM,OAAO,QAAQ,MAAM,MAAM,QAAQ,SAAS,EAAE,GAAG;AAAA,UACtD,CAAC,0BAA0B,OAAO,MAAM,MAAM,iBAAiB,OAAO,GAAG,KAAK,GAC5E;AAAA,YACE,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACJ;AAAA,IACF;AAAA,EACF,CACD;AACH;"}
+{"version":3,"file":"full.mjs","sources":["../../../../source/composite/person/bio/full.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type PersonBio } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\nexport default (props: PersonBio) => {\n  const { isThemeDark, image, actions, description } = props;\n  const { name, ...textProps } = props;\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    );\n  }\n\n  if (name) {\n    children.push(\n      ElementModel.headline.sansExtraLarge({\n        element: name,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.lg,\n            color: `${Styles.token.color.black}`,\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: Styles.token.spacing.min,\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textLockup.person(textProps));\n  children.push(textLockup.contact(props));\n\n  if (description) {\n    children.push(\n      ElementModel.richText.simpleLarge({\n        element: description,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.lg,\n            maxWidth: Styles.token.spacing.maxWidth.smallest,\n          },\n        },\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridInlineTabletRows({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-full-container',\n    children,\n    elementStyles: {\n      element: {\n        [`& .${Styles.element.asset.image.wrapper.className}`]: {\n          [`@container (max-width: ${Styles.token.media.breakpointValues.medium.max}px)`]:\n            {\n              display: 'flex',\n            },\n        },\n      },\n    },\n  });\n};\n"],"names":["assets.image.background","ElementModel.headline.sansExtraLarge","textLockup.person","textLockup.contact","ElementModel.richText.simpleLarge","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;AAMA,MAAA,OAAe,CAAC,UAAqB;AACnC,QAAM,EAAE,aAAa,OAAO,SAAS,gBAAgB;AACrD,QAAM,EAAE,MAAM,GAAG,UAAA,IAAc;AAC/B,MAAI,WAA4B,CAAA;AAEhC,MAAI,OAAO;AACT,aAAS;AAAA,MACPA,eAAwB;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPC,eAAqC;AAAA,QACnC,SAAS;AAAA,QACT;AAAA,QACA,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAW,OAAO,MAAM,QAAQ;AAAA,YAChC,OAAO,GAAG,OAAO,MAAM,MAAM,KAAK;AAAA,YAClC,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,SAAS;AAAA,UAAA;AAAA,UAEX,cAAc;AAAA,YACZ,WAAW,OAAO,MAAM,QAAQ;AAAA,UAAA;AAAA,QAClC;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS,KAAKC,OAAkB,SAAS,CAAC;AAC1C,WAAS,KAAKC,QAAmB,KAAK,CAAC;AAEvC,MAAI,aAAa;AACf,aAAS;AAAA,MACPC,YAAkC;AAAA,QAChC,SAAS;AAAA,QACT;AAAA,QACA,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAW,OAAO,MAAM,QAAQ;AAAA,YAChC,UAAU,OAAO,MAAM,QAAQ,SAAS;AAAA,UAAA;AAAA,QAC1C;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS;AACX,aAAS;AAAA,MACPC,qBAAyC;AAAA,QACvC,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAW,OAAO,MAAM,QAAQ;AAAA,UAAA;AAAA,QAClC;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,MAAM,OAAO,QAAQ,MAAM,MAAM,QAAQ,SAAS,EAAE,GAAG;AAAA,UACtD,CAAC,0BAA0B,OAAO,MAAM,MAAM,iBAAiB,OAAO,GAAG,KAAK,GAC5E;AAAA,YACE,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACJ;AAAA,IACF;AAAA,EACF,CACD;AACH;"}

package/dist/composite/person/bio/small.js

@@ -7,6 +7,7 @@ const media = require("../../../utilities/theme/media.js");
 const index = require("../../../model/elements/index.js");
 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("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");

package/dist/composite/person/bio/small.js.map

@@ -1 +1 @@
-{"version":3,"file":"small.js","sources":["../../../../source/composite/person/bio/small.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { PersonBio } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\nconst createTextContainer = (props: PersonBio) => {\n  const { isThemeDark, name, ...textProps } = props;\n  const children: ElementVisual[] = [];\n\n  if (name) {\n    children.push(\n      ElementModel.headline.sansExtraLarge({\n        element: name,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            color: `${Styles.token.color.black}`,\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textLockup.person({ ...textProps, isThemeDark }));\n\n  return ElementModel.text.lineAdjustmentInset({\n    element: document.createElement('div'),\n    children,\n  });\n};\n\nconst createTextColumn = (props: PersonBio) => {\n  const { actions } = props;\n  const textContainer = createTextContainer(props);\n  const children: ElementVisual[] = [];\n\n  children.push(textContainer, textLockup.contact(props));\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridInlineTabletRows({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-text-column',\n    children,\n  });\n};\n\nconst makeContainer = (props: PersonBio) => {\n  const { image } = props;\n  const textColumn = createTextColumn(props);\n  const children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          element: {\n            ...theme.media.createContainerQuery(\n              'max-width',\n              Styles.token.media.breakpointValues.medium.max,\n              {\n                display: 'flex',\n              },\n            ),\n\n            [`& img`]: {\n              ...theme.media.createContainerQuery(\n                'min-width',\n                Styles.token.media.breakpointValues.large.min,\n                {\n                  width: `100%`,\n                  height: `auto !important`,\n                },\n              ),\n            },\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textColumn);\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-container',\n    children,\n    elementStyles: {\n      element: {\n        display: 'grid',\n        gridGap: `${Styles.token.spacing.md}`,\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          Styles.token.media.breakpointValues.large.min,\n          {\n            gridTemplateColumns: `repeat(8, 1fr)`,\n            gridGap: `${Styles.token.spacing.lg}`,\n            alignItems: `center`,\n          },\n        ),\n\n        [`& > *`]: {\n          ...theme.media.createContainerQuery(\n            'min-width',\n            Styles.token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 5`,\n            },\n          ),\n        },\n\n        [`&:has(> :nth-child(2)) > *:first-child `]: {\n          ...theme.media.createContainerQuery(\n            'min-width',\n            Styles.token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 3`,\n              alignSelf: `flex-start`,\n            },\n          ),\n        },\n      },\n    },\n  });\n};\n\nexport default (props: PersonBio) => {\n  const { isThemeDark, description } = props;\n  const container = makeContainer(props);\n  const children: ElementVisual[] = [container];\n\n  if (description) {\n    children.push(\n      ElementModel.richText.simpleLarge({\n        element: description,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.lg,\n            maxWidth: Styles.token.spacing.maxWidth.smallest,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-composite',\n    children,\n  });\n};\n"],"names":["ElementModel.headline.sansExtraLarge","Styles","textLockup.person","ElementModel.text.lineAdjustmentInset","textLockup.contact","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","assets.image.background","theme.media.createContainerQuery","ElementModel.richText.simpleLarge"],"mappings":"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"}
+{"version":3,"file":"small.js","sources":["../../../../source/composite/person/bio/small.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { PersonBio } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\nconst createTextContainer = (props: PersonBio) => {\n  const { isThemeDark, name, ...textProps } = props;\n  const children: ElementVisual[] = [];\n\n  if (name) {\n    children.push(\n      ElementModel.headline.sansExtraLarge({\n        element: name,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            color: `${Styles.token.color.black}`,\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textLockup.person({ ...textProps, isThemeDark }));\n\n  return ElementModel.text.lineAdjustmentInset({\n    element: document.createElement('div'),\n    children,\n  });\n};\n\nconst createTextColumn = (props: PersonBio) => {\n  const { actions } = props;\n  const textContainer = createTextContainer(props);\n  const children: ElementVisual[] = [];\n\n  children.push(textContainer, textLockup.contact(props));\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridInlineTabletRows({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-text-column',\n    children,\n  });\n};\n\nconst makeContainer = (props: PersonBio) => {\n  const { image } = props;\n  const textColumn = createTextColumn(props);\n  const children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          element: {\n            ...theme.media.createContainerQuery(\n              'max-width',\n              Styles.token.media.breakpointValues.medium.max,\n              {\n                display: 'flex',\n              },\n            ),\n\n            [`& img`]: {\n              ...theme.media.createContainerQuery(\n                'min-width',\n                Styles.token.media.breakpointValues.large.min,\n                {\n                  width: `100%`,\n                  height: `auto !important`,\n                },\n              ),\n            },\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textColumn);\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-container',\n    children,\n    elementStyles: {\n      element: {\n        display: 'grid',\n        gridGap: `${Styles.token.spacing.md}`,\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          Styles.token.media.breakpointValues.large.min,\n          {\n            gridTemplateColumns: `repeat(8, 1fr)`,\n            gridGap: `${Styles.token.spacing.lg}`,\n            alignItems: `center`,\n          },\n        ),\n\n        [`& > *`]: {\n          ...theme.media.createContainerQuery(\n            'min-width',\n            Styles.token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 5`,\n            },\n          ),\n        },\n\n        [`&:has(> :nth-child(2)) > *:first-child `]: {\n          ...theme.media.createContainerQuery(\n            'min-width',\n            Styles.token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 3`,\n              alignSelf: `flex-start`,\n            },\n          ),\n        },\n      },\n    },\n  });\n};\n\nexport default (props: PersonBio) => {\n  const { isThemeDark, description } = props;\n  const container = makeContainer(props);\n  const children: ElementVisual[] = [container];\n\n  if (description) {\n    children.push(\n      ElementModel.richText.simpleLarge({\n        element: description,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.lg,\n            maxWidth: Styles.token.spacing.maxWidth.smallest,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-composite',\n    children,\n  });\n};\n"],"names":["ElementModel.headline.sansExtraLarge","Styles","textLockup.person","ElementModel.text.lineAdjustmentInset","textLockup.contact","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","assets.image.background","theme.media.createContainerQuery","ElementModel.richText.simpleLarge"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,sBAAsB,CAAC,UAAqB;AAChD,QAAM,EAAE,aAAa,MAAM,GAAG,cAAc;AAC5C,QAAM,WAA4B,CAAA;AAElC,MAAI,MAAM;AACR,aAAS;AAAA,MACPA,wBAAqC;AAAA,QACnC,SAAS;AAAA,QACT;AAAA,QACA,eAAe;AAAA,UACb,SAAS;AAAA,YACP,OAAO,GAAGC,kBAAO,MAAM,MAAM,KAAK;AAAA,YAClC,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,SAAS;AAAA,UAAA;AAAA,UAEX,cAAc;AAAA,YACZ,WAAWA,kBAAO,MAAM,QAAQ;AAAA,UAAA;AAAA,QAClC;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS,KAAKC,OAAkB,EAAE,GAAG,WAAW,YAAA,CAAa,CAAC;AAE9D,SAAOC,yBAAsC;AAAA,IAC3C,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC;AAAA,EAAA,CACD;AACH;AAEA,MAAM,mBAAmB,CAAC,UAAqB;AAC7C,QAAM,EAAE,YAAY;AACpB,QAAM,gBAAgB,oBAAoB,KAAK;AAC/C,QAAM,WAA4B,CAAA;AAElC,WAAS,KAAK,eAAeC,QAAmB,KAAK,CAAC;AAEtD,MAAI,SAAS;AACX,aAAS;AAAA,MACPC,4BAAyC;AAAA,QACvC,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAWJ,kBAAO,MAAM,QAAQ;AAAA,UAAA;AAAA,QAClC;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOK,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,EAAA,CACD;AACH;AAEA,MAAM,gBAAgB,CAAC,UAAqB;AAC1C,QAAM,EAAE,UAAU;AAClB,QAAM,aAAa,iBAAiB,KAAK;AACzC,QAAM,WAA4B,CAAA;AAElC,MAAI,OAAO;AACT,aAAS;AAAA,MACPC,WAAwB;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,cAAc;AAAA,UACZ,SAAS;AAAA,YACP,GAAGC,MAAAA;AAAAA,cACD;AAAA,cACAP,kBAAO,MAAM,MAAM,iBAAiB,OAAO;AAAA,cAC3C;AAAA,gBACE,SAAS;AAAA,cAAA;AAAA,YACX;AAAA,YAGF,CAAC,OAAO,GAAG;AAAA,cACT,GAAGO,MAAAA;AAAAA,gBACD;AAAA,gBACAP,kBAAO,MAAM,MAAM,iBAAiB,MAAM;AAAA,gBAC1C;AAAA,kBACE,OAAO;AAAA,kBACP,QAAQ;AAAA,gBAAA;AAAA,cACV;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS,KAAK,UAAU;AAExB,SAAOK,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS,GAAGL,kBAAO,MAAM,QAAQ,EAAE;AAAA,QAEnC,GAAGO,MAAAA;AAAAA,UACD;AAAA,UACAP,kBAAO,MAAM,MAAM,iBAAiB,MAAM;AAAA,UAC1C;AAAA,YACE,qBAAqB;AAAA,YACrB,SAAS,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,YACnC,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,QAGF,CAAC,OAAO,GAAG;AAAA,UACT,GAAGO,MAAAA;AAAAA,YACD;AAAA,YACAP,kBAAO,MAAM,MAAM,iBAAiB,MAAM;AAAA,YAC1C;AAAA,cACE,YAAY;AAAA,YAAA;AAAA,UACd;AAAA,QACF;AAAA,QAGF,CAAC,yCAAyC,GAAG;AAAA,UAC3C,GAAGO,MAAAA;AAAAA,YACD;AAAA,YACAP,kBAAO,MAAM,MAAM,iBAAiB,MAAM;AAAA,YAC1C;AAAA,cACE,YAAY;AAAA,cACZ,WAAW;AAAA,YAAA;AAAA,UACb;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAA,QAAe,CAAC,UAAqB;AACnC,QAAM,EAAE,aAAa,YAAA,IAAgB;AACrC,QAAM,YAAY,cAAc,KAAK;AACrC,QAAM,WAA4B,CAAC,SAAS;AAE5C,MAAI,aAAa;AACf,aAAS;AAAA,MACPQ,qBAAkC;AAAA,QAChC,SAAS;AAAA,QACT;AAAA,QACA,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAWR,kBAAO,MAAM,QAAQ;AAAA,YAChC,UAAUA,kBAAO,MAAM,QAAQ,SAAS;AAAA,UAAA;AAAA,QAC1C;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOK,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,EAAA,CACD;AACH;;"}

package/dist/composite/person/bio/small.mjs

@@ -6,6 +6,7 @@ import { createContainerQuery } from "../../../utilities/theme/media.mjs";
 import { createDiv } from "../../../model/elements/index.mjs";
 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 "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";

package/dist/composite/person/bio/small.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"small.mjs","sources":["../../../../source/composite/person/bio/small.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { PersonBio } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\nconst createTextContainer = (props: PersonBio) => {\n  const { isThemeDark, name, ...textProps } = props;\n  const children: ElementVisual[] = [];\n\n  if (name) {\n    children.push(\n      ElementModel.headline.sansExtraLarge({\n        element: name,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            color: `${Styles.token.color.black}`,\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textLockup.person({ ...textProps, isThemeDark }));\n\n  return ElementModel.text.lineAdjustmentInset({\n    element: document.createElement('div'),\n    children,\n  });\n};\n\nconst createTextColumn = (props: PersonBio) => {\n  const { actions } = props;\n  const textContainer = createTextContainer(props);\n  const children: ElementVisual[] = [];\n\n  children.push(textContainer, textLockup.contact(props));\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridInlineTabletRows({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-text-column',\n    children,\n  });\n};\n\nconst makeContainer = (props: PersonBio) => {\n  const { image } = props;\n  const textColumn = createTextColumn(props);\n  const children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          element: {\n            ...theme.media.createContainerQuery(\n              'max-width',\n              Styles.token.media.breakpointValues.medium.max,\n              {\n                display: 'flex',\n              },\n            ),\n\n            [`& img`]: {\n              ...theme.media.createContainerQuery(\n                'min-width',\n                Styles.token.media.breakpointValues.large.min,\n                {\n                  width: `100%`,\n                  height: `auto !important`,\n                },\n              ),\n            },\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textColumn);\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-container',\n    children,\n    elementStyles: {\n      element: {\n        display: 'grid',\n        gridGap: `${Styles.token.spacing.md}`,\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          Styles.token.media.breakpointValues.large.min,\n          {\n            gridTemplateColumns: `repeat(8, 1fr)`,\n            gridGap: `${Styles.token.spacing.lg}`,\n            alignItems: `center`,\n          },\n        ),\n\n        [`& > *`]: {\n          ...theme.media.createContainerQuery(\n            'min-width',\n            Styles.token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 5`,\n            },\n          ),\n        },\n\n        [`&:has(> :nth-child(2)) > *:first-child `]: {\n          ...theme.media.createContainerQuery(\n            'min-width',\n            Styles.token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 3`,\n              alignSelf: `flex-start`,\n            },\n          ),\n        },\n      },\n    },\n  });\n};\n\nexport default (props: PersonBio) => {\n  const { isThemeDark, description } = props;\n  const container = makeContainer(props);\n  const children: ElementVisual[] = [container];\n\n  if (description) {\n    children.push(\n      ElementModel.richText.simpleLarge({\n        element: description,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.lg,\n            maxWidth: Styles.token.spacing.maxWidth.smallest,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-composite',\n    children,\n  });\n};\n"],"names":["ElementModel.headline.sansExtraLarge","textLockup.person","ElementModel.text.lineAdjustmentInset","textLockup.contact","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","assets.image.background","theme.media.createContainerQuery","ElementModel.richText.simpleLarge"],"mappings":"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"}
+{"version":3,"file":"small.mjs","sources":["../../../../source/composite/person/bio/small.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { PersonBio } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\nconst createTextContainer = (props: PersonBio) => {\n  const { isThemeDark, name, ...textProps } = props;\n  const children: ElementVisual[] = [];\n\n  if (name) {\n    children.push(\n      ElementModel.headline.sansExtraLarge({\n        element: name,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            color: `${Styles.token.color.black}`,\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textLockup.person({ ...textProps, isThemeDark }));\n\n  return ElementModel.text.lineAdjustmentInset({\n    element: document.createElement('div'),\n    children,\n  });\n};\n\nconst createTextColumn = (props: PersonBio) => {\n  const { actions } = props;\n  const textContainer = createTextContainer(props);\n  const children: ElementVisual[] = [];\n\n  children.push(textContainer, textLockup.contact(props));\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridInlineTabletRows({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-text-column',\n    children,\n  });\n};\n\nconst makeContainer = (props: PersonBio) => {\n  const { image } = props;\n  const textColumn = createTextColumn(props);\n  const children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          element: {\n            ...theme.media.createContainerQuery(\n              'max-width',\n              Styles.token.media.breakpointValues.medium.max,\n              {\n                display: 'flex',\n              },\n            ),\n\n            [`& img`]: {\n              ...theme.media.createContainerQuery(\n                'min-width',\n                Styles.token.media.breakpointValues.large.min,\n                {\n                  width: `100%`,\n                  height: `auto !important`,\n                },\n              ),\n            },\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textColumn);\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-container',\n    children,\n    elementStyles: {\n      element: {\n        display: 'grid',\n        gridGap: `${Styles.token.spacing.md}`,\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          Styles.token.media.breakpointValues.large.min,\n          {\n            gridTemplateColumns: `repeat(8, 1fr)`,\n            gridGap: `${Styles.token.spacing.lg}`,\n            alignItems: `center`,\n          },\n        ),\n\n        [`& > *`]: {\n          ...theme.media.createContainerQuery(\n            'min-width',\n            Styles.token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 5`,\n            },\n          ),\n        },\n\n        [`&:has(> :nth-child(2)) > *:first-child `]: {\n          ...theme.media.createContainerQuery(\n            'min-width',\n            Styles.token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 3`,\n              alignSelf: `flex-start`,\n            },\n          ),\n        },\n      },\n    },\n  });\n};\n\nexport default (props: PersonBio) => {\n  const { isThemeDark, description } = props;\n  const container = makeContainer(props);\n  const children: ElementVisual[] = [container];\n\n  if (description) {\n    children.push(\n      ElementModel.richText.simpleLarge({\n        element: description,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.lg,\n            maxWidth: Styles.token.spacing.maxWidth.smallest,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-composite',\n    children,\n  });\n};\n"],"names":["ElementModel.headline.sansExtraLarge","textLockup.person","ElementModel.text.lineAdjustmentInset","textLockup.contact","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","assets.image.background","theme.media.createContainerQuery","ElementModel.richText.simpleLarge"],"mappings":"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"}

package/dist/composite/person/block.js

@@ -9,6 +9,7 @@ const media = require("../../utilities/theme/media.js");
 const index = require("../../model/elements/index.js");
 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("../../atomic/layout/block/stacked.js");
 require("../../atomic/layout/overlay/modal.js");

package/dist/composite/person/block.js.map

@@ -1 +1 @@
-{"version":3,"file":"block.js","sources":["../../../source/composite/person/block.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { asset, markup, theme } from 'utilities';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\n\nexport default (props: PersonCard) => {\n  const { image: personImage, isThemeDark } = props;\n  const textLockupElement = textLockup.person(props);\n  const contactLockupElement = textLockup.contact(props);\n  let children: ElementVisual[] = [];\n\n  let image = personImage;\n\n  if (!image) {\n    image = markup.create.imageFromSvg({\n      SVG: asset.icon.PERSON,\n    });\n  }\n\n  children.push(\n    ElementModel.createDiv({\n      className: 'person-block-image',\n      elementStyles: {\n        element: {\n          display: 'flex',\n          justifyContent: 'center',\n          backgroundColor: `${Styles.token.color.gray.lighter}`,\n          marginBottom: `${Styles.token.spacing.md}`,\n\n          ...(isThemeDark && {\n            backgroundColor: `${Styles.token.color.gray.darker}`,\n          }),\n\n          ['& img, & svg']: {\n            display: 'block',\n            width: '100%',\n            objectFit: 'contain',\n            height: '140px !important',\n\n            ...theme.media.createContainerQuery(\n              'min-width',\n              mediumBreakpointStart,\n              {\n                height: '200px !important',\n              },\n            ),\n          },\n        },\n      },\n      children: [\n        assets.image.background({\n          element: image,\n          isScaled: false,\n          customStyles: {\n            height: 'auto',\n          },\n        }),\n      ],\n    }),\n  );\n\n  children.push(textLockupElement);\n  children.push(contactLockupElement);\n\n  return ElementModel.createDiv({\n    className: 'person-block',\n    children,\n  });\n};\n"],"names":["Styles","textLockup.person","textLockup.contact","markup.create.imageFromSvg","asset.icon.PERSON","ElementModel.createDiv","theme.media.createContainerQuery","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,wBAAwBA,kBAAO,MAAM,MAAM,iBAAiB,OAAO;AAEzE,MAAA,QAAe,CAAC,UAAsB;AACpC,QAAM,EAAE,OAAO,aAAa,YAAA,IAAgB;AAC5C,QAAM,oBAAoBC,OAAkB,KAAK;AACjD,QAAM,uBAAuBC,QAAmB,KAAK;AACrD,MAAI,WAA4B,CAAA;AAEhC,MAAI,QAAQ;AAEZ,MAAI,CAAC,OAAO;AACV,YAAQC,OAAAA,aAA2B;AAAA,MACjC,KAAKC,MAAAA;AAAAA,IAAW,CACjB;AAAA,EACH;AAEA,WAAS;AAAA,IACPC,gBAAuB;AAAA,MACrB,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,iBAAiB,GAAGL,kBAAO,MAAM,MAAM,KAAK,OAAO;AAAA,UACnD,cAAc,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,UAExC,GAAI,eAAe;AAAA,YACjB,iBAAiB,GAAGA,kBAAO,MAAM,MAAM,KAAK,MAAM;AAAA,UAAA;AAAA,UAGpD,CAAC,cAAc,GAAG;AAAA,YAChB,SAAS;AAAA,YACT,OAAO;AAAA,YACP,WAAW;AAAA,YACX,QAAQ;AAAA,YAER,GAAGM,MAAAA;AAAAA,cACD;AAAA,cACA;AAAA,cACA;AAAA,gBACE,QAAQ;AAAA,cAAA;AAAA,YACV;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MAEF,UAAU;AAAA,QACRC,WAAwB;AAAA,UACtB,SAAS;AAAA,UACT,UAAU;AAAA,UACV,cAAc;AAAA,YACZ,QAAQ;AAAA,UAAA;AAAA,QACV,CACD;AAAA,MAAA;AAAA,IACH,CACD;AAAA,EAAA;AAGH,WAAS,KAAK,iBAAiB;AAC/B,WAAS,KAAK,oBAAoB;AAElC,SAAOF,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,EAAA,CACD;AACH;;"}
+{"version":3,"file":"block.js","sources":["../../../source/composite/person/block.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { asset, markup, theme } from 'utilities';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\n\nexport default (props: PersonCard) => {\n  const { image: personImage, isThemeDark } = props;\n  const textLockupElement = textLockup.person(props);\n  const contactLockupElement = textLockup.contact(props);\n  let children: ElementVisual[] = [];\n\n  let image = personImage;\n\n  if (!image) {\n    image = markup.create.imageFromSvg({\n      SVG: asset.icon.PERSON,\n    });\n  }\n\n  children.push(\n    ElementModel.createDiv({\n      className: 'person-block-image',\n      elementStyles: {\n        element: {\n          display: 'flex',\n          justifyContent: 'center',\n          backgroundColor: `${Styles.token.color.gray.lighter}`,\n          marginBottom: `${Styles.token.spacing.md}`,\n\n          ...(isThemeDark && {\n            backgroundColor: `${Styles.token.color.gray.darker}`,\n          }),\n\n          ['& img, & svg']: {\n            display: 'block',\n            width: '100%',\n            objectFit: 'contain',\n            height: '140px !important',\n\n            ...theme.media.createContainerQuery(\n              'min-width',\n              mediumBreakpointStart,\n              {\n                height: '200px !important',\n              },\n            ),\n          },\n        },\n      },\n      children: [\n        assets.image.background({\n          element: image,\n          isScaled: false,\n          customStyles: {\n            height: 'auto',\n          },\n        }),\n      ],\n    }),\n  );\n\n  children.push(textLockupElement);\n  children.push(contactLockupElement);\n\n  return ElementModel.createDiv({\n    className: 'person-block',\n    children,\n  });\n};\n"],"names":["Styles","textLockup.person","textLockup.contact","markup.create.imageFromSvg","asset.icon.PERSON","ElementModel.createDiv","theme.media.createContainerQuery","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,wBAAwBA,kBAAO,MAAM,MAAM,iBAAiB,OAAO;AAEzE,MAAA,QAAe,CAAC,UAAsB;AACpC,QAAM,EAAE,OAAO,aAAa,YAAA,IAAgB;AAC5C,QAAM,oBAAoBC,OAAkB,KAAK;AACjD,QAAM,uBAAuBC,QAAmB,KAAK;AACrD,MAAI,WAA4B,CAAA;AAEhC,MAAI,QAAQ;AAEZ,MAAI,CAAC,OAAO;AACV,YAAQC,OAAAA,aAA2B;AAAA,MACjC,KAAKC,MAAAA;AAAAA,IAAW,CACjB;AAAA,EACH;AAEA,WAAS;AAAA,IACPC,gBAAuB;AAAA,MACrB,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,iBAAiB,GAAGL,kBAAO,MAAM,MAAM,KAAK,OAAO;AAAA,UACnD,cAAc,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,UAExC,GAAI,eAAe;AAAA,YACjB,iBAAiB,GAAGA,kBAAO,MAAM,MAAM,KAAK,MAAM;AAAA,UAAA;AAAA,UAGpD,CAAC,cAAc,GAAG;AAAA,YAChB,SAAS;AAAA,YACT,OAAO;AAAA,YACP,WAAW;AAAA,YACX,QAAQ;AAAA,YAER,GAAGM,MAAAA;AAAAA,cACD;AAAA,cACA;AAAA,cACA;AAAA,gBACE,QAAQ;AAAA,cAAA;AAAA,YACV;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MAEF,UAAU;AAAA,QACRC,WAAwB;AAAA,UACtB,SAAS;AAAA,UACT,UAAU;AAAA,UACV,cAAc;AAAA,YACZ,QAAQ;AAAA,UAAA;AAAA,QACV,CACD;AAAA,MAAA;AAAA,IACH,CACD;AAAA,EAAA;AAGH,WAAS,KAAK,iBAAiB;AAC/B,WAAS,KAAK,oBAAoB;AAElC,SAAOF,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,EAAA,CACD;AACH;;"}

package/dist/composite/person/block.mjs

@@ -8,6 +8,7 @@ import { createContainerQuery } from "../../utilities/theme/media.mjs";
 import { createDiv } from "../../model/elements/index.mjs";
 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 "../../atomic/layout/block/stacked.mjs";
 import "../../atomic/layout/overlay/modal.mjs";

package/dist/composite/person/block.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"block.mjs","sources":["../../../source/composite/person/block.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { asset, markup, theme } from 'utilities';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\n\nexport default (props: PersonCard) => {\n  const { image: personImage, isThemeDark } = props;\n  const textLockupElement = textLockup.person(props);\n  const contactLockupElement = textLockup.contact(props);\n  let children: ElementVisual[] = [];\n\n  let image = personImage;\n\n  if (!image) {\n    image = markup.create.imageFromSvg({\n      SVG: asset.icon.PERSON,\n    });\n  }\n\n  children.push(\n    ElementModel.createDiv({\n      className: 'person-block-image',\n      elementStyles: {\n        element: {\n          display: 'flex',\n          justifyContent: 'center',\n          backgroundColor: `${Styles.token.color.gray.lighter}`,\n          marginBottom: `${Styles.token.spacing.md}`,\n\n          ...(isThemeDark && {\n            backgroundColor: `${Styles.token.color.gray.darker}`,\n          }),\n\n          ['& img, & svg']: {\n            display: 'block',\n            width: '100%',\n            objectFit: 'contain',\n            height: '140px !important',\n\n            ...theme.media.createContainerQuery(\n              'min-width',\n              mediumBreakpointStart,\n              {\n                height: '200px !important',\n              },\n            ),\n          },\n        },\n      },\n      children: [\n        assets.image.background({\n          element: image,\n          isScaled: false,\n          customStyles: {\n            height: 'auto',\n          },\n        }),\n      ],\n    }),\n  );\n\n  children.push(textLockupElement);\n  children.push(contactLockupElement);\n\n  return ElementModel.createDiv({\n    className: 'person-block',\n    children,\n  });\n};\n"],"names":["textLockup.person","textLockup.contact","markup.create.imageFromSvg","asset.icon.PERSON","ElementModel.createDiv","theme.media.createContainerQuery","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;AAOA,MAAM,wBAAwB,OAAO,MAAM,MAAM,iBAAiB,OAAO;AAEzE,MAAA,QAAe,CAAC,UAAsB;AACpC,QAAM,EAAE,OAAO,aAAa,YAAA,IAAgB;AAC5C,QAAM,oBAAoBA,OAAkB,KAAK;AACjD,QAAM,uBAAuBC,QAAmB,KAAK;AACrD,MAAI,WAA4B,CAAA;AAEhC,MAAI,QAAQ;AAEZ,MAAI,CAAC,OAAO;AACV,YAAQC,aAA2B;AAAA,MACjC,KAAKC;AAAAA,IAAW,CACjB;AAAA,EACH;AAEA,WAAS;AAAA,IACPC,UAAuB;AAAA,MACrB,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,iBAAiB,GAAG,OAAO,MAAM,MAAM,KAAK,OAAO;AAAA,UACnD,cAAc,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,UAExC,GAAI,eAAe;AAAA,YACjB,iBAAiB,GAAG,OAAO,MAAM,MAAM,KAAK,MAAM;AAAA,UAAA;AAAA,UAGpD,CAAC,cAAc,GAAG;AAAA,YAChB,SAAS;AAAA,YACT,OAAO;AAAA,YACP,WAAW;AAAA,YACX,QAAQ;AAAA,YAER,GAAGC;AAAAA,cACD;AAAA,cACA;AAAA,cACA;AAAA,gBACE,QAAQ;AAAA,cAAA;AAAA,YACV;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MAEF,UAAU;AAAA,QACRC,eAAwB;AAAA,UACtB,SAAS;AAAA,UACT,UAAU;AAAA,UACV,cAAc;AAAA,YACZ,QAAQ;AAAA,UAAA;AAAA,QACV,CACD;AAAA,MAAA;AAAA,IACH,CACD;AAAA,EAAA;AAGH,WAAS,KAAK,iBAAiB;AAC/B,WAAS,KAAK,oBAAoB;AAElC,SAAOF,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,EAAA,CACD;AACH;"}
+{"version":3,"file":"block.mjs","sources":["../../../source/composite/person/block.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { asset, markup, theme } from 'utilities';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\n\nexport default (props: PersonCard) => {\n  const { image: personImage, isThemeDark } = props;\n  const textLockupElement = textLockup.person(props);\n  const contactLockupElement = textLockup.contact(props);\n  let children: ElementVisual[] = [];\n\n  let image = personImage;\n\n  if (!image) {\n    image = markup.create.imageFromSvg({\n      SVG: asset.icon.PERSON,\n    });\n  }\n\n  children.push(\n    ElementModel.createDiv({\n      className: 'person-block-image',\n      elementStyles: {\n        element: {\n          display: 'flex',\n          justifyContent: 'center',\n          backgroundColor: `${Styles.token.color.gray.lighter}`,\n          marginBottom: `${Styles.token.spacing.md}`,\n\n          ...(isThemeDark && {\n            backgroundColor: `${Styles.token.color.gray.darker}`,\n          }),\n\n          ['& img, & svg']: {\n            display: 'block',\n            width: '100%',\n            objectFit: 'contain',\n            height: '140px !important',\n\n            ...theme.media.createContainerQuery(\n              'min-width',\n              mediumBreakpointStart,\n              {\n                height: '200px !important',\n              },\n            ),\n          },\n        },\n      },\n      children: [\n        assets.image.background({\n          element: image,\n          isScaled: false,\n          customStyles: {\n            height: 'auto',\n          },\n        }),\n      ],\n    }),\n  );\n\n  children.push(textLockupElement);\n  children.push(contactLockupElement);\n\n  return ElementModel.createDiv({\n    className: 'person-block',\n    children,\n  });\n};\n"],"names":["textLockup.person","textLockup.contact","markup.create.imageFromSvg","asset.icon.PERSON","ElementModel.createDiv","theme.media.createContainerQuery","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;AAOA,MAAM,wBAAwB,OAAO,MAAM,MAAM,iBAAiB,OAAO;AAEzE,MAAA,QAAe,CAAC,UAAsB;AACpC,QAAM,EAAE,OAAO,aAAa,YAAA,IAAgB;AAC5C,QAAM,oBAAoBA,OAAkB,KAAK;AACjD,QAAM,uBAAuBC,QAAmB,KAAK;AACrD,MAAI,WAA4B,CAAA;AAEhC,MAAI,QAAQ;AAEZ,MAAI,CAAC,OAAO;AACV,YAAQC,aAA2B;AAAA,MACjC,KAAKC;AAAAA,IAAW,CACjB;AAAA,EACH;AAEA,WAAS;AAAA,IACPC,UAAuB;AAAA,MACrB,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,iBAAiB,GAAG,OAAO,MAAM,MAAM,KAAK,OAAO;AAAA,UACnD,cAAc,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,UAExC,GAAI,eAAe;AAAA,YACjB,iBAAiB,GAAG,OAAO,MAAM,MAAM,KAAK,MAAM;AAAA,UAAA;AAAA,UAGpD,CAAC,cAAc,GAAG;AAAA,YAChB,SAAS;AAAA,YACT,OAAO;AAAA,YACP,WAAW;AAAA,YACX,QAAQ;AAAA,YAER,GAAGC;AAAAA,cACD;AAAA,cACA;AAAA,cACA;AAAA,gBACE,QAAQ;AAAA,cAAA;AAAA,YACV;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MAEF,UAAU;AAAA,QACRC,eAAwB;AAAA,UACtB,SAAS;AAAA,UACT,UAAU;AAAA,UACV,cAAc;AAAA,YACZ,QAAQ;AAAA,UAAA;AAAA,QACV,CACD;AAAA,MAAA;AAAA,IACH,CACD;AAAA,EAAA;AAGH,WAAS,KAAK,iBAAiB;AAC/B,WAAS,KAAK,oBAAoB;AAElC,SAAOF,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,EAAA,CACD;AACH;"}

package/dist/composite/person/hero.js

@@ -6,6 +6,7 @@ require("../../node_modules/postcss-js/index.js");
 const index = require("../../model/elements/index.js");
 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("../../atomic/layout/block/stacked.js");
 require("../../atomic/layout/overlay/modal.js");

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

@@ -1 +1 @@
-{"version":3,"file":"hero.js","sources":["../../../source/composite/person/hero.ts"],"sourcesContent":["import {\n  token,\n  layout,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonContact } from './_types';\n\ninterface Theme {\n  isThemeDark?: boolean;\n}\n\ninterface PersonText extends Theme {\n  name: HTMLElement | null;\n  job?: HTMLElement | null;\n  subText?: HTMLElement | null;\n}\n\ninterface PersonInfo extends PersonContact, Theme {\n  image?: HTMLImageElement | null;\n  association?: HTMLElement | null;\n  pronouns?: HTMLElement | null;\n}\n\ninterface PersonHero extends PersonText, PersonInfo {\n  breadcrumbMobile?: HTMLElement | null;\n  breadcrumbDesktop?: HTMLElement | null;\n}\n\nconst CreateImageBlock = (props: PersonInfo) => {\n  const { image, association, pronouns, isThemeDark } = props;\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-image-container',\n    elementStyles: {\n      element: {\n        paddingTop: `${token.spacing.lg}`,\n        paddingBottom: `${token.spacing.lg}`,\n        backgroundColor: `${\n          isThemeDark ? token.color.gray.lightest : token.color.black\n        }`,\n        position: 'relative',\n\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n        },\n\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          padding: `${token.spacing.md}`,\n          width: '30%',\n          maxWidth: '320px',\n        },\n      },\n    },\n  });\n\n  const wrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-image-wrapper',\n  });\n\n  const contactContainer = textLockup.contact({\n    ...props,\n    isThemeDark: !isThemeDark,\n  });\n\n  if (image) {\n    const imageContainer = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-image',\n      elementStyles: {\n        element: {\n          backgroundColor: `${\n            isThemeDark ? token.color.gray.lightest : token.color.gray.darker\n          }`,\n          display: 'flex',\n          justifyContent: 'center',\n          marginBottom: token.spacing.md,\n\n          ['& img']: {\n            [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n              maxHeight: '160px',\n            },\n          },\n        },\n      },\n    });\n    const imageBlock = assets.image.background({\n      element: image,\n      isScaled: false,\n    });\n\n    imageContainer.element.appendChild(imageBlock.element);\n    imageContainer.styles += imageBlock.styles;\n    wrapper.element.appendChild(imageContainer.element);\n    wrapper.styles += imageContainer.styles;\n  }\n\n  if (association) {\n    const styledAssociation = ElementModel.headline.sansLarge({\n      element: association,\n      isThemeDark: !isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n        siblingAfter: {\n          marginTop: token.spacing.min,\n        },\n      },\n    });\n    wrapper.element.appendChild(styledAssociation.element);\n    wrapper.styles += styledAssociation.styles;\n  }\n\n  if (pronouns) {\n    const italicStyle = document.createElement('i');\n    italicStyle.appendChild(pronouns);\n\n    const styledPronouns = ElementModel.create({\n      element: italicStyle,\n      className: 'umd-person-hero-pronouns',\n      isThemeDark: !isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n        siblingAfter: {\n          display: 'block',\n          marginTop: token.spacing.min,\n        },\n      },\n    });\n\n    wrapper.element.appendChild(styledPronouns.element);\n    wrapper.styles += styledPronouns.styles;\n  }\n\n  if (contactContainer) {\n    wrapper.element.append(contactContainer.element);\n    wrapper.styles += contactContainer.styles;\n  }\n\n  container.element.appendChild(wrapper.element);\n  container.styles += wrapper.styles;\n  return container;\n};\n\nconst CreateTextContainer = ({\n  name,\n  job,\n  subText,\n  isThemeDark,\n}: PersonText) => {\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'person-hero-text',\n    elementStyles: {\n      element: {\n        backgroundColor: `${\n          isThemeDark ? token.color.black : token.color.gray.lightest\n        }`,\n        paddingTop: `${token.spacing['3xl']}`,\n        paddingBottom: `${token.spacing['3xl']}`,\n        position: 'relative',\n\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n        },\n\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          paddingTop: `0`,\n          paddingBottom: `${token.spacing['7xl']}`,\n          alignSelf: 'flex-start',\n        },\n      },\n      pseudoBefore: {\n        content: '\"\"',\n        position: 'absolute',\n        top: '-100px',\n        left: '0',\n        bottom: '0',\n        width: '200vw',\n        transform: 'translateX(-20%)',\n        backgroundColor: `${\n          isThemeDark ? token.color.black : token.color.gray.lightest\n        }`,\n      },\n    },\n  });\n\n  const lineWrapper = ElementModel.text.lineAdjustmentInset({\n    element: document.createElement('div'),\n    elementStyles: {\n      pseudoBefore: {\n        backgroundColor: `${isThemeDark ? token.color.gold : token.color.red}`,\n      },\n    },\n  });\n\n  if (subText) {\n    const styledSubText = ElementModel.headline.sansSmall({\n      element: subText,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n          textTransform: 'uppercase',\n          fontWeight: '700',\n          color: `${token.color.black}`,\n          maxWidth: '650px',\n        },\n        siblingAfter: {\n          marginTop: token.spacing.min,\n\n          [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      },\n    });\n\n    lineWrapper.element.appendChild(styledSubText.element);\n    lineWrapper.styles += styledSubText.styles;\n  }\n\n  if (name) {\n    const styledName = ElementModel.headline.campaignLarge({\n      element: name,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          textTransform: 'uppercase',\n          fontWeight: '700',\n          display: 'block',\n          color: `${token.color.black}`,\n        },\n        siblingAfter: {\n          marginTop: token.spacing.min,\n\n          [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n            marginTop: token.spacing.md,\n          },\n        },\n      },\n    });\n\n    lineWrapper.element.appendChild(styledName.element);\n    lineWrapper.styles += styledName.styles;\n  }\n\n  if (job) {\n    const styledJob = ElementModel.headline.sansMedium({\n      element: job,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n      },\n    });\n    lineWrapper.element.appendChild(styledJob.element);\n    lineWrapper.styles += styledJob.styles;\n  }\n\n  container.element.appendChild(lineWrapper.element);\n  container.styles += lineWrapper.styles;\n\n  return container;\n};\n\nexport default (props: PersonHero) => {\n  const { breadcrumbMobile, breadcrumbDesktop } = props;\n  const composite = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero',\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        containerType: 'inline-size',\n      },\n    },\n  });\n  const elementLock = ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    elementStyles: {\n      element: {\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          padding: '0',\n        },\n      },\n    },\n  });\n\n  const elementWrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-wrapper',\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          display: 'flex',\n          justifyContent: 'space-between',\n          paddingTop: `${token.spacing['7xl']}`,\n        },\n      },\n    },\n  });\n\n  const textColumns = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-columns',\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          width: '70%',\n        },\n      },\n    },\n  });\n\n  const textContainer = CreateTextContainer(props);\n\n  textColumns.element.appendChild(textContainer.element);\n  textColumns.styles += textContainer.styles;\n  elementWrapper.element.appendChild(textColumns.element);\n  elementWrapper.styles += textColumns.styles;\n\n  if (breadcrumbDesktop) {\n    const textColumnBreadcrumb = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-breadcrumb-desktop',\n      elementStyles: {\n        element: {\n          [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n            display: 'none',\n          },\n        },\n      },\n    });\n\n    textColumnBreadcrumb.element.appendChild(breadcrumbDesktop);\n    textColumns.element.appendChild(textColumnBreadcrumb.element);\n    elementWrapper.styles += textColumnBreadcrumb.styles;\n  }\n\n  const imageBlock = CreateImageBlock(props);\n  elementWrapper.element.appendChild(imageBlock.element);\n  elementWrapper.styles += imageBlock.styles;\n\n  elementLock.element.appendChild(elementWrapper.element);\n  elementLock.styles += elementWrapper.styles;\n\n  composite.element.appendChild(elementLock.element);\n  composite.styles += elementLock.styles;\n\n  if (breadcrumbMobile) {\n    const mainBreadcrumb = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-breadcrumb-mobile',\n      elementStyles: {\n        element: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n\n          [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n            display: 'none',\n          },\n        },\n      },\n    });\n\n    mainBreadcrumb.element.appendChild(breadcrumbMobile);\n    elementLock.element.appendChild(mainBreadcrumb.element);\n    composite.styles += mainBreadcrumb.styles;\n  }\n\n  return composite;\n};\n"],"names":["ElementModel.create","token","textLockup.contact","assets.image.background","ElementModel.headline.sansLarge","ElementModel.text.lineAdjustmentInset","ElementModel.headline.sansSmall","ElementModel.headline.campaignLarge","ElementModel.headline.sansMedium","ElementModel.layout.spaceHorizontalLarger"],"mappings":";;;;;;;;;;;;;;;;;;AA8BA,MAAM,mBAAmB,CAAC,UAAsB;AAC9C,QAAM,EAAE,OAAO,aAAa,UAAU,gBAAgB;AACtD,QAAM,YAAYA,MAAAA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,YAAY,GAAGC,OAAAA,MAAM,QAAQ,EAAE;AAAA,QAC/B,eAAe,GAAGA,OAAAA,MAAM,QAAQ,EAAE;AAAA,QAClC,iBAAiB,GACf,cAAcA,OAAAA,MAAM,MAAM,KAAK,WAAWA,OAAAA,MAAM,MAAM,KACxD;AAAA,QACA,UAAU;AAAA,QAEV,CAAC,0BAA0BA,OAAAA,MAAM,MAAM,YAAY,MAAM,GAAG,GAAG,GAAG;AAAA,UAChE,aAAa,GAAGA,OAAAA,MAAM,QAAQ,EAAE;AAAA,UAChC,cAAc,GAAGA,aAAM,QAAQ,EAAE;AAAA,QAAA;AAAA,QAGnC,CAAC,0BAA0BA,OAAAA,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,UACjE,SAAS,GAAGA,OAAAA,MAAM,QAAQ,EAAE;AAAA,UAC5B,OAAO;AAAA,UACP,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,UAAUD,MAAAA,OAAoB;AAAA,IAClC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,EAAA,CACZ;AAED,QAAM,mBAAmBE,QAAmB;AAAA,IAC1C,GAAG;AAAA,IACH,aAAa,CAAC;AAAA,EAAA,CACf;AAED,MAAI,OAAO;AACT,UAAM,iBAAiBF,MAAAA,OAAoB;AAAA,MACzC,SAAS,SAAS,cAAc,KAAK;AAAA,MACrC,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,iBAAiB,GACf,cAAcC,OAAAA,MAAM,MAAM,KAAK,WAAWA,aAAM,MAAM,KAAK,MAC7D;AAAA,UACA,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,cAAcA,OAAAA,MAAM,QAAQ;AAAA,UAE5B,CAAC,OAAO,GAAG;AAAA,YACT,CAAC,0BAA0BA,OAAAA,MAAM,MAAM,YAAY,MAAM,GAAG,GAAG,GAAG;AAAA,cAChE,WAAW;AAAA,YAAA;AAAA,UACb;AAAA,QACF;AAAA,MACF;AAAA,IACF,CACD;AACD,UAAM,aAAaE,WAAwB;AAAA,MACzC,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX;AAED,mBAAe,QAAQ,YAAY,WAAW,OAAO;AACrD,mBAAe,UAAU,WAAW;AACpC,YAAQ,QAAQ,YAAY,eAAe,OAAO;AAClD,YAAQ,UAAU,eAAe;AAAA,EACnC;AAEA,MAAI,aAAa;AACf,UAAM,oBAAoBC,SAAAA,UAAgC;AAAA,MACxD,SAAS;AAAA,MACT,aAAa,CAAC;AAAA,MACd,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,QAAA;AAAA,QAEX,cAAc;AAAA,UACZ,WAAWH,OAAAA,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,IACF,CACD;AACD,YAAQ,QAAQ,YAAY,kBAAkB,OAAO;AACrD,YAAQ,UAAU,kBAAkB;AAAA,EACtC;AAEA,MAAI,UAAU;AACZ,UAAM,cAAc,SAAS,cAAc,GAAG;AAC9C,gBAAY,YAAY,QAAQ;AAEhC,UAAM,iBAAiBD,MAAAA,OAAoB;AAAA,MACzC,SAAS;AAAA,MACT,WAAW;AAAA,MACX,aAAa,CAAC;AAAA,MACd,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,QAAA;AAAA,QAEX,cAAc;AAAA,UACZ,SAAS;AAAA,UACT,WAAWC,OAAAA,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,IACF,CACD;AAED,YAAQ,QAAQ,YAAY,eAAe,OAAO;AAClD,YAAQ,UAAU,eAAe;AAAA,EACnC;AAEA,MAAI,kBAAkB;AACpB,YAAQ,QAAQ,OAAO,iBAAiB,OAAO;AAC/C,YAAQ,UAAU,iBAAiB;AAAA,EACrC;AAEA,YAAU,QAAQ,YAAY,QAAQ,OAAO;AAC7C,YAAU,UAAU,QAAQ;AAC5B,SAAO;AACT;AAEA,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,QAAM,YAAYD,MAAAA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,iBAAiB,GACf,cAAcC,OAAAA,MAAM,MAAM,QAAQA,OAAAA,MAAM,MAAM,KAAK,QACrD;AAAA,QACA,YAAY,GAAGA,OAAAA,MAAM,QAAQ,KAAK,CAAC;AAAA,QACnC,eAAe,GAAGA,OAAAA,MAAM,QAAQ,KAAK,CAAC;AAAA,QACtC,UAAU;AAAA,QAEV,CAAC,0BAA0BA,OAAAA,MAAM,MAAM,YAAY,MAAM,GAAG,GAAG,GAAG;AAAA,UAChE,aAAa,GAAGA,OAAAA,MAAM,QAAQ,EAAE;AAAA,UAChC,cAAc,GAAGA,aAAM,QAAQ,EAAE;AAAA,QAAA;AAAA,QAGnC,CAAC,0BAA0BA,OAAAA,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,UACjE,YAAY;AAAA,UACZ,eAAe,GAAGA,OAAAA,MAAM,QAAQ,KAAK,CAAC;AAAA,UACtC,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,MAEF,cAAc;AAAA,QACZ,SAAS;AAAA,QACT,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,QACX,iBAAiB,GACf,cAAcA,aAAM,MAAM,QAAQA,aAAM,MAAM,KAAK,QACrD;AAAA,MAAA;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,cAAcI,KAAAA,oBAAsC;AAAA,IACxD,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,eAAe;AAAA,MACb,cAAc;AAAA,QACZ,iBAAiB,GAAG,cAAcJ,OAAAA,MAAM,MAAM,OAAOA,OAAAA,MAAM,MAAM,GAAG;AAAA,MAAA;AAAA,IACtE;AAAA,EACF,CACD;AAED,MAAI,SAAS;AACX,UAAM,gBAAgBK,SAAAA,UAAgC;AAAA,MACpD,SAAS;AAAA,MACT;AAAA,MACA,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,OAAO,GAAGL,OAAAA,MAAM,MAAM,KAAK;AAAA,UAC3B,UAAU;AAAA,QAAA;AAAA,QAEZ,cAAc;AAAA,UACZ,WAAWA,OAAAA,MAAM,QAAQ;AAAA,UAEzB,CAAC,0BAA0BA,OAAAA,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,YACjE,WAAWA,OAAAA,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF;AAAA,IACF,CACD;AAED,gBAAY,QAAQ,YAAY,cAAc,OAAO;AACrD,gBAAY,UAAU,cAAc;AAAA,EACtC;AAEA,MAAI,MAAM;AACR,UAAM,aAAaM,SAAAA,cAAoC;AAAA,MACrD,SAAS;AAAA,MACT;AAAA,MACA,eAAe;AAAA,QACb,SAAS;AAAA,UACP,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,OAAO,GAAGN,aAAM,MAAM,KAAK;AAAA,QAAA;AAAA,QAE7B,cAAc;AAAA,UACZ,WAAWA,OAAAA,MAAM,QAAQ;AAAA,UAEzB,CAAC,0BAA0BA,OAAAA,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,YACjE,WAAWA,OAAAA,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF;AAAA,IACF,CACD;AAED,gBAAY,QAAQ,YAAY,WAAW,OAAO;AAClD,gBAAY,UAAU,WAAW;AAAA,EACnC;AAEA,MAAI,KAAK;AACP,UAAM,YAAYO,SAAAA,WAAiC;AAAA,MACjD,SAAS;AAAA,MACT;AAAA,MACA,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF,CACD;AACD,gBAAY,QAAQ,YAAY,UAAU,OAAO;AACjD,gBAAY,UAAU,UAAU;AAAA,EAClC;AAEA,YAAU,QAAQ,YAAY,YAAY,OAAO;AACjD,YAAU,UAAU,YAAY;AAEhC,SAAO;AACT;AAEA,MAAA,OAAe,CAAC,UAAsB;AACpC,QAAM,EAAE,kBAAkB,kBAAA,IAAsB;AAChD,QAAM,YAAYR,MAAAA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,eAAe;AAAA,MAAA;AAAA,IACjB;AAAA,EACF,CACD;AACD,QAAM,cAAcS,OAAAA,sBAA0C;AAAA,IAC5D,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,0BAA0BR,OAAAA,MAAM,MAAM,YAAY,MAAM,GAAG,GAAG,GAAG;AAAA,UAChE,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,iBAAiBD,MAAAA,OAAoB;AAAA,IACzC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,0BAA0BC,OAAAA,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,UACjE,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY,GAAGA,OAAAA,MAAM,QAAQ,KAAK,CAAC;AAAA,QAAA;AAAA,MACrC;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,cAAcD,MAAAA,OAAoB;AAAA,IACtC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,0BAA0BC,OAAAA,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,UACjE,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,gBAAgB,oBAAoB,KAAK;AAE/C,cAAY,QAAQ,YAAY,cAAc,OAAO;AACrD,cAAY,UAAU,cAAc;AACpC,iBAAe,QAAQ,YAAY,YAAY,OAAO;AACtD,iBAAe,UAAU,YAAY;AAErC,MAAI,mBAAmB;AACrB,UAAM,uBAAuBD,MAAAA,OAAoB;AAAA,MAC/C,SAAS,SAAS,cAAc,KAAK;AAAA,MACrC,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,CAAC,0BAA0BC,OAAAA,MAAM,MAAM,YAAY,MAAM,GAAG,GAAG,GAAG;AAAA,YAChE,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF,CACD;AAED,yBAAqB,QAAQ,YAAY,iBAAiB;AAC1D,gBAAY,QAAQ,YAAY,qBAAqB,OAAO;AAC5D,mBAAe,UAAU,qBAAqB;AAAA,EAChD;AAEA,QAAM,aAAa,iBAAiB,KAAK;AACzC,iBAAe,QAAQ,YAAY,WAAW,OAAO;AACrD,iBAAe,UAAU,WAAW;AAEpC,cAAY,QAAQ,YAAY,eAAe,OAAO;AACtD,cAAY,UAAU,eAAe;AAErC,YAAU,QAAQ,YAAY,YAAY,OAAO;AACjD,YAAU,UAAU,YAAY;AAEhC,MAAI,kBAAkB;AACpB,UAAM,iBAAiBD,MAAAA,OAAoB;AAAA,MACzC,SAAS,SAAS,cAAc,KAAK;AAAA,MACrC,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,aAAa,GAAGC,OAAAA,MAAM,QAAQ,EAAE;AAAA,UAChC,cAAc,GAAGA,OAAAA,MAAM,QAAQ,EAAE;AAAA,UAEjC,CAAC,0BAA0BA,OAAAA,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,YACjE,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF,CACD;AAED,mBAAe,QAAQ,YAAY,gBAAgB;AACnD,gBAAY,QAAQ,YAAY,eAAe,OAAO;AACtD,cAAU,UAAU,eAAe;AAAA,EACrC;AAEA,SAAO;AACT;;"}
+{"version":3,"file":"hero.js","sources":["../../../source/composite/person/hero.ts"],"sourcesContent":["import {\n  token,\n  layout,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonContact } from './_types';\n\ninterface Theme {\n  isThemeDark?: boolean;\n}\n\ninterface PersonText extends Theme {\n  name: HTMLElement | null;\n  job?: HTMLElement | null;\n  subText?: HTMLElement | null;\n}\n\ninterface PersonInfo extends PersonContact, Theme {\n  image?: HTMLImageElement | null;\n  association?: HTMLElement | null;\n  pronouns?: HTMLElement | null;\n}\n\ninterface PersonHero extends PersonText, PersonInfo {\n  breadcrumbMobile?: HTMLElement | null;\n  breadcrumbDesktop?: HTMLElement | null;\n}\n\nconst CreateImageBlock = (props: PersonInfo) => {\n  const { image, association, pronouns, isThemeDark } = props;\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-image-container',\n    elementStyles: {\n      element: {\n        paddingTop: `${token.spacing.lg}`,\n        paddingBottom: `${token.spacing.lg}`,\n        backgroundColor: `${\n          isThemeDark ? token.color.gray.lightest : token.color.black\n        }`,\n        position: 'relative',\n\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n        },\n\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          padding: `${token.spacing.md}`,\n          width: '30%',\n          maxWidth: '320px',\n        },\n      },\n    },\n  });\n\n  const wrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-image-wrapper',\n  });\n\n  const contactContainer = textLockup.contact({\n    ...props,\n    isThemeDark: !isThemeDark,\n  });\n\n  if (image) {\n    const imageContainer = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-image',\n      elementStyles: {\n        element: {\n          backgroundColor: `${\n            isThemeDark ? token.color.gray.lightest : token.color.gray.darker\n          }`,\n          display: 'flex',\n          justifyContent: 'center',\n          marginBottom: token.spacing.md,\n\n          ['& img']: {\n            [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n              maxHeight: '160px',\n            },\n          },\n        },\n      },\n    });\n    const imageBlock = assets.image.background({\n      element: image,\n      isScaled: false,\n    });\n\n    imageContainer.element.appendChild(imageBlock.element);\n    imageContainer.styles += imageBlock.styles;\n    wrapper.element.appendChild(imageContainer.element);\n    wrapper.styles += imageContainer.styles;\n  }\n\n  if (association) {\n    const styledAssociation = ElementModel.headline.sansLarge({\n      element: association,\n      isThemeDark: !isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n        siblingAfter: {\n          marginTop: token.spacing.min,\n        },\n      },\n    });\n    wrapper.element.appendChild(styledAssociation.element);\n    wrapper.styles += styledAssociation.styles;\n  }\n\n  if (pronouns) {\n    const italicStyle = document.createElement('i');\n    italicStyle.appendChild(pronouns);\n\n    const styledPronouns = ElementModel.create({\n      element: italicStyle,\n      className: 'umd-person-hero-pronouns',\n      isThemeDark: !isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n        siblingAfter: {\n          display: 'block',\n          marginTop: token.spacing.min,\n        },\n      },\n    });\n\n    wrapper.element.appendChild(styledPronouns.element);\n    wrapper.styles += styledPronouns.styles;\n  }\n\n  if (contactContainer) {\n    wrapper.element.append(contactContainer.element);\n    wrapper.styles += contactContainer.styles;\n  }\n\n  container.element.appendChild(wrapper.element);\n  container.styles += wrapper.styles;\n  return container;\n};\n\nconst CreateTextContainer = ({\n  name,\n  job,\n  subText,\n  isThemeDark,\n}: PersonText) => {\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'person-hero-text',\n    elementStyles: {\n      element: {\n        backgroundColor: `${\n          isThemeDark ? token.color.black : token.color.gray.lightest\n        }`,\n        paddingTop: `${token.spacing['3xl']}`,\n        paddingBottom: `${token.spacing['3xl']}`,\n        position: 'relative',\n\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n        },\n\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          paddingTop: `0`,\n          paddingBottom: `${token.spacing['7xl']}`,\n          alignSelf: 'flex-start',\n        },\n      },\n      pseudoBefore: {\n        content: '\"\"',\n        position: 'absolute',\n        top: '-100px',\n        left: '0',\n        bottom: '0',\n        width: '200vw',\n        transform: 'translateX(-20%)',\n        backgroundColor: `${\n          isThemeDark ? token.color.black : token.color.gray.lightest\n        }`,\n      },\n    },\n  });\n\n  const lineWrapper = ElementModel.text.lineAdjustmentInset({\n    element: document.createElement('div'),\n    elementStyles: {\n      pseudoBefore: {\n        backgroundColor: `${isThemeDark ? token.color.gold : token.color.red}`,\n      },\n    },\n  });\n\n  if (subText) {\n    const styledSubText = ElementModel.headline.sansSmall({\n      element: subText,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n          textTransform: 'uppercase',\n          fontWeight: '700',\n          color: `${token.color.black}`,\n          maxWidth: '650px',\n        },\n        siblingAfter: {\n          marginTop: token.spacing.min,\n\n          [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      },\n    });\n\n    lineWrapper.element.appendChild(styledSubText.element);\n    lineWrapper.styles += styledSubText.styles;\n  }\n\n  if (name) {\n    const styledName = ElementModel.headline.campaignLarge({\n      element: name,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          textTransform: 'uppercase',\n          fontWeight: '700',\n          display: 'block',\n          color: `${token.color.black}`,\n        },\n        siblingAfter: {\n          marginTop: token.spacing.min,\n\n          [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n            marginTop: token.spacing.md,\n          },\n        },\n      },\n    });\n\n    lineWrapper.element.appendChild(styledName.element);\n    lineWrapper.styles += styledName.styles;\n  }\n\n  if (job) {\n    const styledJob = ElementModel.headline.sansMedium({\n      element: job,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n      },\n    });\n    lineWrapper.element.appendChild(styledJob.element);\n    lineWrapper.styles += styledJob.styles;\n  }\n\n  container.element.appendChild(lineWrapper.element);\n  container.styles += lineWrapper.styles;\n\n  return container;\n};\n\nexport default (props: PersonHero) => {\n  const { breadcrumbMobile, breadcrumbDesktop } = props;\n  const composite = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero',\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        containerType: 'inline-size',\n      },\n    },\n  });\n  const elementLock = ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    elementStyles: {\n      element: {\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          padding: '0',\n        },\n      },\n    },\n  });\n\n  const elementWrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-wrapper',\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          display: 'flex',\n          justifyContent: 'space-between',\n          paddingTop: `${token.spacing['7xl']}`,\n        },\n      },\n    },\n  });\n\n  const textColumns = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-columns',\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          width: '70%',\n        },\n      },\n    },\n  });\n\n  const textContainer = CreateTextContainer(props);\n\n  textColumns.element.appendChild(textContainer.element);\n  textColumns.styles += textContainer.styles;\n  elementWrapper.element.appendChild(textColumns.element);\n  elementWrapper.styles += textColumns.styles;\n\n  if (breadcrumbDesktop) {\n    const textColumnBreadcrumb = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-breadcrumb-desktop',\n      elementStyles: {\n        element: {\n          [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n            display: 'none',\n          },\n        },\n      },\n    });\n\n    textColumnBreadcrumb.element.appendChild(breadcrumbDesktop);\n    textColumns.element.appendChild(textColumnBreadcrumb.element);\n    elementWrapper.styles += textColumnBreadcrumb.styles;\n  }\n\n  const imageBlock = CreateImageBlock(props);\n  elementWrapper.element.appendChild(imageBlock.element);\n  elementWrapper.styles += imageBlock.styles;\n\n  elementLock.element.appendChild(elementWrapper.element);\n  elementLock.styles += elementWrapper.styles;\n\n  composite.element.appendChild(elementLock.element);\n  composite.styles += elementLock.styles;\n\n  if (breadcrumbMobile) {\n    const mainBreadcrumb = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-breadcrumb-mobile',\n      elementStyles: {\n        element: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n\n          [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n            display: 'none',\n          },\n        },\n      },\n    });\n\n    mainBreadcrumb.element.appendChild(breadcrumbMobile);\n    elementLock.element.appendChild(mainBreadcrumb.element);\n    composite.styles += mainBreadcrumb.styles;\n  }\n\n  return composite;\n};\n"],"names":["ElementModel.create","token","textLockup.contact","assets.image.background","ElementModel.headline.sansLarge","ElementModel.text.lineAdjustmentInset","ElementModel.headline.sansSmall","ElementModel.headline.campaignLarge","ElementModel.headline.sansMedium","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}

package/dist/composite/person/hero.mjs

@@ -5,6 +5,7 @@ import "../../node_modules/postcss-js/index.mjs";
 import { create } from "../../model/elements/index.mjs";
 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 "../../atomic/layout/block/stacked.mjs";
 import "../../atomic/layout/overlay/modal.mjs";