@universityofmaryland/web-elements-library 1.5.9 → 1.6.0-beta.1

package/dist/composite/hero/custom/expand.mjs

@@ -1,346 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import * as Styles from "@universityofmaryland/web-styles-library";
-import { withViewTimelineAnimation } from "@universityofmaryland/web-utilities-library/styles";
-import "@universityofmaryland/web-styles-library/element";
-import "@universityofmaryland/web-styles-library/layout";
-import "@universityofmaryland/web-styles-library/animation";
-import "@universityofmaryland/web-styles-library/typography";
-import "@universityofmaryland/web-utilities-library/media";
-import "@universityofmaryland/web-utilities-library/dom";
-import "@universityofmaryland/web-icons-library/controls";
-import "@universityofmaryland/web-icons-library/communication";
-import "@universityofmaryland/web-icons-library/files";
-import "@universityofmaryland/web-icons-library/brand";
-import "@universityofmaryland/web-icons-library/arrows";
-import "../../../atomic/animations/actions/indicator.mjs";
-import "../../../atomic/animations/brand/chevron-scroll.mjs";
-import "../../../atomic/animations/brand/card-stack.mjs";
-import imageContainer from "../../../atomic/assets/image/background.mjs";
-import "@universityofmaryland/web-utilities-library/performance";
-import toggle from "../../../atomic/assets/video/toggle.mjs";
-import "@universityofmaryland/web-utilities-library/accessibility";
-import "@universityofmaryland/web-icons-library/location";
-import "@universityofmaryland/web-icons-library/calendar";
-import "@universityofmaryland/web-utilities-library/theme";
-import "../../../atomic/layout/block/stacked.mjs";
-import "../../../atomic/layout/overlay/modal.mjs";
-import "../../../atomic/layout/person/columns.mjs";
-import "@universityofmaryland/web-icons-library/social";
-import "../../../atomic/text-lockup/date.mjs";
-import "../../../atomic/text-lockup/small.mjs";
-const ANIMATION_CONFIG = {
-  IMAGE_OVERLAY: {
-    NAME: "img-overlay",
-    RANGE: {
-      START: "70vh",
-      END: "100vh"
-    }
-  },
-  IMAGE_SIZE: {
-    NAME: "img-size",
-    INITIAL_HEIGHT: "50vh",
-    FINAL_HEIGHT: "100vh",
-    RANGE: {
-      START: "40vh",
-      END: "100vh",
-      END_TABLET: "200vh"
-    }
-  },
-  COMPONENT_SIZE: {
-    NAME: "component-size",
-    NAME_TABLET: "component-size-tablet",
-    INITIAL_WIDTH: "10%",
-    INITIAL_WIDTH_TABLET: "60%",
-    FINAL_WIDTH: "100vw",
-    RANGE: {
-      START: "40vh",
-      END: "100vh",
-      START_TABLET: "60vh",
-      END_TABLET: "200vh"
-    }
-  }
-};
-const keyFrameImgOverlay = `
-  @keyframes ${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-`;
-const keyFrameImgSize = `
-  @keyframes ${ANIMATION_CONFIG.IMAGE_SIZE.NAME} {
-    from { height: ${ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT}; }
-    to { height: ${ANIMATION_CONFIG.IMAGE_SIZE.FINAL_HEIGHT}; }
-  }
-`;
-const keyFrameComponentSize = `
-  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} {
-    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH}; }
-    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }
-  }
-
-  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} {
-    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET}; }
-    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }
-  }
-`;
-const createImageOverlay = () => new ElementBuilder().withClassName("hero-expand-image-overlay").withStyles({
-  element: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    height: "100%",
-    width: "100%",
-    background: "rgba(0,0,0,0.65)",
-    opacity: 1,
-    ...withViewTimelineAnimation({
-      opacity: 0,
-      animation: `${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} forwards`,
-      animationTimeline: "view()",
-      animationRangeStart: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.START,
-      animationRangeEnd: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.END
-    })
-  }
-}).build();
-const createAssetElement = ({
-  image,
-  video
-}) => {
-  if (video) {
-    return toggle({
-      video,
-      additionalElementStyles: {
-        width: "100%",
-        height: "100%",
-        position: "relative",
-        overflow: "hidden",
-        [`& video`]: {
-          height: "100%",
-          width: "100%",
-          objectFit: "cover"
-        }
-      }
-    });
-  }
-  if (image) {
-    return imageContainer({
-      element: image,
-      isScaled: true,
-      isGifAllowed: true,
-      isShowCaption: true
-    });
-  }
-  return null;
-};
-const createImageSize = (props) => {
-  const overlay = createImageOverlay();
-  const asset = createAssetElement(props);
-  const container = new ElementBuilder().withClassName("hero-expand-image-size").withStyles({
-    element: {
-      overflow: "hidden",
-      position: "relative",
-      height: "100%",
-      width: "100%",
-      ...withViewTimelineAnimation({
-        height: ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT,
-        animation: `${ANIMATION_CONFIG.IMAGE_SIZE.NAME} ease-in-out forwards`,
-        animationTimeline: "view()",
-        animationRangeStart: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.START,
-        animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END,
-        [`@container (${token.media.queries.tablet.min})`]: {
-          animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END_TABLET
-        }
-      })
-    }
-  });
-  if (asset) {
-    container.withChild(asset);
-  }
-  container.withChild(overlay);
-  return container.build();
-};
-const createAssetContainer = (props) => new ElementBuilder().withClassName("hero-expand-image-container").withChild(createImageSize(props)).withStyles({
-  element: {
-    position: "absolute",
-    top: 0,
-    left: "50%",
-    transform: "translateX(-50%)",
-    width: "100vw",
-    height: "100%",
-    overflow: "clip",
-    display: "flex",
-    alignItems: "center",
-    ...withViewTimelineAnimation({
-      width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH,
-      position: "absolute",
-      top: 0,
-      left: "50%",
-      transform: "translateX(-50%)",
-      animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} ease-in-out forwards`,
-      animationTimeline: "view()",
-      animationRangeStart: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START,
-      animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END,
-      [`@container (${token.media.queries.tablet.min})`]: {
-        width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET,
-        animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} ease-in-out forwards`,
-        animationTimeline: "view()",
-        animationRangeStart: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START_TABLET,
-        animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END_TABLET
-      }
-    })
-  }
-}).build();
-const createEyebrow = (eyebrow) => {
-  if (!eyebrow) return null;
-  return new ElementBuilder(eyebrow).styled(Styles.element.text.decoration.ribbon).withStyles({
-    siblingAfter: {
-      marginTop: token.spacing.md
-    }
-  }).build();
-};
-const createHeadline = (headline) => {
-  const characterCount = headline?.textContent?.trim().length || 0;
-  const isOverwriteHeadline = characterCount > 30;
-  if (!headline) return null;
-  return new ElementBuilder(headline).styled(Styles.typography.campaign.fonts.maximum).withStyles({
-    element: {
-      color: token.color.white,
-      fontWeight: 800,
-      textTransform: "uppercase",
-      textWrap: "balance",
-      [`@container (${token.media.queries.desktop.min})`]: {
-        ...isOverwriteHeadline && {
-          fontSize: "96px"
-        }
-      }
-    }
-  }).build();
-};
-const createTopTextChildren = ({
-  eyebrow,
-  headline
-}) => {
-  const children = [];
-  const eyebrowElement = createEyebrow(eyebrow);
-  if (eyebrowElement) {
-    children.push(eyebrowElement);
-  }
-  const headlineElement = createHeadline(headline);
-  if (headlineElement) {
-    children.push(headlineElement);
-  }
-  return children;
-};
-const createBottomTextChildren = ({
-  actions,
-  additional
-}) => {
-  const children = [];
-  if (actions) {
-    const actionsContainer = new ElementBuilder().withClassName("hero-expand-text-actions").withChild(actions).withStyles({
-      siblingAfter: {
-        marginTop: token.spacing.lg
-      }
-    }).build();
-    children.push(actionsContainer);
-  }
-  if (additional) {
-    const additionalContainer = new ElementBuilder().withClassName("hero-expand-text-additional").withChild(additional).build();
-    children.push(additionalContainer);
-  }
-  return children;
-};
-const createTextContainer = (props) => {
-  const container = new ElementBuilder().withClassName("hero-expand-text-container").withStyles({
-    element: {
-      position: "relative",
-      height: "100%",
-      zIndex: 9999,
-      textAlign: "center",
-      padding: `${token.spacing.md} 0`,
-      [`@container (${token.media.queries.tablet.min})`]: {
-        padding: `${token.spacing["3xl"]} 0`,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between"
-      },
-      [`@container (${token.media.queries.highDef.min})`]: {
-        padding: `${token.spacing["6xl"]} 0`
-      }
-    }
-  });
-  const topTextChildren = createTopTextChildren(props);
-  if (topTextChildren.length > 0) {
-    const topText = new ElementBuilder().styled(Styles.layout.space.horizontal.normal).withChildren(...topTextChildren).withStyles({
-      siblingAfter: {
-        marginTop: token.spacing.lg
-      }
-    }).build();
-    container.withChild(topText);
-  }
-  const bottomTextChildren = createBottomTextChildren(props);
-  if (bottomTextChildren.length > 0) {
-    const bottomText = new ElementBuilder().styled(Styles.layout.space.horizontal.normal).withChildren(...bottomTextChildren).withStyles({
-      element: {
-        width: "100%"
-      }
-    }).build();
-    container.withChild(bottomText);
-  }
-  return container.build();
-};
-const createSticky = (props) => {
-  const assetContainer = createAssetContainer(props);
-  const textContainer = createTextContainer(props);
-  return new ElementBuilder().withClassName("hero-expand-sticky").withChildren(assetContainer, textContainer).withStyles({
-    element: {
-      position: "relative",
-      [`@container (${token.media.queries.tablet.min})`]: {
-        ...withViewTimelineAnimation({
-          position: "sticky",
-          top: 0,
-          height: "100vh"
-        })
-      },
-      [`@supports (not (animation-timeline: view()))`]: {
-        top: "0 !important"
-      }
-    }
-  }).build();
-};
-const expand = (props) => {
-  const sticky = createSticky(props);
-  const composite = new ElementBuilder().withClassName("umd-hero-expand").withChild(sticky).withStyles({
-    element: {
-      containerType: "inline-size",
-      ...withViewTimelineAnimation({
-        position: "relative",
-        [`@container (${token.media.queries.tablet.min})`]: {
-          height: "200vh"
-        }
-      }),
-      ["& img, & video"]: {
-        display: "block",
-        width: "100%",
-        height: "100%",
-        objectFit: "cover"
-      }
-    }
-  }).build();
-  const setTopPosition = ({ value }) => {
-    sticky.element.style.top = value || "0";
-  };
-  composite.styles += keyFrameImgOverlay;
-  composite.styles += keyFrameImgSize;
-  composite.styles += keyFrameComponentSize;
-  return {
-    ...composite,
-    events: {
-      setTopPosition
-    }
-  };
-};
-export {
-  expand as default
-};
-//# sourceMappingURL=expand.mjs.map

package/dist/composite/hero/custom/expand.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"expand.mjs","sources":["../../../../source/composite/hero/custom/expand.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets } from 'atomic';\nimport { type ElementModel, type ContentElement } from '../../../_types';\nimport { type HeroExpandProps as BaseHeroExpandProps } from '../_types';\n\ninterface HeroExpandProps extends BaseHeroExpandProps {\n  eyebrow?: ContentElement;\n  additional?: HTMLSlotElement | null;\n}\n\nconst ANIMATION_CONFIG = {\n  IMAGE_OVERLAY: {\n    NAME: 'img-overlay',\n    RANGE: {\n      START: '70vh',\n      END: '100vh',\n    },\n  },\n  IMAGE_SIZE: {\n    NAME: 'img-size',\n    INITIAL_HEIGHT: '50vh',\n    FINAL_HEIGHT: '100vh',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      END_TABLET: '200vh',\n    },\n  },\n  COMPONENT_SIZE: {\n    NAME: 'component-size',\n    NAME_TABLET: 'component-size-tablet',\n    INITIAL_WIDTH: '10%',\n    INITIAL_WIDTH_TABLET: '60%',\n    FINAL_WIDTH: '100vw',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      START_TABLET: '60vh',\n      END_TABLET: '200vh',\n    },\n  },\n} as const;\n\nconst keyFrameImgOverlay = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\nconst keyFrameImgSize = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_SIZE.NAME} {\n    from { height: ${ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT}; }\n    to { height: ${ANIMATION_CONFIG.IMAGE_SIZE.FINAL_HEIGHT}; }\n  }\n`;\n\nconst keyFrameComponentSize = `\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n`;\n\nconst createImageOverlay = () =>\n  new ElementBuilder()\n    .withClassName('hero-expand-image-overlay')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        height: '100%',\n        width: '100%',\n        background: 'rgba(0,0,0,0.65)',\n        opacity: 1,\n\n        ...withViewTimelineAnimation({\n          opacity: 0,\n          animation: `${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.END,\n        }),\n      },\n    })\n    .build();\n\nconst createAssetElement = ({\n  image,\n  video,\n}: Pick<\n  HeroExpandProps,\n  'image' | 'video'\n>): ElementModel<HTMLElement> | null => {\n  if (video) {\n    return assets.video.toggle({\n      video,\n      additionalElementStyles: {\n        width: '100%',\n        height: '100%',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    });\n  }\n  if (image) {\n    return assets.image.background({\n      element: image,\n      isScaled: true,\n      isGifAllowed: true,\n      isShowCaption: true,\n    });\n  }\n\n  return null;\n};\n\nconst createImageSize = (props: Pick<HeroExpandProps, 'image' | 'video'>) => {\n  const overlay = createImageOverlay();\n  const asset = createAssetElement(props);\n\n  const container = new ElementBuilder()\n    .withClassName('hero-expand-image-size')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        position: 'relative',\n        height: '100%',\n        width: '100%',\n\n        ...withViewTimelineAnimation({\n          height: ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT,\n          animation: `${ANIMATION_CONFIG.IMAGE_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END,\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    });\n\n  if (asset) {\n    container.withChild(asset);\n  }\n  container.withChild(overlay);\n\n  return container.build();\n};\n\nconst createAssetContainer = (\n  props: Pick<HeroExpandProps, 'image' | 'video'>,\n) =>\n  new ElementBuilder()\n    .withClassName('hero-expand-image-container')\n    .withChild(createImageSize(props))\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: '50%',\n        transform: 'translateX(-50%)',\n        width: '100vw',\n        height: '100%',\n        overflow: 'clip',\n        display: 'flex',\n        alignItems: 'center',\n\n        ...withViewTimelineAnimation({\n          width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH,\n          position: 'absolute',\n          top: 0,\n          left: '50%',\n          transform: 'translateX(-50%)',\n          animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END,\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET,\n            animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} ease-in-out forwards`,\n            animationTimeline: 'view()',\n            animationRangeStart:\n              ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START_TABLET,\n            animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    })\n    .build();\n\nconst createEyebrow = (eyebrow?: HTMLElement | null) => {\n  if (!eyebrow) return null;\n\n  return new ElementBuilder(eyebrow)\n    .styled(Styles.element.text.decoration.ribbon)\n    .withStyles({\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.maximum)\n    .withStyles({\n      element: {\n        color: token.color.white,\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        textWrap: 'balance',\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '96px',\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst createTopTextChildren = ({\n  eyebrow,\n  headline,\n}: Pick<\n  HeroExpandProps,\n  'eyebrow' | 'headline'\n>): ElementModel<HTMLElement>[] => {\n  const children: ElementModel<HTMLElement>[] = [];\n\n  const eyebrowElement = createEyebrow(eyebrow);\n  if (eyebrowElement) {\n    children.push(eyebrowElement);\n  }\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  return children;\n};\n\nconst createBottomTextChildren = ({\n  actions,\n  additional,\n}: Pick<\n  HeroExpandProps,\n  'actions' | 'additional'\n>): ElementModel<HTMLElement>[] => {\n  const children: ElementModel<HTMLElement>[] = [];\n\n  if (actions) {\n    const actionsContainer = new ElementBuilder()\n      .withClassName('hero-expand-text-actions')\n      .withChild(actions)\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      })\n      .build();\n    children.push(actionsContainer);\n  }\n\n  if (additional) {\n    const additionalContainer = new ElementBuilder()\n      .withClassName('hero-expand-text-additional')\n      .withChild(additional)\n      .build();\n    children.push(additionalContainer);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<\n    HeroExpandProps,\n    'eyebrow' | 'headline' | 'actions' | 'additional'\n  >,\n) => {\n  const container = new ElementBuilder()\n    .withClassName('hero-expand-text-container')\n    .withStyles({\n      element: {\n        position: 'relative',\n        height: '100%',\n        zIndex: 9999,\n        textAlign: 'center',\n        padding: `${token.spacing.md} 0`,\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['3xl']} 0`,\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'space-between',\n        },\n\n        [`@container (${token.media.queries.highDef.min})`]: {\n          padding: `${token.spacing['6xl']} 0`,\n        },\n      },\n    });\n\n  const topTextChildren = createTopTextChildren(props);\n  if (topTextChildren.length > 0) {\n    const topText = new ElementBuilder()\n      .styled(Styles.layout.space.horizontal.normal)\n      .withChildren(...topTextChildren)\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      })\n      .build();\n    container.withChild(topText);\n  }\n\n  const bottomTextChildren = createBottomTextChildren(props);\n  if (bottomTextChildren.length > 0) {\n    const bottomText = new ElementBuilder()\n      .styled(Styles.layout.space.horizontal.normal)\n      .withChildren(...bottomTextChildren)\n      .withStyles({\n        element: {\n          width: '100%',\n        },\n      })\n      .build();\n    container.withChild(bottomText);\n  }\n\n  return container.build();\n};\n\nconst createSticky = (props: HeroExpandProps) => {\n  const assetContainer = createAssetContainer(props);\n  const textContainer = createTextContainer(props);\n\n  return new ElementBuilder()\n    .withClassName('hero-expand-sticky')\n    .withChildren(assetContainer, textContainer)\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          ...withViewTimelineAnimation({\n            position: 'sticky',\n            top: 0,\n            height: '100vh',\n          }),\n        },\n\n        [`@supports (not (animation-timeline: view()))`]: {\n          top: '0 !important',\n        },\n      },\n    })\n    .build();\n};\n\nexport default (props: HeroExpandProps) => {\n  const sticky = createSticky(props);\n\n  const composite = new ElementBuilder()\n    .withClassName('umd-hero-expand')\n    .withChild(sticky)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        ...withViewTimelineAnimation({\n          position: 'relative',\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            height: '200vh',\n          },\n        }),\n\n        ['& img, & video']: {\n          display: 'block',\n          width: '100%',\n          height: '100%',\n          objectFit: 'cover',\n        },\n      },\n    })\n    .build();\n\n  const setTopPosition = ({ value }: { value: string | null }) => {\n    sticky.element.style.top = value || '0';\n  };\n\n  composite.styles += keyFrameImgOverlay;\n  composite.styles += keyFrameImgSize;\n  composite.styles += keyFrameComponentSize;\n\n  return {\n    ...composite,\n    events: {\n      setTopPosition,\n    },\n  };\n};\n"],"names":["assets.video.toggle","assets.image.background"],"mappings":"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"}