@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

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

@@ -1,92 +1,68 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as animation from "@universityofmaryland/web-styles-library/animation";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
 import * as layout from "@universityofmaryland/web-styles-library/layout";
-import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
-import "../../../model/modifiers/index.mjs";
-import "@universityofmaryland/web-styles-library";
-import { sansLarge } from "../../../model/elements/headline.mjs";
-import { simple } from "../../../model/elements/rich-text.mjs";
-const CONSTANTS = {
-  className: {
-    wrapper: "wrapper",
-    text: "text",
-    actions: "actions"
-  }
+import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
+const createHeadline = (props) => {
+  const { headline, isThemeDark } = props;
+  if (!headline) return;
+  const styleElements = {
+    ...typography.sans.compose("large", {
+      theme: theme.fontColor(isThemeDark)
+    }),
+    ...animation.line.composeSlideUnder({
+      color: theme.foreground(isThemeDark)
+    })
+  };
+  return new ElementBuilder(headline).styled(styleElements).withStyles({
+    element: {
+      paddingRight: token.spacing.md
+    },
+    siblingAfter: { marginTop: token.spacing.sm }
+  }).build();
 };
-const { className } = CONSTANTS;
-const ctaStyles = `
-  * + .${className.actions} {
-    margin-top: ${token.spacing.sm};
-  }
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${className.actions}`]: layout.grid.inline.tabletRows
-  }
-})}
-`;
-const STYLES_ALERT_TEXT = `
-  .${className.wrapper} {
-     max-width: ${token.spacing.maxWidth.small};
-  }
-
-  ${ctaStyles}
-`;
-const headlineStyles = {
-  element: {
-    paddingRight: token.spacing.md
-  },
-  siblingAfter: {
-    marginTop: token.spacing.sm
-  },
-  subElement: {
-    color: "currentColor"
-  }
+const createText = (props) => {
+  const { text, isThemeDark } = props;
+  if (!text) return;
+  return new ElementBuilder(text).styled(
+    elementStyles.text.rich.composeSimple({
+      theme: theme.fontColor(isThemeDark)
+    })
+  ).withStyles({
+    element: {
+      fontWeight: 500
+    },
+    siblingAfter: { marginTop: token.spacing.sm }
+  }).build();
 };
-const richTextStyles = {
-  element: {
-    fontWeight: 500
-  },
-  siblingAfter: {
-    marginTop: token.spacing.sm
-  }
+const createActions = (props) => {
+  const { actions } = props;
+  if (!actions) return;
+  return new ElementBuilder(actions).styled(layout.grid.inline.tabletRows).withStyles({
+    element: {
+      [`* + &`]: {
+        marginTop: token.spacing.sm
+      }
+    }
+  }).build();
 };
 const CreateAlertText = (props) => {
   const { headline, text, actions, isThemeDark } = props;
-  const wrapper = document.createElement("div");
-  let styles = STYLES_ALERT_TEXT;
-  if (headline) {
-    const headlineModel = sansLarge({
-      ...props,
-      elementStyles: headlineStyles,
-      element: headline
-    });
-    wrapper.appendChild(headlineModel.element);
-    styles += headlineModel.styles;
-  }
-  if (text) {
-    if (!isThemeDark) {
-      richTextStyles.element.color = token.color.gray.dark;
+  const headlineModel = createHeadline({ headline, isThemeDark });
+  const textModel = createText({ text, isThemeDark });
+  const actionsModel = createActions({ actions });
+  const childElements = [headlineModel, textModel, actionsModel].filter(
+    Boolean
+  );
+  return new ElementBuilder().withClassName("wrapper").withChildren(...childElements).withStyles({
+    element: {
+      maxWidth: token.spacing.maxWidth.small
     }
-    const textModel = simple({
-      ...props,
-      elementStyles: richTextStyles,
-      element: text
-    });
-    wrapper.appendChild(textModel.element);
-    styles += textModel.styles;
-  }
-  if (actions) {
-    actions.classList.add(className.actions);
-    wrapper.appendChild(actions);
-  }
-  wrapper.classList.add(className.wrapper);
-  return {
-    element: wrapper,
-    styles
-  };
+  }).build();
 };
 export {
-  CONSTANTS,
   CreateAlertText
 };
 //# sourceMappingURL=text.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"text.mjs","sources":["../../../../source/composite/alert/elements/text.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 { ElementModel } from 'model';\n\nexport type TypeAlertTextProps = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n};\n\nexport const CONSTANTS = {\n  className: {\n    wrapper: 'wrapper',\n    text: 'text',\n    actions: 'actions',\n  },\n};\n\nconst { className } = CONSTANTS;\n\n// prettier-ignore\nconst ctaStyles = `\n  * + .${className.actions} {\n    margin-top: ${token.spacing.sm};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${className.actions}`]: layout.grid.inline.tabletRows,\n    },\n  })}\n`;\n\nconst STYLES_ALERT_TEXT = `\n  .${className.wrapper} {\n     max-width: ${token.spacing.maxWidth.small};\n  }\n\n  ${ctaStyles}\n`;\n\nconst headlineStyles = {\n  element: {\n    paddingRight: token.spacing.md,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n  subElement: {\n    color: 'currentColor',\n  },\n};\n\nconst richTextStyles: Record<string, any> = {\n  element: {\n    fontWeight: 500,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n};\n\nexport const CreateAlertText = (props: TypeAlertTextProps) => {\n  const { headline, text, actions, isThemeDark } = props;\n\n  const wrapper = document.createElement('div');\n  let styles = STYLES_ALERT_TEXT;\n\n  if (headline) {\n    const headlineModel = ElementModel.headline.sansLarge({\n      ...props,\n      elementStyles: headlineStyles,\n      element: headline,\n    });\n\n    wrapper.appendChild(headlineModel.element);\n    styles += headlineModel.styles;\n  }\n\n  if (text) {\n    if (!isThemeDark) {\n      richTextStyles.element.color = token.color.gray.dark;\n    }\n\n    const textModel = ElementModel.richText.simple({\n      ...props,\n      elementStyles: richTextStyles,\n      element: text,\n    });\n\n    wrapper.appendChild(textModel.element);\n    styles += textModel.styles;\n  }\n\n  if (actions) {\n    actions.classList.add(className.actions);\n    wrapper.appendChild(actions);\n  }\n\n  wrapper.classList.add(className.wrapper);\n\n  return {\n    element: wrapper,\n    styles,\n  };\n};\n"],"names":["ElementModel.headline.sansLarge","ElementModel.richText.simple"],"mappings":";;;;;;;AAYO,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb;AAEA,MAAM,EAAE,cAAc;AAGtB,MAAM,YAAY;AAAA,SACT,UAAU,OAAO;AAAA,kBACR,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG9B,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,UAAU,OAAO,EAAE,GAAG,OAAO,KAAK,OAAO;AAAA,EAAA;AAElD,CAAC,CAAC;AAAA;AAGJ,MAAM,oBAAoB;AAAA,KACrB,UAAU,OAAO;AAAA,kBACJ,MAAM,QAAQ,SAAS,KAAK;AAAA;AAAA;AAAA,IAG1C,SAAS;AAAA;AAGb,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,IACP,cAAc,MAAM,QAAQ;AAAA,EAAA;AAAA,EAE9B,cAAc;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,EAAA;AAAA,EAE3B,YAAY;AAAA,IACV,OAAO;AAAA,EAAA;AAEX;AAEA,MAAM,iBAAsC;AAAA,EAC1C,SAAS;AAAA,IACP,YAAY;AAAA,EAAA;AAAA,EAEd,cAAc;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,kBAAkB,CAAC,UAA8B;AAC5D,QAAM,EAAE,UAAU,MAAM,SAAS,gBAAgB;AAEjD,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,MAAI,SAAS;AAEb,MAAI,UAAU;AACZ,UAAM,gBAAgBA,UAAgC;AAAA,MACpD,GAAG;AAAA,MACH,eAAe;AAAA,MACf,SAAS;AAAA,IAAA,CACV;AAED,YAAQ,YAAY,cAAc,OAAO;AACzC,cAAU,cAAc;AAAA,EAC1B;AAEA,MAAI,MAAM;AACR,QAAI,CAAC,aAAa;AAChB,qBAAe,QAAQ,QAAQ,MAAM,MAAM,KAAK;AAAA,IAClD;AAEA,UAAM,YAAYC,OAA6B;AAAA,MAC7C,GAAG;AAAA,MACH,eAAe;AAAA,MACf,SAAS;AAAA,IAAA,CACV;AAED,YAAQ,YAAY,UAAU,OAAO;AACrC,cAAU,UAAU;AAAA,EACtB;AAEA,MAAI,SAAS;AACX,YAAQ,UAAU,IAAI,UAAU,OAAO;AACvC,YAAQ,YAAY,OAAO;AAAA,EAC7B;AAEA,UAAQ,UAAU,IAAI,UAAU,OAAO;AAEvC,SAAO;AAAA,IACL,SAAS;AAAA,IACT;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"text.mjs","sources":["../../../../source/composite/alert/elements/text.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport type { ElementModel } from '../../../_types';\n\nexport interface AlertTextProps {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n}\n\nconst createHeadline = (\n  props: Pick<AlertTextProps, 'headline' | 'isThemeDark'>,\n) => {\n  const { headline, isThemeDark } = props;\n  if (!headline) return;\n\n  const styleElements = {\n    ...typography.sans.compose('large', {\n      theme: theme.fontColor(isThemeDark),\n    }),\n    ...animation.line.composeSlideUnder({\n      color: theme.foreground(isThemeDark),\n    }),\n  };\n\n  return new ElementBuilder(headline)\n    .styled(styleElements)\n    .withStyles({\n      element: {\n        paddingRight: token.spacing.md,\n      },\n      siblingAfter: { marginTop: token.spacing.sm },\n    })\n    .build();\n};\n\nconst createText = (props: Pick<AlertTextProps, 'text' | 'isThemeDark'>) => {\n  const { text, isThemeDark } = props;\n  if (!text) return;\n\n  return new ElementBuilder(text)\n    .styled(\n      elementStyles.text.rich.composeSimple({\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 500,\n      },\n      siblingAfter: { marginTop: token.spacing.sm },\n    })\n    .build();\n};\n\nconst createActions = (props: Pick<AlertTextProps, 'actions'>) => {\n  const { actions } = props;\n  if (!actions) return;\n\n  return new ElementBuilder(actions)\n    .styled(layout.grid.inline.tabletRows)\n    .withStyles({\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n      },\n    })\n    .build();\n};\n\nexport const CreateAlertText = (\n  props: Pick<AlertTextProps, 'headline' | 'text' | 'actions' | 'isThemeDark'>,\n) => {\n  const { headline, text, actions, isThemeDark } = props;\n\n  const headlineModel = createHeadline({ headline, isThemeDark });\n  const textModel = createText({ text, isThemeDark });\n  const actionsModel = createActions({ actions });\n\n  const childElements = [headlineModel, textModel, actionsModel].filter(\n    Boolean,\n  ) as ElementModel[];\n\n  return new ElementBuilder()\n    .withClassName('wrapper')\n    .withChildren(...childElements)\n    .withStyles({\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n      },\n    })\n    .build();\n};\n"],"names":[],"mappings":";;;;;;;AAgBA,MAAM,iBAAiB,CACrB,UACG;AACH,QAAM,EAAE,UAAU,YAAA,IAAgB;AAClC,MAAI,CAAC,SAAU;AAEf,QAAM,gBAAgB;AAAA,IACpB,GAAG,WAAW,KAAK,QAAQ,SAAS;AAAA,MAClC,OAAO,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,IACD,GAAG,UAAU,KAAK,kBAAkB;AAAA,MAClC,OAAO,MAAM,WAAW,WAAW;AAAA,IAAA,CACpC;AAAA,EAAA;AAGH,SAAO,IAAI,eAAe,QAAQ,EAC/B,OAAO,aAAa,EACpB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,cAAc,MAAM,QAAQ;AAAA,IAAA;AAAA,IAE9B,cAAc,EAAE,WAAW,MAAM,QAAQ,GAAA;AAAA,EAAG,CAC7C,EACA,MAAA;AACL;AAEA,MAAM,aAAa,CAAC,UAAwD;AAC1E,QAAM,EAAE,MAAM,YAAA,IAAgB;AAC9B,MAAI,CAAC,KAAM;AAEX,SAAO,IAAI,eAAe,IAAI,EAC3B;AAAA,IACC,cAAc,KAAK,KAAK,cAAc;AAAA,MACpC,OAAO,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,YAAY;AAAA,IAAA;AAAA,IAEd,cAAc,EAAE,WAAW,MAAM,QAAQ,GAAA;AAAA,EAAG,CAC7C,EACA,MAAA;AACL;AAEA,MAAM,gBAAgB,CAAC,UAA2C;AAChE,QAAM,EAAE,YAAY;AACpB,MAAI,CAAC,QAAS;AAEd,SAAO,IAAI,eAAe,OAAO,EAC9B,OAAO,OAAO,KAAK,OAAO,UAAU,EACpC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,OAAO,GAAG;AAAA,QACT,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEO,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM,EAAE,UAAU,MAAM,SAAS,gBAAgB;AAEjD,QAAM,gBAAgB,eAAe,EAAE,UAAU,aAAa;AAC9D,QAAM,YAAY,WAAW,EAAE,MAAM,aAAa;AAClD,QAAM,eAAe,cAAc,EAAE,SAAS;AAE9C,QAAM,gBAAgB,CAAC,eAAe,WAAW,YAAY,EAAE;AAAA,IAC7D;AAAA,EAAA;AAGF,SAAO,IAAI,eAAA,EACR,cAAc,SAAS,EACvB,aAAa,GAAG,aAAa,EAC7B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU,MAAM,QAAQ,SAAS;AAAA,IAAA;AAAA,EACnC,CACD,EACA,MAAA;AACL;"}

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

@@ -0,0 +1,4 @@
+export declare const BREAKPOINTS: {
+    MEDIUM: number;
+};
+//# sourceMappingURL=globals.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"globals.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/globals.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;CAEvB,CAAC"}

package/dist/composite/alert/globals.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const BREAKPOINTS = {
+  MEDIUM: 500
+};
+exports.BREAKPOINTS = BREAKPOINTS;
+//# sourceMappingURL=globals.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"globals.js","sources":["../../../source/composite/alert/globals.ts"],"sourcesContent":["export const BREAKPOINTS = {\n  MEDIUM: 500,\n};\n"],"names":[],"mappings":";;AAAO,MAAM,cAAc;AAAA,EACzB,QAAQ;AACV;;"}

package/dist/composite/alert/globals.mjs

@@ -0,0 +1,7 @@
+const BREAKPOINTS = {
+  MEDIUM: 500
+};
+export {
+  BREAKPOINTS
+};
+//# sourceMappingURL=globals.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"globals.mjs","sources":["../../../source/composite/alert/globals.ts"],"sourcesContent":["export const BREAKPOINTS = {\n  MEDIUM: 500,\n};\n"],"names":[],"mappings":"AAAO,MAAM,cAAc;AAAA,EACzB,QAAQ;AACV;"}

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

@@ -1,3 +1,3 @@
-export { CreateAlertPageElement as page } from './page';
-export { CreateAlertSiteElement as site } from './site';
+export { default as page } from './page';
+export { default as site } from './site';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACxD,OAAO,EAAE,sBAAsB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/composite/alert/index.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const page = require("./page.js");
 const site = require("./site.js");
-exports.page = page.CreateAlertPageElement;
-exports.site = site.CreateAlertSiteElement;
+exports.page = page;
+exports.site = site;
 //# sourceMappingURL=index.js.map

package/dist/composite/alert/index.mjs

@@ -1,7 +1,7 @@
-import { CreateAlertPageElement } from "./page.mjs";
-import { CreateAlertSiteElement } from "./site.mjs";
+import { default as default2 } from "./page.mjs";
+import { default as default3 } from "./site.mjs";
 export {
-  CreateAlertPageElement as page,
-  CreateAlertSiteElement as site
+  default2 as page,
+  default3 as site
 };
 //# sourceMappingURL=index.mjs.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/page.ts"],"names":[],"mappings":"AAIA,OAAO,EAEL,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,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAgHJ,eAAO,MAAM,sBAAsB,GAAI,OAAO,cAAc;;;CAyBtD,CAAC"}
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/page.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgC,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAK/E,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;yBAkEe,OAAO,cAAc;AAArC,wBASa"}

package/dist/composite/alert/page.js

@@ -1,10 +1,11 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-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 webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
 const indicators = require("@universityofmaryland/web-icons-library/indicators");
+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) {
@@ -22,117 +23,47 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-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__namespace.color.white};
-  }
-
-  ${OVERWRITE_THEME_DARK_CLOSE_BUTTON} rect {
-    fill: ${token__namespace.color.white};
-  }
-`;
-const ButtonStyles = `
-  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {
-    position: absolute;
-    top: ${token__namespace.spacing.lg};
-    right: ${token__namespace.spacing.lg};
-  }
-
-  .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} rect {
-    fill: ${token__namespace.color.black};
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {
-    .${ELEMENT_ALERT_PAGE_CLOSE_BUTTON} {
-      top: ${token__namespace.spacing.sm};
-      right: ${token__namespace.spacing.sm};
+const { MEDIUM } = globals.BREAKPOINTS;
+const createIcon = (iconMarkup) => new webBuilderLibrary.ElementBuilder().withClassName("alert-page-icon").withHTML(iconMarkup).withStyles({
+  element: {
+    display: "block",
+    fill: token__namespace.color.gold,
+    [`@container (max-width: ${MEDIUM}px)`]: {
+      position: "absolute",
+      top: "-20px"
     }
   }
-`;
-const IconStyles = `
-  .${ELEMENT_ALERT_PAGE_ICON} {
-    display: block;
-    fill: ${token__namespace.color.gold};
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${MEDUM}px) {
-    .${ELEMENT_ALERT_PAGE_ICON} {
-      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__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: ${token__namespace.spacing.lg};
-    }
-  }
-
-  ${IconStyles}
-  ${ButtonStyles}
-  ${OverwriteThemeStyles}
-`;
-const CreateIcon = () => {
-  const iconWrapper = document.createElement("div");
-  let icon = indicators.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 = controls.close;
-  closeButton.setAttribute("aria-label", "Close alert");
-  closeButton.addEventListener("click", () => {
-    animation.shrinkThenRemove({ container });
+}).build();
+const createContainer = (props) => {
+  const { isShowIcon = true, isThemeDark } = props;
+  const textModel = text.CreateAlertText(props);
+  const iconModel = isShowIcon ? createIcon(indicators.warning) : null;
+  const closeButtonModel = closeButton.CreateCloseButton({
+    isThemeDark: !!isThemeDark,
+    targetSelector: ".alert-page-declaration"
   });
-  return closeButton;
+  const children = [iconModel, textModel, closeButtonModel].filter(
+    Boolean
+  );
+  return new webBuilderLibrary.ElementBuilder().withClassName("alert-page-container").withChildren(...children).withStyles({
+    element: {
+      color: theme.theme.foreground(isThemeDark),
+      display: "flex",
+      position: "relative",
+      padding: token__namespace.spacing.lg,
+      paddingRight: token__namespace.spacing["2xl"],
+      gap: token__namespace.spacing.lg,
+      border: `solid 4px ${token__namespace.color.gold}`,
+      [`@container (max-width: ${MEDIUM}px)`]: {
+        paddingRight: token__namespace.spacing.lg
+      }
+    }
+  }).build();
 };
-const CreateAlertPageElement = (props) => (() => {
-  const { isShowIcon = true, isThemeDark, isThemeLight } = props;
-  const elementContainer = document.createElement("div");
-  const container = document.createElement("div");
-  const textWrapper = text.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
-  };
-})();
-exports.CreateAlertPageElement = CreateAlertPageElement;
+const page = (props) => new webBuilderLibrary.ElementBuilder().withClassName("alert-page-declaration").withChild(createContainer(props)).withStyles({
+  element: {
+    containerType: "inline-size"
+  }
+}).build();
+module.exports = page;
 //# sourceMappingURL=page.js.map

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"page.js","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":["BREAKPOINTS","ElementBuilder","token","AlertText","iconWarning","CreateCloseButton","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,EAAE,WAAWA,QAAAA;AAEnB,MAAM,aAAa,CAAC,eAClB,IAAIC,kBAAAA,iBACD,cAAc,iBAAiB,EAC/B,SAAS,UAAU,EACnB,WAAW;AAAA,EACV,SAAS;AAAA,IACP,SAAS;AAAA,IACT,MAAMC,iBAAM,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,YAAYC,KAAAA,gBAAU,KAAK;AACjC,QAAM,YAAY,aAAa,WAAWC,WAAAA,OAAW,IAAI;AACzD,QAAM,mBAAmBC,YAAAA,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,IAAIJ,kBAAAA,eAAA,EACR,cAAc,sBAAsB,EACpC,aAAa,GAAG,QAAQ,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,OAAOK,MAAAA,MAAM,WAAW,WAAW;AAAA,MACnC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,SAASJ,iBAAM,QAAQ;AAAA,MACvB,cAAcA,iBAAM,QAAQ,KAAK;AAAA,MACjC,KAAKA,iBAAM,QAAQ;AAAA,MACnB,QAAQ,aAAaA,iBAAM,MAAM,IAAI;AAAA,MAErC,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,QACvC,cAAcA,iBAAM,QAAQ;AAAA,MAAA;AAAA,IAC9B;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAA,OAAe,CAAC,UACd,IAAID,iCAAA,EACD,cAAc,wBAAwB,EACtC,UAAU,gBAAgB,KAAK,CAAC,EAChC,WAAW;AAAA,EACV,SAAS;AAAA,IACP,eAAe;AAAA,EAAA;AAEnB,CAAC,EACA,MAAA;;"}