npm - @universityofmaryland/web-elements-library - Versions diffs - 1.4.8 → 1.5.0-beta.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1139) hide show

package/dist/composite/layout/sticky-columns/index.js CHANGED Viewed

@@ -1,7 +1,25 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const index$1 = require("../../../utilities/theme/index.js");
-const { media } = Styles.token;
+const token = require("@universityofmaryland/web-styles-library/token");
+const layout = require("@universityofmaryland/web-styles-library/layout");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
+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 layout__namespace = /* @__PURE__ */ _interopNamespaceDefault(layout);
 const ELEMENT_NAME = "umd-sticky-columns";
 const ATTRIBUTE_STICKY_LAST = "sticky-last";
 const ELEMENT_STICKY_CONTAINER = "sticky-columns-container";
@@ -10,14 +28,14 @@ const ELEMENT_STICKY_COLUMN = "sticky-column";
 const ELEMENT_STATIC_COLUMN = "static-column";
 const OVERWRITE_STICKY_LAST_STICKY = `.${ELEMENT_STICKY_CONTAINER}[${ATTRIBUTE_STICKY_LAST}] .${ELEMENT_STICKY_COLUMN}`;
 const OverwriteStickyLast = `
-  @media (min-width: ${Styles.token.media.breakpoints.highDef.min}) {
+  @media (min-width: ${token__namespace.media.breakpoints.highDef.min}) {
     ${OVERWRITE_STICKY_LAST_STICKY} {
        order: 2;
      }
   }
 `;
 const ColumnSticky = `
-  @media (min-width: ${Styles.token.media.breakpoints.highDef.min}) {
+  @media (min-width: ${token__namespace.media.breakpoints.highDef.min}) {
     .${ELEMENT_STICKY_COLUMN} {
       position: sticky;
       top: 32px;
@@ -29,9 +47,9 @@ const STYLES_STICKY_COLUMNS_ELEMENT = `
     container: ${ELEMENT_NAME} / inline-size;
   }
-  ${index$1.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
-    [`.${ELEMENT_STICKY_CONTAINER_WRAPPER}`]: Styles.layout.grid.gap.two
+    [`.${ELEMENT_STICKY_CONTAINER_WRAPPER}`]: layout__namespace.grid.gap.two
   }
 })}
@@ -40,7 +58,7 @@ const STYLES_STICKY_COLUMNS_ELEMENT = `
     grid-template-columns: 1fr;
   }
-  @media (min-width: ${Styles.token.media.breakpoints.highDef.min}) {
+  @media (min-width: ${token__namespace.media.breakpoints.highDef.min}) {
     .${ELEMENT_STICKY_CONTAINER_WRAPPER} {
       grid-template-columns: 1fr 1fr;
     }

package/dist/composite/layout/sticky-columns/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../source/composite/layout/sticky-columns/index.ts"],"sourcesContent":["import { token, ~~layout }~~ from '@universityofmaryland/web-styles-library';\nimport * as ~~Utility~~ from 'utilities';\n\ntype TypeStickyProps = {\n stickyColumn?: HTMLElement \| null;\n staticColumn?: HTMLElement \| null;\n isStickyLast?: boolean \| null;\n topPosition?: string \| null;\n};\n\nconst ~~{ media } = token;\n\nconst~~ ELEMENT_NAME = 'umd-sticky-columns';\nconst ATTRIBUTE_STICKY_LAST = 'sticky-last';\n\nconst ELEMENT_STICKY_CONTAINER = 'sticky-columns-container';\nconst ELEMENT_STICKY_CONTAINER_WRAPPER = 'sticky-columns-container-wrapper';\n\nconst ELEMENT_STICKY_COLUMN = 'sticky-column';\nconst ELEMENT_STATIC_COLUMN = 'static-column';\n\nconst OVERWRITE_STICKY_LAST_STICKY = `.${ELEMENT_STICKY_CONTAINER}[${ATTRIBUTE_STICKY_LAST}] .${ELEMENT_STICKY_COLUMN}`;\n\n// prettier-ignore\nconst OverwriteStickyLast = `\n @media (min-width: ${token.media.breakpoints.highDef.min}) {\n ${OVERWRITE_STICKY_LAST_STICKY} {\n order: 2;\n }\n }\n`;\n\n// prettier-ignore\nconst ColumnSticky = `\n @media (min-width: ${token.media.breakpoints.highDef.min}) {\n .${ELEMENT_STICKY_COLUMN} {\n position: sticky;\n top: 32px;\n }\n }\n`;\n\n// prettier-ignore\nconst STYLES_STICKY_COLUMNS_ELEMENT = `\n .${ELEMENT_STICKY_CONTAINER} {\n container: ${ELEMENT_NAME} / inline-size;\n }\n\n ${~~Utility.theme.convertJSSObjectToStyles~~({\n styleObj: {\n [`.${ELEMENT_STICKY_CONTAINER_WRAPPER}`]: layout.grid.gap.two,\n },\n })}\n\n .${ELEMENT_STICKY_CONTAINER_WRAPPER} {\n align-items: start;\n grid-template-columns: 1fr;\n }\n\n @media (min-width: ${token.media.breakpoints.highDef.min}) {\n .${ELEMENT_STICKY_CONTAINER_WRAPPER} {\n grid-template-columns: 1fr 1fr;\n }\n }\n\n ${ColumnSticky}\n ${OverwriteStickyLast}\n`;\n\nexport default (element: TypeStickyProps) => {\n const { stickyColumn, staticColumn, isStickyLast, topPosition } = element;\n const container = document.createElement('div');\n const wrapper = document.createElement('div');\n const stickyElement = document.createElement('div');\n\n const setPosition = ({ value }: { value: string \| null }) => {\n if (value) {\n stickyElement.style.top = value;\n } else {\n stickyElement.style.removeProperty('top');\n }\n };\n\n if (isStickyLast) container.setAttribute(ATTRIBUTE_STICKY_LAST, '');\n container.classList.add(ELEMENT_STICKY_CONTAINER);\n wrapper.classList.add(ELEMENT_STICKY_CONTAINER_WRAPPER);\n\n if (stickyColumn) {\n stickyElement.classList.add(ELEMENT_STICKY_COLUMN);\n stickyElement.appendChild(stickyColumn);\n wrapper.appendChild(stickyElement);\n }\n\n if (staticColumn) {\n staticColumn.classList.add(ELEMENT_STATIC_COLUMN);\n wrapper.appendChild(staticColumn);\n }\n\n container.appendChild(wrapper);\n\n if (topPosition) {\n setPosition({ value: topPosition });\n }\n\n return {\n element: container,\n styles: STYLES_STICKY_COLUMNS_ELEMENT,\n events: {\n setPosition,\n },\n };\n};\n"],"names":["token","~~Utility.theme.convertJSSObjectToStyles~~","layout"],"mappings":"~~;;;AAUA~~,MAAM,~~EAAE,UAAUA,OAAAA;AAElB,MAAM,~~eAAe;AACrB,MAAM,wBAAwB;AAE9B,MAAM,2BAA2B;AACjC,MAAM,mCAAmC;AAEzC,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAE9B,MAAM,+BAA+B,IAAI,wBAAwB,IAAI,qBAAqB,MAAM,qBAAqB;AAGrH,MAAM,sBAAsB;AAAA,uBACLA,~~OAAAA~~,MAAM,~~MAAM,~~YAAY,QAAQ,GAAG;AAAA,MACpD,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,eAAe;AAAA,uBACEA,~~OAAAA~~,MAAM,~~MAAM,~~YAAY,QAAQ,GAAG;AAAA,OACnD,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5B,MAAM,gCAAgC;AAAA,KACjC,wBAAwB;AAAA,iBACZ,YAAY;AAAA;AAAA;AAAA,IAGzBC,~~iCAAuC~~;AAAA,~~EACvC~~,UAAU;AAAA,IACR,CAAC,IAAI,gCAAgC,EAAE,GAAGC,~~OAAAA~~,~~OAAO,~~KAAK,IAAI;AAAA,EAAA;AAE9D,CAAC,CAAC;AAAA;AAAA,KAEC,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA,uBAKdF,~~OAAAA~~,MAAM,~~MAAM,~~YAAY,QAAQ,GAAG;AAAA,OACnD,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKnC,YAAY;AAAA,IACZ,mBAAmB;AAAA;AAGvB,MAAA,QAAe,CAAC,YAA6B;AAC3C,QAAM,EAAE,cAAc,cAAc,cAAc,gBAAgB;AAClE,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,QAAM,gBAAgB,SAAS,cAAc,KAAK;AAElD,QAAM,cAAc,CAAC,EAAE,YAAsC;AAC3D,QAAI,OAAO;AACT,oBAAc,MAAM,MAAM;AAAA,IAC5B,OAAO;AACL,oBAAc,MAAM,eAAe,KAAK;AAAA,IAC1C;AAAA,EACF;AAEA,MAAI,aAAc,WAAU,aAAa,uBAAuB,EAAE;AAClE,YAAU,UAAU,IAAI,wBAAwB;AAChD,UAAQ,UAAU,IAAI,gCAAgC;AAEtD,MAAI,cAAc;AAChB,kBAAc,UAAU,IAAI,qBAAqB;AACjD,kBAAc,YAAY,YAAY;AACtC,YAAQ,YAAY,aAAa;AAAA,EACnC;AAEA,MAAI,cAAc;AAChB,iBAAa,UAAU,IAAI,qBAAqB;AAChD,YAAQ,YAAY,YAAY;AAAA,EAClC;AAEA,YAAU,YAAY,OAAO;AAE7B,MAAI,aAAa;AACf,gBAAY,EAAE,OAAO,aAAa;AAAA,EACpC;AAEA,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../source/composite/layout/sticky-columns/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\n\ntype TypeStickyProps = {\n stickyColumn?: HTMLElement \| null;\n staticColumn?: HTMLElement \| null;\n isStickyLast?: boolean \| null;\n topPosition?: string \| null;\n};\n\nconst ELEMENT_NAME = 'umd-sticky-columns';\nconst ATTRIBUTE_STICKY_LAST = 'sticky-last';\n\nconst ELEMENT_STICKY_CONTAINER = 'sticky-columns-container';\nconst ELEMENT_STICKY_CONTAINER_WRAPPER = 'sticky-columns-container-wrapper';\n\nconst ELEMENT_STICKY_COLUMN = 'sticky-column';\nconst ELEMENT_STATIC_COLUMN = 'static-column';\n\nconst OVERWRITE_STICKY_LAST_STICKY = `.${ELEMENT_STICKY_CONTAINER}[${ATTRIBUTE_STICKY_LAST}] .${ELEMENT_STICKY_COLUMN}`;\n\n// prettier-ignore\nconst OverwriteStickyLast = `\n @media (min-width: ${token.media.breakpoints.highDef.min}) {\n ${OVERWRITE_STICKY_LAST_STICKY} {\n order: 2;\n }\n }\n`;\n\n// prettier-ignore\nconst ColumnSticky = `\n @media (min-width: ${token.media.breakpoints.highDef.min}) {\n .${ELEMENT_STICKY_COLUMN} {\n position: sticky;\n top: 32px;\n }\n }\n`;\n\n// prettier-ignore\nconst STYLES_STICKY_COLUMNS_ELEMENT = `\n .${ELEMENT_STICKY_CONTAINER} {\n container: ${ELEMENT_NAME} / inline-size;\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_STICKY_CONTAINER_WRAPPER}`]: layout.grid.gap.two,\n },\n })}\n\n .${ELEMENT_STICKY_CONTAINER_WRAPPER} {\n align-items: start;\n grid-template-columns: 1fr;\n }\n\n @media (min-width: ${token.media.breakpoints.highDef.min}) {\n .${ELEMENT_STICKY_CONTAINER_WRAPPER} {\n grid-template-columns: 1fr 1fr;\n }\n }\n\n ${ColumnSticky}\n ${OverwriteStickyLast}\n`;\n\nexport default (element: TypeStickyProps) => {\n const { stickyColumn, staticColumn, isStickyLast, topPosition } = element;\n const container = document.createElement('div');\n const wrapper = document.createElement('div');\n const stickyElement = document.createElement('div');\n\n const setPosition = ({ value }: { value: string \| null }) => {\n if (value) {\n stickyElement.style.top = value;\n } else {\n stickyElement.style.removeProperty('top');\n }\n };\n\n if (isStickyLast) container.setAttribute(ATTRIBUTE_STICKY_LAST, '');\n container.classList.add(ELEMENT_STICKY_CONTAINER);\n wrapper.classList.add(ELEMENT_STICKY_CONTAINER_WRAPPER);\n\n if (stickyColumn) {\n stickyElement.classList.add(ELEMENT_STICKY_COLUMN);\n stickyElement.appendChild(stickyColumn);\n wrapper.appendChild(stickyElement);\n }\n\n if (staticColumn) {\n staticColumn.classList.add(ELEMENT_STATIC_COLUMN);\n wrapper.appendChild(staticColumn);\n }\n\n container.appendChild(wrapper);\n\n if (topPosition) {\n setPosition({ value: topPosition });\n }\n\n return {\n element: container,\n styles: STYLES_STICKY_COLUMNS_ELEMENT,\n events: {\n setPosition,\n },\n };\n};\n"],"names":["token","jssToCSS","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,eAAe;AACrB,MAAM,wBAAwB;AAE9B,MAAM,2BAA2B;AACjC,MAAM,mCAAmC;AAEzC,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAE9B,MAAM,+BAA+B,IAAI,wBAAwB,IAAI,qBAAqB,MAAM,qBAAqB;AAGrH,MAAM,sBAAsB;AAAA,uBACLA,iBAAM,MAAM,YAAY,QAAQ,GAAG;AAAA,MACpD,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,eAAe;AAAA,uBACEA,iBAAM,MAAM,YAAY,QAAQ,GAAG;AAAA,OACnD,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5B,MAAM,gCAAgC;AAAA,KACjC,wBAAwB;AAAA,iBACZ,YAAY;AAAA;AAAA;AAAA,IAGzBC,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,gCAAgC,EAAE,GAAGC,kBAAO,KAAK,IAAI;AAAA,EAAA;AAE9D,CAAC,CAAC;AAAA;AAAA,KAEC,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA,uBAKdF,iBAAM,MAAM,YAAY,QAAQ,GAAG;AAAA,OACnD,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKnC,YAAY;AAAA,IACZ,mBAAmB;AAAA;AAGvB,MAAA,QAAe,CAAC,YAA6B;AAC3C,QAAM,EAAE,cAAc,cAAc,cAAc,gBAAgB;AAClE,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,QAAM,gBAAgB,SAAS,cAAc,KAAK;AAElD,QAAM,cAAc,CAAC,EAAE,YAAsC;AAC3D,QAAI,OAAO;AACT,oBAAc,MAAM,MAAM;AAAA,IAC5B,OAAO;AACL,oBAAc,MAAM,eAAe,KAAK;AAAA,IAC1C;AAAA,EACF;AAEA,MAAI,aAAc,WAAU,aAAa,uBAAuB,EAAE;AAClE,YAAU,UAAU,IAAI,wBAAwB;AAChD,UAAQ,UAAU,IAAI,gCAAgC;AAEtD,MAAI,cAAc;AAChB,kBAAc,UAAU,IAAI,qBAAqB;AACjD,kBAAc,YAAY,YAAY;AACtC,YAAQ,YAAY,aAAa;AAAA,EACnC;AAEA,MAAI,cAAc;AAChB,iBAAa,UAAU,IAAI,qBAAqB;AAChD,YAAQ,YAAY,YAAY;AAAA,EAClC;AAEA,YAAU,YAAY,OAAO;AAE7B,MAAI,aAAa;AACf,gBAAY,EAAE,OAAO,aAAa;AAAA,EACpC;AAEA,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ;;"}

package/dist/composite/layout/sticky-columns/index.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
-import { token, layout } from "@universityofmaryland/web-styles-library";
-import { convertJSSObjectToStyles } from "../../../utilities/theme/index.mjs";
-const { media } = token;
+import * as token from "@universityofmaryland/web-styles-library/token";
+import * as layout from "@universityofmaryland/web-styles-library/layout";
+import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
 const ELEMENT_NAME = "umd-sticky-columns";
 const ATTRIBUTE_STICKY_LAST = "sticky-last";
 const ELEMENT_STICKY_CONTAINER = "sticky-columns-container";
@@ -28,7 +28,7 @@ const STYLES_STICKY_COLUMNS_ELEMENT = `
     container: ${ELEMENT_NAME} / inline-size;
   }
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`.${ELEMENT_STICKY_CONTAINER_WRAPPER}`]: layout.grid.gap.two
   }

package/dist/composite/layout/sticky-columns/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sources":["../../../../source/composite/layout/sticky-columns/index.ts"],"sourcesContent":["import { token, ~~layout }~~ from '@universityofmaryland/web-styles-library';\nimport * as ~~Utility~~ from 'utilities';\n\ntype TypeStickyProps = {\n stickyColumn?: HTMLElement \| null;\n staticColumn?: HTMLElement \| null;\n isStickyLast?: boolean \| null;\n topPosition?: string \| null;\n};\n\nconst ~~{ media } = token;\n\nconst~~ ELEMENT_NAME = 'umd-sticky-columns';\nconst ATTRIBUTE_STICKY_LAST = 'sticky-last';\n\nconst ELEMENT_STICKY_CONTAINER = 'sticky-columns-container';\nconst ELEMENT_STICKY_CONTAINER_WRAPPER = 'sticky-columns-container-wrapper';\n\nconst ELEMENT_STICKY_COLUMN = 'sticky-column';\nconst ELEMENT_STATIC_COLUMN = 'static-column';\n\nconst OVERWRITE_STICKY_LAST_STICKY = `.${ELEMENT_STICKY_CONTAINER}[${ATTRIBUTE_STICKY_LAST}] .${ELEMENT_STICKY_COLUMN}`;\n\n// prettier-ignore\nconst OverwriteStickyLast = `\n @media (min-width: ${token.media.breakpoints.highDef.min}) {\n ${OVERWRITE_STICKY_LAST_STICKY} {\n order: 2;\n }\n }\n`;\n\n// prettier-ignore\nconst ColumnSticky = `\n @media (min-width: ${token.media.breakpoints.highDef.min}) {\n .${ELEMENT_STICKY_COLUMN} {\n position: sticky;\n top: 32px;\n }\n }\n`;\n\n// prettier-ignore\nconst STYLES_STICKY_COLUMNS_ELEMENT = `\n .${ELEMENT_STICKY_CONTAINER} {\n container: ${ELEMENT_NAME} / inline-size;\n }\n\n ${~~Utility.theme.convertJSSObjectToStyles~~({\n styleObj: {\n [`.${ELEMENT_STICKY_CONTAINER_WRAPPER}`]: layout.grid.gap.two,\n },\n })}\n\n .${ELEMENT_STICKY_CONTAINER_WRAPPER} {\n align-items: start;\n grid-template-columns: 1fr;\n }\n\n @media (min-width: ${token.media.breakpoints.highDef.min}) {\n .${ELEMENT_STICKY_CONTAINER_WRAPPER} {\n grid-template-columns: 1fr 1fr;\n }\n }\n\n ${ColumnSticky}\n ${OverwriteStickyLast}\n`;\n\nexport default (element: TypeStickyProps) => {\n const { stickyColumn, staticColumn, isStickyLast, topPosition } = element;\n const container = document.createElement('div');\n const wrapper = document.createElement('div');\n const stickyElement = document.createElement('div');\n\n const setPosition = ({ value }: { value: string \| null }) => {\n if (value) {\n stickyElement.style.top = value;\n } else {\n stickyElement.style.removeProperty('top');\n }\n };\n\n if (isStickyLast) container.setAttribute(ATTRIBUTE_STICKY_LAST, '');\n container.classList.add(ELEMENT_STICKY_CONTAINER);\n wrapper.classList.add(ELEMENT_STICKY_CONTAINER_WRAPPER);\n\n if (stickyColumn) {\n stickyElement.classList.add(ELEMENT_STICKY_COLUMN);\n stickyElement.appendChild(stickyColumn);\n wrapper.appendChild(stickyElement);\n }\n\n if (staticColumn) {\n staticColumn.classList.add(ELEMENT_STATIC_COLUMN);\n wrapper.appendChild(staticColumn);\n }\n\n container.appendChild(wrapper);\n\n if (topPosition) {\n setPosition({ value: topPosition });\n }\n\n return {\n element: container,\n styles: STYLES_STICKY_COLUMNS_ELEMENT,\n events: {\n setPosition,\n },\n };\n};\n"],"names":[~~"Utility.theme.convertJSSObjectToStyles"~~],"mappings":"~~;;AAUA~~,MAAM,~~EAAE,UAAU;AAElB,MAAM,~~eAAe;AACrB,MAAM,wBAAwB;AAE9B,MAAM,2BAA2B;AACjC,MAAM,mCAAmC;AAEzC,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAE9B,MAAM,+BAA+B,IAAI,wBAAwB,IAAI,qBAAqB,MAAM,qBAAqB;AAGrH,MAAM,sBAAsB;AAAA,uBACL,MAAM,MAAM,YAAY,QAAQ,GAAG;AAAA,MACpD,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,eAAe;AAAA,uBACE,MAAM,MAAM,YAAY,QAAQ,GAAG;AAAA,OACnD,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5B,MAAM,gCAAgC;AAAA,KACjC,wBAAwB;AAAA,iBACZ,YAAY;AAAA;AAAA;AAAA,~~IAGzBA~~,~~yBAAuC~~;AAAA,~~EACvC~~,UAAU;AAAA,IACR,CAAC,IAAI,gCAAgC,EAAE,GAAG,OAAO,KAAK,IAAI;AAAA,EAAA;AAE9D,CAAC,CAAC;AAAA;AAAA,KAEC,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA,uBAKd,MAAM,MAAM,YAAY,QAAQ,GAAG;AAAA,OACnD,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKnC,YAAY;AAAA,IACZ,mBAAmB;AAAA;AAGvB,MAAA,QAAe,CAAC,YAA6B;AAC3C,QAAM,EAAE,cAAc,cAAc,cAAc,gBAAgB;AAClE,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,QAAM,gBAAgB,SAAS,cAAc,KAAK;AAElD,QAAM,cAAc,CAAC,EAAE,YAAsC;AAC3D,QAAI,OAAO;AACT,oBAAc,MAAM,MAAM;AAAA,IAC5B,OAAO;AACL,oBAAc,MAAM,eAAe,KAAK;AAAA,IAC1C;AAAA,EACF;AAEA,MAAI,aAAc,WAAU,aAAa,uBAAuB,EAAE;AAClE,YAAU,UAAU,IAAI,wBAAwB;AAChD,UAAQ,UAAU,IAAI,gCAAgC;AAEtD,MAAI,cAAc;AAChB,kBAAc,UAAU,IAAI,qBAAqB;AACjD,kBAAc,YAAY,YAAY;AACtC,YAAQ,YAAY,aAAa;AAAA,EACnC;AAEA,MAAI,cAAc;AAChB,iBAAa,UAAU,IAAI,qBAAqB;AAChD,YAAQ,YAAY,YAAY;AAAA,EAClC;AAEA,YAAU,YAAY,OAAO;AAE7B,MAAI,aAAa;AACf,gBAAY,EAAE,OAAO,aAAa;AAAA,EACpC;AAEA,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ;"}
1	+ {"version":3,"file":"index.mjs","sources":["../../../../source/composite/layout/sticky-columns/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\n\ntype TypeStickyProps = {\n stickyColumn?: HTMLElement \| null;\n staticColumn?: HTMLElement \| null;\n isStickyLast?: boolean \| null;\n topPosition?: string \| null;\n};\n\nconst ELEMENT_NAME = 'umd-sticky-columns';\nconst ATTRIBUTE_STICKY_LAST = 'sticky-last';\n\nconst ELEMENT_STICKY_CONTAINER = 'sticky-columns-container';\nconst ELEMENT_STICKY_CONTAINER_WRAPPER = 'sticky-columns-container-wrapper';\n\nconst ELEMENT_STICKY_COLUMN = 'sticky-column';\nconst ELEMENT_STATIC_COLUMN = 'static-column';\n\nconst OVERWRITE_STICKY_LAST_STICKY = `.${ELEMENT_STICKY_CONTAINER}[${ATTRIBUTE_STICKY_LAST}] .${ELEMENT_STICKY_COLUMN}`;\n\n// prettier-ignore\nconst OverwriteStickyLast = `\n @media (min-width: ${token.media.breakpoints.highDef.min}) {\n ${OVERWRITE_STICKY_LAST_STICKY} {\n order: 2;\n }\n }\n`;\n\n// prettier-ignore\nconst ColumnSticky = `\n @media (min-width: ${token.media.breakpoints.highDef.min}) {\n .${ELEMENT_STICKY_COLUMN} {\n position: sticky;\n top: 32px;\n }\n }\n`;\n\n// prettier-ignore\nconst STYLES_STICKY_COLUMNS_ELEMENT = `\n .${ELEMENT_STICKY_CONTAINER} {\n container: ${ELEMENT_NAME} / inline-size;\n }\n\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_STICKY_CONTAINER_WRAPPER}`]: layout.grid.gap.two,\n },\n })}\n\n .${ELEMENT_STICKY_CONTAINER_WRAPPER} {\n align-items: start;\n grid-template-columns: 1fr;\n }\n\n @media (min-width: ${token.media.breakpoints.highDef.min}) {\n .${ELEMENT_STICKY_CONTAINER_WRAPPER} {\n grid-template-columns: 1fr 1fr;\n }\n }\n\n ${ColumnSticky}\n ${OverwriteStickyLast}\n`;\n\nexport default (element: TypeStickyProps) => {\n const { stickyColumn, staticColumn, isStickyLast, topPosition } = element;\n const container = document.createElement('div');\n const wrapper = document.createElement('div');\n const stickyElement = document.createElement('div');\n\n const setPosition = ({ value }: { value: string \| null }) => {\n if (value) {\n stickyElement.style.top = value;\n } else {\n stickyElement.style.removeProperty('top');\n }\n };\n\n if (isStickyLast) container.setAttribute(ATTRIBUTE_STICKY_LAST, '');\n container.classList.add(ELEMENT_STICKY_CONTAINER);\n wrapper.classList.add(ELEMENT_STICKY_CONTAINER_WRAPPER);\n\n if (stickyColumn) {\n stickyElement.classList.add(ELEMENT_STICKY_COLUMN);\n stickyElement.appendChild(stickyColumn);\n wrapper.appendChild(stickyElement);\n }\n\n if (staticColumn) {\n staticColumn.classList.add(ELEMENT_STATIC_COLUMN);\n wrapper.appendChild(staticColumn);\n }\n\n container.appendChild(wrapper);\n\n if (topPosition) {\n setPosition({ value: topPosition });\n }\n\n return {\n element: container,\n styles: STYLES_STICKY_COLUMNS_ELEMENT,\n events: {\n setPosition,\n },\n };\n};\n"],"names":[],"mappings":";;;AAWA,MAAM,eAAe;AACrB,MAAM,wBAAwB;AAE9B,MAAM,2BAA2B;AACjC,MAAM,mCAAmC;AAEzC,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAE9B,MAAM,+BAA+B,IAAI,wBAAwB,IAAI,qBAAqB,MAAM,qBAAqB;AAGrH,MAAM,sBAAsB;AAAA,uBACL,MAAM,MAAM,YAAY,QAAQ,GAAG;AAAA,MACpD,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,eAAe;AAAA,uBACE,MAAM,MAAM,YAAY,QAAQ,GAAG;AAAA,OACnD,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5B,MAAM,gCAAgC;AAAA,KACjC,wBAAwB;AAAA,iBACZ,YAAY;AAAA;AAAA;AAAA,IAGzB,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,gCAAgC,EAAE,GAAG,OAAO,KAAK,IAAI;AAAA,EAAA;AAE9D,CAAC,CAAC;AAAA;AAAA,KAEC,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA,uBAKd,MAAM,MAAM,YAAY,QAAQ,GAAG;AAAA,OACnD,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKnC,YAAY;AAAA,IACZ,mBAAmB;AAAA;AAGvB,MAAA,QAAe,CAAC,YAA6B;AAC3C,QAAM,EAAE,cAAc,cAAc,cAAc,gBAAgB;AAClE,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,QAAM,gBAAgB,SAAS,cAAc,KAAK;AAElD,QAAM,cAAc,CAAC,EAAE,YAAsC;AAC3D,QAAI,OAAO;AACT,oBAAc,MAAM,MAAM;AAAA,IAC5B,OAAO;AACL,oBAAc,MAAM,eAAe,KAAK;AAAA,IAC1C;AAAA,EACF;AAEA,MAAI,aAAc,WAAU,aAAa,uBAAuB,EAAE;AAClE,YAAU,UAAU,IAAI,wBAAwB;AAChD,UAAQ,UAAU,IAAI,gCAAgC;AAEtD,MAAI,cAAc;AAChB,kBAAc,UAAU,IAAI,qBAAqB;AACjD,kBAAc,YAAY,YAAY;AACtC,YAAQ,YAAY,aAAa;AAAA,EACnC;AAEA,MAAI,cAAc;AAChB,iBAAa,UAAU,IAAI,qBAAqB;AAChD,YAAQ,YAAY,YAAY;AAAA,EAClC;AAEA,YAAU,YAAY,OAAO;AAE7B,MAAI,aAAa;AACf,gBAAY,EAAE,OAAO,aAAa;AAAA,EACpC;AAEA,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/composite/media/elements/caption.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"caption.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/elements/caption.ts"],"names":[],"mappings":"~~AAGA~~,MAAM,MAAM,4BAA4B,GAAG;IACzC,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;;+CA+CC,4BAA4B;;;;;;AAQ/B,wBAME"}
1	+ {"version":3,"file":"caption.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/elements/caption.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,4BAA4B,GAAG;IACzC,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;;+CA+CC,4BAA4B;;;;;;AAQ/B,wBAME"}

package/dist/composite/media/elements/caption.js CHANGED Viewed

@@ -1,26 +1,45 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const index = require("../../../utilities/theme/index.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const typography = require("@universityofmaryland/web-styles-library/typography");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
+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 ATTRIBUTE_THEME = "data-theme";
 const ATTRIBUTE_THEME_DARK = "dark";
 const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${ATTRIBUTE_THEME_DARK}"]`;
 const ELEMENT_MEDIA_CAPTIONS_CONTAINER = "element-media-inline-captions";
 const OVERWRITE_CONTAINER_DARK = `.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}${IS_THEME_DARK}`;
 const STYLES_MEDIA_CAPTIONS_ELEMENT = `
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
-    [`.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}`]: Styles.typography.sans.small
+    [`.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}`]: typography__namespace.sans.small
   }
 })}
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
-    [`${ELEMENT_MEDIA_CAPTIONS_CONTAINER} *`]: Styles.typography.sans.small
+    [`${ELEMENT_MEDIA_CAPTIONS_CONTAINER} *`]: typography__namespace.sans.small
   }
 })}
   .${ELEMENT_MEDIA_CAPTIONS_CONTAINER} {
-    margin-top: ${Styles.token.spacing.sm};
+    margin-top: ${token__namespace.spacing.sm};
     display: inline-block;
     text-align: left;
     opacity: 0;
@@ -29,12 +48,12 @@ const STYLES_MEDIA_CAPTIONS_ELEMENT = `
   .${ELEMENT_MEDIA_CAPTIONS_CONTAINER},
   .${ELEMENT_MEDIA_CAPTIONS_CONTAINER} > * {
-    color: ${Styles.token.color.gray.mediumAA};
+    color: ${token__namespace.color.gray.mediumAA};
   }
   ${OVERWRITE_CONTAINER_DARK},
   ${OVERWRITE_CONTAINER_DARK} * {
-    color: ${Styles.token.color.white};
+    color: ${token__namespace.color.white};
   }
 `;
 const CreateMediaInline = ({

package/dist/composite/media/elements/caption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"caption.js","sources":["../../../../source/composite/media/elements/caption.ts"],"sourcesContent":["import { token, ~~typography }~~ from '@universityofmaryland/web-styles-library';\nimport * as ~~Utility~~ from 'utilities';\n\nexport type TypeMediaCaptionRequirements = {\n caption: HTMLElement;\n isThemeDark?: boolean;\n};\n\nconst ATTRIBUTE_THEME = 'data-theme';\nconst ATTRIBUTE_THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${ATTRIBUTE_THEME_DARK}\"]`;\n\nconst ELEMENT_MEDIA_CAPTIONS_CONTAINER = 'element-media-inline-captions';\n\nconst OVERWRITE_CONTAINER_DARK = `.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}${IS_THEME_DARK}`;\n\n// prettier-ignore\nconst STYLES_MEDIA_CAPTIONS_ELEMENT = `\n ${~~Utility.theme.convertJSSObjectToStyles~~({\n styleObj: {\n [`.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}`]: typography.sans.small,\n },\n })}\n\n ${~~Utility.theme.convertJSSObjectToStyles~~({\n styleObj: {\n [`${ELEMENT_MEDIA_CAPTIONS_CONTAINER} `]: typography.sans.small,\n },\n })}\n\n .${ELEMENT_MEDIA_CAPTIONS_CONTAINER} {\n margin-top: ${token.spacing.sm};\n display: inline-block;\n text-align: left;\n opacity: 0;\n width: 100%;\n }\n\n .${ELEMENT_MEDIA_CAPTIONS_CONTAINER},\n .${ELEMENT_MEDIA_CAPTIONS_CONTAINER} > {\n color: ${token.color.gray.mediumAA};\n }\n\n ${OVERWRITE_CONTAINER_DARK},\n ${OVERWRITE_CONTAINER_DARK} * {\n color: ${token.color.white};\n }\n`;\n\nconst CreateMediaInline = ({\n caption,\n isThemeDark,\n}: TypeMediaCaptionRequirements) => {\n caption.classList.add(ELEMENT_MEDIA_CAPTIONS_CONTAINER);\n\n if (isThemeDark) caption.setAttribute(ATTRIBUTE_THEME, ATTRIBUTE_THEME_DARK);\n\n return caption;\n};\n\nexport default {\n CreateElement: CreateMediaInline,\n Styles: STYLES_MEDIA_CAPTIONS_ELEMENT,\n Elements: {\n container: ELEMENT_MEDIA_CAPTIONS_CONTAINER,\n },\n};\n"],"names":["~~Utility.theme.convertJSSObjectToStyles~~","typography","token"],"mappings":"~~;;;AAQA~~,MAAM,kBAAkB;AACxB,MAAM,uBAAuB;AAE7B,MAAM,gBAAgB,IAAI,eAAe,KAAK,oBAAoB;AAElE,MAAM,mCAAmC;AAEzC,MAAM,2BAA2B,IAAI,gCAAgC,GAAG,aAAa;AAGrF,MAAM,gCAAgC;AAAA,IAClCA~~,+BAAuC~~;AAAA,~~EACvC~~,UAAU;AAAA,IACR,CAAC,IAAI,gCAAgC,EAAE,GAAGC,~~OAAAA~~,~~WAAW,~~KAAK;AAAA,EAAA;AAE9D,CAAC,CAAC;AAAA;AAAA,IAEAD~~,+BAAuC~~;AAAA,~~EACvC~~,UAAU;AAAA,IACR,CAAC,GAAG,gCAAgC,IAAI,GAAGC,~~OAAAA~~,~~WAAW,~~KAAK;AAAA,EAAA;AAE/D,CAAC,CAAC;AAAA;AAAA,KAEC,gCAAgC;AAAA,kBACnBC,~~OAAAA~~,~~MAAM,~~QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAO7B,gCAAgC;AAAA,KAChC,gCAAgC;AAAA,aACxBA,~~aAAM~~,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA,IAGlC,wBAAwB;AAAA,IACxB,wBAAwB;AAAA,aACfA,~~OAAAA~~,MAAM,~~MAAM,~~KAAK;AAAA;AAAA;AAI9B,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AACF,MAAoC;AAClC,UAAQ,UAAU,IAAI,gCAAgC;AAEtD,MAAI,YAAa,SAAQ,aAAa,iBAAiB,oBAAoB;AAE3E,SAAO;AACT;AAEA,MAAA,mBAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,WAAW;AAAA,EAAA;AAEf;;"}
1	+ {"version":3,"file":"caption.js","sources":["../../../../source/composite/media/elements/caption.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\n\nexport type TypeMediaCaptionRequirements = {\n caption: HTMLElement;\n isThemeDark?: boolean;\n};\n\nconst ATTRIBUTE_THEME = 'data-theme';\nconst ATTRIBUTE_THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${ATTRIBUTE_THEME_DARK}\"]`;\n\nconst ELEMENT_MEDIA_CAPTIONS_CONTAINER = 'element-media-inline-captions';\n\nconst OVERWRITE_CONTAINER_DARK = `.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}${IS_THEME_DARK}`;\n\n// prettier-ignore\nconst STYLES_MEDIA_CAPTIONS_ELEMENT = `\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}`]: typography.sans.small,\n },\n })}\n\n ${jssToCSS({\n styleObj: {\n [`${ELEMENT_MEDIA_CAPTIONS_CONTAINER} `]: typography.sans.small,\n },\n })}\n\n .${ELEMENT_MEDIA_CAPTIONS_CONTAINER} {\n margin-top: ${token.spacing.sm};\n display: inline-block;\n text-align: left;\n opacity: 0;\n width: 100%;\n }\n\n .${ELEMENT_MEDIA_CAPTIONS_CONTAINER},\n .${ELEMENT_MEDIA_CAPTIONS_CONTAINER} > {\n color: ${token.color.gray.mediumAA};\n }\n\n ${OVERWRITE_CONTAINER_DARK},\n ${OVERWRITE_CONTAINER_DARK} * {\n color: ${token.color.white};\n }\n`;\n\nconst CreateMediaInline = ({\n caption,\n isThemeDark,\n}: TypeMediaCaptionRequirements) => {\n caption.classList.add(ELEMENT_MEDIA_CAPTIONS_CONTAINER);\n\n if (isThemeDark) caption.setAttribute(ATTRIBUTE_THEME, ATTRIBUTE_THEME_DARK);\n\n return caption;\n};\n\nexport default {\n CreateElement: CreateMediaInline,\n Styles: STYLES_MEDIA_CAPTIONS_ELEMENT,\n Elements: {\n container: ELEMENT_MEDIA_CAPTIONS_CONTAINER,\n },\n};\n"],"names":["jssToCSS","typography","token"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,kBAAkB;AACxB,MAAM,uBAAuB;AAE7B,MAAM,gBAAgB,IAAI,eAAe,KAAK,oBAAoB;AAElE,MAAM,mCAAmC;AAEzC,MAAM,2BAA2B,IAAI,gCAAgC,GAAG,aAAa;AAGrF,MAAM,gCAAgC;AAAA,IAClCA,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,gCAAgC,EAAE,GAAGC,sBAAW,KAAK;AAAA,EAAA;AAE9D,CAAC,CAAC;AAAA;AAAA,IAEAD,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,GAAG,gCAAgC,IAAI,GAAGC,sBAAW,KAAK;AAAA,EAAA;AAE/D,CAAC,CAAC;AAAA;AAAA,KAEC,gCAAgC;AAAA,kBACnBC,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAO7B,gCAAgC;AAAA,KAChC,gCAAgC;AAAA,aACxBA,iBAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA,IAGlC,wBAAwB;AAAA,IACxB,wBAAwB;AAAA,aACfA,iBAAM,MAAM,KAAK;AAAA;AAAA;AAI9B,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AACF,MAAoC;AAClC,UAAQ,UAAU,IAAI,gCAAgC;AAEtD,MAAI,YAAa,SAAQ,aAAa,iBAAiB,oBAAoB;AAE3E,SAAO;AACT;AAEA,MAAA,mBAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,WAAW;AAAA,EAAA;AAEf;;"}

package/dist/composite/media/elements/caption.mjs CHANGED Viewed

@@ -1,18 +1,19 @@
-import { token, typography } from "@universityofmaryland/web-styles-library";
-import { convertJSSObjectToStyles } from "../../../utilities/theme/index.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
 const ATTRIBUTE_THEME = "data-theme";
 const ATTRIBUTE_THEME_DARK = "dark";
 const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${ATTRIBUTE_THEME_DARK}"]`;
 const ELEMENT_MEDIA_CAPTIONS_CONTAINER = "element-media-inline-captions";
 const OVERWRITE_CONTAINER_DARK = `.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}${IS_THEME_DARK}`;
 const STYLES_MEDIA_CAPTIONS_ELEMENT = `
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}`]: typography.sans.small
   }
 })}
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`${ELEMENT_MEDIA_CAPTIONS_CONTAINER} *`]: typography.sans.small
   }

package/dist/composite/media/elements/caption.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"caption.mjs","sources":["../../../../source/composite/media/elements/caption.ts"],"sourcesContent":["import { token, ~~typography }~~ from '@universityofmaryland/web-styles-library';\nimport * as ~~Utility~~ from 'utilities';\n\nexport type TypeMediaCaptionRequirements = {\n caption: HTMLElement;\n isThemeDark?: boolean;\n};\n\nconst ATTRIBUTE_THEME = 'data-theme';\nconst ATTRIBUTE_THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${ATTRIBUTE_THEME_DARK}\"]`;\n\nconst ELEMENT_MEDIA_CAPTIONS_CONTAINER = 'element-media-inline-captions';\n\nconst OVERWRITE_CONTAINER_DARK = `.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}${IS_THEME_DARK}`;\n\n// prettier-ignore\nconst STYLES_MEDIA_CAPTIONS_ELEMENT = `\n ${~~Utility.theme.convertJSSObjectToStyles~~({\n styleObj: {\n [`.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}`]: typography.sans.small,\n },\n })}\n\n ${~~Utility.theme.convertJSSObjectToStyles~~({\n styleObj: {\n [`${ELEMENT_MEDIA_CAPTIONS_CONTAINER} `]: typography.sans.small,\n },\n })}\n\n .${ELEMENT_MEDIA_CAPTIONS_CONTAINER} {\n margin-top: ${token.spacing.sm};\n display: inline-block;\n text-align: left;\n opacity: 0;\n width: 100%;\n }\n\n .${ELEMENT_MEDIA_CAPTIONS_CONTAINER},\n .${ELEMENT_MEDIA_CAPTIONS_CONTAINER} > {\n color: ${token.color.gray.mediumAA};\n }\n\n ${OVERWRITE_CONTAINER_DARK},\n ${OVERWRITE_CONTAINER_DARK} * {\n color: ${token.color.white};\n }\n`;\n\nconst CreateMediaInline = ({\n caption,\n isThemeDark,\n}: TypeMediaCaptionRequirements) => {\n caption.classList.add(ELEMENT_MEDIA_CAPTIONS_CONTAINER);\n\n if (isThemeDark) caption.setAttribute(ATTRIBUTE_THEME, ATTRIBUTE_THEME_DARK);\n\n return caption;\n};\n\nexport default {\n CreateElement: CreateMediaInline,\n Styles: STYLES_MEDIA_CAPTIONS_ELEMENT,\n Elements: {\n container: ELEMENT_MEDIA_CAPTIONS_CONTAINER,\n },\n};\n"],"names":[~~"Utility.theme.convertJSSObjectToStyles"~~],"mappings":"~~;;AAQA~~,MAAM,kBAAkB;AACxB,MAAM,uBAAuB;AAE7B,MAAM,gBAAgB,IAAI,eAAe,KAAK,oBAAoB;AAElE,MAAM,mCAAmC;AAEzC,MAAM,2BAA2B,IAAI,gCAAgC,GAAG,aAAa;AAGrF,MAAM,gCAAgC;AAAA,~~IAClCA~~,~~yBAAuC~~;AAAA,~~EACvC~~,UAAU;AAAA,IACR,CAAC,IAAI,gCAAgC,EAAE,GAAG,WAAW,KAAK;AAAA,EAAA;AAE9D,CAAC,CAAC;AAAA;AAAA,~~IAEAA~~,~~yBAAuC~~;AAAA,~~EACvC~~,UAAU;AAAA,IACR,CAAC,GAAG,gCAAgC,IAAI,GAAG,WAAW,KAAK;AAAA,EAAA;AAE/D,CAAC,CAAC;AAAA;AAAA,KAEC,gCAAgC;AAAA,kBACnB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAO7B,gCAAgC;AAAA,KAChC,gCAAgC;AAAA,aACxB,MAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA,IAGlC,wBAAwB;AAAA,IACxB,wBAAwB;AAAA,aACf,MAAM,MAAM,KAAK;AAAA;AAAA;AAI9B,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AACF,MAAoC;AAClC,UAAQ,UAAU,IAAI,gCAAgC;AAEtD,MAAI,YAAa,SAAQ,aAAa,iBAAiB,oBAAoB;AAE3E,SAAO;AACT;AAEA,MAAA,mBAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,WAAW;AAAA,EAAA;AAEf;"}
1	+ {"version":3,"file":"caption.mjs","sources":["../../../../source/composite/media/elements/caption.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\n\nexport type TypeMediaCaptionRequirements = {\n caption: HTMLElement;\n isThemeDark?: boolean;\n};\n\nconst ATTRIBUTE_THEME = 'data-theme';\nconst ATTRIBUTE_THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${ATTRIBUTE_THEME_DARK}\"]`;\n\nconst ELEMENT_MEDIA_CAPTIONS_CONTAINER = 'element-media-inline-captions';\n\nconst OVERWRITE_CONTAINER_DARK = `.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}${IS_THEME_DARK}`;\n\n// prettier-ignore\nconst STYLES_MEDIA_CAPTIONS_ELEMENT = `\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}`]: typography.sans.small,\n },\n })}\n\n ${jssToCSS({\n styleObj: {\n [`${ELEMENT_MEDIA_CAPTIONS_CONTAINER} `]: typography.sans.small,\n },\n })}\n\n .${ELEMENT_MEDIA_CAPTIONS_CONTAINER} {\n margin-top: ${token.spacing.sm};\n display: inline-block;\n text-align: left;\n opacity: 0;\n width: 100%;\n }\n\n .${ELEMENT_MEDIA_CAPTIONS_CONTAINER},\n .${ELEMENT_MEDIA_CAPTIONS_CONTAINER} > {\n color: ${token.color.gray.mediumAA};\n }\n\n ${OVERWRITE_CONTAINER_DARK},\n ${OVERWRITE_CONTAINER_DARK} * {\n color: ${token.color.white};\n }\n`;\n\nconst CreateMediaInline = ({\n caption,\n isThemeDark,\n}: TypeMediaCaptionRequirements) => {\n caption.classList.add(ELEMENT_MEDIA_CAPTIONS_CONTAINER);\n\n if (isThemeDark) caption.setAttribute(ATTRIBUTE_THEME, ATTRIBUTE_THEME_DARK);\n\n return caption;\n};\n\nexport default {\n CreateElement: CreateMediaInline,\n Styles: STYLES_MEDIA_CAPTIONS_ELEMENT,\n Elements: {\n container: ELEMENT_MEDIA_CAPTIONS_CONTAINER,\n },\n};\n"],"names":[],"mappings":";;;AASA,MAAM,kBAAkB;AACxB,MAAM,uBAAuB;AAE7B,MAAM,gBAAgB,IAAI,eAAe,KAAK,oBAAoB;AAElE,MAAM,mCAAmC;AAEzC,MAAM,2BAA2B,IAAI,gCAAgC,GAAG,aAAa;AAGrF,MAAM,gCAAgC;AAAA,IAClC,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,gCAAgC,EAAE,GAAG,WAAW,KAAK;AAAA,EAAA;AAE9D,CAAC,CAAC;AAAA;AAAA,IAEA,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,GAAG,gCAAgC,IAAI,GAAG,WAAW,KAAK;AAAA,EAAA;AAE/D,CAAC,CAAC;AAAA;AAAA,KAEC,gCAAgC;AAAA,kBACnB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAO7B,gCAAgC;AAAA,KAChC,gCAAgC;AAAA,aACxB,MAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA,IAGlC,wBAAwB;AAAA,IACxB,wBAAwB;AAAA,aACf,MAAM,MAAM,KAAK;AAAA;AAAA;AAI9B,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AACF,MAAoC;AAClC,UAAQ,UAAU,IAAI,gCAAgC;AAEtD,MAAI,YAAa,SAAQ,aAAa,iBAAiB,oBAAoB;AAE3E,SAAO;AACT;AAEA,MAAA,mBAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,WAAW;AAAA,EAAA;AAEf;"}

package/dist/composite/media/elements/gif.js CHANGED Viewed

@@ -1,18 +1,29 @@
 "use strict";
 const index = require("../../../model/elements/index.js");
-require("@universityofmaryland/web-styles-library");
-require("../../../node_modules/postcss/lib/postcss.js");
-require("../../../node_modules/postcss-nesting/dist/index.js");
-require("../../../node_modules/postcss-js/index.js");
+require("@universityofmaryland/web-styles-library/token");
+require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-utilities-library/media");
+require("@universityofmaryland/web-utilities-library/dom");
+require("@universityofmaryland/web-icons-library/controls");
+require("@universityofmaryland/web-icons-library/communication");
+require("@universityofmaryland/web-icons-library/files");
+require("@universityofmaryland/web-icons-library/brand");
+require("@universityofmaryland/web-icons-library/arrows");
 require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
 require("../../../atomic/animations/brand/card-stack.js");
 const background = require("../../../atomic/assets/image/background.js");
+require("@universityofmaryland/web-utilities-library/performance");
+require("@universityofmaryland/web-utilities-library/accessibility");
+require("@universityofmaryland/web-icons-library/location");
+require("@universityofmaryland/web-icons-library/calendar");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");
 require("../../../atomic/layout/person/columns.js");
+require("@universityofmaryland/web-icons-library/social");
 require("../../../atomic/text-lockup/date.js");
 require("../../../atomic/text-lockup/small.js");
+require("@universityofmaryland/web-styles-library/typography");
 const gif = ({ image }) => {
   const container = document.createElement("div");
   const calculateHeight = () => {

package/dist/composite/media/elements/gif.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gif.js","sources":["../../../../source/composite/media/elements/gif.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { assets } from 'atomic';\n\nexport default ({ image }: { image: HTMLImageElement }) => {\n const container = document.createElement('div');\n\n const calculateHeight = () => {\n if (!image.naturalWidth \|\| !image.naturalHeight) return;\n\n const aspectRatio = image.naturalHeight / image.naturalWidth;\n const containerWidth = container.offsetWidth;\n\n if (containerWidth > 0) {\n const calculatedHeight = Math.round(containerWidth * aspectRatio);\n container.style.height = `${calculatedHeight}px`;\n } else {\n container.style.width = `${image.naturalWidth}px`;\n\n setTimeout(() => {\n const containerWidth = container.offsetWidth;\n const calculatedHeight = Math.round(containerWidth * aspectRatio);\n container.style.height = `${calculatedHeight}px`;\n }, 100);\n }\n };\n\n const resizeObserver = new ResizeObserver(() => {\n container.style.width = `${image.naturalWidth}px`;\n setTimeout(() => {\n calculateHeight();\n }, 10);\n });\n\n if (image.complete && image.naturalWidth) {\n container.style.width = `${image.naturalWidth}px`;\n setTimeout(() => {\n calculateHeight();\n }, 10);\n } else {\n image.addEventListener('load', calculateHeight);\n }\n\n setTimeout(() => {\n resizeObserver.observe(container);\n }, 0);\n\n const elementModel = ElementModel.create({\n element: container,\n className: 'media-gif',\n children: [\n assets.image.background({\n element: image,\n isShowCaption: true,\n isScaled: false,\n isGifAllowed: true,\n customStyles: {\n width: 'auto',\n height: '100%',\n display: 'block',\n },\n }),\n ],\n elementStyles: {\n element: {\n maxHeight: '100%',\n maxWidth: '100%',\n position: 'relative',\n display: 'block',\n overflow: 'hidden',\n },\n },\n });\n\n return {\n ...elementModel,\n destroy: () => {\n resizeObserver.disconnect();\n image.removeEventListener('load', calculateHeight);\n },\n };\n};\n"],"names":["containerWidth","ElementModel.create","assets.image.background"],"mappings":"~~;;;;;;;;;;;;;;;~~AAGA,MAAA,MAAe,CAAC,EAAE,MAAA,MAAyC;AACzD,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAe;AAEjD,UAAM,cAAc,MAAM,gBAAgB,MAAM;AAChD,UAAM,iBAAiB,UAAU;AAEjC,QAAI,iBAAiB,GAAG;AACtB,YAAM,mBAAmB,KAAK,MAAM,iBAAiB,WAAW;AAChE,gBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,IAC9C,OAAO;AACL,gBAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAE7C,iBAAW,MAAM;AACf,cAAMA,kBAAiB,UAAU;AACjC,cAAM,mBAAmB,KAAK,MAAMA,kBAAiB,WAAW;AAChE,kBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,MAC9C,GAAG,GAAG;AAAA,IACR;AAAA,EACF;AAEA,QAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,CAAC;AAED,MAAI,MAAM,YAAY,MAAM,cAAc;AACxC,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,OAAO;AACL,UAAM,iBAAiB,QAAQ,eAAe;AAAA,EAChD;AAEA,aAAW,MAAM;AACf,mBAAe,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC;AAEJ,QAAM,eAAeC,MAAAA,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,MACRC,WAAwB;AAAA,QACtB,SAAS;AAAA,QACT,eAAe;AAAA,QACf,UAAU;AAAA,QACV,cAAc;AAAA,QACd,cAAc;AAAA,UACZ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,QAAA;AAAA,MACX,CACD;AAAA,IAAA;AAAA,IAEH,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS,MAAM;AACb,qBAAe,WAAA;AACf,YAAM,oBAAoB,QAAQ,eAAe;AAAA,IACnD;AAAA,EAAA;AAEJ;;"}
1	+ {"version":3,"file":"gif.js","sources":["../../../../source/composite/media/elements/gif.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { assets } from 'atomic';\n\nexport default ({ image }: { image: HTMLImageElement }) => {\n const container = document.createElement('div');\n\n const calculateHeight = () => {\n if (!image.naturalWidth \|\| !image.naturalHeight) return;\n\n const aspectRatio = image.naturalHeight / image.naturalWidth;\n const containerWidth = container.offsetWidth;\n\n if (containerWidth > 0) {\n const calculatedHeight = Math.round(containerWidth * aspectRatio);\n container.style.height = `${calculatedHeight}px`;\n } else {\n container.style.width = `${image.naturalWidth}px`;\n\n setTimeout(() => {\n const containerWidth = container.offsetWidth;\n const calculatedHeight = Math.round(containerWidth * aspectRatio);\n container.style.height = `${calculatedHeight}px`;\n }, 100);\n }\n };\n\n const resizeObserver = new ResizeObserver(() => {\n container.style.width = `${image.naturalWidth}px`;\n setTimeout(() => {\n calculateHeight();\n }, 10);\n });\n\n if (image.complete && image.naturalWidth) {\n container.style.width = `${image.naturalWidth}px`;\n setTimeout(() => {\n calculateHeight();\n }, 10);\n } else {\n image.addEventListener('load', calculateHeight);\n }\n\n setTimeout(() => {\n resizeObserver.observe(container);\n }, 0);\n\n const elementModel = ElementModel.create({\n element: container,\n className: 'media-gif',\n children: [\n assets.image.background({\n element: image,\n isShowCaption: true,\n isScaled: false,\n isGifAllowed: true,\n customStyles: {\n width: 'auto',\n height: '100%',\n display: 'block',\n },\n }),\n ],\n elementStyles: {\n element: {\n maxHeight: '100%',\n maxWidth: '100%',\n position: 'relative',\n display: 'block',\n overflow: 'hidden',\n },\n },\n });\n\n return {\n ...elementModel,\n destroy: () => {\n resizeObserver.disconnect();\n image.removeEventListener('load', calculateHeight);\n },\n };\n};\n"],"names":["containerWidth","ElementModel.create","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAA,MAAe,CAAC,EAAE,MAAA,MAAyC;AACzD,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAe;AAEjD,UAAM,cAAc,MAAM,gBAAgB,MAAM;AAChD,UAAM,iBAAiB,UAAU;AAEjC,QAAI,iBAAiB,GAAG;AACtB,YAAM,mBAAmB,KAAK,MAAM,iBAAiB,WAAW;AAChE,gBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,IAC9C,OAAO;AACL,gBAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAE7C,iBAAW,MAAM;AACf,cAAMA,kBAAiB,UAAU;AACjC,cAAM,mBAAmB,KAAK,MAAMA,kBAAiB,WAAW;AAChE,kBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,MAC9C,GAAG,GAAG;AAAA,IACR;AAAA,EACF;AAEA,QAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,CAAC;AAED,MAAI,MAAM,YAAY,MAAM,cAAc;AACxC,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,OAAO;AACL,UAAM,iBAAiB,QAAQ,eAAe;AAAA,EAChD;AAEA,aAAW,MAAM;AACf,mBAAe,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC;AAEJ,QAAM,eAAeC,MAAAA,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,MACRC,WAAwB;AAAA,QACtB,SAAS;AAAA,QACT,eAAe;AAAA,QACf,UAAU;AAAA,QACV,cAAc;AAAA,QACd,cAAc;AAAA,UACZ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,QAAA;AAAA,MACX,CACD;AAAA,IAAA;AAAA,IAEH,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS,MAAM;AACb,qBAAe,WAAA;AACf,YAAM,oBAAoB,QAAQ,eAAe;AAAA,IACnD;AAAA,EAAA;AAEJ;;"}

package/dist/composite/media/elements/gif.mjs CHANGED Viewed

@@ -1,17 +1,28 @@
 import { create } from "../../../model/elements/index.mjs";
-import "@universityofmaryland/web-styles-library";
-import "../../../node_modules/postcss/lib/postcss.mjs";
-import "../../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../../node_modules/postcss-js/index.mjs";
+import "@universityofmaryland/web-styles-library/token";
+import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/controls";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "@universityofmaryland/web-icons-library/arrows";
 import "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../../atomic/animations/brand/card-stack.mjs";
 import imageContainer from "../../../atomic/assets/image/background.mjs";
+import "@universityofmaryland/web-utilities-library/performance";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
 import "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";
 import "../../../atomic/layout/person/columns.mjs";
+import "@universityofmaryland/web-icons-library/social";
 import "../../../atomic/text-lockup/date.mjs";
 import "../../../atomic/text-lockup/small.mjs";
+import "@universityofmaryland/web-styles-library/typography";
 const gif = ({ image }) => {
   const container = document.createElement("div");
   const calculateHeight = () => {

package/dist/composite/media/elements/gif.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gif.mjs","sources":["../../../../source/composite/media/elements/gif.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { assets } from 'atomic';\n\nexport default ({ image }: { image: HTMLImageElement }) => {\n const container = document.createElement('div');\n\n const calculateHeight = () => {\n if (!image.naturalWidth \|\| !image.naturalHeight) return;\n\n const aspectRatio = image.naturalHeight / image.naturalWidth;\n const containerWidth = container.offsetWidth;\n\n if (containerWidth > 0) {\n const calculatedHeight = Math.round(containerWidth * aspectRatio);\n container.style.height = `${calculatedHeight}px`;\n } else {\n container.style.width = `${image.naturalWidth}px`;\n\n setTimeout(() => {\n const containerWidth = container.offsetWidth;\n const calculatedHeight = Math.round(containerWidth * aspectRatio);\n container.style.height = `${calculatedHeight}px`;\n }, 100);\n }\n };\n\n const resizeObserver = new ResizeObserver(() => {\n container.style.width = `${image.naturalWidth}px`;\n setTimeout(() => {\n calculateHeight();\n }, 10);\n });\n\n if (image.complete && image.naturalWidth) {\n container.style.width = `${image.naturalWidth}px`;\n setTimeout(() => {\n calculateHeight();\n }, 10);\n } else {\n image.addEventListener('load', calculateHeight);\n }\n\n setTimeout(() => {\n resizeObserver.observe(container);\n }, 0);\n\n const elementModel = ElementModel.create({\n element: container,\n className: 'media-gif',\n children: [\n assets.image.background({\n element: image,\n isShowCaption: true,\n isScaled: false,\n isGifAllowed: true,\n customStyles: {\n width: 'auto',\n height: '100%',\n display: 'block',\n },\n }),\n ],\n elementStyles: {\n element: {\n maxHeight: '100%',\n maxWidth: '100%',\n position: 'relative',\n display: 'block',\n overflow: 'hidden',\n },\n },\n });\n\n return {\n ...elementModel,\n destroy: () => {\n resizeObserver.disconnect();\n image.removeEventListener('load', calculateHeight);\n },\n };\n};\n"],"names":["containerWidth","ElementModel.create","assets.image.background"],"mappings":"~~;;;;;;;;;;;;;;~~AAGA,MAAA,MAAe,CAAC,EAAE,MAAA,MAAyC;AACzD,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAe;AAEjD,UAAM,cAAc,MAAM,gBAAgB,MAAM;AAChD,UAAM,iBAAiB,UAAU;AAEjC,QAAI,iBAAiB,GAAG;AACtB,YAAM,mBAAmB,KAAK,MAAM,iBAAiB,WAAW;AAChE,gBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,IAC9C,OAAO;AACL,gBAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAE7C,iBAAW,MAAM;AACf,cAAMA,kBAAiB,UAAU;AACjC,cAAM,mBAAmB,KAAK,MAAMA,kBAAiB,WAAW;AAChE,kBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,MAC9C,GAAG,GAAG;AAAA,IACR;AAAA,EACF;AAEA,QAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,CAAC;AAED,MAAI,MAAM,YAAY,MAAM,cAAc;AACxC,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,OAAO;AACL,UAAM,iBAAiB,QAAQ,eAAe;AAAA,EAChD;AAEA,aAAW,MAAM;AACf,mBAAe,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC;AAEJ,QAAM,eAAeC,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,MACRC,eAAwB;AAAA,QACtB,SAAS;AAAA,QACT,eAAe;AAAA,QACf,UAAU;AAAA,QACV,cAAc;AAAA,QACd,cAAc;AAAA,UACZ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,QAAA;AAAA,MACX,CACD;AAAA,IAAA;AAAA,IAEH,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS,MAAM;AACb,qBAAe,WAAA;AACf,YAAM,oBAAoB,QAAQ,eAAe;AAAA,IACnD;AAAA,EAAA;AAEJ;"}
1	+ {"version":3,"file":"gif.mjs","sources":["../../../../source/composite/media/elements/gif.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { assets } from 'atomic';\n\nexport default ({ image }: { image: HTMLImageElement }) => {\n const container = document.createElement('div');\n\n const calculateHeight = () => {\n if (!image.naturalWidth \|\| !image.naturalHeight) return;\n\n const aspectRatio = image.naturalHeight / image.naturalWidth;\n const containerWidth = container.offsetWidth;\n\n if (containerWidth > 0) {\n const calculatedHeight = Math.round(containerWidth * aspectRatio);\n container.style.height = `${calculatedHeight}px`;\n } else {\n container.style.width = `${image.naturalWidth}px`;\n\n setTimeout(() => {\n const containerWidth = container.offsetWidth;\n const calculatedHeight = Math.round(containerWidth * aspectRatio);\n container.style.height = `${calculatedHeight}px`;\n }, 100);\n }\n };\n\n const resizeObserver = new ResizeObserver(() => {\n container.style.width = `${image.naturalWidth}px`;\n setTimeout(() => {\n calculateHeight();\n }, 10);\n });\n\n if (image.complete && image.naturalWidth) {\n container.style.width = `${image.naturalWidth}px`;\n setTimeout(() => {\n calculateHeight();\n }, 10);\n } else {\n image.addEventListener('load', calculateHeight);\n }\n\n setTimeout(() => {\n resizeObserver.observe(container);\n }, 0);\n\n const elementModel = ElementModel.create({\n element: container,\n className: 'media-gif',\n children: [\n assets.image.background({\n element: image,\n isShowCaption: true,\n isScaled: false,\n isGifAllowed: true,\n customStyles: {\n width: 'auto',\n height: '100%',\n display: 'block',\n },\n }),\n ],\n elementStyles: {\n element: {\n maxHeight: '100%',\n maxWidth: '100%',\n position: 'relative',\n display: 'block',\n overflow: 'hidden',\n },\n },\n });\n\n return {\n ...elementModel,\n destroy: () => {\n resizeObserver.disconnect();\n image.removeEventListener('load', calculateHeight);\n },\n };\n};\n"],"names":["containerWidth","ElementModel.create","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAA,MAAe,CAAC,EAAE,MAAA,MAAyC;AACzD,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAe;AAEjD,UAAM,cAAc,MAAM,gBAAgB,MAAM;AAChD,UAAM,iBAAiB,UAAU;AAEjC,QAAI,iBAAiB,GAAG;AACtB,YAAM,mBAAmB,KAAK,MAAM,iBAAiB,WAAW;AAChE,gBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,IAC9C,OAAO;AACL,gBAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAE7C,iBAAW,MAAM;AACf,cAAMA,kBAAiB,UAAU;AACjC,cAAM,mBAAmB,KAAK,MAAMA,kBAAiB,WAAW;AAChE,kBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,MAC9C,GAAG,GAAG;AAAA,IACR;AAAA,EACF;AAEA,QAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,CAAC;AAED,MAAI,MAAM,YAAY,MAAM,cAAc;AACxC,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,OAAO;AACL,UAAM,iBAAiB,QAAQ,eAAe;AAAA,EAChD;AAEA,aAAW,MAAM;AACf,mBAAe,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC;AAEJ,QAAM,eAAeC,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,MACRC,eAAwB;AAAA,QACtB,SAAS;AAAA,QACT,eAAe;AAAA,QACf,UAAU;AAAA,QACV,cAAc;AAAA,QACd,cAAc;AAAA,UACZ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,QAAA;AAAA,MACX,CACD;AAAA,IAAA;AAAA,IAEH,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS,MAAM;AACb,qBAAe,WAAA;AACf,YAAM,oBAAoB,QAAQ,eAAe;AAAA,IACnD;AAAA,EAAA;AAEJ;"}

package/dist/composite/media/inline/caption.js CHANGED Viewed

@@ -1,19 +1,32 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-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 token = require("@universityofmaryland/web-styles-library/token");
+const performance = require("@universityofmaryland/web-utilities-library/performance");
 const image = require("../../../layout/image.js");
 const caption = require("../elements/caption.js");
-const { spacing } = Styles.token;
+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 ELEMENT_MEDIA_INLINE_CONTAINER = "element-media-with-caption-container";
 const ELEMENT_OBJECT_CAPTION_CONTAINER = "element-media-caption-container";
 const ObjectContainer = `
   .${ELEMENT_OBJECT_CAPTION_CONTAINER} {
     display: flex;
     flex-direction: column;
-    padding-bottom: ${Styles.token.spacing.sm};
+    padding-bottom: ${token__namespace.spacing.sm};
     max-width: 100%;
   }
 `;
@@ -86,7 +99,7 @@ const CreateMediaWithCaption = (props) => (() => {
   elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);
   window.addEventListener(
     "resize",
-    index.debounce(() => {
+    performance.debounce(() => {
       eventResize();
     }, 20)
   );

package/dist/composite/media/inline/caption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"caption.js","sources":["../../../../source/composite/media/inline/caption.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as ~~Utility~~ from 'utilities';\nimport { Image as LayoutImage } from 'layout';\nimport CaptionContainer from '../elements/caption';\n\nexport type TypeMediaInlineRequirements = {\n image?: HTMLImageElement \| null;\n caption?: HTMLElement \| null;\n isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-with-caption-container';\nconst ELEMENT_OBJECT_CAPTION_CONTAINER = 'element-media-caption-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n .${ELEMENT_OBJECT_CAPTION_CONTAINER} {\n display: flex;\n flex-direction: column;\n padding-bottom: ${token.spacing.sm};\n max-width: 100%;\n }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n display: inline-block;\n max-width: 100%;\n }\n\n ${LayoutImage.Styles}\n ${CaptionContainer.Styles}\n ${ObjectContainer}\n`;\n\nconst CreateMediaWithCaption = (props: TypeMediaInlineRequirements) =>\n (() => {\n const { caption, image, isThemeDark } = props;\n const hasCaption = caption && caption !== null;\n const elementContainer = document.createElement('div');\n const objectContainer = document.createElement('div');\n const sizeCaption = () => {\n const imageContainer = elementContainer.querySelector(\n `.${LayoutImage.Elements.container}`,\n ) as HTMLElement;\n const caption = elementContainer.querySelector(\n `.${CaptionContainer.Elements.container}`,\n ) as HTMLElement;\n\n if (caption) {\n caption.style.width = `${imageContainer.offsetWidth}px`;\n caption.style.display = `block`;\n }\n };\n const eventResize = () => {\n sizeCaption();\n };\n\n if (image) {\n objectContainer.appendChild(\n LayoutImage.CreateElement({\n image,\n showCaption: true,\n }),\n );\n }\n\n const load = () => {\n const checkSizing = () => {\n const caption = objectContainer.querySelector(\n `.${CaptionContainer.Elements.container}`,\n ) as HTMLElement;\n\n if (caption) {\n caption.style.opacity = `1`;\n }\n };\n\n image?.addEventListener('load', () => {\n checkSizing();\n\n setTimeout(() => {\n checkSizing();\n }, 500);\n });\n };\n\n if (hasCaption) {\n const captionElement = CaptionContainer.CreateElement({\n caption,\n isThemeDark,\n });\n captionElement.style.display = `none`;\n objectContainer.appendChild(captionElement);\n }\n\n if (objectContainer.children.length > 0) {\n elementContainer.appendChild(objectContainer);\n }\n\n objectContainer.classList.add(ELEMENT_OBJECT_CAPTION_CONTAINER);\n elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n window.addEventListener(\n 'resize',\n ~~Utility.performance.~~debounce(() => {\n eventResize();\n }, 20),\n );\n\n setTimeout(() => {\n eventResize();\n }, 100);\n\n return {\n element: elementContainer,\n events: {\n load,\n },\n styles: STYLES_MEDIA_INLINE_ELEMENT,\n };\n })();\n\nexport default CreateMediaWithCaption;\n"],"names":["token","LayoutImage","CaptionContainer","caption","image","~~Utility.performance.~~debounce"],"mappings":"~~;;;;;;;;AAWA~~,MAAM,~~EAAE,YAAYA,OAAAA;AAEpB,MAAM,~~iCAAiC;AACvC,MAAM,mCAAmC;AAGzC,MAAM,kBAAkB;AAAA,KACnB,gCAAgC;AAAA;AAAA;AAAA,sBAGfA,~~OAAAA~~,~~MAAM,~~QAAQ,EAAE;AAAA;AAAA;AAAA;AAMtC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/BC,MAAY,MAAM;AAAA,IAClBC,QAAiB,MAAM;AAAA,IACvB,eAAe;AAAA;AAGnB,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,WAAEC,WAAA,OAASC,SAAO,YAAA,IAAgB;AACxC,QAAM,aAAaD,aAAWA,cAAY;AAC1C,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,cAAc,MAAM;AACxB,UAAM,iBAAiB,iBAAiB;AAAA,MACtC,IAAIF,MAAY,SAAS,SAAS;AAAA,IAAA;AAEpC,UAAME,WAAU,iBAAiB;AAAA,MAC/B,IAAID,QAAiB,SAAS,SAAS;AAAA,IAAA;AAGzC,QAAIC,UAAS;AACXA,eAAQ,MAAM,QAAQ,GAAG,eAAe,WAAW;AACnDA,eAAQ,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF;AACA,QAAM,cAAc,MAAM;AACxB,gBAAA;AAAA,EACF;AAEA,MAAIC,SAAO;AACT,oBAAgB;AAAA,MACdH,MAAY,cAAc;AAAA,QAAA,OACxBG;AAAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,cAAc,MAAM;AACxB,YAAMD,WAAU,gBAAgB;AAAA,QAC9B,IAAID,QAAiB,SAAS,SAAS;AAAA,MAAA;AAGzC,UAAIC,UAAS;AACXA,iBAAQ,MAAM,UAAU;AAAA,MAC1B;AAAA,IACF;AAEAC,aAAO,iBAAiB,QAAQ,MAAM;AACpC,kBAAA;AAEA,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR,CAAC;AAAA,EACH;AAEA,MAAI,YAAY;AACd,UAAM,iBAAiBF,QAAiB,cAAc;AAAA,MAAA,SACpDC;AAAAA,MACA;AAAA,IAAA,CACD;AACD,mBAAe,MAAM,UAAU;AAC/B,oBAAgB,YAAY,cAAc;AAAA,EAC5C;AAEA,MAAI,gBAAgB,SAAS,SAAS,GAAG;AACvC,qBAAiB,YAAY,eAAe;AAAA,EAC9C;AAEA,kBAAgB,UAAU,IAAI,gCAAgC;AAC9D,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL;AAAA,IACAE,~~MAAAA~~,~~SAA6B~~,MAAM;~~AACjC~~,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,aAAW,MAAM;AACf,gBAAA;AAAA,EACF,GAAG,GAAG;AAEN,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,IAEF,QAAQ;AAAA,EAAA;AAEZ,GAAA;;"}
1	+ {"version":3,"file":"caption.js","sources":["../../../../source/composite/media/inline/caption.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { Image as LayoutImage } from 'layout';\nimport CaptionContainer from '../elements/caption';\n\nexport type TypeMediaInlineRequirements = {\n image?: HTMLImageElement \| null;\n caption?: HTMLElement \| null;\n isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-with-caption-container';\nconst ELEMENT_OBJECT_CAPTION_CONTAINER = 'element-media-caption-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n .${ELEMENT_OBJECT_CAPTION_CONTAINER} {\n display: flex;\n flex-direction: column;\n padding-bottom: ${token.spacing.sm};\n max-width: 100%;\n }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n display: inline-block;\n max-width: 100%;\n }\n\n ${LayoutImage.Styles}\n ${CaptionContainer.Styles}\n ${ObjectContainer}\n`;\n\nconst CreateMediaWithCaption = (props: TypeMediaInlineRequirements) =>\n (() => {\n const { caption, image, isThemeDark } = props;\n const hasCaption = caption && caption !== null;\n const elementContainer = document.createElement('div');\n const objectContainer = document.createElement('div');\n const sizeCaption = () => {\n const imageContainer = elementContainer.querySelector(\n `.${LayoutImage.Elements.container}`,\n ) as HTMLElement;\n const caption = elementContainer.querySelector(\n `.${CaptionContainer.Elements.container}`,\n ) as HTMLElement;\n\n if (caption) {\n caption.style.width = `${imageContainer.offsetWidth}px`;\n caption.style.display = `block`;\n }\n };\n const eventResize = () => {\n sizeCaption();\n };\n\n if (image) {\n objectContainer.appendChild(\n LayoutImage.CreateElement({\n image,\n showCaption: true,\n }),\n );\n }\n\n const load = () => {\n const checkSizing = () => {\n const caption = objectContainer.querySelector(\n `.${CaptionContainer.Elements.container}`,\n ) as HTMLElement;\n\n if (caption) {\n caption.style.opacity = `1`;\n }\n };\n\n image?.addEventListener('load', () => {\n checkSizing();\n\n setTimeout(() => {\n checkSizing();\n }, 500);\n });\n };\n\n if (hasCaption) {\n const captionElement = CaptionContainer.CreateElement({\n caption,\n isThemeDark,\n });\n captionElement.style.display = `none`;\n objectContainer.appendChild(captionElement);\n }\n\n if (objectContainer.children.length > 0) {\n elementContainer.appendChild(objectContainer);\n }\n\n objectContainer.classList.add(ELEMENT_OBJECT_CAPTION_CONTAINER);\n elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n window.addEventListener(\n 'resize',\n debounce(() => {\n eventResize();\n }, 20),\n );\n\n setTimeout(() => {\n eventResize();\n }, 100);\n\n return {\n element: elementContainer,\n events: {\n load,\n },\n styles: STYLES_MEDIA_INLINE_ELEMENT,\n };\n })();\n\nexport default CreateMediaWithCaption;\n"],"names":["token","LayoutImage","CaptionContainer","caption","image","debounce"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,iCAAiC;AACvC,MAAM,mCAAmC;AAGzC,MAAM,kBAAkB;AAAA,KACnB,gCAAgC;AAAA;AAAA;AAAA,sBAGfA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMtC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/BC,MAAY,MAAM;AAAA,IAClBC,QAAiB,MAAM;AAAA,IACvB,eAAe;AAAA;AAGnB,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,WAAEC,WAAA,OAASC,SAAO,YAAA,IAAgB;AACxC,QAAM,aAAaD,aAAWA,cAAY;AAC1C,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,cAAc,MAAM;AACxB,UAAM,iBAAiB,iBAAiB;AAAA,MACtC,IAAIF,MAAY,SAAS,SAAS;AAAA,IAAA;AAEpC,UAAME,WAAU,iBAAiB;AAAA,MAC/B,IAAID,QAAiB,SAAS,SAAS;AAAA,IAAA;AAGzC,QAAIC,UAAS;AACXA,eAAQ,MAAM,QAAQ,GAAG,eAAe,WAAW;AACnDA,eAAQ,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF;AACA,QAAM,cAAc,MAAM;AACxB,gBAAA;AAAA,EACF;AAEA,MAAIC,SAAO;AACT,oBAAgB;AAAA,MACdH,MAAY,cAAc;AAAA,QAAA,OACxBG;AAAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,cAAc,MAAM;AACxB,YAAMD,WAAU,gBAAgB;AAAA,QAC9B,IAAID,QAAiB,SAAS,SAAS;AAAA,MAAA;AAGzC,UAAIC,UAAS;AACXA,iBAAQ,MAAM,UAAU;AAAA,MAC1B;AAAA,IACF;AAEAC,aAAO,iBAAiB,QAAQ,MAAM;AACpC,kBAAA;AAEA,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR,CAAC;AAAA,EACH;AAEA,MAAI,YAAY;AACd,UAAM,iBAAiBF,QAAiB,cAAc;AAAA,MAAA,SACpDC;AAAAA,MACA;AAAA,IAAA,CACD;AACD,mBAAe,MAAM,UAAU;AAC/B,oBAAgB,YAAY,cAAc;AAAA,EAC5C;AAEA,MAAI,gBAAgB,SAAS,SAAS,GAAG;AACvC,qBAAiB,YAAY,eAAe;AAAA,EAC9C;AAEA,kBAAgB,UAAU,IAAI,gCAAgC;AAC9D,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL;AAAA,IACAE,YAAAA,SAAS,MAAM;AACb,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,aAAW,MAAM;AACf,gBAAA;AAAA,EACF,GAAG,GAAG;AAEN,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,IAEF,QAAQ;AAAA,EAAA;AAEZ,GAAA;;"}

package/dist/composite/media/inline/caption.mjs CHANGED Viewed

@@ -1,11 +1,7 @@
-import { token } from "@universityofmaryland/web-styles-library";
-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 * as token from "@universityofmaryland/web-styles-library/token";
+import { debounce } from "@universityofmaryland/web-utilities-library/performance";
 import LayoutImage from "../../../layout/image.mjs";
 import CaptionContainer from "../elements/caption.mjs";
-const { spacing } = token;
 const ELEMENT_MEDIA_INLINE_CONTAINER = "element-media-with-caption-container";
 const ELEMENT_OBJECT_CAPTION_CONTAINER = "element-media-caption-container";
 const ObjectContainer = `

package/dist/composite/media/inline/caption.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"caption.mjs","sources":["../../../../source/composite/media/inline/caption.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as ~~Utility~~ from 'utilities';\nimport { Image as LayoutImage } from 'layout';\nimport CaptionContainer from '../elements/caption';\n\nexport type TypeMediaInlineRequirements = {\n image?: HTMLImageElement \| null;\n caption?: HTMLElement \| null;\n isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-with-caption-container';\nconst ELEMENT_OBJECT_CAPTION_CONTAINER = 'element-media-caption-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n .${ELEMENT_OBJECT_CAPTION_CONTAINER} {\n display: flex;\n flex-direction: column;\n padding-bottom: ${token.spacing.sm};\n max-width: 100%;\n }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n display: inline-block;\n max-width: 100%;\n }\n\n ${LayoutImage.Styles}\n ${CaptionContainer.Styles}\n ${ObjectContainer}\n`;\n\nconst CreateMediaWithCaption = (props: TypeMediaInlineRequirements) =>\n (() => {\n const { caption, image, isThemeDark } = props;\n const hasCaption = caption && caption !== null;\n const elementContainer = document.createElement('div');\n const objectContainer = document.createElement('div');\n const sizeCaption = () => {\n const imageContainer = elementContainer.querySelector(\n `.${LayoutImage.Elements.container}`,\n ) as HTMLElement;\n const caption = elementContainer.querySelector(\n `.${CaptionContainer.Elements.container}`,\n ) as HTMLElement;\n\n if (caption) {\n caption.style.width = `${imageContainer.offsetWidth}px`;\n caption.style.display = `block`;\n }\n };\n const eventResize = () => {\n sizeCaption();\n };\n\n if (image) {\n objectContainer.appendChild(\n LayoutImage.CreateElement({\n image,\n showCaption: true,\n }),\n );\n }\n\n const load = () => {\n const checkSizing = () => {\n const caption = objectContainer.querySelector(\n `.${CaptionContainer.Elements.container}`,\n ) as HTMLElement;\n\n if (caption) {\n caption.style.opacity = `1`;\n }\n };\n\n image?.addEventListener('load', () => {\n checkSizing();\n\n setTimeout(() => {\n checkSizing();\n }, 500);\n });\n };\n\n if (hasCaption) {\n const captionElement = CaptionContainer.CreateElement({\n caption,\n isThemeDark,\n });\n captionElement.style.display = `none`;\n objectContainer.appendChild(captionElement);\n }\n\n if (objectContainer.children.length > 0) {\n elementContainer.appendChild(objectContainer);\n }\n\n objectContainer.classList.add(ELEMENT_OBJECT_CAPTION_CONTAINER);\n elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n window.addEventListener(\n 'resize',\n ~~Utility.performance.~~debounce(() => {\n eventResize();\n }, 20),\n );\n\n setTimeout(() => {\n eventResize();\n }, 100);\n\n return {\n element: elementContainer,\n events: {\n load,\n },\n styles: STYLES_MEDIA_INLINE_ELEMENT,\n };\n })();\n\nexport default CreateMediaWithCaption;\n"],"names":["caption"~~,"Utility.performance.debounce"~~],"mappings":"~~;;;;;;;AAWA~~,MAAM,~~EAAE,YAAY;AAEpB,MAAM,~~iCAAiC;AACvC,MAAM,mCAAmC;AAGzC,MAAM,kBAAkB;AAAA,KACnB,gCAAgC;AAAA;AAAA;AAAA,sBAGf,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMtC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/B,YAAY,MAAM;AAAA,IAClB,iBAAiB,MAAM;AAAA,IACvB,eAAe;AAAA;AAGnB,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,EAAE,SAAS,OAAO,YAAA,IAAgB;AACxC,QAAM,aAAa,WAAW,YAAY;AAC1C,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,cAAc,MAAM;AACxB,UAAM,iBAAiB,iBAAiB;AAAA,MACtC,IAAI,YAAY,SAAS,SAAS;AAAA,IAAA;AAEpC,UAAMA,WAAU,iBAAiB;AAAA,MAC/B,IAAI,iBAAiB,SAAS,SAAS;AAAA,IAAA;AAGzC,QAAIA,UAAS;AACXA,eAAQ,MAAM,QAAQ,GAAG,eAAe,WAAW;AACnDA,eAAQ,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF;AACA,QAAM,cAAc,MAAM;AACxB,gBAAA;AAAA,EACF;AAEA,MAAI,OAAO;AACT,oBAAgB;AAAA,MACd,YAAY,cAAc;AAAA,QACxB;AAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,cAAc,MAAM;AACxB,YAAMA,WAAU,gBAAgB;AAAA,QAC9B,IAAI,iBAAiB,SAAS,SAAS;AAAA,MAAA;AAGzC,UAAIA,UAAS;AACXA,iBAAQ,MAAM,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,WAAO,iBAAiB,QAAQ,MAAM;AACpC,kBAAA;AAEA,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR,CAAC;AAAA,EACH;AAEA,MAAI,YAAY;AACd,UAAM,iBAAiB,iBAAiB,cAAc;AAAA,MACpD;AAAA,MACA;AAAA,IAAA,CACD;AACD,mBAAe,MAAM,UAAU;AAC/B,oBAAgB,YAAY,cAAc;AAAA,EAC5C;AAEA,MAAI,gBAAgB,SAAS,SAAS,GAAG;AACvC,qBAAiB,YAAY,eAAe;AAAA,EAC9C;AAEA,kBAAgB,UAAU,IAAI,gCAAgC;AAC9D,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL;AAAA,~~IACAC~~,~~SAA6B~~,MAAM;~~AACjC~~,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,aAAW,MAAM;AACf,gBAAA;AAAA,EACF,GAAG,GAAG;AAEN,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,IAEF,QAAQ;AAAA,EAAA;AAEZ,GAAA;"}
1	+ {"version":3,"file":"caption.mjs","sources":["../../../../source/composite/media/inline/caption.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { Image as LayoutImage } from 'layout';\nimport CaptionContainer from '../elements/caption';\n\nexport type TypeMediaInlineRequirements = {\n image?: HTMLImageElement \| null;\n caption?: HTMLElement \| null;\n isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-with-caption-container';\nconst ELEMENT_OBJECT_CAPTION_CONTAINER = 'element-media-caption-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n .${ELEMENT_OBJECT_CAPTION_CONTAINER} {\n display: flex;\n flex-direction: column;\n padding-bottom: ${token.spacing.sm};\n max-width: 100%;\n }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n display: inline-block;\n max-width: 100%;\n }\n\n ${LayoutImage.Styles}\n ${CaptionContainer.Styles}\n ${ObjectContainer}\n`;\n\nconst CreateMediaWithCaption = (props: TypeMediaInlineRequirements) =>\n (() => {\n const { caption, image, isThemeDark } = props;\n const hasCaption = caption && caption !== null;\n const elementContainer = document.createElement('div');\n const objectContainer = document.createElement('div');\n const sizeCaption = () => {\n const imageContainer = elementContainer.querySelector(\n `.${LayoutImage.Elements.container}`,\n ) as HTMLElement;\n const caption = elementContainer.querySelector(\n `.${CaptionContainer.Elements.container}`,\n ) as HTMLElement;\n\n if (caption) {\n caption.style.width = `${imageContainer.offsetWidth}px`;\n caption.style.display = `block`;\n }\n };\n const eventResize = () => {\n sizeCaption();\n };\n\n if (image) {\n objectContainer.appendChild(\n LayoutImage.CreateElement({\n image,\n showCaption: true,\n }),\n );\n }\n\n const load = () => {\n const checkSizing = () => {\n const caption = objectContainer.querySelector(\n `.${CaptionContainer.Elements.container}`,\n ) as HTMLElement;\n\n if (caption) {\n caption.style.opacity = `1`;\n }\n };\n\n image?.addEventListener('load', () => {\n checkSizing();\n\n setTimeout(() => {\n checkSizing();\n }, 500);\n });\n };\n\n if (hasCaption) {\n const captionElement = CaptionContainer.CreateElement({\n caption,\n isThemeDark,\n });\n captionElement.style.display = `none`;\n objectContainer.appendChild(captionElement);\n }\n\n if (objectContainer.children.length > 0) {\n elementContainer.appendChild(objectContainer);\n }\n\n objectContainer.classList.add(ELEMENT_OBJECT_CAPTION_CONTAINER);\n elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n window.addEventListener(\n 'resize',\n debounce(() => {\n eventResize();\n }, 20),\n );\n\n setTimeout(() => {\n eventResize();\n }, 100);\n\n return {\n element: elementContainer,\n events: {\n load,\n },\n styles: STYLES_MEDIA_INLINE_ELEMENT,\n };\n })();\n\nexport default CreateMediaWithCaption;\n"],"names":["caption"],"mappings":";;;;AAaA,MAAM,iCAAiC;AACvC,MAAM,mCAAmC;AAGzC,MAAM,kBAAkB;AAAA,KACnB,gCAAgC;AAAA;AAAA;AAAA,sBAGf,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMtC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/B,YAAY,MAAM;AAAA,IAClB,iBAAiB,MAAM;AAAA,IACvB,eAAe;AAAA;AAGnB,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,EAAE,SAAS,OAAO,YAAA,IAAgB;AACxC,QAAM,aAAa,WAAW,YAAY;AAC1C,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,cAAc,MAAM;AACxB,UAAM,iBAAiB,iBAAiB;AAAA,MACtC,IAAI,YAAY,SAAS,SAAS;AAAA,IAAA;AAEpC,UAAMA,WAAU,iBAAiB;AAAA,MAC/B,IAAI,iBAAiB,SAAS,SAAS;AAAA,IAAA;AAGzC,QAAIA,UAAS;AACXA,eAAQ,MAAM,QAAQ,GAAG,eAAe,WAAW;AACnDA,eAAQ,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF;AACA,QAAM,cAAc,MAAM;AACxB,gBAAA;AAAA,EACF;AAEA,MAAI,OAAO;AACT,oBAAgB;AAAA,MACd,YAAY,cAAc;AAAA,QACxB;AAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,cAAc,MAAM;AACxB,YAAMA,WAAU,gBAAgB;AAAA,QAC9B,IAAI,iBAAiB,SAAS,SAAS;AAAA,MAAA;AAGzC,UAAIA,UAAS;AACXA,iBAAQ,MAAM,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,WAAO,iBAAiB,QAAQ,MAAM;AACpC,kBAAA;AAEA,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR,CAAC;AAAA,EACH;AAEA,MAAI,YAAY;AACd,UAAM,iBAAiB,iBAAiB,cAAc;AAAA,MACpD;AAAA,MACA;AAAA,IAAA,CACD;AACD,mBAAe,MAAM,UAAU;AAC/B,oBAAgB,YAAY,cAAc;AAAA,EAC5C;AAEA,MAAI,gBAAgB,SAAS,SAAS,GAAG;AACvC,qBAAiB,YAAY,eAAe;AAAA,EAC9C;AAEA,kBAAgB,UAAU,IAAI,gCAAgC;AAC9D,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL;AAAA,IACA,SAAS,MAAM;AACb,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,aAAW,MAAM;AACf,gBAAA;AAAA,EACF,GAAG,GAAG;AAEN,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,IAEF,QAAQ;AAAA,EAAA;AAEZ,GAAA;"}

package/dist/composite/media/inline/wrapped.js CHANGED Viewed

@@ -1,12 +1,25 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-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 token = require("@universityofmaryland/web-styles-library/token");
+const performance = require("@universityofmaryland/web-utilities-library/performance");
 const image = require("../../../layout/image.js");
 const caption = require("../elements/caption.js");
-const { spacing } = Styles.token;
+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 BREAKPOINT = 400;
 const ATTRIBUTE_IS_WRAPPING_TEXT = "is-wrapping-text";
 const ELEMENT_MEDIA_INLINE_CONTAINER = "element-media-inline-wrapped-container";
@@ -14,7 +27,7 @@ const ELEMENT_OBJECT_WRAPPED_CONTAINER = "element-object-wrapped-container";
 const ObjectContainer = `
   .${ELEMENT_OBJECT_WRAPPED_CONTAINER} {
     display: inline-block;
-    padding-bottom: ${Styles.token.spacing.sm};
+    padding-bottom: ${token__namespace.spacing.sm};
     max-width: 100%;
   }
 `;
@@ -72,10 +85,10 @@ const CreateMediaInlineWrapped = (props) => (() => {
       objectContainer2.style.textAlign = "left";
       if (isAlignmentRight) {
         objectContainer2.style.float = `right`;
-        objectContainer2.style.paddingLeft = `${Styles.token.spacing.md}`;
+        objectContainer2.style.paddingLeft = `${token__namespace.spacing.md}`;
       } else {
         objectContainer2.style.float = "left";
-        objectContainer2.style.paddingRight = `${Styles.token.spacing.md}`;
+        objectContainer2.style.paddingRight = `${token__namespace.spacing.md}`;
       }
     } else {
       objectContainer2.style.width = "100%";
@@ -145,7 +158,7 @@ const CreateMediaInlineWrapped = (props) => (() => {
   elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);
   window.addEventListener(
     "resize",
-    index.debounce(() => {
+    performance.debounce(() => {
       eventResize();
     }, 20)
   );