@universityofmaryland/web-elements-library 1.5.2 → 1.5.5

package/dist/atomic/text-lockup/small.mjs

@@ -1,10 +1,11 @@
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
 import * as elementStyles from "@universityofmaryland/web-styles-library/element";
-import * as token from "@universityofmaryland/web-styles-library/token";
-import { createDiv } from "../../model/elements/index.mjs";
-import { eyebrow, ribbon } from "../../model/elements/text.mjs";
-import { gridInlineTabletRows } from "../../model/elements/layout.mjs";
-import { sansLarger, sansMin } from "../../model/elements/headline.mjs";
-import { simple } from "../../model/elements/rich-text.mjs";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import * as layout from "@universityofmaryland/web-styles-library/layout";
+import * as animation from "@universityofmaryland/web-styles-library/animation";
+import { wrapTextNodeInSpan } from "@universityofmaryland/web-utilities-library/dom";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
 const ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER = "text-lockup-small-container";
 const metaContainer = elementStyles?.event?.meta?.container;
 const metaClass = (() => {
@@ -33,7 +34,6 @@ const ribbonStyles = {
 const headlineStyles = {
   element: {
     fontWeight: "700",
-    color: `${token.color.black}`,
     [`& + *`]: {
       marginTop: token.spacing.sm
     },
@@ -47,18 +47,27 @@ const headlineStyles = {
     color: "currentColor"
   }
 };
-const textStyles = {
+const textStyles = (isThemeDark) => ({
   element: {
-    color: `${token.color.gray.dark}`
+    ...!isThemeDark && {
+      color: `${token.color.gray.dark}`
+    }
+  },
+  child: {
+    ...!isThemeDark && {
+      color: `${token.color.gray.dark}`
+    }
   },
   siblingAfter: {
     marginTop: token.spacing.min
   }
-};
-const dateStyles = {
+});
+const dateStyles = (isThemeDark) => ({
   element: {
     display: "block",
-    color: `${token.color.gray.mediumAA}`
+    ...!isThemeDark && {
+      color: `${token.color.gray.mediumAA}`
+    }
   },
   child: {
     color: "currentColor"
@@ -66,26 +75,20 @@ const dateStyles = {
   siblingAfter: {
     marginTop: token.spacing.min
   }
-};
-const createEyebrow = ({ eyebrow: eyebrow$1, isThemeDark }) => eyebrow({
-  element: eyebrow$1,
-  elementStyles: eyebrowStyles,
-  isThemeDark
 });
-const createRibbonEyebrow = ({ eyebrow: eyebrow2 }) => ribbon({
-  element: eyebrow2,
-  elementStyles: ribbonStyles
-});
-const createActions = ({ actions }) => gridInlineTabletRows({
-  element: actions,
-  elementStyles: {
-    element: {
-      marginTop: token.spacing.sm
-    }
+const createEyebrow = ({ eyebrow, isThemeDark }) => new ElementBuilder(eyebrow).styled(
+  typography.elements.compose("eyebrow", {
+    theme: theme.fontColor(isThemeDark)
+  })
+).withStyles(eyebrowStyles).build();
+const createRibbonEyebrow = ({ eyebrow }) => new ElementBuilder(eyebrow).styled(elementStyles.text.decoration.ribbon).withStyles(ribbonStyles).build();
+const createActions = ({ actions }) => new ElementBuilder(actions).styled(layout.grid.inline.tabletRows).withStyles({
+  element: {
+    marginTop: token.spacing.sm
   }
-});
+}).build();
 const createTextLockupSmall = ({
-  eyebrow: eyebrow2,
+  eyebrow,
   headline,
   text,
   actions,
@@ -93,57 +96,52 @@ const createTextLockupSmall = ({
   eventMeta,
   isThemeDark
 }) => {
-  const children = [];
-  if (eyebrow2) {
-    children.push(createEyebrow({ eyebrow: eyebrow2, isThemeDark }));
+  const container = new ElementBuilder().withClassName(ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER).withStyles({
+    element: {
+      zIndex: "9",
+      position: "relative"
+    }
+  });
+  if (eyebrow) {
+    const eyebrowElement = createEyebrow({ eyebrow, isThemeDark });
+    container.withChild(eyebrowElement);
   }
   if (headline) {
-    children.push(
-      sansLarger({
-        element: headline,
-        elementStyles: headlineStyles,
-        isThemeDark
+    const composeHeadlineStyles = {
+      ...typography.sans.compose("larger", {
+        theme: theme.fontColor(isThemeDark)
+      }),
+      ...animation.line.composeSlideUnder({
+        color: theme.foreground(isThemeDark)
       })
-    );
+    };
+    const headlineElement = new ElementBuilder(headline).styled(composeHeadlineStyles).withStyles(headlineStyles).withModifier((el) => wrapTextNodeInSpan(el)).build();
+    container.withChild(headlineElement);
   }
   if (eventMeta) {
-    children.push(eventMeta);
+    container.withChild(eventMeta);
   }
   if (text) {
-    children.push(
-      simple({
-        element: text,
-        elementStyles: textStyles,
-        isThemeDark
+    const textElement = new ElementBuilder(text).styled(
+      elementStyles.text.rich.composeSimple({
+        theme: theme.fontColor(isThemeDark)
       })
-    );
+    ).withStyles(textStyles(isThemeDark)).build();
+    container.withChild(textElement);
   }
   if (date) {
-    children.push(
-      sansMin({
-        element: date,
-        elementStyles: dateStyles,
-        isThemeDark
+    const dateElement = new ElementBuilder("slot").withClassName("umd-headline-sans-min").styled(
+      typography.sans.compose("min", {
+        theme: theme.fontColor(isThemeDark)
       })
-    );
+    ).withAnimation("slideUnder").withChild(date).withStyles(dateStyles(isThemeDark)).build();
+    container.withChild(dateElement);
   }
   if (actions) {
-    children.push(
-      createActions({
-        actions
-      })
-    );
+    const actionsElement = createActions({ actions });
+    container.withChild(actionsElement);
   }
-  return createDiv({
-    className: ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER,
-    children,
-    elementStyles: {
-      element: {
-        zIndex: "9",
-        position: "relative"
-      }
-    }
-  });
+  return container.build();
 };
 export {
   createActions,

package/dist/atomic/text-lockup/small.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"small.mjs","sources":["../../../source/atomic/text-lockup/small.ts"],"sourcesContent":["import * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { type UMDElement } from '../../_types';\n\ntype TypeTheme = {\n  isThemeDark?: boolean;\n};\n\ntype TypeEyebrow = TypeTheme & {\n  eyebrow: HTMLElement;\n};\n\ntype TypeActions = {\n  actions: HTMLElement;\n};\n\nexport type TypeTextLockupSmall = TypeTheme & {\n  headline: HTMLElement | null;\n  eyebrow?: HTMLElement | null;\n  text?: HTMLElement | null;\n  date?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  eventMeta?: UMDElement;\n  hasEyebrowRibbon?: boolean;\n};\n\nconst ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER = 'text-lockup-small-container';\nconst metaContainer = elementStyles?.event?.meta?.container;\nconst metaClass: string = (() => {\n  if (!metaContainer?.className) return '';\n\n  if (Array.isArray(metaContainer.className)) {\n    return metaContainer.className[0] || '';\n  }\n\n  if (typeof metaContainer.className === 'string') {\n    return metaContainer.className;\n  }\n\n  return '';\n})();\n\nexport const eyebrowStyles = {\n  element: {\n    display: 'block',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const ribbonStyles = {\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n};\n\nexport const headlineStyles = {\n  element: {\n    fontWeight: '700',\n    color: `${token.color.black}`,\n\n    [`& + *`]: {\n      marginTop: token.spacing.sm,\n    },\n\n    [`& + .${metaClass}`]: {\n      [`@media (max-width: 479px)`]: {\n        marginTop: token.spacing.min,\n      },\n    },\n  },\n  subElement: {\n    color: 'currentColor',\n  },\n};\n\nexport const textStyles = {\n  element: {\n    color: `${token.color.gray.dark}`,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const dateStyles = {\n  element: {\n    display: 'block',\n    color: `${token.color.gray.mediumAA}`,\n  },\n  child: {\n    color: 'currentColor',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const createEyebrow = ({ eyebrow, isThemeDark }: TypeEyebrow) =>\n  ElementModel.text.eyebrow({\n    element: eyebrow,\n    elementStyles: eyebrowStyles,\n    isThemeDark,\n  });\n\nexport const createRibbonEyebrow = ({ eyebrow }: TypeEyebrow) =>\n  ElementModel.text.ribbon({\n    element: eyebrow,\n    elementStyles: ribbonStyles,\n  });\n\nexport const createActions = ({ actions }: TypeActions) =>\n  ElementModel.layout.gridInlineTabletRows({\n    element: actions,\n    elementStyles: {\n      element: {\n        marginTop: token.spacing.sm,\n      },\n    },\n  });\n\nexport const createTextLockupSmall = ({\n  eyebrow,\n  headline,\n  text,\n  actions,\n  date,\n  eventMeta,\n  isThemeDark,\n}: TypeTextLockupSmall) => {\n  const children: UMDElement[] = [];\n\n  if (eyebrow) {\n    children.push(createEyebrow({ eyebrow, isThemeDark }));\n  }\n\n  if (headline) {\n    children.push(\n      ElementModel.headline.sansLarger({\n        element: headline,\n        elementStyles: headlineStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (eventMeta) {\n    children.push(eventMeta);\n  }\n\n  if (text) {\n    children.push(\n      ElementModel.richText.simple({\n        element: text,\n        elementStyles: textStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (date) {\n    children.push(\n      ElementModel.headline.sansMin({\n        element: date,\n        elementStyles: dateStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(\n      createActions({\n        actions,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER,\n    children,\n    elementStyles: {\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    },\n  });\n};\n"],"names":["eyebrow","ElementModel.text.eyebrow","ElementModel.text.ribbon","ElementModel.layout.gridInlineTabletRows","ElementModel.headline.sansLarger","ElementModel.richText.simple","ElementModel.headline.sansMin","ElementModel.createDiv"],"mappings":"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"}
+{"version":3,"file":"small.mjs","sources":["../../../source/atomic/text-lockup/small.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type UMDElement } from '../../_types';\n\ntype TypeTheme = {\n  isThemeDark?: boolean;\n};\n\ntype TypeEyebrow = TypeTheme & {\n  eyebrow: HTMLElement;\n};\n\ntype TypeActions = {\n  actions: HTMLElement;\n};\n\nexport type TypeTextLockupSmall = TypeTheme & {\n  headline: HTMLElement | null;\n  eyebrow?: HTMLElement | null;\n  text?: HTMLElement | null;\n  date?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  eventMeta?: UMDElement;\n  hasEyebrowRibbon?: boolean;\n};\n\nconst ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER = 'text-lockup-small-container';\nconst metaContainer = elementStyles?.event?.meta?.container;\nconst metaClass: string = (() => {\n  if (!metaContainer?.className) return '';\n\n  if (Array.isArray(metaContainer.className)) {\n    return metaContainer.className[0] || '';\n  }\n\n  if (typeof metaContainer.className === 'string') {\n    return metaContainer.className;\n  }\n\n  return '';\n})();\n\nexport const eyebrowStyles = {\n  element: {\n    display: 'block',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const ribbonStyles = {\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n};\n\nexport const headlineStyles = {\n  element: {\n    fontWeight: '700',\n\n    [`& + *`]: {\n      marginTop: token.spacing.sm,\n    },\n\n    [`& + .${metaClass}`]: {\n      [`@media (max-width: 479px)`]: {\n        marginTop: token.spacing.min,\n      },\n    },\n  },\n  subElement: {\n    color: 'currentColor',\n  },\n};\n\nexport const textStyles = (isThemeDark?: boolean) => ({\n  element: {\n    ...(!isThemeDark && {\n      color: `${token.color.gray.dark}`,\n    }),\n  },\n  child: {\n    ...(!isThemeDark && {\n      color: `${token.color.gray.dark}`,\n    }),\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n});\n\nexport const dateStyles = (isThemeDark?: boolean) => ({\n  element: {\n    display: 'block',\n\n    ...(!isThemeDark && {\n      color: `${token.color.gray.mediumAA}`,\n    }),\n  },\n  child: {\n    color: 'currentColor',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n});\n\nexport const createEyebrow = ({ eyebrow, isThemeDark }: TypeEyebrow) =>\n  new ElementBuilder(eyebrow)\n    .styled(\n      typography.elements.compose('eyebrow', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles(eyebrowStyles)\n    .build();\n\nexport const createRibbonEyebrow = ({ eyebrow }: TypeEyebrow) =>\n  new ElementBuilder(eyebrow)\n    .styled(elementStyles.text.decoration.ribbon)\n    .withStyles(ribbonStyles)\n    .build();\n\nexport const createActions = ({ actions }: TypeActions) =>\n  new ElementBuilder(actions)\n    .styled(layout.grid.inline.tabletRows)\n    .withStyles({\n      element: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n\nexport const createTextLockupSmall = ({\n  eyebrow,\n  headline,\n  text,\n  actions,\n  date,\n  eventMeta,\n  isThemeDark,\n}: TypeTextLockupSmall) => {\n  const container = new ElementBuilder()\n    .withClassName(ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER)\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    });\n\n  if (eyebrow) {\n    const eyebrowElement = createEyebrow({ eyebrow, isThemeDark });\n    container.withChild(eyebrowElement);\n  }\n\n  if (headline) {\n    const composeHeadlineStyles = {\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const headlineElement = new ElementBuilder(headline)\n      .styled(composeHeadlineStyles)\n      .withStyles(headlineStyles)\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(headlineElement);\n  }\n\n  if (eventMeta) {\n    container.withChild(eventMeta);\n  }\n\n  if (text) {\n    const textElement = new ElementBuilder(text)\n      .styled(\n        elementStyles.text.rich.composeSimple({\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles(textStyles(isThemeDark))\n      .build();\n\n    container.withChild(textElement);\n  }\n\n  if (date) {\n    const dateElement = new ElementBuilder('slot')\n      .withClassName('umd-headline-sans-min')\n      .styled(\n        typography.sans.compose('min', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withAnimation('slideUnder')\n      .withChild(date)\n      .withStyles(dateStyles(isThemeDark))\n      .build();\n\n    container.withChild(dateElement);\n  }\n\n  if (actions) {\n    const actionsElement = createActions({ actions });\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["animationStyles"],"mappings":";;;;;;;;AAgCA,MAAM,sCAAsC;AAC5C,MAAM,gBAAgB,eAAe,OAAO,MAAM;AAClD,MAAM,aAAqB,MAAM;AAC/B,MAAI,CAAC,eAAe,UAAW,QAAO;AAEtC,MAAI,MAAM,QAAQ,cAAc,SAAS,GAAG;AAC1C,WAAO,cAAc,UAAU,CAAC,KAAK;AAAA,EACvC;AAEA,MAAI,OAAO,cAAc,cAAc,UAAU;AAC/C,WAAO,cAAc;AAAA,EACvB;AAEA,SAAO;AACT,GAAA;AAEO,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,cAAc;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,eAAe;AAAA,EAC1B,cAAc;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,iBAAiB;AAAA,EAC5B,SAAS;AAAA,IACP,YAAY;AAAA,IAEZ,CAAC,OAAO,GAAG;AAAA,MACT,WAAW,MAAM,QAAQ;AAAA,IAAA;AAAA,IAG3B,CAAC,QAAQ,SAAS,EAAE,GAAG;AAAA,MACrB,CAAC,2BAA2B,GAAG;AAAA,QAC7B,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,OAAO;AAAA,EAAA;AAEX;AAEO,MAAM,aAAa,CAAC,iBAA2B;AAAA,EACpD,SAAS;AAAA,IACP,GAAI,CAAC,eAAe;AAAA,MAClB,OAAO,GAAG,MAAM,MAAM,KAAK,IAAI;AAAA,IAAA;AAAA,EACjC;AAAA,EAEF,OAAO;AAAA,IACL,GAAI,CAAC,eAAe;AAAA,MAClB,OAAO,GAAG,MAAM,MAAM,KAAK,IAAI;AAAA,IAAA;AAAA,EACjC;AAAA,EAEF,cAAc;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,aAAa,CAAC,iBAA2B;AAAA,EACpD,SAAS;AAAA,IACP,SAAS;AAAA,IAET,GAAI,CAAC,eAAe;AAAA,MAClB,OAAO,GAAG,MAAM,MAAM,KAAK,QAAQ;AAAA,IAAA;AAAA,EACrC;AAAA,EAEF,OAAO;AAAA,IACL,OAAO;AAAA,EAAA;AAAA,EAET,cAAc;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,gBAAgB,CAAC,EAAE,SAAS,kBACvC,IAAI,eAAe,OAAO,EACvB;AAAA,EACC,WAAW,SAAS,QAAQ,WAAW;AAAA,IACrC,OAAO,MAAM,UAAU,WAAW;AAAA,EAAA,CACnC;AACH,EACC,WAAW,aAAa,EACxB,MAAA;AAEE,MAAM,sBAAsB,CAAC,EAAE,cACpC,IAAI,eAAe,OAAO,EACvB,OAAO,cAAc,KAAK,WAAW,MAAM,EAC3C,WAAW,YAAY,EACvB,MAAA;AAEE,MAAM,gBAAgB,CAAC,EAAE,cAC9B,IAAI,eAAe,OAAO,EACvB,OAAO,OAAO,KAAK,OAAO,UAAU,EACpC,WAAW;AAAA,EACV,SAAS;AAAA,IACP,WAAW,MAAM,QAAQ;AAAA,EAAA;AAE7B,CAAC,EACA,MAAA;AAEE,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,mCAAmC,EACjD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,IAAA;AAAA,EACZ,CACD;AAEH,MAAI,SAAS;AACX,UAAM,iBAAiB,cAAc,EAAE,SAAS,aAAa;AAC7D,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,MAAI,UAAU;AACZ,UAAM,wBAAwB;AAAA,MAC5B,GAAG,WAAW,KAAK,QAAQ,UAAU;AAAA,QACnC,OAAO,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,MACD,GAAGA,UAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAO,MAAM,WAAW,WAAW;AAAA,MAAA,CACpC;AAAA,IAAA;AAGH,UAAM,kBAAkB,IAAI,eAAe,QAAQ,EAChD,OAAO,qBAAqB,EAC5B,WAAW,cAAc,EACzB,aAAa,CAAC,OAAO,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,cAAU,UAAU,eAAe;AAAA,EACrC;AAEA,MAAI,WAAW;AACb,cAAU,UAAU,SAAS;AAAA,EAC/B;AAEA,MAAI,MAAM;AACR,UAAM,cAAc,IAAI,eAAe,IAAI,EACxC;AAAA,MACC,cAAc,KAAK,KAAK,cAAc;AAAA,QACpC,OAAO,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,IAAA,EAEF,WAAW,WAAW,WAAW,CAAC,EAClC,MAAA;AAEH,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,MAAM;AACR,UAAM,cAAc,IAAI,eAAe,MAAM,EAC1C,cAAc,uBAAuB,EACrC;AAAA,MACC,WAAW,KAAK,QAAQ,OAAO;AAAA,QAC7B,OAAO,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,IAAA,EAEF,cAAc,YAAY,EAC1B,UAAU,IAAI,EACd,WAAW,WAAW,WAAW,CAAC,EAClC,MAAA;AAEH,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,SAAS;AACX,UAAM,iBAAiB,cAAc,EAAE,SAAS;AAChD,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,SAAO,UAAU,MAAA;AACnB;"}

package/dist/composite/alert/elements/closeButton.d.ts

@@ -0,0 +1,7 @@
+import { AlertTextProps } from './text';
+export interface CloseButtonProps extends AlertTextProps {
+    targetSelector: string;
+    onBeforeClose?: () => void;
+}
+export declare const CreateCloseButton: (props: Pick<CloseButtonProps, "isThemeDark" | "targetSelector" | "onBeforeClose">) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLButtonElement>;
+//# sourceMappingURL=closeButton.d.ts.map

package/dist/composite/alert/elements/closeButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"closeButton.d.ts","sourceRoot":"","sources":["../../../../source/composite/alert/elements/closeButton.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,GAC5B,OAAO,IAAI,CACT,gBAAgB,EAChB,aAAa,GAAG,gBAAgB,GAAG,eAAe,CACnD,wFAmCF,CAAC"}

package/dist/composite/alert/elements/closeButton.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
+const animation = require("@universityofmaryland/web-utilities-library/animation");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
+const controls = require("@universityofmaryland/web-icons-library/controls");
+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 CreateCloseButton = (props) => {
+  const { isThemeDark = false, targetSelector, onBeforeClose } = props;
+  const MEDIUM = 768;
+  const button = document.createElement("button");
+  return new webBuilderLibrary.ElementBuilder(button).withClassName("alert-close-button").withAttribute("aria-label", "Close alert").withAttribute("type", "button").withHTML(controls.close).withStyles({
+    element: {
+      position: "absolute",
+      top: token__namespace.spacing.lg,
+      right: token__namespace.spacing.lg,
+      color: theme.theme.foreground(isThemeDark),
+      ["& rect, & path"]: {
+        fill: "currentColor"
+      },
+      [`@container (max-width: ${MEDIUM}px)`]: {
+        top: token__namespace.spacing.sm,
+        right: token__namespace.spacing.sm
+      }
+    }
+  }).on("click", () => {
+    if (typeof onBeforeClose === "function") onBeforeClose();
+    const wrapper = button.closest(targetSelector);
+    if (wrapper instanceof HTMLElement)
+      animation.shrinkThenRemove({ container: wrapper });
+  }).build();
+};
+exports.CreateCloseButton = CreateCloseButton;
+//# sourceMappingURL=closeButton.js.map

package/dist/composite/alert/elements/closeButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"closeButton.js","sources":["../../../../source/composite/alert/elements/closeButton.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { shrinkThenRemove } from '@universityofmaryland/web-utilities-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { close as iconClose } from '@universityofmaryland/web-icons-library/controls';\nimport { AlertTextProps } from './text';\n\nexport interface CloseButtonProps extends AlertTextProps {\n  targetSelector: string;\n  onBeforeClose?: () => void;\n}\n\nexport const CreateCloseButton = (\n  props: Pick<\n    CloseButtonProps,\n    'isThemeDark' | 'targetSelector' | 'onBeforeClose'\n  >,\n) => {\n  const { isThemeDark = false, targetSelector, onBeforeClose } = props;\n\n  const MEDIUM = 768;\n  const button = document.createElement('button');\n\n  return new ElementBuilder(button)\n    .withClassName('alert-close-button')\n    .withAttribute('aria-label', 'Close alert')\n    .withAttribute('type', 'button')\n    .withHTML(iconClose)\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: token.spacing.lg,\n        right: token.spacing.lg,\n        color: theme.foreground(isThemeDark),\n        ['& rect, & path']: {\n          fill: 'currentColor',\n        },\n\n        [`@container (max-width: ${MEDIUM}px)`]: {\n          top: token.spacing.sm,\n          right: token.spacing.sm,\n        },\n      },\n    })\n    .on('click', () => {\n      if (typeof onBeforeClose === 'function') onBeforeClose();\n      const wrapper = button.closest(targetSelector);\n      if (wrapper instanceof HTMLElement)\n        shrinkThenRemove({ container: wrapper });\n    })\n    .build();\n};\n"],"names":["ElementBuilder","iconClose","token","theme","shrinkThenRemove"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,oBAAoB,CAC/B,UAIG;AACH,QAAM,EAAE,cAAc,OAAO,gBAAgB,kBAAkB;AAE/D,QAAM,SAAS;AACf,QAAM,SAAS,SAAS,cAAc,QAAQ;AAE9C,SAAO,IAAIA,kBAAAA,eAAe,MAAM,EAC7B,cAAc,oBAAoB,EAClC,cAAc,cAAc,aAAa,EACzC,cAAc,QAAQ,QAAQ,EAC9B,SAASC,SAAAA,KAAS,EAClB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAKC,iBAAM,QAAQ;AAAA,MACnB,OAAOA,iBAAM,QAAQ;AAAA,MACrB,OAAOC,MAAAA,MAAM,WAAW,WAAW;AAAA,MACnC,CAAC,gBAAgB,GAAG;AAAA,QAClB,MAAM;AAAA,MAAA;AAAA,MAGR,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,QACvC,KAAKD,iBAAM,QAAQ;AAAA,QACnB,OAAOA,iBAAM,QAAQ;AAAA,MAAA;AAAA,IACvB;AAAA,EACF,CACD,EACA,GAAG,SAAS,MAAM;AACjB,QAAI,OAAO,kBAAkB,WAAY,eAAA;AACzC,UAAM,UAAU,OAAO,QAAQ,cAAc;AAC7C,QAAI,mBAAmB;AACrBE,iCAAiB,EAAE,WAAW,SAAS;AAAA,EAC3C,CAAC,EACA,MAAA;AACL;;"}

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

@@ -0,0 +1,34 @@
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import { shrinkThenRemove } from "@universityofmaryland/web-utilities-library/animation";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
+import { close } from "@universityofmaryland/web-icons-library/controls";
+const CreateCloseButton = (props) => {
+  const { isThemeDark = false, targetSelector, onBeforeClose } = props;
+  const MEDIUM = 768;
+  const button = document.createElement("button");
+  return new ElementBuilder(button).withClassName("alert-close-button").withAttribute("aria-label", "Close alert").withAttribute("type", "button").withHTML(close).withStyles({
+    element: {
+      position: "absolute",
+      top: token.spacing.lg,
+      right: token.spacing.lg,
+      color: theme.foreground(isThemeDark),
+      ["& rect, & path"]: {
+        fill: "currentColor"
+      },
+      [`@container (max-width: ${MEDIUM}px)`]: {
+        top: token.spacing.sm,
+        right: token.spacing.sm
+      }
+    }
+  }).on("click", () => {
+    if (typeof onBeforeClose === "function") onBeforeClose();
+    const wrapper = button.closest(targetSelector);
+    if (wrapper instanceof HTMLElement)
+      shrinkThenRemove({ container: wrapper });
+  }).build();
+};
+export {
+  CreateCloseButton
+};
+//# sourceMappingURL=closeButton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"closeButton.mjs","sources":["../../../../source/composite/alert/elements/closeButton.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { shrinkThenRemove } from '@universityofmaryland/web-utilities-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { close as iconClose } from '@universityofmaryland/web-icons-library/controls';\nimport { AlertTextProps } from './text';\n\nexport interface CloseButtonProps extends AlertTextProps {\n  targetSelector: string;\n  onBeforeClose?: () => void;\n}\n\nexport const CreateCloseButton = (\n  props: Pick<\n    CloseButtonProps,\n    'isThemeDark' | 'targetSelector' | 'onBeforeClose'\n  >,\n) => {\n  const { isThemeDark = false, targetSelector, onBeforeClose } = props;\n\n  const MEDIUM = 768;\n  const button = document.createElement('button');\n\n  return new ElementBuilder(button)\n    .withClassName('alert-close-button')\n    .withAttribute('aria-label', 'Close alert')\n    .withAttribute('type', 'button')\n    .withHTML(iconClose)\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: token.spacing.lg,\n        right: token.spacing.lg,\n        color: theme.foreground(isThemeDark),\n        ['& rect, & path']: {\n          fill: 'currentColor',\n        },\n\n        [`@container (max-width: ${MEDIUM}px)`]: {\n          top: token.spacing.sm,\n          right: token.spacing.sm,\n        },\n      },\n    })\n    .on('click', () => {\n      if (typeof onBeforeClose === 'function') onBeforeClose();\n      const wrapper = button.closest(targetSelector);\n      if (wrapper instanceof HTMLElement)\n        shrinkThenRemove({ container: wrapper });\n    })\n    .build();\n};\n"],"names":["iconClose"],"mappings":";;;;;AAYO,MAAM,oBAAoB,CAC/B,UAIG;AACH,QAAM,EAAE,cAAc,OAAO,gBAAgB,kBAAkB;AAE/D,QAAM,SAAS;AACf,QAAM,SAAS,SAAS,cAAc,QAAQ;AAE9C,SAAO,IAAI,eAAe,MAAM,EAC7B,cAAc,oBAAoB,EAClC,cAAc,cAAc,aAAa,EACzC,cAAc,QAAQ,QAAQ,EAC9B,SAASA,KAAS,EAClB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAK,MAAM,QAAQ;AAAA,MACnB,OAAO,MAAM,QAAQ;AAAA,MACrB,OAAO,MAAM,WAAW,WAAW;AAAA,MACnC,CAAC,gBAAgB,GAAG;AAAA,QAClB,MAAM;AAAA,MAAA;AAAA,MAGR,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,QACvC,KAAK,MAAM,QAAQ;AAAA,QACnB,OAAO,MAAM,QAAQ;AAAA,MAAA;AAAA,IACvB;AAAA,EACF,CACD,EACA,GAAG,SAAS,MAAM;AACjB,QAAI,OAAO,kBAAkB,WAAY,eAAA;AACzC,UAAM,UAAU,OAAO,QAAQ,cAAc;AAC7C,QAAI,mBAAmB;AACrB,uBAAiB,EAAE,WAAW,SAAS;AAAA,EAC3C,CAAC,EACA,MAAA;AACL;"}

package/dist/composite/alert/elements/text.d.ts

@@ -1,18 +1,8 @@
-export type TypeAlertTextProps = {
+export interface AlertTextProps {
     headline?: HTMLElement | null;
     text?: HTMLElement | null;
     actions?: HTMLElement | null;
     isThemeDark?: boolean;
-};
-export declare const CONSTANTS: {
-    className: {
-        wrapper: string;
-        text: string;
-        actions: string;
-    };
-};
-export declare const CreateAlertText: (props: TypeAlertTextProps) => {
-    element: HTMLDivElement;
-    styles: string;
-};
+}
+export declare const CreateAlertText: (props: Pick<AlertTextProps, "headline" | "text" | "actions" | "isThemeDark">) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 //# sourceMappingURL=text.d.ts.map

package/dist/composite/alert/elements/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../source/composite/alert/elements/text.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,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;CACvB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;CAMrB,CAAC;AA8CF,eAAO,MAAM,eAAe,GAAI,OAAO,kBAAkB;;;CA2CxD,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../source/composite/alert/elements/text.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,cAAc;IAC7B,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;CACvB;AA+DD,eAAO,MAAM,eAAe,GAC1B,OAAO,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,CAAC,kFAqB7E,CAAC"}

package/dist/composite/alert/elements/text.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 animation = require("@universityofmaryland/web-styles-library/animation");
+const typography = require("@universityofmaryland/web-styles-library/typography");
 const layout = require("@universityofmaryland/web-styles-library/layout");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-require("../../../model/modifiers/index.js");
-require("@universityofmaryland/web-styles-library");
-const headline = require("../../../model/elements/headline.js");
-const richText = require("../../../model/elements/rich-text.js");
+const elementStyles = require("@universityofmaryland/web-styles-library/element");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -24,87 +24,66 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const animation__namespace = /* @__PURE__ */ _interopNamespaceDefault(animation);
+const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
 const layout__namespace = /* @__PURE__ */ _interopNamespaceDefault(layout);
-const CONSTANTS = {
-  className: {
-    wrapper: "wrapper",
-    text: "text",
-    actions: "actions"
-  }
+const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
+const createHeadline = (props) => {
+  const { headline, isThemeDark } = props;
+  if (!headline) return;
+  const styleElements = {
+    ...typography__namespace.sans.compose("large", {
+      theme: theme.theme.fontColor(isThemeDark)
+    }),
+    ...animation__namespace.line.composeSlideUnder({
+      color: theme.theme.foreground(isThemeDark)
+    })
+  };
+  return new webBuilderLibrary.ElementBuilder(headline).styled(styleElements).withStyles({
+    element: {
+      paddingRight: token__namespace.spacing.md
+    },
+    siblingAfter: { marginTop: token__namespace.spacing.sm }
+  }).build();
 };
-const { className } = CONSTANTS;
-const ctaStyles = `
-  * + .${className.actions} {
-    margin-top: ${token__namespace.spacing.sm};
-  }
-
-  ${styles.jssToCSS({
-  styleObj: {
-    [`.${className.actions}`]: layout__namespace.grid.inline.tabletRows
-  }
-})}
-`;
-const STYLES_ALERT_TEXT = `
-  .${className.wrapper} {
-     max-width: ${token__namespace.spacing.maxWidth.small};
-  }
-
-  ${ctaStyles}
-`;
-const headlineStyles = {
-  element: {
-    paddingRight: token__namespace.spacing.md
-  },
-  siblingAfter: {
-    marginTop: token__namespace.spacing.sm
-  },
-  subElement: {
-    color: "currentColor"
-  }
+const createText = (props) => {
+  const { text, isThemeDark } = props;
+  if (!text) return;
+  return new webBuilderLibrary.ElementBuilder(text).styled(
+    elementStyles__namespace.text.rich.composeSimple({
+      theme: theme.theme.fontColor(isThemeDark)
+    })
+  ).withStyles({
+    element: {
+      fontWeight: 500
+    },
+    siblingAfter: { marginTop: token__namespace.spacing.sm }
+  }).build();
 };
-const richTextStyles = {
-  element: {
-    fontWeight: 500
-  },
-  siblingAfter: {
-    marginTop: token__namespace.spacing.sm
-  }
+const createActions = (props) => {
+  const { actions } = props;
+  if (!actions) return;
+  return new webBuilderLibrary.ElementBuilder(actions).styled(layout__namespace.grid.inline.tabletRows).withStyles({
+    element: {
+      [`* + &`]: {
+        marginTop: token__namespace.spacing.sm
+      }
+    }
+  }).build();
 };
 const CreateAlertText = (props) => {
-  const { headline: headline$1, text, actions, isThemeDark } = props;
-  const wrapper = document.createElement("div");
-  let styles2 = STYLES_ALERT_TEXT;
-  if (headline$1) {
-    const headlineModel = headline.sansLarge({
-      ...props,
-      elementStyles: headlineStyles,
-      element: headline$1
-    });
-    wrapper.appendChild(headlineModel.element);
-    styles2 += headlineModel.styles;
-  }
-  if (text) {
-    if (!isThemeDark) {
-      richTextStyles.element.color = token__namespace.color.gray.dark;
+  const { headline, text, actions, isThemeDark } = props;
+  const headlineModel = createHeadline({ headline, isThemeDark });
+  const textModel = createText({ text, isThemeDark });
+  const actionsModel = createActions({ actions });
+  const childElements = [headlineModel, textModel, actionsModel].filter(
+    Boolean
+  );
+  return new webBuilderLibrary.ElementBuilder().withClassName("wrapper").withChildren(...childElements).withStyles({
+    element: {
+      maxWidth: token__namespace.spacing.maxWidth.small
     }
-    const textModel = richText.simple({
-      ...props,
-      elementStyles: richTextStyles,
-      element: text
-    });
-    wrapper.appendChild(textModel.element);
-    styles2 += textModel.styles;
-  }
-  if (actions) {
-    actions.classList.add(className.actions);
-    wrapper.appendChild(actions);
-  }
-  wrapper.classList.add(className.wrapper);
-  return {
-    element: wrapper,
-    styles: styles2
-  };
+  }).build();
 };
-exports.CONSTANTS = CONSTANTS;
 exports.CreateAlertText = CreateAlertText;
 //# sourceMappingURL=text.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text.js","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":["token","jssToCSS","layout","headline","styles","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,kBACRA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG9BC,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,UAAU,OAAO,EAAE,GAAGC,kBAAO,KAAK,OAAO;AAAA,EAAA;AAElD,CAAC,CAAC;AAAA;AAGJ,MAAM,oBAAoB;AAAA,KACrB,UAAU,OAAO;AAAA,kBACJF,iBAAM,QAAQ,SAAS,KAAK;AAAA;AAAA;AAAA,IAG1C,SAAS;AAAA;AAGb,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,IACP,cAAcA,iBAAM,QAAQ;AAAA,EAAA;AAAA,EAE9B,cAAc;AAAA,IACZ,WAAWA,iBAAM,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,WAAWA,iBAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,kBAAkB,CAAC,UAA8B;AAC5D,QAAM,EAAA,UAAEG,YAAU,MAAM,SAAS,gBAAgB;AAEjD,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,MAAIC,UAAS;AAEb,MAAID,YAAU;AACZ,UAAM,gBAAgBE,SAAAA,UAAgC;AAAA,MACpD,GAAG;AAAA,MACH,eAAe;AAAA,MACf,SAASF;AAAAA,IAAA,CACV;AAED,YAAQ,YAAY,cAAc,OAAO;AACzC,IAAAC,WAAU,cAAc;AAAA,EAC1B;AAEA,MAAI,MAAM;AACR,QAAI,CAAC,aAAa;AAChB,qBAAe,QAAQ,QAAQJ,iBAAM,MAAM,KAAK;AAAA,IAClD;AAEA,UAAM,YAAYM,SAAAA,OAA6B;AAAA,MAC7C,GAAG;AAAA,MACH,eAAe;AAAA,MACf,SAAS;AAAA,IAAA,CACV;AAED,YAAQ,YAAY,UAAU,OAAO;AACrC,IAAAF,WAAU,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,QAAAA;AAAA,EAAA;AAEJ;;;"}
+{"version":3,"file":"text.js","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":["typography","theme","animation","ElementBuilder","token","elementStyles","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,iBAAiB,CACrB,UACG;AACH,QAAM,EAAE,UAAU,YAAA,IAAgB;AAClC,MAAI,CAAC,SAAU;AAEf,QAAM,gBAAgB;AAAA,IACpB,GAAGA,sBAAW,KAAK,QAAQ,SAAS;AAAA,MAClC,OAAOC,MAAAA,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,IACD,GAAGC,qBAAU,KAAK,kBAAkB;AAAA,MAClC,OAAOD,MAAAA,MAAM,WAAW,WAAW;AAAA,IAAA,CACpC;AAAA,EAAA;AAGH,SAAO,IAAIE,kBAAAA,eAAe,QAAQ,EAC/B,OAAO,aAAa,EACpB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,cAAcC,iBAAM,QAAQ;AAAA,IAAA;AAAA,IAE9B,cAAc,EAAE,WAAWA,iBAAM,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,IAAID,kBAAAA,eAAe,IAAI,EAC3B;AAAA,IACCE,yBAAc,KAAK,KAAK,cAAc;AAAA,MACpC,OAAOJ,MAAAA,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,YAAY;AAAA,IAAA;AAAA,IAEd,cAAc,EAAE,WAAWG,iBAAM,QAAQ,GAAA;AAAA,EAAG,CAC7C,EACA,MAAA;AACL;AAEA,MAAM,gBAAgB,CAAC,UAA2C;AAChE,QAAM,EAAE,YAAY;AACpB,MAAI,CAAC,QAAS;AAEd,SAAO,IAAID,kBAAAA,eAAe,OAAO,EAC9B,OAAOG,kBAAO,KAAK,OAAO,UAAU,EACpC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,OAAO,GAAG;AAAA,QACT,WAAWF,iBAAM,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,IAAID,kBAAAA,eAAA,EACR,cAAc,SAAS,EACvB,aAAa,GAAG,aAAa,EAC7B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAUC,iBAAM,QAAQ,SAAS;AAAA,IAAA;AAAA,EACnC,CACD,EACA,MAAA;AACL;;"}