@universityofmaryland/web-elements-library 1.4.8 → 1.5.0

package/dist/atomic/text/stat.mjs

@@ -1,4 +1,5 @@
-import Styles__default from "@universityofmaryland/web-styles-library";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { sans, stats } from "@universityofmaryland/web-styles-library/typography";
 import { createDiv, create } from "../../model/elements/index.mjs";
 import { simpleLargest, simpleLarge } from "../../model/elements/rich-text.mjs";
 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>`;
@@ -16,20 +17,20 @@ const createStat = (props) => {
     element: statElement,
     className: "stat-display",
     elementStyles: {
-      siblingAfter: { marginTop: Styles__default.token.spacing.min },
+      siblingAfter: { marginTop: token.spacing.min },
       element: {
-        ...Styles__default.typography.stats.medium,
-        color: Styles__default.token.color.red,
+        ...stats.medium,
+        color: token.color.red,
         WebkitFontSmoothing: "antialiased",
-        ...isThemeDark && { color: Styles__default.token.color.gold },
-        ...isSizeLarge && { ...Styles__default.typography.stats.large },
+        ...isThemeDark && { color: token.color.gold },
+        ...isSizeLarge && { ...stats.large },
         [`& *`]: {
-          ...Styles__default.typography.stats.medium,
+          ...stats.medium,
           color: "currentColor",
           WebkitFontSmoothing: "antialiased",
-          ...isSizeLarge && Styles__default.typography.stats.large
+          ...isSizeLarge && stats.large
         },
-        [`& + *`]: { marginTop: Styles__default.token.spacing.min }
+        [`& + *`]: { marginTop: token.spacing.min }
       }
     }
   });
@@ -42,15 +43,15 @@ const createSubtext = (props) => {
     className: "stat-sub-text",
     elementStyles: {
       element: {
-        ...Styles__default.typography.sans.min,
-        marginTop: Styles__default.token.spacing.min,
-        color: Styles__default.token.color.gray.mediumAA,
-        ...isSizeLarge && Styles__default.typography.sans.small,
-        ...isThemeDark && { color: Styles__default.token.color.gray.light },
+        ...sans.min,
+        marginTop: token.spacing.min,
+        color: token.color.gray.mediumAA,
+        ...isSizeLarge && sans.small,
+        ...isThemeDark && { color: token.color.gray.light },
         ["& *"]: {
-          ...Styles__default.typography.sans.min,
+          ...sans.min,
           color: "currentColor",
-          ...isSizeLarge && Styles__default.typography.sans.small
+          ...isSizeLarge && sans.small
         }
       }
     }
@@ -64,7 +65,7 @@ const createText = (props) => {
       element: text,
       isThemeDark,
       elementStyles: {
-        siblingAfter: { marginTop: Styles__default.token.spacing.md }
+        siblingAfter: { marginTop: token.spacing.md }
       }
     });
   }
@@ -72,7 +73,7 @@ const createText = (props) => {
     element: text,
     isThemeDark,
     elementStyles: {
-      siblingAfter: { marginTop: Styles__default.token.spacing.min }
+      siblingAfter: { marginTop: token.spacing.min }
     }
   });
 };
@@ -92,14 +93,14 @@ const createWrapper = (props) => {
         maxWidth: "720px",
         position: "relative",
         ...hasLine && {
-          paddingLeft: Styles__default.token.spacing.md,
-          borderLeft: `2px solid ${Styles__default.token.color.gold}`,
+          paddingLeft: token.spacing.md,
+          borderLeft: `2px solid ${token.color.gold}`,
           [`@container umd-element-stat (min-width: 400px)`]: {
-            paddingLeft: Styles__default.token.spacing.xl
+            paddingLeft: token.spacing.xl
           }
         },
         ...isThemeDark && {
-          [`& .stat-sub-text`]: { color: Styles__default.token.color.gray.light }
+          [`& .stat-sub-text`]: { color: token.color.gray.light }
         }
       }
     }
@@ -113,19 +114,19 @@ const createDisplayBlock = (props) => {
     children: [wrapperElement],
     elementStyles: {
       element: {
-        padding: `${Styles__default.token.spacing.lg} ${Styles__default.token.spacing.sm}`,
-        borderTop: `2px solid ${Styles__default.token.color.red}`,
-        backgroundColor: `${Styles__default.token.color.gray.lightest}`,
+        padding: `${token.spacing.lg} ${token.spacing.sm}`,
+        borderTop: `2px solid ${token.color.red}`,
+        backgroundColor: `${token.color.gray.lightest}`,
         position: "relative",
         overflow: "hidden",
         height: `100%`,
         display: `flex`,
         alignItems: `center`,
-        [`@media (min-width: ${Styles__default.token.media.breakpoints.large.min})`]: {
-          padding: Styles__default.token.spacing.lg
+        [`@media (min-width: ${token.media.breakpoints.large.min})`]: {
+          padding: token.spacing.lg
         },
-        [`@media (min-width: ${Styles__default.token.media.breakpoints.highDef.min})`]: {
-          padding: `${Styles__default.token.spacing["2xl"]} ${Styles__default.token.spacing["3xl"]}`
+        [`@media (min-width: ${token.media.breakpoints.highDef.min})`]: {
+          padding: `${token.spacing["2xl"]} ${token.spacing["3xl"]}`
         },
         [`& > svg`]: {
           position: "absolute",

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

@@ -1 +1 @@
-{"version":3,"file":"stat.mjs","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","Styles","ElementModel.richText.simpleLargest","ElementModel.richText.simpleLarge","stat","ElementModel.createDiv"],"mappings":"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"}
+{"version":3,"file":"stat.mjs","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","statsFont","sansFonts","ElementModel.richText.simpleLargest","ElementModel.richText.simpleLarge","stat","ElementModel.createDiv"],"mappings":"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"}

package/dist/atomic/text-lockup/contact.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"contact.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/contact.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAC;yBAyFpC,6DAOb,kBAAkB;;;;;AAPrB,wBA4FE"}
+{"version":3,"file":"contact.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/contact.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAC;yBAwFpC,6DAOb,kBAAkB;;;;;AAPrB,wBA4FE"}

package/dist/atomic/text-lockup/contact.js

@@ -1,10 +1,8 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const icons = require("../../utilities/assets/icons.js");
-const social = require("../../utilities/assets/social.js");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const communication = require("@universityofmaryland/web-icons-library/communication");
+const location = require("@universityofmaryland/web-icons-library/location");
+const social = require("@universityofmaryland/web-icons-library/social");
 const index = require("../../model/elements/index.js");
 const layout = require("../../model/elements/layout.js");
 const headline = require("../../model/elements/headline.js");
@@ -25,7 +23,7 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const makeIcon = ({
   icon,
   isThemeDark
@@ -46,7 +44,7 @@ const makeText = ({
     isThemeDark,
     elementStyles: {
       element: {
-        color: `${Styles__namespace.token.color.gray.dark}`
+        color: `${token__namespace.color.gray.dark}`
       }
     }
   });
@@ -58,7 +56,7 @@ const makeContactLink = ({
   icon,
   isThemeDark
 }) => {
-  const isLink = element.getAttribute("href") && icon !== icons.PIN;
+  const isLink = element.getAttribute("href") && icon !== location.pin;
   const textSpan = makeText({ text: element.innerHTML, isThemeDark });
   const iconSpan = makeIcon({ icon, isThemeDark });
   const containerStyles = {
@@ -105,7 +103,7 @@ const contact = ({
         children: [
           makeContactLink({
             element: phone,
-            icon: icons.PHONE,
+            icon: communication.phone,
             isThemeDark
           })
         ]
@@ -119,7 +117,7 @@ const contact = ({
         children: [
           makeContactLink({
             element: email,
-            icon: icons.EMAIL,
+            icon: communication.email,
             isThemeDark
           })
         ]
@@ -133,7 +131,7 @@ const contact = ({
         children: [
           makeContactLink({
             element: linkendIn,
-            icon: social.LINKEDIN,
+            icon: social.linkedin,
             isThemeDark
           })
         ]
@@ -147,7 +145,7 @@ const contact = ({
         children: [
           makeContactLink({
             element: address,
-            icon: icons.PIN,
+            icon: location.pin,
             isThemeDark
           })
         ]
@@ -160,7 +158,7 @@ const contact = ({
         element: actions2,
         elementStyles: {
           element: {
-            marginTop: Styles__namespace.token.spacing.sm
+            marginTop: token__namespace.spacing.sm
           }
         }
       })
@@ -171,7 +169,7 @@ const contact = ({
     children,
     elementStyles: {
       element: {
-        marginTop: `${Styles__namespace.token.spacing.sm}`
+        marginTop: `${token__namespace.spacing.sm}`
       }
     }
   });

package/dist/atomic/text-lockup/contact.js.map

@@ -1 +1 @@
-{"version":3,"file":"contact.js","sources":["../../../source/atomic/text-lockup/contact.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type PersonContactProps } from '../_types';\n\nconst makeIcon = ({\n  icon,\n  isThemeDark,\n}: {\n  icon: string;\n  isThemeDark?: boolean;\n}) => {\n  const iconElement = ElementModel.actions.iconSmall({\n    element: document.createElement('span'),\n    isThemeDark,\n  });\n\n  iconElement.element.innerHTML = icon;\n\n  return iconElement;\n};\n\nconst makeText = ({\n  text,\n  isThemeDark,\n}: {\n  text: string;\n  isThemeDark?: boolean;\n}) => {\n  const textElement = ElementModel.headline.sansSmaller({\n    element: document.createElement('span'),\n    isThemeDark,\n    elementStyles: {\n      element: {\n        color: `${Styles.token.color.gray.dark}`,\n      },\n    },\n  });\n\n  textElement.element.innerHTML = text;\n\n  return textElement;\n};\n\nconst makeContactLink = ({\n  element,\n  icon,\n  isThemeDark,\n}: {\n  element: HTMLElement | HTMLAnchorElement;\n  icon: string;\n  isThemeDark?: boolean;\n}) => {\n  const isLink =\n    element.getAttribute('href') && icon !== Utility.asset.icon.PIN;\n  const textSpan = makeText({ text: element.innerHTML, isThemeDark });\n  const iconSpan = makeIcon({ icon, isThemeDark });\n  const containerStyles = {\n    element: {\n      marginTop: '4px',\n      lineHeight: '1.2em',\n\n      [`&a:hover, &a:focus`]: {\n        textDecoration: 'underline',\n      },\n    },\n  };\n\n  if (isLink) {\n    const link = ElementModel.layout.gridInlineRow({\n      element: document.createElement('a'),\n      elementStyles: containerStyles,\n      isThemeDark,\n      children: [iconSpan, textSpan],\n    });\n\n    const ariaLabel = element.getAttribute('aria-label');\n\n    link.element.setAttribute('href', element.getAttribute('href') || '');\n    if (ariaLabel) link.element.setAttribute('aria-label', ariaLabel);\n\n    return link;\n  }\n\n  return ElementModel.layout.gridInlineRow({\n    element: document.createElement('div'),\n    elementStyles: containerStyles,\n    isThemeDark,\n    children: [iconSpan, textSpan],\n  });\n};\n\nexport default ({\n  actions,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactProps) => {\n  let children: ElementVisual[] = [];\n\n  if (phone) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-phone',\n        children: [\n          makeContactLink({\n            element: phone,\n            icon: Utility.asset.icon.PHONE,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (email) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-email',\n        children: [\n          makeContactLink({\n            element: email,\n            icon: Utility.asset.icon.EMAIL,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (linkendIn) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-linkedin',\n        children: [\n          makeContactLink({\n            element: linkendIn,\n            icon: Utility.asset.social.LINKEDIN,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (address) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-address',\n        children: [\n          makeContactLink({\n            element: address,\n            icon: Utility.asset.icon.PIN,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridInlineTabletRows({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'text-lockup-contact',\n    children,\n    elementStyles: {\n      element: {\n        marginTop: `${Styles.token.spacing.sm}`,\n      },\n    },\n  });\n};\n"],"names":["ElementModel.actions.iconSmall","ElementModel.headline.sansSmaller","Styles","Utility.asset.icon.PIN","ElementModel.layout.gridInlineRow","actions","ElementModel.createDiv","Utility.asset.icon.PHONE","Utility.asset.icon.EMAIL","Utility.asset.social.LINKEDIN","ElementModel.layout.gridInlineTabletRows"],"mappings":"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"}
+{"version":3,"file":"contact.js","sources":["../../../source/atomic/text-lockup/contact.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport {\n  email as iconEmail,\n  phone as iconPhone,\n} from '@universityofmaryland/web-icons-library/communication';\nimport { pin as iconPin } from '@universityofmaryland/web-icons-library/location';\nimport { linkedin as iconLinkedIn } from '@universityofmaryland/web-icons-library/social';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type PersonContactProps } from '../_types';\n\nconst makeIcon = ({\n  icon,\n  isThemeDark,\n}: {\n  icon: string;\n  isThemeDark?: boolean;\n}) => {\n  const iconElement = ElementModel.actions.iconSmall({\n    element: document.createElement('span'),\n    isThemeDark,\n  });\n\n  iconElement.element.innerHTML = icon;\n\n  return iconElement;\n};\n\nconst makeText = ({\n  text,\n  isThemeDark,\n}: {\n  text: string;\n  isThemeDark?: boolean;\n}) => {\n  const textElement = ElementModel.headline.sansSmaller({\n    element: document.createElement('span'),\n    isThemeDark,\n    elementStyles: {\n      element: {\n        color: `${token.color.gray.dark}`,\n      },\n    },\n  });\n\n  textElement.element.innerHTML = text;\n\n  return textElement;\n};\n\nconst makeContactLink = ({\n  element,\n  icon,\n  isThemeDark,\n}: {\n  element: HTMLElement | HTMLAnchorElement;\n  icon: string;\n  isThemeDark?: boolean;\n}) => {\n  const isLink = element.getAttribute('href') && icon !== iconPin;\n  const textSpan = makeText({ text: element.innerHTML, isThemeDark });\n  const iconSpan = makeIcon({ icon, isThemeDark });\n  const containerStyles = {\n    element: {\n      marginTop: '4px',\n      lineHeight: '1.2em',\n\n      [`&a:hover, &a:focus`]: {\n        textDecoration: 'underline',\n      },\n    },\n  };\n\n  if (isLink) {\n    const link = ElementModel.layout.gridInlineRow({\n      element: document.createElement('a'),\n      elementStyles: containerStyles,\n      isThemeDark,\n      children: [iconSpan, textSpan],\n    });\n\n    const ariaLabel = element.getAttribute('aria-label');\n\n    link.element.setAttribute('href', element.getAttribute('href') || '');\n    if (ariaLabel) link.element.setAttribute('aria-label', ariaLabel);\n\n    return link;\n  }\n\n  return ElementModel.layout.gridInlineRow({\n    element: document.createElement('div'),\n    elementStyles: containerStyles,\n    isThemeDark,\n    children: [iconSpan, textSpan],\n  });\n};\n\nexport default ({\n  actions,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactProps) => {\n  let children: ElementVisual[] = [];\n\n  if (phone) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-phone',\n        children: [\n          makeContactLink({\n            element: phone,\n            icon: iconPhone,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (email) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-email',\n        children: [\n          makeContactLink({\n            element: email,\n            icon: iconEmail,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (linkendIn) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-linkedin',\n        children: [\n          makeContactLink({\n            element: linkendIn,\n            icon: iconLinkedIn,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (address) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-address',\n        children: [\n          makeContactLink({\n            element: address,\n            icon: iconPin,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridInlineTabletRows({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'text-lockup-contact',\n    children,\n    elementStyles: {\n      element: {\n        marginTop: `${token.spacing.sm}`,\n      },\n    },\n  });\n};\n"],"names":["ElementModel.actions.iconSmall","ElementModel.headline.sansSmaller","token","iconPin","ElementModel.layout.gridInlineRow","actions","ElementModel.createDiv","iconPhone","iconEmail","iconLinkedIn","ElementModel.layout.gridInlineTabletRows"],"mappings":"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"}

package/dist/atomic/text-lockup/contact.mjs

@@ -1,9 +1,7 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
-import { PIN, PHONE, EMAIL } from "../../utilities/assets/icons.mjs";
-import { LINKEDIN } from "../../utilities/assets/social.mjs";
-import "../../node_modules/postcss/lib/postcss.mjs";
-import "../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../node_modules/postcss-js/index.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { phone, email } from "@universityofmaryland/web-icons-library/communication";
+import { pin } from "@universityofmaryland/web-icons-library/location";
+import { linkedin } from "@universityofmaryland/web-icons-library/social";
 import { createDiv } from "../../model/elements/index.mjs";
 import { gridInlineTabletRows, gridInlineRow } from "../../model/elements/layout.mjs";
 import { sansSmaller } from "../../model/elements/headline.mjs";
@@ -28,7 +26,7 @@ const makeText = ({
     isThemeDark,
     elementStyles: {
       element: {
-        color: `${Styles.token.color.gray.dark}`
+        color: `${token.color.gray.dark}`
       }
     }
   });
@@ -40,7 +38,7 @@ const makeContactLink = ({
   icon,
   isThemeDark
 }) => {
-  const isLink = element.getAttribute("href") && icon !== PIN;
+  const isLink = element.getAttribute("href") && icon !== pin;
   const textSpan = makeText({ text: element.innerHTML, isThemeDark });
   const iconSpan = makeIcon({ icon, isThemeDark });
   const containerStyles = {
@@ -74,34 +72,34 @@ const makeContactLink = ({
 const contact = ({
   actions,
   address,
-  email,
+  email: email$1,
   isThemeDark,
   linkendIn,
-  phone
+  phone: phone$1
 }) => {
   let children = [];
-  if (phone) {
+  if (phone$1) {
     children.push(
       createDiv({
         className: "text-lockup-contact-phone",
         children: [
           makeContactLink({
-            element: phone,
-            icon: PHONE,
+            element: phone$1,
+            icon: phone,
             isThemeDark
           })
         ]
       })
     );
   }
-  if (email) {
+  if (email$1) {
     children.push(
       createDiv({
         className: "text-lockup-contact-email",
         children: [
           makeContactLink({
-            element: email,
-            icon: EMAIL,
+            element: email$1,
+            icon: email,
             isThemeDark
           })
         ]
@@ -115,7 +113,7 @@ const contact = ({
         children: [
           makeContactLink({
             element: linkendIn,
-            icon: LINKEDIN,
+            icon: linkedin,
             isThemeDark
           })
         ]
@@ -129,7 +127,7 @@ const contact = ({
         children: [
           makeContactLink({
             element: address,
-            icon: PIN,
+            icon: pin,
             isThemeDark
           })
         ]
@@ -142,7 +140,7 @@ const contact = ({
         element: actions,
         elementStyles: {
           element: {
-            marginTop: Styles.token.spacing.sm
+            marginTop: token.spacing.sm
           }
         }
       })
@@ -153,7 +151,7 @@ const contact = ({
     children,
     elementStyles: {
       element: {
-        marginTop: `${Styles.token.spacing.sm}`
+        marginTop: `${token.spacing.sm}`
       }
     }
   });

package/dist/atomic/text-lockup/contact.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"contact.mjs","sources":["../../../source/atomic/text-lockup/contact.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type PersonContactProps } from '../_types';\n\nconst makeIcon = ({\n  icon,\n  isThemeDark,\n}: {\n  icon: string;\n  isThemeDark?: boolean;\n}) => {\n  const iconElement = ElementModel.actions.iconSmall({\n    element: document.createElement('span'),\n    isThemeDark,\n  });\n\n  iconElement.element.innerHTML = icon;\n\n  return iconElement;\n};\n\nconst makeText = ({\n  text,\n  isThemeDark,\n}: {\n  text: string;\n  isThemeDark?: boolean;\n}) => {\n  const textElement = ElementModel.headline.sansSmaller({\n    element: document.createElement('span'),\n    isThemeDark,\n    elementStyles: {\n      element: {\n        color: `${Styles.token.color.gray.dark}`,\n      },\n    },\n  });\n\n  textElement.element.innerHTML = text;\n\n  return textElement;\n};\n\nconst makeContactLink = ({\n  element,\n  icon,\n  isThemeDark,\n}: {\n  element: HTMLElement | HTMLAnchorElement;\n  icon: string;\n  isThemeDark?: boolean;\n}) => {\n  const isLink =\n    element.getAttribute('href') && icon !== Utility.asset.icon.PIN;\n  const textSpan = makeText({ text: element.innerHTML, isThemeDark });\n  const iconSpan = makeIcon({ icon, isThemeDark });\n  const containerStyles = {\n    element: {\n      marginTop: '4px',\n      lineHeight: '1.2em',\n\n      [`&a:hover, &a:focus`]: {\n        textDecoration: 'underline',\n      },\n    },\n  };\n\n  if (isLink) {\n    const link = ElementModel.layout.gridInlineRow({\n      element: document.createElement('a'),\n      elementStyles: containerStyles,\n      isThemeDark,\n      children: [iconSpan, textSpan],\n    });\n\n    const ariaLabel = element.getAttribute('aria-label');\n\n    link.element.setAttribute('href', element.getAttribute('href') || '');\n    if (ariaLabel) link.element.setAttribute('aria-label', ariaLabel);\n\n    return link;\n  }\n\n  return ElementModel.layout.gridInlineRow({\n    element: document.createElement('div'),\n    elementStyles: containerStyles,\n    isThemeDark,\n    children: [iconSpan, textSpan],\n  });\n};\n\nexport default ({\n  actions,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactProps) => {\n  let children: ElementVisual[] = [];\n\n  if (phone) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-phone',\n        children: [\n          makeContactLink({\n            element: phone,\n            icon: Utility.asset.icon.PHONE,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (email) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-email',\n        children: [\n          makeContactLink({\n            element: email,\n            icon: Utility.asset.icon.EMAIL,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (linkendIn) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-linkedin',\n        children: [\n          makeContactLink({\n            element: linkendIn,\n            icon: Utility.asset.social.LINKEDIN,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (address) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-address',\n        children: [\n          makeContactLink({\n            element: address,\n            icon: Utility.asset.icon.PIN,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridInlineTabletRows({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'text-lockup-contact',\n    children,\n    elementStyles: {\n      element: {\n        marginTop: `${Styles.token.spacing.sm}`,\n      },\n    },\n  });\n};\n"],"names":["ElementModel.actions.iconSmall","ElementModel.headline.sansSmaller","Utility.asset.icon.PIN","ElementModel.layout.gridInlineRow","ElementModel.createDiv","Utility.asset.icon.PHONE","Utility.asset.icon.EMAIL","Utility.asset.social.LINKEDIN","ElementModel.layout.gridInlineTabletRows"],"mappings":"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"}
+{"version":3,"file":"contact.mjs","sources":["../../../source/atomic/text-lockup/contact.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport {\n  email as iconEmail,\n  phone as iconPhone,\n} from '@universityofmaryland/web-icons-library/communication';\nimport { pin as iconPin } from '@universityofmaryland/web-icons-library/location';\nimport { linkedin as iconLinkedIn } from '@universityofmaryland/web-icons-library/social';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type PersonContactProps } from '../_types';\n\nconst makeIcon = ({\n  icon,\n  isThemeDark,\n}: {\n  icon: string;\n  isThemeDark?: boolean;\n}) => {\n  const iconElement = ElementModel.actions.iconSmall({\n    element: document.createElement('span'),\n    isThemeDark,\n  });\n\n  iconElement.element.innerHTML = icon;\n\n  return iconElement;\n};\n\nconst makeText = ({\n  text,\n  isThemeDark,\n}: {\n  text: string;\n  isThemeDark?: boolean;\n}) => {\n  const textElement = ElementModel.headline.sansSmaller({\n    element: document.createElement('span'),\n    isThemeDark,\n    elementStyles: {\n      element: {\n        color: `${token.color.gray.dark}`,\n      },\n    },\n  });\n\n  textElement.element.innerHTML = text;\n\n  return textElement;\n};\n\nconst makeContactLink = ({\n  element,\n  icon,\n  isThemeDark,\n}: {\n  element: HTMLElement | HTMLAnchorElement;\n  icon: string;\n  isThemeDark?: boolean;\n}) => {\n  const isLink = element.getAttribute('href') && icon !== iconPin;\n  const textSpan = makeText({ text: element.innerHTML, isThemeDark });\n  const iconSpan = makeIcon({ icon, isThemeDark });\n  const containerStyles = {\n    element: {\n      marginTop: '4px',\n      lineHeight: '1.2em',\n\n      [`&a:hover, &a:focus`]: {\n        textDecoration: 'underline',\n      },\n    },\n  };\n\n  if (isLink) {\n    const link = ElementModel.layout.gridInlineRow({\n      element: document.createElement('a'),\n      elementStyles: containerStyles,\n      isThemeDark,\n      children: [iconSpan, textSpan],\n    });\n\n    const ariaLabel = element.getAttribute('aria-label');\n\n    link.element.setAttribute('href', element.getAttribute('href') || '');\n    if (ariaLabel) link.element.setAttribute('aria-label', ariaLabel);\n\n    return link;\n  }\n\n  return ElementModel.layout.gridInlineRow({\n    element: document.createElement('div'),\n    elementStyles: containerStyles,\n    isThemeDark,\n    children: [iconSpan, textSpan],\n  });\n};\n\nexport default ({\n  actions,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactProps) => {\n  let children: ElementVisual[] = [];\n\n  if (phone) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-phone',\n        children: [\n          makeContactLink({\n            element: phone,\n            icon: iconPhone,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (email) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-email',\n        children: [\n          makeContactLink({\n            element: email,\n            icon: iconEmail,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (linkendIn) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-linkedin',\n        children: [\n          makeContactLink({\n            element: linkendIn,\n            icon: iconLinkedIn,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (address) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-address',\n        children: [\n          makeContactLink({\n            element: address,\n            icon: iconPin,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridInlineTabletRows({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'text-lockup-contact',\n    children,\n    elementStyles: {\n      element: {\n        marginTop: `${token.spacing.sm}`,\n      },\n    },\n  });\n};\n"],"names":["ElementModel.actions.iconSmall","ElementModel.headline.sansSmaller","iconPin","ElementModel.layout.gridInlineRow","email","phone","ElementModel.createDiv","iconPhone","iconEmail","iconLinkedIn","ElementModel.layout.gridInlineTabletRows"],"mappings":"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"}

package/dist/atomic/text-lockup/date.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/date.ts"],"names":[],"mappings":"AAGA,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;yBAoEc,OAAO,mBAAmB;;;;AAA1C,wBA0BE"}
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/date.ts"],"names":[],"mappings":"AAOA,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;yBAgEc,OAAO,mBAAmB;;;;AAA1C,wBA0BE"}

package/dist/atomic/text-lockup/date.js

@@ -1,7 +1,10 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const modify = require("../../utilities/markup/modify.js");
-const index = require("../../utilities/theme/index.js");
+const animation = require("@universityofmaryland/web-styles-library/animation");
+const token = require("@universityofmaryland/web-styles-library/token");
+const typography = require("@universityofmaryland/web-styles-library/typography");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
+const string = require("@universityofmaryland/web-utilities-library/string");
+const animation$1 = require("@universityofmaryland/web-utilities-library/animation");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -18,8 +21,9 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
-const { animation, token, typography } = Styles__namespace;
+const animation__namespace = /* @__PURE__ */ _interopNamespaceDefault(animation);
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
 const ATTRIBUTE_THEME = "theme";
 const THEME_DARK = "dark";
 const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${THEME_DARK}"]`;
@@ -27,38 +31,38 @@ const EVENT_DATE_CONTAINER = "event-lockup-container";
 const EVENT_HEADLINE = "event-lockup-headline";
 const HeadlineStyles = `
   .${EVENT_HEADLINE} {
-    margin-left: ${token.spacing.sm};
+    margin-left: ${token__namespace.spacing.sm};
   }
 
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
-    [`.${EVENT_HEADLINE}`]: typography.sans.large
+    [`.${EVENT_HEADLINE}`]: typography__namespace.sans.large
   }
 })}
 
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
-    [`.${EVENT_HEADLINE} *`]: typography.sans.large
+    [`.${EVENT_HEADLINE} *`]: typography__namespace.sans.large
   }
 })}
 
   @media (max-width: 767px) {
     .${EVENT_HEADLINE},
     .${EVENT_HEADLINE} * {
-      font-size: ${token.font.size.sm};
+      font-size: ${token__namespace.font.size.sm};
       font-weight: 600;
     }
   }
 
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
-    [`.${EVENT_HEADLINE} a`]: animation.line.slideUnderBlack
+    [`.${EVENT_HEADLINE} a`]: animation__namespace.line.slideUnderBlack
   }
 })}
 
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
-    [`.${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} a`]: animation.line.slideUnderWhite
+    [`.${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} a`]: animation__namespace.line.slideUnderWhite
   }
 })}
 `;
@@ -79,24 +83,24 @@ const ComponentStyles = `
 const date = (props) => {
   const { headline, dateSign, isThemeDark } = props;
   const container = document.createElement("div");
-  let styles = ComponentStyles;
+  let styles2 = ComponentStyles;
   container.classList.add(EVENT_DATE_CONTAINER);
   if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
   if (dateSign) {
     container.appendChild(dateSign.element);
-    styles += dateSign.styles;
+    styles2 += dateSign.styles;
   }
   if (headline) {
-    const modifiedText = modify.truncateText({
+    const modifiedText = string.truncateText({
       text: headline.innerHTML,
       maxTextSize: 50
     });
     headline.innerHTML = modifiedText;
     headline.classList.add(EVENT_HEADLINE);
-    modify.animationLinkSpan({ element: headline });
+    animation$1.wrapLinkForAnimation({ element: headline });
     container.appendChild(headline);
   }
-  return { element: container, styles };
+  return { element: container, styles: styles2 };
 };
 module.exports = date;
 //# sourceMappingURL=date.js.map

package/dist/atomic/text-lockup/date.js.map

@@ -1 +1 @@
-{"version":3,"file":"date.js","sources":["../../../source/atomic/text-lockup/date.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\ntype TypeEventLockupDate = {\n  headline: HTMLElement | null;\n  dateSign?: { element: HTMLElement; styles: string };\n  isThemeDark?: boolean;\n};\n\n// To Do - Refactor to use element model\n\nconst { animation, token, typography } = Styles;\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst EVENT_DATE_CONTAINER = 'event-lockup-container';\nconst EVENT_HEADLINE = 'event-lockup-headline';\n\n// prettier-ignore\nconst HeadlineStyles = `\n  .${EVENT_HEADLINE} {\n    margin-left: ${token.spacing.sm};\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${EVENT_HEADLINE}`]: typography.sans.large,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${EVENT_HEADLINE} *`]: typography.sans.large,\n    },\n  })}\n\n  @media (max-width: 767px) {\n    .${EVENT_HEADLINE},\n    .${EVENT_HEADLINE} * {\n      font-size: ${token.font.size.sm};\n      font-weight: 600;\n    }\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${EVENT_HEADLINE} a`]: animation.line.slideUnderBlack,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} a`]: animation.line.slideUnderWhite, \n    },\n  })}\n`;\n\n// prettier-ignore\nconst ComponentStyles = `\n  .${EVENT_DATE_CONTAINER} {\n    display: flex;\n    align-items: center;\n    text-align: left;\n  }\n  \n  .${EVENT_DATE_CONTAINER} * {\n    color: currentColor;\n  }\n\n\n  ${HeadlineStyles}\n`;\n\nexport default (props: TypeEventLockupDate) => {\n  const { headline, dateSign, isThemeDark } = props;\n  const container = document.createElement('div');\n  let styles = ComponentStyles;\n\n  container.classList.add(EVENT_DATE_CONTAINER);\n  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n  if (dateSign) {\n    container.appendChild(dateSign.element);\n    styles += dateSign.styles;\n  }\n\n  if (headline) {\n    const modifiedText = Utility.markup.modify.truncateText({\n      text: headline.innerHTML,\n      maxTextSize: 50,\n    });\n\n    headline.innerHTML = modifiedText;\n    headline.classList.add(EVENT_HEADLINE);\n    Utility.markup.modify.animationLinkSpan({ element: headline });\n    container.appendChild(headline);\n  }\n\n  return { element: container, styles };\n};\n"],"names":["Styles","Utility.theme.convertJSSObjectToStyles","Utility.markup.modify.truncateText","Utility.markup.modify.animationLinkSpan"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,EAAE,WAAW,OAAO,WAAA,IAAeA;AAEzC,MAAM,kBAAkB;AACxB,MAAM,aAAa;AACnB,MAAM,gBAAgB,IAAI,eAAe,KAAK,UAAU;AAExD,MAAM,uBAAuB;AAC7B,MAAM,iBAAiB;AAGvB,MAAM,iBAAiB;AAAA,KAClB,cAAc;AAAA,mBACA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG/BC,+BAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,EAAE,GAAG,WAAW,KAAK;AAAA,EAAA;AAE5C,CAAC,CAAC;AAAA;AAAA,IAEAA,+BAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,IAAI,GAAG,WAAW,KAAK;AAAA,EAAA;AAE9C,CAAC,CAAC;AAAA;AAAA;AAAA,OAGG,cAAc;AAAA,OACd,cAAc;AAAA,mBACF,MAAM,KAAK,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjCA,+BAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,IAAI,GAAG,UAAU,KAAK;AAAA,EAAA;AAE7C,CAAC,CAAC;AAAA;AAAA,IAEAA,+BAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,IAAI,oBAAoB,GAAG,aAAa,KAAK,cAAc,IAAI,GAAG,UAAU,KAAK;AAAA,EAAA;AAEtF,CAAC,CAAC;AAAA;AAIJ,MAAM,kBAAkB;AAAA,KACnB,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMpB,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrB,cAAc;AAAA;AAGlB,MAAA,OAAe,CAAC,UAA+B;AAC7C,QAAM,EAAE,UAAU,UAAU,YAAA,IAAgB;AAC5C,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,MAAI,SAAS;AAEb,YAAU,UAAU,IAAI,oBAAoB;AAC5C,MAAI,YAAa,WAAU,aAAa,iBAAiB,UAAU;AAEnE,MAAI,UAAU;AACZ,cAAU,YAAY,SAAS,OAAO;AACtC,cAAU,SAAS;AAAA,EACrB;AAEA,MAAI,UAAU;AACZ,UAAM,eAAeC,OAAAA,aAAmC;AAAA,MACtD,MAAM,SAAS;AAAA,MACf,aAAa;AAAA,IAAA,CACd;AAED,aAAS,YAAY;AACrB,aAAS,UAAU,IAAI,cAAc;AACrCC,6BAAwC,EAAE,SAAS,UAAU;AAC7D,cAAU,YAAY,QAAQ;AAAA,EAChC;AAEA,SAAO,EAAE,SAAS,WAAW,OAAA;AAC/B;;"}
+{"version":3,"file":"date.js","sources":["../../../source/atomic/text-lockup/date.ts"],"sourcesContent":["import * as animation from '@universityofmaryland/web-styles-library/animation';\nimport * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { truncateText } from '@universityofmaryland/web-utilities-library/string';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\n\ntype TypeEventLockupDate = {\n  headline: HTMLElement | null;\n  dateSign?: { element: HTMLElement; styles: string };\n  isThemeDark?: boolean;\n};\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst EVENT_DATE_CONTAINER = 'event-lockup-container';\nconst EVENT_HEADLINE = 'event-lockup-headline';\n\n// prettier-ignore\nconst HeadlineStyles = `\n  .${EVENT_HEADLINE} {\n    margin-left: ${token.spacing.sm};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE}`]: typography.sans.large,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE} *`]: typography.sans.large,\n    },\n  })}\n\n  @media (max-width: 767px) {\n    .${EVENT_HEADLINE},\n    .${EVENT_HEADLINE} * {\n      font-size: ${token.font.size.sm};\n      font-weight: 600;\n    }\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE} a`]: animation.line.slideUnderBlack,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} a`]: animation.line.slideUnderWhite,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst ComponentStyles = `\n  .${EVENT_DATE_CONTAINER} {\n    display: flex;\n    align-items: center;\n    text-align: left;\n  }\n  \n  .${EVENT_DATE_CONTAINER} * {\n    color: currentColor;\n  }\n\n\n  ${HeadlineStyles}\n`;\n\nexport default (props: TypeEventLockupDate) => {\n  const { headline, dateSign, isThemeDark } = props;\n  const container = document.createElement('div');\n  let styles = ComponentStyles;\n\n  container.classList.add(EVENT_DATE_CONTAINER);\n  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n  if (dateSign) {\n    container.appendChild(dateSign.element);\n    styles += dateSign.styles;\n  }\n\n  if (headline) {\n    const modifiedText = truncateText({\n      text: headline.innerHTML,\n      maxTextSize: 50,\n    });\n\n    headline.innerHTML = modifiedText;\n    headline.classList.add(EVENT_HEADLINE);\n    wrapLinkForAnimation({ element: headline });\n    container.appendChild(headline);\n  }\n\n  return { element: container, styles };\n};\n"],"names":["token","jssToCSS","typography","animation","styles","truncateText","wrapLinkForAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,kBAAkB;AACxB,MAAM,aAAa;AACnB,MAAM,gBAAgB,IAAI,eAAe,KAAK,UAAU;AAExD,MAAM,uBAAuB;AAC7B,MAAM,iBAAiB;AAGvB,MAAM,iBAAiB;AAAA,KAClB,cAAc;AAAA,mBACAA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG/BC,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,EAAE,GAAGC,sBAAW,KAAK;AAAA,EAAA;AAE5C,CAAC,CAAC;AAAA;AAAA,IAEAD,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,IAAI,GAAGC,sBAAW,KAAK;AAAA,EAAA;AAE9C,CAAC,CAAC;AAAA;AAAA;AAAA,OAGG,cAAc;AAAA,OACd,cAAc;AAAA,mBACFF,iBAAM,KAAK,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjCC,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,IAAI,GAAGE,qBAAU,KAAK;AAAA,EAAA;AAE7C,CAAC,CAAC;AAAA;AAAA,IAEAF,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,oBAAoB,GAAG,aAAa,KAAK,cAAc,IAAI,GAAGE,qBAAU,KAAK;AAAA,EAAA;AAEtF,CAAC,CAAC;AAAA;AAIJ,MAAM,kBAAkB;AAAA,KACnB,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMpB,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrB,cAAc;AAAA;AAGlB,MAAA,OAAe,CAAC,UAA+B;AAC7C,QAAM,EAAE,UAAU,UAAU,YAAA,IAAgB;AAC5C,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,MAAIC,UAAS;AAEb,YAAU,UAAU,IAAI,oBAAoB;AAC5C,MAAI,YAAa,WAAU,aAAa,iBAAiB,UAAU;AAEnE,MAAI,UAAU;AACZ,cAAU,YAAY,SAAS,OAAO;AACtC,IAAAA,WAAU,SAAS;AAAA,EACrB;AAEA,MAAI,UAAU;AACZ,UAAM,eAAeC,OAAAA,aAAa;AAAA,MAChC,MAAM,SAAS;AAAA,MACf,aAAa;AAAA,IAAA,CACd;AAED,aAAS,YAAY;AACrB,aAAS,UAAU,IAAI,cAAc;AACrCC,qCAAqB,EAAE,SAAS,UAAU;AAC1C,cAAU,YAAY,QAAQ;AAAA,EAChC;AAEA,SAAO,EAAE,SAAS,WAAW,QAAAF,QAAA;AAC/B;;"}