@universityofmaryland/web-elements-library 1.5.9 → 1.6.0-beta.1

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

@@ -1,7 +1,7 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const toggle = require("./toggle.js");
-const observedAutoPlay = require("./observed-auto-play.js");
-exports.toggle = toggle;
-exports.observedAutoPlay = observedAutoPlay;
+import { createVideoToggle } from "./toggle.js";
+import { createVideoObservedAutoPlay } from "./observed-auto-play.js";
+export {
+  createVideoObservedAutoPlay as observedAutoPlay,
+  createVideoToggle as toggle
+};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/atomic/assets/video/observed-auto-play.d.ts

@@ -4,6 +4,6 @@ interface CardVideoShortProps {
     isScaled?: boolean;
     additionalElementStyles?: Record<string, any>;
 }
-declare const _default: ({ video, isAutoplay, isScaled, additionalElementStyles, }: CardVideoShortProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export default _default;
+export declare const createVideoObservedAutoPlay: ({ video, isAutoplay, isScaled, additionalElementStyles, }: CardVideoShortProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export {};
 //# sourceMappingURL=observed-auto-play.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"observed-auto-play.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC/C;yBAEe,2DAKb,mBAAmB;AALtB,wBA2DO"}
+{"version":3,"file":"observed-auto-play.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,2BAA2B,GAAI,2DAKzC,mBAAmB,kFAsDhB,CAAC"}

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

@@ -1,7 +1,6 @@
-"use strict";
-const accessibility = require("@universityofmaryland/web-utilities-library/accessibility");
-const toggle = require("./toggle.js");
-const observedAutoPlay = ({
+import { isPreferredReducedMotion } from "@universityofmaryland/web-utilities-library/accessibility";
+import { createVideoToggle } from "./toggle.js";
+const createVideoObservedAutoPlay = ({
   video,
   isAutoplay = false,
   isScaled = false,
@@ -44,16 +43,18 @@ const observedAutoPlay = ({
   video.setAttribute("playsinline", "");
   video.setAttribute("muted", "");
   video.setAttribute("loop", "");
-  const composite = toggle({
+  const composite = createVideoToggle({
     video,
     additionalElementStyles,
     isScaled,
     callback
   });
-  if (!accessibility.isPreferredReducedMotion() && isAutoplay) {
+  if (!isPreferredReducedMotion() && isAutoplay) {
     observer.observe(composite.element);
   }
   return composite;
 })();
-module.exports = observedAutoPlay;
+export {
+  createVideoObservedAutoPlay
+};
 //# sourceMappingURL=observed-auto-play.js.map

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 { 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(\n                'loadeddata',\n                () => composite?.events?.setPlay(),\n                {\n                  once: true,\n                },\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,uBAAW,QAAQ,QAAA;AAAA,UACrB,OAAO;AACL,kBAAM;AAAA,cACJ;AAAA,cACA,MAAM,WAAW,QAAQ,QAAA;AAAA,cACzB;AAAA,gBACE,MAAM;AAAA,cAAA;AAAA,YACR;AAGF,gBAAI,MAAM,eAAe,GAAG;AAC1B,oBAAM,KAAA;AAAA,YACR;AAAA,UACF;AAAA,QACF,OAAO;AACL,qBAAW,QAAQ,SAAA;AAAA,QACrB;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;;"}
+{"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 { createVideoToggle } from './toggle';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n}\n\nexport const createVideoObservedAutoPlay = ({\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(\n                'loadeddata',\n                () => composite?.events?.setPlay(),\n                {\n                  once: true,\n                },\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 = createVideoToggle({\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":";;AAUO,MAAM,8BAA8B,CAAC;AAAA,EAC1C;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,uBAAW,QAAQ,QAAA;AAAA,UACrB,OAAO;AACL,kBAAM;AAAA,cACJ;AAAA,cACA,MAAM,WAAW,QAAQ,QAAA;AAAA,cACzB;AAAA,gBACE,MAAM;AAAA,cAAA;AAAA,YACR;AAGF,gBAAI,MAAM,eAAe,GAAG;AAC1B,oBAAM,KAAA;AAAA,YACR;AAAA,UACF;AAAA,QACF,OAAO;AACL,qBAAW,QAAQ,SAAA;AAAA,QACrB;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,kBAAkB;AAAA,IAClC;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

@@ -4,6 +4,6 @@ interface VideoProps {
     additionalElementStyles?: Record<string, any>;
     callback?: (isPlaying: boolean) => void;
 }
-declare const _default: (props: VideoProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export default _default;
+export declare const createVideoToggle: (props: VideoProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export {};
 //# sourceMappingURL=toggle.d.ts.map

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":"AAOA,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,wBA4EO"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/video/toggle.ts"],"names":[],"mappings":"AAOA,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;AAED,eAAO,MAAM,iBAAiB,GAAI,OAAO,UAAU,kFA4E7C,CAAC"}

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

@@ -1,35 +1,17 @@
-"use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const controls = require("@universityofmaryland/web-icons-library/controls");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
-const toggle = (props) => (() => {
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { play, pause } from "@universityofmaryland/web-icons-library/controls";
+const createVideoToggle = (props) => (() => {
   const {
     video,
     additionalElementStyles,
     isScaled = false,
     callback
   } = props;
-  const button = new webBuilderLibrary.ElementBuilder("button").styled(Styles__namespace.element.action.button.videoState).withAttribute("type", "button").withAttribute("aria-label", "Play").withHTML(controls.play).build();
+  const button = new ElementBuilder("button").styled(Styles.element.action.button.videoState).withAttribute("type", "button").withAttribute("aria-label", "Play").withHTML(play).build();
   const setPlay = () => {
     button.element.setAttribute("aria-label", "Pause");
-    button.element.innerHTML = controls.pause;
+    button.element.innerHTML = pause;
     video.muted = true;
     video.play().catch((error) => {
       if (error.name === "NotAllowedError") {
@@ -40,7 +22,7 @@ const toggle = (props) => (() => {
   };
   const setPause = () => {
     button.element.setAttribute("aria-label", "Play");
-    button.element.innerHTML = controls.play;
+    button.element.innerHTML = play;
     video.pause();
   };
   button.element.addEventListener("click", () => {
@@ -55,7 +37,7 @@ const toggle = (props) => (() => {
   if (video.getAttribute("autoplay") === "" || video.getAttribute("autoplay") === "true") {
     setPlay();
   }
-  return new webBuilderLibrary.ElementBuilder().withClassName("umd-element-video").withStyles({
+  return new ElementBuilder().withClassName("umd-element-video").withStyles({
     element: {
       position: "relative",
       ...additionalElementStyles,
@@ -75,5 +57,7 @@ const toggle = (props) => (() => {
     }
   }).withChildren(video, button).withEvents({ setPlay, setPause }).build();
 })();
-module.exports = toggle;
+export {
+  createVideoToggle
+};
 //# sourceMappingURL=toggle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../../../source/atomic/assets/video/toggle.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\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\n    const button = new ElementBuilder('button')\n      .styled(Styles.element.action.button.videoState)\n      .withAttribute('type', 'button')\n      .withAttribute('aria-label', 'Play')\n      .withHTML(iconPlay)\n      .build();\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\n    const setPause = () => {\n      button.element.setAttribute('aria-label', 'Play');\n      button.element.innerHTML = iconPlay;\n      video.pause();\n    };\n\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    return new ElementBuilder()\n      .withClassName('umd-element-video')\n      .withStyles({\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      .withChildren(video, button)\n      .withEvents({ setPlay, setPause })\n      .build();\n  })();\n"],"names":["ElementBuilder","Styles","iconPlay","iconPause"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcA,MAAA,SAAe,CAAC,WACb,MAAM;AACL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EAAA,IACE;AAEJ,QAAM,SAAS,IAAIA,kBAAAA,eAAe,QAAQ,EACvC,OAAOC,kBAAO,QAAQ,OAAO,OAAO,UAAU,EAC9C,cAAc,QAAQ,QAAQ,EAC9B,cAAc,cAAc,MAAM,EAClC,SAASC,aAAQ,EACjB,MAAA;AAEH,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;AAEA,QAAM,WAAW,MAAM;AACrB,WAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,WAAO,QAAQ,YAAYD,SAAAA;AAC3B,UAAM,MAAA;AAAA,EACR;AAEA,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,SAAO,IAAIF,kBAAAA,eAAA,EACR,cAAc,mBAAmB,EACjC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,GAAG;AAAA,MACH,GAAI,YAAY;AAAA,QACd,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,MAAA;AAAA,MAGb,GAAI,YAAY;AAAA,QACd,CAAC,SAAS,GAAG;AAAA,UACX,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF,CACD,EACA,aAAa,OAAO,MAAM,EAC1B,WAAW,EAAE,SAAS,UAAU,EAChC,MAAA;AACL,GAAA;;"}
+{"version":3,"file":"toggle.js","sources":["../../../../source/atomic/assets/video/toggle.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\n\ninterface VideoProps {\n  video: HTMLVideoElement;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n  callback?: (isPlaying: boolean) => void;\n}\n\nexport const createVideoToggle = (props: VideoProps) =>\n  (() => {\n    const {\n      video,\n      additionalElementStyles,\n      isScaled = false,\n      callback,\n    } = props;\n\n    const button = new ElementBuilder('button')\n      .styled(Styles.element.action.button.videoState)\n      .withAttribute('type', 'button')\n      .withAttribute('aria-label', 'Play')\n      .withHTML(iconPlay)\n      .build();\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\n    const setPause = () => {\n      button.element.setAttribute('aria-label', 'Play');\n      button.element.innerHTML = iconPlay;\n      video.pause();\n    };\n\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    return new ElementBuilder()\n      .withClassName('umd-element-video')\n      .withStyles({\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      .withChildren(video, button)\n      .withEvents({ setPlay, setPause })\n      .build();\n  })();\n"],"names":["iconPlay","iconPause"],"mappings":";;;AAcO,MAAM,oBAAoB,CAAC,WAC/B,MAAM;AACL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EAAA,IACE;AAEJ,QAAM,SAAS,IAAI,eAAe,QAAQ,EACvC,OAAO,OAAO,QAAQ,OAAO,OAAO,UAAU,EAC9C,cAAc,QAAQ,QAAQ,EAC9B,cAAc,cAAc,MAAM,EAClC,SAASA,IAAQ,EACjB,MAAA;AAEH,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;AAEA,QAAM,WAAW,MAAM;AACrB,WAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,WAAO,QAAQ,YAAYD;AAC3B,UAAM,MAAA;AAAA,EACR;AAEA,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,SAAO,IAAI,eAAA,EACR,cAAc,mBAAmB,EACjC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,GAAG;AAAA,MACH,GAAI,YAAY;AAAA,QACd,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,MAAA;AAAA,MAGb,GAAI,YAAY;AAAA,QACd,CAAC,SAAS,GAAG;AAAA,UACX,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF,CACD,EACA,aAAa,OAAO,MAAM,EAC1B,WAAW,EAAE,SAAS,UAAU,EAChC,MAAA;AACL,GAAA;"}

package/dist/atomic/buttons/fullscreen.d.ts

@@ -1,8 +1,7 @@
-declare const _default: {
+export declare const fullscreen: {
     create: ({ callback, index, }: {
         callback: (arg: number) => void;
         index: number;
     }) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 };
-export default _default;
 //# sourceMappingURL=fullscreen.d.ts.map

package/dist/atomic/buttons/fullscreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen.d.ts","sourceRoot":"","sources":["../../../source/atomic/buttons/fullscreen.ts"],"names":[],"mappings":";mCAOG;QACD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;KACf;;AAWD,wBAEE"}
+{"version":3,"file":"fullscreen.d.ts","sourceRoot":"","sources":["../../../source/atomic/buttons/fullscreen.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,UAAU;mCAdpB;QACD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;KACf;CAaA,CAAC"}

package/dist/atomic/buttons/fullscreen.js

@@ -1,32 +1,16 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const Styles = require("@universityofmaryland/web-styles-library");
-const controls = require("@universityofmaryland/web-icons-library/controls");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { fullscreen as fullscreen$1 } from "@universityofmaryland/web-icons-library/controls";
 const create = ({
   callback,
   index
 }) => (() => {
-  return new webBuilderLibrary.ElementBuilder("button").withAttribute("data-index", index.toString()).withAttribute("aria-label", "View Full Screen").withHTML(`Full Screen <span></span>${controls.fullscreen}`).on("click", () => callback(index)).styled(Styles__namespace.element.action.button.fullScreen).build();
+  return new ElementBuilder("button").withAttribute("data-index", index.toString()).withAttribute("aria-label", "View Full Screen").withHTML(`Full Screen <span></span>${fullscreen$1}`).on("click", () => callback(index)).styled(Styles.element.action.button.fullScreen).build();
 })();
 const fullscreen = {
   create
 };
-module.exports = fullscreen;
+export {
+  fullscreen
+};
 //# sourceMappingURL=fullscreen.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fullscreen.js","sources":["../../../source/atomic/buttons/fullscreen.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { fullscreen as iconFullscreen } from '@universityofmaryland/web-icons-library/controls';\n\nconst create = ({\n  callback,\n  index,\n}: {\n  callback: (arg: number) => void;\n  index: number;\n}) =>\n  (() => {\n    return new ElementBuilder('button')\n      .withAttribute('data-index', index.toString())\n      .withAttribute('aria-label', 'View Full Screen')\n      .withHTML(`Full Screen <span></span>${iconFullscreen}`)\n      .on('click', () => callback(index))\n      .styled(Styles.element.action.button.fullScreen)\n      .build();\n  })();\n\nexport default {\n  create,\n};\n"],"names":["ElementBuilder","iconFullscreen","Styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AACF,OAIG,MAAM;AACL,SAAO,IAAIA,kBAAAA,eAAe,QAAQ,EAC/B,cAAc,cAAc,MAAM,SAAA,CAAU,EAC5C,cAAc,cAAc,kBAAkB,EAC9C,SAAS,4BAA4BC,SAAAA,UAAc,EAAE,EACrD,GAAG,SAAS,MAAM,SAAS,KAAK,CAAC,EACjC,OAAOC,kBAAO,QAAQ,OAAO,OAAO,UAAU,EAC9C,MAAA;AACL,GAAA;AAEF,MAAA,aAAe;AAAA,EACb;AACF;;"}
+{"version":3,"file":"fullscreen.js","sources":["../../../source/atomic/buttons/fullscreen.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { fullscreen as iconFullscreen } from '@universityofmaryland/web-icons-library/controls';\n\nconst create = ({\n  callback,\n  index,\n}: {\n  callback: (arg: number) => void;\n  index: number;\n}) =>\n  (() => {\n    return new ElementBuilder('button')\n      .withAttribute('data-index', index.toString())\n      .withAttribute('aria-label', 'View Full Screen')\n      .withHTML(`Full Screen <span></span>${iconFullscreen}`)\n      .on('click', () => callback(index))\n      .styled(Styles.element.action.button.fullScreen)\n      .build();\n  })();\n\nexport const fullscreen = {\n  create,\n};\n"],"names":["iconFullscreen"],"mappings":";;;AAIA,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AACF,OAIG,MAAM;AACL,SAAO,IAAI,eAAe,QAAQ,EAC/B,cAAc,cAAc,MAAM,SAAA,CAAU,EAC5C,cAAc,cAAc,kBAAkB,EAC9C,SAAS,4BAA4BA,YAAc,EAAE,EACrD,GAAG,SAAS,MAAM,SAAS,KAAK,CAAC,EACjC,OAAO,OAAO,QAAQ,OAAO,OAAO,UAAU,EAC9C,MAAA;AACL,GAAA;AAEK,MAAM,aAAa;AAAA,EACxB;AACF;"}

package/dist/atomic/buttons/index.d.ts

@@ -1,2 +1,2 @@
-export { default as fullscreen } from './fullscreen';
+export { fullscreen } from './fullscreen';
 //# sourceMappingURL=index.d.ts.map

package/dist/atomic/buttons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/atomic/buttons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/atomic/buttons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/atomic/buttons/index.js

@@ -1,5 +1,5 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fullscreen = require("./fullscreen.js");
-exports.fullscreen = fullscreen;
+import { fullscreen } from "./fullscreen.js";
+export {
+  fullscreen
+};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/atomic/events/index.d.ts

@@ -1,3 +1,3 @@
-export { default as meta } from './meta';
-export { default as sign } from './sign';
+export { createEventMeta as meta } from './meta';
+export { createEventSign as sign } from './sign';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/atomic/events/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/atomic/events/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACjD,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/atomic/events/index.js

@@ -1,7 +1,7 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const meta = require("./meta.js");
-const sign = require("./sign.js");
-exports.meta = meta;
-exports.sign = sign;
+import { createEventMeta } from "./meta.js";
+import { createEventSign } from "./sign.js";
+export {
+  createEventMeta as meta,
+  createEventSign as sign
+};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

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

@@ -18,6 +18,6 @@ export type TypeMetaDisplay = EventType & {
     isThemeDark?: boolean;
     showTime?: boolean;
 };
-declare const _default: (props: TypeMetaDisplay) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export default _default;
+export declare const createEventMeta: (props: TypeMetaDisplay) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export {};
 //# sourceMappingURL=meta.d.ts.map

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":"AAQA,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;AAOF,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;yBA8Ec,OAAO,eAAe;AAAtC,wBAoBE"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../source/atomic/events/meta.ts"],"names":[],"mappings":"AAQA,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;AAOF,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;AA8EF,eAAO,MAAM,eAAe,GAAI,OAAO,eAAe,kFAoBrD,CAAC"}

package/dist/atomic/events/meta.js

@@ -1,31 +1,13 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const elementStyles = require("@universityofmaryland/web-styles-library/element");
-const location = require("@universityofmaryland/web-icons-library/location");
-const calendar = require("@universityofmaryland/web-icons-library/calendar");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import { pin } from "@universityofmaryland/web-icons-library/location";
+import { calendar, clock } from "@universityofmaryland/web-icons-library/calendar";
 const MakeDetailItem = (props) => {
   const { icon, text, isThemeDark } = props;
-  const iconElement = new webBuilderLibrary.ElementBuilder("span").withHTML(icon).build();
-  const textElement = new webBuilderLibrary.ElementBuilder("span").withHTML(text).build();
-  return new webBuilderLibrary.ElementBuilder("p").styled(
-    elementStyles__namespace.event.meta.composeItem({
+  const iconElement = new ElementBuilder("span").withHTML(icon).build();
+  const textElement = new ElementBuilder("span").withHTML(text).build();
+  return new ElementBuilder("p").styled(
+    elementStyles.event.meta.composeItem({
       theme: isThemeDark ? "dark" : "light"
     })
   ).withChildren(iconElement, textElement).build();
@@ -45,7 +27,7 @@ const createDayText = ({
     text = `${text} - ${endDayOfWeek}. ${endMonth} ${endDay}`;
   }
   return MakeDetailItem({
-    icon: calendar.calendar,
+    icon: calendar,
     text,
     isThemeDark
   });
@@ -60,7 +42,7 @@ const createTimeText = ({
     text = `${text} - ${endTime}`;
   }
   return MakeDetailItem({
-    icon: calendar.clock,
+    icon: clock,
     text,
     isThemeDark
   });
@@ -69,23 +51,25 @@ const createDateRow = (props) => {
   const { showTime = true, startMonth, startDay, endDay, endMonth } = props;
   const isMultiDay = startDay != endDay || startMonth != endMonth;
   const dateElement = createDayText({ ...props, isMultiDay });
-  const element = new webBuilderLibrary.ElementBuilder().withClassName("event-meta-date-row").withChild(dateElement);
+  const element = new ElementBuilder().withClassName("event-meta-date-row").withChild(dateElement);
   if (showTime) {
     element.withChild(createTimeText({ ...props }));
   }
   return element.build();
 };
-const meta = (props) => {
-  const { location: location$1, isThemeDark } = props;
+const createEventMeta = (props) => {
+  const { location, isThemeDark } = props;
   const dateRow = createDateRow(props);
-  const wrapper = new webBuilderLibrary.ElementBuilder().styled(elementStyles__namespace.event.meta.wrapper).withChild(dateRow);
-  if (location$1 && location$1.length > 0) {
+  const wrapper = new ElementBuilder().styled(elementStyles.event.meta.wrapper).withChild(dateRow);
+  if (location && location.length > 0) {
     wrapper.withChild(
-      MakeDetailItem({ ...props, icon: location.pin, text: location$1[0].title })
+      MakeDetailItem({ ...props, icon: pin, text: location[0].title })
     );
   }
   const wrapperModel = wrapper.build();
-  return new webBuilderLibrary.ElementBuilder().styled(elementStyles__namespace.event.meta.container).withChild(wrapperModel).build();
+  return new ElementBuilder().styled(elementStyles.event.meta.container).withChild(wrapperModel).build();
+};
+export {
+  createEventMeta
 };
-module.exports = meta;
 //# sourceMappingURL=meta.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"meta.js","sources":["../../../source/atomic/events/meta.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { pin as iconPin } from '@universityofmaryland/web-icons-library/location';\nimport {\n  calendar as iconCalendar,\n  clock as iconClock,\n} from '@universityofmaryland/web-icons-library/calendar';\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  isThemeDark?: 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, isThemeDark } = props;\n\n  const iconElement = new ElementBuilder('span').withHTML(icon).build();\n  const textElement = new ElementBuilder('span').withHTML(text).build();\n\n  return new ElementBuilder('p')\n    .styled(\n      elementStyles.event.meta.composeItem({\n        theme: isThemeDark ? 'dark' : 'light',\n      }),\n    )\n    .withChildren(iconElement, textElement)\n    .build();\n};\n\nconst createDayText = ({\n  startDayOfWeek,\n  startMonth,\n  startDay,\n  endDayOfWeek,\n  endDay,\n  endMonth,\n  isMultiDay = false,\n  isThemeDark,\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    isThemeDark,\n  });\n};\n\nconst createTimeText = ({\n  startTime,\n  endTime,\n  isThemeDark,\n}: 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    isThemeDark,\n  });\n};\n\nconst createDateRow = (props: TypeMetaDisplay) => {\n  const { showTime = true, startMonth, startDay, endDay, endMonth } = props;\n  const isMultiDay = startDay != endDay || startMonth != endMonth;\n  const dateElement = createDayText({ ...props, isMultiDay });\n  const element = new ElementBuilder()\n    .withClassName('event-meta-date-row')\n    .withChild(dateElement);\n\n  if (showTime) {\n    element.withChild(createTimeText({ ...props, isMultiDay }));\n  }\n\n  return element.build();\n};\n\nexport default (props: TypeMetaDisplay) => {\n  const { location, isThemeDark } = props;\n  const dateRow = createDateRow(props);\n\n  const wrapper = new ElementBuilder()\n    .styled(elementStyles.event.meta.wrapper)\n    .withChild(dateRow);\n\n  if (location && location.length > 0) {\n    wrapper.withChild(\n      MakeDetailItem({ ...props, icon: iconPin, text: location[0].title }),\n    );\n  }\n\n  const wrapperModel = wrapper.build();\n\n  return new ElementBuilder()\n    .styled(elementStyles.event.meta.container)\n    .withChild(wrapperModel)\n    .build();\n};\n"],"names":["ElementBuilder","elementStyles","iconCalendar","iconClock","location","iconPin"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAM,iBAAiB,CAAC,UAIlB;AACJ,QAAM,EAAE,MAAM,MAAM,YAAA,IAAgB;AAEpC,QAAM,cAAc,IAAIA,iCAAe,MAAM,EAAE,SAAS,IAAI,EAAE,MAAA;AAC9D,QAAM,cAAc,IAAIA,iCAAe,MAAM,EAAE,SAAS,IAAI,EAAE,MAAA;AAE9D,SAAO,IAAIA,kBAAAA,eAAe,GAAG,EAC1B;AAAA,IACCC,yBAAc,MAAM,KAAK,YAAY;AAAA,MACnC,OAAO,cAAc,SAAS;AAAA,IAAA,CAC/B;AAAA,EAAA,EAEF,aAAa,aAAa,WAAW,EACrC,MAAA;AACL;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;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,IACA;AAAA,EAAA,CACD;AACH;AAEA,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,MAAI,OAAO;AAEX,MAAI,aAAa,SAAS;AACxB,WAAO,GAAG,IAAI,MAAM,OAAO;AAAA,EAC7B;AAEA,SAAO,eAAe;AAAA,IACpB,MAAMC,SAAAA;AAAAA,IACN;AAAA,IACA;AAAA,EAAA,CACD;AACH;AAEA,MAAM,gBAAgB,CAAC,UAA2B;AAChD,QAAM,EAAE,WAAW,MAAM,YAAY,UAAU,QAAQ,aAAa;AACpE,QAAM,aAAa,YAAY,UAAU,cAAc;AACvD,QAAM,cAAc,cAAc,EAAE,GAAG,OAAO,YAAY;AAC1D,QAAM,UAAU,IAAIH,iCAAA,EACjB,cAAc,qBAAqB,EACnC,UAAU,WAAW;AAExB,MAAI,UAAU;AACZ,YAAQ,UAAU,eAAe,EAAE,GAAG,MAAkB,CAAC,CAAC;AAAA,EAC5D;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEA,MAAA,OAAe,CAAC,UAA2B;AACzC,QAAM,EAAA,UAAEI,YAAU,YAAA,IAAgB;AAClC,QAAM,UAAU,cAAc,KAAK;AAEnC,QAAM,UAAU,IAAIJ,iCAAA,EACjB,OAAOC,yBAAc,MAAM,KAAK,OAAO,EACvC,UAAU,OAAO;AAEpB,MAAIG,cAAYA,WAAS,SAAS,GAAG;AACnC,YAAQ;AAAA,MACN,eAAe,EAAE,GAAG,OAAO,MAAMC,SAAAA,KAAS,MAAMD,WAAS,CAAC,EAAE,MAAA,CAAO;AAAA,IAAA;AAAA,EAEvE;AAEA,QAAM,eAAe,QAAQ,MAAA;AAE7B,SAAO,IAAIJ,kBAAAA,eAAA,EACR,OAAOC,yBAAc,MAAM,KAAK,SAAS,EACzC,UAAU,YAAY,EACtB,MAAA;AACL;;"}
+{"version":3,"file":"meta.js","sources":["../../../source/atomic/events/meta.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { pin as iconPin } from '@universityofmaryland/web-icons-library/location';\nimport {\n  calendar as iconCalendar,\n  clock as iconClock,\n} from '@universityofmaryland/web-icons-library/calendar';\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  isThemeDark?: 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, isThemeDark } = props;\n\n  const iconElement = new ElementBuilder('span').withHTML(icon).build();\n  const textElement = new ElementBuilder('span').withHTML(text).build();\n\n  return new ElementBuilder('p')\n    .styled(\n      elementStyles.event.meta.composeItem({\n        theme: isThemeDark ? 'dark' : 'light',\n      }),\n    )\n    .withChildren(iconElement, textElement)\n    .build();\n};\n\nconst createDayText = ({\n  startDayOfWeek,\n  startMonth,\n  startDay,\n  endDayOfWeek,\n  endDay,\n  endMonth,\n  isMultiDay = false,\n  isThemeDark,\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    isThemeDark,\n  });\n};\n\nconst createTimeText = ({\n  startTime,\n  endTime,\n  isThemeDark,\n}: 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    isThemeDark,\n  });\n};\n\nconst createDateRow = (props: TypeMetaDisplay) => {\n  const { showTime = true, startMonth, startDay, endDay, endMonth } = props;\n  const isMultiDay = startDay != endDay || startMonth != endMonth;\n  const dateElement = createDayText({ ...props, isMultiDay });\n  const element = new ElementBuilder()\n    .withClassName('event-meta-date-row')\n    .withChild(dateElement);\n\n  if (showTime) {\n    element.withChild(createTimeText({ ...props, isMultiDay }));\n  }\n\n  return element.build();\n};\n\nexport const createEventMeta = (props: TypeMetaDisplay) => {\n  const { location, isThemeDark } = props;\n  const dateRow = createDateRow(props);\n\n  const wrapper = new ElementBuilder()\n    .styled(elementStyles.event.meta.wrapper)\n    .withChild(dateRow);\n\n  if (location && location.length > 0) {\n    wrapper.withChild(\n      MakeDetailItem({ ...props, icon: iconPin, text: location[0].title }),\n    );\n  }\n\n  const wrapperModel = wrapper.build();\n\n  return new ElementBuilder()\n    .styled(elementStyles.event.meta.container)\n    .withChild(wrapperModel)\n    .build();\n};\n"],"names":["iconCalendar","iconClock","iconPin"],"mappings":";;;;AAqCA,MAAM,iBAAiB,CAAC,UAIlB;AACJ,QAAM,EAAE,MAAM,MAAM,YAAA,IAAgB;AAEpC,QAAM,cAAc,IAAI,eAAe,MAAM,EAAE,SAAS,IAAI,EAAE,MAAA;AAC9D,QAAM,cAAc,IAAI,eAAe,MAAM,EAAE,SAAS,IAAI,EAAE,MAAA;AAE9D,SAAO,IAAI,eAAe,GAAG,EAC1B;AAAA,IACC,cAAc,MAAM,KAAK,YAAY;AAAA,MACnC,OAAO,cAAc,SAAS;AAAA,IAAA,CAC/B;AAAA,EAAA,EAEF,aAAa,aAAa,WAAW,EACrC,MAAA;AACL;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;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,MAAMA;AAAAA,IACN;AAAA,IACA;AAAA,EAAA,CACD;AACH;AAEA,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,MAAI,OAAO;AAEX,MAAI,aAAa,SAAS;AACxB,WAAO,GAAG,IAAI,MAAM,OAAO;AAAA,EAC7B;AAEA,SAAO,eAAe;AAAA,IACpB,MAAMC;AAAAA,IACN;AAAA,IACA;AAAA,EAAA,CACD;AACH;AAEA,MAAM,gBAAgB,CAAC,UAA2B;AAChD,QAAM,EAAE,WAAW,MAAM,YAAY,UAAU,QAAQ,aAAa;AACpE,QAAM,aAAa,YAAY,UAAU,cAAc;AACvD,QAAM,cAAc,cAAc,EAAE,GAAG,OAAO,YAAY;AAC1D,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,qBAAqB,EACnC,UAAU,WAAW;AAExB,MAAI,UAAU;AACZ,YAAQ,UAAU,eAAe,EAAE,GAAG,MAAkB,CAAC,CAAC;AAAA,EAC5D;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEO,MAAM,kBAAkB,CAAC,UAA2B;AACzD,QAAM,EAAE,UAAU,YAAA,IAAgB;AAClC,QAAM,UAAU,cAAc,KAAK;AAEnC,QAAM,UAAU,IAAI,eAAA,EACjB,OAAO,cAAc,MAAM,KAAK,OAAO,EACvC,UAAU,OAAO;AAEpB,MAAI,YAAY,SAAS,SAAS,GAAG;AACnC,YAAQ;AAAA,MACN,eAAe,EAAE,GAAG,OAAO,MAAMC,KAAS,MAAM,SAAS,CAAC,EAAE,MAAA,CAAO;AAAA,IAAA;AAAA,EAEvE;AAEA,QAAM,eAAe,QAAQ,MAAA;AAE7B,SAAO,IAAI,eAAA,EACR,OAAO,cAAc,MAAM,KAAK,SAAS,EACzC,UAAU,YAAY,EACtB,MAAA;AACL;"}

package/dist/atomic/events/sign.d.ts

@@ -1,4 +1,4 @@
-declare const _default: (props: {
+export declare const createEventSign: (props: {
     startMonth: string | HTMLElement;
     startDay: string | HTMLElement;
     endDay?: string | HTMLElement;
@@ -6,5 +6,4 @@ declare const _default: (props: {
     isThemeDark?: boolean;
     isLargeSize?: boolean;
 }) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export default _default;
 //# sourceMappingURL=sign.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sign.d.ts","sourceRoot":"","sources":["../../../source/atomic/events/sign.ts"],"names":[],"mappings":"yBAoIgB,OAAO;IACrB,UAAU,EAAE,MAAM,GAAG,WAAW,CAAC;IACjC,QAAQ,EAAE,MAAM,GAAG,WAAW,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAPD,wBA+DE"}
+{"version":3,"file":"sign.d.ts","sourceRoot":"","sources":["../../../source/atomic/events/sign.ts"],"names":[],"mappings":"AAgIA,eAAO,MAAM,eAAe,GAAI,OAAO;IACrC,UAAU,EAAE,MAAM,GAAG,WAAW,CAAC;IACjC,QAAQ,EAAE,MAAM,GAAG,WAAW,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,kFAwDA,CAAC"}

package/dist/atomic/events/sign.js

@@ -1,28 +1,7 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const typography = require("@universityofmaryland/web-styles-library/typography");
-const elementStyles = require("@universityofmaryland/web-styles-library/element");
-const theme = require("@universityofmaryland/web-utilities-library/theme");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
-const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
 const makeDateElement = ({
   element,
   isMonth,
@@ -38,28 +17,28 @@ const makeDateElement = ({
     dateElement.appendChild(element);
   }
   if (isDay && isLargeSize && !isMultiDay) {
-    return new webBuilderLibrary.ElementBuilder(dateElement).styled(
-      typography__namespace.sans.compose("extralarge", {
-        theme: theme.theme.fontColor(isThemeDark)
+    return new ElementBuilder(dateElement).styled(
+      typography.sans.compose("extralarge", {
+        theme: theme.fontColor(isThemeDark)
       })
     ).build();
   }
   if (isDay) {
-    return new webBuilderLibrary.ElementBuilder(dateElement).styled(
-      typography__namespace.sans.compose("larger", {
-        theme: theme.theme.fontColor(isThemeDark)
+    return new ElementBuilder(dateElement).styled(
+      typography.sans.compose("larger", {
+        theme: theme.fontColor(isThemeDark)
       })
     ).build();
   }
   if (isMonth && isLargeSize && !isMultiDay) {
-    return new webBuilderLibrary.ElementBuilder(dateElement).styled(
-      typography__namespace.sans.compose("small", {
-        theme: theme.theme.fontColor(isThemeDark)
+    return new ElementBuilder(dateElement).styled(
+      typography.sans.compose("small", {
+        theme: theme.fontColor(isThemeDark)
       })
     ).build();
   }
-  return new webBuilderLibrary.ElementBuilder(dateElement).styled(
-    typography__namespace.sans.compose("min", { theme: theme.theme.fontColor(isThemeDark) })
+  return new ElementBuilder(dateElement).styled(
+    typography.sans.compose("min", { theme: theme.fontColor(isThemeDark) })
   ).build();
 };
 const makeStartDateBlock = ({
@@ -83,11 +62,7 @@ const makeStartDateBlock = ({
     isMultiDay,
     isThemeDark
   });
-  return new webBuilderLibrary.ElementBuilder("p").withClassName("event-sign-start").withStyles({
-    subElement: {
-      color: token__namespace.color.black
-    }
-  }).withChildren(monthElement, dayElement).build();
+  return new ElementBuilder("p").withClassName("event-sign-start").withStyles({}).withChildren(monthElement, dayElement).build();
 };
 const makeEndDateBlock = ({
   endMonth,
@@ -106,9 +81,9 @@ const makeEndDateBlock = ({
     isMultiDay: true,
     isThemeDark
   });
-  return new webBuilderLibrary.ElementBuilder("p").withClassName("event-sign-end").withChildren(monthElement, dayElement).build();
+  return new ElementBuilder("p").withClassName("event-sign-end").withChildren(monthElement, dayElement).build();
 };
-const sign = (props) => {
+const createEventSign = (props) => {
   const {
     startMonth,
     startDay,
@@ -127,10 +102,10 @@ const sign = (props) => {
     isMultiDay,
     isThemeDark
   });
-  const container = new webBuilderLibrary.ElementBuilder().styled(elementStyles__namespace.event.sign.container).withChild(startBlock);
+  const container = new ElementBuilder().styled(elementStyles.event.sign.container).withChild(startBlock);
   if (isMultiDay && !!endDay && !!endMonth) {
-    const srOnly = new webBuilderLibrary.ElementBuilder("span").withClassName("sr-only").withHTML("to").build();
-    const dash = new webBuilderLibrary.ElementBuilder("span").withClassName("dash").withStyles({
+    const srOnly = new ElementBuilder("span").withClassName("sr-only").withHTML("to").build();
+    const dash = new ElementBuilder("span").withClassName("dash").withStyles({
       element: {
         width: "10px",
         height: "3px",
@@ -150,5 +125,7 @@ const sign = (props) => {
   }
   return container.build();
 };
-module.exports = sign;
+export {
+  createEventSign
+};
 //# sourceMappingURL=sign.js.map