@universityofmaryland/web-elements-library 1.5.2 → 1.5.5

package/dist/composite/alert/site.mjs

@@ -1,94 +1,16 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
 import * as layout from "@universityofmaryland/web-styles-library/layout";
-import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
-import { shrinkThenRemove } from "@universityofmaryland/web-utilities-library/animation";
 import { getLocalStorageInt, setLocalStorageTimestamp } from "@universityofmaryland/web-utilities-library/storage";
-import { close } from "@universityofmaryland/web-icons-library/controls";
-import { CONSTANTS, CreateAlertText } from "./elements/text.mjs";
-const MEDUM = 500;
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
+import { CreateAlertText } from "./elements/text.mjs";
+import { CreateCloseButton } from "./elements/closeButton.mjs";
+import { BREAKPOINTS } from "./globals.mjs";
+const { MEDIUM } = BREAKPOINTS;
 const DEFAULT_HIDE_TIME = 30;
 const ALERT_LOCAL_STORAGE_KEY = "umd-alert-site-time";
-const ELEMENT_NAME = "umd-element-alert-site";
-const ELEMENT_ALERT_SITE_DECLARATION = "alert-site-declaration";
-const ELEMENT_ALERT_SITE_CONTAINER = "alert-site-container";
-const ELEMENT_ALERT_SITE_LOCK = "alert-site-lock";
-const ELEMENT_ALERT_SITE_CLOSE_BUTTON = "alert-site-close-button";
-const OVERWRITE_TEXT_WRAPPER = `.${ELEMENT_ALERT_SITE_CONTAINER} .${CONSTANTS.className.text}`;
-const OVERWRITE_TEXT_BODY = `.${ELEMENT_ALERT_SITE_CONTAINER} .${CONSTANTS.className.wrapper}`;
-const OverwriteText = `
-  ${OVERWRITE_TEXT_WRAPPER} {
-    max-width: ${token.spacing.maxWidth.large};
-  }
-
-  ${OVERWRITE_TEXT_BODY},
-  ${OVERWRITE_TEXT_BODY} * {
-    color: ${token.color.black};
-    max-width: ${token.spacing.maxWidth.large};
-  }
-`;
-const ButtonStyles = `
-  .${ELEMENT_ALERT_SITE_CLOSE_BUTTON} {
-    position: absolute;
-    top: ${token.spacing.lg};
-    right: ${token.spacing.lg};
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {
-    .${ELEMENT_ALERT_SITE_CLOSE_BUTTON} {
-      top: ${token.spacing.sm};
-      right: ${token.spacing.sm};
-    }
-  }
-`;
-const LockStyles = `
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_ALERT_SITE_LOCK}`]: layout.space.horizontal.larger
-  }
-})}
-
-  .${ELEMENT_ALERT_SITE_LOCK} {
-    width: 100%;
-  }
-`;
-const STYLES_ALERT_SITE_ELEMENT = `
-  .${ELEMENT_ALERT_SITE_DECLARATION} {
-    container: ${ELEMENT_NAME} / inline-size;
-  }
-
-  .${ELEMENT_ALERT_SITE_CONTAINER} {
-    display: flex;
-    position: relative;
-    padding: ${token.spacing.lg} 0;
-    gap: ${token.spacing.lg};
-    background-color: ${token.color.gold};
-    border-left: 4px solid ${token.color.red};
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${MEDUM}px) {
-    .${ELEMENT_ALERT_SITE_CONTAINER} {
-      border-left: 8px solid ${token.color.red};
-      padding-right: ${token.spacing["2xl"]};
-    }
-  }
-
-
-  ${ButtonStyles}
-  ${LockStyles}
-  ${OverwriteText}
-`;
-const CreateCloseButton = ({ container }) => {
-  const closeButton = document.createElement("button");
-  closeButton.classList.add(ELEMENT_ALERT_SITE_CLOSE_BUTTON);
-  closeButton.innerHTML = close;
-  closeButton.setAttribute("aria-label", "Close alert");
-  closeButton.addEventListener("click", () => {
-    shrinkThenRemove({ container });
-    setLocalStorageTimestamp({ key: ALERT_LOCAL_STORAGE_KEY });
-  });
-  return closeButton;
-};
-const ShouldShow = ({ daysToHide }) => {
+const shouldShow = (props) => {
+  const { daysToHide } = props;
   const now = (/* @__PURE__ */ new Date()).getTime();
   const millisecondsPerDay = 24 * 60 * 60 * 1e3;
   const lastClosedTime = getLocalStorageInt({
@@ -100,28 +22,58 @@ const ShouldShow = ({ daysToHide }) => {
   const futureTime = new Date(futureTimeStamp).getTime();
   return futureTime > now;
 };
-const CreateAlertSiteElement = (props) => (() => {
-  const elementContainer = document.createElement("div");
-  const container = document.createElement("div");
-  const lock = document.createElement("div");
-  const textWrapper = CreateAlertText(props);
-  const shouldHide = ShouldShow(props);
-  let styles = STYLES_ALERT_SITE_ELEMENT;
-  if (shouldHide) container.style.display = "none";
-  lock.classList.add(ELEMENT_ALERT_SITE_LOCK);
-  lock.appendChild(textWrapper.element);
-  styles += textWrapper.styles;
-  container.classList.add(ELEMENT_ALERT_SITE_CONTAINER);
-  container.appendChild(lock);
-  container.appendChild(CreateCloseButton({ container: elementContainer }));
-  elementContainer.appendChild(container);
-  elementContainer.classList.add(ELEMENT_ALERT_SITE_DECLARATION);
-  return {
-    element: elementContainer,
-    styles
-  };
-})();
+const createLock = (props) => {
+  const { isThemeDark } = props;
+  const textModel = CreateAlertText(props);
+  return new ElementBuilder().styled(layout.space.horizontal.larger).withChild(textModel).withStyles({
+    element: {
+      width: "100%"
+    },
+    subElement: {
+      color: theme.foreground(isThemeDark),
+      maxWidth: token.spacing.maxWidth.large
+    }
+  }).build();
+};
+const createCloseButton = () => CreateCloseButton({
+  targetSelector: ".alert-site-declaration",
+  onBeforeClose: () => setLocalStorageTimestamp({ key: ALERT_LOCAL_STORAGE_KEY })
+});
+const createContainer = (props) => {
+  const lockElement = createLock(props);
+  const closeButtonElement = createCloseButton();
+  const children = [lockElement, closeButtonElement].filter(
+    Boolean
+  );
+  return new ElementBuilder().withClassName("alert-site-container").withChildren(...children).withStyles({
+    element: {
+      display: "flex",
+      position: "relative",
+      padding: `${token.spacing.lg} 0`,
+      gap: token.spacing.lg,
+      backgroundColor: token.color.gold,
+      borderLeft: `4px solid ${token.color.red}`,
+      [`@container (min-width: ${MEDIUM}px)`]: {
+        borderLeft: `8px solid ${token.color.red}`,
+        paddingRight: token.spacing["2xl"]
+      }
+    }
+  }).build();
+};
+const createWrapper = (container) => new ElementBuilder().withClassName("alert-site-declaration").withChild(container).withStyles({
+  element: {
+    containerType: "inline-size"
+  }
+}).build();
+const site = (props) => {
+  const containerModel = createContainer(props);
+  const declarationModel = createWrapper(containerModel);
+  if (shouldShow(props)) {
+    declarationModel.element.style.display = "none";
+  }
+  return declarationModel;
+};
 export {
-  CreateAlertSiteElement
+  site as default
 };
 //# sourceMappingURL=site.mjs.map

package/dist/composite/alert/site.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"site.mjs","sources":["../../../source/composite/alert/site.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { shrinkThenRemove } from '@universityofmaryland/web-utilities-library/animation';\nimport {\n  getLocalStorageInt,\n  setLocalStorageTimestamp,\n} from '@universityofmaryland/web-utilities-library/storage';\nimport { close as iconClose } from '@universityofmaryland/web-icons-library/controls';\nimport {\n  CreateAlertText as AlertText,\n  CONSTANTS as TEXT_CONSTANTS,\n  TypeAlertTextProps,\n} from './elements/text';\n\ntype TypeShouldShowProps = {\n  daysToHide?: string;\n};\n\ntype TypeAlertProps = TypeShouldShowProps &\n  TypeAlertTextProps & {\n    isShowIcon?: boolean;\n  };\n\ntype TypeAlertButtonProps = {\n  container: HTMLElement;\n};\n\nconst MEDUM = 500;\nconst DEFAULT_HIDE_TIME = 30;\nconst ALERT_LOCAL_STORAGE_KEY = 'umd-alert-site-time';\n\nconst ELEMENT_NAME = 'umd-element-alert-site';\nconst ELEMENT_ALERT_SITE_DECLARATION = 'alert-site-declaration';\nconst ELEMENT_ALERT_SITE_CONTAINER = 'alert-site-container';\nconst ELEMENT_ALERT_SITE_LOCK = 'alert-site-lock';\nconst ELEMENT_ALERT_SITE_CLOSE_BUTTON = 'alert-site-close-button';\n\nconst OVERWRITE_TEXT_WRAPPER = `.${ELEMENT_ALERT_SITE_CONTAINER} .${TEXT_CONSTANTS.className.text}`;\nconst OVERWRITE_TEXT_BODY = `.${ELEMENT_ALERT_SITE_CONTAINER} .${TEXT_CONSTANTS.className.wrapper}`;\n\nconst OverwriteText = `\n  ${OVERWRITE_TEXT_WRAPPER} {\n    max-width: ${token.spacing.maxWidth.large};\n  }\n\n  ${OVERWRITE_TEXT_BODY},\n  ${OVERWRITE_TEXT_BODY} * {\n    color: ${token.color.black};\n    max-width: ${token.spacing.maxWidth.large};\n  }\n`;\n\nconst ButtonStyles = `\n  .${ELEMENT_ALERT_SITE_CLOSE_BUTTON} {\n    position: absolute;\n    top: ${token.spacing.lg};\n    right: ${token.spacing.lg};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_SITE_CLOSE_BUTTON} {\n      top: ${token.spacing.sm};\n      right: ${token.spacing.sm};\n    }\n  }\n`;\n\nconst LockStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_ALERT_SITE_LOCK}`]: layout.space.horizontal.larger,\n    },\n  })}\n\n  .${ELEMENT_ALERT_SITE_LOCK} {\n    width: 100%;\n  }\n`;\n\nconst STYLES_ALERT_SITE_ELEMENT = `\n  .${ELEMENT_ALERT_SITE_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_ALERT_SITE_CONTAINER} {\n    display: flex;\n    position: relative;\n    padding: ${token.spacing.lg} 0;\n    gap: ${token.spacing.lg};\n    background-color: ${token.color.gold};\n    border-left: 4px solid ${token.color.red};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_SITE_CONTAINER} {\n      border-left: 8px solid ${token.color.red};\n      padding-right: ${token.spacing['2xl']};\n    }\n  }\n\n\n  ${ButtonStyles}\n  ${LockStyles}\n  ${OverwriteText}\n`;\n\nconst CreateCloseButton = ({ container }: TypeAlertButtonProps) => {\n  const closeButton = document.createElement('button');\n\n  closeButton.classList.add(ELEMENT_ALERT_SITE_CLOSE_BUTTON);\n  closeButton.innerHTML = iconClose;\n  closeButton.setAttribute('aria-label', 'Close alert');\n  closeButton.addEventListener('click', () => {\n    shrinkThenRemove({ container });\n    setLocalStorageTimestamp({ key: ALERT_LOCAL_STORAGE_KEY });\n  });\n\n  return closeButton;\n};\n\nconst ShouldShow = ({ daysToHide }: TypeShouldShowProps) => {\n  const now = new Date().getTime();\n  const millisecondsPerDay = 24 * 60 * 60 * 1000;\n  const lastClosedTime = getLocalStorageInt({\n    key: ALERT_LOCAL_STORAGE_KEY,\n  });\n\n  if (!lastClosedTime) return false;\n\n  const daysUntilAlertDisplay = daysToHide\n    ? parseInt(daysToHide)\n    : DEFAULT_HIDE_TIME;\n  const futureTimeStamp =\n    lastClosedTime + millisecondsPerDay * daysUntilAlertDisplay;\n  const futureTime = new Date(futureTimeStamp).getTime();\n\n  return futureTime > now;\n};\n\nexport const CreateAlertSiteElement = (props: TypeAlertProps) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const container = document.createElement('div');\n    const lock = document.createElement('div');\n    const textWrapper = AlertText(props);\n    const shouldHide = ShouldShow(props);\n    let styles = STYLES_ALERT_SITE_ELEMENT;\n\n    if (shouldHide) container.style.display = 'none';\n\n    lock.classList.add(ELEMENT_ALERT_SITE_LOCK);\n    lock.appendChild(textWrapper.element);\n\n    styles += textWrapper.styles;\n\n    container.classList.add(ELEMENT_ALERT_SITE_CONTAINER);\n    container.appendChild(lock);\n    container.appendChild(CreateCloseButton({ container: elementContainer }));\n\n    elementContainer.appendChild(container);\n    elementContainer.classList.add(ELEMENT_ALERT_SITE_DECLARATION);\n\n    return {\n      element: elementContainer,\n      styles,\n    };\n  })();\n"],"names":["TEXT_CONSTANTS","iconClose","AlertText"],"mappings":"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"}
+{"version":3,"file":"site.mjs","sources":["../../../source/composite/alert/site.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport {\n  getLocalStorageInt,\n  setLocalStorageTimestamp,\n} from '@universityofmaryland/web-utilities-library/storage';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { CreateAlertText as AlertText, AlertTextProps } from './elements/text';\nimport { CreateCloseButton } from './elements/closeButton';\nimport { BREAKPOINTS } from './globals';\nimport { type ElementModel } from '../../_types';\n\nexport interface AlertSiteProps extends AlertTextProps {\n  daysToHide?: string;\n}\n\nconst { MEDIUM } = BREAKPOINTS;\nconst DEFAULT_HIDE_TIME = 30;\nconst ALERT_LOCAL_STORAGE_KEY = 'umd-alert-site-time';\n\nconst shouldShow = (props: Pick<AlertSiteProps, 'daysToHide'>) => {\n  const { daysToHide } = props;\n\n  const now = new Date().getTime();\n  const millisecondsPerDay = 24 * 60 * 60 * 1000;\n  const lastClosedTime = getLocalStorageInt({\n    key: ALERT_LOCAL_STORAGE_KEY,\n  });\n\n  if (!lastClosedTime) return false;\n\n  const daysUntilAlertDisplay = daysToHide\n    ? parseInt(daysToHide)\n    : DEFAULT_HIDE_TIME;\n  const futureTimeStamp =\n    lastClosedTime + millisecondsPerDay * daysUntilAlertDisplay;\n  const futureTime = new Date(futureTimeStamp).getTime();\n\n  return futureTime > now;\n};\n\nconst createLock = (\n  props: Pick<AlertSiteProps, 'headline' | 'text' | 'actions' | 'isThemeDark'>,\n) => {\n  const { isThemeDark } = props;\n  const textModel = AlertText(props);\n\n  return new ElementBuilder()\n    .styled(layout.space.horizontal.larger)\n    .withChild(textModel)\n    .withStyles({\n      element: {\n        width: '100%',\n      },\n      subElement: {\n        color: theme.foreground(isThemeDark),\n        maxWidth: token.spacing.maxWidth.large,\n      },\n    })\n    .build();\n};\n\nconst createCloseButton = () =>\n  CreateCloseButton({\n    targetSelector: '.alert-site-declaration',\n    onBeforeClose: () =>\n      setLocalStorageTimestamp({ key: ALERT_LOCAL_STORAGE_KEY }),\n  });\n\nconst createContainer = (\n  props: Pick<\n    AlertSiteProps,\n    'daysToHide' | 'isThemeDark' | 'headline' | 'text' | 'actions'\n  >,\n) => {\n  const lockElement = createLock(props);\n  const closeButtonElement = createCloseButton();\n  const children = [lockElement, closeButtonElement].filter(\n    Boolean,\n  ) as ElementModel[];\n\n  return new ElementBuilder()\n    .withClassName('alert-site-container')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        display: 'flex',\n        position: 'relative',\n        padding: `${token.spacing.lg} 0`,\n        gap: token.spacing.lg,\n        backgroundColor: token.color.gold,\n        borderLeft: `4px solid ${token.color.red}`,\n\n        [`@container (min-width: ${MEDIUM}px)`]: {\n          borderLeft: `8px solid ${token.color.red}`,\n          paddingRight: token.spacing['2xl'],\n        },\n      },\n    })\n    .build();\n};\n\nconst createWrapper = (container: ElementModel) =>\n  new ElementBuilder()\n    .withClassName('alert-site-declaration')\n    .withChild(container)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n\nexport default (props: AlertSiteProps) => {\n  const containerModel = createContainer(props);\n  const declarationModel = createWrapper(containerModel);\n\n  if (shouldShow(props)) {\n    (declarationModel.element as HTMLElement).style.display = 'none';\n  }\n\n  return declarationModel;\n};\n"],"names":["AlertText"],"mappings":";;;;;;;;AAiBA,MAAM,EAAE,WAAW;AACnB,MAAM,oBAAoB;AAC1B,MAAM,0BAA0B;AAEhC,MAAM,aAAa,CAAC,UAA8C;AAChE,QAAM,EAAE,eAAe;AAEvB,QAAM,OAAM,oBAAI,KAAA,GAAO,QAAA;AACvB,QAAM,qBAAqB,KAAK,KAAK,KAAK;AAC1C,QAAM,iBAAiB,mBAAmB;AAAA,IACxC,KAAK;AAAA,EAAA,CACN;AAED,MAAI,CAAC,eAAgB,QAAO;AAE5B,QAAM,wBAAwB,aAC1B,SAAS,UAAU,IACnB;AACJ,QAAM,kBACJ,iBAAiB,qBAAqB;AACxC,QAAM,aAAa,IAAI,KAAK,eAAe,EAAE,QAAA;AAE7C,SAAO,aAAa;AACtB;AAEA,MAAM,aAAa,CACjB,UACG;AACH,QAAM,EAAE,gBAAgB;AACxB,QAAM,YAAYA,gBAAU,KAAK;AAEjC,SAAO,IAAI,eAAA,EACR,OAAO,OAAO,MAAM,WAAW,MAAM,EACrC,UAAU,SAAS,EACnB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET,YAAY;AAAA,MACV,OAAO,MAAM,WAAW,WAAW;AAAA,MACnC,UAAU,MAAM,QAAQ,SAAS;AAAA,IAAA;AAAA,EACnC,CACD,EACA,MAAA;AACL;AAEA,MAAM,oBAAoB,MACxB,kBAAkB;AAAA,EAChB,gBAAgB;AAAA,EAChB,eAAe,MACb,yBAAyB,EAAE,KAAK,yBAAyB;AAC7D,CAAC;AAEH,MAAM,kBAAkB,CACtB,UAIG;AACH,QAAM,cAAc,WAAW,KAAK;AACpC,QAAM,qBAAqB,kBAAA;AAC3B,QAAM,WAAW,CAAC,aAAa,kBAAkB,EAAE;AAAA,IACjD;AAAA,EAAA;AAGF,SAAO,IAAI,eAAA,EACR,cAAc,sBAAsB,EACpC,aAAa,GAAG,QAAQ,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,SAAS,GAAG,MAAM,QAAQ,EAAE;AAAA,MAC5B,KAAK,MAAM,QAAQ;AAAA,MACnB,iBAAiB,MAAM,MAAM;AAAA,MAC7B,YAAY,aAAa,MAAM,MAAM,GAAG;AAAA,MAExC,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,QACvC,YAAY,aAAa,MAAM,MAAM,GAAG;AAAA,QACxC,cAAc,MAAM,QAAQ,KAAK;AAAA,MAAA;AAAA,IACnC;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,gBAAgB,CAAC,cACrB,IAAI,iBACD,cAAc,wBAAwB,EACtC,UAAU,SAAS,EACnB,WAAW;AAAA,EACV,SAAS;AAAA,IACP,eAAe;AAAA,EAAA;AAEnB,CAAC,EACA,MAAA;AAEL,MAAA,OAAe,CAAC,UAA0B;AACxC,QAAM,iBAAiB,gBAAgB,KAAK;AAC5C,QAAM,mBAAmB,cAAc,cAAc;AAErD,MAAI,WAAW,KAAK,GAAG;AACpB,qBAAiB,QAAwB,MAAM,UAAU;AAAA,EAC5D;AAEA,SAAO;AACT;"}

package/dist/composite/banner/promo.js

@@ -1,8 +1,8 @@
 "use strict";
 const Styles = require("@universityofmaryland/web-styles-library");
-const Logos = require("@universityofmaryland/web-icons-library/logos");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
 const media = require("@universityofmaryland/web-utilities-library/media");
+const Logos = require("@universityofmaryland/web-icons-library/logos");
 const SMALL = 650;
 const ATTRIBUTE_THEME = "theme";
 const THEME_DARK = "dark";

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 { seal as logoSeal } from '@universityofmaryland/web-icons-library/logos';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\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 {\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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"}

package/dist/composite/banner/promo.mjs

@@ -1,7 +1,7 @@
 import { token, element, animation, typography } from "@universityofmaryland/web-styles-library";
-import { seal } from "@universityofmaryland/web-icons-library/logos";
 import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
 import { imageFromSvg } from "@universityofmaryland/web-utilities-library/media";
+import { seal } from "@universityofmaryland/web-icons-library/logos";
 const SMALL = 650;
 const ATTRIBUTE_THEME = "theme";
 const THEME_DARK = "dark";

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

@@ -1 +1 @@
-{"version":3,"file":"promo.mjs","sources":["../../../source/composite/banner/promo.ts"],"sourcesContent":["import {\n  animation,\n  element,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { seal as logoSeal } from '@universityofmaryland/web-icons-library/logos';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\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":["logoSeal"],"mappings":"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"}
+{"version":3,"file":"promo.mjs","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":["logoSeal"],"mappings":"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"}

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

@@ -1,8 +1,4 @@
 import { CardBlockProps } from './_types';
-declare const _default: (props: CardBlockProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: (props: CardBlockProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# 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;yBAK1B,OAAO,cAAc;AAArC,wBA4DE"}

package/dist/composite/card/block.js

@@ -1,25 +1,28 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+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("../../model/modifiers/index.js");
-require("@universityofmaryland/web-styles-library");
-require("../../model/elements/headline.js");
 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");
@@ -27,7 +30,6 @@ 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");
-require("@universityofmaryland/web-styles-library/typography");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

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-styles-library/token';\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 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;;"}

package/dist/composite/card/block.mjs

@@ -1,24 +1,27 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+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 "../../model/modifiers/index.mjs";
-import "@universityofmaryland/web-styles-library";
-import "../../model/elements/headline.mjs";
 import "@universityofmaryland/web-icons-library/arrows";
 import "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../atomic/animations/brand/card-stack.mjs";
 import imageContainer from "../../atomic/assets/image/background.mjs";
+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.mjs";
 import "../../atomic/layout/overlay/modal.mjs";
 import "../../atomic/layout/person/columns.mjs";
@@ -26,7 +29,6 @@ import "@universityofmaryland/web-icons-library/social";
 import "../../atomic/text-lockup/date.mjs";
 import "../../atomic/text-lockup/small.mjs";
 import smallScaling from "../../atomic/text-lockup/small-scaling.mjs";
-import "@universityofmaryland/web-styles-library/typography";
 const smallBreakpoint = token.media.breakpointValues.small.max;
 const block = (props) => {
   const {

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

@@ -1 +1 @@
-{"version":3,"file":"block.mjs","sources":["../../../source/composite/card/block.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\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":["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;AAE3D,MAAA,QAAe,CAAC,UAA0B;AACxC,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,eAAwB;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,aAAwB,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;"}
+{"version":3,"file":"block.mjs","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":["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;AAE3D,MAAA,QAAe,CAAC,UAA0B;AACxC,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,eAAwB;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,aAAwB,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/list.d.ts

@@ -1,8 +1,4 @@
 import { CardListProps } from './_types';
-declare const _default: (props: CardListProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: (props: CardListProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# 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;yBAqGzB,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;yBAyGzB,OAAO,aAAa;AAApC,wBA4CE"}