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

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

@@ -1 +1 @@
-{"version":3,"file":"small.js","sources":["../../../../source/composite/person/bio/small.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { PersonBio } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\nconst createTextContainer = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { isThemeDark, name, ...textProps } = props;\n\n  const builder = new ElementBuilder().styled(\n    Styles.element.text.line.adjustentInset,\n  );\n\n  if (name) {\n    builder.withChild(\n      new ElementBuilder(name)\n        .styled(\n          Styles.typography.sans.compose('extralarge', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n            ...(!isThemeDark && { color: `${token.color.black}` }),\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  builder.withChild(textLockup.person({ ...textProps, isThemeDark }));\n\n  return builder.build();\n};\n\nconst createTextColumn = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { actions } = props;\n  const textContainer = createTextContainer(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-text-column')\n    .withChild(textContainer)\n    .withChild(textLockup.contact(props));\n\n  if (actions) {\n    builder.withChild(\n      new ElementBuilder(actions)\n        .styled(Styles.layout.grid.inline.tabletRows)\n        .withStyles({\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  return builder.build();\n};\n\nconst makeContainer = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { image } = props;\n  const textColumn = createTextColumn(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-container')\n    .withStyles({\n      element: {\n        display: 'grid',\n        gridGap: `${token.spacing.md}`,\n\n        ...createMediaQuery(\n          'min-width',\n          token.media.breakpointValues.large.min,\n          {\n            gridTemplateColumns: `repeat(8, 1fr)`,\n            gridGap: `${token.spacing.lg}`,\n            alignItems: `center`,\n          },\n        ),\n\n        [`& > *`]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 5`,\n            },\n          ),\n        },\n\n        [`&:has(> :nth-child(2)) > *:first-child `]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 3`,\n              alignSelf: `flex-start`,\n            },\n          ),\n        },\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          element: {\n            ...createMediaQuery(\n              'max-width',\n              token.media.breakpointValues.medium.max,\n              {\n                display: 'flex',\n              },\n            ),\n\n            [`& img`]: {\n              ...createMediaQuery(\n                'min-width',\n                token.media.breakpointValues.large.min,\n                {\n                  width: `100%`,\n                  height: `auto !important`,\n                },\n              ),\n            },\n          },\n        },\n      }),\n    );\n  }\n\n  builder.withChild(textColumn);\n\n  return builder.build();\n};\n\nexport default (props: PersonBio): ElementModel<HTMLElement> => {\n  const { isThemeDark, description } = props;\n  const container = makeContainer(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-composite')\n    .withChild(container);\n\n  if (description) {\n    builder.withChild(\n      new ElementBuilder(description)\n        .styled(\n          Styles.element.text.rich.composeSimple({\n            size: 'large',\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            marginTop: token.spacing.lg,\n            maxWidth: token.spacing.maxWidth.smallest,\n          },\n        })\n        .build(),\n    );\n  }\n\n  return builder.build();\n};\n"],"names":["ElementBuilder","Styles","theme","token","textLockup.person","textLockup.contact","createMediaQuery","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,sBAAsB,CAAC,UAAgD;AAC3E,QAAM,EAAE,aAAa,MAAM,GAAG,cAAc;AAE5C,QAAM,UAAU,IAAIA,kBAAAA,eAAA,EAAiB;AAAA,IACnCC,kBAAO,QAAQ,KAAK,KAAK;AAAA,EAAA;AAG3B,MAAI,MAAM;AACR,YAAQ;AAAA,MACN,IAAID,kBAAAA,eAAe,IAAI,EACpB;AAAA,QACCC,kBAAO,WAAW,KAAK,QAAQ,cAAc;AAAA,UAC3C,OAAOC,MAAAA,MAAM,UAAU,WAAW;AAAA,QAAA,CACnC;AAAA,MAAA,EAEF,WAAW;AAAA,QACV,SAAS;AAAA,UACP,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,GAAI,CAAC,eAAe,EAAE,OAAO,GAAGC,iBAAM,MAAM,KAAK,GAAA;AAAA,QAAG;AAAA,QAEtD,cAAc;AAAA,UACZ,WAAWA,iBAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,UAAQ,UAAUC,OAAkB,EAAE,GAAG,WAAW,YAAA,CAAa,CAAC;AAElE,SAAO,QAAQ,MAAA;AACjB;AAEA,MAAM,mBAAmB,CAAC,UAAgD;AACxE,QAAM,EAAE,YAAY;AACpB,QAAM,gBAAgB,oBAAoB,KAAK;AAE/C,QAAM,UAAU,IAAIJ,iCAAA,EACjB,cAAc,gCAAgC,EAC9C,UAAU,aAAa,EACvB,UAAUK,QAAmB,KAAK,CAAC;AAEtC,MAAI,SAAS;AACX,YAAQ;AAAA,MACN,IAAIL,iCAAe,OAAO,EACvB,OAAOC,kBAAO,OAAO,KAAK,OAAO,UAAU,EAC3C,WAAW;AAAA,QACV,SAAS;AAAA,UACP,WAAWE,iBAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEA,MAAM,gBAAgB,CAAC,UAAgD;AACrE,QAAM,EAAE,UAAU;AAClB,QAAM,aAAa,iBAAiB,KAAK;AAEzC,QAAM,UAAU,IAAIH,kBAAAA,eAAA,EACjB,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS,GAAGG,iBAAM,QAAQ,EAAE;AAAA,MAE5B,GAAGG,OAAAA;AAAAA,QACD;AAAA,QACAH,iBAAM,MAAM,iBAAiB,MAAM;AAAA,QACnC;AAAA,UACE,qBAAqB;AAAA,UACrB,SAAS,GAAGA,iBAAM,QAAQ,EAAE;AAAA,UAC5B,YAAY;AAAA,QAAA;AAAA,MACd;AAAA,MAGF,CAAC,OAAO,GAAG;AAAA,QACT,GAAGG,OAAAA;AAAAA,UACD;AAAA,UACAH,iBAAM,MAAM,iBAAiB,MAAM;AAAA,UACnC;AAAA,YACE,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,MACF;AAAA,MAGF,CAAC,yCAAyC,GAAG;AAAA,QAC3C,GAAGG,OAAAA;AAAAA,UACD;AAAA,UACAH,iBAAM,MAAM,iBAAiB,MAAM;AAAA,UACnC;AAAA,YACE,YAAY;AAAA,YACZ,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAEH,MAAI,OAAO;AACT,YAAQ;AAAA,MACNI,WAAwB;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,cAAc;AAAA,UACZ,SAAS;AAAA,YACP,GAAGD,OAAAA;AAAAA,cACD;AAAA,cACAH,iBAAM,MAAM,iBAAiB,OAAO;AAAA,cACpC;AAAA,gBACE,SAAS;AAAA,cAAA;AAAA,YACX;AAAA,YAGF,CAAC,OAAO,GAAG;AAAA,cACT,GAAGG,OAAAA;AAAAA,gBACD;AAAA,gBACAH,iBAAM,MAAM,iBAAiB,MAAM;AAAA,gBACnC;AAAA,kBACE,OAAO;AAAA,kBACP,QAAQ;AAAA,gBAAA;AAAA,cACV;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,UAAQ,UAAU,UAAU;AAE5B,SAAO,QAAQ,MAAA;AACjB;AAEA,MAAA,QAAe,CAAC,UAAgD;AAC9D,QAAM,EAAE,aAAa,YAAA,IAAgB;AACrC,QAAM,YAAY,cAAc,KAAK;AAErC,QAAM,UAAU,IAAIH,iCAAA,EACjB,cAAc,8BAA8B,EAC5C,UAAU,SAAS;AAEtB,MAAI,aAAa;AACf,YAAQ;AAAA,MACN,IAAIA,kBAAAA,eAAe,WAAW,EAC3B;AAAA,QACCC,kBAAO,QAAQ,KAAK,KAAK,cAAc;AAAA,UACrC,MAAM;AAAA,UACN,OAAOC,MAAAA,MAAM,UAAU,WAAW;AAAA,QAAA,CACnC;AAAA,MAAA,EAEF,WAAW;AAAA,QACV,SAAS;AAAA,UACP,WAAWC,iBAAM,QAAQ;AAAA,UACzB,UAAUA,iBAAM,QAAQ,SAAS;AAAA,QAAA;AAAA,MACnC,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,SAAO,QAAQ,MAAA;AACjB;;"}
+{"version":3,"file":"small.js","sources":["../../../../source/composite/person/bio/small.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { PersonBio } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\nconst createTextContainer = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { isThemeDark, name, ...textProps } = props;\n\n  const builder = new ElementBuilder().styled(\n    Styles.element.text.line.adjustentInset,\n  );\n\n  if (name) {\n    builder.withChild(\n      new ElementBuilder(name)\n        .styled(\n          Styles.typography.sans.compose('extralarge', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n            ...(!isThemeDark && { color: `${token.color.black}` }),\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  builder.withChild(textLockup.person({ ...textProps, isThemeDark }));\n\n  return builder.build();\n};\n\nconst createTextColumn = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { actions } = props;\n  const textContainer = createTextContainer(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-text-column')\n    .withChild(textContainer)\n    .withChild(textLockup.contact(props));\n\n  if (actions) {\n    builder.withChild(\n      new ElementBuilder(actions)\n        .styled(Styles.layout.grid.inline.tabletRows)\n        .withStyles({\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  return builder.build();\n};\n\nconst makeContainer = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { image } = props;\n  const textColumn = createTextColumn(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-container')\n    .withStyles({\n      element: {\n        display: 'grid',\n        gridGap: `${token.spacing.md}`,\n\n        ...createMediaQuery(\n          'min-width',\n          token.media.breakpointValues.large.min,\n          {\n            gridTemplateColumns: `repeat(8, 1fr)`,\n            gridGap: `${token.spacing.lg}`,\n            alignItems: `center`,\n          },\n        ),\n\n        [`& > *`]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 5`,\n            },\n          ),\n        },\n\n        [`&:has(> :nth-child(2)) > *:first-child `]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 3`,\n              alignSelf: `flex-start`,\n            },\n          ),\n        },\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          element: {\n            ...createMediaQuery(\n              'max-width',\n              token.media.breakpointValues.medium.max,\n              {\n                display: 'flex',\n              },\n            ),\n\n            [`& img`]: {\n              ...createMediaQuery(\n                'min-width',\n                token.media.breakpointValues.large.min,\n                {\n                  width: `100%`,\n                  height: `auto !important`,\n                },\n              ),\n            },\n          },\n        },\n      }),\n    );\n  }\n\n  builder.withChild(textColumn);\n\n  return builder.build();\n};\n\nconst CreatePersonBioSmallElement = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { isThemeDark, description } = props;\n  const container = makeContainer(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-composite')\n    .withChild(container);\n\n  if (description) {\n    builder.withChild(\n      new ElementBuilder(description)\n        .styled(\n          Styles.element.text.rich.composeSimple({\n            size: 'large',\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            marginTop: token.spacing.lg,\n            maxWidth: token.spacing.maxWidth.smallest,\n          },\n        })\n        .build(),\n    );\n  }\n\n  return builder.build();\n};\n\nexport const createCompositePersonBioSmall = CreatePersonBioSmallElement;\n"],"names":["textLockup.person","textLockup.contact","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,sBAAsB,CAAC,UAAgD;AAC3E,QAAM,EAAE,aAAa,MAAM,GAAG,cAAc;AAE5C,QAAM,UAAU,IAAI,eAAA,EAAiB;AAAA,IACnC,OAAO,QAAQ,KAAK,KAAK;AAAA,EAAA;AAG3B,MAAI,MAAM;AACR,YAAQ;AAAA,MACN,IAAI,eAAe,IAAI,EACpB;AAAA,QACC,OAAO,WAAW,KAAK,QAAQ,cAAc;AAAA,UAC3C,OAAO,MAAM,UAAU,WAAW;AAAA,QAAA,CACnC;AAAA,MAAA,EAEF,WAAW;AAAA,QACV,SAAS;AAAA,UACP,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,GAAI,CAAC,eAAe,EAAE,OAAO,GAAG,MAAM,MAAM,KAAK,GAAA;AAAA,QAAG;AAAA,QAEtD,cAAc;AAAA,UACZ,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,UAAQ,UAAUA,uBAAkB,EAAE,GAAG,WAAW,YAAA,CAAa,CAAC;AAElE,SAAO,QAAQ,MAAA;AACjB;AAEA,MAAM,mBAAmB,CAAC,UAAgD;AACxE,QAAM,EAAE,YAAY;AACpB,QAAM,gBAAgB,oBAAoB,KAAK;AAE/C,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,gCAAgC,EAC9C,UAAU,aAAa,EACvB,UAAUC,wBAAmB,KAAK,CAAC;AAEtC,MAAI,SAAS;AACX,YAAQ;AAAA,MACN,IAAI,eAAe,OAAO,EACvB,OAAO,OAAO,OAAO,KAAK,OAAO,UAAU,EAC3C,WAAW;AAAA,QACV,SAAS;AAAA,UACP,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEA,MAAM,gBAAgB,CAAC,UAAgD;AACrE,QAAM,EAAE,UAAU;AAClB,QAAM,aAAa,iBAAiB,KAAK;AAEzC,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS,GAAG,MAAM,QAAQ,EAAE;AAAA,MAE5B,GAAG;AAAA,QACD;AAAA,QACA,MAAM,MAAM,iBAAiB,MAAM;AAAA,QACnC;AAAA,UACE,qBAAqB;AAAA,UACrB,SAAS,GAAG,MAAM,QAAQ,EAAE;AAAA,UAC5B,YAAY;AAAA,QAAA;AAAA,MACd;AAAA,MAGF,CAAC,OAAO,GAAG;AAAA,QACT,GAAG;AAAA,UACD;AAAA,UACA,MAAM,MAAM,iBAAiB,MAAM;AAAA,UACnC;AAAA,YACE,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,MACF;AAAA,MAGF,CAAC,yCAAyC,GAAG;AAAA,QAC3C,GAAG;AAAA,UACD;AAAA,UACA,MAAM,MAAM,iBAAiB,MAAM;AAAA,UACnC;AAAA,YACE,YAAY;AAAA,YACZ,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAEH,MAAI,OAAO;AACT,YAAQ;AAAA,MACNC,sBAAwB;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,cAAc;AAAA,UACZ,SAAS;AAAA,YACP,GAAG;AAAA,cACD;AAAA,cACA,MAAM,MAAM,iBAAiB,OAAO;AAAA,cACpC;AAAA,gBACE,SAAS;AAAA,cAAA;AAAA,YACX;AAAA,YAGF,CAAC,OAAO,GAAG;AAAA,cACT,GAAG;AAAA,gBACD;AAAA,gBACA,MAAM,MAAM,iBAAiB,MAAM;AAAA,gBACnC;AAAA,kBACE,OAAO;AAAA,kBACP,QAAQ;AAAA,gBAAA;AAAA,cACV;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,UAAQ,UAAU,UAAU;AAE5B,SAAO,QAAQ,MAAA;AACjB;AAEA,MAAM,8BAA8B,CAAC,UAAgD;AACnF,QAAM,EAAE,aAAa,YAAA,IAAgB;AACrC,QAAM,YAAY,cAAc,KAAK;AAErC,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,8BAA8B,EAC5C,UAAU,SAAS;AAEtB,MAAI,aAAa;AACf,YAAQ;AAAA,MACN,IAAI,eAAe,WAAW,EAC3B;AAAA,QACC,OAAO,QAAQ,KAAK,KAAK,cAAc;AAAA,UACrC,MAAM;AAAA,UACN,OAAO,MAAM,UAAU,WAAW;AAAA,QAAA,CACnC;AAAA,MAAA,EAEF,WAAW;AAAA,QACV,SAAS;AAAA,UACP,WAAW,MAAM,QAAQ;AAAA,UACzB,UAAU,MAAM,QAAQ,SAAS;AAAA,QAAA;AAAA,MACnC,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEO,MAAM,gCAAgC;"}

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

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

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

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

package/dist/composite/person/block.js

@@ -1,66 +1,48 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const media = require("@universityofmaryland/web-utilities-library/media");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-const people = require("@universityofmaryland/web-icons-library/people");
-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/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");
-const background = require("../../atomic/assets/image/background.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");
-require("../../atomic/layout/person/columns.js");
-const contact = require("../../atomic/text-lockup/contact.js");
-require("../../atomic/text-lockup/date.js");
-const person = require("../../atomic/text-lockup/person.js");
-require("../../atomic/text-lockup/small.js");
-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 mediumBreakpointStart = token__namespace.media.breakpointValues.medium.min;
-const block = (props) => {
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import { imageFromSvg } from "@universityofmaryland/web-utilities-library/media";
+import { createMediaQuery } from "@universityofmaryland/web-utilities-library/styles";
+import { person } from "@universityofmaryland/web-icons-library/people";
+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/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 { createImageBackground } from "../../atomic/assets/image/background.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 "../../atomic/layout/person/columns.js";
+import { createTextLockupContact } from "../../atomic/text-lockup/contact.js";
+import "../../atomic/text-lockup/date.js";
+import { createTextLockupPerson } from "../../atomic/text-lockup/person.js";
+import "../../atomic/text-lockup/small.js";
+const mediumBreakpointStart = token.media.breakpointValues.medium.min;
+const CreatePersonBlockElement = (props) => {
   const { image: personImage, isThemeDark } = props;
-  const textLockupElement = person(props);
-  const contactLockupElement = contact(props);
+  const textLockupElement = createTextLockupPerson(props);
+  const contactLockupElement = createTextLockupContact(props);
   let image = personImage;
   if (!image) {
-    image = media.imageFromSvg({
-      SVG: people.person
+    image = imageFromSvg({
+      SVG: person
     });
   }
-  const imageContainer = new webBuilderLibrary.ElementBuilder().withClassName("person-block-image").withChild(
-    background({
+  const imageContainer = new ElementBuilder().withClassName("person-block-image").withChild(
+    createImageBackground({
       element: image,
       isScaled: false,
       customStyles: {
@@ -71,23 +53,27 @@ const block = (props) => {
     element: {
       display: "flex",
       justifyContent: "center",
-      backgroundColor: `${token__namespace.color.gray.lighter}`,
-      marginBottom: `${token__namespace.spacing.md}`,
+      backgroundColor: `${token.color.gray.lighter}`,
+      marginBottom: `${token.spacing.md}`,
       ...isThemeDark && {
-        backgroundColor: `${token__namespace.color.gray.darker}`
+        backgroundColor: `${token.color.gray.darker}`
       },
       ["& img, & svg"]: {
         display: "block",
         width: "100%",
         objectFit: "contain",
         height: "140px !important",
-        ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
+        transform: `none !important`,
+        ...createMediaQuery("min-width", mediumBreakpointStart, {
           height: "200px !important"
         })
       }
     }
   }).build();
-  return new webBuilderLibrary.ElementBuilder().withClassName("person-block").withChildren(imageContainer, textLockupElement, contactLockupElement).build();
+  return new ElementBuilder().withClassName("person-block").withChildren(imageContainer, textLockupElement, contactLockupElement).build();
+};
+const createCompositePersonBlock = CreatePersonBlockElement;
+export {
+  createCompositePersonBlock
 };
-module.exports = block;
 //# sourceMappingURL=block.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"block.js","sources":["../../../source/composite/person/block.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { person as iconPerson } from '@universityofmaryland/web-icons-library/people';\nimport { assets, textLockup } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\n\nexport default (props: PersonCard): ElementModel<HTMLElement> => {\n  const { image: personImage, isThemeDark } = props;\n  const textLockupElement = textLockup.person(props);\n  const contactLockupElement = textLockup.contact(props);\n\n  let image = personImage;\n\n  if (!image) {\n    image = imageFromSvg({\n      SVG: iconPerson,\n    });\n  }\n\n  const imageContainer = new ElementBuilder()\n    .withClassName('person-block-image')\n    .withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          height: 'auto',\n        },\n      }),\n    )\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        backgroundColor: `${token.color.gray.lighter}`,\n        marginBottom: `${token.spacing.md}`,\n\n        ...(isThemeDark && {\n          backgroundColor: `${token.color.gray.darker}`,\n        }),\n\n        ['& img, & svg']: {\n          display: 'block',\n          width: '100%',\n          objectFit: 'contain',\n          height: '140px !important',\n\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            height: '200px !important',\n          }),\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('person-block')\n    .withChildren(imageContainer, textLockupElement, contactLockupElement)\n    .build();\n};\n"],"names":["token","textLockup.person","textLockup.contact","imageFromSvg","iconPerson","ElementBuilder","assets.image.background","createMediaQuery"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,wBAAwBA,iBAAM,MAAM,iBAAiB,OAAO;AAElE,MAAA,QAAe,CAAC,UAAiD;AAC/D,QAAM,EAAE,OAAO,aAAa,YAAA,IAAgB;AAC5C,QAAM,oBAAoBC,OAAkB,KAAK;AACjD,QAAM,uBAAuBC,QAAmB,KAAK;AAErD,MAAI,QAAQ;AAEZ,MAAI,CAAC,OAAO;AACV,YAAQC,MAAAA,aAAa;AAAA,MACnB,KAAKC,OAAAA;AAAAA,IAAA,CACN;AAAA,EACH;AAEA,QAAM,iBAAiB,IAAIC,kBAAAA,eAAA,EACxB,cAAc,oBAAoB,EAClC;AAAA,IACCC,WAAwB;AAAA,MACtB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,iBAAiB,GAAGN,iBAAM,MAAM,KAAK,OAAO;AAAA,MAC5C,cAAc,GAAGA,iBAAM,QAAQ,EAAE;AAAA,MAEjC,GAAI,eAAe;AAAA,QACjB,iBAAiB,GAAGA,iBAAM,MAAM,KAAK,MAAM;AAAA,MAAA;AAAA,MAG7C,CAAC,cAAc,GAAG;AAAA,QAChB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ;AAAA,QAER,GAAGO,OAAAA,iBAAiB,aAAa,uBAAuB;AAAA,UACtD,QAAQ;AAAA,QAAA,CACT;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD,EACA,MAAA;AAEH,SAAO,IAAIF,kBAAAA,eAAA,EACR,cAAc,cAAc,EAC5B,aAAa,gBAAgB,mBAAmB,oBAAoB,EACpE,MAAA;AACL;;"}
+{"version":3,"file":"block.js","sources":["../../../source/composite/person/block.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { person as iconPerson } from '@universityofmaryland/web-icons-library/people';\nimport { assets, textLockup } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\n\nconst CreatePersonBlockElement = (props: PersonCard): ElementModel<HTMLElement> => {\n  const { image: personImage, isThemeDark } = props;\n  const textLockupElement = textLockup.person(props);\n  const contactLockupElement = textLockup.contact(props);\n\n  let image = personImage;\n\n  if (!image) {\n    image = imageFromSvg({\n      SVG: iconPerson,\n    });\n  }\n\n  const imageContainer = new ElementBuilder()\n    .withClassName('person-block-image')\n    .withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          height: 'auto',\n        },\n      }),\n    )\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        backgroundColor: `${token.color.gray.lighter}`,\n        marginBottom: `${token.spacing.md}`,\n\n        ...(isThemeDark && {\n          backgroundColor: `${token.color.gray.darker}`,\n        }),\n\n        ['& img, & svg']: {\n          display: 'block',\n          width: '100%',\n          objectFit: 'contain',\n          height: '140px !important',\n          transform: `none !important`,\n\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            height: '200px !important',\n          }),\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('person-block')\n    .withChildren(imageContainer, textLockupElement, contactLockupElement)\n    .build();\n};\n\nexport const createCompositePersonBlock = CreatePersonBlockElement;\n"],"names":["textLockup.person","textLockup.contact","iconPerson","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,wBAAwB,MAAM,MAAM,iBAAiB,OAAO;AAElE,MAAM,2BAA2B,CAAC,UAAiD;AACjF,QAAM,EAAE,OAAO,aAAa,YAAA,IAAgB;AAC5C,QAAM,oBAAoBA,uBAAkB,KAAK;AACjD,QAAM,uBAAuBC,wBAAmB,KAAK;AAErD,MAAI,QAAQ;AAEZ,MAAI,CAAC,OAAO;AACV,YAAQ,aAAa;AAAA,MACnB,KAAKC;AAAAA,IAAA,CACN;AAAA,EACH;AAEA,QAAM,iBAAiB,IAAI,eAAA,EACxB,cAAc,oBAAoB,EAClC;AAAA,IACCC,sBAAwB;AAAA,MACtB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,iBAAiB,GAAG,MAAM,MAAM,KAAK,OAAO;AAAA,MAC5C,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,MAEjC,GAAI,eAAe;AAAA,QACjB,iBAAiB,GAAG,MAAM,MAAM,KAAK,MAAM;AAAA,MAAA;AAAA,MAG7C,CAAC,cAAc,GAAG;AAAA,QAChB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,WAAW;AAAA,QAEX,GAAG,iBAAiB,aAAa,uBAAuB;AAAA,UACtD,QAAQ;AAAA,QAAA,CACT;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD,EACA,MAAA;AAEH,SAAO,IAAI,eAAA,EACR,cAAc,cAAc,EAC5B,aAAa,gBAAgB,mBAAmB,oBAAoB,EACpE,MAAA;AACL;AAEO,MAAM,6BAA6B;"}

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

@@ -17,6 +17,6 @@ interface PersonHero extends PersonText, PersonInfo {
     breadcrumbMobile?: HTMLElement | null;
     breadcrumbDesktop?: HTMLElement | null;
 }
-declare const _default: (props: PersonHero) => ElementModel<HTMLElement>;
-export default _default;
+export declare const createCompositePersonHero: (props: PersonHero) => ElementModel<HTMLElement>;
+export {};
 //# sourceMappingURL=hero.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../source/composite/person/hero.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,UAAW,SAAQ,KAAK;IAChC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;AAED,UAAU,UAAW,SAAQ,aAAa,EAAE,KAAK;IAC/C,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC/B;AAED,UAAU,UAAW,SAAQ,UAAU,EAAE,UAAU;IACjD,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACtC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACxC;yBAyPe,OAAO,UAAU,KAAG,YAAY,CAAC,WAAW,CAAC;AAA7D,wBA2FE"}
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../source/composite/person/hero.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,UAAW,SAAQ,KAAK;IAChC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;AAED,UAAU,UAAW,SAAQ,aAAa,EAAE,KAAK;IAC/C,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC/B;AAED,UAAU,UAAW,SAAQ,UAAU,EAAE,UAAU;IACjD,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACtC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACxC;AAsVD,eAAO,MAAM,yBAAyB,UA7FE,UAAU,KAAG,YAAY,CAAC,WAAW,CA6Fb,CAAC"}

package/dist/composite/person/hero.js

@@ -1,73 +1,54 @@
-"use strict";
-const token = require("@universityofmaryland/web-token-library");
-const Styles = require("@universityofmaryland/web-styles-library");
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const theme = require("@universityofmaryland/web-utilities-library/theme");
-require("@universityofmaryland/web-styles-library/element");
-require("@universityofmaryland/web-styles-library/layout");
-require("@universityofmaryland/web-styles-library/animation");
-require("@universityofmaryland/web-styles-library/typography");
-require("@universityofmaryland/web-utilities-library/media");
-require("@universityofmaryland/web-utilities-library/dom");
-require("@universityofmaryland/web-icons-library/controls");
-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");
-const background = require("../../atomic/assets/image/background.js");
-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");
-require("../../atomic/layout/person/columns.js");
-const contact = require("../../atomic/text-lockup/contact.js");
-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 Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+import * as token from "@universityofmaryland/web-token-library";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
+import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
+import "@universityofmaryland/web-styles-library/typography";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/controls";
+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 { createImageBackground } from "../../atomic/assets/image/background.js";
+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 "../../atomic/layout/person/columns.js";
+import { createTextLockupContact } from "../../atomic/text-lockup/contact.js";
+import "../../atomic/text-lockup/date.js";
+import "../../atomic/text-lockup/small.js";
 const CreateImageBlock = (props) => {
   const { image, association, pronouns, isThemeDark } = props;
-  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName(
+  const wrapper = new ElementBuilder().withClassName(
     "umd-person-hero-image-wrapper"
   );
-  const contactContainer = contact({
+  const contactContainer = createTextLockupContact({
     ...props,
     isThemeDark: !isThemeDark
   });
   if (image) {
-    const imageBlock = background({
+    const imageBlock = createImageBackground({
       element: image,
       isScaled: false
     });
-    const imageContainer = new webBuilderLibrary.ElementBuilder().withClassName("umd-person-hero-image").withChild(imageBlock).withStyles({
+    const imageContainer = new ElementBuilder().withClassName("umd-person-hero-image").withChild(imageBlock).withStyles({
       element: {
-        backgroundColor: `${isThemeDark ? token__namespace.color.gray.lightest : token__namespace.color.gray.darker}`,
+        backgroundColor: `${isThemeDark ? token.color.gray.lightest : token.color.gray.darker}`,
         display: "flex",
         justifyContent: "center",
-        marginBottom: token__namespace.spacing.md,
+        marginBottom: token.spacing.md,
         ["& img"]: {
-          [`@container (max-width: ${token__namespace.media.breakpoints.large.max})`]: {
+          [`@container (max-width: ${token.media.breakpoints.large.max})`]: {
             maxHeight: "160px"
           }
         }
@@ -77,33 +58,33 @@ const CreateImageBlock = (props) => {
   }
   if (association) {
     wrapper.withChild(
-      new webBuilderLibrary.ElementBuilder(association).styled(
-        Styles__namespace.typography.sans.compose("large", {
-          theme: theme.theme.fontColor(!isThemeDark)
+      new ElementBuilder(association).styled(
+        Styles.typography.sans.compose("large", {
+          theme: theme.fontColor(!isThemeDark)
         })
       ).withStyles({
         element: {
           display: "block"
         },
         siblingAfter: {
-          marginTop: token__namespace.spacing.min
+          marginTop: token.spacing.min
         }
       }).build()
     );
   }
   if (pronouns) {
     wrapper.withChild(
-      new webBuilderLibrary.ElementBuilder(document.createElement("i")).withClassName("umd-person-hero-pronouns").withStyles({
+      new ElementBuilder(document.createElement("i")).withClassName("umd-person-hero-pronouns").withStyles({
         element: {
           display: "block",
-          color: `${isThemeDark ? token__namespace.color.black : token__namespace.color.white}`,
+          color: `${isThemeDark ? token.color.black : token.color.white}`,
           ["*"]: {
             color: "currentColor"
           }
         },
         siblingAfter: {
           display: "block",
-          marginTop: token__namespace.spacing.min
+          marginTop: token.spacing.min
         }
       }).withChild(pronouns).build()
     );
@@ -112,18 +93,18 @@ const CreateImageBlock = (props) => {
     wrapper.withChild(contactContainer);
   }
   const wrapperBuilt = wrapper.build();
-  return new webBuilderLibrary.ElementBuilder().withClassName("umd-person-hero-image-container").withChild(wrapperBuilt).withStyles({
+  return new ElementBuilder().withClassName("umd-person-hero-image-container").withChild(wrapperBuilt).withStyles({
     element: {
-      paddingTop: `${token__namespace.spacing.lg}`,
-      paddingBottom: `${token__namespace.spacing.lg}`,
-      backgroundColor: `${isThemeDark ? token__namespace.color.gray.lightest : token__namespace.color.black}`,
+      paddingTop: `${token.spacing.lg}`,
+      paddingBottom: `${token.spacing.lg}`,
+      backgroundColor: `${isThemeDark ? token.color.gray.lightest : token.color.black}`,
       position: "relative",
-      [`@container (max-width: ${token__namespace.media.breakpoints.large.max})`]: {
-        paddingLeft: `${token__namespace.spacing.md}`,
-        paddingRight: `${token__namespace.spacing.md}`
+      [`@container (max-width: ${token.media.breakpoints.large.max})`]: {
+        paddingLeft: `${token.spacing.md}`,
+        paddingRight: `${token.spacing.md}`
       },
-      [`@container (min-width: ${token__namespace.media.breakpoints.tablet.min})`]: {
-        padding: `${token__namespace.spacing.md}`,
+      [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {
+        padding: `${token.spacing.md}`,
         width: "30%",
         maxWidth: "320px"
       }
@@ -136,16 +117,16 @@ const CreateTextContainer = ({
   subText,
   isThemeDark
 }) => {
-  const lineWrapper = new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.element.text.line.adjustentInset).withStyles({
+  const lineWrapper = new ElementBuilder().styled(Styles.element.text.line.adjustentInset).withStyles({
     pseudoBefore: {
-      backgroundColor: `${isThemeDark ? token__namespace.color.gold : token__namespace.color.red}`
+      backgroundColor: `${isThemeDark ? token.color.gold : token.color.red}`
     }
   });
   if (subText) {
     lineWrapper.withChild(
-      new webBuilderLibrary.ElementBuilder(subText).styled(
-        Styles__namespace.typography.sans.compose("small", {
-          theme: theme.theme.fontColor(isThemeDark)
+      new ElementBuilder(subText).styled(
+        Styles.typography.sans.compose("small", {
+          theme: theme.fontColor(isThemeDark)
         })
       ).withStyles({
         element: {
@@ -155,9 +136,9 @@ const CreateTextContainer = ({
           maxWidth: "650px"
         },
         siblingAfter: {
-          marginTop: token__namespace.spacing.min,
-          [`@container (min-width: ${token__namespace.media.breakpoints.tablet.min})`]: {
-            marginTop: token__namespace.spacing.sm
+          marginTop: token.spacing.min,
+          [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {
+            marginTop: token.spacing.sm
           }
         }
       }).build()
@@ -165,9 +146,9 @@ const CreateTextContainer = ({
   }
   if (name) {
     lineWrapper.withChild(
-      new webBuilderLibrary.ElementBuilder(name).styled(
-        Styles__namespace.typography.campaign.compose("large", {
-          theme: theme.theme.fontColor(isThemeDark)
+      new ElementBuilder(name).styled(
+        Styles.typography.campaign.compose("large", {
+          theme: theme.fontColor(isThemeDark)
         })
       ).withStyles({
         element: {
@@ -176,9 +157,9 @@ const CreateTextContainer = ({
           display: "block"
         },
         siblingAfter: {
-          marginTop: token__namespace.spacing.min,
-          [`@container (min-width: ${token__namespace.media.breakpoints.tablet.min})`]: {
-            marginTop: token__namespace.spacing.md
+          marginTop: token.spacing.min,
+          [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {
+            marginTop: token.spacing.md
           }
         }
       }).build()
@@ -186,34 +167,34 @@ const CreateTextContainer = ({
   }
   if (job) {
     lineWrapper.withChild(
-      new webBuilderLibrary.ElementBuilder(job).styled(
-        Styles__namespace.typography.sans.compose("medium", {
-          theme: theme.theme.fontColor(isThemeDark)
+      new ElementBuilder(job).styled(
+        Styles.typography.sans.compose("medium", {
+          theme: theme.fontColor(isThemeDark)
         })
       ).withStyles({
         element: {
           display: "block",
           ...!isThemeDark && {
-            color: token__namespace.color.gray.dark
+            color: token.color.gray.dark
           }
         }
       }).build()
     );
   }
   const lineWrapperBuilt = lineWrapper.build();
-  return new webBuilderLibrary.ElementBuilder().withClassName("person-hero-text").withChild(lineWrapperBuilt).withStyles({
+  return new ElementBuilder().withClassName("person-hero-text").withChild(lineWrapperBuilt).withStyles({
     element: {
-      backgroundColor: `${isThemeDark ? token__namespace.color.black : token__namespace.color.gray.lightest}`,
-      paddingTop: `${token__namespace.spacing["3xl"]}`,
-      paddingBottom: `${token__namespace.spacing["3xl"]}`,
+      backgroundColor: `${isThemeDark ? token.color.black : token.color.gray.lightest}`,
+      paddingTop: `${token.spacing["3xl"]}`,
+      paddingBottom: `${token.spacing["3xl"]}`,
       position: "relative",
-      [`@container (max-width: ${token__namespace.media.breakpoints.large.max})`]: {
-        paddingLeft: `${token__namespace.spacing.md}`,
-        paddingRight: `${token__namespace.spacing.md}`
+      [`@container (max-width: ${token.media.breakpoints.large.max})`]: {
+        paddingLeft: `${token.spacing.md}`,
+        paddingRight: `${token.spacing.md}`
       },
-      [`@container (min-width: ${token__namespace.media.breakpoints.tablet.min})`]: {
+      [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {
         paddingTop: `0`,
-        paddingBottom: `${token__namespace.spacing["7xl"]}`,
+        paddingBottom: `${token.spacing["7xl"]}`,
         alignSelf: "flex-start"
       }
     },
@@ -225,24 +206,24 @@ const CreateTextContainer = ({
       bottom: "0",
       width: "200vw",
       transform: "translateX(-20%)",
-      backgroundColor: `${isThemeDark ? token__namespace.color.black : token__namespace.color.gray.lightest}`
+      backgroundColor: `${isThemeDark ? token.color.black : token.color.gray.lightest}`
     }
   }).build();
 };
-const hero = (props) => {
+const CreatePersonHeroElement = (props) => {
   const { breadcrumbMobile, breadcrumbDesktop } = props;
   const textContainer = CreateTextContainer(props);
-  const textColumns = new webBuilderLibrary.ElementBuilder().withClassName("umd-person-hero-columns").withChild(textContainer).withStyles({
+  const textColumns = new ElementBuilder().withClassName("umd-person-hero-columns").withChild(textContainer).withStyles({
     element: {
-      [`@container (min-width: ${token__namespace.media.breakpoints.tablet.min})`]: {
+      [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {
         width: "70%"
       }
     }
   });
   if (breadcrumbDesktop) {
-    const textColumnBreadcrumb = new webBuilderLibrary.ElementBuilder().withClassName("umd-person-hero-breadcrumb-desktop").withChild(breadcrumbDesktop).withStyles({
+    const textColumnBreadcrumb = new ElementBuilder().withClassName("umd-person-hero-breadcrumb-desktop").withChild(breadcrumbDesktop).withStyles({
       element: {
-        [`@container (max-width: ${token__namespace.media.breakpoints.large.max})`]: {
+        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {
           display: "none"
         }
       }
@@ -251,28 +232,28 @@ const hero = (props) => {
   }
   const textColumnsBuilt = textColumns.build();
   const imageBlock = CreateImageBlock(props);
-  const elementWrapper = new webBuilderLibrary.ElementBuilder().withClassName("umd-person-hero-wrapper").withChild(textColumnsBuilt).withChild(imageBlock).withStyles({
+  const elementWrapper = new ElementBuilder().withClassName("umd-person-hero-wrapper").withChild(textColumnsBuilt).withChild(imageBlock).withStyles({
     element: {
-      [`@container (min-width: ${token__namespace.media.breakpoints.tablet.min})`]: {
+      [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {
         display: "flex",
         justifyContent: "space-between",
-        paddingTop: `${token__namespace.spacing["7xl"]}`
+        paddingTop: `${token.spacing["7xl"]}`
       }
     }
   }).build();
-  const elementLock = new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.space.horizontal.larger).withChild(elementWrapper).withStyles({
+  const elementLock = new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(elementWrapper).withStyles({
     element: {
-      [`@container (max-width: ${token__namespace.media.breakpoints.large.max})`]: {
+      [`@container (max-width: ${token.media.breakpoints.large.max})`]: {
         padding: "0"
       }
     }
   });
   if (breadcrumbMobile) {
-    const mainBreadcrumb = new webBuilderLibrary.ElementBuilder().withClassName("umd-person-hero-breadcrumb-mobile").withChild(breadcrumbMobile).withStyles({
+    const mainBreadcrumb = new ElementBuilder().withClassName("umd-person-hero-breadcrumb-mobile").withChild(breadcrumbMobile).withStyles({
       element: {
-        paddingLeft: `${token__namespace.spacing.md}`,
-        paddingRight: `${token__namespace.spacing.md}`,
-        [`@container (min-width: ${token__namespace.media.breakpoints.tablet.min})`]: {
+        paddingLeft: `${token.spacing.md}`,
+        paddingRight: `${token.spacing.md}`,
+        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {
           display: "none"
         }
       }
@@ -280,12 +261,15 @@ const hero = (props) => {
     elementLock.withChild(mainBreadcrumb);
   }
   const elementLockBuilt = elementLock.build();
-  return new webBuilderLibrary.ElementBuilder().withClassName("umd-person-hero").withChild(elementLockBuilt).withStyles({
+  return new ElementBuilder().withClassName("umd-person-hero").withChild(elementLockBuilt).withStyles({
     element: {
       overflow: "hidden",
       containerType: "inline-size"
     }
   }).build();
 };
-module.exports = hero;
+const createCompositePersonHero = CreatePersonHeroElement;
+export {
+  createCompositePersonHero
+};
 //# sourceMappingURL=hero.js.map