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

package/dist/atomic/animations/brand/chevron-scroll.mjs

@@ -1,4 +1,4 @@
-import { token } from "@universityofmaryland/web-styles-library";
+import * as token from "@universityofmaryland/web-styles-library/token";
 const ICON_CHEVRON_BIG = `<svg width="252" height="306" aria-hidden="true" viewBox="0 0 252 306" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M126 0H0L126 152.706L0 305.411H126L252 152.706L126 0Z" /></svg>`;
 const ICON_CHEVRON_SMALL = `<svg width="144" height="202" aria-hidden="true"  viewBox="0 0 144 202" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.3972 0H0L83.6028 100.765L0 201.529H60.3972L144 100.765L60.3972 0Z" /></svg>`;
 const ELEMENT_ANIMATION_BRAND_LOGO = "brand-logo-container";

package/dist/atomic/animations/brand/chevron-scroll.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"chevron-scroll.mjs","sources":["../../../../source/atomic/animations/brand/chevron-scroll.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\n\nconst ICON_CHEVRON_BIG = `<svg width=\"252\" height=\"306\" aria-hidden=\"true\" viewBox=\"0 0 252 306\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M126 0H0L126 152.706L0 305.411H126L252 152.706L126 0Z\" /></svg>`;\nconst ICON_CHEVRON_SMALL = `<svg width=\"144\" height=\"202\" aria-hidden=\"true\"  viewBox=\"0 0 144 202\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M60.3972 0H0L83.6028 100.765L0 201.529H60.3972L144 100.765L60.3972 0Z\" /></svg>`;\n\nconst ELEMENT_ANIMATION_BRAND_LOGO = 'brand-logo-container';\nconst ELEMENT_FIRST_CHEVRON = 'brand-logo-first-chevron';\nconst ELEMENT_SECOND_CHEVRON = 'brand-logo-second-chevron';\nconst ELEMENT_THIRD_CHEVRON = 'brand-logo-third-chevron';\n\nconst FirstChevronStyles = `\n  @keyframes chevron-one {\n    from { transform: translateX(-80%); }\n    to { transform: translateX(40%); }\n  }\n\n  .${ELEMENT_FIRST_CHEVRON} {\n    top: 0;\n    transform: translateX(-80%);\n  }\n\n  .${ELEMENT_FIRST_CHEVRON} svg {\n    fill: ${token.color.gold};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_FIRST_CHEVRON} {\n        transform: translateX(40%);\n        animation: chevron-one forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: contain;\n      }\n    }\n  }\n`;\n\nconst SecondChevronStyles = `\n  @keyframes chevron-two {\n    from { transform: translateX(-40%); }\n    to { transform: translateX(24%); }\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} {\n    top: 10%;\n    z-index: 99;\n    transform: translateX(-40%);\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_SECOND_CHEVRON} {\n       top: 95px;\n    }\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} svg {\n    fill: ${token.color.red};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_SECOND_CHEVRON} {\n        transform: translateX(24%);\n        animation: chevron-two forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n       animation-range-end: contain;\n      }\n    }\n  }\n`;\n\nconst ThirdChevronStyles = `\n  @keyframes chevron-three {\n    from { transform: translateX(-30%); }\n    to { transform: translateX(60%); }\n  }\n\n  .${ELEMENT_THIRD_CHEVRON} {\n    top: 25%;\n    transform: translateX(-30%);\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_THIRD_CHEVRON} {\n       top: 195px;\n    }\n  }\n\n  .${ELEMENT_THIRD_CHEVRON} svg {\n    fill: ${token.color.black};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_THIRD_CHEVRON} {\n        transform: translateX(60%);\n        animation: chevron-three forwards;\n        animation-timeline: view();\n        animation-range-start: 0;\n        animation-range-end: 100vh;\n      }\n    }\n  }\n`;\n\nconst STYLES_ANIMATION_BRAND_LOGO = `\n  .${ELEMENT_ANIMATION_BRAND_LOGO} {\n    position: relative;\n    height: 50vw;\n    width: 100vw;\n  }\n\n  .${ELEMENT_ANIMATION_BRAND_LOGO} > * {\n    position: absolute;\n    height: 100%;\n    right: 0;\n    transform: none;\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} svg,\n  .${ELEMENT_THIRD_CHEVRON} svg {\n    height: 10vw;\n    width: 8.2vw;\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_SECOND_CHEVRON} svg,\n    .${ELEMENT_THIRD_CHEVRON} svg {\n      height: 306px;\n      width: 252px;\n    }\n  }\n\n  .${FirstChevronStyles} svg {\n    height: 7vw;\n    width: 5vw;\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${FirstChevronStyles} svg {\n      height: 202px;\n      width: 144px;\n    }\n  }\n\n  ${FirstChevronStyles} \n  ${SecondChevronStyles} \n  ${ThirdChevronStyles} \n`;\n\nexport default () =>\n  (() => {\n    const container = document.createElement('div');\n    const first = document.createElement('div');\n    const second = document.createElement('div');\n    const third = document.createElement('div');\n\n    first.classList.add(ELEMENT_FIRST_CHEVRON);\n    first.innerHTML = ICON_CHEVRON_SMALL;\n\n    second.classList.add(ELEMENT_SECOND_CHEVRON);\n    second.innerHTML = ICON_CHEVRON_BIG;\n\n    third.classList.add(ELEMENT_THIRD_CHEVRON);\n    third.innerHTML = ICON_CHEVRON_BIG;\n\n    container.classList.add(ELEMENT_ANIMATION_BRAND_LOGO);\n    container.appendChild(first);\n    container.appendChild(second);\n    container.appendChild(third);\n\n    return {\n      element: container,\n      styles: STYLES_ANIMATION_BRAND_LOGO,\n    };\n  })();\n"],"names":[],"mappings":";AAEA,MAAM,mBAAmB;AACzB,MAAM,qBAAqB;AAE3B,MAAM,+BAA+B;AACrC,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAC/B,MAAM,wBAAwB;AAE9B,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKrB,qBAAqB;AAAA,YACd,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,SAKnB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW9B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMf,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKxB,sBAAsB;AAAA,YACf,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,SAKlB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW/B,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKd,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKvB,qBAAqB;AAAA,YACd,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,SAKpB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW9B,MAAM,8BAA8B;AAAA,KAC/B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAM5B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAO5B,sBAAsB;AAAA,KACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKd,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA,OACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKX,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA;AAGtB,MAAA,gBAAe,OACZ,MAAM;AACL,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAE1C,QAAM,UAAU,IAAI,qBAAqB;AACzC,QAAM,YAAY;AAElB,SAAO,UAAU,IAAI,sBAAsB;AAC3C,SAAO,YAAY;AAEnB,QAAM,UAAU,IAAI,qBAAqB;AACzC,QAAM,YAAY;AAElB,YAAU,UAAU,IAAI,4BAA4B;AACpD,YAAU,YAAY,KAAK;AAC3B,YAAU,YAAY,MAAM;AAC5B,YAAU,YAAY,KAAK;AAE3B,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA;AAEZ,GAAA;"}
+{"version":3,"file":"chevron-scroll.mjs","sources":["../../../../source/atomic/animations/brand/chevron-scroll.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\n\nconst ICON_CHEVRON_BIG = `<svg width=\"252\" height=\"306\" aria-hidden=\"true\" viewBox=\"0 0 252 306\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M126 0H0L126 152.706L0 305.411H126L252 152.706L126 0Z\" /></svg>`;\nconst ICON_CHEVRON_SMALL = `<svg width=\"144\" height=\"202\" aria-hidden=\"true\"  viewBox=\"0 0 144 202\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M60.3972 0H0L83.6028 100.765L0 201.529H60.3972L144 100.765L60.3972 0Z\" /></svg>`;\n\nconst ELEMENT_ANIMATION_BRAND_LOGO = 'brand-logo-container';\nconst ELEMENT_FIRST_CHEVRON = 'brand-logo-first-chevron';\nconst ELEMENT_SECOND_CHEVRON = 'brand-logo-second-chevron';\nconst ELEMENT_THIRD_CHEVRON = 'brand-logo-third-chevron';\n\nconst FirstChevronStyles = `\n  @keyframes chevron-one {\n    from { transform: translateX(-80%); }\n    to { transform: translateX(40%); }\n  }\n\n  .${ELEMENT_FIRST_CHEVRON} {\n    top: 0;\n    transform: translateX(-80%);\n  }\n\n  .${ELEMENT_FIRST_CHEVRON} svg {\n    fill: ${token.color.gold};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_FIRST_CHEVRON} {\n        transform: translateX(40%);\n        animation: chevron-one forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: contain;\n      }\n    }\n  }\n`;\n\nconst SecondChevronStyles = `\n  @keyframes chevron-two {\n    from { transform: translateX(-40%); }\n    to { transform: translateX(24%); }\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} {\n    top: 10%;\n    z-index: 99;\n    transform: translateX(-40%);\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_SECOND_CHEVRON} {\n       top: 95px;\n    }\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} svg {\n    fill: ${token.color.red};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_SECOND_CHEVRON} {\n        transform: translateX(24%);\n        animation: chevron-two forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n       animation-range-end: contain;\n      }\n    }\n  }\n`;\n\nconst ThirdChevronStyles = `\n  @keyframes chevron-three {\n    from { transform: translateX(-30%); }\n    to { transform: translateX(60%); }\n  }\n\n  .${ELEMENT_THIRD_CHEVRON} {\n    top: 25%;\n    transform: translateX(-30%);\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_THIRD_CHEVRON} {\n       top: 195px;\n    }\n  }\n\n  .${ELEMENT_THIRD_CHEVRON} svg {\n    fill: ${token.color.black};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_THIRD_CHEVRON} {\n        transform: translateX(60%);\n        animation: chevron-three forwards;\n        animation-timeline: view();\n        animation-range-start: 0;\n        animation-range-end: 100vh;\n      }\n    }\n  }\n`;\n\nconst STYLES_ANIMATION_BRAND_LOGO = `\n  .${ELEMENT_ANIMATION_BRAND_LOGO} {\n    position: relative;\n    height: 50vw;\n    width: 100vw;\n  }\n\n  .${ELEMENT_ANIMATION_BRAND_LOGO} > * {\n    position: absolute;\n    height: 100%;\n    right: 0;\n    transform: none;\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} svg,\n  .${ELEMENT_THIRD_CHEVRON} svg {\n    height: 10vw;\n    width: 8.2vw;\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_SECOND_CHEVRON} svg,\n    .${ELEMENT_THIRD_CHEVRON} svg {\n      height: 306px;\n      width: 252px;\n    }\n  }\n\n  .${FirstChevronStyles} svg {\n    height: 7vw;\n    width: 5vw;\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${FirstChevronStyles} svg {\n      height: 202px;\n      width: 144px;\n    }\n  }\n\n  ${FirstChevronStyles} \n  ${SecondChevronStyles} \n  ${ThirdChevronStyles} \n`;\n\nexport default () =>\n  (() => {\n    const container = document.createElement('div');\n    const first = document.createElement('div');\n    const second = document.createElement('div');\n    const third = document.createElement('div');\n\n    first.classList.add(ELEMENT_FIRST_CHEVRON);\n    first.innerHTML = ICON_CHEVRON_SMALL;\n\n    second.classList.add(ELEMENT_SECOND_CHEVRON);\n    second.innerHTML = ICON_CHEVRON_BIG;\n\n    third.classList.add(ELEMENT_THIRD_CHEVRON);\n    third.innerHTML = ICON_CHEVRON_BIG;\n\n    container.classList.add(ELEMENT_ANIMATION_BRAND_LOGO);\n    container.appendChild(first);\n    container.appendChild(second);\n    container.appendChild(third);\n\n    return {\n      element: container,\n      styles: STYLES_ANIMATION_BRAND_LOGO,\n    };\n  })();\n"],"names":[],"mappings":";AAEA,MAAM,mBAAmB;AACzB,MAAM,qBAAqB;AAE3B,MAAM,+BAA+B;AACrC,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAC/B,MAAM,wBAAwB;AAE9B,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKrB,qBAAqB;AAAA,YACd,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,SAKnB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW9B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMf,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKxB,sBAAsB;AAAA,YACf,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,SAKlB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW/B,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKd,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKvB,qBAAqB;AAAA,YACd,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,SAKpB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW9B,MAAM,8BAA8B;AAAA,KAC/B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAM5B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAO5B,sBAAsB;AAAA,KACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKd,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA,OACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKX,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA;AAGtB,MAAA,gBAAe,OACZ,MAAM;AACL,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAE1C,QAAM,UAAU,IAAI,qBAAqB;AACzC,QAAM,YAAY;AAElB,SAAO,UAAU,IAAI,sBAAsB;AAC3C,SAAO,YAAY;AAEnB,QAAM,UAAU,IAAI,qBAAqB;AACzC,QAAM,YAAY;AAElB,YAAU,UAAU,IAAI,4BAA4B;AACpD,YAAU,YAAY,KAAK;AAC3B,YAAU,YAAY,MAAM;AAC5B,YAAU,YAAY,KAAK;AAE3B,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA;AAEZ,GAAA;"}

package/dist/atomic/assets/image/gif.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gif.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/gif.ts"],"names":[],"mappings":"yBAiHgB,cAEb;IACD,OAAO,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;CAC/C;;;;;AAJD,wBAyBE"}
+{"version":3,"file":"gif.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/gif.ts"],"names":[],"mappings":"yBAqHgB,cAEb;IACD,OAAO,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;CAC/C;;;;;AAJD,wBAyBE"}

package/dist/atomic/assets/image/gif.js

@@ -1,9 +1,6 @@
 "use strict";
-const icons = require("../../../utilities/assets/icons.js");
-const index = require("../../../utilities/performance/index.js");
-require("../../../node_modules/postcss/lib/postcss.js");
-require("../../../node_modules/postcss-nesting/dist/index.js");
-require("../../../node_modules/postcss-js/index.js");
+const performance = require("@universityofmaryland/web-utilities-library/performance");
+const controls = require("@universityofmaryland/web-icons-library/controls");
 require("../../../model/modifiers/index.js");
 require("@universityofmaryland/web-styles-library");
 const assets = require("../../../model/elements/assets.js");
@@ -22,13 +19,13 @@ const applyGifToggle = (image, container) => {
   const button = document.createElement("button");
   const setButtonPlay = () => {
     button.setAttribute("aria-label", "Pause");
-    button.innerHTML = icons.PAUSE;
+    button.innerHTML = controls.pause;
     canvas.style.opacity = "0";
     image.style.opacity = "1";
   };
   const setButtonPause = () => {
     button.setAttribute("aria-label", "Play");
-    button.innerHTML = icons.PLAY;
+    button.innerHTML = controls.play;
     canvas.style.opacity = "1";
     image.style.opacity = "0";
   };
@@ -84,7 +81,7 @@ const applyGifToggle = (image, container) => {
   });
   window.addEventListener(
     "resize",
-    index.debounce(() => {
+    performance.debounce(() => {
       sizeCanvas({ container });
     }, 50)
   );

package/dist/atomic/assets/image/gif.js.map

@@ -1 +1 @@
-{"version":3,"file":"gif.js","sources":["../../../../source/atomic/assets/image/gif.ts"],"sourcesContent":["import * as Utilities from 'utilities';\nimport { ElementModel } from 'model';\n\nconst extractImageElement = (\n  element: HTMLImageElement | HTMLAnchorElement,\n): HTMLImageElement | null => {\n  if (element instanceof HTMLImageElement) {\n    return element;\n  }\n\n  if (element instanceof HTMLAnchorElement) {\n    return element.querySelector('img');\n  }\n\n  return null;\n};\n\nconst applyGifToggle = (image: HTMLImageElement, container: HTMLElement) => {\n  const canvas = document.createElement('canvas');\n  const button = document.createElement('button');\n  const setButtonPlay = () => {\n    button.setAttribute('aria-label', 'Pause');\n    button.innerHTML = Utilities.asset.icon.PAUSE;\n    canvas.style.opacity = '0';\n    image.style.opacity = '1';\n  };\n  const setButtonPause = () => {\n    button.setAttribute('aria-label', 'Play');\n    button.innerHTML = Utilities.asset.icon.PLAY;\n    canvas.style.opacity = '1';\n    image.style.opacity = '0';\n  };\n  const sizeCanvas = ({ container }: { container: HTMLElement | null }) => {\n    if (!container) return;\n    const image = container.querySelector('img');\n    const canvas = container.querySelector('canvas') as HTMLCanvasElement;\n\n    if (!container || !canvas || !image) return;\n\n    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;\n\n    // Get container dimensions\n    const containerWidth = container.clientWidth;\n    const containerHeight = container.clientHeight;\n\n    // Set canvas display dimensions to match container\n    canvas.style.width = '100%';\n    canvas.style.height = `${image.clientHeight}px`;\n    canvas.style.position = 'absolute';\n    canvas.style.top = '0';\n    canvas.style.left = '0';\n\n    // Set canvas actual dimensions\n    canvas.width = containerWidth;\n    canvas.height = containerHeight;\n\n    // Calculate dimensions to maintain aspect ratio while covering\n    const imgRatio = image.naturalWidth / image.naturalHeight;\n    const containerRatio = containerWidth / containerHeight;\n\n    let drawWidth,\n      drawHeight,\n      offsetX = 0,\n      offsetY = 0;\n\n    if (imgRatio > containerRatio) {\n      // Image is wider than container relative to height\n      drawHeight = containerHeight;\n      drawWidth = image.naturalWidth * (containerHeight / image.naturalHeight);\n      offsetX = (containerWidth - drawWidth) / 2;\n    } else {\n      // Image is taller than container relative to width\n      drawWidth = containerWidth;\n      drawHeight = image.naturalHeight * (containerWidth / image.naturalWidth);\n      offsetY = (containerHeight - drawHeight) / 2;\n    }\n\n    // Clear the canvas and draw the image with cover behavior\n    ctx.clearRect(0, 0, containerWidth, containerHeight);\n    ctx.imageSmoothingEnabled = true;\n    ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight);\n  };\n  let isPlaying = true;\n\n  button.setAttribute('type', 'button');\n  button.addEventListener('click', (event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (isPlaying) {\n      setButtonPause();\n      isPlaying = false;\n    } else {\n      setButtonPlay();\n      isPlaying = true;\n    }\n  });\n\n  image.addEventListener('load', () => {\n    container.appendChild(canvas);\n    container.appendChild(button);\n    setButtonPlay();\n    sizeCanvas({ container });\n  });\n\n  window.addEventListener(\n    'resize',\n    Utilities.performance.debounce(() => {\n      sizeCanvas({ container });\n    }, 50),\n  );\n};\n\nexport default ({\n  element,\n}: {\n  element: HTMLImageElement | HTMLAnchorElement;\n}) => {\n  const image = extractImageElement(element);\n\n  if (!image) {\n    throw new Error('No valid image element found');\n  }\n\n  const isAnchor = element instanceof HTMLAnchorElement;\n  const container = isAnchor ? element : document.createElement('div');\n\n  const composite = ElementModel.assets.gifToggle({\n    element: container,\n  });\n\n  if (!isAnchor) {\n    container.appendChild(element);\n  }\n\n  applyGifToggle(image, container);\n\n  return composite;\n};\n"],"names":["Utilities.asset.icon.PAUSE","Utilities.asset.icon.PLAY","container","image","canvas","Utilities.performance.debounce","ElementModel.assets.gifToggle"],"mappings":"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"}
+{"version":3,"file":"gif.js","sources":["../../../../source/atomic/assets/image/gif.ts"],"sourcesContent":["import { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\nimport { ElementModel } from 'model';\n\nconst extractImageElement = (\n  element: HTMLImageElement | HTMLAnchorElement,\n): HTMLImageElement | null => {\n  if (element instanceof HTMLImageElement) {\n    return element;\n  }\n\n  if (element instanceof HTMLAnchorElement) {\n    return element.querySelector('img');\n  }\n\n  return null;\n};\n\nconst applyGifToggle = (image: HTMLImageElement, container: HTMLElement) => {\n  const canvas = document.createElement('canvas');\n  const button = document.createElement('button');\n  const setButtonPlay = () => {\n    button.setAttribute('aria-label', 'Pause');\n    button.innerHTML = iconPause;\n    canvas.style.opacity = '0';\n    image.style.opacity = '1';\n  };\n  const setButtonPause = () => {\n    button.setAttribute('aria-label', 'Play');\n    button.innerHTML = iconPlay;\n    canvas.style.opacity = '1';\n    image.style.opacity = '0';\n  };\n  const sizeCanvas = ({ container }: { container: HTMLElement | null }) => {\n    if (!container) return;\n    const image = container.querySelector('img');\n    const canvas = container.querySelector('canvas') as HTMLCanvasElement;\n\n    if (!container || !canvas || !image) return;\n\n    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;\n\n    // Get container dimensions\n    const containerWidth = container.clientWidth;\n    const containerHeight = container.clientHeight;\n\n    // Set canvas display dimensions to match container\n    canvas.style.width = '100%';\n    canvas.style.height = `${image.clientHeight}px`;\n    canvas.style.position = 'absolute';\n    canvas.style.top = '0';\n    canvas.style.left = '0';\n\n    // Set canvas actual dimensions\n    canvas.width = containerWidth;\n    canvas.height = containerHeight;\n\n    // Calculate dimensions to maintain aspect ratio while covering\n    const imgRatio = image.naturalWidth / image.naturalHeight;\n    const containerRatio = containerWidth / containerHeight;\n\n    let drawWidth,\n      drawHeight,\n      offsetX = 0,\n      offsetY = 0;\n\n    if (imgRatio > containerRatio) {\n      // Image is wider than container relative to height\n      drawHeight = containerHeight;\n      drawWidth = image.naturalWidth * (containerHeight / image.naturalHeight);\n      offsetX = (containerWidth - drawWidth) / 2;\n    } else {\n      // Image is taller than container relative to width\n      drawWidth = containerWidth;\n      drawHeight = image.naturalHeight * (containerWidth / image.naturalWidth);\n      offsetY = (containerHeight - drawHeight) / 2;\n    }\n\n    // Clear the canvas and draw the image with cover behavior\n    ctx.clearRect(0, 0, containerWidth, containerHeight);\n    ctx.imageSmoothingEnabled = true;\n    ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight);\n  };\n  let isPlaying = true;\n\n  button.setAttribute('type', 'button');\n  button.addEventListener('click', (event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (isPlaying) {\n      setButtonPause();\n      isPlaying = false;\n    } else {\n      setButtonPlay();\n      isPlaying = true;\n    }\n  });\n\n  image.addEventListener('load', () => {\n    container.appendChild(canvas);\n    container.appendChild(button);\n    setButtonPlay();\n    sizeCanvas({ container });\n  });\n\n  window.addEventListener(\n    'resize',\n    debounce(() => {\n      sizeCanvas({ container });\n    }, 50),\n  );\n};\n\nexport default ({\n  element,\n}: {\n  element: HTMLImageElement | HTMLAnchorElement;\n}) => {\n  const image = extractImageElement(element);\n\n  if (!image) {\n    throw new Error('No valid image element found');\n  }\n\n  const isAnchor = element instanceof HTMLAnchorElement;\n  const container = isAnchor ? element : document.createElement('div');\n\n  const composite = ElementModel.assets.gifToggle({\n    element: container,\n  });\n\n  if (!isAnchor) {\n    container.appendChild(element);\n  }\n\n  applyGifToggle(image, container);\n\n  return composite;\n};\n"],"names":["iconPause","iconPlay","container","image","canvas","debounce","ElementModel.assets.gifToggle"],"mappings":"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"}

package/dist/atomic/assets/image/gif.mjs

@@ -1,8 +1,5 @@
-import { PLAY, PAUSE } from "../../../utilities/assets/icons.mjs";
-import { debounce } from "../../../utilities/performance/index.mjs";
-import "../../../node_modules/postcss/lib/postcss.mjs";
-import "../../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../../node_modules/postcss-js/index.mjs";
+import { debounce } from "@universityofmaryland/web-utilities-library/performance";
+import { play, pause } from "@universityofmaryland/web-icons-library/controls";
 import "../../../model/modifiers/index.mjs";
 import "@universityofmaryland/web-styles-library";
 import { gifToggle as gifToggle$1 } from "../../../model/elements/assets.mjs";
@@ -21,13 +18,13 @@ const applyGifToggle = (image, container) => {
   const button = document.createElement("button");
   const setButtonPlay = () => {
     button.setAttribute("aria-label", "Pause");
-    button.innerHTML = PAUSE;
+    button.innerHTML = pause;
     canvas.style.opacity = "0";
     image.style.opacity = "1";
   };
   const setButtonPause = () => {
     button.setAttribute("aria-label", "Play");
-    button.innerHTML = PLAY;
+    button.innerHTML = play;
     canvas.style.opacity = "1";
     image.style.opacity = "0";
   };

package/dist/atomic/assets/image/gif.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"gif.mjs","sources":["../../../../source/atomic/assets/image/gif.ts"],"sourcesContent":["import * as Utilities from 'utilities';\nimport { ElementModel } from 'model';\n\nconst extractImageElement = (\n  element: HTMLImageElement | HTMLAnchorElement,\n): HTMLImageElement | null => {\n  if (element instanceof HTMLImageElement) {\n    return element;\n  }\n\n  if (element instanceof HTMLAnchorElement) {\n    return element.querySelector('img');\n  }\n\n  return null;\n};\n\nconst applyGifToggle = (image: HTMLImageElement, container: HTMLElement) => {\n  const canvas = document.createElement('canvas');\n  const button = document.createElement('button');\n  const setButtonPlay = () => {\n    button.setAttribute('aria-label', 'Pause');\n    button.innerHTML = Utilities.asset.icon.PAUSE;\n    canvas.style.opacity = '0';\n    image.style.opacity = '1';\n  };\n  const setButtonPause = () => {\n    button.setAttribute('aria-label', 'Play');\n    button.innerHTML = Utilities.asset.icon.PLAY;\n    canvas.style.opacity = '1';\n    image.style.opacity = '0';\n  };\n  const sizeCanvas = ({ container }: { container: HTMLElement | null }) => {\n    if (!container) return;\n    const image = container.querySelector('img');\n    const canvas = container.querySelector('canvas') as HTMLCanvasElement;\n\n    if (!container || !canvas || !image) return;\n\n    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;\n\n    // Get container dimensions\n    const containerWidth = container.clientWidth;\n    const containerHeight = container.clientHeight;\n\n    // Set canvas display dimensions to match container\n    canvas.style.width = '100%';\n    canvas.style.height = `${image.clientHeight}px`;\n    canvas.style.position = 'absolute';\n    canvas.style.top = '0';\n    canvas.style.left = '0';\n\n    // Set canvas actual dimensions\n    canvas.width = containerWidth;\n    canvas.height = containerHeight;\n\n    // Calculate dimensions to maintain aspect ratio while covering\n    const imgRatio = image.naturalWidth / image.naturalHeight;\n    const containerRatio = containerWidth / containerHeight;\n\n    let drawWidth,\n      drawHeight,\n      offsetX = 0,\n      offsetY = 0;\n\n    if (imgRatio > containerRatio) {\n      // Image is wider than container relative to height\n      drawHeight = containerHeight;\n      drawWidth = image.naturalWidth * (containerHeight / image.naturalHeight);\n      offsetX = (containerWidth - drawWidth) / 2;\n    } else {\n      // Image is taller than container relative to width\n      drawWidth = containerWidth;\n      drawHeight = image.naturalHeight * (containerWidth / image.naturalWidth);\n      offsetY = (containerHeight - drawHeight) / 2;\n    }\n\n    // Clear the canvas and draw the image with cover behavior\n    ctx.clearRect(0, 0, containerWidth, containerHeight);\n    ctx.imageSmoothingEnabled = true;\n    ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight);\n  };\n  let isPlaying = true;\n\n  button.setAttribute('type', 'button');\n  button.addEventListener('click', (event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (isPlaying) {\n      setButtonPause();\n      isPlaying = false;\n    } else {\n      setButtonPlay();\n      isPlaying = true;\n    }\n  });\n\n  image.addEventListener('load', () => {\n    container.appendChild(canvas);\n    container.appendChild(button);\n    setButtonPlay();\n    sizeCanvas({ container });\n  });\n\n  window.addEventListener(\n    'resize',\n    Utilities.performance.debounce(() => {\n      sizeCanvas({ container });\n    }, 50),\n  );\n};\n\nexport default ({\n  element,\n}: {\n  element: HTMLImageElement | HTMLAnchorElement;\n}) => {\n  const image = extractImageElement(element);\n\n  if (!image) {\n    throw new Error('No valid image element found');\n  }\n\n  const isAnchor = element instanceof HTMLAnchorElement;\n  const container = isAnchor ? element : document.createElement('div');\n\n  const composite = ElementModel.assets.gifToggle({\n    element: container,\n  });\n\n  if (!isAnchor) {\n    container.appendChild(element);\n  }\n\n  applyGifToggle(image, container);\n\n  return composite;\n};\n"],"names":["Utilities.asset.icon.PAUSE","Utilities.asset.icon.PLAY","container","image","canvas","Utilities.performance.debounce","ElementModel.assets.gifToggle"],"mappings":"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"}
+{"version":3,"file":"gif.mjs","sources":["../../../../source/atomic/assets/image/gif.ts"],"sourcesContent":["import { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\nimport { ElementModel } from 'model';\n\nconst extractImageElement = (\n  element: HTMLImageElement | HTMLAnchorElement,\n): HTMLImageElement | null => {\n  if (element instanceof HTMLImageElement) {\n    return element;\n  }\n\n  if (element instanceof HTMLAnchorElement) {\n    return element.querySelector('img');\n  }\n\n  return null;\n};\n\nconst applyGifToggle = (image: HTMLImageElement, container: HTMLElement) => {\n  const canvas = document.createElement('canvas');\n  const button = document.createElement('button');\n  const setButtonPlay = () => {\n    button.setAttribute('aria-label', 'Pause');\n    button.innerHTML = iconPause;\n    canvas.style.opacity = '0';\n    image.style.opacity = '1';\n  };\n  const setButtonPause = () => {\n    button.setAttribute('aria-label', 'Play');\n    button.innerHTML = iconPlay;\n    canvas.style.opacity = '1';\n    image.style.opacity = '0';\n  };\n  const sizeCanvas = ({ container }: { container: HTMLElement | null }) => {\n    if (!container) return;\n    const image = container.querySelector('img');\n    const canvas = container.querySelector('canvas') as HTMLCanvasElement;\n\n    if (!container || !canvas || !image) return;\n\n    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;\n\n    // Get container dimensions\n    const containerWidth = container.clientWidth;\n    const containerHeight = container.clientHeight;\n\n    // Set canvas display dimensions to match container\n    canvas.style.width = '100%';\n    canvas.style.height = `${image.clientHeight}px`;\n    canvas.style.position = 'absolute';\n    canvas.style.top = '0';\n    canvas.style.left = '0';\n\n    // Set canvas actual dimensions\n    canvas.width = containerWidth;\n    canvas.height = containerHeight;\n\n    // Calculate dimensions to maintain aspect ratio while covering\n    const imgRatio = image.naturalWidth / image.naturalHeight;\n    const containerRatio = containerWidth / containerHeight;\n\n    let drawWidth,\n      drawHeight,\n      offsetX = 0,\n      offsetY = 0;\n\n    if (imgRatio > containerRatio) {\n      // Image is wider than container relative to height\n      drawHeight = containerHeight;\n      drawWidth = image.naturalWidth * (containerHeight / image.naturalHeight);\n      offsetX = (containerWidth - drawWidth) / 2;\n    } else {\n      // Image is taller than container relative to width\n      drawWidth = containerWidth;\n      drawHeight = image.naturalHeight * (containerWidth / image.naturalWidth);\n      offsetY = (containerHeight - drawHeight) / 2;\n    }\n\n    // Clear the canvas and draw the image with cover behavior\n    ctx.clearRect(0, 0, containerWidth, containerHeight);\n    ctx.imageSmoothingEnabled = true;\n    ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight);\n  };\n  let isPlaying = true;\n\n  button.setAttribute('type', 'button');\n  button.addEventListener('click', (event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (isPlaying) {\n      setButtonPause();\n      isPlaying = false;\n    } else {\n      setButtonPlay();\n      isPlaying = true;\n    }\n  });\n\n  image.addEventListener('load', () => {\n    container.appendChild(canvas);\n    container.appendChild(button);\n    setButtonPlay();\n    sizeCanvas({ container });\n  });\n\n  window.addEventListener(\n    'resize',\n    debounce(() => {\n      sizeCanvas({ container });\n    }, 50),\n  );\n};\n\nexport default ({\n  element,\n}: {\n  element: HTMLImageElement | HTMLAnchorElement;\n}) => {\n  const image = extractImageElement(element);\n\n  if (!image) {\n    throw new Error('No valid image element found');\n  }\n\n  const isAnchor = element instanceof HTMLAnchorElement;\n  const container = isAnchor ? element : document.createElement('div');\n\n  const composite = ElementModel.assets.gifToggle({\n    element: container,\n  });\n\n  if (!isAnchor) {\n    container.appendChild(element);\n  }\n\n  applyGifToggle(image, container);\n\n  return composite;\n};\n"],"names":["iconPause","iconPlay","container","image","canvas","ElementModel.assets.gifToggle"],"mappings":"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"}

package/dist/atomic/assets/video/observed-auto-play.js

@@ -1,9 +1,6 @@
 "use strict";
+const accessibility = require("@universityofmaryland/web-utilities-library/accessibility");
 const toggle = require("./toggle.js");
-const index = require("../../../utilities/accessibility/index.js");
-require("../../../node_modules/postcss/lib/postcss.js");
-require("../../../node_modules/postcss-nesting/dist/index.js");
-require("../../../node_modules/postcss-js/index.js");
 const observedAutoPlay = ({
   video,
   isAutoplay = false,
@@ -49,7 +46,7 @@ const observedAutoPlay = ({
     isScaled,
     callback
   });
-  if (!index.isPrefferdReducedMotion() && isAutoplay) {
+  if (!accessibility.isPreferredReducedMotion() && isAutoplay) {
     observer.observe(composite.element);
   }
   return composite;

package/dist/atomic/assets/video/observed-auto-play.js.map

@@ -1 +1 @@
-{"version":3,"file":"observed-auto-play.js","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"sourcesContent":["import { default as toggle } from './toggle';\nimport * as Utility from 'utilities';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n}\n\nexport default ({\n  video,\n  isAutoplay = false,\n  isScaled = false,\n  additionalElementStyles,\n}: CardVideoShortProps) =>\n  (() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            if (video.readyState >= 2) {\n              composite.events.setPlay();\n            } else {\n              video.addEventListener('loadeddata', composite.events.setPlay, {\n                once: true,\n              });\n\n              if (video.readyState === 0) {\n                video.load();\n              }\n            }\n          } else {\n            composite.events.setPause();\n          }\n        });\n      },\n      {\n        threshold: 0.25,\n      },\n    );\n    const callback = (isPlaying: boolean) => {\n      if (isPlaying && observer) {\n        observer.disconnect();\n      }\n    };\n\n    video.removeAttribute('controls');\n    video.setAttribute('preload', 'true');\n    video.setAttribute('playsinline', '');\n    video.setAttribute('muted', '');\n    video.setAttribute('loop', '');\n\n    const composite = toggle({\n      video,\n      additionalElementStyles,\n      isScaled,\n      callback,\n    });\n\n    if (!Utility.accessibility.isPrefferdReducedMotion() && isAutoplay) {\n      observer.observe(composite.element);\n    }\n\n    return composite;\n  })();\n"],"names":["Utility.accessibility.isPrefferdReducedMotion"],"mappings":";;;;;;AAUA,MAAA,mBAAe,CAAC;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX;AACF,OACG,MAAM;AACL,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,cAAI,MAAM,cAAc,GAAG;AACzB,sBAAU,OAAO,QAAA;AAAA,UACnB,OAAO;AACL,kBAAM,iBAAiB,cAAc,UAAU,OAAO,SAAS;AAAA,cAC7D,MAAM;AAAA,YAAA,CACP;AAED,gBAAI,MAAM,eAAe,GAAG;AAC1B,oBAAM,KAAA;AAAA,YACR;AAAA,UACF;AAAA,QACF,OAAO;AACL,oBAAU,OAAO,SAAA;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,WAAW;AAAA,IAAA;AAAA,EACb;AAEF,QAAM,WAAW,CAAC,cAAuB;AACvC,QAAI,aAAa,UAAU;AACzB,eAAS,WAAA;AAAA,IACX;AAAA,EACF;AAEA,QAAM,gBAAgB,UAAU;AAChC,QAAM,aAAa,WAAW,MAAM;AACpC,QAAM,aAAa,eAAe,EAAE;AACpC,QAAM,aAAa,SAAS,EAAE;AAC9B,QAAM,aAAa,QAAQ,EAAE;AAE7B,QAAM,YAAY,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,MAAI,CAACA,MAAAA,wBAAsB,KAA6B,YAAY;AAClE,aAAS,QAAQ,UAAU,OAAO;AAAA,EACpC;AAEA,SAAO;AACT,GAAA;;"}
+{"version":3,"file":"observed-auto-play.js","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"sourcesContent":["import { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport { default as toggle } from './toggle';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n}\n\nexport default ({\n  video,\n  isAutoplay = false,\n  isScaled = false,\n  additionalElementStyles,\n}: CardVideoShortProps) =>\n  (() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            if (video.readyState >= 2) {\n              composite.events.setPlay();\n            } else {\n              video.addEventListener('loadeddata', composite.events.setPlay, {\n                once: true,\n              });\n\n              if (video.readyState === 0) {\n                video.load();\n              }\n            }\n          } else {\n            composite.events.setPause();\n          }\n        });\n      },\n      {\n        threshold: 0.25,\n      },\n    );\n    const callback = (isPlaying: boolean) => {\n      if (isPlaying && observer) {\n        observer.disconnect();\n      }\n    };\n\n    video.removeAttribute('controls');\n    video.setAttribute('preload', 'true');\n    video.setAttribute('playsinline', '');\n    video.setAttribute('muted', '');\n    video.setAttribute('loop', '');\n\n    const composite = toggle({\n      video,\n      additionalElementStyles,\n      isScaled,\n      callback,\n    });\n\n    if (!isPreferredReducedMotion() && isAutoplay) {\n      observer.observe(composite.element);\n    }\n\n    return composite;\n  })();\n"],"names":["isPreferredReducedMotion"],"mappings":";;;AAUA,MAAA,mBAAe,CAAC;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX;AACF,OACG,MAAM;AACL,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,cAAI,MAAM,cAAc,GAAG;AACzB,sBAAU,OAAO,QAAA;AAAA,UACnB,OAAO;AACL,kBAAM,iBAAiB,cAAc,UAAU,OAAO,SAAS;AAAA,cAC7D,MAAM;AAAA,YAAA,CACP;AAED,gBAAI,MAAM,eAAe,GAAG;AAC1B,oBAAM,KAAA;AAAA,YACR;AAAA,UACF;AAAA,QACF,OAAO;AACL,oBAAU,OAAO,SAAA;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,WAAW;AAAA,IAAA;AAAA,EACb;AAEF,QAAM,WAAW,CAAC,cAAuB;AACvC,QAAI,aAAa,UAAU;AACzB,eAAS,WAAA;AAAA,IACX;AAAA,EACF;AAEA,QAAM,gBAAgB,UAAU;AAChC,QAAM,aAAa,WAAW,MAAM;AACpC,QAAM,aAAa,eAAe,EAAE;AACpC,QAAM,aAAa,SAAS,EAAE;AAC9B,QAAM,aAAa,QAAQ,EAAE;AAE7B,QAAM,YAAY,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,MAAI,CAACA,cAAAA,yBAAA,KAA8B,YAAY;AAC7C,aAAS,QAAQ,UAAU,OAAO;AAAA,EACpC;AAEA,SAAO;AACT,GAAA;;"}

package/dist/atomic/assets/video/observed-auto-play.mjs

@@ -1,8 +1,5 @@
+import { isPreferredReducedMotion } from "@universityofmaryland/web-utilities-library/accessibility";
 import toggle from "./toggle.mjs";
-import { isPrefferdReducedMotion } from "../../../utilities/accessibility/index.mjs";
-import "../../../node_modules/postcss/lib/postcss.mjs";
-import "../../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../../node_modules/postcss-js/index.mjs";
 const observedAutoPlay = ({
   video,
   isAutoplay = false,
@@ -48,7 +45,7 @@ const observedAutoPlay = ({
     isScaled,
     callback
   });
-  if (!isPrefferdReducedMotion() && isAutoplay) {
+  if (!isPreferredReducedMotion() && isAutoplay) {
     observer.observe(composite.element);
   }
   return composite;

package/dist/atomic/assets/video/observed-auto-play.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"observed-auto-play.mjs","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"sourcesContent":["import { default as toggle } from './toggle';\nimport * as Utility from 'utilities';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n}\n\nexport default ({\n  video,\n  isAutoplay = false,\n  isScaled = false,\n  additionalElementStyles,\n}: CardVideoShortProps) =>\n  (() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            if (video.readyState >= 2) {\n              composite.events.setPlay();\n            } else {\n              video.addEventListener('loadeddata', composite.events.setPlay, {\n                once: true,\n              });\n\n              if (video.readyState === 0) {\n                video.load();\n              }\n            }\n          } else {\n            composite.events.setPause();\n          }\n        });\n      },\n      {\n        threshold: 0.25,\n      },\n    );\n    const callback = (isPlaying: boolean) => {\n      if (isPlaying && observer) {\n        observer.disconnect();\n      }\n    };\n\n    video.removeAttribute('controls');\n    video.setAttribute('preload', 'true');\n    video.setAttribute('playsinline', '');\n    video.setAttribute('muted', '');\n    video.setAttribute('loop', '');\n\n    const composite = toggle({\n      video,\n      additionalElementStyles,\n      isScaled,\n      callback,\n    });\n\n    if (!Utility.accessibility.isPrefferdReducedMotion() && isAutoplay) {\n      observer.observe(composite.element);\n    }\n\n    return composite;\n  })();\n"],"names":["Utility.accessibility.isPrefferdReducedMotion"],"mappings":";;;;;AAUA,MAAA,mBAAe,CAAC;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX;AACF,OACG,MAAM;AACL,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,cAAI,MAAM,cAAc,GAAG;AACzB,sBAAU,OAAO,QAAA;AAAA,UACnB,OAAO;AACL,kBAAM,iBAAiB,cAAc,UAAU,OAAO,SAAS;AAAA,cAC7D,MAAM;AAAA,YAAA,CACP;AAED,gBAAI,MAAM,eAAe,GAAG;AAC1B,oBAAM,KAAA;AAAA,YACR;AAAA,UACF;AAAA,QACF,OAAO;AACL,oBAAU,OAAO,SAAA;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,WAAW;AAAA,IAAA;AAAA,EACb;AAEF,QAAM,WAAW,CAAC,cAAuB;AACvC,QAAI,aAAa,UAAU;AACzB,eAAS,WAAA;AAAA,IACX;AAAA,EACF;AAEA,QAAM,gBAAgB,UAAU;AAChC,QAAM,aAAa,WAAW,MAAM;AACpC,QAAM,aAAa,eAAe,EAAE;AACpC,QAAM,aAAa,SAAS,EAAE;AAC9B,QAAM,aAAa,QAAQ,EAAE;AAE7B,QAAM,YAAY,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,MAAI,CAACA,wBAAsB,KAA6B,YAAY;AAClE,aAAS,QAAQ,UAAU,OAAO;AAAA,EACpC;AAEA,SAAO;AACT,GAAA;"}
+{"version":3,"file":"observed-auto-play.mjs","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"sourcesContent":["import { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport { default as toggle } from './toggle';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n}\n\nexport default ({\n  video,\n  isAutoplay = false,\n  isScaled = false,\n  additionalElementStyles,\n}: CardVideoShortProps) =>\n  (() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            if (video.readyState >= 2) {\n              composite.events.setPlay();\n            } else {\n              video.addEventListener('loadeddata', composite.events.setPlay, {\n                once: true,\n              });\n\n              if (video.readyState === 0) {\n                video.load();\n              }\n            }\n          } else {\n            composite.events.setPause();\n          }\n        });\n      },\n      {\n        threshold: 0.25,\n      },\n    );\n    const callback = (isPlaying: boolean) => {\n      if (isPlaying && observer) {\n        observer.disconnect();\n      }\n    };\n\n    video.removeAttribute('controls');\n    video.setAttribute('preload', 'true');\n    video.setAttribute('playsinline', '');\n    video.setAttribute('muted', '');\n    video.setAttribute('loop', '');\n\n    const composite = toggle({\n      video,\n      additionalElementStyles,\n      isScaled,\n      callback,\n    });\n\n    if (!isPreferredReducedMotion() && isAutoplay) {\n      observer.observe(composite.element);\n    }\n\n    return composite;\n  })();\n"],"names":[],"mappings":";;AAUA,MAAA,mBAAe,CAAC;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX;AACF,OACG,MAAM;AACL,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,cAAI,MAAM,cAAc,GAAG;AACzB,sBAAU,OAAO,QAAA;AAAA,UACnB,OAAO;AACL,kBAAM,iBAAiB,cAAc,UAAU,OAAO,SAAS;AAAA,cAC7D,MAAM;AAAA,YAAA,CACP;AAED,gBAAI,MAAM,eAAe,GAAG;AAC1B,oBAAM,KAAA;AAAA,YACR;AAAA,UACF;AAAA,QACF,OAAO;AACL,oBAAU,OAAO,SAAA;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,WAAW;AAAA,IAAA;AAAA,EACb;AAEF,QAAM,WAAW,CAAC,cAAuB;AACvC,QAAI,aAAa,UAAU;AACzB,eAAS,WAAA;AAAA,IACX;AAAA,EACF;AAEA,QAAM,gBAAgB,UAAU;AAChC,QAAM,aAAa,WAAW,MAAM;AACpC,QAAM,aAAa,eAAe,EAAE;AACpC,QAAM,aAAa,SAAS,EAAE;AAC9B,QAAM,aAAa,QAAQ,EAAE;AAE7B,QAAM,YAAY,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,MAAI,CAAC,yBAAA,KAA8B,YAAY;AAC7C,aAAS,QAAQ,UAAU,OAAO;AAAA,EACpC;AAEA,SAAO;AACT,GAAA;"}

package/dist/atomic/assets/video/toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/video/toggle.ts"],"names":[],"mappings":"AAGA,UAAU,UAAU;IAClB,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;yBAEe,OAAO,UAAU;;;;;;;;;AAAjC,wBAsFO"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/video/toggle.ts"],"names":[],"mappings":"AAMA,UAAU,UAAU;IAClB,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;yBAEe,OAAO,UAAU;;;;;;;;;AAAjC,wBAsFO"}

package/dist/atomic/assets/video/toggle.js

@@ -1,9 +1,6 @@
 "use strict";
+const controls = require("@universityofmaryland/web-icons-library/controls");
 const index = require("../../../model/elements/index.js");
-const icons = require("../../../utilities/assets/icons.js");
-require("../../../node_modules/postcss/lib/postcss.js");
-require("../../../node_modules/postcss-nesting/dist/index.js");
-require("../../../node_modules/postcss-js/index.js");
 const buttons = require("../../../model/elements/buttons.js");
 const toggle = (props) => (() => {
   const {
@@ -40,7 +37,7 @@ const toggle = (props) => (() => {
   });
   const setPlay = () => {
     button.element.setAttribute("aria-label", "Pause");
-    button.element.innerHTML = icons.PAUSE;
+    button.element.innerHTML = controls.pause;
     video.muted = true;
     video.play().catch((error) => {
       if (error.name === "NotAllowedError") {
@@ -51,11 +48,11 @@ const toggle = (props) => (() => {
   };
   const setPause = () => {
     button.element.setAttribute("aria-label", "Play");
-    button.element.innerHTML = icons.PLAY;
+    button.element.innerHTML = controls.play;
     video.pause();
   };
   button.element.setAttribute("aria-label", "Play");
-  button.element.innerHTML = icons.PLAY;
+  button.element.innerHTML = controls.play;
   button.element.setAttribute("type", "button");
   button.element.addEventListener("click", () => {
     if (video.paused) {

package/dist/atomic/assets/video/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../../../source/atomic/assets/video/toggle.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport * as Utility from 'utilities';\n\ninterface VideoProps {\n  video: HTMLVideoElement;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n  callback?: (isPlaying: boolean) => void;\n}\n\nexport default (props: VideoProps) =>\n  (() => {\n    const {\n      video,\n      additionalElementStyles,\n      isScaled = false,\n      callback,\n    } = props;\n    const composite = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-element-video',\n      elementStyles: {\n        element: {\n          position: 'relative',\n          ...additionalElementStyles,\n          ...(isScaled && {\n            width: '100%',\n            height: '100%',\n            objectFit: 'cover',\n          }),\n\n          ...(isScaled && {\n            [`& video`]: {\n              width: '100%',\n              height: '100%',\n              objectFit: 'cover',\n              display: 'block',\n            },\n          }),\n        },\n      },\n    });\n    const button = ElementModel.buttons.videoState({\n      element: document.createElement('button'),\n    });\n\n    const setPlay = () => {\n      button.element.setAttribute('aria-label', 'Pause');\n      button.element.innerHTML = Utility.asset.icon.PAUSE;\n      video.muted = true;\n      video.play().catch((error) => {\n        if (error.name === 'NotAllowedError') {\n          setPause();\n        }\n        console.warn('Video play failed:', error);\n      });\n    };\n    const setPause = () => {\n      button.element.setAttribute('aria-label', 'Play');\n      button.element.innerHTML = Utility.asset.icon.PLAY;\n      video.pause();\n    };\n\n    // Load styles and attributes\n\n    button.element.setAttribute('aria-label', 'Play');\n    button.element.innerHTML = Utility.asset.icon.PLAY;\n    button.element.setAttribute('type', 'button');\n    button.element.addEventListener('click', () => {\n      if (video.paused) {\n        if (callback) callback(false);\n        setPlay();\n      } else {\n        if (callback) callback(true);\n        setPause();\n      }\n    });\n\n    if (\n      video.getAttribute('autoplay') === '' ||\n      video.getAttribute('autoplay') === 'true'\n    ) {\n      setPlay();\n    }\n\n    composite.element.appendChild(video);\n    composite.element.appendChild(button.element);\n    composite.styles += button.styles;\n\n    return {\n      ...composite,\n      events: {\n        setPlay,\n        setPause,\n      },\n    };\n  })();\n"],"names":["ElementModel.create","ElementModel.buttons.videoState","Utility.asset.icon.PAUSE","Utility.asset.icon.PLAY"],"mappings":";;;;;;;AAUA,MAAA,SAAe,CAAC,WACb,MAAM;AACL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EAAA,IACE;AACJ,QAAM,YAAYA,MAAAA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,GAAG;AAAA,QACH,GAAI,YAAY;AAAA,UACd,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,QAAA;AAAA,QAGb,GAAI,YAAY;AAAA,UACd,CAAC,SAAS,GAAG;AAAA,YACX,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACD,QAAM,SAASC,QAAAA,WAAgC;AAAA,IAC7C,SAAS,SAAS,cAAc,QAAQ;AAAA,EAAA,CACzC;AAED,QAAM,UAAU,MAAM;AACpB,WAAO,QAAQ,aAAa,cAAc,OAAO;AACjD,WAAO,QAAQ,YAAYC,MAAAA;AAC3B,UAAM,QAAQ;AACd,UAAM,KAAA,EAAO,MAAM,CAAC,UAAU;AAC5B,UAAI,MAAM,SAAS,mBAAmB;AACpC,iBAAA;AAAA,MACF;AACA,cAAQ,KAAK,sBAAsB,KAAK;AAAA,IAC1C,CAAC;AAAA,EACH;AACA,QAAM,WAAW,MAAM;AACrB,WAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,WAAO,QAAQ,YAAYC,MAAAA;AAC3B,UAAM,MAAA;AAAA,EACR;AAIA,SAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,SAAO,QAAQ,YAAYA,MAAAA;AAC3B,SAAO,QAAQ,aAAa,QAAQ,QAAQ;AAC5C,SAAO,QAAQ,iBAAiB,SAAS,MAAM;AAC7C,QAAI,MAAM,QAAQ;AAChB,UAAI,mBAAmB,KAAK;AAC5B,cAAA;AAAA,IACF,OAAO;AACL,UAAI,mBAAmB,IAAI;AAC3B,eAAA;AAAA,IACF;AAAA,EACF,CAAC;AAED,MACE,MAAM,aAAa,UAAU,MAAM,MACnC,MAAM,aAAa,UAAU,MAAM,QACnC;AACA,YAAA;AAAA,EACF;AAEA,YAAU,QAAQ,YAAY,KAAK;AACnC,YAAU,QAAQ,YAAY,OAAO,OAAO;AAC5C,YAAU,UAAU,OAAO;AAE3B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;;"}
+{"version":3,"file":"toggle.js","sources":["../../../../source/atomic/assets/video/toggle.ts"],"sourcesContent":["import {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\nimport { ElementModel } from 'model';\n\ninterface VideoProps {\n  video: HTMLVideoElement;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n  callback?: (isPlaying: boolean) => void;\n}\n\nexport default (props: VideoProps) =>\n  (() => {\n    const {\n      video,\n      additionalElementStyles,\n      isScaled = false,\n      callback,\n    } = props;\n    const composite = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-element-video',\n      elementStyles: {\n        element: {\n          position: 'relative',\n          ...additionalElementStyles,\n          ...(isScaled && {\n            width: '100%',\n            height: '100%',\n            objectFit: 'cover',\n          }),\n\n          ...(isScaled && {\n            [`& video`]: {\n              width: '100%',\n              height: '100%',\n              objectFit: 'cover',\n              display: 'block',\n            },\n          }),\n        },\n      },\n    });\n    const button = ElementModel.buttons.videoState({\n      element: document.createElement('button'),\n    });\n\n    const setPlay = () => {\n      button.element.setAttribute('aria-label', 'Pause');\n      button.element.innerHTML = iconPause;\n      video.muted = true;\n      video.play().catch((error) => {\n        if (error.name === 'NotAllowedError') {\n          setPause();\n        }\n        console.warn('Video play failed:', error);\n      });\n    };\n    const setPause = () => {\n      button.element.setAttribute('aria-label', 'Play');\n      button.element.innerHTML = iconPlay;\n      video.pause();\n    };\n\n    // Load styles and attributes\n\n    button.element.setAttribute('aria-label', 'Play');\n    button.element.innerHTML = iconPlay;\n    button.element.setAttribute('type', 'button');\n    button.element.addEventListener('click', () => {\n      if (video.paused) {\n        if (callback) callback(false);\n        setPlay();\n      } else {\n        if (callback) callback(true);\n        setPause();\n      }\n    });\n\n    if (\n      video.getAttribute('autoplay') === '' ||\n      video.getAttribute('autoplay') === 'true'\n    ) {\n      setPlay();\n    }\n\n    composite.element.appendChild(video);\n    composite.element.appendChild(button.element);\n    composite.styles += button.styles;\n\n    return {\n      ...composite,\n      events: {\n        setPlay,\n        setPause,\n      },\n    };\n  })();\n"],"names":["ElementModel.create","ElementModel.buttons.videoState","iconPause","iconPlay"],"mappings":";;;;AAaA,MAAA,SAAe,CAAC,WACb,MAAM;AACL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EAAA,IACE;AACJ,QAAM,YAAYA,MAAAA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,GAAG;AAAA,QACH,GAAI,YAAY;AAAA,UACd,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,QAAA;AAAA,QAGb,GAAI,YAAY;AAAA,UACd,CAAC,SAAS,GAAG;AAAA,YACX,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACD,QAAM,SAASC,QAAAA,WAAgC;AAAA,IAC7C,SAAS,SAAS,cAAc,QAAQ;AAAA,EAAA,CACzC;AAED,QAAM,UAAU,MAAM;AACpB,WAAO,QAAQ,aAAa,cAAc,OAAO;AACjD,WAAO,QAAQ,YAAYC,SAAAA;AAC3B,UAAM,QAAQ;AACd,UAAM,KAAA,EAAO,MAAM,CAAC,UAAU;AAC5B,UAAI,MAAM,SAAS,mBAAmB;AACpC,iBAAA;AAAA,MACF;AACA,cAAQ,KAAK,sBAAsB,KAAK;AAAA,IAC1C,CAAC;AAAA,EACH;AACA,QAAM,WAAW,MAAM;AACrB,WAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,WAAO,QAAQ,YAAYC,SAAAA;AAC3B,UAAM,MAAA;AAAA,EACR;AAIA,SAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,SAAO,QAAQ,YAAYA,SAAAA;AAC3B,SAAO,QAAQ,aAAa,QAAQ,QAAQ;AAC5C,SAAO,QAAQ,iBAAiB,SAAS,MAAM;AAC7C,QAAI,MAAM,QAAQ;AAChB,UAAI,mBAAmB,KAAK;AAC5B,cAAA;AAAA,IACF,OAAO;AACL,UAAI,mBAAmB,IAAI;AAC3B,eAAA;AAAA,IACF;AAAA,EACF,CAAC;AAED,MACE,MAAM,aAAa,UAAU,MAAM,MACnC,MAAM,aAAa,UAAU,MAAM,QACnC;AACA,YAAA;AAAA,EACF;AAEA,YAAU,QAAQ,YAAY,KAAK;AACnC,YAAU,QAAQ,YAAY,OAAO,OAAO;AAC5C,YAAU,UAAU,OAAO;AAE3B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;;"}

package/dist/atomic/assets/video/toggle.mjs

@@ -1,8 +1,5 @@
+import { play, pause } from "@universityofmaryland/web-icons-library/controls";
 import { create } from "../../../model/elements/index.mjs";
-import { PLAY, PAUSE } from "../../../utilities/assets/icons.mjs";
-import "../../../node_modules/postcss/lib/postcss.mjs";
-import "../../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../../node_modules/postcss-js/index.mjs";
 import { videoState } from "../../../model/elements/buttons.mjs";
 const toggle = (props) => (() => {
   const {
@@ -39,7 +36,7 @@ const toggle = (props) => (() => {
   });
   const setPlay = () => {
     button.element.setAttribute("aria-label", "Pause");
-    button.element.innerHTML = PAUSE;
+    button.element.innerHTML = pause;
     video.muted = true;
     video.play().catch((error) => {
       if (error.name === "NotAllowedError") {
@@ -50,11 +47,11 @@ const toggle = (props) => (() => {
   };
   const setPause = () => {
     button.element.setAttribute("aria-label", "Play");
-    button.element.innerHTML = PLAY;
+    button.element.innerHTML = play;
     video.pause();
   };
   button.element.setAttribute("aria-label", "Play");
-  button.element.innerHTML = PLAY;
+  button.element.innerHTML = play;
   button.element.setAttribute("type", "button");
   button.element.addEventListener("click", () => {
     if (video.paused) {

package/dist/atomic/assets/video/toggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.mjs","sources":["../../../../source/atomic/assets/video/toggle.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport * as Utility from 'utilities';\n\ninterface VideoProps {\n  video: HTMLVideoElement;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n  callback?: (isPlaying: boolean) => void;\n}\n\nexport default (props: VideoProps) =>\n  (() => {\n    const {\n      video,\n      additionalElementStyles,\n      isScaled = false,\n      callback,\n    } = props;\n    const composite = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-element-video',\n      elementStyles: {\n        element: {\n          position: 'relative',\n          ...additionalElementStyles,\n          ...(isScaled && {\n            width: '100%',\n            height: '100%',\n            objectFit: 'cover',\n          }),\n\n          ...(isScaled && {\n            [`& video`]: {\n              width: '100%',\n              height: '100%',\n              objectFit: 'cover',\n              display: 'block',\n            },\n          }),\n        },\n      },\n    });\n    const button = ElementModel.buttons.videoState({\n      element: document.createElement('button'),\n    });\n\n    const setPlay = () => {\n      button.element.setAttribute('aria-label', 'Pause');\n      button.element.innerHTML = Utility.asset.icon.PAUSE;\n      video.muted = true;\n      video.play().catch((error) => {\n        if (error.name === 'NotAllowedError') {\n          setPause();\n        }\n        console.warn('Video play failed:', error);\n      });\n    };\n    const setPause = () => {\n      button.element.setAttribute('aria-label', 'Play');\n      button.element.innerHTML = Utility.asset.icon.PLAY;\n      video.pause();\n    };\n\n    // Load styles and attributes\n\n    button.element.setAttribute('aria-label', 'Play');\n    button.element.innerHTML = Utility.asset.icon.PLAY;\n    button.element.setAttribute('type', 'button');\n    button.element.addEventListener('click', () => {\n      if (video.paused) {\n        if (callback) callback(false);\n        setPlay();\n      } else {\n        if (callback) callback(true);\n        setPause();\n      }\n    });\n\n    if (\n      video.getAttribute('autoplay') === '' ||\n      video.getAttribute('autoplay') === 'true'\n    ) {\n      setPlay();\n    }\n\n    composite.element.appendChild(video);\n    composite.element.appendChild(button.element);\n    composite.styles += button.styles;\n\n    return {\n      ...composite,\n      events: {\n        setPlay,\n        setPause,\n      },\n    };\n  })();\n"],"names":["ElementModel.create","ElementModel.buttons.videoState","Utility.asset.icon.PAUSE","Utility.asset.icon.PLAY"],"mappings":";;;;;;AAUA,MAAA,SAAe,CAAC,WACb,MAAM;AACL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EAAA,IACE;AACJ,QAAM,YAAYA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,GAAG;AAAA,QACH,GAAI,YAAY;AAAA,UACd,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,QAAA;AAAA,QAGb,GAAI,YAAY;AAAA,UACd,CAAC,SAAS,GAAG;AAAA,YACX,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACD,QAAM,SAASC,WAAgC;AAAA,IAC7C,SAAS,SAAS,cAAc,QAAQ;AAAA,EAAA,CACzC;AAED,QAAM,UAAU,MAAM;AACpB,WAAO,QAAQ,aAAa,cAAc,OAAO;AACjD,WAAO,QAAQ,YAAYC;AAC3B,UAAM,QAAQ;AACd,UAAM,KAAA,EAAO,MAAM,CAAC,UAAU;AAC5B,UAAI,MAAM,SAAS,mBAAmB;AACpC,iBAAA;AAAA,MACF;AACA,cAAQ,KAAK,sBAAsB,KAAK;AAAA,IAC1C,CAAC;AAAA,EACH;AACA,QAAM,WAAW,MAAM;AACrB,WAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,WAAO,QAAQ,YAAYC;AAC3B,UAAM,MAAA;AAAA,EACR;AAIA,SAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,SAAO,QAAQ,YAAYA;AAC3B,SAAO,QAAQ,aAAa,QAAQ,QAAQ;AAC5C,SAAO,QAAQ,iBAAiB,SAAS,MAAM;AAC7C,QAAI,MAAM,QAAQ;AAChB,UAAI,mBAAmB,KAAK;AAC5B,cAAA;AAAA,IACF,OAAO;AACL,UAAI,mBAAmB,IAAI;AAC3B,eAAA;AAAA,IACF;AAAA,EACF,CAAC;AAED,MACE,MAAM,aAAa,UAAU,MAAM,MACnC,MAAM,aAAa,UAAU,MAAM,QACnC;AACA,YAAA;AAAA,EACF;AAEA,YAAU,QAAQ,YAAY,KAAK;AACnC,YAAU,QAAQ,YAAY,OAAO,OAAO;AAC5C,YAAU,UAAU,OAAO;AAE3B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;"}
+{"version":3,"file":"toggle.mjs","sources":["../../../../source/atomic/assets/video/toggle.ts"],"sourcesContent":["import {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\nimport { ElementModel } from 'model';\n\ninterface VideoProps {\n  video: HTMLVideoElement;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n  callback?: (isPlaying: boolean) => void;\n}\n\nexport default (props: VideoProps) =>\n  (() => {\n    const {\n      video,\n      additionalElementStyles,\n      isScaled = false,\n      callback,\n    } = props;\n    const composite = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-element-video',\n      elementStyles: {\n        element: {\n          position: 'relative',\n          ...additionalElementStyles,\n          ...(isScaled && {\n            width: '100%',\n            height: '100%',\n            objectFit: 'cover',\n          }),\n\n          ...(isScaled && {\n            [`& video`]: {\n              width: '100%',\n              height: '100%',\n              objectFit: 'cover',\n              display: 'block',\n            },\n          }),\n        },\n      },\n    });\n    const button = ElementModel.buttons.videoState({\n      element: document.createElement('button'),\n    });\n\n    const setPlay = () => {\n      button.element.setAttribute('aria-label', 'Pause');\n      button.element.innerHTML = iconPause;\n      video.muted = true;\n      video.play().catch((error) => {\n        if (error.name === 'NotAllowedError') {\n          setPause();\n        }\n        console.warn('Video play failed:', error);\n      });\n    };\n    const setPause = () => {\n      button.element.setAttribute('aria-label', 'Play');\n      button.element.innerHTML = iconPlay;\n      video.pause();\n    };\n\n    // Load styles and attributes\n\n    button.element.setAttribute('aria-label', 'Play');\n    button.element.innerHTML = iconPlay;\n    button.element.setAttribute('type', 'button');\n    button.element.addEventListener('click', () => {\n      if (video.paused) {\n        if (callback) callback(false);\n        setPlay();\n      } else {\n        if (callback) callback(true);\n        setPause();\n      }\n    });\n\n    if (\n      video.getAttribute('autoplay') === '' ||\n      video.getAttribute('autoplay') === 'true'\n    ) {\n      setPlay();\n    }\n\n    composite.element.appendChild(video);\n    composite.element.appendChild(button.element);\n    composite.styles += button.styles;\n\n    return {\n      ...composite,\n      events: {\n        setPlay,\n        setPause,\n      },\n    };\n  })();\n"],"names":["ElementModel.create","ElementModel.buttons.videoState","iconPause","iconPlay"],"mappings":";;;AAaA,MAAA,SAAe,CAAC,WACb,MAAM;AACL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EAAA,IACE;AACJ,QAAM,YAAYA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,GAAG;AAAA,QACH,GAAI,YAAY;AAAA,UACd,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,QAAA;AAAA,QAGb,GAAI,YAAY;AAAA,UACd,CAAC,SAAS,GAAG;AAAA,YACX,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACD,QAAM,SAASC,WAAgC;AAAA,IAC7C,SAAS,SAAS,cAAc,QAAQ;AAAA,EAAA,CACzC;AAED,QAAM,UAAU,MAAM;AACpB,WAAO,QAAQ,aAAa,cAAc,OAAO;AACjD,WAAO,QAAQ,YAAYC;AAC3B,UAAM,QAAQ;AACd,UAAM,KAAA,EAAO,MAAM,CAAC,UAAU;AAC5B,UAAI,MAAM,SAAS,mBAAmB;AACpC,iBAAA;AAAA,MACF;AACA,cAAQ,KAAK,sBAAsB,KAAK;AAAA,IAC1C,CAAC;AAAA,EACH;AACA,QAAM,WAAW,MAAM;AACrB,WAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,WAAO,QAAQ,YAAYC;AAC3B,UAAM,MAAA;AAAA,EACR;AAIA,SAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,SAAO,QAAQ,YAAYA;AAC3B,SAAO,QAAQ,aAAa,QAAQ,QAAQ;AAC5C,SAAO,QAAQ,iBAAiB,SAAS,MAAM;AAC7C,QAAI,MAAM,QAAQ;AAChB,UAAI,mBAAmB,KAAK;AAC5B,cAAA;AAAA,IACF,OAAO;AACL,UAAI,mBAAmB,IAAI;AAC3B,eAAA;AAAA,IACF;AAAA,EACF,CAAC;AAED,MACE,MAAM,aAAa,UAAU,MAAM,MACnC,MAAM,aAAa,UAAU,MAAM,QACnC;AACA,YAAA;AAAA,EACF;AAEA,YAAU,QAAQ,YAAY,KAAK;AACnC,YAAU,QAAQ,YAAY,OAAO,OAAO;AAC5C,YAAU,UAAU,OAAO;AAE3B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;"}

package/dist/atomic/buttons/fullscreen.js

@@ -1,8 +1,5 @@
 "use strict";
-const icons = require("../../utilities/assets/icons.js");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
+const controls = require("@universityofmaryland/web-icons-library/controls");
 require("../../model/modifiers/index.js");
 require("@universityofmaryland/web-styles-library");
 const buttons = require("../../model/elements/buttons.js");
@@ -17,7 +14,7 @@ const create = ({
     callback(index$1);
   });
   button.setAttribute("aria-label", "View Full Screen");
-  button.innerHTML = `Full Screen <span></span>${icons.FULL_SCREEN}`;
+  button.innerHTML = `Full Screen <span></span>${controls.fullscreen}`;
   return buttons.fullScreen({
     element: button
   });

package/dist/atomic/buttons/fullscreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen.js","sources":["../../../source/atomic/buttons/fullscreen.ts"],"sourcesContent":["import * as Utility from 'utilities';\nimport { ElementModel } from 'model';\n\nconst create = ({\n  callback,\n  index,\n}: {\n  callback: (arg: number) => void;\n  index: number;\n}) =>\n  (() => {\n    const button = document.createElement('button');\n    button.setAttribute('data-index', index.toString());\n    button.addEventListener('click', () => {\n      callback(index);\n    });\n    button.setAttribute('aria-label', 'View Full Screen');\n    button.innerHTML = `Full Screen <span></span>${Utility.asset.icon.FULL_SCREEN}`;\n\n    return ElementModel.buttons.fullScreen({\n      element: button,\n    });\n  })();\n\nexport default {\n  create,\n};\n"],"names":["index","Utility.asset.icon.FULL_SCREEN","ElementModel.buttons.fullScreen"],"mappings":";;;;;;;;;AAGA,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EAAA,OACAA;AACF,OAIG,MAAM;AACL,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,aAAa,cAAcA,QAAM,SAAA,CAAU;AAClD,SAAO,iBAAiB,SAAS,MAAM;AACrC,aAASA,OAAK;AAAA,EAChB,CAAC;AACD,SAAO,aAAa,cAAc,kBAAkB;AACpD,SAAO,YAAY,4BAA4BC,MAAAA,WAA8B;AAE7E,SAAOC,mBAAgC;AAAA,IACrC,SAAS;AAAA,EAAA,CACV;AACH,GAAA;AAEF,MAAA,aAAe;AAAA,EACb;AACF;;"}
+{"version":3,"file":"fullscreen.js","sources":["../../../source/atomic/buttons/fullscreen.ts"],"sourcesContent":["import { fullscreen as iconFullscreen } from '@universityofmaryland/web-icons-library/controls';\nimport { ElementModel } from 'model';\n\nconst create = ({\n  callback,\n  index,\n}: {\n  callback: (arg: number) => void;\n  index: number;\n}) =>\n  (() => {\n    const button = document.createElement('button');\n    button.setAttribute('data-index', index.toString());\n    button.addEventListener('click', () => {\n      callback(index);\n    });\n    button.setAttribute('aria-label', 'View Full Screen');\n    button.innerHTML = `Full Screen <span></span>${iconFullscreen}`;\n\n    return ElementModel.buttons.fullScreen({\n      element: button,\n    });\n  })();\n\nexport default {\n  create,\n};\n"],"names":["index","iconFullscreen","ElementModel.buttons.fullScreen"],"mappings":";;;;;;AAGA,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EAAA,OACAA;AACF,OAIG,MAAM;AACL,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,aAAa,cAAcA,QAAM,SAAA,CAAU;AAClD,SAAO,iBAAiB,SAAS,MAAM;AACrC,aAASA,OAAK;AAAA,EAChB,CAAC;AACD,SAAO,aAAa,cAAc,kBAAkB;AACpD,SAAO,YAAY,4BAA4BC,SAAAA,UAAc;AAE7D,SAAOC,mBAAgC;AAAA,IACrC,SAAS;AAAA,EAAA,CACV;AACH,GAAA;AAEF,MAAA,aAAe;AAAA,EACb;AACF;;"}

package/dist/atomic/buttons/fullscreen.mjs

@@ -1,7 +1,4 @@
-import { FULL_SCREEN } from "../../utilities/assets/icons.mjs";
-import "../../node_modules/postcss/lib/postcss.mjs";
-import "../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../node_modules/postcss-js/index.mjs";
+import { fullscreen as fullscreen$1 } from "@universityofmaryland/web-icons-library/controls";
 import "../../model/modifiers/index.mjs";
 import "@universityofmaryland/web-styles-library";
 import { fullScreen } from "../../model/elements/buttons.mjs";
@@ -16,7 +13,7 @@ const create = ({
     callback(index$1);
   });
   button.setAttribute("aria-label", "View Full Screen");
-  button.innerHTML = `Full Screen <span></span>${FULL_SCREEN}`;
+  button.innerHTML = `Full Screen <span></span>${fullscreen$1}`;
   return fullScreen({
     element: button
   });

package/dist/atomic/buttons/fullscreen.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen.mjs","sources":["../../../source/atomic/buttons/fullscreen.ts"],"sourcesContent":["import * as Utility from 'utilities';\nimport { ElementModel } from 'model';\n\nconst create = ({\n  callback,\n  index,\n}: {\n  callback: (arg: number) => void;\n  index: number;\n}) =>\n  (() => {\n    const button = document.createElement('button');\n    button.setAttribute('data-index', index.toString());\n    button.addEventListener('click', () => {\n      callback(index);\n    });\n    button.setAttribute('aria-label', 'View Full Screen');\n    button.innerHTML = `Full Screen <span></span>${Utility.asset.icon.FULL_SCREEN}`;\n\n    return ElementModel.buttons.fullScreen({\n      element: button,\n    });\n  })();\n\nexport default {\n  create,\n};\n"],"names":["index","Utility.asset.icon.FULL_SCREEN","ElementModel.buttons.fullScreen"],"mappings":";;;;;;;;AAGA,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EAAA,OACAA;AACF,OAIG,MAAM;AACL,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,aAAa,cAAcA,QAAM,SAAA,CAAU;AAClD,SAAO,iBAAiB,SAAS,MAAM;AACrC,aAASA,OAAK;AAAA,EAChB,CAAC;AACD,SAAO,aAAa,cAAc,kBAAkB;AACpD,SAAO,YAAY,4BAA4BC,WAA8B;AAE7E,SAAOC,WAAgC;AAAA,IACrC,SAAS;AAAA,EAAA,CACV;AACH,GAAA;AAEF,MAAA,aAAe;AAAA,EACb;AACF;"}
+{"version":3,"file":"fullscreen.mjs","sources":["../../../source/atomic/buttons/fullscreen.ts"],"sourcesContent":["import { fullscreen as iconFullscreen } from '@universityofmaryland/web-icons-library/controls';\nimport { ElementModel } from 'model';\n\nconst create = ({\n  callback,\n  index,\n}: {\n  callback: (arg: number) => void;\n  index: number;\n}) =>\n  (() => {\n    const button = document.createElement('button');\n    button.setAttribute('data-index', index.toString());\n    button.addEventListener('click', () => {\n      callback(index);\n    });\n    button.setAttribute('aria-label', 'View Full Screen');\n    button.innerHTML = `Full Screen <span></span>${iconFullscreen}`;\n\n    return ElementModel.buttons.fullScreen({\n      element: button,\n    });\n  })();\n\nexport default {\n  create,\n};\n"],"names":["index","iconFullscreen","ElementModel.buttons.fullScreen"],"mappings":";;;;;AAGA,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EAAA,OACAA;AACF,OAIG,MAAM;AACL,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,aAAa,cAAcA,QAAM,SAAA,CAAU;AAClD,SAAO,iBAAiB,SAAS,MAAM;AACrC,aAASA,OAAK;AAAA,EAChB,CAAC;AACD,SAAO,aAAa,cAAc,kBAAkB;AACpD,SAAO,YAAY,4BAA4BC,YAAc;AAE7D,SAAOC,WAAgC;AAAA,IACrC,SAAS;AAAA,EAAA,CACV;AACH,GAAA;AAEF,MAAA,aAAe;AAAA,EACb;AACF;"}

package/dist/atomic/events/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../source/atomic/events/meta.ts"],"names":[],"mappings":"AAIA,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,CAAC;AAEJ,KAAK,mBAAmB,GAAG;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAMF,KAAK,SAAS,GAAG,mBAAmB,GAAG;IACrC,QAAQ,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;yBAgFc,OAAO,eAAe;;;;;AAAtC,wBA0BE"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../source/atomic/events/meta.ts"],"names":[],"mappings":"AAKA,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,CAAC;AAEJ,KAAK,mBAAmB,GAAG;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAMF,KAAK,SAAS,GAAG,mBAAmB,GAAG;IACrC,QAAQ,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;yBAgFc,OAAO,eAAe;;;;;AAAtC,wBA0BE"}

package/dist/atomic/events/meta.js

@@ -1,8 +1,6 @@
 "use strict";
-const icons = require("../../utilities/assets/icons.js");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
+const location = require("@universityofmaryland/web-icons-library/location");
+const calendar = require("@universityofmaryland/web-icons-library/calendar");
 require("../../model/modifiers/index.js");
 require("@universityofmaryland/web-styles-library");
 const event = require("../../model/elements/event.js");
@@ -35,7 +33,7 @@ const createDayText = ({
     text = `${text} - ${endDayOfWeek}. ${endMonth} ${endDay}`;
   }
   return MakeDetailItem({
-    icon: icons.CALENDAR,
+    icon: calendar.calendar,
     text
   });
 };
@@ -45,7 +43,7 @@ const createTimeText = ({ startTime, endTime }) => {
     text = `${text} - ${endTime}`;
   }
   return MakeDetailItem({
-    icon: icons.CLOCK,
+    icon: calendar.clock,
     text
   });
 };
@@ -66,15 +64,15 @@ const createDateRow = (props) => {
   return { element: container, styles, className: "event-meta-date-row" };
 };
 const meta = (props) => {
-  const { location } = props;
+  const { location: location$1 } = props;
   const dateRow = createDateRow(props);
   let wrapperChildren = [dateRow];
-  if (location && location.length > 0) {
+  if (location$1 && location$1.length > 0) {
     wrapperChildren.push(
       MakeDetailItem({
         ...props,
-        icon: icons.PIN,
-        text: location[0].title
+        icon: location.pin,
+        text: location$1[0].title
       })
     );
   }

package/dist/atomic/events/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","sources":["../../../source/atomic/events/meta.ts"],"sourcesContent":["import * as Utility from 'utilities';\nimport { ElementModel } from 'model';\nimport { ElementVisual } from '../../_types';\n\ntype LocationType = {\n  title: string;\n}[];\n\ntype DateInformaitonType = {\n  startDayOfWeek: string;\n  startMonth: string;\n  startDay: string;\n  startTime: string;\n  endDayOfWeek: string;\n  endMonth: string;\n  endDay: string;\n  endTime: string;\n};\n\ntype DateDisplayType = DateInformaitonType & {\n  isMultiDay?: boolean;\n};\n\ntype EventType = DateInformaitonType & {\n  location: LocationType;\n};\n\nexport type TypeMetaDisplay = EventType & {\n  isThemeDark?: boolean;\n  showTime?: boolean;\n};\n\nconst MakeDetailItem = (props: {\n  icon: string;\n  text: string;\n  isThemeDark?: boolean;\n}) => {\n  const { icon, text } = props;\n  const container = ElementModel.event.metaItem({\n    element: document.createElement('p'),\n    ...props,\n  });\n\n  const iconElement = document.createElement('span');\n  const textElement = document.createElement('span');\n\n  iconElement.innerHTML = icon;\n  textElement.innerHTML = text;\n\n  container.element.appendChild(iconElement);\n  container.element.appendChild(textElement);\n\n  return container;\n};\n\nconst createDayText = ({\n  startDayOfWeek,\n  startMonth,\n  startDay,\n  endDayOfWeek,\n  endDay,\n  endMonth,\n  isMultiDay = false,\n}: DateDisplayType) => {\n  let text = `${startDayOfWeek}. ${startMonth} ${startDay}`;\n\n  if (isMultiDay) {\n    text = `${text} - ${endDayOfWeek}. ${endMonth} ${endDay}`;\n  }\n\n  return MakeDetailItem({\n    icon: Utility.asset.icon.CALENDAR,\n    text,\n  });\n};\n\nconst createTimeText = ({ startTime, endTime }: DateDisplayType) => {\n  let text = startTime;\n\n  if (startTime != endTime) {\n    text = `${text} - ${endTime}`;\n  }\n\n  return MakeDetailItem({\n    icon: Utility.asset.icon.CLOCK,\n    text,\n  });\n};\n\nconst createDateRow = (props: TypeMetaDisplay) => {\n  const { showTime = true } = props;\n  const container = document.createElement('div');\n  const { startMonth, startDay, endDay, endMonth } = props;\n  const isMultiDay = startDay != endDay || startMonth != endMonth;\n  const dateElement = createDayText({ ...props, isMultiDay });\n\n  let styles = '';\n\n  container.appendChild(dateElement.element);\n  styles += dateElement.styles;\n\n  if (showTime) {\n    const timeElement = createTimeText({ ...props, isMultiDay });\n    container.appendChild(timeElement.element);\n    styles += timeElement.styles;\n  }\n\n  return { element: container, styles, className: 'event-meta-date-row' };\n};\n\nexport default (props: TypeMetaDisplay) => {\n  const { location } = props;\n  const dateRow = createDateRow(props);\n  let wrapperChildren: ElementVisual[] = [dateRow];\n\n  if (location && location.length > 0) {\n    wrapperChildren.push(\n      MakeDetailItem({\n        ...props,\n        icon: Utility.asset.icon.PIN,\n        text: location[0].title,\n      }),\n    );\n  }\n\n  const wrapper = ElementModel.event.metaWrapper({\n    element: document.createElement('div'),\n    children: wrapperChildren,\n    ...props,\n  });\n\n  return ElementModel.event.metaContainer({\n    element: document.createElement('div'),\n    children: [wrapper],\n    ...props,\n  });\n};\n"],"names":["ElementModel.event.metaItem","Utility.asset.icon.CALENDAR","Utility.asset.icon.CLOCK","Utility.asset.icon.PIN","ElementModel.event.metaWrapper","ElementModel.event.metaContainer"],"mappings":";;;;;;;;;AAgCA,MAAM,iBAAiB,CAAC,UAIlB;AACJ,QAAM,EAAE,MAAM,KAAA,IAAS;AACvB,QAAM,YAAYA,MAAAA,SAA4B;AAAA,IAC5C,SAAS,SAAS,cAAc,GAAG;AAAA,IACnC,GAAG;AAAA,EAAA,CACJ;AAED,QAAM,cAAc,SAAS,cAAc,MAAM;AACjD,QAAM,cAAc,SAAS,cAAc,MAAM;AAEjD,cAAY,YAAY;AACxB,cAAY,YAAY;AAExB,YAAU,QAAQ,YAAY,WAAW;AACzC,YAAU,QAAQ,YAAY,WAAW;AAEzC,SAAO;AACT;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAuB;AACrB,MAAI,OAAO,GAAG,cAAc,KAAK,UAAU,IAAI,QAAQ;AAEvD,MAAI,YAAY;AACd,WAAO,GAAG,IAAI,MAAM,YAAY,KAAK,QAAQ,IAAI,MAAM;AAAA,EACzD;AAEA,SAAO,eAAe;AAAA,IACpB,MAAMC,MAAAA;AAAAA,IACN;AAAA,EAAA,CACD;AACH;AAEA,MAAM,iBAAiB,CAAC,EAAE,WAAW,cAA+B;AAClE,MAAI,OAAO;AAEX,MAAI,aAAa,SAAS;AACxB,WAAO,GAAG,IAAI,MAAM,OAAO;AAAA,EAC7B;AAEA,SAAO,eAAe;AAAA,IACpB,MAAMC,MAAAA;AAAAA,IACN;AAAA,EAAA,CACD;AACH;AAEA,MAAM,gBAAgB,CAAC,UAA2B;AAChD,QAAM,EAAE,WAAW,KAAA,IAAS;AAC5B,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,EAAE,YAAY,UAAU,QAAQ,aAAa;AACnD,QAAM,aAAa,YAAY,UAAU,cAAc;AACvD,QAAM,cAAc,cAAc,EAAE,GAAG,OAAO,YAAY;AAE1D,MAAI,SAAS;AAEb,YAAU,YAAY,YAAY,OAAO;AACzC,YAAU,YAAY;AAEtB,MAAI,UAAU;AACZ,UAAM,cAAc,eAAe,EAAE,GAAG,MAAkB,CAAC;AAC3D,cAAU,YAAY,YAAY,OAAO;AACzC,cAAU,YAAY;AAAA,EACxB;AAEA,SAAO,EAAE,SAAS,WAAW,QAAQ,WAAW,sBAAA;AAClD;AAEA,MAAA,OAAe,CAAC,UAA2B;AACzC,QAAM,EAAE,aAAa;AACrB,QAAM,UAAU,cAAc,KAAK;AACnC,MAAI,kBAAmC,CAAC,OAAO;AAE/C,MAAI,YAAY,SAAS,SAAS,GAAG;AACnC,oBAAgB;AAAA,MACd,eAAe;AAAA,QACb,GAAG;AAAA,QACH,MAAMC,MAAAA;AAAAA,QACN,MAAM,SAAS,CAAC,EAAE;AAAA,MAAA,CACnB;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,UAAUC,MAAAA,YAA+B;AAAA,IAC7C,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,CACJ;AAED,SAAOC,oBAAiC;AAAA,IACtC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,UAAU,CAAC,OAAO;AAAA,IAClB,GAAG;AAAA,EAAA,CACJ;AACH;;"}
+{"version":3,"file":"meta.js","sources":["../../../source/atomic/events/meta.ts"],"sourcesContent":["import { pin as iconPin } from '@universityofmaryland/web-icons-library/location';\nimport { calendar as iconCalendar, clock as iconClock } from '@universityofmaryland/web-icons-library/calendar';\nimport { ElementModel } from 'model';\nimport { ElementVisual } from '../../_types';\n\ntype LocationType = {\n  title: string;\n}[];\n\ntype DateInformaitonType = {\n  startDayOfWeek: string;\n  startMonth: string;\n  startDay: string;\n  startTime: string;\n  endDayOfWeek: string;\n  endMonth: string;\n  endDay: string;\n  endTime: string;\n};\n\ntype DateDisplayType = DateInformaitonType & {\n  isMultiDay?: boolean;\n};\n\ntype EventType = DateInformaitonType & {\n  location: LocationType;\n};\n\nexport type TypeMetaDisplay = EventType & {\n  isThemeDark?: boolean;\n  showTime?: boolean;\n};\n\nconst MakeDetailItem = (props: {\n  icon: string;\n  text: string;\n  isThemeDark?: boolean;\n}) => {\n  const { icon, text } = props;\n  const container = ElementModel.event.metaItem({\n    element: document.createElement('p'),\n    ...props,\n  });\n\n  const iconElement = document.createElement('span');\n  const textElement = document.createElement('span');\n\n  iconElement.innerHTML = icon;\n  textElement.innerHTML = text;\n\n  container.element.appendChild(iconElement);\n  container.element.appendChild(textElement);\n\n  return container;\n};\n\nconst createDayText = ({\n  startDayOfWeek,\n  startMonth,\n  startDay,\n  endDayOfWeek,\n  endDay,\n  endMonth,\n  isMultiDay = false,\n}: DateDisplayType) => {\n  let text = `${startDayOfWeek}. ${startMonth} ${startDay}`;\n\n  if (isMultiDay) {\n    text = `${text} - ${endDayOfWeek}. ${endMonth} ${endDay}`;\n  }\n\n  return MakeDetailItem({\n    icon: iconCalendar,\n    text,\n  });\n};\n\nconst createTimeText = ({ startTime, endTime }: DateDisplayType) => {\n  let text = startTime;\n\n  if (startTime != endTime) {\n    text = `${text} - ${endTime}`;\n  }\n\n  return MakeDetailItem({\n    icon: iconClock,\n    text,\n  });\n};\n\nconst createDateRow = (props: TypeMetaDisplay) => {\n  const { showTime = true } = props;\n  const container = document.createElement('div');\n  const { startMonth, startDay, endDay, endMonth } = props;\n  const isMultiDay = startDay != endDay || startMonth != endMonth;\n  const dateElement = createDayText({ ...props, isMultiDay });\n\n  let styles = '';\n\n  container.appendChild(dateElement.element);\n  styles += dateElement.styles;\n\n  if (showTime) {\n    const timeElement = createTimeText({ ...props, isMultiDay });\n    container.appendChild(timeElement.element);\n    styles += timeElement.styles;\n  }\n\n  return { element: container, styles, className: 'event-meta-date-row' };\n};\n\nexport default (props: TypeMetaDisplay) => {\n  const { location } = props;\n  const dateRow = createDateRow(props);\n  let wrapperChildren: ElementVisual[] = [dateRow];\n\n  if (location && location.length > 0) {\n    wrapperChildren.push(\n      MakeDetailItem({\n        ...props,\n        icon: iconPin,\n        text: location[0].title,\n      }),\n    );\n  }\n\n  const wrapper = ElementModel.event.metaWrapper({\n    element: document.createElement('div'),\n    children: wrapperChildren,\n    ...props,\n  });\n\n  return ElementModel.event.metaContainer({\n    element: document.createElement('div'),\n    children: [wrapper],\n    ...props,\n  });\n};\n"],"names":["ElementModel.event.metaItem","iconCalendar","iconClock","location","iconPin","ElementModel.event.metaWrapper","ElementModel.event.metaContainer"],"mappings":";;;;;;;AAiCA,MAAM,iBAAiB,CAAC,UAIlB;AACJ,QAAM,EAAE,MAAM,KAAA,IAAS;AACvB,QAAM,YAAYA,MAAAA,SAA4B;AAAA,IAC5C,SAAS,SAAS,cAAc,GAAG;AAAA,IACnC,GAAG;AAAA,EAAA,CACJ;AAED,QAAM,cAAc,SAAS,cAAc,MAAM;AACjD,QAAM,cAAc,SAAS,cAAc,MAAM;AAEjD,cAAY,YAAY;AACxB,cAAY,YAAY;AAExB,YAAU,QAAQ,YAAY,WAAW;AACzC,YAAU,QAAQ,YAAY,WAAW;AAEzC,SAAO;AACT;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAuB;AACrB,MAAI,OAAO,GAAG,cAAc,KAAK,UAAU,IAAI,QAAQ;AAEvD,MAAI,YAAY;AACd,WAAO,GAAG,IAAI,MAAM,YAAY,KAAK,QAAQ,IAAI,MAAM;AAAA,EACzD;AAEA,SAAO,eAAe;AAAA,IACpB,MAAMC,SAAAA;AAAAA,IACN;AAAA,EAAA,CACD;AACH;AAEA,MAAM,iBAAiB,CAAC,EAAE,WAAW,cAA+B;AAClE,MAAI,OAAO;AAEX,MAAI,aAAa,SAAS;AACxB,WAAO,GAAG,IAAI,MAAM,OAAO;AAAA,EAC7B;AAEA,SAAO,eAAe;AAAA,IACpB,MAAMC,SAAAA;AAAAA,IACN;AAAA,EAAA,CACD;AACH;AAEA,MAAM,gBAAgB,CAAC,UAA2B;AAChD,QAAM,EAAE,WAAW,KAAA,IAAS;AAC5B,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,EAAE,YAAY,UAAU,QAAQ,aAAa;AACnD,QAAM,aAAa,YAAY,UAAU,cAAc;AACvD,QAAM,cAAc,cAAc,EAAE,GAAG,OAAO,YAAY;AAE1D,MAAI,SAAS;AAEb,YAAU,YAAY,YAAY,OAAO;AACzC,YAAU,YAAY;AAEtB,MAAI,UAAU;AACZ,UAAM,cAAc,eAAe,EAAE,GAAG,MAAkB,CAAC;AAC3D,cAAU,YAAY,YAAY,OAAO;AACzC,cAAU,YAAY;AAAA,EACxB;AAEA,SAAO,EAAE,SAAS,WAAW,QAAQ,WAAW,sBAAA;AAClD;AAEA,MAAA,OAAe,CAAC,UAA2B;AACzC,QAAM,EAAA,UAAEC,eAAa;AACrB,QAAM,UAAU,cAAc,KAAK;AACnC,MAAI,kBAAmC,CAAC,OAAO;AAE/C,MAAIA,cAAYA,WAAS,SAAS,GAAG;AACnC,oBAAgB;AAAA,MACd,eAAe;AAAA,QACb,GAAG;AAAA,QACH,MAAMC,SAAAA;AAAAA,QACN,MAAMD,WAAS,CAAC,EAAE;AAAA,MAAA,CACnB;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,UAAUE,MAAAA,YAA+B;AAAA,IAC7C,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,CACJ;AAED,SAAOC,oBAAiC;AAAA,IACtC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,UAAU,CAAC,OAAO;AAAA,IAClB,GAAG;AAAA,EAAA,CACJ;AACH;;"}

package/dist/atomic/events/meta.mjs

@@ -1,7 +1,5 @@
-import { CALENDAR, CLOCK, PIN } from "../../utilities/assets/icons.mjs";
-import "../../node_modules/postcss/lib/postcss.mjs";
-import "../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../node_modules/postcss-js/index.mjs";
+import { pin } from "@universityofmaryland/web-icons-library/location";
+import { calendar, clock } from "@universityofmaryland/web-icons-library/calendar";
 import "../../model/modifiers/index.mjs";
 import "@universityofmaryland/web-styles-library";
 import { metaWrapper, metaContainer, metaItem } from "../../model/elements/event.mjs";
@@ -34,7 +32,7 @@ const createDayText = ({
     text = `${text} - ${endDayOfWeek}. ${endMonth} ${endDay}`;
   }
   return MakeDetailItem({
-    icon: CALENDAR,
+    icon: calendar,
     text
   });
 };
@@ -44,7 +42,7 @@ const createTimeText = ({ startTime, endTime }) => {
     text = `${text} - ${endTime}`;
   }
   return MakeDetailItem({
-    icon: CLOCK,
+    icon: clock,
     text
   });
 };
@@ -72,7 +70,7 @@ const meta = (props) => {
     wrapperChildren.push(
       MakeDetailItem({
         ...props,
-        icon: PIN,
+        icon: pin,
         text: location[0].title
       })
     );

package/dist/atomic/events/meta.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"meta.mjs","sources":["../../../source/atomic/events/meta.ts"],"sourcesContent":["import * as Utility from 'utilities';\nimport { ElementModel } from 'model';\nimport { ElementVisual } from '../../_types';\n\ntype LocationType = {\n  title: string;\n}[];\n\ntype DateInformaitonType = {\n  startDayOfWeek: string;\n  startMonth: string;\n  startDay: string;\n  startTime: string;\n  endDayOfWeek: string;\n  endMonth: string;\n  endDay: string;\n  endTime: string;\n};\n\ntype DateDisplayType = DateInformaitonType & {\n  isMultiDay?: boolean;\n};\n\ntype EventType = DateInformaitonType & {\n  location: LocationType;\n};\n\nexport type TypeMetaDisplay = EventType & {\n  isThemeDark?: boolean;\n  showTime?: boolean;\n};\n\nconst MakeDetailItem = (props: {\n  icon: string;\n  text: string;\n  isThemeDark?: boolean;\n}) => {\n  const { icon, text } = props;\n  const container = ElementModel.event.metaItem({\n    element: document.createElement('p'),\n    ...props,\n  });\n\n  const iconElement = document.createElement('span');\n  const textElement = document.createElement('span');\n\n  iconElement.innerHTML = icon;\n  textElement.innerHTML = text;\n\n  container.element.appendChild(iconElement);\n  container.element.appendChild(textElement);\n\n  return container;\n};\n\nconst createDayText = ({\n  startDayOfWeek,\n  startMonth,\n  startDay,\n  endDayOfWeek,\n  endDay,\n  endMonth,\n  isMultiDay = false,\n}: DateDisplayType) => {\n  let text = `${startDayOfWeek}. ${startMonth} ${startDay}`;\n\n  if (isMultiDay) {\n    text = `${text} - ${endDayOfWeek}. ${endMonth} ${endDay}`;\n  }\n\n  return MakeDetailItem({\n    icon: Utility.asset.icon.CALENDAR,\n    text,\n  });\n};\n\nconst createTimeText = ({ startTime, endTime }: DateDisplayType) => {\n  let text = startTime;\n\n  if (startTime != endTime) {\n    text = `${text} - ${endTime}`;\n  }\n\n  return MakeDetailItem({\n    icon: Utility.asset.icon.CLOCK,\n    text,\n  });\n};\n\nconst createDateRow = (props: TypeMetaDisplay) => {\n  const { showTime = true } = props;\n  const container = document.createElement('div');\n  const { startMonth, startDay, endDay, endMonth } = props;\n  const isMultiDay = startDay != endDay || startMonth != endMonth;\n  const dateElement = createDayText({ ...props, isMultiDay });\n\n  let styles = '';\n\n  container.appendChild(dateElement.element);\n  styles += dateElement.styles;\n\n  if (showTime) {\n    const timeElement = createTimeText({ ...props, isMultiDay });\n    container.appendChild(timeElement.element);\n    styles += timeElement.styles;\n  }\n\n  return { element: container, styles, className: 'event-meta-date-row' };\n};\n\nexport default (props: TypeMetaDisplay) => {\n  const { location } = props;\n  const dateRow = createDateRow(props);\n  let wrapperChildren: ElementVisual[] = [dateRow];\n\n  if (location && location.length > 0) {\n    wrapperChildren.push(\n      MakeDetailItem({\n        ...props,\n        icon: Utility.asset.icon.PIN,\n        text: location[0].title,\n      }),\n    );\n  }\n\n  const wrapper = ElementModel.event.metaWrapper({\n    element: document.createElement('div'),\n    children: wrapperChildren,\n    ...props,\n  });\n\n  return ElementModel.event.metaContainer({\n    element: document.createElement('div'),\n    children: [wrapper],\n    ...props,\n  });\n};\n"],"names":["ElementModel.event.metaItem","Utility.asset.icon.CALENDAR","Utility.asset.icon.CLOCK","Utility.asset.icon.PIN","ElementModel.event.metaWrapper","ElementModel.event.metaContainer"],"mappings":";;;;;;;;AAgCA,MAAM,iBAAiB,CAAC,UAIlB;AACJ,QAAM,EAAE,MAAM,KAAA,IAAS;AACvB,QAAM,YAAYA,SAA4B;AAAA,IAC5C,SAAS,SAAS,cAAc,GAAG;AAAA,IACnC,GAAG;AAAA,EAAA,CACJ;AAED,QAAM,cAAc,SAAS,cAAc,MAAM;AACjD,QAAM,cAAc,SAAS,cAAc,MAAM;AAEjD,cAAY,YAAY;AACxB,cAAY,YAAY;AAExB,YAAU,QAAQ,YAAY,WAAW;AACzC,YAAU,QAAQ,YAAY,WAAW;AAEzC,SAAO;AACT;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAuB;AACrB,MAAI,OAAO,GAAG,cAAc,KAAK,UAAU,IAAI,QAAQ;AAEvD,MAAI,YAAY;AACd,WAAO,GAAG,IAAI,MAAM,YAAY,KAAK,QAAQ,IAAI,MAAM;AAAA,EACzD;AAEA,SAAO,eAAe;AAAA,IACpB,MAAMC;AAAAA,IACN;AAAA,EAAA,CACD;AACH;AAEA,MAAM,iBAAiB,CAAC,EAAE,WAAW,cAA+B;AAClE,MAAI,OAAO;AAEX,MAAI,aAAa,SAAS;AACxB,WAAO,GAAG,IAAI,MAAM,OAAO;AAAA,EAC7B;AAEA,SAAO,eAAe;AAAA,IACpB,MAAMC;AAAAA,IACN;AAAA,EAAA,CACD;AACH;AAEA,MAAM,gBAAgB,CAAC,UAA2B;AAChD,QAAM,EAAE,WAAW,KAAA,IAAS;AAC5B,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,EAAE,YAAY,UAAU,QAAQ,aAAa;AACnD,QAAM,aAAa,YAAY,UAAU,cAAc;AACvD,QAAM,cAAc,cAAc,EAAE,GAAG,OAAO,YAAY;AAE1D,MAAI,SAAS;AAEb,YAAU,YAAY,YAAY,OAAO;AACzC,YAAU,YAAY;AAEtB,MAAI,UAAU;AACZ,UAAM,cAAc,eAAe,EAAE,GAAG,MAAkB,CAAC;AAC3D,cAAU,YAAY,YAAY,OAAO;AACzC,cAAU,YAAY;AAAA,EACxB;AAEA,SAAO,EAAE,SAAS,WAAW,QAAQ,WAAW,sBAAA;AAClD;AAEA,MAAA,OAAe,CAAC,UAA2B;AACzC,QAAM,EAAE,aAAa;AACrB,QAAM,UAAU,cAAc,KAAK;AACnC,MAAI,kBAAmC,CAAC,OAAO;AAE/C,MAAI,YAAY,SAAS,SAAS,GAAG;AACnC,oBAAgB;AAAA,MACd,eAAe;AAAA,QACb,GAAG;AAAA,QACH,MAAMC;AAAAA,QACN,MAAM,SAAS,CAAC,EAAE;AAAA,MAAA,CACnB;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,UAAUC,YAA+B;AAAA,IAC7C,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,CACJ;AAED,SAAOC,cAAiC;AAAA,IACtC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,UAAU,CAAC,OAAO;AAAA,IAClB,GAAG;AAAA,EAAA,CACJ;AACH;"}
+{"version":3,"file":"meta.mjs","sources":["../../../source/atomic/events/meta.ts"],"sourcesContent":["import { pin as iconPin } from '@universityofmaryland/web-icons-library/location';\nimport { calendar as iconCalendar, clock as iconClock } from '@universityofmaryland/web-icons-library/calendar';\nimport { ElementModel } from 'model';\nimport { ElementVisual } from '../../_types';\n\ntype LocationType = {\n  title: string;\n}[];\n\ntype DateInformaitonType = {\n  startDayOfWeek: string;\n  startMonth: string;\n  startDay: string;\n  startTime: string;\n  endDayOfWeek: string;\n  endMonth: string;\n  endDay: string;\n  endTime: string;\n};\n\ntype DateDisplayType = DateInformaitonType & {\n  isMultiDay?: boolean;\n};\n\ntype EventType = DateInformaitonType & {\n  location: LocationType;\n};\n\nexport type TypeMetaDisplay = EventType & {\n  isThemeDark?: boolean;\n  showTime?: boolean;\n};\n\nconst MakeDetailItem = (props: {\n  icon: string;\n  text: string;\n  isThemeDark?: boolean;\n}) => {\n  const { icon, text } = props;\n  const container = ElementModel.event.metaItem({\n    element: document.createElement('p'),\n    ...props,\n  });\n\n  const iconElement = document.createElement('span');\n  const textElement = document.createElement('span');\n\n  iconElement.innerHTML = icon;\n  textElement.innerHTML = text;\n\n  container.element.appendChild(iconElement);\n  container.element.appendChild(textElement);\n\n  return container;\n};\n\nconst createDayText = ({\n  startDayOfWeek,\n  startMonth,\n  startDay,\n  endDayOfWeek,\n  endDay,\n  endMonth,\n  isMultiDay = false,\n}: DateDisplayType) => {\n  let text = `${startDayOfWeek}. ${startMonth} ${startDay}`;\n\n  if (isMultiDay) {\n    text = `${text} - ${endDayOfWeek}. ${endMonth} ${endDay}`;\n  }\n\n  return MakeDetailItem({\n    icon: iconCalendar,\n    text,\n  });\n};\n\nconst createTimeText = ({ startTime, endTime }: DateDisplayType) => {\n  let text = startTime;\n\n  if (startTime != endTime) {\n    text = `${text} - ${endTime}`;\n  }\n\n  return MakeDetailItem({\n    icon: iconClock,\n    text,\n  });\n};\n\nconst createDateRow = (props: TypeMetaDisplay) => {\n  const { showTime = true } = props;\n  const container = document.createElement('div');\n  const { startMonth, startDay, endDay, endMonth } = props;\n  const isMultiDay = startDay != endDay || startMonth != endMonth;\n  const dateElement = createDayText({ ...props, isMultiDay });\n\n  let styles = '';\n\n  container.appendChild(dateElement.element);\n  styles += dateElement.styles;\n\n  if (showTime) {\n    const timeElement = createTimeText({ ...props, isMultiDay });\n    container.appendChild(timeElement.element);\n    styles += timeElement.styles;\n  }\n\n  return { element: container, styles, className: 'event-meta-date-row' };\n};\n\nexport default (props: TypeMetaDisplay) => {\n  const { location } = props;\n  const dateRow = createDateRow(props);\n  let wrapperChildren: ElementVisual[] = [dateRow];\n\n  if (location && location.length > 0) {\n    wrapperChildren.push(\n      MakeDetailItem({\n        ...props,\n        icon: iconPin,\n        text: location[0].title,\n      }),\n    );\n  }\n\n  const wrapper = ElementModel.event.metaWrapper({\n    element: document.createElement('div'),\n    children: wrapperChildren,\n    ...props,\n  });\n\n  return ElementModel.event.metaContainer({\n    element: document.createElement('div'),\n    children: [wrapper],\n    ...props,\n  });\n};\n"],"names":["ElementModel.event.metaItem","iconCalendar","iconClock","iconPin","ElementModel.event.metaWrapper","ElementModel.event.metaContainer"],"mappings":";;;;;;AAiCA,MAAM,iBAAiB,CAAC,UAIlB;AACJ,QAAM,EAAE,MAAM,KAAA,IAAS;AACvB,QAAM,YAAYA,SAA4B;AAAA,IAC5C,SAAS,SAAS,cAAc,GAAG;AAAA,IACnC,GAAG;AAAA,EAAA,CACJ;AAED,QAAM,cAAc,SAAS,cAAc,MAAM;AACjD,QAAM,cAAc,SAAS,cAAc,MAAM;AAEjD,cAAY,YAAY;AACxB,cAAY,YAAY;AAExB,YAAU,QAAQ,YAAY,WAAW;AACzC,YAAU,QAAQ,YAAY,WAAW;AAEzC,SAAO;AACT;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAuB;AACrB,MAAI,OAAO,GAAG,cAAc,KAAK,UAAU,IAAI,QAAQ;AAEvD,MAAI,YAAY;AACd,WAAO,GAAG,IAAI,MAAM,YAAY,KAAK,QAAQ,IAAI,MAAM;AAAA,EACzD;AAEA,SAAO,eAAe;AAAA,IACpB,MAAMC;AAAAA,IACN;AAAA,EAAA,CACD;AACH;AAEA,MAAM,iBAAiB,CAAC,EAAE,WAAW,cAA+B;AAClE,MAAI,OAAO;AAEX,MAAI,aAAa,SAAS;AACxB,WAAO,GAAG,IAAI,MAAM,OAAO;AAAA,EAC7B;AAEA,SAAO,eAAe;AAAA,IACpB,MAAMC;AAAAA,IACN;AAAA,EAAA,CACD;AACH;AAEA,MAAM,gBAAgB,CAAC,UAA2B;AAChD,QAAM,EAAE,WAAW,KAAA,IAAS;AAC5B,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,EAAE,YAAY,UAAU,QAAQ,aAAa;AACnD,QAAM,aAAa,YAAY,UAAU,cAAc;AACvD,QAAM,cAAc,cAAc,EAAE,GAAG,OAAO,YAAY;AAE1D,MAAI,SAAS;AAEb,YAAU,YAAY,YAAY,OAAO;AACzC,YAAU,YAAY;AAEtB,MAAI,UAAU;AACZ,UAAM,cAAc,eAAe,EAAE,GAAG,MAAkB,CAAC;AAC3D,cAAU,YAAY,YAAY,OAAO;AACzC,cAAU,YAAY;AAAA,EACxB;AAEA,SAAO,EAAE,SAAS,WAAW,QAAQ,WAAW,sBAAA;AAClD;AAEA,MAAA,OAAe,CAAC,UAA2B;AACzC,QAAM,EAAE,aAAa;AACrB,QAAM,UAAU,cAAc,KAAK;AACnC,MAAI,kBAAmC,CAAC,OAAO;AAE/C,MAAI,YAAY,SAAS,SAAS,GAAG;AACnC,oBAAgB;AAAA,MACd,eAAe;AAAA,QACb,GAAG;AAAA,QACH,MAAMC;AAAAA,QACN,MAAM,SAAS,CAAC,EAAE;AAAA,MAAA,CACnB;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,UAAUC,YAA+B;AAAA,IAC7C,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,CACJ;AAED,SAAOC,cAAiC;AAAA,IACtC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,UAAU,CAAC,OAAO;AAAA,IAClB,GAAG;AAAA,EAAA,CACJ;AACH;"}