@universityofmaryland/web-elements-library 1.5.9 → 1.6.0-beta.1

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

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

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

@@ -1,6 +1,6 @@
 export * as bio from './bio';
-export { default as block } from './block';
-export { default as hero } from './hero';
-export { default as list } from './list';
-export { default as tabular } from './tabular';
+export { createCompositePersonBlock as block } from './block';
+export { createCompositePersonHero as hero } from './hero';
+export { createCompositePersonList as list } from './list';
+export { createCompositePersonTabular as tabular } from './tabular';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/person/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,OAAO,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/person/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,OAAO,CAAC;AAC7B,OAAO,EAAE,0BAA0B,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC9D,OAAO,EAAE,yBAAyB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC3D,OAAO,EAAE,yBAAyB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC3D,OAAO,EAAE,4BAA4B,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/composite/person/index.js

@@ -1,13 +1,13 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./bio/index.js");
-const block = require("./block.js");
-const hero = require("./hero.js");
-const list = require("./list.js");
-const tabular = require("./tabular.js");
-exports.bio = index;
-exports.block = block;
-exports.hero = hero;
-exports.list = list;
-exports.tabular = tabular;
+import * as index from "./bio/index.js";
+import { createCompositePersonBlock } from "./block.js";
+import { createCompositePersonHero } from "./hero.js";
+import { createCompositePersonList } from "./list.js";
+import { createCompositePersonTabular } from "./tabular.js";
+export {
+  index as bio,
+  createCompositePersonBlock as block,
+  createCompositePersonHero as hero,
+  createCompositePersonList as list,
+  createCompositePersonTabular as tabular
+};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

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

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

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

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

package/dist/composite/person/list.js

@@ -1,98 +1,82 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-require("@universityofmaryland/web-styles-library/element");
-require("@universityofmaryland/web-styles-library/layout");
-require("@universityofmaryland/web-styles-library/animation");
-require("@universityofmaryland/web-styles-library/typography");
-require("@universityofmaryland/web-utilities-library/media");
-require("@universityofmaryland/web-utilities-library/dom");
-require("@universityofmaryland/web-icons-library/controls");
-require("@universityofmaryland/web-icons-library/communication");
-require("@universityofmaryland/web-icons-library/files");
-require("@universityofmaryland/web-icons-library/brand");
-require("@universityofmaryland/web-icons-library/arrows");
-require("../../atomic/animations/actions/indicator.js");
-require("../../atomic/animations/brand/chevron-scroll.js");
-require("../../atomic/animations/brand/card-stack.js");
-require("@universityofmaryland/web-styles-library");
-require("@universityofmaryland/web-utilities-library/performance");
-require("@universityofmaryland/web-utilities-library/accessibility");
-require("@universityofmaryland/web-icons-library/location");
-require("@universityofmaryland/web-icons-library/calendar");
-require("@universityofmaryland/web-utilities-library/theme");
-require("../../atomic/layout/block/stacked.js");
-require("../../atomic/layout/overlay/modal.js");
-const columns = require("../../atomic/layout/person/columns.js");
-require("@universityofmaryland/web-icons-library/social");
-require("../../atomic/text-lockup/date.js");
-require("../../atomic/text-lockup/small.js");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const smallBreakpoint = token__namespace.media.breakpointValues.small.max;
-const mediumBreakpointStart = token__namespace.media.breakpointValues.medium.min;
-const mediumBreakpoint = token__namespace.media.breakpointValues.large.min;
-const list = ({
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import { createMediaQuery } from "@universityofmaryland/web-utilities-library/styles";
+import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
+import "@universityofmaryland/web-styles-library/typography";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/controls";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "@universityofmaryland/web-icons-library/arrows";
+import "../../atomic/animations/actions/indicator.js";
+import "../../atomic/animations/brand/chevron-scroll.js";
+import "../../atomic/animations/brand/card-stack.js";
+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.js";
+import "../../atomic/layout/overlay/modal.js";
+import { image, information } from "../../atomic/layout/person/columns.js";
+import "@universityofmaryland/web-icons-library/social";
+import "../../atomic/text-lockup/date.js";
+import "../../atomic/text-lockup/small.js";
+const smallBreakpoint = token.media.breakpointValues.small.max;
+const mediumBreakpointStart = token.media.breakpointValues.medium.min;
+const mediumBreakpoint = token.media.breakpointValues.large.min;
+const CreatePersonListElement = ({
   actions,
   address,
   association,
   email,
-  image,
+  image: image$1,
   isThemeDark,
   job,
-  linkendIn,
+  linkedin,
   name,
   phone,
   pronouns,
   subText
 }) => {
-  const builder = new webBuilderLibrary.ElementBuilder().withClassName("person-list-container").withStyles({
+  const builder = new ElementBuilder().withClassName("person-list-container").withStyles({
     element: {
       overflow: "hidden",
       display: "flex",
-      ...styles.createMediaQuery("max-width", smallBreakpoint, {
+      ...createMediaQuery("max-width", smallBreakpoint, {
         flexDirection: "column"
       })
     }
   });
-  if (image) {
+  if (image$1) {
     builder.withChild(
-      columns.image({
+      image({
         customStyles: {
-          ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
+          ...createMediaQuery("min-width", mediumBreakpointStart, {
             display: "block",
             width: "160px",
-            paddingRight: `${token__namespace.spacing.md}`,
+            minWidth: "160px",
+            paddingRight: `${token.spacing.md}`,
             alignSelf: "flex-start"
           }),
-          ...styles.createMediaQuery("min-width", mediumBreakpoint, {
-            width: "208px"
+          ...createMediaQuery("min-width", mediumBreakpoint, {
+            width: "208px",
+            minWidth: "208px"
           })
         },
-        image,
+        image: image$1,
         isThemeDark
       })
     );
   }
   if (name) {
     builder.withChild(
-      columns.information({
+      information({
         actions,
         address,
         association,
@@ -100,7 +84,7 @@ const list = ({
         email,
         isThemeDark,
         job,
-        linkendIn,
+        linkedin,
         name,
         phone,
         pronouns,
@@ -110,5 +94,8 @@ const list = ({
   }
   return builder.build();
 };
-module.exports = list;
+const createCompositePersonList = CreatePersonListElement;
+export {
+  createCompositePersonList
+};
 //# sourceMappingURL=list.js.map

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

@@ -1 +1 @@
-{"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;;"}
+{"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\nconst CreatePersonListElement = ({\n  actions,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkedin,\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            minWidth: '160px',\n            paddingRight: `${token.spacing.md}`,\n            alignSelf: 'flex-start',\n          }),\n\n          ...createMediaQuery('min-width', mediumBreakpoint, {\n            width: '208px',\n            minWidth: '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        linkedin,\n        name,\n        phone,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n\nexport const createCompositePersonList = CreatePersonListElement;\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,MAAM,0BAA0B,CAAC;AAAA,EAC/B;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,UAAU;AAAA,YACV,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,YACjC,WAAW;AAAA,UAAA,CACZ;AAAA,UAED,GAAG,iBAAiB,aAAa,kBAAkB;AAAA,YACjD,OAAO;AAAA,YACP,UAAU;AAAA,UAAA,CACX;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;AAEO,MAAM,4BAA4B;"}

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

@@ -1,5 +1,4 @@
 import { PersonCard } from './_types';
 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;
+export declare const createCompositePersonTabular: ({ actions, additionalContact, address, association, email, image, isThemeDark, job, linkedin, name, phone, pronouns, subText, }: PersonCard) => UMDElement;
 //# 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":"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"}
+{"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;AAoG/C,eAAO,MAAM,4BAA4B,oIAlFtC,UAAU,KAAG,UAkFsD,CAAC"}

package/dist/composite/person/tabular.js

@@ -1,107 +1,87 @@
-"use strict";
-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 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-icons-library/controls");
-require("@universityofmaryland/web-icons-library/communication");
-require("@universityofmaryland/web-icons-library/files");
-require("@universityofmaryland/web-icons-library/brand");
-require("@universityofmaryland/web-icons-library/arrows");
-require("../../atomic/animations/actions/indicator.js");
-require("../../atomic/animations/brand/chevron-scroll.js");
-require("../../atomic/animations/brand/card-stack.js");
-require("@universityofmaryland/web-styles-library");
-require("@universityofmaryland/web-utilities-library/performance");
-require("@universityofmaryland/web-utilities-library/accessibility");
-require("@universityofmaryland/web-icons-library/location");
-require("@universityofmaryland/web-icons-library/calendar");
-require("../../atomic/layout/block/stacked.js");
-require("../../atomic/layout/overlay/modal.js");
-const columns = require("../../atomic/layout/person/columns.js");
-require("@universityofmaryland/web-icons-library/social");
-require("../../atomic/text-lockup/date.js");
-require("../../atomic/text-lockup/small.js");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = 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 = ({
+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 { 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-icons-library/controls";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "@universityofmaryland/web-icons-library/arrows";
+import "../../atomic/animations/actions/indicator.js";
+import "../../atomic/animations/brand/chevron-scroll.js";
+import "../../atomic/animations/brand/card-stack.js";
+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 "../../atomic/layout/block/stacked.js";
+import "../../atomic/layout/overlay/modal.js";
+import { image, details, contact } from "../../atomic/layout/person/columns.js";
+import "@universityofmaryland/web-icons-library/social";
+import "../../atomic/text-lockup/date.js";
+import "../../atomic/text-lockup/small.js";
+const smallBreakpoint = token.media.breakpointValues.small.max;
+const CreatePersonTabularElement = ({
   actions,
   additionalContact,
   address,
   association,
   email,
-  image,
+  image: image$1,
   isThemeDark,
   job,
-  linkendIn,
+  linkedin,
   name,
   phone,
   pronouns,
   subText
 }) => {
-  const builder = new webBuilderLibrary.ElementBuilder().withClassName("person-tabular-container").withStyles({
+  const builder = new ElementBuilder().withClassName("person-tabular-container").withStyles({
     element: {
       overflow: "hidden",
       display: "flex",
-      ...styles.createMediaQuery("max-width", smallBreakpoint, {
+      ...createMediaQuery("max-width", smallBreakpoint, {
         flexDirection: "column"
       })
     }
   });
-  if (image) {
+  if (image$1) {
     builder.withChild(
-      columns.image({
-        image,
+      image({
+        image: image$1,
         isThemeDark
       })
     );
   }
   if (name) {
     const nameStyles = {
-      ...typography__namespace.sans.compose("large", {
-        theme: theme.theme.fontColor(isThemeDark)
+      ...typography.sans.compose("large", {
+        theme: theme.fontColor(isThemeDark)
       }),
-      ...animation__namespace.line.composeSlideUnder({
-        color: theme.theme.foreground(isThemeDark)
+      ...animation.line.composeSlideUnder({
+        color: theme.foreground(isThemeDark)
       })
     };
-    const nameComposite = new webBuilderLibrary.ElementBuilder(name).withClassName("person-tabular-name").styled(nameStyles).withStyles({
+    const nameComposite = new ElementBuilder(name).withClassName("person-tabular-name").styled(nameStyles).withStyles({
       element: {
-        fontWeight: `${token__namespace.font.weight.bold}`,
+        fontWeight: `${token.font.weight.bold}`,
         [`& + *`]: {
-          marginTop: token__namespace.spacing.min
+          marginTop: token.spacing.min
         }
       },
       subElement: {
         color: "currentColor"
       }
-    }).withModifier((el) => dom.wrapTextNodeInSpan(el)).build();
+    }).withModifier((el) => wrapTextNodeInSpan(el)).build();
     builder.withChild(
-      columns.details({
+      details({
         actions,
         association,
         isThemeDark,
@@ -113,20 +93,23 @@ const tabular = ({
       })
     );
   }
-  if (additionalContact || address || email || linkendIn || phone) {
+  if (additionalContact || address || email || linkedin || phone) {
     builder.withChild(
-      columns.contact({
+      contact({
         additionalContact,
         address,
         customStyles: {},
         email,
         isThemeDark,
-        linkendIn,
+        linkedin,
         phone
       })
     );
   }
   return builder.build();
 };
-module.exports = tabular;
+const createCompositePersonTabular = CreatePersonTabularElement;
+export {
+  createCompositePersonTabular
+};
 //# 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 { 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;;"}
+{"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\nconst CreatePersonTabularElement = ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkedin,\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 || linkedin || phone) {\n    builder.withChild(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkedin,\n        phone,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n\nexport const createCompositePersonTabular = CreatePersonTabularElement;\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,MAAM,6BAA6B,CAAC;AAAA,EAClC;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,YAAY,OAAO;AAC9D,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;AAEO,MAAM,+BAA+B;"}

package/dist/composite/quote/_constants.js

@@ -1,7 +1,7 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const SMALL = 500;
 const MEDIUM = 900;
-exports.MEDIUM = MEDIUM;
-exports.SMALL = SMALL;
+export {
+  MEDIUM,
+  SMALL
+};
 //# sourceMappingURL=_constants.js.map

package/dist/composite/quote/_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"_constants.js","sources":["../../../source/composite/quote/_constants.ts"],"sourcesContent":["export const SMALL = 500;\nexport const MEDIUM = 900;\n"],"names":[],"mappings":";;AAAO,MAAM,QAAQ;AACd,MAAM,SAAS;;;"}
+{"version":3,"file":"_constants.js","sources":["../../../source/composite/quote/_constants.ts"],"sourcesContent":["export const SMALL = 500;\nexport const MEDIUM = 900;\n"],"names":[],"mappings":"AAAO,MAAM,QAAQ;AACd,MAAM,SAAS;"}

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

@@ -2,6 +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) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLAnchorElement>;
-export default _default;
+export declare const createCompositeQuoteAction: ({ action, image, includesAnimation, isTypeFeatured, }: QuoteActionProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLAnchorElement>;
+export {};
 //# 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,wBAyBa"}
+{"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;AA6BD,eAAO,MAAM,0BAA0B,0DAtBpC,gBAAgB,wFAsB+C,CAAC"}