@universityofmaryland/web-elements-library 1.3.7 → 1.4.1

package/dist/composite/quote/featured.mjs

@@ -0,0 +1,266 @@
+import { token } from "@universityofmaryland/web-styles-library";
+import InlineQuote from "./inline.mjs";
+import QuoteText from "./elements/text.mjs";
+import { imageFromSvg } from "../../utilities/markup/create.mjs";
+import "../../node_modules/postcss/lib/postcss.mjs";
+import "../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../node_modules/postcss-js/index.mjs";
+const SMALL = 500;
+const MEDIUM = 900;
+const BACKGROUND_TEXTURE_LIGHT = `<svg id="quote_background_light" aria-hidden="true" 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" 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 ELEMENT_NAME = "umd-element-quote-featured";
+const ATTRIBUTE_HAS_IMAGE = "has-image";
+const ATTRIBUTE_TRANSPARENT = "transparent";
+const ATTRIBUTE_THEME = "theme";
+const THEME_DARK = "dark";
+const THEME_MARYLAND = "maryland";
+const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${THEME_DARK}"]`;
+const IS_THEME_MARYLAND = `[${ATTRIBUTE_THEME}="${THEME_MARYLAND}"]`;
+const IS_WITH_IMAGE = `[${ATTRIBUTE_HAS_IMAGE}]`;
+const IS_TRANSPARENT = `[${ATTRIBUTE_TRANSPARENT}="true"]`;
+const QUOTE_FEATURED_CONTAINER = "quote-featured-container";
+const QUOTE_FEATURED_CONTAINER_SPACER = "quote-featured-container-spacer";
+const QUOTE_FEATURED_CONTAINER_WRAPPER = "quote-featured-container-wrapper";
+const QUOTE_FEATURED_TEXTURE = "quote-featured-texture";
+const QUOTE_FEATURED_TEXT = "quote-featured-text";
+const QUOTE_FEATURED_IMAGE = "quote-featured-image";
+const QUOTE_FEATURED_IMAGE_ACTIONS = "quote-featured-image-actions";
+const OVERWRITE_WITH_IMAGE_WRAPPER = `.${QUOTE_FEATURED_CONTAINER}${IS_WITH_IMAGE} .${QUOTE_FEATURED_CONTAINER_WRAPPER}`;
+const OVERWRITE_WITH_IMAGE_QUOTE_TEXT_CONTAINER = `.${QUOTE_FEATURED_CONTAINER}${IS_WITH_IMAGE} .${QuoteText.elements.container}`;
+const OVERWRITE_WITH_IMAGE_QUOTE_TEXT = `.${QUOTE_FEATURED_CONTAINER}${IS_WITH_IMAGE} .${QuoteText.elements.quoteWrapper}`;
+const OVERWRITE_THEME_DARK_WRAPPER = `.${QUOTE_FEATURED_CONTAINER}${IS_THEME_DARK} .${QUOTE_FEATURED_CONTAINER_WRAPPER}`;
+const OVERWRITE_THEME_MARYLAND_WRAPPER = `.${QUOTE_FEATURED_CONTAINER}${IS_THEME_MARYLAND} .${QUOTE_FEATURED_CONTAINER_WRAPPER}`;
+const OVERWRITE_TRANSPARENT_CONTAINER = `.${QUOTE_FEATURED_CONTAINER}${IS_TRANSPARENT}`;
+const OVERWRITE_TRANSPARENT_WRAPPER = `${OVERWRITE_TRANSPARENT_CONTAINER} .${QUOTE_FEATURED_CONTAINER_WRAPPER}`;
+const OVERWRITE_TRANSPARENT_SPACER = `${OVERWRITE_TRANSPARENT_CONTAINER} .${QUOTE_FEATURED_CONTAINER_SPACER}`;
+const OVERWRITE_TRANSPARENT_TEXT = `${OVERWRITE_TRANSPARENT_CONTAINER} .${QUOTE_FEATURED_TEXT}`;
+const OverwriteTransparent = `
+  ${OVERWRITE_TRANSPARENT_WRAPPER} {
+    background-color: transparent;
+  }
+
+  ${OVERWRITE_TRANSPARENT_TEXT},
+  ${OVERWRITE_TRANSPARENT_SPACER} {
+    padding: 0;
+  }
+`;
+const OverwriteTheme = `
+  ${OVERWRITE_THEME_DARK_WRAPPER} {
+    background-color: ${token.color.black};
+  }
+
+  ${OVERWRITE_THEME_MARYLAND_WRAPPER} {
+    background-color: ${token.color.red};
+  }
+`;
+const OverwriteWithImage = `
+  ${OVERWRITE_WITH_IMAGE_WRAPPER} {
+    display: flex;
+    flex-direction: column;
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {
+    ${OVERWRITE_WITH_IMAGE_WRAPPER} {
+      display: flex;
+      flex-direction: row;
+    }
+  }
+
+  ${OVERWRITE_WITH_IMAGE_QUOTE_TEXT_CONTAINER} {
+    padding-top: 0;
+  }
+
+  ${OVERWRITE_WITH_IMAGE_QUOTE_TEXT} span {
+    display: none !important;
+  }
+`;
+const ImageContainer = `
+  .${QUOTE_FEATURED_IMAGE} {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: -${token.spacing.lg};
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {
+    .${QUOTE_FEATURED_IMAGE} {
+      padding: 0 ${token.spacing.lg};
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px) {
+    .${QUOTE_FEATURED_IMAGE} {
+      margin: 0 auto;
+      margin-top: -${token.spacing["8xl"]};
+      max-width: 300px;
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {
+    .${QUOTE_FEATURED_IMAGE}[data-aligned="center"] {
+      margin-top: 0;
+      justify-content: center;
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {
+    .${QUOTE_FEATURED_IMAGE} {
+      padding-left: ${token.spacing["6xl"]};
+      width: calc(300px + ${token.spacing["6xl"]});
+    }
+  }
+
+  .${QUOTE_FEATURED_IMAGE_ACTIONS} {
+    margin-top: ${token.spacing.sm};
+  }
+
+  .${QUOTE_FEATURED_IMAGE_ACTIONS} * + * {
+    margin-top: ${token.spacing.min};
+  }
+`;
+const TextContainer = `
+  .${QUOTE_FEATURED_TEXT} {
+    padding: ${token.spacing.lg};
+    position: relative;
+    width: 100%;
+  }
+  
+  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
+    .${QUOTE_FEATURED_TEXT} {
+      padding: ${token.spacing["2xl"]} ${token.spacing["2xl"]} ${token.spacing["2xl"]} ${token.spacing["2xl"]};
+    }
+  }
+  
+  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {
+    .${QUOTE_FEATURED_TEXT} {
+      padding: ${token.spacing["4xl"]} ${token.spacing["4xl"]} ${token.spacing["4xl"]} ${token.spacing["4xl"]};
+    }
+  }
+`;
+const TextureStyles = `
+  .${QUOTE_FEATURED_TEXTURE} {
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .${QUOTE_FEATURED_TEXTURE} > img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 70%;
+    height: 120%;
+    object-fit: cover;
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${MEDIUM - 1}px) {
+    .${QUOTE_FEATURED_TEXTURE} {
+      display: none;
+    }
+  }
+`;
+const Wrapper = `
+  .${QUOTE_FEATURED_CONTAINER_WRAPPER} {
+    background-color: ${token.color.gray.lightest};
+    position: relative;
+  }
+`;
+let STYLES_QUOTE_FEATURED_ELEMENT = `
+  .${QUOTE_FEATURED_CONTAINER} {
+    container: ${ELEMENT_NAME} / inline-size;
+  }
+
+  .${QUOTE_FEATURED_CONTAINER_SPACER} {
+    padding-top: ${token.spacing.lg};
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px) {
+    .${QUOTE_FEATURED_CONTAINER_SPACER} {
+      padding-top: ${token.spacing["8xl"]};
+    }
+  }
+
+  ${Wrapper}
+  ${TextureStyles}
+  ${TextContainer}
+  ${ImageContainer}
+  ${OverwriteTheme}
+  ${OverwriteWithImage}
+  ${OverwriteTransparent}
+`;
+const CreateImageContainer = ({
+  image,
+  action
+}) => {
+  const container = document.createElement("div");
+  container.classList.add(QUOTE_FEATURED_IMAGE);
+  container.appendChild(image);
+  if (action) {
+    action.classList.add(QUOTE_FEATURED_IMAGE_ACTIONS);
+    container.appendChild(action);
+  }
+  if (window.innerWidth >= MEDIUM) {
+    if (image instanceof HTMLImageElement) {
+      image.addEventListener("load", () => {
+        const parent = image.parentElement;
+        if (!parent) return;
+        const aspectRatio = image.offsetHeight / parent.offsetHeight;
+        if (aspectRatio < 0.5) {
+          container.setAttribute("data-aligned", "center");
+        }
+      });
+    }
+  }
+  return container;
+};
+const CreateTextureContainer = ({
+  isThemeDark,
+  isThemeMaryland
+}) => {
+  const container = document.createElement("div");
+  const isDarkText = isThemeDark || isThemeMaryland;
+  const backgroundTexture = imageFromSvg({
+    SVG: isDarkText ? BACKGROUND_TEXTURE_DARK : BACKGROUND_TEXTURE_LIGHT
+  });
+  container.classList.add(QUOTE_FEATURED_TEXTURE);
+  container.appendChild(backgroundTexture);
+  return container;
+};
+const featured = (props) => {
+  const { isThemeDark, isThemeMaryland, action, image, isTransparent } = props;
+  const container = document.createElement("div");
+  const spacer = document.createElement("div");
+  const wrapper = document.createElement("div");
+  const textureContainer = CreateTextureContainer(props);
+  const textContainer = document.createElement("div");
+  const hasImage = !!image;
+  const inlineActions = hasImage ? null : action;
+  const inlineProps = { ...props, action: inlineActions, image: null };
+  const inlineQuote = InlineQuote(inlineProps);
+  let styles = STYLES_QUOTE_FEATURED_ELEMENT;
+  wrapper.classList.add(QUOTE_FEATURED_CONTAINER_WRAPPER);
+  textContainer.classList.add(QUOTE_FEATURED_TEXT);
+  textContainer.appendChild(inlineQuote.element);
+  if (!isTransparent) wrapper.appendChild(textureContainer);
+  if (hasImage) wrapper.appendChild(CreateImageContainer({ image, action }));
+  wrapper.appendChild(textContainer);
+  styles += inlineQuote.styles;
+  spacer.classList.add(QUOTE_FEATURED_CONTAINER_SPACER);
+  spacer.appendChild(wrapper);
+  container.classList.add(QUOTE_FEATURED_CONTAINER);
+  container.appendChild(spacer);
+  if (isThemeDark) container.setAttribute("theme", THEME_DARK);
+  if (isThemeMaryland) container.setAttribute("theme", THEME_MARYLAND);
+  if (hasImage) container.setAttribute(ATTRIBUTE_HAS_IMAGE, "");
+  if (isTransparent) container.setAttribute(ATTRIBUTE_TRANSPARENT, "true");
+  return { element: container, styles };
+};
+export {
+  featured as default
+};
+//# sourceMappingURL=featured.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"featured.mjs","sources":["../../../source/composite/quote/featured.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport InlineQuote, { TypeInlineInline } from './inline';\nimport QuoteText from './elements/text';\nimport * as Utility from 'utilities';\n\ntype TypeQuoteFeatured = TypeInlineInline & {\n  isTransparent: boolean;\n  isThemeDark?: boolean;\n  isThemeMaryland?: boolean;\n};\n\ntype TypeQuoteFeaturedText = TypeQuoteFeatured & {\n  hasImage: boolean;\n  styles: string;\n};\n\nconst SMALL = 500;\nconst MEDIUM = 900;\n\nconst BACKGROUND_TEXTURE_LIGHT = `<svg id=\"quote_background_light\" aria-hidden=\"true\" 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\" 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 ELEMENT_NAME = 'umd-element-quote-featured';\nconst ATTRIBUTE_HAS_IMAGE = 'has-image';\nconst ATTRIBUTE_TRANSPARENT = 'transparent';\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst THEME_MARYLAND = 'maryland';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\nconst IS_THEME_MARYLAND = `[${ATTRIBUTE_THEME}=\"${THEME_MARYLAND}\"]`;\nconst IS_WITH_IMAGE = `[${ATTRIBUTE_HAS_IMAGE}]`;\nconst IS_TRANSPARENT = `[${ATTRIBUTE_TRANSPARENT}=\"true\"]`;\n\nconst QUOTE_FEATURED_CONTAINER = 'quote-featured-container';\nconst QUOTE_FEATURED_CONTAINER_SPACER = 'quote-featured-container-spacer';\nconst QUOTE_FEATURED_CONTAINER_WRAPPER = 'quote-featured-container-wrapper';\nconst QUOTE_FEATURED_TEXTURE = 'quote-featured-texture';\nconst QUOTE_FEATURED_TEXT = 'quote-featured-text';\nconst QUOTE_FEATURED_IMAGE = 'quote-featured-image';\nconst QUOTE_FEATURED_IMAGE_ACTIONS = 'quote-featured-image-actions';\n\nconst OVERWRITE_WITH_IMAGE_WRAPPER = `.${QUOTE_FEATURED_CONTAINER}${IS_WITH_IMAGE} .${QUOTE_FEATURED_CONTAINER_WRAPPER}`;\nconst OVERWRITE_WITH_IMAGE_QUOTE_TEXT_CONTAINER = `.${QUOTE_FEATURED_CONTAINER}${IS_WITH_IMAGE} .${QuoteText.elements.container}`;\nconst OVERWRITE_WITH_IMAGE_QUOTE_TEXT = `.${QUOTE_FEATURED_CONTAINER}${IS_WITH_IMAGE} .${QuoteText.elements.quoteWrapper}`;\n\nconst OVERWRITE_THEME_DARK_WRAPPER = `.${QUOTE_FEATURED_CONTAINER}${IS_THEME_DARK} .${QUOTE_FEATURED_CONTAINER_WRAPPER}`;\nconst OVERWRITE_THEME_MARYLAND_WRAPPER = `.${QUOTE_FEATURED_CONTAINER}${IS_THEME_MARYLAND} .${QUOTE_FEATURED_CONTAINER_WRAPPER}`;\n\nconst OVERWRITE_TRANSPARENT_CONTAINER = `.${QUOTE_FEATURED_CONTAINER}${IS_TRANSPARENT}`;\nconst OVERWRITE_TRANSPARENT_WRAPPER = `${OVERWRITE_TRANSPARENT_CONTAINER} .${QUOTE_FEATURED_CONTAINER_WRAPPER}`;\nconst OVERWRITE_TRANSPARENT_SPACER = `${OVERWRITE_TRANSPARENT_CONTAINER} .${QUOTE_FEATURED_CONTAINER_SPACER}`;\nconst OVERWRITE_TRANSPARENT_TEXT = `${OVERWRITE_TRANSPARENT_CONTAINER} .${QUOTE_FEATURED_TEXT}`;\n\n// prettier-ignore\nconst OverwriteTransparent = `\n  ${OVERWRITE_TRANSPARENT_WRAPPER} {\n    background-color: transparent;\n  }\n\n  ${OVERWRITE_TRANSPARENT_TEXT},\n  ${OVERWRITE_TRANSPARENT_SPACER} {\n    padding: 0;\n  }\n`;\n\n// prettier-ignore\nconst OverwriteTheme = `\n  ${OVERWRITE_THEME_DARK_WRAPPER} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_MARYLAND_WRAPPER} {\n    background-color: ${token.color.red};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteWithImage = `\n  ${OVERWRITE_WITH_IMAGE_WRAPPER} {\n    display: flex;\n    flex-direction: column;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    ${OVERWRITE_WITH_IMAGE_WRAPPER} {\n      display: flex;\n      flex-direction: row;\n    }\n  }\n\n  ${OVERWRITE_WITH_IMAGE_QUOTE_TEXT_CONTAINER} {\n    padding-top: 0;\n  }\n\n  ${OVERWRITE_WITH_IMAGE_QUOTE_TEXT} span {\n    display: none !important;\n  }\n`;\n\n// prettier-ignore\nconst ImageContainer = `\n  .${QUOTE_FEATURED_IMAGE} {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin-top: -${token.spacing.lg};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n    .${QUOTE_FEATURED_IMAGE} {\n      padding: 0 ${token.spacing.lg};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px) {\n    .${QUOTE_FEATURED_IMAGE} {\n      margin: 0 auto;\n      margin-top: -${token.spacing['8xl']};\n      max-width: 300px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${QUOTE_FEATURED_IMAGE}[data-aligned=\"center\"] {\n      margin-top: 0;\n      justify-content: center;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${QUOTE_FEATURED_IMAGE} {\n      padding-left: ${token.spacing['6xl']};\n      width: calc(300px + ${token.spacing['6xl']});\n    }\n  }\n\n  .${QUOTE_FEATURED_IMAGE_ACTIONS} {\n    margin-top: ${token.spacing.sm};\n  }\n\n  .${QUOTE_FEATURED_IMAGE_ACTIONS} * + * {\n    margin-top: ${token.spacing.min};\n  }\n`;\n\n// prettier-ignore\nconst TextContainer = `\n  .${QUOTE_FEATURED_TEXT} {\n    padding: ${token.spacing.lg};\n    position: relative;\n    width: 100%;\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${QUOTE_FEATURED_TEXT} {\n      padding: ${token.spacing['2xl']} ${token.spacing['2xl']} ${token.spacing['2xl']} ${token.spacing['2xl']};\n    }\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${QUOTE_FEATURED_TEXT} {\n      padding: ${token.spacing['4xl']} ${token.spacing['4xl']} ${token.spacing['4xl']} ${token.spacing['4xl']};\n    }\n  }\n`;\n\n// prettier-ignore\nconst TextureStyles = `\n  .${QUOTE_FEATURED_TEXTURE} {\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .${QUOTE_FEATURED_TEXTURE} > img {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 70%;\n    height: 120%;\n    object-fit: cover;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDIUM - 1}px) {\n    .${QUOTE_FEATURED_TEXTURE} {\n      display: none;\n    }\n  }\n`;\n\n// prettier-ignore\nconst Wrapper = `\n  .${QUOTE_FEATURED_CONTAINER_WRAPPER} {\n    background-color: ${token.color.gray.lightest};\n    position: relative;\n  }\n`;\n\n// prettier-ignore\nlet STYLES_QUOTE_FEATURED_ELEMENT = `\n  .${QUOTE_FEATURED_CONTAINER} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${QUOTE_FEATURED_CONTAINER_SPACER} {\n    padding-top: ${token.spacing.lg};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px) {\n    .${QUOTE_FEATURED_CONTAINER_SPACER} {\n      padding-top: ${token.spacing['8xl']};\n    }\n  }\n\n  ${Wrapper}\n  ${TextureStyles}\n  ${TextContainer}\n  ${ImageContainer}\n  ${OverwriteTheme}\n  ${OverwriteWithImage}\n  ${OverwriteTransparent}\n`;\n\nconst CreateImageContainer = ({\n  image,\n  action,\n}: {\n  image: HTMLImageElement | HTMLElement;\n  action?: HTMLElement | null;\n}) => {\n  const container = document.createElement('div');\n\n  container.classList.add(QUOTE_FEATURED_IMAGE);\n\n  container.appendChild(image);\n  if (action) {\n    action.classList.add(QUOTE_FEATURED_IMAGE_ACTIONS);\n    container.appendChild(action);\n  }\n\n  if (window.innerWidth >= MEDIUM) {\n    if (image instanceof HTMLImageElement) {\n      image.addEventListener('load', () => {\n        const parent = image.parentElement as HTMLElement;\n        if (!parent) return;\n\n        const aspectRatio = image.offsetHeight / parent.offsetHeight;\n\n        if (aspectRatio < 0.5) {\n          container.setAttribute('data-aligned', 'center');\n        }\n      });\n    }\n  }\n\n  return container;\n};\n\nconst CreateTextureContainer = ({\n  isThemeDark,\n  isThemeMaryland,\n}: TypeQuoteFeatured) => {\n  const container = document.createElement('div');\n  const isDarkText = isThemeDark || isThemeMaryland;\n  const backgroundTexture = Utility.markup.create.imageFromSvg({\n    SVG: isDarkText ? BACKGROUND_TEXTURE_DARK : BACKGROUND_TEXTURE_LIGHT,\n  });\n\n  container.classList.add(QUOTE_FEATURED_TEXTURE);\n  container.appendChild(backgroundTexture);\n\n  return container;\n};\n\nexport default (props: TypeQuoteFeatured) => {\n  const { isThemeDark, isThemeMaryland, action, image, isTransparent } = props;\n  const container = document.createElement('div');\n  const spacer = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const textureContainer = CreateTextureContainer(props);\n  const textContainer = document.createElement('div');\n  const hasImage = !!image;\n  const inlineActions = hasImage ? null : action;\n  const inlineProps = { ...props, action: inlineActions, image: null };\n  const inlineQuote = InlineQuote(inlineProps);\n  let styles = STYLES_QUOTE_FEATURED_ELEMENT;\n\n  wrapper.classList.add(QUOTE_FEATURED_CONTAINER_WRAPPER);\n\n  textContainer.classList.add(QUOTE_FEATURED_TEXT);\n  textContainer.appendChild(inlineQuote.element);\n  if (!isTransparent) wrapper.appendChild(textureContainer);\n  if (hasImage) wrapper.appendChild(CreateImageContainer({ image, action }));\n  wrapper.appendChild(textContainer);\n  styles += inlineQuote.styles;\n\n  spacer.classList.add(QUOTE_FEATURED_CONTAINER_SPACER);\n  spacer.appendChild(wrapper);\n\n  container.classList.add(QUOTE_FEATURED_CONTAINER);\n  container.appendChild(spacer);\n  if (isThemeDark) container.setAttribute('theme', THEME_DARK);\n  if (isThemeMaryland) container.setAttribute('theme', THEME_MARYLAND);\n  if (hasImage) container.setAttribute(ATTRIBUTE_HAS_IMAGE, '');\n  if (isTransparent) container.setAttribute(ATTRIBUTE_TRANSPARENT, 'true');\n\n  return { element: container, styles };\n};\n"],"names":["Utility.markup.create.imageFromSvg"],"mappings":"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"}

package/dist/composite/quote/index.js

@@ -0,0 +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;
+//# sourceMappingURL=index.js.map

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

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

package/dist/composite/quote/index.mjs

@@ -0,0 +1,9 @@
+import { default as default2 } from "./elements/index.mjs";
+import { default as default3 } from "./featured.mjs";
+import { default as default4 } from "./inline.mjs";
+export {
+  default2 as elements,
+  default3 as featured,
+  default4 as inline
+};
+//# sourceMappingURL=index.mjs.map

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

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

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":"AAEA,OAAa,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAG/D,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GAAG;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;CAC3B,CAAC;gCAmQqB,gBAAgB;;;;AAAvC,wBAsCE"}
+{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/inline.ts"],"names":[],"mappings":"AAEA,OAAa,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAG/D,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GAAG;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;CAC3B,CAAC;yBAmQc,OAAO,gBAAgB;;;;AAAvC,wBAsCE"}

package/dist/composite/quote/inline.js

@@ -0,0 +1,278 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const icons = require("../../utilities/assets/icons.js");
+require("../../node_modules/postcss/lib/postcss.js");
+require("../../node_modules/postcss-nesting/dist/index.js");
+require("../../node_modules/postcss-js/index.js");
+const text = require("./elements/text.js");
+const image = require("./elements/image.js");
+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 = text.elements.container;
+const TEXT_CONTAINER_QUOTE_WRAPPER = text.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: ${Styles.token.color.gold};
+  }
+  
+  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
+    ${IS_MARYLAND_CONTAINER} .${image.elements.container} img  {
+      border-right: 2px solid ${Styles.token.color.gold};
+    }
+  }
+  
+  ${IS_MARYLAND_CONTAINER} span svg {
+    fill: ${Styles.token.color.gold} !important;
+  }
+`;
+const OverwriteSizeLarge = `
+  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
+    ${IS_SIZE_LARGE_CONTAINER} .${QUOTE_INLINE_CONTAINER_WRAPPER} {
+      gap: ${Styles.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:  ${Styles.token.spacing["2xl"]};
+    }
+  }
+  
+  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
+    ${IS_SIZE_LARGE_TEXT_CONTAINER} {
+      padding-left: ${Styles.token.spacing.md};
+    }
+  }
+
+  ${IS_SIZE_LARGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {
+    height: 26px;
+    width: 36px;
+    top: -${Styles.token.spacing["2xl"]};
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
+    ${IS_SIZE_LARGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {
+      left: -${Styles.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: ${Styles.token.spacing.lg};
+      padding-left: ${Styles.token.spacing.md};
+    }
+  }
+  
+  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
+    ${IS_TEXT_CONTAINER_OVERWRITE} {
+      padding-left: ${Styles.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: -${Styles.token.spacing.md};
+    top: 7px;
+    height: calc(100% - 14px);
+    width: 2px;
+    display: block;
+    background-color: ${Styles.token.color.red};
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
+    ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER}:before {
+      left: -${Styles.token.spacing.md};
+    }
+  }
+
+  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {
+    position: absolute;
+    left: -${Styles.token.spacing.md};
+    top: -${Styles.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: -${Styles.token.spacing["4xl"]};
+      top: 0;
+    }
+  }
+
+  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} svg {
+    fill: ${Styles.token.color.red};
+  }
+`;
+const ImageContainer = `
+  ${IS_IMAGE_CONTAINER_OVERWRITE} {
+    margin-bottom: ${Styles.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 ${Styles.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: ${Styles.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: ${Styles.token.spacing.lg};
+    }
+  }
+
+  ${ImageContainer}
+  ${TextContainer}
+  ${OverwriteWithImage}
+  ${OverwriteSizeLarge}
+  ${OverwriteSizedLargeWithImage}
+  ${OverwriteThemeMaryland}
+`;
+const InlineQuote = (props) => {
+  const { isSizeLarge, image: image$1, isThemeDark, isThemeMaryland } = props;
+  const container = document.createElement("div");
+  const wrapper = document.createElement("div");
+  const hasImage = image$1 !== null;
+  const textContainer = text.create({
+    ...props
+  });
+  let styles = STYLES_QUOTE_INLINE_ELEMENT;
+  if (hasImage) {
+    const imageContainer = image.create({
+      image: image$1
+    });
+    if (imageContainer) {
+      const iconSpan = document.createElement("span");
+      iconSpan.innerHTML = icons.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 };
+};
+module.exports = InlineQuote;
+//# sourceMappingURL=inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inline.js","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","Image","token","image","Utility.asset.icon.QUOTE"],"mappings":"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"}