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

package/dist/composite/banner/promo.js

@@ -1,194 +1,157 @@
-"use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-const media = require("@universityofmaryland/web-utilities-library/media");
-const Logos = require("@universityofmaryland/web-icons-library/logos");
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import { imageFromSvg } from "@universityofmaryland/web-utilities-library/media";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
+import { seal } from "@universityofmaryland/web-icons-library/logos";
+import { wrapTextNodeInSpan } from "@universityofmaryland/web-utilities-library";
 const SMALL = 650;
-const ATTRIBUTE_THEME = "theme";
-const THEME_DARK = "dark";
-const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${THEME_DARK}"]`;
 const ELEMENT_NAME = "umd-element-banner-promo";
-const ELEMENT_DECLARATION = "banner-promo-declaration";
-const ELEMENT_CONTAINER = "banner-promo-container";
-const ELEMENT_WRAPPER = "banner-promo-wrapper";
-const ELEMENT_TEXT_CONTAINER = "banner-promo-text-container";
-const ELEMENT_HEADLINE = "banner-promo-headline";
-const ELEMENT_RICH_TEXT = "banner-promo-rich-text";
-const ELEMENT_ACTIONS = "banner-promo-actions";
-const OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;
-const OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;
-const OVERWRITE_THEME_DARK_RICH_TEXT = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_RICH_TEXT}`;
-const OverwriteThemeDark = `
-  ${OVERWRITE_THEME_DARK_CONTAINER} {
-    background-color: ${Styles.token.color.black};
-  }
-
-  ${OVERWRITE_THEME_DARK_CONTAINER} > svg {
-    fill: ${Styles.token.color.gray.darker};
-  }
-
-  ${OVERWRITE_THEME_DARK_HEADLINE} {
-    color: ${Styles.token.color.white};
-  }
-
-  ${styles.jssToCSS({
-  styleObj: {
-    [`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: Styles.element.text.rich.advancedDark
-  }
-})}
-
-  ${OVERWRITE_THEME_DARK_RICH_TEXT} * {
-    color: ${Styles.token.color.white};
-  }
-`;
-const ActionsStyles = `
-  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {
-    .${ELEMENT_ACTIONS} {
-      margin-top: ${Styles.token.spacing.sm};
+const createHeadline = (props) => {
+  const { headline, isThemeDark } = props;
+  if (!headline) return null;
+  const headlineStyles = {
+    ...typography.sans.compose("extralarge", {
+      theme: theme.fontColor(isThemeDark)
+    })
+  };
+  return new ElementBuilder(headline).withClassName("banner-promo-headline").styled(headlineStyles).withStyles({
+    element: {
+      textTransform: "uppercase",
+      fontWeight: 800
     }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    .${ELEMENT_ACTIONS} {
-      max-width: 30%;
-      margin-left: ${Styles.token.spacing.md};
+  }).withModifier((el) => wrapTextNodeInSpan(el)).build();
+};
+const createText = (props) => {
+  const { text, isThemeDark } = props;
+  if (!text) return null;
+  return new ElementBuilder(text).withClassName("banner-promo-rich-text").styled(
+    elementStyles.text.rich.composeSimple({
+      theme: theme.fontColor(isThemeDark)
+    })
+  ).withStyles({
+    element: {
+      marginTop: token.spacing.min,
+      ...!isThemeDark && {
+        color: token.color.black,
+        ["& *"]: {
+          color: token.color.black
+        }
+      }
     }
-  }
-`;
-const TextStyles = `
-  ${styles.jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_RICH_TEXT}`]: Styles.element.text.rich.advanced
-  }
-})}
-
-  ${styles.jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_RICH_TEXT} a`]: Styles.animation.line.fadeUnderRed
-  }
-})}
-
-  .${ELEMENT_RICH_TEXT} {
-    margin-top: ${Styles.token.spacing.min};
-  }
-
-  .${ELEMENT_RICH_TEXT} * {
-    color: ${Styles.token.color.black};
-  }
-`;
-const HeadlineStyles = `
-  ${styles.jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_HEADLINE}`]: Styles.typography.sans.extraLarge
-  }
-})}
-
-  .${ELEMENT_HEADLINE} {
-    text-transform: uppercase;
-    color: ${Styles.token.color.black};
-    font-weight: 800;
-  }
-`;
-const TextContainerStyles = `
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    .${ELEMENT_TEXT_CONTAINER} {
-      width: 70%;
+  }).build();
+};
+const createActions = (props) => {
+  const { actions } = props;
+  if (!actions) return null;
+  return new ElementBuilder(actions).withClassName("banner-promo-actions").withStyles({
+    element: {
+      [`@container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px)`]: {
+        marginTop: token.spacing.sm
+      },
+      [`@container ${ELEMENT_NAME} (min-width: ${SMALL}px)`]: {
+        maxWidth: "30%",
+        marginLeft: token.spacing.md
+      }
     }
-  }
-`;
-const WrapperStyles = `
-  .${ELEMENT_WRAPPER} {
-    z-index: 9;
-    position: relative;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    .${ELEMENT_WRAPPER} {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
+  }).build();
+};
+const createTextContainer = (props) => {
+  const { headline, text, isThemeDark } = props;
+  const headlineElement = createHeadline({ headline, isThemeDark });
+  const textElement = createText({ text, isThemeDark });
+  const children = [headlineElement, textElement].filter(
+    Boolean
+  );
+  return new ElementBuilder().withClassName("banner-promo-text-container").withChildren(...children).withStyles({
+    element: {
+      [`@container ${ELEMENT_NAME} (min-width: ${SMALL}px)`]: {
+        width: "70%"
+      }
     }
-  }
-`;
-const STYLES_BANNER_PROMO_ELEMENT = `
-  .${ELEMENT_DECLARATION} {
-    container: ${ELEMENT_NAME} / inline-size;
-    overflow: hidden;
-    position: relative;
-  }
-
-  .${ELEMENT_CONTAINER} {
-    padding: ${Styles.token.spacing.lg} ${Styles.token.spacing.lg};
-    background-color: ${Styles.token.color.gold};
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    .${ELEMENT_CONTAINER} {
-      padding: ${Styles.token.spacing.xl};
+  }).build();
+};
+const createWrapper = (props) => {
+  const { actions } = props;
+  const textContainer = createTextContainer(props);
+  const actionsElement = createActions({ actions });
+  const children = [textContainer, actionsElement].filter(
+    Boolean
+  );
+  return new ElementBuilder().withClassName("banner-promo-wrapper").withChildren(...children).withStyles({
+    element: {
+      zIndex: 9,
+      position: "relative",
+      [`@container ${ELEMENT_NAME} (min-width: ${SMALL}px)`]: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
+      }
     }
-  }
-
-  .${ELEMENT_CONTAINER} > img {
-    position: absolute;
-    right: -50px;
-    top: -40px;
-    height: 231px;
-    width: 234px;
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {
-    .${ELEMENT_CONTAINER} > img {
-      display: none;
+  }).build();
+};
+const createSeal = (isThemeDark) => {
+  const image = imageFromSvg({ SVG: seal.white });
+  image.alt = "University of Maryland Seal";
+  return new ElementBuilder(image).withClassName("banner-promo-seal").withStyles({
+    element: {
+      position: "absolute",
+      right: "-50px",
+      top: "-40px",
+      height: "231px",
+      width: "234px",
+      maxWidth: "234px",
+      maxHeight: "231px",
+      objectFit: "contain",
+      display: "block",
+      ...isThemeDark && {
+        opacity: 0.2
+      },
+      [`@container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px)`]: {
+        display: "none"
+      }
     }
-  }
-
-  ${WrapperStyles}
-  ${TextContainerStyles}
-  ${HeadlineStyles}
-  ${TextStyles}
-  ${ActionsStyles}
-  ${OverwriteThemeDark}
-`;
-const CreateTextContainer = (props) => {
-  const { headline, text } = props;
-  const container = document.createElement("div");
-  container.classList.add(ELEMENT_TEXT_CONTAINER);
-  if (headline) {
-    headline.classList.add(ELEMENT_HEADLINE);
-    container.appendChild(headline);
-  }
-  if (text) {
-    text.classList.add(ELEMENT_RICH_TEXT);
-    container.appendChild(text);
-  }
-  return container;
+  }).build();
 };
-const CreateBannerPromoElement = (props) => (() => {
-  const { isThemeDark, includeSeal = false, actions } = props;
-  const declaration = document.createElement("div");
-  const container = document.createElement("div");
-  const wrapper = document.createElement("div");
-  const textContainer = CreateTextContainer(props);
-  wrapper.classList.add(ELEMENT_WRAPPER);
-  wrapper.appendChild(textContainer);
-  if (actions) {
-    actions.classList.add(ELEMENT_ACTIONS);
-    wrapper.appendChild(actions);
-  }
+const createContainer = (props) => {
+  const { isThemeDark, includeSeal, content } = props;
+  const children = [];
   if (includeSeal) {
-    const img = media.imageFromSvg({ SVG: Logos.seal.white });
-    img.alt = "University of Maryland Seal";
-    container.appendChild(img);
-  }
-  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
-  container.classList.add(ELEMENT_CONTAINER);
-  container.appendChild(wrapper);
-  declaration.classList.add(ELEMENT_DECLARATION);
-  declaration.appendChild(container);
-  return {
-    element: declaration,
-    styles: STYLES_BANNER_PROMO_ELEMENT
-  };
-})();
-module.exports = CreateBannerPromoElement;
+    children.push(createSeal(isThemeDark ?? false));
+  }
+  children.push(content);
+  return new ElementBuilder().withClassName("banner-promo-container").withChildren(...children).withModifier((element) => {
+    if (isThemeDark) element.setAttribute("theme", "dark");
+  }).withStyles({
+    element: {
+      padding: `${token.spacing.lg} ${token.spacing.lg}`,
+      backgroundColor: token.color.gold,
+      position: "relative",
+      [`@container ${ELEMENT_NAME} (min-width: ${SMALL}px)`]: {
+        padding: token.spacing.xl
+      },
+      ...isThemeDark && {
+        backgroundColor: token.color.black
+      }
+    }
+  }).build();
+};
+const createCompositeBannerPromo = (props) => {
+  const wrapper = createWrapper(props);
+  const container = createContainer({
+    ...props,
+    content: wrapper
+  });
+  return new ElementBuilder().withClassName("banner-promo-declaration").withChild(container).withStyles({
+    element: {
+      container: `${ELEMENT_NAME} / inline-size`,
+      overflow: "hidden",
+      position: "relative"
+    }
+  }).build();
+};
+export {
+  createCompositeBannerPromo
+};
 //# sourceMappingURL=promo.js.map

package/dist/composite/banner/promo.js.map

@@ -1 +1 @@
-{"version":3,"file":"promo.js","sources":["../../../source/composite/banner/promo.ts"],"sourcesContent":["import {\n  animation,\n  element,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\nimport { seal as logoSeal } from '@universityofmaryland/web-icons-library/logos';\n\ntype TypeBannerPromoProps = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n  includeSeal?: boolean;\n};\n\nconst SMALL = 650;\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-banner-promo';\nconst ELEMENT_DECLARATION = 'banner-promo-declaration';\nconst ELEMENT_CONTAINER = 'banner-promo-container';\nconst ELEMENT_WRAPPER = 'banner-promo-wrapper';\nconst ELEMENT_TEXT_CONTAINER = 'banner-promo-text-container';\nconst ELEMENT_HEADLINE = 'banner-promo-headline';\nconst ELEMENT_RICH_TEXT = 'banner-promo-rich-text';\nconst ELEMENT_ACTIONS = 'banner-promo-actions';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_RICH_TEXT = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_RICH_TEXT}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_CONTAINER} > svg {\n    fill: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE} {\n    color: ${token.color.white};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n\n  ${OVERWRITE_THEME_DARK_RICH_TEXT} * {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst ActionsStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n    .${ELEMENT_ACTIONS} {\n      margin-top: ${token.spacing.sm};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_ACTIONS} {\n      max-width: 30%;\n      margin-left: ${token.spacing.md};\n    }\n  }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_RICH_TEXT}`]: element.text.rich.advanced,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_RICH_TEXT} a`]: animation.line.fadeUnderRed,\n    },\n  })}\n\n  .${ELEMENT_RICH_TEXT} {\n    margin-top: ${token.spacing.min};\n  }\n\n  .${ELEMENT_RICH_TEXT} * {\n    color: ${token.color.black};\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_HEADLINE}`]: typography.sans.extraLarge,\n    },\n  })}\n\n  .${ELEMENT_HEADLINE} {\n    text-transform: uppercase;\n    color: ${token.color.black};\n    font-weight: 800;\n  }\n`;\n\n// prettier-ignore\nconst TextContainerStyles = `\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_TEXT_CONTAINER} {\n      width: 70%;\n    }\n  }\n`;\n\n// prettier-ignore\nconst WrapperStyles = `\n  .${ELEMENT_WRAPPER} {\n    z-index: 9;\n    position: relative;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_WRAPPER} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n  }\n`;\n\nconst STYLES_BANNER_PROMO_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    overflow: hidden;\n    position: relative;\n  }\n\n  .${ELEMENT_CONTAINER} {\n    padding: ${token.spacing.lg} ${token.spacing.lg};\n    background-color: ${token.color.gold};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_CONTAINER} {\n      padding: ${token.spacing.xl};\n    }\n  }\n\n  .${ELEMENT_CONTAINER} > img {\n    position: absolute;\n    right: -50px;\n    top: -40px;\n    height: 231px;\n    width: 234px;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n    .${ELEMENT_CONTAINER} > img {\n      display: none;\n    }\n  }\n\n  ${WrapperStyles}\n  ${TextContainerStyles}\n  ${HeadlineStyles}\n  ${TextStyles}\n  ${ActionsStyles}\n  ${OverwriteThemeDark}\n`;\n\nconst CreateTextContainer = (props: TypeBannerPromoProps) => {\n  const { headline, text } = props;\n  const container = document.createElement('div');\n\n  container.classList.add(ELEMENT_TEXT_CONTAINER);\n\n  if (headline) {\n    headline.classList.add(ELEMENT_HEADLINE);\n    container.appendChild(headline);\n  }\n\n  if (text) {\n    text.classList.add(ELEMENT_RICH_TEXT);\n    container.appendChild(text);\n  }\n\n  return container;\n};\n\nconst CreateBannerPromoElement = (props: TypeBannerPromoProps) =>\n  (() => {\n    const { isThemeDark, includeSeal = false, actions } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n    const textContainer = CreateTextContainer(props);\n\n    wrapper.classList.add(ELEMENT_WRAPPER);\n    wrapper.appendChild(textContainer);\n\n    if (actions) {\n      actions.classList.add(ELEMENT_ACTIONS);\n      wrapper.appendChild(actions);\n    }\n\n    if (includeSeal) {\n      const img = imageFromSvg({ SVG: logoSeal.white });\n\n      img.alt = 'University of Maryland Seal';\n      container.appendChild(img);\n    }\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n    container.classList.add(ELEMENT_CONTAINER);\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    return {\n      element: declaration,\n      styles: STYLES_BANNER_PROMO_ELEMENT,\n    };\n  })();\n\nexport default CreateBannerPromoElement;\n"],"names":["token","jssToCSS","element","animation","typography","imageFromSvg","logoSeal"],"mappings":"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"}
+{"version":3,"file":"promo.js","sources":["../../../source/composite/banner/promo.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { seal as logoSeal } from '@universityofmaryland/web-icons-library/logos';\nimport { type ElementModel } from '../../_types';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library';\n\ntype TypeBannerPromoProps = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n  includeSeal?: boolean;\n};\n\nconst SMALL = 650;\nconst ELEMENT_NAME = 'umd-element-banner-promo';\n\nconst createHeadline = (\n  props: Pick<TypeBannerPromoProps, 'headline' | 'isThemeDark'>,\n): ElementModel | null => {\n  const { headline, isThemeDark } = props;\n  if (!headline) return null;\n\n  const headlineStyles = {\n    ...typography.sans.compose('extralarge', {\n      theme: theme.fontColor(isThemeDark),\n    }),\n  };\n\n  return new ElementBuilder(headline)\n    .withClassName('banner-promo-headline')\n    .styled(headlineStyles)\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n        fontWeight: 800,\n      },\n    })\n    .withModifier((el) => wrapTextNodeInSpan(el))\n    .build();\n};\n\nconst createText = (\n  props: Pick<TypeBannerPromoProps, 'text' | 'isThemeDark'>,\n): ElementModel | null => {\n  const { text, isThemeDark } = props;\n  if (!text) return null;\n\n  return new ElementBuilder(text)\n    .withClassName('banner-promo-rich-text')\n    .styled(\n      elementStyles.text.rich.composeSimple({\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        marginTop: token.spacing.min,\n\n        ...(!isThemeDark && {\n          color: token.color.black,\n\n          ['& *']: {\n            color: token.color.black,\n          },\n        }),\n      },\n    })\n    .build();\n};\n\nconst createActions = (\n  props: Pick<TypeBannerPromoProps, 'actions'>,\n): ElementModel | null => {\n  const { actions } = props;\n  if (!actions) return null;\n\n  return new ElementBuilder(actions)\n    .withClassName('banner-promo-actions')\n    .withStyles({\n      element: {\n        [`@container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px)`]: {\n          marginTop: token.spacing.sm,\n        },\n        [`@container ${ELEMENT_NAME} (min-width: ${SMALL}px)`]: {\n          maxWidth: '30%',\n          marginLeft: token.spacing.md,\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextContainer = (\n  props: Pick<TypeBannerPromoProps, 'headline' | 'text' | 'isThemeDark'>,\n): ElementModel => {\n  const { headline, text, isThemeDark } = props;\n  const headlineElement = createHeadline({ headline, isThemeDark });\n  const textElement = createText({ text, isThemeDark });\n  const children = [headlineElement, textElement].filter(\n    Boolean,\n  ) as ElementModel[];\n\n  return new ElementBuilder()\n    .withClassName('banner-promo-text-container')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        [`@container ${ELEMENT_NAME} (min-width: ${SMALL}px)`]: {\n          width: '70%',\n        },\n      },\n    })\n    .build();\n};\n\nconst createWrapper = (\n  props: Pick<\n    TypeBannerPromoProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n): ElementModel => {\n  const { actions } = props;\n  const textContainer = createTextContainer(props);\n  const actionsElement = createActions({ actions });\n  const children = [textContainer, actionsElement].filter(\n    Boolean,\n  ) as ElementModel[];\n\n  return new ElementBuilder()\n    .withClassName('banner-promo-wrapper')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        zIndex: 9,\n        position: 'relative',\n\n        [`@container ${ELEMENT_NAME} (min-width: ${SMALL}px)`]: {\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n        },\n      },\n    })\n    .build();\n};\n\nconst createSeal = (isThemeDark: boolean): ElementModel => {\n  const image = imageFromSvg({ SVG: logoSeal.white });\n  image.alt = 'University of Maryland Seal';\n\n  return new ElementBuilder(image)\n    .withClassName('banner-promo-seal')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        right: '-50px',\n        top: '-40px',\n        height: '231px',\n        width: '234px',\n        maxWidth: '234px',\n        maxHeight: '231px',\n        objectFit: 'contain',\n        display: 'block',\n\n        ...(isThemeDark && {\n          opacity: 0.2,\n        }),\n\n        [`@container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px)`]: {\n          display: 'none',\n        },\n      },\n    })\n    .build();\n};\n\nconst createContainer = (\n  props: Pick<TypeBannerPromoProps, 'isThemeDark' | 'includeSeal'> & {\n    content: ElementModel;\n  },\n): ElementModel => {\n  const { isThemeDark, includeSeal, content } = props;\n  const children: ElementModel[] = [];\n\n  if (includeSeal) {\n    children.push(createSeal(isThemeDark ?? false));\n  }\n\n  children.push(content);\n\n  return new ElementBuilder()\n    .withClassName('banner-promo-container')\n    .withChildren(...children)\n    .withModifier((element) => {\n      if (isThemeDark) element.setAttribute('theme', 'dark');\n    })\n    .withStyles({\n      element: {\n        padding: `${token.spacing.lg} ${token.spacing.lg}`,\n        backgroundColor: token.color.gold,\n        position: 'relative',\n\n        [`@container ${ELEMENT_NAME} (min-width: ${SMALL}px)`]: {\n          padding: token.spacing.xl,\n        },\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.black,\n        }),\n      },\n    })\n    .build();\n};\n\nexport const createCompositeBannerPromo = (props: TypeBannerPromoProps) => {\n  const wrapper = createWrapper(props);\n  const container = createContainer({\n    ...props,\n    content: wrapper,\n  });\n\n  return new ElementBuilder()\n    .withClassName('banner-promo-declaration')\n    .withChild(container)\n    .withStyles({\n      element: {\n        container: `${ELEMENT_NAME} / inline-size`,\n        overflow: 'hidden',\n        position: 'relative',\n      },\n    })\n    .build();\n};\n"],"names":["logoSeal"],"mappings":"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"}

package/dist/composite/card/block.d.ts

@@ -1,4 +1,3 @@
 import { CardBlockProps } from './_types';
-declare const _default: (props: CardBlockProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export default _default;
+export declare const createCompositeCardBlock: (props: CardBlockProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 //# sourceMappingURL=block.d.ts.map

package/dist/composite/card/block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../source/composite/card/block.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;yBAK1B,OAAO,cAAc;AAArC,wBA4DE"}
+{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../source/composite/card/block.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK1C,eAAO,MAAM,wBAAwB,GAAI,OAAO,cAAc,kFA4D7D,CAAC"}

package/dist/composite/card/block.js

@@ -1,59 +1,41 @@
-"use strict";
-const token = require("@universityofmaryland/web-token-library");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-require("@universityofmaryland/web-builder-library");
-require("@universityofmaryland/web-styles-library/element");
-require("@universityofmaryland/web-styles-library/layout");
-require("@universityofmaryland/web-styles-library/animation");
-require("@universityofmaryland/web-styles-library/typography");
-require("@universityofmaryland/web-utilities-library/media");
-require("@universityofmaryland/web-utilities-library/dom");
-require("@universityofmaryland/web-icons-library/controls");
-require("@universityofmaryland/web-icons-library/communication");
-require("@universityofmaryland/web-icons-library/files");
-require("@universityofmaryland/web-icons-library/brand");
-require("@universityofmaryland/web-icons-library/arrows");
-require("../../atomic/animations/actions/indicator.js");
-require("../../atomic/animations/brand/chevron-scroll.js");
-require("../../atomic/animations/brand/card-stack.js");
-const background = require("../../atomic/assets/image/background.js");
-require("@universityofmaryland/web-styles-library");
-require("@universityofmaryland/web-utilities-library/performance");
-require("@universityofmaryland/web-utilities-library/accessibility");
-require("@universityofmaryland/web-icons-library/location");
-require("@universityofmaryland/web-icons-library/calendar");
-require("@universityofmaryland/web-utilities-library/theme");
-const stacked = require("../../atomic/layout/block/stacked.js");
-require("../../atomic/layout/overlay/modal.js");
-require("../../atomic/layout/person/columns.js");
-require("@universityofmaryland/web-icons-library/social");
-require("../../atomic/text-lockup/date.js");
-require("../../atomic/text-lockup/small.js");
-const smallScaling = require("../../atomic/text-lockup/small-scaling.js");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const smallBreakpoint = token__namespace.media.breakpointValues.small.max;
-const block = (props) => {
+import * as token from "@universityofmaryland/web-token-library";
+import { createMediaQuery } from "@universityofmaryland/web-utilities-library/styles";
+import "@universityofmaryland/web-builder-library";
+import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
+import "@universityofmaryland/web-styles-library/typography";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/controls";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "@universityofmaryland/web-icons-library/arrows";
+import "../../atomic/animations/actions/indicator.js";
+import "../../atomic/animations/brand/chevron-scroll.js";
+import "../../atomic/animations/brand/card-stack.js";
+import { createImageBackground } from "../../atomic/assets/image/background.js";
+import "@universityofmaryland/web-styles-library";
+import "@universityofmaryland/web-utilities-library/performance";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
+import "@universityofmaryland/web-utilities-library/theme";
+import { image, textContainer, container } from "../../atomic/layout/block/stacked.js";
+import "../../atomic/layout/overlay/modal.js";
+import "../../atomic/layout/person/columns.js";
+import "@universityofmaryland/web-icons-library/social";
+import "../../atomic/text-lockup/date.js";
+import "../../atomic/text-lockup/small.js";
+import { createTextLockupSmallScaling } from "../../atomic/text-lockup/small-scaling.js";
+const smallBreakpoint = token.media.breakpointValues.small.max;
+const createCompositeCardBlock = (props) => {
   const {
     dateSign,
     hasBorder,
     hasEyebrowRibbon,
-    image,
+    image: image$1,
     isAligned,
     isThemeDark,
     isTransparent,
@@ -66,12 +48,12 @@ const block = (props) => {
     isTransparent,
     hasBorder
   };
-  if (image) {
+  if (image$1) {
     children.push(
-      stacked.image({
+      image({
         children: [
-          background({
-            element: image,
+          createImageBackground({
+            element: image$1,
             isScaled: true,
             isAspectStandard: isAligned,
             dateSign
@@ -79,8 +61,8 @@ const block = (props) => {
         ],
         customStyles: {
           ...shouldImageBeFullWidth && {
-            ...styles.createMediaQuery("max-width", smallBreakpoint, {
-              marginBottom: token__namespace.spacing.md,
+            ...createMediaQuery("max-width", smallBreakpoint, {
+              marginBottom: token.spacing.md,
               width: "100%"
             })
           }
@@ -90,12 +72,12 @@ const block = (props) => {
     );
   }
   children.push(
-    stacked.textContainer({
-      children: [smallScaling(props)],
+    textContainer({
+      children: [createTextLockupSmallScaling(props)],
       ...sizingProps
     })
   );
-  const composite = stacked.container({
+  const composite = container({
     children,
     ...sizingProps
   });
@@ -104,5 +86,7 @@ const block = (props) => {
   }
   return composite;
 };
-module.exports = block;
+export {
+  createCompositeCardBlock
+};
 //# sourceMappingURL=block.js.map

package/dist/composite/card/block.js.map

@@ -1 +1 @@
-{"version":3,"file":"block.js","sources":["../../../source/composite/card/block.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, layout, textLockup } from 'atomic';\nimport { CardBlockProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport default (props: CardBlockProps) => {\n  const {\n    dateSign,\n    hasBorder,\n    hasEyebrowRibbon,\n    image,\n    isAligned,\n    isThemeDark,\n    isTransparent,\n    newsId,\n  } = props;\n  const shouldImageBeFullWidth = hasEyebrowRibbon;\n  const children: UMDElement[] = [];\n  const sizingProps = {\n    isThemeDark,\n    isTransparent,\n    hasBorder,\n  };\n\n  if (image) {\n    children.push(\n      layout.block.stacked.image({\n        children: [\n          assets.image.background({\n            element: image,\n            isScaled: true,\n            isAspectStandard: isAligned,\n            dateSign,\n          }),\n        ],\n        customStyles: {\n          ...(shouldImageBeFullWidth && {\n            ...createMediaQuery('max-width', smallBreakpoint, {\n              marginBottom: token.spacing.md,\n              width: '100%',\n            }),\n          }),\n        },\n        ...sizingProps,\n      }),\n    );\n  }\n\n  children.push(\n    layout.block.stacked.textContainer({\n      children: [textLockup.smallScaling(props)],\n      ...sizingProps,\n    }),\n  );\n\n  const composite = layout.block.stacked.container({\n    children,\n    ...sizingProps,\n  });\n\n  if (newsId) {\n    composite?.element.setAttribute('news-id', newsId);\n  }\n\n  return composite;\n};\n"],"names":["token","layout.block.stacked.image","assets.image.background","createMediaQuery","layout.block.stacked.textContainer","textLockup.smallScaling","layout.block.stacked.container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,kBAAkBA,iBAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAA,QAAe,CAAC,UAA0B;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,yBAAyB;AAC/B,QAAM,WAAyB,CAAA;AAC/B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,MAAI,OAAO;AACT,aAAS;AAAA,MACPC,cAA2B;AAAA,QACzB,UAAU;AAAA,UACRC,WAAwB;AAAA,YACtB,SAAS;AAAA,YACT,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB;AAAA,UAAA,CACD;AAAA,QAAA;AAAA,QAEH,cAAc;AAAA,UACZ,GAAI,0BAA0B;AAAA,YAC5B,GAAGC,OAAAA,iBAAiB,aAAa,iBAAiB;AAAA,cAChD,cAAcH,iBAAM,QAAQ;AAAA,cAC5B,OAAO;AAAA,YAAA,CACR;AAAA,UAAA;AAAA,QACH;AAAA,QAEF,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPI,sBAAmC;AAAA,MACjC,UAAU,CAACC,aAAwB,KAAK,CAAC;AAAA,MACzC,GAAG;AAAA,IAAA,CACJ;AAAA,EAAA;AAGH,QAAM,YAAYC,QAAAA,UAA+B;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AAED,MAAI,QAAQ;AACV,eAAW,QAAQ,aAAa,WAAW,MAAM;AAAA,EACnD;AAEA,SAAO;AACT;;"}
+{"version":3,"file":"block.js","sources":["../../../source/composite/card/block.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, layout, textLockup } from 'atomic';\nimport { CardBlockProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport const createCompositeCardBlock = (props: CardBlockProps) => {\n  const {\n    dateSign,\n    hasBorder,\n    hasEyebrowRibbon,\n    image,\n    isAligned,\n    isThemeDark,\n    isTransparent,\n    newsId,\n  } = props;\n  const shouldImageBeFullWidth = hasEyebrowRibbon;\n  const children: UMDElement[] = [];\n  const sizingProps = {\n    isThemeDark,\n    isTransparent,\n    hasBorder,\n  };\n\n  if (image) {\n    children.push(\n      layout.block.stacked.image({\n        children: [\n          assets.image.background({\n            element: image,\n            isScaled: true,\n            isAspectStandard: isAligned,\n            dateSign,\n          }),\n        ],\n        customStyles: {\n          ...(shouldImageBeFullWidth && {\n            ...createMediaQuery('max-width', smallBreakpoint, {\n              marginBottom: token.spacing.md,\n              width: '100%',\n            }),\n          }),\n        },\n        ...sizingProps,\n      }),\n    );\n  }\n\n  children.push(\n    layout.block.stacked.textContainer({\n      children: [textLockup.smallScaling(props)],\n      ...sizingProps,\n    }),\n  );\n\n  const composite = layout.block.stacked.container({\n    children,\n    ...sizingProps,\n  });\n\n  if (newsId) {\n    composite?.element.setAttribute('news-id', newsId);\n  }\n\n  return composite;\n};\n"],"names":["image","layout.block.stacked.image","assets.image.background","layout.block.stacked.textContainer","textLockup.smallScaling","layout.block.stacked.container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAEpD,MAAM,2BAA2B,CAAC,UAA0B;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAAA,OACAA;AAAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,yBAAyB;AAC/B,QAAM,WAAyB,CAAA;AAC/B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA2B;AAAA,QACzB,UAAU;AAAA,UACRC,sBAAwB;AAAA,YACtB,SAASF;AAAAA,YACT,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB;AAAA,UAAA,CACD;AAAA,QAAA;AAAA,QAEH,cAAc;AAAA,UACZ,GAAI,0BAA0B;AAAA,YAC5B,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,cAChD,cAAc,MAAM,QAAQ;AAAA,cAC5B,OAAO;AAAA,YAAA,CACR;AAAA,UAAA;AAAA,QACH;AAAA,QAEF,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPG,cAAmC;AAAA,MACjC,UAAU,CAACC,6BAAwB,KAAK,CAAC;AAAA,MACzC,GAAG;AAAA,IAAA,CACJ;AAAA,EAAA;AAGH,QAAM,YAAYC,UAA+B;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AAED,MAAI,QAAQ;AACV,eAAW,QAAQ,aAAa,WAAW,MAAM;AAAA,EACnD;AAEA,SAAO;AACT;"}

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

@@ -1,5 +1,5 @@
-export { default as block } from './block';
-export { default as list } from './list';
+export { createCompositeCardBlock as block } from './block';
+export { createCompositeCardList as list } from './list';
 export * as overlay from './overlay';
 export * as video from './video';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,EAAE,uBAAuB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzD,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC"}

package/dist/composite/card/index.js

@@ -1,11 +1,11 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const block = require("./block.js");
-const list = require("./list.js");
-const index = require("./overlay/index.js");
-const index$1 = require("./video/index.js");
-exports.block = block;
-exports.list = list;
-exports.overlay = index;
-exports.video = index$1;
+import { createCompositeCardBlock } from "./block.js";
+import { createCompositeCardList } from "./list.js";
+import * as index from "./overlay/index.js";
+import * as index$1 from "./video/index.js";
+export {
+  createCompositeCardBlock as block,
+  createCompositeCardList as list,
+  index as overlay,
+  index$1 as video
+};
 //# sourceMappingURL=index.js.map

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

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

package/dist/composite/card/list.d.ts

@@ -1,4 +1,3 @@
 import { CardListProps } from './_types';
-declare const _default: (props: CardListProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export default _default;
+export declare const createCompositeCardList: (props: CardListProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 //# sourceMappingURL=list.d.ts.map

package/dist/composite/card/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../source/composite/card/list.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;yBAyGzB,OAAO,aAAa;AAApC,wBA4CE"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../source/composite/card/list.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAyGzC,eAAO,MAAM,uBAAuB,GAAI,OAAO,aAAa,kFA4C3D,CAAC"}