@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

package/dist/composite/person/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../source/composite/person/list.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nexport default ({\n  actions,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        customStyles: {\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            display: 'block',\n            width: '160px',\n            paddingRight: `${token.spacing.md}`,\n            alignSelf: 'flex-start',\n          }),\n\n          ...createMediaQuery('min-width', mediumBreakpoint, {\n            width: '208px',\n          }),\n        },\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    children.push(\n      layout.person.columns.information({\n        actions,\n        address,\n        association,\n        customStyles: {},\n        email,\n        isThemeDark,\n        job,\n        linkendIn,\n        name,\n        phone,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-list-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["token","layout.person.columns.image","createMediaQuery","layout.person.columns.information","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkBA,iBAAM,MAAM,iBAAiB,MAAM;AAC3D,MAAM,wBAAwBA,iBAAM,MAAM,iBAAiB,OAAO;AAClE,MAAM,mBAAmBA,iBAAM,MAAM,iBAAiB,MAAM;AAE5D,MAAA,OAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAI,OAAO;AACT,aAAS;AAAA,MACPC,cAA4B;AAAA,QAC1B,cAAc;AAAA,UACZ,GAAGC,OAAAA,iBAAiB,aAAa,uBAAuB;AAAA,YACtD,SAAS;AAAA,YACT,OAAO;AAAA,YACP,cAAc,GAAGF,iBAAM,QAAQ,EAAE;AAAA,YACjC,WAAW;AAAA,UAAA,CACZ;AAAA,UAED,GAAGE,OAAAA,iBAAiB,aAAa,kBAAkB;AAAA,YACjD,OAAO;AAAA,UAAA,CACR;AAAA,QAAA;AAAA,QAEH;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPC,oBAAkC;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAGF,OAAAA,iBAAiB,aAAa,iBAAiB;AAAA,UAChD,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;;"}
+{"version":3,"file":"list.js","sources":["../../../source/composite/person/list.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nexport default ({\n  actions,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard): ElementModel<HTMLElement> => {\n  const builder = new ElementBuilder()\n    .withClassName('person-list-container')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      layout.person.columns.image({\n        customStyles: {\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            display: 'block',\n            width: '160px',\n            paddingRight: `${token.spacing.md}`,\n            alignSelf: 'flex-start',\n          }),\n\n          ...createMediaQuery('min-width', mediumBreakpoint, {\n            width: '208px',\n          }),\n        },\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    builder.withChild(\n      layout.person.columns.information({\n        actions,\n        address,\n        association,\n        customStyles: {},\n        email,\n        isThemeDark,\n        job,\n        linkendIn,\n        name,\n        phone,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n"],"names":["token","ElementBuilder","createMediaQuery","layout.person.columns.image","layout.person.columns.information"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkBA,iBAAM,MAAM,iBAAiB,MAAM;AAC3D,MAAM,wBAAwBA,iBAAM,MAAM,iBAAiB,OAAO;AAClE,MAAM,mBAAmBA,iBAAM,MAAM,iBAAiB,MAAM;AAE5D,MAAA,OAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6C;AAC3C,QAAM,UAAU,IAAIC,kBAAAA,eAAA,EACjB,cAAc,uBAAuB,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MAET,GAAGC,OAAAA,iBAAiB,aAAa,iBAAiB;AAAA,QAChD,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EACH,CACD;AAEH,MAAI,OAAO;AACT,YAAQ;AAAA,MACNC,cAA4B;AAAA,QAC1B,cAAc;AAAA,UACZ,GAAGD,OAAAA,iBAAiB,aAAa,uBAAuB;AAAA,YACtD,SAAS;AAAA,YACT,OAAO;AAAA,YACP,cAAc,GAAGF,iBAAM,QAAQ,EAAE;AAAA,YACjC,WAAW;AAAA,UAAA,CACZ;AAAA,UAED,GAAGE,OAAAA,iBAAiB,aAAa,kBAAkB;AAAA,YACjD,OAAO;AAAA,UAAA,CACR;AAAA,QAAA;AAAA,QAEH;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,YAAQ;AAAA,MACNE,oBAAkC;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;;"}

package/dist/composite/person/list.mjs

@@ -1,7 +1,10 @@
-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 { createMediaQuery } from "@universityofmaryland/web-utilities-library/styles";
-import { createDiv } from "../../model/elements/index.mjs";
 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";
@@ -12,17 +15,18 @@ import "@universityofmaryland/web-icons-library/arrows";
 import "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../atomic/animations/brand/card-stack.mjs";
+import "@universityofmaryland/web-styles-library";
 import "@universityofmaryland/web-utilities-library/performance";
 import "@universityofmaryland/web-utilities-library/accessibility";
 import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";
+import "@universityofmaryland/web-utilities-library/theme";
 import "../../atomic/layout/block/stacked.mjs";
 import "../../atomic/layout/overlay/modal.mjs";
 import { image, information } from "../../atomic/layout/person/columns.mjs";
 import "@universityofmaryland/web-icons-library/social";
 import "../../atomic/text-lockup/date.mjs";
 import "../../atomic/text-lockup/small.mjs";
-import "@universityofmaryland/web-styles-library/typography";
 const smallBreakpoint = token.media.breakpointValues.small.max;
 const mediumBreakpointStart = token.media.breakpointValues.medium.min;
 const mediumBreakpoint = token.media.breakpointValues.large.min;
@@ -40,9 +44,17 @@ const list = ({
   pronouns,
   subText
 }) => {
-  let children = [];
+  const builder = new ElementBuilder().withClassName("person-list-container").withStyles({
+    element: {
+      overflow: "hidden",
+      display: "flex",
+      ...createMediaQuery("max-width", smallBreakpoint, {
+        flexDirection: "column"
+      })
+    }
+  });
   if (image$1) {
-    children.push(
+    builder.withChild(
       image({
         customStyles: {
           ...createMediaQuery("min-width", mediumBreakpointStart, {
@@ -61,7 +73,7 @@ const list = ({
     );
   }
   if (name) {
-    children.push(
+    builder.withChild(
       information({
         actions,
         address,
@@ -78,19 +90,7 @@ const list = ({
       })
     );
   }
-  return createDiv({
-    className: "person-list-container",
-    children,
-    elementStyles: {
-      element: {
-        overflow: "hidden",
-        display: "flex",
-        ...createMediaQuery("max-width", smallBreakpoint, {
-          flexDirection: "column"
-        })
-      }
-    }
-  });
+  return builder.build();
 };
 export {
   list as default

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

@@ -1 +1 @@
-{"version":3,"file":"list.mjs","sources":["../../../source/composite/person/list.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nexport default ({\n  actions,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        customStyles: {\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            display: 'block',\n            width: '160px',\n            paddingRight: `${token.spacing.md}`,\n            alignSelf: 'flex-start',\n          }),\n\n          ...createMediaQuery('min-width', mediumBreakpoint, {\n            width: '208px',\n          }),\n        },\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    children.push(\n      layout.person.columns.information({\n        actions,\n        address,\n        association,\n        customStyles: {},\n        email,\n        isThemeDark,\n        job,\n        linkendIn,\n        name,\n        phone,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-list-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["image","layout.person.columns.image","layout.person.columns.information","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAC3D,MAAM,wBAAwB,MAAM,MAAM,iBAAiB,OAAO;AAClE,MAAM,mBAAmB,MAAM,MAAM,iBAAiB,MAAM;AAE5D,MAAA,OAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA4B;AAAA,QAC1B,cAAc;AAAA,UACZ,GAAG,iBAAiB,aAAa,uBAAuB;AAAA,YACtD,SAAS;AAAA,YACT,OAAO;AAAA,YACP,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,YACjC,WAAW;AAAA,UAAA,CACZ;AAAA,UAED,GAAG,iBAAiB,aAAa,kBAAkB;AAAA,YACjD,OAAO;AAAA,UAAA,CACR;AAAA,QAAA;AAAA,QACH,OACAD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPE,YAAkC;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,UAChD,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;"}
+{"version":3,"file":"list.mjs","sources":["../../../source/composite/person/list.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nexport default ({\n  actions,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard): ElementModel<HTMLElement> => {\n  const builder = new ElementBuilder()\n    .withClassName('person-list-container')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      layout.person.columns.image({\n        customStyles: {\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            display: 'block',\n            width: '160px',\n            paddingRight: `${token.spacing.md}`,\n            alignSelf: 'flex-start',\n          }),\n\n          ...createMediaQuery('min-width', mediumBreakpoint, {\n            width: '208px',\n          }),\n        },\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    builder.withChild(\n      layout.person.columns.information({\n        actions,\n        address,\n        association,\n        customStyles: {},\n        email,\n        isThemeDark,\n        job,\n        linkendIn,\n        name,\n        phone,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n"],"names":["image","layout.person.columns.image","layout.person.columns.information"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAC3D,MAAM,wBAAwB,MAAM,MAAM,iBAAiB,OAAO;AAClE,MAAM,mBAAmB,MAAM,MAAM,iBAAiB,MAAM;AAE5D,MAAA,OAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6C;AAC3C,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,uBAAuB,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MAET,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,QAChD,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EACH,CACD;AAEH,MAAIA,SAAO;AACT,YAAQ;AAAA,MACNC,MAA4B;AAAA,QAC1B,cAAc;AAAA,UACZ,GAAG,iBAAiB,aAAa,uBAAuB;AAAA,YACtD,SAAS;AAAA,YACT,OAAO;AAAA,YACP,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,YACjC,WAAW;AAAA,UAAA,CACZ;AAAA,UAED,GAAG,iBAAiB,aAAa,kBAAkB;AAAA,YACjD,OAAO;AAAA,UAAA,CACR;AAAA,QAAA;AAAA,QACH,OACAD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,YAAQ;AAAA,MACNE,YAAkC;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"tabular.d.ts","sourceRoot":"","sources":["../../../source/composite/person/tabular.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;yBAKtB,kIAcb,UAAU;;;;;AAdb,wBAuFE"}
+{"version":3,"file":"tabular.d.ts","sourceRoot":"","sources":["../../../source/composite/person/tabular.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;yBAI/B,kIAcb,UAAU,KAAG,UAAU;AAd1B,wBA8FE"}

package/dist/composite/person/tabular.js

@@ -1,10 +1,14 @@
 "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 typography = require("@universityofmaryland/web-styles-library/typography");
+const animation = require("@universityofmaryland/web-styles-library/animation");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
-const index = require("../../model/elements/index.js");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
+const dom = require("@universityofmaryland/web-utilities-library/dom");
 require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-styles-library/layout");
 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");
@@ -13,6 +17,7 @@ require("@universityofmaryland/web-icons-library/arrows");
 require("../../atomic/animations/actions/indicator.js");
 require("../../atomic/animations/brand/chevron-scroll.js");
 require("../../atomic/animations/brand/card-stack.js");
+require("@universityofmaryland/web-styles-library");
 require("@universityofmaryland/web-utilities-library/performance");
 require("@universityofmaryland/web-utilities-library/accessibility");
 require("@universityofmaryland/web-icons-library/location");
@@ -23,8 +28,6 @@ const columns = require("../../atomic/layout/person/columns.js");
 require("@universityofmaryland/web-icons-library/social");
 require("../../atomic/text-lockup/date.js");
 require("../../atomic/text-lockup/small.js");
-require("@universityofmaryland/web-styles-library/typography");
-const headline = require("../../model/elements/headline.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -42,6 +45,8 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
+const animation__namespace = /* @__PURE__ */ _interopNamespaceDefault(animation);
 const smallBreakpoint = token__namespace.media.breakpointValues.small.max;
 const tabular = ({
   actions,
@@ -58,9 +63,17 @@ const tabular = ({
   pronouns,
   subText
 }) => {
-  let children = [];
+  const builder = new webBuilderLibrary.ElementBuilder().withClassName("person-tabular-container").withStyles({
+    element: {
+      overflow: "hidden",
+      display: "flex",
+      ...styles.createMediaQuery("max-width", smallBreakpoint, {
+        flexDirection: "column"
+      })
+    }
+  });
   if (image) {
-    children.push(
+    builder.withChild(
       columns.image({
         image,
         isThemeDark
@@ -68,23 +81,26 @@ const tabular = ({
     );
   }
   if (name) {
-    const nameComposite = headline.sansLarge({
-      element: name,
-      elementStyles: {
-        element: {
-          fontWeight: `${token__namespace.font.weight.bold}`,
-          color: `${token__namespace.color.black}`,
-          [`& + *`]: {
-            marginTop: token__namespace.spacing.min
-          }
-        },
-        subElement: {
-          color: "currentColor"
+    const nameStyles = {
+      ...typography__namespace.sans.compose("large", {
+        theme: theme.theme.fontColor(isThemeDark)
+      }),
+      ...animation__namespace.line.composeSlideUnder({
+        color: theme.theme.foreground(isThemeDark)
+      })
+    };
+    const nameComposite = new webBuilderLibrary.ElementBuilder(name).withClassName("person-tabular-name").styled(nameStyles).withStyles({
+      element: {
+        fontWeight: `${token__namespace.font.weight.bold}`,
+        [`& + *`]: {
+          marginTop: token__namespace.spacing.min
         }
       },
-      isThemeDark
-    });
-    children.push(
+      subElement: {
+        color: "currentColor"
+      }
+    }).withModifier((el) => dom.wrapTextNodeInSpan(el)).build();
+    builder.withChild(
       columns.details({
         actions,
         association,
@@ -98,7 +114,7 @@ const tabular = ({
     );
   }
   if (additionalContact || address || email || linkendIn || phone) {
-    children.push(
+    builder.withChild(
       columns.contact({
         additionalContact,
         address,
@@ -110,19 +126,7 @@ const tabular = ({
       })
     );
   }
-  return index.createDiv({
-    className: "person-tabular-container",
-    children,
-    elementStyles: {
-      element: {
-        overflow: "hidden",
-        display: "flex",
-        ...styles.createMediaQuery("max-width", smallBreakpoint, {
-          flexDirection: "column"
-        })
-      }
-    }
-  });
+  return builder.build();
 };
 module.exports = tabular;
 //# sourceMappingURL=tabular.js.map

package/dist/composite/person/tabular.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabular.js","sources":["../../../source/composite/person/tabular.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport default ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameComposite = ElementModel.headline.sansLarge({\n      element: name,\n      elementStyles: {\n        element: {\n          fontWeight: `${token.font.weight.bold}`,\n          color: `${token.color.black}`,\n\n          [`& + *`]: {\n            marginTop: token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      },\n      isThemeDark,\n    });\n\n    children.push(\n      layout.person.columns.details({\n        actions,\n        association,\n        isThemeDark,\n        customStyles: {},\n        job,\n        nameComposite,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkendIn || phone) {\n    children.push(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-tabular-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["token","layout.person.columns.image","ElementModel.headline.sansLarge","layout.person.columns.details","layout.person.columns.contact","ElementModel.createDiv","createMediaQuery"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkBA,iBAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAA,UAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAI,OAAO;AACT,aAAS;AAAA,MACPC,cAA4B;AAAA,QAC1B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,gBAAgBC,SAAAA,UAAgC;AAAA,MACpD,SAAS;AAAA,MACT,eAAe;AAAA,QACb,SAAS;AAAA,UACP,YAAY,GAAGF,iBAAM,KAAK,OAAO,IAAI;AAAA,UACrC,OAAO,GAAGA,iBAAM,MAAM,KAAK;AAAA,UAE3B,CAAC,OAAO,GAAG;AAAA,YACT,WAAWA,iBAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,QAEF,YAAY;AAAA,UACV,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,IAAA,CACD;AAED,aAAS;AAAA,MACPG,gBAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,aAAa,OAAO;AAC/D,aAAS;AAAA,MACPC,gBAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAGC,OAAAA,iBAAiB,aAAa,iBAAiB;AAAA,UAChD,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;;"}
+{"version":3,"file":"tabular.js","sources":["../../../source/composite/person/tabular.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 animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport default ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard): UMDElement => {\n  const builder = new ElementBuilder()\n    .withClassName('person-tabular-container')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      layout.person.columns.image({\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameStyles = {\n      ...typography.sans.compose('large', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const nameComposite = new ElementBuilder(name)\n      .withClassName('person-tabular-name')\n      .styled(nameStyles)\n      .withStyles({\n        element: {\n          fontWeight: `${token.font.weight.bold}`,\n\n          [`& + *`]: {\n            marginTop: token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    builder.withChild(\n      layout.person.columns.details({\n        actions,\n        association,\n        isThemeDark,\n        customStyles: {},\n        job,\n        nameComposite,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkendIn || phone) {\n    builder.withChild(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n"],"names":["token","ElementBuilder","createMediaQuery","layout.person.columns.image","typography","theme","animationStyles","wrapTextNodeInSpan","layout.person.columns.details","layout.person.columns.contact"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,kBAAkBA,iBAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAA,UAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,UAAU,IAAIC,kBAAAA,eAAA,EACjB,cAAc,0BAA0B,EACxC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MAET,GAAGC,OAAAA,iBAAiB,aAAa,iBAAiB;AAAA,QAChD,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EACH,CACD;AAEH,MAAI,OAAO;AACT,YAAQ;AAAA,MACNC,cAA4B;AAAA,QAC1B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,aAAa;AAAA,MACjB,GAAGC,sBAAW,KAAK,QAAQ,SAAS;AAAA,QAClC,OAAOC,MAAAA,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,MACD,GAAGC,qBAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAOD,MAAAA,MAAM,WAAW,WAAW;AAAA,MAAA,CACpC;AAAA,IAAA;AAGH,UAAM,gBAAgB,IAAIJ,iCAAe,IAAI,EAC1C,cAAc,qBAAqB,EACnC,OAAO,UAAU,EACjB,WAAW;AAAA,MACV,SAAS;AAAA,QACP,YAAY,GAAGD,iBAAM,KAAK,OAAO,IAAI;AAAA,QAErC,CAAC,OAAO,GAAG;AAAA,UACT,WAAWA,iBAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,MAEF,YAAY;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,IACT,CACD,EACA,aAAa,CAAC,OAAOO,IAAAA,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,YAAQ;AAAA,MACNC,gBAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,aAAa,OAAO;AAC/D,YAAQ;AAAA,MACNC,gBAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;;"}

package/dist/composite/person/tabular.mjs

@@ -1,9 +1,13 @@
-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 typography from "@universityofmaryland/web-styles-library/typography";
+import * as animation from "@universityofmaryland/web-styles-library/animation";
 import { createMediaQuery } from "@universityofmaryland/web-utilities-library/styles";
-import { createDiv } from "../../model/elements/index.mjs";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
+import { wrapTextNodeInSpan } from "@universityofmaryland/web-utilities-library/dom";
 import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-styles-library/layout";
 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";
@@ -12,6 +16,7 @@ import "@universityofmaryland/web-icons-library/arrows";
 import "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../atomic/animations/brand/card-stack.mjs";
+import "@universityofmaryland/web-styles-library";
 import "@universityofmaryland/web-utilities-library/performance";
 import "@universityofmaryland/web-utilities-library/accessibility";
 import "@universityofmaryland/web-icons-library/location";
@@ -22,8 +27,6 @@ import { image, details, contact } from "../../atomic/layout/person/columns.mjs"
 import "@universityofmaryland/web-icons-library/social";
 import "../../atomic/text-lockup/date.mjs";
 import "../../atomic/text-lockup/small.mjs";
-import "@universityofmaryland/web-styles-library/typography";
-import { sansLarge } from "../../model/elements/headline.mjs";
 const smallBreakpoint = token.media.breakpointValues.small.max;
 const tabular = ({
   actions,
@@ -40,9 +43,17 @@ const tabular = ({
   pronouns,
   subText
 }) => {
-  let children = [];
+  const builder = new ElementBuilder().withClassName("person-tabular-container").withStyles({
+    element: {
+      overflow: "hidden",
+      display: "flex",
+      ...createMediaQuery("max-width", smallBreakpoint, {
+        flexDirection: "column"
+      })
+    }
+  });
   if (image$1) {
-    children.push(
+    builder.withChild(
       image({
         image: image$1,
         isThemeDark
@@ -50,23 +61,26 @@ const tabular = ({
     );
   }
   if (name) {
-    const nameComposite = sansLarge({
-      element: name,
-      elementStyles: {
-        element: {
-          fontWeight: `${token.font.weight.bold}`,
-          color: `${token.color.black}`,
-          [`& + *`]: {
-            marginTop: token.spacing.min
-          }
-        },
-        subElement: {
-          color: "currentColor"
+    const nameStyles = {
+      ...typography.sans.compose("large", {
+        theme: theme.fontColor(isThemeDark)
+      }),
+      ...animation.line.composeSlideUnder({
+        color: theme.foreground(isThemeDark)
+      })
+    };
+    const nameComposite = new ElementBuilder(name).withClassName("person-tabular-name").styled(nameStyles).withStyles({
+      element: {
+        fontWeight: `${token.font.weight.bold}`,
+        [`& + *`]: {
+          marginTop: token.spacing.min
         }
       },
-      isThemeDark
-    });
-    children.push(
+      subElement: {
+        color: "currentColor"
+      }
+    }).withModifier((el) => wrapTextNodeInSpan(el)).build();
+    builder.withChild(
       details({
         actions,
         association,
@@ -80,7 +94,7 @@ const tabular = ({
     );
   }
   if (additionalContact || address || email || linkendIn || phone) {
-    children.push(
+    builder.withChild(
       contact({
         additionalContact,
         address,
@@ -92,19 +106,7 @@ const tabular = ({
       })
     );
   }
-  return createDiv({
-    className: "person-tabular-container",
-    children,
-    elementStyles: {
-      element: {
-        overflow: "hidden",
-        display: "flex",
-        ...createMediaQuery("max-width", smallBreakpoint, {
-          flexDirection: "column"
-        })
-      }
-    }
-  });
+  return builder.build();
 };
 export {
   tabular as default

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

@@ -1 +1 @@
-{"version":3,"file":"tabular.mjs","sources":["../../../source/composite/person/tabular.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport default ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameComposite = ElementModel.headline.sansLarge({\n      element: name,\n      elementStyles: {\n        element: {\n          fontWeight: `${token.font.weight.bold}`,\n          color: `${token.color.black}`,\n\n          [`& + *`]: {\n            marginTop: token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      },\n      isThemeDark,\n    });\n\n    children.push(\n      layout.person.columns.details({\n        actions,\n        association,\n        isThemeDark,\n        customStyles: {},\n        job,\n        nameComposite,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkendIn || phone) {\n    children.push(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-tabular-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["image","layout.person.columns.image","ElementModel.headline.sansLarge","layout.person.columns.details","layout.person.columns.contact","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAA,UAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA4B;AAAA,QAAA,OAC1BD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,gBAAgBE,UAAgC;AAAA,MACpD,SAAS;AAAA,MACT,eAAe;AAAA,QACb,SAAS;AAAA,UACP,YAAY,GAAG,MAAM,KAAK,OAAO,IAAI;AAAA,UACrC,OAAO,GAAG,MAAM,MAAM,KAAK;AAAA,UAE3B,CAAC,OAAO,GAAG;AAAA,YACT,WAAW,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,QAEF,YAAY;AAAA,UACV,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,IAAA,CACD;AAED,aAAS;AAAA,MACPC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,aAAa,OAAO;AAC/D,aAAS;AAAA,MACPC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,UAChD,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;"}
+{"version":3,"file":"tabular.mjs","sources":["../../../source/composite/person/tabular.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 animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport default ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard): UMDElement => {\n  const builder = new ElementBuilder()\n    .withClassName('person-tabular-container')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      layout.person.columns.image({\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameStyles = {\n      ...typography.sans.compose('large', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const nameComposite = new ElementBuilder(name)\n      .withClassName('person-tabular-name')\n      .styled(nameStyles)\n      .withStyles({\n        element: {\n          fontWeight: `${token.font.weight.bold}`,\n\n          [`& + *`]: {\n            marginTop: token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    builder.withChild(\n      layout.person.columns.details({\n        actions,\n        association,\n        isThemeDark,\n        customStyles: {},\n        job,\n        nameComposite,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkendIn || phone) {\n    builder.withChild(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n"],"names":["image","layout.person.columns.image","animationStyles","layout.person.columns.details","layout.person.columns.contact"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAA,UAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,0BAA0B,EACxC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MAET,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,QAChD,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EACH,CACD;AAEH,MAAIA,SAAO;AACT,YAAQ;AAAA,MACNC,MAA4B;AAAA,QAAA,OAC1BD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,aAAa;AAAA,MACjB,GAAG,WAAW,KAAK,QAAQ,SAAS;AAAA,QAClC,OAAO,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,MACD,GAAGE,UAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAO,MAAM,WAAW,WAAW;AAAA,MAAA,CACpC;AAAA,IAAA;AAGH,UAAM,gBAAgB,IAAI,eAAe,IAAI,EAC1C,cAAc,qBAAqB,EACnC,OAAO,UAAU,EACjB,WAAW;AAAA,MACV,SAAS;AAAA,QACP,YAAY,GAAG,MAAM,KAAK,OAAO,IAAI;AAAA,QAErC,CAAC,OAAO,GAAG;AAAA,UACT,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,MAEF,YAAY;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,IACT,CACD,EACA,aAAa,CAAC,OAAO,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,YAAQ;AAAA,MACNC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,aAAa,OAAO;AAC/D,YAAQ;AAAA,MACNC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;"}

package/dist/composite/quote/elements/action.d.ts

@@ -2,10 +2,6 @@ import { QuoteBaseProps, QuoteVariantProps } from '../_types';
 interface QuoteActionProps extends QuoteVariantProps, Pick<QuoteBaseProps, 'includesAnimation' | 'image'> {
     action: HTMLAnchorElement;
 }
-declare const _default: ({ action, image, includesAnimation, isTypeFeatured, }: QuoteActionProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: ({ action, image, includesAnimation, isTypeFeatured, }: QuoteActionProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLAnchorElement>;
 export default _default;
 //# sourceMappingURL=action.d.ts.map

package/dist/composite/quote/elements/action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/action.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAExE,UAAU,gBACR,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,mBAAmB,GAAG,OAAO,CAAC;IACrD,MAAM,EAAE,iBAAiB,CAAC;CAC3B;yBAEe,uDAKb,gBAAgB;;;;;AALnB,wBAyBK"}
+{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/action.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAExE,UAAU,gBACR,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,mBAAmB,GAAG,OAAO,CAAC;IACrD,MAAM,EAAE,iBAAiB,CAAC;CAC3B;yBAEe,uDAKb,gBAAgB;AALnB,wBAwBa"}

package/dist/composite/quote/elements/action.js

@@ -1,7 +1,7 @@
 "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 layout = require("@universityofmaryland/web-styles-library/layout");
-const index = require("../../../model/elements/index.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -25,22 +25,18 @@ const elementAction = ({
   image,
   includesAnimation,
   isTypeFeatured = false
-}) => index.create({
-  element: action,
-  className: "quote-container-actions",
-  elementStyles: {
-    element: {
-      marginTop: token__namespace.spacing.sm,
-      ...!isTypeFeatured && {
-        ...layout__namespace.grid.inline.tabletRows
-      },
-      ...includesAnimation && (!isTypeFeatured || isTypeFeatured && !image) && {
-        opacity: "0",
-        transform: "translateY(20px)",
-        transition: "opacity 1s ease, transform 0.5s ease"
-      }
+}) => new webBuilderLibrary.ElementBuilder(action).withClassName("quote-container-actions").withStyles({
+  element: {
+    marginTop: token__namespace.spacing.sm,
+    ...!isTypeFeatured && {
+      ...layout__namespace.grid.inline.tabletRows
+    },
+    ...includesAnimation && (!isTypeFeatured || isTypeFeatured && !image) && {
+      opacity: "0",
+      transform: "translateY(20px)",
+      transition: "opacity 1s ease, transform 0.5s ease"
     }
   }
-});
+}).build();
 module.exports = elementAction;
 //# sourceMappingURL=action.js.map

package/dist/composite/quote/elements/action.js.map

@@ -1 +1 @@
-{"version":3,"file":"action.js","sources":["../../../../source/composite/quote/elements/action.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { ElementModel } from 'model';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteActionProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'includesAnimation' | 'image'> {\n  action: HTMLAnchorElement;\n}\n\nexport default ({\n  action,\n  image,\n  includesAnimation,\n  isTypeFeatured = false,\n}: QuoteActionProps) =>\n  ElementModel.create({\n    element: action,\n    className: 'quote-container-actions',\n    elementStyles: {\n      element: {\n        marginTop: token.spacing.sm,\n\n        ...(!isTypeFeatured && {\n          ...layout.grid.inline.tabletRows,\n        }),\n\n        ...(includesAnimation &&\n          (!isTypeFeatured || (isTypeFeatured && !image)) && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n      },\n    },\n  });\n"],"names":["ElementModel.create","token","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,MAAA,gBAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MACEA,aAAoB;AAAA,EAClB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,eAAe;AAAA,IACb,SAAS;AAAA,MACP,WAAWC,iBAAM,QAAQ;AAAA,MAEzB,GAAI,CAAC,kBAAkB;AAAA,QACrB,GAAGC,kBAAO,KAAK,OAAO;AAAA,MAAA;AAAA,MAGxB,GAAI,sBACD,CAAC,kBAAmB,kBAAkB,CAAC,UAAW;AAAA,QACjD,SAAS;AAAA,QACT,WAAW;AAAA,QACX,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACJ;AAEJ,CAAC;;"}
+{"version":3,"file":"action.js","sources":["../../../../source/composite/quote/elements/action.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteActionProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'includesAnimation' | 'image'> {\n  action: HTMLAnchorElement;\n}\n\nexport default ({\n  action,\n  image,\n  includesAnimation,\n  isTypeFeatured = false,\n}: QuoteActionProps) =>\n  new ElementBuilder(action)\n    .withClassName('quote-container-actions')\n    .withStyles({\n      element: {\n        marginTop: token.spacing.sm,\n\n        ...(!isTypeFeatured && {\n          ...layout.grid.inline.tabletRows,\n        }),\n\n        ...(includesAnimation &&\n          (!isTypeFeatured || (isTypeFeatured && !image)) && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n      },\n    })\n    .build();\n"],"names":["ElementBuilder","token","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,MAAA,gBAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MACE,IAAIA,kBAAAA,eAAe,MAAM,EACtB,cAAc,yBAAyB,EACvC,WAAW;AAAA,EACV,SAAS;AAAA,IACP,WAAWC,iBAAM,QAAQ;AAAA,IAEzB,GAAI,CAAC,kBAAkB;AAAA,MACrB,GAAGC,kBAAO,KAAK,OAAO;AAAA,IAAA;AAAA,IAGxB,GAAI,sBACD,CAAC,kBAAmB,kBAAkB,CAAC,UAAW;AAAA,MACjD,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,IAAA;AAAA,EACd;AAEN,CAAC,EACA,MAAA;;"}

package/dist/composite/quote/elements/action.mjs

@@ -1,28 +1,24 @@
-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 layout from "@universityofmaryland/web-styles-library/layout";
-import { create } from "../../../model/elements/index.mjs";
 const elementAction = ({
   action,
   image,
   includesAnimation,
   isTypeFeatured = false
-}) => create({
-  element: action,
-  className: "quote-container-actions",
-  elementStyles: {
-    element: {
-      marginTop: token.spacing.sm,
-      ...!isTypeFeatured && {
-        ...layout.grid.inline.tabletRows
-      },
-      ...includesAnimation && (!isTypeFeatured || isTypeFeatured && !image) && {
-        opacity: "0",
-        transform: "translateY(20px)",
-        transition: "opacity 1s ease, transform 0.5s ease"
-      }
+}) => new ElementBuilder(action).withClassName("quote-container-actions").withStyles({
+  element: {
+    marginTop: token.spacing.sm,
+    ...!isTypeFeatured && {
+      ...layout.grid.inline.tabletRows
+    },
+    ...includesAnimation && (!isTypeFeatured || isTypeFeatured && !image) && {
+      opacity: "0",
+      transform: "translateY(20px)",
+      transition: "opacity 1s ease, transform 0.5s ease"
     }
   }
-});
+}).build();
 export {
   elementAction as default
 };

package/dist/composite/quote/elements/action.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"action.mjs","sources":["../../../../source/composite/quote/elements/action.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { ElementModel } from 'model';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteActionProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'includesAnimation' | 'image'> {\n  action: HTMLAnchorElement;\n}\n\nexport default ({\n  action,\n  image,\n  includesAnimation,\n  isTypeFeatured = false,\n}: QuoteActionProps) =>\n  ElementModel.create({\n    element: action,\n    className: 'quote-container-actions',\n    elementStyles: {\n      element: {\n        marginTop: token.spacing.sm,\n\n        ...(!isTypeFeatured && {\n          ...layout.grid.inline.tabletRows,\n        }),\n\n        ...(includesAnimation &&\n          (!isTypeFeatured || (isTypeFeatured && !image)) && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n      },\n    },\n  });\n"],"names":["ElementModel.create"],"mappings":";;;AAWA,MAAA,gBAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MACEA,OAAoB;AAAA,EAClB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,eAAe;AAAA,IACb,SAAS;AAAA,MACP,WAAW,MAAM,QAAQ;AAAA,MAEzB,GAAI,CAAC,kBAAkB;AAAA,QACrB,GAAG,OAAO,KAAK,OAAO;AAAA,MAAA;AAAA,MAGxB,GAAI,sBACD,CAAC,kBAAmB,kBAAkB,CAAC,UAAW;AAAA,QACjD,SAAS;AAAA,QACT,WAAW;AAAA,QACX,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACJ;AAEJ,CAAC;"}
+{"version":3,"file":"action.mjs","sources":["../../../../source/composite/quote/elements/action.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteActionProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'includesAnimation' | 'image'> {\n  action: HTMLAnchorElement;\n}\n\nexport default ({\n  action,\n  image,\n  includesAnimation,\n  isTypeFeatured = false,\n}: QuoteActionProps) =>\n  new ElementBuilder(action)\n    .withClassName('quote-container-actions')\n    .withStyles({\n      element: {\n        marginTop: token.spacing.sm,\n\n        ...(!isTypeFeatured && {\n          ...layout.grid.inline.tabletRows,\n        }),\n\n        ...(includesAnimation &&\n          (!isTypeFeatured || (isTypeFeatured && !image)) && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n      },\n    })\n    .build();\n"],"names":[],"mappings":";;;AAWA,MAAA,gBAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MACE,IAAI,eAAe,MAAM,EACtB,cAAc,yBAAyB,EACvC,WAAW;AAAA,EACV,SAAS;AAAA,IACP,WAAW,MAAM,QAAQ;AAAA,IAEzB,GAAI,CAAC,kBAAkB;AAAA,MACrB,GAAG,OAAO,KAAK,OAAO;AAAA,IAAA;AAAA,IAGxB,GAAI,sBACD,CAAC,kBAAmB,kBAAkB,CAAC,UAAW;AAAA,MACjD,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,IAAA;AAAA,EACd;AAEN,CAAC,EACA,MAAA;"}

package/dist/composite/quote/elements/icon.d.ts

@@ -2,10 +2,6 @@ import { QuoteBaseProps, QuoteVariantProps } from '../_types';
 interface QuoteIconProps extends QuoteVariantProps, Pick<QuoteBaseProps, 'isThemeMaryland'> {
     hasImage?: boolean;
 }
-declare const _default: ({ hasImage, isThemeMaryland, isTypeFeatured, }: QuoteIconProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: ({ hasImage, isThemeMaryland, isTypeFeatured, }: QuoteIconProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=icon.d.ts.map

package/dist/composite/quote/elements/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/icon.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAExE,UAAU,cACR,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;yBAEe,gDAIb,cAAc;;;;;AAJjB,wBA2DE"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/icon.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAExE,UAAU,cACR,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;yBAEe,gDAIb,cAAc;AAJjB,wBA2DE"}