@universityofmaryland/web-elements-library 1.4.8 → 1.5.0-beta.0

package/dist/composite/person/bio/small.mjs

@@ -1,13 +1,22 @@
-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 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";
@@ -15,6 +24,7 @@ import contact from "../../../atomic/text-lockup/contact.mjs";
 import "../../../atomic/text-lockup/date.mjs";
 import person from "../../../atomic/text-lockup/person.mjs";
 import "../../../atomic/text-lockup/small.mjs";
+import "@universityofmaryland/web-styles-library/typography";
 import { simpleLarge } from "../../../model/elements/rich-text.mjs";
 import { gridInlineTabletRows } from "../../../model/elements/layout.mjs";
 import { sansExtraLarge } from "../../../model/elements/headline.mjs";
@@ -29,13 +39,13 @@ const createTextContainer = (props) => {
         isThemeDark,
         elementStyles: {
           element: {
-            color: `${Styles.token.color.black}`,
+            color: `${token.color.black}`,
             textTransform: "uppercase",
             fontWeight: "800",
             display: "block"
           },
           siblingAfter: {
-            marginTop: Styles.token.spacing.sm
+            marginTop: token.spacing.sm
           }
         }
       })
@@ -58,7 +68,7 @@ const createTextColumn = (props) => {
         element: actions,
         elementStyles: {
           element: {
-            marginTop: Styles.token.spacing.sm
+            marginTop: token.spacing.sm
           }
         }
       })
@@ -80,17 +90,17 @@ const makeContainer = (props) => {
         isScaled: false,
         customStyles: {
           element: {
-            ...createContainerQuery(
+            ...createMediaQuery(
               "max-width",
-              Styles.token.media.breakpointValues.medium.max,
+              token.media.breakpointValues.medium.max,
               {
                 display: "flex"
               }
             ),
             [`& img`]: {
-              ...createContainerQuery(
+              ...createMediaQuery(
                 "min-width",
-                Styles.token.media.breakpointValues.large.min,
+                token.media.breakpointValues.large.min,
                 {
                   width: `100%`,
                   height: `auto !important`
@@ -109,29 +119,29 @@ const makeContainer = (props) => {
     elementStyles: {
       element: {
         display: "grid",
-        gridGap: `${Styles.token.spacing.md}`,
-        ...createContainerQuery(
+        gridGap: `${token.spacing.md}`,
+        ...createMediaQuery(
           "min-width",
-          Styles.token.media.breakpointValues.large.min,
+          token.media.breakpointValues.large.min,
           {
             gridTemplateColumns: `repeat(8, 1fr)`,
-            gridGap: `${Styles.token.spacing.lg}`,
+            gridGap: `${token.spacing.lg}`,
             alignItems: `center`
           }
         ),
         [`& > *`]: {
-          ...createContainerQuery(
+          ...createMediaQuery(
             "min-width",
-            Styles.token.media.breakpointValues.large.min,
+            token.media.breakpointValues.large.min,
             {
               gridColumn: `span 5`
             }
           )
         },
         [`&:has(> :nth-child(2)) > *:first-child `]: {
-          ...createContainerQuery(
+          ...createMediaQuery(
             "min-width",
-            Styles.token.media.breakpointValues.large.min,
+            token.media.breakpointValues.large.min,
             {
               gridColumn: `span 3`,
               alignSelf: `flex-start`
@@ -153,8 +163,8 @@ const small = (props) => {
         isThemeDark,
         elementStyles: {
           element: {
-            marginTop: Styles.token.spacing.lg,
-            maxWidth: Styles.token.spacing.maxWidth.smallest
+            marginTop: token.spacing.lg,
+            maxWidth: token.spacing.maxWidth.smallest
           }
         }
       })

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

@@ -1 +1 @@
-{"version":3,"file":"small.mjs","sources":["../../../../source/composite/person/bio/small.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { PersonBio } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\nconst createTextContainer = (props: PersonBio) => {\n  const { isThemeDark, name, ...textProps } = props;\n  const children: ElementVisual[] = [];\n\n  if (name) {\n    children.push(\n      ElementModel.headline.sansExtraLarge({\n        element: name,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            color: `${Styles.token.color.black}`,\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textLockup.person({ ...textProps, isThemeDark }));\n\n  return ElementModel.text.lineAdjustmentInset({\n    element: document.createElement('div'),\n    children,\n  });\n};\n\nconst createTextColumn = (props: PersonBio) => {\n  const { actions } = props;\n  const textContainer = createTextContainer(props);\n  const children: ElementVisual[] = [];\n\n  children.push(textContainer, textLockup.contact(props));\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridInlineTabletRows({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-text-column',\n    children,\n  });\n};\n\nconst makeContainer = (props: PersonBio) => {\n  const { image } = props;\n  const textColumn = createTextColumn(props);\n  const children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          element: {\n            ...theme.media.createContainerQuery(\n              'max-width',\n              Styles.token.media.breakpointValues.medium.max,\n              {\n                display: 'flex',\n              },\n            ),\n\n            [`& img`]: {\n              ...theme.media.createContainerQuery(\n                'min-width',\n                Styles.token.media.breakpointValues.large.min,\n                {\n                  width: `100%`,\n                  height: `auto !important`,\n                },\n              ),\n            },\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textColumn);\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-container',\n    children,\n    elementStyles: {\n      element: {\n        display: 'grid',\n        gridGap: `${Styles.token.spacing.md}`,\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          Styles.token.media.breakpointValues.large.min,\n          {\n            gridTemplateColumns: `repeat(8, 1fr)`,\n            gridGap: `${Styles.token.spacing.lg}`,\n            alignItems: `center`,\n          },\n        ),\n\n        [`& > *`]: {\n          ...theme.media.createContainerQuery(\n            'min-width',\n            Styles.token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 5`,\n            },\n          ),\n        },\n\n        [`&:has(> :nth-child(2)) > *:first-child `]: {\n          ...theme.media.createContainerQuery(\n            'min-width',\n            Styles.token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 3`,\n              alignSelf: `flex-start`,\n            },\n          ),\n        },\n      },\n    },\n  });\n};\n\nexport default (props: PersonBio) => {\n  const { isThemeDark, description } = props;\n  const container = makeContainer(props);\n  const children: ElementVisual[] = [container];\n\n  if (description) {\n    children.push(\n      ElementModel.richText.simpleLarge({\n        element: description,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.lg,\n            maxWidth: Styles.token.spacing.maxWidth.smallest,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-composite',\n    children,\n  });\n};\n"],"names":["ElementModel.headline.sansExtraLarge","textLockup.person","ElementModel.text.lineAdjustmentInset","textLockup.contact","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","assets.image.background","theme.media.createContainerQuery","ElementModel.richText.simpleLarge"],"mappings":"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"}
+{"version":3,"file":"small.mjs","sources":["../../../../source/composite/person/bio/small.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { assets, textLockup } from 'atomic';\nimport { PersonBio } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\nconst createTextContainer = (props: PersonBio) => {\n  const { isThemeDark, name, ...textProps } = props;\n  const children: ElementVisual[] = [];\n\n  if (name) {\n    children.push(\n      ElementModel.headline.sansExtraLarge({\n        element: name,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            color: `${token.color.black}`,\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textLockup.person({ ...textProps, isThemeDark }));\n\n  return ElementModel.text.lineAdjustmentInset({\n    element: document.createElement('div'),\n    children,\n  });\n};\n\nconst createTextColumn = (props: PersonBio) => {\n  const { actions } = props;\n  const textContainer = createTextContainer(props);\n  const children: ElementVisual[] = [];\n\n  children.push(textContainer, textLockup.contact(props));\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridInlineTabletRows({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-text-column',\n    children,\n  });\n};\n\nconst makeContainer = (props: PersonBio) => {\n  const { image } = props;\n  const textColumn = createTextColumn(props);\n  const children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          element: {\n            ...createMediaQuery(\n              'max-width',\n              token.media.breakpointValues.medium.max,\n              {\n                display: 'flex',\n              },\n            ),\n\n            [`& img`]: {\n              ...createMediaQuery(\n                'min-width',\n                token.media.breakpointValues.large.min,\n                {\n                  width: `100%`,\n                  height: `auto !important`,\n                },\n              ),\n            },\n          },\n        },\n      }),\n    );\n  }\n\n  children.push(textColumn);\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-container',\n    children,\n    elementStyles: {\n      element: {\n        display: 'grid',\n        gridGap: `${token.spacing.md}`,\n\n        ...createMediaQuery(\n          'min-width',\n          token.media.breakpointValues.large.min,\n          {\n            gridTemplateColumns: `repeat(8, 1fr)`,\n            gridGap: `${token.spacing.lg}`,\n            alignItems: `center`,\n          },\n        ),\n\n        [`& > *`]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 5`,\n            },\n          ),\n        },\n\n        [`&:has(> :nth-child(2)) > *:first-child `]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 3`,\n              alignSelf: `flex-start`,\n            },\n          ),\n        },\n      },\n    },\n  });\n};\n\nexport default (props: PersonBio) => {\n  const { isThemeDark, description } = props;\n  const container = makeContainer(props);\n  const children: ElementVisual[] = [container];\n\n  if (description) {\n    children.push(\n      ElementModel.richText.simpleLarge({\n        element: description,\n        isThemeDark,\n        elementStyles: {\n          element: {\n            marginTop: token.spacing.lg,\n            maxWidth: token.spacing.maxWidth.smallest,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-bio-summary-composite',\n    children,\n  });\n};\n"],"names":["ElementModel.headline.sansExtraLarge","textLockup.person","ElementModel.text.lineAdjustmentInset","textLockup.contact","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","assets.image.background","ElementModel.richText.simpleLarge"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../source/composite/person/block.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;yBAKtB,OAAO,UAAU;;;;;AAAjC,wBA+DE"}
+{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../source/composite/person/block.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;yBAKtB,OAAO,UAAU;;;;;AAAjC,wBA2DE"}

package/dist/composite/person/block.js

@@ -1,16 +1,24 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const icons = require("../../utilities/assets/icons.js");
-const create = require("../../utilities/markup/create.js");
-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 media = require("@universityofmaryland/web-utilities-library/media");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
+const people = require("@universityofmaryland/web-icons-library/people");
 const index = require("../../model/elements/index.js");
+require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-utilities-library/dom");
+require("@universityofmaryland/web-icons-library/controls");
+require("@universityofmaryland/web-icons-library/communication");
+require("@universityofmaryland/web-icons-library/files");
+require("@universityofmaryland/web-icons-library/brand");
+require("@universityofmaryland/web-icons-library/arrows");
 require("../../atomic/animations/actions/indicator.js");
 require("../../atomic/animations/brand/chevron-scroll.js");
 require("../../atomic/animations/brand/card-stack.js");
 const background = require("../../atomic/assets/image/background.js");
+require("@universityofmaryland/web-utilities-library/performance");
+require("@universityofmaryland/web-utilities-library/accessibility");
+require("@universityofmaryland/web-icons-library/location");
+require("@universityofmaryland/web-icons-library/calendar");
 require("../../atomic/layout/block/stacked.js");
 require("../../atomic/layout/overlay/modal.js");
 require("../../atomic/layout/person/columns.js");
@@ -18,6 +26,7 @@ const contact = require("../../atomic/text-lockup/contact.js");
 require("../../atomic/text-lockup/date.js");
 const person = require("../../atomic/text-lockup/person.js");
 require("../../atomic/text-lockup/small.js");
+require("@universityofmaryland/web-styles-library/typography");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -34,8 +43,8 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
-const mediumBreakpointStart = Styles__namespace.token.media.breakpointValues.medium.min;
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const mediumBreakpointStart = token__namespace.media.breakpointValues.medium.min;
 const block = (props) => {
   const { image: personImage, isThemeDark } = props;
   const textLockupElement = person(props);
@@ -43,8 +52,8 @@ const block = (props) => {
   let children = [];
   let image = personImage;
   if (!image) {
-    image = create.imageFromSvg({
-      SVG: icons.PERSON
+    image = media.imageFromSvg({
+      SVG: people.person
     });
   }
   children.push(
@@ -54,23 +63,19 @@ const block = (props) => {
         element: {
           display: "flex",
           justifyContent: "center",
-          backgroundColor: `${Styles__namespace.token.color.gray.lighter}`,
-          marginBottom: `${Styles__namespace.token.spacing.md}`,
+          backgroundColor: `${token__namespace.color.gray.lighter}`,
+          marginBottom: `${token__namespace.spacing.md}`,
           ...isThemeDark && {
-            backgroundColor: `${Styles__namespace.token.color.gray.darker}`
+            backgroundColor: `${token__namespace.color.gray.darker}`
           },
           ["& img, & svg"]: {
             display: "block",
             width: "100%",
             objectFit: "contain",
             height: "140px !important",
-            ...media.createContainerQuery(
-              "min-width",
-              mediumBreakpointStart,
-              {
-                height: "200px !important"
-              }
-            )
+            ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
+              height: "200px !important"
+            })
           }
         }
       },

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

@@ -1 +1 @@
-{"version":3,"file":"block.js","sources":["../../../source/composite/person/block.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { asset, markup, theme } from 'utilities';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\n\nexport default (props: PersonCard) => {\n  const { image: personImage, isThemeDark } = props;\n  const textLockupElement = textLockup.person(props);\n  const contactLockupElement = textLockup.contact(props);\n  let children: ElementVisual[] = [];\n\n  let image = personImage;\n\n  if (!image) {\n    image = markup.create.imageFromSvg({\n      SVG: asset.icon.PERSON,\n    });\n  }\n\n  children.push(\n    ElementModel.createDiv({\n      className: 'person-block-image',\n      elementStyles: {\n        element: {\n          display: 'flex',\n          justifyContent: 'center',\n          backgroundColor: `${Styles.token.color.gray.lighter}`,\n          marginBottom: `${Styles.token.spacing.md}`,\n\n          ...(isThemeDark && {\n            backgroundColor: `${Styles.token.color.gray.darker}`,\n          }),\n\n          ['& img, & svg']: {\n            display: 'block',\n            width: '100%',\n            objectFit: 'contain',\n            height: '140px !important',\n\n            ...theme.media.createContainerQuery(\n              'min-width',\n              mediumBreakpointStart,\n              {\n                height: '200px !important',\n              },\n            ),\n          },\n        },\n      },\n      children: [\n        assets.image.background({\n          element: image,\n          isScaled: false,\n          customStyles: {\n            height: 'auto',\n          },\n        }),\n      ],\n    }),\n  );\n\n  children.push(textLockupElement);\n  children.push(contactLockupElement);\n\n  return ElementModel.createDiv({\n    className: 'person-block',\n    children,\n  });\n};\n"],"names":["Styles","textLockup.person","textLockup.contact","markup.create.imageFromSvg","asset.icon.PERSON","ElementModel.createDiv","theme.media.createContainerQuery","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,wBAAwBA,kBAAO,MAAM,MAAM,iBAAiB,OAAO;AAEzE,MAAA,QAAe,CAAC,UAAsB;AACpC,QAAM,EAAE,OAAO,aAAa,YAAA,IAAgB;AAC5C,QAAM,oBAAoBC,OAAkB,KAAK;AACjD,QAAM,uBAAuBC,QAAmB,KAAK;AACrD,MAAI,WAA4B,CAAA;AAEhC,MAAI,QAAQ;AAEZ,MAAI,CAAC,OAAO;AACV,YAAQC,OAAAA,aAA2B;AAAA,MACjC,KAAKC,MAAAA;AAAAA,IAAW,CACjB;AAAA,EACH;AAEA,WAAS;AAAA,IACPC,gBAAuB;AAAA,MACrB,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,iBAAiB,GAAGL,kBAAO,MAAM,MAAM,KAAK,OAAO;AAAA,UACnD,cAAc,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,UAExC,GAAI,eAAe;AAAA,YACjB,iBAAiB,GAAGA,kBAAO,MAAM,MAAM,KAAK,MAAM;AAAA,UAAA;AAAA,UAGpD,CAAC,cAAc,GAAG;AAAA,YAChB,SAAS;AAAA,YACT,OAAO;AAAA,YACP,WAAW;AAAA,YACX,QAAQ;AAAA,YAER,GAAGM,MAAAA;AAAAA,cACD;AAAA,cACA;AAAA,cACA;AAAA,gBACE,QAAQ;AAAA,cAAA;AAAA,YACV;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MAEF,UAAU;AAAA,QACRC,WAAwB;AAAA,UACtB,SAAS;AAAA,UACT,UAAU;AAAA,UACV,cAAc;AAAA,YACZ,QAAQ;AAAA,UAAA;AAAA,QACV,CACD;AAAA,MAAA;AAAA,IACH,CACD;AAAA,EAAA;AAGH,WAAS,KAAK,iBAAiB;AAC/B,WAAS,KAAK,oBAAoB;AAElC,SAAOF,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,EAAA,CACD;AACH;;"}
+{"version":3,"file":"block.js","sources":["../../../source/composite/person/block.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { person as iconPerson } from '@universityofmaryland/web-icons-library/people';\nimport { ElementModel } from 'model';\nimport { assets, textLockup } from 'atomic';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\n\nexport default (props: PersonCard) => {\n  const { image: personImage, isThemeDark } = props;\n  const textLockupElement = textLockup.person(props);\n  const contactLockupElement = textLockup.contact(props);\n  let children: ElementVisual[] = [];\n\n  let image = personImage;\n\n  if (!image) {\n    image = imageFromSvg({\n      SVG: iconPerson,\n    });\n  }\n\n  children.push(\n    ElementModel.createDiv({\n      className: 'person-block-image',\n      elementStyles: {\n        element: {\n          display: 'flex',\n          justifyContent: 'center',\n          backgroundColor: `${token.color.gray.lighter}`,\n          marginBottom: `${token.spacing.md}`,\n\n          ...(isThemeDark && {\n            backgroundColor: `${token.color.gray.darker}`,\n          }),\n\n          ['& img, & svg']: {\n            display: 'block',\n            width: '100%',\n            objectFit: 'contain',\n            height: '140px !important',\n\n            ...createMediaQuery('min-width', mediumBreakpointStart, {\n              height: '200px !important',\n            }),\n          },\n        },\n      },\n      children: [\n        assets.image.background({\n          element: image,\n          isScaled: false,\n          customStyles: {\n            height: 'auto',\n          },\n        }),\n      ],\n    }),\n  );\n\n  children.push(textLockupElement);\n  children.push(contactLockupElement);\n\n  return ElementModel.createDiv({\n    className: 'person-block',\n    children,\n  });\n};\n"],"names":["token","textLockup.person","textLockup.contact","imageFromSvg","iconPerson","ElementModel.createDiv","createMediaQuery","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,wBAAwBA,iBAAM,MAAM,iBAAiB,OAAO;AAElE,MAAA,QAAe,CAAC,UAAsB;AACpC,QAAM,EAAE,OAAO,aAAa,YAAA,IAAgB;AAC5C,QAAM,oBAAoBC,OAAkB,KAAK;AACjD,QAAM,uBAAuBC,QAAmB,KAAK;AACrD,MAAI,WAA4B,CAAA;AAEhC,MAAI,QAAQ;AAEZ,MAAI,CAAC,OAAO;AACV,YAAQC,MAAAA,aAAa;AAAA,MACnB,KAAKC,OAAAA;AAAAA,IAAA,CACN;AAAA,EACH;AAEA,WAAS;AAAA,IACPC,gBAAuB;AAAA,MACrB,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,iBAAiB,GAAGL,iBAAM,MAAM,KAAK,OAAO;AAAA,UAC5C,cAAc,GAAGA,iBAAM,QAAQ,EAAE;AAAA,UAEjC,GAAI,eAAe;AAAA,YACjB,iBAAiB,GAAGA,iBAAM,MAAM,KAAK,MAAM;AAAA,UAAA;AAAA,UAG7C,CAAC,cAAc,GAAG;AAAA,YAChB,SAAS;AAAA,YACT,OAAO;AAAA,YACP,WAAW;AAAA,YACX,QAAQ;AAAA,YAER,GAAGM,OAAAA,iBAAiB,aAAa,uBAAuB;AAAA,cACtD,QAAQ;AAAA,YAAA,CACT;AAAA,UAAA;AAAA,QACH;AAAA,MACF;AAAA,MAEF,UAAU;AAAA,QACRC,WAAwB;AAAA,UACtB,SAAS;AAAA,UACT,UAAU;AAAA,UACV,cAAc;AAAA,YACZ,QAAQ;AAAA,UAAA;AAAA,QACV,CACD;AAAA,MAAA;AAAA,IACH,CACD;AAAA,EAAA;AAGH,WAAS,KAAK,iBAAiB;AAC/B,WAAS,KAAK,oBAAoB;AAElC,SAAOF,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,EAAA,CACD;AACH;;"}

package/dist/composite/person/block.mjs

@@ -1,15 +1,23 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
-import { PERSON } from "../../utilities/assets/icons.mjs";
-import { imageFromSvg } from "../../utilities/markup/create.mjs";
-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 { imageFromSvg } from "@universityofmaryland/web-utilities-library/media";
+import { createMediaQuery } from "@universityofmaryland/web-utilities-library/styles";
+import { person as person$1 } from "@universityofmaryland/web-icons-library/people";
 import { createDiv } from "../../model/elements/index.mjs";
+import "@universityofmaryland/web-styles-library/element";
+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 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";
@@ -17,7 +25,8 @@ import contact from "../../atomic/text-lockup/contact.mjs";
 import "../../atomic/text-lockup/date.mjs";
 import person from "../../atomic/text-lockup/person.mjs";
 import "../../atomic/text-lockup/small.mjs";
-const mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;
+import "@universityofmaryland/web-styles-library/typography";
+const mediumBreakpointStart = token.media.breakpointValues.medium.min;
 const block = (props) => {
   const { image: personImage, isThemeDark } = props;
   const textLockupElement = person(props);
@@ -26,7 +35,7 @@ const block = (props) => {
   let image = personImage;
   if (!image) {
     image = imageFromSvg({
-      SVG: PERSON
+      SVG: person$1
     });
   }
   children.push(
@@ -36,23 +45,19 @@ const block = (props) => {
         element: {
           display: "flex",
           justifyContent: "center",
-          backgroundColor: `${Styles.token.color.gray.lighter}`,
-          marginBottom: `${Styles.token.spacing.md}`,
+          backgroundColor: `${token.color.gray.lighter}`,
+          marginBottom: `${token.spacing.md}`,
           ...isThemeDark && {
-            backgroundColor: `${Styles.token.color.gray.darker}`
+            backgroundColor: `${token.color.gray.darker}`
           },
           ["& img, & svg"]: {
             display: "block",
             width: "100%",
             objectFit: "contain",
             height: "140px !important",
-            ...createContainerQuery(
-              "min-width",
-              mediumBreakpointStart,
-              {
-                height: "200px !important"
-              }
-            )
+            ...createMediaQuery("min-width", mediumBreakpointStart, {
+              height: "200px !important"
+            })
           }
         }
       },

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

@@ -1 +1 @@
-{"version":3,"file":"block.mjs","sources":["../../../source/composite/person/block.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { asset, markup, theme } from 'utilities';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\n\nexport default (props: PersonCard) => {\n  const { image: personImage, isThemeDark } = props;\n  const textLockupElement = textLockup.person(props);\n  const contactLockupElement = textLockup.contact(props);\n  let children: ElementVisual[] = [];\n\n  let image = personImage;\n\n  if (!image) {\n    image = markup.create.imageFromSvg({\n      SVG: asset.icon.PERSON,\n    });\n  }\n\n  children.push(\n    ElementModel.createDiv({\n      className: 'person-block-image',\n      elementStyles: {\n        element: {\n          display: 'flex',\n          justifyContent: 'center',\n          backgroundColor: `${Styles.token.color.gray.lighter}`,\n          marginBottom: `${Styles.token.spacing.md}`,\n\n          ...(isThemeDark && {\n            backgroundColor: `${Styles.token.color.gray.darker}`,\n          }),\n\n          ['& img, & svg']: {\n            display: 'block',\n            width: '100%',\n            objectFit: 'contain',\n            height: '140px !important',\n\n            ...theme.media.createContainerQuery(\n              'min-width',\n              mediumBreakpointStart,\n              {\n                height: '200px !important',\n              },\n            ),\n          },\n        },\n      },\n      children: [\n        assets.image.background({\n          element: image,\n          isScaled: false,\n          customStyles: {\n            height: 'auto',\n          },\n        }),\n      ],\n    }),\n  );\n\n  children.push(textLockupElement);\n  children.push(contactLockupElement);\n\n  return ElementModel.createDiv({\n    className: 'person-block',\n    children,\n  });\n};\n"],"names":["textLockup.person","textLockup.contact","markup.create.imageFromSvg","asset.icon.PERSON","ElementModel.createDiv","theme.media.createContainerQuery","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;AAOA,MAAM,wBAAwB,OAAO,MAAM,MAAM,iBAAiB,OAAO;AAEzE,MAAA,QAAe,CAAC,UAAsB;AACpC,QAAM,EAAE,OAAO,aAAa,YAAA,IAAgB;AAC5C,QAAM,oBAAoBA,OAAkB,KAAK;AACjD,QAAM,uBAAuBC,QAAmB,KAAK;AACrD,MAAI,WAA4B,CAAA;AAEhC,MAAI,QAAQ;AAEZ,MAAI,CAAC,OAAO;AACV,YAAQC,aAA2B;AAAA,MACjC,KAAKC;AAAAA,IAAW,CACjB;AAAA,EACH;AAEA,WAAS;AAAA,IACPC,UAAuB;AAAA,MACrB,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,iBAAiB,GAAG,OAAO,MAAM,MAAM,KAAK,OAAO;AAAA,UACnD,cAAc,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,UAExC,GAAI,eAAe;AAAA,YACjB,iBAAiB,GAAG,OAAO,MAAM,MAAM,KAAK,MAAM;AAAA,UAAA;AAAA,UAGpD,CAAC,cAAc,GAAG;AAAA,YAChB,SAAS;AAAA,YACT,OAAO;AAAA,YACP,WAAW;AAAA,YACX,QAAQ;AAAA,YAER,GAAGC;AAAAA,cACD;AAAA,cACA;AAAA,cACA;AAAA,gBACE,QAAQ;AAAA,cAAA;AAAA,YACV;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MAEF,UAAU;AAAA,QACRC,eAAwB;AAAA,UACtB,SAAS;AAAA,UACT,UAAU;AAAA,UACV,cAAc;AAAA,YACZ,QAAQ;AAAA,UAAA;AAAA,QACV,CACD;AAAA,MAAA;AAAA,IACH,CACD;AAAA,EAAA;AAGH,WAAS,KAAK,iBAAiB;AAC/B,WAAS,KAAK,oBAAoB;AAElC,SAAOF,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,EAAA,CACD;AACH;"}
+{"version":3,"file":"block.mjs","sources":["../../../source/composite/person/block.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { person as iconPerson } from '@universityofmaryland/web-icons-library/people';\nimport { ElementModel } from 'model';\nimport { assets, textLockup } from 'atomic';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\n\nexport default (props: PersonCard) => {\n  const { image: personImage, isThemeDark } = props;\n  const textLockupElement = textLockup.person(props);\n  const contactLockupElement = textLockup.contact(props);\n  let children: ElementVisual[] = [];\n\n  let image = personImage;\n\n  if (!image) {\n    image = imageFromSvg({\n      SVG: iconPerson,\n    });\n  }\n\n  children.push(\n    ElementModel.createDiv({\n      className: 'person-block-image',\n      elementStyles: {\n        element: {\n          display: 'flex',\n          justifyContent: 'center',\n          backgroundColor: `${token.color.gray.lighter}`,\n          marginBottom: `${token.spacing.md}`,\n\n          ...(isThemeDark && {\n            backgroundColor: `${token.color.gray.darker}`,\n          }),\n\n          ['& img, & svg']: {\n            display: 'block',\n            width: '100%',\n            objectFit: 'contain',\n            height: '140px !important',\n\n            ...createMediaQuery('min-width', mediumBreakpointStart, {\n              height: '200px !important',\n            }),\n          },\n        },\n      },\n      children: [\n        assets.image.background({\n          element: image,\n          isScaled: false,\n          customStyles: {\n            height: 'auto',\n          },\n        }),\n      ],\n    }),\n  );\n\n  children.push(textLockupElement);\n  children.push(contactLockupElement);\n\n  return ElementModel.createDiv({\n    className: 'person-block',\n    children,\n  });\n};\n"],"names":["textLockup.person","textLockup.contact","iconPerson","ElementModel.createDiv","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,wBAAwB,MAAM,MAAM,iBAAiB,OAAO;AAElE,MAAA,QAAe,CAAC,UAAsB;AACpC,QAAM,EAAE,OAAO,aAAa,YAAA,IAAgB;AAC5C,QAAM,oBAAoBA,OAAkB,KAAK;AACjD,QAAM,uBAAuBC,QAAmB,KAAK;AACrD,MAAI,WAA4B,CAAA;AAEhC,MAAI,QAAQ;AAEZ,MAAI,CAAC,OAAO;AACV,YAAQ,aAAa;AAAA,MACnB,KAAKC;AAAAA,IAAA,CACN;AAAA,EACH;AAEA,WAAS;AAAA,IACPC,UAAuB;AAAA,MACrB,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,iBAAiB,GAAG,MAAM,MAAM,KAAK,OAAO;AAAA,UAC5C,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,UAEjC,GAAI,eAAe;AAAA,YACjB,iBAAiB,GAAG,MAAM,MAAM,KAAK,MAAM;AAAA,UAAA;AAAA,UAG7C,CAAC,cAAc,GAAG;AAAA,YAChB,SAAS;AAAA,YACT,OAAO;AAAA,YACP,WAAW;AAAA,YACX,QAAQ;AAAA,YAER,GAAG,iBAAiB,aAAa,uBAAuB;AAAA,cACtD,QAAQ;AAAA,YAAA,CACT;AAAA,UAAA;AAAA,QACH;AAAA,MACF;AAAA,MAEF,UAAU;AAAA,QACRC,eAAwB;AAAA,UACtB,SAAS;AAAA,UACT,UAAU;AAAA,UACV,cAAc;AAAA,YACZ,QAAQ;AAAA,UAAA;AAAA,QACV,CACD;AAAA,MAAA;AAAA,IACH,CACD;AAAA,EAAA;AAGH,WAAS,KAAK,iBAAiB;AAC/B,WAAS,KAAK,oBAAoB;AAElC,SAAOD,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,EAAA,CACD;AACH;"}

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

@@ -1 +1 @@
-{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../source/composite/person/hero.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,UAAW,SAAQ,KAAK;IAChC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;AAED,UAAU,UAAW,SAAQ,aAAa,EAAE,KAAK;IAC/C,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC/B;AAED,UAAU,UAAW,SAAQ,UAAU,EAAE,UAAU;IACjD,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACtC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACxC;yBAsPe,OAAO,UAAU;;;;;AAAjC,wBA0GE"}
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../source/composite/person/hero.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,UAAW,SAAQ,KAAK;IAChC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;AAED,UAAU,UAAW,SAAQ,aAAa,EAAE,KAAK;IAC/C,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC/B;AAED,UAAU,UAAW,SAAQ,UAAU,EAAE,UAAU;IACjD,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACtC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACxC;yBAsPe,OAAO,UAAU;;;;;AAAjC,wBA0GE"}

package/dist/composite/person/hero.js

@@ -1,22 +1,49 @@
 "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 token = require("@universityofmaryland/web-styles-library/token");
+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");
 const index = require("../../model/elements/index.js");
+require("@universityofmaryland/web-icons-library/arrows");
 require("../../atomic/animations/actions/indicator.js");
 require("../../atomic/animations/brand/chevron-scroll.js");
 require("../../atomic/animations/brand/card-stack.js");
 const background = require("../../atomic/assets/image/background.js");
+require("@universityofmaryland/web-utilities-library/performance");
+require("@universityofmaryland/web-utilities-library/accessibility");
+require("@universityofmaryland/web-icons-library/location");
+require("@universityofmaryland/web-icons-library/calendar");
 require("../../atomic/layout/block/stacked.js");
 require("../../atomic/layout/overlay/modal.js");
 require("../../atomic/layout/person/columns.js");
 const contact = require("../../atomic/text-lockup/contact.js");
 require("../../atomic/text-lockup/date.js");
 require("../../atomic/text-lockup/small.js");
+require("@universityofmaryland/web-styles-library/typography");
 const layout = require("../../model/elements/layout.js");
 const text = require("../../model/elements/text.js");
 const headline = require("../../model/elements/headline.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const CreateImageBlock = (props) => {
   const { image, association, pronouns, isThemeDark } = props;
   const container = index.create({
@@ -24,16 +51,16 @@ const CreateImageBlock = (props) => {
     className: "umd-person-hero-image-container",
     elementStyles: {
       element: {
-        paddingTop: `${Styles.token.spacing.lg}`,
-        paddingBottom: `${Styles.token.spacing.lg}`,
-        backgroundColor: `${isThemeDark ? Styles.token.color.gray.lightest : Styles.token.color.black}`,
+        paddingTop: `${token__namespace.spacing.lg}`,
+        paddingBottom: `${token__namespace.spacing.lg}`,
+        backgroundColor: `${isThemeDark ? token__namespace.color.gray.lightest : token__namespace.color.black}`,
         position: "relative",
-        [`@container (max-width: ${Styles.token.media.breakpoints.large.max})`]: {
-          paddingLeft: `${Styles.token.spacing.md}`,
-          paddingRight: `${Styles.token.spacing.md}`
+        [`@container (max-width: ${token__namespace.media.breakpoints.large.max})`]: {
+          paddingLeft: `${token__namespace.spacing.md}`,
+          paddingRight: `${token__namespace.spacing.md}`
         },
-        [`@container (min-width: ${Styles.token.media.breakpoints.tablet.min})`]: {
-          padding: `${Styles.token.spacing.md}`,
+        [`@container (min-width: ${token__namespace.media.breakpoints.tablet.min})`]: {
+          padding: `${token__namespace.spacing.md}`,
           width: "30%",
           maxWidth: "320px"
         }
@@ -54,12 +81,12 @@ const CreateImageBlock = (props) => {
       className: "umd-person-hero-image",
       elementStyles: {
         element: {
-          backgroundColor: `${isThemeDark ? Styles.token.color.gray.lightest : Styles.token.color.gray.darker}`,
+          backgroundColor: `${isThemeDark ? token__namespace.color.gray.lightest : token__namespace.color.gray.darker}`,
           display: "flex",
           justifyContent: "center",
-          marginBottom: Styles.token.spacing.md,
+          marginBottom: token__namespace.spacing.md,
           ["& img"]: {
-            [`@container (max-width: ${Styles.token.media.breakpoints.large.max})`]: {
+            [`@container (max-width: ${token__namespace.media.breakpoints.large.max})`]: {
               maxHeight: "160px"
             }
           }
@@ -84,7 +111,7 @@ const CreateImageBlock = (props) => {
           display: "block"
         },
         siblingAfter: {
-          marginTop: Styles.token.spacing.min
+          marginTop: token__namespace.spacing.min
         }
       }
     });
@@ -104,7 +131,7 @@ const CreateImageBlock = (props) => {
         },
         siblingAfter: {
           display: "block",
-          marginTop: Styles.token.spacing.min
+          marginTop: token__namespace.spacing.min
         }
       }
     });
@@ -130,17 +157,17 @@ const CreateTextContainer = ({
     className: "person-hero-text",
     elementStyles: {
       element: {
-        backgroundColor: `${isThemeDark ? Styles.token.color.black : Styles.token.color.gray.lightest}`,
-        paddingTop: `${Styles.token.spacing["3xl"]}`,
-        paddingBottom: `${Styles.token.spacing["3xl"]}`,
+        backgroundColor: `${isThemeDark ? token__namespace.color.black : token__namespace.color.gray.lightest}`,
+        paddingTop: `${token__namespace.spacing["3xl"]}`,
+        paddingBottom: `${token__namespace.spacing["3xl"]}`,
         position: "relative",
-        [`@container (max-width: ${Styles.token.media.breakpoints.large.max})`]: {
-          paddingLeft: `${Styles.token.spacing.md}`,
-          paddingRight: `${Styles.token.spacing.md}`
+        [`@container (max-width: ${token__namespace.media.breakpoints.large.max})`]: {
+          paddingLeft: `${token__namespace.spacing.md}`,
+          paddingRight: `${token__namespace.spacing.md}`
         },
-        [`@container (min-width: ${Styles.token.media.breakpoints.tablet.min})`]: {
+        [`@container (min-width: ${token__namespace.media.breakpoints.tablet.min})`]: {
           paddingTop: `0`,
-          paddingBottom: `${Styles.token.spacing["7xl"]}`,
+          paddingBottom: `${token__namespace.spacing["7xl"]}`,
           alignSelf: "flex-start"
         }
       },
@@ -152,7 +179,7 @@ const CreateTextContainer = ({
         bottom: "0",
         width: "200vw",
         transform: "translateX(-20%)",
-        backgroundColor: `${isThemeDark ? Styles.token.color.black : Styles.token.color.gray.lightest}`
+        backgroundColor: `${isThemeDark ? token__namespace.color.black : token__namespace.color.gray.lightest}`
       }
     }
   });
@@ -160,7 +187,7 @@ const CreateTextContainer = ({
     element: document.createElement("div"),
     elementStyles: {
       pseudoBefore: {
-        backgroundColor: `${isThemeDark ? Styles.token.color.gold : Styles.token.color.red}`
+        backgroundColor: `${isThemeDark ? token__namespace.color.gold : token__namespace.color.red}`
       }
     }
   });
@@ -173,13 +200,13 @@ const CreateTextContainer = ({
           display: "block",
           textTransform: "uppercase",
           fontWeight: "700",
-          color: `${Styles.token.color.black}`,
+          color: `${token__namespace.color.black}`,
           maxWidth: "650px"
         },
         siblingAfter: {
-          marginTop: Styles.token.spacing.min,
-          [`@container (min-width: ${Styles.token.media.breakpoints.tablet.min})`]: {
-            marginTop: Styles.token.spacing.sm
+          marginTop: token__namespace.spacing.min,
+          [`@container (min-width: ${token__namespace.media.breakpoints.tablet.min})`]: {
+            marginTop: token__namespace.spacing.sm
           }
         }
       }
@@ -196,12 +223,12 @@ const CreateTextContainer = ({
           textTransform: "uppercase",
           fontWeight: "700",
           display: "block",
-          color: `${Styles.token.color.black}`
+          color: `${token__namespace.color.black}`
         },
         siblingAfter: {
-          marginTop: Styles.token.spacing.min,
-          [`@container (min-width: ${Styles.token.media.breakpoints.tablet.min})`]: {
-            marginTop: Styles.token.spacing.md
+          marginTop: token__namespace.spacing.min,
+          [`@container (min-width: ${token__namespace.media.breakpoints.tablet.min})`]: {
+            marginTop: token__namespace.spacing.md
           }
         }
       }
@@ -242,7 +269,7 @@ const hero = (props) => {
     element: document.createElement("div"),
     elementStyles: {
       element: {
-        [`@container (max-width: ${Styles.token.media.breakpoints.large.max})`]: {
+        [`@container (max-width: ${token__namespace.media.breakpoints.large.max})`]: {
           padding: "0"
         }
       }
@@ -253,10 +280,10 @@ const hero = (props) => {
     className: "umd-person-hero-wrapper",
     elementStyles: {
       element: {
-        [`@container (min-width: ${Styles.token.media.breakpoints.tablet.min})`]: {
+        [`@container (min-width: ${token__namespace.media.breakpoints.tablet.min})`]: {
           display: "flex",
           justifyContent: "space-between",
-          paddingTop: `${Styles.token.spacing["7xl"]}`
+          paddingTop: `${token__namespace.spacing["7xl"]}`
         }
       }
     }
@@ -266,7 +293,7 @@ const hero = (props) => {
     className: "umd-person-hero-columns",
     elementStyles: {
       element: {
-        [`@container (min-width: ${Styles.token.media.breakpoints.tablet.min})`]: {
+        [`@container (min-width: ${token__namespace.media.breakpoints.tablet.min})`]: {
           width: "70%"
         }
       }
@@ -283,7 +310,7 @@ const hero = (props) => {
       className: "umd-person-hero-breadcrumb-desktop",
       elementStyles: {
         element: {
-          [`@container (max-width: ${Styles.token.media.breakpoints.large.max})`]: {
+          [`@container (max-width: ${token__namespace.media.breakpoints.large.max})`]: {
             display: "none"
           }
         }
@@ -306,9 +333,9 @@ const hero = (props) => {
       className: "umd-person-hero-breadcrumb-mobile",
       elementStyles: {
         element: {
-          paddingLeft: `${Styles.token.spacing.md}`,
-          paddingRight: `${Styles.token.spacing.md}`,
-          [`@container (min-width: ${Styles.token.media.breakpoints.tablet.min})`]: {
+          paddingLeft: `${token__namespace.spacing.md}`,
+          paddingRight: `${token__namespace.spacing.md}`,
+          [`@container (min-width: ${token__namespace.media.breakpoints.tablet.min})`]: {
             display: "none"
           }
         }