@universityofmaryland/web-elements-library 1.4.8 → 1.5.0

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

@@ -1,24 +1,33 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Styles = require("@universityofmaryland/web-styles-library");
+const token = require("@universityofmaryland/web-styles-library/token");
+const brand = require("@universityofmaryland/web-icons-library/brand");
+const string = require("@universityofmaryland/web-utilities-library/string");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
 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");
+require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-utilities-library/media");
+require("@universityofmaryland/web-utilities-library/dom");
+require("@universityofmaryland/web-icons-library/controls");
+require("@universityofmaryland/web-icons-library/communication");
+require("@universityofmaryland/web-icons-library/files");
 const icon = require("../../../atomic/actions/icon.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("@universityofmaryland/web-utilities-library/performance");
+require("@universityofmaryland/web-utilities-library/accessibility");
+require("@universityofmaryland/web-icons-library/location");
+require("@universityofmaryland/web-icons-library/calendar");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");
 require("../../../atomic/layout/person/columns.js");
+require("@universityofmaryland/web-icons-library/social");
 require("../../../atomic/text-lockup/date.js");
 require("../../../atomic/text-lockup/small.js");
 const smallScaling = require("../../../atomic/text-lockup/small-scaling.js");
+require("@universityofmaryland/web-styles-library/typography");
 const layout = require("../../../model/elements/layout.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -36,7 +45,7 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const classRef = "card-overlay-image";
 const createCardOverlayImage = (props) => {
   const { isQuote, ctaIcon, dateSign, backgroundImage, text } = props;
@@ -46,7 +55,7 @@ const createCardOverlayImage = (props) => {
     const sizeElements = () => {
       const textCopy = text?.innerHTML;
       if (text && textCopy) {
-        const modifiedText = modify.truncateTextBasedOnSize({
+        const modifiedText = string.truncateTextBasedOnSize({
           text: textCopy,
           size: composite.element.offsetWidth
         });
@@ -110,7 +119,7 @@ const createCardOverlayImage = (props) => {
             alignSelf: `flex-start`
           },
           siblingAfter: {
-            marginTop: `${Styles__namespace.token.spacing.min}`
+            marginTop: `${token__namespace.spacing.min}`
           }
         },
         children: [dateSign]
@@ -124,14 +133,14 @@ const createCardOverlayImage = (props) => {
         element: {
           width: "41px",
           height: "30px",
-          marginBottom: `${Styles__namespace.token.spacing.xs}`,
+          marginBottom: `${token__namespace.spacing.xs}`,
           "& svg": {
-            fill: `${Styles__namespace.token.color.red}`
+            fill: `${token__namespace.color.red}`
           }
         }
       }
     });
-    quoteWrapper.element.innerHTML = icons.QUOTE;
+    quoteWrapper.element.innerHTML = brand.quote;
     wrapperChildren.push(quoteWrapper);
   }
   wrapperChildren.push(
@@ -145,7 +154,7 @@ const createCardOverlayImage = (props) => {
     elementStyles: {
       element: {
         height: "auto",
-        paddingRight: `${ctaIcon ? Styles__namespace.token.spacing["2xl"] : 0}`
+        paddingRight: `${ctaIcon ? token__namespace.spacing["2xl"] : 0}`
       }
     },
     children: [
@@ -154,7 +163,7 @@ const createCardOverlayImage = (props) => {
         className: "card-overlay-image-text-content",
         elementStyles: {
           element: {
-            maxWidth: `${Styles__namespace.token.spacing.maxWidth.smallest}`,
+            maxWidth: `${token__namespace.spacing.maxWidth.smallest}`,
             height: "100%",
             display: "flex",
             flexDirection: "column",
@@ -174,19 +183,19 @@ const createCardOverlayImage = (props) => {
         elementStyles: {
           element: {
             position: "relative",
-            padding: `${Styles__namespace.token.spacing.lg} ${Styles__namespace.token.spacing.md}`,
-            paddingTop: `${Styles__namespace.token.spacing["4xl"]}`,
+            padding: `${token__namespace.spacing.lg} ${token__namespace.spacing.md}`,
+            paddingTop: `${token__namespace.spacing["4xl"]}`,
             display: "flex",
             flexDirection: "column",
             justifyContent: "flex-end",
             minHeight: "360px",
             height: "100%",
             overflow: "hidden",
-            ...media.createContainerQuery(
+            ...styles.createMediaQuery(
               "min-width",
-              Styles__namespace.token.media.breakpointValues.medium.min,
+              token__namespace.media.breakpointValues.medium.min,
               {
-                paddingTop: `${Styles__namespace.token.spacing["8xl"]}`,
+                paddingTop: `${token__namespace.spacing["8xl"]}`,
                 minHeight: `424px`
               }
             )

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

@@ -1 +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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"}
+{"version":3,"file":"image.js","sources":["../../../../source/composite/card/overlay/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { truncateTextBasedOnSize } from '@universityofmaryland/web-utilities-library/string';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { actions, assets, textLockup } from 'atomic';\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 = 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: `${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: `${token.spacing.xs}`,\n\n          '& svg': {\n            fill: `${token.color.red}`,\n          },\n        },\n      },\n    });\n\n    quoteWrapper.element.innerHTML = iconQuote;\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 ? 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: `${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: `${token.spacing.lg} ${token.spacing.md}`,\n            paddingTop: `${token.spacing['4xl']}`,\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'flex-end',\n            minHeight: '360px',\n            height: '100%',\n            overflow: 'hidden',\n\n            ...createMediaQuery(\n              'min-width',\n              token.media.breakpointValues.medium.min,\n              {\n                paddingTop: `${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":["truncateTextBasedOnSize","actions.icon","assets.image.background","ElementModel.layout.backgroundBoxWhite","token","ElementModel.createDiv","iconQuote","textLockup.smallScaling","createMediaQuery"],"mappings":"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"}

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

@@ -1,22 +1,31 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { quote } from "@universityofmaryland/web-icons-library/brand";
+import { truncateTextBasedOnSize } from "@universityofmaryland/web-utilities-library/string";
+import { createMediaQuery } from "@universityofmaryland/web-utilities-library/styles";
 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 "@universityofmaryland/web-styles-library/element";
+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 icon from "../../../atomic/actions/icon.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 "@universityofmaryland/web-utilities-library/performance";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
 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";
 import smallScaling from "../../../atomic/text-lockup/small-scaling.mjs";
+import "@universityofmaryland/web-styles-library/typography";
 import { backgroundBoxWhite } from "../../../model/elements/layout.mjs";
 const classRef = "card-overlay-image";
 const createCardOverlayImage = (props) => {
@@ -91,7 +100,7 @@ const createCardOverlayImage = (props) => {
             alignSelf: `flex-start`
           },
           siblingAfter: {
-            marginTop: `${Styles.token.spacing.min}`
+            marginTop: `${token.spacing.min}`
           }
         },
         children: [dateSign]
@@ -105,14 +114,14 @@ const createCardOverlayImage = (props) => {
         element: {
           width: "41px",
           height: "30px",
-          marginBottom: `${Styles.token.spacing.xs}`,
+          marginBottom: `${token.spacing.xs}`,
           "& svg": {
-            fill: `${Styles.token.color.red}`
+            fill: `${token.color.red}`
           }
         }
       }
     });
-    quoteWrapper.element.innerHTML = QUOTE;
+    quoteWrapper.element.innerHTML = quote;
     wrapperChildren.push(quoteWrapper);
   }
   wrapperChildren.push(
@@ -126,7 +135,7 @@ const createCardOverlayImage = (props) => {
     elementStyles: {
       element: {
         height: "auto",
-        paddingRight: `${ctaIcon ? Styles.token.spacing["2xl"] : 0}`
+        paddingRight: `${ctaIcon ? token.spacing["2xl"] : 0}`
       }
     },
     children: [
@@ -135,7 +144,7 @@ const createCardOverlayImage = (props) => {
         className: "card-overlay-image-text-content",
         elementStyles: {
           element: {
-            maxWidth: `${Styles.token.spacing.maxWidth.smallest}`,
+            maxWidth: `${token.spacing.maxWidth.smallest}`,
             height: "100%",
             display: "flex",
             flexDirection: "column",
@@ -155,19 +164,19 @@ const createCardOverlayImage = (props) => {
         elementStyles: {
           element: {
             position: "relative",
-            padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.md}`,
-            paddingTop: `${Styles.token.spacing["4xl"]}`,
+            padding: `${token.spacing.lg} ${token.spacing.md}`,
+            paddingTop: `${token.spacing["4xl"]}`,
             display: "flex",
             flexDirection: "column",
             justifyContent: "flex-end",
             minHeight: "360px",
             height: "100%",
             overflow: "hidden",
-            ...createContainerQuery(
+            ...createMediaQuery(
               "min-width",
-              Styles.token.media.breakpointValues.medium.min,
+              token.media.breakpointValues.medium.min,
               {
-                paddingTop: `${Styles.token.spacing["8xl"]}`,
+                paddingTop: `${token.spacing["8xl"]}`,
                 minHeight: `424px`
               }
             )

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

@@ -1 +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":";;;;;;;;;;;;;;;;;;;;AAOO,MAAM,WAAW;AAEjB,MAAM,yBAAyB,CAAC,UAA4B;AACjE,QAAM,EAAE,SAAS,SAAS,UAAU,iBAAiB,SAAS;AAC9D,QAAM,WAA4B,CAAA;AAClC,QAAM,kBAAmC,CAAA;AACzC,QAAM,OAAO,MAAM;AACjB,UAAM,eAAe,MAAM;AACzB,YAAM,WAAW,MAAM;AACvB,UAAI,QAAQ,UAAU;AACpB,cAAM,eAAeA,wBAAsC;AAAA,UACzD,MAAM;AAAA,UACN,MAAM,UAAU,QAAQ;AAAA,QAAA,CACzB;AAED,aAAK,YAAY;AAEjB,YAAI,aAAa,UAAU,KAAK;AAC9B,gBAAM,iBAAiB,UAAU,QAAQ;AAAA,YACvC,IAAI,mBAAmB;AAAA,UAAA;AAEzB,cAAI,gBAAgB;AAClB,2BAAe,aAAa,aAAa,OAAO;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,iBAAA;AAAA,EACF;AACA,MAAI,sBAAqC;AAEzC,MAAI,WAAW,mBAAmB,aAAa;AAC7C,aAAS,KAAKC,KAAa,EAAE,GAAG,OAAO,SAAS,cAAc,MAAA,CAAO,CAAC;AAAA,EACxE;AAEA,MAAI,iBAAiB;AACnB,UAAMC,mBAAiBC,eAAwB;AAAA,MAC7C,SAAS;AAAA,MACT,UAAU;AAAA,MACV,cAAc;AAAA,MACd,cAAc;AAAA,QACZ,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QAER,CAAC,UAAU,GAAG;AAAA,UACZ,SAAS;AAAA,UACT,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,YACE;AAAA,QAAA;AAAA,QAGJ,CAAC,6BAA6B,GAAG;AAAA,UAC/B,YACE;AAAA,QAAA;AAAA,QAGJ,CAAC,KAAK,GAAG;AAAA,UACP,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF,CACD;AACD,aAAS,KAAKD,gBAAc;AAC5B,0BAAsBA,iBAAe,QAAQ;AAAA,EAC/C;AAEA,MAAI,UAAU;AACZ,oBAAgB;AAAA,MACdE,mBAAuC;AAAA,QACrC,SAAS,SAAS,cAAc,KAAK;AAAA,QACrC,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAW;AAAA,UAAA;AAAA,UAEb,cAAc;AAAA,YACZ,WAAW,GAAG,OAAO,MAAM,QAAQ,GAAG;AAAA,UAAA;AAAA,QACxC;AAAA,QAEF,UAAU,CAAC,QAAQ;AAAA,MAAA,CACpB;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS;AACX,UAAM,eAAeC,UAAuB;AAAA,MAC1C,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,cAAc,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,UAExC,SAAS;AAAA,YACP,MAAM,GAAG,OAAO,MAAM,MAAM,GAAG;AAAA,UAAA;AAAA,QACjC;AAAA,MACF;AAAA,IACF,CACD;AAED,iBAAa,QAAQ,YAAYC;AACjC,oBAAgB,KAAK,YAAY;AAAA,EACnC;AAEA,kBAAgB;AAAA,IACdC,aAAwB;AAAA,MACtB,GAAG;AAAA,MACH,aAAa;AAAA,IAAA,CACd;AAAA,EAAA;AAGH,QAAM,cAAcF,UAAuB;AAAA,IACzC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,cAAc,GAAG,UAAU,OAAO,MAAM,QAAQ,KAAK,IAAI,CAAC;AAAA,MAAA;AAAA,IAC5D;AAAA,IAEF,UAAU;AAAA,MACRA,UAAuB;AAAA,QACrB,UAAU;AAAA,QACV,WAAW;AAAA,QACX,eAAe;AAAA,UACb,SAAS;AAAA,YACP,UAAU,GAAG,OAAO,MAAM,QAAQ,SAAS,QAAQ;AAAA,YACnD,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQ;AAAA,YACR,UAAU;AAAA,UAAA;AAAA,QACZ;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EACH,CACD;AAED,QAAM,YAAYA,UAAuB;AAAA,IACvC,WAAW;AAAA,IACX,UAAU;AAAA,MACRA,UAAuB;AAAA,QACrB,WAAW;AAAA,QACX,UAAU,CAAC,GAAG,UAAU,WAAW;AAAA,QACnC,eAAe;AAAA,UACb,SAAS;AAAA,YACP,UAAU;AAAA,YACV,SAAS,GAAG,OAAO,MAAM,QAAQ,EAAE,IAAI,OAAO,MAAM,QAAQ,EAAE;AAAA,YAC9D,YAAY,GAAG,OAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,YAC1C,SAAS;AAAA,YACT,eAAe;AAAA,YACf,gBAAgB;AAAA,YAChB,WAAW;AAAA,YACX,QAAQ;AAAA,YACR,UAAU;AAAA,YAEV,GAAGG;AAAAA,cACD;AAAA,cACA,OAAO,MAAM,MAAM,iBAAiB,OAAO;AAAA,cAC3C;AAAA,gBACE,YAAY,GAAG,OAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,gBAC1C,WAAW;AAAA,cAAA;AAAA,YACb;AAAA,UACF;AAAA,QACF;AAAA,MACF,CACD;AAAA,IAAA;AAAA,IAEH,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,eAAe;AAAA,QAEf,CAAC,YAAY,mBAAmB,qBAAqB,mBAAmB,SAAS,GAC/E;AAAA,UACE,SAAS;AAAA,QAAA;AAAA,QAGb,CAAC,0BAA0B,GAAG;AAAA,UAC5B,WAAW;AAAA,UACX,YAAY;AAAA,QAAA;AAAA,MACd;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"image.mjs","sources":["../../../../source/composite/card/overlay/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { truncateTextBasedOnSize } from '@universityofmaryland/web-utilities-library/string';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { actions, assets, textLockup } from 'atomic';\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 = 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: `${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: `${token.spacing.xs}`,\n\n          '& svg': {\n            fill: `${token.color.red}`,\n          },\n        },\n      },\n    });\n\n    quoteWrapper.element.innerHTML = iconQuote;\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 ? 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: `${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: `${token.spacing.lg} ${token.spacing.md}`,\n            paddingTop: `${token.spacing['4xl']}`,\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'flex-end',\n            minHeight: '360px',\n            height: '100%',\n            overflow: 'hidden',\n\n            ...createMediaQuery(\n              'min-width',\n              token.media.breakpointValues.medium.min,\n              {\n                paddingTop: `${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":["actions.icon","imageContainer","assets.image.background","ElementModel.layout.backgroundBoxWhite","ElementModel.createDiv","iconQuote","textLockup.smallScaling"],"mappings":"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"}

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

@@ -1,19 +1,30 @@
 "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("@universityofmaryland/web-styles-library/token");
+require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-utilities-library/media");
+require("@universityofmaryland/web-utilities-library/dom");
+require("@universityofmaryland/web-icons-library/controls");
+require("@universityofmaryland/web-icons-library/communication");
+require("@universityofmaryland/web-icons-library/files");
+require("@universityofmaryland/web-icons-library/brand");
 require("../../../model/modifiers/index.js");
+require("@universityofmaryland/web-styles-library");
 require("../../../model/elements/headline.js");
+require("@universityofmaryland/web-icons-library/arrows");
 require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
 require("../../../atomic/animations/brand/card-stack.js");
+require("@universityofmaryland/web-utilities-library/performance");
 const observedAutoPlay = require("../../../atomic/assets/video/observed-auto-play.js");
+require("@universityofmaryland/web-icons-library/location");
+require("@universityofmaryland/web-icons-library/calendar");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");
 require("../../../atomic/layout/person/columns.js");
+require("@universityofmaryland/web-icons-library/social");
 require("../../../atomic/text-lockup/date.js");
 require("../../../atomic/text-lockup/small.js");
+require("@universityofmaryland/web-styles-library/typography");
 const block = (props) => (() => observedAutoPlay({
   ...props,
   additionalElementStyles: {

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

@@ -1 +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;;"}
+{"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

@@ -1,18 +1,29 @@
-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 "@universityofmaryland/web-styles-library/token";
+import "@universityofmaryland/web-styles-library/element";
+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 "../../../model/modifiers/index.mjs";
+import "@universityofmaryland/web-styles-library";
 import "../../../model/elements/headline.mjs";
+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 "@universityofmaryland/web-utilities-library/performance";
 import observedAutoPlay from "../../../atomic/assets/video/observed-auto-play.mjs";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
 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";
+import "@universityofmaryland/web-styles-library/typography";
 const block = (props) => (() => observedAutoPlay({
   ...props,
   additionalElementStyles: {

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

@@ -1 +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;"}
+{"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/carousel/cards/index.js

@@ -1,6 +1,6 @@
 "use strict";
 const Styles = require("@universityofmaryland/web-styles-library");
-const index$1 = require("../../../utilities/theme/index.js");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
 const blocks = require("../elements/blocks.js");
 require("../elements/full-screen.js");
 require("../elements/overlay.js");
@@ -72,13 +72,13 @@ const OverwriteCarouselStyles = `
   }
 `;
 const HeadlineStyles = `
-  ${index$1.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
     [`.${INTRO_CONTAINER_HEADLINE}`]: Styles.typography.sans.largest
   }
 })}
 
-  ${index$1.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
     [`.${INTRO_CONTAINER_HEADLINE} *`]: Styles.typography.sans.largest
   }
@@ -96,13 +96,13 @@ const TextStyles = `
     margin-top: ${Styles.token.spacing.md};
   }
 
-  ${index$1.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
     [`.${INTRO_CONTAINER_TEXT}`]: Styles.element.text.rich.advancedDark
   }
 })}
 
-  ${index$1.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
     [`.${INTRO_CONTAINER_TEXT}`]: Styles.typography.sans.medium
   }
@@ -141,7 +141,7 @@ const IntroContainer = `
 const ContainerLock = `
   .${CAROUSEL_LOCK} {
     position: relative;
-    ${index$1.convertJSSObjectToStyles({
+    ${styles.jssToCSS({
   styleObj: Styles.layout.space.horizontal.larger
 })}
   }

package/dist/composite/carousel/cards/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/cards/index.ts"],"sourcesContent":["import {\n  element,\n  layout,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselCardsRequirements = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  slide: HTMLElement;\n  shadowRef?: HTMLElement;\n  cards: HTMLElement[];\n};\n\nconst MEDIUM = 768;\nconst LARGE = 1024;\n\nconst BACKGROUND_TEXTURE = `<svg aria-hidden=\"true\" width=\"1599\" height=\"618\" viewBox=\"0 0 1599 618\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n\"><mask id=\"mask0_2135_11278\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"1600\" height=\"618\"><rect width=\"1600\" height=\"618\" fill=\"#242424\"></rect></mask><g mask=\"url(#mask0_2135_11278)\"><g opacity=\"0.5\"><mask id=\"mask1_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"-56\" width=\"1823\" height=\"408\"><path d=\"M-17 351.98V-56H1806V351.98\" fill=\"white\"></path></mask><g mask=\"url(#mask1_2135_11278)\"><path d=\"M807.562 -68.3515L-433.759 1173.58L-217.501 1389.94L1023.82 148.012L807.562 -68.3515Z\" fill=\"#262626\"></path><path d=\"M360.649 -82.8017L-880.672 1159.13L-649.997 1389.92L591.324 147.986L360.649 -82.8017Z\" fill=\"black\"></path><path d=\"M1154.8 1173.26L-533.139 -515.499L-677.311 -371.256L1010.63 1317.51L1154.8 1173.26Z\" fill=\"#262626\"></path><path d=\"M2162.77 710.525L1312.18 -140.478L1168.01 3.76505L2018.6 854.768L2162.77 710.525Z\" fill=\"black\"></path><path d=\"M1312.16 -140.485L202.096 -1251.09L57.9241 -1106.85L1167.99 3.75794L1312.16 -140.485Z\" fill=\"#EDEDED\"></path><path d=\"M2133.89 -1251.07L1023.83 -140.458L1168 3.78455L2278.07 -1106.83L2133.89 -1251.07Z\" fill=\"#383838\"></path><path d=\"M591.343 147.968L-634.061 -1078.04L-864.736 -847.248L360.668 378.756L591.343 147.968Z\" fill=\"black\"></path><path d=\"M1023.82 147.97L-217.503 -1093.96L-433.761 -877.595L807.559 364.333L1023.82 147.97Z\" fill=\"#383838\"></path></g><mask id=\"mask2_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"351\" width=\"1823\" height=\"780\"><path d=\"M-17 351.938V753.629L837.67 753.672L845.662 1130.18L1806 1130.26V352.094\" fill=\"white\"></path></mask><g mask=\"url(#mask2_2135_11278)\"><path d=\"M1023.81 555.952L-217.506 -685.977L-433.764 -469.613L807.557 772.316L1023.81 555.952Z\" fill=\"#262626\"></path><path d=\"M591.347 555.967L-649.973 -685.962L-880.648 -455.174L360.672 786.755L591.347 555.967Z\" fill=\"black\"></path><path d=\"M1010.63 -613.543L-677.305 1075.22L-533.133 1219.46L1154.8 -469.3L1010.63 -613.543Z\" fill=\"#262626\"></path><path d=\"M1760.63 110.929L910.039 961.932L1054.21 1106.17L1904.8 255.172L1760.63 110.929Z\" fill=\"black\"></path><path d=\"M360.674 325.168L-864.73 1551.17L-634.055 1781.96L591.349 555.956L360.674 325.168Z\" fill=\"black\"></path><path d=\"M807.565 339.631L-433.756 1581.56L-217.498 1797.92L1023.82 555.995L807.565 339.631Z\" fill=\"#383838\"></path></g></g></g></svg>`;\n\nconst ELEMENT_NAME = 'umd-element-carousel-cards';\n\nconst ELEMENT_DECLARATION = 'carousel-cards-declaration';\nconst CAROUSEL_CONTAINER = 'element-carousel-container';\nconst CAROUSEL_LOCK = 'element-carousel-lock';\n\nconst INTRO_CONTAINER = 'carousel-cards-intro-container';\nconst INTRO_CONTAINER_LOCK = 'carousel-cards-intro-container-lock';\nconst INTRO_CONTAINER_HEADLINE = 'carousel-cards-intro-container-headline';\nconst INTRO_CONTAINER_TEXT = 'carousel-cards-intro-container-text';\nconst INTRO_CONTAINER_CTA = 'carousel-cards-intro-container-cta';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_DECLARATION = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.declaration}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.container}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.button}`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {\n      padding-bottom: 60px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_DECLARATION} {\n      width: 60%;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      bottom: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      top: 50%;\n      transform: translateY(-50%);\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      left: 49px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      right: -52px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: -52px;\n    }\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE}`]: typography.sans.largest,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE} *`]: typography.sans.largest,\n    },\n  })}\n\n  .${INTRO_CONTAINER_HEADLINE},\n  .${INTRO_CONTAINER_HEADLINE} * {\n    color: ${token.color.white};\n    font-weight: 800;\n    text-transform: uppercase;\n  }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n  * + .${INTRO_CONTAINER_TEXT} {\n    margin-top: ${token.spacing.md};\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: typography.sans.medium,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst ActionStyles = `\n  * + .${INTRO_CONTAINER_CTA} {\n    margin-top: ${token.spacing.md};\n  }\n\n  .${INTRO_CONTAINER_CTA} a {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst IntroContainer = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${INTRO_CONTAINER} {\n      margin-bottom: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} {\n      width: calc(40% - ${token.spacing['2xl']});\n      padding-right: ${token.spacing['2xl']};\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} .${INTRO_CONTAINER_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerLock = `\n  .${CAROUSEL_LOCK} {\n    position: relative;\n    ${Utility.theme.convertJSSObjectToStyles({\n      styleObj: layout.space.horizontal.larger,\n    })}\n  }\n\n  @media (max-width: ${MEDIUM - 1}px) {\n    .${CAROUSEL_LOCK} {\n      padding-right: 0;\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${CAROUSEL_LOCK} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n  }\n\n  @media umd-carousel-card (max-width: ${LARGE - 1}px) {\n    .${CAROUSEL_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerStyles = `\n  @keyframes card-carousel-slide-in {\n    from { transform: translateX(-25vw); }\n    to { transform: translateX(0);}\n  }\n\n  .${CAROUSEL_CONTAINER} {\n    background-color: ${token.color.black};\n    padding: ${token.spacing['3xl']} 0;\n    position: relative;\n    overflow: clip;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: 300px) {\n    .${CAROUSEL_CONTAINER} {\n      display: none;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['4xl']} 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['max']} 0;\n    }\n  }\n\n  .${CAROUSEL_CONTAINER} > svg {\n    width: auto;\n    height: 100%;\n    object-fit: cover;\n    position: absolute;\n    top: 0;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${CAROUSEL_CONTAINER} > svg {\n        animation: card-carousel-slide-in ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: 0;\n        animation-range-end: 100vh;\n        transform: translateX(-15vw);\n      }\n    }\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_CARDS_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_DECLARATION} * {\n    color: ${token.color.white};\n  }\n  \n  ${carouselElements.blocks.Styles}\n  ${ContainerStyles}\n  ${ContainerLock}\n  ${HeadlineStyles}\n  ${TextStyles}\n  ${ActionStyles}\n  ${IntroContainer}\n  ${OverwriteCarouselStyles}\n`;\n\nconst CreateIntro = (props: TypeCarouselCardsRequirements) => {\n  const { headline, text, actions } = props;\n  const introContainer = document.createElement('div');\n  const introWrapper = document.createElement('div');\n\n  introWrapper.classList.add(INTRO_CONTAINER_LOCK);\n\n  if (headline) {\n    headline.classList.add(INTRO_CONTAINER_HEADLINE);\n    introWrapper.appendChild(headline);\n  }\n\n  if (text) {\n    text.classList.add(INTRO_CONTAINER_TEXT);\n    introWrapper.appendChild(text);\n  }\n\n  if (actions) {\n    actions.classList.add(INTRO_CONTAINER_CTA);\n    introWrapper.appendChild(actions);\n  }\n\n  introContainer.classList.add(INTRO_CONTAINER);\n  introContainer.appendChild(introWrapper);\n\n  return introContainer;\n};\n\nexport default (props: TypeCarouselCardsRequirements) =>\n  (() => {\n    const { slide, shadowRef } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n\n    if (slide) slide.style.minHeight = '450px';\n    if (shadowRef) shadowRef.style.minHeight = '450px';\n\n    const carouselContainer = carouselElements.blocks.CreateElement({\n      ...props,\n      blocks: props.cards,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 650,\n        tabletBreakpoint: 1024,\n        desktopBreakpoint: 1024,\n        mobileCount: 1,\n        tabletCount: 2,\n        desktopCount: 2,\n        maxCount: 2,\n        showMobileHint: true,\n        showHint: false,\n      },\n    });\n    const introContainer = CreateIntro(props);\n\n    wrapper.classList.add(CAROUSEL_LOCK);\n    wrapper.appendChild(introContainer);\n    wrapper.appendChild(carouselContainer.element);\n\n    container.classList.add(CAROUSEL_CONTAINER);\n    container.innerHTML = BACKGROUND_TEXTURE;\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    return {\n      element: declaration,\n      styles: STYLES_CAROUSEL_CARDS_ELEMENT,\n      events: {\n        resize: carouselContainer.events.resize,\n        load: carouselContainer.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks","Utility.theme.convertJSSObjectToStyles","typography","token","element","layout"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/cards/index.ts"],"sourcesContent":["import {\n  element,\n  layout,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselCardsRequirements = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  slide: HTMLElement;\n  shadowRef?: HTMLElement;\n  cards: HTMLElement[];\n};\n\nconst MEDIUM = 768;\nconst LARGE = 1024;\n\nconst BACKGROUND_TEXTURE = `<svg aria-hidden=\"true\" width=\"1599\" height=\"618\" viewBox=\"0 0 1599 618\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n\"><mask id=\"mask0_2135_11278\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"1600\" height=\"618\"><rect width=\"1600\" height=\"618\" fill=\"#242424\"></rect></mask><g mask=\"url(#mask0_2135_11278)\"><g opacity=\"0.5\"><mask id=\"mask1_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"-56\" width=\"1823\" height=\"408\"><path d=\"M-17 351.98V-56H1806V351.98\" fill=\"white\"></path></mask><g mask=\"url(#mask1_2135_11278)\"><path d=\"M807.562 -68.3515L-433.759 1173.58L-217.501 1389.94L1023.82 148.012L807.562 -68.3515Z\" fill=\"#262626\"></path><path d=\"M360.649 -82.8017L-880.672 1159.13L-649.997 1389.92L591.324 147.986L360.649 -82.8017Z\" fill=\"black\"></path><path d=\"M1154.8 1173.26L-533.139 -515.499L-677.311 -371.256L1010.63 1317.51L1154.8 1173.26Z\" fill=\"#262626\"></path><path d=\"M2162.77 710.525L1312.18 -140.478L1168.01 3.76505L2018.6 854.768L2162.77 710.525Z\" fill=\"black\"></path><path d=\"M1312.16 -140.485L202.096 -1251.09L57.9241 -1106.85L1167.99 3.75794L1312.16 -140.485Z\" fill=\"#EDEDED\"></path><path d=\"M2133.89 -1251.07L1023.83 -140.458L1168 3.78455L2278.07 -1106.83L2133.89 -1251.07Z\" fill=\"#383838\"></path><path d=\"M591.343 147.968L-634.061 -1078.04L-864.736 -847.248L360.668 378.756L591.343 147.968Z\" fill=\"black\"></path><path d=\"M1023.82 147.97L-217.503 -1093.96L-433.761 -877.595L807.559 364.333L1023.82 147.97Z\" fill=\"#383838\"></path></g><mask id=\"mask2_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"351\" width=\"1823\" height=\"780\"><path d=\"M-17 351.938V753.629L837.67 753.672L845.662 1130.18L1806 1130.26V352.094\" fill=\"white\"></path></mask><g mask=\"url(#mask2_2135_11278)\"><path d=\"M1023.81 555.952L-217.506 -685.977L-433.764 -469.613L807.557 772.316L1023.81 555.952Z\" fill=\"#262626\"></path><path d=\"M591.347 555.967L-649.973 -685.962L-880.648 -455.174L360.672 786.755L591.347 555.967Z\" fill=\"black\"></path><path d=\"M1010.63 -613.543L-677.305 1075.22L-533.133 1219.46L1154.8 -469.3L1010.63 -613.543Z\" fill=\"#262626\"></path><path d=\"M1760.63 110.929L910.039 961.932L1054.21 1106.17L1904.8 255.172L1760.63 110.929Z\" fill=\"black\"></path><path d=\"M360.674 325.168L-864.73 1551.17L-634.055 1781.96L591.349 555.956L360.674 325.168Z\" fill=\"black\"></path><path d=\"M807.565 339.631L-433.756 1581.56L-217.498 1797.92L1023.82 555.995L807.565 339.631Z\" fill=\"#383838\"></path></g></g></g></svg>`;\n\nconst ELEMENT_NAME = 'umd-element-carousel-cards';\n\nconst ELEMENT_DECLARATION = 'carousel-cards-declaration';\nconst CAROUSEL_CONTAINER = 'element-carousel-container';\nconst CAROUSEL_LOCK = 'element-carousel-lock';\n\nconst INTRO_CONTAINER = 'carousel-cards-intro-container';\nconst INTRO_CONTAINER_LOCK = 'carousel-cards-intro-container-lock';\nconst INTRO_CONTAINER_HEADLINE = 'carousel-cards-intro-container-headline';\nconst INTRO_CONTAINER_TEXT = 'carousel-cards-intro-container-text';\nconst INTRO_CONTAINER_CTA = 'carousel-cards-intro-container-cta';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_DECLARATION = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.declaration}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.container}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.button}`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {\n      padding-bottom: 60px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_DECLARATION} {\n      width: 60%;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      bottom: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      top: 50%;\n      transform: translateY(-50%);\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      left: 49px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      right: -52px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: -52px;\n    }\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE}`]: typography.sans.largest,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE} *`]: typography.sans.largest,\n    },\n  })}\n\n  .${INTRO_CONTAINER_HEADLINE},\n  .${INTRO_CONTAINER_HEADLINE} * {\n    color: ${token.color.white};\n    font-weight: 800;\n    text-transform: uppercase;\n  }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n  * + .${INTRO_CONTAINER_TEXT} {\n    margin-top: ${token.spacing.md};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: typography.sans.medium,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst ActionStyles = `\n  * + .${INTRO_CONTAINER_CTA} {\n    margin-top: ${token.spacing.md};\n  }\n\n  .${INTRO_CONTAINER_CTA} a {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst IntroContainer = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${INTRO_CONTAINER} {\n      margin-bottom: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} {\n      width: calc(40% - ${token.spacing['2xl']});\n      padding-right: ${token.spacing['2xl']};\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} .${INTRO_CONTAINER_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerLock = `\n  .${CAROUSEL_LOCK} {\n    position: relative;\n    ${jssToCSS({\n      styleObj: layout.space.horizontal.larger,\n    })}\n  }\n\n  @media (max-width: ${MEDIUM - 1}px) {\n    .${CAROUSEL_LOCK} {\n      padding-right: 0;\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${CAROUSEL_LOCK} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n  }\n\n  @media umd-carousel-card (max-width: ${LARGE - 1}px) {\n    .${CAROUSEL_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerStyles = `\n  @keyframes card-carousel-slide-in {\n    from { transform: translateX(-25vw); }\n    to { transform: translateX(0);}\n  }\n\n  .${CAROUSEL_CONTAINER} {\n    background-color: ${token.color.black};\n    padding: ${token.spacing['3xl']} 0;\n    position: relative;\n    overflow: clip;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: 300px) {\n    .${CAROUSEL_CONTAINER} {\n      display: none;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['4xl']} 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['max']} 0;\n    }\n  }\n\n  .${CAROUSEL_CONTAINER} > svg {\n    width: auto;\n    height: 100%;\n    object-fit: cover;\n    position: absolute;\n    top: 0;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${CAROUSEL_CONTAINER} > svg {\n        animation: card-carousel-slide-in ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: 0;\n        animation-range-end: 100vh;\n        transform: translateX(-15vw);\n      }\n    }\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_CARDS_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_DECLARATION} * {\n    color: ${token.color.white};\n  }\n  \n  ${carouselElements.blocks.Styles}\n  ${ContainerStyles}\n  ${ContainerLock}\n  ${HeadlineStyles}\n  ${TextStyles}\n  ${ActionStyles}\n  ${IntroContainer}\n  ${OverwriteCarouselStyles}\n`;\n\nconst CreateIntro = (props: TypeCarouselCardsRequirements) => {\n  const { headline, text, actions } = props;\n  const introContainer = document.createElement('div');\n  const introWrapper = document.createElement('div');\n\n  introWrapper.classList.add(INTRO_CONTAINER_LOCK);\n\n  if (headline) {\n    headline.classList.add(INTRO_CONTAINER_HEADLINE);\n    introWrapper.appendChild(headline);\n  }\n\n  if (text) {\n    text.classList.add(INTRO_CONTAINER_TEXT);\n    introWrapper.appendChild(text);\n  }\n\n  if (actions) {\n    actions.classList.add(INTRO_CONTAINER_CTA);\n    introWrapper.appendChild(actions);\n  }\n\n  introContainer.classList.add(INTRO_CONTAINER);\n  introContainer.appendChild(introWrapper);\n\n  return introContainer;\n};\n\nexport default (props: TypeCarouselCardsRequirements) =>\n  (() => {\n    const { slide, shadowRef } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n\n    if (slide) slide.style.minHeight = '450px';\n    if (shadowRef) shadowRef.style.minHeight = '450px';\n\n    const carouselContainer = carouselElements.blocks.CreateElement({\n      ...props,\n      blocks: props.cards,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 650,\n        tabletBreakpoint: 1024,\n        desktopBreakpoint: 1024,\n        mobileCount: 1,\n        tabletCount: 2,\n        desktopCount: 2,\n        maxCount: 2,\n        showMobileHint: true,\n        showHint: false,\n      },\n    });\n    const introContainer = CreateIntro(props);\n\n    wrapper.classList.add(CAROUSEL_LOCK);\n    wrapper.appendChild(introContainer);\n    wrapper.appendChild(carouselContainer.element);\n\n    container.classList.add(CAROUSEL_CONTAINER);\n    container.innerHTML = BACKGROUND_TEXTURE;\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    return {\n      element: declaration,\n      styles: STYLES_CAROUSEL_CARDS_ELEMENT,\n      events: {\n        resize: carouselContainer.events.resize,\n        load: carouselContainer.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks","jssToCSS","typography","token","element","layout"],"mappings":"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"}

package/dist/composite/carousel/cards/index.mjs

@@ -1,5 +1,5 @@
 import { token, typography, element, layout } from "@universityofmaryland/web-styles-library";
-import { convertJSSObjectToStyles } from "../../../utilities/theme/index.mjs";
+import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
 import blocks from "../elements/blocks.mjs";
 import "../elements/full-screen.mjs";
 import "../elements/overlay.mjs";
@@ -71,13 +71,13 @@ const OverwriteCarouselStyles = `
   }
 `;
 const HeadlineStyles = `
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`.${INTRO_CONTAINER_HEADLINE}`]: typography.sans.largest
   }
 })}
 
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`.${INTRO_CONTAINER_HEADLINE} *`]: typography.sans.largest
   }
@@ -95,13 +95,13 @@ const TextStyles = `
     margin-top: ${token.spacing.md};
   }
 
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`.${INTRO_CONTAINER_TEXT}`]: element.text.rich.advancedDark
   }
 })}
 
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`.${INTRO_CONTAINER_TEXT}`]: typography.sans.medium
   }
@@ -140,7 +140,7 @@ const IntroContainer = `
 const ContainerLock = `
   .${CAROUSEL_LOCK} {
     position: relative;
-    ${convertJSSObjectToStyles({
+    ${jssToCSS({
   styleObj: layout.space.horizontal.larger
 })}
   }