@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

package/dist/composite/hero/logo.js

@@ -1,13 +1,18 @@
 "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 elementStyles = require("@universityofmaryland/web-styles-library/element");
+const Styles = require("@universityofmaryland/web-styles-library");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
+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");
 require("@universityofmaryland/web-icons-library/communication");
 require("@universityofmaryland/web-icons-library/files");
 require("@universityofmaryland/web-icons-library/brand");
-const index = require("../../model/elements/index.js");
 require("@universityofmaryland/web-icons-library/arrows");
 require("../../atomic/animations/actions/indicator.js");
 require("../../atomic/animations/brand/chevron-scroll.js");
@@ -24,9 +29,6 @@ require("@universityofmaryland/web-icons-library/social");
 require("../../atomic/text-lockup/date.js");
 const large = require("../../atomic/text-lockup/large.js");
 require("../../atomic/text-lockup/small.js");
-require("@universityofmaryland/web-styles-library/typography");
-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) {
@@ -45,6 +47,7 @@ function _interopNamespaceDefault(e) {
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
 const getBackgroundColor = (props) => {
   const { isThemeDark, isThemeMaryland, isThemeLight } = props;
   if (isThemeDark) return token__namespace.color.black;
@@ -54,48 +57,44 @@ const getBackgroundColor = (props) => {
 };
 const createAsset = ({ image }) => {
   if (!image) return null;
-  return index.createDiv({
-    className: "umd-hero-logo__asset",
-    children: [
-      background({
-        element: image,
-        isScaled: false
-      })
-    ],
-    elementStyles: {
-      element: {
-        textAlign: "center",
-        display: "flex",
-        justifyContent: "center",
-        maxWidth: "800px",
-        margin: "0 auto",
-        marginBottom: token__namespace.spacing.xl,
-        ["& img"]: {
-          maxWidth: "100%",
-          maxHeight: "500px",
-          marginLeft: "auto",
-          marginRight: "auto"
-        }
+  return new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-logo__asset").withChild(
+    background({
+      element: image,
+      isScaled: false
+    })
+  ).withStyles({
+    element: {
+      textAlign: "center",
+      display: "flex",
+      justifyContent: "center",
+      maxWidth: "800px",
+      margin: "0 auto",
+      marginBottom: token__namespace.spacing.xl,
+      ["& img"]: {
+        maxWidth: "100%",
+        maxHeight: "500px",
+        marginLeft: "auto",
+        marginRight: "auto"
       }
     }
-  });
+  }).build();
 };
 const createHeadline = (props) => {
-  const { headline: headline$1, isThemeDark, isThemeMaryland } = props;
-  if (!headline$1) return null;
-  const headlineElement = headline.campaignLarge({
-    element: headline$1,
-    elementStyles: {
-      element: {
-        textTransform: "uppercase"
-      },
-      siblingAfter: {
-        marginTop: token__namespace.spacing.sm
-      }
+  const { headline, isThemeDark, isThemeMaryland } = props;
+  const finalIsThemeDark = isThemeDark || isThemeMaryland;
+  if (!headline) return null;
+  return new webBuilderLibrary.ElementBuilder(headline).styled(
+    Styles__namespace.typography.campaign.compose("large", {
+      theme: theme.theme.fontColor(finalIsThemeDark)
+    })
+  ).withStyles({
+    element: {
+      textTransform: "uppercase"
     },
-    isThemeDark: isThemeDark || isThemeMaryland || false
-  });
-  return headlineElement;
+    siblingAfter: {
+      marginTop: token__namespace.spacing.sm
+    }
+  }).build();
 };
 const createText = (props) => {
   const { isThemeDark, isThemeMaryland } = props;
@@ -106,69 +105,52 @@ const createText = (props) => {
     actions: props.actions,
     isThemeDark: isThemeDark || isThemeMaryland || false
   });
-  const textContent = index.createDiv({
-    className: "umd-hero-logo__text-content",
-    children: [textLockupElement],
-    elementStyles: {
-      element: {
-        [`& .${elementStyles__namespace.text.rich.simpleLargest.className}`]: {
-          color: token__namespace.color.gray.dark
-        }
+  const textContent = new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-logo__text-content").withChild(textLockupElement).withStyles({
+    element: {
+      [`& .${elementStyles__namespace.text.rich.simpleLargest.className}`]: {
+        color: token__namespace.color.gray.dark
       }
     }
-  });
-  return index.createDiv({
-    className: "umd-hero-logo__text",
-    children: [textContent],
-    elementStyles: {
-      element: {
-        display: "flex",
-        justifyContent: "center",
-        textAlign: "center"
-      }
+  }).build();
+  return new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-logo__text").withChild(textContent).withStyles({
+    element: {
+      display: "flex",
+      justifyContent: "center",
+      textAlign: "center"
     }
-  });
+  }).build();
 };
 const makeLock = (props) => {
   const asset = createAsset(props);
   const text = createText(props);
-  const children = [];
+  const builder = new webBuilderLibrary.ElementBuilder().styled(
+    Styles__namespace.layout.space.horizontal.small
+  );
   if (asset) {
-    children.push(asset);
+    builder.withChild(asset);
   }
-  children.push(text);
-  return layout.spaceHorizontalSmall({
-    element: document.createElement("div"),
-    children
-  });
+  builder.withChild(text);
+  return builder.build();
 };
 const logo = (props) => {
   const { isThemeDark } = props;
-  const container = index.createDiv({
-    className: "umd-hero-logo__container",
-    children: [makeLock(props)],
-    elementStyles: {
-      element: {
-        padding: `${token__namespace.spacing["5xl"]} 0 ${token__namespace.spacing.lg}`,
-        backgroundColor: getBackgroundColor(props),
-        // Dark them should have additonal padding at the bottom
-        [`@container (${token__namespace.media.queries.desktop.min})`]: {
-          ...isThemeDark && {
-            paddingBottom: `${token__namespace.spacing["5xl"]}`
-          }
+  const container = new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-logo__container").withChild(makeLock(props)).withStyles({
+    element: {
+      padding: `${token__namespace.spacing["5xl"]} 0 ${token__namespace.spacing.lg}`,
+      backgroundColor: getBackgroundColor(props),
+      // Dark them should have additonal padding at the bottom
+      [`@container (${token__namespace.media.queries.desktop.min})`]: {
+        ...isThemeDark && {
+          paddingBottom: `${token__namespace.spacing["5xl"]}`
         }
       }
     }
-  });
-  return index.createDiv({
-    className: "umd-hero-logo",
-    children: [container],
-    elementStyles: {
-      element: {
-        containerType: "inline-size"
-      }
+  }).build();
+  return new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-logo").withChild(container).withStyles({
+    element: {
+      containerType: "inline-size"
     }
-  });
+  }).build();
 };
 module.exports = logo;
 //# sourceMappingURL=logo.js.map

package/dist/composite/hero/logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"logo.js","sources":["../../../source/composite/hero/logo.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type HeroLogoProps } from './_types';\nimport { type ElementVisual } from '../../_types';\n\nconst getBackgroundColor = (props: HeroLogoProps) => {\n  const { isThemeDark, isThemeMaryland, isThemeLight } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return token.color.white;\n};\n\nconst createAsset = ({ image }: Pick<HeroLogoProps, 'image'>) => {\n  if (!image) return null;\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo__asset',\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    ],\n    elementStyles: {\n      element: {\n        textAlign: 'center',\n        display: 'flex',\n        justifyContent: 'center',\n        maxWidth: '800px',\n        margin: '0 auto',\n        marginBottom: token.spacing.xl,\n\n        ['& img']: {\n          maxWidth: '100%',\n          maxHeight: '500px',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        },\n      },\n    },\n  });\n};\n\nconst createHeadline = (\n  props: Pick<HeroLogoProps, 'headline' | 'isThemeDark' | 'isThemeMaryland'>,\n) => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n\n  if (!headline) return null;\n\n  const headlineElement = ElementModel.headline.campaignLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    },\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  return headlineElement;\n};\n\nconst createText = (\n  props: Omit<HeroLogoProps, 'image' | 'video' | 'includesAnimation' | 'logo'>,\n) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textContent = ElementModel.createDiv({\n    className: 'umd-hero-logo__text-content',\n    children: [textLockupElement],\n    elementStyles: {\n      element: {\n        [`& .${elementStyles.text.rich.simpleLargest.className}`]: {\n          color: token.color.gray.dark,\n        },\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo__text',\n    children: [textContent],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        textAlign: 'center',\n      },\n    },\n  });\n};\n\nconst makeLock = (props: HeroLogoProps) => {\n  const asset = createAsset(props);\n  const text = createText(props);\n  const children: ElementVisual[] = [];\n\n  if (asset) {\n    children.push(asset);\n  }\n\n  children.push(text);\n\n  return ElementModel.layout.spaceHorizontalSmall({\n    element: document.createElement('div'),\n    children,\n  });\n};\n\nexport default (props: HeroLogoProps) => {\n  const { isThemeDark } = props;\n\n  const container = ElementModel.createDiv({\n    className: 'umd-hero-logo__container',\n    children: [makeLock(props)],\n    elementStyles: {\n      element: {\n        padding: `${token.spacing['5xl']} 0 ${token.spacing.lg}`,\n        backgroundColor: getBackgroundColor(props),\n\n        // Dark them should have additonal padding at the bottom\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isThemeDark && {\n            paddingBottom: `${token.spacing['5xl']}`,\n          }),\n        },\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo',\n    children: [container],\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n      },\n    },\n  });\n};\n"],"names":["token","ElementModel.createDiv","assets.image.background","headline","ElementModel.headline.campaignLarge","textLockup.large","elementStyles","ElementModel.layout.spaceHorizontalSmall"],"mappings":"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"}
+{"version":3,"file":"logo.js","sources":["../../../source/composite/hero/logo.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 Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { type HeroLogoProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst getBackgroundColor = (props: HeroLogoProps) => {\n  const { isThemeDark, isThemeMaryland, isThemeLight } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return token.color.white;\n};\n\nconst createAsset = ({ image }: Pick<HeroLogoProps, 'image'>) => {\n  if (!image) return null;\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-logo__asset')\n    .withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    )\n    .withStyles({\n      element: {\n        textAlign: 'center',\n        display: 'flex',\n        justifyContent: 'center',\n        maxWidth: '800px',\n        margin: '0 auto',\n        marginBottom: token.spacing.xl,\n\n        ['& img']: {\n          maxWidth: '100%',\n          maxHeight: '500px',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        },\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<HeroLogoProps, 'headline' | 'isThemeDark' | 'isThemeMaryland'>,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const finalIsThemeDark = isThemeDark || isThemeMaryland;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.campaign.compose('large', {\n        theme: theme.fontColor(finalIsThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n};\n\nconst createText = (\n  props: Omit<HeroLogoProps, 'image' | 'video' | 'includesAnimation' | 'logo'>,\n) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textContent = new ElementBuilder()\n    .withClassName('umd-hero-logo__text-content')\n    .withChild(textLockupElement)\n    .withStyles({\n      element: {\n        [`& .${elementStyles.text.rich.simpleLargest.className}`]: {\n          color: token.color.gray.dark,\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-logo__text')\n    .withChild(textContent)\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        textAlign: 'center',\n      },\n    })\n    .build();\n};\n\nconst makeLock = (props: HeroLogoProps) => {\n  const asset = createAsset(props);\n  const text = createText(props);\n\n  const builder = new ElementBuilder().styled(\n    Styles.layout.space.horizontal.small,\n  );\n\n  if (asset) {\n    builder.withChild(asset);\n  }\n\n  builder.withChild(text);\n\n  return builder.build();\n};\n\nexport default (props: HeroLogoProps) => {\n  const { isThemeDark } = props;\n\n  const container = new ElementBuilder()\n    .withClassName('umd-hero-logo__container')\n    .withChild(makeLock(props))\n    .withStyles({\n      element: {\n        padding: `${token.spacing['5xl']} 0 ${token.spacing.lg}`,\n        backgroundColor: getBackgroundColor(props),\n\n        // Dark them should have additonal padding at the bottom\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isThemeDark && {\n            paddingBottom: `${token.spacing['5xl']}`,\n          }),\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-logo')\n    .withChild(container)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n};\n"],"names":["token","ElementBuilder","assets.image.background","Styles","theme","textLockup.large","elementStyles"],"mappings":"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"}

package/dist/composite/hero/logo.mjs

@@ -1,12 +1,17 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
 import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
+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 { createDiv } from "../../model/elements/index.mjs";
 import "@universityofmaryland/web-icons-library/arrows";
 import "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
@@ -23,9 +28,6 @@ import "@universityofmaryland/web-icons-library/social";
 import "../../atomic/text-lockup/date.mjs";
 import large from "../../atomic/text-lockup/large.mjs";
 import "../../atomic/text-lockup/small.mjs";
-import "@universityofmaryland/web-styles-library/typography";
-import { spaceHorizontalSmall } from "../../model/elements/layout.mjs";
-import { campaignLarge } from "../../model/elements/headline.mjs";
 const getBackgroundColor = (props) => {
   const { isThemeDark, isThemeMaryland, isThemeLight } = props;
   if (isThemeDark) return token.color.black;
@@ -35,48 +37,44 @@ const getBackgroundColor = (props) => {
 };
 const createAsset = ({ image }) => {
   if (!image) return null;
-  return createDiv({
-    className: "umd-hero-logo__asset",
-    children: [
-      imageContainer({
-        element: image,
-        isScaled: false
-      })
-    ],
-    elementStyles: {
-      element: {
-        textAlign: "center",
-        display: "flex",
-        justifyContent: "center",
-        maxWidth: "800px",
-        margin: "0 auto",
-        marginBottom: token.spacing.xl,
-        ["& img"]: {
-          maxWidth: "100%",
-          maxHeight: "500px",
-          marginLeft: "auto",
-          marginRight: "auto"
-        }
+  return new ElementBuilder().withClassName("umd-hero-logo__asset").withChild(
+    imageContainer({
+      element: image,
+      isScaled: false
+    })
+  ).withStyles({
+    element: {
+      textAlign: "center",
+      display: "flex",
+      justifyContent: "center",
+      maxWidth: "800px",
+      margin: "0 auto",
+      marginBottom: token.spacing.xl,
+      ["& img"]: {
+        maxWidth: "100%",
+        maxHeight: "500px",
+        marginLeft: "auto",
+        marginRight: "auto"
       }
     }
-  });
+  }).build();
 };
 const createHeadline = (props) => {
   const { headline, isThemeDark, isThemeMaryland } = props;
+  const finalIsThemeDark = isThemeDark || isThemeMaryland;
   if (!headline) return null;
-  const headlineElement = campaignLarge({
-    element: headline,
-    elementStyles: {
-      element: {
-        textTransform: "uppercase"
-      },
-      siblingAfter: {
-        marginTop: token.spacing.sm
-      }
+  return new ElementBuilder(headline).styled(
+    Styles.typography.campaign.compose("large", {
+      theme: theme.fontColor(finalIsThemeDark)
+    })
+  ).withStyles({
+    element: {
+      textTransform: "uppercase"
     },
-    isThemeDark: isThemeDark || isThemeMaryland || false
-  });
-  return headlineElement;
+    siblingAfter: {
+      marginTop: token.spacing.sm
+    }
+  }).build();
 };
 const createText = (props) => {
   const { isThemeDark, isThemeMaryland } = props;
@@ -87,69 +85,52 @@ const createText = (props) => {
     actions: props.actions,
     isThemeDark: isThemeDark || isThemeMaryland || false
   });
-  const textContent = createDiv({
-    className: "umd-hero-logo__text-content",
-    children: [textLockupElement],
-    elementStyles: {
-      element: {
-        [`& .${elementStyles.text.rich.simpleLargest.className}`]: {
-          color: token.color.gray.dark
-        }
+  const textContent = new ElementBuilder().withClassName("umd-hero-logo__text-content").withChild(textLockupElement).withStyles({
+    element: {
+      [`& .${elementStyles.text.rich.simpleLargest.className}`]: {
+        color: token.color.gray.dark
       }
     }
-  });
-  return createDiv({
-    className: "umd-hero-logo__text",
-    children: [textContent],
-    elementStyles: {
-      element: {
-        display: "flex",
-        justifyContent: "center",
-        textAlign: "center"
-      }
+  }).build();
+  return new ElementBuilder().withClassName("umd-hero-logo__text").withChild(textContent).withStyles({
+    element: {
+      display: "flex",
+      justifyContent: "center",
+      textAlign: "center"
     }
-  });
+  }).build();
 };
 const makeLock = (props) => {
   const asset = createAsset(props);
   const text = createText(props);
-  const children = [];
+  const builder = new ElementBuilder().styled(
+    Styles.layout.space.horizontal.small
+  );
   if (asset) {
-    children.push(asset);
+    builder.withChild(asset);
   }
-  children.push(text);
-  return spaceHorizontalSmall({
-    element: document.createElement("div"),
-    children
-  });
+  builder.withChild(text);
+  return builder.build();
 };
 const logo = (props) => {
   const { isThemeDark } = props;
-  const container = createDiv({
-    className: "umd-hero-logo__container",
-    children: [makeLock(props)],
-    elementStyles: {
-      element: {
-        padding: `${token.spacing["5xl"]} 0 ${token.spacing.lg}`,
-        backgroundColor: getBackgroundColor(props),
-        // Dark them should have additonal padding at the bottom
-        [`@container (${token.media.queries.desktop.min})`]: {
-          ...isThemeDark && {
-            paddingBottom: `${token.spacing["5xl"]}`
-          }
+  const container = new ElementBuilder().withClassName("umd-hero-logo__container").withChild(makeLock(props)).withStyles({
+    element: {
+      padding: `${token.spacing["5xl"]} 0 ${token.spacing.lg}`,
+      backgroundColor: getBackgroundColor(props),
+      // Dark them should have additonal padding at the bottom
+      [`@container (${token.media.queries.desktop.min})`]: {
+        ...isThemeDark && {
+          paddingBottom: `${token.spacing["5xl"]}`
         }
       }
     }
-  });
-  return createDiv({
-    className: "umd-hero-logo",
-    children: [container],
-    elementStyles: {
-      element: {
-        containerType: "inline-size"
-      }
+  }).build();
+  return new ElementBuilder().withClassName("umd-hero-logo").withChild(container).withStyles({
+    element: {
+      containerType: "inline-size"
     }
-  });
+  }).build();
 };
 export {
   logo as default

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

@@ -1 +1 @@
-{"version":3,"file":"logo.mjs","sources":["../../../source/composite/hero/logo.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type HeroLogoProps } from './_types';\nimport { type ElementVisual } from '../../_types';\n\nconst getBackgroundColor = (props: HeroLogoProps) => {\n  const { isThemeDark, isThemeMaryland, isThemeLight } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return token.color.white;\n};\n\nconst createAsset = ({ image }: Pick<HeroLogoProps, 'image'>) => {\n  if (!image) return null;\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo__asset',\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    ],\n    elementStyles: {\n      element: {\n        textAlign: 'center',\n        display: 'flex',\n        justifyContent: 'center',\n        maxWidth: '800px',\n        margin: '0 auto',\n        marginBottom: token.spacing.xl,\n\n        ['& img']: {\n          maxWidth: '100%',\n          maxHeight: '500px',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        },\n      },\n    },\n  });\n};\n\nconst createHeadline = (\n  props: Pick<HeroLogoProps, 'headline' | 'isThemeDark' | 'isThemeMaryland'>,\n) => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n\n  if (!headline) return null;\n\n  const headlineElement = ElementModel.headline.campaignLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    },\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  return headlineElement;\n};\n\nconst createText = (\n  props: Omit<HeroLogoProps, 'image' | 'video' | 'includesAnimation' | 'logo'>,\n) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textContent = ElementModel.createDiv({\n    className: 'umd-hero-logo__text-content',\n    children: [textLockupElement],\n    elementStyles: {\n      element: {\n        [`& .${elementStyles.text.rich.simpleLargest.className}`]: {\n          color: token.color.gray.dark,\n        },\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo__text',\n    children: [textContent],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        textAlign: 'center',\n      },\n    },\n  });\n};\n\nconst makeLock = (props: HeroLogoProps) => {\n  const asset = createAsset(props);\n  const text = createText(props);\n  const children: ElementVisual[] = [];\n\n  if (asset) {\n    children.push(asset);\n  }\n\n  children.push(text);\n\n  return ElementModel.layout.spaceHorizontalSmall({\n    element: document.createElement('div'),\n    children,\n  });\n};\n\nexport default (props: HeroLogoProps) => {\n  const { isThemeDark } = props;\n\n  const container = ElementModel.createDiv({\n    className: 'umd-hero-logo__container',\n    children: [makeLock(props)],\n    elementStyles: {\n      element: {\n        padding: `${token.spacing['5xl']} 0 ${token.spacing.lg}`,\n        backgroundColor: getBackgroundColor(props),\n\n        // Dark them should have additonal padding at the bottom\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isThemeDark && {\n            paddingBottom: `${token.spacing['5xl']}`,\n          }),\n        },\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-logo',\n    children: [container],\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n      },\n    },\n  });\n};\n"],"names":["ElementModel.createDiv","assets.image.background","ElementModel.headline.campaignLarge","textLockup.large","ElementModel.layout.spaceHorizontalSmall"],"mappings":"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"}
+{"version":3,"file":"logo.mjs","sources":["../../../source/composite/hero/logo.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 Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { type HeroLogoProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst getBackgroundColor = (props: HeroLogoProps) => {\n  const { isThemeDark, isThemeMaryland, isThemeLight } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return token.color.white;\n};\n\nconst createAsset = ({ image }: Pick<HeroLogoProps, 'image'>) => {\n  if (!image) return null;\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-logo__asset')\n    .withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    )\n    .withStyles({\n      element: {\n        textAlign: 'center',\n        display: 'flex',\n        justifyContent: 'center',\n        maxWidth: '800px',\n        margin: '0 auto',\n        marginBottom: token.spacing.xl,\n\n        ['& img']: {\n          maxWidth: '100%',\n          maxHeight: '500px',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        },\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<HeroLogoProps, 'headline' | 'isThemeDark' | 'isThemeMaryland'>,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const finalIsThemeDark = isThemeDark || isThemeMaryland;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.campaign.compose('large', {\n        theme: theme.fontColor(finalIsThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n};\n\nconst createText = (\n  props: Omit<HeroLogoProps, 'image' | 'video' | 'includesAnimation' | 'logo'>,\n) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textContent = new ElementBuilder()\n    .withClassName('umd-hero-logo__text-content')\n    .withChild(textLockupElement)\n    .withStyles({\n      element: {\n        [`& .${elementStyles.text.rich.simpleLargest.className}`]: {\n          color: token.color.gray.dark,\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-logo__text')\n    .withChild(textContent)\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        textAlign: 'center',\n      },\n    })\n    .build();\n};\n\nconst makeLock = (props: HeroLogoProps) => {\n  const asset = createAsset(props);\n  const text = createText(props);\n\n  const builder = new ElementBuilder().styled(\n    Styles.layout.space.horizontal.small,\n  );\n\n  if (asset) {\n    builder.withChild(asset);\n  }\n\n  builder.withChild(text);\n\n  return builder.build();\n};\n\nexport default (props: HeroLogoProps) => {\n  const { isThemeDark } = props;\n\n  const container = new ElementBuilder()\n    .withClassName('umd-hero-logo__container')\n    .withChild(makeLock(props))\n    .withStyles({\n      element: {\n        padding: `${token.spacing['5xl']} 0 ${token.spacing.lg}`,\n        backgroundColor: getBackgroundColor(props),\n\n        // Dark them should have additonal padding at the bottom\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isThemeDark && {\n            paddingBottom: `${token.spacing['5xl']}`,\n          }),\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-logo')\n    .withChild(container)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n};\n"],"names":["assets.image.background","textLockup.large"],"mappings":"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"}

package/dist/composite/hero/minimal.d.ts

@@ -1,8 +1,4 @@
 import { HeroMinimalProps } from './_types';
-declare const _default: (props: HeroMinimalProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: (props: HeroMinimalProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=minimal.d.ts.map

package/dist/composite/hero/minimal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"minimal.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/minimal.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;yBAuKjC,OAAO,gBAAgB;;;;;AAAvC,wBA8BE"}
+{"version":3,"file":"minimal.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/minimal.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;yBAwKjC,OAAO,gBAAgB;AAAvC,wBA8BE"}