@universityofmaryland/web-elements-library 1.3.7 → 1.4.1

package/dist/composite/card/overlay/image.js

@@ -0,0 +1,219 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Styles = require("@universityofmaryland/web-styles-library");
+const index = require("../../../model/elements/index.js");
+const icons = require("../../../utilities/assets/icons.js");
+const modify = require("../../../utilities/markup/modify.js");
+require("../../../node_modules/postcss/lib/postcss.js");
+require("../../../node_modules/postcss-nesting/dist/index.js");
+require("../../../node_modules/postcss-js/index.js");
+const media = require("../../../utilities/theme/media.js");
+const icon = require("../../../atomic/actions/icon.js");
+require("../../../atomic/animations/actions/indicator.js");
+require("../../../atomic/animations/brand/chevron-scroll.js");
+const background = require("../../../atomic/assets/image/background.js");
+require("../../../atomic/layout/block/stacked.js");
+require("../../../atomic/layout/overlay/modal.js");
+require("../../../atomic/layout/person/columns.js");
+require("../../../atomic/text-lockup/date.js");
+require("../../../atomic/text-lockup/small.js");
+const smallScaling = require("../../../atomic/text-lockup/small-scaling.js");
+const layout = require("../../../model/elements/layout.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const classRef = "card-overlay-image";
+const createCardOverlayImage = (props) => {
+  const { isQuote, ctaIcon, dateSign, backgroundImage, text } = props;
+  const children = [];
+  const wrapperChildren = [];
+  const load = () => {
+    const sizeElements = () => {
+      const textCopy = text?.innerHTML;
+      if (text && textCopy) {
+        const modifiedText = modify.truncateTextBasedOnSize({
+          text: textCopy,
+          size: composite.element.offsetWidth
+        });
+        text.innerHTML = modifiedText;
+        if (modifiedText.length >= 220) {
+          const assetContainer = composite.element.querySelector(
+            `.${imageContainerClass}`
+          );
+          if (assetContainer) {
+            assetContainer.setAttribute("data-size", "large");
+          }
+        }
+      }
+    };
+    sizeElements();
+  };
+  let imageContainerClass = null;
+  if (ctaIcon && ctaIcon instanceof HTMLElement) {
+    children.push(icon({ ...props, ctaIcon, isThemeLight: false }));
+  }
+  if (backgroundImage) {
+    const imageContainer = background({
+      element: backgroundImage,
+      isScaled: true,
+      isGifAllowed: true,
+      customStyles: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        [`&:before`]: {
+          content: '""',
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          zIndex: 1,
+          opacity: 1,
+          transition: `opacity 0.5s ease-in-out`,
+          background: "linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, 0.9) 100%)"
+        },
+        [`&[data-size="large"]:before`]: {
+          background: "linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0.9) 100%)"
+        },
+        [`img`]: {
+          transform: "scale(1.025)"
+        }
+      }
+    });
+    children.push(imageContainer);
+    imageContainerClass = imageContainer.element.className;
+  }
+  if (dateSign) {
+    wrapperChildren.push(
+      layout.backgroundBoxWhite({
+        element: document.createElement("div"),
+        elementStyles: {
+          element: {
+            alignSelf: `flex-start`
+          },
+          siblingAfter: {
+            marginTop: `${Styles__namespace.token.spacing.min}`
+          }
+        },
+        children: [dateSign]
+      })
+    );
+  }
+  if (isQuote) {
+    const quoteWrapper = index.createDiv({
+      className: "card-overlay-image-quote-wrapper",
+      elementStyles: {
+        element: {
+          width: "41px",
+          height: "30px",
+          marginBottom: `${Styles__namespace.token.spacing.xs}`,
+          "& svg": {
+            fill: `${Styles__namespace.token.color.red}`
+          }
+        }
+      }
+    });
+    quoteWrapper.element.innerHTML = icons.QUOTE;
+    wrapperChildren.push(quoteWrapper);
+  }
+  wrapperChildren.push(
+    smallScaling({
+      ...props,
+      isThemeDark: true
+    })
+  );
+  const textWrapper = index.createDiv({
+    className: "card-overlay-image-text-wrapper",
+    elementStyles: {
+      element: {
+        height: "auto",
+        paddingRight: `${ctaIcon ? Styles__namespace.token.spacing["2xl"] : 0}`
+      }
+    },
+    children: [
+      index.createDiv({
+        children: wrapperChildren,
+        className: "card-overlay-image-text-content",
+        elementStyles: {
+          element: {
+            maxWidth: `${Styles__namespace.token.spacing.maxWidth.smallest}`,
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            zIndex: 9,
+            position: "relative"
+          }
+        }
+      })
+    ]
+  });
+  const composite = index.createDiv({
+    className: classRef,
+    children: [
+      index.createDiv({
+        className: "card-overlay-image-container",
+        children: [...children, textWrapper],
+        elementStyles: {
+          element: {
+            position: "relative",
+            padding: `${Styles__namespace.token.spacing.lg} ${Styles__namespace.token.spacing.md}`,
+            paddingTop: `${Styles__namespace.token.spacing["4xl"]}`,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "flex-end",
+            minHeight: "360px",
+            height: "100%",
+            overflow: "hidden",
+            ...media.createContainerQuery(
+              "min-width",
+              Styles__namespace.token.media.breakpointValues.medium.min,
+              {
+                paddingTop: `${Styles__namespace.token.spacing["8xl"]}`,
+                minHeight: `424px`
+              }
+            )
+          }
+        }
+      })
+    ],
+    elementStyles: {
+      element: {
+        height: "100%",
+        containerType: "inline-size",
+        [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]: {
+          opacity: 0.7
+        },
+        ["&:hover img, &:focus img"]: {
+          transform: "scale(1)",
+          transition: "transform 0.5s ease-in-out"
+        }
+      }
+    }
+  });
+  return {
+    ...composite,
+    events: {
+      load
+    }
+  };
+};
+exports.classRef = classRef;
+exports.createCardOverlayImage = createCardOverlayImage;
+//# sourceMappingURL=image.js.map

package/dist/composite/card/overlay/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","sources":["../../../../source/composite/card/overlay/image.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { actions, assets, textLockup } from 'atomic';\nimport { asset, markup, theme } from 'utilities';\nimport { CardOverlayProps } from '../_types';\nimport { ElementVisual } from '../../../_types';\n\nexport const classRef = 'card-overlay-image';\n\nexport const createCardOverlayImage = (props: CardOverlayProps) => {\n  const { isQuote, ctaIcon, dateSign, backgroundImage, text } = props;\n  const children: ElementVisual[] = [];\n  const wrapperChildren: ElementVisual[] = [];\n  const load = () => {\n    const sizeElements = () => {\n      const textCopy = text?.innerHTML;\n      if (text && textCopy) {\n        const modifiedText = markup.modify.truncateTextBasedOnSize({\n          text: textCopy,\n          size: composite.element.offsetWidth,\n        });\n\n        text.innerHTML = modifiedText;\n\n        if (modifiedText.length >= 220) {\n          const assetContainer = composite.element.querySelector(\n            `.${imageContainerClass}`,\n          );\n          if (assetContainer) {\n            assetContainer.setAttribute('data-size', 'large');\n          }\n        }\n      }\n    };\n\n    sizeElements();\n  };\n  let imageContainerClass: string | null = null;\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(actions.icon({ ...props, ctaIcon, isThemeLight: false }));\n  }\n\n  if (backgroundImage) {\n    const imageContainer = assets.image.background({\n      element: backgroundImage,\n      isScaled: true,\n      isGifAllowed: true,\n      customStyles: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n\n        [`&:before`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          zIndex: 1,\n          opacity: 1,\n          transition: `opacity 0.5s ease-in-out`,\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`&[data-size=\"large\"]:before`]: {\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`img`]: {\n          transform: 'scale(1.025)',\n        },\n      },\n    });\n    children.push(imageContainer);\n    imageContainerClass = imageContainer.element.className;\n  }\n\n  if (dateSign) {\n    wrapperChildren.push(\n      ElementModel.layout.backgroundBoxWhite({\n        element: document.createElement('div'),\n        elementStyles: {\n          element: {\n            alignSelf: `flex-start`,\n          },\n          siblingAfter: {\n            marginTop: `${Styles.token.spacing.min}`,\n          },\n        },\n        children: [dateSign],\n      }),\n    );\n  }\n\n  if (isQuote) {\n    const quoteWrapper = ElementModel.createDiv({\n      className: 'card-overlay-image-quote-wrapper',\n      elementStyles: {\n        element: {\n          width: '41px',\n          height: '30px',\n          marginBottom: `${Styles.token.spacing.xs}`,\n\n          '& svg': {\n            fill: `${Styles.token.color.red}`,\n          },\n        },\n      },\n    });\n\n    quoteWrapper.element.innerHTML = asset.icon.QUOTE;\n    wrapperChildren.push(quoteWrapper);\n  }\n\n  wrapperChildren.push(\n    textLockup.smallScaling({\n      ...props,\n      isThemeDark: true,\n    }),\n  );\n\n  const textWrapper = ElementModel.createDiv({\n    className: 'card-overlay-image-text-wrapper',\n    elementStyles: {\n      element: {\n        height: 'auto',\n        paddingRight: `${ctaIcon ? Styles.token.spacing['2xl'] : 0}`,\n      },\n    },\n    children: [\n      ElementModel.createDiv({\n        children: wrapperChildren,\n        className: 'card-overlay-image-text-content',\n        elementStyles: {\n          element: {\n            maxWidth: `${Styles.token.spacing.maxWidth.smallest}`,\n            height: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            zIndex: 9,\n            position: 'relative',\n          },\n        },\n      }),\n    ],\n  });\n\n  const composite = ElementModel.createDiv({\n    className: classRef,\n    children: [\n      ElementModel.createDiv({\n        className: 'card-overlay-image-container',\n        children: [...children, textWrapper],\n        elementStyles: {\n          element: {\n            position: 'relative',\n            padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.md}`,\n            paddingTop: `${Styles.token.spacing['4xl']}`,\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'flex-end',\n            minHeight: '360px',\n            height: '100%',\n            overflow: 'hidden',\n\n            ...theme.media.createContainerQuery(\n              'min-width',\n              Styles.token.media.breakpointValues.medium.min,\n              {\n                paddingTop: `${Styles.token.spacing['8xl']}`,\n                minHeight: `424px`,\n              },\n            ),\n          },\n        },\n      }),\n    ],\n    elementStyles: {\n      element: {\n        height: '100%',\n        containerType: 'inline-size',\n\n        [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]:\n          {\n            opacity: 0.7,\n          },\n\n        ['&:hover img, &:focus img']: {\n          transform: 'scale(1)',\n          transition: 'transform 0.5s ease-in-out',\n        },\n      },\n    },\n  });\n\n  return {\n    ...composite,\n    events: {\n      load,\n    },\n  };\n};\n"],"names":["markup.modify.truncateTextBasedOnSize","actions.icon","assets.image.background","ElementModel.layout.backgroundBoxWhite","Styles","ElementModel.createDiv","asset.icon.QUOTE","textLockup.smallScaling","theme.media.createContainerQuery"],"mappings":"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"}

package/dist/composite/card/overlay/image.mjs

@@ -0,0 +1,202 @@
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { createDiv } from "../../../model/elements/index.mjs";
+import { QUOTE } from "../../../utilities/assets/icons.mjs";
+import { truncateTextBasedOnSize } from "../../../utilities/markup/modify.mjs";
+import "../../../node_modules/postcss/lib/postcss.mjs";
+import "../../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../../node_modules/postcss-js/index.mjs";
+import { createContainerQuery } from "../../../utilities/theme/media.mjs";
+import icon from "../../../atomic/actions/icon.mjs";
+import "../../../atomic/animations/actions/indicator.mjs";
+import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import imageContainer from "../../../atomic/assets/image/background.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 "../../../atomic/text-lockup/small.mjs";
+import smallScaling from "../../../atomic/text-lockup/small-scaling.mjs";
+import { backgroundBoxWhite } from "../../../model/elements/layout.mjs";
+const classRef = "card-overlay-image";
+const createCardOverlayImage = (props) => {
+  const { isQuote, ctaIcon, dateSign, backgroundImage, text } = props;
+  const children = [];
+  const wrapperChildren = [];
+  const load = () => {
+    const sizeElements = () => {
+      const textCopy = text?.innerHTML;
+      if (text && textCopy) {
+        const modifiedText = truncateTextBasedOnSize({
+          text: textCopy,
+          size: composite.element.offsetWidth
+        });
+        text.innerHTML = modifiedText;
+        if (modifiedText.length >= 220) {
+          const assetContainer = composite.element.querySelector(
+            `.${imageContainerClass}`
+          );
+          if (assetContainer) {
+            assetContainer.setAttribute("data-size", "large");
+          }
+        }
+      }
+    };
+    sizeElements();
+  };
+  let imageContainerClass = null;
+  if (ctaIcon && ctaIcon instanceof HTMLElement) {
+    children.push(icon({ ...props, ctaIcon, isThemeLight: false }));
+  }
+  if (backgroundImage) {
+    const imageContainer$1 = imageContainer({
+      element: backgroundImage,
+      isScaled: true,
+      isGifAllowed: true,
+      customStyles: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        [`&:before`]: {
+          content: '""',
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          zIndex: 1,
+          opacity: 1,
+          transition: `opacity 0.5s ease-in-out`,
+          background: "linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, 0.9) 100%)"
+        },
+        [`&[data-size="large"]:before`]: {
+          background: "linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0.9) 100%)"
+        },
+        [`img`]: {
+          transform: "scale(1.025)"
+        }
+      }
+    });
+    children.push(imageContainer$1);
+    imageContainerClass = imageContainer$1.element.className;
+  }
+  if (dateSign) {
+    wrapperChildren.push(
+      backgroundBoxWhite({
+        element: document.createElement("div"),
+        elementStyles: {
+          element: {
+            alignSelf: `flex-start`
+          },
+          siblingAfter: {
+            marginTop: `${Styles.token.spacing.min}`
+          }
+        },
+        children: [dateSign]
+      })
+    );
+  }
+  if (isQuote) {
+    const quoteWrapper = createDiv({
+      className: "card-overlay-image-quote-wrapper",
+      elementStyles: {
+        element: {
+          width: "41px",
+          height: "30px",
+          marginBottom: `${Styles.token.spacing.xs}`,
+          "& svg": {
+            fill: `${Styles.token.color.red}`
+          }
+        }
+      }
+    });
+    quoteWrapper.element.innerHTML = QUOTE;
+    wrapperChildren.push(quoteWrapper);
+  }
+  wrapperChildren.push(
+    smallScaling({
+      ...props,
+      isThemeDark: true
+    })
+  );
+  const textWrapper = createDiv({
+    className: "card-overlay-image-text-wrapper",
+    elementStyles: {
+      element: {
+        height: "auto",
+        paddingRight: `${ctaIcon ? Styles.token.spacing["2xl"] : 0}`
+      }
+    },
+    children: [
+      createDiv({
+        children: wrapperChildren,
+        className: "card-overlay-image-text-content",
+        elementStyles: {
+          element: {
+            maxWidth: `${Styles.token.spacing.maxWidth.smallest}`,
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            zIndex: 9,
+            position: "relative"
+          }
+        }
+      })
+    ]
+  });
+  const composite = createDiv({
+    className: classRef,
+    children: [
+      createDiv({
+        className: "card-overlay-image-container",
+        children: [...children, textWrapper],
+        elementStyles: {
+          element: {
+            position: "relative",
+            padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.md}`,
+            paddingTop: `${Styles.token.spacing["4xl"]}`,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "flex-end",
+            minHeight: "360px",
+            height: "100%",
+            overflow: "hidden",
+            ...createContainerQuery(
+              "min-width",
+              Styles.token.media.breakpointValues.medium.min,
+              {
+                paddingTop: `${Styles.token.spacing["8xl"]}`,
+                minHeight: `424px`
+              }
+            )
+          }
+        }
+      })
+    ],
+    elementStyles: {
+      element: {
+        height: "100%",
+        containerType: "inline-size",
+        [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]: {
+          opacity: 0.7
+        },
+        ["&:hover img, &:focus img"]: {
+          transform: "scale(1)",
+          transition: "transform 0.5s ease-in-out"
+        }
+      }
+    }
+  });
+  return {
+    ...composite,
+    events: {
+      load
+    }
+  };
+};
+export {
+  classRef,
+  createCardOverlayImage
+};
+//# sourceMappingURL=image.mjs.map

package/dist/composite/card/overlay/image.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.mjs","sources":["../../../../source/composite/card/overlay/image.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { actions, assets, textLockup } from 'atomic';\nimport { asset, markup, theme } from 'utilities';\nimport { CardOverlayProps } from '../_types';\nimport { ElementVisual } from '../../../_types';\n\nexport const classRef = 'card-overlay-image';\n\nexport const createCardOverlayImage = (props: CardOverlayProps) => {\n  const { isQuote, ctaIcon, dateSign, backgroundImage, text } = props;\n  const children: ElementVisual[] = [];\n  const wrapperChildren: ElementVisual[] = [];\n  const load = () => {\n    const sizeElements = () => {\n      const textCopy = text?.innerHTML;\n      if (text && textCopy) {\n        const modifiedText = markup.modify.truncateTextBasedOnSize({\n          text: textCopy,\n          size: composite.element.offsetWidth,\n        });\n\n        text.innerHTML = modifiedText;\n\n        if (modifiedText.length >= 220) {\n          const assetContainer = composite.element.querySelector(\n            `.${imageContainerClass}`,\n          );\n          if (assetContainer) {\n            assetContainer.setAttribute('data-size', 'large');\n          }\n        }\n      }\n    };\n\n    sizeElements();\n  };\n  let imageContainerClass: string | null = null;\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(actions.icon({ ...props, ctaIcon, isThemeLight: false }));\n  }\n\n  if (backgroundImage) {\n    const imageContainer = assets.image.background({\n      element: backgroundImage,\n      isScaled: true,\n      isGifAllowed: true,\n      customStyles: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n\n        [`&:before`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          zIndex: 1,\n          opacity: 1,\n          transition: `opacity 0.5s ease-in-out`,\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`&[data-size=\"large\"]:before`]: {\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`img`]: {\n          transform: 'scale(1.025)',\n        },\n      },\n    });\n    children.push(imageContainer);\n    imageContainerClass = imageContainer.element.className;\n  }\n\n  if (dateSign) {\n    wrapperChildren.push(\n      ElementModel.layout.backgroundBoxWhite({\n        element: document.createElement('div'),\n        elementStyles: {\n          element: {\n            alignSelf: `flex-start`,\n          },\n          siblingAfter: {\n            marginTop: `${Styles.token.spacing.min}`,\n          },\n        },\n        children: [dateSign],\n      }),\n    );\n  }\n\n  if (isQuote) {\n    const quoteWrapper = ElementModel.createDiv({\n      className: 'card-overlay-image-quote-wrapper',\n      elementStyles: {\n        element: {\n          width: '41px',\n          height: '30px',\n          marginBottom: `${Styles.token.spacing.xs}`,\n\n          '& svg': {\n            fill: `${Styles.token.color.red}`,\n          },\n        },\n      },\n    });\n\n    quoteWrapper.element.innerHTML = asset.icon.QUOTE;\n    wrapperChildren.push(quoteWrapper);\n  }\n\n  wrapperChildren.push(\n    textLockup.smallScaling({\n      ...props,\n      isThemeDark: true,\n    }),\n  );\n\n  const textWrapper = ElementModel.createDiv({\n    className: 'card-overlay-image-text-wrapper',\n    elementStyles: {\n      element: {\n        height: 'auto',\n        paddingRight: `${ctaIcon ? Styles.token.spacing['2xl'] : 0}`,\n      },\n    },\n    children: [\n      ElementModel.createDiv({\n        children: wrapperChildren,\n        className: 'card-overlay-image-text-content',\n        elementStyles: {\n          element: {\n            maxWidth: `${Styles.token.spacing.maxWidth.smallest}`,\n            height: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            zIndex: 9,\n            position: 'relative',\n          },\n        },\n      }),\n    ],\n  });\n\n  const composite = ElementModel.createDiv({\n    className: classRef,\n    children: [\n      ElementModel.createDiv({\n        className: 'card-overlay-image-container',\n        children: [...children, textWrapper],\n        elementStyles: {\n          element: {\n            position: 'relative',\n            padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.md}`,\n            paddingTop: `${Styles.token.spacing['4xl']}`,\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'flex-end',\n            minHeight: '360px',\n            height: '100%',\n            overflow: 'hidden',\n\n            ...theme.media.createContainerQuery(\n              'min-width',\n              Styles.token.media.breakpointValues.medium.min,\n              {\n                paddingTop: `${Styles.token.spacing['8xl']}`,\n                minHeight: `424px`,\n              },\n            ),\n          },\n        },\n      }),\n    ],\n    elementStyles: {\n      element: {\n        height: '100%',\n        containerType: 'inline-size',\n\n        [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]:\n          {\n            opacity: 0.7,\n          },\n\n        ['&:hover img, &:focus img']: {\n          transform: 'scale(1)',\n          transition: 'transform 0.5s ease-in-out',\n        },\n      },\n    },\n  });\n\n  return {\n    ...composite,\n    events: {\n      load,\n    },\n  };\n};\n"],"names":["markup.modify.truncateTextBasedOnSize","actions.icon","imageContainer","assets.image.background","ElementModel.layout.backgroundBoxWhite","ElementModel.createDiv","asset.icon.QUOTE","textLockup.smallScaling","theme.media.createContainerQuery"],"mappings":"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"}

package/dist/composite/card/overlay/index.d.ts

@@ -1,4 +1,4 @@
 export { default as color } from './color';
 export { default as icon } from './icon';
-export { default as image } from './image';
+export { createCardOverlayImage as image, classRef as imageClassRef } from './image';
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/card/overlay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,sBAAsB,IAAI,KAAK,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/composite/card/overlay/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const color = require("./color.js");
+const icon = require("./icon.js");
+const image = require("./image.js");
+exports.color = color;
+exports.icon = icon;
+exports.image = image.createCardOverlayImage;
+exports.imageClassRef = image.classRef;
+//# sourceMappingURL=index.js.map

package/dist/composite/card/overlay/index.js.map

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

package/dist/composite/card/overlay/index.mjs

@@ -0,0 +1,10 @@
+import { default as default2 } from "./color.mjs";
+import { default as default3 } from "./icon.mjs";
+import { createCardOverlayImage, classRef } from "./image.mjs";
+export {
+  default2 as color,
+  default3 as icon,
+  createCardOverlayImage as image,
+  classRef as imageClassRef
+};
+//# sourceMappingURL=index.mjs.map

package/dist/composite/card/overlay/index.mjs.map

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

package/dist/composite/card/video/block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/video/block.ts"],"names":[],"mappings":"AAEA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;gCAEsB,mBAAmB;;;;;;;;;AAA1C,wBAgBU"}
+{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/video/block.ts"],"names":[],"mappings":"AAEA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;yBAEe,OAAO,mBAAmB;;;;;;;;;AAA1C,wBAgBU"}

package/dist/composite/card/video/block.js

@@ -0,0 +1,31 @@
+"use strict";
+require("@universityofmaryland/web-styles-library");
+require("../../../node_modules/postcss/lib/postcss.js");
+require("../../../node_modules/postcss-nesting/dist/index.js");
+require("../../../node_modules/postcss-js/index.js");
+require("../../../model/modifiers/index.js");
+require("../../../model/elements/headline.js");
+require("../../../atomic/animations/actions/indicator.js");
+require("../../../atomic/animations/brand/chevron-scroll.js");
+const observedAutoPlay = require("../../../atomic/assets/video/observed-auto-play.js");
+require("../../../atomic/layout/block/stacked.js");
+require("../../../atomic/layout/overlay/modal.js");
+require("../../../atomic/layout/person/columns.js");
+require("../../../atomic/text-lockup/date.js");
+require("../../../atomic/text-lockup/small.js");
+const block = (props) => (() => observedAutoPlay({
+  ...props,
+  additionalElementStyles: {
+    width: "100%",
+    aspectRatio: "1 / 1",
+    position: "relative",
+    overflow: "hidden",
+    [`& video`]: {
+      height: "100%",
+      width: "100%",
+      objectFit: "cover"
+    }
+  }
+}))();
+module.exports = block;
+//# sourceMappingURL=block.js.map

package/dist/composite/card/video/block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"block.js","sources":["../../../../source/composite/card/video/block.ts"],"sourcesContent":["import { assets } from 'atomic';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n}\n\nexport default (props: CardVideoShortProps) =>\n  (() =>\n    assets.video.observedAutoPlay({\n      ...props,\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"],"names":["assets.video.observedAutoPlay"],"mappings":";;;;;;;;;;;;;;;AAOA,MAAA,QAAe,CAAC,WACb,MACCA,iBAA8B;AAAA,EAC5B,GAAG;AAAA,EACH,yBAAyB;AAAA,IACvB,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,CAAC,SAAS,GAAG;AAAA,MACX,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,CAAC,GAAA;;"}

package/dist/composite/card/video/block.mjs

@@ -0,0 +1,32 @@
+import "@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 "../../../model/modifiers/index.mjs";
+import "../../../model/elements/headline.mjs";
+import "../../../atomic/animations/actions/indicator.mjs";
+import "../../../atomic/animations/brand/chevron-scroll.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 "../../../atomic/text-lockup/small.mjs";
+const block = (props) => (() => observedAutoPlay({
+  ...props,
+  additionalElementStyles: {
+    width: "100%",
+    aspectRatio: "1 / 1",
+    position: "relative",
+    overflow: "hidden",
+    [`& video`]: {
+      height: "100%",
+      width: "100%",
+      objectFit: "cover"
+    }
+  }
+}))();
+export {
+  block as default
+};
+//# sourceMappingURL=block.mjs.map

package/dist/composite/card/video/block.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"block.mjs","sources":["../../../../source/composite/card/video/block.ts"],"sourcesContent":["import { assets } from 'atomic';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n}\n\nexport default (props: CardVideoShortProps) =>\n  (() =>\n    assets.video.observedAutoPlay({\n      ...props,\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"],"names":["assets.video.observedAutoPlay"],"mappings":";;;;;;;;;;;;;;AAOA,MAAA,QAAe,CAAC,WACb,MACCA,iBAA8B;AAAA,EAC5B,GAAG;AAAA,EACH,yBAAyB;AAAA,IACvB,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,CAAC,SAAS,GAAG;AAAA,MACX,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,CAAC,GAAA;"}

package/dist/composite/card/video/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const block = require("./block.js");
+const short = require("./short.js");
+exports.block = block;
+exports.short = short;
+//# sourceMappingURL=index.js.map

package/dist/composite/card/video/index.js.map

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

package/dist/composite/card/video/index.mjs

@@ -0,0 +1,7 @@
+import { default as default2 } from "./block.mjs";
+import { default as default3 } from "./short.mjs";
+export {
+  default2 as block,
+  default3 as short
+};
+//# sourceMappingURL=index.mjs.map

package/dist/composite/card/video/index.mjs.map

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

package/dist/composite/card/video/short.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"short.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/video/short.ts"],"names":[],"mappings":"AAEA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,gBAAgB,CAAC;CACzB;gCAEsB,mBAAmB;;;;;AAA1C,wBAqDE"}
+{"version":3,"file":"short.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/video/short.ts"],"names":[],"mappings":"AAEA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,gBAAgB,CAAC;CACzB;yBAEe,OAAO,mBAAmB;;;;;AAA1C,wBAqDE"}