@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

package/dist/composite/pathway/highlight.js

@@ -1,9 +1,9 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
-const index = require("../../model/elements/index.js");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
+const Styles = require("@universityofmaryland/web-styles-library");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
 const _common = require("./_common.js");
-const layout = require("../../model/elements/layout.js");
-const headline = require("../../model/elements/headline.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -21,48 +21,39 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
 const mediumSize = 1e3;
 const largeSize = 1200;
 const createTextContent = (props) => {
-  const wrapper = index.createDiv({
-    className: "pathway-text-container-wrapper",
-    children: [_common.createTextLockupMedium(props)],
-    elementStyles: {
-      element: {
-        width: "100%",
-        position: "relative"
-      }
+  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("pathway-text-container-wrapper").withChild(_common.createTextLockupMedium(props)).withStyles({
+    element: {
+      width: "100%",
+      position: "relative"
     }
-  });
-  const container = index.createDiv({
-    className: "pathway-text-container",
-    children: [wrapper],
-    elementStyles: {
-      element: {
-        container: "inline-size",
-        display: "flex",
-        alignItems: "center",
-        zIndex: "99",
-        ...props.isThemeDark && {
-          backgroundColor: token__namespace.color.black,
-          color: token__namespace.color.white
-        },
-        ...props.isThemeMaryland && {
-          backgroundColor: token__namespace.color.red,
-          color: token__namespace.color.white
-        },
-        [`@container (max-width: ${mediumSize - 1}px)`]: {
-          paddingBottom: token__namespace.spacing.md
-        },
-        [`@container (min-width: ${mediumSize}px)`]: {
-          paddingRight: token__namespace.spacing["4xl"]
-        },
-        [`@container (min-width: ${largeSize}px)`]: {
-          paddingRight: token__namespace.spacing["6xl"]
-        }
+  }).build();
+  const container = new webBuilderLibrary.ElementBuilder().withClassName("pathway-text-container").withChild(wrapper).withStyles({
+    element: {
+      container: "inline-size",
+      display: "flex",
+      alignItems: "center",
+      zIndex: "99",
+      ...props.isThemeDark && {
+        backgroundColor: token__namespace.color.black
+      },
+      ...props.isThemeMaryland && {
+        backgroundColor: token__namespace.color.red
+      },
+      [`@container (max-width: ${mediumSize - 1}px)`]: {
+        paddingBottom: token__namespace.spacing.md
+      },
+      [`@container (min-width: ${mediumSize}px)`]: {
+        paddingRight: token__namespace.spacing["4xl"]
+      },
+      [`@container (min-width: ${largeSize}px)`]: {
+        paddingRight: token__namespace.spacing["6xl"]
       }
     }
-  });
+  }).build();
   return container;
 };
 const createHighlightColumn = ({
@@ -70,113 +61,92 @@ const createHighlightColumn = ({
   attribution,
   isThemeDark
 }) => {
-  const children = [];
+  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("pathway-highlight-column-wrapper").withStyles({
+    element: {
+      [`@container (min-width: ${mediumSize}px)`]: {
+        paddingLeft: token__namespace.spacing["xl"],
+        position: "relative"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        backgroundColor: token__namespace.color.red,
+        [`@container (max-width: ${mediumSize - 1}px)`]: {
+          top: token__namespace.spacing["2xl"],
+          width: token__namespace.spacing["5xl"],
+          height: "2px"
+        },
+        [`@container (min-width: ${mediumSize}px)`]: {
+          left: "0",
+          width: "2px",
+          height: "100%"
+        }
+      }
+    }
+  });
   if (quote) {
-    children.push(
-      headline.sansLarger({
-        element: quote,
-        isThemeDark,
-        elementStyles: {
-          element: {
-            color: token__namespace.color.black,
-            fontWeight: "700"
-          }
+    wrapper.withChild(
+      new webBuilderLibrary.ElementBuilder(quote).styled(
+        Styles__namespace.typography.sans.compose("larger", {
+          theme: theme.theme.fontColor(isThemeDark)
+        })
+      ).withStyles({
+        element: {
+          fontWeight: "700"
         }
-      })
+      }).build()
     );
   }
   if (attribution) {
-    children.push(
-      headline.sansMedium({
-        element: attribution,
-        isThemeDark,
-        elementStyles: {
-          element: {
-            marginTop: token__namespace.spacing.sm
-          }
+    wrapper.withChild(
+      new webBuilderLibrary.ElementBuilder(attribution).styled(
+        Styles__namespace.typography.sans.compose("medium", {
+          theme: theme.theme.fontColor(isThemeDark)
+        })
+      ).withStyles({
+        element: {
+          marginTop: token__namespace.spacing.sm
         }
-      })
+      }).build()
     );
   }
-  const wrapper = index.createDiv({
-    className: "pathway-highlight-column-wrapper",
-    children,
-    elementStyles: {
-      element: {
-        [`@container (min-width: ${mediumSize}px)`]: {
-          paddingLeft: token__namespace.spacing["xl"],
-          position: "relative"
-        },
-        "&:before": {
-          content: "''",
-          position: "absolute",
-          backgroundColor: token__namespace.color.red,
-          [`@container (max-width: ${mediumSize - 1}px)`]: {
-            top: token__namespace.spacing["2xl"],
-            width: token__namespace.spacing["5xl"],
-            height: "2px"
-          },
-          [`@container (min-width: ${mediumSize}px)`]: {
-            left: "0",
-            width: "2px",
-            height: "100%"
-          }
-        }
-      }
-    }
-  });
-  return index.createDiv({
-    className: "pathway-highlight-column-container",
-    children: [wrapper],
-    elementStyles: {
-      element: {
-        backgroundColor: token__namespace.color.gray.lightest,
-        position: "relative",
-        padding: `${token__namespace.spacing["5xl"]} ${token__namespace.spacing.md} ${token__namespace.spacing.md} ${token__namespace.spacing.md}`,
-        [`@container (min-width: ${mediumSize}px)`]: {
-          padding: `${token__namespace.spacing["4xl"]} ${token__namespace.spacing["2xl"]}`
-        },
-        [`@container (min-width: ${largeSize}px)`]: {
-          padding: `${token__namespace.spacing["8xl"]} ${token__namespace.spacing["xl"]}`
-        },
-        ...isThemeDark && {
-          backgroundColor: token__namespace.color.gray.darker,
-          [`& *`]: {
-            color: token__namespace.color.white
-          }
-        }
+  const wrapperBuilt = wrapper.build();
+  return new webBuilderLibrary.ElementBuilder().withClassName("pathway-highlight-column-container").withChild(wrapperBuilt).withStyles({
+    element: {
+      backgroundColor: token__namespace.color.gray.lightest,
+      position: "relative",
+      padding: `${token__namespace.spacing["5xl"]} ${token__namespace.spacing.md} ${token__namespace.spacing.md} ${token__namespace.spacing.md}`,
+      [`@container (min-width: ${mediumSize}px)`]: {
+        padding: `${token__namespace.spacing["4xl"]} ${token__namespace.spacing["2xl"]}`
+      },
+      [`@container (min-width: ${largeSize}px)`]: {
+        padding: `${token__namespace.spacing["8xl"]} ${token__namespace.spacing["xl"]}`
+      },
+      ...isThemeDark && {
+        backgroundColor: token__namespace.color.gray.darker
       }
     }
-  });
+  }).build();
 };
 const createLock = (props) => {
   const textContent = createTextContent(props);
   const highlightColumn = createHighlightColumn(props);
-  const children = [textContent, highlightColumn];
-  return layout.spaceHorizontalLarger({
-    element: document.createElement("div"),
-    children,
-    elementStyles: {
-      element: {
-        [`@container (min-width: ${mediumSize}px)`]: {
-          display: "flex",
-          alignItems: "center",
-          [`& > *`]: {
-            width: "50%"
-          }
+  return new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.space.horizontal.larger).withChild(textContent).withChild(highlightColumn).withStyles({
+    element: {
+      [`@container (min-width: ${mediumSize}px)`]: {
+        display: "flex",
+        alignItems: "center",
+        [`& > *`]: {
+          width: "50%"
         }
       }
     }
-  });
+  }).build();
 };
-const highlight = (props) => index.createDiv({
-  className: "pathway-highlight-container",
-  children: [createLock(props)],
-  elementStyles: {
-    element: {
-      container: "inline-size"
-    }
+const highlight = (props) => new webBuilderLibrary.ElementBuilder().withClassName("pathway-highlight-container").withChild(createLock(props)).withStyles({
+  element: {
+    container: "inline-size"
   }
-});
+}).build();
 module.exports = highlight;
 //# sourceMappingURL=highlight.js.map

package/dist/composite/pathway/highlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"highlight.js","sources":["../../../source/composite/pathway/highlight.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { createTextLockupMedium } from './_common';\nimport { PathwayHighlightProps } from './_types';\nimport { type ElementVisual } from '../../_types';\n\nconst mediumSize = 1000;\nconst largeSize = 1200;\n\nconst createTextContent = (props: PathwayHighlightProps): ElementVisual => {\n  const wrapper = ElementModel.createDiv({\n    className: 'pathway-text-container-wrapper',\n    children: [createTextLockupMedium(props)],\n    elementStyles: {\n      element: {\n        width: '100%',\n        position: 'relative',\n      },\n    },\n  });\n\n  const container = ElementModel.createDiv({\n    className: 'pathway-text-container',\n    children: [wrapper],\n    elementStyles: {\n      element: {\n        container: 'inline-size',\n        display: 'flex',\n        alignItems: 'center',\n        zIndex: '99',\n\n        ...(props.isThemeDark && {\n          backgroundColor: token.color.black,\n          color: token.color.white,\n        }),\n\n        ...(props.isThemeMaryland && {\n          backgroundColor: token.color.red,\n          color: token.color.white,\n        }),\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingBottom: token.spacing.md,\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          paddingRight: token.spacing['4xl'],\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          paddingRight: token.spacing['6xl'],\n        },\n      },\n    },\n  });\n\n  return container;\n};\n\nconst createHighlightColumn = ({\n  quote,\n  attribution,\n  isThemeDark,\n}: Pick<\n  PathwayHighlightProps,\n  'quote' | 'attribution' | 'isThemeDark'\n>): ElementVisual => {\n  const children: ElementVisual[] = [];\n\n  if (quote) {\n    children.push(\n      ElementModel.headline.sansLarger({\n        element: quote,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            color: token.color.black,\n            fontWeight: '700',\n          },\n        },\n      }),\n    );\n  }\n\n  if (attribution) {\n    children.push(\n      ElementModel.headline.sansMedium({\n        element: attribution,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  const wrapper = ElementModel.createDiv({\n    className: 'pathway-highlight-column-wrapper',\n    children,\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${mediumSize}px)`]: {\n          paddingLeft: token.spacing['xl'],\n          position: 'relative',\n        },\n\n        '&:before': {\n          content: \"''\",\n          position: 'absolute',\n          backgroundColor: token.color.red,\n\n          [`@container (max-width: ${mediumSize - 1}px)`]: {\n            top: token.spacing['2xl'],\n            width: token.spacing['5xl'],\n            height: '2px',\n          },\n\n          [`@container (min-width: ${mediumSize}px)`]: {\n            left: '0',\n            width: '2px',\n            height: '100%',\n          },\n        },\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'pathway-highlight-column-container',\n    children: [wrapper],\n    elementStyles: {\n      element: {\n        backgroundColor: token.color.gray.lightest,\n        position: 'relative',\n        padding: `${token.spacing['5xl']} ${token.spacing.md} ${token.spacing.md} ${token.spacing.md}`,\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          padding: `${token.spacing['4xl']} ${token.spacing['2xl']}`,\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          padding: `${token.spacing['8xl']} ${token.spacing['xl']}`,\n        },\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.gray.darker,\n\n          [`& *`]: {\n            color: token.color.white,\n          },\n        }),\n      },\n    },\n  });\n};\n\nconst createLock = (props: PathwayHighlightProps) => {\n  const textContent = createTextContent(props);\n  const highlightColumn = createHighlightColumn(props);\n  const children: ElementVisual[] = [textContent, highlightColumn];\n\n  return ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children,\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${mediumSize}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n\n          [`& > *`]: {\n            width: '50%',\n          },\n        },\n      },\n    },\n  });\n};\n\nexport default (props: PathwayHighlightProps) =>\n  ElementModel.createDiv({\n    className: 'pathway-highlight-container',\n    children: [createLock(props)],\n    elementStyles: {\n      element: {\n        container: 'inline-size',\n      },\n    },\n  });\n"],"names":["ElementModel.createDiv","createTextLockupMedium","token","ElementModel.headline.sansLarger","ElementModel.headline.sansMedium","ElementModel.layout.spaceHorizontalLarger"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,aAAa;AACnB,MAAM,YAAY;AAElB,MAAM,oBAAoB,CAAC,UAAgD;AACzE,QAAM,UAAUA,MAAAA,UAAuB;AAAA,IACrC,WAAW;AAAA,IACX,UAAU,CAACC,+BAAuB,KAAK,CAAC;AAAA,IACxC,eAAe;AAAA,MACb,SAAS;AAAA,QACP,OAAO;AAAA,QACP,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,QAAM,YAAYD,MAAAA,UAAuB;AAAA,IACvC,WAAW;AAAA,IACX,UAAU,CAAC,OAAO;AAAA,IAClB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW;AAAA,QACX,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ;AAAA,QAER,GAAI,MAAM,eAAe;AAAA,UACvB,iBAAiBE,iBAAM,MAAM;AAAA,UAC7B,OAAOA,iBAAM,MAAM;AAAA,QAAA;AAAA,QAGrB,GAAI,MAAM,mBAAmB;AAAA,UAC3B,iBAAiBA,iBAAM,MAAM;AAAA,UAC7B,OAAOA,iBAAM,MAAM;AAAA,QAAA;AAAA,QAGrB,CAAC,0BAA0B,aAAa,CAAC,KAAK,GAAG;AAAA,UAC/C,eAAeA,iBAAM,QAAQ;AAAA,QAAA;AAAA,QAG/B,CAAC,0BAA0B,UAAU,KAAK,GAAG;AAAA,UAC3C,cAAcA,iBAAM,QAAQ,KAAK;AAAA,QAAA;AAAA,QAGnC,CAAC,0BAA0B,SAAS,KAAK,GAAG;AAAA,UAC1C,cAAcA,iBAAM,QAAQ,KAAK;AAAA,QAAA;AAAA,MACnC;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAO;AACT;AAEA,MAAM,wBAAwB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,MAGqB;AACnB,QAAM,WAA4B,CAAA;AAElC,MAAI,OAAO;AACT,aAAS;AAAA,MACPC,oBAAiC;AAAA,QAC/B,SAAS;AAAA,QACT;AAAA,QACA,eAAe;AAAA,UACb,SAAS;AAAA,YACP,OAAOD,iBAAM,MAAM;AAAA,YACnB,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,aAAa;AACf,aAAS;AAAA,MACPE,oBAAiC;AAAA,QAC/B,SAAS;AAAA,QACT;AAAA,QACA,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAWF,iBAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,UAAUF,MAAAA,UAAuB;AAAA,IACrC,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,0BAA0B,UAAU,KAAK,GAAG;AAAA,UAC3C,aAAaE,iBAAM,QAAQ,IAAI;AAAA,UAC/B,UAAU;AAAA,QAAA;AAAA,QAGZ,YAAY;AAAA,UACV,SAAS;AAAA,UACT,UAAU;AAAA,UACV,iBAAiBA,iBAAM,MAAM;AAAA,UAE7B,CAAC,0BAA0B,aAAa,CAAC,KAAK,GAAG;AAAA,YAC/C,KAAKA,iBAAM,QAAQ,KAAK;AAAA,YACxB,OAAOA,iBAAM,QAAQ,KAAK;AAAA,YAC1B,QAAQ;AAAA,UAAA;AAAA,UAGV,CAAC,0BAA0B,UAAU,KAAK,GAAG;AAAA,YAC3C,MAAM;AAAA,YACN,OAAO;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAOF,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,OAAO;AAAA,IAClB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,iBAAiBE,iBAAM,MAAM,KAAK;AAAA,QAClC,UAAU;AAAA,QACV,SAAS,GAAGA,iBAAM,QAAQ,KAAK,CAAC,IAAIA,iBAAM,QAAQ,EAAE,IAAIA,iBAAM,QAAQ,EAAE,IAAIA,iBAAM,QAAQ,EAAE;AAAA,QAE5F,CAAC,0BAA0B,UAAU,KAAK,GAAG;AAAA,UAC3C,SAAS,GAAGA,iBAAM,QAAQ,KAAK,CAAC,IAAIA,iBAAM,QAAQ,KAAK,CAAC;AAAA,QAAA;AAAA,QAG1D,CAAC,0BAA0B,SAAS,KAAK,GAAG;AAAA,UAC1C,SAAS,GAAGA,iBAAM,QAAQ,KAAK,CAAC,IAAIA,iBAAM,QAAQ,IAAI,CAAC;AAAA,QAAA;AAAA,QAGzD,GAAI,eAAe;AAAA,UACjB,iBAAiBA,iBAAM,MAAM,KAAK;AAAA,UAElC,CAAC,KAAK,GAAG;AAAA,YACP,OAAOA,iBAAM,MAAM;AAAA,UAAA;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,aAAa,CAAC,UAAiC;AACnD,QAAM,cAAc,kBAAkB,KAAK;AAC3C,QAAM,kBAAkB,sBAAsB,KAAK;AACnD,QAAM,WAA4B,CAAC,aAAa,eAAe;AAE/D,SAAOG,6BAA0C;AAAA,IAC/C,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,0BAA0B,UAAU,KAAK,GAAG;AAAA,UAC3C,SAAS;AAAA,UACT,YAAY;AAAA,UAEZ,CAAC,OAAO,GAAG;AAAA,YACT,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAA,YAAe,CAAC,UACdL,MAAAA,UAAuB;AAAA,EACrB,WAAW;AAAA,EACX,UAAU,CAAC,WAAW,KAAK,CAAC;AAAA,EAC5B,eAAe;AAAA,IACb,SAAS;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,CAAC;;"}
+{"version":3,"file":"highlight.js","sources":["../../../source/composite/pathway/highlight.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { createTextLockupMedium } from './_common';\nimport { PathwayHighlightProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst mediumSize = 1000;\nconst largeSize = 1200;\n\nconst createTextContent = (\n  props: PathwayHighlightProps,\n): ElementModel<HTMLElement> => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-text-container-wrapper')\n    .withChild(createTextLockupMedium(props))\n    .withStyles({\n      element: {\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('pathway-text-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        container: 'inline-size',\n        display: 'flex',\n        alignItems: 'center',\n        zIndex: '99',\n\n        ...(props.isThemeDark && {\n          backgroundColor: token.color.black,\n        }),\n\n        ...(props.isThemeMaryland && {\n          backgroundColor: token.color.red,\n        }),\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingBottom: token.spacing.md,\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          paddingRight: token.spacing['4xl'],\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          paddingRight: token.spacing['6xl'],\n        },\n      },\n    })\n    .build();\n\n  return container;\n};\n\nconst createHighlightColumn = ({\n  quote,\n  attribution,\n  isThemeDark,\n}: Pick<\n  PathwayHighlightProps,\n  'quote' | 'attribution' | 'isThemeDark'\n>): ElementModel<HTMLElement> => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-highlight-column-wrapper')\n    .withStyles({\n      element: {\n        [`@container (min-width: ${mediumSize}px)`]: {\n          paddingLeft: token.spacing['xl'],\n          position: 'relative',\n        },\n\n        '&:before': {\n          content: \"''\",\n          position: 'absolute',\n          backgroundColor: token.color.red,\n\n          [`@container (max-width: ${mediumSize - 1}px)`]: {\n            top: token.spacing['2xl'],\n            width: token.spacing['5xl'],\n            height: '2px',\n          },\n\n          [`@container (min-width: ${mediumSize}px)`]: {\n            left: '0',\n            width: '2px',\n            height: '100%',\n          },\n        },\n      },\n    });\n\n  if (quote) {\n    wrapper.withChild(\n      new ElementBuilder(quote)\n        .styled(\n          Styles.typography.sans.compose('larger', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            fontWeight: '700',\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (attribution) {\n    wrapper.withChild(\n      new ElementBuilder(attribution)\n        .styled(\n          Styles.typography.sans.compose('medium', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  const wrapperBuilt = wrapper.build();\n\n  return new ElementBuilder()\n    .withClassName('pathway-highlight-column-container')\n    .withChild(wrapperBuilt)\n    .withStyles({\n      element: {\n        backgroundColor: token.color.gray.lightest,\n        position: 'relative',\n        padding: `${token.spacing['5xl']} ${token.spacing.md} ${token.spacing.md} ${token.spacing.md}`,\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          padding: `${token.spacing['4xl']} ${token.spacing['2xl']}`,\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          padding: `${token.spacing['8xl']} ${token.spacing['xl']}`,\n        },\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.gray.darker,\n        }),\n      },\n    })\n    .build();\n};\n\nconst createLock = (props: PathwayHighlightProps) => {\n  const textContent = createTextContent(props);\n  const highlightColumn = createHighlightColumn(props);\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContent)\n    .withChild(highlightColumn)\n    .withStyles({\n      element: {\n        [`@container (min-width: ${mediumSize}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n\n          [`& > *`]: {\n            width: '50%',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nexport default (props: PathwayHighlightProps) =>\n  new ElementBuilder()\n    .withClassName('pathway-highlight-container')\n    .withChild(createLock(props))\n    .withStyles({\n      element: {\n        container: 'inline-size',\n      },\n    })\n    .build();\n"],"names":["ElementBuilder","createTextLockupMedium","token","Styles","theme"],"mappings":"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"}

package/dist/composite/pathway/highlight.mjs

@@ -1,50 +1,40 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
-import { createDiv } from "../../model/elements/index.mjs";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
 import { createTextLockupMedium } from "./_common.mjs";
-import { spaceHorizontalLarger } from "../../model/elements/layout.mjs";
-import { sansLarger, sansMedium } from "../../model/elements/headline.mjs";
 const mediumSize = 1e3;
 const largeSize = 1200;
 const createTextContent = (props) => {
-  const wrapper = createDiv({
-    className: "pathway-text-container-wrapper",
-    children: [createTextLockupMedium(props)],
-    elementStyles: {
-      element: {
-        width: "100%",
-        position: "relative"
-      }
+  const wrapper = new ElementBuilder().withClassName("pathway-text-container-wrapper").withChild(createTextLockupMedium(props)).withStyles({
+    element: {
+      width: "100%",
+      position: "relative"
     }
-  });
-  const container = createDiv({
-    className: "pathway-text-container",
-    children: [wrapper],
-    elementStyles: {
-      element: {
-        container: "inline-size",
-        display: "flex",
-        alignItems: "center",
-        zIndex: "99",
-        ...props.isThemeDark && {
-          backgroundColor: token.color.black,
-          color: token.color.white
-        },
-        ...props.isThemeMaryland && {
-          backgroundColor: token.color.red,
-          color: token.color.white
-        },
-        [`@container (max-width: ${mediumSize - 1}px)`]: {
-          paddingBottom: token.spacing.md
-        },
-        [`@container (min-width: ${mediumSize}px)`]: {
-          paddingRight: token.spacing["4xl"]
-        },
-        [`@container (min-width: ${largeSize}px)`]: {
-          paddingRight: token.spacing["6xl"]
-        }
+  }).build();
+  const container = new ElementBuilder().withClassName("pathway-text-container").withChild(wrapper).withStyles({
+    element: {
+      container: "inline-size",
+      display: "flex",
+      alignItems: "center",
+      zIndex: "99",
+      ...props.isThemeDark && {
+        backgroundColor: token.color.black
+      },
+      ...props.isThemeMaryland && {
+        backgroundColor: token.color.red
+      },
+      [`@container (max-width: ${mediumSize - 1}px)`]: {
+        paddingBottom: token.spacing.md
+      },
+      [`@container (min-width: ${mediumSize}px)`]: {
+        paddingRight: token.spacing["4xl"]
+      },
+      [`@container (min-width: ${largeSize}px)`]: {
+        paddingRight: token.spacing["6xl"]
       }
     }
-  });
+  }).build();
   return container;
 };
 const createHighlightColumn = ({
@@ -52,114 +42,93 @@ const createHighlightColumn = ({
   attribution,
   isThemeDark
 }) => {
-  const children = [];
+  const wrapper = new ElementBuilder().withClassName("pathway-highlight-column-wrapper").withStyles({
+    element: {
+      [`@container (min-width: ${mediumSize}px)`]: {
+        paddingLeft: token.spacing["xl"],
+        position: "relative"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        backgroundColor: token.color.red,
+        [`@container (max-width: ${mediumSize - 1}px)`]: {
+          top: token.spacing["2xl"],
+          width: token.spacing["5xl"],
+          height: "2px"
+        },
+        [`@container (min-width: ${mediumSize}px)`]: {
+          left: "0",
+          width: "2px",
+          height: "100%"
+        }
+      }
+    }
+  });
   if (quote) {
-    children.push(
-      sansLarger({
-        element: quote,
-        isThemeDark,
-        elementStyles: {
-          element: {
-            color: token.color.black,
-            fontWeight: "700"
-          }
+    wrapper.withChild(
+      new ElementBuilder(quote).styled(
+        Styles.typography.sans.compose("larger", {
+          theme: theme.fontColor(isThemeDark)
+        })
+      ).withStyles({
+        element: {
+          fontWeight: "700"
         }
-      })
+      }).build()
     );
   }
   if (attribution) {
-    children.push(
-      sansMedium({
-        element: attribution,
-        isThemeDark,
-        elementStyles: {
-          element: {
-            marginTop: token.spacing.sm
-          }
+    wrapper.withChild(
+      new ElementBuilder(attribution).styled(
+        Styles.typography.sans.compose("medium", {
+          theme: theme.fontColor(isThemeDark)
+        })
+      ).withStyles({
+        element: {
+          marginTop: token.spacing.sm
         }
-      })
+      }).build()
     );
   }
-  const wrapper = createDiv({
-    className: "pathway-highlight-column-wrapper",
-    children,
-    elementStyles: {
-      element: {
-        [`@container (min-width: ${mediumSize}px)`]: {
-          paddingLeft: token.spacing["xl"],
-          position: "relative"
-        },
-        "&:before": {
-          content: "''",
-          position: "absolute",
-          backgroundColor: token.color.red,
-          [`@container (max-width: ${mediumSize - 1}px)`]: {
-            top: token.spacing["2xl"],
-            width: token.spacing["5xl"],
-            height: "2px"
-          },
-          [`@container (min-width: ${mediumSize}px)`]: {
-            left: "0",
-            width: "2px",
-            height: "100%"
-          }
-        }
-      }
-    }
-  });
-  return createDiv({
-    className: "pathway-highlight-column-container",
-    children: [wrapper],
-    elementStyles: {
-      element: {
-        backgroundColor: token.color.gray.lightest,
-        position: "relative",
-        padding: `${token.spacing["5xl"]} ${token.spacing.md} ${token.spacing.md} ${token.spacing.md}`,
-        [`@container (min-width: ${mediumSize}px)`]: {
-          padding: `${token.spacing["4xl"]} ${token.spacing["2xl"]}`
-        },
-        [`@container (min-width: ${largeSize}px)`]: {
-          padding: `${token.spacing["8xl"]} ${token.spacing["xl"]}`
-        },
-        ...isThemeDark && {
-          backgroundColor: token.color.gray.darker,
-          [`& *`]: {
-            color: token.color.white
-          }
-        }
+  const wrapperBuilt = wrapper.build();
+  return new ElementBuilder().withClassName("pathway-highlight-column-container").withChild(wrapperBuilt).withStyles({
+    element: {
+      backgroundColor: token.color.gray.lightest,
+      position: "relative",
+      padding: `${token.spacing["5xl"]} ${token.spacing.md} ${token.spacing.md} ${token.spacing.md}`,
+      [`@container (min-width: ${mediumSize}px)`]: {
+        padding: `${token.spacing["4xl"]} ${token.spacing["2xl"]}`
+      },
+      [`@container (min-width: ${largeSize}px)`]: {
+        padding: `${token.spacing["8xl"]} ${token.spacing["xl"]}`
+      },
+      ...isThemeDark && {
+        backgroundColor: token.color.gray.darker
       }
     }
-  });
+  }).build();
 };
 const createLock = (props) => {
   const textContent = createTextContent(props);
   const highlightColumn = createHighlightColumn(props);
-  const children = [textContent, highlightColumn];
-  return spaceHorizontalLarger({
-    element: document.createElement("div"),
-    children,
-    elementStyles: {
-      element: {
-        [`@container (min-width: ${mediumSize}px)`]: {
-          display: "flex",
-          alignItems: "center",
-          [`& > *`]: {
-            width: "50%"
-          }
+  return new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(textContent).withChild(highlightColumn).withStyles({
+    element: {
+      [`@container (min-width: ${mediumSize}px)`]: {
+        display: "flex",
+        alignItems: "center",
+        [`& > *`]: {
+          width: "50%"
         }
       }
     }
-  });
+  }).build();
 };
-const highlight = (props) => createDiv({
-  className: "pathway-highlight-container",
-  children: [createLock(props)],
-  elementStyles: {
-    element: {
-      container: "inline-size"
-    }
+const highlight = (props) => new ElementBuilder().withClassName("pathway-highlight-container").withChild(createLock(props)).withStyles({
+  element: {
+    container: "inline-size"
   }
-});
+}).build();
 export {
   highlight as default
 };