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

package/dist/atomic/text-lockup/person.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"person.mjs","sources":["../../../source/atomic/text-lockup/person.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { type PersonTextLockupProps } from '../_types';\n\nexport default ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupProps) => {\n  const container = new ElementBuilder()\n    .withClassName('text-lockup-person-container')\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    });\n\n  if (nameComposite && !name) {\n    container.withChild(nameComposite);\n  }\n\n  if (name) {\n    const headlineStyles = {\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const nameElement = new ElementBuilder(name)\n      .styled(headlineStyles)\n      .withStyles({\n        element: {\n          fontWeight: '700',\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(nameElement);\n  }\n\n  if (job) {\n    const jobElement = new ElementBuilder(job)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          lineHeight: `1.25em`,\n\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(jobElement);\n  }\n\n  if (association) {\n    const associationElement = new ElementBuilder(association)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          lineHeight: '1.2em',\n          display: 'block',\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n\n          [`& a:hover, a:focus`]: {\n            textDecoration: 'underline',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(associationElement);\n  }\n\n  if (pronouns) {\n    pronouns.innerHTML = `<i>${pronouns.innerHTML}</i>`;\n    const pronounsElement = new ElementBuilder(pronouns)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(pronounsElement);\n  }\n\n  if (subText) {\n    const subTextElement = new ElementBuilder(subText)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n        },\n        siblingAfter: {\n          marginTop: '4px',\n        },\n      })\n      .build();\n\n    container.withChild(subTextElement);\n  }\n\n  if (actions) {\n    const actionsElement = new ElementBuilder(actions)\n      .styled(layout.grid.inline.tabletRows)\n      .withStyles({\n        element: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .build();\n\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["animationStyles"],"mappings":"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"}
+{"version":3,"file":"person.mjs","sources":["../../../source/atomic/text-lockup/person.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { type PersonTextLockupProps } from '../_types';\n\nexport default ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupProps) => {\n  const container = new ElementBuilder()\n    .withClassName('text-lockup-person-container')\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    });\n\n  if (nameComposite && !name) {\n    container.withChild(nameComposite);\n  }\n\n  if (name) {\n    const headlineStyles = {\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const nameElement = new ElementBuilder(name)\n      .styled(headlineStyles)\n      .withStyles({\n        element: {\n          fontWeight: '700',\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(nameElement);\n  }\n\n  if (job) {\n    const jobElement = new ElementBuilder(job)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          lineHeight: `1.25em`,\n\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(jobElement);\n  }\n\n  if (association) {\n    const associationElement = new ElementBuilder(association)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          lineHeight: '1.2em',\n          display: 'block',\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n\n          [`& a:hover, a:focus`]: {\n            textDecoration: 'underline',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(associationElement);\n  }\n\n  if (pronouns) {\n    pronouns.innerHTML = `<i>${pronouns.innerHTML}</i>`;\n    const pronounsElement = new ElementBuilder(pronouns)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n\n          [`&  *`]: {\n            color: 'currentColor',\n          },\n        },\n      })\n      .build();\n\n    container.withChild(pronounsElement);\n  }\n\n  if (subText) {\n    const subTextElement = new ElementBuilder(subText)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n        },\n        siblingAfter: {\n          marginTop: '4px',\n        },\n      })\n      .build();\n\n    container.withChild(subTextElement);\n  }\n\n  if (actions) {\n    const actionsElement = new ElementBuilder(actions)\n      .styled(layout.grid.inline.tabletRows)\n      .withStyles({\n        element: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .build();\n\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["animationStyles"],"mappings":"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"}

package/dist/composite/carousel/elements/overlay.js

@@ -4,6 +4,8 @@ require("./blocks.js");
 const fullScreen = require("./full-screen.js");
 const image = require("./image.js");
 const image$1 = require("../../../layout/image.js");
+require("@universityofmaryland/web-builder-library");
+require("@universityofmaryland/web-styles-library");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/composite/carousel/elements/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as carouselElements from '../elements';\nimport { Image as LayoutImage } from 'layout';\n\nconst ELEMENT_CAROUSEL_OVERLAY_COINTAINER = 'carousel-overlay-container';\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_OVERLAY_ELEMENT = `\n  ${LayoutImage.Styles}\n  ${OverlayImageContainerStyles}\n`;\n\nconst CreateOverlaySlide = ({ images }: { images: HTMLImageElement[] }) =>\n  images.map((image) => {\n    const slide = document.createElement('div');\n    const imageContainer = document.createElement('div');\n    const imageBlock = LayoutImage.CreateElement({\n      image,\n      showCaption: true,\n    });\n\n    imageContainer.classList.add(ELEMENT_CAROUSEL_OVERLAY_COINTAINER);\n    imageContainer.appendChild(imageBlock);\n\n    slide.appendChild(imageContainer);\n\n    return slide;\n  });\n\nexport default ({ images }: { images: HTMLImageElement[] }) =>\n  (() => {\n    let styles = STYLES_CAROUSEL_OVERLAY_ELEMENT;\n\n    const setFullScreen = (index: number) => {\n      let canMove = true;\n\n      const checkKeyEvents = (event: KeyboardEvent) => {\n        if (!canMove) return;\n        canMove = false;\n        if (event.key == 'ArrowLeft') overlayCarousel.events.EventSlideLeft();\n        if (event.key == 'ArrowRight') overlayCarousel.events.EventSlideRight();\n\n        setTimeout(() => {\n          canMove = true;\n        }, 700);\n      };\n\n      overlayCarousel.events.EventMoveTo(index);\n      setTimeout(() => fixedFullScreen.events.show(), 100);\n\n      setTimeout(() => {\n        overlayCarousel.events.EventResize();\n      }, 100);\n\n      isFullScreenEvents = window.addEventListener('keyup', checkKeyEvents);\n    };\n\n    const overlaySlides = CreateOverlaySlide({ images });\n\n    const overlayCarousel = carouselElements.image({\n      slides: overlaySlides,\n      maxHeight: (window.innerHeight / 10) * 8,\n    });\n\n    styles += overlayCarousel.styles;\n\n    const fixedFullScreen = carouselElements.fullScreen({\n      content: overlayCarousel.element,\n      callback: () => {\n        if (isFullScreenEvents)\n          window.removeEventListener('keyup', isFullScreenEvents);\n      },\n    });\n\n    styles += fixedFullScreen.styles;\n\n    let isFullScreenEvents: any = null;\n\n    return {\n      element: fixedFullScreen.element,\n      styles,\n      events: {\n        setFullScreen,\n      },\n    };\n  })();\n"],"names":["token","LayoutImage","image","carouselElements.image","carouselElements.fullScreen"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,sCAAsC;AAG5C,MAAM,8BAA8B;AAAA,KAC/B,mCAAmC;AAAA;AAAA;AAAA;AAAA,wBAIhBA,iBAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,KAGxC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,kCAAkC;AAAA,IACpCC,QAAY,MAAM;AAAA,IAClB,2BAA2B;AAAA;AAG/B,MAAM,qBAAqB,CAAC,EAAE,OAAA,MAC5B,OAAO,IAAI,CAACC,WAAU;AACpB,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,aAAaD,QAAY,cAAc;AAAA,IAC3C,OAAAC;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,iBAAe,UAAU,IAAI,mCAAmC;AAChE,iBAAe,YAAY,UAAU;AAErC,QAAM,YAAY,cAAc;AAEhC,SAAO;AACT,CAAC;AAEH,MAAA,UAAe,CAAC,EAAE,OAAA,OACf,MAAM;AACL,MAAI,SAAS;AAEb,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU;AAEd,UAAM,iBAAiB,CAAC,UAAyB;AAC/C,UAAI,CAAC,QAAS;AACd,gBAAU;AACV,UAAI,MAAM,OAAO,YAAa,iBAAgB,OAAO,eAAA;AACrD,UAAI,MAAM,OAAO,aAAc,iBAAgB,OAAO,gBAAA;AAEtD,iBAAW,MAAM;AACf,kBAAU;AAAA,MACZ,GAAG,GAAG;AAAA,IACR;AAEA,oBAAgB,OAAO,YAAY,KAAK;AACxC,eAAW,MAAM,gBAAgB,OAAO,KAAA,GAAQ,GAAG;AAEnD,eAAW,MAAM;AACf,sBAAgB,OAAO,YAAA;AAAA,IACzB,GAAG,GAAG;AAEN,yBAAqB,OAAO,iBAAiB,SAAS,cAAc;AAAA,EACtE;AAEA,QAAM,gBAAgB,mBAAmB,EAAE,QAAQ;AAEnD,QAAM,kBAAkBC,MAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,YAAU,gBAAgB;AAE1B,QAAM,kBAAkBC,WAA4B;AAAA,IAClD,SAAS,gBAAgB;AAAA,IACzB,UAAU,MAAM;AACd,UAAI;AACF,eAAO,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D;AAAA,EAAA,CACD;AAED,YAAU,gBAAgB;AAE1B,MAAI,qBAA0B;AAE9B,SAAO;AAAA,IACL,SAAS,gBAAgB;AAAA,IACzB;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;;"}
+{"version":3,"file":"overlay.js","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as carouselElements from '../elements';\nimport { Image as LayoutImage } from 'layout';\n\nconst ELEMENT_CAROUSEL_OVERLAY_COINTAINER = 'carousel-overlay-container';\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_OVERLAY_ELEMENT = `\n  ${LayoutImage.Styles}\n  ${OverlayImageContainerStyles}\n`;\n\nconst CreateOverlaySlide = ({ images }: { images: HTMLImageElement[] }) =>\n  images.map((image) => {\n    const slide = document.createElement('div');\n    const imageContainer = document.createElement('div');\n    const imageBlock = LayoutImage.CreateElement({\n      image,\n      showCaption: true,\n    });\n\n    imageContainer.classList.add(ELEMENT_CAROUSEL_OVERLAY_COINTAINER);\n    imageContainer.appendChild(imageBlock);\n\n    slide.appendChild(imageContainer);\n\n    return slide;\n  });\n\nexport default ({ images }: { images: HTMLImageElement[] }) =>\n  (() => {\n    let styles = STYLES_CAROUSEL_OVERLAY_ELEMENT;\n\n    const setFullScreen = (index: number) => {\n      let canMove = true;\n\n      const checkKeyEvents = (event: KeyboardEvent) => {\n        if (!canMove) return;\n        canMove = false;\n        if (event.key == 'ArrowLeft') overlayCarousel.events.EventSlideLeft();\n        if (event.key == 'ArrowRight') overlayCarousel.events.EventSlideRight();\n\n        setTimeout(() => {\n          canMove = true;\n        }, 700);\n      };\n\n      overlayCarousel.events.EventMoveTo(index);\n      setTimeout(() => fixedFullScreen.events.show(), 100);\n\n      setTimeout(() => {\n        overlayCarousel.events.EventResize();\n      }, 100);\n\n      isFullScreenEvents = window.addEventListener('keyup', checkKeyEvents);\n    };\n\n    const overlaySlides = CreateOverlaySlide({ images });\n\n    const overlayCarousel = carouselElements.image({\n      slides: overlaySlides,\n      maxHeight: (window.innerHeight / 10) * 8,\n    });\n\n    styles += overlayCarousel.styles;\n\n    const fixedFullScreen = carouselElements.fullScreen({\n      content: overlayCarousel.element,\n      callback: () => {\n        if (isFullScreenEvents)\n          window.removeEventListener('keyup', isFullScreenEvents);\n      },\n    });\n\n    styles += fixedFullScreen.styles;\n\n    let isFullScreenEvents: any = null;\n\n    return {\n      element: fixedFullScreen.element,\n      styles,\n      events: {\n        setFullScreen,\n      },\n    };\n  })();\n"],"names":["token","LayoutImage","image","carouselElements.image","carouselElements.fullScreen"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,sCAAsC;AAG5C,MAAM,8BAA8B;AAAA,KAC/B,mCAAmC;AAAA;AAAA;AAAA;AAAA,wBAIhBA,iBAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,KAGxC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,kCAAkC;AAAA,IACpCC,QAAY,MAAM;AAAA,IAClB,2BAA2B;AAAA;AAG/B,MAAM,qBAAqB,CAAC,EAAE,OAAA,MAC5B,OAAO,IAAI,CAACC,WAAU;AACpB,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,aAAaD,QAAY,cAAc;AAAA,IAC3C,OAAAC;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,iBAAe,UAAU,IAAI,mCAAmC;AAChE,iBAAe,YAAY,UAAU;AAErC,QAAM,YAAY,cAAc;AAEhC,SAAO;AACT,CAAC;AAEH,MAAA,UAAe,CAAC,EAAE,OAAA,OACf,MAAM;AACL,MAAI,SAAS;AAEb,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU;AAEd,UAAM,iBAAiB,CAAC,UAAyB;AAC/C,UAAI,CAAC,QAAS;AACd,gBAAU;AACV,UAAI,MAAM,OAAO,YAAa,iBAAgB,OAAO,eAAA;AACrD,UAAI,MAAM,OAAO,aAAc,iBAAgB,OAAO,gBAAA;AAEtD,iBAAW,MAAM;AACf,kBAAU;AAAA,MACZ,GAAG,GAAG;AAAA,IACR;AAEA,oBAAgB,OAAO,YAAY,KAAK;AACxC,eAAW,MAAM,gBAAgB,OAAO,KAAA,GAAQ,GAAG;AAEnD,eAAW,MAAM;AACf,sBAAgB,OAAO,YAAA;AAAA,IACzB,GAAG,GAAG;AAEN,yBAAqB,OAAO,iBAAiB,SAAS,cAAc;AAAA,EACtE;AAEA,QAAM,gBAAgB,mBAAmB,EAAE,QAAQ;AAEnD,QAAM,kBAAkBC,MAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,YAAU,gBAAgB;AAE1B,QAAM,kBAAkBC,WAA4B;AAAA,IAClD,SAAS,gBAAgB;AAAA,IACzB,UAAU,MAAM;AACd,UAAI;AACF,eAAO,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D;AAAA,EAAA,CACD;AAED,YAAU,gBAAgB;AAE1B,MAAI,qBAA0B;AAE9B,SAAO;AAAA,IACL,SAAS,gBAAgB;AAAA,IACzB;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;;"}

package/dist/composite/carousel/elements/overlay.mjs

@@ -3,6 +3,8 @@ import "./blocks.mjs";
 import fullScreen from "./full-screen.mjs";
 import image from "./image.mjs";
 import LayoutImage from "../../../layout/image.mjs";
+import "@universityofmaryland/web-builder-library";
+import "@universityofmaryland/web-styles-library";
 const ELEMENT_CAROUSEL_OVERLAY_COINTAINER = "carousel-overlay-container";
 const OverlayImageContainerStyles = `
   .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {

package/dist/composite/carousel/elements/overlay.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.mjs","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as carouselElements from '../elements';\nimport { Image as LayoutImage } from 'layout';\n\nconst ELEMENT_CAROUSEL_OVERLAY_COINTAINER = 'carousel-overlay-container';\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_OVERLAY_ELEMENT = `\n  ${LayoutImage.Styles}\n  ${OverlayImageContainerStyles}\n`;\n\nconst CreateOverlaySlide = ({ images }: { images: HTMLImageElement[] }) =>\n  images.map((image) => {\n    const slide = document.createElement('div');\n    const imageContainer = document.createElement('div');\n    const imageBlock = LayoutImage.CreateElement({\n      image,\n      showCaption: true,\n    });\n\n    imageContainer.classList.add(ELEMENT_CAROUSEL_OVERLAY_COINTAINER);\n    imageContainer.appendChild(imageBlock);\n\n    slide.appendChild(imageContainer);\n\n    return slide;\n  });\n\nexport default ({ images }: { images: HTMLImageElement[] }) =>\n  (() => {\n    let styles = STYLES_CAROUSEL_OVERLAY_ELEMENT;\n\n    const setFullScreen = (index: number) => {\n      let canMove = true;\n\n      const checkKeyEvents = (event: KeyboardEvent) => {\n        if (!canMove) return;\n        canMove = false;\n        if (event.key == 'ArrowLeft') overlayCarousel.events.EventSlideLeft();\n        if (event.key == 'ArrowRight') overlayCarousel.events.EventSlideRight();\n\n        setTimeout(() => {\n          canMove = true;\n        }, 700);\n      };\n\n      overlayCarousel.events.EventMoveTo(index);\n      setTimeout(() => fixedFullScreen.events.show(), 100);\n\n      setTimeout(() => {\n        overlayCarousel.events.EventResize();\n      }, 100);\n\n      isFullScreenEvents = window.addEventListener('keyup', checkKeyEvents);\n    };\n\n    const overlaySlides = CreateOverlaySlide({ images });\n\n    const overlayCarousel = carouselElements.image({\n      slides: overlaySlides,\n      maxHeight: (window.innerHeight / 10) * 8,\n    });\n\n    styles += overlayCarousel.styles;\n\n    const fixedFullScreen = carouselElements.fullScreen({\n      content: overlayCarousel.element,\n      callback: () => {\n        if (isFullScreenEvents)\n          window.removeEventListener('keyup', isFullScreenEvents);\n      },\n    });\n\n    styles += fixedFullScreen.styles;\n\n    let isFullScreenEvents: any = null;\n\n    return {\n      element: fixedFullScreen.element,\n      styles,\n      events: {\n        setFullScreen,\n      },\n    };\n  })();\n"],"names":["image","carouselElements.image","carouselElements.fullScreen"],"mappings":";;;;;AAIA,MAAM,sCAAsC;AAG5C,MAAM,8BAA8B;AAAA,KAC/B,mCAAmC;AAAA;AAAA;AAAA;AAAA,wBAIhB,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,KAGxC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,kCAAkC;AAAA,IACpC,YAAY,MAAM;AAAA,IAClB,2BAA2B;AAAA;AAG/B,MAAM,qBAAqB,CAAC,EAAE,OAAA,MAC5B,OAAO,IAAI,CAACA,WAAU;AACpB,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,aAAa,YAAY,cAAc;AAAA,IAC3C,OAAAA;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,iBAAe,UAAU,IAAI,mCAAmC;AAChE,iBAAe,YAAY,UAAU;AAErC,QAAM,YAAY,cAAc;AAEhC,SAAO;AACT,CAAC;AAEH,MAAA,UAAe,CAAC,EAAE,OAAA,OACf,MAAM;AACL,MAAI,SAAS;AAEb,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU;AAEd,UAAM,iBAAiB,CAAC,UAAyB;AAC/C,UAAI,CAAC,QAAS;AACd,gBAAU;AACV,UAAI,MAAM,OAAO,YAAa,iBAAgB,OAAO,eAAA;AACrD,UAAI,MAAM,OAAO,aAAc,iBAAgB,OAAO,gBAAA;AAEtD,iBAAW,MAAM;AACf,kBAAU;AAAA,MACZ,GAAG,GAAG;AAAA,IACR;AAEA,oBAAgB,OAAO,YAAY,KAAK;AACxC,eAAW,MAAM,gBAAgB,OAAO,KAAA,GAAQ,GAAG;AAEnD,eAAW,MAAM;AACf,sBAAgB,OAAO,YAAA;AAAA,IACzB,GAAG,GAAG;AAEN,yBAAqB,OAAO,iBAAiB,SAAS,cAAc;AAAA,EACtE;AAEA,QAAM,gBAAgB,mBAAmB,EAAE,QAAQ;AAEnD,QAAM,kBAAkBC,MAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,YAAU,gBAAgB;AAE1B,QAAM,kBAAkBC,WAA4B;AAAA,IAClD,SAAS,gBAAgB;AAAA,IACzB,UAAU,MAAM;AACd,UAAI;AACF,eAAO,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D;AAAA,EAAA,CACD;AAED,YAAU,gBAAgB;AAE1B,MAAI,qBAA0B;AAE9B,SAAO;AAAA,IACL,SAAS,gBAAgB;AAAA,IACzB;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;"}
+{"version":3,"file":"overlay.mjs","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as carouselElements from '../elements';\nimport { Image as LayoutImage } from 'layout';\n\nconst ELEMENT_CAROUSEL_OVERLAY_COINTAINER = 'carousel-overlay-container';\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_OVERLAY_ELEMENT = `\n  ${LayoutImage.Styles}\n  ${OverlayImageContainerStyles}\n`;\n\nconst CreateOverlaySlide = ({ images }: { images: HTMLImageElement[] }) =>\n  images.map((image) => {\n    const slide = document.createElement('div');\n    const imageContainer = document.createElement('div');\n    const imageBlock = LayoutImage.CreateElement({\n      image,\n      showCaption: true,\n    });\n\n    imageContainer.classList.add(ELEMENT_CAROUSEL_OVERLAY_COINTAINER);\n    imageContainer.appendChild(imageBlock);\n\n    slide.appendChild(imageContainer);\n\n    return slide;\n  });\n\nexport default ({ images }: { images: HTMLImageElement[] }) =>\n  (() => {\n    let styles = STYLES_CAROUSEL_OVERLAY_ELEMENT;\n\n    const setFullScreen = (index: number) => {\n      let canMove = true;\n\n      const checkKeyEvents = (event: KeyboardEvent) => {\n        if (!canMove) return;\n        canMove = false;\n        if (event.key == 'ArrowLeft') overlayCarousel.events.EventSlideLeft();\n        if (event.key == 'ArrowRight') overlayCarousel.events.EventSlideRight();\n\n        setTimeout(() => {\n          canMove = true;\n        }, 700);\n      };\n\n      overlayCarousel.events.EventMoveTo(index);\n      setTimeout(() => fixedFullScreen.events.show(), 100);\n\n      setTimeout(() => {\n        overlayCarousel.events.EventResize();\n      }, 100);\n\n      isFullScreenEvents = window.addEventListener('keyup', checkKeyEvents);\n    };\n\n    const overlaySlides = CreateOverlaySlide({ images });\n\n    const overlayCarousel = carouselElements.image({\n      slides: overlaySlides,\n      maxHeight: (window.innerHeight / 10) * 8,\n    });\n\n    styles += overlayCarousel.styles;\n\n    const fixedFullScreen = carouselElements.fullScreen({\n      content: overlayCarousel.element,\n      callback: () => {\n        if (isFullScreenEvents)\n          window.removeEventListener('keyup', isFullScreenEvents);\n      },\n    });\n\n    styles += fixedFullScreen.styles;\n\n    let isFullScreenEvents: any = null;\n\n    return {\n      element: fixedFullScreen.element,\n      styles,\n      events: {\n        setFullScreen,\n      },\n    };\n  })();\n"],"names":["image","carouselElements.image","carouselElements.fullScreen"],"mappings":";;;;;;;AAIA,MAAM,sCAAsC;AAG5C,MAAM,8BAA8B;AAAA,KAC/B,mCAAmC;AAAA;AAAA;AAAA;AAAA,wBAIhB,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,KAGxC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,kCAAkC;AAAA,IACpC,YAAY,MAAM;AAAA,IAClB,2BAA2B;AAAA;AAG/B,MAAM,qBAAqB,CAAC,EAAE,OAAA,MAC5B,OAAO,IAAI,CAACA,WAAU;AACpB,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,aAAa,YAAY,cAAc;AAAA,IAC3C,OAAAA;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,iBAAe,UAAU,IAAI,mCAAmC;AAChE,iBAAe,YAAY,UAAU;AAErC,QAAM,YAAY,cAAc;AAEhC,SAAO;AACT,CAAC;AAEH,MAAA,UAAe,CAAC,EAAE,OAAA,OACf,MAAM;AACL,MAAI,SAAS;AAEb,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU;AAEd,UAAM,iBAAiB,CAAC,UAAyB;AAC/C,UAAI,CAAC,QAAS;AACd,gBAAU;AACV,UAAI,MAAM,OAAO,YAAa,iBAAgB,OAAO,eAAA;AACrD,UAAI,MAAM,OAAO,aAAc,iBAAgB,OAAO,gBAAA;AAEtD,iBAAW,MAAM;AACf,kBAAU;AAAA,MACZ,GAAG,GAAG;AAAA,IACR;AAEA,oBAAgB,OAAO,YAAY,KAAK;AACxC,eAAW,MAAM,gBAAgB,OAAO,KAAA,GAAQ,GAAG;AAEnD,eAAW,MAAM;AACf,sBAAgB,OAAO,YAAA;AAAA,IACzB,GAAG,GAAG;AAEN,yBAAqB,OAAO,iBAAiB,SAAS,cAAc;AAAA,EACtE;AAEA,QAAM,gBAAgB,mBAAmB,EAAE,QAAQ;AAEnD,QAAM,kBAAkBC,MAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,YAAU,gBAAgB;AAE1B,QAAM,kBAAkBC,WAA4B;AAAA,IAClD,SAAS,gBAAgB;AAAA,IACzB,UAAU,MAAM;AACd,UAAI;AACF,eAAO,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D;AAAA,EAAA,CACD;AAED,YAAU,gBAAgB;AAE1B,MAAI,qBAA0B;AAE9B,SAAO;AAAA,IACL,SAAS,gBAAgB;AAAA,IACzB;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;"}

package/dist/composite/media/inline/caption.js

@@ -3,6 +3,8 @@ const token = require("@universityofmaryland/web-token-library");
 const performance = require("@universityofmaryland/web-utilities-library/performance");
 const caption = require("../elements/caption.js");
 const image = require("../../../layout/image.js");
+require("@universityofmaryland/web-builder-library");
+require("@universityofmaryland/web-styles-library");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/composite/media/inline/caption.js.map

@@ -1 +1 @@
-{"version":3,"file":"caption.js","sources":["../../../../source/composite/media/inline/caption.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport CaptionContainer from '../elements/caption';\nimport { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-with-caption-container';\nconst ELEMENT_OBJECT_CAPTION_CONTAINER = 'element-media-caption-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_CAPTION_CONTAINER} {\n    display: flex;\n    flex-direction: column;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst CreateMediaWithCaption = (props: TypeMediaInlineRequirements) =>\n  (() => {\n    const { caption, image, isThemeDark } = props;\n    const hasCaption = caption && caption !== null;\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n        caption.style.display = `block`;\n      }\n    };\n    const eventResize = () => {\n      sizeCaption();\n    };\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        checkSizing();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.display = `none`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    objectContainer.classList.add(ELEMENT_OBJECT_CAPTION_CONTAINER);\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 100);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaWithCaption;\n"],"names":["token","LayoutImage","CaptionContainer","caption","image","debounce"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,iCAAiC;AACvC,MAAM,mCAAmC;AAGzC,MAAM,kBAAkB;AAAA,KACnB,gCAAgC;AAAA;AAAA;AAAA,sBAGfA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMtC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/BC,MAAY,MAAM;AAAA,IAClBC,QAAiB,MAAM;AAAA,IACvB,eAAe;AAAA;AAGnB,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,WAAEC,WAAA,OAASC,SAAO,YAAA,IAAgB;AACxC,QAAM,aAAaD,aAAWA,cAAY;AAC1C,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,cAAc,MAAM;AACxB,UAAM,iBAAiB,iBAAiB;AAAA,MACtC,IAAIF,MAAY,SAAS,SAAS;AAAA,IAAA;AAEpC,UAAME,WAAU,iBAAiB;AAAA,MAC/B,IAAID,QAAiB,SAAS,SAAS;AAAA,IAAA;AAGzC,QAAIC,UAAS;AACXA,eAAQ,MAAM,QAAQ,GAAG,eAAe,WAAW;AACnDA,eAAQ,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF;AACA,QAAM,cAAc,MAAM;AACxB,gBAAA;AAAA,EACF;AAEA,MAAIC,SAAO;AACT,oBAAgB;AAAA,MACdH,MAAY,cAAc;AAAA,QAAA,OACxBG;AAAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,cAAc,MAAM;AACxB,YAAMD,WAAU,gBAAgB;AAAA,QAC9B,IAAID,QAAiB,SAAS,SAAS;AAAA,MAAA;AAGzC,UAAIC,UAAS;AACXA,iBAAQ,MAAM,UAAU;AAAA,MAC1B;AAAA,IACF;AAEAC,aAAO,iBAAiB,QAAQ,MAAM;AACpC,kBAAA;AAEA,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR,CAAC;AAAA,EACH;AAEA,MAAI,YAAY;AACd,UAAM,iBAAiBF,QAAiB,cAAc;AAAA,MAAA,SACpDC;AAAAA,MACA;AAAA,IAAA,CACD;AACD,mBAAe,MAAM,UAAU;AAC/B,oBAAgB,YAAY,cAAc;AAAA,EAC5C;AAEA,MAAI,gBAAgB,SAAS,SAAS,GAAG;AACvC,qBAAiB,YAAY,eAAe;AAAA,EAC9C;AAEA,kBAAgB,UAAU,IAAI,gCAAgC;AAC9D,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL;AAAA,IACAE,YAAAA,SAAS,MAAM;AACb,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,aAAW,MAAM;AACf,gBAAA;AAAA,EACF,GAAG,GAAG;AAEN,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,IAEF,QAAQ;AAAA,EAAA;AAEZ,GAAA;;"}
+{"version":3,"file":"caption.js","sources":["../../../../source/composite/media/inline/caption.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport CaptionContainer from '../elements/caption';\nimport { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-with-caption-container';\nconst ELEMENT_OBJECT_CAPTION_CONTAINER = 'element-media-caption-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_CAPTION_CONTAINER} {\n    display: flex;\n    flex-direction: column;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst CreateMediaWithCaption = (props: TypeMediaInlineRequirements) =>\n  (() => {\n    const { caption, image, isThemeDark } = props;\n    const hasCaption = caption && caption !== null;\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n        caption.style.display = `block`;\n      }\n    };\n    const eventResize = () => {\n      sizeCaption();\n    };\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        checkSizing();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.display = `none`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    objectContainer.classList.add(ELEMENT_OBJECT_CAPTION_CONTAINER);\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 100);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaWithCaption;\n"],"names":["token","LayoutImage","CaptionContainer","caption","image","debounce"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,iCAAiC;AACvC,MAAM,mCAAmC;AAGzC,MAAM,kBAAkB;AAAA,KACnB,gCAAgC;AAAA;AAAA;AAAA,sBAGfA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMtC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/BC,MAAY,MAAM;AAAA,IAClBC,QAAiB,MAAM;AAAA,IACvB,eAAe;AAAA;AAGnB,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,WAAEC,WAAA,OAASC,SAAO,YAAA,IAAgB;AACxC,QAAM,aAAaD,aAAWA,cAAY;AAC1C,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,cAAc,MAAM;AACxB,UAAM,iBAAiB,iBAAiB;AAAA,MACtC,IAAIF,MAAY,SAAS,SAAS;AAAA,IAAA;AAEpC,UAAME,WAAU,iBAAiB;AAAA,MAC/B,IAAID,QAAiB,SAAS,SAAS;AAAA,IAAA;AAGzC,QAAIC,UAAS;AACXA,eAAQ,MAAM,QAAQ,GAAG,eAAe,WAAW;AACnDA,eAAQ,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF;AACA,QAAM,cAAc,MAAM;AACxB,gBAAA;AAAA,EACF;AAEA,MAAIC,SAAO;AACT,oBAAgB;AAAA,MACdH,MAAY,cAAc;AAAA,QAAA,OACxBG;AAAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,cAAc,MAAM;AACxB,YAAMD,WAAU,gBAAgB;AAAA,QAC9B,IAAID,QAAiB,SAAS,SAAS;AAAA,MAAA;AAGzC,UAAIC,UAAS;AACXA,iBAAQ,MAAM,UAAU;AAAA,MAC1B;AAAA,IACF;AAEAC,aAAO,iBAAiB,QAAQ,MAAM;AACpC,kBAAA;AAEA,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR,CAAC;AAAA,EACH;AAEA,MAAI,YAAY;AACd,UAAM,iBAAiBF,QAAiB,cAAc;AAAA,MAAA,SACpDC;AAAAA,MACA;AAAA,IAAA,CACD;AACD,mBAAe,MAAM,UAAU;AAC/B,oBAAgB,YAAY,cAAc;AAAA,EAC5C;AAEA,MAAI,gBAAgB,SAAS,SAAS,GAAG;AACvC,qBAAiB,YAAY,eAAe;AAAA,EAC9C;AAEA,kBAAgB,UAAU,IAAI,gCAAgC;AAC9D,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL;AAAA,IACAE,YAAAA,SAAS,MAAM;AACb,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,aAAW,MAAM;AACf,gBAAA;AAAA,EACF,GAAG,GAAG;AAEN,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,IAEF,QAAQ;AAAA,EAAA;AAEZ,GAAA;;"}

package/dist/composite/media/inline/caption.mjs

@@ -2,6 +2,8 @@ import * as token from "@universityofmaryland/web-token-library";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
 import CaptionContainer from "../elements/caption.mjs";
 import LayoutImage from "../../../layout/image.mjs";
+import "@universityofmaryland/web-builder-library";
+import "@universityofmaryland/web-styles-library";
 const ELEMENT_MEDIA_INLINE_CONTAINER = "element-media-with-caption-container";
 const ELEMENT_OBJECT_CAPTION_CONTAINER = "element-media-caption-container";
 const ObjectContainer = `

package/dist/composite/media/inline/caption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"caption.mjs","sources":["../../../../source/composite/media/inline/caption.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport CaptionContainer from '../elements/caption';\nimport { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-with-caption-container';\nconst ELEMENT_OBJECT_CAPTION_CONTAINER = 'element-media-caption-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_CAPTION_CONTAINER} {\n    display: flex;\n    flex-direction: column;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst CreateMediaWithCaption = (props: TypeMediaInlineRequirements) =>\n  (() => {\n    const { caption, image, isThemeDark } = props;\n    const hasCaption = caption && caption !== null;\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n        caption.style.display = `block`;\n      }\n    };\n    const eventResize = () => {\n      sizeCaption();\n    };\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        checkSizing();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.display = `none`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    objectContainer.classList.add(ELEMENT_OBJECT_CAPTION_CONTAINER);\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 100);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaWithCaption;\n"],"names":["caption"],"mappings":";;;;AAaA,MAAM,iCAAiC;AACvC,MAAM,mCAAmC;AAGzC,MAAM,kBAAkB;AAAA,KACnB,gCAAgC;AAAA;AAAA;AAAA,sBAGf,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMtC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/B,YAAY,MAAM;AAAA,IAClB,iBAAiB,MAAM;AAAA,IACvB,eAAe;AAAA;AAGnB,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,EAAE,SAAS,OAAO,YAAA,IAAgB;AACxC,QAAM,aAAa,WAAW,YAAY;AAC1C,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,cAAc,MAAM;AACxB,UAAM,iBAAiB,iBAAiB;AAAA,MACtC,IAAI,YAAY,SAAS,SAAS;AAAA,IAAA;AAEpC,UAAMA,WAAU,iBAAiB;AAAA,MAC/B,IAAI,iBAAiB,SAAS,SAAS;AAAA,IAAA;AAGzC,QAAIA,UAAS;AACXA,eAAQ,MAAM,QAAQ,GAAG,eAAe,WAAW;AACnDA,eAAQ,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF;AACA,QAAM,cAAc,MAAM;AACxB,gBAAA;AAAA,EACF;AAEA,MAAI,OAAO;AACT,oBAAgB;AAAA,MACd,YAAY,cAAc;AAAA,QACxB;AAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,cAAc,MAAM;AACxB,YAAMA,WAAU,gBAAgB;AAAA,QAC9B,IAAI,iBAAiB,SAAS,SAAS;AAAA,MAAA;AAGzC,UAAIA,UAAS;AACXA,iBAAQ,MAAM,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,WAAO,iBAAiB,QAAQ,MAAM;AACpC,kBAAA;AAEA,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR,CAAC;AAAA,EACH;AAEA,MAAI,YAAY;AACd,UAAM,iBAAiB,iBAAiB,cAAc;AAAA,MACpD;AAAA,MACA;AAAA,IAAA,CACD;AACD,mBAAe,MAAM,UAAU;AAC/B,oBAAgB,YAAY,cAAc;AAAA,EAC5C;AAEA,MAAI,gBAAgB,SAAS,SAAS,GAAG;AACvC,qBAAiB,YAAY,eAAe;AAAA,EAC9C;AAEA,kBAAgB,UAAU,IAAI,gCAAgC;AAC9D,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL;AAAA,IACA,SAAS,MAAM;AACb,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,aAAW,MAAM;AACf,gBAAA;AAAA,EACF,GAAG,GAAG;AAEN,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,IAEF,QAAQ;AAAA,EAAA;AAEZ,GAAA;"}
+{"version":3,"file":"caption.mjs","sources":["../../../../source/composite/media/inline/caption.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport CaptionContainer from '../elements/caption';\nimport { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-with-caption-container';\nconst ELEMENT_OBJECT_CAPTION_CONTAINER = 'element-media-caption-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_CAPTION_CONTAINER} {\n    display: flex;\n    flex-direction: column;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst CreateMediaWithCaption = (props: TypeMediaInlineRequirements) =>\n  (() => {\n    const { caption, image, isThemeDark } = props;\n    const hasCaption = caption && caption !== null;\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n        caption.style.display = `block`;\n      }\n    };\n    const eventResize = () => {\n      sizeCaption();\n    };\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        checkSizing();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.display = `none`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    objectContainer.classList.add(ELEMENT_OBJECT_CAPTION_CONTAINER);\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 100);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaWithCaption;\n"],"names":["caption"],"mappings":";;;;;;AAaA,MAAM,iCAAiC;AACvC,MAAM,mCAAmC;AAGzC,MAAM,kBAAkB;AAAA,KACnB,gCAAgC;AAAA;AAAA;AAAA,sBAGf,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMtC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/B,YAAY,MAAM;AAAA,IAClB,iBAAiB,MAAM;AAAA,IACvB,eAAe;AAAA;AAGnB,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,EAAE,SAAS,OAAO,YAAA,IAAgB;AACxC,QAAM,aAAa,WAAW,YAAY;AAC1C,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,cAAc,MAAM;AACxB,UAAM,iBAAiB,iBAAiB;AAAA,MACtC,IAAI,YAAY,SAAS,SAAS;AAAA,IAAA;AAEpC,UAAMA,WAAU,iBAAiB;AAAA,MAC/B,IAAI,iBAAiB,SAAS,SAAS;AAAA,IAAA;AAGzC,QAAIA,UAAS;AACXA,eAAQ,MAAM,QAAQ,GAAG,eAAe,WAAW;AACnDA,eAAQ,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF;AACA,QAAM,cAAc,MAAM;AACxB,gBAAA;AAAA,EACF;AAEA,MAAI,OAAO;AACT,oBAAgB;AAAA,MACd,YAAY,cAAc;AAAA,QACxB;AAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,cAAc,MAAM;AACxB,YAAMA,WAAU,gBAAgB;AAAA,QAC9B,IAAI,iBAAiB,SAAS,SAAS;AAAA,MAAA;AAGzC,UAAIA,UAAS;AACXA,iBAAQ,MAAM,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,WAAO,iBAAiB,QAAQ,MAAM;AACpC,kBAAA;AAEA,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR,CAAC;AAAA,EACH;AAEA,MAAI,YAAY;AACd,UAAM,iBAAiB,iBAAiB,cAAc;AAAA,MACpD;AAAA,MACA;AAAA,IAAA,CACD;AACD,mBAAe,MAAM,UAAU;AAC/B,oBAAgB,YAAY,cAAc;AAAA,EAC5C;AAEA,MAAI,gBAAgB,SAAS,SAAS,GAAG;AACvC,qBAAiB,YAAY,eAAe;AAAA,EAC9C;AAEA,kBAAgB,UAAU,IAAI,gCAAgC;AAC9D,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL;AAAA,IACA,SAAS,MAAM;AACb,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,aAAW,MAAM;AACf,gBAAA;AAAA,EACF,GAAG,GAAG;AAEN,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,IAEF,QAAQ;AAAA,EAAA;AAEZ,GAAA;"}

package/dist/composite/media/inline/standard.js

@@ -1,5 +1,8 @@
 "use strict";
 const image = require("../../../layout/image.js");
+require("@universityofmaryland/web-builder-library");
+require("@universityofmaryland/web-styles-library");
+require("@universityofmaryland/web-token-library");
 const ELEMENT_MEDIA_INLINE_CONTAINER = "element-media-inline-container";
 const STYLES_MEDIA_INLINE_ELEMENT = `
   .${ELEMENT_MEDIA_INLINE_CONTAINER} {

package/dist/composite/media/inline/standard.js.map

@@ -1 +1 @@
-{"version":3,"file":"standard.js","sources":["../../../../source/composite/media/inline/standard.ts"],"sourcesContent":["import { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineRequirements = {\n  image?: HTMLImageElement | null;\n};\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-inline-container';\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n`;\n\nconst CreateMediaInline = (props: TypeMediaInlineRequirements) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const { image } = props;\n\n    if (image) {\n      elementContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    return {\n      element: elementContainer,\n      styles: STYLES_MEDIA_INLINE_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaInline;\n"],"names":["LayoutImage","image"],"mappings":";;AAMA,MAAM,iCAAiC;AAGvC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/BA,MAAY,MAAM;AAAA;AAGtB,MAAM,oBAAoB,CAAC,WACxB,MAAM;AACL,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,EAAA,OAAEC,YAAU;AAElB,MAAIA,SAAO;AACT,qBAAiB;AAAA,MACfD,MAAY,cAAc;AAAA,QAAA,OACxBC;AAAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA;AAEZ,GAAA;;"}
+{"version":3,"file":"standard.js","sources":["../../../../source/composite/media/inline/standard.ts"],"sourcesContent":["import { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineRequirements = {\n  image?: HTMLImageElement | null;\n};\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-inline-container';\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n`;\n\nconst CreateMediaInline = (props: TypeMediaInlineRequirements) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const { image } = props;\n\n    if (image) {\n      elementContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    return {\n      element: elementContainer,\n      styles: STYLES_MEDIA_INLINE_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaInline;\n"],"names":["LayoutImage","image"],"mappings":";;;;;AAMA,MAAM,iCAAiC;AAGvC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/BA,MAAY,MAAM;AAAA;AAGtB,MAAM,oBAAoB,CAAC,WACxB,MAAM;AACL,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,EAAA,OAAEC,YAAU;AAElB,MAAIA,SAAO;AACT,qBAAiB;AAAA,MACfD,MAAY,cAAc;AAAA,QAAA,OACxBC;AAAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA;AAEZ,GAAA;;"}

package/dist/composite/media/inline/standard.mjs

@@ -1,4 +1,7 @@
 import LayoutImage from "../../../layout/image.mjs";
+import "@universityofmaryland/web-builder-library";
+import "@universityofmaryland/web-styles-library";
+import "@universityofmaryland/web-token-library";
 const ELEMENT_MEDIA_INLINE_CONTAINER = "element-media-inline-container";
 const STYLES_MEDIA_INLINE_ELEMENT = `
   .${ELEMENT_MEDIA_INLINE_CONTAINER} {

package/dist/composite/media/inline/standard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"standard.mjs","sources":["../../../../source/composite/media/inline/standard.ts"],"sourcesContent":["import { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineRequirements = {\n  image?: HTMLImageElement | null;\n};\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-inline-container';\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n`;\n\nconst CreateMediaInline = (props: TypeMediaInlineRequirements) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const { image } = props;\n\n    if (image) {\n      elementContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    return {\n      element: elementContainer,\n      styles: STYLES_MEDIA_INLINE_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaInline;\n"],"names":[],"mappings":";AAMA,MAAM,iCAAiC;AAGvC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/B,YAAY,MAAM;AAAA;AAGtB,MAAM,oBAAoB,CAAC,WACxB,MAAM;AACL,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,EAAE,UAAU;AAElB,MAAI,OAAO;AACT,qBAAiB;AAAA,MACf,YAAY,cAAc;AAAA,QACxB;AAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA;AAEZ,GAAA;"}
+{"version":3,"file":"standard.mjs","sources":["../../../../source/composite/media/inline/standard.ts"],"sourcesContent":["import { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineRequirements = {\n  image?: HTMLImageElement | null;\n};\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-inline-container';\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n`;\n\nconst CreateMediaInline = (props: TypeMediaInlineRequirements) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const { image } = props;\n\n    if (image) {\n      elementContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    return {\n      element: elementContainer,\n      styles: STYLES_MEDIA_INLINE_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaInline;\n"],"names":[],"mappings":";;;;AAMA,MAAM,iCAAiC;AAGvC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/B,YAAY,MAAM;AAAA;AAGtB,MAAM,oBAAoB,CAAC,WACxB,MAAM;AACL,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,EAAE,UAAU;AAElB,MAAI,OAAO;AACT,qBAAiB;AAAA,MACf,YAAY,cAAc;AAAA,QACxB;AAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA;AAEZ,GAAA;"}

package/dist/composite/media/inline/wrapped.js

@@ -3,6 +3,8 @@ const token = require("@universityofmaryland/web-token-library");
 const performance = require("@universityofmaryland/web-utilities-library/performance");
 const caption = require("../elements/caption.js");
 const image = require("../../../layout/image.js");
+require("@universityofmaryland/web-builder-library");
+require("@universityofmaryland/web-styles-library");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/composite/media/inline/wrapped.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrapped.js","sources":["../../../../source/composite/media/inline/wrapped.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport CaptionContainer from '../elements/caption';\nimport { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineWrappedRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  wrappingText?: HTMLElement | null;\n  isAlignmentRight?: boolean;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst BREAKPOINT = 400;\n\nconst ATTRIBUTE_IS_WRAPPING_TEXT = 'is-wrapping-text';\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-inline-wrapped-container';\nconst ELEMENT_OBJECT_WRAPPED_CONTAINER = 'element-object-wrapped-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_WRAPPED_CONTAINER} {\n    display: inline-block;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_WRAPPED_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst GetObjectSize = ({\n  elementContainer,\n  image,\n}: {\n  elementContainer: HTMLElement;\n  image: HTMLImageElement;\n}) => {\n  const containerSize = elementContainer.offsetWidth;\n  const imageWidth = image.naturalWidth;\n  const isMediumView = containerSize > BREAKPOINT;\n  let width = imageWidth;\n\n  if (isMediumView) {\n    const shouldMaxSized = imageWidth > containerSize / 2;\n    if (shouldMaxSized) width = containerSize / 2;\n  }\n\n  return width;\n};\n\nconst CreateMediaInlineWrapped = (props: TypeMediaInlineWrappedRequirements) =>\n  (() => {\n    const { image, isAlignmentRight, isThemeDark, caption, wrappingText } =\n      props;\n\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const hasWrappingtext = wrappingText && wrappingText !== null;\n    const hasCaption = caption && caption !== null;\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n      }\n    };\n    const sizeObject = () => {\n      const isAboveBreakPoint = elementContainer.offsetWidth > BREAKPOINT;\n      const objectContainer = elementContainer.querySelector(\n        `.${ELEMENT_OBJECT_WRAPPED_CONTAINER}`,\n      ) as HTMLElement;\n\n      if (!image) return;\n\n      if (isAboveBreakPoint) {\n        const objectSize = GetObjectSize({ elementContainer, image });\n\n        objectContainer.style.width = `${objectSize}px`;\n        objectContainer.style.display = 'inline-block';\n        objectContainer.style.textAlign = 'left';\n\n        if (isAlignmentRight) {\n          objectContainer.style.float = `right`;\n          objectContainer.style.paddingLeft = `${token.spacing.md}`;\n        } else {\n          objectContainer.style.float = 'left';\n          objectContainer.style.paddingRight = `${token.spacing.md}`;\n        }\n      } else {\n        objectContainer.style.width = '100%';\n        objectContainer.style.float = 'none';\n        objectContainer.style.textAlign = 'center';\n        objectContainer.style.paddingLeft = `0`;\n        objectContainer.style.paddingRight = `0`;\n      }\n\n      setTimeout(() => {\n        sizeCaption();\n      }, 100);\n    };\n    const eventResize = () => {\n      if (hasWrappingtext) {\n        sizeObject();\n      }\n      if (hasCaption) {\n        sizeCaption();\n      }\n    };\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        eventResize();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 100);\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    objectContainer.classList.add(ELEMENT_OBJECT_WRAPPED_CONTAINER);\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.opacity = `0`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    if (hasWrappingtext) {\n      elementContainer.appendChild(wrappingText);\n      elementContainer.setAttribute(ATTRIBUTE_IS_WRAPPING_TEXT, '');\n      setTimeout(() => {\n        sizeObject();\n      }, 100);\n    }\n\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 200);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_WRAPPED_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaInlineWrapped;\n"],"names":["token","LayoutImage","CaptionContainer","image","caption","objectContainer","debounce"],"mappings":"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"}
+{"version":3,"file":"wrapped.js","sources":["../../../../source/composite/media/inline/wrapped.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport CaptionContainer from '../elements/caption';\nimport { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineWrappedRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  wrappingText?: HTMLElement | null;\n  isAlignmentRight?: boolean;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst BREAKPOINT = 400;\n\nconst ATTRIBUTE_IS_WRAPPING_TEXT = 'is-wrapping-text';\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-inline-wrapped-container';\nconst ELEMENT_OBJECT_WRAPPED_CONTAINER = 'element-object-wrapped-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_WRAPPED_CONTAINER} {\n    display: inline-block;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_WRAPPED_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst GetObjectSize = ({\n  elementContainer,\n  image,\n}: {\n  elementContainer: HTMLElement;\n  image: HTMLImageElement;\n}) => {\n  const containerSize = elementContainer.offsetWidth;\n  const imageWidth = image.naturalWidth;\n  const isMediumView = containerSize > BREAKPOINT;\n  let width = imageWidth;\n\n  if (isMediumView) {\n    const shouldMaxSized = imageWidth > containerSize / 2;\n    if (shouldMaxSized) width = containerSize / 2;\n  }\n\n  return width;\n};\n\nconst CreateMediaInlineWrapped = (props: TypeMediaInlineWrappedRequirements) =>\n  (() => {\n    const { image, isAlignmentRight, isThemeDark, caption, wrappingText } =\n      props;\n\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const hasWrappingtext = wrappingText && wrappingText !== null;\n    const hasCaption = caption && caption !== null;\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n      }\n    };\n    const sizeObject = () => {\n      const isAboveBreakPoint = elementContainer.offsetWidth > BREAKPOINT;\n      const objectContainer = elementContainer.querySelector(\n        `.${ELEMENT_OBJECT_WRAPPED_CONTAINER}`,\n      ) as HTMLElement;\n\n      if (!image) return;\n\n      if (isAboveBreakPoint) {\n        const objectSize = GetObjectSize({ elementContainer, image });\n\n        objectContainer.style.width = `${objectSize}px`;\n        objectContainer.style.display = 'inline-block';\n        objectContainer.style.textAlign = 'left';\n\n        if (isAlignmentRight) {\n          objectContainer.style.float = `right`;\n          objectContainer.style.paddingLeft = `${token.spacing.md}`;\n        } else {\n          objectContainer.style.float = 'left';\n          objectContainer.style.paddingRight = `${token.spacing.md}`;\n        }\n      } else {\n        objectContainer.style.width = '100%';\n        objectContainer.style.float = 'none';\n        objectContainer.style.textAlign = 'center';\n        objectContainer.style.paddingLeft = `0`;\n        objectContainer.style.paddingRight = `0`;\n      }\n\n      setTimeout(() => {\n        sizeCaption();\n      }, 100);\n    };\n    const eventResize = () => {\n      if (hasWrappingtext) {\n        sizeObject();\n      }\n      if (hasCaption) {\n        sizeCaption();\n      }\n    };\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        eventResize();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 100);\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    objectContainer.classList.add(ELEMENT_OBJECT_WRAPPED_CONTAINER);\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.opacity = `0`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    if (hasWrappingtext) {\n      elementContainer.appendChild(wrappingText);\n      elementContainer.setAttribute(ATTRIBUTE_IS_WRAPPING_TEXT, '');\n      setTimeout(() => {\n        sizeObject();\n      }, 100);\n    }\n\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 200);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_WRAPPED_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaInlineWrapped;\n"],"names":["token","LayoutImage","CaptionContainer","image","caption","objectContainer","debounce"],"mappings":"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"}

package/dist/composite/media/inline/wrapped.mjs

@@ -2,6 +2,8 @@ import * as token from "@universityofmaryland/web-token-library";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
 import CaptionContainer from "../elements/caption.mjs";
 import LayoutImage from "../../../layout/image.mjs";
+import "@universityofmaryland/web-builder-library";
+import "@universityofmaryland/web-styles-library";
 const BREAKPOINT = 400;
 const ATTRIBUTE_IS_WRAPPING_TEXT = "is-wrapping-text";
 const ELEMENT_MEDIA_INLINE_CONTAINER = "element-media-inline-wrapped-container";

package/dist/composite/media/inline/wrapped.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"wrapped.mjs","sources":["../../../../source/composite/media/inline/wrapped.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport CaptionContainer from '../elements/caption';\nimport { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineWrappedRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  wrappingText?: HTMLElement | null;\n  isAlignmentRight?: boolean;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst BREAKPOINT = 400;\n\nconst ATTRIBUTE_IS_WRAPPING_TEXT = 'is-wrapping-text';\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-inline-wrapped-container';\nconst ELEMENT_OBJECT_WRAPPED_CONTAINER = 'element-object-wrapped-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_WRAPPED_CONTAINER} {\n    display: inline-block;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_WRAPPED_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst GetObjectSize = ({\n  elementContainer,\n  image,\n}: {\n  elementContainer: HTMLElement;\n  image: HTMLImageElement;\n}) => {\n  const containerSize = elementContainer.offsetWidth;\n  const imageWidth = image.naturalWidth;\n  const isMediumView = containerSize > BREAKPOINT;\n  let width = imageWidth;\n\n  if (isMediumView) {\n    const shouldMaxSized = imageWidth > containerSize / 2;\n    if (shouldMaxSized) width = containerSize / 2;\n  }\n\n  return width;\n};\n\nconst CreateMediaInlineWrapped = (props: TypeMediaInlineWrappedRequirements) =>\n  (() => {\n    const { image, isAlignmentRight, isThemeDark, caption, wrappingText } =\n      props;\n\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const hasWrappingtext = wrappingText && wrappingText !== null;\n    const hasCaption = caption && caption !== null;\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n      }\n    };\n    const sizeObject = () => {\n      const isAboveBreakPoint = elementContainer.offsetWidth > BREAKPOINT;\n      const objectContainer = elementContainer.querySelector(\n        `.${ELEMENT_OBJECT_WRAPPED_CONTAINER}`,\n      ) as HTMLElement;\n\n      if (!image) return;\n\n      if (isAboveBreakPoint) {\n        const objectSize = GetObjectSize({ elementContainer, image });\n\n        objectContainer.style.width = `${objectSize}px`;\n        objectContainer.style.display = 'inline-block';\n        objectContainer.style.textAlign = 'left';\n\n        if (isAlignmentRight) {\n          objectContainer.style.float = `right`;\n          objectContainer.style.paddingLeft = `${token.spacing.md}`;\n        } else {\n          objectContainer.style.float = 'left';\n          objectContainer.style.paddingRight = `${token.spacing.md}`;\n        }\n      } else {\n        objectContainer.style.width = '100%';\n        objectContainer.style.float = 'none';\n        objectContainer.style.textAlign = 'center';\n        objectContainer.style.paddingLeft = `0`;\n        objectContainer.style.paddingRight = `0`;\n      }\n\n      setTimeout(() => {\n        sizeCaption();\n      }, 100);\n    };\n    const eventResize = () => {\n      if (hasWrappingtext) {\n        sizeObject();\n      }\n      if (hasCaption) {\n        sizeCaption();\n      }\n    };\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        eventResize();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 100);\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    objectContainer.classList.add(ELEMENT_OBJECT_WRAPPED_CONTAINER);\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.opacity = `0`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    if (hasWrappingtext) {\n      elementContainer.appendChild(wrappingText);\n      elementContainer.setAttribute(ATTRIBUTE_IS_WRAPPING_TEXT, '');\n      setTimeout(() => {\n        sizeObject();\n      }, 100);\n    }\n\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 200);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_WRAPPED_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaInlineWrapped;\n"],"names":["caption","objectContainer"],"mappings":"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"}
+{"version":3,"file":"wrapped.mjs","sources":["../../../../source/composite/media/inline/wrapped.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport CaptionContainer from '../elements/caption';\nimport { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineWrappedRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  wrappingText?: HTMLElement | null;\n  isAlignmentRight?: boolean;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst BREAKPOINT = 400;\n\nconst ATTRIBUTE_IS_WRAPPING_TEXT = 'is-wrapping-text';\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-inline-wrapped-container';\nconst ELEMENT_OBJECT_WRAPPED_CONTAINER = 'element-object-wrapped-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_WRAPPED_CONTAINER} {\n    display: inline-block;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_WRAPPED_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst GetObjectSize = ({\n  elementContainer,\n  image,\n}: {\n  elementContainer: HTMLElement;\n  image: HTMLImageElement;\n}) => {\n  const containerSize = elementContainer.offsetWidth;\n  const imageWidth = image.naturalWidth;\n  const isMediumView = containerSize > BREAKPOINT;\n  let width = imageWidth;\n\n  if (isMediumView) {\n    const shouldMaxSized = imageWidth > containerSize / 2;\n    if (shouldMaxSized) width = containerSize / 2;\n  }\n\n  return width;\n};\n\nconst CreateMediaInlineWrapped = (props: TypeMediaInlineWrappedRequirements) =>\n  (() => {\n    const { image, isAlignmentRight, isThemeDark, caption, wrappingText } =\n      props;\n\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const hasWrappingtext = wrappingText && wrappingText !== null;\n    const hasCaption = caption && caption !== null;\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n      }\n    };\n    const sizeObject = () => {\n      const isAboveBreakPoint = elementContainer.offsetWidth > BREAKPOINT;\n      const objectContainer = elementContainer.querySelector(\n        `.${ELEMENT_OBJECT_WRAPPED_CONTAINER}`,\n      ) as HTMLElement;\n\n      if (!image) return;\n\n      if (isAboveBreakPoint) {\n        const objectSize = GetObjectSize({ elementContainer, image });\n\n        objectContainer.style.width = `${objectSize}px`;\n        objectContainer.style.display = 'inline-block';\n        objectContainer.style.textAlign = 'left';\n\n        if (isAlignmentRight) {\n          objectContainer.style.float = `right`;\n          objectContainer.style.paddingLeft = `${token.spacing.md}`;\n        } else {\n          objectContainer.style.float = 'left';\n          objectContainer.style.paddingRight = `${token.spacing.md}`;\n        }\n      } else {\n        objectContainer.style.width = '100%';\n        objectContainer.style.float = 'none';\n        objectContainer.style.textAlign = 'center';\n        objectContainer.style.paddingLeft = `0`;\n        objectContainer.style.paddingRight = `0`;\n      }\n\n      setTimeout(() => {\n        sizeCaption();\n      }, 100);\n    };\n    const eventResize = () => {\n      if (hasWrappingtext) {\n        sizeObject();\n      }\n      if (hasCaption) {\n        sizeCaption();\n      }\n    };\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        eventResize();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 100);\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    objectContainer.classList.add(ELEMENT_OBJECT_WRAPPED_CONTAINER);\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.opacity = `0`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    if (hasWrappingtext) {\n      elementContainer.appendChild(wrappingText);\n      elementContainer.setAttribute(ATTRIBUTE_IS_WRAPPING_TEXT, '');\n      setTimeout(() => {\n        sizeObject();\n      }, 100);\n    }\n\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 200);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_WRAPPED_ELEMENT,\n    };\n  })();\n\nexport default CreateMediaInlineWrapped;\n"],"names":["caption","objectContainer"],"mappings":"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"}

package/dist/composite/person/_types.d.ts

@@ -7,7 +7,7 @@ interface PersonDisplay extends PersonTheme {
 export interface PersonContact extends PersonTheme {
     phone?: HTMLElement | null;
     email?: HTMLElement | null;
-    linkendIn?: HTMLElement | null;
+    linkedin?: HTMLElement | null;
     address?: HTMLElement | null;
     additionalContact?: HTMLElement | null;
 }
@@ -20,7 +20,7 @@ export interface Person extends PersonContact, PersonDisplay {
     actions?: HTMLElement | null;
 }
 export interface PersonCard extends Person {
-    image?: HTMLImageElement | null;
+    image?: HTMLImageElement | HTMLAnchorElement | null;
 }
 export interface PersonBio extends PersonCard {
     description?: HTMLElement | null;

package/dist/composite/person/_types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_types.d.ts","sourceRoot":"","sources":["../../../source/composite/person/_types.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,aAAc,SAAQ,WAAW;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,MAAO,SAAQ,aAAa,EAAE,aAAa;IAC1D,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;AAED,MAAM,WAAW,UAAW,SAAQ,MAAM;IACxC,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACjC;AAED,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAClC"}
+{"version":3,"file":"_types.d.ts","sourceRoot":"","sources":["../../../source/composite/person/_types.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,aAAc,SAAQ,WAAW;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,MAAO,SAAQ,aAAa,EAAE,aAAa;IAC1D,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;AAED,MAAM,WAAW,UAAW,SAAQ,MAAM;IACxC,KAAK,CAAC,EAAE,gBAAgB,GAAG,iBAAiB,GAAG,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAClC"}

package/dist/composite/person/block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../source/composite/person/block.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;yBAIjC,OAAO,UAAU,KAAG,YAAY,CAAC,WAAW,CAAC;AAA7D,wBAqDE"}
+{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../source/composite/person/block.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;yBAIjC,OAAO,UAAU,KAAG,YAAY,CAAC,WAAW,CAAC;AAA7D,wBAsDE"}

package/dist/composite/person/block.js

@@ -81,6 +81,7 @@ const block = (props) => {
         width: "100%",
         objectFit: "contain",
         height: "140px !important",
+        transform: `none !important`,
         ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
           height: "200px !important"
         })

package/dist/composite/person/block.js.map

@@ -1 +1 @@
-{"version":3,"file":"block.js","sources":["../../../source/composite/person/block.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { person as iconPerson } from '@universityofmaryland/web-icons-library/people';\nimport { assets, textLockup } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\n\nexport default (props: PersonCard): ElementModel<HTMLElement> => {\n  const { image: personImage, isThemeDark } = props;\n  const textLockupElement = textLockup.person(props);\n  const contactLockupElement = textLockup.contact(props);\n\n  let image = personImage;\n\n  if (!image) {\n    image = imageFromSvg({\n      SVG: iconPerson,\n    });\n  }\n\n  const imageContainer = new ElementBuilder()\n    .withClassName('person-block-image')\n    .withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          height: 'auto',\n        },\n      }),\n    )\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        backgroundColor: `${token.color.gray.lighter}`,\n        marginBottom: `${token.spacing.md}`,\n\n        ...(isThemeDark && {\n          backgroundColor: `${token.color.gray.darker}`,\n        }),\n\n        ['& img, & svg']: {\n          display: 'block',\n          width: '100%',\n          objectFit: 'contain',\n          height: '140px !important',\n\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            height: '200px !important',\n          }),\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('person-block')\n    .withChildren(imageContainer, textLockupElement, contactLockupElement)\n    .build();\n};\n"],"names":["token","textLockup.person","textLockup.contact","imageFromSvg","iconPerson","ElementBuilder","assets.image.background","createMediaQuery"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,wBAAwBA,iBAAM,MAAM,iBAAiB,OAAO;AAElE,MAAA,QAAe,CAAC,UAAiD;AAC/D,QAAM,EAAE,OAAO,aAAa,YAAA,IAAgB;AAC5C,QAAM,oBAAoBC,OAAkB,KAAK;AACjD,QAAM,uBAAuBC,QAAmB,KAAK;AAErD,MAAI,QAAQ;AAEZ,MAAI,CAAC,OAAO;AACV,YAAQC,MAAAA,aAAa;AAAA,MACnB,KAAKC,OAAAA;AAAAA,IAAA,CACN;AAAA,EACH;AAEA,QAAM,iBAAiB,IAAIC,kBAAAA,eAAA,EACxB,cAAc,oBAAoB,EAClC;AAAA,IACCC,WAAwB;AAAA,MACtB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,iBAAiB,GAAGN,iBAAM,MAAM,KAAK,OAAO;AAAA,MAC5C,cAAc,GAAGA,iBAAM,QAAQ,EAAE;AAAA,MAEjC,GAAI,eAAe;AAAA,QACjB,iBAAiB,GAAGA,iBAAM,MAAM,KAAK,MAAM;AAAA,MAAA;AAAA,MAG7C,CAAC,cAAc,GAAG;AAAA,QAChB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ;AAAA,QAER,GAAGO,OAAAA,iBAAiB,aAAa,uBAAuB;AAAA,UACtD,QAAQ;AAAA,QAAA,CACT;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD,EACA,MAAA;AAEH,SAAO,IAAIF,kBAAAA,eAAA,EACR,cAAc,cAAc,EAC5B,aAAa,gBAAgB,mBAAmB,oBAAoB,EACpE,MAAA;AACL;;"}
+{"version":3,"file":"block.js","sources":["../../../source/composite/person/block.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { person as iconPerson } from '@universityofmaryland/web-icons-library/people';\nimport { assets, textLockup } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\n\nexport default (props: PersonCard): ElementModel<HTMLElement> => {\n  const { image: personImage, isThemeDark } = props;\n  const textLockupElement = textLockup.person(props);\n  const contactLockupElement = textLockup.contact(props);\n\n  let image = personImage;\n\n  if (!image) {\n    image = imageFromSvg({\n      SVG: iconPerson,\n    });\n  }\n\n  const imageContainer = new ElementBuilder()\n    .withClassName('person-block-image')\n    .withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          height: 'auto',\n        },\n      }),\n    )\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        backgroundColor: `${token.color.gray.lighter}`,\n        marginBottom: `${token.spacing.md}`,\n\n        ...(isThemeDark && {\n          backgroundColor: `${token.color.gray.darker}`,\n        }),\n\n        ['& img, & svg']: {\n          display: 'block',\n          width: '100%',\n          objectFit: 'contain',\n          height: '140px !important',\n          transform: `none !important`,\n\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            height: '200px !important',\n          }),\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('person-block')\n    .withChildren(imageContainer, textLockupElement, contactLockupElement)\n    .build();\n};\n"],"names":["token","textLockup.person","textLockup.contact","imageFromSvg","iconPerson","ElementBuilder","assets.image.background","createMediaQuery"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,wBAAwBA,iBAAM,MAAM,iBAAiB,OAAO;AAElE,MAAA,QAAe,CAAC,UAAiD;AAC/D,QAAM,EAAE,OAAO,aAAa,YAAA,IAAgB;AAC5C,QAAM,oBAAoBC,OAAkB,KAAK;AACjD,QAAM,uBAAuBC,QAAmB,KAAK;AAErD,MAAI,QAAQ;AAEZ,MAAI,CAAC,OAAO;AACV,YAAQC,MAAAA,aAAa;AAAA,MACnB,KAAKC,OAAAA;AAAAA,IAAA,CACN;AAAA,EACH;AAEA,QAAM,iBAAiB,IAAIC,kBAAAA,eAAA,EACxB,cAAc,oBAAoB,EAClC;AAAA,IACCC,WAAwB;AAAA,MACtB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,iBAAiB,GAAGN,iBAAM,MAAM,KAAK,OAAO;AAAA,MAC5C,cAAc,GAAGA,iBAAM,QAAQ,EAAE;AAAA,MAEjC,GAAI,eAAe;AAAA,QACjB,iBAAiB,GAAGA,iBAAM,MAAM,KAAK,MAAM;AAAA,MAAA;AAAA,MAG7C,CAAC,cAAc,GAAG;AAAA,QAChB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,WAAW;AAAA,QAEX,GAAGO,OAAAA,iBAAiB,aAAa,uBAAuB;AAAA,UACtD,QAAQ;AAAA,QAAA,CACT;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD,EACA,MAAA;AAEH,SAAO,IAAIF,kBAAAA,eAAA,EACR,cAAc,cAAc,EAC5B,aAAa,gBAAgB,mBAAmB,oBAAoB,EACpE,MAAA;AACL;;"}

package/dist/composite/person/block.mjs

@@ -63,6 +63,7 @@ const block = (props) => {
         width: "100%",
         objectFit: "contain",
         height: "140px !important",
+        transform: `none !important`,
         ...createMediaQuery("min-width", mediumBreakpointStart, {
           height: "200px !important"
         })

package/dist/composite/person/block.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"block.mjs","sources":["../../../source/composite/person/block.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { person as iconPerson } from '@universityofmaryland/web-icons-library/people';\nimport { assets, textLockup } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\n\nexport default (props: PersonCard): ElementModel<HTMLElement> => {\n  const { image: personImage, isThemeDark } = props;\n  const textLockupElement = textLockup.person(props);\n  const contactLockupElement = textLockup.contact(props);\n\n  let image = personImage;\n\n  if (!image) {\n    image = imageFromSvg({\n      SVG: iconPerson,\n    });\n  }\n\n  const imageContainer = new ElementBuilder()\n    .withClassName('person-block-image')\n    .withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          height: 'auto',\n        },\n      }),\n    )\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        backgroundColor: `${token.color.gray.lighter}`,\n        marginBottom: `${token.spacing.md}`,\n\n        ...(isThemeDark && {\n          backgroundColor: `${token.color.gray.darker}`,\n        }),\n\n        ['& img, & svg']: {\n          display: 'block',\n          width: '100%',\n          objectFit: 'contain',\n          height: '140px !important',\n\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            height: '200px !important',\n          }),\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('person-block')\n    .withChildren(imageContainer, textLockupElement, contactLockupElement)\n    .build();\n};\n"],"names":["textLockup.person","textLockup.contact","iconPerson","imageContainer","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,wBAAwB,MAAM,MAAM,iBAAiB,OAAO;AAElE,MAAA,QAAe,CAAC,UAAiD;AAC/D,QAAM,EAAE,OAAO,aAAa,YAAA,IAAgB;AAC5C,QAAM,oBAAoBA,OAAkB,KAAK;AACjD,QAAM,uBAAuBC,QAAmB,KAAK;AAErD,MAAI,QAAQ;AAEZ,MAAI,CAAC,OAAO;AACV,YAAQ,aAAa;AAAA,MACnB,KAAKC;AAAAA,IAAA,CACN;AAAA,EACH;AAEA,QAAMC,mBAAiB,IAAI,eAAA,EACxB,cAAc,oBAAoB,EAClC;AAAA,IACCC,eAAwB;AAAA,MACtB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,iBAAiB,GAAG,MAAM,MAAM,KAAK,OAAO;AAAA,MAC5C,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,MAEjC,GAAI,eAAe;AAAA,QACjB,iBAAiB,GAAG,MAAM,MAAM,KAAK,MAAM;AAAA,MAAA;AAAA,MAG7C,CAAC,cAAc,GAAG;AAAA,QAChB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ;AAAA,QAER,GAAG,iBAAiB,aAAa,uBAAuB;AAAA,UACtD,QAAQ;AAAA,QAAA,CACT;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD,EACA,MAAA;AAEH,SAAO,IAAI,eAAA,EACR,cAAc,cAAc,EAC5B,aAAaD,kBAAgB,mBAAmB,oBAAoB,EACpE,MAAA;AACL;"}
+{"version":3,"file":"block.mjs","sources":["../../../source/composite/person/block.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { person as iconPerson } from '@universityofmaryland/web-icons-library/people';\nimport { assets, textLockup } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\n\nexport default (props: PersonCard): ElementModel<HTMLElement> => {\n  const { image: personImage, isThemeDark } = props;\n  const textLockupElement = textLockup.person(props);\n  const contactLockupElement = textLockup.contact(props);\n\n  let image = personImage;\n\n  if (!image) {\n    image = imageFromSvg({\n      SVG: iconPerson,\n    });\n  }\n\n  const imageContainer = new ElementBuilder()\n    .withClassName('person-block-image')\n    .withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          height: 'auto',\n        },\n      }),\n    )\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        backgroundColor: `${token.color.gray.lighter}`,\n        marginBottom: `${token.spacing.md}`,\n\n        ...(isThemeDark && {\n          backgroundColor: `${token.color.gray.darker}`,\n        }),\n\n        ['& img, & svg']: {\n          display: 'block',\n          width: '100%',\n          objectFit: 'contain',\n          height: '140px !important',\n          transform: `none !important`,\n\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            height: '200px !important',\n          }),\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('person-block')\n    .withChildren(imageContainer, textLockupElement, contactLockupElement)\n    .build();\n};\n"],"names":["textLockup.person","textLockup.contact","iconPerson","imageContainer","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,wBAAwB,MAAM,MAAM,iBAAiB,OAAO;AAElE,MAAA,QAAe,CAAC,UAAiD;AAC/D,QAAM,EAAE,OAAO,aAAa,YAAA,IAAgB;AAC5C,QAAM,oBAAoBA,OAAkB,KAAK;AACjD,QAAM,uBAAuBC,QAAmB,KAAK;AAErD,MAAI,QAAQ;AAEZ,MAAI,CAAC,OAAO;AACV,YAAQ,aAAa;AAAA,MACnB,KAAKC;AAAAA,IAAA,CACN;AAAA,EACH;AAEA,QAAMC,mBAAiB,IAAI,eAAA,EACxB,cAAc,oBAAoB,EAClC;AAAA,IACCC,eAAwB;AAAA,MACtB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,iBAAiB,GAAG,MAAM,MAAM,KAAK,OAAO;AAAA,MAC5C,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,MAEjC,GAAI,eAAe;AAAA,QACjB,iBAAiB,GAAG,MAAM,MAAM,KAAK,MAAM;AAAA,MAAA;AAAA,MAG7C,CAAC,cAAc,GAAG;AAAA,QAChB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,WAAW;AAAA,QAEX,GAAG,iBAAiB,aAAa,uBAAuB;AAAA,UACtD,QAAQ;AAAA,QAAA,CACT;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD,EACA,MAAA;AAEH,SAAO,IAAI,eAAA,EACR,cAAc,cAAc,EAC5B,aAAaD,kBAAgB,mBAAmB,oBAAoB,EACpE,MAAA;AACL;"}

package/dist/composite/person/list.d.ts

@@ -1,5 +1,5 @@
 import { PersonCard } from './_types';
 import { ElementModel } from '../../_types';
-declare const _default: ({ actions, address, association, email, image, isThemeDark, job, linkendIn, name, phone, pronouns, subText, }: PersonCard) => ElementModel<HTMLElement>;
+declare const _default: ({ actions, address, association, email, image, isThemeDark, job, linkedin, name, phone, pronouns, subText, }: PersonCard) => ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=list.d.ts.map

package/dist/composite/person/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../source/composite/person/list.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;yBAMjC,+GAab,UAAU,KAAG,YAAY,CAAC,WAAW,CAAC;AAbzC,wBAoEE"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../source/composite/person/list.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;yBAMjC,8GAab,UAAU,KAAG,YAAY,CAAC,WAAW,CAAC;AAbzC,wBAsEE"}

package/dist/composite/person/list.js

@@ -56,7 +56,7 @@ const list = ({
   image,
   isThemeDark,
   job,
-  linkendIn,
+  linkedin,
   name,
   phone,
   pronouns,
@@ -78,11 +78,13 @@ const list = ({
           ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
             display: "block",
             width: "160px",
+            minWidth: "160px",
             paddingRight: `${token__namespace.spacing.md}`,
             alignSelf: "flex-start"
           }),
           ...styles.createMediaQuery("min-width", mediumBreakpoint, {
-            width: "208px"
+            width: "208px",
+            minWidth: "208px"
           })
         },
         image,
@@ -100,7 +102,7 @@ const list = ({
         email,
         isThemeDark,
         job,
-        linkendIn,
+        linkedin,
         name,
         phone,
         pronouns,

package/dist/composite/person/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../source/composite/person/list.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nexport default ({\n  actions,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard): ElementModel<HTMLElement> => {\n  const builder = new ElementBuilder()\n    .withClassName('person-list-container')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      layout.person.columns.image({\n        customStyles: {\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            display: 'block',\n            width: '160px',\n            paddingRight: `${token.spacing.md}`,\n            alignSelf: 'flex-start',\n          }),\n\n          ...createMediaQuery('min-width', mediumBreakpoint, {\n            width: '208px',\n          }),\n        },\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    builder.withChild(\n      layout.person.columns.information({\n        actions,\n        address,\n        association,\n        customStyles: {},\n        email,\n        isThemeDark,\n        job,\n        linkendIn,\n        name,\n        phone,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n"],"names":["token","ElementBuilder","createMediaQuery","layout.person.columns.image","layout.person.columns.information"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkBA,iBAAM,MAAM,iBAAiB,MAAM;AAC3D,MAAM,wBAAwBA,iBAAM,MAAM,iBAAiB,OAAO;AAClE,MAAM,mBAAmBA,iBAAM,MAAM,iBAAiB,MAAM;AAE5D,MAAA,OAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6C;AAC3C,QAAM,UAAU,IAAIC,kBAAAA,eAAA,EACjB,cAAc,uBAAuB,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MAET,GAAGC,OAAAA,iBAAiB,aAAa,iBAAiB;AAAA,QAChD,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EACH,CACD;AAEH,MAAI,OAAO;AACT,YAAQ;AAAA,MACNC,cAA4B;AAAA,QAC1B,cAAc;AAAA,UACZ,GAAGD,OAAAA,iBAAiB,aAAa,uBAAuB;AAAA,YACtD,SAAS;AAAA,YACT,OAAO;AAAA,YACP,cAAc,GAAGF,iBAAM,QAAQ,EAAE;AAAA,YACjC,WAAW;AAAA,UAAA,CACZ;AAAA,UAED,GAAGE,OAAAA,iBAAiB,aAAa,kBAAkB;AAAA,YACjD,OAAO;AAAA,UAAA,CACR;AAAA,QAAA;AAAA,QAEH;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,YAAQ;AAAA,MACNE,oBAAkC;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;;"}
+{"version":3,"file":"list.js","sources":["../../../source/composite/person/list.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nexport default ({\n  actions,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkedin,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard): ElementModel<HTMLElement> => {\n  const builder = new ElementBuilder()\n    .withClassName('person-list-container')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      layout.person.columns.image({\n        customStyles: {\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            display: 'block',\n            width: '160px',\n            minWidth: '160px',\n            paddingRight: `${token.spacing.md}`,\n            alignSelf: 'flex-start',\n          }),\n\n          ...createMediaQuery('min-width', mediumBreakpoint, {\n            width: '208px',\n            minWidth: '208px',\n          }),\n        },\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    builder.withChild(\n      layout.person.columns.information({\n        actions,\n        address,\n        association,\n        customStyles: {},\n        email,\n        isThemeDark,\n        job,\n        linkedin,\n        name,\n        phone,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n"],"names":["token","ElementBuilder","createMediaQuery","layout.person.columns.image","layout.person.columns.information"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkBA,iBAAM,MAAM,iBAAiB,MAAM;AAC3D,MAAM,wBAAwBA,iBAAM,MAAM,iBAAiB,OAAO;AAClE,MAAM,mBAAmBA,iBAAM,MAAM,iBAAiB,MAAM;AAE5D,MAAA,OAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6C;AAC3C,QAAM,UAAU,IAAIC,kBAAAA,eAAA,EACjB,cAAc,uBAAuB,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MAET,GAAGC,OAAAA,iBAAiB,aAAa,iBAAiB;AAAA,QAChD,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EACH,CACD;AAEH,MAAI,OAAO;AACT,YAAQ;AAAA,MACNC,cAA4B;AAAA,QAC1B,cAAc;AAAA,UACZ,GAAGD,OAAAA,iBAAiB,aAAa,uBAAuB;AAAA,YACtD,SAAS;AAAA,YACT,OAAO;AAAA,YACP,UAAU;AAAA,YACV,cAAc,GAAGF,iBAAM,QAAQ,EAAE;AAAA,YACjC,WAAW;AAAA,UAAA,CACZ;AAAA,UAED,GAAGE,OAAAA,iBAAiB,aAAa,kBAAkB;AAAA,YACjD,OAAO;AAAA,YACP,UAAU;AAAA,UAAA,CACX;AAAA,QAAA;AAAA,QAEH;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,YAAQ;AAAA,MACNE,oBAAkC;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;;"}

package/dist/composite/person/list.mjs

@@ -38,7 +38,7 @@ const list = ({
   image: image$1,
   isThemeDark,
   job,
-  linkendIn,
+  linkedin,
   name,
   phone,
   pronouns,
@@ -60,11 +60,13 @@ const list = ({
           ...createMediaQuery("min-width", mediumBreakpointStart, {
             display: "block",
             width: "160px",
+            minWidth: "160px",
             paddingRight: `${token.spacing.md}`,
             alignSelf: "flex-start"
           }),
           ...createMediaQuery("min-width", mediumBreakpoint, {
-            width: "208px"
+            width: "208px",
+            minWidth: "208px"
           })
         },
         image: image$1,
@@ -82,7 +84,7 @@ const list = ({
         email,
         isThemeDark,
         job,
-        linkendIn,
+        linkedin,
         name,
         phone,
         pronouns,

package/dist/composite/person/list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"list.mjs","sources":["../../../source/composite/person/list.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nexport default ({\n  actions,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard): ElementModel<HTMLElement> => {\n  const builder = new ElementBuilder()\n    .withClassName('person-list-container')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      layout.person.columns.image({\n        customStyles: {\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            display: 'block',\n            width: '160px',\n            paddingRight: `${token.spacing.md}`,\n            alignSelf: 'flex-start',\n          }),\n\n          ...createMediaQuery('min-width', mediumBreakpoint, {\n            width: '208px',\n          }),\n        },\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    builder.withChild(\n      layout.person.columns.information({\n        actions,\n        address,\n        association,\n        customStyles: {},\n        email,\n        isThemeDark,\n        job,\n        linkendIn,\n        name,\n        phone,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n"],"names":["image","layout.person.columns.image","layout.person.columns.information"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAC3D,MAAM,wBAAwB,MAAM,MAAM,iBAAiB,OAAO;AAClE,MAAM,mBAAmB,MAAM,MAAM,iBAAiB,MAAM;AAE5D,MAAA,OAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6C;AAC3C,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,uBAAuB,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MAET,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,QAChD,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EACH,CACD;AAEH,MAAIA,SAAO;AACT,YAAQ;AAAA,MACNC,MAA4B;AAAA,QAC1B,cAAc;AAAA,UACZ,GAAG,iBAAiB,aAAa,uBAAuB;AAAA,YACtD,SAAS;AAAA,YACT,OAAO;AAAA,YACP,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,YACjC,WAAW;AAAA,UAAA,CACZ;AAAA,UAED,GAAG,iBAAiB,aAAa,kBAAkB;AAAA,YACjD,OAAO;AAAA,UAAA,CACR;AAAA,QAAA;AAAA,QACH,OACAD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,YAAQ;AAAA,MACNE,YAAkC;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;"}
+{"version":3,"file":"list.mjs","sources":["../../../source/composite/person/list.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nexport default ({\n  actions,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkedin,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard): ElementModel<HTMLElement> => {\n  const builder = new ElementBuilder()\n    .withClassName('person-list-container')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      layout.person.columns.image({\n        customStyles: {\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            display: 'block',\n            width: '160px',\n            minWidth: '160px',\n            paddingRight: `${token.spacing.md}`,\n            alignSelf: 'flex-start',\n          }),\n\n          ...createMediaQuery('min-width', mediumBreakpoint, {\n            width: '208px',\n            minWidth: '208px',\n          }),\n        },\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    builder.withChild(\n      layout.person.columns.information({\n        actions,\n        address,\n        association,\n        customStyles: {},\n        email,\n        isThemeDark,\n        job,\n        linkedin,\n        name,\n        phone,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n"],"names":["image","layout.person.columns.image","layout.person.columns.information"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAC3D,MAAM,wBAAwB,MAAM,MAAM,iBAAiB,OAAO;AAClE,MAAM,mBAAmB,MAAM,MAAM,iBAAiB,MAAM;AAE5D,MAAA,OAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6C;AAC3C,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,uBAAuB,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MAET,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,QAChD,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EACH,CACD;AAEH,MAAIA,SAAO;AACT,YAAQ;AAAA,MACNC,MAA4B;AAAA,QAC1B,cAAc;AAAA,UACZ,GAAG,iBAAiB,aAAa,uBAAuB;AAAA,YACtD,SAAS;AAAA,YACT,OAAO;AAAA,YACP,UAAU;AAAA,YACV,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,YACjC,WAAW;AAAA,UAAA,CACZ;AAAA,UAED,GAAG,iBAAiB,aAAa,kBAAkB;AAAA,YACjD,OAAO;AAAA,YACP,UAAU;AAAA,UAAA,CACX;AAAA,QAAA;AAAA,QACH,OACAD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,YAAQ;AAAA,MACNE,YAAkC;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;"}

package/dist/composite/person/tabular.d.ts

@@ -1,5 +1,5 @@
 import { PersonCard } from './_types';
 import { UMDElement } from '../../_types';
-declare const _default: ({ actions, additionalContact, address, association, email, image, isThemeDark, job, linkendIn, name, phone, pronouns, subText, }: PersonCard) => UMDElement;
+declare const _default: ({ actions, additionalContact, address, association, email, image, isThemeDark, job, linkedin, name, phone, pronouns, subText, }: PersonCard) => UMDElement;
 export default _default;
 //# sourceMappingURL=tabular.d.ts.map

package/dist/composite/person/tabular.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabular.d.ts","sourceRoot":"","sources":["../../../source/composite/person/tabular.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;yBAI/B,kIAcb,UAAU,KAAG,UAAU;AAd1B,wBA8FE"}
+{"version":3,"file":"tabular.d.ts","sourceRoot":"","sources":["../../../source/composite/person/tabular.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;yBAI/B,iIAcb,UAAU,KAAG,UAAU;AAd1B,wBA8FE"}

package/dist/composite/person/tabular.js

@@ -57,7 +57,7 @@ const tabular = ({
   image,
   isThemeDark,
   job,
-  linkendIn,
+  linkedin,
   name,
   phone,
   pronouns,
@@ -113,7 +113,7 @@ const tabular = ({
       })
     );
   }
-  if (additionalContact || address || email || linkendIn || phone) {
+  if (additionalContact || address || email || linkedin || phone) {
     builder.withChild(
       columns.contact({
         additionalContact,
@@ -121,7 +121,7 @@ const tabular = ({
         customStyles: {},
         email,
         isThemeDark,
-        linkendIn,
+        linkedin,
         phone
       })
     );