@universityofmaryland/web-elements-library 1.5.2 → 1.5.5

package/dist/composite/alert/page.mjs

@@ -1,121 +1,53 @@
-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 { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
 import { warning } from "@universityofmaryland/web-icons-library/indicators";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
 import { CreateAlertText } from "./elements/text.mjs";
-const MEDUM = 500;
-const ATTRIBUTE_THEME = "theme";
-const THEME_DARK = "dark";
-const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${THEME_DARK}"]`;
-const ELEMENT_NAME = "umd-element-alert-page";
-const ELEMENT_ALERT_PAGE_DECLARATION = "alert-page-declaration";
-const ELEMENT_ALERT_PAGE_CONTAINER = "alert-page-container";
-const ELEMENT_ALERT_PAGE_CLOSE_BUTTON = "alert-page-close-button";
-const ELEMENT_ALERT_PAGE_ICON = "alert-page-icon";
-const OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_ALERT_PAGE_CONTAINER}${IS_THEME_DARK}`;
-const OVERWRITE_THEME_DARK_CLOSE_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON}`;
-const OverwriteThemeStyles = `
-  ${OVERWRITE_THEME_DARK_CONTAINER} * {
-    color: ${token.color.white};
-  }
-
-  ${OVERWRITE_THEME_DARK_CLOSE_BUTTON} rect {
-    fill: ${token.color.white};
-  }
-`;
-const ButtonStyles = `
-  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {
-    position: absolute;
-    top: ${token.spacing.lg};
-    right: ${token.spacing.lg};
-  }
-
-  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} rect {
-    fill: ${token.color.black};
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {
-    .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {
-      top: ${token.spacing.sm};
-      right: ${token.spacing.sm};
-    }
-  }
-`;
-const IconStyles = `
-  .${ELEMENT_ALERT_PAGE_ICON} {
-    display: block;
-    fill: ${token.color.gold};
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {
-    .${ELEMENT_ALERT_PAGE_ICON} {
-      position: absolute;
-      top: -20px;
+import { CreateCloseButton } from "./elements/closeButton.mjs";
+import { BREAKPOINTS } from "./globals.mjs";
+const { MEDIUM } = BREAKPOINTS;
+const createIcon = (iconMarkup) => new ElementBuilder().withClassName("alert-page-icon").withHTML(iconMarkup).withStyles({
+  element: {
+    display: "block",
+    fill: token.color.gold,
+    [`@container (max-width: ${MEDIUM}px)`]: {
+      position: "absolute",
+      top: "-20px"
     }
   }
-`;
-const STYLES_ALERT_PAGE_ELEMENT = `
-  .${ELEMENT_ALERT_PAGE_DECLARATION} {
-    container: ${ELEMENT_NAME} / inline-size;
-  }
-
-  .${ELEMENT_ALERT_PAGE_CONTAINER} {
-    display: flex;
-    position: relative;
-    padding: ${token.spacing.lg};
-    padding-right: ${token.spacing["2xl"]};
-    gap: ${token.spacing.lg};
-    border: solid 4px ${token.color.gold};
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {
-    .${ELEMENT_ALERT_PAGE_CONTAINER} {
-      padding-right: ${token.spacing.lg};
-    }
-  }
-
-  ${IconStyles}
-  ${ButtonStyles}
-  ${OverwriteThemeStyles}
-`;
-const CreateIcon = () => {
-  const iconWrapper = document.createElement("div");
-  let icon = warning;
-  iconWrapper.classList.add(ELEMENT_ALERT_PAGE_ICON);
-  iconWrapper.innerHTML = icon;
-  return iconWrapper;
-};
-const CreateCloseButton = ({ container }) => {
-  const closeButton = document.createElement("button");
-  closeButton.classList.add(ELEMENT_ALERT_PAGE_CLOSE_BUTTON);
-  closeButton.innerHTML = close;
-  closeButton.setAttribute("aria-label", "Close alert");
-  closeButton.addEventListener("click", () => {
-    shrinkThenRemove({ container });
+}).build();
+const createContainer = (props) => {
+  const { isShowIcon = true, isThemeDark } = props;
+  const textModel = CreateAlertText(props);
+  const iconModel = isShowIcon ? createIcon(warning) : null;
+  const closeButtonModel = CreateCloseButton({
+    isThemeDark: !!isThemeDark,
+    targetSelector: ".alert-page-declaration"
   });
-  return closeButton;
+  const children = [iconModel, textModel, closeButtonModel].filter(
+    Boolean
+  );
+  return new ElementBuilder().withClassName("alert-page-container").withChildren(...children).withStyles({
+    element: {
+      color: theme.foreground(isThemeDark),
+      display: "flex",
+      position: "relative",
+      padding: token.spacing.lg,
+      paddingRight: token.spacing["2xl"],
+      gap: token.spacing.lg,
+      border: `solid 4px ${token.color.gold}`,
+      [`@container (max-width: ${MEDIUM}px)`]: {
+        paddingRight: token.spacing.lg
+      }
+    }
+  }).build();
 };
-const CreateAlertPageElement = (props) => (() => {
-  const { isShowIcon = true, isThemeDark, isThemeLight } = props;
-  const elementContainer = document.createElement("div");
-  const container = document.createElement("div");
-  const textWrapper = CreateAlertText(props);
-  let styles = STYLES_ALERT_PAGE_ELEMENT;
-  container.classList.add(ELEMENT_ALERT_PAGE_CONTAINER);
-  if (isShowIcon) container.appendChild(CreateIcon());
-  if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, "light");
-  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, "dark");
-  container.appendChild(textWrapper.element);
-  styles += textWrapper.styles;
-  container.appendChild(CreateCloseButton({ container: elementContainer }));
-  elementContainer.appendChild(container);
-  elementContainer.classList.add(ELEMENT_ALERT_PAGE_DECLARATION);
-  return {
-    element: elementContainer,
-    styles
-  };
-})();
+const page = (props) => new ElementBuilder().withClassName("alert-page-declaration").withChild(createContainer(props)).withStyles({
+  element: {
+    containerType: "inline-size"
+  }
+}).build();
 export {
-  CreateAlertPageElement
+  page as default
 };
 //# sourceMappingURL=page.mjs.map

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

@@ -1 +1 @@
-{"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":";;;;;AAwBA,MAAM,QAAQ;AACd,MAAM,kBAAkB;AACxB,MAAM,aAAa;AAEnB,MAAM,gBAAgB,IAAI,eAAe,KAAK,UAAU;AAExD,MAAM,eAAe;AACrB,MAAM,iCAAiC;AACvC,MAAM,+BAA+B;AACrC,MAAM,kCAAkC;AACxC,MAAM,0BAA0B;AAEhC,MAAM,iCAAiC,IAAI,4BAA4B,GAAG,aAAa;AACvF,MAAM,oCAAoC,GAAG,8BAA8B,KAAK,+BAA+B;AAE/G,MAAM,uBAAuB;AAAA,IACzB,8BAA8B;AAAA,aACrB,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG1B,iCAAiC;AAAA,YACzB,MAAM,MAAM,KAAK;AAAA;AAAA;AAI7B,MAAM,eAAe;AAAA,KAChB,+BAA+B;AAAA;AAAA,WAEzB,MAAM,QAAQ,EAAE;AAAA,aACd,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,KAGxB,+BAA+B;AAAA,YACxB,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,eAGd,YAAY,gBAAgB,KAAK;AAAA,OACzC,+BAA+B;AAAA,aACzB,MAAM,QAAQ,EAAE;AAAA,eACd,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAK/B,MAAM,aAAa;AAAA,KACd,uBAAuB;AAAA;AAAA,YAEhB,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA,eAGb,YAAY,gBAAgB,KAAK;AAAA,OACzC,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9B,MAAM,4BAA4B;AAAA,KAC7B,8BAA8B;AAAA,iBAClB,YAAY;AAAA;AAAA;AAAA,KAGxB,4BAA4B;AAAA;AAAA;AAAA,eAGlB,MAAM,QAAQ,EAAE;AAAA,qBACV,MAAM,QAAQ,KAAK,CAAC;AAAA,WAC9B,MAAM,QAAQ,EAAE;AAAA,wBACH,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA,eAGzB,YAAY,gBAAgB,KAAK;AAAA,OACzC,4BAA4B;AAAA,uBACZ,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,IAInC,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,oBAAoB;AAAA;AAGxB,MAAM,aAAa,MAAM;AACvB,QAAM,cAAc,SAAS,cAAc,KAAK;AAChD,MAAI,OAAOA;AAEX,cAAY,UAAU,IAAI,uBAAuB;AACjD,cAAY,YAAY;AAExB,SAAO;AACT;AAEA,MAAM,oBAAoB,CAAC,EAAE,gBAAsC;AACjE,QAAM,cAAc,SAAS,cAAc,QAAQ;AAEnD,cAAY,UAAU,IAAI,+BAA+B;AACzD,cAAY,YAAYC;AACxB,cAAY,aAAa,cAAc,aAAa;AACpD,cAAY,iBAAiB,SAAS,MAAM;AAC1C,qBAAiB,EAAE,WAAW;AAAA,EAChC,CAAC;AAED,SAAO;AACT;AAEO,MAAM,yBAAyB,CAAC,WACpC,MAAM;AACL,QAAM,EAAE,aAAa,MAAM,aAAa,iBAAiB;AACzD,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,cAAcC,gBAAU,KAAK;AACnC,MAAI,SAAS;AAEb,YAAU,UAAU,IAAI,4BAA4B;AACpD,MAAI,WAAY,WAAU,YAAY,WAAA,CAAY;AAClD,MAAI,aAAc,WAAU,aAAa,iBAAiB,OAAO;AACjE,MAAI,YAAa,WAAU,aAAa,iBAAiB,MAAM;AAE/D,YAAU,YAAY,YAAY,OAAO;AACzC,YAAU,YAAY;AAEtB,YAAU,YAAY,kBAAkB,EAAE,WAAW,iBAAA,CAAkB,CAAC;AAExE,mBAAiB,YAAY,SAAS;AACtC,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL,SAAS;AAAA,IACT;AAAA,EAAA;AAEJ,GAAA;"}
+{"version":3,"file":"page.mjs","sources":["../../../source/composite/alert/page.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { warning as iconWarning } from '@universityofmaryland/web-icons-library/indicators';\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 AlertPageProps extends AlertTextProps {\n  isThemeLight?: boolean;\n  isShowIcon?: boolean;\n}\n\nconst { MEDIUM } = BREAKPOINTS;\n\nconst createIcon = (iconMarkup: string) =>\n  new ElementBuilder()\n    .withClassName('alert-page-icon')\n    .withHTML(iconMarkup)\n    .withStyles({\n      element: {\n        display: 'block',\n        fill: token.color.gold,\n\n        [`@container (max-width: ${MEDIUM}px)`]: {\n          position: 'absolute',\n          top: '-20px',\n        },\n      },\n    })\n    .build();\n\nconst createContainer = (\n  props: Pick<\n    AlertPageProps,\n    | 'isShowIcon'\n    | 'isThemeDark'\n    | 'isThemeLight'\n    | 'headline'\n    | 'text'\n    | 'actions'\n  >,\n) => {\n  const { isShowIcon = true, isThemeDark } = props;\n\n  const textModel = AlertText(props);\n  const iconModel = isShowIcon ? createIcon(iconWarning) : null;\n  const closeButtonModel = CreateCloseButton({\n    isThemeDark: !!isThemeDark,\n    targetSelector: '.alert-page-declaration',\n  });\n\n  const children = [iconModel, textModel, closeButtonModel].filter(\n    Boolean,\n  ) as ElementModel[];\n\n  return new ElementBuilder()\n    .withClassName('alert-page-container')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        color: theme.foreground(isThemeDark),\n        display: 'flex',\n        position: 'relative',\n        padding: token.spacing.lg,\n        paddingRight: token.spacing['2xl'],\n        gap: token.spacing.lg,\n        border: `solid 4px ${token.color.gold}`,\n\n        [`@container (max-width: ${MEDIUM}px)`]: {\n          paddingRight: token.spacing.lg,\n        },\n      },\n    })\n    .build();\n};\n\nexport default (props: AlertPageProps) =>\n  new ElementBuilder()\n    .withClassName('alert-page-declaration')\n    .withChild(createContainer(props))\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n"],"names":["AlertText","iconWarning"],"mappings":";;;;;;;AAcA,MAAM,EAAE,WAAW;AAEnB,MAAM,aAAa,CAAC,eAClB,IAAI,iBACD,cAAc,iBAAiB,EAC/B,SAAS,UAAU,EACnB,WAAW;AAAA,EACV,SAAS;AAAA,IACP,SAAS;AAAA,IACT,MAAM,MAAM,MAAM;AAAA,IAElB,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,MACvC,UAAU;AAAA,MACV,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ,CAAC,EACA,MAAA;AAEL,MAAM,kBAAkB,CACtB,UASG;AACH,QAAM,EAAE,aAAa,MAAM,YAAA,IAAgB;AAE3C,QAAM,YAAYA,gBAAU,KAAK;AACjC,QAAM,YAAY,aAAa,WAAWC,OAAW,IAAI;AACzD,QAAM,mBAAmB,kBAAkB;AAAA,IACzC,aAAa,CAAC,CAAC;AAAA,IACf,gBAAgB;AAAA,EAAA,CACjB;AAED,QAAM,WAAW,CAAC,WAAW,WAAW,gBAAgB,EAAE;AAAA,IACxD;AAAA,EAAA;AAGF,SAAO,IAAI,eAAA,EACR,cAAc,sBAAsB,EACpC,aAAa,GAAG,QAAQ,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,OAAO,MAAM,WAAW,WAAW;AAAA,MACnC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,SAAS,MAAM,QAAQ;AAAA,MACvB,cAAc,MAAM,QAAQ,KAAK;AAAA,MACjC,KAAK,MAAM,QAAQ;AAAA,MACnB,QAAQ,aAAa,MAAM,MAAM,IAAI;AAAA,MAErC,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,QACvC,cAAc,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC9B;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAA,OAAe,CAAC,UACd,IAAI,eAAA,EACD,cAAc,wBAAwB,EACtC,UAAU,gBAAgB,KAAK,CAAC,EAChC,WAAW;AAAA,EACV,SAAS;AAAA,IACP,eAAe;AAAA,EAAA;AAEnB,CAAC,EACA,MAAA;"}

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

@@ -1,13 +1,7 @@
-import { TypeAlertTextProps } from './elements/text';
-type TypeShouldShowProps = {
+import { AlertTextProps } from './elements/text';
+export interface AlertSiteProps extends AlertTextProps {
     daysToHide?: string;
-};
-type TypeAlertProps = TypeShouldShowProps & TypeAlertTextProps & {
-    isShowIcon?: boolean;
-};
-export declare const CreateAlertSiteElement: (props: TypeAlertProps) => {
-    element: HTMLDivElement;
-    styles: string;
-};
-export {};
+}
+declare const _default: (props: AlertSiteProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export default _default;
 //# sourceMappingURL=site.d.ts.map

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":"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"}
+{"version":3,"file":"site.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/site.ts"],"names":[],"mappings":"AAQA,OAAO,EAAgC,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAK/E,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;yBAmGe,OAAO,cAAc;AAArC,wBASE"}

package/dist/composite/alert/site.js

@@ -1,12 +1,12 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const token = require("@universityofmaryland/web-styles-library/token");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
 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 theme = require("@universityofmaryland/web-utilities-library/theme");
 const text = require("./elements/text.js");
+const closeButton = require("./elements/closeButton.js");
+const globals = require("./globals.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -25,90 +25,11 @@ function _interopNamespaceDefault(e) {
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const layout__namespace = /* @__PURE__ */ _interopNamespaceDefault(layout);
-const MEDUM = 500;
+const { MEDIUM } = globals.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} .${text.CONSTANTS.className.text}`;
-const OVERWRITE_TEXT_BODY = `.${ELEMENT_ALERT_SITE_CONTAINER} .${text.CONSTANTS.className.wrapper}`;
-const OverwriteText = `
-  ${OVERWRITE_TEXT_WRAPPER} {
-    max-width: ${token__namespace.spacing.maxWidth.large};
-  }
-
-  ${OVERWRITE_TEXT_BODY},
-  ${OVERWRITE_TEXT_BODY} * {
-    color: ${token__namespace.color.black};
-    max-width: ${token__namespace.spacing.maxWidth.large};
-  }
-`;
-const ButtonStyles = `
-  .${ELEMENT_ALERT_SITE_CLOSE_BUTTON} {
-    position: absolute;
-    top: ${token__namespace.spacing.lg};
-    right: ${token__namespace.spacing.lg};
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {
-    .${ELEMENT_ALERT_SITE_CLOSE_BUTTON} {
-      top: ${token__namespace.spacing.sm};
-      right: ${token__namespace.spacing.sm};
-    }
-  }
-`;
-const LockStyles = `
-  ${styles.jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_ALERT_SITE_LOCK}`]: layout__namespace.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__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 ${token__namespace.color.red};
-      padding-right: ${token__namespace.spacing["2xl"]};
-    }
-  }
-
-
-  ${ButtonStyles}
-  ${LockStyles}
-  ${OverwriteText}
-`;
-const CreateCloseButton = ({ container }) => {
-  const closeButton = document.createElement("button");
-  closeButton.classList.add(ELEMENT_ALERT_SITE_CLOSE_BUTTON);
-  closeButton.innerHTML = controls.close;
-  closeButton.setAttribute("aria-label", "Close alert");
-  closeButton.addEventListener("click", () => {
-    animation.shrinkThenRemove({ container });
-    storage.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 = storage.getLocalStorageInt({
@@ -120,26 +41,56 @@ 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 = text.CreateAlertText(props);
-  const shouldHide = ShouldShow(props);
-  let styles2 = STYLES_ALERT_SITE_ELEMENT;
-  if (shouldHide) container.style.display = "none";
-  lock.classList.add(ELEMENT_ALERT_SITE_LOCK);
-  lock.appendChild(textWrapper.element);
-  styles2 += 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: styles2
-  };
-})();
-exports.CreateAlertSiteElement = CreateAlertSiteElement;
+const createLock = (props) => {
+  const { isThemeDark } = props;
+  const textModel = text.CreateAlertText(props);
+  return new webBuilderLibrary.ElementBuilder().styled(layout__namespace.space.horizontal.larger).withChild(textModel).withStyles({
+    element: {
+      width: "100%"
+    },
+    subElement: {
+      color: theme.theme.foreground(isThemeDark),
+      maxWidth: token__namespace.spacing.maxWidth.large
+    }
+  }).build();
+};
+const createCloseButton = () => closeButton.CreateCloseButton({
+  targetSelector: ".alert-site-declaration",
+  onBeforeClose: () => storage.setLocalStorageTimestamp({ key: ALERT_LOCAL_STORAGE_KEY })
+});
+const createContainer = (props) => {
+  const lockElement = createLock(props);
+  const closeButtonElement = createCloseButton();
+  const children = [lockElement, closeButtonElement].filter(
+    Boolean
+  );
+  return new webBuilderLibrary.ElementBuilder().withClassName("alert-site-container").withChildren(...children).withStyles({
+    element: {
+      display: "flex",
+      position: "relative",
+      padding: `${token__namespace.spacing.lg} 0`,
+      gap: token__namespace.spacing.lg,
+      backgroundColor: token__namespace.color.gold,
+      borderLeft: `4px solid ${token__namespace.color.red}`,
+      [`@container (min-width: ${MEDIUM}px)`]: {
+        borderLeft: `8px solid ${token__namespace.color.red}`,
+        paddingRight: token__namespace.spacing["2xl"]
+      }
+    }
+  }).build();
+};
+const createWrapper = (container) => new webBuilderLibrary.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;
+};
+module.exports = site;
 //# sourceMappingURL=site.js.map

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"site.js","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":["BREAKPOINTS","getLocalStorageInt","AlertText","ElementBuilder","layout","theme","token","CreateCloseButton","setLocalStorageTimestamp"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,EAAE,WAAWA,QAAAA;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,iBAAiBC,QAAAA,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,YAAYC,KAAAA,gBAAU,KAAK;AAEjC,SAAO,IAAIC,kBAAAA,eAAA,EACR,OAAOC,kBAAO,MAAM,WAAW,MAAM,EACrC,UAAU,SAAS,EACnB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET,YAAY;AAAA,MACV,OAAOC,MAAAA,MAAM,WAAW,WAAW;AAAA,MACnC,UAAUC,iBAAM,QAAQ,SAAS;AAAA,IAAA;AAAA,EACnC,CACD,EACA,MAAA;AACL;AAEA,MAAM,oBAAoB,MACxBC,YAAAA,kBAAkB;AAAA,EAChB,gBAAgB;AAAA,EAChB,eAAe,MACbC,QAAAA,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,IAAIL,kBAAAA,eAAA,EACR,cAAc,sBAAsB,EACpC,aAAa,GAAG,QAAQ,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,SAAS,GAAGG,iBAAM,QAAQ,EAAE;AAAA,MAC5B,KAAKA,iBAAM,QAAQ;AAAA,MACnB,iBAAiBA,iBAAM,MAAM;AAAA,MAC7B,YAAY,aAAaA,iBAAM,MAAM,GAAG;AAAA,MAExC,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,QACvC,YAAY,aAAaA,iBAAM,MAAM,GAAG;AAAA,QACxC,cAAcA,iBAAM,QAAQ,KAAK;AAAA,MAAA;AAAA,IACnC;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,gBAAgB,CAAC,cACrB,IAAIH,kBAAAA,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;;"}