@universityofmaryland/web-elements-library 1.4.7 → 1.5.0-beta.0

package/dist/composite/quote/inline.mjs

@@ -1,277 +1,61 @@
-import { token } from "@universityofmaryland/web-styles-library";
-import { QUOTE } from "../../utilities/assets/icons.mjs";
-import "../../node_modules/postcss/lib/postcss.mjs";
-import "../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../node_modules/postcss-js/index.mjs";
-import QuoteText from "./elements/text.mjs";
-import Image from "./elements/image.mjs";
-const SMALL = 500;
-const ELEMENT_NAME = "umd-element-quote-inline";
-const ATTRIBUTE_WITH_IMAGE = "has-image";
-const ATTRIBUTE_THEME = "theme";
-const ATTRIBUTE_SIZE = "size";
-const THEME_MARYLAND = "maryland";
-const SIZE_LARGE = "large";
-const TEXT_CONTAINER = QuoteText.elements.container;
-const TEXT_CONTAINER_QUOTE_WRAPPER = QuoteText.elements.quoteWrapper;
-const QUOTE_INLINE_CONTAINER = "quote-inline-container";
-const QUOTE_INLINE_CONTAINER_WRAPPER = "quote-inline-container-wrapper";
-const IS_THEME_MARYLAND = `[${ATTRIBUTE_THEME}='${THEME_MARYLAND}']`;
-const IS_SIZE_LARGE = `[${ATTRIBUTE_SIZE}='${SIZE_LARGE}']`;
-const IS_WITH_IMAGE = `[${ATTRIBUTE_WITH_IMAGE}]`;
-const IS_WITH_IMAGE_CONTAINER = `.${QUOTE_INLINE_CONTAINER}${IS_WITH_IMAGE}`;
-const IS_SIZE_LARGE_CONTAINER = `.${QUOTE_INLINE_CONTAINER}${IS_SIZE_LARGE}`;
-const IS_SIZE_LARGE_WITH_IMAGE_CONTAINER = `${IS_WITH_IMAGE_CONTAINER}${IS_WITH_IMAGE}`;
-const IS_TEXT_CONTAINER_OVERWRITE = `.${QUOTE_INLINE_CONTAINER} .${TEXT_CONTAINER}`;
-const IS_IMAGE_CONTAINER_OVERWRITE = `.${QUOTE_INLINE_CONTAINER} .${Image.elements.container}`;
-const IS_MARYLAND_CONTAINER = `.${QUOTE_INLINE_CONTAINER}${IS_THEME_MARYLAND}`;
-const IS_SIZE_LARGE_TEXT_CONTAINER = `${IS_SIZE_LARGE_CONTAINER} .${TEXT_CONTAINER}`;
-const IS_WITH_IMAGE_TEXT_CONTAINER = `${IS_WITH_IMAGE_CONTAINER} .${TEXT_CONTAINER}`;
-const IS_WITH_IMAGE_TEXT_QUOTE = `${IS_WITH_IMAGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER}`;
-const IS_WITH_IMAGE_SIZE_LARGE_TEXT_CONTAINER = `${IS_SIZE_LARGE_WITH_IMAGE_CONTAINER} .${TEXT_CONTAINER}`;
-const IS_WITH_IMAGE_SIZE_LARGE_TEXT_QUOTE = `${IS_SIZE_LARGE_WITH_IMAGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER}`;
-const OverwriteThemeMaryland = `
-  ${IS_MARYLAND_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER}:before {
-    background-color: ${token.color.gold};
-  }
-  
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_MARYLAND_CONTAINER} .${Image.elements.container} img  {
-      border-right: 2px solid ${token.color.gold};
-    }
-  }
-  
-  ${IS_MARYLAND_CONTAINER} span svg {
-    fill: ${token.color.gold} !important;
-  }
-`;
-const OverwriteSizeLarge = `
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_SIZE_LARGE_CONTAINER} .${QUOTE_INLINE_CONTAINER_WRAPPER} {
-      gap: ${token.spacing.xl};
-    }
-  }
-
-  ${IS_SIZE_LARGE_CONTAINER} .${Image.elements.container} img {
-    max-width: 200px;
-  }
-
-  ${IS_SIZE_LARGE_CONTAINER} .${Image.elements.container} span {
-    bottom: -7px;
-    left: -2px;
-    height: 26px;
-    width: 36px;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_SIZE_LARGE_CONTAINER} .${Image.elements.container} span {
-      height: 30px;
-      width: 41px;
-      top: -14px;
-      right: -28px;
-      left: inherit;
-    }
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {
-    ${IS_SIZE_LARGE_TEXT_CONTAINER} {
-      padding-top:  ${token.spacing["2xl"]};
-    }
-  }
-  
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_SIZE_LARGE_TEXT_CONTAINER} {
-      padding-left: ${token.spacing.md};
-    }
-  }
-
-  ${IS_SIZE_LARGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {
-    height: 26px;
-    width: 36px;
-    top: -${token.spacing["2xl"]};
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_SIZE_LARGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {
-      left: -${token.spacing["6xl"]};
-      top: 0;
-    }
-  }
-`;
-const OverwriteSizedLargeWithImage = `
-  ${IS_WITH_IMAGE_SIZE_LARGE_TEXT_CONTAINER} {
-    padding-top: 0;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_WITH_IMAGE_SIZE_LARGE_TEXT_QUOTE} {
-      margin-left: 0;
-      padding-left: 0;
-    }
-  }
-
-  ${IS_WITH_IMAGE_SIZE_LARGE_TEXT_QUOTE} span {
-    display: none;
-  }
-`;
-const OverwriteWithImage = `
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_WITH_IMAGE_TEXT_CONTAINER} {
-      padding-left: 0;
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_WITH_IMAGE_TEXT_QUOTE}:before {
-      display: none;
-    }
-  }
-`;
-const TextContainer = `
-  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {
-    ${IS_TEXT_CONTAINER_OVERWRITE} {
-      padding-top: ${token.spacing.lg};
-      padding-left: ${token.spacing.md};
-    }
-  }
-  
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_TEXT_CONTAINER_OVERWRITE} {
-      padding-left: ${token.spacing["4xl"]};
-    }
-  }
-
-  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} {
-    position: relative;
-  }
-
-  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER}:before {
-    content: '';
-    position: absolute;
-    left: -${token.spacing.md};
-    top: 7px;
-    height: calc(100% - 14px);
-    width: 2px;
-    display: block;
-    background-color: ${token.color.red};
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER}:before {
-      left: -${token.spacing.md};
-    }
-  }
-
-  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {
-    position: absolute;
-    left: -${token.spacing.md};
-    top: -${token.spacing.lg};
-    height: 15px;
-    width: 22px;
-    display: block;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {
-      position: absolute;
-      left: -${token.spacing["4xl"]};
-      top: 0;
-    }
-  }
-
-  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} svg {
-    fill: ${token.color.red};
-  }
-`;
-const ImageContainer = `
-  ${IS_IMAGE_CONTAINER_OVERWRITE} {
-    margin-bottom: ${token.spacing.sm};
-    position: relative;
-  }
-
-  ${IS_IMAGE_CONTAINER_OVERWRITE} img {
-    max-width: 160px;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_IMAGE_CONTAINER_OVERWRITE} img  {
-      border-right: 2px solid ${token.color.red};
-    }
-  }
-
-  ${IS_IMAGE_CONTAINER_OVERWRITE} span {
-    position: absolute;
-    bottom: -7px;
-    left: -2px;
-    height: 15px;
-    width: 21px;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_IMAGE_CONTAINER_OVERWRITE} span {
-      height: 20px;
-      width: 29px;
-      top: -11px;
-      right: -20px;
-      left: inherit;
-    }
-  }
-
-  ${IS_IMAGE_CONTAINER_OVERWRITE} span svg {
-    fill: ${token.color.red};
-  }
-`;
-const STYLES_QUOTE_INLINE_ELEMENT = `
-  .${QUOTE_INLINE_CONTAINER} {
-    container: ${ELEMENT_NAME} / inline-size;
-    width: 100%;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    .${QUOTE_INLINE_CONTAINER_WRAPPER} {
-      display: flex;
-      gap: ${token.spacing.lg};
-    }
-  }
-
-  ${ImageContainer}
-  ${TextContainer}
-  ${OverwriteWithImage}
-  ${OverwriteSizeLarge}
-  ${OverwriteSizedLargeWithImage}
-  ${OverwriteThemeMaryland}
-`;
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { createDiv } from "../../model/elements/index.mjs";
+import elementImage from "./elements/image.mjs";
+import elementText from "./elements/text.mjs";
+import "@universityofmaryland/web-icons-library/brand";
+import { SMALL } from "./_constants.mjs";
+import "@universityofmaryland/web-styles-library/layout";
+import { quoteAnimation } from "./helper/animation.mjs";
 const InlineQuote = (props) => {
-  const { isSizeLarge, image, isThemeDark, isThemeMaryland } = props;
-  const container = document.createElement("div");
-  const wrapper = document.createElement("div");
-  const hasImage = image !== null;
-  const textContainer = QuoteText.create({
-    ...props
-  });
-  let styles = STYLES_QUOTE_INLINE_ELEMENT;
-  if (hasImage) {
-    const imageContainer = Image.create({
-      image
+  const { isSizeLarge, image } = props;
+  const textContainer = elementText(props);
+  const getInlineWrapperChildren = (props2) => {
+    const wrapperChildren2 = [];
+    if (image) {
+      const imageContainer = elementImage({
+        ...props2,
+        isTypeFeatured: false,
+        image
+      });
+      wrapperChildren2.push(imageContainer);
+    }
+    wrapperChildren2.push(textContainer);
+    return wrapperChildren2;
+  };
+  const createWrapper = (children) => {
+    return createDiv({
+      className: "quote-inline-container-wrapper",
+      children,
+      elementStyles: {
+        element: {
+          [`@container (min-width: ${SMALL}px)`]: {
+            display: "flex",
+            gap: token.spacing.lg,
+            ...isSizeLarge && { gap: token.spacing.xl }
+          }
+        }
+      }
     });
-    if (imageContainer) {
-      const iconSpan = document.createElement("span");
-      iconSpan.innerHTML = QUOTE;
-      imageContainer.element.appendChild(iconSpan);
-      wrapper.appendChild(imageContainer.element);
-      styles += imageContainer.styles;
-      container.setAttribute(ATTRIBUTE_WITH_IMAGE, "");
-    }
-  }
-  wrapper.classList.add(QUOTE_INLINE_CONTAINER_WRAPPER);
-  wrapper.appendChild(textContainer.element);
-  styles += textContainer.styles;
-  container.classList.add(QUOTE_INLINE_CONTAINER);
-  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, "dark");
-  if (isThemeMaryland) container.setAttribute(ATTRIBUTE_THEME, THEME_MARYLAND);
-  if (isSizeLarge) container.setAttribute(ATTRIBUTE_SIZE, SIZE_LARGE);
-  container.appendChild(wrapper);
-  return { element: container, styles };
+  };
+  const createContainer = (wrapper2) => {
+    return createDiv({
+      className: "quote-inline-container",
+      children: [wrapper2],
+      elementStyles: {
+        element: {
+          containerType: "inline-size",
+          width: "100%"
+        }
+      }
+    });
+  };
+  const wrapperChildren = getInlineWrapperChildren(props);
+  const wrapper = createWrapper(wrapperChildren);
+  quoteAnimation({
+    ...props,
+    quoteElement: wrapper
+  });
+  return createContainer(wrapper);
 };
 export {
   InlineQuote as default

package/dist/composite/quote/inline.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"inline.mjs","sources":["../../../source/composite/quote/inline.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport Text, { TypeQuoteTextContainer } from './elements/text';\nimport Image from './elements/image';\n\nexport type TypeInlineInline = TypeQuoteTextContainer & {\n  isThemeDark?: boolean;\n  isThemeMaryland?: boolean;\n  isSizeLarge: boolean;\n  image: HTMLElement | null;\n};\n\nconst SMALL = 500;\n\nconst ELEMENT_NAME = 'umd-element-quote-inline';\nconst ATTRIBUTE_WITH_IMAGE = 'has-image';\nconst ATTRIBUTE_THEME = 'theme';\nconst ATTRIBUTE_SIZE = 'size';\nconst THEME_MARYLAND = 'maryland';\nconst SIZE_LARGE = 'large';\n\nconst TEXT_CONTAINER = Text.elements.container;\nconst TEXT_CONTAINER_QUOTE_WRAPPER = Text.elements.quoteWrapper;\n\nconst QUOTE_INLINE_CONTAINER = 'quote-inline-container';\nconst QUOTE_INLINE_CONTAINER_WRAPPER = 'quote-inline-container-wrapper';\n\nconst IS_THEME_MARYLAND = `[${ATTRIBUTE_THEME}='${THEME_MARYLAND}']`;\nconst IS_SIZE_LARGE = `[${ATTRIBUTE_SIZE}='${SIZE_LARGE}']`;\nconst IS_WITH_IMAGE = `[${ATTRIBUTE_WITH_IMAGE}]`;\nconst IS_WITH_IMAGE_CONTAINER = `.${QUOTE_INLINE_CONTAINER}${IS_WITH_IMAGE}`;\nconst IS_SIZE_LARGE_CONTAINER = `.${QUOTE_INLINE_CONTAINER}${IS_SIZE_LARGE}`;\nconst IS_SIZE_LARGE_WITH_IMAGE_CONTAINER = `${IS_WITH_IMAGE_CONTAINER}${IS_WITH_IMAGE}`;\n\nconst IS_TEXT_CONTAINER_OVERWRITE = `.${QUOTE_INLINE_CONTAINER} .${TEXT_CONTAINER}`;\nconst IS_IMAGE_CONTAINER_OVERWRITE = `.${QUOTE_INLINE_CONTAINER} .${Image.elements.container}`;\n\nconst IS_MARYLAND_CONTAINER = `.${QUOTE_INLINE_CONTAINER}${IS_THEME_MARYLAND}`;\nconst IS_SIZE_LARGE_TEXT_CONTAINER = `${IS_SIZE_LARGE_CONTAINER} .${TEXT_CONTAINER}`;\nconst IS_WITH_IMAGE_TEXT_CONTAINER = `${IS_WITH_IMAGE_CONTAINER} .${TEXT_CONTAINER}`;\nconst IS_WITH_IMAGE_TEXT_QUOTE = `${IS_WITH_IMAGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER}`;\nconst IS_WITH_IMAGE_SIZE_LARGE_TEXT_CONTAINER = `${IS_SIZE_LARGE_WITH_IMAGE_CONTAINER} .${TEXT_CONTAINER}`;\nconst IS_WITH_IMAGE_SIZE_LARGE_TEXT_QUOTE = `${IS_SIZE_LARGE_WITH_IMAGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER}`;\n\n// prettier-ignore\nconst OverwriteThemeMaryland = `\n  ${IS_MARYLAND_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER}:before {\n    background-color: ${token.color.gold};\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_MARYLAND_CONTAINER} .${Image.elements.container} img  {\n      border-right: 2px solid ${token.color.gold};\n    }\n  }\n  \n  ${IS_MARYLAND_CONTAINER} span svg {\n    fill: ${token.color.gold} !important;\n  }\n`;\n\n// prettier-ignore\nconst OverwriteSizeLarge = `\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_SIZE_LARGE_CONTAINER} .${QUOTE_INLINE_CONTAINER_WRAPPER} {\n      gap: ${token.spacing.xl};\n    }\n  }\n\n  ${IS_SIZE_LARGE_CONTAINER} .${Image.elements.container} img {\n    max-width: 200px;\n  }\n\n  ${IS_SIZE_LARGE_CONTAINER} .${Image.elements.container} span {\n    bottom: -7px;\n    left: -2px;\n    height: 26px;\n    width: 36px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_SIZE_LARGE_CONTAINER} .${Image.elements.container} span {\n      height: 30px;\n      width: 41px;\n      top: -14px;\n      right: -28px;\n      left: inherit;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n    ${IS_SIZE_LARGE_TEXT_CONTAINER} {\n      padding-top:  ${token.spacing['2xl']};\n    }\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_SIZE_LARGE_TEXT_CONTAINER} {\n      padding-left: ${token.spacing.md};\n    }\n  }\n\n  ${IS_SIZE_LARGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {\n    height: 26px;\n    width: 36px;\n    top: -${token.spacing['2xl']};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_SIZE_LARGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {\n      left: -${token.spacing['6xl']};\n      top: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst OverwriteSizedLargeWithImage = `\n  ${IS_WITH_IMAGE_SIZE_LARGE_TEXT_CONTAINER} {\n    padding-top: 0;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_WITH_IMAGE_SIZE_LARGE_TEXT_QUOTE} {\n      margin-left: 0;\n      padding-left: 0;\n    }\n  }\n\n  ${IS_WITH_IMAGE_SIZE_LARGE_TEXT_QUOTE} span {\n    display: none;\n  }\n`;\n\n// prettier-ignore\nconst OverwriteWithImage = `\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_WITH_IMAGE_TEXT_CONTAINER} {\n      padding-left: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_WITH_IMAGE_TEXT_QUOTE}:before {\n      display: none;\n    }\n  }\n`;\n\n// prettier-ignore\nconst TextContainer = `\n  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n    ${IS_TEXT_CONTAINER_OVERWRITE} {\n      padding-top: ${token.spacing.lg};\n      padding-left: ${token.spacing.md};\n    }\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_TEXT_CONTAINER_OVERWRITE} {\n      padding-left: ${token.spacing['4xl']};\n    }\n  }\n\n  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} {\n    position: relative;\n  }\n\n  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER}:before {\n    content: '';\n    position: absolute;\n    left: -${token.spacing.md};\n    top: 7px;\n    height: calc(100% - 14px);\n    width: 2px;\n    display: block;\n    background-color: ${token.color.red};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER}:before {\n      left: -${token.spacing.md};\n    }\n  }\n\n  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {\n    position: absolute;\n    left: -${token.spacing.md};\n    top: -${token.spacing.lg};\n    height: 15px;\n    width: 22px;\n    display: block;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {\n      position: absolute;\n      left: -${token.spacing['4xl']};\n      top: 0;\n    }\n  }\n\n  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} svg {\n    fill: ${token.color.red};\n  }\n`\n\n// prettier-ignore\nconst ImageContainer = `\n  ${IS_IMAGE_CONTAINER_OVERWRITE} {\n    margin-bottom: ${token.spacing.sm};\n    position: relative;\n  }\n\n  ${IS_IMAGE_CONTAINER_OVERWRITE} img {\n    max-width: 160px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_IMAGE_CONTAINER_OVERWRITE} img  {\n      border-right: 2px solid ${token.color.red};\n    }\n  }\n\n  ${IS_IMAGE_CONTAINER_OVERWRITE} span {\n    position: absolute;\n    bottom: -7px;\n    left: -2px;\n    height: 15px;\n    width: 21px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_IMAGE_CONTAINER_OVERWRITE} span {\n      height: 20px;\n      width: 29px;\n      top: -11px;\n      right: -20px;\n      left: inherit;\n    }\n  }\n\n  ${IS_IMAGE_CONTAINER_OVERWRITE} span svg {\n    fill: ${token.color.red};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_QUOTE_INLINE_ELEMENT = `\n  .${QUOTE_INLINE_CONTAINER} {\n    container: ${ELEMENT_NAME} / inline-size;\n    width: 100%;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${QUOTE_INLINE_CONTAINER_WRAPPER} {\n      display: flex;\n      gap: ${token.spacing.lg};\n    }\n  }\n\n  ${ImageContainer}\n  ${TextContainer}\n  ${OverwriteWithImage}\n  ${OverwriteSizeLarge}\n  ${OverwriteSizedLargeWithImage}\n  ${OverwriteThemeMaryland}\n`;\n\nexport default (props: TypeInlineInline) => {\n  const { isSizeLarge, image, isThemeDark, isThemeMaryland } = props;\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const hasImage = image !== null;\n  const textContainer = Text.create({\n    ...props,\n  });\n  let styles = STYLES_QUOTE_INLINE_ELEMENT;\n\n  if (hasImage) {\n    const imageContainer = Image.create({\n      image: image as HTMLImageElement,\n    });\n\n    if (imageContainer) {\n      const iconSpan = document.createElement('span');\n      iconSpan.innerHTML = Utility.asset.icon.QUOTE;\n      imageContainer.element.appendChild(iconSpan);\n\n      wrapper.appendChild(imageContainer.element);\n      styles += imageContainer.styles;\n\n      container.setAttribute(ATTRIBUTE_WITH_IMAGE, '');\n    }\n  }\n\n  wrapper.classList.add(QUOTE_INLINE_CONTAINER_WRAPPER);\n  wrapper.appendChild(textContainer.element);\n  styles += textContainer.styles;\n\n  container.classList.add(QUOTE_INLINE_CONTAINER);\n  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, 'dark');\n  if (isThemeMaryland) container.setAttribute(ATTRIBUTE_THEME, THEME_MARYLAND);\n  if (isSizeLarge) container.setAttribute(ATTRIBUTE_SIZE, SIZE_LARGE);\n  container.appendChild(wrapper);\n\n  return { element: container, styles };\n};\n"],"names":["Text","Utility.asset.icon.QUOTE"],"mappings":"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"}
+{"version":3,"file":"inline.mjs","sources":["../../../source/composite/quote/inline.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { image as elementImage, text as elementText } from './elements';\nimport { quoteAnimation } from './helper/animation';\nimport { SMALL } from './_constants';\nimport { type QuoteInlineProps } from './_types';\nimport { type ElementVisual } from '../../_types';\n\nexport default (props: QuoteInlineProps) => {\n  const { isSizeLarge, image } = props;\n  const textContainer = elementText(props);\n  const getInlineWrapperChildren = (props: QuoteInlineProps) => {\n    const wrapperChildren: ElementVisual[] = [];\n\n    if (image) {\n      const imageContainer = elementImage({\n        ...props,\n        isTypeFeatured: false,\n        image,\n      });\n\n      wrapperChildren.push(imageContainer);\n    }\n\n    wrapperChildren.push(textContainer);\n    return wrapperChildren;\n  };\n\n  const createWrapper = (children: ElementVisual[]) => {\n    return ElementModel.createDiv({\n      className: 'quote-inline-container-wrapper',\n      children: children,\n      elementStyles: {\n        element: {\n          [`@container (min-width: ${SMALL}px)`]: {\n            display: 'flex',\n            gap: token.spacing.lg,\n            ...(isSizeLarge && { gap: token.spacing.xl }),\n          },\n        },\n      },\n    });\n  };\n\n  const createContainer = (wrapper: ElementVisual) => {\n    return ElementModel.createDiv({\n      className: 'quote-inline-container',\n      children: [wrapper],\n      elementStyles: {\n        element: {\n          containerType: 'inline-size',\n          width: '100%',\n        },\n      },\n    });\n  };\n\n  const wrapperChildren = getInlineWrapperChildren(props);\n  const wrapper = createWrapper(wrapperChildren);\n\n  quoteAnimation({\n    ...props,\n    quoteElement: wrapper,\n  });\n\n  return createContainer(wrapper);\n};\n"],"names":["props","wrapperChildren","ElementModel.createDiv","wrapper"],"mappings":";;;;;;;;AAQA,MAAA,cAAe,CAAC,UAA4B;AAC1C,QAAM,EAAE,aAAa,MAAA,IAAU;AAC/B,QAAM,gBAAgB,YAAY,KAAK;AACvC,QAAM,2BAA2B,CAACA,WAA4B;AAC5D,UAAMC,mBAAmC,CAAA;AAEzC,QAAI,OAAO;AACT,YAAM,iBAAiB,aAAa;AAAA,QAClC,GAAGD;AAAAA,QACH,gBAAgB;AAAA,QAChB;AAAA,MAAA,CACD;AAEDC,uBAAgB,KAAK,cAAc;AAAA,IACrC;AAEAA,qBAAgB,KAAK,aAAa;AAClC,WAAOA;AAAAA,EACT;AAEA,QAAM,gBAAgB,CAAC,aAA8B;AACnD,WAAOC,UAAuB;AAAA,MAC5B,WAAW;AAAA,MACX;AAAA,MACA,eAAe;AAAA,QACb,SAAS;AAAA,UACP,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,YACtC,SAAS;AAAA,YACT,KAAK,MAAM,QAAQ;AAAA,YACnB,GAAI,eAAe,EAAE,KAAK,MAAM,QAAQ,GAAA;AAAA,UAAG;AAAA,QAC7C;AAAA,MACF;AAAA,IACF,CACD;AAAA,EACH;AAEA,QAAM,kBAAkB,CAACC,aAA2B;AAClD,WAAOD,UAAuB;AAAA,MAC5B,WAAW;AAAA,MACX,UAAU,CAACC,QAAO;AAAA,MAClB,eAAe;AAAA,QACb,SAAS;AAAA,UACP,eAAe;AAAA,UACf,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,IACF,CACD;AAAA,EACH;AAEA,QAAM,kBAAkB,yBAAyB,KAAK;AACtD,QAAM,UAAU,cAAc,eAAe;AAE7C,iBAAe;AAAA,IACb,GAAG;AAAA,IACH,cAAc;AAAA,EAAA,CACf;AAED,SAAO,gBAAgB,OAAO;AAChC;"}

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

@@ -1,9 +1,7 @@
-type TypeQuoteStatement = {
-    isThemeDark?: boolean;
+import { QuoteStatementProps } from './_types';
+export declare const CreateQuoteStatementElement: (element: QuoteStatementProps) => {
+    element: HTMLElement;
+    className: string;
+    styles: string;
 };
-declare const _default: {
-    CreateElement: (element: TypeQuoteStatement) => HTMLDivElement;
-    Styles: string;
-};
-export default _default;
 //# sourceMappingURL=statement.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"statement.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/statement.ts"],"names":[],"mappings":"AAAA,KAAK,kBAAkB,GAAG;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;;6BAa4C,kBAAkB;;;AAQhE,wBAGE"}
+{"version":3,"file":"statement.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/statement.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,eAAO,MAAM,2BAA2B,GAAI,SAAS,mBAAmB;;;;CAWvE,CAAC"}

package/dist/composite/slider/events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../source/composite/slider/events.ts"],"names":[],"mappings":"AAWA,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF,KAAK,gCAAgC,GAAG;IACtC,UAAU,EAAE,cAAc,CAAC;CAC5B,CAAC;AAQF,KAAK,oBAAoB,GAAG,gCAAgC,GAC1D,yBAAyB,GAAG;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;yBA8nBY,OAAO,oBAAoB;;;;;;;;AAA3C,wBAyFO"}
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../source/composite/slider/events.ts"],"names":[],"mappings":"AAmBA,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF,KAAK,gCAAgC,GAAG;IACtC,UAAU,EAAE,cAAc,CAAC;CAC5B,CAAC;AAQF,KAAK,oBAAoB,GAAG,gCAAgC,GAC1D,yBAAyB,GAAG;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;yBA4nBY,OAAO,oBAAoB;;;;;;;;AAA3C,wBAsFO"}

package/dist/composite/slider/events.js

@@ -1,9 +1,28 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const icons = require("../../utilities/assets/icons.js");
-const index$2 = require("../../utilities/js-events/index.js");
-const index$1 = require("../../utilities/performance/index.js");
-const index = require("../../utilities/theme/index.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const typography = require("@universityofmaryland/web-styles-library/typography");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
+const events$1 = require("@universityofmaryland/web-utilities-library/events");
+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);
+const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
 const TABLET = 750;
 const DESKTOP = 1e3;
 const LARGE = 1300;
@@ -32,7 +51,7 @@ const OVERWRITE_THEME_DARK_INTRO_HEADLINE = `.${ELEMENT_SLIDER_EVENT_CONTAINER}$
 const OVERWRITE_THEME_DARK_ARROW = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}`;
 const VariationThemeDark = `
   ${OVERWRITE_THEME_DARK_CONTAINER_WRAPPER} {
-    background-color: ${Styles.token.color.gray.darker};
+    background-color: ${token__namespace.color.gray.darker};
   }
 
   ${OVERWRITE_THEME_DARK_CONTAINER} * {
@@ -40,27 +59,27 @@ const VariationThemeDark = `
   }
 
   ${OVERWRITE_THEME_DARK_INTRO_COVER} {
-    background-color: ${Styles.token.color.gray.darker};
+    background-color: ${token__namespace.color.gray.darker};
   }
 
   ${OVERWRITE_THEME_DARK_INTRO_HEADLINE} {
-    color: ${Styles.token.color.white};
+    color: ${token__namespace.color.white};
   }
 
   ${OVERWRITE_THEME_DARK_ARROW} {
-    background-color: ${Styles.token.color.gray.dark};
+    background-color: ${token__namespace.color.gray.dark};
   }
 
   ${OVERWRITE_THEME_DARK_ARROW} svg {
-    fill: ${Styles.token.color.white}
+    fill: ${token__namespace.color.white}
   }
 
   ${OVERWRITE_THEME_DARK_ARROW}:hover {
-    background-color: ${Styles.token.color.white}
+    background-color: ${token__namespace.color.white}
   }
 
   ${OVERWRITE_THEME_DARK_ARROW}:hover svg {
-    fill: ${Styles.token.color.black}
+    fill: ${token__namespace.color.black}
   }
 `;
 const ButtonStyles = `
@@ -71,7 +90,7 @@ const ButtonStyles = `
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: ${Styles.token.color.gray.light};
+    background-color: ${token__namespace.color.gray.light};
     transition: background-color ${ANIMATION_DURATION}ms;
     position: absolute;
     top: 50%;
@@ -87,16 +106,16 @@ const ButtonStyles = `
   }
 
   .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}:hover {
-    background-color: ${Styles.token.color.black};
+    background-color: ${token__namespace.color.black};
   }
 
   .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}:hover svg {
-    fill: ${Styles.token.color.white};
+    fill: ${token__namespace.color.white};
   }
 
   .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} svg {
     transition: fill .5s;
-    fill: ${Styles.token.color.black};
+    fill: ${token__namespace.color.black};
     width: 16px;
     height: 6px;
   }
@@ -115,7 +134,7 @@ const ButtonStyles = `
   @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {
     .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK} {
       left: -24px;
-      top: ${Styles.token.spacing.xs};
+      top: ${token__namespace.spacing.xs};
     }
   }
 
@@ -126,7 +145,7 @@ const ButtonStyles = `
   @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {
     .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD} {
       right: -24px;
-      top: ${Styles.token.spacing.xs};
+      top: ${token__namespace.spacing.xs};
     }
   }
 `;
@@ -157,7 +176,7 @@ const DatesStyles = `
 `;
 const IntroStyles = `
   .${ELEMENT_SLIDER_EVENT_INTRO} {
-    padding: 0 ${Styles.token.spacing.lg};
+    padding: 0 ${token__namespace.spacing.lg};
     position: relative;
   }
 
@@ -183,18 +202,18 @@ const IntroStyles = `
   }
 
   .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE} {
-    color: ${Styles.token.color.black};
+    color: ${token__namespace.color.black};
     font-weight: 700;
   }
 
   .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE} + * {
-    margin-top: ${Styles.token.spacing.min};
+    margin-top: ${token__namespace.spacing.min};
     display: block;
   }
 
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
-    [`.${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE}`]: Styles.typography.sans.larger
+    [`.${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE}`]: typography__namespace.sans.larger
   }
 })}
 
@@ -203,7 +222,7 @@ const IntroStyles = `
   }
   
   .${ELEMENT_SLIDER_EVENT_INTRO_ACTIONS} {
-    margin-top: ${Styles.token.spacing.min};
+    margin-top: ${token__namespace.spacing.min};
   }
   
 
@@ -229,7 +248,7 @@ const CoverStyles = `
     height: 100%;
     top: 0;
     left: -100vw;
-    background-color: ${Styles.token.color.gray.lighter};
+    background-color: ${token__namespace.color.gray.lighter};
   }
   
   @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {
@@ -246,7 +265,7 @@ const STYLES_SLIDER_EVENTS_ELEMENT = `
   
   .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER} {
     padding: 24px 0;
-    background-color: ${Styles.token.color.gray.lighter};
+    background-color: ${token__namespace.color.gray.lighter};
     position: relative;
     z-index: 99;
   }
@@ -276,7 +295,7 @@ const CreateBackButton = ({
   SetSlideDatesBackwards
 }) => {
   const button = document.createElement("button");
-  button.innerHTML = icons.BACK_ARROW;
+  button.innerHTML = arrows.arrow_left;
   button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON);
   button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK);
   button.style.display = "none";
@@ -298,7 +317,7 @@ const CreateForwardButton = ({
   SetSlideDatesForward
 }) => {
   const button = document.createElement("button");
-  button.innerHTML = icons.FORWARD_ARROW;
+  button.innerHTML = arrows.arrow_right;
   button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON);
   button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD);
   button.setAttribute("type", "button");
@@ -424,9 +443,7 @@ const SizeDatesElements = ({
       const maxHeightElement = dateElements.sort((a, b) => {
         return a.offsetHeight - b.offsetHeight;
       })[0];
-      const height = maxHeightElement.offsetHeight + index.convertPixelStringToNumber(
-        maxHeightElement.style.marginTop
-      );
+      const height = maxHeightElement.offsetHeight + styles.parsePixelValue(maxHeightElement.style.marginTop);
       sliderWrapper2.style.height = `${height}px`;
     };
     const setWidthPerDate = () => {
@@ -444,17 +461,17 @@ const SizeDatesElements = ({
       dateElements.forEach((dateElement) => {
         dateElement.style.width = `${dateElementSize}px`;
         if (isMobile) {
-          const lineColor = isThemeDark ? Styles.token.color.gray.mediumAA : Styles.token.color.gray.light;
+          const lineColor = isThemeDark ? token__namespace.color.gray.mediumAA : token__namespace.color.gray.light;
           dateElement.style.display = `flex`;
           dateElement.style.justifyContent = `center`;
           dateElement.style.paddingRight = `0`;
-          dateElement.style.marginTop = `${Styles.token.spacing.xs}`;
-          dateElement.style.paddingTop = `${Styles.token.spacing.xs}`;
+          dateElement.style.marginTop = `${token__namespace.spacing.xs}`;
+          dateElement.style.paddingTop = `${token__namespace.spacing.xs}`;
           dateElement.style.borderTop = `1px solid ${lineColor}`;
         } else {
           dateElement.style.display = `flex`;
           dateElement.style.justifyContent = `inherit`;
-          dateElement.style.paddingRight = `${Styles.token.spacing.lg}`;
+          dateElement.style.paddingRight = `${token__namespace.spacing.lg}`;
           dateElement.style.marginTop = `0`;
           dateElement.style.paddingTop = `0`;
           dateElement.style.borderTop = `none`;
@@ -482,12 +499,12 @@ const EventSlideDates = ({
   const sliderPosition = sliderStyle ? parseInt(sliderStyle.replace(/[^\d.]/g, "")) : 0;
   const endPosition = forward ? Math.floor(sliderPosition + width) : Math.floor(sliderPosition - width);
   const increment = width / loop;
-  let index2 = 1;
+  let index = 1;
   const slideFunction = () => {
-    const incrementIncrease = increment * index2;
+    const incrementIncrease = increment * index;
     const postion = forward ? sliderPosition + incrementIncrease : sliderPosition - incrementIncrease;
-    if (loop > index2) {
-      index2++;
+    if (loop > index) {
+      index++;
       window.requestAnimationFrame(slideFunction);
       dataSlider.style.transform = `translateX(${-postion}px)`;
     } else {
@@ -524,7 +541,7 @@ const EventSwipe = ({
     }
     SetButtonVisibility();
   };
-  index$2.CreateEventSwipe({ container, callback: swipes });
+  events$1.setupSwipeDetection({ container, callback: swipes });
 };
 const OnLoadStyles = ({ dataSlider }) => {
   dataSlider.style.display = "flex";
@@ -581,7 +598,7 @@ const events = (props) => (() => {
     SetEventSwipe();
   };
   let currentPosition = 0;
-  let styles = STYLES_SLIDER_EVENTS_ELEMENT;
+  let styles2 = STYLES_SLIDER_EVENTS_ELEMENT;
   dataSlider.style.visibility = "hidden";
   coverElement.classList.add(ELEMENT_SLIDER_EVENT_COVER);
   wrapper.classList.add(ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER);
@@ -592,13 +609,10 @@ const events = (props) => (() => {
   container.appendChild(wrapper);
   declaration.classList.add(ELEMENT_SLIDER_EVENT_DECLRATION);
   declaration.appendChild(container);
-  window.addEventListener(
-    "resize",
-    index$1.debounce(EventResize, 20)
-  );
+  window.addEventListener("resize", performance.debounce(EventResize, 20));
   return {
     element: declaration,
-    styles,
+    styles: styles2,
     events: {
       load,
       size