@universityofmaryland/web-elements-library 1.3.7 → 1.4.0

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

@@ -0,0 +1,387 @@
+import * as Styles from "@universityofmaryland/web-styles-library";
+import "../../../node_modules/postcss/lib/postcss.mjs";
+import "../../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../../node_modules/postcss-js/index.mjs";
+import { withViewTimelineAnimation } from "../../../utilities/theme/media.mjs";
+import { createDiv, create } from "../../../model/elements/index.mjs";
+import "../../../atomic/animations/actions/indicator.mjs";
+import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import imageContainer from "../../../atomic/assets/image/background.mjs";
+import observedAutoPlay from "../../../atomic/assets/video/observed-auto-play.mjs";
+import "../../../atomic/layout/block/stacked.mjs";
+import "../../../atomic/layout/overlay/modal.mjs";
+import "../../../atomic/layout/person/columns.mjs";
+import "../../../atomic/text-lockup/date.mjs";
+import large from "../../../atomic/text-lockup/large.mjs";
+import "../../../atomic/text-lockup/small.mjs";
+import { spaceHorizontalSmallest } from "../../../model/elements/layout.mjs";
+import { campaignExtraLarge } from "../../../model/elements/headline.mjs";
+const ANIMATION_RANGES = {
+  GRID_COLUMNS: { start: "110vh", end: "230vh" },
+  GRID_ROWS: { start: "110vh", end: "230vh" },
+  TINT_FADE: { start: "50vh", end: "140vh" }
+};
+const GRID_LAYOUT = {
+  COLUMNS: {
+    INITIAL: "20% 60% 20%",
+    FINAL: "0 100% 0",
+    DEFAULT: "25% 50% 25%"
+  },
+  ROWS: {
+    INITIAL: "25vh 1fr 25vh",
+    FINAL: "0 1fr 0",
+    TRIPLE: "1fr 1fr 1fr"
+  }
+};
+const keyFrameColumns = `
+  @keyframes grid-columns {
+    from {
+      grid-template-columns: ${GRID_LAYOUT.COLUMNS.INITIAL};
+    }
+    to {
+      grid-template-columns: ${GRID_LAYOUT.COLUMNS.FINAL};
+      grid-gap: 0;
+    }
+  }
+`;
+const keyFrameRows = `
+  @keyframes grid-rows {
+    from {
+      grid-template-rows: ${GRID_LAYOUT.ROWS.INITIAL};
+    }
+    to {
+      grid-template-rows: ${GRID_LAYOUT.ROWS.FINAL};
+      grid-gap: 0;
+    }
+  }
+`;
+const keyFrameTint = `
+  @keyframes tint-fade {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+const columnBase = {
+  display: "grid",
+  gridAutoFlow: "row dense",
+  gridGap: `${Styles.token.spacing.min}`,
+  width: "100%",
+  height: "100vh",
+  [`@media (${Styles.token.media.queries.tablet.min})`]: {
+    gridGap: `${Styles.token.spacing.md}`
+  },
+  [`@media (${Styles.token.media.queries.desktop.min})`]: {
+    gridGap: `${Styles.token.spacing.lg}`
+  },
+  ["& > *"]: {
+    overflow: "hidden",
+    position: "relative"
+  }
+};
+const createImageWrapper = (image) => imageContainer({
+  element: image,
+  isScaled: true,
+  isGifAllowed: true,
+  isShowCaption: true
+});
+const createVideoWrapper = (video) => observedAutoPlay({
+  video,
+  isAutoplay: true,
+  additionalElementStyles: {
+    additionalElementStyles: {
+      width: "100%",
+      aspectRatio: "1 / 1",
+      position: "relative",
+      overflow: "hidden",
+      [`& video`]: {
+        height: "100%",
+        width: "100%",
+        objectFit: "cover"
+      }
+    }
+  }
+});
+const createCorner = ({ images, isCornerLeft }) => {
+  const children = images.map((image) => createImageWrapper(image));
+  return createDiv({
+    className: isCornerLeft ? "hero-grid-corner-left" : "hero-grid-corner-right",
+    children,
+    elementStyles: {
+      element: {
+        ...columnBase,
+        gridTemplateRows: GRID_LAYOUT.ROWS.TRIPLE
+      }
+    },
+    attributes: [
+      {
+        role: "region",
+        "aria-label": `${isCornerLeft ? "Left" : "Right"} decorative image grid`
+      }
+    ]
+  });
+};
+const createCenter = ({ images, video }) => {
+  const children = [
+    create({
+      element: document.createElement("div"),
+      className: "hero-grid-tint",
+      elementStyles: {
+        element: {
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          zIndex: 9,
+          opacity: 0,
+          ...withViewTimelineAnimation({
+            animation: "tint-fade ease-in-out forwards",
+            animationTimeline: "view()",
+            animationRangeStart: ANIMATION_RANGES.TINT_FADE.start,
+            animationRangeEnd: ANIMATION_RANGES.TINT_FADE.end
+          })
+        }
+      },
+      attributes: [
+        {
+          role: "region",
+          "aria-label": "Main hero content"
+        }
+      ]
+    })
+  ];
+  if (video) {
+    children.push(
+      createImageWrapper(images[0]),
+      createVideoWrapper(video),
+      createImageWrapper(images[1])
+    );
+  } else {
+    images.forEach((image) => {
+      children.push(createImageWrapper(image));
+    });
+  }
+  return create({
+    element: document.createElement("div"),
+    className: "hero-grid-center",
+    children,
+    elementStyles: {
+      element: {
+        ...columnBase,
+        gridTemplateRows: GRID_LAYOUT.ROWS.INITIAL,
+        ...withViewTimelineAnimation({
+          animation: "grid-rows ease-in-out forwards",
+          animationTimeline: "view()",
+          animationRangeStart: ANIMATION_RANGES.GRID_ROWS.start,
+          animationRangeEnd: ANIMATION_RANGES.GRID_ROWS.end
+        })
+      }
+    }
+  });
+};
+const createHeadline = (props) => {
+  const { headline } = props;
+  const characterCount = headline?.textContent?.trim().length || 0;
+  const isOverwriteHeadline = characterCount > 30;
+  if (!headline) return null;
+  const desktopStyles = {
+    [`@container (${Styles.token.media.queries.desktop.min})`]: {
+      ...isOverwriteHeadline && {
+        fontSize: "80px"
+      }
+    }
+  };
+  const headlineElement = campaignExtraLarge({
+    element: headline,
+    elementStyles: {
+      element: {
+        textTransform: "uppercase",
+        textWrap: "pretty",
+        ...desktopStyles
+      },
+      siblingAfter: {
+        marginTop: Styles.token.spacing.md
+      }
+    },
+    isThemeDark: true
+  });
+  return headlineElement;
+};
+const createTextContainer = (props) => {
+  const { actions, headline, text, isThemeDark } = props;
+  let shouldRenderBlackText = null;
+  const allowsMotion = !window.matchMedia("(prefers-reduced-motion: reduce)").matches || !CSS.supports("animation-timeline", "view()");
+  if (!allowsMotion && !isThemeDark) {
+    shouldRenderBlackText = true;
+  }
+  if (!text && !actions && !headline) {
+    return null;
+  }
+  const textContainer = createDiv({
+    className: "hero-expand-text-container",
+    elementStyles: {
+      element: {
+        position: "relative",
+        height: "100%",
+        zIndex: 9999,
+        textAlign: "center",
+        padding: `${Styles.token.spacing.md} 0`,
+        [`@container (${Styles.token.media.queries.tablet.min})`]: {
+          padding: `${Styles.token.spacing["3xl"]} 0`,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between"
+        },
+        [`@container (${Styles.token.media.queries.highDef.min})`]: {
+          padding: `${Styles.token.spacing["6xl"]} 0`
+        },
+        ...withViewTimelineAnimation({
+          paddingTop: "140vh"
+        }),
+        ["*"]: {
+          ...shouldRenderBlackText && {
+            color: `${Styles.token.color.black} !important`
+          }
+        }
+      }
+    }
+  });
+  const lock = spaceHorizontalSmallest({
+    element: document.createElement("div"),
+    elementStyles: {
+      element: {
+        height: "100%",
+        width: "100%",
+        position: "relative"
+      }
+    }
+  });
+  const textLockupElement = large({
+    headlineComposite: createHeadline(props),
+    textLargest: text,
+    actions,
+    isThemeDark: true
+  });
+  lock.element.appendChild(textLockupElement.element);
+  lock.styles += textLockupElement.styles;
+  textContainer.element.appendChild(lock.element);
+  textContainer.styles += lock.styles;
+  return textContainer;
+};
+const validateGridProps = (props) => {
+  const leftCorner = props.corners.find((c) => c.isCornerLeft);
+  const rightCorner = props.corners.find((c) => !c.isCornerLeft);
+  const errors = [];
+  if (!leftCorner) {
+    errors.push("Left corner is required for hero grid");
+  } else if (!leftCorner.images || leftCorner.images.length === 0) {
+    errors.push("Left corner must have at least one image");
+  }
+  if (!rightCorner) {
+    errors.push("Right corner is required for hero grid");
+  } else if (!rightCorner.images || rightCorner.images.length === 0) {
+    errors.push("Right corner must have at least one image");
+  }
+  if (!props.center) {
+    errors.push("Center is required for hero grid");
+  } else {
+    if (!props.center.images || props.center.images.length === 0) {
+      errors.push("Center must have at least one image");
+    } else if (props.center.video && props.center.images.length < 2) {
+      errors.push("Center must have at least 2 images when video is provided");
+    }
+  }
+  if (errors.length > 0) {
+    errors.forEach((error) => console.log("Hero Grid Error:", error));
+    return null;
+  }
+  return {
+    leftCorner,
+    rightCorner,
+    center: props.center
+  };
+};
+const createGridLayout = (leftCorner, rightCorner, center) => {
+  const gridStyles = {
+    gridTemplateColumns: GRID_LAYOUT.COLUMNS.DEFAULT,
+    height: "100vh",
+    width: "100%",
+    display: "grid",
+    gridGap: `${Styles.token.spacing.min}`,
+    [`@media (${Styles.token.media.queries.tablet.min})`]: {
+      gridGap: `${Styles.token.spacing.md}`
+    },
+    [`@media (${Styles.token.media.queries.desktop.min})`]: {
+      gridGap: `${Styles.token.spacing.lg}`
+    },
+    ...withViewTimelineAnimation({
+      position: "sticky",
+      top: 0,
+      animation: "grid-columns ease-in-out forwards",
+      animationTimeline: "view()",
+      animationRangeStart: ANIMATION_RANGES.GRID_COLUMNS.start,
+      animationRangeEnd: ANIMATION_RANGES.GRID_COLUMNS.end
+    })
+  };
+  return createDiv({
+    className: "hero-grid-layout",
+    children: [
+      createCorner(leftCorner),
+      createCenter(center),
+      createCorner(rightCorner)
+    ],
+    elementStyles: { element: gridStyles },
+    attributes: [
+      {
+        role: "region",
+        "aria-label": "Hero grid layout"
+      }
+    ]
+  });
+};
+const grid = (props) => {
+  const validated = validateGridProps(props);
+  if (!validated) return null;
+  const { leftCorner, rightCorner, center } = validated;
+  const text = createTextContainer(props);
+  const grid2 = createGridLayout(leftCorner, rightCorner, center);
+  const children = text ? [grid2, text] : [grid2];
+  const composite = createDiv({
+    className: "hero-grid-container",
+    children,
+    elementStyles: {
+      element: {
+        width: "100%",
+        display: "block",
+        containerType: "inline-size",
+        ...withViewTimelineAnimation({
+          height: "300vh"
+        }),
+        ["img, video"]: {
+          objectFit: "cover",
+          width: "100%",
+          height: "100%"
+        }
+      }
+    },
+    attributes: [
+      {
+        role: "main",
+        "aria-label": "Hero section"
+      }
+    ]
+  });
+  composite.styles += keyFrameColumns;
+  composite.styles += keyFrameRows;
+  composite.styles += keyFrameTint;
+  return composite;
+};
+export {
+  grid as default
+};
+//# sourceMappingURL=grid.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.mjs","sources":["../../../../source/composite/hero/custom/grid.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { theme } from 'utilities';\nimport { type ContentElement } from '../../../_types';\n\ninterface CornerProps {\n  images: Array<HTMLImageElement>;\n  isCornerLeft: boolean;\n}\n\ninterface CenterProps {\n  images: Array<HTMLImageElement>;\n  video?: HTMLVideoElement | null;\n}\n\ninterface HeroGridProps {\n  headline?: ContentElement;\n  text?: ContentElement;\n  actions?: ContentElement;\n  corners: Array<CornerProps>;\n  center: CenterProps | null;\n  isThemeDark?: boolean;\n}\n\nconst ANIMATION_RANGES = {\n  GRID_COLUMNS: { start: '110vh', end: '230vh' },\n  GRID_ROWS: { start: '110vh', end: '230vh' },\n  TINT_FADE: { start: '50vh', end: '140vh' },\n} as const;\n\nconst GRID_LAYOUT = {\n  COLUMNS: {\n    INITIAL: '20% 60% 20%',\n    FINAL: '0 100% 0',\n    DEFAULT: '25% 50% 25%',\n  },\n  ROWS: {\n    INITIAL: '25vh 1fr 25vh',\n    FINAL: '0 1fr 0',\n    TRIPLE: '1fr 1fr 1fr',\n  },\n} as const;\n\nconst keyFrameColumns = `\n  @keyframes grid-columns {\n    from {\n      grid-template-columns: ${GRID_LAYOUT.COLUMNS.INITIAL};\n    }\n    to {\n      grid-template-columns: ${GRID_LAYOUT.COLUMNS.FINAL};\n      grid-gap: 0;\n    }\n  }\n`;\n\nconst keyFrameRows = `\n  @keyframes grid-rows {\n    from {\n      grid-template-rows: ${GRID_LAYOUT.ROWS.INITIAL};\n    }\n    to {\n      grid-template-rows: ${GRID_LAYOUT.ROWS.FINAL};\n      grid-gap: 0;\n    }\n  }\n`;\n\nconst keyFrameTint = `\n  @keyframes tint-fade {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n`;\n\nconst columnBase = {\n  display: 'grid',\n  gridAutoFlow: 'row dense',\n  gridGap: `${Styles.token.spacing.min}`,\n  width: '100%',\n  height: '100vh',\n\n  [`@media (${Styles.token.media.queries.tablet.min})`]: {\n    gridGap: `${Styles.token.spacing.md}`,\n  },\n\n  [`@media (${Styles.token.media.queries.desktop.min})`]: {\n    gridGap: `${Styles.token.spacing.lg}`,\n  },\n\n  ['& > *']: {\n    overflow: 'hidden',\n    position: 'relative',\n  },\n};\n\nconst createImageWrapper = (image: HTMLImageElement) =>\n  assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n\nconst createVideoWrapper = (video: HTMLVideoElement) =>\n  assets.video.observedAutoPlay({\n    video,\n    isAutoplay: true,\n    additionalElementStyles: {\n      additionalElementStyles: {\n        width: '100%',\n        aspectRatio: '1 / 1',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    },\n  });\n\nconst createCorner = ({ images, isCornerLeft }: CornerProps) => {\n  const children = images.map((image) => createImageWrapper(image));\n\n  return ElementModel.createDiv({\n    className: isCornerLeft\n      ? 'hero-grid-corner-left'\n      : 'hero-grid-corner-right',\n    children,\n    elementStyles: {\n      element: {\n        ...columnBase,\n        gridTemplateRows: GRID_LAYOUT.ROWS.TRIPLE,\n      },\n    },\n    attributes: [\n      {\n        role: 'region',\n        'aria-label': `${\n          isCornerLeft ? 'Left' : 'Right'\n        } decorative image grid`,\n      },\n    ],\n  });\n};\n\nconst createCenter = ({ images, video }: CenterProps) => {\n  const children = [\n    ElementModel.create({\n      element: document.createElement('div'),\n      className: 'hero-grid-tint',\n      elementStyles: {\n        element: {\n          width: '100%',\n          height: '100%',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: 'rgba(0, 0, 0, 0.5)',\n          zIndex: 9,\n          opacity: 0,\n          ...theme.media.withViewTimelineAnimation({\n            animation: 'tint-fade ease-in-out forwards',\n            animationTimeline: 'view()',\n            animationRangeStart: ANIMATION_RANGES.TINT_FADE.start,\n            animationRangeEnd: ANIMATION_RANGES.TINT_FADE.end,\n          }),\n        },\n      },\n      attributes: [\n        {\n          role: 'region',\n          'aria-label': 'Main hero content',\n        },\n      ],\n    }),\n  ];\n\n  if (video) {\n    children.push(\n      createImageWrapper(images[0]),\n      createVideoWrapper(video),\n      createImageWrapper(images[1]),\n    );\n  } else {\n    images.forEach((image) => {\n      children.push(createImageWrapper(image));\n    });\n  }\n\n  return ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-grid-center',\n    children,\n    elementStyles: {\n      element: {\n        ...columnBase,\n        gridTemplateRows: GRID_LAYOUT.ROWS.INITIAL,\n        ...theme.media.withViewTimelineAnimation({\n          animation: 'grid-rows ease-in-out forwards',\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_RANGES.GRID_ROWS.start,\n          animationRangeEnd: ANIMATION_RANGES.GRID_ROWS.end,\n        }),\n      },\n    },\n  });\n};\n\nconst createHeadline = (props: Pick<HeroGridProps, 'headline'>) => {\n  const { headline } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n\n  if (!headline) return null;\n\n  const desktopStyles = {\n    [`@container (${Styles.token.media.queries.desktop.min})`]: {\n      ...(isOverwriteHeadline && {\n        fontSize: '80px',\n      }),\n    },\n  };\n\n  const headlineElement = ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n        textWrap: 'pretty',\n        ...desktopStyles,\n      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.md,\n      },\n    },\n    isThemeDark: true,\n  });\n\n  return headlineElement;\n};\n\nconst createTextContainer = (\n  props: Pick<HeroGridProps, 'headline' | 'text' | 'actions' | 'isThemeDark'>,\n) => {\n  const { actions, headline, text, isThemeDark } = props;\n  let shouldRenderBlackText = null;\n  const allowsMotion =\n    !window.matchMedia('(prefers-reduced-motion: reduce)').matches ||\n    !CSS.supports('animation-timeline', 'view()');\n\n  if (!allowsMotion && !isThemeDark) {\n    shouldRenderBlackText = true;\n  }\n\n  if (!text && !actions && !headline) {\n    return null;\n  }\n\n  const textContainer = ElementModel.createDiv({\n    className: 'hero-expand-text-container',\n    elementStyles: {\n      element: {\n        position: 'relative',\n        height: '100%',\n        zIndex: 9999,\n        textAlign: 'center',\n        padding: `${Styles.token.spacing.md} 0`,\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          padding: `${Styles.token.spacing['3xl']} 0`,\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'space-between',\n        },\n\n        [`@container (${Styles.token.media.queries.highDef.min})`]: {\n          padding: `${Styles.token.spacing['6xl']} 0`,\n        },\n\n        ...theme.media.withViewTimelineAnimation({\n          paddingTop: '140vh',\n        }),\n\n        ['*']: {\n          ...(shouldRenderBlackText && {\n            color: `${Styles.token.color.black} !important`,\n          }),\n        },\n      },\n    },\n  });\n\n  const lock = ElementModel.layout.spaceHorizontalSmallest({\n    element: document.createElement('div'),\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    },\n  });\n\n  const textLockupElement = textLockup.large({\n    headlineComposite: createHeadline(props),\n    textLargest: text,\n    actions,\n    isThemeDark: true,\n  });\n\n  lock.element.appendChild(textLockupElement.element);\n  lock.styles += textLockupElement.styles;\n\n  textContainer.element.appendChild(lock.element);\n  textContainer.styles += lock.styles;\n\n  return textContainer;\n};\n\nconst validateGridProps = (\n  props: HeroGridProps,\n): {\n  leftCorner: CornerProps;\n  rightCorner: CornerProps;\n  center: CenterProps;\n} | null => {\n  const leftCorner = props.corners.find((c) => c.isCornerLeft);\n  const rightCorner = props.corners.find((c) => !c.isCornerLeft);\n\n  const errors = [];\n\n  // Validate corners\n  if (!leftCorner) {\n    errors.push('Left corner is required for hero grid');\n  } else if (!leftCorner.images || leftCorner.images.length === 0) {\n    errors.push('Left corner must have at least one image');\n  }\n\n  if (!rightCorner) {\n    errors.push('Right corner is required for hero grid');\n  } else if (!rightCorner.images || rightCorner.images.length === 0) {\n    errors.push('Right corner must have at least one image');\n  }\n\n  // Validate center\n  if (!props.center) {\n    errors.push('Center is required for hero grid');\n  } else {\n    if (!props.center.images || props.center.images.length === 0) {\n      errors.push('Center must have at least one image');\n    } else if (props.center.video && props.center.images.length < 2) {\n      errors.push('Center must have at least 2 images when video is provided');\n    }\n  }\n\n  if (errors.length > 0) {\n    errors.forEach((error) => console.log('Hero Grid Error:', error));\n    return null;\n  }\n\n  return {\n    leftCorner: leftCorner as CornerProps,\n    rightCorner: rightCorner as CornerProps,\n    center: props.center as CenterProps,\n  };\n};\n\nconst createGridLayout = (\n  leftCorner: CornerProps,\n  rightCorner: CornerProps,\n  center: CenterProps,\n) => {\n  const gridStyles = {\n    gridTemplateColumns: GRID_LAYOUT.COLUMNS.DEFAULT,\n    height: '100vh',\n    width: '100%',\n    display: 'grid',\n    gridGap: `${Styles.token.spacing.min}`,\n\n    [`@media (${Styles.token.media.queries.tablet.min})`]: {\n      gridGap: `${Styles.token.spacing.md}`,\n    },\n\n    [`@media (${Styles.token.media.queries.desktop.min})`]: {\n      gridGap: `${Styles.token.spacing.lg}`,\n    },\n\n    ...theme.media.withViewTimelineAnimation({\n      position: 'sticky',\n      top: 0,\n      animation: 'grid-columns ease-in-out forwards',\n      animationTimeline: 'view()',\n      animationRangeStart: ANIMATION_RANGES.GRID_COLUMNS.start,\n      animationRangeEnd: ANIMATION_RANGES.GRID_COLUMNS.end,\n    }),\n  };\n\n  return ElementModel.createDiv({\n    className: 'hero-grid-layout',\n\n    children: [\n      createCorner(leftCorner),\n      createCenter(center),\n      createCorner(rightCorner),\n    ],\n    elementStyles: { element: gridStyles },\n    attributes: [\n      {\n        role: 'region',\n        'aria-label': 'Hero grid layout',\n      },\n    ],\n  });\n};\n\nexport default (props: HeroGridProps) => {\n  const validated = validateGridProps(props);\n  if (!validated) return null;\n\n  const { leftCorner, rightCorner, center } = validated;\n  const text = createTextContainer(props);\n  const grid = createGridLayout(leftCorner, rightCorner, center);\n\n  const children = text ? [grid, text] : [grid];\n\n  const composite = ElementModel.createDiv({\n    className: 'hero-grid-container',\n    children,\n    elementStyles: {\n      element: {\n        width: '100%',\n        display: 'block',\n        containerType: 'inline-size',\n        ...theme.media.withViewTimelineAnimation({\n          height: '300vh',\n        }),\n        ['img, video']: {\n          objectFit: 'cover',\n          width: '100%',\n          height: '100%',\n        },\n      },\n    },\n    attributes: [\n      {\n        role: 'main',\n        'aria-label': 'Hero section',\n      },\n    ],\n  });\n\n  composite.styles += keyFrameColumns;\n  composite.styles += keyFrameRows;\n  composite.styles += keyFrameTint;\n\n  return composite;\n};\n"],"names":["assets.image.background","assets.video.observedAutoPlay","ElementModel.createDiv","ElementModel.create","theme.media.withViewTimelineAnimation","ElementModel.headline.campaignExtraLarge","ElementModel.layout.spaceHorizontalSmallest","textLockup.large","grid"],"mappings":"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"}

package/dist/composite/hero/custom/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const grid = require("./grid.js");
+const expand = require("./expand.js");
+const videoArrow = require("./video-arrow.js");
+exports.grid = grid;
+exports.expand = expand;
+exports.videoArrow = videoArrow;
+//# sourceMappingURL=index.js.map

package/dist/composite/hero/custom/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

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

@@ -0,0 +1,9 @@
+import { default as default2 } from "./grid.mjs";
+import { default as default3 } from "./expand.mjs";
+import { default as default4 } from "./video-arrow.mjs";
+export {
+  default3 as expand,
+  default2 as grid,
+  default4 as videoArrow
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/composite/hero/custom/video-arrow.d.ts

@@ -1,4 +1,4 @@
-import { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';
+import { HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';
 interface HeroVideoArrowProps extends Omit<BaseHeroVideoArrowProps, 'video'> {
     video: HTMLVideoElement;
     isAnimationOnLoad?: boolean;

package/dist/composite/hero/custom/video-arrow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video-arrow.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,mBAAmB,IAAI,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAGhF,UAAU,mBAAoB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,OAAO,CAAC;IAC1E,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;gCAmOsB,mBAAmB;;;;;;;;AAA1C,wBA6DE"}
+{"version":3,"file":"video-arrow.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,mBAAmB,IAAI,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAIhF,UAAU,mBAAoB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,OAAO,CAAC;IAC1E,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;yBAkLe,OAAO,mBAAmB;;;;;;;;AAA1C,wBA2DE"}