@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

package/dist/composite/person/bio/small.js

@@ -1,8 +1,13 @@
 "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-styles-library");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
-const index = require("../../../model/elements/index.js");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
 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");
@@ -25,11 +30,6 @@ const contact = require("../../../atomic/text-lockup/contact.js");
 require("../../../atomic/text-lockup/date.js");
 const person = require("../../../atomic/text-lockup/person.js");
 require("../../../atomic/text-lockup/small.js");
-require("@universityofmaryland/web-styles-library/typography");
-const richText = require("../../../model/elements/rich-text.js");
-const layout = require("../../../model/elements/layout.js");
-const headline = require("../../../model/elements/headline.js");
-const text = require("../../../model/elements/text.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -47,62 +47,88 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
 const createTextContainer = (props) => {
   const { isThemeDark, name, ...textProps } = props;
-  const children = [];
+  const builder = new webBuilderLibrary.ElementBuilder().styled(
+    Styles__namespace.element.text.line.adjustentInset
+  );
   if (name) {
-    children.push(
-      headline.sansExtraLarge({
-        element: name,
-        isThemeDark,
-        elementStyles: {
-          element: {
-            color: `${token__namespace.color.black}`,
-            textTransform: "uppercase",
-            fontWeight: "800",
-            display: "block"
-          },
-          siblingAfter: {
-            marginTop: token__namespace.spacing.sm
-          }
+    builder.withChild(
+      new webBuilderLibrary.ElementBuilder(name).styled(
+        Styles__namespace.typography.sans.compose("extralarge", {
+          theme: theme.theme.fontColor(isThemeDark)
+        })
+      ).withStyles({
+        element: {
+          textTransform: "uppercase",
+          fontWeight: "800",
+          display: "block",
+          ...!isThemeDark && { color: `${token__namespace.color.black}` }
+        },
+        siblingAfter: {
+          marginTop: token__namespace.spacing.sm
         }
-      })
+      }).build()
     );
   }
-  children.push(person({ ...textProps, isThemeDark }));
-  return text.lineAdjustmentInset({
-    element: document.createElement("div"),
-    children
-  });
+  builder.withChild(person({ ...textProps, isThemeDark }));
+  return builder.build();
 };
 const createTextColumn = (props) => {
   const { actions } = props;
   const textContainer = createTextContainer(props);
-  const children = [];
-  children.push(textContainer, contact(props));
+  const builder = new webBuilderLibrary.ElementBuilder().withClassName("person-bio-summary-text-column").withChild(textContainer).withChild(contact(props));
   if (actions) {
-    children.push(
-      layout.gridInlineTabletRows({
-        element: actions,
-        elementStyles: {
-          element: {
-            marginTop: token__namespace.spacing.sm
-          }
+    builder.withChild(
+      new webBuilderLibrary.ElementBuilder(actions).styled(Styles__namespace.layout.grid.inline.tabletRows).withStyles({
+        element: {
+          marginTop: token__namespace.spacing.sm
         }
-      })
+      }).build()
     );
   }
-  return index.createDiv({
-    className: "person-bio-summary-text-column",
-    children
-  });
+  return builder.build();
 };
 const makeContainer = (props) => {
   const { image } = props;
   const textColumn = createTextColumn(props);
-  const children = [];
+  const builder = new webBuilderLibrary.ElementBuilder().withClassName("person-bio-summary-container").withStyles({
+    element: {
+      display: "grid",
+      gridGap: `${token__namespace.spacing.md}`,
+      ...styles.createMediaQuery(
+        "min-width",
+        token__namespace.media.breakpointValues.large.min,
+        {
+          gridTemplateColumns: `repeat(8, 1fr)`,
+          gridGap: `${token__namespace.spacing.lg}`,
+          alignItems: `center`
+        }
+      ),
+      [`& > *`]: {
+        ...styles.createMediaQuery(
+          "min-width",
+          token__namespace.media.breakpointValues.large.min,
+          {
+            gridColumn: `span 5`
+          }
+        )
+      },
+      [`&:has(> :nth-child(2)) > *:first-child `]: {
+        ...styles.createMediaQuery(
+          "min-width",
+          token__namespace.media.breakpointValues.large.min,
+          {
+            gridColumn: `span 3`,
+            alignSelf: `flex-start`
+          }
+        )
+      }
+    }
+  });
   if (image) {
-    children.push(
+    builder.withChild(
       background({
         element: image,
         isScaled: false,
@@ -130,68 +156,29 @@ const makeContainer = (props) => {
       })
     );
   }
-  children.push(textColumn);
-  return index.createDiv({
-    className: "person-bio-summary-container",
-    children,
-    elementStyles: {
-      element: {
-        display: "grid",
-        gridGap: `${token__namespace.spacing.md}`,
-        ...styles.createMediaQuery(
-          "min-width",
-          token__namespace.media.breakpointValues.large.min,
-          {
-            gridTemplateColumns: `repeat(8, 1fr)`,
-            gridGap: `${token__namespace.spacing.lg}`,
-            alignItems: `center`
-          }
-        ),
-        [`& > *`]: {
-          ...styles.createMediaQuery(
-            "min-width",
-            token__namespace.media.breakpointValues.large.min,
-            {
-              gridColumn: `span 5`
-            }
-          )
-        },
-        [`&:has(> :nth-child(2)) > *:first-child `]: {
-          ...styles.createMediaQuery(
-            "min-width",
-            token__namespace.media.breakpointValues.large.min,
-            {
-              gridColumn: `span 3`,
-              alignSelf: `flex-start`
-            }
-          )
-        }
-      }
-    }
-  });
+  builder.withChild(textColumn);
+  return builder.build();
 };
 const small = (props) => {
   const { isThemeDark, description } = props;
   const container = makeContainer(props);
-  const children = [container];
+  const builder = new webBuilderLibrary.ElementBuilder().withClassName("person-bio-summary-composite").withChild(container);
   if (description) {
-    children.push(
-      richText.simpleLarge({
-        element: description,
-        isThemeDark,
-        elementStyles: {
-          element: {
-            marginTop: token__namespace.spacing.lg,
-            maxWidth: token__namespace.spacing.maxWidth.smallest
-          }
+    builder.withChild(
+      new webBuilderLibrary.ElementBuilder(description).styled(
+        Styles__namespace.element.text.rich.composeSimple({
+          size: "large",
+          theme: theme.theme.fontColor(isThemeDark)
+        })
+      ).withStyles({
+        element: {
+          marginTop: token__namespace.spacing.lg,
+          maxWidth: token__namespace.spacing.maxWidth.smallest
         }
-      })
+      }).build()
     );
   }
-  return index.createDiv({
-    className: "person-bio-summary-composite",
-    children
-  });
+  return builder.build();
 };
 module.exports = small;
 //# sourceMappingURL=small.js.map

package/dist/composite/person/bio/small.js.map

@@ -1 +1 @@
-{"version":3,"file":"small.js","sources":["../../../../source/composite/person/bio/small.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { assets, textLockup } from 'atomic';\nimport { PersonBio } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\nconst createTextContainer = (props: PersonBio) => {\n  const { isThemeDark, name, ...textProps } = props;\n  const children: ElementVisual[] = [];\n\n  if (name) {\n    children.push(\n      ElementModel.headline.sansExtraLarge({\n        element: name,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            color: `${token.color.black}`,\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textLockup.person({ ...textProps, isThemeDark }));\n\n  return ElementModel.text.lineAdjustmentInset({\n    element: document.createElement('div'),\n    children,\n  });\n};\n\nconst createTextColumn = (props: PersonBio) => {\n  const { actions } = props;\n  const textContainer = createTextContainer(props);\n  const children: ElementVisual[] = [];\n\n  children.push(textContainer, textLockup.contact(props));\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridInlineTabletRows({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-text-column',\n    children,\n  });\n};\n\nconst makeContainer = (props: PersonBio) => {\n  const { image } = props;\n  const textColumn = createTextColumn(props);\n  const children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          element: {\n            ...createMediaQuery(\n              'max-width',\n              token.media.breakpointValues.medium.max,\n              {\n                display: 'flex',\n              },\n            ),\n\n            [`& img`]: {\n              ...createMediaQuery(\n                'min-width',\n                token.media.breakpointValues.large.min,\n                {\n                  width: `100%`,\n                  height: `auto !important`,\n                },\n              ),\n            },\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textColumn);\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-container',\n    children,\n    elementStyles: {\n      element: {\n        display: 'grid',\n        gridGap: `${token.spacing.md}`,\n\n        ...createMediaQuery(\n          'min-width',\n          token.media.breakpointValues.large.min,\n          {\n            gridTemplateColumns: `repeat(8, 1fr)`,\n            gridGap: `${token.spacing.lg}`,\n            alignItems: `center`,\n          },\n        ),\n\n        [`& > *`]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 5`,\n            },\n          ),\n        },\n\n        [`&:has(> :nth-child(2)) > *:first-child `]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 3`,\n              alignSelf: `flex-start`,\n            },\n          ),\n        },\n      },\n    },\n  });\n};\n\nexport default (props: PersonBio) => {\n  const { isThemeDark, description } = props;\n  const container = makeContainer(props);\n  const children: ElementVisual[] = [container];\n\n  if (description) {\n    children.push(\n      ElementModel.richText.simpleLarge({\n        element: description,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: token.spacing.lg,\n            maxWidth: token.spacing.maxWidth.smallest,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-composite',\n    children,\n  });\n};\n"],"names":["ElementModel.headline.sansExtraLarge","token","textLockup.person","ElementModel.text.lineAdjustmentInset","textLockup.contact","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","assets.image.background","createMediaQuery","ElementModel.richText.simpleLarge"],"mappings":"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"}
+{"version":3,"file":"small.js","sources":["../../../../source/composite/person/bio/small.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 { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { PersonBio } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\nconst createTextContainer = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { isThemeDark, name, ...textProps } = props;\n\n  const builder = new ElementBuilder().styled(\n    Styles.element.text.line.adjustentInset,\n  );\n\n  if (name) {\n    builder.withChild(\n      new ElementBuilder(name)\n        .styled(\n          Styles.typography.sans.compose('extralarge', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n            ...(!isThemeDark && { color: `${token.color.black}` }),\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  builder.withChild(textLockup.person({ ...textProps, isThemeDark }));\n\n  return builder.build();\n};\n\nconst createTextColumn = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { actions } = props;\n  const textContainer = createTextContainer(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-text-column')\n    .withChild(textContainer)\n    .withChild(textLockup.contact(props));\n\n  if (actions) {\n    builder.withChild(\n      new ElementBuilder(actions)\n        .styled(Styles.layout.grid.inline.tabletRows)\n        .withStyles({\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  return builder.build();\n};\n\nconst makeContainer = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { image } = props;\n  const textColumn = createTextColumn(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-container')\n    .withStyles({\n      element: {\n        display: 'grid',\n        gridGap: `${token.spacing.md}`,\n\n        ...createMediaQuery(\n          'min-width',\n          token.media.breakpointValues.large.min,\n          {\n            gridTemplateColumns: `repeat(8, 1fr)`,\n            gridGap: `${token.spacing.lg}`,\n            alignItems: `center`,\n          },\n        ),\n\n        [`& > *`]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 5`,\n            },\n          ),\n        },\n\n        [`&:has(> :nth-child(2)) > *:first-child `]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 3`,\n              alignSelf: `flex-start`,\n            },\n          ),\n        },\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          element: {\n            ...createMediaQuery(\n              'max-width',\n              token.media.breakpointValues.medium.max,\n              {\n                display: 'flex',\n              },\n            ),\n\n            [`& img`]: {\n              ...createMediaQuery(\n                'min-width',\n                token.media.breakpointValues.large.min,\n                {\n                  width: `100%`,\n                  height: `auto !important`,\n                },\n              ),\n            },\n          },\n        },\n      }),\n    );\n  }\n\n  builder.withChild(textColumn);\n\n  return builder.build();\n};\n\nexport default (props: PersonBio): ElementModel<HTMLElement> => {\n  const { isThemeDark, description } = props;\n  const container = makeContainer(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-composite')\n    .withChild(container);\n\n  if (description) {\n    builder.withChild(\n      new ElementBuilder(description)\n        .styled(\n          Styles.element.text.rich.composeSimple({\n            size: 'large',\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            marginTop: token.spacing.lg,\n            maxWidth: token.spacing.maxWidth.smallest,\n          },\n        })\n        .build(),\n    );\n  }\n\n  return builder.build();\n};\n"],"names":["ElementBuilder","Styles","theme","token","textLockup.person","textLockup.contact","createMediaQuery","assets.image.background"],"mappings":"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"}

package/dist/composite/person/bio/small.mjs

@@ -1,7 +1,12 @@
-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 Styles from "@universityofmaryland/web-styles-library";
 import { createMediaQuery } from "@universityofmaryland/web-utilities-library/styles";
-import { createDiv } from "../../../model/elements/index.mjs";
+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";
@@ -24,67 +29,87 @@ import contact from "../../../atomic/text-lockup/contact.mjs";
 import "../../../atomic/text-lockup/date.mjs";
 import person from "../../../atomic/text-lockup/person.mjs";
 import "../../../atomic/text-lockup/small.mjs";
-import "@universityofmaryland/web-styles-library/typography";
-import { simpleLarge } from "../../../model/elements/rich-text.mjs";
-import { gridInlineTabletRows } from "../../../model/elements/layout.mjs";
-import { sansExtraLarge } from "../../../model/elements/headline.mjs";
-import { lineAdjustmentInset } from "../../../model/elements/text.mjs";
 const createTextContainer = (props) => {
   const { isThemeDark, name, ...textProps } = props;
-  const children = [];
+  const builder = new ElementBuilder().styled(
+    Styles.element.text.line.adjustentInset
+  );
   if (name) {
-    children.push(
-      sansExtraLarge({
-        element: name,
-        isThemeDark,
-        elementStyles: {
-          element: {
-            color: `${token.color.black}`,
-            textTransform: "uppercase",
-            fontWeight: "800",
-            display: "block"
-          },
-          siblingAfter: {
-            marginTop: token.spacing.sm
-          }
+    builder.withChild(
+      new ElementBuilder(name).styled(
+        Styles.typography.sans.compose("extralarge", {
+          theme: theme.fontColor(isThemeDark)
+        })
+      ).withStyles({
+        element: {
+          textTransform: "uppercase",
+          fontWeight: "800",
+          display: "block",
+          ...!isThemeDark && { color: `${token.color.black}` }
+        },
+        siblingAfter: {
+          marginTop: token.spacing.sm
         }
-      })
+      }).build()
     );
   }
-  children.push(person({ ...textProps, isThemeDark }));
-  return lineAdjustmentInset({
-    element: document.createElement("div"),
-    children
-  });
+  builder.withChild(person({ ...textProps, isThemeDark }));
+  return builder.build();
 };
 const createTextColumn = (props) => {
   const { actions } = props;
   const textContainer = createTextContainer(props);
-  const children = [];
-  children.push(textContainer, contact(props));
+  const builder = new ElementBuilder().withClassName("person-bio-summary-text-column").withChild(textContainer).withChild(contact(props));
   if (actions) {
-    children.push(
-      gridInlineTabletRows({
-        element: actions,
-        elementStyles: {
-          element: {
-            marginTop: token.spacing.sm
-          }
+    builder.withChild(
+      new ElementBuilder(actions).styled(Styles.layout.grid.inline.tabletRows).withStyles({
+        element: {
+          marginTop: token.spacing.sm
         }
-      })
+      }).build()
     );
   }
-  return createDiv({
-    className: "person-bio-summary-text-column",
-    children
-  });
+  return builder.build();
 };
 const makeContainer = (props) => {
   const { image } = props;
   const textColumn = createTextColumn(props);
-  const children = [];
+  const builder = new ElementBuilder().withClassName("person-bio-summary-container").withStyles({
+    element: {
+      display: "grid",
+      gridGap: `${token.spacing.md}`,
+      ...createMediaQuery(
+        "min-width",
+        token.media.breakpointValues.large.min,
+        {
+          gridTemplateColumns: `repeat(8, 1fr)`,
+          gridGap: `${token.spacing.lg}`,
+          alignItems: `center`
+        }
+      ),
+      [`& > *`]: {
+        ...createMediaQuery(
+          "min-width",
+          token.media.breakpointValues.large.min,
+          {
+            gridColumn: `span 5`
+          }
+        )
+      },
+      [`&:has(> :nth-child(2)) > *:first-child `]: {
+        ...createMediaQuery(
+          "min-width",
+          token.media.breakpointValues.large.min,
+          {
+            gridColumn: `span 3`,
+            alignSelf: `flex-start`
+          }
+        )
+      }
+    }
+  });
   if (image) {
-    children.push(
+    builder.withChild(
       imageContainer({
         element: image,
         isScaled: false,
@@ -112,68 +137,29 @@ const makeContainer = (props) => {
       })
     );
   }
-  children.push(textColumn);
-  return createDiv({
-    className: "person-bio-summary-container",
-    children,
-    elementStyles: {
-      element: {
-        display: "grid",
-        gridGap: `${token.spacing.md}`,
-        ...createMediaQuery(
-          "min-width",
-          token.media.breakpointValues.large.min,
-          {
-            gridTemplateColumns: `repeat(8, 1fr)`,
-            gridGap: `${token.spacing.lg}`,
-            alignItems: `center`
-          }
-        ),
-        [`& > *`]: {
-          ...createMediaQuery(
-            "min-width",
-            token.media.breakpointValues.large.min,
-            {
-              gridColumn: `span 5`
-            }
-          )
-        },
-        [`&:has(> :nth-child(2)) > *:first-child `]: {
-          ...createMediaQuery(
-            "min-width",
-            token.media.breakpointValues.large.min,
-            {
-              gridColumn: `span 3`,
-              alignSelf: `flex-start`
-            }
-          )
-        }
-      }
-    }
-  });
+  builder.withChild(textColumn);
+  return builder.build();
 };
 const small = (props) => {
   const { isThemeDark, description } = props;
   const container = makeContainer(props);
-  const children = [container];
+  const builder = new ElementBuilder().withClassName("person-bio-summary-composite").withChild(container);
   if (description) {
-    children.push(
-      simpleLarge({
-        element: description,
-        isThemeDark,
-        elementStyles: {
-          element: {
-            marginTop: token.spacing.lg,
-            maxWidth: token.spacing.maxWidth.smallest
-          }
+    builder.withChild(
+      new ElementBuilder(description).styled(
+        Styles.element.text.rich.composeSimple({
+          size: "large",
+          theme: theme.fontColor(isThemeDark)
+        })
+      ).withStyles({
+        element: {
+          marginTop: token.spacing.lg,
+          maxWidth: token.spacing.maxWidth.smallest
         }
-      })
+      }).build()
     );
   }
-  return createDiv({
-    className: "person-bio-summary-composite",
-    children
-  });
+  return builder.build();
 };
 export {
   small as default

package/dist/composite/person/bio/small.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"small.mjs","sources":["../../../../source/composite/person/bio/small.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { assets, textLockup } from 'atomic';\nimport { PersonBio } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\nconst createTextContainer = (props: PersonBio) => {\n  const { isThemeDark, name, ...textProps } = props;\n  const children: ElementVisual[] = [];\n\n  if (name) {\n    children.push(\n      ElementModel.headline.sansExtraLarge({\n        element: name,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            color: `${token.color.black}`,\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textLockup.person({ ...textProps, isThemeDark }));\n\n  return ElementModel.text.lineAdjustmentInset({\n    element: document.createElement('div'),\n    children,\n  });\n};\n\nconst createTextColumn = (props: PersonBio) => {\n  const { actions } = props;\n  const textContainer = createTextContainer(props);\n  const children: ElementVisual[] = [];\n\n  children.push(textContainer, textLockup.contact(props));\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridInlineTabletRows({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-text-column',\n    children,\n  });\n};\n\nconst makeContainer = (props: PersonBio) => {\n  const { image } = props;\n  const textColumn = createTextColumn(props);\n  const children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          element: {\n            ...createMediaQuery(\n              'max-width',\n              token.media.breakpointValues.medium.max,\n              {\n                display: 'flex',\n              },\n            ),\n\n            [`& img`]: {\n              ...createMediaQuery(\n                'min-width',\n                token.media.breakpointValues.large.min,\n                {\n                  width: `100%`,\n                  height: `auto !important`,\n                },\n              ),\n            },\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textColumn);\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-container',\n    children,\n    elementStyles: {\n      element: {\n        display: 'grid',\n        gridGap: `${token.spacing.md}`,\n\n        ...createMediaQuery(\n          'min-width',\n          token.media.breakpointValues.large.min,\n          {\n            gridTemplateColumns: `repeat(8, 1fr)`,\n            gridGap: `${token.spacing.lg}`,\n            alignItems: `center`,\n          },\n        ),\n\n        [`& > *`]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 5`,\n            },\n          ),\n        },\n\n        [`&:has(> :nth-child(2)) > *:first-child `]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 3`,\n              alignSelf: `flex-start`,\n            },\n          ),\n        },\n      },\n    },\n  });\n};\n\nexport default (props: PersonBio) => {\n  const { isThemeDark, description } = props;\n  const container = makeContainer(props);\n  const children: ElementVisual[] = [container];\n\n  if (description) {\n    children.push(\n      ElementModel.richText.simpleLarge({\n        element: description,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: token.spacing.lg,\n            maxWidth: token.spacing.maxWidth.smallest,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-composite',\n    children,\n  });\n};\n"],"names":["ElementModel.headline.sansExtraLarge","textLockup.person","ElementModel.text.lineAdjustmentInset","textLockup.contact","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","assets.image.background","ElementModel.richText.simpleLarge"],"mappings":"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"}
+{"version":3,"file":"small.mjs","sources":["../../../../source/composite/person/bio/small.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 { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { PersonBio } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\nconst createTextContainer = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { isThemeDark, name, ...textProps } = props;\n\n  const builder = new ElementBuilder().styled(\n    Styles.element.text.line.adjustentInset,\n  );\n\n  if (name) {\n    builder.withChild(\n      new ElementBuilder(name)\n        .styled(\n          Styles.typography.sans.compose('extralarge', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n            ...(!isThemeDark && { color: `${token.color.black}` }),\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  builder.withChild(textLockup.person({ ...textProps, isThemeDark }));\n\n  return builder.build();\n};\n\nconst createTextColumn = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { actions } = props;\n  const textContainer = createTextContainer(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-text-column')\n    .withChild(textContainer)\n    .withChild(textLockup.contact(props));\n\n  if (actions) {\n    builder.withChild(\n      new ElementBuilder(actions)\n        .styled(Styles.layout.grid.inline.tabletRows)\n        .withStyles({\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  return builder.build();\n};\n\nconst makeContainer = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { image } = props;\n  const textColumn = createTextColumn(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-container')\n    .withStyles({\n      element: {\n        display: 'grid',\n        gridGap: `${token.spacing.md}`,\n\n        ...createMediaQuery(\n          'min-width',\n          token.media.breakpointValues.large.min,\n          {\n            gridTemplateColumns: `repeat(8, 1fr)`,\n            gridGap: `${token.spacing.lg}`,\n            alignItems: `center`,\n          },\n        ),\n\n        [`& > *`]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 5`,\n            },\n          ),\n        },\n\n        [`&:has(> :nth-child(2)) > *:first-child `]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 3`,\n              alignSelf: `flex-start`,\n            },\n          ),\n        },\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          element: {\n            ...createMediaQuery(\n              'max-width',\n              token.media.breakpointValues.medium.max,\n              {\n                display: 'flex',\n              },\n            ),\n\n            [`& img`]: {\n              ...createMediaQuery(\n                'min-width',\n                token.media.breakpointValues.large.min,\n                {\n                  width: `100%`,\n                  height: `auto !important`,\n                },\n              ),\n            },\n          },\n        },\n      }),\n    );\n  }\n\n  builder.withChild(textColumn);\n\n  return builder.build();\n};\n\nexport default (props: PersonBio): ElementModel<HTMLElement> => {\n  const { isThemeDark, description } = props;\n  const container = makeContainer(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-composite')\n    .withChild(container);\n\n  if (description) {\n    builder.withChild(\n      new ElementBuilder(description)\n        .styled(\n          Styles.element.text.rich.composeSimple({\n            size: 'large',\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            marginTop: token.spacing.lg,\n            maxWidth: token.spacing.maxWidth.smallest,\n          },\n        })\n        .build(),\n    );\n  }\n\n  return builder.build();\n};\n"],"names":["textLockup.person","textLockup.contact","assets.image.background"],"mappings":"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"}

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

@@ -1,8 +1,5 @@
 import { PersonCard } from './_types';
-declare const _default: (props: PersonCard) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+import { ElementModel } from '../../_types';
+declare const _default: (props: PersonCard) => ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=block.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../source/composite/person/block.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;yBAKtB,OAAO,UAAU;;;;;AAAjC,wBA2DE"}
+{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../source/composite/person/block.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;yBAIjC,OAAO,UAAU,KAAG,YAAY,CAAC,WAAW,CAAC;AAA7D,wBAqDE"}