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

package/dist/composite/quote/featured.mjs

@@ -1,264 +1,199 @@
-import { token } from "@universityofmaryland/web-styles-library";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { imageFromSvg } from "@universityofmaryland/web-utilities-library/media";
+import { createDiv, create } from "../../model/elements/index.mjs";
 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;
+import elementImage from "./elements/image.mjs";
+import "@universityofmaryland/web-styles-library/typography";
+import "@universityofmaryland/web-icons-library/brand";
+import { MEDIUM, SMALL } from "./_constants.mjs";
+import elementAction from "./elements/action.mjs";
+import { quoteAnimation } from "./helper/animation.mjs";
 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"]};
+const createImageContainer = (props) => {
+  const { image, action } = props;
+  const getContainerChildren = () => {
+    const containerChildren2 = [];
+    if (image) {
+      const imageElement = elementImage({
+        ...props,
+        isTypeFeatured: true,
+        image
+      });
+      containerChildren2.push(imageElement);
     }
-  }
-
-  ${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");
-        }
+    if (action) {
+      const actionElement = elementAction({
+        isTypeFeatured: true,
+        action
       });
+      containerChildren2.push(actionElement);
     }
+    return containerChildren2;
+  };
+  const createImageContainerElement = () => {
+    return createDiv({
+      className: "quote-featured-image",
+      children: containerChildren,
+      elementStyles: {
+        element: {
+          position: "relative",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          marginTop: `-${token.spacing.lg}`,
+          ["&[align-center=true]"]: {
+            marginTop: "0",
+            justifyContent: "center"
+          },
+          [`@container (max-width: ${SMALL - 1}px)`]: {
+            padding: `0 ${token.spacing.lg}`
+          },
+          [`@container (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px)`]: {
+            margin: "0 auto",
+            marginTop: `-${token.spacing["8xl"]}`,
+            maxWidth: "300px"
+          },
+          [`@container (min-width: ${MEDIUM}px)`]: {
+            paddingLeft: token.spacing["6xl"],
+            width: `calc(300px + ${token.spacing["6xl"]})`
+          }
+        }
+      }
+    });
+  };
+  const containerChildren = getContainerChildren();
+  const container = createImageContainerElement();
+  if (window.innerWidth >= MEDIUM && image instanceof HTMLImageElement) {
+    image.addEventListener("load", () => {
+      const parent = container;
+      if (!parent) return;
+      const aspectRatio = image.offsetHeight / parent.element.offsetHeight;
+      if (aspectRatio < 0.5) {
+        container.element.setAttribute("align-center", "true");
+      }
+    });
   }
   return container;
 };
-const CreateTextureContainer = ({
+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);
+  const backgroundTextureElement = create({
+    element: backgroundTexture,
+    className: "quote-background-texture"
+  });
+  const container = createDiv({
+    className: "quote-featured-texture",
+    children: [backgroundTextureElement],
+    elementStyles: {
+      element: {
+        overflow: "hidden",
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        [`& > img`]: {
+          position: "absolute",
+          top: "0",
+          left: "0",
+          width: "70%",
+          height: "120%",
+          objectFit: "cover"
+        },
+        [`@container (max-width: ${MEDIUM - 1}px)`]: {
+          display: "none"
+        }
+      }
+    }
+  });
   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 };
+  const { isThemeDark, isThemeMaryland, image, isTransparent } = props;
+  const wrapperChildren = [];
+  const inlineQuote = InlineQuote(props);
+  const textContainer = createDiv({
+    className: "quote-featured-text",
+    children: [inlineQuote],
+    elementStyles: {
+      element: {
+        padding: token.spacing.lg,
+        position: "relative",
+        width: "100%",
+        ...isTransparent && { padding: "0" },
+        [`@container (min-width: ${SMALL}px)`]: {
+          padding: `${token.spacing["2xl"]}`
+        },
+        [`@container (min-width: ${MEDIUM}px)`]: {
+          padding: `${token.spacing["4xl"]}`
+        }
+      }
+    }
+  });
+  if (!isTransparent) {
+    wrapperChildren.push(createTextureContainer(props));
+  }
+  if (image) {
+    wrapperChildren.push(createImageContainer(props));
+  }
+  wrapperChildren.push(textContainer);
+  const wrapper = createDiv({
+    className: "quote-featured-container-wrapper",
+    children: wrapperChildren,
+    elementStyles: {
+      element: {
+        backgroundColor: token.color.gray.lightest,
+        position: "relative",
+        ...isThemeDark && { backgroundColor: token.color.black },
+        ...isThemeMaryland && { backgroundColor: token.color.red },
+        ...isTransparent && { backgroundColor: "transparent" },
+        ...image && {
+          display: "flex",
+          flexDirection: "column",
+          [`@container (min-width: ${MEDIUM}px)`]: {
+            display: "flex",
+            flexDirection: "row"
+          }
+        }
+      }
+    }
+  });
+  const spacer = createDiv({
+    className: "quote-featured-container-spacer",
+    children: [wrapper],
+    elementStyles: {
+      element: {
+        paddingTop: token.spacing.lg,
+        ...isTransparent && { padding: "0" },
+        [`@container (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px)`]: {
+          ...image && {
+            paddingTop: token.spacing["8xl"]
+          }
+        }
+      }
+    }
+  });
+  const container = createDiv({
+    className: "quote-featured-container",
+    children: [spacer],
+    elementStyles: {
+      element: {
+        containerType: "inline-size"
+      }
+    }
+  });
+  quoteAnimation({
+    ...props,
+    quoteElement: container
+  });
+  return container;
 };
 export {
   featured as default

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

@@ -1 +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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"}
+{"version":3,"file":"featured.mjs","sources":["../../../source/composite/quote/featured.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\nimport { ElementModel } from 'model';\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';\nimport { type ElementVisual } from '../../_types';\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 createImageContainer = (props: QuoteFeaturedProps) => {\n  const { image, action } = props;\n\n  const getContainerChildren = () => {\n    const containerChildren: ElementVisual[] = [];\n\n    if (image) {\n      const imageElement = elementImage({\n        ...props,\n        isTypeFeatured: true,\n        image,\n      });\n      containerChildren.push(imageElement);\n    }\n\n    if (action) {\n      const actionElement = elementAction({\n        isTypeFeatured: true,\n        action,\n      });\n      containerChildren.push(actionElement);\n    }\n\n    return containerChildren;\n  };\n\n  const createImageContainerElement = () => {\n    return ElementModel.createDiv({\n      className: 'quote-featured-image',\n      children: containerChildren,\n      elementStyles: {\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: ${\n            MEDIUM - 1\n          }px)`]: {\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  };\n\n  const containerChildren = getContainerChildren();\n  const container = createImageContainerElement();\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 = ElementModel.create({\n    element: backgroundTexture,\n    className: 'quote-background-texture',\n  });\n  const container = ElementModel.createDiv({\n    className: 'quote-featured-texture',\n    children: [backgroundTextureElement],\n    elementStyles: {\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  });\n\n  return container;\n};\n\nexport default (props: QuoteFeaturedProps) => {\n  const { isThemeDark, isThemeMaryland, image, isTransparent } = props;\n  const wrapperChildren: ElementVisual[] = [];\n\n  const inlineQuote = InlineQuote(props);\n\n  const textContainer = ElementModel.createDiv({\n    className: 'quote-featured-text',\n    children: [inlineQuote],\n    elementStyles: {\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  });\n\n  if (!isTransparent) {\n    wrapperChildren.push(createTextureContainer(props));\n  }\n\n  if (image) {\n    wrapperChildren.push(createImageContainer(props));\n  }\n\n  wrapperChildren.push(textContainer);\n\n  const wrapper = ElementModel.createDiv({\n    className: 'quote-featured-container-wrapper',\n    children: wrapperChildren,\n    elementStyles: {\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\n  const spacer = ElementModel.createDiv({\n    className: 'quote-featured-container-spacer',\n    children: [wrapper],\n    elementStyles: {\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  });\n\n  const container = ElementModel.createDiv({\n    className: 'quote-featured-container',\n    children: [spacer],\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n      },\n    },\n  });\n\n  quoteAnimation({\n    ...props,\n    quoteElement: container,\n  });\n\n  return container;\n};\n"],"names":["containerChildren","ElementModel.createDiv","ElementModel.create"],"mappings":"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"}

package/dist/composite/quote/helper/animation.d.ts

@@ -0,0 +1,8 @@
+import { QuoteBaseProps, QuoteVariantProps } from '../_types';
+import { ElementVisual } from '../../../_types';
+interface QuoteAnimationProps extends QuoteVariantProps, Pick<QuoteBaseProps, 'quote' | 'includesAnimation' | 'image'> {
+    quoteElement: ElementVisual;
+}
+export declare const quoteAnimation: ({ image, includesAnimation, isTypeFeatured, quote, quoteElement, }: QuoteAnimationProps) => void;
+export {};
+//# sourceMappingURL=animation.d.ts.map

package/dist/composite/quote/helper/animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/helper/animation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACxE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,UAAU,mBACR,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,mBAAmB,GAAG,OAAO,CAAC;IAC/D,YAAY,EAAE,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,GAAI,oEAM5B,mBAAmB,SAwErB,CAAC"}

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

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const quoteAnimation = ({
+  image,
+  includesAnimation,
+  isTypeFeatured = false,
+  quote,
+  quoteElement
+}) => {
+  const quoteTextElement = quoteElement.element.querySelector(
+    ".quote-container-quote"
+  );
+  const attributionElement = quoteElement.element.querySelector(
+    ".quote-container-attribution"
+  );
+  const attributionSubTextElement = quoteElement.element.querySelector(
+    ".quote-container-text-attribution-sub-text"
+  );
+  const actionsElement = quoteElement.element.querySelector(
+    ".quote-container-actions"
+  );
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          if (!quote || !includesAnimation || !quoteTextElement) {
+            return;
+          }
+          const wordsList = Array.from(
+            quoteTextElement.querySelectorAll(".quote-text-split-word")
+          );
+          const animateAction = !isTypeFeatured || isTypeFeatured && !image;
+          let quoteAnimationLength = 50;
+          wordsList.forEach((word, i) => {
+            setTimeout(() => {
+              word.style.opacity = "1";
+              word.style.transform = "translateY(0)";
+            }, i * 50);
+            quoteAnimationLength += 50;
+          });
+          if (attributionElement) {
+            setTimeout(() => {
+              if (attributionElement) {
+                attributionElement.style.opacity = "1";
+                attributionElement.style.transform = "translateY(0)";
+              }
+            }, quoteAnimationLength);
+          }
+          if (attributionSubTextElement) {
+            setTimeout(() => {
+              attributionSubTextElement.style.opacity = "1";
+              attributionSubTextElement.style.transform = "translateY(0)";
+            }, quoteAnimationLength);
+          }
+          if (actionsElement && animateAction) {
+            setTimeout(() => {
+              actionsElement.style.opacity = "1";
+              actionsElement.style.transform = "translateY(0)";
+            }, quoteAnimationLength);
+          }
+        }
+      });
+    },
+    {
+      rootMargin: "0px 0px -120px 0px",
+      threshold: 0
+    }
+  );
+  if (quoteTextElement && includesAnimation) {
+    observer.observe(quoteTextElement);
+  }
+};
+exports.quoteAnimation = quoteAnimation;
+//# sourceMappingURL=animation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"animation.js","sources":["../../../../source/composite/quote/helper/animation.ts"],"sourcesContent":["import { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\ninterface QuoteAnimationProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'quote' | 'includesAnimation' | 'image'> {\n  quoteElement: ElementVisual;\n}\n\nexport const quoteAnimation = ({\n  image,\n  includesAnimation,\n  isTypeFeatured = false,\n  quote,\n  quoteElement,\n}: QuoteAnimationProps) => {\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 observer = new IntersectionObserver(\n    (entries) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          if (!quote || !includesAnimation || !quoteTextElement) {\n            return;\n          }\n\n          const wordsList = Array.from(\n            quoteTextElement.querySelectorAll('.quote-text-split-word'),\n          ) as HTMLElement[];\n          const animateAction = !isTypeFeatured || (isTypeFeatured && !image);\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              if (attributionElement) {\n                attributionElement.style.opacity = '1';\n                attributionElement.style.transform = 'translateY(0)';\n              }\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    },\n    {\n      rootMargin: '0px 0px -120px 0px',\n      threshold: 0,\n    },\n  );\n\n  if (quoteTextElement && includesAnimation) {\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,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,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,cAAI,CAAC,SAAS,CAAC,qBAAqB,CAAC,kBAAkB;AACrD;AAAA,UACF;AAEA,gBAAM,YAAY,MAAM;AAAA,YACtB,iBAAiB,iBAAiB,wBAAwB;AAAA,UAAA;AAE5D,gBAAM,gBAAgB,CAAC,kBAAmB,kBAAkB,CAAC;AAE7D,cAAI,uBAAuB;AAE3B,oBAAU,QAAQ,CAAC,MAAM,MAAM;AAC7B,uBAAW,MAAM;AACf,mBAAK,MAAM,UAAU;AACrB,mBAAK,MAAM,YAAY;AAAA,YACzB,GAAG,IAAI,EAAE;AAET,oCAAwB;AAAA,UAC1B,CAAC;AAED,cAAI,oBAAoB;AACtB,uBAAW,MAAM;AACf,kBAAI,oBAAoB;AACtB,mCAAmB,MAAM,UAAU;AACnC,mCAAmB,MAAM,YAAY;AAAA,cACvC;AAAA,YACF,GAAG,oBAAoB;AAAA,UACzB;AAEA,cAAI,2BAA2B;AAC7B,uBAAW,MAAM;AACf,wCAA0B,MAAM,UAAU;AAC1C,wCAA0B,MAAM,YAAY;AAAA,YAC9C,GAAG,oBAAoB;AAAA,UACzB;AAEA,cAAI,kBAAkB,eAAe;AACnC,uBAAW,MAAM;AACf,6BAAe,MAAM,UAAU;AAC/B,6BAAe,MAAM,YAAY;AAAA,YACnC,GAAG,oBAAoB;AAAA,UACzB;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,YAAY;AAAA,MACZ,WAAW;AAAA,IAAA;AAAA,EACb;AAGF,MAAI,oBAAoB,mBAAmB;AACzC,aAAS,QAAQ,gBAAgB;AAAA,EACnC;AACF;;"}