@universityofmaryland/web-elements-library 1.5.3 → 1.5.6

package/dist/composite/person/hero.mjs

@@ -1,12 +1,17 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
 import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
+import "@universityofmaryland/web-styles-library/typography";
 import "@universityofmaryland/web-utilities-library/media";
 import "@universityofmaryland/web-utilities-library/dom";
 import "@universityofmaryland/web-icons-library/controls";
 import "@universityofmaryland/web-icons-library/communication";
 import "@universityofmaryland/web-icons-library/files";
 import "@universityofmaryland/web-icons-library/brand";
-import { create } from "../../model/elements/index.mjs";
 import "@universityofmaryland/web-icons-library/arrows";
 import "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
@@ -22,111 +27,89 @@ import "../../atomic/layout/person/columns.mjs";
 import contact from "../../atomic/text-lockup/contact.mjs";
 import "../../atomic/text-lockup/date.mjs";
 import "../../atomic/text-lockup/small.mjs";
-import "@universityofmaryland/web-styles-library/typography";
-import { spaceHorizontalLarger } from "../../model/elements/layout.mjs";
-import { lineAdjustmentInset } from "../../model/elements/text.mjs";
-import { sansSmall, campaignLarge, sansMedium, sansLarge } from "../../model/elements/headline.mjs";
 const CreateImageBlock = (props) => {
   const { image, association, pronouns, isThemeDark } = props;
-  const container = create({
-    element: document.createElement("div"),
-    className: "umd-person-hero-image-container",
-    elementStyles: {
-      element: {
-        paddingTop: `${token.spacing.lg}`,
-        paddingBottom: `${token.spacing.lg}`,
-        backgroundColor: `${isThemeDark ? token.color.gray.lightest : token.color.black}`,
-        position: "relative",
-        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {
-          paddingLeft: `${token.spacing.md}`,
-          paddingRight: `${token.spacing.md}`
-        },
-        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {
-          padding: `${token.spacing.md}`,
-          width: "30%",
-          maxWidth: "320px"
-        }
-      }
-    }
-  });
-  const wrapper = create({
-    element: document.createElement("div"),
-    className: "umd-person-hero-image-wrapper"
-  });
+  const wrapper = new ElementBuilder().withClassName(
+    "umd-person-hero-image-wrapper"
+  );
   const contactContainer = contact({
     ...props,
     isThemeDark: !isThemeDark
   });
   if (image) {
-    const imageContainer$1 = create({
-      element: document.createElement("div"),
-      className: "umd-person-hero-image",
-      elementStyles: {
-        element: {
-          backgroundColor: `${isThemeDark ? token.color.gray.lightest : token.color.gray.darker}`,
-          display: "flex",
-          justifyContent: "center",
-          marginBottom: token.spacing.md,
-          ["& img"]: {
-            [`@container (max-width: ${token.media.breakpoints.large.max})`]: {
-              maxHeight: "160px"
-            }
-          }
-        }
-      }
-    });
     const imageBlock = imageContainer({
       element: image,
       isScaled: false
     });
-    imageContainer$1.element.appendChild(imageBlock.element);
-    imageContainer$1.styles += imageBlock.styles;
-    wrapper.element.appendChild(imageContainer$1.element);
-    wrapper.styles += imageContainer$1.styles;
+    const imageContainer$1 = new ElementBuilder().withClassName("umd-person-hero-image").withChild(imageBlock).withStyles({
+      element: {
+        backgroundColor: `${isThemeDark ? token.color.gray.lightest : token.color.gray.darker}`,
+        display: "flex",
+        justifyContent: "center",
+        marginBottom: token.spacing.md,
+        ["& img"]: {
+          [`@container (max-width: ${token.media.breakpoints.large.max})`]: {
+            maxHeight: "160px"
+          }
+        }
+      }
+    }).build();
+    wrapper.withChild(imageContainer$1);
   }
   if (association) {
-    const styledAssociation = sansLarge({
-      element: association,
-      isThemeDark: !isThemeDark,
-      elementStyles: {
+    wrapper.withChild(
+      new ElementBuilder(association).styled(
+        Styles.typography.sans.compose("large", {
+          theme: theme.fontColor(!isThemeDark)
+        })
+      ).withStyles({
         element: {
           display: "block"
         },
         siblingAfter: {
           marginTop: token.spacing.min
         }
-      }
-    });
-    wrapper.element.appendChild(styledAssociation.element);
-    wrapper.styles += styledAssociation.styles;
+      }).build()
+    );
   }
   if (pronouns) {
-    const italicStyle = document.createElement("i");
-    italicStyle.appendChild(pronouns);
-    const styledPronouns = create({
-      element: italicStyle,
-      className: "umd-person-hero-pronouns",
-      isThemeDark: !isThemeDark,
-      elementStyles: {
+    wrapper.withChild(
+      new ElementBuilder(document.createElement("i")).withClassName("umd-person-hero-pronouns").withStyles({
         element: {
-          display: "block"
+          display: "block",
+          color: `${isThemeDark ? token.color.black : token.color.white}`,
+          ["*"]: {
+            color: "currentColor"
+          }
         },
         siblingAfter: {
           display: "block",
           marginTop: token.spacing.min
         }
-      }
-    });
-    wrapper.element.appendChild(styledPronouns.element);
-    wrapper.styles += styledPronouns.styles;
+      }).withChild(pronouns).build()
+    );
   }
   if (contactContainer) {
-    wrapper.element.append(contactContainer.element);
-    wrapper.styles += contactContainer.styles;
+    wrapper.withChild(contactContainer);
   }
-  container.element.appendChild(wrapper.element);
-  container.styles += wrapper.styles;
-  return container;
+  const wrapperBuilt = wrapper.build();
+  return new ElementBuilder().withClassName("umd-person-hero-image-container").withChild(wrapperBuilt).withStyles({
+    element: {
+      paddingTop: `${token.spacing.lg}`,
+      paddingBottom: `${token.spacing.lg}`,
+      backgroundColor: `${isThemeDark ? token.color.gray.lightest : token.color.black}`,
+      position: "relative",
+      [`@container (max-width: ${token.media.breakpoints.large.max})`]: {
+        paddingLeft: `${token.spacing.md}`,
+        paddingRight: `${token.spacing.md}`
+      },
+      [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {
+        padding: `${token.spacing.md}`,
+        width: "30%",
+        maxWidth: "320px"
+      }
+    }
+  }).build();
 };
 const CreateTextContainer = ({
   name,
@@ -134,55 +117,22 @@ const CreateTextContainer = ({
   subText,
   isThemeDark
 }) => {
-  const container = create({
-    element: document.createElement("div"),
-    className: "person-hero-text",
-    elementStyles: {
-      element: {
-        backgroundColor: `${isThemeDark ? token.color.black : token.color.gray.lightest}`,
-        paddingTop: `${token.spacing["3xl"]}`,
-        paddingBottom: `${token.spacing["3xl"]}`,
-        position: "relative",
-        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {
-          paddingLeft: `${token.spacing.md}`,
-          paddingRight: `${token.spacing.md}`
-        },
-        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {
-          paddingTop: `0`,
-          paddingBottom: `${token.spacing["7xl"]}`,
-          alignSelf: "flex-start"
-        }
-      },
-      pseudoBefore: {
-        content: '""',
-        position: "absolute",
-        top: "-100px",
-        left: "0",
-        bottom: "0",
-        width: "200vw",
-        transform: "translateX(-20%)",
-        backgroundColor: `${isThemeDark ? token.color.black : token.color.gray.lightest}`
-      }
-    }
-  });
-  const lineWrapper = lineAdjustmentInset({
-    element: document.createElement("div"),
-    elementStyles: {
-      pseudoBefore: {
-        backgroundColor: `${isThemeDark ? token.color.gold : token.color.red}`
-      }
+  const lineWrapper = new ElementBuilder().styled(Styles.element.text.line.adjustentInset).withStyles({
+    pseudoBefore: {
+      backgroundColor: `${isThemeDark ? token.color.gold : token.color.red}`
     }
   });
   if (subText) {
-    const styledSubText = sansSmall({
-      element: subText,
-      isThemeDark,
-      elementStyles: {
+    lineWrapper.withChild(
+      new ElementBuilder(subText).styled(
+        Styles.typography.sans.compose("small", {
+          theme: theme.fontColor(isThemeDark)
+        })
+      ).withStyles({
         element: {
           display: "block",
           textTransform: "uppercase",
           fontWeight: "700",
-          color: `${token.color.black}`,
           maxWidth: "650px"
         },
         siblingAfter: {
@@ -191,21 +141,20 @@ const CreateTextContainer = ({
             marginTop: token.spacing.sm
           }
         }
-      }
-    });
-    lineWrapper.element.appendChild(styledSubText.element);
-    lineWrapper.styles += styledSubText.styles;
+      }).build()
+    );
   }
   if (name) {
-    const styledName = campaignLarge({
-      element: name,
-      isThemeDark,
-      elementStyles: {
+    lineWrapper.withChild(
+      new ElementBuilder(name).styled(
+        Styles.typography.campaign.compose("large", {
+          theme: theme.fontColor(isThemeDark)
+        })
+      ).withStyles({
         element: {
           textTransform: "uppercase",
           fontWeight: "700",
-          display: "block",
-          color: `${token.color.black}`
+          display: "block"
         },
         siblingAfter: {
           marginTop: token.spacing.min,
@@ -213,121 +162,111 @@ const CreateTextContainer = ({
             marginTop: token.spacing.md
           }
         }
-      }
-    });
-    lineWrapper.element.appendChild(styledName.element);
-    lineWrapper.styles += styledName.styles;
+      }).build()
+    );
   }
   if (job) {
-    const styledJob = sansMedium({
-      element: job,
-      isThemeDark,
-      elementStyles: {
+    lineWrapper.withChild(
+      new ElementBuilder(job).styled(
+        Styles.typography.sans.compose("medium", {
+          theme: theme.fontColor(isThemeDark)
+        })
+      ).withStyles({
         element: {
-          display: "block"
+          display: "block",
+          ...!isThemeDark && {
+            color: token.color.gray.dark
+          }
         }
-      }
-    });
-    lineWrapper.element.appendChild(styledJob.element);
-    lineWrapper.styles += styledJob.styles;
+      }).build()
+    );
   }
-  container.element.appendChild(lineWrapper.element);
-  container.styles += lineWrapper.styles;
-  return container;
+  const lineWrapperBuilt = lineWrapper.build();
+  return new ElementBuilder().withClassName("person-hero-text").withChild(lineWrapperBuilt).withStyles({
+    element: {
+      backgroundColor: `${isThemeDark ? token.color.black : token.color.gray.lightest}`,
+      paddingTop: `${token.spacing["3xl"]}`,
+      paddingBottom: `${token.spacing["3xl"]}`,
+      position: "relative",
+      [`@container (max-width: ${token.media.breakpoints.large.max})`]: {
+        paddingLeft: `${token.spacing.md}`,
+        paddingRight: `${token.spacing.md}`
+      },
+      [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {
+        paddingTop: `0`,
+        paddingBottom: `${token.spacing["7xl"]}`,
+        alignSelf: "flex-start"
+      }
+    },
+    pseudoBefore: {
+      content: '""',
+      position: "absolute",
+      top: "-100px",
+      left: "0",
+      bottom: "0",
+      width: "200vw",
+      transform: "translateX(-20%)",
+      backgroundColor: `${isThemeDark ? token.color.black : token.color.gray.lightest}`
+    }
+  }).build();
 };
 const hero = (props) => {
   const { breadcrumbMobile, breadcrumbDesktop } = props;
-  const composite = create({
-    element: document.createElement("div"),
-    className: "umd-person-hero",
-    elementStyles: {
-      element: {
-        overflow: "hidden",
-        containerType: "inline-size"
+  const textContainer = CreateTextContainer(props);
+  const textColumns = new ElementBuilder().withClassName("umd-person-hero-columns").withChild(textContainer).withStyles({
+    element: {
+      [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {
+        width: "70%"
       }
     }
   });
-  const elementLock = spaceHorizontalLarger({
-    element: document.createElement("div"),
-    elementStyles: {
+  if (breadcrumbDesktop) {
+    const textColumnBreadcrumb = new ElementBuilder().withClassName("umd-person-hero-breadcrumb-desktop").withChild(breadcrumbDesktop).withStyles({
       element: {
         [`@container (max-width: ${token.media.breakpoints.large.max})`]: {
-          padding: "0"
+          display: "none"
         }
       }
-    }
-  });
-  const elementWrapper = create({
-    element: document.createElement("div"),
-    className: "umd-person-hero-wrapper",
-    elementStyles: {
-      element: {
-        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {
-          display: "flex",
-          justifyContent: "space-between",
-          paddingTop: `${token.spacing["7xl"]}`
-        }
+    }).build();
+    textColumns.withChild(textColumnBreadcrumb);
+  }
+  const textColumnsBuilt = textColumns.build();
+  const imageBlock = CreateImageBlock(props);
+  const elementWrapper = new ElementBuilder().withClassName("umd-person-hero-wrapper").withChild(textColumnsBuilt).withChild(imageBlock).withStyles({
+    element: {
+      [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {
+        display: "flex",
+        justifyContent: "space-between",
+        paddingTop: `${token.spacing["7xl"]}`
       }
     }
-  });
-  const textColumns = create({
-    element: document.createElement("div"),
-    className: "umd-person-hero-columns",
-    elementStyles: {
-      element: {
-        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {
-          width: "70%"
-        }
+  }).build();
+  const elementLock = new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(elementWrapper).withStyles({
+    element: {
+      [`@container (max-width: ${token.media.breakpoints.large.max})`]: {
+        padding: "0"
       }
     }
   });
-  const textContainer = CreateTextContainer(props);
-  textColumns.element.appendChild(textContainer.element);
-  textColumns.styles += textContainer.styles;
-  elementWrapper.element.appendChild(textColumns.element);
-  elementWrapper.styles += textColumns.styles;
-  if (breadcrumbDesktop) {
-    const textColumnBreadcrumb = create({
-      element: document.createElement("div"),
-      className: "umd-person-hero-breadcrumb-desktop",
-      elementStyles: {
-        element: {
-          [`@container (max-width: ${token.media.breakpoints.large.max})`]: {
-            display: "none"
-          }
-        }
-      }
-    });
-    textColumnBreadcrumb.element.appendChild(breadcrumbDesktop);
-    textColumns.element.appendChild(textColumnBreadcrumb.element);
-    elementWrapper.styles += textColumnBreadcrumb.styles;
-  }
-  const imageBlock = CreateImageBlock(props);
-  elementWrapper.element.appendChild(imageBlock.element);
-  elementWrapper.styles += imageBlock.styles;
-  elementLock.element.appendChild(elementWrapper.element);
-  elementLock.styles += elementWrapper.styles;
-  composite.element.appendChild(elementLock.element);
-  composite.styles += elementLock.styles;
   if (breadcrumbMobile) {
-    const mainBreadcrumb = create({
-      element: document.createElement("div"),
-      className: "umd-person-hero-breadcrumb-mobile",
-      elementStyles: {
-        element: {
-          paddingLeft: `${token.spacing.md}`,
-          paddingRight: `${token.spacing.md}`,
-          [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {
-            display: "none"
-          }
+    const mainBreadcrumb = new ElementBuilder().withClassName("umd-person-hero-breadcrumb-mobile").withChild(breadcrumbMobile).withStyles({
+      element: {
+        paddingLeft: `${token.spacing.md}`,
+        paddingRight: `${token.spacing.md}`,
+        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {
+          display: "none"
         }
       }
-    });
-    mainBreadcrumb.element.appendChild(breadcrumbMobile);
-    elementLock.element.appendChild(mainBreadcrumb.element);
-    composite.styles += mainBreadcrumb.styles;
+    }).build();
+    elementLock.withChild(mainBreadcrumb);
   }
-  return composite;
+  const elementLockBuilt = elementLock.build();
+  return new ElementBuilder().withClassName("umd-person-hero").withChild(elementLockBuilt).withStyles({
+    element: {
+      overflow: "hidden",
+      containerType: "inline-size"
+    }
+  }).build();
 };
 export {
   hero as default

package/dist/composite/person/hero.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"hero.mjs","sources":["../../../source/composite/person/hero.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonContact } from './_types';\n\ninterface Theme {\n  isThemeDark?: boolean;\n}\n\ninterface PersonText extends Theme {\n  name: HTMLElement | null;\n  job?: HTMLElement | null;\n  subText?: HTMLElement | null;\n}\n\ninterface PersonInfo extends PersonContact, Theme {\n  image?: HTMLImageElement | null;\n  association?: HTMLElement | null;\n  pronouns?: HTMLElement | null;\n}\n\ninterface PersonHero extends PersonText, PersonInfo {\n  breadcrumbMobile?: HTMLElement | null;\n  breadcrumbDesktop?: HTMLElement | null;\n}\n\nconst CreateImageBlock = (props: PersonInfo) => {\n  const { image, association, pronouns, isThemeDark } = props;\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-image-container',\n    elementStyles: {\n      element: {\n        paddingTop: `${token.spacing.lg}`,\n        paddingBottom: `${token.spacing.lg}`,\n        backgroundColor: `${\n          isThemeDark ? token.color.gray.lightest : token.color.black\n        }`,\n        position: 'relative',\n\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n        },\n\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          padding: `${token.spacing.md}`,\n          width: '30%',\n          maxWidth: '320px',\n        },\n      },\n    },\n  });\n\n  const wrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-image-wrapper',\n  });\n\n  const contactContainer = textLockup.contact({\n    ...props,\n    isThemeDark: !isThemeDark,\n  });\n\n  if (image) {\n    const imageContainer = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-image',\n      elementStyles: {\n        element: {\n          backgroundColor: `${\n            isThemeDark ? token.color.gray.lightest : token.color.gray.darker\n          }`,\n          display: 'flex',\n          justifyContent: 'center',\n          marginBottom: token.spacing.md,\n\n          ['& img']: {\n            [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n              maxHeight: '160px',\n            },\n          },\n        },\n      },\n    });\n    const imageBlock = assets.image.background({\n      element: image,\n      isScaled: false,\n    });\n\n    imageContainer.element.appendChild(imageBlock.element);\n    imageContainer.styles += imageBlock.styles;\n    wrapper.element.appendChild(imageContainer.element);\n    wrapper.styles += imageContainer.styles;\n  }\n\n  if (association) {\n    const styledAssociation = ElementModel.headline.sansLarge({\n      element: association,\n      isThemeDark: !isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n        siblingAfter: {\n          marginTop: token.spacing.min,\n        },\n      },\n    });\n    wrapper.element.appendChild(styledAssociation.element);\n    wrapper.styles += styledAssociation.styles;\n  }\n\n  if (pronouns) {\n    const italicStyle = document.createElement('i');\n    italicStyle.appendChild(pronouns);\n\n    const styledPronouns = ElementModel.create({\n      element: italicStyle,\n      className: 'umd-person-hero-pronouns',\n      isThemeDark: !isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n        siblingAfter: {\n          display: 'block',\n          marginTop: token.spacing.min,\n        },\n      },\n    });\n\n    wrapper.element.appendChild(styledPronouns.element);\n    wrapper.styles += styledPronouns.styles;\n  }\n\n  if (contactContainer) {\n    wrapper.element.append(contactContainer.element);\n    wrapper.styles += contactContainer.styles;\n  }\n\n  container.element.appendChild(wrapper.element);\n  container.styles += wrapper.styles;\n  return container;\n};\n\nconst CreateTextContainer = ({\n  name,\n  job,\n  subText,\n  isThemeDark,\n}: PersonText) => {\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'person-hero-text',\n    elementStyles: {\n      element: {\n        backgroundColor: `${\n          isThemeDark ? token.color.black : token.color.gray.lightest\n        }`,\n        paddingTop: `${token.spacing['3xl']}`,\n        paddingBottom: `${token.spacing['3xl']}`,\n        position: 'relative',\n\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n        },\n\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          paddingTop: `0`,\n          paddingBottom: `${token.spacing['7xl']}`,\n          alignSelf: 'flex-start',\n        },\n      },\n      pseudoBefore: {\n        content: '\"\"',\n        position: 'absolute',\n        top: '-100px',\n        left: '0',\n        bottom: '0',\n        width: '200vw',\n        transform: 'translateX(-20%)',\n        backgroundColor: `${\n          isThemeDark ? token.color.black : token.color.gray.lightest\n        }`,\n      },\n    },\n  });\n\n  const lineWrapper = ElementModel.text.lineAdjustmentInset({\n    element: document.createElement('div'),\n    elementStyles: {\n      pseudoBefore: {\n        backgroundColor: `${isThemeDark ? token.color.gold : token.color.red}`,\n      },\n    },\n  });\n\n  if (subText) {\n    const styledSubText = ElementModel.headline.sansSmall({\n      element: subText,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n          textTransform: 'uppercase',\n          fontWeight: '700',\n          color: `${token.color.black}`,\n          maxWidth: '650px',\n        },\n        siblingAfter: {\n          marginTop: token.spacing.min,\n\n          [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      },\n    });\n\n    lineWrapper.element.appendChild(styledSubText.element);\n    lineWrapper.styles += styledSubText.styles;\n  }\n\n  if (name) {\n    const styledName = ElementModel.headline.campaignLarge({\n      element: name,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          textTransform: 'uppercase',\n          fontWeight: '700',\n          display: 'block',\n          color: `${token.color.black}`,\n        },\n        siblingAfter: {\n          marginTop: token.spacing.min,\n\n          [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n            marginTop: token.spacing.md,\n          },\n        },\n      },\n    });\n\n    lineWrapper.element.appendChild(styledName.element);\n    lineWrapper.styles += styledName.styles;\n  }\n\n  if (job) {\n    const styledJob = ElementModel.headline.sansMedium({\n      element: job,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n      },\n    });\n    lineWrapper.element.appendChild(styledJob.element);\n    lineWrapper.styles += styledJob.styles;\n  }\n\n  container.element.appendChild(lineWrapper.element);\n  container.styles += lineWrapper.styles;\n\n  return container;\n};\n\nexport default (props: PersonHero) => {\n  const { breadcrumbMobile, breadcrumbDesktop } = props;\n  const composite = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero',\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        containerType: 'inline-size',\n      },\n    },\n  });\n  const elementLock = ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    elementStyles: {\n      element: {\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          padding: '0',\n        },\n      },\n    },\n  });\n\n  const elementWrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-wrapper',\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          display: 'flex',\n          justifyContent: 'space-between',\n          paddingTop: `${token.spacing['7xl']}`,\n        },\n      },\n    },\n  });\n\n  const textColumns = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-columns',\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          width: '70%',\n        },\n      },\n    },\n  });\n\n  const textContainer = CreateTextContainer(props);\n\n  textColumns.element.appendChild(textContainer.element);\n  textColumns.styles += textContainer.styles;\n  elementWrapper.element.appendChild(textColumns.element);\n  elementWrapper.styles += textColumns.styles;\n\n  if (breadcrumbDesktop) {\n    const textColumnBreadcrumb = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-breadcrumb-desktop',\n      elementStyles: {\n        element: {\n          [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n            display: 'none',\n          },\n        },\n      },\n    });\n\n    textColumnBreadcrumb.element.appendChild(breadcrumbDesktop);\n    textColumns.element.appendChild(textColumnBreadcrumb.element);\n    elementWrapper.styles += textColumnBreadcrumb.styles;\n  }\n\n  const imageBlock = CreateImageBlock(props);\n  elementWrapper.element.appendChild(imageBlock.element);\n  elementWrapper.styles += imageBlock.styles;\n\n  elementLock.element.appendChild(elementWrapper.element);\n  elementLock.styles += elementWrapper.styles;\n\n  composite.element.appendChild(elementLock.element);\n  composite.styles += elementLock.styles;\n\n  if (breadcrumbMobile) {\n    const mainBreadcrumb = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-breadcrumb-mobile',\n      elementStyles: {\n        element: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n\n          [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n            display: 'none',\n          },\n        },\n      },\n    });\n\n    mainBreadcrumb.element.appendChild(breadcrumbMobile);\n    elementLock.element.appendChild(mainBreadcrumb.element);\n    composite.styles += mainBreadcrumb.styles;\n  }\n\n  return composite;\n};\n"],"names":["ElementModel.create","textLockup.contact","imageContainer","assets.image.background","ElementModel.headline.sansLarge","ElementModel.text.lineAdjustmentInset","ElementModel.headline.sansSmall","ElementModel.headline.campaignLarge","ElementModel.headline.sansMedium","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
+{"version":3,"file":"hero.mjs","sources":["../../../source/composite/person/hero.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { PersonContact } from './_types';\nimport { type ElementModel } from '../../_types';\n\ninterface Theme {\n  isThemeDark?: boolean;\n}\n\ninterface PersonText extends Theme {\n  name: HTMLElement | null;\n  job?: HTMLElement | null;\n  subText?: HTMLElement | null;\n}\n\ninterface PersonInfo extends PersonContact, Theme {\n  image?: HTMLImageElement | null;\n  association?: HTMLElement | null;\n  pronouns?: HTMLElement | null;\n}\n\ninterface PersonHero extends PersonText, PersonInfo {\n  breadcrumbMobile?: HTMLElement | null;\n  breadcrumbDesktop?: HTMLElement | null;\n}\n\nconst CreateImageBlock = (props: PersonInfo): ElementModel<HTMLElement> => {\n  const { image, association, pronouns, isThemeDark } = props;\n\n  const wrapper = new ElementBuilder().withClassName(\n    'umd-person-hero-image-wrapper',\n  );\n\n  const contactContainer = textLockup.contact({\n    ...props,\n    isThemeDark: !isThemeDark,\n  });\n\n  if (image) {\n    const imageBlock = assets.image.background({\n      element: image,\n      isScaled: false,\n    });\n\n    const imageContainer = new ElementBuilder()\n      .withClassName('umd-person-hero-image')\n      .withChild(imageBlock)\n      .withStyles({\n        element: {\n          backgroundColor: `${\n            isThemeDark ? token.color.gray.lightest : token.color.gray.darker\n          }`,\n          display: 'flex',\n          justifyContent: 'center',\n          marginBottom: token.spacing.md,\n\n          ['& img']: {\n            [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n              maxHeight: '160px',\n            },\n          },\n        },\n      })\n      .build();\n\n    wrapper.withChild(imageContainer);\n  }\n\n  if (association) {\n    wrapper.withChild(\n      new ElementBuilder(association)\n        .styled(\n          Styles.typography.sans.compose('large', {\n            theme: theme.fontColor(!isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: token.spacing.min,\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (pronouns) {\n    wrapper.withChild(\n      new ElementBuilder(document.createElement('i'))\n        .withClassName('umd-person-hero-pronouns')\n        .withStyles({\n          element: {\n            display: 'block',\n            color: `${isThemeDark ? token.color.black : token.color.white}`,\n\n            ['*']: {\n              color: 'currentColor',\n            },\n          },\n          siblingAfter: {\n            display: 'block',\n            marginTop: token.spacing.min,\n          },\n        })\n        .withChild(pronouns)\n        .build(),\n    );\n  }\n\n  if (contactContainer) {\n    wrapper.withChild(contactContainer);\n  }\n\n  const wrapperBuilt = wrapper.build();\n\n  return new ElementBuilder()\n    .withClassName('umd-person-hero-image-container')\n    .withChild(wrapperBuilt)\n    .withStyles({\n      element: {\n        paddingTop: `${token.spacing.lg}`,\n        paddingBottom: `${token.spacing.lg}`,\n        backgroundColor: `${\n          isThemeDark ? token.color.gray.lightest : token.color.black\n        }`,\n        position: 'relative',\n\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n        },\n\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          padding: `${token.spacing.md}`,\n          width: '30%',\n          maxWidth: '320px',\n        },\n      },\n    })\n    .build();\n};\n\nconst CreateTextContainer = ({\n  name,\n  job,\n  subText,\n  isThemeDark,\n}: PersonText): ElementModel<HTMLElement> => {\n  const lineWrapper = new ElementBuilder()\n    .styled(Styles.element.text.line.adjustentInset)\n    .withStyles({\n      pseudoBefore: {\n        backgroundColor: `${isThemeDark ? token.color.gold : token.color.red}`,\n      },\n    });\n\n  if (subText) {\n    lineWrapper.withChild(\n      new ElementBuilder(subText)\n        .styled(\n          Styles.typography.sans.compose('small', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            display: 'block',\n            textTransform: 'uppercase',\n            fontWeight: '700',\n            maxWidth: '650px',\n          },\n          siblingAfter: {\n            marginTop: token.spacing.min,\n\n            [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n              marginTop: token.spacing.sm,\n            },\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (name) {\n    lineWrapper.withChild(\n      new ElementBuilder(name)\n        .styled(\n          Styles.typography.campaign.compose('large', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            textTransform: 'uppercase',\n            fontWeight: '700',\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: token.spacing.min,\n\n            [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n              marginTop: token.spacing.md,\n            },\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (job) {\n    lineWrapper.withChild(\n      new ElementBuilder(job)\n        .styled(\n          Styles.typography.sans.compose('medium', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            display: 'block',\n\n            ...(!isThemeDark && {\n              color: token.color.gray.dark,\n            }),\n          },\n        })\n        .build(),\n    );\n  }\n\n  const lineWrapperBuilt = lineWrapper.build();\n\n  return new ElementBuilder()\n    .withClassName('person-hero-text')\n    .withChild(lineWrapperBuilt)\n    .withStyles({\n      element: {\n        backgroundColor: `${\n          isThemeDark ? token.color.black : token.color.gray.lightest\n        }`,\n        paddingTop: `${token.spacing['3xl']}`,\n        paddingBottom: `${token.spacing['3xl']}`,\n        position: 'relative',\n\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n        },\n\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          paddingTop: `0`,\n          paddingBottom: `${token.spacing['7xl']}`,\n          alignSelf: 'flex-start',\n        },\n      },\n      pseudoBefore: {\n        content: '\"\"',\n        position: 'absolute',\n        top: '-100px',\n        left: '0',\n        bottom: '0',\n        width: '200vw',\n        transform: 'translateX(-20%)',\n        backgroundColor: `${\n          isThemeDark ? token.color.black : token.color.gray.lightest\n        }`,\n      },\n    })\n    .build();\n};\n\nexport default (props: PersonHero): ElementModel<HTMLElement> => {\n  const { breadcrumbMobile, breadcrumbDesktop } = props;\n  const textContainer = CreateTextContainer(props);\n\n  const textColumns = new ElementBuilder()\n    .withClassName('umd-person-hero-columns')\n    .withChild(textContainer)\n    .withStyles({\n      element: {\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          width: '70%',\n        },\n      },\n    });\n\n  if (breadcrumbDesktop) {\n    const textColumnBreadcrumb = new ElementBuilder()\n      .withClassName('umd-person-hero-breadcrumb-desktop')\n      .withChild(breadcrumbDesktop)\n      .withStyles({\n        element: {\n          [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n            display: 'none',\n          },\n        },\n      })\n      .build();\n\n    textColumns.withChild(textColumnBreadcrumb);\n  }\n\n  const textColumnsBuilt = textColumns.build();\n  const imageBlock = CreateImageBlock(props);\n\n  const elementWrapper = new ElementBuilder()\n    .withClassName('umd-person-hero-wrapper')\n    .withChild(textColumnsBuilt)\n    .withChild(imageBlock)\n    .withStyles({\n      element: {\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          display: 'flex',\n          justifyContent: 'space-between',\n          paddingTop: `${token.spacing['7xl']}`,\n        },\n      },\n    })\n    .build();\n\n  const elementLock = new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(elementWrapper)\n    .withStyles({\n      element: {\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          padding: '0',\n        },\n      },\n    });\n\n  if (breadcrumbMobile) {\n    const mainBreadcrumb = new ElementBuilder()\n      .withClassName('umd-person-hero-breadcrumb-mobile')\n      .withChild(breadcrumbMobile)\n      .withStyles({\n        element: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n\n          [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n            display: 'none',\n          },\n        },\n      })\n      .build();\n\n    elementLock.withChild(mainBreadcrumb);\n  }\n\n  const elementLockBuilt = elementLock.build();\n\n  return new ElementBuilder()\n    .withClassName('umd-person-hero')\n    .withChild(elementLockBuilt)\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n};\n"],"names":["textLockup.contact","assets.image.background","imageContainer"],"mappings":"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"}

package/dist/composite/person/list.d.ts

@@ -1,8 +1,5 @@
 import { PersonCard } from './_types';
-declare const _default: ({ actions, address, association, email, image, isThemeDark, job, linkendIn, name, phone, pronouns, subText, }: PersonCard) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+import { ElementModel } from '../../_types';
+declare const _default: ({ actions, address, association, email, image, isThemeDark, job, linkendIn, name, phone, pronouns, subText, }: PersonCard) => ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=list.d.ts.map

package/dist/composite/person/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../source/composite/person/list.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;yBAOtB,+GAab,UAAU;;;;;AAbb,wBAsEE"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../source/composite/person/list.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;yBAMjC,+GAab,UAAU,KAAG,YAAY,CAAC,WAAW,CAAC;AAbzC,wBAoEE"}

package/dist/composite/person/list.js

@@ -1,8 +1,11 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
-const index = require("../../model/elements/index.js");
 require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-styles-library/layout");
+require("@universityofmaryland/web-styles-library/animation");
+require("@universityofmaryland/web-styles-library/typography");
 require("@universityofmaryland/web-utilities-library/media");
 require("@universityofmaryland/web-utilities-library/dom");
 require("@universityofmaryland/web-icons-library/controls");
@@ -13,17 +16,18 @@ require("@universityofmaryland/web-icons-library/arrows");
 require("../../atomic/animations/actions/indicator.js");
 require("../../atomic/animations/brand/chevron-scroll.js");
 require("../../atomic/animations/brand/card-stack.js");
+require("@universityofmaryland/web-styles-library");
 require("@universityofmaryland/web-utilities-library/performance");
 require("@universityofmaryland/web-utilities-library/accessibility");
 require("@universityofmaryland/web-icons-library/location");
 require("@universityofmaryland/web-icons-library/calendar");
+require("@universityofmaryland/web-utilities-library/theme");
 require("../../atomic/layout/block/stacked.js");
 require("../../atomic/layout/overlay/modal.js");
 const columns = require("../../atomic/layout/person/columns.js");
 require("@universityofmaryland/web-icons-library/social");
 require("../../atomic/text-lockup/date.js");
 require("../../atomic/text-lockup/small.js");
-require("@universityofmaryland/web-styles-library/typography");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -58,9 +62,17 @@ const list = ({
   pronouns,
   subText
 }) => {
-  let children = [];
+  const builder = new webBuilderLibrary.ElementBuilder().withClassName("person-list-container").withStyles({
+    element: {
+      overflow: "hidden",
+      display: "flex",
+      ...styles.createMediaQuery("max-width", smallBreakpoint, {
+        flexDirection: "column"
+      })
+    }
+  });
   if (image) {
-    children.push(
+    builder.withChild(
       columns.image({
         customStyles: {
           ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
@@ -79,7 +91,7 @@ const list = ({
     );
   }
   if (name) {
-    children.push(
+    builder.withChild(
       columns.information({
         actions,
         address,
@@ -96,19 +108,7 @@ const list = ({
       })
     );
   }
-  return index.createDiv({
-    className: "person-list-container",
-    children,
-    elementStyles: {
-      element: {
-        overflow: "hidden",
-        display: "flex",
-        ...styles.createMediaQuery("max-width", smallBreakpoint, {
-          flexDirection: "column"
-        })
-      }
-    }
-  });
+  return builder.build();
 };
 module.exports = list;
 //# sourceMappingURL=list.js.map