@universityofmaryland/web-elements-library 1.4.5 → 1.4.6

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

@@ -1 +1 @@
-{"version":3,"file":"stacked.mjs","sources":["../../../source/composite/hero/stacked.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroStackedProps } from './_types';\n\nconst REF_KEY_FRAME_FADE_OVER = 'hero-stacked-fade-over';\nconst REF_KEY_FRAME_FONT_COLOR = 'hero-stacked-font-color';\n\nconst keyFrameFadeOver = `\n  @keyframes ${REF_KEY_FRAME_FADE_OVER} {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\nconst keyFrameFontColor = `\n  @keyframes ${REF_KEY_FRAME_FONT_COLOR} {\n    from { color: ${Styles.token.color.black}; }\n    to { color: ${Styles.token.color.white}; }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n    customStyles: {\n      [`@media (${Styles.token.media.queries.large.max})`]: {\n        [`&:has(.${Styles.element.asset.gif.toggle.className})`]: {\n          minHeight: '56vw',\n        },\n      },\n\n      [`@media (${Styles.token.media.queries.tablet.min})`]: {\n        [`&:has(.${Styles.element.asset.gif.toggle.className})`]: {\n          minHeight: '550px',\n        },\n      },\n\n      [`& .${Styles.element.asset.gif.toggle.className} button`]: {\n        zIndex: 99999,\n      },\n    },\n  });\n};\n\nconst createOverlay = (includesAnimation?: boolean) => {\n  return ElementModel.createDiv({\n    className: 'umd-hero-stacked__overlay',\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n        height: '100vh',\n        width: '100vw',\n        display: 'block',\n        backgroundColor: 'rgba(0,0,0,.7)',\n        zIndex: 99,\n        opacity: 0,\n\n        ...(includesAnimation && {\n          [`@media (${Styles.token.media.queries.tablet.min})`]: {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              [`@supports (animation-timeline: scroll())`]: {\n                animation: `${REF_KEY_FRAME_FADE_OVER} ease-in-out forwards`,\n                animationTimeline: 'view()',\n                animationRangeStart: '30vh',\n                animationRangeEnd: '70vh',\n              },\n            },\n          },\n        }),\n      },\n    },\n  });\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n  isWidthLarge = false,\n  isHeightSmall = false,\n}: Pick<\n  HeroStackedProps,\n  'image' | 'video' | 'includesAnimation' | 'isWidthLarge' | 'isHeightSmall'\n>) => {\n  let mediaElement: ElementVisual | null = null;\n\n  if (video && video instanceof HTMLVideoElement) {\n    mediaElement = createVideoAsset(video);\n  } else if (image) {\n    mediaElement = createImageAsset(image);\n  }\n\n  if (!mediaElement) {\n    return null;\n  }\n\n  const assetInteriorElement = ElementModel.createDiv({\n    className: 'umd-hero-stacked__asset--interior',\n    children: [mediaElement, createOverlay(includesAnimation)],\n    elementStyles: {\n      element: {\n        overflow: 'clip',\n        position: 'relative',\n        height: '100%',\n      },\n    },\n  });\n\n  const horizontalLock = ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [assetInteriorElement],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n      },\n    },\n  });\n\n  const assetContainer = ElementModel.createDiv({\n    className: 'umd-hero-stacked__asset',\n    children: isWidthLarge\n      ? [horizontalLock]\n      : [mediaElement, createOverlay(includesAnimation)],\n    elementStyles: {\n      element: {\n        position: 'relative',\n        overflow: 'clip',\n        display: 'grid',\n\n        ['& img, & video']: {\n          objectFit: 'cover',\n          aspectRatio: '5 / 4',\n\n          [`@container (${Styles.token.media.queries.tablet.min})`]: {\n            maxHeight: '700px',\n            minHeight: '300px',\n\n            ...(!isHeightSmall && {\n              minHeight: '400px',\n              height: '65vh !important',\n            }),\n          },\n        },\n      },\n    },\n  });\n\n  return assetContainer;\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroStackedProps,\n    'headline' | 'isHeightSmall' | 'includesAnimation' | 'isThemeDark'\n  >,\n) => {\n  const { headline, isHeightSmall, includesAnimation, isThemeDark } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount < 30;\n\n  if (!headline) return null;\n\n  const desktopStyles = {\n    [`@container (${Styles.token.media.queries.desktop.min})`]: {\n      ...(isOverwriteHeadline && {\n        fontSize: '80px',\n      }),\n    },\n  };\n\n  const animationStyles = {\n    [`@container (${Styles.token.media.queries.tablet.min})`]: {\n      ...Utils.theme.media.withViewTimelineAnimation({\n        animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,\n        animationTimeline: 'view()',\n        animationRangeStart: '100vh',\n        animationRangeEnd: '130vh',\n\n        ...(isHeightSmall && {\n          animationRangeStart: '120vh',\n          animationRangeEnd: '150vh',\n        }),\n      }),\n    },\n  };\n\n  const elementStyles = {\n    element: {\n      color: Styles.token.color.black,\n      maxWidth: '700px',\n      margin: '0 auto',\n      textTransform: 'uppercase',\n      marginTop: `${Styles.token.spacing.sm}`,\n\n      ...(isThemeDark && {\n        color: Styles.token.color.white,\n      }),\n\n      ...(includesAnimation && {\n        ...(!isThemeDark && {\n          ...animationStyles,\n        }),\n      }),\n\n      ...desktopStyles,\n    },\n    siblingAfter: {\n      marginTop: `${Styles.token.spacing.md}`,\n    },\n  };\n\n  return ElementModel.headline.campaignLarge({\n    element: headline,\n    elementStyles,\n  });\n};\n\nconst createText = (\n  props: Omit<HeroStackedProps, 'image' | 'video' | 'isWidthLarge'>,\n) => {\n  const { topPosition, isThemeDark, includesAnimation, isHeightSmall } = props;\n  const additionalSpread = topPosition ? parseInt(topPosition) : null;\n  const textLockupElement = textLockup.large({\n    ...props,\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    textLargest: props.text,\n  });\n\n  const lock = ElementModel.layout.spaceHorizontalSmall({\n    element: document.createElement('div'),\n    children: [textLockupElement],\n    elementStyles: {\n      element: {\n        position: 'relative',\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-stacked__text',\n    children: [lock],\n    elementStyles: {\n      element: {\n        padding: `${Styles.token.spacing.lg} 0`,\n        display: 'flex',\n        justifyContent: 'center',\n        textAlign: 'center',\n        position: 'relative',\n        zIndex: '999',\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          padding: `${Styles.token.spacing['6xl']} 0 ${Styles.token.spacing['3xl']}`,\n        },\n\n        ...(includesAnimation && {\n          [`@container (${Styles.token.media.queries.tablet.min})`]: {\n            ...Utils.theme.media.withViewTimelineAnimation({\n              position: 'sticky',\n              top: additionalSpread || 0,\n            }),\n          },\n        }),\n\n        [`& *`]: {\n          ...(includesAnimation && {\n            ...(!isThemeDark && {\n              [`@container (${Styles.token.media.queries.tablet.min})`]: {\n                ...Utils.theme.media.withViewTimelineAnimation({\n                  animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,\n                  animationTimeline: 'view()',\n                  animationRangeStart: '90vh',\n                  animationRangeEnd: '110vh',\n\n                  ...(isHeightSmall && {\n                    animationRangeStart: '90vh',\n                    animationRangeEnd: '110vh',\n                  }),\n                }),\n              },\n            }),\n          }),\n        },\n\n        [`& .${Styles.element.text.decoration.ribbon.className[0]}`]: {\n          animation: 'none !important',\n        },\n\n        [`& .${Styles.element.text.rich.simpleLargest.className}`]: {\n          maxWidth: '860px',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroStackedProps) => {\n  const asset = createAsset(props);\n  const hasAsset = asset !== null;\n  const shouldAnimateText = hasAsset && props.includesAnimation;\n\n  const text = createText({\n    ...props,\n    includesAnimation: shouldAnimateText,\n  });\n\n  const children: ElementVisual[] = [text];\n  if (hasAsset) {\n    children.push(asset);\n  }\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-hero-stacked',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n\n        ...(props.isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n        }),\n      },\n    },\n  });\n\n  composite.styles += keyFrameFadeOver;\n  composite.styles += keyFrameFontColor;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","ElementModel.createDiv","ElementModel.layout.spaceHorizontalLarger","Utils.theme.media.withViewTimelineAnimation","ElementModel.headline.campaignLarge","textLockup.large","ElementModel.layout.spaceHorizontalSmall"],"mappings":"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"}
+{"version":3,"file":"stacked.mjs","sources":["../../../source/composite/hero/stacked.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroStackedProps } from './_types';\n\nconst REF_KEY_FRAME_FADE_OVER = 'hero-stacked-fade-over';\nconst REF_KEY_FRAME_FONT_COLOR = 'hero-stacked-font-color';\n\nconst keyFrameFadeOver = `\n  @keyframes ${REF_KEY_FRAME_FADE_OVER} {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\nconst keyFrameFontColor = `\n  @keyframes ${REF_KEY_FRAME_FONT_COLOR} {\n    from { color: ${Styles.token.color.black}; }\n    to { color: ${Styles.token.color.white}; }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n    customStyles: {\n      [`@media (${Styles.token.media.queries.large.max})`]: {\n        [`&:has(.${Styles.element.asset.gif.toggle.className})`]: {\n          minHeight: '56vw',\n        },\n      },\n\n      [`@media (${Styles.token.media.queries.tablet.min})`]: {\n        [`&:has(.${Styles.element.asset.gif.toggle.className})`]: {\n          minHeight: '550px',\n        },\n      },\n\n      [`& .${Styles.element.asset.gif.toggle.className} button`]: {\n        zIndex: 99999,\n      },\n    },\n  });\n};\n\nconst createOverlay = (includesAnimation?: boolean) => {\n  return ElementModel.createDiv({\n    className: 'umd-hero-stacked__overlay',\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n        height: '100vh',\n        width: '100vw',\n        display: 'block',\n        backgroundColor: 'rgba(0,0,0,.7)',\n        zIndex: 99,\n        opacity: 0,\n\n        ...(includesAnimation && {\n          [`@media (${Styles.token.media.queries.tablet.min})`]: {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              [`@supports (animation-timeline: scroll())`]: {\n                animation: `${REF_KEY_FRAME_FADE_OVER} ease-in-out forwards`,\n                animationTimeline: 'view()',\n                animationRangeStart: '30vh',\n                animationRangeEnd: '70vh',\n              },\n            },\n          },\n        }),\n      },\n    },\n  });\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n  isWidthLarge = false,\n  isHeightSmall = false,\n}: Pick<\n  HeroStackedProps,\n  'image' | 'video' | 'includesAnimation' | 'isWidthLarge' | 'isHeightSmall'\n>) => {\n  let mediaElement: ElementVisual | null = null;\n\n  if (video && video instanceof HTMLVideoElement) {\n    mediaElement = createVideoAsset(video);\n  } else if (image) {\n    mediaElement = createImageAsset(image);\n  }\n\n  if (!mediaElement) {\n    return null;\n  }\n\n  const assetInteriorElement = ElementModel.createDiv({\n    className: 'umd-hero-stacked__asset--interior',\n    children: [mediaElement, createOverlay(includesAnimation)],\n    elementStyles: {\n      element: {\n        overflow: 'clip',\n        position: 'relative',\n        height: '100%',\n      },\n    },\n  });\n\n  const horizontalLock = ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [assetInteriorElement],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n      },\n    },\n  });\n\n  const assetContainer = ElementModel.createDiv({\n    className: 'umd-hero-stacked__asset',\n    children: isWidthLarge\n      ? [horizontalLock]\n      : [mediaElement, createOverlay(includesAnimation)],\n    elementStyles: {\n      element: {\n        position: 'relative',\n        overflow: 'clip',\n        display: 'grid',\n\n        ['& img, & video']: {\n          objectFit: 'cover',\n          aspectRatio: '5 / 4',\n\n          [`@container (${Styles.token.media.queries.tablet.min})`]: {\n            maxHeight: '700px',\n            minHeight: '300px',\n\n            ...(!isHeightSmall && {\n              minHeight: '400px',\n              height: '65vh !important',\n            }),\n          },\n        },\n      },\n    },\n  });\n\n  return assetContainer;\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroStackedProps,\n    'headline' | 'isHeightSmall' | 'includesAnimation' | 'isThemeDark'\n  >,\n) => {\n  const { headline, isHeightSmall, includesAnimation, isThemeDark } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount < 30;\n\n  if (!headline) return null;\n\n  const desktopStyles = {\n    [`@container (${Styles.token.media.queries.desktop.min})`]: {\n      ...(isOverwriteHeadline && {\n        fontSize: '80px',\n      }),\n    },\n  };\n\n  const animationStyles = {\n    [`@container (${Styles.token.media.queries.tablet.min})`]: {\n      ...Utils.theme.media.withViewTimelineAnimation({\n        animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,\n        animationTimeline: 'view()',\n        animationRangeStart: '100vh',\n        animationRangeEnd: '130vh',\n\n        ...(isHeightSmall && {\n          animationRangeStart: '120vh',\n          animationRangeEnd: '150vh',\n        }),\n      }),\n    },\n  };\n\n  const elementStyles = {\n    element: {\n      color: Styles.token.color.black,\n      maxWidth: '700px',\n      margin: '0 auto',\n      textTransform: 'uppercase',\n      marginTop: `${Styles.token.spacing.sm}`,\n\n      ...(isThemeDark && {\n        color: Styles.token.color.white,\n      }),\n\n      ...(includesAnimation && {\n        ...(!isThemeDark && {\n          ...animationStyles,\n        }),\n      }),\n\n      ...desktopStyles,\n    },\n    siblingAfter: {\n      marginTop: `${Styles.token.spacing.md}`,\n    },\n  };\n\n  return ElementModel.headline.campaignLarge({\n    element: headline,\n    elementStyles,\n  });\n};\n\nconst createText = (\n  props: Omit<HeroStackedProps, 'image' | 'video' | 'isWidthLarge'>,\n) => {\n  const { topPosition, isThemeDark, includesAnimation, isHeightSmall } = props;\n  const additionalSpread = topPosition ? parseInt(topPosition) : null;\n  const textLockupElement = textLockup.large({\n    ...props,\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    textLargest: props.text,\n  });\n\n  const lock = ElementModel.layout.spaceHorizontalSmall({\n    element: document.createElement('div'),\n    children: [textLockupElement],\n    elementStyles: {\n      element: {\n        position: 'relative',\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-stacked__text',\n    children: [lock],\n    elementStyles: {\n      element: {\n        padding: `${Styles.token.spacing.lg} 0`,\n        display: 'flex',\n        justifyContent: 'center',\n        textAlign: 'center',\n        position: 'relative',\n        zIndex: '999',\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          padding: `${Styles.token.spacing['6xl']} 0 ${Styles.token.spacing['3xl']}`,\n        },\n\n        ...(includesAnimation && {\n          [`@container (${Styles.token.media.queries.tablet.min})`]: {\n            ...Utils.theme.media.withViewTimelineAnimation({\n              position: 'sticky',\n              top: additionalSpread || 0,\n            }),\n          },\n        }),\n\n        [`& *`]: {\n          ...(includesAnimation && {\n            ...(!isThemeDark && {\n              [`@container (${Styles.token.media.queries.tablet.min})`]: {\n                ...Utils.theme.media.withViewTimelineAnimation({\n                  animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,\n                  animationTimeline: 'view()',\n                  animationRangeStart: '90vh',\n                  animationRangeEnd: '110vh',\n\n                  ...(isHeightSmall && {\n                    animationRangeStart: '90vh',\n                    animationRangeEnd: '110vh',\n                  }),\n                }),\n              },\n            }),\n          }),\n        },\n\n        [`& .${Styles.element.text.decoration.ribbon.className[0]}`]: {\n          animation: 'none !important',\n        },\n\n        [`& .${Styles.element.text.rich.simpleLargest.className}`]: {\n          maxWidth: '860px',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroStackedProps) => {\n  const asset = createAsset(props);\n  const hasAsset = asset !== null;\n  const shouldAnimateText = hasAsset && props.includesAnimation;\n\n  const text = createText({\n    ...props,\n    includesAnimation: shouldAnimateText,\n  });\n\n  const children: ElementVisual[] = [text];\n  if (hasAsset) {\n    children.push(asset);\n  }\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-hero-stacked',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n\n        ...(props.isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n        }),\n      },\n    },\n  });\n\n  composite.styles += keyFrameFadeOver;\n  composite.styles += keyFrameFontColor;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","ElementModel.createDiv","ElementModel.layout.spaceHorizontalLarger","Utils.theme.media.withViewTimelineAnimation","ElementModel.headline.campaignLarge","textLockup.large","ElementModel.layout.spaceHorizontalSmall"],"mappings":"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"}

package/dist/composite/hero/standard.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");
 const placeholder = require("../../atomic/assets/image/placeholder.js");
 const observedAutoPlay = require("../../atomic/assets/video/observed-auto-play.js");

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

@@ -1 +1 @@
-{"version":3,"file":"standard.js","sources":["../../../source/composite/hero/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroStandardProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n  SLIDE_UP: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n  SCALE_DOWN: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n} as const;\n\nconst keyFrameHeroSlideUp = `\n  @keyframes hero-slide-up {\n    from {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst keyFrameHeroScaleDown = `\n  @keyframes hero-scale-down {\n    from {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.TO};\n    }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n};\n\nconst buildAssetChildren = ({\n  image,\n  video,\n}: Pick<HeroStandardProps, 'image' | 'video'>): ElementVisual[] => {\n  const children: ElementVisual[] = [];\n\n  if (video) {\n    children.push(createVideoAsset(video));\n  }\n\n  if (image && !video) {\n    children.push(createImageAsset(image));\n  }\n\n  if (!image && !video) {\n    children.push(assets.image.placeholder.fearlessForward());\n  }\n\n  return children;\n};\n\nconst buildAssetStyles = (includesAnimation?: boolean) => {\n  return {\n    element: {\n      [`@container (${Styles.token.media.queries.large.max})`]: {\n        aspectRatio: '16 / 9',\n      },\n\n      [`@container (${Styles.token.media.queries.tablet.min})`]: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        overflow: 'hidden',\n      },\n\n      [`&:before`]: {\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 85%)',\n          zIndex: '99',\n        },\n      },\n\n      ['& img']: {\n        ...(includesAnimation && {\n          [`@media (prefers-reduced-motion: no-preference)`]: {\n            animation: `hero-scale-down forwards ${ANIMATION_CONFIG.SCALE_DOWN.DURATION}`,\n          },\n        }),\n      },\n    },\n  };\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroStandardProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n  const elementStyles = buildAssetStyles(includesAnimation);\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-default__asset',\n    children,\n    elementStyles,\n  });\n};\n\nconst createHeadline = (\n  props: Pick<HeroStandardProps, 'headline' | 'isHeightSmall' | 'isThemeDark'>,\n) => {\n  const { headline, isHeightSmall, isThemeDark } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 10 && isHeightSmall;\n\n  if (!headline) return null;\n\n  const tabletStyles = {\n    maxWidth: '700px',\n    marginLeft: 'auto',\n    marginRight: 'auto',\n    color: Styles.token.color.white,\n  };\n\n  const desktopStyles = {\n    maxWidth: '816px',\n    ...(isOverwriteHeadline && { fontSize: '80px' }),\n  };\n\n  const headlineElement = ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n        [`@media (${Styles.token.media.queries.tablet.min})`]: tabletStyles,\n        [`@media (${Styles.token.media.queries.desktop.min})`]: desktopStyles,\n      },\n      subElement: {\n        color: 'currentColor',\n      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.sm,\n      },\n    },\n    isThemeDark,\n  });\n\n  return headlineElement;\n};\n\nconst createText = (props: HeroStandardProps) => {\n  const {\n    isTextCenter = false,\n    isHeightSmall = false,\n    includesAnimation,\n    isThemeDark,\n  } = props;\n\n  const text = textLockup.large({\n    headlineComposite: createHeadline(props),\n    ribbon: props.eyebrow,\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  const textContainer = ElementModel.createDiv({\n    className: 'umd-hero-default__text',\n    children: [text],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        alignItems: 'flex-end',\n        height: '100%',\n        ...(isTextCenter && {\n          textAlign: 'center',\n          justifyContent: 'center',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n          maxWidth: '928px',\n        }),\n\n        ...(includesAnimation && {\n          animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n        }),\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          maxWidth: '736px',\n          paddingTop: `${Styles.token.spacing['2xl']}`,\n          paddingBottom: `${Styles.token.spacing['2xl']}`,\n          ...(!isTextCenter && {\n            width: '80%',\n          }),\n          ...(isHeightSmall && {\n            minHeight: '400px',\n            alignItems: 'flex-end',\n            display: 'flex',\n          }),\n        },\n\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          maxWidth: '808px',\n        },\n      },\n    },\n  });\n\n  return ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [textContainer],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n        zIndex: 99,\n\n        [`@container (${Styles.token.media.queries.tablet.max})`]: {\n          paddingTop: `${Styles.token.spacing.sm}`,\n\n          [`&:has(.${Styles.element.text.decoration.ribbon.className})`]: {\n            paddingTop: `0`,\n            marginTop: '-14px',\n          },\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroStandardProps) => {\n  const { isHeightSmall, isThemeDark } = props;\n  const asset = createAsset(props);\n  const text = createText(props);\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-hero-default',\n    children: [asset, text],\n    elementStyles: {\n      element: {\n        position: 'relative',\n        overflow: 'hidden',\n        containerType: 'inline-size',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n        }),\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          ...(!isHeightSmall && {\n            height: '75vh',\n            minHeight: '480px',\n          }),\n        },\n\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          ...(!isHeightSmall && {\n            minHeight: '720px',\n          }),\n        },\n      },\n      subElement: {\n        [`@container (${Styles.token.media.queries.large.max})`]: {\n          [`*:not(.${Styles.element.asset.image.caption.className})`]: {\n            ...(!isThemeDark && {\n              color: `${Styles.token.color.black} !important`,\n            }),\n          },\n        },\n      },\n    },\n  });\n\n  composite.styles += keyFrameHeroScaleDown;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","Styles","ElementModel.createDiv","headline","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
+{"version":3,"file":"standard.js","sources":["../../../source/composite/hero/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroStandardProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n  SLIDE_UP: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n  SCALE_DOWN: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n} as const;\n\nconst keyFrameHeroSlideUp = `\n  @keyframes hero-slide-up {\n    from {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst keyFrameHeroScaleDown = `\n  @keyframes hero-scale-down {\n    from {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.TO};\n    }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n};\n\nconst buildAssetChildren = ({\n  image,\n  video,\n}: Pick<HeroStandardProps, 'image' | 'video'>): ElementVisual[] => {\n  const children: ElementVisual[] = [];\n\n  if (video) {\n    children.push(createVideoAsset(video));\n  }\n\n  if (image && !video) {\n    children.push(createImageAsset(image));\n  }\n\n  if (!image && !video) {\n    children.push(assets.image.placeholder.fearlessForward());\n  }\n\n  return children;\n};\n\nconst buildAssetStyles = (includesAnimation?: boolean) => {\n  return {\n    element: {\n      [`@container (${Styles.token.media.queries.large.max})`]: {\n        aspectRatio: '16 / 9',\n      },\n\n      [`@container (${Styles.token.media.queries.tablet.min})`]: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        overflow: 'hidden',\n      },\n\n      [`&:before`]: {\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 85%)',\n          zIndex: '99',\n        },\n      },\n\n      ['& img']: {\n        ...(includesAnimation && {\n          [`@media (prefers-reduced-motion: no-preference)`]: {\n            animation: `hero-scale-down forwards ${ANIMATION_CONFIG.SCALE_DOWN.DURATION}`,\n          },\n        }),\n      },\n    },\n  };\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroStandardProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n  const elementStyles = buildAssetStyles(includesAnimation);\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-default__asset',\n    children,\n    elementStyles,\n  });\n};\n\nconst createHeadline = (\n  props: Pick<HeroStandardProps, 'headline' | 'isHeightSmall' | 'isThemeDark'>,\n) => {\n  const { headline, isHeightSmall, isThemeDark } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 10 && isHeightSmall;\n\n  if (!headline) return null;\n\n  const tabletStyles = {\n    maxWidth: '700px',\n    marginLeft: 'auto',\n    marginRight: 'auto',\n    color: Styles.token.color.white,\n  };\n\n  const desktopStyles = {\n    maxWidth: '816px',\n    ...(isOverwriteHeadline && { fontSize: '80px' }),\n  };\n\n  const headlineElement = ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n        [`@media (${Styles.token.media.queries.tablet.min})`]: tabletStyles,\n        [`@media (${Styles.token.media.queries.desktop.min})`]: desktopStyles,\n      },\n      subElement: {\n        color: 'currentColor',\n      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.sm,\n      },\n    },\n    isThemeDark,\n  });\n\n  return headlineElement;\n};\n\nconst createText = (props: HeroStandardProps) => {\n  const {\n    isTextCenter = false,\n    isHeightSmall = false,\n    includesAnimation,\n    isThemeDark,\n  } = props;\n\n  const text = textLockup.large({\n    headlineComposite: createHeadline(props),\n    ribbon: props.eyebrow,\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  const textContainer = ElementModel.createDiv({\n    className: 'umd-hero-default__text',\n    children: [text],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        alignItems: 'flex-end',\n        height: '100%',\n        ...(isTextCenter && {\n          textAlign: 'center',\n          justifyContent: 'center',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n          maxWidth: '928px',\n        }),\n\n        ...(includesAnimation && {\n          animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n        }),\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          maxWidth: '736px',\n          paddingTop: `${Styles.token.spacing['2xl']}`,\n          paddingBottom: `${Styles.token.spacing['2xl']}`,\n          ...(!isTextCenter && {\n            width: '80%',\n          }),\n          ...(isHeightSmall && {\n            minHeight: '400px',\n            alignItems: 'flex-end',\n            display: 'flex',\n          }),\n        },\n\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          maxWidth: '808px',\n        },\n      },\n    },\n  });\n\n  return ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [textContainer],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n        zIndex: 99,\n\n        [`@container (${Styles.token.media.queries.tablet.max})`]: {\n          paddingTop: `${Styles.token.spacing.sm}`,\n\n          [`&:has(.${Styles.element.text.decoration.ribbon.className})`]: {\n            paddingTop: `0`,\n            marginTop: '-14px',\n          },\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroStandardProps) => {\n  const { isHeightSmall, isThemeDark } = props;\n  const asset = createAsset(props);\n  const text = createText(props);\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-hero-default',\n    children: [asset, text],\n    elementStyles: {\n      element: {\n        position: 'relative',\n        overflow: 'hidden',\n        containerType: 'inline-size',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n        }),\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          ...(!isHeightSmall && {\n            height: '75vh',\n            minHeight: '480px',\n          }),\n        },\n\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          ...(!isHeightSmall && {\n            minHeight: '720px',\n          }),\n        },\n      },\n      subElement: {\n        [`@container (${Styles.token.media.queries.large.max})`]: {\n          [`*:not(.${Styles.element.asset.image.caption.className})`]: {\n            ...(!isThemeDark && {\n              color: `${Styles.token.color.black} !important`,\n            }),\n          },\n        },\n      },\n    },\n  });\n\n  composite.styles += keyFrameHeroScaleDown;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","Styles","ElementModel.createDiv","headline","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,mBAAmB;AAAA,EACvB,UAAU;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,MACT,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,IAEN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,YAAY;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,MACT,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,MAAM,sBAAsB;AAAA;AAAA;AAAA,mBAGT,iBAAiB,SAAS,UAAU,IAAI;AAAA,iBAC1C,iBAAiB,SAAS,QAAQ,IAAI;AAAA;AAAA;AAAA,mBAGpC,iBAAiB,SAAS,UAAU,EAAE;AAAA,iBACxC,iBAAiB,SAAS,QAAQ,EAAE;AAAA;AAAA;AAAA;AAKrD,MAAM,wBAAwB;AAAA;AAAA;AAAA,mBAGX,iBAAiB,WAAW,UAAU,IAAI;AAAA;AAAA;AAAA,mBAG1C,iBAAiB,WAAW,UAAU,EAAE;AAAA;AAAA;AAAA;AAK3D,MAAM,mBAAmB,CAAC,UAA4B;AACpD,SAAOA,iBAA8B;AAAA,IACnC;AAAA,IACA,UAAU;AAAA,EAAA,CACX;AACH;AAEA,MAAM,mBAAmB,CAAC,UAA4B;AACpD,SAAOC,WAAwB;AAAA,IAC7B,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,EAAA,CAChB;AACH;AAEA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AACF,MAAmE;AACjE,QAAM,WAA4B,CAAA;AAElC,MAAI,OAAO;AACT,aAAS,KAAK,iBAAiB,KAAK,CAAC;AAAA,EACvC;AAEA,MAAI,SAAS,CAAC,OAAO;AACnB,aAAS,KAAK,iBAAiB,KAAK,CAAC;AAAA,EACvC;AAEA,MAAI,CAAC,SAAS,CAAC,OAAO;AACpB,aAAS,KAAKC,YAAyB,iBAAiB;AAAA,EAC1D;AAEA,SAAO;AACT;AAEA,MAAM,mBAAmB,CAAC,sBAAgC;AACxD,SAAO;AAAA,IACL,SAAS;AAAA,MACP,CAAC,eAAeC,kBAAO,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,QACxD,aAAa;AAAA,MAAA;AAAA,MAGf,CAAC,eAAeA,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QACzD,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,MAAA;AAAA,MAGZ,CAAC,UAAU,GAAG;AAAA,QACZ,CAAC,eAAeA,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UACzD,SAAS;AAAA,UACT,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,YACE;AAAA,UACF,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,MAGF,CAAC,OAAO,GAAG;AAAA,QACT,GAAI,qBAAqB;AAAA,UACvB,CAAC,gDAAgD,GAAG;AAAA,YAClD,WAAW,4BAA4B,iBAAiB,WAAW,QAAQ;AAAA,UAAA;AAAA,QAC7E;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEJ;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,MAAwE;AACtE,QAAM,WAAW,mBAAmB,EAAE,OAAO,OAAO;AACpD,QAAM,gBAAgB,iBAAiB,iBAAiB;AAExD,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EAAA,CACD;AACH;AAEA,MAAM,iBAAiB,CACrB,UACG;AACH,QAAM,YAAEC,YAAU,eAAe,YAAA,IAAgB;AACjD,QAAM,iBAAiBA,YAAU,aAAa,KAAA,EAAO,UAAU;AAC/D,QAAM,sBAAsB,iBAAiB,MAAM;AAEnD,MAAI,CAACA,WAAU,QAAO;AAEtB,QAAM,eAAe;AAAA,IACnB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,OAAOF,kBAAO,MAAM,MAAM;AAAA,EAAA;AAG5B,QAAM,gBAAgB;AAAA,IACpB,UAAU;AAAA,IACV,GAAI,uBAAuB,EAAE,UAAU,OAAA;AAAA,EAAO;AAGhD,QAAM,kBAAkBG,SAAAA,mBAAyC;AAAA,IAC/D,SAASD;AAAAA,IACT,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,CAAC,WAAWF,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QACvD,CAAC,WAAWA,kBAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,MAAA;AAAA,MAE1D,YAAY;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,MAET,cAAc;AAAA,QACZ,WAAWA,kBAAO,MAAM,QAAQ;AAAA,MAAA;AAAA,IAClC;AAAA,IAEF;AAAA,EAAA,CACD;AAED,SAAO;AACT;AAEA,MAAM,aAAa,CAAC,UAA6B;AAC/C,QAAM;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,OAAOI,MAAiB;AAAA,IAC5B,mBAAmB,eAAe,KAAK;AAAA,IACvC,QAAQ,MAAM;AAAA,IACd,aAAa,MAAM;AAAA,IACnB,SAAS,MAAM;AAAA,IACf,aAAa;AAAA,EAAA,CACd;AAED,QAAM,gBAAgBH,MAAAA,UAAuB;AAAA,IAC3C,WAAW;AAAA,IACX,UAAU,CAAC,IAAI;AAAA,IACf,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,GAAI,gBAAgB;AAAA,UAClB,WAAW;AAAA,UACX,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,aAAa;AAAA,UACb,UAAU;AAAA,QAAA;AAAA,QAGZ,GAAI,qBAAqB;AAAA,UACvB,WAAW,0BAA0B,iBAAiB,SAAS,QAAQ;AAAA,QAAA;AAAA,QAGzE,CAAC,eAAeD,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UACzD,UAAU;AAAA,UACV,YAAY,GAAGA,kBAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,UAC1C,eAAe,GAAGA,kBAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,UAC7C,GAAI,CAAC,gBAAgB;AAAA,YACnB,OAAO;AAAA,UAAA;AAAA,UAET,GAAI,iBAAiB;AAAA,YACnB,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QAGF,CAAC,eAAeA,kBAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,UAC1D,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAOK,6BAA0C;AAAA,IAC/C,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,UAAU,CAAC,aAAa;AAAA,IACxB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,UAAU;AAAA,QACV,QAAQ;AAAA,QAER,CAAC,eAAeL,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UACzD,YAAY,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,UAEtC,CAAC,UAAUA,kBAAO,QAAQ,KAAK,WAAW,OAAO,SAAS,GAAG,GAAG;AAAA,YAC9D,YAAY;AAAA,YACZ,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAA,WAAe,CAAC,UAA6B;AAC3C,QAAM,EAAE,eAAe,YAAA,IAAgB;AACvC,QAAM,QAAQ,YAAY,KAAK;AAC/B,QAAM,OAAO,WAAW,KAAK;AAE7B,QAAM,YAAYC,MAAAA,UAAuB;AAAA,IACvC,WAAW;AAAA,IACX,UAAU,CAAC,OAAO,IAAI;AAAA,IACtB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,UAAU;AAAA,QACV,eAAe;AAAA,QAEf,GAAI,eAAe;AAAA,UACjB,iBAAiBD,kBAAO,MAAM,MAAM;AAAA,QAAA;AAAA,QAGtC,CAAC,eAAeA,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UACzD,GAAI,CAAC,iBAAiB;AAAA,YACpB,QAAQ;AAAA,YACR,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,QAGF,CAAC,eAAeA,kBAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,UAC1D,GAAI,CAAC,iBAAiB;AAAA,YACpB,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,MAEF,YAAY;AAAA,QACV,CAAC,eAAeA,kBAAO,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,UACxD,CAAC,UAAUA,kBAAO,QAAQ,MAAM,MAAM,QAAQ,SAAS,GAAG,GAAG;AAAA,YAC3D,GAAI,CAAC,eAAe;AAAA,cAClB,OAAO,GAAGA,kBAAO,MAAM,MAAM,KAAK;AAAA,YAAA;AAAA,UACpC;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,YAAU,UAAU;AACpB,YAAU,UAAU;AAEpB,SAAO;AACT;;"}

package/dist/composite/hero/standard.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 placeholder from "../../atomic/assets/image/placeholder.mjs";
 import observedAutoPlay from "../../atomic/assets/video/observed-auto-play.mjs";

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

@@ -1 +1 @@
-{"version":3,"file":"standard.mjs","sources":["../../../source/composite/hero/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroStandardProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n  SLIDE_UP: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n  SCALE_DOWN: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n} as const;\n\nconst keyFrameHeroSlideUp = `\n  @keyframes hero-slide-up {\n    from {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst keyFrameHeroScaleDown = `\n  @keyframes hero-scale-down {\n    from {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.TO};\n    }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n};\n\nconst buildAssetChildren = ({\n  image,\n  video,\n}: Pick<HeroStandardProps, 'image' | 'video'>): ElementVisual[] => {\n  const children: ElementVisual[] = [];\n\n  if (video) {\n    children.push(createVideoAsset(video));\n  }\n\n  if (image && !video) {\n    children.push(createImageAsset(image));\n  }\n\n  if (!image && !video) {\n    children.push(assets.image.placeholder.fearlessForward());\n  }\n\n  return children;\n};\n\nconst buildAssetStyles = (includesAnimation?: boolean) => {\n  return {\n    element: {\n      [`@container (${Styles.token.media.queries.large.max})`]: {\n        aspectRatio: '16 / 9',\n      },\n\n      [`@container (${Styles.token.media.queries.tablet.min})`]: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        overflow: 'hidden',\n      },\n\n      [`&:before`]: {\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 85%)',\n          zIndex: '99',\n        },\n      },\n\n      ['& img']: {\n        ...(includesAnimation && {\n          [`@media (prefers-reduced-motion: no-preference)`]: {\n            animation: `hero-scale-down forwards ${ANIMATION_CONFIG.SCALE_DOWN.DURATION}`,\n          },\n        }),\n      },\n    },\n  };\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroStandardProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n  const elementStyles = buildAssetStyles(includesAnimation);\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-default__asset',\n    children,\n    elementStyles,\n  });\n};\n\nconst createHeadline = (\n  props: Pick<HeroStandardProps, 'headline' | 'isHeightSmall' | 'isThemeDark'>,\n) => {\n  const { headline, isHeightSmall, isThemeDark } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 10 && isHeightSmall;\n\n  if (!headline) return null;\n\n  const tabletStyles = {\n    maxWidth: '700px',\n    marginLeft: 'auto',\n    marginRight: 'auto',\n    color: Styles.token.color.white,\n  };\n\n  const desktopStyles = {\n    maxWidth: '816px',\n    ...(isOverwriteHeadline && { fontSize: '80px' }),\n  };\n\n  const headlineElement = ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n        [`@media (${Styles.token.media.queries.tablet.min})`]: tabletStyles,\n        [`@media (${Styles.token.media.queries.desktop.min})`]: desktopStyles,\n      },\n      subElement: {\n        color: 'currentColor',\n      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.sm,\n      },\n    },\n    isThemeDark,\n  });\n\n  return headlineElement;\n};\n\nconst createText = (props: HeroStandardProps) => {\n  const {\n    isTextCenter = false,\n    isHeightSmall = false,\n    includesAnimation,\n    isThemeDark,\n  } = props;\n\n  const text = textLockup.large({\n    headlineComposite: createHeadline(props),\n    ribbon: props.eyebrow,\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  const textContainer = ElementModel.createDiv({\n    className: 'umd-hero-default__text',\n    children: [text],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        alignItems: 'flex-end',\n        height: '100%',\n        ...(isTextCenter && {\n          textAlign: 'center',\n          justifyContent: 'center',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n          maxWidth: '928px',\n        }),\n\n        ...(includesAnimation && {\n          animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n        }),\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          maxWidth: '736px',\n          paddingTop: `${Styles.token.spacing['2xl']}`,\n          paddingBottom: `${Styles.token.spacing['2xl']}`,\n          ...(!isTextCenter && {\n            width: '80%',\n          }),\n          ...(isHeightSmall && {\n            minHeight: '400px',\n            alignItems: 'flex-end',\n            display: 'flex',\n          }),\n        },\n\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          maxWidth: '808px',\n        },\n      },\n    },\n  });\n\n  return ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [textContainer],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n        zIndex: 99,\n\n        [`@container (${Styles.token.media.queries.tablet.max})`]: {\n          paddingTop: `${Styles.token.spacing.sm}`,\n\n          [`&:has(.${Styles.element.text.decoration.ribbon.className})`]: {\n            paddingTop: `0`,\n            marginTop: '-14px',\n          },\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroStandardProps) => {\n  const { isHeightSmall, isThemeDark } = props;\n  const asset = createAsset(props);\n  const text = createText(props);\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-hero-default',\n    children: [asset, text],\n    elementStyles: {\n      element: {\n        position: 'relative',\n        overflow: 'hidden',\n        containerType: 'inline-size',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n        }),\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          ...(!isHeightSmall && {\n            height: '75vh',\n            minHeight: '480px',\n          }),\n        },\n\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          ...(!isHeightSmall && {\n            minHeight: '720px',\n          }),\n        },\n      },\n      subElement: {\n        [`@container (${Styles.token.media.queries.large.max})`]: {\n          [`*:not(.${Styles.element.asset.image.caption.className})`]: {\n            ...(!isThemeDark && {\n              color: `${Styles.token.color.black} !important`,\n            }),\n          },\n        },\n      },\n    },\n  });\n\n  composite.styles += keyFrameHeroScaleDown;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","ElementModel.createDiv","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
+{"version":3,"file":"standard.mjs","sources":["../../../source/composite/hero/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroStandardProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n  SLIDE_UP: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n  SCALE_DOWN: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n} as const;\n\nconst keyFrameHeroSlideUp = `\n  @keyframes hero-slide-up {\n    from {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst keyFrameHeroScaleDown = `\n  @keyframes hero-scale-down {\n    from {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.TO};\n    }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n};\n\nconst buildAssetChildren = ({\n  image,\n  video,\n}: Pick<HeroStandardProps, 'image' | 'video'>): ElementVisual[] => {\n  const children: ElementVisual[] = [];\n\n  if (video) {\n    children.push(createVideoAsset(video));\n  }\n\n  if (image && !video) {\n    children.push(createImageAsset(image));\n  }\n\n  if (!image && !video) {\n    children.push(assets.image.placeholder.fearlessForward());\n  }\n\n  return children;\n};\n\nconst buildAssetStyles = (includesAnimation?: boolean) => {\n  return {\n    element: {\n      [`@container (${Styles.token.media.queries.large.max})`]: {\n        aspectRatio: '16 / 9',\n      },\n\n      [`@container (${Styles.token.media.queries.tablet.min})`]: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        overflow: 'hidden',\n      },\n\n      [`&:before`]: {\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 85%)',\n          zIndex: '99',\n        },\n      },\n\n      ['& img']: {\n        ...(includesAnimation && {\n          [`@media (prefers-reduced-motion: no-preference)`]: {\n            animation: `hero-scale-down forwards ${ANIMATION_CONFIG.SCALE_DOWN.DURATION}`,\n          },\n        }),\n      },\n    },\n  };\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroStandardProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n  const elementStyles = buildAssetStyles(includesAnimation);\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-default__asset',\n    children,\n    elementStyles,\n  });\n};\n\nconst createHeadline = (\n  props: Pick<HeroStandardProps, 'headline' | 'isHeightSmall' | 'isThemeDark'>,\n) => {\n  const { headline, isHeightSmall, isThemeDark } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 10 && isHeightSmall;\n\n  if (!headline) return null;\n\n  const tabletStyles = {\n    maxWidth: '700px',\n    marginLeft: 'auto',\n    marginRight: 'auto',\n    color: Styles.token.color.white,\n  };\n\n  const desktopStyles = {\n    maxWidth: '816px',\n    ...(isOverwriteHeadline && { fontSize: '80px' }),\n  };\n\n  const headlineElement = ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n        [`@media (${Styles.token.media.queries.tablet.min})`]: tabletStyles,\n        [`@media (${Styles.token.media.queries.desktop.min})`]: desktopStyles,\n      },\n      subElement: {\n        color: 'currentColor',\n      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.sm,\n      },\n    },\n    isThemeDark,\n  });\n\n  return headlineElement;\n};\n\nconst createText = (props: HeroStandardProps) => {\n  const {\n    isTextCenter = false,\n    isHeightSmall = false,\n    includesAnimation,\n    isThemeDark,\n  } = props;\n\n  const text = textLockup.large({\n    headlineComposite: createHeadline(props),\n    ribbon: props.eyebrow,\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  const textContainer = ElementModel.createDiv({\n    className: 'umd-hero-default__text',\n    children: [text],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        alignItems: 'flex-end',\n        height: '100%',\n        ...(isTextCenter && {\n          textAlign: 'center',\n          justifyContent: 'center',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n          maxWidth: '928px',\n        }),\n\n        ...(includesAnimation && {\n          animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n        }),\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          maxWidth: '736px',\n          paddingTop: `${Styles.token.spacing['2xl']}`,\n          paddingBottom: `${Styles.token.spacing['2xl']}`,\n          ...(!isTextCenter && {\n            width: '80%',\n          }),\n          ...(isHeightSmall && {\n            minHeight: '400px',\n            alignItems: 'flex-end',\n            display: 'flex',\n          }),\n        },\n\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          maxWidth: '808px',\n        },\n      },\n    },\n  });\n\n  return ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [textContainer],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n        zIndex: 99,\n\n        [`@container (${Styles.token.media.queries.tablet.max})`]: {\n          paddingTop: `${Styles.token.spacing.sm}`,\n\n          [`&:has(.${Styles.element.text.decoration.ribbon.className})`]: {\n            paddingTop: `0`,\n            marginTop: '-14px',\n          },\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroStandardProps) => {\n  const { isHeightSmall, isThemeDark } = props;\n  const asset = createAsset(props);\n  const text = createText(props);\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-hero-default',\n    children: [asset, text],\n    elementStyles: {\n      element: {\n        position: 'relative',\n        overflow: 'hidden',\n        containerType: 'inline-size',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n        }),\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          ...(!isHeightSmall && {\n            height: '75vh',\n            minHeight: '480px',\n          }),\n        },\n\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          ...(!isHeightSmall && {\n            minHeight: '720px',\n          }),\n        },\n      },\n      subElement: {\n        [`@container (${Styles.token.media.queries.large.max})`]: {\n          [`*:not(.${Styles.element.asset.image.caption.className})`]: {\n            ...(!isThemeDark && {\n              color: `${Styles.token.color.black} !important`,\n            }),\n          },\n        },\n      },\n    },\n  });\n\n  composite.styles += keyFrameHeroScaleDown;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","ElementModel.createDiv","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}

package/dist/composite/layout/section-intro/small.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"small.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/small.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;yBAgOe,OAAO,iBAAiB;;;;;;;;AAAxC,wBAkBE"}
+{"version":3,"file":"small.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/small.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;yBA2Oe,OAAO,iBAAiB;;;;;;;;AAAxC,wBAkBE"}

package/dist/composite/layout/section-intro/small.js

@@ -74,7 +74,7 @@ const createActions = (props) => {
   });
 };
 const createTextContainer = (props) => {
-  const { headline: headline2, text, actions, includesAnimation } = props;
+  const { headline: headline2, text, actions, includesAnimation, isThemeDark } = props;
   const headlineElement = createHeadline({ headline: headline2 });
   const textElement = createText({ text });
   const actionsElement = createActions({ actions });
@@ -89,6 +89,15 @@ const createTextContainer = (props) => {
         ...includesAnimation && {
           opacity: 0
         },
+        ["& > *, p"]: {
+          ...!headline2 && {
+            ...Styles.typography.sans.transformations.largerBold,
+            color: Styles.token.color.black,
+            ...isThemeDark && {
+              color: Styles.token.color.white
+            }
+          }
+        },
         [".intro-default-animated &"]: {
           transform: "translateY(100px)",
           animation: "intro-fade-in 1s forwards",

package/dist/composite/layout/section-intro/small.js.map

@@ -1 +1 @@
-{"version":3,"file":"small.js","sources":["../../../../source/composite/layout/section-intro/small.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../../_types';\n\nexport interface SectionIntroProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  text?: HTMLElement | null;\n  hasSeparator?: boolean;\n  isThemeDark?: boolean;\n  includesAnimation?: boolean;\n}\n\nconst ANIMATION_CONFIGS = {\n  line: `\n    @keyframes intro-line {\n      from {\n        height: 0;\n        transform: translateY(${token.spacing.lg});\n      }\n      to {\n        height: ${token.spacing['4xl']};\n        transform: translateY(0);\n      }\n    }\n  `,\n  fadeIn: `\n    @keyframes intro-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(100px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n  `,\n};\n\nconst createHeadline = (props: Pick<SectionIntroProps, 'headline'>) => {\n  const { headline } = props;\n  if (!headline) return;\n\n  return ElementModel.headline.sansLargest({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    },\n  });\n};\n\nconst createText = (props: Pick<SectionIntroProps, 'text'>) => {\n  const { text } = props;\n  if (!text) return;\n\n  return ElementModel.richText.simpleLarge({\n    element: text,\n    elementStyles: {\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n      },\n    },\n  });\n};\n\nconst createActions = (props: Pick<SectionIntroProps, 'actions'>) => {\n  const { actions } = props;\n  if (!actions) return;\n\n  return ElementModel.layout.gridInlineTabletRows({\n    element: actions,\n    elementStyles: {\n      element: {\n        justifyContent: 'center',\n        alignItems: 'center',\n\n        [`* + &`]: {\n          marginTop: token.spacing.md,\n        },\n      },\n    },\n  });\n};\n\nconst createTextContainer = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark' | 'includesAnimation'\n  >,\n) => {\n  const { headline, text, actions, includesAnimation } = props;\n\n  const headlineElement = createHeadline({ headline });\n  const textElement = createText({ text });\n  const actionsElement = createActions({ actions });\n\n  const children = [headlineElement, textElement, actionsElement].filter(\n    Boolean,\n  ) as ElementVisual[];\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-text',\n    children,\n    elementStyles: {\n      element: {\n        ...(includesAnimation && {\n          opacity: 0,\n        }),\n\n        ['.intro-default-animated &']: {\n          transform: 'translateY(100px)',\n          animation: 'intro-fade-in 1s forwards',\n          animationDelay: '0.2s',\n        },\n\n        [`&:before`]: {\n          ...(includesAnimation && {\n            height: 0,\n            transform: `translateY(${token.spacing.lg})`,\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst createWrapper = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n) => {\n  const textContainerElement = createTextContainer(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-wrapper',\n    children: [textContainerElement],\n    elementStyles: {\n      element: {\n        textAlign: 'center',\n      },\n    },\n  });\n};\n\nconst createContainer = (\n  props: Pick<\n    SectionIntroProps,\n    | 'isThemeDark'\n    | 'hasSeparator'\n    | 'headline'\n    | 'text'\n    | 'actions'\n    | 'includesAnimation'\n  >,\n) => {\n  const { isThemeDark, hasSeparator, includesAnimation } = props;\n\n  const wrapperElement = createWrapper(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container',\n    children: [wrapperElement],\n    elementStyles: {\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n        margin: '0 auto',\n\n        ...(hasSeparator && {\n          paddingTop: token.spacing['6xl'],\n          position: 'relative',\n        }),\n\n        [`&:before`]: {\n          ...(hasSeparator && {\n            content: '\"\"',\n            backgroundColor: token.color.red,\n            position: 'absolute',\n            height: token.spacing['4xl'],\n            width: '2px',\n            left: 'calc(50% - 1px)',\n            top: 0,\n          }),\n        },\n\n        ['&.intro-default-animated:before']: {\n          ...(includesAnimation && {\n            animation: 'intro-line 1.2s forwards',\n          }),\n        },\n\n        [`& *`]: {\n          ...(isThemeDark && {\n            color: token.color.white,\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst setupAnimation = (\n  props: Pick<SectionIntroProps, 'includesAnimation'> & {\n    container: HTMLElement;\n  },\n) => {\n  const { includesAnimation, container } = props;\n  if (!includesAnimation) return;\n\n  const animation: IntersectionObserverCallback = (entries, observer) => {\n    entries.map((entry) => {\n      const target = entry.target as HTMLElement;\n\n      if (entry.isIntersecting) {\n        target.classList.add('intro-default-animated');\n        observer.unobserve(target);\n      }\n    });\n  };\n\n  const observer = new IntersectionObserver(animation, {\n    root: null,\n    rootMargin: '0px',\n    threshold: [0.35],\n  });\n\n  observer.observe(container);\n};\n\nexport default (props: SectionIntroProps) => {\n  const containerElement = createContainer(props);\n\n  const loadAnimation = () =>\n    setupAnimation({\n      includesAnimation: props.includesAnimation,\n      container: containerElement.element,\n    });\n\n  if (props.includesAnimation) {\n    containerElement.styles += ANIMATION_CONFIGS.line;\n    containerElement.styles += ANIMATION_CONFIGS.fadeIn;\n  }\n\n  return {\n    ...containerElement,\n    events: { loadAnimation },\n  };\n};\n"],"names":["token","headline","ElementModel.headline.sansLargest","ElementModel.richText.simpleLarge","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","observer"],"mappings":"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"}
+{"version":3,"file":"small.js","sources":["../../../../source/composite/layout/section-intro/small.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../../_types';\n\nexport interface SectionIntroProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  text?: HTMLElement | null;\n  hasSeparator?: boolean;\n  isThemeDark?: boolean;\n  includesAnimation?: boolean;\n}\n\nconst ANIMATION_CONFIGS = {\n  line: `\n    @keyframes intro-line {\n      from {\n        height: 0;\n        transform: translateY(${token.spacing.lg});\n      }\n      to {\n        height: ${token.spacing['4xl']};\n        transform: translateY(0);\n      }\n    }\n  `,\n  fadeIn: `\n    @keyframes intro-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(100px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n  `,\n};\n\nconst createHeadline = (props: Pick<SectionIntroProps, 'headline'>) => {\n  const { headline } = props;\n  if (!headline) return;\n\n  return ElementModel.headline.sansLargest({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    },\n  });\n};\n\nconst createText = (props: Pick<SectionIntroProps, 'text'>) => {\n  const { text } = props;\n  if (!text) return;\n\n  return ElementModel.richText.simpleLarge({\n    element: text,\n    elementStyles: {\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n      },\n    },\n  });\n};\n\nconst createActions = (props: Pick<SectionIntroProps, 'actions'>) => {\n  const { actions } = props;\n  if (!actions) return;\n\n  return ElementModel.layout.gridInlineTabletRows({\n    element: actions,\n    elementStyles: {\n      element: {\n        justifyContent: 'center',\n        alignItems: 'center',\n\n        [`* + &`]: {\n          marginTop: token.spacing.md,\n        },\n      },\n    },\n  });\n};\n\nconst createTextContainer = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark' | 'includesAnimation'\n  >,\n) => {\n  const { headline, text, actions, includesAnimation, isThemeDark } = props;\n\n  const headlineElement = createHeadline({ headline });\n  const textElement = createText({ text });\n  const actionsElement = createActions({ actions });\n\n  const children = [headlineElement, textElement, actionsElement].filter(\n    Boolean,\n  ) as ElementVisual[];\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-text',\n    children,\n    elementStyles: {\n      element: {\n        ...(includesAnimation && {\n          opacity: 0,\n        }),\n\n        ['& > *, p']: {\n          ...(!headline && {\n            ...typography.sans.transformations.largerBold,\n            color: token.color.black,\n\n            ...(isThemeDark && {\n              color: token.color.white,\n            }),\n          }),\n        },\n\n        ['.intro-default-animated &']: {\n          transform: 'translateY(100px)',\n          animation: 'intro-fade-in 1s forwards',\n          animationDelay: '0.2s',\n        },\n\n        [`&:before`]: {\n          ...(includesAnimation && {\n            height: 0,\n            transform: `translateY(${token.spacing.lg})`,\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst createWrapper = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n) => {\n  const textContainerElement = createTextContainer(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-wrapper',\n    children: [textContainerElement],\n    elementStyles: {\n      element: {\n        textAlign: 'center',\n      },\n    },\n  });\n};\n\nconst createContainer = (\n  props: Pick<\n    SectionIntroProps,\n    | 'isThemeDark'\n    | 'hasSeparator'\n    | 'headline'\n    | 'text'\n    | 'actions'\n    | 'includesAnimation'\n  >,\n) => {\n  const { isThemeDark, hasSeparator, includesAnimation } = props;\n\n  const wrapperElement = createWrapper(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container',\n    children: [wrapperElement],\n    elementStyles: {\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n        margin: '0 auto',\n\n        ...(hasSeparator && {\n          paddingTop: token.spacing['6xl'],\n          position: 'relative',\n        }),\n\n        [`&:before`]: {\n          ...(hasSeparator && {\n            content: '\"\"',\n            backgroundColor: token.color.red,\n            position: 'absolute',\n            height: token.spacing['4xl'],\n            width: '2px',\n            left: 'calc(50% - 1px)',\n            top: 0,\n          }),\n        },\n\n        ['&.intro-default-animated:before']: {\n          ...(includesAnimation && {\n            animation: 'intro-line 1.2s forwards',\n          }),\n        },\n\n        [`& *`]: {\n          ...(isThemeDark && {\n            color: token.color.white,\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst setupAnimation = (\n  props: Pick<SectionIntroProps, 'includesAnimation'> & {\n    container: HTMLElement;\n  },\n) => {\n  const { includesAnimation, container } = props;\n  if (!includesAnimation) return;\n\n  const animation: IntersectionObserverCallback = (entries, observer) => {\n    entries.map((entry) => {\n      const target = entry.target as HTMLElement;\n\n      if (entry.isIntersecting) {\n        target.classList.add('intro-default-animated');\n        observer.unobserve(target);\n      }\n    });\n  };\n\n  const observer = new IntersectionObserver(animation, {\n    root: null,\n    rootMargin: '0px',\n    threshold: [0.35],\n  });\n\n  observer.observe(container);\n};\n\nexport default (props: SectionIntroProps) => {\n  const containerElement = createContainer(props);\n\n  const loadAnimation = () =>\n    setupAnimation({\n      includesAnimation: props.includesAnimation,\n      container: containerElement.element,\n    });\n\n  if (props.includesAnimation) {\n    containerElement.styles += ANIMATION_CONFIGS.line;\n    containerElement.styles += ANIMATION_CONFIGS.fadeIn;\n  }\n\n  return {\n    ...containerElement,\n    events: { loadAnimation },\n  };\n};\n"],"names":["token","headline","ElementModel.headline.sansLargest","ElementModel.richText.simpleLarge","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","typography","observer"],"mappings":";;;;;;AAaA,MAAM,oBAAoB;AAAA,EACxB,MAAM;AAAA;AAAA;AAAA;AAAA,gCAIwBA,OAAAA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,kBAG9BA,OAAAA,MAAM,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYV;AAEA,MAAM,iBAAiB,CAAC,UAA+C;AACrE,QAAM,EAAA,UAAEC,eAAa;AACrB,MAAI,CAACA,WAAU;AAEf,SAAOC,qBAAkC;AAAA,IACvC,SAASD;AAAAA,IACT,eAAe;AAAA,MACb,SAAS;AAAA,QACP,YAAY;AAAA,QACZ,eAAe;AAAA,MAAA;AAAA,IACjB;AAAA,EACF,CACD;AACH;AAEA,MAAM,aAAa,CAAC,UAA2C;AAC7D,QAAM,EAAE,SAAS;AACjB,MAAI,CAAC,KAAM;AAEX,SAAOE,qBAAkC;AAAA,IACvC,SAAS;AAAA,IACT,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,OAAO,GAAG;AAAA,UACT,WAAWH,OAAAA,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,gBAAgB,CAAC,UAA8C;AACnE,QAAM,EAAE,YAAY;AACpB,MAAI,CAAC,QAAS;AAEd,SAAOI,4BAAyC;AAAA,IAC9C,SAAS;AAAA,IACT,eAAe;AAAA,MACb,SAAS;AAAA,QACP,gBAAgB;AAAA,QAChB,YAAY;AAAA,QAEZ,CAAC,OAAO,GAAG;AAAA,UACT,WAAWJ,OAAAA,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,sBAAsB,CAC1B,UAIG;AACH,QAAM,EAAE,UAAAC,WAAU,MAAM,SAAS,mBAAmB,gBAAgB;AAEpE,QAAM,kBAAkB,eAAe,EAAE,UAAAA,WAAU;AACnD,QAAM,cAAc,WAAW,EAAE,MAAM;AACvC,QAAM,iBAAiB,cAAc,EAAE,SAAS;AAEhD,QAAM,WAAW,CAAC,iBAAiB,aAAa,cAAc,EAAE;AAAA,IAC9D;AAAA,EAAA;AAGF,SAAOI,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAI,qBAAqB;AAAA,UACvB,SAAS;AAAA,QAAA;AAAA,QAGX,CAAC,UAAU,GAAG;AAAA,UACZ,GAAI,CAACJ,aAAY;AAAA,YACf,GAAGK,OAAAA,WAAW,KAAK,gBAAgB;AAAA,YACnC,OAAON,OAAAA,MAAM,MAAM;AAAA,YAEnB,GAAI,eAAe;AAAA,cACjB,OAAOA,OAAAA,MAAM,MAAM;AAAA,YAAA;AAAA,UACrB;AAAA,QACF;AAAA,QAGF,CAAC,2BAA2B,GAAG;AAAA,UAC7B,WAAW;AAAA,UACX,WAAW;AAAA,UACX,gBAAgB;AAAA,QAAA;AAAA,QAGlB,CAAC,UAAU,GAAG;AAAA,UACZ,GAAI,qBAAqB;AAAA,YACvB,QAAQ;AAAA,YACR,WAAW,cAAcA,OAAAA,MAAM,QAAQ,EAAE;AAAA,UAAA;AAAA,QAC3C;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,gBAAgB,CACpB,UAIG;AACH,QAAM,uBAAuB,oBAAoB,KAAK;AAEtD,SAAOK,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,oBAAoB;AAAA,IAC/B,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF,CACD;AACH;AAEA,MAAM,kBAAkB,CACtB,UASG;AACH,QAAM,EAAE,aAAa,cAAc,kBAAA,IAAsB;AAEzD,QAAM,iBAAiB,cAAc,KAAK;AAE1C,SAAOA,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,cAAc;AAAA,IACzB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAUL,OAAAA,MAAM,QAAQ,SAAS;AAAA,QACjC,QAAQ;AAAA,QAER,GAAI,gBAAgB;AAAA,UAClB,YAAYA,OAAAA,MAAM,QAAQ,KAAK;AAAA,UAC/B,UAAU;AAAA,QAAA;AAAA,QAGZ,CAAC,UAAU,GAAG;AAAA,UACZ,GAAI,gBAAgB;AAAA,YAClB,SAAS;AAAA,YACT,iBAAiBA,OAAAA,MAAM,MAAM;AAAA,YAC7B,UAAU;AAAA,YACV,QAAQA,OAAAA,MAAM,QAAQ,KAAK;AAAA,YAC3B,OAAO;AAAA,YACP,MAAM;AAAA,YACN,KAAK;AAAA,UAAA;AAAA,QACP;AAAA,QAGF,CAAC,iCAAiC,GAAG;AAAA,UACnC,GAAI,qBAAqB;AAAA,YACvB,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,QAGF,CAAC,KAAK,GAAG;AAAA,UACP,GAAI,eAAe;AAAA,YACjB,OAAOA,OAAAA,MAAM,MAAM;AAAA,UAAA;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,iBAAiB,CACrB,UAGG;AACH,QAAM,EAAE,mBAAmB,UAAA,IAAc;AACzC,MAAI,CAAC,kBAAmB;AAExB,QAAM,YAA0C,CAAC,SAASO,cAAa;AACrE,YAAQ,IAAI,CAAC,UAAU;AACrB,YAAM,SAAS,MAAM;AAErB,UAAI,MAAM,gBAAgB;AACxB,eAAO,UAAU,IAAI,wBAAwB;AAC7CA,kBAAS,UAAU,MAAM;AAAA,MAC3B;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,WAAW,IAAI,qBAAqB,WAAW;AAAA,IACnD,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW,CAAC,IAAI;AAAA,EAAA,CACjB;AAED,WAAS,QAAQ,SAAS;AAC5B;AAEA,MAAA,QAAe,CAAC,UAA6B;AAC3C,QAAM,mBAAmB,gBAAgB,KAAK;AAE9C,QAAM,gBAAgB,MACpB,eAAe;AAAA,IACb,mBAAmB,MAAM;AAAA,IACzB,WAAW,iBAAiB;AAAA,EAAA,CAC7B;AAEH,MAAI,MAAM,mBAAmB;AAC3B,qBAAiB,UAAU,kBAAkB;AAC7C,qBAAiB,UAAU,kBAAkB;AAAA,EAC/C;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,EAAE,cAAA;AAAA,EAAc;AAE5B;;"}

package/dist/composite/layout/section-intro/small.mjs

@@ -1,4 +1,4 @@
-import { token } from "@universityofmaryland/web-styles-library";
+import { token, typography } from "@universityofmaryland/web-styles-library";
 import { createDiv } from "../../../model/elements/index.mjs";
 import { sansLargest } from "../../../model/elements/headline.mjs";
 import { simpleLarge } from "../../../model/elements/rich-text.mjs";
@@ -73,7 +73,7 @@ const createActions = (props) => {
   });
 };
 const createTextContainer = (props) => {
-  const { headline, text, actions, includesAnimation } = props;
+  const { headline, text, actions, includesAnimation, isThemeDark } = props;
   const headlineElement = createHeadline({ headline });
   const textElement = createText({ text });
   const actionsElement = createActions({ actions });
@@ -88,6 +88,15 @@ const createTextContainer = (props) => {
         ...includesAnimation && {
           opacity: 0
         },
+        ["& > *, p"]: {
+          ...!headline && {
+            ...typography.sans.transformations.largerBold,
+            color: token.color.black,
+            ...isThemeDark && {
+              color: token.color.white
+            }
+          }
+        },
         [".intro-default-animated &"]: {
           transform: "translateY(100px)",
           animation: "intro-fade-in 1s forwards",

package/dist/composite/layout/section-intro/small.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"small.mjs","sources":["../../../../source/composite/layout/section-intro/small.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../../_types';\n\nexport interface SectionIntroProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  text?: HTMLElement | null;\n  hasSeparator?: boolean;\n  isThemeDark?: boolean;\n  includesAnimation?: boolean;\n}\n\nconst ANIMATION_CONFIGS = {\n  line: `\n    @keyframes intro-line {\n      from {\n        height: 0;\n        transform: translateY(${token.spacing.lg});\n      }\n      to {\n        height: ${token.spacing['4xl']};\n        transform: translateY(0);\n      }\n    }\n  `,\n  fadeIn: `\n    @keyframes intro-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(100px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n  `,\n};\n\nconst createHeadline = (props: Pick<SectionIntroProps, 'headline'>) => {\n  const { headline } = props;\n  if (!headline) return;\n\n  return ElementModel.headline.sansLargest({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    },\n  });\n};\n\nconst createText = (props: Pick<SectionIntroProps, 'text'>) => {\n  const { text } = props;\n  if (!text) return;\n\n  return ElementModel.richText.simpleLarge({\n    element: text,\n    elementStyles: {\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n      },\n    },\n  });\n};\n\nconst createActions = (props: Pick<SectionIntroProps, 'actions'>) => {\n  const { actions } = props;\n  if (!actions) return;\n\n  return ElementModel.layout.gridInlineTabletRows({\n    element: actions,\n    elementStyles: {\n      element: {\n        justifyContent: 'center',\n        alignItems: 'center',\n\n        [`* + &`]: {\n          marginTop: token.spacing.md,\n        },\n      },\n    },\n  });\n};\n\nconst createTextContainer = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark' | 'includesAnimation'\n  >,\n) => {\n  const { headline, text, actions, includesAnimation } = props;\n\n  const headlineElement = createHeadline({ headline });\n  const textElement = createText({ text });\n  const actionsElement = createActions({ actions });\n\n  const children = [headlineElement, textElement, actionsElement].filter(\n    Boolean,\n  ) as ElementVisual[];\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-text',\n    children,\n    elementStyles: {\n      element: {\n        ...(includesAnimation && {\n          opacity: 0,\n        }),\n\n        ['.intro-default-animated &']: {\n          transform: 'translateY(100px)',\n          animation: 'intro-fade-in 1s forwards',\n          animationDelay: '0.2s',\n        },\n\n        [`&:before`]: {\n          ...(includesAnimation && {\n            height: 0,\n            transform: `translateY(${token.spacing.lg})`,\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst createWrapper = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n) => {\n  const textContainerElement = createTextContainer(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-wrapper',\n    children: [textContainerElement],\n    elementStyles: {\n      element: {\n        textAlign: 'center',\n      },\n    },\n  });\n};\n\nconst createContainer = (\n  props: Pick<\n    SectionIntroProps,\n    | 'isThemeDark'\n    | 'hasSeparator'\n    | 'headline'\n    | 'text'\n    | 'actions'\n    | 'includesAnimation'\n  >,\n) => {\n  const { isThemeDark, hasSeparator, includesAnimation } = props;\n\n  const wrapperElement = createWrapper(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container',\n    children: [wrapperElement],\n    elementStyles: {\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n        margin: '0 auto',\n\n        ...(hasSeparator && {\n          paddingTop: token.spacing['6xl'],\n          position: 'relative',\n        }),\n\n        [`&:before`]: {\n          ...(hasSeparator && {\n            content: '\"\"',\n            backgroundColor: token.color.red,\n            position: 'absolute',\n            height: token.spacing['4xl'],\n            width: '2px',\n            left: 'calc(50% - 1px)',\n            top: 0,\n          }),\n        },\n\n        ['&.intro-default-animated:before']: {\n          ...(includesAnimation && {\n            animation: 'intro-line 1.2s forwards',\n          }),\n        },\n\n        [`& *`]: {\n          ...(isThemeDark && {\n            color: token.color.white,\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst setupAnimation = (\n  props: Pick<SectionIntroProps, 'includesAnimation'> & {\n    container: HTMLElement;\n  },\n) => {\n  const { includesAnimation, container } = props;\n  if (!includesAnimation) return;\n\n  const animation: IntersectionObserverCallback = (entries, observer) => {\n    entries.map((entry) => {\n      const target = entry.target as HTMLElement;\n\n      if (entry.isIntersecting) {\n        target.classList.add('intro-default-animated');\n        observer.unobserve(target);\n      }\n    });\n  };\n\n  const observer = new IntersectionObserver(animation, {\n    root: null,\n    rootMargin: '0px',\n    threshold: [0.35],\n  });\n\n  observer.observe(container);\n};\n\nexport default (props: SectionIntroProps) => {\n  const containerElement = createContainer(props);\n\n  const loadAnimation = () =>\n    setupAnimation({\n      includesAnimation: props.includesAnimation,\n      container: containerElement.element,\n    });\n\n  if (props.includesAnimation) {\n    containerElement.styles += ANIMATION_CONFIGS.line;\n    containerElement.styles += ANIMATION_CONFIGS.fadeIn;\n  }\n\n  return {\n    ...containerElement,\n    events: { loadAnimation },\n  };\n};\n"],"names":["ElementModel.headline.sansLargest","ElementModel.richText.simpleLarge","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","observer"],"mappings":"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"}
+{"version":3,"file":"small.mjs","sources":["../../../../source/composite/layout/section-intro/small.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../../_types';\n\nexport interface SectionIntroProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  text?: HTMLElement | null;\n  hasSeparator?: boolean;\n  isThemeDark?: boolean;\n  includesAnimation?: boolean;\n}\n\nconst ANIMATION_CONFIGS = {\n  line: `\n    @keyframes intro-line {\n      from {\n        height: 0;\n        transform: translateY(${token.spacing.lg});\n      }\n      to {\n        height: ${token.spacing['4xl']};\n        transform: translateY(0);\n      }\n    }\n  `,\n  fadeIn: `\n    @keyframes intro-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(100px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n  `,\n};\n\nconst createHeadline = (props: Pick<SectionIntroProps, 'headline'>) => {\n  const { headline } = props;\n  if (!headline) return;\n\n  return ElementModel.headline.sansLargest({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    },\n  });\n};\n\nconst createText = (props: Pick<SectionIntroProps, 'text'>) => {\n  const { text } = props;\n  if (!text) return;\n\n  return ElementModel.richText.simpleLarge({\n    element: text,\n    elementStyles: {\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n      },\n    },\n  });\n};\n\nconst createActions = (props: Pick<SectionIntroProps, 'actions'>) => {\n  const { actions } = props;\n  if (!actions) return;\n\n  return ElementModel.layout.gridInlineTabletRows({\n    element: actions,\n    elementStyles: {\n      element: {\n        justifyContent: 'center',\n        alignItems: 'center',\n\n        [`* + &`]: {\n          marginTop: token.spacing.md,\n        },\n      },\n    },\n  });\n};\n\nconst createTextContainer = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark' | 'includesAnimation'\n  >,\n) => {\n  const { headline, text, actions, includesAnimation, isThemeDark } = props;\n\n  const headlineElement = createHeadline({ headline });\n  const textElement = createText({ text });\n  const actionsElement = createActions({ actions });\n\n  const children = [headlineElement, textElement, actionsElement].filter(\n    Boolean,\n  ) as ElementVisual[];\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-text',\n    children,\n    elementStyles: {\n      element: {\n        ...(includesAnimation && {\n          opacity: 0,\n        }),\n\n        ['& > *, p']: {\n          ...(!headline && {\n            ...typography.sans.transformations.largerBold,\n            color: token.color.black,\n\n            ...(isThemeDark && {\n              color: token.color.white,\n            }),\n          }),\n        },\n\n        ['.intro-default-animated &']: {\n          transform: 'translateY(100px)',\n          animation: 'intro-fade-in 1s forwards',\n          animationDelay: '0.2s',\n        },\n\n        [`&:before`]: {\n          ...(includesAnimation && {\n            height: 0,\n            transform: `translateY(${token.spacing.lg})`,\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst createWrapper = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n) => {\n  const textContainerElement = createTextContainer(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-wrapper',\n    children: [textContainerElement],\n    elementStyles: {\n      element: {\n        textAlign: 'center',\n      },\n    },\n  });\n};\n\nconst createContainer = (\n  props: Pick<\n    SectionIntroProps,\n    | 'isThemeDark'\n    | 'hasSeparator'\n    | 'headline'\n    | 'text'\n    | 'actions'\n    | 'includesAnimation'\n  >,\n) => {\n  const { isThemeDark, hasSeparator, includesAnimation } = props;\n\n  const wrapperElement = createWrapper(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container',\n    children: [wrapperElement],\n    elementStyles: {\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n        margin: '0 auto',\n\n        ...(hasSeparator && {\n          paddingTop: token.spacing['6xl'],\n          position: 'relative',\n        }),\n\n        [`&:before`]: {\n          ...(hasSeparator && {\n            content: '\"\"',\n            backgroundColor: token.color.red,\n            position: 'absolute',\n            height: token.spacing['4xl'],\n            width: '2px',\n            left: 'calc(50% - 1px)',\n            top: 0,\n          }),\n        },\n\n        ['&.intro-default-animated:before']: {\n          ...(includesAnimation && {\n            animation: 'intro-line 1.2s forwards',\n          }),\n        },\n\n        [`& *`]: {\n          ...(isThemeDark && {\n            color: token.color.white,\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst setupAnimation = (\n  props: Pick<SectionIntroProps, 'includesAnimation'> & {\n    container: HTMLElement;\n  },\n) => {\n  const { includesAnimation, container } = props;\n  if (!includesAnimation) return;\n\n  const animation: IntersectionObserverCallback = (entries, observer) => {\n    entries.map((entry) => {\n      const target = entry.target as HTMLElement;\n\n      if (entry.isIntersecting) {\n        target.classList.add('intro-default-animated');\n        observer.unobserve(target);\n      }\n    });\n  };\n\n  const observer = new IntersectionObserver(animation, {\n    root: null,\n    rootMargin: '0px',\n    threshold: [0.35],\n  });\n\n  observer.observe(container);\n};\n\nexport default (props: SectionIntroProps) => {\n  const containerElement = createContainer(props);\n\n  const loadAnimation = () =>\n    setupAnimation({\n      includesAnimation: props.includesAnimation,\n      container: containerElement.element,\n    });\n\n  if (props.includesAnimation) {\n    containerElement.styles += ANIMATION_CONFIGS.line;\n    containerElement.styles += ANIMATION_CONFIGS.fadeIn;\n  }\n\n  return {\n    ...containerElement,\n    events: { loadAnimation },\n  };\n};\n"],"names":["ElementModel.headline.sansLargest","ElementModel.richText.simpleLarge","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","observer"],"mappings":"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"}

package/dist/composite/media/elements/gif.js

@@ -6,6 +6,7 @@ require("../../../node_modules/postcss-nesting/dist/index.js");
 require("../../../node_modules/postcss-js/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/media/elements/gif.js.map

@@ -1 +1 @@
-{"version":3,"file":"gif.js","sources":["../../../../source/composite/media/elements/gif.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { assets } from 'atomic';\n\nexport default ({ image }: { image: HTMLImageElement }) => {\n  const container = document.createElement('div');\n\n  const calculateHeight = () => {\n    if (!image.naturalWidth || !image.naturalHeight) return;\n\n    const aspectRatio = image.naturalHeight / image.naturalWidth;\n    const containerWidth = container.offsetWidth;\n\n    if (containerWidth > 0) {\n      const calculatedHeight = Math.round(containerWidth * aspectRatio);\n      container.style.height = `${calculatedHeight}px`;\n    } else {\n      container.style.width = `${image.naturalWidth}px`;\n\n      setTimeout(() => {\n        const containerWidth = container.offsetWidth;\n        const calculatedHeight = Math.round(containerWidth * aspectRatio);\n        container.style.height = `${calculatedHeight}px`;\n      }, 100);\n    }\n  };\n\n  const resizeObserver = new ResizeObserver(() => {\n    container.style.width = `${image.naturalWidth}px`;\n    setTimeout(() => {\n      calculateHeight();\n    }, 10);\n  });\n\n  if (image.complete && image.naturalWidth) {\n    container.style.width = `${image.naturalWidth}px`;\n    setTimeout(() => {\n      calculateHeight();\n    }, 10);\n  } else {\n    image.addEventListener('load', calculateHeight);\n  }\n\n  setTimeout(() => {\n    resizeObserver.observe(container);\n  }, 0);\n\n  const elementModel = ElementModel.create({\n    element: container,\n    className: 'media-gif',\n    children: [\n      assets.image.background({\n        element: image,\n        isShowCaption: true,\n        isScaled: false,\n        isGifAllowed: true,\n        customStyles: {\n          width: 'auto',\n          height: '100%',\n          display: 'block',\n        },\n      }),\n    ],\n    elementStyles: {\n      element: {\n        maxHeight: '100%',\n        maxWidth: '100%',\n        position: 'relative',\n        display: 'block',\n        overflow: 'hidden',\n      },\n    },\n  });\n\n  return {\n    ...elementModel,\n    destroy: () => {\n      resizeObserver.disconnect();\n      image.removeEventListener('load', calculateHeight);\n    },\n  };\n};\n"],"names":["containerWidth","ElementModel.create","assets.image.background"],"mappings":";;;;;;;;;;;;;;AAGA,MAAA,MAAe,CAAC,EAAE,MAAA,MAAyC;AACzD,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAe;AAEjD,UAAM,cAAc,MAAM,gBAAgB,MAAM;AAChD,UAAM,iBAAiB,UAAU;AAEjC,QAAI,iBAAiB,GAAG;AACtB,YAAM,mBAAmB,KAAK,MAAM,iBAAiB,WAAW;AAChE,gBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,IAC9C,OAAO;AACL,gBAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAE7C,iBAAW,MAAM;AACf,cAAMA,kBAAiB,UAAU;AACjC,cAAM,mBAAmB,KAAK,MAAMA,kBAAiB,WAAW;AAChE,kBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,MAC9C,GAAG,GAAG;AAAA,IACR;AAAA,EACF;AAEA,QAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,CAAC;AAED,MAAI,MAAM,YAAY,MAAM,cAAc;AACxC,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,OAAO;AACL,UAAM,iBAAiB,QAAQ,eAAe;AAAA,EAChD;AAEA,aAAW,MAAM;AACf,mBAAe,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC;AAEJ,QAAM,eAAeC,MAAAA,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,MACRC,WAAwB;AAAA,QACtB,SAAS;AAAA,QACT,eAAe;AAAA,QACf,UAAU;AAAA,QACV,cAAc;AAAA,QACd,cAAc;AAAA,UACZ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,QAAA;AAAA,MACX,CACD;AAAA,IAAA;AAAA,IAEH,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS,MAAM;AACb,qBAAe,WAAA;AACf,YAAM,oBAAoB,QAAQ,eAAe;AAAA,IACnD;AAAA,EAAA;AAEJ;;"}
+{"version":3,"file":"gif.js","sources":["../../../../source/composite/media/elements/gif.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { assets } from 'atomic';\n\nexport default ({ image }: { image: HTMLImageElement }) => {\n  const container = document.createElement('div');\n\n  const calculateHeight = () => {\n    if (!image.naturalWidth || !image.naturalHeight) return;\n\n    const aspectRatio = image.naturalHeight / image.naturalWidth;\n    const containerWidth = container.offsetWidth;\n\n    if (containerWidth > 0) {\n      const calculatedHeight = Math.round(containerWidth * aspectRatio);\n      container.style.height = `${calculatedHeight}px`;\n    } else {\n      container.style.width = `${image.naturalWidth}px`;\n\n      setTimeout(() => {\n        const containerWidth = container.offsetWidth;\n        const calculatedHeight = Math.round(containerWidth * aspectRatio);\n        container.style.height = `${calculatedHeight}px`;\n      }, 100);\n    }\n  };\n\n  const resizeObserver = new ResizeObserver(() => {\n    container.style.width = `${image.naturalWidth}px`;\n    setTimeout(() => {\n      calculateHeight();\n    }, 10);\n  });\n\n  if (image.complete && image.naturalWidth) {\n    container.style.width = `${image.naturalWidth}px`;\n    setTimeout(() => {\n      calculateHeight();\n    }, 10);\n  } else {\n    image.addEventListener('load', calculateHeight);\n  }\n\n  setTimeout(() => {\n    resizeObserver.observe(container);\n  }, 0);\n\n  const elementModel = ElementModel.create({\n    element: container,\n    className: 'media-gif',\n    children: [\n      assets.image.background({\n        element: image,\n        isShowCaption: true,\n        isScaled: false,\n        isGifAllowed: true,\n        customStyles: {\n          width: 'auto',\n          height: '100%',\n          display: 'block',\n        },\n      }),\n    ],\n    elementStyles: {\n      element: {\n        maxHeight: '100%',\n        maxWidth: '100%',\n        position: 'relative',\n        display: 'block',\n        overflow: 'hidden',\n      },\n    },\n  });\n\n  return {\n    ...elementModel,\n    destroy: () => {\n      resizeObserver.disconnect();\n      image.removeEventListener('load', calculateHeight);\n    },\n  };\n};\n"],"names":["containerWidth","ElementModel.create","assets.image.background"],"mappings":";;;;;;;;;;;;;;;AAGA,MAAA,MAAe,CAAC,EAAE,MAAA,MAAyC;AACzD,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAe;AAEjD,UAAM,cAAc,MAAM,gBAAgB,MAAM;AAChD,UAAM,iBAAiB,UAAU;AAEjC,QAAI,iBAAiB,GAAG;AACtB,YAAM,mBAAmB,KAAK,MAAM,iBAAiB,WAAW;AAChE,gBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,IAC9C,OAAO;AACL,gBAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAE7C,iBAAW,MAAM;AACf,cAAMA,kBAAiB,UAAU;AACjC,cAAM,mBAAmB,KAAK,MAAMA,kBAAiB,WAAW;AAChE,kBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,MAC9C,GAAG,GAAG;AAAA,IACR;AAAA,EACF;AAEA,QAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,CAAC;AAED,MAAI,MAAM,YAAY,MAAM,cAAc;AACxC,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,OAAO;AACL,UAAM,iBAAiB,QAAQ,eAAe;AAAA,EAChD;AAEA,aAAW,MAAM;AACf,mBAAe,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC;AAEJ,QAAM,eAAeC,MAAAA,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,MACRC,WAAwB;AAAA,QACtB,SAAS;AAAA,QACT,eAAe;AAAA,QACf,UAAU;AAAA,QACV,cAAc;AAAA,QACd,cAAc;AAAA,UACZ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,QAAA;AAAA,MACX,CACD;AAAA,IAAA;AAAA,IAEH,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS,MAAM;AACb,qBAAe,WAAA;AACf,YAAM,oBAAoB,QAAQ,eAAe;AAAA,IACnD;AAAA,EAAA;AAEJ;;"}

package/dist/composite/media/elements/gif.mjs

@@ -5,6 +5,7 @@ import "../../../node_modules/postcss-nesting/dist/index.mjs";
 import "../../../node_modules/postcss-js/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/media/elements/gif.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"gif.mjs","sources":["../../../../source/composite/media/elements/gif.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { assets } from 'atomic';\n\nexport default ({ image }: { image: HTMLImageElement }) => {\n  const container = document.createElement('div');\n\n  const calculateHeight = () => {\n    if (!image.naturalWidth || !image.naturalHeight) return;\n\n    const aspectRatio = image.naturalHeight / image.naturalWidth;\n    const containerWidth = container.offsetWidth;\n\n    if (containerWidth > 0) {\n      const calculatedHeight = Math.round(containerWidth * aspectRatio);\n      container.style.height = `${calculatedHeight}px`;\n    } else {\n      container.style.width = `${image.naturalWidth}px`;\n\n      setTimeout(() => {\n        const containerWidth = container.offsetWidth;\n        const calculatedHeight = Math.round(containerWidth * aspectRatio);\n        container.style.height = `${calculatedHeight}px`;\n      }, 100);\n    }\n  };\n\n  const resizeObserver = new ResizeObserver(() => {\n    container.style.width = `${image.naturalWidth}px`;\n    setTimeout(() => {\n      calculateHeight();\n    }, 10);\n  });\n\n  if (image.complete && image.naturalWidth) {\n    container.style.width = `${image.naturalWidth}px`;\n    setTimeout(() => {\n      calculateHeight();\n    }, 10);\n  } else {\n    image.addEventListener('load', calculateHeight);\n  }\n\n  setTimeout(() => {\n    resizeObserver.observe(container);\n  }, 0);\n\n  const elementModel = ElementModel.create({\n    element: container,\n    className: 'media-gif',\n    children: [\n      assets.image.background({\n        element: image,\n        isShowCaption: true,\n        isScaled: false,\n        isGifAllowed: true,\n        customStyles: {\n          width: 'auto',\n          height: '100%',\n          display: 'block',\n        },\n      }),\n    ],\n    elementStyles: {\n      element: {\n        maxHeight: '100%',\n        maxWidth: '100%',\n        position: 'relative',\n        display: 'block',\n        overflow: 'hidden',\n      },\n    },\n  });\n\n  return {\n    ...elementModel,\n    destroy: () => {\n      resizeObserver.disconnect();\n      image.removeEventListener('load', calculateHeight);\n    },\n  };\n};\n"],"names":["containerWidth","ElementModel.create","assets.image.background"],"mappings":";;;;;;;;;;;;;AAGA,MAAA,MAAe,CAAC,EAAE,MAAA,MAAyC;AACzD,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAe;AAEjD,UAAM,cAAc,MAAM,gBAAgB,MAAM;AAChD,UAAM,iBAAiB,UAAU;AAEjC,QAAI,iBAAiB,GAAG;AACtB,YAAM,mBAAmB,KAAK,MAAM,iBAAiB,WAAW;AAChE,gBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,IAC9C,OAAO;AACL,gBAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAE7C,iBAAW,MAAM;AACf,cAAMA,kBAAiB,UAAU;AACjC,cAAM,mBAAmB,KAAK,MAAMA,kBAAiB,WAAW;AAChE,kBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,MAC9C,GAAG,GAAG;AAAA,IACR;AAAA,EACF;AAEA,QAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,CAAC;AAED,MAAI,MAAM,YAAY,MAAM,cAAc;AACxC,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,OAAO;AACL,UAAM,iBAAiB,QAAQ,eAAe;AAAA,EAChD;AAEA,aAAW,MAAM;AACf,mBAAe,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC;AAEJ,QAAM,eAAeC,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,MACRC,eAAwB;AAAA,QACtB,SAAS;AAAA,QACT,eAAe;AAAA,QACf,UAAU;AAAA,QACV,cAAc;AAAA,QACd,cAAc;AAAA,UACZ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,QAAA;AAAA,MACX,CACD;AAAA,IAAA;AAAA,IAEH,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS,MAAM;AACb,qBAAe,WAAA;AACf,YAAM,oBAAoB,QAAQ,eAAe;AAAA,IACnD;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"gif.mjs","sources":["../../../../source/composite/media/elements/gif.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { assets } from 'atomic';\n\nexport default ({ image }: { image: HTMLImageElement }) => {\n  const container = document.createElement('div');\n\n  const calculateHeight = () => {\n    if (!image.naturalWidth || !image.naturalHeight) return;\n\n    const aspectRatio = image.naturalHeight / image.naturalWidth;\n    const containerWidth = container.offsetWidth;\n\n    if (containerWidth > 0) {\n      const calculatedHeight = Math.round(containerWidth * aspectRatio);\n      container.style.height = `${calculatedHeight}px`;\n    } else {\n      container.style.width = `${image.naturalWidth}px`;\n\n      setTimeout(() => {\n        const containerWidth = container.offsetWidth;\n        const calculatedHeight = Math.round(containerWidth * aspectRatio);\n        container.style.height = `${calculatedHeight}px`;\n      }, 100);\n    }\n  };\n\n  const resizeObserver = new ResizeObserver(() => {\n    container.style.width = `${image.naturalWidth}px`;\n    setTimeout(() => {\n      calculateHeight();\n    }, 10);\n  });\n\n  if (image.complete && image.naturalWidth) {\n    container.style.width = `${image.naturalWidth}px`;\n    setTimeout(() => {\n      calculateHeight();\n    }, 10);\n  } else {\n    image.addEventListener('load', calculateHeight);\n  }\n\n  setTimeout(() => {\n    resizeObserver.observe(container);\n  }, 0);\n\n  const elementModel = ElementModel.create({\n    element: container,\n    className: 'media-gif',\n    children: [\n      assets.image.background({\n        element: image,\n        isShowCaption: true,\n        isScaled: false,\n        isGifAllowed: true,\n        customStyles: {\n          width: 'auto',\n          height: '100%',\n          display: 'block',\n        },\n      }),\n    ],\n    elementStyles: {\n      element: {\n        maxHeight: '100%',\n        maxWidth: '100%',\n        position: 'relative',\n        display: 'block',\n        overflow: 'hidden',\n      },\n    },\n  });\n\n  return {\n    ...elementModel,\n    destroy: () => {\n      resizeObserver.disconnect();\n      image.removeEventListener('load', calculateHeight);\n    },\n  };\n};\n"],"names":["containerWidth","ElementModel.create","assets.image.background"],"mappings":";;;;;;;;;;;;;;AAGA,MAAA,MAAe,CAAC,EAAE,MAAA,MAAyC;AACzD,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAe;AAEjD,UAAM,cAAc,MAAM,gBAAgB,MAAM;AAChD,UAAM,iBAAiB,UAAU;AAEjC,QAAI,iBAAiB,GAAG;AACtB,YAAM,mBAAmB,KAAK,MAAM,iBAAiB,WAAW;AAChE,gBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,IAC9C,OAAO;AACL,gBAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAE7C,iBAAW,MAAM;AACf,cAAMA,kBAAiB,UAAU;AACjC,cAAM,mBAAmB,KAAK,MAAMA,kBAAiB,WAAW;AAChE,kBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,MAC9C,GAAG,GAAG;AAAA,IACR;AAAA,EACF;AAEA,QAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,CAAC;AAED,MAAI,MAAM,YAAY,MAAM,cAAc;AACxC,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,OAAO;AACL,UAAM,iBAAiB,QAAQ,eAAe;AAAA,EAChD;AAEA,aAAW,MAAM;AACf,mBAAe,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC;AAEJ,QAAM,eAAeC,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,MACRC,eAAwB;AAAA,QACtB,SAAS;AAAA,QACT,eAAe;AAAA,QACf,UAAU;AAAA,QACV,cAAc;AAAA,QACd,cAAc;AAAA,UACZ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,QAAA;AAAA,MACX,CACD;AAAA,IAAA;AAAA,IAEH,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS,MAAM;AACb,qBAAe,WAAA;AACf,YAAM,oBAAoB,QAAQ,eAAe;AAAA,IACnD;AAAA,EAAA;AAEJ;"}

package/dist/composite/navigation/utility/alert.js

@@ -9,6 +9,7 @@ const index$1 = require("../../../utilities/network/index.js");
 const index = require("../../../utilities/theme/index.js");
 require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
+require("../../../atomic/animations/brand/card-stack.js");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");
 require("../../../atomic/layout/person/columns.js");

package/dist/composite/navigation/utility/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../../../source/composite/navigation/utility/alert.ts"],"sourcesContent":["import {\n  element,\n  layout,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { actions } from 'atomic';\nimport * as Utility from 'utilities';\n\ntype AlertData = {\n  id: string;\n  type: string;\n  title: string;\n  headline?: string;\n  text: string;\n  ctaUrl: string;\n  ctaText?: string;\n  hidden?: boolean;\n};\n\ntype AlertResponse = {\n  data: {\n    entries: AlertData[];\n  };\n};\n\ntype AlertProps = {\n  alertUrl?: string | null;\n};\n\nexport type TypeAlertProps = {\n  alertUrl?: string | null;\n};\n\ntype ElementAttributes = Record<string, string>;\n\ntype CacheCheckResult = {\n  shouldCheck: boolean;\n  cachedData: AlertData | null;\n};\n\nconst { FetchGraphQL } = Utility.network;\n\nconst QUERY = `\n  query CampusAlertsQuery {\n    entries: entries(\n      limit: 1\n      type: \"mainElementsCampusAlert\"\n    ) {\n        id: uid\n        type: optionsType\n        headline\n        title\n        text\n        ctaUrl: cta\n        ctaText\n    }\n  }\n`;\n\nconst ELEMENT_NAME = 'umd-element-nav-alert';\nexport const ALERT_CONSTANTS = {\n  URLS: {\n    DEFAULT: 'https://umd.edu/api/v2',\n  },\n  STORAGE_KEYS: {\n    ALERT_TIME: 'umd-utility-alert-time',\n    ALERT: 'umd-utility-alert',\n    ALERT_ID: 'umd-utility-alert-id',\n  },\n  ELEMENTS: {\n    ALERT_ID: 'umd-global-alert',\n    DECLARATION: 'umd-element-nav-alert-declaration',\n    CONTAINER: 'umd-element-nav-alert-container',\n    LOCK: 'umd-element-nav-alert-lock',\n    WRAPPER: 'umd-element-nav-alert-wrapper',\n    TITLE: 'umd-element-nav-alert-title',\n    TEXT: 'umd-element-nav-alert-text',\n    CTA: 'umd-element-nav-alert-cta',\n    CLOSE_BUTTON: 'umd-element-nav-alert-close',\n  },\n  ATTRIBUTES: {\n    TYPE: 'type',\n  },\n  TYPES: {\n    GENERAL: 'general',\n    CLOSED: 'closed',\n    OPEN: 'open',\n  },\n  ANIMATION: {\n    SPEED: 800,\n  },\n  BREAKPOINTS: {\n    MEDIUM: 768,\n    LARGE: 1024,\n  },\n  CACHE: {\n    DURATION: 60 * 1000, // One minute in milliseconds\n  },\n} as const;\n\nconst { ATTRIBUTES, ANIMATION, BREAKPOINTS, ELEMENTS, TYPES } = ALERT_CONSTANTS;\nconst IS_TYPE_GENERAL = `[${ATTRIBUTES.TYPE}=${TYPES.GENERAL}]`;\nconst IS_TYPE_CLOSED = `[${ATTRIBUTES.TYPE}=${TYPES.CLOSED}]`;\n\nconst DECLARATION = `.${ELEMENTS.DECLARATION}`;\nconst CONTAINER = `.${ELEMENTS.CONTAINER}`;\nconst WRAPPER = `.${ELEMENTS.WRAPPER}`;\nconst LOCK = `.${ELEMENTS.LOCK}`;\nconst ALERT_TITLE = `.${ELEMENTS.TITLE}`;\nconst ALERT_TEXT = `.${ELEMENTS.TEXT}`;\nconst CLOSE_BUTTON = `.${ELEMENTS.CLOSE_BUTTON}`;\nconst CTA = `.${ELEMENTS.CTA}`;\n\nconst OVERWRITE_CONTAINER_TYPE_GENERAL = `${CONTAINER}${IS_TYPE_GENERAL}`;\nconst OVERWRITE_CONTAINER_TYPE_CLOSED = `${CONTAINER}${IS_TYPE_CLOSED}`;\n\n// prettier-ignore\nconst OverwriteTypeGeneral = `\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} a:hover,\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} a:focus {\n    color: ${token.color.white} !important;\n  }\n\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} ${ALERT_TITLE} {\n    color: ${token.color.gold};\n  }\n\n   ${OVERWRITE_CONTAINER_TYPE_GENERAL} ${CLOSE_BUTTON} > svg {\n    fill: ${token.color.white};\n  }\n`\n\n// prettier-ignore\nconst OverwriteTypeClosed = `\n  ${OVERWRITE_CONTAINER_TYPE_CLOSED} {\n    background-color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_CONTAINER_TYPE_CLOSED} * {\n    color: ${token.color.black};\n  }\n\n   ${OVERWRITE_CONTAINER_TYPE_CLOSED} .${CLOSE_BUTTON} > svg {\n    fill: ${token.color.black};\n  }\n`\n\n// prettier-ignore\nconst CloseButtonStyles = `\n  ${CLOSE_BUTTON} {\n    position: absolute;\n    top: 30px;\n    right: 10px;\n  }\n  \n  @container (max-width: ${BREAKPOINTS.MEDIUM - 1}px) {\n    ${CLOSE_BUTTON} {\n      top: 25px;\n      right: 5px;\n    }\n  }\n\n  ${CLOSE_BUTTON} > svg {\n    fill: ${token.color.black};\n    width: 24px;\n    height: 24px;\n  }\n`\n\n// prettier-ignore\nconst TextStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`${ALERT_TITLE}`]: typography.sans.large,\n    },\n  })}\n\n  ${ALERT_TITLE} {\n    text-transform: uppercase;\n  }\n\n  ${ALERT_TITLE} + * {\n    margin-top: ${token.spacing.sm};\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`${ALERT_TEXT}`]: element.text.rich.advanced,\n    },\n  })}\n\n  ${ALERT_TEXT},\n  ${ALERT_TEXT} * {\n    font-size: 16px;;\n  }\n\n  ${ALERT_TEXT} + * {\n    margin-top: ${token.spacing.lg};\n  }\n\n  ${CTA} {\n    text-decoration: none;\n  }\n`\n\n// prettier-ignore\nconst WrapperStyles = `\n  ${WRAPPER} {\n    position: relative;\n    padding-top: ${token.spacing.md};\n    padding-bottom: ${token.spacing.md};\n    padding-right: ${token.spacing.lg};\n  }\n\n  @container (min-width: ${BREAKPOINTS.MEDIUM}px) {\n    ${WRAPPER} {\n      padding-top: ${token.spacing.lg};\n      padding-bottom: ${token.spacing.lg};\n    }\n  }\n`\n\n// prettier-ignore\nconst LockStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`${LOCK}`]: layout.space.horizontal.full,\n    },\n  })}\n`\n\n// prettier-ignore\nconst ContainerStyles = `\n  ${CONTAINER} {\n    container: ${ELEMENT_NAME} / inline-size;\n    background-color: ${token.color.gray.lighter};\n    border-left: 4px solid ${token.color.red};\n    transition: height ${ANIMATION.SPEED}ms;\n    overflow: hidden;\n    position: relative;\n  }\n\n  @container (min-width: ${BREAKPOINTS.LARGE}px) {\n    ${CONTAINER} {\n      border-left: 8px solid ${token.color.red};\n    }\n  }\n`\n\n// prettier-ignore\nexport const STYLES_NAV_ALERT = `\n  ${DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${ContainerStyles}\n  ${LockStyles}\n  ${WrapperStyles}\n  ${TextStyles}\n  ${CloseButtonStyles}\n  ${OverwriteTypeGeneral}\n  ${OverwriteTypeClosed}\n`;\n\n// storage.ts\nconst logStorageError = (operation: string, error: Error): void => {\n  console.error(`UMD Component - Alert Storage: ${operation} failed:`, error);\n};\n\nconst getStoredValue = <T>(key: string): T | null => {\n  try {\n    const value = window.localStorage.getItem(key);\n    return value ? JSON.parse(value) : null;\n  } catch (error) {\n    logStorageError(`Reading ${key}`, error as Error);\n    return null;\n  }\n};\n\nconst setStoredValue = (key: string, value: unknown): void => {\n  try {\n    window.localStorage.setItem(key, JSON.stringify(value));\n  } catch (error) {\n    logStorageError('Saving value', error as Error);\n  }\n};\n\nconst clearAlertStorage = (): void => {\n  const { STORAGE_KEYS } = ALERT_CONSTANTS;\n  window.localStorage.removeItem(STORAGE_KEYS.ALERT_TIME);\n  window.localStorage.removeItem(STORAGE_KEYS.ALERT);\n};\n\nconst checkAlertCache = (): CacheCheckResult => {\n  const currentTime = new Date().getTime();\n  const { STORAGE_KEYS, CACHE } = ALERT_CONSTANTS;\n\n  try {\n    const alertTimeStr = getStoredValue<string>(STORAGE_KEYS.ALERT_TIME);\n    const cachedResponse = getStoredValue<AlertData>(STORAGE_KEYS.ALERT);\n\n    if (!alertTimeStr) {\n      setStoredValue(STORAGE_KEYS.ALERT_TIME, currentTime.toString());\n      return { shouldCheck: true, cachedData: null };\n    }\n\n    const alertTime = parseInt(alertTimeStr, 10);\n    const timeElapsed = currentTime - alertTime;\n\n    if (timeElapsed < CACHE.DURATION && cachedResponse) {\n      return { shouldCheck: false, cachedData: cachedResponse };\n    }\n\n    setStoredValue(STORAGE_KEYS.ALERT_TIME, currentTime.toString());\n    return { shouldCheck: true, cachedData: null };\n  } catch (error) {\n    console.error('Cache check failed:', error);\n    return { shouldCheck: true, cachedData: null };\n  }\n};\n\nconst updateAlertCache = (alert: AlertData): void => {\n  setStoredValue(ALERT_CONSTANTS.STORAGE_KEYS.ALERT, alert);\n};\n\nconst createElement = (\n  tag: string,\n  className?: string,\n  attributes?: ElementAttributes,\n): HTMLElement => {\n  const element = document.createElement(tag);\n  if (className) element.classList.add(className);\n  if (attributes) {\n    Object.entries(attributes).forEach(([key, value]) => {\n      element.setAttribute(key, value);\n    });\n  }\n  return element;\n};\n\nconst createCloseButton = (container: HTMLElement): HTMLButtonElement => {\n  const { ELEMENTS, ANIMATION } = ALERT_CONSTANTS;\n  const button = createElement('button', ELEMENTS.CLOSE_BUTTON, {\n    'aria-label': 'remove alert',\n  }) as HTMLButtonElement;\n\n  button.innerHTML = Utility.asset.icon.X;\n  button.addEventListener('click', () => {\n    const cachedAlert = getStoredValue<AlertData>(\n      ALERT_CONSTANTS.STORAGE_KEYS.ALERT,\n    );\n    if (cachedAlert) {\n      // Animate close\n      container.style.height = `${container.offsetHeight}px`;\n      container.style.transition = `height ${ANIMATION.SPEED}ms`;\n\n      updateAlertCache({ ...cachedAlert, hidden: true });\n\n      setTimeout(() => {\n        container.style.height = '0px';\n      }, 100);\n\n      setTimeout(() => {\n        container.remove();\n      }, ANIMATION.SPEED + 100);\n    }\n  });\n\n  return button;\n};\n\nconst createCTAElement = ({\n  ctaText,\n  ctaUrl,\n}: {\n  ctaText: string;\n  ctaUrl: string;\n}) => {\n  const link = createElement('a', ALERT_CONSTANTS.ELEMENTS.CTA, {\n    href: ctaUrl,\n    rel: 'noopener noreferrer',\n    target: '_blank',\n  });\n  link.innerHTML = ctaText;\n\n  return actions.options({\n    element: link,\n    isTypeSecondary: true,\n  });\n};\n\nconst createAlertContent = (\n  alert: AlertData,\n  container: HTMLElement,\n): HTMLElement => {\n  const { ELEMENTS } = ALERT_CONSTANTS;\n  const wrapper = createElement('div', ELEMENTS.WRAPPER);\n  const lock = createElement('div', ELEMENTS.LOCK);\n  const headlineText = alert.headline || alert.title;\n\n  // Create elements\n  const title = createElement('p', ELEMENTS.TITLE);\n  title.innerHTML = headlineText;\n\n  const closeButton = createCloseButton(container);\n\n  wrapper.append(closeButton, title);\n\n  if (alert.text) {\n    const message = createElement('div', ELEMENTS.TEXT);\n    message.innerHTML = alert.text;\n    wrapper.append(closeButton, title, message);\n  }\n\n  // Add CTA if exists\n  if (alert.ctaUrl) {\n    const cta = createCTAElement({\n      ctaText: alert.ctaText || headlineText,\n      ctaUrl: alert.ctaUrl,\n    });\n\n    wrapper.appendChild(cta.element);\n  }\n\n  lock.appendChild(wrapper);\n  return lock;\n};\n\nconst createAlertComponent = (alert: AlertData): HTMLElement => {\n  const { ELEMENTS, ATTRIBUTES } = ALERT_CONSTANTS;\n\n  const declaration = createElement('div', ELEMENTS.DECLARATION);\n  const container = createElement('div', ELEMENTS.CONTAINER, {\n    id: ELEMENTS.ALERT_ID,\n    [ATTRIBUTES.TYPE]: alert.type,\n  });\n\n  const content = createAlertContent(alert, container);\n  container.appendChild(content);\n  declaration.appendChild(container);\n\n  return declaration;\n};\n\nconst fetchAlerts = async ({\n  alertUrl,\n}: AlertProps): Promise<AlertResponse | null> => {\n  try {\n    const url = alertUrl || ALERT_CONSTANTS.URLS.DEFAULT;\n\n    return await FetchGraphQL({\n      query: QUERY,\n      url,\n      token: 'VIDnMeNYHTrLvWPtPpK5MNpjuv5WmmhU',\n    });\n  } catch (error) {\n    console.error('Failed to fetch alerts:', error);\n    return null;\n  }\n};\n\nexport const createNavAlert = async ({ alertUrl }: AlertProps) => {\n  const alertCache = checkAlertCache();\n\n  // Show cached alert if valid\n  if (\n    !alertCache.shouldCheck &&\n    alertCache.cachedData &&\n    !alertCache.cachedData.hidden\n  ) {\n    return { element: createAlertComponent(alertCache.cachedData) };\n  }\n\n  // Fetch new alerts\n  const response = await fetchAlerts({ alertUrl });\n  if (!response?.data?.entries[0]) {\n    clearAlertStorage();\n    return null;\n  }\n\n  const alert = response.data?.entries[0];\n  const cachedAlert = getStoredValue<AlertData>(\n    ALERT_CONSTANTS.STORAGE_KEYS.ALERT,\n  );\n\n  // Handle alert updates\n  if (cachedAlert?.id === alert.id) {\n    if (!cachedAlert.hidden && alertCache.shouldCheck) {\n      return { element: createAlertComponent(cachedAlert) };\n    }\n  } else {\n    clearAlertStorage();\n    updateAlertCache(alert);\n    return { element: createAlertComponent(alert) };\n  }\n\n  return null;\n};\n"],"names":["Utility.network","token","Utility.theme.convertJSSObjectToStyles","typography","element","layout","ELEMENTS","ANIMATION","Utility.asset.icon.X","actions.options","ATTRIBUTES"],"mappings":";;;;;;;;;;;;;;;;AAyCA,MAAM,EAAE,aAAA,IAAiBA;AAEzB,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBd,MAAM,eAAe;AACd,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,SAAS;AAAA,EAAA;AAAA,EAEX,cAAc;AAAA,IACZ,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,UAAU;AAAA,IACV,aAAa;AAAA,IACb,WAAW;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL,cAAc;AAAA,EAAA;AAAA,EAEhB,YAAY;AAAA,IACV,MAAM;AAAA,EAAA;AAAA,EAER,OAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAAA,EAER,WAAW;AAAA,IACT,OAAO;AAAA,EAAA;AAAA,EAET,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAAA,EAET,OAAO;AAAA,IACL,UAAU,KAAK;AAAA;AAAA,EAAA;AAEnB;AAEA,MAAM,EAAE,YAAY,WAAW,aAAa,UAAU,UAAU;AAChE,MAAM,kBAAkB,IAAI,WAAW,IAAI,IAAI,MAAM,OAAO;AAC5D,MAAM,iBAAiB,IAAI,WAAW,IAAI,IAAI,MAAM,MAAM;AAE1D,MAAM,cAAc,IAAI,SAAS,WAAW;AAC5C,MAAM,YAAY,IAAI,SAAS,SAAS;AACxC,MAAM,UAAU,IAAI,SAAS,OAAO;AACpC,MAAM,OAAO,IAAI,SAAS,IAAI;AAC9B,MAAM,cAAc,IAAI,SAAS,KAAK;AACtC,MAAM,aAAa,IAAI,SAAS,IAAI;AACpC,MAAM,eAAe,IAAI,SAAS,YAAY;AAC9C,MAAM,MAAM,IAAI,SAAS,GAAG;AAE5B,MAAM,mCAAmC,GAAG,SAAS,GAAG,eAAe;AACvE,MAAM,kCAAkC,GAAG,SAAS,GAAG,cAAc;AAGrE,MAAM,uBAAuB;AAAA,IACzB,gCAAgC;AAAA,wBACZC,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAGrC,gCAAgC;AAAA,aACvBA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG1B,gCAAgC;AAAA,IAChC,gCAAgC;AAAA,aACvBA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG1B,gCAAgC,IAAI,WAAW;AAAA,aACtCA,OAAAA,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA,KAGxB,gCAAgC,IAAI,YAAY;AAAA,YACzCA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAK7B,MAAM,sBAAsB;AAAA,IACxB,+BAA+B;AAAA,wBACXA,OAAAA,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA,IAGpC,+BAA+B;AAAA,aACtBA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,KAGzB,+BAA+B,KAAK,YAAY;AAAA,YACzCA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAK7B,MAAM,oBAAoB;AAAA,IACtB,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAMW,YAAY,SAAS,CAAC;AAAA,MAC3C,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMd,YAAY;AAAA,YACJA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAO7B,MAAM,aAAa;AAAA,IACfC,+BAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,GAAG,WAAW,EAAE,GAAGC,OAAAA,WAAW,KAAK;AAAA,EAAA;AAExC,CAAC,CAAC;AAAA;AAAA,IAEA,WAAW;AAAA;AAAA;AAAA;AAAA,IAIX,WAAW;AAAA,kBACGF,OAAAA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG9BC,+BAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,GAAG,UAAU,EAAE,GAAGE,OAAAA,QAAQ,KAAK,KAAK;AAAA,EAAA;AAEzC,CAAC,CAAC;AAAA;AAAA,IAEA,UAAU;AAAA,IACV,UAAU;AAAA;AAAA;AAAA;AAAA,IAIV,UAAU;AAAA,kBACIH,OAAAA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG9B,GAAG;AAAA;AAAA;AAAA;AAMP,MAAM,gBAAgB;AAAA,IAClB,OAAO;AAAA;AAAA,mBAEQA,OAAAA,MAAM,QAAQ,EAAE;AAAA,sBACbA,OAAAA,MAAM,QAAQ,EAAE;AAAA,qBACjBA,OAAAA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,2BAGV,YAAY,MAAM;AAAA,MACvC,OAAO;AAAA,qBACQA,OAAAA,MAAM,QAAQ,EAAE;AAAA,wBACbA,OAAAA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMxC,MAAM,aAAa;AAAA,IACfC,+BAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,GAAG,IAAI,EAAE,GAAGG,OAAAA,OAAO,MAAM,WAAW;AAAA,EAAA;AAEzC,CAAC,CAAC;AAAA;AAIJ,MAAM,kBAAkB;AAAA,IACpB,SAAS;AAAA,iBACI,YAAY;AAAA,wBACLJ,aAAM,MAAM,KAAK,OAAO;AAAA,6BACnBA,OAAAA,MAAM,MAAM,GAAG;AAAA,yBACnB,UAAU,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKb,YAAY,KAAK;AAAA,MACtC,SAAS;AAAA,+BACgBA,OAAAA,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAMvC,MAAM,mBAAmB;AAAA,IAC5B,WAAW;AAAA,iBACE,YAAY;AAAA;AAAA;AAAA,IAGzB,eAAe;AAAA,IACf,UAAU;AAAA,IACV,aAAa;AAAA,IACb,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,IACpB,mBAAmB;AAAA;AAIvB,MAAM,kBAAkB,CAAC,WAAmB,UAAuB;AACjE,UAAQ,MAAM,kCAAkC,SAAS,YAAY,KAAK;AAC5E;AAEA,MAAM,iBAAiB,CAAI,QAA0B;AACnD,MAAI;AACF,UAAM,QAAQ,OAAO,aAAa,QAAQ,GAAG;AAC7C,WAAO,QAAQ,KAAK,MAAM,KAAK,IAAI;AAAA,EACrC,SAAS,OAAO;AACd,oBAAgB,WAAW,GAAG,IAAI,KAAc;AAChD,WAAO;AAAA,EACT;AACF;AAEA,MAAM,iBAAiB,CAAC,KAAa,UAAyB;AAC5D,MAAI;AACF,WAAO,aAAa,QAAQ,KAAK,KAAK,UAAU,KAAK,CAAC;AAAA,EACxD,SAAS,OAAO;AACd,oBAAgB,gBAAgB,KAAc;AAAA,EAChD;AACF;AAEA,MAAM,oBAAoB,MAAY;AACpC,QAAM,EAAE,iBAAiB;AACzB,SAAO,aAAa,WAAW,aAAa,UAAU;AACtD,SAAO,aAAa,WAAW,aAAa,KAAK;AACnD;AAEA,MAAM,kBAAkB,MAAwB;AAC9C,QAAM,eAAc,oBAAI,KAAA,GAAO,QAAA;AAC/B,QAAM,EAAE,cAAc,MAAA,IAAU;AAEhC,MAAI;AACF,UAAM,eAAe,eAAuB,aAAa,UAAU;AACnE,UAAM,iBAAiB,eAA0B,aAAa,KAAK;AAEnE,QAAI,CAAC,cAAc;AACjB,qBAAe,aAAa,YAAY,YAAY,SAAA,CAAU;AAC9D,aAAO,EAAE,aAAa,MAAM,YAAY,KAAA;AAAA,IAC1C;AAEA,UAAM,YAAY,SAAS,cAAc,EAAE;AAC3C,UAAM,cAAc,cAAc;AAElC,QAAI,cAAc,MAAM,YAAY,gBAAgB;AAClD,aAAO,EAAE,aAAa,OAAO,YAAY,eAAA;AAAA,IAC3C;AAEA,mBAAe,aAAa,YAAY,YAAY,SAAA,CAAU;AAC9D,WAAO,EAAE,aAAa,MAAM,YAAY,KAAA;AAAA,EAC1C,SAAS,OAAO;AACd,YAAQ,MAAM,uBAAuB,KAAK;AAC1C,WAAO,EAAE,aAAa,MAAM,YAAY,KAAA;AAAA,EAC1C;AACF;AAEA,MAAM,mBAAmB,CAAC,UAA2B;AACnD,iBAAe,gBAAgB,aAAa,OAAO,KAAK;AAC1D;AAEA,MAAM,gBAAgB,CACpB,KACA,WACA,eACgB;AAChB,QAAMG,WAAU,SAAS,cAAc,GAAG;AAC1C,MAAI,UAAWA,UAAQ,UAAU,IAAI,SAAS;AAC9C,MAAI,YAAY;AACd,WAAO,QAAQ,UAAU,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACnDA,eAAQ,aAAa,KAAK,KAAK;AAAA,IACjC,CAAC;AAAA,EACH;AACA,SAAOA;AACT;AAEA,MAAM,oBAAoB,CAAC,cAA8C;AACvE,QAAM,EAAE,UAAAE,WAAU,WAAAC,eAAc;AAChC,QAAM,SAAS,cAAc,UAAUD,UAAS,cAAc;AAAA,IAC5D,cAAc;AAAA,EAAA,CACf;AAED,SAAO,YAAYE,MAAAA;AACnB,SAAO,iBAAiB,SAAS,MAAM;AACrC,UAAM,cAAc;AAAA,MAClB,gBAAgB,aAAa;AAAA,IAAA;AAE/B,QAAI,aAAa;AAEf,gBAAU,MAAM,SAAS,GAAG,UAAU,YAAY;AAClD,gBAAU,MAAM,aAAa,UAAUD,WAAU,KAAK;AAEtD,uBAAiB,EAAE,GAAG,aAAa,QAAQ,MAAM;AAEjD,iBAAW,MAAM;AACf,kBAAU,MAAM,SAAS;AAAA,MAC3B,GAAG,GAAG;AAEN,iBAAW,MAAM;AACf,kBAAU,OAAA;AAAA,MACZ,GAAGA,WAAU,QAAQ,GAAG;AAAA,IAC1B;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEA,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,OAAO,cAAc,KAAK,gBAAgB,SAAS,KAAK;AAAA,IAC5D,MAAM;AAAA,IACN,KAAK;AAAA,IACL,QAAQ;AAAA,EAAA,CACT;AACD,OAAK,YAAY;AAEjB,SAAOE,aAAgB;AAAA,IACrB,SAAS;AAAA,IACT,iBAAiB;AAAA,EAAA,CAClB;AACH;AAEA,MAAM,qBAAqB,CACzB,OACA,cACgB;AAChB,QAAM,EAAE,UAAAH,UAAAA,IAAa;AACrB,QAAM,UAAU,cAAc,OAAOA,UAAS,OAAO;AACrD,QAAM,OAAO,cAAc,OAAOA,UAAS,IAAI;AAC/C,QAAM,eAAe,MAAM,YAAY,MAAM;AAG7C,QAAM,QAAQ,cAAc,KAAKA,UAAS,KAAK;AAC/C,QAAM,YAAY;AAElB,QAAM,cAAc,kBAAkB,SAAS;AAE/C,UAAQ,OAAO,aAAa,KAAK;AAEjC,MAAI,MAAM,MAAM;AACd,UAAM,UAAU,cAAc,OAAOA,UAAS,IAAI;AAClD,YAAQ,YAAY,MAAM;AAC1B,YAAQ,OAAO,aAAa,OAAO,OAAO;AAAA,EAC5C;AAGA,MAAI,MAAM,QAAQ;AAChB,UAAM,MAAM,iBAAiB;AAAA,MAC3B,SAAS,MAAM,WAAW;AAAA,MAC1B,QAAQ,MAAM;AAAA,IAAA,CACf;AAED,YAAQ,YAAY,IAAI,OAAO;AAAA,EACjC;AAEA,OAAK,YAAY,OAAO;AACxB,SAAO;AACT;AAEA,MAAM,uBAAuB,CAAC,UAAkC;AAC9D,QAAM,EAAE,UAAAA,WAAU,YAAAI,gBAAe;AAEjC,QAAM,cAAc,cAAc,OAAOJ,UAAS,WAAW;AAC7D,QAAM,YAAY,cAAc,OAAOA,UAAS,WAAW;AAAA,IACzD,IAAIA,UAAS;AAAA,IACb,CAACI,YAAW,IAAI,GAAG,MAAM;AAAA,EAAA,CAC1B;AAED,QAAM,UAAU,mBAAmB,OAAO,SAAS;AACnD,YAAU,YAAY,OAAO;AAC7B,cAAY,YAAY,SAAS;AAEjC,SAAO;AACT;AAEA,MAAM,cAAc,OAAO;AAAA,EACzB;AACF,MAAiD;AAC/C,MAAI;AACF,UAAM,MAAM,YAAY,gBAAgB,KAAK;AAE7C,WAAO,MAAM,aAAa;AAAA,MACxB,OAAO;AAAA,MACP;AAAA,MACA,OAAO;AAAA,IAAA,CACR;AAAA,EACH,SAAS,OAAO;AACd,YAAQ,MAAM,2BAA2B,KAAK;AAC9C,WAAO;AAAA,EACT;AACF;AAEO,MAAM,iBAAiB,OAAO,EAAE,eAA2B;AAChE,QAAM,aAAa,gBAAA;AAGnB,MACE,CAAC,WAAW,eACZ,WAAW,cACX,CAAC,WAAW,WAAW,QACvB;AACA,WAAO,EAAE,SAAS,qBAAqB,WAAW,UAAU,EAAA;AAAA,EAC9D;AAGA,QAAM,WAAW,MAAM,YAAY,EAAE,UAAU;AAC/C,MAAI,CAAC,UAAU,MAAM,QAAQ,CAAC,GAAG;AAC/B,sBAAA;AACA,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,SAAS,MAAM,QAAQ,CAAC;AACtC,QAAM,cAAc;AAAA,IAClB,gBAAgB,aAAa;AAAA,EAAA;AAI/B,MAAI,aAAa,OAAO,MAAM,IAAI;AAChC,QAAI,CAAC,YAAY,UAAU,WAAW,aAAa;AACjD,aAAO,EAAE,SAAS,qBAAqB,WAAW,EAAA;AAAA,IACpD;AAAA,EACF,OAAO;AACL,sBAAA;AACA,qBAAiB,KAAK;AACtB,WAAO,EAAE,SAAS,qBAAqB,KAAK,EAAA;AAAA,EAC9C;AAEA,SAAO;AACT;;;;"}
+{"version":3,"file":"alert.js","sources":["../../../../source/composite/navigation/utility/alert.ts"],"sourcesContent":["import {\n  element,\n  layout,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { actions } from 'atomic';\nimport * as Utility from 'utilities';\n\ntype AlertData = {\n  id: string;\n  type: string;\n  title: string;\n  headline?: string;\n  text: string;\n  ctaUrl: string;\n  ctaText?: string;\n  hidden?: boolean;\n};\n\ntype AlertResponse = {\n  data: {\n    entries: AlertData[];\n  };\n};\n\ntype AlertProps = {\n  alertUrl?: string | null;\n};\n\nexport type TypeAlertProps = {\n  alertUrl?: string | null;\n};\n\ntype ElementAttributes = Record<string, string>;\n\ntype CacheCheckResult = {\n  shouldCheck: boolean;\n  cachedData: AlertData | null;\n};\n\nconst { FetchGraphQL } = Utility.network;\n\nconst QUERY = `\n  query CampusAlertsQuery {\n    entries: entries(\n      limit: 1\n      type: \"mainElementsCampusAlert\"\n    ) {\n        id: uid\n        type: optionsType\n        headline\n        title\n        text\n        ctaUrl: cta\n        ctaText\n    }\n  }\n`;\n\nconst ELEMENT_NAME = 'umd-element-nav-alert';\nexport const ALERT_CONSTANTS = {\n  URLS: {\n    DEFAULT: 'https://umd.edu/api/v2',\n  },\n  STORAGE_KEYS: {\n    ALERT_TIME: 'umd-utility-alert-time',\n    ALERT: 'umd-utility-alert',\n    ALERT_ID: 'umd-utility-alert-id',\n  },\n  ELEMENTS: {\n    ALERT_ID: 'umd-global-alert',\n    DECLARATION: 'umd-element-nav-alert-declaration',\n    CONTAINER: 'umd-element-nav-alert-container',\n    LOCK: 'umd-element-nav-alert-lock',\n    WRAPPER: 'umd-element-nav-alert-wrapper',\n    TITLE: 'umd-element-nav-alert-title',\n    TEXT: 'umd-element-nav-alert-text',\n    CTA: 'umd-element-nav-alert-cta',\n    CLOSE_BUTTON: 'umd-element-nav-alert-close',\n  },\n  ATTRIBUTES: {\n    TYPE: 'type',\n  },\n  TYPES: {\n    GENERAL: 'general',\n    CLOSED: 'closed',\n    OPEN: 'open',\n  },\n  ANIMATION: {\n    SPEED: 800,\n  },\n  BREAKPOINTS: {\n    MEDIUM: 768,\n    LARGE: 1024,\n  },\n  CACHE: {\n    DURATION: 60 * 1000, // One minute in milliseconds\n  },\n} as const;\n\nconst { ATTRIBUTES, ANIMATION, BREAKPOINTS, ELEMENTS, TYPES } = ALERT_CONSTANTS;\nconst IS_TYPE_GENERAL = `[${ATTRIBUTES.TYPE}=${TYPES.GENERAL}]`;\nconst IS_TYPE_CLOSED = `[${ATTRIBUTES.TYPE}=${TYPES.CLOSED}]`;\n\nconst DECLARATION = `.${ELEMENTS.DECLARATION}`;\nconst CONTAINER = `.${ELEMENTS.CONTAINER}`;\nconst WRAPPER = `.${ELEMENTS.WRAPPER}`;\nconst LOCK = `.${ELEMENTS.LOCK}`;\nconst ALERT_TITLE = `.${ELEMENTS.TITLE}`;\nconst ALERT_TEXT = `.${ELEMENTS.TEXT}`;\nconst CLOSE_BUTTON = `.${ELEMENTS.CLOSE_BUTTON}`;\nconst CTA = `.${ELEMENTS.CTA}`;\n\nconst OVERWRITE_CONTAINER_TYPE_GENERAL = `${CONTAINER}${IS_TYPE_GENERAL}`;\nconst OVERWRITE_CONTAINER_TYPE_CLOSED = `${CONTAINER}${IS_TYPE_CLOSED}`;\n\n// prettier-ignore\nconst OverwriteTypeGeneral = `\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} a:hover,\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} a:focus {\n    color: ${token.color.white} !important;\n  }\n\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} ${ALERT_TITLE} {\n    color: ${token.color.gold};\n  }\n\n   ${OVERWRITE_CONTAINER_TYPE_GENERAL} ${CLOSE_BUTTON} > svg {\n    fill: ${token.color.white};\n  }\n`\n\n// prettier-ignore\nconst OverwriteTypeClosed = `\n  ${OVERWRITE_CONTAINER_TYPE_CLOSED} {\n    background-color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_CONTAINER_TYPE_CLOSED} * {\n    color: ${token.color.black};\n  }\n\n   ${OVERWRITE_CONTAINER_TYPE_CLOSED} .${CLOSE_BUTTON} > svg {\n    fill: ${token.color.black};\n  }\n`\n\n// prettier-ignore\nconst CloseButtonStyles = `\n  ${CLOSE_BUTTON} {\n    position: absolute;\n    top: 30px;\n    right: 10px;\n  }\n  \n  @container (max-width: ${BREAKPOINTS.MEDIUM - 1}px) {\n    ${CLOSE_BUTTON} {\n      top: 25px;\n      right: 5px;\n    }\n  }\n\n  ${CLOSE_BUTTON} > svg {\n    fill: ${token.color.black};\n    width: 24px;\n    height: 24px;\n  }\n`\n\n// prettier-ignore\nconst TextStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`${ALERT_TITLE}`]: typography.sans.large,\n    },\n  })}\n\n  ${ALERT_TITLE} {\n    text-transform: uppercase;\n  }\n\n  ${ALERT_TITLE} + * {\n    margin-top: ${token.spacing.sm};\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`${ALERT_TEXT}`]: element.text.rich.advanced,\n    },\n  })}\n\n  ${ALERT_TEXT},\n  ${ALERT_TEXT} * {\n    font-size: 16px;;\n  }\n\n  ${ALERT_TEXT} + * {\n    margin-top: ${token.spacing.lg};\n  }\n\n  ${CTA} {\n    text-decoration: none;\n  }\n`\n\n// prettier-ignore\nconst WrapperStyles = `\n  ${WRAPPER} {\n    position: relative;\n    padding-top: ${token.spacing.md};\n    padding-bottom: ${token.spacing.md};\n    padding-right: ${token.spacing.lg};\n  }\n\n  @container (min-width: ${BREAKPOINTS.MEDIUM}px) {\n    ${WRAPPER} {\n      padding-top: ${token.spacing.lg};\n      padding-bottom: ${token.spacing.lg};\n    }\n  }\n`\n\n// prettier-ignore\nconst LockStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`${LOCK}`]: layout.space.horizontal.full,\n    },\n  })}\n`\n\n// prettier-ignore\nconst ContainerStyles = `\n  ${CONTAINER} {\n    container: ${ELEMENT_NAME} / inline-size;\n    background-color: ${token.color.gray.lighter};\n    border-left: 4px solid ${token.color.red};\n    transition: height ${ANIMATION.SPEED}ms;\n    overflow: hidden;\n    position: relative;\n  }\n\n  @container (min-width: ${BREAKPOINTS.LARGE}px) {\n    ${CONTAINER} {\n      border-left: 8px solid ${token.color.red};\n    }\n  }\n`\n\n// prettier-ignore\nexport const STYLES_NAV_ALERT = `\n  ${DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${ContainerStyles}\n  ${LockStyles}\n  ${WrapperStyles}\n  ${TextStyles}\n  ${CloseButtonStyles}\n  ${OverwriteTypeGeneral}\n  ${OverwriteTypeClosed}\n`;\n\n// storage.ts\nconst logStorageError = (operation: string, error: Error): void => {\n  console.error(`UMD Component - Alert Storage: ${operation} failed:`, error);\n};\n\nconst getStoredValue = <T>(key: string): T | null => {\n  try {\n    const value = window.localStorage.getItem(key);\n    return value ? JSON.parse(value) : null;\n  } catch (error) {\n    logStorageError(`Reading ${key}`, error as Error);\n    return null;\n  }\n};\n\nconst setStoredValue = (key: string, value: unknown): void => {\n  try {\n    window.localStorage.setItem(key, JSON.stringify(value));\n  } catch (error) {\n    logStorageError('Saving value', error as Error);\n  }\n};\n\nconst clearAlertStorage = (): void => {\n  const { STORAGE_KEYS } = ALERT_CONSTANTS;\n  window.localStorage.removeItem(STORAGE_KEYS.ALERT_TIME);\n  window.localStorage.removeItem(STORAGE_KEYS.ALERT);\n};\n\nconst checkAlertCache = (): CacheCheckResult => {\n  const currentTime = new Date().getTime();\n  const { STORAGE_KEYS, CACHE } = ALERT_CONSTANTS;\n\n  try {\n    const alertTimeStr = getStoredValue<string>(STORAGE_KEYS.ALERT_TIME);\n    const cachedResponse = getStoredValue<AlertData>(STORAGE_KEYS.ALERT);\n\n    if (!alertTimeStr) {\n      setStoredValue(STORAGE_KEYS.ALERT_TIME, currentTime.toString());\n      return { shouldCheck: true, cachedData: null };\n    }\n\n    const alertTime = parseInt(alertTimeStr, 10);\n    const timeElapsed = currentTime - alertTime;\n\n    if (timeElapsed < CACHE.DURATION && cachedResponse) {\n      return { shouldCheck: false, cachedData: cachedResponse };\n    }\n\n    setStoredValue(STORAGE_KEYS.ALERT_TIME, currentTime.toString());\n    return { shouldCheck: true, cachedData: null };\n  } catch (error) {\n    console.error('Cache check failed:', error);\n    return { shouldCheck: true, cachedData: null };\n  }\n};\n\nconst updateAlertCache = (alert: AlertData): void => {\n  setStoredValue(ALERT_CONSTANTS.STORAGE_KEYS.ALERT, alert);\n};\n\nconst createElement = (\n  tag: string,\n  className?: string,\n  attributes?: ElementAttributes,\n): HTMLElement => {\n  const element = document.createElement(tag);\n  if (className) element.classList.add(className);\n  if (attributes) {\n    Object.entries(attributes).forEach(([key, value]) => {\n      element.setAttribute(key, value);\n    });\n  }\n  return element;\n};\n\nconst createCloseButton = (container: HTMLElement): HTMLButtonElement => {\n  const { ELEMENTS, ANIMATION } = ALERT_CONSTANTS;\n  const button = createElement('button', ELEMENTS.CLOSE_BUTTON, {\n    'aria-label': 'remove alert',\n  }) as HTMLButtonElement;\n\n  button.innerHTML = Utility.asset.icon.X;\n  button.addEventListener('click', () => {\n    const cachedAlert = getStoredValue<AlertData>(\n      ALERT_CONSTANTS.STORAGE_KEYS.ALERT,\n    );\n    if (cachedAlert) {\n      // Animate close\n      container.style.height = `${container.offsetHeight}px`;\n      container.style.transition = `height ${ANIMATION.SPEED}ms`;\n\n      updateAlertCache({ ...cachedAlert, hidden: true });\n\n      setTimeout(() => {\n        container.style.height = '0px';\n      }, 100);\n\n      setTimeout(() => {\n        container.remove();\n      }, ANIMATION.SPEED + 100);\n    }\n  });\n\n  return button;\n};\n\nconst createCTAElement = ({\n  ctaText,\n  ctaUrl,\n}: {\n  ctaText: string;\n  ctaUrl: string;\n}) => {\n  const link = createElement('a', ALERT_CONSTANTS.ELEMENTS.CTA, {\n    href: ctaUrl,\n    rel: 'noopener noreferrer',\n    target: '_blank',\n  });\n  link.innerHTML = ctaText;\n\n  return actions.options({\n    element: link,\n    isTypeSecondary: true,\n  });\n};\n\nconst createAlertContent = (\n  alert: AlertData,\n  container: HTMLElement,\n): HTMLElement => {\n  const { ELEMENTS } = ALERT_CONSTANTS;\n  const wrapper = createElement('div', ELEMENTS.WRAPPER);\n  const lock = createElement('div', ELEMENTS.LOCK);\n  const headlineText = alert.headline || alert.title;\n\n  // Create elements\n  const title = createElement('p', ELEMENTS.TITLE);\n  title.innerHTML = headlineText;\n\n  const closeButton = createCloseButton(container);\n\n  wrapper.append(closeButton, title);\n\n  if (alert.text) {\n    const message = createElement('div', ELEMENTS.TEXT);\n    message.innerHTML = alert.text;\n    wrapper.append(closeButton, title, message);\n  }\n\n  // Add CTA if exists\n  if (alert.ctaUrl) {\n    const cta = createCTAElement({\n      ctaText: alert.ctaText || headlineText,\n      ctaUrl: alert.ctaUrl,\n    });\n\n    wrapper.appendChild(cta.element);\n  }\n\n  lock.appendChild(wrapper);\n  return lock;\n};\n\nconst createAlertComponent = (alert: AlertData): HTMLElement => {\n  const { ELEMENTS, ATTRIBUTES } = ALERT_CONSTANTS;\n\n  const declaration = createElement('div', ELEMENTS.DECLARATION);\n  const container = createElement('div', ELEMENTS.CONTAINER, {\n    id: ELEMENTS.ALERT_ID,\n    [ATTRIBUTES.TYPE]: alert.type,\n  });\n\n  const content = createAlertContent(alert, container);\n  container.appendChild(content);\n  declaration.appendChild(container);\n\n  return declaration;\n};\n\nconst fetchAlerts = async ({\n  alertUrl,\n}: AlertProps): Promise<AlertResponse | null> => {\n  try {\n    const url = alertUrl || ALERT_CONSTANTS.URLS.DEFAULT;\n\n    return await FetchGraphQL({\n      query: QUERY,\n      url,\n      token: 'VIDnMeNYHTrLvWPtPpK5MNpjuv5WmmhU',\n    });\n  } catch (error) {\n    console.error('Failed to fetch alerts:', error);\n    return null;\n  }\n};\n\nexport const createNavAlert = async ({ alertUrl }: AlertProps) => {\n  const alertCache = checkAlertCache();\n\n  // Show cached alert if valid\n  if (\n    !alertCache.shouldCheck &&\n    alertCache.cachedData &&\n    !alertCache.cachedData.hidden\n  ) {\n    return { element: createAlertComponent(alertCache.cachedData) };\n  }\n\n  // Fetch new alerts\n  const response = await fetchAlerts({ alertUrl });\n  if (!response?.data?.entries[0]) {\n    clearAlertStorage();\n    return null;\n  }\n\n  const alert = response.data?.entries[0];\n  const cachedAlert = getStoredValue<AlertData>(\n    ALERT_CONSTANTS.STORAGE_KEYS.ALERT,\n  );\n\n  // Handle alert updates\n  if (cachedAlert?.id === alert.id) {\n    if (!cachedAlert.hidden && alertCache.shouldCheck) {\n      return { element: createAlertComponent(cachedAlert) };\n    }\n  } else {\n    clearAlertStorage();\n    updateAlertCache(alert);\n    return { element: createAlertComponent(alert) };\n  }\n\n  return null;\n};\n"],"names":["Utility.network","token","Utility.theme.convertJSSObjectToStyles","typography","element","layout","ELEMENTS","ANIMATION","Utility.asset.icon.X","actions.options","ATTRIBUTES"],"mappings":"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"}

package/dist/composite/navigation/utility/alert.mjs

@@ -7,6 +7,7 @@ import * as index from "../../../utilities/network/index.mjs";
 import { convertJSSObjectToStyles } from "../../../utilities/theme/index.mjs";
 import "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import "../../../atomic/animations/brand/card-stack.mjs";
 import "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";
 import "../../../atomic/layout/person/columns.mjs";