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

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

@@ -1,198 +1,203 @@
-import { typography, token, layout } from "@universityofmaryland/web-styles-library";
-import { QUOTE } from "../../../utilities/assets/icons.mjs";
-import { convertJSSObjectToStyles } from "../../../utilities/theme/index.mjs";
-const TEXT_CONTAINER_ELEMENT_NAME = "umd-element-quote-text-container";
-const ATTRIBUTE_THEME = "theme";
-const ATTRIBUTE_SIZE = "size";
-const THEME_DARK = "dark";
-const THEME_MARYLAND = "maryland";
-const SIZE_LARGE = "large";
-const TEXT_CONTAINER = "quote-text-container";
-const TEXT_CONTAINER_WRAPPER = "quote-text-container-wrapper";
-const TEXT_CONTAINER_QUOTE_WRAPPER = "quote-container-quote";
-const TEXT_CONTAINER_ATTRIBUTION_WRAPPER = "quote-container-attribution";
-const TEXT_CONTAINER_ATTRIBUTION_SUB_TEXT_WRAPPER = "quote-container-text-attribution-sub-text";
-const ELEMENTS_TEXT_CONTAINER_ACTIONS = "quote-container-actions";
-const IS_THEME_DARK = `.${TEXT_CONTAINER}[${ATTRIBUTE_THEME}='${THEME_DARK}']`;
-const IS_THEME_MARYLAND = `.${TEXT_CONTAINER}[${ATTRIBUTE_THEME}='${THEME_MARYLAND}']`;
-const IS_SIZE_LARGE = `.${TEXT_CONTAINER}[${ATTRIBUTE_SIZE}='${SIZE_LARGE}']`;
-const VarationSizeLarge = `
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`${IS_SIZE_LARGE} .${TEXT_CONTAINER_QUOTE_WRAPPER}`]: typography.sans.extraLarge
-  }
-})}
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`${IS_SIZE_LARGE} .${TEXT_CONTAINER_QUOTE_WRAPPER} *`]: typography.sans.extraLarge
-  }
-})}
-`;
-const VarationThemeDark = `
-  ${IS_THEME_DARK} * {
-    color: ${token.color.white};
-  }
-`;
-const VarationThemeMaryland = `
-  ${IS_THEME_MARYLAND} * {
-    color: ${token.color.white};
-  }
-`;
-const QuoteStyles = `
-  & .${TEXT_CONTAINER_QUOTE_WRAPPER} {
-    font-weight: 700;
-  }
-
-  .${TEXT_CONTAINER_QUOTE_WRAPPER} {
-    font-weight: 700;
-    color: ${token.color.black};
-  }
-
-  .${TEXT_CONTAINER_QUOTE_WRAPPER} * {
-    color: currentColor;
-  }
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${TEXT_CONTAINER_QUOTE_WRAPPER}`]: typography.sans.larger
-  }
-})}
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${TEXT_CONTAINER_QUOTE_WRAPPER} *`]: typography.sans.larger
-  }
-})}
-
-  .${TEXT_CONTAINER_QUOTE_WRAPPER} span {
-    display: none;
-  }
-`;
-const AttributionStyles = `
-  * + .${TEXT_CONTAINER_ATTRIBUTION_WRAPPER} {
-    margin-top: ${token.spacing.sm};
-  }
-
-  .${TEXT_CONTAINER_ATTRIBUTION_WRAPPER} {
-    color: ${token.color.gray.dark};
-  }
-
-  .${TEXT_CONTAINER_ATTRIBUTION_WRAPPER} * {
-    color: currentColor;
-  }
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${TEXT_CONTAINER_ATTRIBUTION_WRAPPER}`]: typography.sans.medium
-  }
-})}
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${TEXT_CONTAINER_ATTRIBUTION_WRAPPER} *`]: typography.sans.medium
-  }
-})}
-`;
-const AttributionSubTextStyles = `
-  * + .${TEXT_CONTAINER_ATTRIBUTION_SUB_TEXT_WRAPPER} {
-    margin-top: 2px;
-  }
-
-  .${TEXT_CONTAINER_ATTRIBUTION_SUB_TEXT_WRAPPER} {
-    color: ${token.color.gray.dark};
-    font-style: italic;
-  }
-
-  .${TEXT_CONTAINER_ATTRIBUTION_SUB_TEXT_WRAPPER} * {
-    color: currentColor;
-  }
-  
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${TEXT_CONTAINER_ATTRIBUTION_SUB_TEXT_WRAPPER}`]: typography.sans.small
-  }
-})}
-  
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${TEXT_CONTAINER_ATTRIBUTION_SUB_TEXT_WRAPPER} *`]: typography.sans.small
-  }
-})}
-`;
-const ActionStyles = `
-  * + .${ELEMENTS_TEXT_CONTAINER_ACTIONS} {
-    margin-top: ${token.spacing.sm};
-  }
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${ELEMENTS_TEXT_CONTAINER_ACTIONS}`]: layout.grid.inline.tabletRows
-  }
-})}
-`;
-const STYLES_QUOTE_TEXT_CONTAINER = `
-  .${TEXT_CONTAINER} {
-    container: ${TEXT_CONTAINER_ELEMENT_NAME} / inline-size;
-    width: 100%;
-  }
-
-  ${QuoteStyles}
-  ${AttributionStyles}
-  ${AttributionSubTextStyles}
-  ${ActionStyles}
-  ${VarationThemeDark}
-  ${VarationThemeMaryland}
-  ${VarationSizeLarge}
-`;
-const CreateQuoteTextContainer = ({
-  quote,
-  attribution,
-  attributionSubText,
-  action,
-  isThemeDark,
-  isThemeMaryland,
-  isSizeLarge = false
-}) => {
-  const container = document.createElement("div");
-  const wrapper = document.createElement("div");
-  wrapper.classList.add(TEXT_CONTAINER_WRAPPER);
-  if (quote) {
-    const iconSpan = document.createElement("span");
-    iconSpan.innerHTML = QUOTE;
-    quote.appendChild(iconSpan);
-    quote.classList.add(TEXT_CONTAINER_QUOTE_WRAPPER);
-    wrapper.appendChild(quote);
-  }
-  if (attribution) {
-    attribution.classList.add(TEXT_CONTAINER_ATTRIBUTION_WRAPPER);
-    wrapper.appendChild(attribution);
-  }
-  if (attributionSubText) {
-    attributionSubText.classList.add(
-      TEXT_CONTAINER_ATTRIBUTION_SUB_TEXT_WRAPPER
-    );
-    wrapper.appendChild(attributionSubText);
-  }
-  if (action) {
-    action.classList.add(ELEMENTS_TEXT_CONTAINER_ACTIONS);
-    wrapper.appendChild(action);
-  }
-  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
-  if (isThemeMaryland) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
-  if (isSizeLarge) container.setAttribute(ATTRIBUTE_SIZE, SIZE_LARGE);
-  container.classList.add(TEXT_CONTAINER);
-  container.appendChild(wrapper);
-  return { element: container, styles: STYLES_QUOTE_TEXT_CONTAINER };
-};
-const QuoteText = {
-  create: CreateQuoteTextContainer,
-  elements: {
-    container: TEXT_CONTAINER,
-    quoteWrapper: TEXT_CONTAINER_QUOTE_WRAPPER
-  }
+import * as token from "@universityofmaryland/web-styles-library/token";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import { createDiv, create } from "../../../model/elements/index.mjs";
+import elementIcon from "./icon.mjs";
+import elementAction from "./action.mjs";
+import { SMALL } from "../_constants.mjs";
+const elementText = (props) => {
+  const {
+    isThemeDark,
+    isThemeMaryland,
+    isSizeLarge = false,
+    isTypeFeatured = false,
+    image,
+    quote,
+    attribution,
+    attributionSubText,
+    action,
+    includesAnimation
+  } = props;
+  const createQuoteText = (quote2, quoteChildren) => {
+    let quoteTextElement = quote2;
+    const wordsList = splitWords(quote2);
+    if (includesAnimation) {
+      quoteTextElement = document.createElement("div");
+      wordsList.map((word) => {
+        quoteTextElement.appendChild(word);
+      });
+    }
+    const quoteElement = create({
+      element: quoteTextElement,
+      className: "quote-container-quote",
+      children: quoteChildren,
+      elementStyles: {
+        element: {
+          position: "relative",
+          fontWeight: "700",
+          color: token.color.black,
+          ...typography.sans.larger,
+          ...isSizeLarge && { ...typography.sans.extraLarge },
+          ...(isThemeDark || isThemeMaryland) && {
+            color: token.color.white
+          },
+          [`&::before`]: {
+            content: '""',
+            position: "absolute",
+            left: `-${token.spacing.md}`,
+            top: "7px",
+            height: "calc(100% - 14px)",
+            width: "2px",
+            display: "block",
+            backgroundColor: token.color.red,
+            ...isThemeMaryland && { backgroundColor: token.color.gold },
+            ...image && !isTypeFeatured && {
+              display: "none"
+            },
+            [`@container (min-width: ${SMALL}px)`]: {
+              left: `-${token.spacing.md}`
+            },
+            [`@container (max-width: ${SMALL - 1}px)`]: {
+              ...!isTypeFeatured && {
+                display: "block"
+              }
+            }
+          },
+          ["& *"]: {
+            color: "currentColor",
+            ...typography.sans.larger,
+            ...isSizeLarge && { ...typography.sans.extraLarge }
+          }
+        }
+      }
+    });
+    return quoteElement;
+  };
+  const getQuoteTextContainerChildren = (props2) => {
+    const wrapperChildren = [];
+    if (quote) {
+      const quoteChildren = [];
+      const iconSpan = elementIcon(props2);
+      if (!image) {
+        quoteChildren.push(iconSpan);
+      }
+      const quoteElement = createQuoteText(quote, quoteChildren);
+      wrapperChildren.push(quoteElement);
+    }
+    if (attribution) {
+      const attributionElement = create({
+        element: attribution,
+        className: "quote-container-attribution",
+        elementStyles: {
+          element: {
+            marginTop: token.spacing.sm,
+            ...includesAnimation && {
+              opacity: "0",
+              transform: "translateY(20px)",
+              transition: "opacity 1s ease, transform 0.5s ease"
+            },
+            ...isThemeDark && {
+              color: token.color.white
+            },
+            [`& *`]: {
+              color: "currentColor",
+              ...typography.sans.medium
+            }
+          }
+        }
+      });
+      wrapperChildren.push(attributionElement);
+    }
+    if (attributionSubText) {
+      const attributionSubTextElement = create({
+        element: attributionSubText,
+        className: "quote-container-text-attribution-sub-text",
+        elementStyles: {
+          element: {
+            color: token.color.gray.dark,
+            fontStyle: "italic",
+            ...typography.sans.small,
+            ...includesAnimation && {
+              opacity: "0",
+              transform: "translateY(20px)",
+              transition: "opacity 1s ease, transform 0.5s ease"
+            },
+            ...(isThemeDark || isThemeMaryland) && {
+              color: token.color.white
+            }
+          }
+        }
+      });
+      wrapperChildren.push(attributionSubTextElement);
+    }
+    if (action) {
+      const actionElement = elementAction({
+        ...props2,
+        action
+      });
+      wrapperChildren.push(actionElement);
+    }
+    return wrapperChildren;
+  };
+  const splitWords = (quote2) => {
+    const text = quote2.textContent ?? "";
+    const words = text.trim().split(/\s+/);
+    const wordElements = words.map((word, index) => {
+      const wordElement = document.createElement("div");
+      wordElement.classList.add("quote-text-split-word");
+      Object.assign(wordElement.style, {
+        display: "inline-block",
+        whiteSpace: "pre-wrap",
+        opacity: "0",
+        transform: "translateY(20px)",
+        transition: "opacity 1s ease, transform 0.5s ease"
+      });
+      wordElement.textContent = word + (index < words.length - 1 ? " " : "");
+      return wordElement;
+    });
+    return wordElements;
+  };
+  const CreateQuoteTextContainer = (props2) => {
+    const wrapperChildren = getQuoteTextContainerChildren(props2);
+    const wrapper = createDiv({
+      className: "quote-text-container-wrapper",
+      children: wrapperChildren
+    });
+    return createDiv({
+      className: "quote-text-container",
+      children: [wrapper],
+      elementStyles: {
+        element: {
+          width: "100%",
+          ...typography.sans.medium,
+          [`@container (max-width: ${SMALL - 1}px)`]: {
+            paddingTop: token.spacing.lg,
+            paddingLeft: token.spacing.md,
+            ...!isTypeFeatured && {
+              ...isSizeLarge && { paddingTop: token.spacing["2xl"] }
+            }
+          },
+          [`@container (min-width: ${SMALL}px)`]: {
+            paddingLeft: token.spacing["4xl"],
+            ...!isTypeFeatured && {
+              ...image && { paddingLeft: "0" }
+            }
+          },
+          [`& *`]: {
+            ...typography.sans.medium,
+            ...isThemeDark && {
+              color: token.color.white
+            },
+            ...isThemeMaryland && {
+              color: token.color.white
+            }
+          }
+        }
+      }
+    });
+  };
+  return CreateQuoteTextContainer(props);
 };
 export {
-  QuoteText as default
+  elementText as default
 };
 //# sourceMappingURL=text.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"text.mjs","sources":["../../../../source/composite/quote/elements/text.ts"],"sourcesContent":["import {\n  typography,\n  layout,\n  token,\n} from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\nexport type TypeQuoteTextContainer = {\n  quote: HTMLElement | null;\n  attribution: HTMLElement | null;\n  attributionSubText: HTMLElement | null;\n  action: HTMLElement | null;\n  isThemeDark?: boolean;\n  isThemeMaryland?: boolean;\n};\n\ntype TypeQuoteTextContainerProps = TypeQuoteTextContainer & {\n  isSizeLarge?: boolean;\n};\n\nconst TEXT_CONTAINER_ELEMENT_NAME = 'umd-element-quote-text-container';\nconst ATTRIBUTE_THEME = 'theme';\nconst ATTRIBUTE_SIZE = 'size';\nconst THEME_DARK = 'dark';\nconst THEME_MARYLAND = 'maryland';\nconst SIZE_LARGE = 'large';\n\nconst TEXT_CONTAINER = 'quote-text-container';\nconst TEXT_CONTAINER_WRAPPER = 'quote-text-container-wrapper';\nconst TEXT_CONTAINER_QUOTE_WRAPPER = 'quote-container-quote';\nconst TEXT_CONTAINER_ATTRIBUTION_WRAPPER = 'quote-container-attribution';\nconst TEXT_CONTAINER_ATTRIBUTION_SUB_TEXT_WRAPPER =\n  'quote-container-text-attribution-sub-text';\nconst ELEMENTS_TEXT_CONTAINER_ACTIONS = 'quote-container-actions';\n\nconst IS_THEME_DARK = `.${TEXT_CONTAINER}[${ATTRIBUTE_THEME}='${THEME_DARK}']`;\nconst IS_THEME_MARYLAND = `.${TEXT_CONTAINER}[${ATTRIBUTE_THEME}='${THEME_MARYLAND}']`;\nconst IS_SIZE_LARGE = `.${TEXT_CONTAINER}[${ATTRIBUTE_SIZE}='${SIZE_LARGE}']`;\n\n// prettier-ignore\nconst VarationSizeLarge = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`${IS_SIZE_LARGE} .${TEXT_CONTAINER_QUOTE_WRAPPER}`]: typography.sans.extraLarge,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`${IS_SIZE_LARGE} .${TEXT_CONTAINER_QUOTE_WRAPPER} *`]: typography.sans.extraLarge,\n    },\n  })}\n`\n\n// prettier-ignore\nconst VarationThemeDark = `\n  ${IS_THEME_DARK} * {\n    color: ${token.color.white};\n  }\n`\n\n// prettier-ignore\nconst VarationThemeMaryland = `\n  ${IS_THEME_MARYLAND} * {\n    color: ${token.color.white};\n  }\n`\n\n// prettier-ignore\nconst QuoteStyles = `\n  & .${TEXT_CONTAINER_QUOTE_WRAPPER} {\n    font-weight: 700;\n  }\n\n  .${TEXT_CONTAINER_QUOTE_WRAPPER} {\n    font-weight: 700;\n    color: ${token.color.black};\n  }\n\n  .${TEXT_CONTAINER_QUOTE_WRAPPER} * {\n    color: currentColor;\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${TEXT_CONTAINER_QUOTE_WRAPPER}`]: typography.sans.larger,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${TEXT_CONTAINER_QUOTE_WRAPPER} *`]: typography.sans.larger,\n    },\n  })}\n\n  .${TEXT_CONTAINER_QUOTE_WRAPPER} span {\n    display: none;\n  }\n`;\n\n// prettier-ignore\nconst AttributionStyles = `\n  * + .${TEXT_CONTAINER_ATTRIBUTION_WRAPPER} {\n    margin-top: ${token.spacing.sm};\n  }\n\n  .${TEXT_CONTAINER_ATTRIBUTION_WRAPPER} {\n    color: ${token.color.gray.dark};\n  }\n\n  .${TEXT_CONTAINER_ATTRIBUTION_WRAPPER} * {\n    color: currentColor;\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${TEXT_CONTAINER_ATTRIBUTION_WRAPPER}`]: typography.sans.medium,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${TEXT_CONTAINER_ATTRIBUTION_WRAPPER} *`]: typography.sans.medium,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst AttributionSubTextStyles = `\n  * + .${TEXT_CONTAINER_ATTRIBUTION_SUB_TEXT_WRAPPER} {\n    margin-top: 2px;\n  }\n\n  .${TEXT_CONTAINER_ATTRIBUTION_SUB_TEXT_WRAPPER} {\n    color: ${token.color.gray.dark};\n    font-style: italic;\n  }\n\n  .${TEXT_CONTAINER_ATTRIBUTION_SUB_TEXT_WRAPPER} * {\n    color: currentColor;\n  }\n  \n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${TEXT_CONTAINER_ATTRIBUTION_SUB_TEXT_WRAPPER}`]: typography.sans.small,\n    },\n  })}\n  \n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${TEXT_CONTAINER_ATTRIBUTION_SUB_TEXT_WRAPPER} *`]: typography.sans.small,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst ActionStyles = `\n  * + .${ELEMENTS_TEXT_CONTAINER_ACTIONS} {\n    margin-top: ${token.spacing.sm};\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENTS_TEXT_CONTAINER_ACTIONS}`]: layout.grid.inline.tabletRows,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst STYLES_QUOTE_TEXT_CONTAINER = `\n  .${TEXT_CONTAINER} {\n    container: ${TEXT_CONTAINER_ELEMENT_NAME} / inline-size;\n    width: 100%;\n  }\n\n  ${QuoteStyles}\n  ${AttributionStyles}\n  ${AttributionSubTextStyles}\n  ${ActionStyles}\n  ${VarationThemeDark}\n  ${VarationThemeMaryland}\n  ${VarationSizeLarge}\n`;\n\nconst CreateQuoteTextContainer = ({\n  quote,\n  attribution,\n  attributionSubText,\n  action,\n  isThemeDark,\n  isThemeMaryland,\n  isSizeLarge = false,\n}: TypeQuoteTextContainerProps) => {\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n\n  wrapper.classList.add(TEXT_CONTAINER_WRAPPER);\n\n  if (quote) {\n    const iconSpan = document.createElement('span');\n    iconSpan.innerHTML = Utility.asset.icon.QUOTE;\n\n    quote.appendChild(iconSpan);\n    quote.classList.add(TEXT_CONTAINER_QUOTE_WRAPPER);\n    wrapper.appendChild(quote);\n  }\n\n  if (attribution) {\n    attribution.classList.add(TEXT_CONTAINER_ATTRIBUTION_WRAPPER);\n    wrapper.appendChild(attribution);\n  }\n\n  if (attributionSubText) {\n    attributionSubText.classList.add(\n      TEXT_CONTAINER_ATTRIBUTION_SUB_TEXT_WRAPPER,\n    );\n    wrapper.appendChild(attributionSubText);\n  }\n\n  if (action) {\n    action.classList.add(ELEMENTS_TEXT_CONTAINER_ACTIONS);\n    wrapper.appendChild(action);\n  }\n\n  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n  if (isThemeMaryland) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n  if (isSizeLarge) container.setAttribute(ATTRIBUTE_SIZE, SIZE_LARGE);\n\n  container.classList.add(TEXT_CONTAINER);\n  container.appendChild(wrapper);\n\n  return { element: container, styles: STYLES_QUOTE_TEXT_CONTAINER };\n};\n\nexport default {\n  create: CreateQuoteTextContainer,\n  elements: {\n    container: TEXT_CONTAINER,\n    quoteWrapper: TEXT_CONTAINER_QUOTE_WRAPPER,\n  },\n};\n"],"names":["Utility.theme.convertJSSObjectToStyles","Utility.asset.icon.QUOTE"],"mappings":"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"}
+{"version":3,"file":"text.mjs","sources":["../../../../source/composite/quote/elements/text.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { ElementModel } from 'model';\nimport { default as elementIcon } from './icon';\nimport { default as elementAction } from './action';\nimport { SMALL } from '../_constants';\nimport { type QuoteTextProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\nexport default (props: QuoteTextProps) => {\n  const {\n    isThemeDark,\n    isThemeMaryland,\n    isSizeLarge = false,\n    isTypeFeatured = false,\n    image,\n    quote,\n    attribution,\n    attributionSubText,\n    action,\n    includesAnimation,\n  } = props;\n\n  const createQuoteText = (\n    quote: HTMLElement,\n    quoteChildren: ElementVisual[],\n  ) => {\n    let quoteTextElement: HTMLElement = quote;\n    const wordsList = splitWords(quote);\n\n    if (includesAnimation) {\n      quoteTextElement = document.createElement('div');\n\n      wordsList.map((word) => {\n        quoteTextElement.appendChild(word);\n      });\n    }\n\n    const quoteElement = ElementModel.create({\n      element: quoteTextElement,\n      className: 'quote-container-quote',\n      children: quoteChildren,\n      elementStyles: {\n        element: {\n          position: 'relative',\n          fontWeight: '700',\n          color: token.color.black,\n          ...typography.sans.larger,\n\n          ...(isSizeLarge && { ...typography.sans.extraLarge }),\n\n          ...((isThemeDark || isThemeMaryland) && {\n            color: token.color.white,\n          }),\n\n          [`&::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            backgroundColor: token.color.red,\n            ...(isThemeMaryland && { backgroundColor: token.color.gold }),\n\n            ...(image &&\n              !isTypeFeatured && {\n                display: 'none',\n              }),\n\n            [`@container (min-width: ${SMALL}px)`]: {\n              left: `-${token.spacing.md}`,\n            },\n\n            [`@container (max-width: ${SMALL - 1}px)`]: {\n              ...(!isTypeFeatured && {\n                display: 'block',\n              }),\n            },\n          },\n\n          ['& *']: {\n            color: 'currentColor',\n            ...typography.sans.larger,\n            ...(isSizeLarge && { ...typography.sans.extraLarge }),\n          },\n        },\n      },\n    });\n\n    return quoteElement;\n  };\n\n  const getQuoteTextContainerChildren = (props: QuoteTextProps) => {\n    const wrapperChildren: ElementVisual[] = [];\n\n    if (quote) {\n      const quoteChildren: ElementVisual[] = [];\n      const iconSpan = elementIcon(props);\n\n      if (!image) {\n        quoteChildren.push(iconSpan);\n      }\n\n      const quoteElement = createQuoteText(quote, quoteChildren);\n\n      wrapperChildren.push(quoteElement);\n    }\n\n    if (attribution) {\n      const attributionElement = ElementModel.create({\n        element: attribution,\n        className: 'quote-container-attribution',\n        elementStyles: {\n          element: {\n            marginTop: token.spacing.sm,\n\n            ...(includesAnimation && {\n              opacity: '0',\n              transform: 'translateY(20px)',\n              transition: 'opacity 1s ease, transform 0.5s ease',\n            }),\n\n            ...(isThemeDark && {\n              color: token.color.white,\n            }),\n\n            [`& *`]: {\n              color: 'currentColor',\n              ...typography.sans.medium,\n            },\n          },\n        },\n      });\n\n      wrapperChildren.push(attributionElement);\n    }\n\n    if (attributionSubText) {\n      const attributionSubTextElement = ElementModel.create({\n        element: attributionSubText,\n        className: 'quote-container-text-attribution-sub-text',\n        elementStyles: {\n          element: {\n            color: token.color.gray.dark,\n            fontStyle: 'italic',\n            ...typography.sans.small,\n\n            ...(includesAnimation && {\n              opacity: '0',\n              transform: 'translateY(20px)',\n              transition: 'opacity 1s ease, transform 0.5s ease',\n            }),\n\n            ...((isThemeDark || isThemeMaryland) && {\n              color: token.color.white,\n            }),\n          },\n        },\n      });\n\n      wrapperChildren.push(attributionSubTextElement);\n    }\n\n    if (action) {\n      const actionElement = elementAction({\n        ...props,\n        action,\n      });\n\n      wrapperChildren.push(actionElement);\n    }\n\n    return wrapperChildren;\n  };\n\n  const splitWords = (quote: HTMLElement) => {\n    const text = quote.textContent ?? '';\n    const words = text.trim().split(/\\s+/);\n\n    const wordElements = words.map((word, index) => {\n      const wordElement = document.createElement('div');\n      wordElement.classList.add('quote-text-split-word');\n\n      Object.assign(wordElement.style, {\n        display: 'inline-block',\n        whiteSpace: 'pre-wrap',\n        opacity: '0',\n        transform: 'translateY(20px)',\n        transition: 'opacity 1s ease, transform 0.5s ease',\n      });\n\n      wordElement.textContent = word + (index < words.length - 1 ? ' ' : '');\n\n      return wordElement;\n    });\n\n    return wordElements;\n  };\n\n  const CreateQuoteTextContainer = (props: QuoteTextProps) => {\n    const wrapperChildren = getQuoteTextContainerChildren(props);\n\n    const wrapper = ElementModel.createDiv({\n      className: 'quote-text-container-wrapper',\n      children: wrapperChildren,\n    });\n\n    return ElementModel.createDiv({\n      className: 'quote-text-container',\n      children: [wrapper],\n      elementStyles: {\n        element: {\n          width: '100%',\n          ...typography.sans.medium,\n\n          [`@container (max-width: ${SMALL - 1}px)`]: {\n            paddingTop: token.spacing.lg,\n            paddingLeft: token.spacing.md,\n\n            ...(!isTypeFeatured && {\n              ...(isSizeLarge && { paddingTop: token.spacing['2xl'] }),\n            }),\n          },\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            paddingLeft: token.spacing['4xl'],\n\n            ...(!isTypeFeatured && {\n              ...(image && { paddingLeft: '0' }),\n            }),\n          },\n\n          [`& *`]: {\n            ...typography.sans.medium,\n\n            ...(isThemeDark && {\n              color: token.color.white,\n            }),\n\n            ...(isThemeMaryland && {\n              color: token.color.white,\n            }),\n          },\n        },\n      },\n    });\n  };\n\n  return CreateQuoteTextContainer(props);\n};\n"],"names":["quote","ElementModel.create","props","ElementModel.createDiv"],"mappings":"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"}

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

@@ -1,11 +1,7 @@
-import { TypeInlineInline } from './inline';
-type TypeQuoteFeatured = TypeInlineInline & {
-    isTransparent: boolean;
-    isThemeDark?: boolean;
-    isThemeMaryland?: boolean;
-};
-declare const _default: (props: TypeQuoteFeatured) => {
-    element: HTMLDivElement;
+import { QuoteFeaturedProps } from './_types';
+declare const _default: (props: QuoteFeaturedProps) => {
+    element: HTMLElement;
+    className: string;
     styles: string;
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"featured.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/featured.ts"],"names":[],"mappings":"AACA,OAAoB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAIzD,KAAK,iBAAiB,GAAG,gBAAgB,GAAG;IAC1C,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;yBA8Qc,OAAO,iBAAiB;;;;AAAxC,wBAiCE"}
+{"version":3,"file":"featured.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/featured.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;yBAsInC,OAAO,kBAAkB;;;;;AAAzC,wBAiGE"}