@universityofmaryland/web-elements-library 1.4.8 → 1.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"hero.js","sources":["../../../source/composite/person/hero.ts"],"sourcesContent":["import {\n  token,\n  layout,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonContact } 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) => {\n  const { image, association, pronouns, isThemeDark } = props;\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-image-container',\n    elementStyles: {\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  });\n\n  const wrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-image-wrapper',\n  });\n\n  const contactContainer = textLockup.contact({\n    ...props,\n    isThemeDark: !isThemeDark,\n  });\n\n  if (image) {\n    const imageContainer = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-image',\n      elementStyles: {\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    });\n    const imageBlock = assets.image.background({\n      element: image,\n      isScaled: false,\n    });\n\n    imageContainer.element.appendChild(imageBlock.element);\n    imageContainer.styles += imageBlock.styles;\n    wrapper.element.appendChild(imageContainer.element);\n    wrapper.styles += imageContainer.styles;\n  }\n\n  if (association) {\n    const styledAssociation = ElementModel.headline.sansLarge({\n      element: association,\n      isThemeDark: !isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n        siblingAfter: {\n          marginTop: token.spacing.min,\n        },\n      },\n    });\n    wrapper.element.appendChild(styledAssociation.element);\n    wrapper.styles += styledAssociation.styles;\n  }\n\n  if (pronouns) {\n    const italicStyle = document.createElement('i');\n    italicStyle.appendChild(pronouns);\n\n    const styledPronouns = ElementModel.create({\n      element: italicStyle,\n      className: 'umd-person-hero-pronouns',\n      isThemeDark: !isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n        siblingAfter: {\n          display: 'block',\n          marginTop: token.spacing.min,\n        },\n      },\n    });\n\n    wrapper.element.appendChild(styledPronouns.element);\n    wrapper.styles += styledPronouns.styles;\n  }\n\n  if (contactContainer) {\n    wrapper.element.append(contactContainer.element);\n    wrapper.styles += contactContainer.styles;\n  }\n\n  container.element.appendChild(wrapper.element);\n  container.styles += wrapper.styles;\n  return container;\n};\n\nconst CreateTextContainer = ({\n  name,\n  job,\n  subText,\n  isThemeDark,\n}: PersonText) => {\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'person-hero-text',\n    elementStyles: {\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  });\n\n  const lineWrapper = ElementModel.text.lineAdjustmentInset({\n    element: document.createElement('div'),\n    elementStyles: {\n      pseudoBefore: {\n        backgroundColor: `${isThemeDark ? token.color.gold : token.color.red}`,\n      },\n    },\n  });\n\n  if (subText) {\n    const styledSubText = ElementModel.headline.sansSmall({\n      element: subText,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n          textTransform: 'uppercase',\n          fontWeight: '700',\n          color: `${token.color.black}`,\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    });\n\n    lineWrapper.element.appendChild(styledSubText.element);\n    lineWrapper.styles += styledSubText.styles;\n  }\n\n  if (name) {\n    const styledName = ElementModel.headline.campaignLarge({\n      element: name,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          textTransform: 'uppercase',\n          fontWeight: '700',\n          display: 'block',\n          color: `${token.color.black}`,\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    });\n\n    lineWrapper.element.appendChild(styledName.element);\n    lineWrapper.styles += styledName.styles;\n  }\n\n  if (job) {\n    const styledJob = ElementModel.headline.sansMedium({\n      element: job,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n      },\n    });\n    lineWrapper.element.appendChild(styledJob.element);\n    lineWrapper.styles += styledJob.styles;\n  }\n\n  container.element.appendChild(lineWrapper.element);\n  container.styles += lineWrapper.styles;\n\n  return container;\n};\n\nexport default (props: PersonHero) => {\n  const { breadcrumbMobile, breadcrumbDesktop } = props;\n  const composite = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero',\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        containerType: 'inline-size',\n      },\n    },\n  });\n  const elementLock = ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    elementStyles: {\n      element: {\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          padding: '0',\n        },\n      },\n    },\n  });\n\n  const elementWrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-wrapper',\n    elementStyles: {\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  });\n\n  const textColumns = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-columns',\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          width: '70%',\n        },\n      },\n    },\n  });\n\n  const textContainer = CreateTextContainer(props);\n\n  textColumns.element.appendChild(textContainer.element);\n  textColumns.styles += textContainer.styles;\n  elementWrapper.element.appendChild(textColumns.element);\n  elementWrapper.styles += textColumns.styles;\n\n  if (breadcrumbDesktop) {\n    const textColumnBreadcrumb = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-breadcrumb-desktop',\n      elementStyles: {\n        element: {\n          [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n            display: 'none',\n          },\n        },\n      },\n    });\n\n    textColumnBreadcrumb.element.appendChild(breadcrumbDesktop);\n    textColumns.element.appendChild(textColumnBreadcrumb.element);\n    elementWrapper.styles += textColumnBreadcrumb.styles;\n  }\n\n  const imageBlock = CreateImageBlock(props);\n  elementWrapper.element.appendChild(imageBlock.element);\n  elementWrapper.styles += imageBlock.styles;\n\n  elementLock.element.appendChild(elementWrapper.element);\n  elementLock.styles += elementWrapper.styles;\n\n  composite.element.appendChild(elementLock.element);\n  composite.styles += elementLock.styles;\n\n  if (breadcrumbMobile) {\n    const mainBreadcrumb = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-breadcrumb-mobile',\n      elementStyles: {\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    });\n\n    mainBreadcrumb.element.appendChild(breadcrumbMobile);\n    elementLock.element.appendChild(mainBreadcrumb.element);\n    composite.styles += mainBreadcrumb.styles;\n  }\n\n  return composite;\n};\n"],"names":["ElementModel.create","token","textLockup.contact","assets.image.background","ElementModel.headline.sansLarge","ElementModel.text.lineAdjustmentInset","ElementModel.headline.sansSmall","ElementModel.headline.campaignLarge","ElementModel.headline.sansMedium","ElementModel.layout.spaceHorizontalLarger"],"mappings":";;;;;;;;;;;;;;;;;;;AA8BA,MAAM,mBAAmB,CAAC,UAAsB;AAC9C,QAAM,EAAE,OAAO,aAAa,UAAU,gBAAgB;AACtD,QAAM,YAAYA,MAAAA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,YAAY,GAAGC,OAAAA,MAAM,QAAQ,EAAE;AAAA,QAC/B,eAAe,GAAGA,OAAAA,MAAM,QAAQ,EAAE;AAAA,QAClC,iBAAiB,GACf,cAAcA,OAAAA,MAAM,MAAM,KAAK,WAAWA,OAAAA,MAAM,MAAM,KACxD;AAAA,QACA,UAAU;AAAA,QAEV,CAAC,0BAA0BA,OAAAA,MAAM,MAAM,YAAY,MAAM,GAAG,GAAG,GAAG;AAAA,UAChE,aAAa,GAAGA,OAAAA,MAAM,QAAQ,EAAE;AAAA,UAChC,cAAc,GAAGA,aAAM,QAAQ,EAAE;AAAA,QAAA;AAAA,QAGnC,CAAC,0BAA0BA,OAAAA,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,UACjE,SAAS,GAAGA,OAAAA,MAAM,QAAQ,EAAE;AAAA,UAC5B,OAAO;AAAA,UACP,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,UAAUD,MAAAA,OAAoB;AAAA,IAClC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,EAAA,CACZ;AAED,QAAM,mBAAmBE,QAAmB;AAAA,IAC1C,GAAG;AAAA,IACH,aAAa,CAAC;AAAA,EAAA,CACf;AAED,MAAI,OAAO;AACT,UAAM,iBAAiBF,MAAAA,OAAoB;AAAA,MACzC,SAAS,SAAS,cAAc,KAAK;AAAA,MACrC,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,iBAAiB,GACf,cAAcC,OAAAA,MAAM,MAAM,KAAK,WAAWA,aAAM,MAAM,KAAK,MAC7D;AAAA,UACA,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,cAAcA,OAAAA,MAAM,QAAQ;AAAA,UAE5B,CAAC,OAAO,GAAG;AAAA,YACT,CAAC,0BAA0BA,OAAAA,MAAM,MAAM,YAAY,MAAM,GAAG,GAAG,GAAG;AAAA,cAChE,WAAW;AAAA,YAAA;AAAA,UACb;AAAA,QACF;AAAA,MACF;AAAA,IACF,CACD;AACD,UAAM,aAAaE,WAAwB;AAAA,MACzC,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX;AAED,mBAAe,QAAQ,YAAY,WAAW,OAAO;AACrD,mBAAe,UAAU,WAAW;AACpC,YAAQ,QAAQ,YAAY,eAAe,OAAO;AAClD,YAAQ,UAAU,eAAe;AAAA,EACnC;AAEA,MAAI,aAAa;AACf,UAAM,oBAAoBC,SAAAA,UAAgC;AAAA,MACxD,SAAS;AAAA,MACT,aAAa,CAAC;AAAA,MACd,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,QAAA;AAAA,QAEX,cAAc;AAAA,UACZ,WAAWH,OAAAA,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,IACF,CACD;AACD,YAAQ,QAAQ,YAAY,kBAAkB,OAAO;AACrD,YAAQ,UAAU,kBAAkB;AAAA,EACtC;AAEA,MAAI,UAAU;AACZ,UAAM,cAAc,SAAS,cAAc,GAAG;AAC9C,gBAAY,YAAY,QAAQ;AAEhC,UAAM,iBAAiBD,MAAAA,OAAoB;AAAA,MACzC,SAAS;AAAA,MACT,WAAW;AAAA,MACX,aAAa,CAAC;AAAA,MACd,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,QAAA;AAAA,QAEX,cAAc;AAAA,UACZ,SAAS;AAAA,UACT,WAAWC,OAAAA,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,IACF,CACD;AAED,YAAQ,QAAQ,YAAY,eAAe,OAAO;AAClD,YAAQ,UAAU,eAAe;AAAA,EACnC;AAEA,MAAI,kBAAkB;AACpB,YAAQ,QAAQ,OAAO,iBAAiB,OAAO;AAC/C,YAAQ,UAAU,iBAAiB;AAAA,EACrC;AAEA,YAAU,QAAQ,YAAY,QAAQ,OAAO;AAC7C,YAAU,UAAU,QAAQ;AAC5B,SAAO;AACT;AAEA,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,QAAM,YAAYD,MAAAA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,iBAAiB,GACf,cAAcC,OAAAA,MAAM,MAAM,QAAQA,OAAAA,MAAM,MAAM,KAAK,QACrD;AAAA,QACA,YAAY,GAAGA,OAAAA,MAAM,QAAQ,KAAK,CAAC;AAAA,QACnC,eAAe,GAAGA,OAAAA,MAAM,QAAQ,KAAK,CAAC;AAAA,QACtC,UAAU;AAAA,QAEV,CAAC,0BAA0BA,OAAAA,MAAM,MAAM,YAAY,MAAM,GAAG,GAAG,GAAG;AAAA,UAChE,aAAa,GAAGA,OAAAA,MAAM,QAAQ,EAAE;AAAA,UAChC,cAAc,GAAGA,aAAM,QAAQ,EAAE;AAAA,QAAA;AAAA,QAGnC,CAAC,0BAA0BA,OAAAA,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,UACjE,YAAY;AAAA,UACZ,eAAe,GAAGA,OAAAA,MAAM,QAAQ,KAAK,CAAC;AAAA,UACtC,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,MAEF,cAAc;AAAA,QACZ,SAAS;AAAA,QACT,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,QACX,iBAAiB,GACf,cAAcA,aAAM,MAAM,QAAQA,aAAM,MAAM,KAAK,QACrD;AAAA,MAAA;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,cAAcI,KAAAA,oBAAsC;AAAA,IACxD,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,eAAe;AAAA,MACb,cAAc;AAAA,QACZ,iBAAiB,GAAG,cAAcJ,OAAAA,MAAM,MAAM,OAAOA,OAAAA,MAAM,MAAM,GAAG;AAAA,MAAA;AAAA,IACtE;AAAA,EACF,CACD;AAED,MAAI,SAAS;AACX,UAAM,gBAAgBK,SAAAA,UAAgC;AAAA,MACpD,SAAS;AAAA,MACT;AAAA,MACA,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,OAAO,GAAGL,OAAAA,MAAM,MAAM,KAAK;AAAA,UAC3B,UAAU;AAAA,QAAA;AAAA,QAEZ,cAAc;AAAA,UACZ,WAAWA,OAAAA,MAAM,QAAQ;AAAA,UAEzB,CAAC,0BAA0BA,OAAAA,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,YACjE,WAAWA,OAAAA,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF;AAAA,IACF,CACD;AAED,gBAAY,QAAQ,YAAY,cAAc,OAAO;AACrD,gBAAY,UAAU,cAAc;AAAA,EACtC;AAEA,MAAI,MAAM;AACR,UAAM,aAAaM,SAAAA,cAAoC;AAAA,MACrD,SAAS;AAAA,MACT;AAAA,MACA,eAAe;AAAA,QACb,SAAS;AAAA,UACP,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,OAAO,GAAGN,aAAM,MAAM,KAAK;AAAA,QAAA;AAAA,QAE7B,cAAc;AAAA,UACZ,WAAWA,OAAAA,MAAM,QAAQ;AAAA,UAEzB,CAAC,0BAA0BA,OAAAA,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,YACjE,WAAWA,OAAAA,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF;AAAA,IACF,CACD;AAED,gBAAY,QAAQ,YAAY,WAAW,OAAO;AAClD,gBAAY,UAAU,WAAW;AAAA,EACnC;AAEA,MAAI,KAAK;AACP,UAAM,YAAYO,SAAAA,WAAiC;AAAA,MACjD,SAAS;AAAA,MACT;AAAA,MACA,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF,CACD;AACD,gBAAY,QAAQ,YAAY,UAAU,OAAO;AACjD,gBAAY,UAAU,UAAU;AAAA,EAClC;AAEA,YAAU,QAAQ,YAAY,YAAY,OAAO;AACjD,YAAU,UAAU,YAAY;AAEhC,SAAO;AACT;AAEA,MAAA,OAAe,CAAC,UAAsB;AACpC,QAAM,EAAE,kBAAkB,kBAAA,IAAsB;AAChD,QAAM,YAAYR,MAAAA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,eAAe;AAAA,MAAA;AAAA,IACjB;AAAA,EACF,CACD;AACD,QAAM,cAAcS,OAAAA,sBAA0C;AAAA,IAC5D,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,0BAA0BR,OAAAA,MAAM,MAAM,YAAY,MAAM,GAAG,GAAG,GAAG;AAAA,UAChE,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,iBAAiBD,MAAAA,OAAoB;AAAA,IACzC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,0BAA0BC,OAAAA,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,UACjE,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY,GAAGA,OAAAA,MAAM,QAAQ,KAAK,CAAC;AAAA,QAAA;AAAA,MACrC;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,cAAcD,MAAAA,OAAoB;AAAA,IACtC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,0BAA0BC,OAAAA,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,UACjE,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,gBAAgB,oBAAoB,KAAK;AAE/C,cAAY,QAAQ,YAAY,cAAc,OAAO;AACrD,cAAY,UAAU,cAAc;AACpC,iBAAe,QAAQ,YAAY,YAAY,OAAO;AACtD,iBAAe,UAAU,YAAY;AAErC,MAAI,mBAAmB;AACrB,UAAM,uBAAuBD,MAAAA,OAAoB;AAAA,MAC/C,SAAS,SAAS,cAAc,KAAK;AAAA,MACrC,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,CAAC,0BAA0BC,OAAAA,MAAM,MAAM,YAAY,MAAM,GAAG,GAAG,GAAG;AAAA,YAChE,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF,CACD;AAED,yBAAqB,QAAQ,YAAY,iBAAiB;AAC1D,gBAAY,QAAQ,YAAY,qBAAqB,OAAO;AAC5D,mBAAe,UAAU,qBAAqB;AAAA,EAChD;AAEA,QAAM,aAAa,iBAAiB,KAAK;AACzC,iBAAe,QAAQ,YAAY,WAAW,OAAO;AACrD,iBAAe,UAAU,WAAW;AAEpC,cAAY,QAAQ,YAAY,eAAe,OAAO;AACtD,cAAY,UAAU,eAAe;AAErC,YAAU,QAAQ,YAAY,YAAY,OAAO;AACjD,YAAU,UAAU,YAAY;AAEhC,MAAI,kBAAkB;AACpB,UAAM,iBAAiBD,MAAAA,OAAoB;AAAA,MACzC,SAAS,SAAS,cAAc,KAAK;AAAA,MACrC,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,aAAa,GAAGC,OAAAA,MAAM,QAAQ,EAAE;AAAA,UAChC,cAAc,GAAGA,OAAAA,MAAM,QAAQ,EAAE;AAAA,UAEjC,CAAC,0BAA0BA,OAAAA,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,YACjE,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF,CACD;AAED,mBAAe,QAAQ,YAAY,gBAAgB;AACnD,gBAAY,QAAQ,YAAY,eAAe,OAAO;AACtD,cAAU,UAAU,eAAe;AAAA,EACrC;AAEA,SAAO;AACT;;"}
+{"version":3,"file":"hero.js","sources":["../../../source/composite/person/hero.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonContact } 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) => {\n  const { image, association, pronouns, isThemeDark } = props;\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-image-container',\n    elementStyles: {\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  });\n\n  const wrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-image-wrapper',\n  });\n\n  const contactContainer = textLockup.contact({\n    ...props,\n    isThemeDark: !isThemeDark,\n  });\n\n  if (image) {\n    const imageContainer = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-image',\n      elementStyles: {\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    });\n    const imageBlock = assets.image.background({\n      element: image,\n      isScaled: false,\n    });\n\n    imageContainer.element.appendChild(imageBlock.element);\n    imageContainer.styles += imageBlock.styles;\n    wrapper.element.appendChild(imageContainer.element);\n    wrapper.styles += imageContainer.styles;\n  }\n\n  if (association) {\n    const styledAssociation = ElementModel.headline.sansLarge({\n      element: association,\n      isThemeDark: !isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n        siblingAfter: {\n          marginTop: token.spacing.min,\n        },\n      },\n    });\n    wrapper.element.appendChild(styledAssociation.element);\n    wrapper.styles += styledAssociation.styles;\n  }\n\n  if (pronouns) {\n    const italicStyle = document.createElement('i');\n    italicStyle.appendChild(pronouns);\n\n    const styledPronouns = ElementModel.create({\n      element: italicStyle,\n      className: 'umd-person-hero-pronouns',\n      isThemeDark: !isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n        siblingAfter: {\n          display: 'block',\n          marginTop: token.spacing.min,\n        },\n      },\n    });\n\n    wrapper.element.appendChild(styledPronouns.element);\n    wrapper.styles += styledPronouns.styles;\n  }\n\n  if (contactContainer) {\n    wrapper.element.append(contactContainer.element);\n    wrapper.styles += contactContainer.styles;\n  }\n\n  container.element.appendChild(wrapper.element);\n  container.styles += wrapper.styles;\n  return container;\n};\n\nconst CreateTextContainer = ({\n  name,\n  job,\n  subText,\n  isThemeDark,\n}: PersonText) => {\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'person-hero-text',\n    elementStyles: {\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  });\n\n  const lineWrapper = ElementModel.text.lineAdjustmentInset({\n    element: document.createElement('div'),\n    elementStyles: {\n      pseudoBefore: {\n        backgroundColor: `${isThemeDark ? token.color.gold : token.color.red}`,\n      },\n    },\n  });\n\n  if (subText) {\n    const styledSubText = ElementModel.headline.sansSmall({\n      element: subText,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n          textTransform: 'uppercase',\n          fontWeight: '700',\n          color: `${token.color.black}`,\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    });\n\n    lineWrapper.element.appendChild(styledSubText.element);\n    lineWrapper.styles += styledSubText.styles;\n  }\n\n  if (name) {\n    const styledName = ElementModel.headline.campaignLarge({\n      element: name,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          textTransform: 'uppercase',\n          fontWeight: '700',\n          display: 'block',\n          color: `${token.color.black}`,\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    });\n\n    lineWrapper.element.appendChild(styledName.element);\n    lineWrapper.styles += styledName.styles;\n  }\n\n  if (job) {\n    const styledJob = ElementModel.headline.sansMedium({\n      element: job,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n      },\n    });\n    lineWrapper.element.appendChild(styledJob.element);\n    lineWrapper.styles += styledJob.styles;\n  }\n\n  container.element.appendChild(lineWrapper.element);\n  container.styles += lineWrapper.styles;\n\n  return container;\n};\n\nexport default (props: PersonHero) => {\n  const { breadcrumbMobile, breadcrumbDesktop } = props;\n  const composite = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero',\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        containerType: 'inline-size',\n      },\n    },\n  });\n  const elementLock = ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    elementStyles: {\n      element: {\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          padding: '0',\n        },\n      },\n    },\n  });\n\n  const elementWrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-wrapper',\n    elementStyles: {\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  });\n\n  const textColumns = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-columns',\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          width: '70%',\n        },\n      },\n    },\n  });\n\n  const textContainer = CreateTextContainer(props);\n\n  textColumns.element.appendChild(textContainer.element);\n  textColumns.styles += textContainer.styles;\n  elementWrapper.element.appendChild(textColumns.element);\n  elementWrapper.styles += textColumns.styles;\n\n  if (breadcrumbDesktop) {\n    const textColumnBreadcrumb = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-breadcrumb-desktop',\n      elementStyles: {\n        element: {\n          [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n            display: 'none',\n          },\n        },\n      },\n    });\n\n    textColumnBreadcrumb.element.appendChild(breadcrumbDesktop);\n    textColumns.element.appendChild(textColumnBreadcrumb.element);\n    elementWrapper.styles += textColumnBreadcrumb.styles;\n  }\n\n  const imageBlock = CreateImageBlock(props);\n  elementWrapper.element.appendChild(imageBlock.element);\n  elementWrapper.styles += imageBlock.styles;\n\n  elementLock.element.appendChild(elementWrapper.element);\n  elementLock.styles += elementWrapper.styles;\n\n  composite.element.appendChild(elementLock.element);\n  composite.styles += elementLock.styles;\n\n  if (breadcrumbMobile) {\n    const mainBreadcrumb = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-breadcrumb-mobile',\n      elementStyles: {\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    });\n\n    mainBreadcrumb.element.appendChild(breadcrumbMobile);\n    elementLock.element.appendChild(mainBreadcrumb.element);\n    composite.styles += mainBreadcrumb.styles;\n  }\n\n  return composite;\n};\n"],"names":["ElementModel.create","token","textLockup.contact","assets.image.background","ElementModel.headline.sansLarge","ElementModel.text.lineAdjustmentInset","ElementModel.headline.sansSmall","ElementModel.headline.campaignLarge","ElementModel.headline.sansMedium","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}

package/dist/composite/person/hero.mjs

@@ -1,18 +1,28 @@
-import { token } from "@universityofmaryland/web-styles-library";
-import "../../node_modules/postcss/lib/postcss.mjs";
-import "../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../node_modules/postcss-js/index.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import "@universityofmaryland/web-styles-library/element";
+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 { create } from "../../model/elements/index.mjs";
+import "@universityofmaryland/web-icons-library/arrows";
 import "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../atomic/animations/brand/card-stack.mjs";
 import imageContainer from "../../atomic/assets/image/background.mjs";
+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.mjs";
 import "../../atomic/layout/overlay/modal.mjs";
 import "../../atomic/layout/person/columns.mjs";
 import contact from "../../atomic/text-lockup/contact.mjs";
 import "../../atomic/text-lockup/date.mjs";
 import "../../atomic/text-lockup/small.mjs";
+import "@universityofmaryland/web-styles-library/typography";
 import { spaceHorizontalLarger } from "../../model/elements/layout.mjs";
 import { lineAdjustmentInset } from "../../model/elements/text.mjs";
 import { sansSmall, campaignLarge, sansMedium, sansLarge } from "../../model/elements/headline.mjs";

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

@@ -1 +1 @@
-{"version":3,"file":"hero.mjs","sources":["../../../source/composite/person/hero.ts"],"sourcesContent":["import {\n  token,\n  layout,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonContact } 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) => {\n  const { image, association, pronouns, isThemeDark } = props;\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-image-container',\n    elementStyles: {\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  });\n\n  const wrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-image-wrapper',\n  });\n\n  const contactContainer = textLockup.contact({\n    ...props,\n    isThemeDark: !isThemeDark,\n  });\n\n  if (image) {\n    const imageContainer = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-image',\n      elementStyles: {\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    });\n    const imageBlock = assets.image.background({\n      element: image,\n      isScaled: false,\n    });\n\n    imageContainer.element.appendChild(imageBlock.element);\n    imageContainer.styles += imageBlock.styles;\n    wrapper.element.appendChild(imageContainer.element);\n    wrapper.styles += imageContainer.styles;\n  }\n\n  if (association) {\n    const styledAssociation = ElementModel.headline.sansLarge({\n      element: association,\n      isThemeDark: !isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n        siblingAfter: {\n          marginTop: token.spacing.min,\n        },\n      },\n    });\n    wrapper.element.appendChild(styledAssociation.element);\n    wrapper.styles += styledAssociation.styles;\n  }\n\n  if (pronouns) {\n    const italicStyle = document.createElement('i');\n    italicStyle.appendChild(pronouns);\n\n    const styledPronouns = ElementModel.create({\n      element: italicStyle,\n      className: 'umd-person-hero-pronouns',\n      isThemeDark: !isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n        siblingAfter: {\n          display: 'block',\n          marginTop: token.spacing.min,\n        },\n      },\n    });\n\n    wrapper.element.appendChild(styledPronouns.element);\n    wrapper.styles += styledPronouns.styles;\n  }\n\n  if (contactContainer) {\n    wrapper.element.append(contactContainer.element);\n    wrapper.styles += contactContainer.styles;\n  }\n\n  container.element.appendChild(wrapper.element);\n  container.styles += wrapper.styles;\n  return container;\n};\n\nconst CreateTextContainer = ({\n  name,\n  job,\n  subText,\n  isThemeDark,\n}: PersonText) => {\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'person-hero-text',\n    elementStyles: {\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  });\n\n  const lineWrapper = ElementModel.text.lineAdjustmentInset({\n    element: document.createElement('div'),\n    elementStyles: {\n      pseudoBefore: {\n        backgroundColor: `${isThemeDark ? token.color.gold : token.color.red}`,\n      },\n    },\n  });\n\n  if (subText) {\n    const styledSubText = ElementModel.headline.sansSmall({\n      element: subText,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n          textTransform: 'uppercase',\n          fontWeight: '700',\n          color: `${token.color.black}`,\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    });\n\n    lineWrapper.element.appendChild(styledSubText.element);\n    lineWrapper.styles += styledSubText.styles;\n  }\n\n  if (name) {\n    const styledName = ElementModel.headline.campaignLarge({\n      element: name,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          textTransform: 'uppercase',\n          fontWeight: '700',\n          display: 'block',\n          color: `${token.color.black}`,\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    });\n\n    lineWrapper.element.appendChild(styledName.element);\n    lineWrapper.styles += styledName.styles;\n  }\n\n  if (job) {\n    const styledJob = ElementModel.headline.sansMedium({\n      element: job,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n      },\n    });\n    lineWrapper.element.appendChild(styledJob.element);\n    lineWrapper.styles += styledJob.styles;\n  }\n\n  container.element.appendChild(lineWrapper.element);\n  container.styles += lineWrapper.styles;\n\n  return container;\n};\n\nexport default (props: PersonHero) => {\n  const { breadcrumbMobile, breadcrumbDesktop } = props;\n  const composite = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero',\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        containerType: 'inline-size',\n      },\n    },\n  });\n  const elementLock = ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    elementStyles: {\n      element: {\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          padding: '0',\n        },\n      },\n    },\n  });\n\n  const elementWrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-wrapper',\n    elementStyles: {\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  });\n\n  const textColumns = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-columns',\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          width: '70%',\n        },\n      },\n    },\n  });\n\n  const textContainer = CreateTextContainer(props);\n\n  textColumns.element.appendChild(textContainer.element);\n  textColumns.styles += textContainer.styles;\n  elementWrapper.element.appendChild(textColumns.element);\n  elementWrapper.styles += textColumns.styles;\n\n  if (breadcrumbDesktop) {\n    const textColumnBreadcrumb = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-breadcrumb-desktop',\n      elementStyles: {\n        element: {\n          [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n            display: 'none',\n          },\n        },\n      },\n    });\n\n    textColumnBreadcrumb.element.appendChild(breadcrumbDesktop);\n    textColumns.element.appendChild(textColumnBreadcrumb.element);\n    elementWrapper.styles += textColumnBreadcrumb.styles;\n  }\n\n  const imageBlock = CreateImageBlock(props);\n  elementWrapper.element.appendChild(imageBlock.element);\n  elementWrapper.styles += imageBlock.styles;\n\n  elementLock.element.appendChild(elementWrapper.element);\n  elementLock.styles += elementWrapper.styles;\n\n  composite.element.appendChild(elementLock.element);\n  composite.styles += elementLock.styles;\n\n  if (breadcrumbMobile) {\n    const mainBreadcrumb = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-breadcrumb-mobile',\n      elementStyles: {\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    });\n\n    mainBreadcrumb.element.appendChild(breadcrumbMobile);\n    elementLock.element.appendChild(mainBreadcrumb.element);\n    composite.styles += mainBreadcrumb.styles;\n  }\n\n  return composite;\n};\n"],"names":["ElementModel.create","textLockup.contact","imageContainer","assets.image.background","ElementModel.headline.sansLarge","ElementModel.text.lineAdjustmentInset","ElementModel.headline.sansSmall","ElementModel.headline.campaignLarge","ElementModel.headline.sansMedium","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
+{"version":3,"file":"hero.mjs","sources":["../../../source/composite/person/hero.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonContact } 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) => {\n  const { image, association, pronouns, isThemeDark } = props;\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-image-container',\n    elementStyles: {\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  });\n\n  const wrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-image-wrapper',\n  });\n\n  const contactContainer = textLockup.contact({\n    ...props,\n    isThemeDark: !isThemeDark,\n  });\n\n  if (image) {\n    const imageContainer = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-image',\n      elementStyles: {\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    });\n    const imageBlock = assets.image.background({\n      element: image,\n      isScaled: false,\n    });\n\n    imageContainer.element.appendChild(imageBlock.element);\n    imageContainer.styles += imageBlock.styles;\n    wrapper.element.appendChild(imageContainer.element);\n    wrapper.styles += imageContainer.styles;\n  }\n\n  if (association) {\n    const styledAssociation = ElementModel.headline.sansLarge({\n      element: association,\n      isThemeDark: !isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n        siblingAfter: {\n          marginTop: token.spacing.min,\n        },\n      },\n    });\n    wrapper.element.appendChild(styledAssociation.element);\n    wrapper.styles += styledAssociation.styles;\n  }\n\n  if (pronouns) {\n    const italicStyle = document.createElement('i');\n    italicStyle.appendChild(pronouns);\n\n    const styledPronouns = ElementModel.create({\n      element: italicStyle,\n      className: 'umd-person-hero-pronouns',\n      isThemeDark: !isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n        siblingAfter: {\n          display: 'block',\n          marginTop: token.spacing.min,\n        },\n      },\n    });\n\n    wrapper.element.appendChild(styledPronouns.element);\n    wrapper.styles += styledPronouns.styles;\n  }\n\n  if (contactContainer) {\n    wrapper.element.append(contactContainer.element);\n    wrapper.styles += contactContainer.styles;\n  }\n\n  container.element.appendChild(wrapper.element);\n  container.styles += wrapper.styles;\n  return container;\n};\n\nconst CreateTextContainer = ({\n  name,\n  job,\n  subText,\n  isThemeDark,\n}: PersonText) => {\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'person-hero-text',\n    elementStyles: {\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  });\n\n  const lineWrapper = ElementModel.text.lineAdjustmentInset({\n    element: document.createElement('div'),\n    elementStyles: {\n      pseudoBefore: {\n        backgroundColor: `${isThemeDark ? token.color.gold : token.color.red}`,\n      },\n    },\n  });\n\n  if (subText) {\n    const styledSubText = ElementModel.headline.sansSmall({\n      element: subText,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n          textTransform: 'uppercase',\n          fontWeight: '700',\n          color: `${token.color.black}`,\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    });\n\n    lineWrapper.element.appendChild(styledSubText.element);\n    lineWrapper.styles += styledSubText.styles;\n  }\n\n  if (name) {\n    const styledName = ElementModel.headline.campaignLarge({\n      element: name,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          textTransform: 'uppercase',\n          fontWeight: '700',\n          display: 'block',\n          color: `${token.color.black}`,\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    });\n\n    lineWrapper.element.appendChild(styledName.element);\n    lineWrapper.styles += styledName.styles;\n  }\n\n  if (job) {\n    const styledJob = ElementModel.headline.sansMedium({\n      element: job,\n      isThemeDark,\n      elementStyles: {\n        element: {\n          display: 'block',\n        },\n      },\n    });\n    lineWrapper.element.appendChild(styledJob.element);\n    lineWrapper.styles += styledJob.styles;\n  }\n\n  container.element.appendChild(lineWrapper.element);\n  container.styles += lineWrapper.styles;\n\n  return container;\n};\n\nexport default (props: PersonHero) => {\n  const { breadcrumbMobile, breadcrumbDesktop } = props;\n  const composite = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero',\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        containerType: 'inline-size',\n      },\n    },\n  });\n  const elementLock = ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    elementStyles: {\n      element: {\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          padding: '0',\n        },\n      },\n    },\n  });\n\n  const elementWrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-wrapper',\n    elementStyles: {\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  });\n\n  const textColumns = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-person-hero-columns',\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          width: '70%',\n        },\n      },\n    },\n  });\n\n  const textContainer = CreateTextContainer(props);\n\n  textColumns.element.appendChild(textContainer.element);\n  textColumns.styles += textContainer.styles;\n  elementWrapper.element.appendChild(textColumns.element);\n  elementWrapper.styles += textColumns.styles;\n\n  if (breadcrumbDesktop) {\n    const textColumnBreadcrumb = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-breadcrumb-desktop',\n      elementStyles: {\n        element: {\n          [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n            display: 'none',\n          },\n        },\n      },\n    });\n\n    textColumnBreadcrumb.element.appendChild(breadcrumbDesktop);\n    textColumns.element.appendChild(textColumnBreadcrumb.element);\n    elementWrapper.styles += textColumnBreadcrumb.styles;\n  }\n\n  const imageBlock = CreateImageBlock(props);\n  elementWrapper.element.appendChild(imageBlock.element);\n  elementWrapper.styles += imageBlock.styles;\n\n  elementLock.element.appendChild(elementWrapper.element);\n  elementLock.styles += elementWrapper.styles;\n\n  composite.element.appendChild(elementLock.element);\n  composite.styles += elementLock.styles;\n\n  if (breadcrumbMobile) {\n    const mainBreadcrumb = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-person-hero-breadcrumb-mobile',\n      elementStyles: {\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    });\n\n    mainBreadcrumb.element.appendChild(breadcrumbMobile);\n    elementLock.element.appendChild(mainBreadcrumb.element);\n    composite.styles += mainBreadcrumb.styles;\n  }\n\n  return composite;\n};\n"],"names":["ElementModel.create","textLockup.contact","imageContainer","assets.image.background","ElementModel.headline.sansLarge","ElementModel.text.lineAdjustmentInset","ElementModel.headline.sansSmall","ElementModel.headline.campaignLarge","ElementModel.headline.sansMedium","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}

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;yBAOtB,+GAab,UAAU;;;;;AAbb,wBA0EE"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../source/composite/person/list.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;yBAOtB,+GAab,UAAU;;;;;AAbb,wBAsEE"}

package/dist/composite/person/list.js

@@ -1,18 +1,29 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
-const media = require("../../utilities/theme/media.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
 const index = require("../../model/elements/index.js");
+require("@universityofmaryland/web-styles-library/element");
+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-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");
+require("@universityofmaryland/web-styles-library/typography");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -29,10 +40,10 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
-const smallBreakpoint = Styles__namespace.token.media.breakpointValues.small.max;
-const mediumBreakpointStart = Styles__namespace.token.media.breakpointValues.medium.min;
-const mediumBreakpoint = Styles__namespace.token.media.breakpointValues.large.min;
+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 = ({
   actions,
   address,
@@ -52,17 +63,13 @@ const list = ({
     children.push(
       columns.image({
         customStyles: {
-          ...media.createContainerQuery(
-            "min-width",
-            mediumBreakpointStart,
-            {
-              display: "block",
-              width: "160px",
-              paddingRight: `${Styles__namespace.token.spacing.md}`,
-              alignSelf: "flex-start"
-            }
-          ),
-          ...media.createContainerQuery("min-width", mediumBreakpoint, {
+          ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
+            display: "block",
+            width: "160px",
+            paddingRight: `${token__namespace.spacing.md}`,
+            alignSelf: "flex-start"
+          }),
+          ...styles.createMediaQuery("min-width", mediumBreakpoint, {
             width: "208px"
           })
         },
@@ -96,7 +103,7 @@ const list = ({
       element: {
         overflow: "hidden",
         display: "flex",
-        ...media.createContainerQuery("max-width", smallBreakpoint, {
+        ...styles.createMediaQuery("max-width", smallBreakpoint, {
           flexDirection: "column"
         })
       }

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

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../source/composite/person/list.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from 'utilities';\nimport { layout } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\nexport default ({\n  actions,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        customStyles: {\n          ...theme.media.createContainerQuery(\n            'min-width',\n            mediumBreakpointStart,\n            {\n              display: 'block',\n              width: '160px',\n              paddingRight: `${Styles.token.spacing.md}`,\n              alignSelf: 'flex-start',\n            },\n          ),\n\n          ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n            width: '208px',\n          }),\n        },\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    children.push(\n      layout.person.columns.information({\n        actions,\n        address,\n        association,\n        customStyles: {},\n        email,\n        isThemeDark,\n        job,\n        linkendIn,\n        name,\n        phone,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-list-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["Styles","layout.person.columns.image","theme.media.createContainerQuery","layout.person.columns.information","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkBA,kBAAO,MAAM,MAAM,iBAAiB,MAAM;AAClE,MAAM,wBAAwBA,kBAAO,MAAM,MAAM,iBAAiB,OAAO;AACzE,MAAM,mBAAmBA,kBAAO,MAAM,MAAM,iBAAiB,MAAM;AAEnE,MAAA,OAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAI,OAAO;AACT,aAAS;AAAA,MACPC,cAA4B;AAAA,QAC1B,cAAc;AAAA,UACZ,GAAGC,MAAAA;AAAAA,YACD;AAAA,YACA;AAAA,YACA;AAAA,cACE,SAAS;AAAA,cACT,OAAO;AAAA,cACP,cAAc,GAAGF,kBAAO,MAAM,QAAQ,EAAE;AAAA,cACxC,WAAW;AAAA,YAAA;AAAA,UACb;AAAA,UAGF,GAAGE,MAAAA,qBAAiC,aAAa,kBAAkB;AAAA,YACjE,OAAO;AAAA,UAAA,CACR;AAAA,QAAA;AAAA,QAEH;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPC,oBAAkC;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAGF,MAAAA,qBAAiC,aAAa,iBAAiB;AAAA,UAChE,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;;"}
+{"version":3,"file":"list.js","sources":["../../../source/composite/person/list.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nexport default ({\n  actions,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        customStyles: {\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            display: 'block',\n            width: '160px',\n            paddingRight: `${token.spacing.md}`,\n            alignSelf: 'flex-start',\n          }),\n\n          ...createMediaQuery('min-width', mediumBreakpoint, {\n            width: '208px',\n          }),\n        },\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    children.push(\n      layout.person.columns.information({\n        actions,\n        address,\n        association,\n        customStyles: {},\n        email,\n        isThemeDark,\n        job,\n        linkendIn,\n        name,\n        phone,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-list-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["token","layout.person.columns.image","createMediaQuery","layout.person.columns.information","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkBA,iBAAM,MAAM,iBAAiB,MAAM;AAC3D,MAAM,wBAAwBA,iBAAM,MAAM,iBAAiB,OAAO;AAClE,MAAM,mBAAmBA,iBAAM,MAAM,iBAAiB,MAAM;AAE5D,MAAA,OAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAI,OAAO;AACT,aAAS;AAAA,MACPC,cAA4B;AAAA,QAC1B,cAAc;AAAA,UACZ,GAAGC,OAAAA,iBAAiB,aAAa,uBAAuB;AAAA,YACtD,SAAS;AAAA,YACT,OAAO;AAAA,YACP,cAAc,GAAGF,iBAAM,QAAQ,EAAE;AAAA,YACjC,WAAW;AAAA,UAAA,CACZ;AAAA,UAED,GAAGE,OAAAA,iBAAiB,aAAa,kBAAkB;AAAA,YACjD,OAAO;AAAA,UAAA,CACR;AAAA,QAAA;AAAA,QAEH;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPC,oBAAkC;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAGF,OAAAA,iBAAiB,aAAa,iBAAiB;AAAA,UAChD,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;;"}

package/dist/composite/person/list.mjs

@@ -1,20 +1,31 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
-import "../../node_modules/postcss/lib/postcss.mjs";
-import "../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../node_modules/postcss-js/index.mjs";
-import { createContainerQuery } from "../../utilities/theme/media.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { createMediaQuery } from "@universityofmaryland/web-utilities-library/styles";
 import { createDiv } from "../../model/elements/index.mjs";
+import "@universityofmaryland/web-styles-library/element";
+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.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../atomic/animations/brand/card-stack.mjs";
+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.mjs";
 import "../../atomic/layout/overlay/modal.mjs";
 import { image, information } from "../../atomic/layout/person/columns.mjs";
+import "@universityofmaryland/web-icons-library/social";
 import "../../atomic/text-lockup/date.mjs";
 import "../../atomic/text-lockup/small.mjs";
-const smallBreakpoint = Styles.token.media.breakpointValues.small.max;
-const mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;
-const mediumBreakpoint = Styles.token.media.breakpointValues.large.min;
+import "@universityofmaryland/web-styles-library/typography";
+const smallBreakpoint = token.media.breakpointValues.small.max;
+const mediumBreakpointStart = token.media.breakpointValues.medium.min;
+const mediumBreakpoint = token.media.breakpointValues.large.min;
 const list = ({
   actions,
   address,
@@ -34,17 +45,13 @@ const list = ({
     children.push(
       image({
         customStyles: {
-          ...createContainerQuery(
-            "min-width",
-            mediumBreakpointStart,
-            {
-              display: "block",
-              width: "160px",
-              paddingRight: `${Styles.token.spacing.md}`,
-              alignSelf: "flex-start"
-            }
-          ),
-          ...createContainerQuery("min-width", mediumBreakpoint, {
+          ...createMediaQuery("min-width", mediumBreakpointStart, {
+            display: "block",
+            width: "160px",
+            paddingRight: `${token.spacing.md}`,
+            alignSelf: "flex-start"
+          }),
+          ...createMediaQuery("min-width", mediumBreakpoint, {
             width: "208px"
           })
         },
@@ -78,7 +85,7 @@ const list = ({
       element: {
         overflow: "hidden",
         display: "flex",
-        ...createContainerQuery("max-width", smallBreakpoint, {
+        ...createMediaQuery("max-width", smallBreakpoint, {
           flexDirection: "column"
         })
       }

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

@@ -1 +1 @@
-{"version":3,"file":"list.mjs","sources":["../../../source/composite/person/list.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from 'utilities';\nimport { layout } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\nexport default ({\n  actions,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        customStyles: {\n          ...theme.media.createContainerQuery(\n            'min-width',\n            mediumBreakpointStart,\n            {\n              display: 'block',\n              width: '160px',\n              paddingRight: `${Styles.token.spacing.md}`,\n              alignSelf: 'flex-start',\n            },\n          ),\n\n          ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n            width: '208px',\n          }),\n        },\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    children.push(\n      layout.person.columns.information({\n        actions,\n        address,\n        association,\n        customStyles: {},\n        email,\n        isThemeDark,\n        job,\n        linkendIn,\n        name,\n        phone,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-list-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["image","layout.person.columns.image","theme.media.createContainerQuery","layout.person.columns.information","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;AAOA,MAAM,kBAAkB,OAAO,MAAM,MAAM,iBAAiB,MAAM;AAClE,MAAM,wBAAwB,OAAO,MAAM,MAAM,iBAAiB,OAAO;AACzE,MAAM,mBAAmB,OAAO,MAAM,MAAM,iBAAiB,MAAM;AAEnE,MAAA,OAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA4B;AAAA,QAC1B,cAAc;AAAA,UACZ,GAAGC;AAAAA,YACD;AAAA,YACA;AAAA,YACA;AAAA,cACE,SAAS;AAAA,cACT,OAAO;AAAA,cACP,cAAc,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,cACxC,WAAW;AAAA,YAAA;AAAA,UACb;AAAA,UAGF,GAAGA,qBAAiC,aAAa,kBAAkB;AAAA,YACjE,OAAO;AAAA,UAAA,CACR;AAAA,QAAA;AAAA,QACH,OACAF;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPG,YAAkC;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAGF,qBAAiC,aAAa,iBAAiB;AAAA,UAChE,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;"}
+{"version":3,"file":"list.mjs","sources":["../../../source/composite/person/list.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nexport default ({\n  actions,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        customStyles: {\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            display: 'block',\n            width: '160px',\n            paddingRight: `${token.spacing.md}`,\n            alignSelf: 'flex-start',\n          }),\n\n          ...createMediaQuery('min-width', mediumBreakpoint, {\n            width: '208px',\n          }),\n        },\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    children.push(\n      layout.person.columns.information({\n        actions,\n        address,\n        association,\n        customStyles: {},\n        email,\n        isThemeDark,\n        job,\n        linkendIn,\n        name,\n        phone,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-list-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["image","layout.person.columns.image","layout.person.columns.information","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAC3D,MAAM,wBAAwB,MAAM,MAAM,iBAAiB,OAAO;AAClE,MAAM,mBAAmB,MAAM,MAAM,iBAAiB,MAAM;AAE5D,MAAA,OAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA4B;AAAA,QAC1B,cAAc;AAAA,UACZ,GAAG,iBAAiB,aAAa,uBAAuB;AAAA,YACtD,SAAS;AAAA,YACT,OAAO;AAAA,YACP,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,YACjC,WAAW;AAAA,UAAA,CACZ;AAAA,UAED,GAAG,iBAAiB,aAAa,kBAAkB;AAAA,YACjD,OAAO;AAAA,UAAA,CACR;AAAA,QAAA;AAAA,QACH,OACAD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPE,YAAkC;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,UAChD,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;"}

package/dist/composite/person/tabular.js

@@ -1,18 +1,29 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
-const media = require("../../utilities/theme/media.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
 const index = require("../../model/elements/index.js");
+require("@universityofmaryland/web-styles-library/element");
+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-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");
+require("@universityofmaryland/web-styles-library/typography");
 const headline = require("../../model/elements/headline.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -30,8 +41,8 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
-const smallBreakpoint = Styles__namespace.token.media.breakpointValues.small.max;
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const smallBreakpoint = token__namespace.media.breakpointValues.small.max;
 const tabular = ({
   actions,
   additionalContact,
@@ -61,10 +72,10 @@ const tabular = ({
       element: name,
       elementStyles: {
         element: {
-          fontWeight: `${Styles__namespace.token.font.weight.bold}`,
-          color: `${Styles__namespace.token.color.black}`,
+          fontWeight: `${token__namespace.font.weight.bold}`,
+          color: `${token__namespace.color.black}`,
           [`& + *`]: {
-            marginTop: Styles__namespace.token.spacing.min
+            marginTop: token__namespace.spacing.min
           }
         },
         subElement: {
@@ -106,7 +117,7 @@ const tabular = ({
       element: {
         overflow: "hidden",
         display: "flex",
-        ...media.createContainerQuery("max-width", smallBreakpoint, {
+        ...styles.createMediaQuery("max-width", smallBreakpoint, {
           flexDirection: "column"
         })
       }

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

@@ -1 +1 @@
-{"version":3,"file":"tabular.js","sources":["../../../source/composite/person/tabular.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from 'utilities';\nimport { layout } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\n\nexport default ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameComposite = ElementModel.headline.sansLarge({\n      element: name,\n      elementStyles: {\n        element: {\n          fontWeight: `${Styles.token.font.weight.bold}`,\n          color: `${Styles.token.color.black}`,\n\n          [`& + *`]: {\n            marginTop: Styles.token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      },\n      isThemeDark,\n    });\n\n    children.push(\n      layout.person.columns.details({\n        actions,\n        association,\n        isThemeDark,\n        customStyles: {},\n        job,\n        nameComposite,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkendIn || phone) {\n    children.push(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-tabular-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["Styles","layout.person.columns.image","ElementModel.headline.sansLarge","layout.person.columns.details","layout.person.columns.contact","ElementModel.createDiv","theme.media.createContainerQuery"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkBA,kBAAO,MAAM,MAAM,iBAAiB,MAAM;AAElE,MAAA,UAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAI,OAAO;AACT,aAAS;AAAA,MACPC,cAA4B;AAAA,QAC1B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,gBAAgBC,SAAAA,UAAgC;AAAA,MACpD,SAAS;AAAA,MACT,eAAe;AAAA,QACb,SAAS;AAAA,UACP,YAAY,GAAGF,kBAAO,MAAM,KAAK,OAAO,IAAI;AAAA,UAC5C,OAAO,GAAGA,kBAAO,MAAM,MAAM,KAAK;AAAA,UAElC,CAAC,OAAO,GAAG;AAAA,YACT,WAAWA,kBAAO,MAAM,QAAQ;AAAA,UAAA;AAAA,QAClC;AAAA,QAEF,YAAY;AAAA,UACV,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,IAAA,CACD;AAED,aAAS;AAAA,MACPG,gBAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,aAAa,OAAO;AAC/D,aAAS;AAAA,MACPC,gBAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAGC,MAAAA,qBAAiC,aAAa,iBAAiB;AAAA,UAChE,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;;"}
+{"version":3,"file":"tabular.js","sources":["../../../source/composite/person/tabular.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport default ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameComposite = ElementModel.headline.sansLarge({\n      element: name,\n      elementStyles: {\n        element: {\n          fontWeight: `${token.font.weight.bold}`,\n          color: `${token.color.black}`,\n\n          [`& + *`]: {\n            marginTop: token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      },\n      isThemeDark,\n    });\n\n    children.push(\n      layout.person.columns.details({\n        actions,\n        association,\n        isThemeDark,\n        customStyles: {},\n        job,\n        nameComposite,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkendIn || phone) {\n    children.push(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-tabular-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["token","layout.person.columns.image","ElementModel.headline.sansLarge","layout.person.columns.details","layout.person.columns.contact","ElementModel.createDiv","createMediaQuery"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkBA,iBAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAA,UAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAI,OAAO;AACT,aAAS;AAAA,MACPC,cAA4B;AAAA,QAC1B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,gBAAgBC,SAAAA,UAAgC;AAAA,MACpD,SAAS;AAAA,MACT,eAAe;AAAA,QACb,SAAS;AAAA,UACP,YAAY,GAAGF,iBAAM,KAAK,OAAO,IAAI;AAAA,UACrC,OAAO,GAAGA,iBAAM,MAAM,KAAK;AAAA,UAE3B,CAAC,OAAO,GAAG;AAAA,YACT,WAAWA,iBAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,QAEF,YAAY;AAAA,UACV,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,IAAA,CACD;AAED,aAAS;AAAA,MACPG,gBAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,aAAa,OAAO;AAC/D,aAAS;AAAA,MACPC,gBAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAGC,OAAAA,iBAAiB,aAAa,iBAAiB;AAAA,UAChD,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;;"}

package/dist/composite/person/tabular.mjs

@@ -1,19 +1,30 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
-import "../../node_modules/postcss/lib/postcss.mjs";
-import "../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../node_modules/postcss-js/index.mjs";
-import { createContainerQuery } from "../../utilities/theme/media.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { createMediaQuery } from "@universityofmaryland/web-utilities-library/styles";
 import { createDiv } from "../../model/elements/index.mjs";
+import "@universityofmaryland/web-styles-library/element";
+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.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../atomic/animations/brand/card-stack.mjs";
+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.mjs";
 import "../../atomic/layout/overlay/modal.mjs";
 import { image, details, contact } from "../../atomic/layout/person/columns.mjs";
+import "@universityofmaryland/web-icons-library/social";
 import "../../atomic/text-lockup/date.mjs";
 import "../../atomic/text-lockup/small.mjs";
+import "@universityofmaryland/web-styles-library/typography";
 import { sansLarge } from "../../model/elements/headline.mjs";
-const smallBreakpoint = Styles.token.media.breakpointValues.small.max;
+const smallBreakpoint = token.media.breakpointValues.small.max;
 const tabular = ({
   actions,
   additionalContact,
@@ -43,10 +54,10 @@ const tabular = ({
       element: name,
       elementStyles: {
         element: {
-          fontWeight: `${Styles.token.font.weight.bold}`,
-          color: `${Styles.token.color.black}`,
+          fontWeight: `${token.font.weight.bold}`,
+          color: `${token.color.black}`,
           [`& + *`]: {
-            marginTop: Styles.token.spacing.min
+            marginTop: token.spacing.min
           }
         },
         subElement: {
@@ -88,7 +99,7 @@ const tabular = ({
       element: {
         overflow: "hidden",
         display: "flex",
-        ...createContainerQuery("max-width", smallBreakpoint, {
+        ...createMediaQuery("max-width", smallBreakpoint, {
           flexDirection: "column"
         })
       }

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

@@ -1 +1 @@
-{"version":3,"file":"tabular.mjs","sources":["../../../source/composite/person/tabular.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from 'utilities';\nimport { layout } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\n\nexport default ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameComposite = ElementModel.headline.sansLarge({\n      element: name,\n      elementStyles: {\n        element: {\n          fontWeight: `${Styles.token.font.weight.bold}`,\n          color: `${Styles.token.color.black}`,\n\n          [`& + *`]: {\n            marginTop: Styles.token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      },\n      isThemeDark,\n    });\n\n    children.push(\n      layout.person.columns.details({\n        actions,\n        association,\n        isThemeDark,\n        customStyles: {},\n        job,\n        nameComposite,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkendIn || phone) {\n    children.push(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-tabular-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["image","layout.person.columns.image","ElementModel.headline.sansLarge","layout.person.columns.details","layout.person.columns.contact","ElementModel.createDiv","theme.media.createContainerQuery"],"mappings":";;;;;;;;;;;;;;;AAOA,MAAM,kBAAkB,OAAO,MAAM,MAAM,iBAAiB,MAAM;AAElE,MAAA,UAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA4B;AAAA,QAAA,OAC1BD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,gBAAgBE,UAAgC;AAAA,MACpD,SAAS;AAAA,MACT,eAAe;AAAA,QACb,SAAS;AAAA,UACP,YAAY,GAAG,OAAO,MAAM,KAAK,OAAO,IAAI;AAAA,UAC5C,OAAO,GAAG,OAAO,MAAM,MAAM,KAAK;AAAA,UAElC,CAAC,OAAO,GAAG;AAAA,YACT,WAAW,OAAO,MAAM,QAAQ;AAAA,UAAA;AAAA,QAClC;AAAA,QAEF,YAAY;AAAA,UACV,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,IAAA,CACD;AAED,aAAS;AAAA,MACPC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,aAAa,OAAO;AAC/D,aAAS;AAAA,MACPC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAGC,qBAAiC,aAAa,iBAAiB;AAAA,UAChE,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;"}
+{"version":3,"file":"tabular.mjs","sources":["../../../source/composite/person/tabular.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport default ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameComposite = ElementModel.headline.sansLarge({\n      element: name,\n      elementStyles: {\n        element: {\n          fontWeight: `${token.font.weight.bold}`,\n          color: `${token.color.black}`,\n\n          [`& + *`]: {\n            marginTop: token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      },\n      isThemeDark,\n    });\n\n    children.push(\n      layout.person.columns.details({\n        actions,\n        association,\n        isThemeDark,\n        customStyles: {},\n        job,\n        nameComposite,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkendIn || phone) {\n    children.push(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-tabular-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["image","layout.person.columns.image","ElementModel.headline.sansLarge","layout.person.columns.details","layout.person.columns.contact","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAA,UAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA4B;AAAA,QAAA,OAC1BD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,gBAAgBE,UAAgC;AAAA,MACpD,SAAS;AAAA,MACT,eAAe;AAAA,QACb,SAAS;AAAA,UACP,YAAY,GAAG,MAAM,KAAK,OAAO,IAAI;AAAA,UACrC,OAAO,GAAG,MAAM,MAAM,KAAK;AAAA,UAE3B,CAAC,OAAO,GAAG;AAAA,YACT,WAAW,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,QAEF,YAAY;AAAA,UACV,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,IAAA,CACD;AAED,aAAS;AAAA,MACPC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,aAAa,OAAO;AAC/D,aAAS;AAAA,MACPC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,UAChD,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;"}

package/dist/composite/quote/_constants.d.ts

@@ -0,0 +1,3 @@
+export declare const SMALL = 500;
+export declare const MEDIUM = 900;
+//# sourceMappingURL=_constants.d.ts.map

package/dist/composite/quote/_constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_constants.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/_constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,MAAM,CAAC;AACzB,eAAO,MAAM,MAAM,MAAM,CAAC"}

package/dist/composite/quote/_constants.js

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