@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

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

@@ -1 +1 @@
-{"version":3,"file":"medium.mjs","sources":["../../../source/atomic/text-lockup/medium.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { ElementVisual } from '../../_types';\n\ninterface TypeTextLockupMedium {\n  actions?: HTMLElement | null;\n  compositeHeadline?: ElementVisual | null;\n  eventDetails?: ElementVisual;\n  headline?: HTMLElement | null;\n  isThemeDark?: boolean;\n  isThemeMaryland?: boolean;\n  ribbon?: HTMLElement | null;\n  compositeStats?: ElementVisual | null;\n  text?: HTMLElement | null;\n}\n\nconst BREAKPOINTS = {\n  medium: `@container (min-width: 400px)`,\n  large: `@container (min-width: 600px)`,\n};\n\nexport default ({\n  actions,\n  eventDetails,\n  compositeHeadline,\n  compositeStats,\n  headline,\n  isThemeDark,\n  isThemeMaryland,\n  ribbon,\n  text,\n}: TypeTextLockupMedium) => {\n  const children: ElementVisual[] = [];\n\n  if (ribbon) {\n    children.push(\n      ElementModel.text.ribbon({\n        element: ribbon,\n        elementStyles: {\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  if (compositeHeadline) {\n    children.push(compositeHeadline);\n  }\n\n  if (headline && !compositeHeadline) {\n    children.push(\n      ElementModel.headline.sansLargest({\n        element: headline,\n        elementStyles: {\n          element: {\n            color: `${token.color.black}`,\n            fontWeight: 800,\n            textTransform: 'uppercase',\n            textWrap: 'balance',\n\n            [`${BREAKPOINTS.large}`]: {\n              maxWidth: '90%',\n            },\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  if (eventDetails) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-medium-event-details',\n        children: [eventDetails],\n        elementStyles: {\n          siblingAfter: {\n            marginTop: token.spacing.md,\n          },\n        },\n      }),\n    );\n  }\n\n  if (text) {\n    children.push(\n      ElementModel.richText.advanced({\n        element: text,\n        elementStyles: {\n          siblingAfter: {\n            marginTop: token.spacing.md,\n          },\n        },\n        isThemeDark: isThemeDark || isThemeMaryland || false,\n      }),\n    );\n  }\n\n  if (compositeStats) {\n    children.push(compositeStats);\n  }\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridStacked({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: token.spacing.md,\n\n            [`${BREAKPOINTS.large}`]: {\n              marginTop: token.spacing.lg,\n            },\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'text-lockup-medium',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    },\n  });\n};\n"],"names":["ribbon","ElementModel.text.ribbon","ElementModel.headline.sansLargest","ElementModel.createDiv","ElementModel.richText.advanced","ElementModel.layout.gridStacked"],"mappings":";;;;;;AAgBA,MAAM,cAAc;AAAA,EAElB,OAAO;AACT;AAEA,MAAA,SAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,QACAA;AAAAA,EACA;AACF,MAA4B;AAC1B,QAAM,WAA4B,CAAA;AAElC,MAAIA,UAAQ;AACV,aAAS;AAAA,MACPC,OAAyB;AAAA,QACvB,SAASD;AAAAA,QACT,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,WAAW,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,mBAAmB;AACrB,aAAS,KAAK,iBAAiB;AAAA,EACjC;AAEA,MAAI,YAAY,CAAC,mBAAmB;AAClC,aAAS;AAAA,MACPE,YAAkC;AAAA,QAChC,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,OAAO,GAAG,MAAM,MAAM,KAAK;AAAA,YAC3B,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,UAAU;AAAA,YAEV,CAAC,GAAG,YAAY,KAAK,EAAE,GAAG;AAAA,cACxB,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,UAEF,cAAc;AAAA,YACZ,WAAW,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,cAAc;AAChB,aAAS;AAAA,MACPC,UAAuB;AAAA,QACrB,WAAW;AAAA,QACX,UAAU,CAAC,YAAY;AAAA,QACvB,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,WAAW,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPC,SAA+B;AAAA,QAC7B,SAAS;AAAA,QACT,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,WAAW,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,QAEF,aAAa,eAAe,mBAAmB;AAAA,MAAA,CAChD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,gBAAgB;AAClB,aAAS,KAAK,cAAc;AAAA,EAC9B;AAEA,MAAI,SAAS;AACX,aAAS;AAAA,MACPC,YAAgC;AAAA,QAC9B,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAW,MAAM,QAAQ;AAAA,YAEzB,CAAC,GAAG,YAAY,KAAK,EAAE,GAAG;AAAA,cACxB,WAAW,MAAM,QAAQ;AAAA,YAAA;AAAA,UAC3B;AAAA,QACF;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOF,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AACH;"}
+{"version":3,"file":"medium.mjs","sources":["../../../source/atomic/text-lockup/medium.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { ElementModel } from '../../_types';\n\ninterface TypeTextLockupMedium {\n  actions?: HTMLElement | null;\n  compositeHeadline?: ElementModel<HTMLElement> | null;\n  eventDetails?: ElementModel<HTMLElement>;\n  headline?: HTMLElement | null;\n  isThemeDark?: boolean;\n  isThemeMaryland?: boolean;\n  ribbon?: HTMLElement | null;\n  compositeStats?: ElementModel<HTMLElement> | null;\n  text?: HTMLElement | null;\n}\n\nconst BREAKPOINTS = {\n  medium: `@container (min-width: 400px)`,\n  large: `@container (min-width: 600px)`,\n};\n\nexport default ({\n  actions,\n  eventDetails,\n  compositeHeadline,\n  compositeStats,\n  headline,\n  isThemeDark,\n  isThemeMaryland,\n  ribbon,\n  text,\n}: TypeTextLockupMedium) => {\n  const finalIsThemeDark = isThemeDark || isThemeMaryland;\n\n  const container = new ElementBuilder()\n    .withClassName('text-lockup-medium')\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    });\n\n  if (ribbon) {\n    const ribbonElement = new ElementBuilder(ribbon)\n      .styled(elementStyles.text.decoration.ribbon)\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .build();\n\n    container.withChild(ribbonElement);\n  }\n\n  if (compositeHeadline) {\n    container.withChild(compositeHeadline);\n  }\n\n  if (headline && !compositeHeadline) {\n    const headlineStyles = {\n      ...typography.sans.compose('largest', {\n        theme: theme.fontColor(finalIsThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(finalIsThemeDark),\n      }),\n    };\n\n    const headlineElement = new ElementBuilder(headline)\n      .styled(headlineStyles)\n      .withStyles({\n        element: {\n          fontWeight: 800,\n          textTransform: 'uppercase',\n          textWrap: 'balance',\n\n          [`${BREAKPOINTS.large}`]: {\n            maxWidth: '90%',\n          },\n        },\n        siblingAfter: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(headlineElement);\n  }\n\n  if (eventDetails) {\n    const eventDetailsElement = new ElementBuilder()\n      .withClassName('text-lockup-medium-event-details')\n      .withChild(eventDetails)\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.md,\n        },\n      })\n      .build();\n\n    container.withChild(eventDetailsElement);\n  }\n\n  if (text) {\n    const textElement = new ElementBuilder(text)\n      .styled(\n        elementStyles.text.rich.composeAdvanced({\n          theme: theme.fontColor(finalIsThemeDark),\n        }),\n      )\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.md,\n        },\n      })\n      .build();\n\n    container.withChild(textElement);\n  }\n\n  if (compositeStats) {\n    container.withChild(compositeStats);\n  }\n\n  if (actions) {\n    const actionsElement = new ElementBuilder(actions)\n      .styled(layout.grid.stacked)\n      .withStyles({\n        element: {\n          marginTop: token.spacing.md,\n\n          [`${BREAKPOINTS.large}`]: {\n            marginTop: token.spacing.lg,\n          },\n        },\n      })\n      .build();\n\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["animationStyles"],"mappings":";;;;;;;;AAsBA,MAAM,cAAc;AAAA,EAElB,OAAO;AACT;AAEA,MAAA,SAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AAC1B,QAAM,mBAAmB,eAAe;AAExC,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,oBAAoB,EAClC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,IAAA;AAAA,EACZ,CACD;AAEH,MAAI,QAAQ;AACV,UAAM,gBAAgB,IAAI,eAAe,MAAM,EAC5C,OAAO,cAAc,KAAK,WAAW,MAAM,EAC3C,WAAW;AAAA,MACV,cAAc;AAAA,QACZ,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B,CACD,EACA,MAAA;AAEH,cAAU,UAAU,aAAa;AAAA,EACnC;AAEA,MAAI,mBAAmB;AACrB,cAAU,UAAU,iBAAiB;AAAA,EACvC;AAEA,MAAI,YAAY,CAAC,mBAAmB;AAClC,UAAM,iBAAiB;AAAA,MACrB,GAAG,WAAW,KAAK,QAAQ,WAAW;AAAA,QACpC,OAAO,MAAM,UAAU,gBAAgB;AAAA,MAAA,CACxC;AAAA,MACD,GAAGA,UAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAO,MAAM,WAAW,gBAAgB;AAAA,MAAA,CACzC;AAAA,IAAA;AAGH,UAAM,kBAAkB,IAAI,eAAe,QAAQ,EAChD,OAAO,cAAc,EACrB,WAAW;AAAA,MACV,SAAS;AAAA,QACP,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,UAAU;AAAA,QAEV,CAAC,GAAG,YAAY,KAAK,EAAE,GAAG;AAAA,UACxB,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,MAEF,cAAc;AAAA,QACZ,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B,CACD,EACA,aAAa,CAAC,OAAO,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,cAAU,UAAU,eAAe;AAAA,EACrC;AAEA,MAAI,cAAc;AAChB,UAAM,sBAAsB,IAAI,eAAA,EAC7B,cAAc,kCAAkC,EAChD,UAAU,YAAY,EACtB,WAAW;AAAA,MACV,cAAc;AAAA,QACZ,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B,CACD,EACA,MAAA;AAEH,cAAU,UAAU,mBAAmB;AAAA,EACzC;AAEA,MAAI,MAAM;AACR,UAAM,cAAc,IAAI,eAAe,IAAI,EACxC;AAAA,MACC,cAAc,KAAK,KAAK,gBAAgB;AAAA,QACtC,OAAO,MAAM,UAAU,gBAAgB;AAAA,MAAA,CACxC;AAAA,IAAA,EAEF,WAAW;AAAA,MACV,cAAc;AAAA,QACZ,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B,CACD,EACA,MAAA;AAEH,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,gBAAgB;AAClB,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,MAAI,SAAS;AACX,UAAM,iBAAiB,IAAI,eAAe,OAAO,EAC9C,OAAO,OAAO,KAAK,OAAO,EAC1B,WAAW;AAAA,MACV,SAAS;AAAA,QACP,WAAW,MAAM,QAAQ;AAAA,QAEzB,CAAC,GAAG,YAAY,KAAK,EAAE,GAAG;AAAA,UACxB,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,IACF,CACD,EACA,MAAA;AAEH,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,SAAO,UAAU,MAAA;AACnB;"}

package/dist/atomic/text-lockup/person.d.ts

@@ -1,8 +1,4 @@
 import { PersonTextLockupProps } from '../_types';
-declare const _default: ({ actions, association, isThemeDark, job, name, nameComposite, pronouns, subText, }: PersonTextLockupProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: ({ actions, association, isThemeDark, job, name, nameComposite, pronouns, subText, }: PersonTextLockupProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=person.d.ts.map

package/dist/atomic/text-lockup/person.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/person.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,WAAW,CAAC;yBAEvC,qFASb,qBAAqB;;;;;AATxB,wBA2IE"}
+{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/person.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,WAAW,CAAC;yBAEvC,qFASb,qBAAqB;AATxB,wBAoKE"}

package/dist/atomic/text-lockup/person.js

@@ -1,8 +1,11 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
-const index = require("../../model/elements/index.js");
-const headline = require("../../model/elements/headline.js");
-const layout = require("../../model/elements/layout.js");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
+const typography = require("@universityofmaryland/web-styles-library/typography");
+const layout = require("@universityofmaryland/web-styles-library/layout");
+const animation = require("@universityofmaryland/web-styles-library/animation");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
+const dom = require("@universityofmaryland/web-utilities-library/dom");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -20,6 +23,9 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
+const layout__namespace = /* @__PURE__ */ _interopNamespaceDefault(layout);
+const animation__namespace = /* @__PURE__ */ _interopNamespaceDefault(animation);
 const person = ({
   actions,
   association,
@@ -30,124 +36,119 @@ const person = ({
   pronouns,
   subText
 }) => {
-  let children = [];
+  const container = new webBuilderLibrary.ElementBuilder().withClassName("text-lockup-person-container").withStyles({
+    element: {
+      zIndex: "9",
+      position: "relative"
+    }
+  });
   if (nameComposite && !name) {
-    children.push(nameComposite);
+    container.withChild(nameComposite);
   }
   if (name) {
-    children.push(
-      headline.sansLarger({
-        element: name,
-        elementStyles: {
-          element: {
-            fontWeight: "700",
-            color: `${token__namespace.color.black}`,
-            [`& + *`]: {
-              marginTop: "4px"
-            }
-          },
-          subElement: {
-            color: "currentColor"
-          }
-        },
-        isThemeDark
+    const headlineStyles = {
+      ...typography__namespace.sans.compose("larger", {
+        theme: theme.theme.fontColor(isThemeDark)
+      }),
+      ...animation__namespace.line.composeSlideUnder({
+        color: theme.theme.foreground(isThemeDark)
       })
-    );
+    };
+    const nameElement = new webBuilderLibrary.ElementBuilder(name).styled(headlineStyles).withStyles({
+      element: {
+        fontWeight: "700",
+        [`& + *`]: {
+          marginTop: "4px"
+        }
+      },
+      subElement: {
+        color: "currentColor"
+      }
+    }).withModifier((el) => dom.wrapTextNodeInSpan(el)).build();
+    container.withChild(nameElement);
   }
   if (job) {
-    children.push(
-      headline.sansSmall({
-        element: job,
-        elementStyles: {
-          element: {
-            lineHeight: `1.25em`
-          },
-          subElement: {
-            color: "currentColor"
-          }
-        },
-        isThemeDark
+    const jobElement = new webBuilderLibrary.ElementBuilder(job).styled(
+      typography__namespace.sans.compose("small", {
+        theme: theme.theme.fontColor(isThemeDark)
       })
-    );
+    ).withStyles({
+      element: {
+        lineHeight: `1.25em`,
+        ...!isThemeDark && { color: `${token__namespace.color.gray.dark}` }
+      },
+      subElement: {
+        color: "currentColor"
+      }
+    }).build();
+    container.withChild(jobElement);
   }
   if (association) {
-    children.push(
-      headline.sansSmall({
-        element: association,
-        elementStyles: {
-          element: {
-            lineHeight: "1.2em",
-            display: "block",
-            color: `${token__namespace.color.gray.dark}`,
-            [`& + *`]: {
-              marginTop: "4px"
-            },
-            [`& a:hover, a:focus`]: {
-              textDecoration: "underline"
-            }
-          },
-          subElement: {
-            color: "currentColor"
-          }
-        },
-        isThemeDark
+    const associationElement = new webBuilderLibrary.ElementBuilder(association).styled(
+      typography__namespace.sans.compose("small", {
+        theme: theme.theme.fontColor(isThemeDark)
       })
-    );
+    ).withStyles({
+      element: {
+        lineHeight: "1.2em",
+        display: "block",
+        ...!isThemeDark && { color: `${token__namespace.color.gray.dark}` },
+        [`& + *`]: {
+          marginTop: "4px"
+        },
+        [`& a:hover, a:focus`]: {
+          textDecoration: "underline"
+        }
+      },
+      subElement: {
+        color: "currentColor"
+      }
+    }).build();
+    container.withChild(associationElement);
   }
   if (pronouns) {
     pronouns.innerHTML = `<i>${pronouns.innerHTML}</i>`;
-    children.push(
-      headline.sansSmall({
-        element: pronouns,
-        elementStyles: {
-          element: {
-            [`& + *`]: {
-              marginTop: "4px"
-            }
-          },
-          subElement: {
-            color: "currentColor"
-          }
-        },
-        isThemeDark
+    const pronounsElement = new webBuilderLibrary.ElementBuilder(pronouns).styled(
+      typography__namespace.sans.compose("small", {
+        theme: theme.theme.fontColor(isThemeDark)
       })
-    );
+    ).withStyles({
+      element: {
+        ...!isThemeDark && { color: `${token__namespace.color.gray.dark}` },
+        [`& + *`]: {
+          marginTop: "4px"
+        }
+      },
+      subElement: {
+        color: "currentColor"
+      }
+    }).build();
+    container.withChild(pronounsElement);
   }
   if (subText) {
-    children.push(
-      headline.sansSmall({
-        element: subText,
-        elementStyles: {
-          siblingAfter: {
-            marginTop: "4px"
-          }
-        },
-        isThemeDark
+    const subTextElement = new webBuilderLibrary.ElementBuilder(subText).styled(
+      typography__namespace.sans.compose("small", {
+        theme: theme.theme.fontColor(isThemeDark)
       })
-    );
+    ).withStyles({
+      element: {
+        ...!isThemeDark && { color: `${token__namespace.color.gray.dark}` }
+      },
+      siblingAfter: {
+        marginTop: "4px"
+      }
+    }).build();
+    container.withChild(subTextElement);
   }
   if (actions) {
-    children.push(
-      layout.gridInlineTabletRows({
-        element: actions,
-        elementStyles: {
-          element: {
-            marginTop: token__namespace.spacing.sm
-          }
-        }
-      })
-    );
-  }
-  return index.createDiv({
-    className: "text-lockup-person-container",
-    children,
-    elementStyles: {
+    const actionsElement = new webBuilderLibrary.ElementBuilder(actions).styled(layout__namespace.grid.inline.tabletRows).withStyles({
       element: {
-        zIndex: "9",
-        position: "relative"
+        marginTop: token__namespace.spacing.sm
       }
-    }
-  });
+    }).build();
+    container.withChild(actionsElement);
+  }
+  return container.build();
 };
 module.exports = person;
 //# sourceMappingURL=person.js.map

package/dist/atomic/text-lockup/person.js.map

@@ -1 +1 @@
-{"version":3,"file":"person.js","sources":["../../../source/atomic/text-lockup/person.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type PersonTextLockupProps } from '../_types';\n\nexport default ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupProps) => {\n  let children: ElementVisual[] = [];\n\n  if (nameComposite && !name) {\n    children.push(nameComposite);\n  }\n\n  if (name) {\n    children.push(\n      ElementModel.headline.sansLarger({\n        element: name,\n        elementStyles: {\n          element: {\n            fontWeight: '700',\n            color: `${token.color.black}`,\n\n            [`& + *`]: {\n              marginTop: '4px',\n            },\n          },\n          subElement: {\n            color: 'currentColor',\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (job) {\n    children.push(\n      ElementModel.headline.sansSmall({\n        element: job,\n        elementStyles: {\n          element: {\n            lineHeight: `1.25em`,\n          },\n          subElement: {\n            color: 'currentColor',\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (association) {\n    children.push(\n      ElementModel.headline.sansSmall({\n        element: association,\n        elementStyles: {\n          element: {\n            lineHeight: '1.2em',\n            display: 'block',\n            color: `${token.color.gray.dark}`,\n\n            [`& + *`]: {\n              marginTop: '4px',\n            },\n\n            [`& a:hover, a:focus`]: {\n              textDecoration: 'underline',\n            },\n          },\n          subElement: {\n            color: 'currentColor',\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (pronouns) {\n    pronouns.innerHTML = `<i>${pronouns.innerHTML}</i>`;\n    children.push(\n      ElementModel.headline.sansSmall({\n        element: pronouns,\n        elementStyles: {\n          element: {\n            [`& + *`]: {\n              marginTop: '4px',\n            },\n          },\n          subElement: {\n            color: 'currentColor',\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (subText) {\n    children.push(\n      ElementModel.headline.sansSmall({\n        element: subText,\n        elementStyles: {\n          siblingAfter: {\n            marginTop: '4px',\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\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: 'text-lockup-person-container',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    },\n  });\n};\n"],"names":["ElementModel.headline.sansLarger","token","ElementModel.headline.sansSmall","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKA,MAAA,SAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAC3B,MAAI,WAA4B,CAAA;AAEhC,MAAI,iBAAiB,CAAC,MAAM;AAC1B,aAAS,KAAK,aAAa;AAAA,EAC7B;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPA,oBAAiC;AAAA,QAC/B,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,YAAY;AAAA,YACZ,OAAO,GAAGC,iBAAM,MAAM,KAAK;AAAA,YAE3B,CAAC,OAAO,GAAG;AAAA,cACT,WAAW;AAAA,YAAA;AAAA,UACb;AAAA,UAEF,YAAY;AAAA,YACV,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,QAEF;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,KAAK;AACP,aAAS;AAAA,MACPC,mBAAgC;AAAA,QAC9B,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,YAAY;AAAA,UAAA;AAAA,UAEd,YAAY;AAAA,YACV,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,QAEF;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,aAAa;AACf,aAAS;AAAA,MACPA,mBAAgC;AAAA,QAC9B,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,OAAO,GAAGD,iBAAM,MAAM,KAAK,IAAI;AAAA,YAE/B,CAAC,OAAO,GAAG;AAAA,cACT,WAAW;AAAA,YAAA;AAAA,YAGb,CAAC,oBAAoB,GAAG;AAAA,cACtB,gBAAgB;AAAA,YAAA;AAAA,UAClB;AAAA,UAEF,YAAY;AAAA,YACV,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,QAEF;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,UAAU;AACZ,aAAS,YAAY,MAAM,SAAS,SAAS;AAC7C,aAAS;AAAA,MACPC,mBAAgC;AAAA,QAC9B,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,CAAC,OAAO,GAAG;AAAA,cACT,WAAW;AAAA,YAAA;AAAA,UACb;AAAA,UAEF,YAAY;AAAA,YACV,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,QAEF;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS;AACX,aAAS;AAAA,MACPA,mBAAgC;AAAA,QAC9B,SAAS;AAAA,QACT,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,QAEF;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS;AACX,aAAS;AAAA,MACPC,4BAAyC;AAAA,QACvC,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAWF,iBAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOG,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AACH;;"}
+{"version":3,"file":"person.js","sources":["../../../source/atomic/text-lockup/person.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { type PersonTextLockupProps } from '../_types';\n\nexport default ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupProps) => {\n  const container = new ElementBuilder()\n    .withClassName('text-lockup-person-container')\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    });\n\n  if (nameComposite && !name) {\n    container.withChild(nameComposite);\n  }\n\n  if (name) {\n    const headlineStyles = {\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const nameElement = new ElementBuilder(name)\n      .styled(headlineStyles)\n      .withStyles({\n        element: {\n          fontWeight: '700',\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(nameElement);\n  }\n\n  if (job) {\n    const jobElement = new ElementBuilder(job)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          lineHeight: `1.25em`,\n\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(jobElement);\n  }\n\n  if (association) {\n    const associationElement = new ElementBuilder(association)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          lineHeight: '1.2em',\n          display: 'block',\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n\n          [`& a:hover, a:focus`]: {\n            textDecoration: 'underline',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(associationElement);\n  }\n\n  if (pronouns) {\n    pronouns.innerHTML = `<i>${pronouns.innerHTML}</i>`;\n    const pronounsElement = new ElementBuilder(pronouns)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(pronounsElement);\n  }\n\n  if (subText) {\n    const subTextElement = new ElementBuilder(subText)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n        },\n        siblingAfter: {\n          marginTop: '4px',\n        },\n      })\n      .build();\n\n    container.withChild(subTextElement);\n  }\n\n  if (actions) {\n    const actionsElement = new ElementBuilder(actions)\n      .styled(layout.grid.inline.tabletRows)\n      .withStyles({\n        element: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .build();\n\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["ElementBuilder","typography","theme","animationStyles","wrapTextNodeInSpan","token","layout"],"mappings":"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"}

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

@@ -1,7 +1,10 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
-import { createDiv } from "../../model/elements/index.mjs";
-import { sansLarger, sansSmall } from "../../model/elements/headline.mjs";
-import { gridInlineTabletRows } from "../../model/elements/layout.mjs";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import * as layout from "@universityofmaryland/web-styles-library/layout";
+import * as animation from "@universityofmaryland/web-styles-library/animation";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
+import { wrapTextNodeInSpan } from "@universityofmaryland/web-utilities-library/dom";
 const person = ({
   actions,
   association,
@@ -12,124 +15,119 @@ const person = ({
   pronouns,
   subText
 }) => {
-  let children = [];
+  const container = new ElementBuilder().withClassName("text-lockup-person-container").withStyles({
+    element: {
+      zIndex: "9",
+      position: "relative"
+    }
+  });
   if (nameComposite && !name) {
-    children.push(nameComposite);
+    container.withChild(nameComposite);
   }
   if (name) {
-    children.push(
-      sansLarger({
-        element: name,
-        elementStyles: {
-          element: {
-            fontWeight: "700",
-            color: `${token.color.black}`,
-            [`& + *`]: {
-              marginTop: "4px"
-            }
-          },
-          subElement: {
-            color: "currentColor"
-          }
-        },
-        isThemeDark
+    const headlineStyles = {
+      ...typography.sans.compose("larger", {
+        theme: theme.fontColor(isThemeDark)
+      }),
+      ...animation.line.composeSlideUnder({
+        color: theme.foreground(isThemeDark)
       })
-    );
+    };
+    const nameElement = new ElementBuilder(name).styled(headlineStyles).withStyles({
+      element: {
+        fontWeight: "700",
+        [`& + *`]: {
+          marginTop: "4px"
+        }
+      },
+      subElement: {
+        color: "currentColor"
+      }
+    }).withModifier((el) => wrapTextNodeInSpan(el)).build();
+    container.withChild(nameElement);
   }
   if (job) {
-    children.push(
-      sansSmall({
-        element: job,
-        elementStyles: {
-          element: {
-            lineHeight: `1.25em`
-          },
-          subElement: {
-            color: "currentColor"
-          }
-        },
-        isThemeDark
+    const jobElement = new ElementBuilder(job).styled(
+      typography.sans.compose("small", {
+        theme: theme.fontColor(isThemeDark)
       })
-    );
+    ).withStyles({
+      element: {
+        lineHeight: `1.25em`,
+        ...!isThemeDark && { color: `${token.color.gray.dark}` }
+      },
+      subElement: {
+        color: "currentColor"
+      }
+    }).build();
+    container.withChild(jobElement);
   }
   if (association) {
-    children.push(
-      sansSmall({
-        element: association,
-        elementStyles: {
-          element: {
-            lineHeight: "1.2em",
-            display: "block",
-            color: `${token.color.gray.dark}`,
-            [`& + *`]: {
-              marginTop: "4px"
-            },
-            [`& a:hover, a:focus`]: {
-              textDecoration: "underline"
-            }
-          },
-          subElement: {
-            color: "currentColor"
-          }
-        },
-        isThemeDark
+    const associationElement = new ElementBuilder(association).styled(
+      typography.sans.compose("small", {
+        theme: theme.fontColor(isThemeDark)
       })
-    );
+    ).withStyles({
+      element: {
+        lineHeight: "1.2em",
+        display: "block",
+        ...!isThemeDark && { color: `${token.color.gray.dark}` },
+        [`& + *`]: {
+          marginTop: "4px"
+        },
+        [`& a:hover, a:focus`]: {
+          textDecoration: "underline"
+        }
+      },
+      subElement: {
+        color: "currentColor"
+      }
+    }).build();
+    container.withChild(associationElement);
   }
   if (pronouns) {
     pronouns.innerHTML = `<i>${pronouns.innerHTML}</i>`;
-    children.push(
-      sansSmall({
-        element: pronouns,
-        elementStyles: {
-          element: {
-            [`& + *`]: {
-              marginTop: "4px"
-            }
-          },
-          subElement: {
-            color: "currentColor"
-          }
-        },
-        isThemeDark
+    const pronounsElement = new ElementBuilder(pronouns).styled(
+      typography.sans.compose("small", {
+        theme: theme.fontColor(isThemeDark)
       })
-    );
+    ).withStyles({
+      element: {
+        ...!isThemeDark && { color: `${token.color.gray.dark}` },
+        [`& + *`]: {
+          marginTop: "4px"
+        }
+      },
+      subElement: {
+        color: "currentColor"
+      }
+    }).build();
+    container.withChild(pronounsElement);
   }
   if (subText) {
-    children.push(
-      sansSmall({
-        element: subText,
-        elementStyles: {
-          siblingAfter: {
-            marginTop: "4px"
-          }
-        },
-        isThemeDark
+    const subTextElement = new ElementBuilder(subText).styled(
+      typography.sans.compose("small", {
+        theme: theme.fontColor(isThemeDark)
       })
-    );
+    ).withStyles({
+      element: {
+        ...!isThemeDark && { color: `${token.color.gray.dark}` }
+      },
+      siblingAfter: {
+        marginTop: "4px"
+      }
+    }).build();
+    container.withChild(subTextElement);
   }
   if (actions) {
-    children.push(
-      gridInlineTabletRows({
-        element: actions,
-        elementStyles: {
-          element: {
-            marginTop: token.spacing.sm
-          }
-        }
-      })
-    );
-  }
-  return createDiv({
-    className: "text-lockup-person-container",
-    children,
-    elementStyles: {
+    const actionsElement = new ElementBuilder(actions).styled(layout.grid.inline.tabletRows).withStyles({
       element: {
-        zIndex: "9",
-        position: "relative"
+        marginTop: token.spacing.sm
       }
-    }
-  });
+    }).build();
+    container.withChild(actionsElement);
+  }
+  return container.build();
 };
 export {
   person as default

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

@@ -1 +1 @@
-{"version":3,"file":"person.mjs","sources":["../../../source/atomic/text-lockup/person.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type PersonTextLockupProps } from '../_types';\n\nexport default ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupProps) => {\n  let children: ElementVisual[] = [];\n\n  if (nameComposite && !name) {\n    children.push(nameComposite);\n  }\n\n  if (name) {\n    children.push(\n      ElementModel.headline.sansLarger({\n        element: name,\n        elementStyles: {\n          element: {\n            fontWeight: '700',\n            color: `${token.color.black}`,\n\n            [`& + *`]: {\n              marginTop: '4px',\n            },\n          },\n          subElement: {\n            color: 'currentColor',\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (job) {\n    children.push(\n      ElementModel.headline.sansSmall({\n        element: job,\n        elementStyles: {\n          element: {\n            lineHeight: `1.25em`,\n          },\n          subElement: {\n            color: 'currentColor',\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (association) {\n    children.push(\n      ElementModel.headline.sansSmall({\n        element: association,\n        elementStyles: {\n          element: {\n            lineHeight: '1.2em',\n            display: 'block',\n            color: `${token.color.gray.dark}`,\n\n            [`& + *`]: {\n              marginTop: '4px',\n            },\n\n            [`& a:hover, a:focus`]: {\n              textDecoration: 'underline',\n            },\n          },\n          subElement: {\n            color: 'currentColor',\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (pronouns) {\n    pronouns.innerHTML = `<i>${pronouns.innerHTML}</i>`;\n    children.push(\n      ElementModel.headline.sansSmall({\n        element: pronouns,\n        elementStyles: {\n          element: {\n            [`& + *`]: {\n              marginTop: '4px',\n            },\n          },\n          subElement: {\n            color: 'currentColor',\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (subText) {\n    children.push(\n      ElementModel.headline.sansSmall({\n        element: subText,\n        elementStyles: {\n          siblingAfter: {\n            marginTop: '4px',\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\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: 'text-lockup-person-container',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    },\n  });\n};\n"],"names":["ElementModel.headline.sansLarger","ElementModel.headline.sansSmall","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv"],"mappings":";;;;AAKA,MAAA,SAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAC3B,MAAI,WAA4B,CAAA;AAEhC,MAAI,iBAAiB,CAAC,MAAM;AAC1B,aAAS,KAAK,aAAa;AAAA,EAC7B;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPA,WAAiC;AAAA,QAC/B,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,YAAY;AAAA,YACZ,OAAO,GAAG,MAAM,MAAM,KAAK;AAAA,YAE3B,CAAC,OAAO,GAAG;AAAA,cACT,WAAW;AAAA,YAAA;AAAA,UACb;AAAA,UAEF,YAAY;AAAA,YACV,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,QAEF;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,KAAK;AACP,aAAS;AAAA,MACPC,UAAgC;AAAA,QAC9B,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,YAAY;AAAA,UAAA;AAAA,UAEd,YAAY;AAAA,YACV,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,QAEF;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,aAAa;AACf,aAAS;AAAA,MACPA,UAAgC;AAAA,QAC9B,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,OAAO,GAAG,MAAM,MAAM,KAAK,IAAI;AAAA,YAE/B,CAAC,OAAO,GAAG;AAAA,cACT,WAAW;AAAA,YAAA;AAAA,YAGb,CAAC,oBAAoB,GAAG;AAAA,cACtB,gBAAgB;AAAA,YAAA;AAAA,UAClB;AAAA,UAEF,YAAY;AAAA,YACV,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,QAEF;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,UAAU;AACZ,aAAS,YAAY,MAAM,SAAS,SAAS;AAC7C,aAAS;AAAA,MACPA,UAAgC;AAAA,QAC9B,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,CAAC,OAAO,GAAG;AAAA,cACT,WAAW;AAAA,YAAA;AAAA,UACb;AAAA,UAEF,YAAY;AAAA,YACV,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,QAEF;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS;AACX,aAAS;AAAA,MACPA,UAAgC;AAAA,QAC9B,SAAS;AAAA,QACT,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,QAEF;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS;AACX,aAAS;AAAA,MACPC,qBAAyC;AAAA,QACvC,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,WAAW,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AACH;"}
+{"version":3,"file":"person.mjs","sources":["../../../source/atomic/text-lockup/person.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { type PersonTextLockupProps } from '../_types';\n\nexport default ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupProps) => {\n  const container = new ElementBuilder()\n    .withClassName('text-lockup-person-container')\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    });\n\n  if (nameComposite && !name) {\n    container.withChild(nameComposite);\n  }\n\n  if (name) {\n    const headlineStyles = {\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const nameElement = new ElementBuilder(name)\n      .styled(headlineStyles)\n      .withStyles({\n        element: {\n          fontWeight: '700',\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(nameElement);\n  }\n\n  if (job) {\n    const jobElement = new ElementBuilder(job)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          lineHeight: `1.25em`,\n\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(jobElement);\n  }\n\n  if (association) {\n    const associationElement = new ElementBuilder(association)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          lineHeight: '1.2em',\n          display: 'block',\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n\n          [`& a:hover, a:focus`]: {\n            textDecoration: 'underline',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(associationElement);\n  }\n\n  if (pronouns) {\n    pronouns.innerHTML = `<i>${pronouns.innerHTML}</i>`;\n    const pronounsElement = new ElementBuilder(pronouns)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(pronounsElement);\n  }\n\n  if (subText) {\n    const subTextElement = new ElementBuilder(subText)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n        },\n        siblingAfter: {\n          marginTop: '4px',\n        },\n      })\n      .build();\n\n    container.withChild(subTextElement);\n  }\n\n  if (actions) {\n    const actionsElement = new ElementBuilder(actions)\n      .styled(layout.grid.inline.tabletRows)\n      .withStyles({\n        element: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .build();\n\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["animationStyles"],"mappings":"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"}

package/dist/atomic/text-lockup/small-scaling.d.ts

@@ -10,10 +10,6 @@ export type TypeTextLockupSmallScaling = {
     isThemeDark?: boolean;
     text?: HTMLElement | null;
 };
-declare const _default: ({ actions, customStyles, date, eventMeta, eyebrow, hasEyebrowRibbon, headline, isThemeDark, text, }: TypeTextLockupSmallScaling) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: ({ actions, customStyles, date, eventMeta, eyebrow, hasEyebrowRibbon, headline, isThemeDark, text, }: TypeTextLockupSmallScaling) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=small-scaling.d.ts.map

package/dist/atomic/text-lockup/small-scaling.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"small-scaling.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/small-scaling.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,MAAM,0BAA0B,GAAG;IACvC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC3B,CAAC;yBAEc,qGAUb,0BAA0B;;;;;AAV7B,wBAsEE"}
+{"version":3,"file":"small-scaling.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/small-scaling.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,MAAM,0BAA0B,GAAG;IACvC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC3B,CAAC;yBAEc,qGAUb,0BAA0B;AAV7B,wBAyFE"}