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

package/dist/composite/alert/page.js

@@ -1,12 +1,27 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Styles = require("@universityofmaryland/web-styles-library");
-const icons = require("../../utilities/assets/icons.js");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
-const animations = require("../../utilities/theme/animations.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const animation = require("@universityofmaryland/web-utilities-library/animation");
+const controls = require("@universityofmaryland/web-icons-library/controls");
+const indicators = require("@universityofmaryland/web-icons-library/indicators");
 const text = require("./elements/text.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 MEDUM = 500;
 const ATTRIBUTE_THEME = "theme";
 const THEME_DARK = "dark";
@@ -20,35 +35,35 @@ const OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_ALERT_PAGE_CONTAINER}${IS_THE
 const OVERWRITE_THEME_DARK_CLOSE_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON}`;
 const OverwriteThemeStyles = `
   ${OVERWRITE_THEME_DARK_CONTAINER} * {
-    color: ${Styles.token.color.white};
+    color: ${token__namespace.color.white};
   }
 
   ${OVERWRITE_THEME_DARK_CLOSE_BUTTON} rect {
-    fill: ${Styles.token.color.white};
+    fill: ${token__namespace.color.white};
   }
 `;
 const ButtonStyles = `
   .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {
     position: absolute;
-    top: ${Styles.token.spacing.lg};
-    right: ${Styles.token.spacing.lg};
+    top: ${token__namespace.spacing.lg};
+    right: ${token__namespace.spacing.lg};
   }
 
   .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} rect {
-    fill: ${Styles.token.color.black};
+    fill: ${token__namespace.color.black};
   }
 
   @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {
     .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {
-      top: ${Styles.token.spacing.sm};
-      right: ${Styles.token.spacing.sm};
+      top: ${token__namespace.spacing.sm};
+      right: ${token__namespace.spacing.sm};
     }
   }
 `;
 const IconStyles = `
   .${ELEMENT_ALERT_PAGE_ICON} {
     display: block;
-    fill: ${Styles.token.color.gold};
+    fill: ${token__namespace.color.gold};
   }
 
   @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {
@@ -66,15 +81,15 @@ const STYLES_ALERT_PAGE_ELEMENT = `
   .${ELEMENT_ALERT_PAGE_CONTAINER} {
     display: flex;
     position: relative;
-    padding: ${Styles.token.spacing.lg};
-    padding-right: ${Styles.token.spacing["2xl"]};
-    gap: ${Styles.token.spacing.lg};
-    border: solid 4px ${Styles.token.color.gold};
+    padding: ${token__namespace.spacing.lg};
+    padding-right: ${token__namespace.spacing["2xl"]};
+    gap: ${token__namespace.spacing.lg};
+    border: solid 4px ${token__namespace.color.gold};
   }
 
   @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {
     .${ELEMENT_ALERT_PAGE_CONTAINER} {
-      padding-right: ${Styles.token.spacing.lg};
+      padding-right: ${token__namespace.spacing.lg};
     }
   }
 
@@ -84,7 +99,7 @@ const STYLES_ALERT_PAGE_ELEMENT = `
 `;
 const CreateIcon = () => {
   const iconWrapper = document.createElement("div");
-  let icon = icons.NOTIFICATION;
+  let icon = indicators.warning;
   iconWrapper.classList.add(ELEMENT_ALERT_PAGE_ICON);
   iconWrapper.innerHTML = icon;
   return iconWrapper;
@@ -92,10 +107,10 @@ const CreateIcon = () => {
 const CreateCloseButton = ({ container }) => {
   const closeButton = document.createElement("button");
   closeButton.classList.add(ELEMENT_ALERT_PAGE_CLOSE_BUTTON);
-  closeButton.innerHTML = icons.CLOSE_BUTTON;
+  closeButton.innerHTML = controls.close;
   closeButton.setAttribute("aria-label", "Close alert");
   closeButton.addEventListener("click", () => {
-    animations.shrinkThenRemove({ container });
+    animation.shrinkThenRemove({ container });
   });
   return closeButton;
 };

package/dist/composite/alert/page.js.map

@@ -1 +1 @@
-{"version":3,"file":"page.js","sources":["../../../source/composite/alert/page.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport { CreateAlertText as AlertText, TypeAlertTextProps } from './elements/text';\n\ntype TypeShouldShowProps = {\n  daysToHide?: string;\n};\n\ntype TypeAlertProps = TypeShouldShowProps &\n  TypeAlertTextProps & {\n    isThemeLight?: boolean;\n    isThemeDark?: boolean;\n    isShowIcon?: boolean;\n  };\n\ntype TypeAlertButtonProps = {\n  container: HTMLElement;\n};\n\nconst MEDUM = 500;\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-alert-page';\nconst ELEMENT_ALERT_PAGE_DECLARATION = 'alert-page-declaration';\nconst ELEMENT_ALERT_PAGE_CONTAINER = 'alert-page-container';\nconst ELEMENT_ALERT_PAGE_CLOSE_BUTTON = 'alert-page-close-button';\nconst ELEMENT_ALERT_PAGE_ICON = 'alert-page-icon';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_ALERT_PAGE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_CLOSE_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON}`;\n\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_CLOSE_BUTTON} rect {\n    fill: ${token.color.white};\n  }\n`;\n\nconst ButtonStyles = `\n  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {\n    position: absolute;\n    top: ${token.spacing.lg};\n    right: ${token.spacing.lg};\n  }\n\n  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} rect {\n    fill: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {\n      top: ${token.spacing.sm};\n      right: ${token.spacing.sm};\n    }\n  }\n`;\n\nconst IconStyles = `\n  .${ELEMENT_ALERT_PAGE_ICON} {\n    display: block;\n    fill: ${token.color.gold};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_ICON} {\n      position: absolute;\n      top: -20px;\n    }\n  }\n`;\n\nconst STYLES_ALERT_PAGE_ELEMENT = `\n  .${ELEMENT_ALERT_PAGE_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_ALERT_PAGE_CONTAINER} {\n    display: flex;\n    position: relative;\n    padding: ${token.spacing.lg};\n    padding-right: ${token.spacing['2xl']};\n    gap: ${token.spacing.lg};\n    border: solid 4px ${token.color.gold};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_CONTAINER} {\n      padding-right: ${token.spacing.lg};\n    }\n  }\n\n  ${IconStyles}\n  ${ButtonStyles}\n  ${OverwriteThemeStyles}\n`;\n\nconst CreateIcon = () => {\n  const iconWrapper = document.createElement('div');\n  let icon = Utility.asset.icon.NOTIFICATION;\n\n  iconWrapper.classList.add(ELEMENT_ALERT_PAGE_ICON);\n  iconWrapper.innerHTML = icon;\n\n  return iconWrapper;\n};\n\nconst CreateCloseButton = ({ container }: TypeAlertButtonProps) => {\n  const closeButton = document.createElement('button');\n\n  closeButton.classList.add(ELEMENT_ALERT_PAGE_CLOSE_BUTTON);\n  closeButton.innerHTML = Utility.asset.icon.CLOSE_BUTTON;\n  closeButton.setAttribute('aria-label', 'Close alert');\n  closeButton.addEventListener('click', () => {\n    Utility.theme.animations.shrinkThenRemove({ container });\n  });\n\n  return closeButton;\n};\n\nexport const CreateAlertPageElement = (props: TypeAlertProps) =>\n  (() => {\n    const { isShowIcon = true, isThemeDark, isThemeLight } = props;\n    const elementContainer = document.createElement('div');\n    const container = document.createElement('div');\n    const textWrapper = AlertText(props);\n    let styles = STYLES_ALERT_PAGE_ELEMENT;\n\n    container.classList.add(ELEMENT_ALERT_PAGE_CONTAINER);\n    if (isShowIcon) container.appendChild(CreateIcon());\n    if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, 'light');\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, 'dark');\n\n    container.appendChild(textWrapper.element);\n    styles += textWrapper.styles;\n\n    container.appendChild(CreateCloseButton({ container: elementContainer }));\n\n    elementContainer.appendChild(container);\n    elementContainer.classList.add(ELEMENT_ALERT_PAGE_DECLARATION);\n\n    return {\n      element: elementContainer,\n      styles,\n    };\n  })();\n"],"names":["token","Utility.asset.icon.NOTIFICATION","Utility.asset.icon.CLOSE_BUTTON","Utility.theme.animations.shrinkThenRemove","AlertText"],"mappings":"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"}
+{"version":3,"file":"page.js","sources":["../../../source/composite/alert/page.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { shrinkThenRemove } from '@universityofmaryland/web-utilities-library/animation';\nimport { close as iconClose } from '@universityofmaryland/web-icons-library/controls';\nimport { warning as iconWarning } from '@universityofmaryland/web-icons-library/indicators';\nimport {\n  CreateAlertText as AlertText,\n  TypeAlertTextProps,\n} from './elements/text';\n\ntype TypeShouldShowProps = {\n  daysToHide?: string;\n};\n\ntype TypeAlertProps = TypeShouldShowProps &\n  TypeAlertTextProps & {\n    isThemeLight?: boolean;\n    isThemeDark?: boolean;\n    isShowIcon?: boolean;\n  };\n\ntype TypeAlertButtonProps = {\n  container: HTMLElement;\n};\n\nconst MEDUM = 500;\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-alert-page';\nconst ELEMENT_ALERT_PAGE_DECLARATION = 'alert-page-declaration';\nconst ELEMENT_ALERT_PAGE_CONTAINER = 'alert-page-container';\nconst ELEMENT_ALERT_PAGE_CLOSE_BUTTON = 'alert-page-close-button';\nconst ELEMENT_ALERT_PAGE_ICON = 'alert-page-icon';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_ALERT_PAGE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_CLOSE_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON}`;\n\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_CLOSE_BUTTON} rect {\n    fill: ${token.color.white};\n  }\n`;\n\nconst ButtonStyles = `\n  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {\n    position: absolute;\n    top: ${token.spacing.lg};\n    right: ${token.spacing.lg};\n  }\n\n  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} rect {\n    fill: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {\n      top: ${token.spacing.sm};\n      right: ${token.spacing.sm};\n    }\n  }\n`;\n\nconst IconStyles = `\n  .${ELEMENT_ALERT_PAGE_ICON} {\n    display: block;\n    fill: ${token.color.gold};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_ICON} {\n      position: absolute;\n      top: -20px;\n    }\n  }\n`;\n\nconst STYLES_ALERT_PAGE_ELEMENT = `\n  .${ELEMENT_ALERT_PAGE_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_ALERT_PAGE_CONTAINER} {\n    display: flex;\n    position: relative;\n    padding: ${token.spacing.lg};\n    padding-right: ${token.spacing['2xl']};\n    gap: ${token.spacing.lg};\n    border: solid 4px ${token.color.gold};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_CONTAINER} {\n      padding-right: ${token.spacing.lg};\n    }\n  }\n\n  ${IconStyles}\n  ${ButtonStyles}\n  ${OverwriteThemeStyles}\n`;\n\nconst CreateIcon = () => {\n  const iconWrapper = document.createElement('div');\n  let icon = iconWarning;\n\n  iconWrapper.classList.add(ELEMENT_ALERT_PAGE_ICON);\n  iconWrapper.innerHTML = icon;\n\n  return iconWrapper;\n};\n\nconst CreateCloseButton = ({ container }: TypeAlertButtonProps) => {\n  const closeButton = document.createElement('button');\n\n  closeButton.classList.add(ELEMENT_ALERT_PAGE_CLOSE_BUTTON);\n  closeButton.innerHTML = iconClose;\n  closeButton.setAttribute('aria-label', 'Close alert');\n  closeButton.addEventListener('click', () => {\n    shrinkThenRemove({ container });\n  });\n\n  return closeButton;\n};\n\nexport const CreateAlertPageElement = (props: TypeAlertProps) =>\n  (() => {\n    const { isShowIcon = true, isThemeDark, isThemeLight } = props;\n    const elementContainer = document.createElement('div');\n    const container = document.createElement('div');\n    const textWrapper = AlertText(props);\n    let styles = STYLES_ALERT_PAGE_ELEMENT;\n\n    container.classList.add(ELEMENT_ALERT_PAGE_CONTAINER);\n    if (isShowIcon) container.appendChild(CreateIcon());\n    if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, 'light');\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, 'dark');\n\n    container.appendChild(textWrapper.element);\n    styles += textWrapper.styles;\n\n    container.appendChild(CreateCloseButton({ container: elementContainer }));\n\n    elementContainer.appendChild(container);\n    elementContainer.classList.add(ELEMENT_ALERT_PAGE_DECLARATION);\n\n    return {\n      element: elementContainer,\n      styles,\n    };\n  })();\n"],"names":["token","iconWarning","iconClose","shrinkThenRemove","AlertText"],"mappings":"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"}

package/dist/composite/alert/page.mjs

@@ -1,9 +1,7 @@
-import { token } from "@universityofmaryland/web-styles-library";
-import { NOTIFICATION, CLOSE_BUTTON } from "../../utilities/assets/icons.mjs";
-import "../../node_modules/postcss/lib/postcss.mjs";
-import "../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../node_modules/postcss-js/index.mjs";
-import { shrinkThenRemove } from "../../utilities/theme/animations.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { shrinkThenRemove } from "@universityofmaryland/web-utilities-library/animation";
+import { close } from "@universityofmaryland/web-icons-library/controls";
+import { warning } from "@universityofmaryland/web-icons-library/indicators";
 import { CreateAlertText } from "./elements/text.mjs";
 const MEDUM = 500;
 const ATTRIBUTE_THEME = "theme";
@@ -82,7 +80,7 @@ const STYLES_ALERT_PAGE_ELEMENT = `
 `;
 const CreateIcon = () => {
   const iconWrapper = document.createElement("div");
-  let icon = NOTIFICATION;
+  let icon = warning;
   iconWrapper.classList.add(ELEMENT_ALERT_PAGE_ICON);
   iconWrapper.innerHTML = icon;
   return iconWrapper;
@@ -90,7 +88,7 @@ const CreateIcon = () => {
 const CreateCloseButton = ({ container }) => {
   const closeButton = document.createElement("button");
   closeButton.classList.add(ELEMENT_ALERT_PAGE_CLOSE_BUTTON);
-  closeButton.innerHTML = CLOSE_BUTTON;
+  closeButton.innerHTML = close;
   closeButton.setAttribute("aria-label", "Close alert");
   closeButton.addEventListener("click", () => {
     shrinkThenRemove({ container });

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

@@ -1 +1 @@
-{"version":3,"file":"page.mjs","sources":["../../../source/composite/alert/page.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport { CreateAlertText as AlertText, TypeAlertTextProps } from './elements/text';\n\ntype TypeShouldShowProps = {\n  daysToHide?: string;\n};\n\ntype TypeAlertProps = TypeShouldShowProps &\n  TypeAlertTextProps & {\n    isThemeLight?: boolean;\n    isThemeDark?: boolean;\n    isShowIcon?: boolean;\n  };\n\ntype TypeAlertButtonProps = {\n  container: HTMLElement;\n};\n\nconst MEDUM = 500;\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-alert-page';\nconst ELEMENT_ALERT_PAGE_DECLARATION = 'alert-page-declaration';\nconst ELEMENT_ALERT_PAGE_CONTAINER = 'alert-page-container';\nconst ELEMENT_ALERT_PAGE_CLOSE_BUTTON = 'alert-page-close-button';\nconst ELEMENT_ALERT_PAGE_ICON = 'alert-page-icon';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_ALERT_PAGE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_CLOSE_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON}`;\n\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_CLOSE_BUTTON} rect {\n    fill: ${token.color.white};\n  }\n`;\n\nconst ButtonStyles = `\n  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {\n    position: absolute;\n    top: ${token.spacing.lg};\n    right: ${token.spacing.lg};\n  }\n\n  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} rect {\n    fill: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {\n      top: ${token.spacing.sm};\n      right: ${token.spacing.sm};\n    }\n  }\n`;\n\nconst IconStyles = `\n  .${ELEMENT_ALERT_PAGE_ICON} {\n    display: block;\n    fill: ${token.color.gold};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_ICON} {\n      position: absolute;\n      top: -20px;\n    }\n  }\n`;\n\nconst STYLES_ALERT_PAGE_ELEMENT = `\n  .${ELEMENT_ALERT_PAGE_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_ALERT_PAGE_CONTAINER} {\n    display: flex;\n    position: relative;\n    padding: ${token.spacing.lg};\n    padding-right: ${token.spacing['2xl']};\n    gap: ${token.spacing.lg};\n    border: solid 4px ${token.color.gold};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_CONTAINER} {\n      padding-right: ${token.spacing.lg};\n    }\n  }\n\n  ${IconStyles}\n  ${ButtonStyles}\n  ${OverwriteThemeStyles}\n`;\n\nconst CreateIcon = () => {\n  const iconWrapper = document.createElement('div');\n  let icon = Utility.asset.icon.NOTIFICATION;\n\n  iconWrapper.classList.add(ELEMENT_ALERT_PAGE_ICON);\n  iconWrapper.innerHTML = icon;\n\n  return iconWrapper;\n};\n\nconst CreateCloseButton = ({ container }: TypeAlertButtonProps) => {\n  const closeButton = document.createElement('button');\n\n  closeButton.classList.add(ELEMENT_ALERT_PAGE_CLOSE_BUTTON);\n  closeButton.innerHTML = Utility.asset.icon.CLOSE_BUTTON;\n  closeButton.setAttribute('aria-label', 'Close alert');\n  closeButton.addEventListener('click', () => {\n    Utility.theme.animations.shrinkThenRemove({ container });\n  });\n\n  return closeButton;\n};\n\nexport const CreateAlertPageElement = (props: TypeAlertProps) =>\n  (() => {\n    const { isShowIcon = true, isThemeDark, isThemeLight } = props;\n    const elementContainer = document.createElement('div');\n    const container = document.createElement('div');\n    const textWrapper = AlertText(props);\n    let styles = STYLES_ALERT_PAGE_ELEMENT;\n\n    container.classList.add(ELEMENT_ALERT_PAGE_CONTAINER);\n    if (isShowIcon) container.appendChild(CreateIcon());\n    if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, 'light');\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, 'dark');\n\n    container.appendChild(textWrapper.element);\n    styles += textWrapper.styles;\n\n    container.appendChild(CreateCloseButton({ container: elementContainer }));\n\n    elementContainer.appendChild(container);\n    elementContainer.classList.add(ELEMENT_ALERT_PAGE_DECLARATION);\n\n    return {\n      element: elementContainer,\n      styles,\n    };\n  })();\n"],"names":["Utility.asset.icon.NOTIFICATION","Utility.asset.icon.CLOSE_BUTTON","Utility.theme.animations.shrinkThenRemove","AlertText"],"mappings":"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"}
+{"version":3,"file":"page.mjs","sources":["../../../source/composite/alert/page.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { shrinkThenRemove } from '@universityofmaryland/web-utilities-library/animation';\nimport { close as iconClose } from '@universityofmaryland/web-icons-library/controls';\nimport { warning as iconWarning } from '@universityofmaryland/web-icons-library/indicators';\nimport {\n  CreateAlertText as AlertText,\n  TypeAlertTextProps,\n} from './elements/text';\n\ntype TypeShouldShowProps = {\n  daysToHide?: string;\n};\n\ntype TypeAlertProps = TypeShouldShowProps &\n  TypeAlertTextProps & {\n    isThemeLight?: boolean;\n    isThemeDark?: boolean;\n    isShowIcon?: boolean;\n  };\n\ntype TypeAlertButtonProps = {\n  container: HTMLElement;\n};\n\nconst MEDUM = 500;\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-alert-page';\nconst ELEMENT_ALERT_PAGE_DECLARATION = 'alert-page-declaration';\nconst ELEMENT_ALERT_PAGE_CONTAINER = 'alert-page-container';\nconst ELEMENT_ALERT_PAGE_CLOSE_BUTTON = 'alert-page-close-button';\nconst ELEMENT_ALERT_PAGE_ICON = 'alert-page-icon';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_ALERT_PAGE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_CLOSE_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON}`;\n\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_CLOSE_BUTTON} rect {\n    fill: ${token.color.white};\n  }\n`;\n\nconst ButtonStyles = `\n  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {\n    position: absolute;\n    top: ${token.spacing.lg};\n    right: ${token.spacing.lg};\n  }\n\n  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} rect {\n    fill: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {\n      top: ${token.spacing.sm};\n      right: ${token.spacing.sm};\n    }\n  }\n`;\n\nconst IconStyles = `\n  .${ELEMENT_ALERT_PAGE_ICON} {\n    display: block;\n    fill: ${token.color.gold};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_ICON} {\n      position: absolute;\n      top: -20px;\n    }\n  }\n`;\n\nconst STYLES_ALERT_PAGE_ELEMENT = `\n  .${ELEMENT_ALERT_PAGE_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_ALERT_PAGE_CONTAINER} {\n    display: flex;\n    position: relative;\n    padding: ${token.spacing.lg};\n    padding-right: ${token.spacing['2xl']};\n    gap: ${token.spacing.lg};\n    border: solid 4px ${token.color.gold};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {\n    .${ELEMENT_ALERT_PAGE_CONTAINER} {\n      padding-right: ${token.spacing.lg};\n    }\n  }\n\n  ${IconStyles}\n  ${ButtonStyles}\n  ${OverwriteThemeStyles}\n`;\n\nconst CreateIcon = () => {\n  const iconWrapper = document.createElement('div');\n  let icon = iconWarning;\n\n  iconWrapper.classList.add(ELEMENT_ALERT_PAGE_ICON);\n  iconWrapper.innerHTML = icon;\n\n  return iconWrapper;\n};\n\nconst CreateCloseButton = ({ container }: TypeAlertButtonProps) => {\n  const closeButton = document.createElement('button');\n\n  closeButton.classList.add(ELEMENT_ALERT_PAGE_CLOSE_BUTTON);\n  closeButton.innerHTML = iconClose;\n  closeButton.setAttribute('aria-label', 'Close alert');\n  closeButton.addEventListener('click', () => {\n    shrinkThenRemove({ container });\n  });\n\n  return closeButton;\n};\n\nexport const CreateAlertPageElement = (props: TypeAlertProps) =>\n  (() => {\n    const { isShowIcon = true, isThemeDark, isThemeLight } = props;\n    const elementContainer = document.createElement('div');\n    const container = document.createElement('div');\n    const textWrapper = AlertText(props);\n    let styles = STYLES_ALERT_PAGE_ELEMENT;\n\n    container.classList.add(ELEMENT_ALERT_PAGE_CONTAINER);\n    if (isShowIcon) container.appendChild(CreateIcon());\n    if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, 'light');\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, 'dark');\n\n    container.appendChild(textWrapper.element);\n    styles += textWrapper.styles;\n\n    container.appendChild(CreateCloseButton({ container: elementContainer }));\n\n    elementContainer.appendChild(container);\n    elementContainer.classList.add(ELEMENT_ALERT_PAGE_DECLARATION);\n\n    return {\n      element: elementContainer,\n      styles,\n    };\n  })();\n"],"names":["iconWarning","iconClose","AlertText"],"mappings":"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"}

package/dist/composite/alert/site.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"site.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/site.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,KAAK,mBAAmB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,cAAc,GAAG,mBAAmB,GACvC,kBAAkB,GAAG;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAsHJ,eAAO,MAAM,sBAAsB,GAAI,OAAO,cAAc;;;CA2BtD,CAAC"}
+{"version":3,"file":"site.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/site.ts"],"names":[],"mappings":"AASA,OAAO,EAGL,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,KAAK,mBAAmB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,cAAc,GAAG,mBAAmB,GACvC,kBAAkB,GAAG;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAsHJ,eAAO,MAAM,sBAAsB,GAAI,OAAO,cAAc;;;CA2BtD,CAAC"}

package/dist/composite/alert/site.js

@@ -1,11 +1,30 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Styles = require("@universityofmaryland/web-styles-library");
-const icons = require("../../utilities/assets/icons.js");
-const local = require("../../utilities/storage/local.js");
-const index = require("../../utilities/theme/index.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const layout = require("@universityofmaryland/web-styles-library/layout");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
+const animation = require("@universityofmaryland/web-utilities-library/animation");
+const storage = require("@universityofmaryland/web-utilities-library/storage");
+const controls = require("@universityofmaryland/web-icons-library/controls");
 const text = require("./elements/text.js");
-const animations = require("../../utilities/theme/animations.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 layout__namespace = /* @__PURE__ */ _interopNamespaceDefault(layout);
 const MEDUM = 500;
 const DEFAULT_HIDE_TIME = 30;
 const ALERT_LOCAL_STORAGE_KEY = "umd-alert-site-time";
@@ -18,33 +37,33 @@ const OVERWRITE_TEXT_WRAPPER = `.${ELEMENT_ALERT_SITE_CONTAINER} .${text.CONSTAN
 const OVERWRITE_TEXT_BODY = `.${ELEMENT_ALERT_SITE_CONTAINER} .${text.CONSTANTS.className.wrapper}`;
 const OverwriteText = `
   ${OVERWRITE_TEXT_WRAPPER} {
-    max-width: ${Styles.token.spacing.maxWidth.large};
+    max-width: ${token__namespace.spacing.maxWidth.large};
   }
 
   ${OVERWRITE_TEXT_BODY},
   ${OVERWRITE_TEXT_BODY} * {
-    color: ${Styles.token.color.black};
-    max-width: ${Styles.token.spacing.maxWidth.large};
+    color: ${token__namespace.color.black};
+    max-width: ${token__namespace.spacing.maxWidth.large};
   }
 `;
 const ButtonStyles = `
   .${ELEMENT_ALERT_SITE_CLOSE_BUTTON} {
     position: absolute;
-    top: ${Styles.token.spacing.lg};
-    right: ${Styles.token.spacing.lg};
+    top: ${token__namespace.spacing.lg};
+    right: ${token__namespace.spacing.lg};
   }
 
   @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {
     .${ELEMENT_ALERT_SITE_CLOSE_BUTTON} {
-      top: ${Styles.token.spacing.sm};
-      right: ${Styles.token.spacing.sm};
+      top: ${token__namespace.spacing.sm};
+      right: ${token__namespace.spacing.sm};
     }
   }
 `;
 const LockStyles = `
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
-    [`.${ELEMENT_ALERT_SITE_LOCK}`]: Styles.layout.space.horizontal.larger
+    [`.${ELEMENT_ALERT_SITE_LOCK}`]: layout__namespace.space.horizontal.larger
   }
 })}
 
@@ -60,16 +79,16 @@ const STYLES_ALERT_SITE_ELEMENT = `
   .${ELEMENT_ALERT_SITE_CONTAINER} {
     display: flex;
     position: relative;
-    padding: ${Styles.token.spacing.lg} 0;
-    gap: ${Styles.token.spacing.lg};
-    background-color: ${Styles.token.color.gold};
-    border-left: 4px solid ${Styles.token.color.red};
+    padding: ${token__namespace.spacing.lg} 0;
+    gap: ${token__namespace.spacing.lg};
+    background-color: ${token__namespace.color.gold};
+    border-left: 4px solid ${token__namespace.color.red};
   }
 
   @container ${ELEMENT_NAME} (min-width: ${MEDUM}px) {
     .${ELEMENT_ALERT_SITE_CONTAINER} {
-      border-left: 8px solid ${Styles.token.color.red};
-      padding-right: ${Styles.token.spacing["2xl"]};
+      border-left: 8px solid ${token__namespace.color.red};
+      padding-right: ${token__namespace.spacing["2xl"]};
     }
   }
 
@@ -81,18 +100,18 @@ const STYLES_ALERT_SITE_ELEMENT = `
 const CreateCloseButton = ({ container }) => {
   const closeButton = document.createElement("button");
   closeButton.classList.add(ELEMENT_ALERT_SITE_CLOSE_BUTTON);
-  closeButton.innerHTML = icons.CLOSE_BUTTON;
+  closeButton.innerHTML = controls.close;
   closeButton.setAttribute("aria-label", "Close alert");
   closeButton.addEventListener("click", () => {
-    animations.shrinkThenRemove({ container });
-    local.set({ key: ALERT_LOCAL_STORAGE_KEY });
+    animation.shrinkThenRemove({ container });
+    storage.setLocalStorageTimestamp({ key: ALERT_LOCAL_STORAGE_KEY });
   });
   return closeButton;
 };
 const ShouldShow = ({ daysToHide }) => {
   const now = (/* @__PURE__ */ new Date()).getTime();
   const millisecondsPerDay = 24 * 60 * 60 * 1e3;
-  const lastClosedTime = local.get({
+  const lastClosedTime = storage.getLocalStorageInt({
     key: ALERT_LOCAL_STORAGE_KEY
   });
   if (!lastClosedTime) return false;
@@ -107,11 +126,11 @@ const CreateAlertSiteElement = (props) => (() => {
   const lock = document.createElement("div");
   const textWrapper = text.CreateAlertText(props);
   const shouldHide = ShouldShow(props);
-  let styles = STYLES_ALERT_SITE_ELEMENT;
+  let styles2 = STYLES_ALERT_SITE_ELEMENT;
   if (shouldHide) container.style.display = "none";
   lock.classList.add(ELEMENT_ALERT_SITE_LOCK);
   lock.appendChild(textWrapper.element);
-  styles += textWrapper.styles;
+  styles2 += textWrapper.styles;
   container.classList.add(ELEMENT_ALERT_SITE_CONTAINER);
   container.appendChild(lock);
   container.appendChild(CreateCloseButton({ container: elementContainer }));
@@ -119,7 +138,7 @@ const CreateAlertSiteElement = (props) => (() => {
   elementContainer.classList.add(ELEMENT_ALERT_SITE_DECLARATION);
   return {
     element: elementContainer,
-    styles
+    styles: styles2
   };
 })();
 exports.CreateAlertSiteElement = CreateAlertSiteElement;

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

@@ -1 +1 @@
-{"version":3,"file":"site.js","sources":["../../../source/composite/alert/site.ts"],"sourcesContent":["import { token, layout } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\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  ${Utility.theme.convertJSSObjectToStyles({\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 = Utility.asset.icon.CLOSE_BUTTON;\n  closeButton.setAttribute('aria-label', 'Close alert');\n  closeButton.addEventListener('click', () => {\n    Utility.theme.animations.shrinkThenRemove({ container });\n    Utility.storage.local.set({ 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 = Utility.storage.local.get({\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","token","Utility.theme.convertJSSObjectToStyles","layout","Utility.asset.icon.CLOSE_BUTTON","Utility.theme.animations.shrinkThenRemove","Utility.storage.local.set","Utility.storage.local.get","AlertText"],"mappings":"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"}
+{"version":3,"file":"site.js","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","token","jssToCSS","layout","iconClose","shrinkThenRemove","setLocalStorageTimestamp","getLocalStorageInt","AlertText","styles"],"mappings":"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"}

package/dist/composite/alert/site.mjs

@@ -1,9 +1,10 @@
-import { token, layout } from "@universityofmaryland/web-styles-library";
-import { CLOSE_BUTTON } from "../../utilities/assets/icons.mjs";
-import { get, set } from "../../utilities/storage/local.mjs";
-import { convertJSSObjectToStyles } from "../../utilities/theme/index.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+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";
-import { shrinkThenRemove } from "../../utilities/theme/animations.mjs";
 const MEDUM = 500;
 const DEFAULT_HIDE_TIME = 30;
 const ALERT_LOCAL_STORAGE_KEY = "umd-alert-site-time";
@@ -40,7 +41,7 @@ const ButtonStyles = `
   }
 `;
 const LockStyles = `
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`.${ELEMENT_ALERT_SITE_LOCK}`]: layout.space.horizontal.larger
   }
@@ -79,18 +80,18 @@ const STYLES_ALERT_SITE_ELEMENT = `
 const CreateCloseButton = ({ container }) => {
   const closeButton = document.createElement("button");
   closeButton.classList.add(ELEMENT_ALERT_SITE_CLOSE_BUTTON);
-  closeButton.innerHTML = CLOSE_BUTTON;
+  closeButton.innerHTML = close;
   closeButton.setAttribute("aria-label", "Close alert");
   closeButton.addEventListener("click", () => {
     shrinkThenRemove({ container });
-    set({ key: ALERT_LOCAL_STORAGE_KEY });
+    setLocalStorageTimestamp({ key: ALERT_LOCAL_STORAGE_KEY });
   });
   return closeButton;
 };
 const ShouldShow = ({ daysToHide }) => {
   const now = (/* @__PURE__ */ new Date()).getTime();
   const millisecondsPerDay = 24 * 60 * 60 * 1e3;
-  const lastClosedTime = get({
+  const lastClosedTime = getLocalStorageInt({
     key: ALERT_LOCAL_STORAGE_KEY
   });
   if (!lastClosedTime) return false;

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

@@ -1 +1 @@
-{"version":3,"file":"site.mjs","sources":["../../../source/composite/alert/site.ts"],"sourcesContent":["import { token, layout } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\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  ${Utility.theme.convertJSSObjectToStyles({\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 = Utility.asset.icon.CLOSE_BUTTON;\n  closeButton.setAttribute('aria-label', 'Close alert');\n  closeButton.addEventListener('click', () => {\n    Utility.theme.animations.shrinkThenRemove({ container });\n    Utility.storage.local.set({ 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 = Utility.storage.local.get({\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","Utility.theme.convertJSSObjectToStyles","Utility.asset.icon.CLOSE_BUTTON","Utility.theme.animations.shrinkThenRemove","Utility.storage.local.set","Utility.storage.local.get","AlertText"],"mappings":"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"}
+{"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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"}

package/dist/composite/banner/promo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"promo.d.ts","sourceRoot":"","sources":["../../../source/composite/banner/promo.ts"],"names":[],"mappings":"AAQA,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAyLF,QAAA,MAAM,wBAAwB,GAAI,OAAO,oBAAoB;;;CAgCvD,CAAC;AAEP,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"promo.d.ts","sourceRoot":"","sources":["../../../source/composite/banner/promo.ts"],"names":[],"mappings":"AASA,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAyLF,QAAA,MAAM,wBAAwB,GAAI,OAAO,oBAAoB;;;CA8BvD,CAAC;AAEP,eAAe,wBAAwB,CAAC"}

package/dist/composite/banner/promo.js

@@ -1,7 +1,7 @@
 "use strict";
 const Styles = require("@universityofmaryland/web-styles-library");
-const logos = require("../../utilities/assets/logos.js");
-const index = require("../../utilities/theme/index.js");
+const Logos = require("@universityofmaryland/web-icons-library/logos");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
 const SMALL = 650;
 const ATTRIBUTE_THEME = "theme";
 const THEME_DARK = "dark";
@@ -30,7 +30,7 @@ const OverwriteThemeDark = `
     color: ${Styles.token.color.white};
   }
 
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
     [`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: Styles.element.text.rich.advancedDark
   }
@@ -55,13 +55,13 @@ const ActionsStyles = `
   }
 `;
 const TextStyles = `
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
     [`.${ELEMENT_RICH_TEXT}`]: Styles.element.text.rich.advanced
   }
 })}
 
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
     [`.${ELEMENT_RICH_TEXT} a`]: Styles.animation.line.fadeUnderRed
   }
@@ -76,7 +76,7 @@ const TextStyles = `
   }
 `;
 const HeadlineStyles = `
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
     [`.${ELEMENT_HEADLINE}`]: Styles.typography.sans.extraLarge
   }
@@ -175,8 +175,7 @@ const CreateBannerPromoElement = (props) => (() => {
     wrapper.appendChild(actions);
   }
   if (includeSeal) {
-    let seal = logos.SEAL_WHITE;
-    container.innerHTML = `${seal}`;
+    container.innerHTML = `${Logos.seal}`;
   }
   if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
   container.classList.add(ELEMENT_CONTAINER);

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 * as Utility from 'utilities';\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  ${Utility.theme.convertJSSObjectToStyles({\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  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_RICH_TEXT}`]: element.text.rich.advanced,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\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  ${Utility.theme.convertJSSObjectToStyles({\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} > svg {\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} > svg {\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      let seal = Utility.asset.logo.SEAL_WHITE;\n\n      container.innerHTML = `${seal}`;\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","Utility.theme.convertJSSObjectToStyles","element","animation","typography","Utility.asset.logo.SEAL_WHITE"],"mappings":";;;;AAgBA,MAAM,QAAQ;AAEd,MAAM,kBAAkB;AACxB,MAAM,aAAa;AAEnB,MAAM,gBAAgB,IAAI,eAAe,KAAK,UAAU;AAExD,MAAM,eAAe;AACrB,MAAM,sBAAsB;AAC5B,MAAM,oBAAoB;AAC1B,MAAM,kBAAkB;AACxB,MAAM,yBAAyB;AAC/B,MAAM,mBAAmB;AACzB,MAAM,oBAAoB;AAC1B,MAAM,kBAAkB;AAExB,MAAM,iCAAiC,IAAI,iBAAiB,GAAG,aAAa;AAC5E,MAAM,gCAAgC,IAAI,iBAAiB,GAAG,aAAa,KAAK,gBAAgB;AAChG,MAAM,iCAAiC,IAAI,iBAAiB,GAAG,aAAa,KAAK,iBAAiB;AAGlG,MAAM,qBAAqB;AAAA,IACvB,8BAA8B;AAAA,wBACVA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAGrC,8BAA8B;AAAA,YACtBA,aAAM,MAAM,KAAK,MAAM;AAAA;AAAA;AAAA,IAG/B,6BAA6B;AAAA,aACpBA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG1BC,+BAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,GAAG,8BAA8B,EAAE,GAAGC,OAAAA,QAAQ,KAAK,KAAK;AAAA,EAAA;AAE7D,CAAC,CAAC;AAAA;AAAA,IAEA,8BAA8B;AAAA,aACrBF,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAK9B,MAAM,gBAAgB;AAAA,eACP,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,eAAe;AAAA,oBACFA,OAAAA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,eAIrB,YAAY,gBAAgB,KAAK;AAAA,OACzC,eAAe;AAAA;AAAA,qBAEDA,OAAAA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMrC,MAAM,aAAa;AAAA,IACfC,+BAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,IAAI,iBAAiB,EAAE,GAAGC,OAAAA,QAAQ,KAAK,KAAK;AAAA,EAAA;AAEjD,CAAC,CAAC;AAAA;AAAA,IAEAD,+BAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,IAAI,iBAAiB,IAAI,GAAGE,OAAAA,UAAU,KAAK;AAAA,EAAA;AAEhD,CAAC,CAAC;AAAA;AAAA,KAEC,iBAAiB;AAAA,kBACJH,OAAAA,MAAM,QAAQ,GAAG;AAAA;AAAA;AAAA,KAG9B,iBAAiB;AAAA,aACTA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAK9B,MAAM,iBAAiB;AAAA,IACnBC,+BAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,IAAI,gBAAgB,EAAE,GAAGG,OAAAA,WAAW,KAAK;AAAA,EAAA;AAE9C,CAAC,CAAC;AAAA;AAAA,KAEC,gBAAgB;AAAA;AAAA,aAERJ,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAM9B,MAAM,sBAAsB;AAAA,eACb,YAAY,gBAAgB,KAAK;AAAA,OACzC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAO7B,MAAM,gBAAgB;AAAA,KACjB,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,eAKL,YAAY,gBAAgB,KAAK;AAAA,OACzC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQtB,MAAM,8BAA8B;AAAA,KAC/B,mBAAmB;AAAA,iBACP,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,KAKxB,iBAAiB;AAAA,eACPA,OAAAA,MAAM,QAAQ,EAAE,IAAIA,OAAAA,MAAM,QAAQ,EAAE;AAAA,wBAC3BA,OAAAA,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA,eAGzB,YAAY,gBAAgB,KAAK;AAAA,OACzC,iBAAiB;AAAA,iBACPA,OAAAA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,KAI5B,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQP,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpB,aAAa;AAAA,IACb,mBAAmB;AAAA,IACnB,cAAc;AAAA,IACd,UAAU;AAAA,IACV,aAAa;AAAA,IACb,kBAAkB;AAAA;AAGtB,MAAM,sBAAsB,CAAC,UAAgC;AAC3D,QAAM,EAAE,UAAU,KAAA,IAAS;AAC3B,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,YAAU,UAAU,IAAI,sBAAsB;AAE9C,MAAI,UAAU;AACZ,aAAS,UAAU,IAAI,gBAAgB;AACvC,cAAU,YAAY,QAAQ;AAAA,EAChC;AAEA,MAAI,MAAM;AACR,SAAK,UAAU,IAAI,iBAAiB;AACpC,cAAU,YAAY,IAAI;AAAA,EAC5B;AAEA,SAAO;AACT;AAEA,MAAM,2BAA2B,CAAC,WAC/B,MAAM;AACL,QAAM,EAAE,aAAa,cAAc,OAAO,YAAY;AACtD,QAAM,cAAc,SAAS,cAAc,KAAK;AAChD,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,QAAM,gBAAgB,oBAAoB,KAAK;AAE/C,UAAQ,UAAU,IAAI,eAAe;AACrC,UAAQ,YAAY,aAAa;AAEjC,MAAI,SAAS;AACX,YAAQ,UAAU,IAAI,eAAe;AACrC,YAAQ,YAAY,OAAO;AAAA,EAC7B;AAEA,MAAI,aAAa;AACf,QAAI,OAAOK,MAAAA;AAEX,cAAU,YAAY,GAAG,IAAI;AAAA,EAC/B;AACA,MAAI,YAAa,WAAU,aAAa,iBAAiB,UAAU;AACnE,YAAU,UAAU,IAAI,iBAAiB;AACzC,YAAU,YAAY,OAAO;AAE7B,cAAY,UAAU,IAAI,mBAAmB;AAC7C,cAAY,YAAY,SAAS;AAEjC,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA;AAEZ,GAAA;;"}
+{"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 } from '@universityofmaryland/web-icons-library/logos';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\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} > svg {\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} > svg {\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      container.innerHTML = `${seal}`;\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","seal"],"mappings":"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"}