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

package/dist/composite/banner/promo.mjs

@@ -1,6 +1,6 @@
 import { token, element, animation, typography } from "@universityofmaryland/web-styles-library";
-import { SEAL_WHITE } from "../../utilities/assets/logos.mjs";
-import { convertJSSObjectToStyles } from "../../utilities/theme/index.mjs";
+import { seal } from "@universityofmaryland/web-icons-library/logos";
+import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
 const SMALL = 650;
 const ATTRIBUTE_THEME = "theme";
 const THEME_DARK = "dark";
@@ -29,7 +29,7 @@ const OverwriteThemeDark = `
     color: ${token.color.white};
   }
 
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: element.text.rich.advancedDark
   }
@@ -54,13 +54,13 @@ const ActionsStyles = `
   }
 `;
 const TextStyles = `
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`.${ELEMENT_RICH_TEXT}`]: element.text.rich.advanced
   }
 })}
 
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`.${ELEMENT_RICH_TEXT} a`]: animation.line.fadeUnderRed
   }
@@ -75,7 +75,7 @@ const TextStyles = `
   }
 `;
 const HeadlineStyles = `
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`.${ELEMENT_HEADLINE}`]: typography.sans.extraLarge
   }
@@ -174,7 +174,6 @@ const CreateBannerPromoElement = (props) => (() => {
     wrapper.appendChild(actions);
   }
   if (includeSeal) {
-    let seal = SEAL_WHITE;
     container.innerHTML = `${seal}`;
   }
   if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);

package/dist/composite/banner/promo.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"promo.mjs","sources":["../../../source/composite/banner/promo.ts"],"sourcesContent":["import {\n  animation,\n  element,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\ntype TypeBannerPromoProps = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n  includeSeal?: boolean;\n};\n\nconst SMALL = 650;\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-banner-promo';\nconst ELEMENT_DECLARATION = 'banner-promo-declaration';\nconst ELEMENT_CONTAINER = 'banner-promo-container';\nconst ELEMENT_WRAPPER = 'banner-promo-wrapper';\nconst ELEMENT_TEXT_CONTAINER = 'banner-promo-text-container';\nconst ELEMENT_HEADLINE = 'banner-promo-headline';\nconst ELEMENT_RICH_TEXT = 'banner-promo-rich-text';\nconst ELEMENT_ACTIONS = 'banner-promo-actions';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_RICH_TEXT = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_RICH_TEXT}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_CONTAINER} > svg {\n    fill: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE} {\n    color: ${token.color.white};\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n\n  ${OVERWRITE_THEME_DARK_RICH_TEXT} * {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst ActionsStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n    .${ELEMENT_ACTIONS} {\n      margin-top: ${token.spacing.sm};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_ACTIONS} {\n      max-width: 30%;\n      margin-left: ${token.spacing.md};\n    }\n  }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_RICH_TEXT}`]: element.text.rich.advanced,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_RICH_TEXT} a`]: animation.line.fadeUnderRed,\n    },\n  })}\n\n  .${ELEMENT_RICH_TEXT} {\n    margin-top: ${token.spacing.min};\n  }\n\n  .${ELEMENT_RICH_TEXT} * {\n    color: ${token.color.black};\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_HEADLINE}`]: typography.sans.extraLarge,\n    },\n  })}\n\n  .${ELEMENT_HEADLINE} {\n    text-transform: uppercase;\n    color: ${token.color.black};\n    font-weight: 800;\n  }\n`;\n\n// prettier-ignore\nconst TextContainerStyles = `\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_TEXT_CONTAINER} {\n      width: 70%;\n    }\n  }\n`;\n\n// prettier-ignore\nconst WrapperStyles = `\n  .${ELEMENT_WRAPPER} {\n    z-index: 9;\n    position: relative;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_WRAPPER} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n  }\n`;\n\nconst STYLES_BANNER_PROMO_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    overflow: hidden;\n    position: relative;\n  }\n\n  .${ELEMENT_CONTAINER} {\n    padding: ${token.spacing.lg} ${token.spacing.lg};\n    background-color: ${token.color.gold};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_CONTAINER} {\n      padding: ${token.spacing.xl};\n    }\n  }\n\n  .${ELEMENT_CONTAINER} > svg {\n    position: absolute;\n    right: -50px;\n    top: -40px;\n    height: 231px;\n    width: 234px;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n    .${ELEMENT_CONTAINER} > svg {\n      display: none;\n    }\n  }\n\n  ${WrapperStyles}\n  ${TextContainerStyles}\n  ${HeadlineStyles}\n  ${TextStyles}\n  ${ActionsStyles}\n  ${OverwriteThemeDark}\n`;\n\nconst CreateTextContainer = (props: TypeBannerPromoProps) => {\n  const { headline, text } = props;\n  const container = document.createElement('div');\n\n  container.classList.add(ELEMENT_TEXT_CONTAINER);\n\n  if (headline) {\n    headline.classList.add(ELEMENT_HEADLINE);\n    container.appendChild(headline);\n  }\n\n  if (text) {\n    text.classList.add(ELEMENT_RICH_TEXT);\n    container.appendChild(text);\n  }\n\n  return container;\n};\n\nconst CreateBannerPromoElement = (props: TypeBannerPromoProps) =>\n  (() => {\n    const { isThemeDark, includeSeal = false, actions } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n    const textContainer = CreateTextContainer(props);\n\n    wrapper.classList.add(ELEMENT_WRAPPER);\n    wrapper.appendChild(textContainer);\n\n    if (actions) {\n      actions.classList.add(ELEMENT_ACTIONS);\n      wrapper.appendChild(actions);\n    }\n\n    if (includeSeal) {\n      let seal = Utility.asset.logo.SEAL_WHITE;\n\n      container.innerHTML = `${seal}`;\n    }\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n    container.classList.add(ELEMENT_CONTAINER);\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    return {\n      element: declaration,\n      styles: STYLES_BANNER_PROMO_ELEMENT,\n    };\n  })();\n\nexport default CreateBannerPromoElement;\n"],"names":["Utility.theme.convertJSSObjectToStyles","Utility.asset.logo.SEAL_WHITE"],"mappings":"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"}
+{"version":3,"file":"promo.mjs","sources":["../../../source/composite/banner/promo.ts"],"sourcesContent":["import {\n  animation,\n  element,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { seal } from '@universityofmaryland/web-icons-library/logos';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\n\ntype TypeBannerPromoProps = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n  includeSeal?: boolean;\n};\n\nconst SMALL = 650;\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-banner-promo';\nconst ELEMENT_DECLARATION = 'banner-promo-declaration';\nconst ELEMENT_CONTAINER = 'banner-promo-container';\nconst ELEMENT_WRAPPER = 'banner-promo-wrapper';\nconst ELEMENT_TEXT_CONTAINER = 'banner-promo-text-container';\nconst ELEMENT_HEADLINE = 'banner-promo-headline';\nconst ELEMENT_RICH_TEXT = 'banner-promo-rich-text';\nconst ELEMENT_ACTIONS = 'banner-promo-actions';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_RICH_TEXT = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_RICH_TEXT}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_CONTAINER} > svg {\n    fill: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE} {\n    color: ${token.color.white};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n\n  ${OVERWRITE_THEME_DARK_RICH_TEXT} * {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst ActionsStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n    .${ELEMENT_ACTIONS} {\n      margin-top: ${token.spacing.sm};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_ACTIONS} {\n      max-width: 30%;\n      margin-left: ${token.spacing.md};\n    }\n  }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_RICH_TEXT}`]: element.text.rich.advanced,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_RICH_TEXT} a`]: animation.line.fadeUnderRed,\n    },\n  })}\n\n  .${ELEMENT_RICH_TEXT} {\n    margin-top: ${token.spacing.min};\n  }\n\n  .${ELEMENT_RICH_TEXT} * {\n    color: ${token.color.black};\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_HEADLINE}`]: typography.sans.extraLarge,\n    },\n  })}\n\n  .${ELEMENT_HEADLINE} {\n    text-transform: uppercase;\n    color: ${token.color.black};\n    font-weight: 800;\n  }\n`;\n\n// prettier-ignore\nconst TextContainerStyles = `\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_TEXT_CONTAINER} {\n      width: 70%;\n    }\n  }\n`;\n\n// prettier-ignore\nconst WrapperStyles = `\n  .${ELEMENT_WRAPPER} {\n    z-index: 9;\n    position: relative;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_WRAPPER} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n  }\n`;\n\nconst STYLES_BANNER_PROMO_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    overflow: hidden;\n    position: relative;\n  }\n\n  .${ELEMENT_CONTAINER} {\n    padding: ${token.spacing.lg} ${token.spacing.lg};\n    background-color: ${token.color.gold};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_CONTAINER} {\n      padding: ${token.spacing.xl};\n    }\n  }\n\n  .${ELEMENT_CONTAINER} > svg {\n    position: absolute;\n    right: -50px;\n    top: -40px;\n    height: 231px;\n    width: 234px;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n    .${ELEMENT_CONTAINER} > svg {\n      display: none;\n    }\n  }\n\n  ${WrapperStyles}\n  ${TextContainerStyles}\n  ${HeadlineStyles}\n  ${TextStyles}\n  ${ActionsStyles}\n  ${OverwriteThemeDark}\n`;\n\nconst CreateTextContainer = (props: TypeBannerPromoProps) => {\n  const { headline, text } = props;\n  const container = document.createElement('div');\n\n  container.classList.add(ELEMENT_TEXT_CONTAINER);\n\n  if (headline) {\n    headline.classList.add(ELEMENT_HEADLINE);\n    container.appendChild(headline);\n  }\n\n  if (text) {\n    text.classList.add(ELEMENT_RICH_TEXT);\n    container.appendChild(text);\n  }\n\n  return container;\n};\n\nconst CreateBannerPromoElement = (props: TypeBannerPromoProps) =>\n  (() => {\n    const { isThemeDark, includeSeal = false, actions } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n    const textContainer = CreateTextContainer(props);\n\n    wrapper.classList.add(ELEMENT_WRAPPER);\n    wrapper.appendChild(textContainer);\n\n    if (actions) {\n      actions.classList.add(ELEMENT_ACTIONS);\n      wrapper.appendChild(actions);\n    }\n\n    if (includeSeal) {\n      container.innerHTML = `${seal}`;\n    }\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n    container.classList.add(ELEMENT_CONTAINER);\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    return {\n      element: declaration,\n      styles: STYLES_BANNER_PROMO_ELEMENT,\n    };\n  })();\n\nexport default CreateBannerPromoElement;\n"],"names":[],"mappings":"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"}

package/dist/composite/card/block.js

@@ -1,21 +1,33 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
-const media = require("../../utilities/theme/media.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
+require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-utilities-library/media");
+require("@universityofmaryland/web-utilities-library/dom");
+require("@universityofmaryland/web-icons-library/controls");
+require("@universityofmaryland/web-icons-library/communication");
+require("@universityofmaryland/web-icons-library/files");
+require("@universityofmaryland/web-icons-library/brand");
 require("../../model/modifiers/index.js");
+require("@universityofmaryland/web-styles-library");
 require("../../model/elements/headline.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");
 const stacked = require("../../atomic/layout/block/stacked.js");
 require("../../atomic/layout/overlay/modal.js");
 require("../../atomic/layout/person/columns.js");
+require("@universityofmaryland/web-icons-library/social");
 require("../../atomic/text-lockup/date.js");
 require("../../atomic/text-lockup/small.js");
 const smallScaling = require("../../atomic/text-lockup/small-scaling.js");
+require("@universityofmaryland/web-styles-library/typography");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -32,8 +44,8 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
-const smallBreakpoint = Styles__namespace.token.media.breakpointValues.small.max;
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const smallBreakpoint = token__namespace.media.breakpointValues.small.max;
 const block = (props) => {
   const {
     dateSign,
@@ -65,8 +77,8 @@ const block = (props) => {
         ],
         customStyles: {
           ...shouldImageBeFullWidth && {
-            ...media.createContainerQuery("max-width", smallBreakpoint, {
-              marginBottom: Styles__namespace.token.spacing.md,
+            ...styles.createMediaQuery("max-width", smallBreakpoint, {
+              marginBottom: token__namespace.spacing.md,
               width: "100%"
             })
           }

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

@@ -1 +1 @@
-{"version":3,"file":"block.js","sources":["../../../source/composite/card/block.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, layout, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { CardBlockProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\n\nexport default (props: CardBlockProps) => {\n  const {\n    dateSign,\n    hasBorder,\n    hasEyebrowRibbon,\n    image,\n    isAligned,\n    isThemeDark,\n    isTransparent,\n    newsId,\n  } = props;\n  const shouldImageBeFullWidth = hasEyebrowRibbon;\n  const children: UMDElement[] = [];\n  const sizingProps = {\n    isThemeDark,\n    isTransparent,\n    hasBorder,\n  };\n\n  if (image) {\n    children.push(\n      layout.block.stacked.image({\n        children: [\n          assets.image.background({\n            element: image,\n            isScaled: true,\n            isAspectStandard: isAligned,\n            dateSign,\n          }),\n        ],\n        customStyles: {\n          ...(shouldImageBeFullWidth && {\n            ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n              marginBottom: Styles.token.spacing.md,\n              width: '100%',\n            }),\n          }),\n        },\n        ...sizingProps,\n      }),\n    );\n  }\n\n  children.push(\n    layout.block.stacked.textContainer({\n      children: [textLockup.smallScaling(props)],\n      ...sizingProps,\n    }),\n  );\n\n  const composite = layout.block.stacked.container({\n    children,\n    ...sizingProps,\n  });\n\n  if (newsId) {\n    composite?.element.setAttribute('news-id', newsId);\n  }\n\n  return composite;\n};\n"],"names":["Styles","layout.block.stacked.image","assets.image.background","theme.media.createContainerQuery","layout.block.stacked.textContainer","textLockup.smallScaling","layout.block.stacked.container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,kBAAkBA,kBAAO,MAAM,MAAM,iBAAiB,MAAM;AAElE,MAAA,QAAe,CAAC,UAA0B;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,yBAAyB;AAC/B,QAAM,WAAyB,CAAA;AAC/B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,MAAI,OAAO;AACT,aAAS;AAAA,MACPC,cAA2B;AAAA,QACzB,UAAU;AAAA,UACRC,WAAwB;AAAA,YACtB,SAAS;AAAA,YACT,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB;AAAA,UAAA,CACD;AAAA,QAAA;AAAA,QAEH,cAAc;AAAA,UACZ,GAAI,0BAA0B;AAAA,YAC5B,GAAGC,MAAAA,qBAAiC,aAAa,iBAAiB;AAAA,cAChE,cAAcH,kBAAO,MAAM,QAAQ;AAAA,cACnC,OAAO;AAAA,YAAA,CACR;AAAA,UAAA;AAAA,QACH;AAAA,QAEF,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPI,sBAAmC;AAAA,MACjC,UAAU,CAACC,aAAwB,KAAK,CAAC;AAAA,MACzC,GAAG;AAAA,IAAA,CACJ;AAAA,EAAA;AAGH,QAAM,YAAYC,QAAAA,UAA+B;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AAED,MAAI,QAAQ;AACV,eAAW,QAAQ,aAAa,WAAW,MAAM;AAAA,EACnD;AAEA,SAAO;AACT;;"}
+{"version":3,"file":"block.js","sources":["../../../source/composite/card/block.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, layout, textLockup } from 'atomic';\nimport { CardBlockProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport default (props: CardBlockProps) => {\n  const {\n    dateSign,\n    hasBorder,\n    hasEyebrowRibbon,\n    image,\n    isAligned,\n    isThemeDark,\n    isTransparent,\n    newsId,\n  } = props;\n  const shouldImageBeFullWidth = hasEyebrowRibbon;\n  const children: UMDElement[] = [];\n  const sizingProps = {\n    isThemeDark,\n    isTransparent,\n    hasBorder,\n  };\n\n  if (image) {\n    children.push(\n      layout.block.stacked.image({\n        children: [\n          assets.image.background({\n            element: image,\n            isScaled: true,\n            isAspectStandard: isAligned,\n            dateSign,\n          }),\n        ],\n        customStyles: {\n          ...(shouldImageBeFullWidth && {\n            ...createMediaQuery('max-width', smallBreakpoint, {\n              marginBottom: token.spacing.md,\n              width: '100%',\n            }),\n          }),\n        },\n        ...sizingProps,\n      }),\n    );\n  }\n\n  children.push(\n    layout.block.stacked.textContainer({\n      children: [textLockup.smallScaling(props)],\n      ...sizingProps,\n    }),\n  );\n\n  const composite = layout.block.stacked.container({\n    children,\n    ...sizingProps,\n  });\n\n  if (newsId) {\n    composite?.element.setAttribute('news-id', newsId);\n  }\n\n  return composite;\n};\n"],"names":["token","layout.block.stacked.image","assets.image.background","createMediaQuery","layout.block.stacked.textContainer","textLockup.smallScaling","layout.block.stacked.container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,kBAAkBA,iBAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAA,QAAe,CAAC,UAA0B;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,yBAAyB;AAC/B,QAAM,WAAyB,CAAA;AAC/B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,MAAI,OAAO;AACT,aAAS;AAAA,MACPC,cAA2B;AAAA,QACzB,UAAU;AAAA,UACRC,WAAwB;AAAA,YACtB,SAAS;AAAA,YACT,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB;AAAA,UAAA,CACD;AAAA,QAAA;AAAA,QAEH,cAAc;AAAA,UACZ,GAAI,0BAA0B;AAAA,YAC5B,GAAGC,OAAAA,iBAAiB,aAAa,iBAAiB;AAAA,cAChD,cAAcH,iBAAM,QAAQ;AAAA,cAC5B,OAAO;AAAA,YAAA,CACR;AAAA,UAAA;AAAA,QACH;AAAA,QAEF,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPI,sBAAmC;AAAA,MACjC,UAAU,CAACC,aAAwB,KAAK,CAAC;AAAA,MACzC,GAAG;AAAA,IAAA,CACJ;AAAA,EAAA;AAGH,QAAM,YAAYC,QAAAA,UAA+B;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AAED,MAAI,QAAQ;AACV,eAAW,QAAQ,aAAa,WAAW,MAAM;AAAA,EACnD;AAEA,SAAO;AACT;;"}

package/dist/composite/card/block.mjs

@@ -1,21 +1,33 @@
-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 "../../model/modifiers/index.mjs";
+import "@universityofmaryland/web-styles-library";
 import "../../model/elements/headline.mjs";
+import "@universityofmaryland/web-icons-library/arrows";
 import "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../atomic/animations/brand/card-stack.mjs";
 import imageContainer from "../../atomic/assets/image/background.mjs";
+import "@universityofmaryland/web-utilities-library/performance";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
 import { image, textContainer, container } from "../../atomic/layout/block/stacked.mjs";
 import "../../atomic/layout/overlay/modal.mjs";
 import "../../atomic/layout/person/columns.mjs";
+import "@universityofmaryland/web-icons-library/social";
 import "../../atomic/text-lockup/date.mjs";
 import "../../atomic/text-lockup/small.mjs";
 import smallScaling from "../../atomic/text-lockup/small-scaling.mjs";
-const smallBreakpoint = Styles.token.media.breakpointValues.small.max;
+import "@universityofmaryland/web-styles-library/typography";
+const smallBreakpoint = token.media.breakpointValues.small.max;
 const block = (props) => {
   const {
     dateSign,
@@ -47,8 +59,8 @@ const block = (props) => {
         ],
         customStyles: {
           ...shouldImageBeFullWidth && {
-            ...createContainerQuery("max-width", smallBreakpoint, {
-              marginBottom: Styles.token.spacing.md,
+            ...createMediaQuery("max-width", smallBreakpoint, {
+              marginBottom: token.spacing.md,
               width: "100%"
             })
           }

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

@@ -1 +1 @@
-{"version":3,"file":"block.mjs","sources":["../../../source/composite/card/block.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, layout, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { CardBlockProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\n\nexport default (props: CardBlockProps) => {\n  const {\n    dateSign,\n    hasBorder,\n    hasEyebrowRibbon,\n    image,\n    isAligned,\n    isThemeDark,\n    isTransparent,\n    newsId,\n  } = props;\n  const shouldImageBeFullWidth = hasEyebrowRibbon;\n  const children: UMDElement[] = [];\n  const sizingProps = {\n    isThemeDark,\n    isTransparent,\n    hasBorder,\n  };\n\n  if (image) {\n    children.push(\n      layout.block.stacked.image({\n        children: [\n          assets.image.background({\n            element: image,\n            isScaled: true,\n            isAspectStandard: isAligned,\n            dateSign,\n          }),\n        ],\n        customStyles: {\n          ...(shouldImageBeFullWidth && {\n            ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n              marginBottom: Styles.token.spacing.md,\n              width: '100%',\n            }),\n          }),\n        },\n        ...sizingProps,\n      }),\n    );\n  }\n\n  children.push(\n    layout.block.stacked.textContainer({\n      children: [textLockup.smallScaling(props)],\n      ...sizingProps,\n    }),\n  );\n\n  const composite = layout.block.stacked.container({\n    children,\n    ...sizingProps,\n  });\n\n  if (newsId) {\n    composite?.element.setAttribute('news-id', newsId);\n  }\n\n  return composite;\n};\n"],"names":["image","layout.block.stacked.image","assets.image.background","theme.media.createContainerQuery","layout.block.stacked.textContainer","textLockup.smallScaling","layout.block.stacked.container"],"mappings":";;;;;;;;;;;;;;;;;AAMA,MAAM,kBAAkB,OAAO,MAAM,MAAM,iBAAiB,MAAM;AAElE,MAAA,QAAe,CAAC,UAA0B;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAAA,OACAA;AAAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,yBAAyB;AAC/B,QAAM,WAAyB,CAAA;AAC/B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA2B;AAAA,QACzB,UAAU;AAAA,UACRC,eAAwB;AAAA,YACtB,SAASF;AAAAA,YACT,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB;AAAA,UAAA,CACD;AAAA,QAAA;AAAA,QAEH,cAAc;AAAA,UACZ,GAAI,0BAA0B;AAAA,YAC5B,GAAGG,qBAAiC,aAAa,iBAAiB;AAAA,cAChE,cAAc,OAAO,MAAM,QAAQ;AAAA,cACnC,OAAO;AAAA,YAAA,CACR;AAAA,UAAA;AAAA,QACH;AAAA,QAEF,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPC,cAAmC;AAAA,MACjC,UAAU,CAACC,aAAwB,KAAK,CAAC;AAAA,MACzC,GAAG;AAAA,IAAA,CACJ;AAAA,EAAA;AAGH,QAAM,YAAYC,UAA+B;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AAED,MAAI,QAAQ;AACV,eAAW,QAAQ,aAAa,WAAW,MAAM;AAAA,EACnD;AAEA,SAAO;AACT;"}
+{"version":3,"file":"block.mjs","sources":["../../../source/composite/card/block.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, layout, textLockup } from 'atomic';\nimport { CardBlockProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport default (props: CardBlockProps) => {\n  const {\n    dateSign,\n    hasBorder,\n    hasEyebrowRibbon,\n    image,\n    isAligned,\n    isThemeDark,\n    isTransparent,\n    newsId,\n  } = props;\n  const shouldImageBeFullWidth = hasEyebrowRibbon;\n  const children: UMDElement[] = [];\n  const sizingProps = {\n    isThemeDark,\n    isTransparent,\n    hasBorder,\n  };\n\n  if (image) {\n    children.push(\n      layout.block.stacked.image({\n        children: [\n          assets.image.background({\n            element: image,\n            isScaled: true,\n            isAspectStandard: isAligned,\n            dateSign,\n          }),\n        ],\n        customStyles: {\n          ...(shouldImageBeFullWidth && {\n            ...createMediaQuery('max-width', smallBreakpoint, {\n              marginBottom: token.spacing.md,\n              width: '100%',\n            }),\n          }),\n        },\n        ...sizingProps,\n      }),\n    );\n  }\n\n  children.push(\n    layout.block.stacked.textContainer({\n      children: [textLockup.smallScaling(props)],\n      ...sizingProps,\n    }),\n  );\n\n  const composite = layout.block.stacked.container({\n    children,\n    ...sizingProps,\n  });\n\n  if (newsId) {\n    composite?.element.setAttribute('news-id', newsId);\n  }\n\n  return composite;\n};\n"],"names":["image","layout.block.stacked.image","assets.image.background","layout.block.stacked.textContainer","textLockup.smallScaling","layout.block.stacked.container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAA,QAAe,CAAC,UAA0B;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAAA,OACAA;AAAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,yBAAyB;AAC/B,QAAM,WAAyB,CAAA;AAC/B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA2B;AAAA,QACzB,UAAU;AAAA,UACRC,eAAwB;AAAA,YACtB,SAASF;AAAAA,YACT,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB;AAAA,UAAA,CACD;AAAA,QAAA;AAAA,QAEH,cAAc;AAAA,UACZ,GAAI,0BAA0B;AAAA,YAC5B,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,cAChD,cAAc,MAAM,QAAQ;AAAA,cAC5B,OAAO;AAAA,YAAA,CACR;AAAA,UAAA;AAAA,QACH;AAAA,QAEF,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPG,cAAmC;AAAA,MACjC,UAAU,CAACC,aAAwB,KAAK,CAAC;AAAA,MACzC,GAAG;AAAA,IAAA,CACJ;AAAA,EAAA;AAGH,QAAM,YAAYC,UAA+B;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AAED,MAAI,QAAQ;AACV,eAAW,QAAQ,aAAa,WAAW,MAAM;AAAA,EACnD;AAEA,SAAO;AACT;"}

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

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../source/composite/card/list.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;yBA6GzB,OAAO,aAAa;;;;;AAApC,wBAgDE"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../source/composite/card/list.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;yBAqGzB,OAAO,aAAa;;;;;AAApC,wBA4CE"}

package/dist/composite/card/list.js

@@ -1,19 +1,30 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
-const media = require("../../utilities/theme/media.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
+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");
+require("@universityofmaryland/web-icons-library/social");
 require("../../atomic/text-lockup/date.js");
 const small = 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) {
@@ -30,22 +41,22 @@ 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 makeDateColumn = (dateSign) => index.createDiv({
   className: "card-list-date-sign-wrapper",
   elementStyles: {
     element: {
-      width: `${Styles__namespace.token.spacing.xl}`,
+      width: `${token__namespace.spacing.xl}`,
       order: 1,
       alignSelf: "flex-start",
-      ...media.createContainerQuery("max-width", mediumBreakpoint, {
+      ...styles.createMediaQuery("max-width", mediumBreakpoint, {
         display: "none"
       }),
-      ...media.createContainerQuery("min-width", mediumBreakpoint, {
-        width: `${Styles__namespace.token.spacing["8xl"]}`
+      ...styles.createMediaQuery("min-width", mediumBreakpoint, {
+        width: `${token__namespace.spacing["8xl"]}`
       })
     }
   },
@@ -56,15 +67,11 @@ const makeTextColumn = (props) => index.createDiv({
   elementStyles: {
     element: {
       flex: "1 0",
-      ...media.createContainerQuery(
-        "min-width",
-        mediumBreakpointStart,
-        {
-          paddingRight: `${Styles__namespace.token.spacing.md}`,
-          order: "2"
-        }
-      ),
-      ...media.createContainerQuery("min-width", mediumBreakpoint, {
+      ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
+        paddingRight: `${token__namespace.spacing.md}`,
+        order: "2"
+      }),
+      ...styles.createMediaQuery("min-width", mediumBreakpoint, {
         width: "208px"
       })
     }
@@ -78,9 +85,9 @@ const makeImageColumn = ({
   className: "card-list-image-wrapper",
   elementStyles: {
     element: {
-      ...media.createContainerQuery("max-width", smallBreakpoint, {
-        marginLeft: Styles__namespace.token.spacing.min,
-        marginBottom: Styles__namespace.token.spacing.md,
+      ...styles.createMediaQuery("max-width", smallBreakpoint, {
+        marginLeft: token__namespace.spacing.min,
+        marginBottom: token__namespace.spacing.md,
         width: "120px",
         float: "right",
         position: "relative",
@@ -89,23 +96,19 @@ const makeImageColumn = ({
           height: "104px"
         }
       }),
-      ...media.createContainerQuery(
-        "min-width",
-        mediumBreakpointStart,
-        {
-          display: "block",
-          width: "160px",
-          order: "3",
-          ...isAligned && {
-            height: "160px"
-          }
+      ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
+        display: "block",
+        width: "160px",
+        order: "3",
+        ...isAligned && {
+          height: "160px"
         }
-      ),
-      ...media.createContainerQuery("min-width", mediumBreakpoint, {
+      }),
+      ...styles.createMediaQuery("min-width", mediumBreakpoint, {
         width: "208px"
       }),
       "& img": {
-        ...media.createContainerQuery("max-width", smallBreakpoint, {
+        ...styles.createMediaQuery("max-width", smallBreakpoint, {
           height: "auto !important"
         })
       }
@@ -134,14 +137,10 @@ const list = (props) => {
     elementStyles: {
       element: {
         containerType: "inline-size",
-        ...media.createContainerQuery(
-          "min-width",
-          mediumBreakpointStart,
-          {
-            display: "flex",
-            justifyContent: "space-between"
-          }
-        )
+        ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
+          display: "flex",
+          justifyContent: "space-between"
+        })
       }
     },
     children
@@ -153,8 +152,8 @@ const list = (props) => {
         height: "100%",
         overflow: "hidden",
         ...isThemeDark && {
-          backgroundColor: Styles__namespace.token.color.black,
-          color: Styles__namespace.token.color.white
+          backgroundColor: token__namespace.color.black,
+          color: token__namespace.color.white
         }
       }
     },

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

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../source/composite/card/list.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { textLockup, assets } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { CardListProps } from './_types';\nimport { type UMDElement } 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\nconst makeDateColumn = (dateSign: UMDElement) =>\n  ElementModel.createDiv({\n    className: 'card-list-date-sign-wrapper',\n    elementStyles: {\n      element: {\n        width: `${Styles.token.spacing.xl}`,\n        order: 1,\n        alignSelf: 'flex-start',\n\n        ...theme.media.createContainerQuery('max-width', mediumBreakpoint, {\n          display: 'none',\n        }),\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: `${Styles.token.spacing['8xl']}`,\n        }),\n      },\n    },\n    children: [dateSign],\n  });\n\nconst makeTextColumn = (props: CardListProps) =>\n  ElementModel.createDiv({\n    className: 'card-list-text-wrapper',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingRight: `${Styles.token.spacing.md}`,\n            order: '2',\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n      },\n    },\n    children: [textLockup.small(props)],\n  });\n\nconst makeImageColumn = ({\n  image,\n  isAligned,\n}: {\n  image: NonNullable<CardListProps['image']>;\n  isAligned?: CardListProps['isAligned'];\n}) =>\n  ElementModel.createDiv({\n    className: 'card-list-image-wrapper',\n    elementStyles: {\n      element: {\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          marginLeft: Styles.token.spacing.min,\n          marginBottom: Styles.token.spacing.md,\n          width: '120px',\n          float: 'right',\n          position: 'relative',\n          zIndex: 99,\n\n          ...(isAligned && {\n            height: '104px',\n          }),\n        }),\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'block',\n            width: '160px',\n            order: '3',\n\n            ...(isAligned && {\n              height: '160px',\n            }),\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n\n        '& img': {\n          ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: isAligned,\n        isGifAllowed: false,\n      }),\n    ],\n  });\n\nexport default (props: CardListProps) => {\n  const { image, isAligned, isThemeDark, dateSign } = props;\n  let children: UMDElement[] = [];\n\n  if (image) {\n    children.push(makeImageColumn({ image, isAligned }));\n  }\n\n  if (dateSign) {\n    children.push(makeDateColumn(dateSign));\n  }\n\n  children.push(makeTextColumn(props));\n\n  const wrapper = ElementModel.createDiv({\n    className: 'card-list-wrapper',\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'flex',\n            justifyContent: 'space-between',\n          },\n        ),\n      },\n    },\n    children,\n  });\n\n  return ElementModel.createDiv({\n    className: 'card-list-container',\n    elementStyles: {\n      element: {\n        height: '100%',\n        overflow: 'hidden',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n          color: Styles.token.color.white,\n        }),\n      },\n    },\n    children: [wrapper],\n  });\n};\n"],"names":["Styles","ElementModel.createDiv","theme.media.createContainerQuery","textLockup.small","assets.image.background"],"mappings":"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"}
+{"version":3,"file":"list.js","sources":["../../../source/composite/card/list.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { textLockup, assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { CardListProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nconst makeDateColumn = (dateSign: UMDElement) =>\n  ElementModel.createDiv({\n    className: 'card-list-date-sign-wrapper',\n    elementStyles: {\n      element: {\n        width: `${token.spacing.xl}`,\n        order: 1,\n        alignSelf: 'flex-start',\n\n        ...createMediaQuery('max-width', mediumBreakpoint, {\n          display: 'none',\n        }),\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: `${token.spacing['8xl']}`,\n        }),\n      },\n    },\n    children: [dateSign],\n  });\n\nconst makeTextColumn = (props: CardListProps) =>\n  ElementModel.createDiv({\n    className: 'card-list-text-wrapper',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingRight: `${token.spacing.md}`,\n          order: '2',\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n      },\n    },\n    children: [textLockup.small(props)],\n  });\n\nconst makeImageColumn = ({\n  image,\n  isAligned,\n}: {\n  image: NonNullable<CardListProps['image']>;\n  isAligned?: CardListProps['isAligned'];\n}) =>\n  ElementModel.createDiv({\n    className: 'card-list-image-wrapper',\n    elementStyles: {\n      element: {\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          marginLeft: token.spacing.min,\n          marginBottom: token.spacing.md,\n          width: '120px',\n          float: 'right',\n          position: 'relative',\n          zIndex: 99,\n\n          ...(isAligned && {\n            height: '104px',\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'block',\n          width: '160px',\n          order: '3',\n\n          ...(isAligned && {\n            height: '160px',\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n\n        '& img': {\n          ...createMediaQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: isAligned,\n        isGifAllowed: false,\n      }),\n    ],\n  });\n\nexport default (props: CardListProps) => {\n  const { image, isAligned, isThemeDark, dateSign } = props;\n  let children: UMDElement[] = [];\n\n  if (image) {\n    children.push(makeImageColumn({ image, isAligned }));\n  }\n\n  if (dateSign) {\n    children.push(makeDateColumn(dateSign));\n  }\n\n  children.push(makeTextColumn(props));\n\n  const wrapper = ElementModel.createDiv({\n    className: 'card-list-wrapper',\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'flex',\n          justifyContent: 'space-between',\n        }),\n      },\n    },\n    children,\n  });\n\n  return ElementModel.createDiv({\n    className: 'card-list-container',\n    elementStyles: {\n      element: {\n        height: '100%',\n        overflow: 'hidden',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.black,\n          color: token.color.white,\n        }),\n      },\n    },\n    children: [wrapper],\n  });\n};\n"],"names":["token","ElementModel.createDiv","createMediaQuery","textLockup.small","assets.image.background"],"mappings":"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"}

package/dist/composite/card/list.mjs

@@ -1,33 +1,44 @@
-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 "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../atomic/animations/brand/card-stack.mjs";
 import imageContainer from "../../atomic/assets/image/background.mjs";
+import "@universityofmaryland/web-utilities-library/performance";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
 import "../../atomic/layout/block/stacked.mjs";
 import "../../atomic/layout/overlay/modal.mjs";
 import "../../atomic/layout/person/columns.mjs";
+import "@universityofmaryland/web-icons-library/social";
 import "../../atomic/text-lockup/date.mjs";
 import { createTextLockupSmall } from "../../atomic/text-lockup/small.mjs";
-const smallBreakpoint = Styles.token.media.breakpointValues.small.max;
-const mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;
-const mediumBreakpoint = Styles.token.media.breakpointValues.large.min;
+import "@universityofmaryland/web-styles-library/typography";
+const smallBreakpoint = token.media.breakpointValues.small.max;
+const mediumBreakpointStart = token.media.breakpointValues.medium.min;
+const mediumBreakpoint = token.media.breakpointValues.large.min;
 const makeDateColumn = (dateSign) => createDiv({
   className: "card-list-date-sign-wrapper",
   elementStyles: {
     element: {
-      width: `${Styles.token.spacing.xl}`,
+      width: `${token.spacing.xl}`,
       order: 1,
       alignSelf: "flex-start",
-      ...createContainerQuery("max-width", mediumBreakpoint, {
+      ...createMediaQuery("max-width", mediumBreakpoint, {
         display: "none"
       }),
-      ...createContainerQuery("min-width", mediumBreakpoint, {
-        width: `${Styles.token.spacing["8xl"]}`
+      ...createMediaQuery("min-width", mediumBreakpoint, {
+        width: `${token.spacing["8xl"]}`
       })
     }
   },
@@ -38,15 +49,11 @@ const makeTextColumn = (props) => createDiv({
   elementStyles: {
     element: {
       flex: "1 0",
-      ...createContainerQuery(
-        "min-width",
-        mediumBreakpointStart,
-        {
-          paddingRight: `${Styles.token.spacing.md}`,
-          order: "2"
-        }
-      ),
-      ...createContainerQuery("min-width", mediumBreakpoint, {
+      ...createMediaQuery("min-width", mediumBreakpointStart, {
+        paddingRight: `${token.spacing.md}`,
+        order: "2"
+      }),
+      ...createMediaQuery("min-width", mediumBreakpoint, {
         width: "208px"
       })
     }
@@ -60,9 +67,9 @@ const makeImageColumn = ({
   className: "card-list-image-wrapper",
   elementStyles: {
     element: {
-      ...createContainerQuery("max-width", smallBreakpoint, {
-        marginLeft: Styles.token.spacing.min,
-        marginBottom: Styles.token.spacing.md,
+      ...createMediaQuery("max-width", smallBreakpoint, {
+        marginLeft: token.spacing.min,
+        marginBottom: token.spacing.md,
         width: "120px",
         float: "right",
         position: "relative",
@@ -71,23 +78,19 @@ const makeImageColumn = ({
           height: "104px"
         }
       }),
-      ...createContainerQuery(
-        "min-width",
-        mediumBreakpointStart,
-        {
-          display: "block",
-          width: "160px",
-          order: "3",
-          ...isAligned && {
-            height: "160px"
-          }
+      ...createMediaQuery("min-width", mediumBreakpointStart, {
+        display: "block",
+        width: "160px",
+        order: "3",
+        ...isAligned && {
+          height: "160px"
         }
-      ),
-      ...createContainerQuery("min-width", mediumBreakpoint, {
+      }),
+      ...createMediaQuery("min-width", mediumBreakpoint, {
         width: "208px"
       }),
       "& img": {
-        ...createContainerQuery("max-width", smallBreakpoint, {
+        ...createMediaQuery("max-width", smallBreakpoint, {
           height: "auto !important"
         })
       }
@@ -116,14 +119,10 @@ const list = (props) => {
     elementStyles: {
       element: {
         containerType: "inline-size",
-        ...createContainerQuery(
-          "min-width",
-          mediumBreakpointStart,
-          {
-            display: "flex",
-            justifyContent: "space-between"
-          }
-        )
+        ...createMediaQuery("min-width", mediumBreakpointStart, {
+          display: "flex",
+          justifyContent: "space-between"
+        })
       }
     },
     children
@@ -135,8 +134,8 @@ const list = (props) => {
         height: "100%",
         overflow: "hidden",
         ...isThemeDark && {
-          backgroundColor: Styles.token.color.black,
-          color: Styles.token.color.white
+          backgroundColor: token.color.black,
+          color: token.color.white
         }
       }
     },