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

package/dist/composite/quote/elements/text.js

@@ -1,68 +1,49 @@
-"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 theme = require("@universityofmaryland/web-utilities-library/theme");
-const action = require("./action.js");
-const quote = require("./quote.js");
-const _constants = require("../_constants.js");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
+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 { theme } from "@universityofmaryland/web-utilities-library/theme";
+import { createCompositeQuoteAction } from "./action.js";
+import { createCompositeQuote } from "./quote.js";
+import { SMALL } from "../_constants.js";
 const createChildren = (props) => {
   const {
-    action: action$1,
+    action,
     attribution,
     attributionSubText,
     hasImage,
     includesAnimation,
     isThemeDark,
     isSizeLarge,
-    quote: quote$1,
+    quote,
     shouldHaveWhiteText
   } = props;
   const wrapperChildren = [];
-  if (quote$1) {
+  if (quote) {
     wrapperChildren.push(
-      quote({
+      createCompositeQuote({
         ...props,
         shouldHaveWhiteText,
-        quote: quote$1,
+        quote,
         hasImage,
         isSizeLarge
       })
     );
   }
   if (attribution) {
-    const attributionElement = new webBuilderLibrary.ElementBuilder(attribution).styled(
-      typography__namespace.sans.compose("medium", {
-        theme: theme.theme.fontColor(shouldHaveWhiteText)
+    const attributionElement = new ElementBuilder(attribution).styled(
+      typography.sans.compose("medium", {
+        theme: theme.fontColor(shouldHaveWhiteText)
       })
     ).withClassName("quote-container-attribution").withStyles({
       element: {
-        marginTop: token__namespace.spacing.sm,
+        marginTop: token.spacing.sm,
         ...includesAnimation && {
           opacity: "0",
           transform: "translateY(20px)",
           transition: "opacity 1s ease, transform 0.5s ease"
         },
         ...!shouldHaveWhiteText && {
-          color: token__namespace.color.gray.dark
+          color: token.color.gray.dark
         },
         [`& *`]: {
           color: "currentColor"
@@ -72,9 +53,9 @@ const createChildren = (props) => {
     wrapperChildren.push(attributionElement);
   }
   if (attributionSubText) {
-    const attributionSubTextElement = new webBuilderLibrary.ElementBuilder(attributionSubText).styled(typography__namespace.sans.small).withClassName("quote-container-text-attribution-sub-text").withStyles({
+    const attributionSubTextElement = new ElementBuilder(attributionSubText).styled(typography.sans.small).withClassName("quote-container-text-attribution-sub-text").withStyles({
       element: {
-        color: token__namespace.color.gray.dark,
+        color: token.color.gray.dark,
         fontStyle: "italic",
         ...includesAnimation && {
           opacity: "0",
@@ -82,22 +63,22 @@ const createChildren = (props) => {
           transition: "opacity 1s ease, transform 0.5s ease"
         },
         ...shouldHaveWhiteText && {
-          color: token__namespace.color.white
+          color: token.color.white
         }
       }
     }).build();
     wrapperChildren.push(attributionSubTextElement);
   }
-  if (action$1) {
-    const actionElement = action({
+  if (action) {
+    const actionElement = createCompositeQuoteAction({
       ...props,
-      action: action$1
+      action
     });
     wrapperChildren.push(actionElement);
   }
   return wrapperChildren;
 };
-const elementText = (props) => {
+const CreateQuoteTextElement = (props) => {
   const {
     image,
     isSizeLarge = false,
@@ -114,25 +95,28 @@ const elementText = (props) => {
     shouldHaveWhiteText,
     hasImage
   });
-  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("quote-text-container-wrapper").withChildren(...children).build();
-  return new webBuilderLibrary.ElementBuilder().withClassName("quote-text-container").withChild(wrapper).withStyles({
+  const wrapper = new ElementBuilder().withClassName("quote-text-container-wrapper").withChildren(...children).build();
+  return new ElementBuilder().withClassName("quote-text-container").withChild(wrapper).withStyles({
     element: {
       width: "100%",
-      [`@container (max-width: ${_constants.SMALL - 1}px)`]: {
-        paddingLeft: token__namespace.spacing.md,
+      [`@container (max-width: ${SMALL - 1}px)`]: {
+        paddingLeft: token.spacing.md,
         ...!hasImage && {
-          paddingTop: token__namespace.spacing.lg
+          paddingTop: token.spacing.lg
         },
         ...isSizeLargeAndNotFeatured && {
-          paddingTop: token__namespace.spacing["2xl"]
+          paddingTop: token.spacing["2xl"]
         }
       },
-      [`@container (min-width: ${_constants.SMALL}px)`]: {
-        paddingLeft: token__namespace.spacing["4xl"],
+      [`@container (min-width: ${SMALL}px)`]: {
+        paddingLeft: token.spacing["4xl"],
         ...isHasImageAndNotFeatured && { paddingLeft: "0" }
       }
     }
   }).build();
 };
-module.exports = elementText;
+const createCompositeQuoteText = CreateQuoteTextElement;
+export {
+  createCompositeQuoteText
+};
 //# sourceMappingURL=text.js.map

package/dist/composite/quote/elements/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../../source/composite/quote/elements/text.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 { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { default as elementAction } from './action';\nimport { default as elementQuote } from './quote';\nimport { SMALL } from '../_constants';\nimport { type QuoteTextProps } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\ninterface ChildrenProps\n  extends Pick<\n    QuoteTextProps,\n    | 'quote'\n    | 'image'\n    | 'attribution'\n    | 'attributionSubText'\n    | 'action'\n    | 'isThemeDark'\n    | 'isSizeLarge'\n    | 'isTypeFeatured'\n    | 'includesAnimation'\n  > {\n  shouldHaveWhiteText?: boolean;\n  hasImage: boolean;\n}\n\nconst createChildren = (props: ChildrenProps): ElementModel<HTMLElement>[] => {\n  const {\n    action,\n    attribution,\n    attributionSubText,\n    hasImage,\n    includesAnimation,\n    isThemeDark,\n    isSizeLarge,\n    quote,\n    shouldHaveWhiteText,\n  } = props;\n  const wrapperChildren: ElementModel<HTMLElement>[] = [];\n\n  if (quote) {\n    wrapperChildren.push(\n      elementQuote({\n        ...props,\n        shouldHaveWhiteText,\n        quote,\n        hasImage,\n        isSizeLarge,\n      }),\n    );\n  }\n\n  if (attribution) {\n    const attributionElement = new ElementBuilder(attribution)\n      .styled(\n        typography.sans.compose('medium', {\n          theme: theme.fontColor(shouldHaveWhiteText),\n        }),\n      )\n      .withClassName('quote-container-attribution')\n      .withStyles({\n        element: {\n          marginTop: token.spacing.sm,\n\n          ...(includesAnimation && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n\n          ...(!shouldHaveWhiteText && {\n            color: token.color.gray.dark,\n          }),\n\n          [`& *`]: {\n            color: 'currentColor',\n          },\n        },\n      })\n      .build();\n\n    wrapperChildren.push(attributionElement);\n  }\n\n  if (attributionSubText) {\n    const attributionSubTextElement = new ElementBuilder(attributionSubText)\n      .styled(typography.sans.small)\n      .withClassName('quote-container-text-attribution-sub-text')\n      .withStyles({\n        element: {\n          color: token.color.gray.dark,\n          fontStyle: 'italic',\n\n          ...(includesAnimation && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n\n          ...(shouldHaveWhiteText && {\n            color: token.color.white,\n          }),\n        },\n      })\n      .build();\n\n    wrapperChildren.push(attributionSubTextElement);\n  }\n\n  if (action) {\n    const actionElement = elementAction({\n      ...props,\n      action,\n    });\n\n    wrapperChildren.push(actionElement);\n  }\n\n  return wrapperChildren;\n};\n\nexport default (\n  props: Pick<\n    QuoteTextProps,\n    | 'isThemeDark'\n    | 'isThemeMaryland'\n    | 'isSizeLarge'\n    | 'isTypeFeatured'\n    | 'image'\n    | 'quote'\n    | 'attribution'\n    | 'attributionSubText'\n    | 'action'\n    | 'includesAnimation'\n  >,\n) => {\n  const {\n    image,\n    isSizeLarge = false,\n    isThemeDark,\n    isThemeMaryland,\n    isTypeFeatured = false,\n  } = props;\n  const shouldHaveWhiteText = isThemeDark || isThemeMaryland;\n  const isSizeLargeAndNotFeatured = isSizeLarge && !isTypeFeatured;\n  const hasImage = image != null;\n  const isHasImageAndNotFeatured = hasImage && !isTypeFeatured;\n\n  const children = createChildren({\n    ...props,\n    shouldHaveWhiteText,\n    hasImage,\n  });\n\n  const wrapper = new ElementBuilder()\n    .withClassName('quote-text-container-wrapper')\n    .withChildren(...children)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('quote-text-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        width: '100%',\n\n        [`@container (max-width: ${SMALL - 1}px)`]: {\n          paddingLeft: token.spacing.md,\n\n          ...(!hasImage && {\n            paddingTop: token.spacing.lg,\n          }),\n\n          ...(isSizeLargeAndNotFeatured && {\n            paddingTop: token.spacing['2xl'],\n          }),\n        },\n\n        [`@container (min-width: ${SMALL}px)`]: {\n          paddingLeft: token.spacing['4xl'],\n\n          ...(isHasImageAndNotFeatured && { paddingLeft: '0' }),\n        },\n      },\n    })\n    .build();\n};\n"],"names":["action","quote","elementQuote","ElementBuilder","typography","theme","token","elementAction","SMALL"],"mappings":"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"}
+{"version":3,"file":"text.js","sources":["../../../../source/composite/quote/elements/text.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 { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { createCompositeQuoteAction as elementAction } from './action';\nimport { createCompositeQuote as elementQuote } from './quote';\nimport { SMALL } from '../_constants';\nimport { type QuoteTextProps } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\ninterface ChildrenProps\n  extends Pick<\n    QuoteTextProps,\n    | 'quote'\n    | 'image'\n    | 'attribution'\n    | 'attributionSubText'\n    | 'action'\n    | 'isThemeDark'\n    | 'isSizeLarge'\n    | 'isTypeFeatured'\n    | 'includesAnimation'\n  > {\n  shouldHaveWhiteText?: boolean;\n  hasImage: boolean;\n}\n\nconst createChildren = (props: ChildrenProps): ElementModel<HTMLElement>[] => {\n  const {\n    action,\n    attribution,\n    attributionSubText,\n    hasImage,\n    includesAnimation,\n    isThemeDark,\n    isSizeLarge,\n    quote,\n    shouldHaveWhiteText,\n  } = props;\n  const wrapperChildren: ElementModel<HTMLElement>[] = [];\n\n  if (quote) {\n    wrapperChildren.push(\n      elementQuote({\n        ...props,\n        shouldHaveWhiteText,\n        quote,\n        hasImage,\n        isSizeLarge,\n      }),\n    );\n  }\n\n  if (attribution) {\n    const attributionElement = new ElementBuilder(attribution)\n      .styled(\n        typography.sans.compose('medium', {\n          theme: theme.fontColor(shouldHaveWhiteText),\n        }),\n      )\n      .withClassName('quote-container-attribution')\n      .withStyles({\n        element: {\n          marginTop: token.spacing.sm,\n\n          ...(includesAnimation && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n\n          ...(!shouldHaveWhiteText && {\n            color: token.color.gray.dark,\n          }),\n\n          [`& *`]: {\n            color: 'currentColor',\n          },\n        },\n      })\n      .build();\n\n    wrapperChildren.push(attributionElement);\n  }\n\n  if (attributionSubText) {\n    const attributionSubTextElement = new ElementBuilder(attributionSubText)\n      .styled(typography.sans.small)\n      .withClassName('quote-container-text-attribution-sub-text')\n      .withStyles({\n        element: {\n          color: token.color.gray.dark,\n          fontStyle: 'italic',\n\n          ...(includesAnimation && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n\n          ...(shouldHaveWhiteText && {\n            color: token.color.white,\n          }),\n        },\n      })\n      .build();\n\n    wrapperChildren.push(attributionSubTextElement);\n  }\n\n  if (action) {\n    const actionElement = elementAction({\n      ...props,\n      action,\n    });\n\n    wrapperChildren.push(actionElement);\n  }\n\n  return wrapperChildren;\n};\n\nconst CreateQuoteTextElement = (\n  props: Pick<\n    QuoteTextProps,\n    | 'isThemeDark'\n    | 'isThemeMaryland'\n    | 'isSizeLarge'\n    | 'isTypeFeatured'\n    | 'image'\n    | 'quote'\n    | 'attribution'\n    | 'attributionSubText'\n    | 'action'\n    | 'includesAnimation'\n  >,\n) => {\n  const {\n    image,\n    isSizeLarge = false,\n    isThemeDark,\n    isThemeMaryland,\n    isTypeFeatured = false,\n  } = props;\n  const shouldHaveWhiteText = isThemeDark || isThemeMaryland;\n  const isSizeLargeAndNotFeatured = isSizeLarge && !isTypeFeatured;\n  const hasImage = image != null;\n  const isHasImageAndNotFeatured = hasImage && !isTypeFeatured;\n\n  const children = createChildren({\n    ...props,\n    shouldHaveWhiteText,\n    hasImage,\n  });\n\n  const wrapper = new ElementBuilder()\n    .withClassName('quote-text-container-wrapper')\n    .withChildren(...children)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('quote-text-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        width: '100%',\n\n        [`@container (max-width: ${SMALL - 1}px)`]: {\n          paddingLeft: token.spacing.md,\n\n          ...(!hasImage && {\n            paddingTop: token.spacing.lg,\n          }),\n\n          ...(isSizeLargeAndNotFeatured && {\n            paddingTop: token.spacing['2xl'],\n          }),\n        },\n\n        [`@container (min-width: ${SMALL}px)`]: {\n          paddingLeft: token.spacing['4xl'],\n\n          ...(isHasImageAndNotFeatured && { paddingLeft: '0' }),\n        },\n      },\n    })\n    .build();\n};\n\nexport const createCompositeQuoteText = CreateQuoteTextElement;\n"],"names":["elementQuote","elementAction"],"mappings":"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"}

package/dist/composite/quote/featured.d.ts

@@ -1,5 +1,5 @@
 import { QuoteFeaturedProps } from './_types';
-declare const _default: (props: QuoteFeaturedProps) => {
+export declare const createCompositeQuoteFeatured: (props: QuoteFeaturedProps) => {
     events: {
         loadAnimation: () => void;
     };
@@ -8,5 +8,4 @@ declare const _default: (props: QuoteFeaturedProps) => {
     update?: (props: Partial<import('@universityofmaryland/web-builder-library').BuilderOptions>) => void;
     destroy?: () => void;
 };
-export default _default;
 //# sourceMappingURL=featured.d.ts.map

package/dist/composite/quote/featured.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"featured.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/featured.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;yBAyHnC,OAAO,kBAAkB;;;;;;;;;AAAzC,wBAuGE"}
+{"version":3,"file":"featured.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/featured.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAkOnD,eAAO,MAAM,4BAA4B,UAzGE,kBAAkB;;;;;;;;CAyGS,CAAC"}

package/dist/composite/quote/featured.js

@@ -1,82 +1,64 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const media = require("@universityofmaryland/web-utilities-library/media");
-const inline = require("./inline.js");
-const image = require("./elements/image.js");
-require("@universityofmaryland/web-styles-library/typography");
-require("@universityofmaryland/web-utilities-library/theme");
-const action = require("./elements/action.js");
-require("@universityofmaryland/web-icons-library/brand");
-const _constants = require("./_constants.js");
-const animation = require("./helper/animation.js");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import { imageFromSvg } from "@universityofmaryland/web-utilities-library/media";
+import { createCompositeQuoteInline } from "./inline.js";
+import { createCompositeQuoteImage } from "./elements/image.js";
+import "@universityofmaryland/web-styles-library/typography";
+import "@universityofmaryland/web-utilities-library/theme";
+import { createCompositeQuoteAction } from "./elements/action.js";
+import "@universityofmaryland/web-icons-library/brand";
+import { MEDIUM, SMALL } from "./_constants.js";
+import { quoteAnimation } from "./helper/animation.js";
 const BACKGROUND_TEXTURE_LIGHT = `<svg id="quote_background_light" aria-hidden="true" title="background decoration" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 850.5 532.1"><path d="M.3,0h332.7L.3,326.6V0Z" fill="#757575" fill-rule="evenodd" isolation="isolate" opacity=".04" stroke-width="0"/><path d="M517.9,532.1h332.7L308.6,0H0v23.6l517.9,508.5Z" fill="#000" fill-rule="evenodd" isolation="isolate" opacity=".04" stroke-width="0"/></svg>`;
 const BACKGROUND_TEXTURE_DARK = `<svg id="quote_background_dark" aria-hidden="true" title="background decoration" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 614.86 300.65"><defs><style>.cls-1{opacity:.25;}.cls-1,.cls-2{fill:#757575;fill-rule:evenodd;isolation:isolate;}.cls-2{opacity:.1;}</style></defs><path class="cls-2" d="m.27,0h332.67L27.46,299.93H.27V0Z"/><path class="cls-1" d="m0,0h308.65l306.21,300.65h-332.67L0,23.59V0Z"/></svg>`;
 const createImageContainer = (props) => {
-  const { image: image$1, action: action$1 } = props;
-  const containerBuilder = new webBuilderLibrary.ElementBuilder().withClassName("quote-featured-image").withStyles({
+  const { image, action } = props;
+  const containerBuilder = new ElementBuilder().withClassName("quote-featured-image").withStyles({
     element: {
       position: "relative",
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
-      marginTop: `-${token__namespace.spacing.lg}`,
+      marginTop: `-${token.spacing.lg}`,
       ["&[align-center=true]"]: {
         marginTop: "0",
         justifyContent: "center"
       },
-      [`@container (max-width: ${_constants.SMALL - 1}px)`]: {
-        padding: `0 ${token__namespace.spacing.lg}`
+      [`@container (max-width: ${SMALL - 1}px)`]: {
+        padding: `0 ${token.spacing.lg}`
       },
-      [`@container (min-width: ${_constants.SMALL}px) and (max-width: ${_constants.MEDIUM - 1}px)`]: {
+      [`@container (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px)`]: {
         margin: "0 auto",
-        marginTop: `-${token__namespace.spacing["8xl"]}`,
+        marginTop: `-${token.spacing["8xl"]}`,
         maxWidth: "300px"
       },
-      [`@container (min-width: ${_constants.MEDIUM}px)`]: {
-        paddingLeft: token__namespace.spacing["6xl"],
-        width: `calc(300px + ${token__namespace.spacing["6xl"]})`
+      [`@container (min-width: ${MEDIUM}px)`]: {
+        paddingLeft: token.spacing["6xl"],
+        width: `calc(300px + ${token.spacing["6xl"]})`
       }
     }
   });
-  if (image$1) {
-    const imageElement = image({
+  if (image) {
+    const imageElement = createCompositeQuoteImage({
       ...props,
       isTypeFeatured: true,
-      image: image$1
+      image
     });
     containerBuilder.withChild(imageElement);
   }
-  if (action$1) {
-    const actionElement = action({
+  if (action) {
+    const actionElement = createCompositeQuoteAction({
       isTypeFeatured: true,
-      action: action$1
+      action
     });
     containerBuilder.withChild(actionElement);
   }
   const container = containerBuilder.build();
-  if (window.innerWidth >= _constants.MEDIUM && image$1 instanceof HTMLImageElement) {
-    image$1.addEventListener("load", () => {
+  if (window.innerWidth >= MEDIUM && image instanceof HTMLImageElement) {
+    image.addEventListener("load", () => {
       const parent = container;
       if (!parent) return;
-      const aspectRatio = image$1.offsetHeight / parent.element.offsetHeight;
+      const aspectRatio = image.offsetHeight / parent.element.offsetHeight;
       if (aspectRatio < 0.5) {
         container.element.setAttribute("align-center", "true");
       }
@@ -89,11 +71,11 @@ const createTextureContainer = ({
   isThemeMaryland
 }) => {
   const isDarkText = isThemeDark || isThemeMaryland;
-  const backgroundTexture = media.imageFromSvg({
+  const backgroundTexture = imageFromSvg({
     SVG: isDarkText ? BACKGROUND_TEXTURE_DARK : BACKGROUND_TEXTURE_LIGHT
   });
-  const backgroundTextureElement = new webBuilderLibrary.ElementBuilder(backgroundTexture).withClassName("quote-background-texture").build();
-  const container = new webBuilderLibrary.ElementBuilder().withClassName("quote-featured-texture").withChild(backgroundTextureElement).withStyles({
+  const backgroundTextureElement = new ElementBuilder(backgroundTexture).withClassName("quote-background-texture").build();
+  const container = new ElementBuilder().withClassName("quote-featured-texture").withChild(backgroundTextureElement).withStyles({
     element: {
       overflow: "hidden",
       position: "absolute",
@@ -109,41 +91,41 @@ const createTextureContainer = ({
         height: "120%",
         objectFit: "cover"
       },
-      [`@container (max-width: ${_constants.MEDIUM - 1}px)`]: {
+      [`@container (max-width: ${MEDIUM - 1}px)`]: {
         display: "none"
       }
     }
   }).build();
   return container;
 };
-const featured = (props) => {
-  const { isThemeDark, isThemeMaryland, image: image2, isTransparent } = props;
-  const inlineQuote = inline({ ...props, isTypeFeatured: true });
-  const textContainer = new webBuilderLibrary.ElementBuilder().withClassName("quote-featured-text").withChild(inlineQuote).withStyles({
+const CreateQuoteFeaturedElement = (props) => {
+  const { isThemeDark, isThemeMaryland, image, isTransparent } = props;
+  const inlineQuote = createCompositeQuoteInline({ ...props, isTypeFeatured: true });
+  const textContainer = new ElementBuilder().withClassName("quote-featured-text").withChild(inlineQuote).withStyles({
     element: {
-      padding: token__namespace.spacing.lg,
+      padding: token.spacing.lg,
       position: "relative",
       width: "100%",
       ...isTransparent && { padding: "0" },
-      [`@container (min-width: ${_constants.SMALL}px)`]: {
-        padding: `${token__namespace.spacing["2xl"]}`
+      [`@container (min-width: ${SMALL}px)`]: {
+        padding: `${token.spacing["2xl"]}`
       },
-      [`@container (min-width: ${_constants.MEDIUM}px)`]: {
-        padding: `${token__namespace.spacing["4xl"]}`
+      [`@container (min-width: ${MEDIUM}px)`]: {
+        padding: `${token.spacing["4xl"]}`
       }
     }
   }).build();
-  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("quote-featured-container-wrapper").withStyles({
+  const wrapper = new ElementBuilder().withClassName("quote-featured-container-wrapper").withStyles({
     element: {
-      backgroundColor: token__namespace.color.gray.lightest,
+      backgroundColor: token.color.gray.lightest,
       position: "relative",
-      ...isThemeDark && { backgroundColor: token__namespace.color.black },
-      ...isThemeMaryland && { backgroundColor: token__namespace.color.red },
+      ...isThemeDark && { backgroundColor: token.color.black },
+      ...isThemeMaryland && { backgroundColor: token.color.red },
       ...isTransparent && { backgroundColor: "transparent" },
-      ...image2 && {
+      ...image && {
         display: "flex",
         flexDirection: "column",
-        [`@container (min-width: ${_constants.MEDIUM}px)`]: {
+        [`@container (min-width: ${MEDIUM}px)`]: {
           display: "flex",
           flexDirection: "row"
         }
@@ -153,29 +135,29 @@ const featured = (props) => {
   if (!isTransparent) {
     wrapper.withChild(createTextureContainer(props));
   }
-  if (image2) {
+  if (image) {
     wrapper.withChild(createImageContainer(props));
   }
   wrapper.withChild(textContainer);
   const wrapperBuilt = wrapper.build();
-  const spacer = new webBuilderLibrary.ElementBuilder().withClassName("quote-featured-container-spacer").withChild(wrapperBuilt).withStyles({
+  const spacer = new ElementBuilder().withClassName("quote-featured-container-spacer").withChild(wrapperBuilt).withStyles({
     element: {
-      paddingTop: token__namespace.spacing.lg,
+      paddingTop: token.spacing.lg,
       ...isTransparent && { padding: "0" },
-      [`@container (min-width: ${_constants.SMALL}px) and (max-width: ${_constants.MEDIUM - 1}px)`]: {
-        ...image2 && {
-          paddingTop: token__namespace.spacing["8xl"]
+      [`@container (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px)`]: {
+        ...image && {
+          paddingTop: token.spacing["8xl"]
         }
       }
     }
   }).build();
-  const container = new webBuilderLibrary.ElementBuilder().withClassName("quote-featured-container").withChild(spacer).withStyles({
+  const container = new ElementBuilder().withClassName("quote-featured-container").withChild(spacer).withStyles({
     element: {
       containerType: "inline-size"
     }
   }).build();
   const loadAnimation = () => {
-    animation.quoteAnimation({
+    quoteAnimation({
       ...props,
       quoteElement: container
     });
@@ -187,5 +169,8 @@ const featured = (props) => {
     }
   };
 };
-module.exports = featured;
+const createCompositeQuoteFeatured = CreateQuoteFeaturedElement;
+export {
+  createCompositeQuoteFeatured
+};
 //# sourceMappingURL=featured.js.map

package/dist/composite/quote/featured.js.map

@@ -1 +1 @@
-{"version":3,"file":"featured.js","sources":["../../../source/composite/quote/featured.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 InlineQuote from './inline';\nimport { image as elementImage, action as elementAction } from './elements';\nimport { quoteAnimation } from './helper/animation';\nimport { MEDIUM, SMALL } from './_constants';\nimport { type QuoteFeaturedProps } from './_types';\n\nconst BACKGROUND_TEXTURE_LIGHT = `<svg id=\"quote_background_light\" aria-hidden=\"true\" title=\"background decoration\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 850.5 532.1\"><path d=\"M.3,0h332.7L.3,326.6V0Z\" fill=\"#757575\" fill-rule=\"evenodd\" isolation=\"isolate\" opacity=\".04\" stroke-width=\"0\"/><path d=\"M517.9,532.1h332.7L308.6,0H0v23.6l517.9,508.5Z\" fill=\"#000\" fill-rule=\"evenodd\" isolation=\"isolate\" opacity=\".04\" stroke-width=\"0\"/></svg>`;\nconst BACKGROUND_TEXTURE_DARK = `<svg id=\"quote_background_dark\" aria-hidden=\"true\" title=\"background decoration\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 614.86 300.65\"><defs><style>.cls-1{opacity:.25;}.cls-1,.cls-2{fill:#757575;fill-rule:evenodd;isolation:isolate;}.cls-2{opacity:.1;}</style></defs><path class=\"cls-2\" d=\"m.27,0h332.67L27.46,299.93H.27V0Z\"/><path class=\"cls-1\" d=\"m0,0h308.65l306.21,300.65h-332.67L0,23.59V0Z\"/></svg>`;\n\nconst createImageContainer = (props: QuoteFeaturedProps) => {\n  const { image, action } = props;\n\n  const containerBuilder = new ElementBuilder()\n    .withClassName('quote-featured-image')\n    .withStyles({\n      element: {\n        position: 'relative',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        marginTop: `-${token.spacing.lg}`,\n\n        ['&[align-center=true]']: {\n          marginTop: '0',\n          justifyContent: 'center',\n        },\n\n        [`@container (max-width: ${SMALL - 1}px)`]: {\n          padding: `0 ${token.spacing.lg}`,\n        },\n\n        [`@container (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px)`]:\n          {\n            margin: '0 auto',\n            marginTop: `-${token.spacing['8xl']}`,\n            maxWidth: '300px',\n          },\n\n        [`@container (min-width: ${MEDIUM}px)`]: {\n          paddingLeft: token.spacing['6xl'],\n          width: `calc(300px + ${token.spacing['6xl']})`,\n        },\n      },\n    });\n\n  if (image) {\n    const imageElement = elementImage({\n      ...props,\n      isTypeFeatured: true,\n      image,\n    });\n    containerBuilder.withChild(imageElement);\n  }\n\n  if (action) {\n    const actionElement = elementAction({\n      isTypeFeatured: true,\n      action,\n    });\n    containerBuilder.withChild(actionElement);\n  }\n\n  const container = containerBuilder.build();\n\n  if (window.innerWidth >= MEDIUM && image instanceof HTMLImageElement) {\n    image.addEventListener('load', () => {\n      const parent = container;\n\n      if (!parent) return;\n\n      const aspectRatio = image.offsetHeight / parent.element.offsetHeight;\n\n      if (aspectRatio < 0.5) {\n        container.element.setAttribute('align-center', 'true');\n      }\n    });\n  }\n\n  return container;\n};\n\nconst createTextureContainer = ({\n  isThemeDark,\n  isThemeMaryland,\n}: QuoteFeaturedProps) => {\n  const isDarkText = isThemeDark || isThemeMaryland;\n  const backgroundTexture = imageFromSvg({\n    SVG: isDarkText ? BACKGROUND_TEXTURE_DARK : BACKGROUND_TEXTURE_LIGHT,\n  });\n\n  const backgroundTextureElement = new ElementBuilder(backgroundTexture)\n    .withClassName('quote-background-texture')\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('quote-featured-texture')\n    .withChild(backgroundTextureElement)\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        position: 'absolute',\n        top: '0',\n        left: '0',\n        width: '100%',\n        height: '100%',\n\n        [`& > img`]: {\n          position: 'absolute',\n          top: '0',\n          left: '0',\n          width: '70%',\n          height: '120%',\n          objectFit: 'cover',\n        },\n\n        [`@container (max-width: ${MEDIUM - 1}px)`]: {\n          display: 'none',\n        },\n      },\n    })\n    .build();\n\n  return container;\n};\n\nexport default (props: QuoteFeaturedProps) => {\n  const { isThemeDark, isThemeMaryland, image, isTransparent } = props;\n\n  const inlineQuote = InlineQuote({ ...props, isTypeFeatured: true });\n\n  const textContainer = new ElementBuilder()\n    .withClassName('quote-featured-text')\n    .withChild(inlineQuote)\n    .withStyles({\n      element: {\n        padding: token.spacing.lg,\n        position: 'relative',\n        width: '100%',\n\n        ...(isTransparent && { padding: '0' }),\n\n        [`@container (min-width: ${SMALL}px)`]: {\n          padding: `${token.spacing['2xl']}`,\n        },\n\n        [`@container (min-width: ${MEDIUM}px)`]: {\n          padding: `${token.spacing['4xl']}`,\n        },\n      },\n    })\n    .build();\n\n  const wrapper = new ElementBuilder()\n    .withClassName('quote-featured-container-wrapper')\n    .withStyles({\n      element: {\n        backgroundColor: token.color.gray.lightest,\n        position: 'relative',\n        ...(isThemeDark && { backgroundColor: token.color.black }),\n        ...(isThemeMaryland && { backgroundColor: token.color.red }),\n        ...(isTransparent && { backgroundColor: 'transparent' }),\n\n        ...(image && {\n          display: 'flex',\n          flexDirection: 'column',\n\n          [`@container (min-width: ${MEDIUM}px)`]: {\n            display: 'flex',\n            flexDirection: 'row',\n          },\n        }),\n      },\n    });\n\n  if (!isTransparent) {\n    wrapper.withChild(createTextureContainer(props));\n  }\n\n  if (image) {\n    wrapper.withChild(createImageContainer(props));\n  }\n\n  wrapper.withChild(textContainer);\n\n  const wrapperBuilt = wrapper.build();\n\n  const spacer = new ElementBuilder()\n    .withClassName('quote-featured-container-spacer')\n    .withChild(wrapperBuilt)\n    .withStyles({\n      element: {\n        paddingTop: token.spacing.lg,\n\n        ...(isTransparent && { padding: '0' }),\n\n        [`@container (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px)`]:\n          {\n            ...(image && {\n              paddingTop: token.spacing['8xl'],\n            }),\n          },\n      },\n    })\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('quote-featured-container')\n    .withChild(spacer)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n\n  const loadAnimation = () => {\n    quoteAnimation({\n      ...props,\n      quoteElement: container,\n    });\n  };\n\n  return {\n    ...container,\n    events: {\n      loadAnimation,\n    },\n  };\n};\n"],"names":["image","action","ElementBuilder","token","SMALL","MEDIUM","elementImage","elementAction","imageFromSvg","InlineQuote","quoteAnimation"],"mappings":"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"}
+{"version":3,"file":"featured.js","sources":["../../../source/composite/quote/featured.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 { createCompositeQuoteInline as InlineQuote } from './inline';\nimport { image as elementImage, action as elementAction } from './elements';\nimport { quoteAnimation } from './helper/animation';\nimport { MEDIUM, SMALL } from './_constants';\nimport { type QuoteFeaturedProps } from './_types';\n\nconst BACKGROUND_TEXTURE_LIGHT = `<svg id=\"quote_background_light\" aria-hidden=\"true\" title=\"background decoration\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 850.5 532.1\"><path d=\"M.3,0h332.7L.3,326.6V0Z\" fill=\"#757575\" fill-rule=\"evenodd\" isolation=\"isolate\" opacity=\".04\" stroke-width=\"0\"/><path d=\"M517.9,532.1h332.7L308.6,0H0v23.6l517.9,508.5Z\" fill=\"#000\" fill-rule=\"evenodd\" isolation=\"isolate\" opacity=\".04\" stroke-width=\"0\"/></svg>`;\nconst BACKGROUND_TEXTURE_DARK = `<svg id=\"quote_background_dark\" aria-hidden=\"true\" title=\"background decoration\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 614.86 300.65\"><defs><style>.cls-1{opacity:.25;}.cls-1,.cls-2{fill:#757575;fill-rule:evenodd;isolation:isolate;}.cls-2{opacity:.1;}</style></defs><path class=\"cls-2\" d=\"m.27,0h332.67L27.46,299.93H.27V0Z\"/><path class=\"cls-1\" d=\"m0,0h308.65l306.21,300.65h-332.67L0,23.59V0Z\"/></svg>`;\n\nconst createImageContainer = (props: QuoteFeaturedProps) => {\n  const { image, action } = props;\n\n  const containerBuilder = new ElementBuilder()\n    .withClassName('quote-featured-image')\n    .withStyles({\n      element: {\n        position: 'relative',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        marginTop: `-${token.spacing.lg}`,\n\n        ['&[align-center=true]']: {\n          marginTop: '0',\n          justifyContent: 'center',\n        },\n\n        [`@container (max-width: ${SMALL - 1}px)`]: {\n          padding: `0 ${token.spacing.lg}`,\n        },\n\n        [`@container (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px)`]:\n          {\n            margin: '0 auto',\n            marginTop: `-${token.spacing['8xl']}`,\n            maxWidth: '300px',\n          },\n\n        [`@container (min-width: ${MEDIUM}px)`]: {\n          paddingLeft: token.spacing['6xl'],\n          width: `calc(300px + ${token.spacing['6xl']})`,\n        },\n      },\n    });\n\n  if (image) {\n    const imageElement = elementImage({\n      ...props,\n      isTypeFeatured: true,\n      image,\n    });\n    containerBuilder.withChild(imageElement);\n  }\n\n  if (action) {\n    const actionElement = elementAction({\n      isTypeFeatured: true,\n      action,\n    });\n    containerBuilder.withChild(actionElement);\n  }\n\n  const container = containerBuilder.build();\n\n  if (window.innerWidth >= MEDIUM && image instanceof HTMLImageElement) {\n    image.addEventListener('load', () => {\n      const parent = container;\n\n      if (!parent) return;\n\n      const aspectRatio = image.offsetHeight / parent.element.offsetHeight;\n\n      if (aspectRatio < 0.5) {\n        container.element.setAttribute('align-center', 'true');\n      }\n    });\n  }\n\n  return container;\n};\n\nconst createTextureContainer = ({\n  isThemeDark,\n  isThemeMaryland,\n}: QuoteFeaturedProps) => {\n  const isDarkText = isThemeDark || isThemeMaryland;\n  const backgroundTexture = imageFromSvg({\n    SVG: isDarkText ? BACKGROUND_TEXTURE_DARK : BACKGROUND_TEXTURE_LIGHT,\n  });\n\n  const backgroundTextureElement = new ElementBuilder(backgroundTexture)\n    .withClassName('quote-background-texture')\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('quote-featured-texture')\n    .withChild(backgroundTextureElement)\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        position: 'absolute',\n        top: '0',\n        left: '0',\n        width: '100%',\n        height: '100%',\n\n        [`& > img`]: {\n          position: 'absolute',\n          top: '0',\n          left: '0',\n          width: '70%',\n          height: '120%',\n          objectFit: 'cover',\n        },\n\n        [`@container (max-width: ${MEDIUM - 1}px)`]: {\n          display: 'none',\n        },\n      },\n    })\n    .build();\n\n  return container;\n};\n\nconst CreateQuoteFeaturedElement = (props: QuoteFeaturedProps) => {\n  const { isThemeDark, isThemeMaryland, image, isTransparent } = props;\n\n  const inlineQuote = InlineQuote({ ...props, isTypeFeatured: true });\n\n  const textContainer = new ElementBuilder()\n    .withClassName('quote-featured-text')\n    .withChild(inlineQuote)\n    .withStyles({\n      element: {\n        padding: token.spacing.lg,\n        position: 'relative',\n        width: '100%',\n\n        ...(isTransparent && { padding: '0' }),\n\n        [`@container (min-width: ${SMALL}px)`]: {\n          padding: `${token.spacing['2xl']}`,\n        },\n\n        [`@container (min-width: ${MEDIUM}px)`]: {\n          padding: `${token.spacing['4xl']}`,\n        },\n      },\n    })\n    .build();\n\n  const wrapper = new ElementBuilder()\n    .withClassName('quote-featured-container-wrapper')\n    .withStyles({\n      element: {\n        backgroundColor: token.color.gray.lightest,\n        position: 'relative',\n        ...(isThemeDark && { backgroundColor: token.color.black }),\n        ...(isThemeMaryland && { backgroundColor: token.color.red }),\n        ...(isTransparent && { backgroundColor: 'transparent' }),\n\n        ...(image && {\n          display: 'flex',\n          flexDirection: 'column',\n\n          [`@container (min-width: ${MEDIUM}px)`]: {\n            display: 'flex',\n            flexDirection: 'row',\n          },\n        }),\n      },\n    });\n\n  if (!isTransparent) {\n    wrapper.withChild(createTextureContainer(props));\n  }\n\n  if (image) {\n    wrapper.withChild(createImageContainer(props));\n  }\n\n  wrapper.withChild(textContainer);\n\n  const wrapperBuilt = wrapper.build();\n\n  const spacer = new ElementBuilder()\n    .withClassName('quote-featured-container-spacer')\n    .withChild(wrapperBuilt)\n    .withStyles({\n      element: {\n        paddingTop: token.spacing.lg,\n\n        ...(isTransparent && { padding: '0' }),\n\n        [`@container (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px)`]:\n          {\n            ...(image && {\n              paddingTop: token.spacing['8xl'],\n            }),\n          },\n      },\n    })\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('quote-featured-container')\n    .withChild(spacer)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n\n  const loadAnimation = () => {\n    quoteAnimation({\n      ...props,\n      quoteElement: container,\n    });\n  };\n\n  return {\n    ...container,\n    events: {\n      loadAnimation,\n    },\n  };\n};\n\nexport const createCompositeQuoteFeatured = CreateQuoteFeaturedElement;\n"],"names":["elementImage","elementAction","InlineQuote"],"mappings":"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"}

package/dist/composite/quote/helper/animation.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const quoteAnimation = ({
   image,
   includesAnimation,
@@ -101,5 +99,7 @@ const quoteAnimation = ({
     observer.observe(quoteTextElement);
   }
 };
-exports.quoteAnimation = quoteAnimation;
+export {
+  quoteAnimation
+};
 //# sourceMappingURL=animation.js.map

package/dist/composite/quote/helper/animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"animation.js","sources":["../../../../source/composite/quote/helper/animation.ts"],"sourcesContent":["import { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\ninterface QuoteAnimationProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'quote' | 'includesAnimation' | 'image'> {\n  quoteElement: ElementModel<HTMLElement>;\n}\n\nexport const quoteAnimation = ({\n  image,\n  includesAnimation,\n  isTypeFeatured = false,\n  quote,\n  quoteElement,\n}: QuoteAnimationProps) => {\n  if (!includesAnimation || !quote) return;\n\n  const quoteTextElement = quoteElement.element.querySelector(\n    '.quote-container-quote',\n  ) as HTMLElement;\n  const attributionElement = quoteElement.element.querySelector(\n    '.quote-container-attribution',\n  ) as HTMLElement;\n  const attributionSubTextElement = quoteElement.element.querySelector(\n    '.quote-container-text-attribution-sub-text',\n  ) as HTMLElement;\n  const actionsElement = quoteElement.element.querySelector(\n    '.quote-container-actions',\n  ) as HTMLElement;\n\n  const animateAction = !isTypeFeatured || (isTypeFeatured && !image);\n\n  const applyFinalState = () => {\n    const wordsList = Array.from(\n      quoteTextElement.querySelectorAll('.quote-text-split-word'),\n    ) as HTMLElement[];\n\n    wordsList.forEach((word) => {\n      word.style.transition = 'none';\n      word.style.opacity = '1';\n      word.style.transform = 'translateY(0)';\n    });\n\n    if (attributionElement) {\n      attributionElement.style.transition = 'none';\n      attributionElement.style.opacity = '1';\n      attributionElement.style.transform = 'translateY(0)';\n    }\n\n    if (attributionSubTextElement) {\n      attributionSubTextElement.style.transition = 'none';\n      attributionSubTextElement.style.opacity = '1';\n      attributionSubTextElement.style.transform = 'translateY(0)';\n    }\n\n    if (actionsElement && animateAction) {\n      actionsElement.style.transition = 'none';\n      actionsElement.style.opacity = '1';\n      actionsElement.style.transform = 'translateY(0)';\n    }\n  };\n\n  const runAnimation = () => {\n    const wordsList = Array.from(\n      quoteTextElement.querySelectorAll('.quote-text-split-word'),\n    ) as HTMLElement[];\n\n    let quoteAnimationLength = 50;\n\n    wordsList.forEach((word, i) => {\n      setTimeout(() => {\n        word.style.opacity = '1';\n        word.style.transform = 'translateY(0)';\n      }, i * 50);\n\n      quoteAnimationLength += 50;\n    });\n\n    if (attributionElement) {\n      setTimeout(() => {\n        attributionElement.style.opacity = '1';\n        attributionElement.style.transform = 'translateY(0)';\n      }, quoteAnimationLength);\n    }\n\n    if (attributionSubTextElement) {\n      setTimeout(() => {\n        attributionSubTextElement.style.opacity = '1';\n        attributionSubTextElement.style.transform = 'translateY(0)';\n      }, quoteAnimationLength);\n    }\n\n    if (actionsElement && animateAction) {\n      setTimeout(() => {\n        actionsElement.style.opacity = '1';\n        actionsElement.style.transform = 'translateY(0)';\n      }, quoteAnimationLength);\n    }\n  };\n\n  const observer = new IntersectionObserver(\n    (entries) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          runAnimation();\n          observer.unobserve(entry.target);\n        }\n      });\n    },\n    {\n      rootMargin: '0px 0px -120px 0px',\n      threshold: 0,\n    },\n  );\n\n  const rect = quoteTextElement.getBoundingClientRect();\n  const windowHeight =\n    window.innerHeight || document.documentElement.clientHeight;\n  const triggerPoint = windowHeight - 120;\n  const isAlreadyPast = rect.top < triggerPoint;\n\n  if (isAlreadyPast) {\n    applyFinalState();\n  } else {\n    observer.observe(quoteTextElement);\n  }\n};\n"],"names":[],"mappings":";;AASO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AACF,MAA2B;AACzB,MAAI,CAAC,qBAAqB,CAAC,MAAO;AAElC,QAAM,mBAAmB,aAAa,QAAQ;AAAA,IAC5C;AAAA,EAAA;AAEF,QAAM,qBAAqB,aAAa,QAAQ;AAAA,IAC9C;AAAA,EAAA;AAEF,QAAM,4BAA4B,aAAa,QAAQ;AAAA,IACrD;AAAA,EAAA;AAEF,QAAM,iBAAiB,aAAa,QAAQ;AAAA,IAC1C;AAAA,EAAA;AAGF,QAAM,gBAAgB,CAAC,kBAAmB,kBAAkB,CAAC;AAE7D,QAAM,kBAAkB,MAAM;AAC5B,UAAM,YAAY,MAAM;AAAA,MACtB,iBAAiB,iBAAiB,wBAAwB;AAAA,IAAA;AAG5D,cAAU,QAAQ,CAAC,SAAS;AAC1B,WAAK,MAAM,aAAa;AACxB,WAAK,MAAM,UAAU;AACrB,WAAK,MAAM,YAAY;AAAA,IACzB,CAAC;AAED,QAAI,oBAAoB;AACtB,yBAAmB,MAAM,aAAa;AACtC,yBAAmB,MAAM,UAAU;AACnC,yBAAmB,MAAM,YAAY;AAAA,IACvC;AAEA,QAAI,2BAA2B;AAC7B,gCAA0B,MAAM,aAAa;AAC7C,gCAA0B,MAAM,UAAU;AAC1C,gCAA0B,MAAM,YAAY;AAAA,IAC9C;AAEA,QAAI,kBAAkB,eAAe;AACnC,qBAAe,MAAM,aAAa;AAClC,qBAAe,MAAM,UAAU;AAC/B,qBAAe,MAAM,YAAY;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AACzB,UAAM,YAAY,MAAM;AAAA,MACtB,iBAAiB,iBAAiB,wBAAwB;AAAA,IAAA;AAG5D,QAAI,uBAAuB;AAE3B,cAAU,QAAQ,CAAC,MAAM,MAAM;AAC7B,iBAAW,MAAM;AACf,aAAK,MAAM,UAAU;AACrB,aAAK,MAAM,YAAY;AAAA,MACzB,GAAG,IAAI,EAAE;AAET,8BAAwB;AAAA,IAC1B,CAAC;AAED,QAAI,oBAAoB;AACtB,iBAAW,MAAM;AACf,2BAAmB,MAAM,UAAU;AACnC,2BAAmB,MAAM,YAAY;AAAA,MACvC,GAAG,oBAAoB;AAAA,IACzB;AAEA,QAAI,2BAA2B;AAC7B,iBAAW,MAAM;AACf,kCAA0B,MAAM,UAAU;AAC1C,kCAA0B,MAAM,YAAY;AAAA,MAC9C,GAAG,oBAAoB;AAAA,IACzB;AAEA,QAAI,kBAAkB,eAAe;AACnC,iBAAW,MAAM;AACf,uBAAe,MAAM,UAAU;AAC/B,uBAAe,MAAM,YAAY;AAAA,MACnC,GAAG,oBAAoB;AAAA,IACzB;AAAA,EACF;AAEA,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,uBAAA;AACA,mBAAS,UAAU,MAAM,MAAM;AAAA,QACjC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,YAAY;AAAA,MACZ,WAAW;AAAA,IAAA;AAAA,EACb;AAGF,QAAM,OAAO,iBAAiB,sBAAA;AAC9B,QAAM,eACJ,OAAO,eAAe,SAAS,gBAAgB;AACjD,QAAM,eAAe,eAAe;AACpC,QAAM,gBAAgB,KAAK,MAAM;AAEjC,MAAI,eAAe;AACjB,oBAAA;AAAA,EACF,OAAO;AACL,aAAS,QAAQ,gBAAgB;AAAA,EACnC;AACF;;"}
+{"version":3,"file":"animation.js","sources":["../../../../source/composite/quote/helper/animation.ts"],"sourcesContent":["import { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\ninterface QuoteAnimationProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'quote' | 'includesAnimation' | 'image'> {\n  quoteElement: ElementModel<HTMLElement>;\n}\n\nexport const quoteAnimation = ({\n  image,\n  includesAnimation,\n  isTypeFeatured = false,\n  quote,\n  quoteElement,\n}: QuoteAnimationProps) => {\n  if (!includesAnimation || !quote) return;\n\n  const quoteTextElement = quoteElement.element.querySelector(\n    '.quote-container-quote',\n  ) as HTMLElement;\n  const attributionElement = quoteElement.element.querySelector(\n    '.quote-container-attribution',\n  ) as HTMLElement;\n  const attributionSubTextElement = quoteElement.element.querySelector(\n    '.quote-container-text-attribution-sub-text',\n  ) as HTMLElement;\n  const actionsElement = quoteElement.element.querySelector(\n    '.quote-container-actions',\n  ) as HTMLElement;\n\n  const animateAction = !isTypeFeatured || (isTypeFeatured && !image);\n\n  const applyFinalState = () => {\n    const wordsList = Array.from(\n      quoteTextElement.querySelectorAll('.quote-text-split-word'),\n    ) as HTMLElement[];\n\n    wordsList.forEach((word) => {\n      word.style.transition = 'none';\n      word.style.opacity = '1';\n      word.style.transform = 'translateY(0)';\n    });\n\n    if (attributionElement) {\n      attributionElement.style.transition = 'none';\n      attributionElement.style.opacity = '1';\n      attributionElement.style.transform = 'translateY(0)';\n    }\n\n    if (attributionSubTextElement) {\n      attributionSubTextElement.style.transition = 'none';\n      attributionSubTextElement.style.opacity = '1';\n      attributionSubTextElement.style.transform = 'translateY(0)';\n    }\n\n    if (actionsElement && animateAction) {\n      actionsElement.style.transition = 'none';\n      actionsElement.style.opacity = '1';\n      actionsElement.style.transform = 'translateY(0)';\n    }\n  };\n\n  const runAnimation = () => {\n    const wordsList = Array.from(\n      quoteTextElement.querySelectorAll('.quote-text-split-word'),\n    ) as HTMLElement[];\n\n    let quoteAnimationLength = 50;\n\n    wordsList.forEach((word, i) => {\n      setTimeout(() => {\n        word.style.opacity = '1';\n        word.style.transform = 'translateY(0)';\n      }, i * 50);\n\n      quoteAnimationLength += 50;\n    });\n\n    if (attributionElement) {\n      setTimeout(() => {\n        attributionElement.style.opacity = '1';\n        attributionElement.style.transform = 'translateY(0)';\n      }, quoteAnimationLength);\n    }\n\n    if (attributionSubTextElement) {\n      setTimeout(() => {\n        attributionSubTextElement.style.opacity = '1';\n        attributionSubTextElement.style.transform = 'translateY(0)';\n      }, quoteAnimationLength);\n    }\n\n    if (actionsElement && animateAction) {\n      setTimeout(() => {\n        actionsElement.style.opacity = '1';\n        actionsElement.style.transform = 'translateY(0)';\n      }, quoteAnimationLength);\n    }\n  };\n\n  const observer = new IntersectionObserver(\n    (entries) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          runAnimation();\n          observer.unobserve(entry.target);\n        }\n      });\n    },\n    {\n      rootMargin: '0px 0px -120px 0px',\n      threshold: 0,\n    },\n  );\n\n  const rect = quoteTextElement.getBoundingClientRect();\n  const windowHeight =\n    window.innerHeight || document.documentElement.clientHeight;\n  const triggerPoint = windowHeight - 120;\n  const isAlreadyPast = rect.top < triggerPoint;\n\n  if (isAlreadyPast) {\n    applyFinalState();\n  } else {\n    observer.observe(quoteTextElement);\n  }\n};\n"],"names":[],"mappings":"AASO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AACF,MAA2B;AACzB,MAAI,CAAC,qBAAqB,CAAC,MAAO;AAElC,QAAM,mBAAmB,aAAa,QAAQ;AAAA,IAC5C;AAAA,EAAA;AAEF,QAAM,qBAAqB,aAAa,QAAQ;AAAA,IAC9C;AAAA,EAAA;AAEF,QAAM,4BAA4B,aAAa,QAAQ;AAAA,IACrD;AAAA,EAAA;AAEF,QAAM,iBAAiB,aAAa,QAAQ;AAAA,IAC1C;AAAA,EAAA;AAGF,QAAM,gBAAgB,CAAC,kBAAmB,kBAAkB,CAAC;AAE7D,QAAM,kBAAkB,MAAM;AAC5B,UAAM,YAAY,MAAM;AAAA,MACtB,iBAAiB,iBAAiB,wBAAwB;AAAA,IAAA;AAG5D,cAAU,QAAQ,CAAC,SAAS;AAC1B,WAAK,MAAM,aAAa;AACxB,WAAK,MAAM,UAAU;AACrB,WAAK,MAAM,YAAY;AAAA,IACzB,CAAC;AAED,QAAI,oBAAoB;AACtB,yBAAmB,MAAM,aAAa;AACtC,yBAAmB,MAAM,UAAU;AACnC,yBAAmB,MAAM,YAAY;AAAA,IACvC;AAEA,QAAI,2BAA2B;AAC7B,gCAA0B,MAAM,aAAa;AAC7C,gCAA0B,MAAM,UAAU;AAC1C,gCAA0B,MAAM,YAAY;AAAA,IAC9C;AAEA,QAAI,kBAAkB,eAAe;AACnC,qBAAe,MAAM,aAAa;AAClC,qBAAe,MAAM,UAAU;AAC/B,qBAAe,MAAM,YAAY;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AACzB,UAAM,YAAY,MAAM;AAAA,MACtB,iBAAiB,iBAAiB,wBAAwB;AAAA,IAAA;AAG5D,QAAI,uBAAuB;AAE3B,cAAU,QAAQ,CAAC,MAAM,MAAM;AAC7B,iBAAW,MAAM;AACf,aAAK,MAAM,UAAU;AACrB,aAAK,MAAM,YAAY;AAAA,MACzB,GAAG,IAAI,EAAE;AAET,8BAAwB;AAAA,IAC1B,CAAC;AAED,QAAI,oBAAoB;AACtB,iBAAW,MAAM;AACf,2BAAmB,MAAM,UAAU;AACnC,2BAAmB,MAAM,YAAY;AAAA,MACvC,GAAG,oBAAoB;AAAA,IACzB;AAEA,QAAI,2BAA2B;AAC7B,iBAAW,MAAM;AACf,kCAA0B,MAAM,UAAU;AAC1C,kCAA0B,MAAM,YAAY;AAAA,MAC9C,GAAG,oBAAoB;AAAA,IACzB;AAEA,QAAI,kBAAkB,eAAe;AACnC,iBAAW,MAAM;AACf,uBAAe,MAAM,UAAU;AAC/B,uBAAe,MAAM,YAAY;AAAA,MACnC,GAAG,oBAAoB;AAAA,IACzB;AAAA,EACF;AAEA,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,uBAAA;AACA,mBAAS,UAAU,MAAM,MAAM;AAAA,QACjC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,YAAY;AAAA,MACZ,WAAW;AAAA,IAAA;AAAA,EACb;AAGF,QAAM,OAAO,iBAAiB,sBAAA;AAC9B,QAAM,eACJ,OAAO,eAAe,SAAS,gBAAgB;AACjD,QAAM,eAAe,eAAe;AACpC,QAAM,gBAAgB,KAAK,MAAM;AAEjC,MAAI,eAAe;AACjB,oBAAA;AAAA,EACF,OAAO;AACL,aAAS,QAAQ,gBAAgB;AAAA,EACnC;AACF;"}

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

@@ -1,4 +1,4 @@
 export * as elements from './elements';
-export { default as featured } from './featured';
-export { default as inline } from './inline';
+export { createCompositeQuoteFeatured as featured } from './featured';
+export { createCompositeQuoteInline as inline } from './inline';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,4BAA4B,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtE,OAAO,EAAE,0BAA0B,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/composite/quote/index.js

@@ -1,9 +1,9 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./elements/index.js");
-const featured = require("./featured.js");
-const inline = require("./inline.js");
-exports.elements = index;
-exports.featured = featured;
-exports.inline = inline;
+import * as index from "./elements/index.js";
+import { createCompositeQuoteFeatured } from "./featured.js";
+import { createCompositeQuoteInline } from "./inline.js";
+export {
+  index as elements,
+  createCompositeQuoteFeatured as featured,
+  createCompositeQuoteInline as inline
+};
 //# sourceMappingURL=index.js.map

package/dist/composite/quote/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/quote/inline.d.ts

@@ -1,5 +1,5 @@
 import { QuoteInlineProps } from './_types';
-declare const _default: (props: QuoteInlineProps) => {
+export declare const createCompositeQuoteInline: (props: QuoteInlineProps) => {
     events: {
         loadAnimation: () => void;
     };
@@ -8,5 +8,4 @@ declare const _default: (props: QuoteInlineProps) => {
     update?: (props: Partial<import('@universityofmaryland/web-builder-library').BuilderOptions>) => void;
     destroy?: () => void;
 };
-export default _default;
 //# sourceMappingURL=inline.d.ts.map

package/dist/composite/quote/inline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/inline.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;yBAEjC,OAAO,gBAAgB;;;;;;;;;AAAvC,wBAuDE"}
+{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/inline.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AA2DjD,eAAO,MAAM,0BAA0B,UAzDE,gBAAgB;;;;;;;;CAyDS,CAAC"}