@universityofmaryland/web-elements-library 1.4.8 → 1.5.0

package/dist/atomic/layout/overlay/modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal.mjs","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement | null;\n  isHidden?: boolean;\n  callback?: () => void;\n  context?: HTMLElement | null;\n};\n\nconst ELEMENT_CONTAINER = 'modal-screen-container';\nconst ELEMENT_CONTAINER_BACKGROUND = 'modal-screen-container-background';\n\nexport const STYLES_MODAL = `\n  .${ELEMENT_CONTAINER} {\n    display: none;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 999999;\n  }\n\n  .${ELEMENT_CONTAINER_BACKGROUND} {\n    background-color: rgba(0, 0, 0, 0.9);\n    padding: ${token.spacing.xl} ${token.spacing.md};\n    width: 100%;\n    height: 100%;\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    .${ELEMENT_CONTAINER_BACKGROUND} {\n      padding: 10vh 10vw;\n    }\n  }\n`;\n\nexport const createModal = ({\n  content,\n  callback,\n  isHidden,\n  context,\n}: TypeFixedFullScreenProps) => {\n  const body = document.body;\n  const html = document.documentElement;\n  const container = document.createElement('div');\n  const background = document.createElement('div');\n  let eventReference: any = null;\n  let accessibiltyEventReference: any = null;\n\n  const show = () => {\n    container.style.display = 'block';\n    body.style.overflow = 'hidden';\n    body.style.height = '100%';\n    html.style.overflow = 'hidden';\n    html.style.height = '100%';\n    eventReference = container.addEventListener('click', (event) => {\n      const target = event.target as HTMLElement;\n\n      if (target === container) hide();\n    });\n\n    accessibiltyEventReference =\n      Utility.accessibility.eventAccessibilityFocusTrap({\n        element: container,\n        action: hide,\n        shadowDomContext: context || null,\n      });\n\n    setTimeout(() => {\n      if (content) content.focus();\n    }, 100);\n  };\n  const hide = () => {\n    body.style.overflow = 'visible';\n    body.style.height = 'inherit';\n    html.style.overflow = 'visible';\n    html.style.height = 'inherit';\n    container.style.display = 'none';\n\n    if (accessibiltyEventReference) accessibiltyEventReference();\n    if (eventReference)\n      eventReference.removeEventListener('click', () => hide());\n\n    setTimeout(() => {\n      if (context) {\n        const firstItem = context.querySelector('button, a') as HTMLElement;\n        firstItem?.focus();\n      }\n    }, 100);\n  };\n\n  background.classList.add(ELEMENT_CONTAINER_BACKGROUND);\n  if (content) background.appendChild(content);\n\n  container.classList.add(ELEMENT_CONTAINER);\n  container.appendChild(background);\n  if (isHidden) container.style.display = 'none';\n\n  return {\n    element: container,\n    styles: STYLES_MODAL,\n    events: {\n      show,\n      hide,\n    },\n  };\n};\n"],"names":["Utility.accessibility.eventAccessibilityFocusTrap"],"mappings":";;;;;AAUA,MAAM,oBAAoB;AAC1B,MAAM,+BAA+B;AAE9B,MAAM,eAAe;AAAA,KACvB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAUjB,4BAA4B;AAAA;AAAA,eAElB,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAKvC,MAAM,MAAM,QAAQ,OAAO,GAAG;AAAA,OACnC,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAM5B,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,OAAO,SAAS;AACtB,QAAM,OAAO,SAAS;AACtB,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,MAAI,iBAAsB;AAC1B,MAAI,6BAAkC;AAEtC,QAAM,OAAO,MAAM;AACjB,cAAU,MAAM,UAAU;AAC1B,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,qBAAiB,UAAU,iBAAiB,SAAS,CAAC,UAAU;AAC9D,YAAM,SAAS,MAAM;AAErB,UAAI,WAAW,UAAW,MAAA;AAAA,IAC5B,CAAC;AAED,iCACEA,4BAAkD;AAAA,MAChD,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,kBAAkB,WAAW;AAAA,IAAA,CAC9B;AAEH,eAAW,MAAM;AACf,UAAI,iBAAiB,MAAA;AAAA,IACvB,GAAG,GAAG;AAAA,EACR;AACA,QAAM,OAAO,MAAM;AACjB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,cAAU,MAAM,UAAU;AAE1B,QAAI,2BAA4B,4BAAA;AAChC,QAAI;AACF,qBAAe,oBAAoB,SAAS,MAAM,KAAA,CAAM;AAE1D,eAAW,MAAM;AACf,UAAI,SAAS;AACX,cAAM,YAAY,QAAQ,cAAc,WAAW;AACnD,mBAAW,MAAA;AAAA,MACb;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AAEA,aAAW,UAAU,IAAI,4BAA4B;AACrD,MAAI,QAAS,YAAW,YAAY,OAAO;AAE3C,YAAU,UAAU,IAAI,iBAAiB;AACzC,YAAU,YAAY,UAAU;AAChC,MAAI,SAAU,WAAU,MAAM,UAAU;AAExC,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"modal.mjs","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { trapFocus } from '@universityofmaryland/web-utilities-library/accessibility';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement | null;\n  isHidden?: boolean;\n  callback?: () => void;\n  context?: HTMLElement | null;\n};\n\nconst ELEMENT_CONTAINER = 'modal-screen-container';\nconst ELEMENT_CONTAINER_BACKGROUND = 'modal-screen-container-background';\n\nexport const STYLES_MODAL = `\n  .${ELEMENT_CONTAINER} {\n    display: none;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 999999;\n  }\n\n  .${ELEMENT_CONTAINER_BACKGROUND} {\n    background-color: rgba(0, 0, 0, 0.9);\n    padding: ${token.spacing.xl} ${token.spacing.md};\n    width: 100%;\n    height: 100%;\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    .${ELEMENT_CONTAINER_BACKGROUND} {\n      padding: 10vh 10vw;\n    }\n  }\n`;\n\nexport const createModal = ({\n  content,\n  callback,\n  isHidden,\n  context,\n}: TypeFixedFullScreenProps) => {\n  const body = document.body;\n  const html = document.documentElement;\n  const container = document.createElement('div');\n  const background = document.createElement('div');\n  let eventReference: any = null;\n  let accessibiltyEventReference: any = null;\n\n  const show = () => {\n    container.style.display = 'block';\n    body.style.overflow = 'hidden';\n    body.style.height = '100%';\n    html.style.overflow = 'hidden';\n    html.style.height = '100%';\n    eventReference = container.addEventListener('click', (event) => {\n      const target = event.target as HTMLElement;\n\n      if (target === container) hide();\n    });\n\n    accessibiltyEventReference = trapFocus({\n      element: container,\n      action: hide,\n      shadowDomContext: context || null,\n    });\n\n    setTimeout(() => {\n      if (content) content.focus();\n    }, 100);\n  };\n  const hide = () => {\n    body.style.overflow = 'visible';\n    body.style.height = 'inherit';\n    html.style.overflow = 'visible';\n    html.style.height = 'inherit';\n    container.style.display = 'none';\n\n    if (accessibiltyEventReference) accessibiltyEventReference();\n    if (eventReference)\n      eventReference.removeEventListener('click', () => hide());\n\n    setTimeout(() => {\n      if (context) {\n        const firstItem = context.querySelector('button, a') as HTMLElement;\n        firstItem?.focus();\n      }\n    }, 100);\n  };\n\n  background.classList.add(ELEMENT_CONTAINER_BACKGROUND);\n  if (content) background.appendChild(content);\n\n  container.classList.add(ELEMENT_CONTAINER);\n  container.appendChild(background);\n  if (isHidden) container.style.display = 'none';\n\n  return {\n    element: container,\n    styles: STYLES_MODAL,\n    events: {\n      show,\n      hide,\n    },\n  };\n};\n"],"names":[],"mappings":";;AAUA,MAAM,oBAAoB;AAC1B,MAAM,+BAA+B;AAE9B,MAAM,eAAe;AAAA,KACvB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAUjB,4BAA4B;AAAA;AAAA,eAElB,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAKvC,MAAM,MAAM,QAAQ,OAAO,GAAG;AAAA,OACnC,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAM5B,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,OAAO,SAAS;AACtB,QAAM,OAAO,SAAS;AACtB,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,MAAI,iBAAsB;AAC1B,MAAI,6BAAkC;AAEtC,QAAM,OAAO,MAAM;AACjB,cAAU,MAAM,UAAU;AAC1B,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,qBAAiB,UAAU,iBAAiB,SAAS,CAAC,UAAU;AAC9D,YAAM,SAAS,MAAM;AAErB,UAAI,WAAW,UAAW,MAAA;AAAA,IAC5B,CAAC;AAED,iCAA6B,UAAU;AAAA,MACrC,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,kBAAkB,WAAW;AAAA,IAAA,CAC9B;AAED,eAAW,MAAM;AACf,UAAI,iBAAiB,MAAA;AAAA,IACvB,GAAG,GAAG;AAAA,EACR;AACA,QAAM,OAAO,MAAM;AACjB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,cAAU,MAAM,UAAU;AAE1B,QAAI,2BAA4B,4BAAA;AAChC,QAAI;AACF,qBAAe,oBAAoB,SAAS,MAAM,KAAA,CAAM;AAE1D,eAAW,MAAM;AACf,UAAI,SAAS;AACX,cAAM,YAAY,QAAQ,cAAc,WAAW;AACnD,mBAAW,MAAA;AAAA,MACb;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AAEA,aAAW,UAAU,IAAI,4BAA4B;AACrD,MAAI,QAAS,YAAW,YAAY,OAAO;AAE3C,YAAU,UAAU,IAAI,iBAAiB;AACzC,YAAU,YAAY,UAAU;AAChC,MAAI,SAAU,WAAU,MAAM,UAAU;AAExC,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/atomic/layout/person/columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"columns.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/person/columns.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,4BAA4B,EACjC,KAAK,+BAA+B,EACpC,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAMtB,eAAO,MAAM,KAAK,GAAI,uCAInB;IACD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,KAAK,EAAE,gBAAgB,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;;;;CA6CG,CAAC;AAuBL,eAAO,MAAM,OAAO,GAAI,OAAO,+BAA+B;;;;CAY7D,CAAC;AAqBF,eAAO,MAAM,OAAO,GAAI,OAAO,4BAA4B;;;;CA0B1D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,yIAczB,eAAe;;;;CA4BjB,CAAC"}
+{"version":3,"file":"columns.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/person/columns.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,KAAK,4BAA4B,EACjC,KAAK,+BAA+B,EACpC,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAMtB,eAAO,MAAM,KAAK,GAAI,uCAInB;IACD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,KAAK,EAAE,gBAAgB,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;;;;CAyCG,CAAC;AAuBL,eAAO,MAAM,OAAO,GAAI,OAAO,+BAA+B;;;;CAY7D,CAAC;AAqBF,eAAO,MAAM,OAAO,GAAI,OAAO,4BAA4B;;;;CAsB1D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,yIAczB,eAAe;;;;CA4BjB,CAAC"}

package/dist/atomic/layout/person/columns.js

@@ -1,21 +1,31 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-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");
+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("../../animations/actions/indicator.js");
 require("../../animations/brand/chevron-scroll.js");
 require("../../animations/brand/card-stack.js");
 const background = require("../../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("../block/stacked.js");
 require("../overlay/modal.js");
 const contact$1 = require("../../text-lockup/contact.js");
 require("../../text-lockup/date.js");
 const person = require("../../text-lockup/person.js");
 require("../../text-lockup/small.js");
+require("@universityofmaryland/web-styles-library/typography");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -32,10 +42,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 image = ({
   customStyles,
   image: image2,
@@ -44,30 +54,26 @@ const image = ({
   className: "person-column-image",
   elementStyles: {
     element: {
-      ...media.createContainerQuery("max-width", smallBreakpoint, {
-        marginBottom: `${Styles__namespace.token.spacing.md}`,
-        backgroundColor: `${Styles__namespace.token.color.gray.lighter}`,
+      ...styles.createMediaQuery("max-width", smallBreakpoint, {
+        marginBottom: `${token__namespace.spacing.md}`,
+        backgroundColor: `${token__namespace.color.gray.lighter}`,
         display: "flex",
         justifyContent: "center",
         ...isThemeDark && {
-          ...media.createContainerQuery("max-width", smallBreakpoint, {
-            backgroundColor: `${Styles__namespace.token.color.gray.darker}`
+          ...styles.createMediaQuery("max-width", smallBreakpoint, {
+            backgroundColor: `${token__namespace.color.gray.darker}`
           })
         }
       }),
-      ...media.createContainerQuery(
-        "min-width",
-        mediumBreakpointStart,
-        {
-          display: "block",
-          width: "96px",
-          paddingRight: `${Styles__namespace.token.spacing.md}`,
-          alignSelf: "flex-start"
-        }
-      ),
+      ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
+        display: "block",
+        width: "96px",
+        paddingRight: `${token__namespace.spacing.md}`,
+        alignSelf: "flex-start"
+      }),
       ...customStyles,
       "& img, & svg": {
-        ...media.createContainerQuery("max-width", smallBreakpoint, {
+        ...styles.createMediaQuery("max-width", smallBreakpoint, {
           height: "auto !important",
           width: "140px"
         })
@@ -135,15 +141,11 @@ const contact = (props) => {
     className: "person-column-contact",
     elementStyles: {
       element: {
-        marginTop: `${Styles__namespace.token.spacing.sm}`,
-        ...media.createContainerQuery(
-          "min-width",
-          mediumBreakpointStart,
-          {
-            paddingLeft: `${Styles__namespace.token.spacing.md}`
-          }
-        ),
-        ...media.createContainerQuery("min-width", mediumBreakpoint, {
+        marginTop: `${token__namespace.spacing.sm}`,
+        ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
+          paddingLeft: `${token__namespace.spacing.md}`
+        }),
+        ...styles.createMediaQuery("min-width", mediumBreakpoint, {
           width: "30%"
         }),
         ...customStyles

package/dist/atomic/layout/person/columns.js.map

@@ -1 +1 @@
-{"version":3,"file":"columns.js","sources":["../../../../source/atomic/layout/person/columns.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport {\n  type PersonContactPropsWithStyles,\n  type PersonTextLockupPropsWithStyles,\n  type PersonFullProps,\n} 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 const image = ({\n  customStyles,\n  image,\n  isThemeDark,\n}: {\n  customStyles?: Record<string, any>;\n  image: HTMLImageElement;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createDiv({\n    className: 'person-column-image',\n    elementStyles: {\n      element: {\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          marginBottom: `${Styles.token.spacing.md}`,\n          backgroundColor: `${Styles.token.color.gray.lighter}`,\n          display: 'flex',\n          justifyContent: 'center',\n\n          ...(isThemeDark && {\n            ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n              backgroundColor: `${Styles.token.color.gray.darker}`,\n            }),\n          }),\n        }),\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'block',\n            width: '96px',\n            paddingRight: `${Styles.token.spacing.md}`,\n            alignSelf: 'flex-start',\n          },\n        ),\n\n        ...customStyles,\n\n        '& img, & svg': {\n          ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n            width: '140px',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    ],\n  });\n\nconst personLockup = ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupPropsWithStyles) =>\n  textLockup.person({\n    actions,\n    name,\n    nameComposite,\n    job,\n    association,\n    pronouns,\n    subText,\n    isThemeDark,\n  });\n\nexport const details = (props: PersonTextLockupPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  return ElementModel.createDiv({\n    className: 'person-column-details',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n        ...customStyles,\n      },\n    },\n    children: [personLockup(props)],\n  });\n};\n\nconst contactLockup = ({\n  actions,\n  additionalContact,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactPropsWithStyles) =>\n  textLockup.contact({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkendIn,\n    phone,\n  });\n\nexport const contact = (props: PersonContactPropsWithStyles) => {\n  const { customStyles = {} } = props;\n\n  return ElementModel.createDiv({\n    className: 'person-column-contact',\n    elementStyles: {\n      element: {\n        marginTop: `${Styles.token.spacing.sm}`,\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingLeft: `${Styles.token.spacing.md}`,\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '30%',\n        }),\n\n        ...customStyles,\n      },\n    },\n    children: [contactLockup(props)],\n  });\n};\n\nexport const information = ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  customStyles = {},\n  email,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonFullProps) => {\n  return ElementModel.createDiv({\n    className: 'person-column-information',\n    elementStyles: {\n      element: {\n        ...customStyles,\n      },\n    },\n    children: [\n      personLockup({\n        association,\n        isThemeDark,\n        job,\n        name,\n        pronouns,\n        subText,\n      }),\n      contactLockup({\n        actions,\n        additionalContact,\n        address,\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    ],\n  });\n};\n"],"names":["Styles","image","ElementModel.createDiv","theme.media.createContainerQuery","assets.image.background","textLockup.person","textLockup.contact"],"mappings":"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"}
+{"version":3,"file":"columns.js","sources":["../../../../source/atomic/layout/person/columns.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport {\n  createMediaQuery,\n  createMediaQueryRange,\n} from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport {\n  type PersonContactPropsWithStyles,\n  type PersonTextLockupPropsWithStyles,\n  type PersonFullProps,\n} 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 const image = ({\n  customStyles,\n  image,\n  isThemeDark,\n}: {\n  customStyles?: Record<string, any>;\n  image: HTMLImageElement;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createDiv({\n    className: 'person-column-image',\n    elementStyles: {\n      element: {\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          marginBottom: `${token.spacing.md}`,\n          backgroundColor: `${token.color.gray.lighter}`,\n          display: 'flex',\n          justifyContent: 'center',\n\n          ...(isThemeDark && {\n            ...createMediaQuery('max-width', smallBreakpoint, {\n              backgroundColor: `${token.color.gray.darker}`,\n            }),\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'block',\n          width: '96px',\n          paddingRight: `${token.spacing.md}`,\n          alignSelf: 'flex-start',\n        }),\n\n        ...customStyles,\n\n        '& img, & svg': {\n          ...createMediaQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n            width: '140px',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    ],\n  });\n\nconst personLockup = ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupPropsWithStyles) =>\n  textLockup.person({\n    actions,\n    name,\n    nameComposite,\n    job,\n    association,\n    pronouns,\n    subText,\n    isThemeDark,\n  });\n\nexport const details = (props: PersonTextLockupPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  return ElementModel.createDiv({\n    className: 'person-column-details',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n        ...customStyles,\n      },\n    },\n    children: [personLockup(props)],\n  });\n};\n\nconst contactLockup = ({\n  actions,\n  additionalContact,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactPropsWithStyles) =>\n  textLockup.contact({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkendIn,\n    phone,\n  });\n\nexport const contact = (props: PersonContactPropsWithStyles) => {\n  const { customStyles = {} } = props;\n\n  return ElementModel.createDiv({\n    className: 'person-column-contact',\n    elementStyles: {\n      element: {\n        marginTop: `${token.spacing.sm}`,\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingLeft: `${token.spacing.md}`,\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '30%',\n        }),\n\n        ...customStyles,\n      },\n    },\n    children: [contactLockup(props)],\n  });\n};\n\nexport const information = ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  customStyles = {},\n  email,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonFullProps) => {\n  return ElementModel.createDiv({\n    className: 'person-column-information',\n    elementStyles: {\n      element: {\n        ...customStyles,\n      },\n    },\n    children: [\n      personLockup({\n        association,\n        isThemeDark,\n        job,\n        name,\n        pronouns,\n        subText,\n      }),\n      contactLockup({\n        actions,\n        additionalContact,\n        address,\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    ],\n  });\n};\n"],"names":["token","image","ElementModel.createDiv","createMediaQuery","assets.image.background","textLockup.person","textLockup.contact"],"mappings":"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"}

package/dist/atomic/layout/person/columns.mjs

@@ -1,22 +1,32 @@
-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 "@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 { createDiv } from "../../../model/elements/index.mjs";
+import "@universityofmaryland/web-icons-library/arrows";
 import "../../animations/actions/indicator.mjs";
 import "../../animations/brand/chevron-scroll.mjs";
 import "../../animations/brand/card-stack.mjs";
 import imageContainer from "../../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 "../block/stacked.mjs";
 import "../overlay/modal.mjs";
 import contact$1 from "../../text-lockup/contact.mjs";
 import "../../text-lockup/date.mjs";
 import person from "../../text-lockup/person.mjs";
 import "../../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 image = ({
   customStyles,
   image: image2,
@@ -25,30 +35,26 @@ const image = ({
   className: "person-column-image",
   elementStyles: {
     element: {
-      ...createContainerQuery("max-width", smallBreakpoint, {
-        marginBottom: `${Styles.token.spacing.md}`,
-        backgroundColor: `${Styles.token.color.gray.lighter}`,
+      ...createMediaQuery("max-width", smallBreakpoint, {
+        marginBottom: `${token.spacing.md}`,
+        backgroundColor: `${token.color.gray.lighter}`,
         display: "flex",
         justifyContent: "center",
         ...isThemeDark && {
-          ...createContainerQuery("max-width", smallBreakpoint, {
-            backgroundColor: `${Styles.token.color.gray.darker}`
+          ...createMediaQuery("max-width", smallBreakpoint, {
+            backgroundColor: `${token.color.gray.darker}`
           })
         }
       }),
-      ...createContainerQuery(
-        "min-width",
-        mediumBreakpointStart,
-        {
-          display: "block",
-          width: "96px",
-          paddingRight: `${Styles.token.spacing.md}`,
-          alignSelf: "flex-start"
-        }
-      ),
+      ...createMediaQuery("min-width", mediumBreakpointStart, {
+        display: "block",
+        width: "96px",
+        paddingRight: `${token.spacing.md}`,
+        alignSelf: "flex-start"
+      }),
       ...customStyles,
       "& img, & svg": {
-        ...createContainerQuery("max-width", smallBreakpoint, {
+        ...createMediaQuery("max-width", smallBreakpoint, {
           height: "auto !important",
           width: "140px"
         })
@@ -116,15 +122,11 @@ const contact = (props) => {
     className: "person-column-contact",
     elementStyles: {
       element: {
-        marginTop: `${Styles.token.spacing.sm}`,
-        ...createContainerQuery(
-          "min-width",
-          mediumBreakpointStart,
-          {
-            paddingLeft: `${Styles.token.spacing.md}`
-          }
-        ),
-        ...createContainerQuery("min-width", mediumBreakpoint, {
+        marginTop: `${token.spacing.sm}`,
+        ...createMediaQuery("min-width", mediumBreakpointStart, {
+          paddingLeft: `${token.spacing.md}`
+        }),
+        ...createMediaQuery("min-width", mediumBreakpoint, {
           width: "30%"
         }),
         ...customStyles

package/dist/atomic/layout/person/columns.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"columns.mjs","sources":["../../../../source/atomic/layout/person/columns.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport {\n  type PersonContactPropsWithStyles,\n  type PersonTextLockupPropsWithStyles,\n  type PersonFullProps,\n} 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 const image = ({\n  customStyles,\n  image,\n  isThemeDark,\n}: {\n  customStyles?: Record<string, any>;\n  image: HTMLImageElement;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createDiv({\n    className: 'person-column-image',\n    elementStyles: {\n      element: {\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          marginBottom: `${Styles.token.spacing.md}`,\n          backgroundColor: `${Styles.token.color.gray.lighter}`,\n          display: 'flex',\n          justifyContent: 'center',\n\n          ...(isThemeDark && {\n            ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n              backgroundColor: `${Styles.token.color.gray.darker}`,\n            }),\n          }),\n        }),\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'block',\n            width: '96px',\n            paddingRight: `${Styles.token.spacing.md}`,\n            alignSelf: 'flex-start',\n          },\n        ),\n\n        ...customStyles,\n\n        '& img, & svg': {\n          ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n            width: '140px',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    ],\n  });\n\nconst personLockup = ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupPropsWithStyles) =>\n  textLockup.person({\n    actions,\n    name,\n    nameComposite,\n    job,\n    association,\n    pronouns,\n    subText,\n    isThemeDark,\n  });\n\nexport const details = (props: PersonTextLockupPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  return ElementModel.createDiv({\n    className: 'person-column-details',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n        ...customStyles,\n      },\n    },\n    children: [personLockup(props)],\n  });\n};\n\nconst contactLockup = ({\n  actions,\n  additionalContact,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactPropsWithStyles) =>\n  textLockup.contact({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkendIn,\n    phone,\n  });\n\nexport const contact = (props: PersonContactPropsWithStyles) => {\n  const { customStyles = {} } = props;\n\n  return ElementModel.createDiv({\n    className: 'person-column-contact',\n    elementStyles: {\n      element: {\n        marginTop: `${Styles.token.spacing.sm}`,\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingLeft: `${Styles.token.spacing.md}`,\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '30%',\n        }),\n\n        ...customStyles,\n      },\n    },\n    children: [contactLockup(props)],\n  });\n};\n\nexport const information = ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  customStyles = {},\n  email,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonFullProps) => {\n  return ElementModel.createDiv({\n    className: 'person-column-information',\n    elementStyles: {\n      element: {\n        ...customStyles,\n      },\n    },\n    children: [\n      personLockup({\n        association,\n        isThemeDark,\n        job,\n        name,\n        pronouns,\n        subText,\n      }),\n      contactLockup({\n        actions,\n        additionalContact,\n        address,\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    ],\n  });\n};\n"],"names":["image","ElementModel.createDiv","theme.media.createContainerQuery","assets.image.background","textLockup.person","textLockup.contact"],"mappings":"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"}
+{"version":3,"file":"columns.mjs","sources":["../../../../source/atomic/layout/person/columns.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport {\n  createMediaQuery,\n  createMediaQueryRange,\n} from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport {\n  type PersonContactPropsWithStyles,\n  type PersonTextLockupPropsWithStyles,\n  type PersonFullProps,\n} 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 const image = ({\n  customStyles,\n  image,\n  isThemeDark,\n}: {\n  customStyles?: Record<string, any>;\n  image: HTMLImageElement;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createDiv({\n    className: 'person-column-image',\n    elementStyles: {\n      element: {\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          marginBottom: `${token.spacing.md}`,\n          backgroundColor: `${token.color.gray.lighter}`,\n          display: 'flex',\n          justifyContent: 'center',\n\n          ...(isThemeDark && {\n            ...createMediaQuery('max-width', smallBreakpoint, {\n              backgroundColor: `${token.color.gray.darker}`,\n            }),\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'block',\n          width: '96px',\n          paddingRight: `${token.spacing.md}`,\n          alignSelf: 'flex-start',\n        }),\n\n        ...customStyles,\n\n        '& img, & svg': {\n          ...createMediaQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n            width: '140px',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    ],\n  });\n\nconst personLockup = ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupPropsWithStyles) =>\n  textLockup.person({\n    actions,\n    name,\n    nameComposite,\n    job,\n    association,\n    pronouns,\n    subText,\n    isThemeDark,\n  });\n\nexport const details = (props: PersonTextLockupPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  return ElementModel.createDiv({\n    className: 'person-column-details',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n        ...customStyles,\n      },\n    },\n    children: [personLockup(props)],\n  });\n};\n\nconst contactLockup = ({\n  actions,\n  additionalContact,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactPropsWithStyles) =>\n  textLockup.contact({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkendIn,\n    phone,\n  });\n\nexport const contact = (props: PersonContactPropsWithStyles) => {\n  const { customStyles = {} } = props;\n\n  return ElementModel.createDiv({\n    className: 'person-column-contact',\n    elementStyles: {\n      element: {\n        marginTop: `${token.spacing.sm}`,\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingLeft: `${token.spacing.md}`,\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '30%',\n        }),\n\n        ...customStyles,\n      },\n    },\n    children: [contactLockup(props)],\n  });\n};\n\nexport const information = ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  customStyles = {},\n  email,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonFullProps) => {\n  return ElementModel.createDiv({\n    className: 'person-column-information',\n    elementStyles: {\n      element: {\n        ...customStyles,\n      },\n    },\n    children: [\n      personLockup({\n        association,\n        isThemeDark,\n        job,\n        name,\n        pronouns,\n        subText,\n      }),\n      contactLockup({\n        actions,\n        additionalContact,\n        address,\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    ],\n  });\n};\n"],"names":["image","ElementModel.createDiv","assets.image.background","textLockup.person","textLockup.contact"],"mappings":"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"}

package/dist/atomic/text/stat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat.d.ts","sourceRoot":"","sources":["../../../source/atomic/text/stat.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,WAAW,SAAS;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;yBAuMe,OAAO,SAAS,KAAG,aAAa;AAAhD,wBAYE"}
+{"version":3,"file":"stat.d.ts","sourceRoot":"","sources":["../../../source/atomic/text/stat.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,WAAW,SAAS;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;yBAuMe,OAAO,SAAS,KAAG,aAAa;AAAhD,wBAYE"}

package/dist/atomic/text/stat.js

@@ -1,7 +1,25 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
+const token = require("@universityofmaryland/web-styles-library/token");
+const typography = require("@universityofmaryland/web-styles-library/typography");
 const index = require("../../model/elements/index.js");
 const richText = require("../../model/elements/rich-text.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 BLOCK_TEXTURE = `<svg id="stat_block-texture" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" ><defs><style>.cls-1{opacity:.02;}.cls-1,.cls-2{fill:#454545;fill-rule:evenodd;isolation:isolate;stroke-width:0px;}.cls-2{opacity:.04;}</style></defs><path class="cls-1" d="M109.49,0H0v63.18l181.67,182.32L0,427.82v63.18h109.49l244.61-245.5L109.49,0Z"/><path class="cls-2" d="M108.94,0h172.44l244.61,245.5-244.61,245.5H108.94l244.61-245.5L108.94,0ZM0,179.11l58.16-58.29L0,62.54v116.57Z"/></svg>`;
 const createStat = (props) => {
   const { stat: statElement, isThemeDark, isSizeLarge } = props;
@@ -17,20 +35,20 @@ const createStat = (props) => {
     element: statElement,
     className: "stat-display",
     elementStyles: {
-      siblingAfter: { marginTop: Styles.token.spacing.min },
+      siblingAfter: { marginTop: token__namespace.spacing.min },
       element: {
-        ...Styles.typography.stats.medium,
-        color: Styles.token.color.red,
+        ...typography.stats.medium,
+        color: token__namespace.color.red,
         WebkitFontSmoothing: "antialiased",
-        ...isThemeDark && { color: Styles.token.color.gold },
-        ...isSizeLarge && { ...Styles.typography.stats.large },
+        ...isThemeDark && { color: token__namespace.color.gold },
+        ...isSizeLarge && { ...typography.stats.large },
         [`& *`]: {
-          ...Styles.typography.stats.medium,
+          ...typography.stats.medium,
           color: "currentColor",
           WebkitFontSmoothing: "antialiased",
-          ...isSizeLarge && Styles.typography.stats.large
+          ...isSizeLarge && typography.stats.large
         },
-        [`& + *`]: { marginTop: Styles.token.spacing.min }
+        [`& + *`]: { marginTop: token__namespace.spacing.min }
       }
     }
   });
@@ -43,15 +61,15 @@ const createSubtext = (props) => {
     className: "stat-sub-text",
     elementStyles: {
       element: {
-        ...Styles.typography.sans.min,
-        marginTop: Styles.token.spacing.min,
-        color: Styles.token.color.gray.mediumAA,
-        ...isSizeLarge && Styles.typography.sans.small,
-        ...isThemeDark && { color: Styles.token.color.gray.light },
+        ...typography.sans.min,
+        marginTop: token__namespace.spacing.min,
+        color: token__namespace.color.gray.mediumAA,
+        ...isSizeLarge && typography.sans.small,
+        ...isThemeDark && { color: token__namespace.color.gray.light },
         ["& *"]: {
-          ...Styles.typography.sans.min,
+          ...typography.sans.min,
           color: "currentColor",
-          ...isSizeLarge && Styles.typography.sans.small
+          ...isSizeLarge && typography.sans.small
         }
       }
     }
@@ -65,7 +83,7 @@ const createText = (props) => {
       element: text,
       isThemeDark,
       elementStyles: {
-        siblingAfter: { marginTop: Styles.token.spacing.md }
+        siblingAfter: { marginTop: token__namespace.spacing.md }
       }
     });
   }
@@ -73,7 +91,7 @@ const createText = (props) => {
     element: text,
     isThemeDark,
     elementStyles: {
-      siblingAfter: { marginTop: Styles.token.spacing.min }
+      siblingAfter: { marginTop: token__namespace.spacing.min }
     }
   });
 };
@@ -93,14 +111,14 @@ const createWrapper = (props) => {
         maxWidth: "720px",
         position: "relative",
         ...hasLine && {
-          paddingLeft: Styles.token.spacing.md,
-          borderLeft: `2px solid ${Styles.token.color.gold}`,
+          paddingLeft: token__namespace.spacing.md,
+          borderLeft: `2px solid ${token__namespace.color.gold}`,
           [`@container umd-element-stat (min-width: 400px)`]: {
-            paddingLeft: Styles.token.spacing.xl
+            paddingLeft: token__namespace.spacing.xl
           }
         },
         ...isThemeDark && {
-          [`& .stat-sub-text`]: { color: Styles.token.color.gray.light }
+          [`& .stat-sub-text`]: { color: token__namespace.color.gray.light }
         }
       }
     }
@@ -114,19 +132,19 @@ const createDisplayBlock = (props) => {
     children: [wrapperElement],
     elementStyles: {
       element: {
-        padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.sm}`,
-        borderTop: `2px solid ${Styles.token.color.red}`,
-        backgroundColor: `${Styles.token.color.gray.lightest}`,
+        padding: `${token__namespace.spacing.lg} ${token__namespace.spacing.sm}`,
+        borderTop: `2px solid ${token__namespace.color.red}`,
+        backgroundColor: `${token__namespace.color.gray.lightest}`,
         position: "relative",
         overflow: "hidden",
         height: `100%`,
         display: `flex`,
         alignItems: `center`,
-        [`@media (min-width: ${Styles.token.media.breakpoints.large.min})`]: {
-          padding: Styles.token.spacing.lg
+        [`@media (min-width: ${token__namespace.media.breakpoints.large.min})`]: {
+          padding: token__namespace.spacing.lg
         },
-        [`@media (min-width: ${Styles.token.media.breakpoints.highDef.min})`]: {
-          padding: `${Styles.token.spacing["2xl"]} ${Styles.token.spacing["3xl"]}`
+        [`@media (min-width: ${token__namespace.media.breakpoints.highDef.min})`]: {
+          padding: `${token__namespace.spacing["2xl"]} ${token__namespace.spacing["3xl"]}`
         },
         [`& > svg`]: {
           position: "absolute",

package/dist/atomic/text/stat.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat.js","sources":["../../../source/atomic/text/stat.ts"],"sourcesContent":["import Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\n\nexport interface StatProps {\n  isThemeDark: boolean;\n  isDisplayBlock: boolean;\n  isSizeLarge: boolean;\n  hasLine: boolean;\n  stat?: HTMLElement;\n  text?: HTMLElement;\n  subText?: HTMLElement;\n}\n\nconst BLOCK_TEXTURE = `<svg id=\"stat_block-texture\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" ><defs><style>.cls-1{opacity:.02;}.cls-1,.cls-2{fill:#454545;fill-rule:evenodd;isolation:isolate;stroke-width:0px;}.cls-2{opacity:.04;}</style></defs><path class=\"cls-1\" d=\"M109.49,0H0v63.18l181.67,182.32L0,427.82v63.18h109.49l244.61-245.5L109.49,0Z\"/><path class=\"cls-2\" d=\"M108.94,0h172.44l244.61,245.5-244.61,245.5H108.94l244.61-245.5L108.94,0ZM0,179.11l58.16-58.29L0,62.54v116.57Z\"/></svg>`;\n\nconst createStat = (\n  props: Pick<StatProps, 'stat' | 'isThemeDark' | 'isSizeLarge'>,\n) => {\n  const { stat: statElement, isThemeDark, isSizeLarge } = props;\n  if (!statElement) return;\n\n  let rawText = statElement.textContent;\n  if (!rawText) return;\n\n  rawText = rawText.trim();\n  if (rawText.length > 6) {\n    console.error('Stat text is too long. Please limit to 6 characters.');\n    statElement.textContent = rawText.slice(0, 6);\n  }\n\n  return ElementModel.create({\n    element: statElement,\n    className: 'stat-display',\n    elementStyles: {\n      siblingAfter: { marginTop: Styles.token.spacing.min },\n\n      element: {\n        ...Styles.typography.stats.medium,\n        color: Styles.token.color.red,\n        WebkitFontSmoothing: 'antialiased',\n\n        ...(isThemeDark && { color: Styles.token.color.gold }),\n        ...(isSizeLarge && { ...Styles.typography.stats.large }),\n\n        [`& *`]: {\n          ...Styles.typography.stats.medium,\n          color: 'currentColor',\n          WebkitFontSmoothing: 'antialiased',\n\n          ...(isSizeLarge && Styles.typography.stats.large),\n        },\n\n        [`& + *`]: { marginTop: Styles.token.spacing.min },\n      },\n    },\n  });\n};\n\nconst createSubtext = (\n  props: Pick<StatProps, 'subText' | 'isThemeDark' | 'isSizeLarge'>,\n) => {\n  const { subText, isThemeDark, isSizeLarge } = props;\n  if (!subText) return;\n\n  return ElementModel.create({\n    element: subText,\n    className: 'stat-sub-text',\n    elementStyles: {\n      element: {\n        ...Styles.typography.sans.min,\n        marginTop: Styles.token.spacing.min,\n        color: Styles.token.color.gray.mediumAA,\n\n        ...(isSizeLarge && Styles.typography.sans.small),\n        ...(isThemeDark && { color: Styles.token.color.gray.light }),\n\n        ['& *']: {\n          ...Styles.typography.sans.min,\n          color: 'currentColor',\n\n          ...(isSizeLarge && Styles.typography.sans.small),\n        },\n      },\n    },\n  });\n};\n\nconst createText = (\n  props: Pick<StatProps, 'text' | 'isThemeDark' | 'isSizeLarge'>,\n) => {\n  const { text, isThemeDark, isSizeLarge } = props;\n  if (!text) return;\n\n  if (isSizeLarge) {\n    return ElementModel.richText.simpleLargest({\n      element: text,\n      isThemeDark,\n      elementStyles: {\n        siblingAfter: { marginTop: Styles.token.spacing.md },\n      },\n    });\n  }\n\n  return ElementModel.richText.simpleLarge({\n    element: text,\n    isThemeDark,\n    elementStyles: {\n      siblingAfter: { marginTop: Styles.token.spacing.min },\n    },\n  });\n};\n\nconst createWrapper = (\n  props: Pick<\n    StatProps,\n    'isThemeDark' | 'hasLine' | 'isSizeLarge' | 'stat' | 'text' | 'subText'\n  >,\n) => {\n  const { isThemeDark, hasLine, isSizeLarge, stat, text, subText } = props;\n\n  const subTextElement = createSubtext({ subText, isThemeDark, isSizeLarge });\n  const textElement = createText({ text, isThemeDark, isSizeLarge });\n  const statElement = createStat({ stat, isThemeDark, isSizeLarge });\n\n  const childElements = [statElement, textElement, subTextElement].filter(\n    Boolean,\n  ) as ElementVisual[];\n\n  return ElementModel.createDiv({\n    className: 'stat-wrapper',\n    children: childElements,\n    elementStyles: {\n      element: {\n        maxWidth: '720px',\n        position: 'relative',\n\n        ...(hasLine && {\n          paddingLeft: Styles.token.spacing.md,\n          borderLeft: `2px solid ${Styles.token.color.gold}`,\n\n          [`@container umd-element-stat (min-width: 400px)`]: {\n            paddingLeft: Styles.token.spacing.xl,\n          },\n        }),\n\n        ...(isThemeDark && {\n          [`& .stat-sub-text`]: { color: Styles.token.color.gray.light },\n        }),\n      },\n    },\n  });\n};\n\nconst createDisplayBlock = (\n  props: Pick<StatProps, 'isDisplayBlock'> & { wrapperElement: ElementVisual },\n) => {\n  const { isDisplayBlock, wrapperElement } = props;\n  if (!isDisplayBlock) return null;\n\n  const block = ElementModel.createDiv({\n    className: 'stat-display-block',\n    children: [wrapperElement],\n    elementStyles: {\n      element: {\n        padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.sm}`,\n        borderTop: `2px solid ${Styles.token.color.red}`,\n        backgroundColor: `${Styles.token.color.gray.lightest}`,\n        position: 'relative',\n        overflow: 'hidden',\n        height: `100%`,\n        display: `flex`,\n        alignItems: `center`,\n\n        [`@media (min-width: ${Styles.token.media.breakpoints.large.min})`]: {\n          padding: Styles.token.spacing.lg,\n        },\n\n        [`@media (min-width: ${Styles.token.media.breakpoints.highDef.min})`]: {\n          padding: `${Styles.token.spacing['2xl']} ${Styles.token.spacing['3xl']}`,\n        },\n\n        [`& > svg`]: {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n        },\n      },\n    },\n  });\n\n  block.element.insertAdjacentHTML('afterbegin', BLOCK_TEXTURE);\n\n  return block;\n};\n\nconst createContainer = (containerChild: ElementVisual) => {\n  return ElementModel.createDiv({\n    className: 'stat-container',\n    children: [containerChild],\n    elementStyles: {\n      element: {\n        container: `umd-element-stat / inline-size`,\n        height: `inherit`,\n      },\n    },\n  });\n};\n\nexport default (props: StatProps): ElementVisual => {\n  const wrapperElement = createWrapper(props);\n  const blockElement = createDisplayBlock({\n    isDisplayBlock: props.isDisplayBlock,\n    wrapperElement,\n  });\n\n  if (props.isDisplayBlock) {\n    return createContainer(blockElement as ElementVisual);\n  } else {\n    return createContainer(wrapperElement as ElementVisual);\n  }\n};\n"],"names":["ElementModel.create","ElementModel.richText.simpleLargest","ElementModel.richText.simpleLarge","stat","ElementModel.createDiv"],"mappings":"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"}
+{"version":3,"file":"stat.js","sources":["../../../source/atomic/text/stat.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport {\n  stats as statsFont,\n  sans as sansFonts,\n} from '@universityofmaryland/web-styles-library/typography';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\n\nexport interface StatProps {\n  isThemeDark: boolean;\n  isDisplayBlock: boolean;\n  isSizeLarge: boolean;\n  hasLine: boolean;\n  stat?: HTMLElement;\n  text?: HTMLElement;\n  subText?: HTMLElement;\n}\n\nconst BLOCK_TEXTURE = `<svg id=\"stat_block-texture\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" ><defs><style>.cls-1{opacity:.02;}.cls-1,.cls-2{fill:#454545;fill-rule:evenodd;isolation:isolate;stroke-width:0px;}.cls-2{opacity:.04;}</style></defs><path class=\"cls-1\" d=\"M109.49,0H0v63.18l181.67,182.32L0,427.82v63.18h109.49l244.61-245.5L109.49,0Z\"/><path class=\"cls-2\" d=\"M108.94,0h172.44l244.61,245.5-244.61,245.5H108.94l244.61-245.5L108.94,0ZM0,179.11l58.16-58.29L0,62.54v116.57Z\"/></svg>`;\n\nconst createStat = (\n  props: Pick<StatProps, 'stat' | 'isThemeDark' | 'isSizeLarge'>,\n) => {\n  const { stat: statElement, isThemeDark, isSizeLarge } = props;\n  if (!statElement) return;\n\n  let rawText = statElement.textContent;\n  if (!rawText) return;\n\n  rawText = rawText.trim();\n  if (rawText.length > 6) {\n    console.error('Stat text is too long. Please limit to 6 characters.');\n    statElement.textContent = rawText.slice(0, 6);\n  }\n\n  return ElementModel.create({\n    element: statElement,\n    className: 'stat-display',\n    elementStyles: {\n      siblingAfter: { marginTop: token.spacing.min },\n\n      element: {\n        ...statsFont.medium,\n        color: token.color.red,\n        WebkitFontSmoothing: 'antialiased',\n\n        ...(isThemeDark && { color: token.color.gold }),\n        ...(isSizeLarge && { ...statsFont.large }),\n\n        [`& *`]: {\n          ...statsFont.medium,\n          color: 'currentColor',\n          WebkitFontSmoothing: 'antialiased',\n\n          ...(isSizeLarge && statsFont.large),\n        },\n\n        [`& + *`]: { marginTop: token.spacing.min },\n      },\n    },\n  });\n};\n\nconst createSubtext = (\n  props: Pick<StatProps, 'subText' | 'isThemeDark' | 'isSizeLarge'>,\n) => {\n  const { subText, isThemeDark, isSizeLarge } = props;\n  if (!subText) return;\n\n  return ElementModel.create({\n    element: subText,\n    className: 'stat-sub-text',\n    elementStyles: {\n      element: {\n        ...sansFonts.min,\n        marginTop: token.spacing.min,\n        color: token.color.gray.mediumAA,\n\n        ...(isSizeLarge && sansFonts.small),\n        ...(isThemeDark && { color: token.color.gray.light }),\n\n        ['& *']: {\n          ...sansFonts.min,\n          color: 'currentColor',\n\n          ...(isSizeLarge && sansFonts.small),\n        },\n      },\n    },\n  });\n};\n\nconst createText = (\n  props: Pick<StatProps, 'text' | 'isThemeDark' | 'isSizeLarge'>,\n) => {\n  const { text, isThemeDark, isSizeLarge } = props;\n  if (!text) return;\n\n  if (isSizeLarge) {\n    return ElementModel.richText.simpleLargest({\n      element: text,\n      isThemeDark,\n      elementStyles: {\n        siblingAfter: { marginTop: token.spacing.md },\n      },\n    });\n  }\n\n  return ElementModel.richText.simpleLarge({\n    element: text,\n    isThemeDark,\n    elementStyles: {\n      siblingAfter: { marginTop: token.spacing.min },\n    },\n  });\n};\n\nconst createWrapper = (\n  props: Pick<\n    StatProps,\n    'isThemeDark' | 'hasLine' | 'isSizeLarge' | 'stat' | 'text' | 'subText'\n  >,\n) => {\n  const { isThemeDark, hasLine, isSizeLarge, stat, text, subText } = props;\n\n  const subTextElement = createSubtext({ subText, isThemeDark, isSizeLarge });\n  const textElement = createText({ text, isThemeDark, isSizeLarge });\n  const statElement = createStat({ stat, isThemeDark, isSizeLarge });\n\n  const childElements = [statElement, textElement, subTextElement].filter(\n    Boolean,\n  ) as ElementVisual[];\n\n  return ElementModel.createDiv({\n    className: 'stat-wrapper',\n    children: childElements,\n    elementStyles: {\n      element: {\n        maxWidth: '720px',\n        position: 'relative',\n\n        ...(hasLine && {\n          paddingLeft: token.spacing.md,\n          borderLeft: `2px solid ${token.color.gold}`,\n\n          [`@container umd-element-stat (min-width: 400px)`]: {\n            paddingLeft: token.spacing.xl,\n          },\n        }),\n\n        ...(isThemeDark && {\n          [`& .stat-sub-text`]: { color: token.color.gray.light },\n        }),\n      },\n    },\n  });\n};\n\nconst createDisplayBlock = (\n  props: Pick<StatProps, 'isDisplayBlock'> & { wrapperElement: ElementVisual },\n) => {\n  const { isDisplayBlock, wrapperElement } = props;\n  if (!isDisplayBlock) return null;\n\n  const block = ElementModel.createDiv({\n    className: 'stat-display-block',\n    children: [wrapperElement],\n    elementStyles: {\n      element: {\n        padding: `${token.spacing.lg} ${token.spacing.sm}`,\n        borderTop: `2px solid ${token.color.red}`,\n        backgroundColor: `${token.color.gray.lightest}`,\n        position: 'relative',\n        overflow: 'hidden',\n        height: `100%`,\n        display: `flex`,\n        alignItems: `center`,\n\n        [`@media (min-width: ${token.media.breakpoints.large.min})`]: {\n          padding: token.spacing.lg,\n        },\n\n        [`@media (min-width: ${token.media.breakpoints.highDef.min})`]: {\n          padding: `${token.spacing['2xl']} ${token.spacing['3xl']}`,\n        },\n\n        [`& > svg`]: {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n        },\n      },\n    },\n  });\n\n  block.element.insertAdjacentHTML('afterbegin', BLOCK_TEXTURE);\n\n  return block;\n};\n\nconst createContainer = (containerChild: ElementVisual) => {\n  return ElementModel.createDiv({\n    className: 'stat-container',\n    children: [containerChild],\n    elementStyles: {\n      element: {\n        container: `umd-element-stat / inline-size`,\n        height: `inherit`,\n      },\n    },\n  });\n};\n\nexport default (props: StatProps): ElementVisual => {\n  const wrapperElement = createWrapper(props);\n  const blockElement = createDisplayBlock({\n    isDisplayBlock: props.isDisplayBlock,\n    wrapperElement,\n  });\n\n  if (props.isDisplayBlock) {\n    return createContainer(blockElement as ElementVisual);\n  } else {\n    return createContainer(wrapperElement as ElementVisual);\n  }\n};\n"],"names":["ElementModel.create","token","statsFont","sansFonts","ElementModel.richText.simpleLargest","ElementModel.richText.simpleLarge","stat","ElementModel.createDiv"],"mappings":"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"}