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

package/dist/composite/layout/image/expand.js

@@ -1,27 +1,8 @@
-"use strict";
-const token = require("@universityofmaryland/web-token-library");
-const layout = require("@universityofmaryland/web-styles-library/layout");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-const accessibility = require("@universityofmaryland/web-utilities-library/accessibility");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const layout__namespace = /* @__PURE__ */ _interopNamespaceDefault(layout);
-const { spacing } = token__namespace;
+import * as token from "@universityofmaryland/web-token-library";
+import * as layout from "@universityofmaryland/web-styles-library/layout";
+import { jssToCSS, parsePixelValue } from "@universityofmaryland/web-utilities-library/styles";
+import { isScreenZoomed, isPreferredReducedMotion } from "@universityofmaryland/web-utilities-library/accessibility";
+const { spacing } = token;
 const ELEMENT_NAME = "umd-layout-image-expand";
 const ELEMENT_EXPLAND_DECLARATION = "layout-image-expand-declaration";
 const ELEMENT_EXPAND_CONTAINER = "layout-image-expand-container";
@@ -33,9 +14,9 @@ const ELEMENT_EXPAND_TEXT_CONTAINER = "layout-image-expand-text-container";
 const ELEMENT_EXPAND_TEXT_LOCK = "layout-image-expand-text-lock";
 const ELEMENT_EXPAND_TEXT_ANIMATION = "layout-image-expand-text-animation";
 const TextLock = `
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`.${ELEMENT_EXPAND_TEXT_LOCK}`]: layout__namespace.space.horizontal.larger
+    [`.${ELEMENT_EXPAND_TEXT_LOCK}`]: layout.space.horizontal.larger
   }
 })}
 
@@ -47,8 +28,8 @@ const TextLock = `
 const TextContainer = `
   .${ELEMENT_EXPAND_TEXT_CONTAINER} {
     position: relative;
-    padding-top: ${token__namespace.spacing.max};
-    padding-bottom: ${token__namespace.spacing.max};
+    padding-top: ${token.spacing.max};
+    padding-bottom: ${token.spacing.max};
     height: 100%;
     z-index: 9999;
   }
@@ -69,7 +50,7 @@ const TextAnimation = `
     }
   }
 
-  @media (${token__namespace.media.queries.tablet.min}) {
+  @media (${token.media.queries.tablet.min}) {
     @media (prefers-reduced-motion: no-preference) {
       @supports (animation-timeline: scroll()) {
         .${ELEMENT_EXPAND_TEXT_ANIMATION} {
@@ -120,7 +101,7 @@ const ImageSizeContainer = `
   @media (prefers-reduced-motion: no-preference) {
     @supports (animation-timeline: scroll()) {
       .${ELEMENT_EXPAND_IMAGE_SIZE} {
-        width: ${token__namespace.spacing.maxWidth.smallest};
+        width: ${token.spacing.maxWidth.smallest};
         height: 70vh;
         animation: img-size ease-in-out forwards;
         animation-timeline: view();
@@ -213,7 +194,7 @@ const STYLES_LAYOUT_IMAGE_EXPAND = `
     }
   }
 
-  @media (${token__namespace.media.queries.tablet.min}) {
+  @media (${token.media.queries.tablet.min}) {
     @media (prefers-reduced-motion: no-preference) {
       @supports (animation-timeline: scroll()) {
         .${ELEMENT_EXPLAND_DECLARATION} {
@@ -266,19 +247,19 @@ const CreateTextContainer = ({ content }) => {
   textAnimation.appendChild(textContainer);
   return textAnimation;
 };
-const expand = (props) => {
+const CreateImageExpandElement = (props) => {
   const declaration = document.createElement("div");
   const container = document.createElement("div");
   const imageContainer = CreateImageContainer(props);
   const textContainer = CreateTextContainer(props);
   const sizeImageForText = () => {
-    const textContainerHeight = textContainer.clientHeight + styles.parsePixelValue(spacing["2xl"]) * 2;
+    const textContainerHeight = textContainer.clientHeight + parsePixelValue(spacing["2xl"]) * 2;
     const imageContainerHeight = container.clientHeight;
     if (textContainerHeight > imageContainerHeight) {
       container.style.minHeight = `${textContainerHeight}px`;
     }
   };
-  if (accessibility.isScreenZoomed() && !accessibility.isPreferredReducedMotion()) {
+  if (isScreenZoomed() && !isPreferredReducedMotion()) {
     textContainer.style.height = "90vh";
     textContainer.style.transform = "translateY(0)";
   }
@@ -295,5 +276,8 @@ const expand = (props) => {
   declaration.classList.add(ELEMENT_EXPLAND_DECLARATION);
   return { element: declaration, styles: STYLES_LAYOUT_IMAGE_EXPAND };
 };
-module.exports = expand;
+const createCompositeLayoutImageExpand = CreateImageExpandElement;
+export {
+  createCompositeLayoutImageExpand
+};
 //# sourceMappingURL=expand.js.map

package/dist/composite/layout/image/expand.js.map

@@ -1 +1 @@
-{"version":3,"file":"expand.js","sources":["../../../../source/composite/layout/image/expand.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { parsePixelValue } from '@universityofmaryland/web-utilities-library/styles';\nimport {\n  isScreenZoomed,\n  isPreferredReducedMotion,\n} from '@universityofmaryland/web-utilities-library/accessibility';\n\ntype TypeLayoutImageExpandProps = {\n  content: HTMLElement;\n  image: HTMLImageElement;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_NAME = 'umd-layout-image-expand';\nconst ELEMENT_EXPLAND_DECLARATION = 'layout-image-expand-declaration';\nconst ELEMENT_EXPAND_CONTAINER = 'layout-image-expand-container';\n\nconst ELEMENT_EXPAND_IMAGE_CONTAINER = 'layout-image-expand-image-container';\nconst ELEMENT_EXPAND_IMAGE_POSITION = 'layout-image-expand-image-position';\nconst ELEMENT_EXPAND_IMAGE_SIZE = 'layout-image-expand-image-size';\nconst ELEMENT_EXPAND_IMAGE_OVERLAY = 'layout-image-expand-image-overlay';\n\nconst ELEMENT_EXPAND_TEXT_CONTAINER = 'layout-image-expand-text-container';\nconst ELEMENT_EXPAND_TEXT_LOCK = 'layout-image-expand-text-lock';\nconst ELEMENT_EXPAND_TEXT_ANIMATION = 'layout-image-expand-text-animation';\n\n// prettier-ignore\nconst TextLock = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_EXPAND_TEXT_LOCK}`]: layout.space.horizontal.larger,\n    },\n  })}\n\n  .${ELEMENT_EXPAND_TEXT_LOCK} {\n    display: flex;\n    height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst TextContainer = `\n  .${ELEMENT_EXPAND_TEXT_CONTAINER} {\n    position: relative;\n    padding-top: ${token.spacing.max};\n    padding-bottom: ${token.spacing.max};\n    height: 100%;\n    z-index: 9999;\n  }\n`;\n\n// prettier-ignore\nconst TextAnimation = `\n  .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n    width: 100vw;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n        position: absolute;\n        top: 0;\n        height: 80vh;\n        transform: translateY(80vh);\n      }\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    @media (prefers-reduced-motion: no-preference) {\n      @supports (animation-timeline: scroll()) {\n        .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n          transform: translateY(100vh);\n        }\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageOverlayContainer = `\n  @keyframes img-overlay {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  .${ELEMENT_EXPAND_IMAGE_OVERLAY} {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    background: rgba(0,0,0,0.65);\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_OVERLAY} {\n        opacity: 1;\n        animation: img-overlay forwards;\n        animation-timeline: view();\n        animation-range-start: 70vh;\n        animation-range-end: 100vh;\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageSizeContainer = `\n  @keyframes img-size {\n    to { width: 100%; height: 100vh; }\n  }\n\n  .${ELEMENT_EXPAND_IMAGE_SIZE} {\n    overflow: hidden;\n    position: relative;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_SIZE} {\n        width: ${token.spacing.maxWidth.smallest};\n        height: 70vh;\n        animation: img-size ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: 200vh;\n      }\n    }\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    .${ELEMENT_EXPAND_IMAGE_SIZE} {\n      height: 100%;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .${ELEMENT_EXPAND_IMAGE_SIZE} {\n      height: 100%;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImagePosition = `\n  .${ELEMENT_EXPAND_IMAGE_POSITION} {\n    width: 100%;\n    margin: 0 auto;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_POSITION} {\n        display: flex;\n        justify-content: center;\n        position: sticky;\n        top: 0; \n        animation: img-position ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: 200vh;\n      }\n    }\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    .${ELEMENT_EXPAND_IMAGE_POSITION} {\n      height: 100%;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .${ELEMENT_EXPAND_IMAGE_POSITION} {\n      height: 100%;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageContainer = `\n  .${ELEMENT_EXPAND_IMAGE_CONTAINER} {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_CONTAINER} {\n        position: relative;\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst Container = `\n  .${ELEMENT_EXPAND_CONTAINER} {\n    height: 100%;\n    width: 100%;\n    position: relative;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_LAYOUT_IMAGE_EXPAND = `\n  .${ELEMENT_EXPLAND_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    overflow: clip;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPLAND_DECLARATION} {\n        height: 180vh;\n      }\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    @media (prefers-reduced-motion: no-preference) {\n      @supports (animation-timeline: scroll()) {\n        .${ELEMENT_EXPLAND_DECLARATION} {\n          height: 200vh;\n        }\n      }\n    }\n  }\n\n  .${ELEMENT_EXPLAND_DECLARATION} img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ${Container}\n  ${ImageContainer}\n  ${ImageSizeContainer}\n  ${ImagePosition}\n  ${ImageOverlayContainer}\n  ${TextAnimation}\n  ${TextContainer}\n  ${TextLock}\n`;\n\nconst CreateImageContainer = ({ image }: TypeLayoutImageExpandProps) => {\n  const imageContainer = document.createElement('div');\n  const imagePosition = document.createElement('div');\n  const imageSize = document.createElement('div');\n  const imageOverlay = document.createElement('div');\n\n  imageOverlay.classList.add(ELEMENT_EXPAND_IMAGE_OVERLAY);\n\n  imageSize.classList.add(ELEMENT_EXPAND_IMAGE_SIZE);\n  imageSize.appendChild(image);\n  imageSize.appendChild(imageOverlay);\n\n  imagePosition.classList.add(ELEMENT_EXPAND_IMAGE_POSITION);\n  imagePosition.appendChild(imageSize);\n\n  imageContainer.appendChild(imagePosition);\n  imageContainer.classList.add(ELEMENT_EXPAND_IMAGE_CONTAINER);\n\n  return imageContainer;\n};\n\nconst CreateTextContainer = ({ content }: TypeLayoutImageExpandProps) => {\n  const textAnimation = document.createElement('div');\n  const textContainer = document.createElement('div');\n  const textLock = document.createElement('div');\n\n  textLock.classList.add(ELEMENT_EXPAND_TEXT_LOCK);\n  textLock.appendChild(content);\n\n  textContainer.appendChild(textLock);\n  textContainer.classList.add(ELEMENT_EXPAND_TEXT_CONTAINER);\n\n  textAnimation.classList.add(ELEMENT_EXPAND_TEXT_ANIMATION);\n  textAnimation.appendChild(textContainer);\n\n  return textAnimation;\n};\n\nexport default (props: TypeLayoutImageExpandProps) => {\n  const declaration = document.createElement('div');\n  const container = document.createElement('div');\n  const imageContainer = CreateImageContainer(props);\n  const textContainer = CreateTextContainer(props);\n  const sizeImageForText = () => {\n    const textContainerHeight =\n      textContainer.clientHeight +\n      parsePixelValue(spacing['2xl']) * 2;\n    const imageContainerHeight = container.clientHeight;\n\n    if (textContainerHeight > imageContainerHeight) {\n      container.style.minHeight = `${textContainerHeight}px`;\n    }\n  };\n\n  if (isScreenZoomed() && !isPreferredReducedMotion()) {\n    textContainer.style.height = '90vh';\n    textContainer.style.transform = 'translateY(0)';\n  }\n\n  if (!CSS.supports('animation-timeline', 'view()')) {\n    setTimeout(() => {\n      sizeImageForText();\n    }, 1000);\n    window.addEventListener('resize', () => sizeImageForText());\n  }\n\n  container.appendChild(imageContainer);\n  container.appendChild(textContainer);\n  container.classList.add(ELEMENT_EXPAND_CONTAINER);\n\n  declaration.appendChild(container);\n  declaration.classList.add(ELEMENT_EXPLAND_DECLARATION);\n\n  return { element: declaration, styles: STYLES_LAYOUT_IMAGE_EXPAND };\n};\n"],"names":["token","jssToCSS","layout","parsePixelValue","isScreenZoomed","isPreferredReducedMotion"],"mappings":"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"}
+{"version":3,"file":"expand.js","sources":["../../../../source/composite/layout/image/expand.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { parsePixelValue } from '@universityofmaryland/web-utilities-library/styles';\nimport {\n  isScreenZoomed,\n  isPreferredReducedMotion,\n} from '@universityofmaryland/web-utilities-library/accessibility';\n\ntype TypeLayoutImageExpandProps = {\n  content: HTMLElement;\n  image: HTMLImageElement;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_NAME = 'umd-layout-image-expand';\nconst ELEMENT_EXPLAND_DECLARATION = 'layout-image-expand-declaration';\nconst ELEMENT_EXPAND_CONTAINER = 'layout-image-expand-container';\n\nconst ELEMENT_EXPAND_IMAGE_CONTAINER = 'layout-image-expand-image-container';\nconst ELEMENT_EXPAND_IMAGE_POSITION = 'layout-image-expand-image-position';\nconst ELEMENT_EXPAND_IMAGE_SIZE = 'layout-image-expand-image-size';\nconst ELEMENT_EXPAND_IMAGE_OVERLAY = 'layout-image-expand-image-overlay';\n\nconst ELEMENT_EXPAND_TEXT_CONTAINER = 'layout-image-expand-text-container';\nconst ELEMENT_EXPAND_TEXT_LOCK = 'layout-image-expand-text-lock';\nconst ELEMENT_EXPAND_TEXT_ANIMATION = 'layout-image-expand-text-animation';\n\n// prettier-ignore\nconst TextLock = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_EXPAND_TEXT_LOCK}`]: layout.space.horizontal.larger,\n    },\n  })}\n\n  .${ELEMENT_EXPAND_TEXT_LOCK} {\n    display: flex;\n    height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst TextContainer = `\n  .${ELEMENT_EXPAND_TEXT_CONTAINER} {\n    position: relative;\n    padding-top: ${token.spacing.max};\n    padding-bottom: ${token.spacing.max};\n    height: 100%;\n    z-index: 9999;\n  }\n`;\n\n// prettier-ignore\nconst TextAnimation = `\n  .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n    width: 100vw;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n        position: absolute;\n        top: 0;\n        height: 80vh;\n        transform: translateY(80vh);\n      }\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    @media (prefers-reduced-motion: no-preference) {\n      @supports (animation-timeline: scroll()) {\n        .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n          transform: translateY(100vh);\n        }\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageOverlayContainer = `\n  @keyframes img-overlay {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  .${ELEMENT_EXPAND_IMAGE_OVERLAY} {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    background: rgba(0,0,0,0.65);\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_OVERLAY} {\n        opacity: 1;\n        animation: img-overlay forwards;\n        animation-timeline: view();\n        animation-range-start: 70vh;\n        animation-range-end: 100vh;\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageSizeContainer = `\n  @keyframes img-size {\n    to { width: 100%; height: 100vh; }\n  }\n\n  .${ELEMENT_EXPAND_IMAGE_SIZE} {\n    overflow: hidden;\n    position: relative;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_SIZE} {\n        width: ${token.spacing.maxWidth.smallest};\n        height: 70vh;\n        animation: img-size ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: 200vh;\n      }\n    }\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    .${ELEMENT_EXPAND_IMAGE_SIZE} {\n      height: 100%;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .${ELEMENT_EXPAND_IMAGE_SIZE} {\n      height: 100%;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImagePosition = `\n  .${ELEMENT_EXPAND_IMAGE_POSITION} {\n    width: 100%;\n    margin: 0 auto;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_POSITION} {\n        display: flex;\n        justify-content: center;\n        position: sticky;\n        top: 0; \n        animation: img-position ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: 200vh;\n      }\n    }\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    .${ELEMENT_EXPAND_IMAGE_POSITION} {\n      height: 100%;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .${ELEMENT_EXPAND_IMAGE_POSITION} {\n      height: 100%;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageContainer = `\n  .${ELEMENT_EXPAND_IMAGE_CONTAINER} {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_CONTAINER} {\n        position: relative;\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst Container = `\n  .${ELEMENT_EXPAND_CONTAINER} {\n    height: 100%;\n    width: 100%;\n    position: relative;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_LAYOUT_IMAGE_EXPAND = `\n  .${ELEMENT_EXPLAND_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    overflow: clip;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPLAND_DECLARATION} {\n        height: 180vh;\n      }\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    @media (prefers-reduced-motion: no-preference) {\n      @supports (animation-timeline: scroll()) {\n        .${ELEMENT_EXPLAND_DECLARATION} {\n          height: 200vh;\n        }\n      }\n    }\n  }\n\n  .${ELEMENT_EXPLAND_DECLARATION} img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ${Container}\n  ${ImageContainer}\n  ${ImageSizeContainer}\n  ${ImagePosition}\n  ${ImageOverlayContainer}\n  ${TextAnimation}\n  ${TextContainer}\n  ${TextLock}\n`;\n\nconst CreateImageContainer = ({ image }: TypeLayoutImageExpandProps) => {\n  const imageContainer = document.createElement('div');\n  const imagePosition = document.createElement('div');\n  const imageSize = document.createElement('div');\n  const imageOverlay = document.createElement('div');\n\n  imageOverlay.classList.add(ELEMENT_EXPAND_IMAGE_OVERLAY);\n\n  imageSize.classList.add(ELEMENT_EXPAND_IMAGE_SIZE);\n  imageSize.appendChild(image);\n  imageSize.appendChild(imageOverlay);\n\n  imagePosition.classList.add(ELEMENT_EXPAND_IMAGE_POSITION);\n  imagePosition.appendChild(imageSize);\n\n  imageContainer.appendChild(imagePosition);\n  imageContainer.classList.add(ELEMENT_EXPAND_IMAGE_CONTAINER);\n\n  return imageContainer;\n};\n\nconst CreateTextContainer = ({ content }: TypeLayoutImageExpandProps) => {\n  const textAnimation = document.createElement('div');\n  const textContainer = document.createElement('div');\n  const textLock = document.createElement('div');\n\n  textLock.classList.add(ELEMENT_EXPAND_TEXT_LOCK);\n  textLock.appendChild(content);\n\n  textContainer.appendChild(textLock);\n  textContainer.classList.add(ELEMENT_EXPAND_TEXT_CONTAINER);\n\n  textAnimation.classList.add(ELEMENT_EXPAND_TEXT_ANIMATION);\n  textAnimation.appendChild(textContainer);\n\n  return textAnimation;\n};\n\nconst CreateImageExpandElement = (props: TypeLayoutImageExpandProps) => {\n  const declaration = document.createElement('div');\n  const container = document.createElement('div');\n  const imageContainer = CreateImageContainer(props);\n  const textContainer = CreateTextContainer(props);\n  const sizeImageForText = () => {\n    const textContainerHeight =\n      textContainer.clientHeight +\n      parsePixelValue(spacing['2xl']) * 2;\n    const imageContainerHeight = container.clientHeight;\n\n    if (textContainerHeight > imageContainerHeight) {\n      container.style.minHeight = `${textContainerHeight}px`;\n    }\n  };\n\n  if (isScreenZoomed() && !isPreferredReducedMotion()) {\n    textContainer.style.height = '90vh';\n    textContainer.style.transform = 'translateY(0)';\n  }\n\n  if (!CSS.supports('animation-timeline', 'view()')) {\n    setTimeout(() => {\n      sizeImageForText();\n    }, 1000);\n    window.addEventListener('resize', () => sizeImageForText());\n  }\n\n  container.appendChild(imageContainer);\n  container.appendChild(textContainer);\n  container.classList.add(ELEMENT_EXPAND_CONTAINER);\n\n  declaration.appendChild(container);\n  declaration.classList.add(ELEMENT_EXPLAND_DECLARATION);\n\n  return { element: declaration, styles: STYLES_LAYOUT_IMAGE_EXPAND };\n};\n\nexport const createCompositeLayoutImageExpand = CreateImageExpandElement;\n"],"names":[],"mappings":"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"}

package/dist/composite/layout/image/index.d.ts

@@ -1,2 +1,2 @@
-export { default as expand } from './expand';
+export { createCompositeLayoutImageExpand as expand } from './expand';
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/layout/image/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gCAAgC,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/composite/layout/image/index.js

@@ -1,5 +1,5 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const expand = require("./expand.js");
-exports.expand = expand;
+import { createCompositeLayoutImageExpand } from "./expand.js";
+export {
+  createCompositeLayoutImageExpand as expand
+};
 //# sourceMappingURL=index.js.map

package/dist/composite/layout/image/index.js.map

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

package/dist/composite/layout/index.d.ts

@@ -1,6 +1,6 @@
 export * as box from './box';
 export * as image from './image';
 export * as sectionIntro from './section-intro';
-export { default as stickyColumns } from './sticky-columns';
-export { default as scrollTop } from './scroll-top';
+export { createCompositeLayoutStickyColumns as stickyColumns } from './sticky-columns';
+export { createCompositeLayoutScrollTop as scrollTop } from './scroll-top';
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,OAAO,CAAC;AAC7B,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,YAAY,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,OAAO,CAAC;AAC7B,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,YAAY,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,kCAAkC,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACvF,OAAO,EAAE,8BAA8B,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/composite/layout/index.js

@@ -1,13 +1,13 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./box/index.js");
-const index$1 = require("./image/index.js");
-const index$2 = require("./section-intro/index.js");
-const index$3 = require("./sticky-columns/index.js");
-const index$4 = require("./scroll-top/index.js");
-exports.box = index;
-exports.image = index$1;
-exports.sectionIntro = index$2;
-exports.stickyColumns = index$3;
-exports.scrollTop = index$4;
+import * as index from "./box/index.js";
+import * as index$1 from "./image/index.js";
+import * as index$2 from "./section-intro/index.js";
+import { createCompositeLayoutStickyColumns } from "./sticky-columns/index.js";
+import { createCompositeLayoutScrollTop } from "./scroll-top/index.js";
+export {
+  index as box,
+  index$1 as image,
+  createCompositeLayoutScrollTop as scrollTop,
+  index$2 as sectionIntro,
+  createCompositeLayoutStickyColumns as stickyColumns
+};
 //# sourceMappingURL=index.js.map

package/dist/composite/layout/index.js.map

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

package/dist/composite/layout/scroll-top/index.d.ts

@@ -1,12 +1,12 @@
 type TypeScrollTopProps = {
     isFixed?: boolean;
 };
-declare const _default: (props: TypeScrollTopProps) => {
+export declare const createCompositeLayoutScrollTop: (props: TypeScrollTopProps) => {
     element: HTMLDivElement;
     styles: string;
     events: {
         load: () => void;
     };
 };
-export default _default;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/layout/scroll-top/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/scroll-top/index.ts"],"names":[],"mappings":"AAIA,KAAK,kBAAkB,GAAG;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;yBAsCc,OAAO,kBAAkB;;;;;;;AAAzC,wBAsGO"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/scroll-top/index.ts"],"names":[],"mappings":"AAIA,KAAK,kBAAkB,GAAG;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA8IF,eAAO,MAAM,8BAA8B,UAxGJ,kBAAkB;;;;;;CAwGW,CAAC"}

package/dist/composite/layout/scroll-top/index.js

@@ -1,24 +1,6 @@
-"use strict";
-const token = require("@universityofmaryland/web-token-library");
-const performance = require("@universityofmaryland/web-utilities-library/performance");
-const arrows = require("@universityofmaryland/web-icons-library/arrows");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+import * as token from "@universityofmaryland/web-token-library";
+import { debounce } from "@universityofmaryland/web-utilities-library/performance";
+import { arrow_up } from "@universityofmaryland/web-icons-library/arrows";
 const ELEMENT_NAME = "umd-element-scroll-top";
 const ELEMENT_SCROLL_TOP_DECLARATION = "scroll-top-declarion";
 const ELEMENT_SCROLL_TOP_CONTAINER = "scroll-top-container";
@@ -28,14 +10,14 @@ const STYLES_SCROLL_TOP_ELEMENT = `
   }
 
   .${ELEMENT_SCROLL_TOP_CONTAINER} {
-    background-color: ${token__namespace.color.black};
+    background-color: ${token.color.black};
     width: 100%;
     height: 100%;
     min-height: 40px;
     display: flex;
     justify-content: center;
     align-items: center;
-    border: 1px solid ${token__namespace.color.gold};
+    border: 1px solid ${token.color.gold};
     cursor: pointer;
     transition: transform 250ms ease-in-out;
   }
@@ -46,7 +28,7 @@ const STYLES_SCROLL_TOP_ELEMENT = `
     height: 14px;
   }
 `;
-const index = (props) => (() => {
+const CreateScrollTopElement = (props) => (() => {
   const { isFixed = false } = props;
   const declaration = document.createElement("div");
   const container = document.createElement("button");
@@ -107,7 +89,7 @@ const index = (props) => (() => {
       behavior: "smooth"
     });
   });
-  container.innerHTML = arrows.arrow_up;
+  container.innerHTML = arrow_up;
   container.appendChild(text);
   declaration.appendChild(container);
   declaration.classList.add(ELEMENT_SCROLL_TOP_DECLARATION);
@@ -115,11 +97,11 @@ const index = (props) => (() => {
     container.style.transform = defaultStartingPosition;
     window.addEventListener(
       "scroll",
-      performance.debounce(() => eventScroll(), 10)
+      debounce(() => eventScroll(), 10)
     );
     window.addEventListener(
       "resize",
-      performance.debounce(() => eventResize(), 20)
+      debounce(() => eventResize(), 20)
     );
   }
   return {
@@ -130,5 +112,8 @@ const index = (props) => (() => {
     }
   };
 })();
-module.exports = index;
+const createCompositeLayoutScrollTop = CreateScrollTopElement;
+export {
+  createCompositeLayoutScrollTop
+};
 //# sourceMappingURL=index.js.map

package/dist/composite/layout/scroll-top/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../source/composite/layout/scroll-top/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { arrow_up as iconArrowUp } from '@universityofmaryland/web-icons-library/arrows';\n\ntype TypeScrollTopProps = {\n  isFixed?: boolean;\n};\n\nconst ELEMENT_NAME = 'umd-element-scroll-top';\nconst ELEMENT_SCROLL_TOP_DECLARATION = 'scroll-top-declarion';\nconst ELEMENT_SCROLL_TOP_CONTAINER = 'scroll-top-container';\n\n// prettier-ignore\nconst STYLES_SCROLL_TOP_ELEMENT = `\n  .${ELEMENT_SCROLL_TOP_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_SCROLL_TOP_CONTAINER} {\n    background-color: ${token.color.black};\n    width: 100%;\n    height: 100%;\n    min-height: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid ${token.color.gold};\n    cursor: pointer;\n    transition: transform 250ms ease-in-out;\n  }\n\n  .${ELEMENT_SCROLL_TOP_CONTAINER} svg {\n    display: block;\n    width: 14px;\n    height: 14px;\n  }\n`;\n\n// @media (${token.media.queries.medium.max}) {\n//   .${ELEMENT_SCROLL_TOP_CONTAINER} {\n//     display: none;\n//   }\n// }\n\nexport default (props: TypeScrollTopProps) =>\n  (() => {\n    const { isFixed = false } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('button');\n    const text = document.createElement('span');\n    const defaultStartingPosition = `translateX(100vh)`;\n    const getSpacing = () => (window.innerWidth > 768 ? 40 : 8);\n    let startingPosition: null | number = null;\n    let isShowing = false;\n\n    const eventResize = () => {\n      startingPosition = declaration.getBoundingClientRect().right;\n    };\n\n    const eventScroll = () => {\n      const windowHeight = window.innerHeight;\n      const pagePosition = window.scrollY;\n      const isPastFirstView = pagePosition > windowHeight;\n      const isNearBottom =\n        pagePosition + windowHeight >=\n        document.body.scrollHeight - windowHeight;\n      const showWindow = isPastFirstView && !isNearBottom;\n\n      if (showWindow) {\n        setVisiblePosition();\n      } else {\n        setHiddenPosition();\n      }\n    };\n\n    const setVisiblePosition = () => {\n      if (!isShowing) {\n        container.style.transform = 'translateX(0)';\n        isShowing = true;\n      }\n    };\n\n    const setHiddenPosition = () => {\n      if (isShowing) {\n        isShowing = false;\n\n        if (startingPosition) {\n          const spacing = getSpacing();\n          const translateAmount = window.innerWidth - startingPosition;\n          const position = translateAmount + spacing + container.offsetWidth;\n\n          container.style.transform = `translateX(${position}px)`;\n        } else {\n          container.style.transform = defaultStartingPosition;\n        }\n      }\n    };\n\n    const load = () => {\n      startingPosition = declaration.getBoundingClientRect().right;\n      container.style.transition = 'none';\n      setHiddenPosition();\n\n      setTimeout(() => {\n        container.style.transition = 'transform 250ms ease-in-out';\n      }, 100);\n    };\n\n    text.classList.add('sr-only');\n    text.innerHTML = 'Scroll To Top';\n\n    container.classList.add(ELEMENT_SCROLL_TOP_CONTAINER);\n    container.addEventListener('click', () => {\n      window.scrollTo({\n        top: 0,\n        left: 0,\n        behavior: 'smooth',\n      });\n    });\n    container.innerHTML = iconArrowUp;\n    container.appendChild(text);\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_SCROLL_TOP_DECLARATION);\n\n    if (isFixed) {\n      container.style.transform = defaultStartingPosition;\n\n      window.addEventListener(\n        'scroll',\n        debounce(() => eventScroll(), 10),\n      );\n\n      window.addEventListener(\n        'resize',\n        debounce(() => eventResize(), 20),\n      );\n    }\n\n    return {\n      element: declaration,\n      styles: STYLES_SCROLL_TOP_ELEMENT,\n      events: {\n        load,\n      },\n    };\n  })();\n"],"names":["token","iconArrowUp","debounce"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,eAAe;AACrB,MAAM,iCAAiC;AACvC,MAAM,+BAA+B;AAGrC,MAAM,4BAA4B;AAAA,KAC7B,8BAA8B;AAAA,iBAClB,YAAY;AAAA;AAAA;AAAA,KAGxB,4BAA4B;AAAA,wBACTA,iBAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOjBA,iBAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,KAKnC,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAajC,MAAA,QAAe,CAAC,WACb,MAAM;AACL,QAAM,EAAE,UAAU,MAAA,IAAU;AAC5B,QAAM,cAAc,SAAS,cAAc,KAAK;AAChD,QAAM,YAAY,SAAS,cAAc,QAAQ;AACjD,QAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,QAAM,0BAA0B;AAChC,QAAM,aAAa,MAAO,OAAO,aAAa,MAAM,KAAK;AACzD,MAAI,mBAAkC;AACtC,MAAI,YAAY;AAEhB,QAAM,cAAc,MAAM;AACxB,uBAAmB,YAAY,wBAAwB;AAAA,EACzD;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,eAAe,OAAO;AAC5B,UAAM,eAAe,OAAO;AAC5B,UAAM,kBAAkB,eAAe;AACvC,UAAM,eACJ,eAAe,gBACf,SAAS,KAAK,eAAe;AAC/B,UAAM,aAAa,mBAAmB,CAAC;AAEvC,QAAI,YAAY;AACd,yBAAA;AAAA,IACF,OAAO;AACL,wBAAA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,CAAC,WAAW;AACd,gBAAU,MAAM,YAAY;AAC5B,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,QAAM,oBAAoB,MAAM;AAC9B,QAAI,WAAW;AACb,kBAAY;AAEZ,UAAI,kBAAkB;AACpB,cAAM,UAAU,WAAA;AAChB,cAAM,kBAAkB,OAAO,aAAa;AAC5C,cAAM,WAAW,kBAAkB,UAAU,UAAU;AAEvD,kBAAU,MAAM,YAAY,cAAc,QAAQ;AAAA,MACpD,OAAO;AACL,kBAAU,MAAM,YAAY;AAAA,MAC9B;AAAA,IACF;AAAA,EACF;AAEA,QAAM,OAAO,MAAM;AACjB,uBAAmB,YAAY,wBAAwB;AACvD,cAAU,MAAM,aAAa;AAC7B,sBAAA;AAEA,eAAW,MAAM;AACf,gBAAU,MAAM,aAAa;AAAA,IAC/B,GAAG,GAAG;AAAA,EACR;AAEA,OAAK,UAAU,IAAI,SAAS;AAC5B,OAAK,YAAY;AAEjB,YAAU,UAAU,IAAI,4BAA4B;AACpD,YAAU,iBAAiB,SAAS,MAAM;AACxC,WAAO,SAAS;AAAA,MACd,KAAK;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IAAA,CACX;AAAA,EACH,CAAC;AACD,YAAU,YAAYC,OAAAA;AACtB,YAAU,YAAY,IAAI;AAE1B,cAAY,YAAY,SAAS;AACjC,cAAY,UAAU,IAAI,8BAA8B;AAExD,MAAI,SAAS;AACX,cAAU,MAAM,YAAY;AAE5B,WAAO;AAAA,MACL;AAAA,MACAC,qBAAS,MAAM,YAAA,GAAe,EAAE;AAAA,IAAA;AAGlC,WAAO;AAAA,MACL;AAAA,MACAA,qBAAS,MAAM,YAAA,GAAe,EAAE;AAAA,IAAA;AAAA,EAEpC;AAEA,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;;"}
+{"version":3,"file":"index.js","sources":["../../../../source/composite/layout/scroll-top/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { arrow_up as iconArrowUp } from '@universityofmaryland/web-icons-library/arrows';\n\ntype TypeScrollTopProps = {\n  isFixed?: boolean;\n};\n\nconst ELEMENT_NAME = 'umd-element-scroll-top';\nconst ELEMENT_SCROLL_TOP_DECLARATION = 'scroll-top-declarion';\nconst ELEMENT_SCROLL_TOP_CONTAINER = 'scroll-top-container';\n\n// prettier-ignore\nconst STYLES_SCROLL_TOP_ELEMENT = `\n  .${ELEMENT_SCROLL_TOP_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_SCROLL_TOP_CONTAINER} {\n    background-color: ${token.color.black};\n    width: 100%;\n    height: 100%;\n    min-height: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid ${token.color.gold};\n    cursor: pointer;\n    transition: transform 250ms ease-in-out;\n  }\n\n  .${ELEMENT_SCROLL_TOP_CONTAINER} svg {\n    display: block;\n    width: 14px;\n    height: 14px;\n  }\n`;\n\n// @media (${token.media.queries.medium.max}) {\n//   .${ELEMENT_SCROLL_TOP_CONTAINER} {\n//     display: none;\n//   }\n// }\n\nconst CreateScrollTopElement = (props: TypeScrollTopProps) =>\n  (() => {\n    const { isFixed = false } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('button');\n    const text = document.createElement('span');\n    const defaultStartingPosition = `translateX(100vh)`;\n    const getSpacing = () => (window.innerWidth > 768 ? 40 : 8);\n    let startingPosition: null | number = null;\n    let isShowing = false;\n\n    const eventResize = () => {\n      startingPosition = declaration.getBoundingClientRect().right;\n    };\n\n    const eventScroll = () => {\n      const windowHeight = window.innerHeight;\n      const pagePosition = window.scrollY;\n      const isPastFirstView = pagePosition > windowHeight;\n      const isNearBottom =\n        pagePosition + windowHeight >=\n        document.body.scrollHeight - windowHeight;\n      const showWindow = isPastFirstView && !isNearBottom;\n\n      if (showWindow) {\n        setVisiblePosition();\n      } else {\n        setHiddenPosition();\n      }\n    };\n\n    const setVisiblePosition = () => {\n      if (!isShowing) {\n        container.style.transform = 'translateX(0)';\n        isShowing = true;\n      }\n    };\n\n    const setHiddenPosition = () => {\n      if (isShowing) {\n        isShowing = false;\n\n        if (startingPosition) {\n          const spacing = getSpacing();\n          const translateAmount = window.innerWidth - startingPosition;\n          const position = translateAmount + spacing + container.offsetWidth;\n\n          container.style.transform = `translateX(${position}px)`;\n        } else {\n          container.style.transform = defaultStartingPosition;\n        }\n      }\n    };\n\n    const load = () => {\n      startingPosition = declaration.getBoundingClientRect().right;\n      container.style.transition = 'none';\n      setHiddenPosition();\n\n      setTimeout(() => {\n        container.style.transition = 'transform 250ms ease-in-out';\n      }, 100);\n    };\n\n    text.classList.add('sr-only');\n    text.innerHTML = 'Scroll To Top';\n\n    container.classList.add(ELEMENT_SCROLL_TOP_CONTAINER);\n    container.addEventListener('click', () => {\n      window.scrollTo({\n        top: 0,\n        left: 0,\n        behavior: 'smooth',\n      });\n    });\n    container.innerHTML = iconArrowUp;\n    container.appendChild(text);\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_SCROLL_TOP_DECLARATION);\n\n    if (isFixed) {\n      container.style.transform = defaultStartingPosition;\n\n      window.addEventListener(\n        'scroll',\n        debounce(() => eventScroll(), 10),\n      );\n\n      window.addEventListener(\n        'resize',\n        debounce(() => eventResize(), 20),\n      );\n    }\n\n    return {\n      element: declaration,\n      styles: STYLES_SCROLL_TOP_ELEMENT,\n      events: {\n        load,\n      },\n    };\n  })();\n\nexport const createCompositeLayoutScrollTop = CreateScrollTopElement;\n"],"names":["iconArrowUp"],"mappings":";;;AAQA,MAAM,eAAe;AACrB,MAAM,iCAAiC;AACvC,MAAM,+BAA+B;AAGrC,MAAM,4BAA4B;AAAA,KAC7B,8BAA8B;AAAA,iBAClB,YAAY;AAAA;AAAA;AAAA,KAGxB,4BAA4B;AAAA,wBACT,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOjB,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,KAKnC,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAajC,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,EAAE,UAAU,MAAA,IAAU;AAC5B,QAAM,cAAc,SAAS,cAAc,KAAK;AAChD,QAAM,YAAY,SAAS,cAAc,QAAQ;AACjD,QAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,QAAM,0BAA0B;AAChC,QAAM,aAAa,MAAO,OAAO,aAAa,MAAM,KAAK;AACzD,MAAI,mBAAkC;AACtC,MAAI,YAAY;AAEhB,QAAM,cAAc,MAAM;AACxB,uBAAmB,YAAY,wBAAwB;AAAA,EACzD;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,eAAe,OAAO;AAC5B,UAAM,eAAe,OAAO;AAC5B,UAAM,kBAAkB,eAAe;AACvC,UAAM,eACJ,eAAe,gBACf,SAAS,KAAK,eAAe;AAC/B,UAAM,aAAa,mBAAmB,CAAC;AAEvC,QAAI,YAAY;AACd,yBAAA;AAAA,IACF,OAAO;AACL,wBAAA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,CAAC,WAAW;AACd,gBAAU,MAAM,YAAY;AAC5B,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,QAAM,oBAAoB,MAAM;AAC9B,QAAI,WAAW;AACb,kBAAY;AAEZ,UAAI,kBAAkB;AACpB,cAAM,UAAU,WAAA;AAChB,cAAM,kBAAkB,OAAO,aAAa;AAC5C,cAAM,WAAW,kBAAkB,UAAU,UAAU;AAEvD,kBAAU,MAAM,YAAY,cAAc,QAAQ;AAAA,MACpD,OAAO;AACL,kBAAU,MAAM,YAAY;AAAA,MAC9B;AAAA,IACF;AAAA,EACF;AAEA,QAAM,OAAO,MAAM;AACjB,uBAAmB,YAAY,wBAAwB;AACvD,cAAU,MAAM,aAAa;AAC7B,sBAAA;AAEA,eAAW,MAAM;AACf,gBAAU,MAAM,aAAa;AAAA,IAC/B,GAAG,GAAG;AAAA,EACR;AAEA,OAAK,UAAU,IAAI,SAAS;AAC5B,OAAK,YAAY;AAEjB,YAAU,UAAU,IAAI,4BAA4B;AACpD,YAAU,iBAAiB,SAAS,MAAM;AACxC,WAAO,SAAS;AAAA,MACd,KAAK;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IAAA,CACX;AAAA,EACH,CAAC;AACD,YAAU,YAAYA;AACtB,YAAU,YAAY,IAAI;AAE1B,cAAY,YAAY,SAAS;AACjC,cAAY,UAAU,IAAI,8BAA8B;AAExD,MAAI,SAAS;AACX,cAAU,MAAM,YAAY;AAE5B,WAAO;AAAA,MACL;AAAA,MACA,SAAS,MAAM,YAAA,GAAe,EAAE;AAAA,IAAA;AAGlC,WAAO;AAAA,MACL;AAAA,MACA,SAAS,MAAM,YAAA,GAAe,EAAE;AAAA,IAAA;AAAA,EAEpC;AAEA,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;AAEK,MAAM,iCAAiC;"}

package/dist/composite/layout/section-intro/index.d.ts

@@ -1,3 +1,3 @@
-export { default as small } from './small';
-export { default as wide } from './wide';
+export { createCompositeLayoutSectionIntroSmall as small } from './small';
+export { createCompositeLayoutSectionIntroWide as wide } from './wide';
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/layout/section-intro/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sCAAsC,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC1E,OAAO,EAAE,qCAAqC,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/composite/layout/section-intro/index.js

@@ -1,7 +1,7 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const small = require("./small.js");
-const wide = require("./wide.js");
-exports.small = small;
-exports.wide = wide;
+import { createCompositeLayoutSectionIntroSmall } from "./small.js";
+import { createCompositeLayoutSectionIntroWide } from "./wide.js";
+export {
+  createCompositeLayoutSectionIntroSmall as small,
+  createCompositeLayoutSectionIntroWide as wide
+};
 //# sourceMappingURL=index.js.map

package/dist/composite/layout/section-intro/index.js.map

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

package/dist/composite/layout/section-intro/small.d.ts

@@ -6,7 +6,7 @@ export interface SectionIntroProps {
     isThemeDark?: boolean;
     includesAnimation?: boolean;
 }
-declare const _default: (props: SectionIntroProps) => {
+export declare const createCompositeLayoutSectionIntroSmall: (props: SectionIntroProps) => {
     events: {
         loadAnimation: () => void;
     };
@@ -15,5 +15,4 @@ declare const _default: (props: SectionIntroProps) => {
     update?: (props: Partial<import('@universityofmaryland/web-builder-library').BuilderOptions>) => void;
     destroy?: () => void;
 };
-export default _default;
 //# sourceMappingURL=small.d.ts.map

package/dist/composite/layout/section-intro/small.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"small.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/small.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;yBA4Pe,OAAO,iBAAiB;;;;;;;;;AAAxC,wBAkBE"}
+{"version":3,"file":"small.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/small.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAgRD,eAAO,MAAM,sCAAsC,UApBJ,iBAAiB;;;;;;;;CAoBoB,CAAC"}

package/dist/composite/layout/section-intro/small.js

@@ -1,37 +1,17 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const typography = require("@universityofmaryland/web-styles-library/typography");
-const Styles = require("@universityofmaryland/web-styles-library");
-const theme = require("@universityofmaryland/web-utilities-library/theme");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
 const ANIMATION_CONFIGS = {
   line: `
     @keyframes intro-line {
       from {
         height: 0;
-        transform: translateY(${token__namespace.spacing.lg});
+        transform: translateY(${token.spacing.lg});
       }
       to {
-        height: ${token__namespace.spacing["4xl"]};
+        height: ${token.spacing["4xl"]};
         transform: translateY(0);
       }
     }
@@ -52,9 +32,9 @@ const ANIMATION_CONFIGS = {
 const createHeadline = (props) => {
   const { headline, isThemeDark } = props;
   if (!headline) return null;
-  return new webBuilderLibrary.ElementBuilder(headline).styled(
-    Styles__namespace.typography.sans.compose("largest", {
-      theme: theme.theme.fontColor(isThemeDark)
+  return new ElementBuilder(headline).styled(
+    Styles.typography.sans.compose("largest", {
+      theme: theme.fontColor(isThemeDark)
     })
   ).withStyles({
     element: {
@@ -67,21 +47,21 @@ const createText = (props) => {
   const { text, headline, isThemeDark } = props;
   const simpleRichTextOptions = {
     size: "large",
-    theme: theme.theme.fontColor(isThemeDark)
+    theme: theme.fontColor(isThemeDark)
   };
   if (!text) return null;
   if (!headline) simpleRichTextOptions.size = "largest";
-  return new webBuilderLibrary.ElementBuilder(text).styled(Styles__namespace.element.text.rich.composeSimple(simpleRichTextOptions)).withStyles({
+  return new ElementBuilder(text).styled(Styles.element.text.rich.composeSimple(simpleRichTextOptions)).withStyles({
     element: {
       [`* + &`]: {
-        marginTop: token__namespace.spacing.sm
+        marginTop: token.spacing.sm
       },
       [`&, & > *`]: {
         ...!headline && {
-          ...typography__namespace.sans.transformations.largerBold,
-          color: token__namespace.color.black,
+          ...typography.sans.transformations.largerBold,
+          color: token.color.black,
           ...isThemeDark && {
-            color: token__namespace.color.white
+            color: token.color.white
           }
         }
       }
@@ -91,12 +71,12 @@ const createText = (props) => {
 const createActions = (props) => {
   const { actions } = props;
   if (!actions) return null;
-  return new webBuilderLibrary.ElementBuilder(actions).styled(Styles__namespace.layout.grid.inline.tabletRows).withStyles({
+  return new ElementBuilder(actions).styled(Styles.layout.grid.inline.tabletRows).withStyles({
     element: {
       justifyContent: "center",
       alignItems: "center",
       [`* + &`]: {
-        marginTop: token__namespace.spacing.md
+        marginTop: token.spacing.md
       }
     }
   }).build();
@@ -106,7 +86,7 @@ const createTextContainer = (props) => {
   const headlineElement = createHeadline({ headline, isThemeDark });
   const textElement = createText({ text, headline, isThemeDark });
   const actionsElement = createActions({ actions });
-  const container = new webBuilderLibrary.ElementBuilder().withClassName("intro-default-container-text").withStyles({
+  const container = new ElementBuilder().withClassName("intro-default-container-text").withStyles({
     element: {
       ...includesAnimation && {
         opacity: 0
@@ -119,7 +99,7 @@ const createTextContainer = (props) => {
       [`&:before`]: {
         ...includesAnimation && {
           height: 0,
-          transform: `translateY(${token__namespace.spacing.lg})`
+          transform: `translateY(${token.spacing.lg})`
         }
       }
     }
@@ -137,7 +117,7 @@ const createTextContainer = (props) => {
 };
 const createWrapper = (props) => {
   const textContainerElement = createTextContainer(props);
-  return new webBuilderLibrary.ElementBuilder().withClassName("intro-default-container-wrapper").withChild(textContainerElement).withStyles({
+  return new ElementBuilder().withClassName("intro-default-container-wrapper").withChild(textContainerElement).withStyles({
     element: {
       textAlign: "center"
     }
@@ -146,20 +126,20 @@ const createWrapper = (props) => {
 const createContainer = (props) => {
   const { isThemeDark, hasSeparator, includesAnimation } = props;
   const wrapperElement = createWrapper(props);
-  return new webBuilderLibrary.ElementBuilder().withClassName("intro-default-container").withChild(wrapperElement).withStyles({
+  return new ElementBuilder().withClassName("intro-default-container").withChild(wrapperElement).withStyles({
     element: {
-      maxWidth: token__namespace.spacing.maxWidth.small,
+      maxWidth: token.spacing.maxWidth.small,
       margin: "0 auto",
       ...hasSeparator && {
-        paddingTop: token__namespace.spacing["6xl"],
+        paddingTop: token.spacing["6xl"],
         position: "relative"
       },
       [`&:before`]: {
         ...hasSeparator && {
           content: '""',
-          backgroundColor: token__namespace.color.red,
+          backgroundColor: token.color.red,
           position: "absolute",
-          height: token__namespace.spacing["4xl"],
+          height: token.spacing["4xl"],
           width: "2px",
           left: "calc(50% - 1px)",
           top: 0
@@ -192,7 +172,7 @@ const setupAnimation = (props) => {
   });
   observer.observe(container);
 };
-const small = (props) => {
+const CreateSectionIntroSmallElement = (props) => {
   const containerElement = createContainer(props);
   const loadAnimation = () => setupAnimation({
     includesAnimation: props.includesAnimation,
@@ -207,5 +187,8 @@ const small = (props) => {
     events: { loadAnimation }
   };
 };
-module.exports = small;
+const createCompositeLayoutSectionIntroSmall = CreateSectionIntroSmallElement;
+export {
+  createCompositeLayoutSectionIntroSmall
+};
 //# sourceMappingURL=small.js.map