@universityofmaryland/web-elements-library 1.5.3 → 1.5.6

package/dist/composite/layout/section-intro/wide.js

@@ -1,7 +1,8 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
-const index = require("../../../model/elements/index.js");
-const headline = require("../../../model/elements/headline.js");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
+const Styles = require("@universityofmaryland/web-styles-library");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -19,72 +20,58 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
 const TABLET = 500;
 const createHeadline = (props) => {
-  const { headline: headline$1 } = props;
-  if (!headline$1) return;
-  return headline.sansLargest({
-    element: headline$1,
-    elementStyles: {
-      element: {
-        fontWeight: 800,
-        textTransform: "uppercase"
-      }
+  const { headline, isThemeDark } = props;
+  if (!headline) return null;
+  return new webBuilderLibrary.ElementBuilder(headline).styled(
+    Styles__namespace.typography.sans.compose("largest", {
+      theme: theme.theme.fontColor(isThemeDark)
+    })
+  ).withStyles({
+    element: {
+      fontWeight: 800,
+      textTransform: "uppercase"
     }
-  });
+  }).build();
 };
 const createActions = (props) => {
   const { actions } = props;
-  if (!actions) return;
-  return index.create({
-    element: actions,
-    className: "intro-wide-actions",
-    elementStyles: {
-      element: {
-        display: "block",
-        [`@container (max-width: ${TABLET - 1}px)`]: {
-          [`* + &`]: { marginTop: token__namespace.spacing.md }
-        }
+  if (!actions) return null;
+  return new webBuilderLibrary.ElementBuilder(actions).withClassName("intro-wide-actions").withStyles({
+    element: {
+      display: "block",
+      [`@container (max-width: ${TABLET - 1}px)`]: {
+        [`* + &`]: { marginTop: token__namespace.spacing.md }
       }
     }
-  });
+  }).build();
 };
 const createWrapper = (props) => {
-  const headlineElement = createHeadline(props);
-  const actionsElement = createActions(props);
-  const children = [headlineElement, actionsElement].filter(
-    Boolean
-  );
-  return index.createDiv({
-    className: "intro-wide-container-wrapper",
-    children,
-    elementStyles: {
-      element: {
-        [`@container (min-width: ${TABLET}px)`]: {
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center"
-        }
+  const { headline, actions, isThemeDark } = props;
+  const headlineElement = createHeadline({ headline, isThemeDark });
+  const actionsElement = createActions({ actions });
+  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("intro-wide-container-wrapper").withStyles({
+    element: {
+      [`@container (min-width: ${TABLET}px)`]: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
       }
     }
   });
+  if (headlineElement) {
+    wrapper.withChild(headlineElement);
+  }
+  if (actionsElement) {
+    wrapper.withChild(actionsElement);
+  }
+  return wrapper.build();
 };
 const createContainer = (props) => {
-  const { isThemeDark } = props;
   const wrapperElement = createWrapper(props);
-  return index.createDiv({
-    className: "intro-wide-container",
-    children: [wrapperElement],
-    elementStyles: {
-      element: {
-        [`& *`]: {
-          ...isThemeDark && {
-            color: token__namespace.color.white
-          }
-        }
-      }
-    }
-  });
+  return new webBuilderLibrary.ElementBuilder().withClassName("intro-wide-container").withChild(wrapperElement).build();
 };
 const wide = (props) => createContainer(props);
 module.exports = wide;

package/dist/composite/layout/section-intro/wide.js.map

@@ -1 +1 @@
-{"version":3,"file":"wide.js","sources":["../../../../source/composite/layout/section-intro/wide.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../../_types';\n\nexport interface SectionIntroWideProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n}\n\nconst TABLET = 500;\n\nconst createHeadline = (\n  props: Pick<SectionIntroWideProps, 'headline'>,\n): ElementVisual | undefined => {\n  const { headline } = props;\n  if (!headline) return;\n\n  return ElementModel.headline.sansLargest({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    },\n  });\n};\n\nconst createActions = (\n  props: Pick<SectionIntroWideProps, 'actions'>,\n): ElementVisual | undefined => {\n  const { actions } = props;\n  if (!actions) return;\n\n  return ElementModel.create({\n    element: actions,\n    className: 'intro-wide-actions',\n    elementStyles: {\n      element: {\n        display: 'block',\n\n        [`@container (max-width: ${TABLET - 1}px)`]: {\n          [`* + &`]: { marginTop: token.spacing.md },\n        },\n      },\n    },\n  });\n};\n\nconst createWrapper = (\n  props: Pick<SectionIntroWideProps, 'headline' | 'actions' | 'isThemeDark'>,\n): ElementVisual => {\n  const headlineElement = createHeadline(props);\n  const actionsElement = createActions(props);\n\n  const children = [headlineElement, actionsElement].filter(\n    Boolean,\n  ) as ElementVisual[];\n\n  return ElementModel.createDiv({\n    className: 'intro-wide-container-wrapper',\n    children,\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${TABLET}px)`]: {\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n        },\n      },\n    },\n  });\n};\n\nconst createContainer = (\n  props: Pick<SectionIntroWideProps, 'isThemeDark' | 'headline' | 'actions'>,\n): ElementVisual => {\n  const { isThemeDark } = props;\n  const wrapperElement = createWrapper(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-wide-container',\n    children: [wrapperElement],\n    elementStyles: {\n      element: {\n        [`& *`]: {\n          ...(isThemeDark && {\n            color: token.color.white,\n          }),\n        },\n      },\n    },\n  });\n};\n\nexport default (props: SectionIntroWideProps) => createContainer(props);\n"],"names":["headline","ElementModel.headline.sansLargest","ElementModel.create","token","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,SAAS;AAEf,MAAM,iBAAiB,CACrB,UAC8B;AAC9B,QAAM,EAAA,UAAEA,eAAa;AACrB,MAAI,CAACA,WAAU;AAEf,SAAOC,qBAAkC;AAAA,IACvC,SAASD;AAAAA,IACT,eAAe;AAAA,MACb,SAAS;AAAA,QACP,YAAY;AAAA,QACZ,eAAe;AAAA,MAAA;AAAA,IACjB;AAAA,EACF,CACD;AACH;AAEA,MAAM,gBAAgB,CACpB,UAC8B;AAC9B,QAAM,EAAE,YAAY;AACpB,MAAI,CAAC,QAAS;AAEd,SAAOE,aAAoB;AAAA,IACzB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QAET,CAAC,0BAA0B,SAAS,CAAC,KAAK,GAAG;AAAA,UAC3C,CAAC,OAAO,GAAG,EAAE,WAAWC,iBAAM,QAAQ,GAAA;AAAA,QAAG;AAAA,MAC3C;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,gBAAgB,CACpB,UACkB;AAClB,QAAM,kBAAkB,eAAe,KAAK;AAC5C,QAAM,iBAAiB,cAAc,KAAK;AAE1C,QAAM,WAAW,CAAC,iBAAiB,cAAc,EAAE;AAAA,IACjD;AAAA,EAAA;AAGF,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,UACvC,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,QAAA;AAAA,MACd;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,kBAAkB,CACtB,UACkB;AAClB,QAAM,EAAE,gBAAgB;AACxB,QAAM,iBAAiB,cAAc,KAAK;AAE1C,SAAOA,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,cAAc;AAAA,IACzB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,KAAK,GAAG;AAAA,UACP,GAAI,eAAe;AAAA,YACjB,OAAOD,iBAAM,MAAM;AAAA,UAAA;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAA,OAAe,CAAC,UAAiC,gBAAgB,KAAK;;"}
+{"version":3,"file":"wide.js","sources":["../../../../source/composite/layout/section-intro/wide.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type ElementModel } from '../../../_types';\n\nexport interface SectionIntroWideProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n}\n\nconst TABLET = 500;\n\nconst createHeadline = (\n  props: Pick<SectionIntroWideProps, 'headline' | 'isThemeDark'>,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark } = props;\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.sans.compose('largest', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    })\n    .build();\n};\n\nconst createActions = (\n  props: Pick<SectionIntroWideProps, 'actions'>,\n): ElementModel<HTMLElement> | null => {\n  const { actions } = props;\n  if (!actions) return null;\n\n  return new ElementBuilder(actions)\n    .withClassName('intro-wide-actions')\n    .withStyles({\n      element: {\n        display: 'block',\n\n        [`@container (max-width: ${TABLET - 1}px)`]: {\n          [`* + &`]: { marginTop: token.spacing.md },\n        },\n      },\n    })\n    .build();\n};\n\nconst createWrapper = (\n  props: Pick<SectionIntroWideProps, 'headline' | 'actions' | 'isThemeDark'>,\n): ElementModel<HTMLElement> => {\n  const { headline, actions, isThemeDark } = props;\n  const headlineElement = createHeadline({ headline, isThemeDark });\n  const actionsElement = createActions({ actions });\n\n  const wrapper = new ElementBuilder()\n    .withClassName('intro-wide-container-wrapper')\n    .withStyles({\n      element: {\n        [`@container (min-width: ${TABLET}px)`]: {\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n        },\n      },\n    });\n\n  if (headlineElement) {\n    wrapper.withChild(headlineElement);\n  }\n\n  if (actionsElement) {\n    wrapper.withChild(actionsElement);\n  }\n\n  return wrapper.build();\n};\n\nconst createContainer = (\n  props: Pick<SectionIntroWideProps, 'isThemeDark' | 'headline' | 'actions'>,\n): ElementModel<HTMLElement> => {\n  const wrapperElement = createWrapper(props);\n\n  return new ElementBuilder()\n    .withClassName('intro-wide-container')\n    .withChild(wrapperElement)\n    .build();\n};\n\nexport default (props: SectionIntroWideProps) => createContainer(props);\n"],"names":["ElementBuilder","Styles","theme","token"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,SAAS;AAEf,MAAM,iBAAiB,CACrB,UACqC;AACrC,QAAM,EAAE,UAAU,YAAA,IAAgB;AAClC,MAAI,CAAC,SAAU,QAAO;AAEtB,SAAO,IAAIA,kBAAAA,eAAe,QAAQ,EAC/B;AAAA,IACCC,kBAAO,WAAW,KAAK,QAAQ,WAAW;AAAA,MACxC,OAAOC,MAAAA,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,eAAe;AAAA,IAAA;AAAA,EACjB,CACD,EACA,MAAA;AACL;AAEA,MAAM,gBAAgB,CACpB,UACqC;AACrC,QAAM,EAAE,YAAY;AACpB,MAAI,CAAC,QAAS,QAAO;AAErB,SAAO,IAAIF,kBAAAA,eAAe,OAAO,EAC9B,cAAc,oBAAoB,EAClC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MAET,CAAC,0BAA0B,SAAS,CAAC,KAAK,GAAG;AAAA,QAC3C,CAAC,OAAO,GAAG,EAAE,WAAWG,iBAAM,QAAQ,GAAA;AAAA,MAAG;AAAA,IAC3C;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,gBAAgB,CACpB,UAC8B;AAC9B,QAAM,EAAE,UAAU,SAAS,YAAA,IAAgB;AAC3C,QAAM,kBAAkB,eAAe,EAAE,UAAU,aAAa;AAChE,QAAM,iBAAiB,cAAc,EAAE,SAAS;AAEhD,QAAM,UAAU,IAAIH,kBAAAA,eAAA,EACjB,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,QACvC,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,CACD;AAEH,MAAI,iBAAiB;AACnB,YAAQ,UAAU,eAAe;AAAA,EACnC;AAEA,MAAI,gBAAgB;AAClB,YAAQ,UAAU,cAAc;AAAA,EAClC;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEA,MAAM,kBAAkB,CACtB,UAC8B;AAC9B,QAAM,iBAAiB,cAAc,KAAK;AAE1C,SAAO,IAAIA,kBAAAA,iBACR,cAAc,sBAAsB,EACpC,UAAU,cAAc,EACxB,MAAA;AACL;AAEA,MAAA,OAAe,CAAC,UAAiC,gBAAgB,KAAK;;"}

package/dist/composite/layout/section-intro/wide.mjs

@@ -1,72 +1,58 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
-import { createDiv, create } from "../../../model/elements/index.mjs";
-import { sansLargest } from "../../../model/elements/headline.mjs";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
 const TABLET = 500;
 const createHeadline = (props) => {
-  const { headline } = props;
-  if (!headline) return;
-  return sansLargest({
-    element: headline,
-    elementStyles: {
-      element: {
-        fontWeight: 800,
-        textTransform: "uppercase"
-      }
+  const { headline, isThemeDark } = props;
+  if (!headline) return null;
+  return new ElementBuilder(headline).styled(
+    Styles.typography.sans.compose("largest", {
+      theme: theme.fontColor(isThemeDark)
+    })
+  ).withStyles({
+    element: {
+      fontWeight: 800,
+      textTransform: "uppercase"
     }
-  });
+  }).build();
 };
 const createActions = (props) => {
   const { actions } = props;
-  if (!actions) return;
-  return create({
-    element: actions,
-    className: "intro-wide-actions",
-    elementStyles: {
-      element: {
-        display: "block",
-        [`@container (max-width: ${TABLET - 1}px)`]: {
-          [`* + &`]: { marginTop: token.spacing.md }
-        }
+  if (!actions) return null;
+  return new ElementBuilder(actions).withClassName("intro-wide-actions").withStyles({
+    element: {
+      display: "block",
+      [`@container (max-width: ${TABLET - 1}px)`]: {
+        [`* + &`]: { marginTop: token.spacing.md }
       }
     }
-  });
+  }).build();
 };
 const createWrapper = (props) => {
-  const headlineElement = createHeadline(props);
-  const actionsElement = createActions(props);
-  const children = [headlineElement, actionsElement].filter(
-    Boolean
-  );
-  return createDiv({
-    className: "intro-wide-container-wrapper",
-    children,
-    elementStyles: {
-      element: {
-        [`@container (min-width: ${TABLET}px)`]: {
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center"
-        }
+  const { headline, actions, isThemeDark } = props;
+  const headlineElement = createHeadline({ headline, isThemeDark });
+  const actionsElement = createActions({ actions });
+  const wrapper = new ElementBuilder().withClassName("intro-wide-container-wrapper").withStyles({
+    element: {
+      [`@container (min-width: ${TABLET}px)`]: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
       }
     }
   });
+  if (headlineElement) {
+    wrapper.withChild(headlineElement);
+  }
+  if (actionsElement) {
+    wrapper.withChild(actionsElement);
+  }
+  return wrapper.build();
 };
 const createContainer = (props) => {
-  const { isThemeDark } = props;
   const wrapperElement = createWrapper(props);
-  return createDiv({
-    className: "intro-wide-container",
-    children: [wrapperElement],
-    elementStyles: {
-      element: {
-        [`& *`]: {
-          ...isThemeDark && {
-            color: token.color.white
-          }
-        }
-      }
-    }
-  });
+  return new ElementBuilder().withClassName("intro-wide-container").withChild(wrapperElement).build();
 };
 const wide = (props) => createContainer(props);
 export {

package/dist/composite/layout/section-intro/wide.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"wide.mjs","sources":["../../../../source/composite/layout/section-intro/wide.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../../_types';\n\nexport interface SectionIntroWideProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n}\n\nconst TABLET = 500;\n\nconst createHeadline = (\n  props: Pick<SectionIntroWideProps, 'headline'>,\n): ElementVisual | undefined => {\n  const { headline } = props;\n  if (!headline) return;\n\n  return ElementModel.headline.sansLargest({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    },\n  });\n};\n\nconst createActions = (\n  props: Pick<SectionIntroWideProps, 'actions'>,\n): ElementVisual | undefined => {\n  const { actions } = props;\n  if (!actions) return;\n\n  return ElementModel.create({\n    element: actions,\n    className: 'intro-wide-actions',\n    elementStyles: {\n      element: {\n        display: 'block',\n\n        [`@container (max-width: ${TABLET - 1}px)`]: {\n          [`* + &`]: { marginTop: token.spacing.md },\n        },\n      },\n    },\n  });\n};\n\nconst createWrapper = (\n  props: Pick<SectionIntroWideProps, 'headline' | 'actions' | 'isThemeDark'>,\n): ElementVisual => {\n  const headlineElement = createHeadline(props);\n  const actionsElement = createActions(props);\n\n  const children = [headlineElement, actionsElement].filter(\n    Boolean,\n  ) as ElementVisual[];\n\n  return ElementModel.createDiv({\n    className: 'intro-wide-container-wrapper',\n    children,\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${TABLET}px)`]: {\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n        },\n      },\n    },\n  });\n};\n\nconst createContainer = (\n  props: Pick<SectionIntroWideProps, 'isThemeDark' | 'headline' | 'actions'>,\n): ElementVisual => {\n  const { isThemeDark } = props;\n  const wrapperElement = createWrapper(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-wide-container',\n    children: [wrapperElement],\n    elementStyles: {\n      element: {\n        [`& *`]: {\n          ...(isThemeDark && {\n            color: token.color.white,\n          }),\n        },\n      },\n    },\n  });\n};\n\nexport default (props: SectionIntroWideProps) => createContainer(props);\n"],"names":["ElementModel.headline.sansLargest","ElementModel.create","ElementModel.createDiv"],"mappings":";;;AAUA,MAAM,SAAS;AAEf,MAAM,iBAAiB,CACrB,UAC8B;AAC9B,QAAM,EAAE,aAAa;AACrB,MAAI,CAAC,SAAU;AAEf,SAAOA,YAAkC;AAAA,IACvC,SAAS;AAAA,IACT,eAAe;AAAA,MACb,SAAS;AAAA,QACP,YAAY;AAAA,QACZ,eAAe;AAAA,MAAA;AAAA,IACjB;AAAA,EACF,CACD;AACH;AAEA,MAAM,gBAAgB,CACpB,UAC8B;AAC9B,QAAM,EAAE,YAAY;AACpB,MAAI,CAAC,QAAS;AAEd,SAAOC,OAAoB;AAAA,IACzB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QAET,CAAC,0BAA0B,SAAS,CAAC,KAAK,GAAG;AAAA,UAC3C,CAAC,OAAO,GAAG,EAAE,WAAW,MAAM,QAAQ,GAAA;AAAA,QAAG;AAAA,MAC3C;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,gBAAgB,CACpB,UACkB;AAClB,QAAM,kBAAkB,eAAe,KAAK;AAC5C,QAAM,iBAAiB,cAAc,KAAK;AAE1C,QAAM,WAAW,CAAC,iBAAiB,cAAc,EAAE;AAAA,IACjD;AAAA,EAAA;AAGF,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,UACvC,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,QAAA;AAAA,MACd;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,kBAAkB,CACtB,UACkB;AAClB,QAAM,EAAE,gBAAgB;AACxB,QAAM,iBAAiB,cAAc,KAAK;AAE1C,SAAOA,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,cAAc;AAAA,IACzB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,KAAK,GAAG;AAAA,UACP,GAAI,eAAe;AAAA,YACjB,OAAO,MAAM,MAAM;AAAA,UAAA;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAA,OAAe,CAAC,UAAiC,gBAAgB,KAAK;"}
+{"version":3,"file":"wide.mjs","sources":["../../../../source/composite/layout/section-intro/wide.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type ElementModel } from '../../../_types';\n\nexport interface SectionIntroWideProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n}\n\nconst TABLET = 500;\n\nconst createHeadline = (\n  props: Pick<SectionIntroWideProps, 'headline' | 'isThemeDark'>,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark } = props;\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.sans.compose('largest', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    })\n    .build();\n};\n\nconst createActions = (\n  props: Pick<SectionIntroWideProps, 'actions'>,\n): ElementModel<HTMLElement> | null => {\n  const { actions } = props;\n  if (!actions) return null;\n\n  return new ElementBuilder(actions)\n    .withClassName('intro-wide-actions')\n    .withStyles({\n      element: {\n        display: 'block',\n\n        [`@container (max-width: ${TABLET - 1}px)`]: {\n          [`* + &`]: { marginTop: token.spacing.md },\n        },\n      },\n    })\n    .build();\n};\n\nconst createWrapper = (\n  props: Pick<SectionIntroWideProps, 'headline' | 'actions' | 'isThemeDark'>,\n): ElementModel<HTMLElement> => {\n  const { headline, actions, isThemeDark } = props;\n  const headlineElement = createHeadline({ headline, isThemeDark });\n  const actionsElement = createActions({ actions });\n\n  const wrapper = new ElementBuilder()\n    .withClassName('intro-wide-container-wrapper')\n    .withStyles({\n      element: {\n        [`@container (min-width: ${TABLET}px)`]: {\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n        },\n      },\n    });\n\n  if (headlineElement) {\n    wrapper.withChild(headlineElement);\n  }\n\n  if (actionsElement) {\n    wrapper.withChild(actionsElement);\n  }\n\n  return wrapper.build();\n};\n\nconst createContainer = (\n  props: Pick<SectionIntroWideProps, 'isThemeDark' | 'headline' | 'actions'>,\n): ElementModel<HTMLElement> => {\n  const wrapperElement = createWrapper(props);\n\n  return new ElementBuilder()\n    .withClassName('intro-wide-container')\n    .withChild(wrapperElement)\n    .build();\n};\n\nexport default (props: SectionIntroWideProps) => createContainer(props);\n"],"names":[],"mappings":";;;;AAYA,MAAM,SAAS;AAEf,MAAM,iBAAiB,CACrB,UACqC;AACrC,QAAM,EAAE,UAAU,YAAA,IAAgB;AAClC,MAAI,CAAC,SAAU,QAAO;AAEtB,SAAO,IAAI,eAAe,QAAQ,EAC/B;AAAA,IACC,OAAO,WAAW,KAAK,QAAQ,WAAW;AAAA,MACxC,OAAO,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,eAAe;AAAA,IAAA;AAAA,EACjB,CACD,EACA,MAAA;AACL;AAEA,MAAM,gBAAgB,CACpB,UACqC;AACrC,QAAM,EAAE,YAAY;AACpB,MAAI,CAAC,QAAS,QAAO;AAErB,SAAO,IAAI,eAAe,OAAO,EAC9B,cAAc,oBAAoB,EAClC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MAET,CAAC,0BAA0B,SAAS,CAAC,KAAK,GAAG;AAAA,QAC3C,CAAC,OAAO,GAAG,EAAE,WAAW,MAAM,QAAQ,GAAA;AAAA,MAAG;AAAA,IAC3C;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,gBAAgB,CACpB,UAC8B;AAC9B,QAAM,EAAE,UAAU,SAAS,YAAA,IAAgB;AAC3C,QAAM,kBAAkB,eAAe,EAAE,UAAU,aAAa;AAChE,QAAM,iBAAiB,cAAc,EAAE,SAAS;AAEhD,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,QACvC,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,CACD;AAEH,MAAI,iBAAiB;AACnB,YAAQ,UAAU,eAAe;AAAA,EACnC;AAEA,MAAI,gBAAgB;AAClB,YAAQ,UAAU,cAAc;AAAA,EAClC;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEA,MAAM,kBAAkB,CACtB,UAC8B;AAC9B,QAAM,iBAAiB,cAAc,KAAK;AAE1C,SAAO,IAAI,iBACR,cAAc,sBAAsB,EACpC,UAAU,cAAc,EACxB,MAAA;AACL;AAEA,MAAA,OAAe,CAAC,UAAiC,gBAAgB,KAAK;"}

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

@@ -1,5 +1,5 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const layout = require("@universityofmaryland/web-styles-library/layout");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
 function _interopNamespaceDefault(e) {

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

@@ -1 +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;;"}
+{"version":3,"file":"index.js","sources":["../../../../source/composite/layout/sticky-columns/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\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

@@ -1,4 +1,4 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
 import * as layout from "@universityofmaryland/web-styles-library/layout";
 import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
 const ELEMENT_NAME = "umd-sticky-columns";

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

@@ -1 +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;"}
+{"version":3,"file":"index.mjs","sources":["../../../../source/composite/layout/sticky-columns/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\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.js

@@ -1,5 +1,5 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const typography = require("@universityofmaryland/web-styles-library/typography");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
 function _interopNamespaceDefault(e) {

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

@@ -1 +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;;"}
+{"version":3,"file":"caption.js","sources":["../../../../source/composite/media/elements/caption.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\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

@@ -1,4 +1,4 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
 import * as typography from "@universityofmaryland/web-styles-library/typography";
 import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
 const ATTRIBUTE_THEME = "data-theme";

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

@@ -1 +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;"}
+{"version":3,"file":"caption.mjs","sources":["../../../../source/composite/media/elements/caption.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\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.d.ts

@@ -2,9 +2,10 @@ declare const _default: ({ image }: {
     image: HTMLImageElement;
 }) => {
     destroy: () => void;
-    element: HTMLElement;
-    className: string;
+    element: HTMLDivElement;
     styles: string;
+    update?: (props: Partial<import('@universityofmaryland/web-builder-library').BuilderOptions>) => void;
+    events?: Record<string, Function>;
 };
 export default _default;
 //# sourceMappingURL=gif.d.ts.map

package/dist/composite/media/elements/gif.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gif.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/elements/gif.ts"],"names":[],"mappings":"yBAGgB,WAAW;IAAE,KAAK,EAAE,gBAAgB,CAAA;CAAE;;;;;;AAAtD,wBA6EE"}
+{"version":3,"file":"gif.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/elements/gif.ts"],"names":[],"mappings":"yBAGgB,WAAW;IAAE,KAAK,EAAE,gBAAgB,CAAA;CAAE;;;;;;;AAAtD,wBA4EE"}

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

@@ -1,7 +1,10 @@
 "use strict";
-const index = require("../../../model/elements/index.js");
-require("@universityofmaryland/web-styles-library/token");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+require("@universityofmaryland/web-token-library");
 require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-styles-library/layout");
+require("@universityofmaryland/web-styles-library/animation");
+require("@universityofmaryland/web-styles-library/typography");
 require("@universityofmaryland/web-utilities-library/media");
 require("@universityofmaryland/web-utilities-library/dom");
 require("@universityofmaryland/web-icons-library/controls");
@@ -13,17 +16,18 @@ 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-styles-library");
 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("@universityofmaryland/web-utilities-library/theme");
 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 = () => {
@@ -59,32 +63,26 @@ const gif = ({ image }) => {
   setTimeout(() => {
     resizeObserver.observe(container);
   }, 0);
-  const elementModel = index.create({
-    element: container,
-    className: "media-gif",
-    children: [
-      background({
-        element: image,
-        isShowCaption: true,
-        isScaled: false,
-        isGifAllowed: true,
-        customStyles: {
-          width: "auto",
-          height: "100%",
-          display: "block"
-        }
-      })
-    ],
-    elementStyles: {
-      element: {
-        maxHeight: "100%",
-        maxWidth: "100%",
-        position: "relative",
-        display: "block",
-        overflow: "hidden"
-      }
+  const imageElement = background({
+    element: image,
+    isShowCaption: true,
+    isScaled: false,
+    isGifAllowed: true,
+    customStyles: {
+      width: "auto",
+      height: "100%",
+      display: "block"
     }
   });
+  const elementModel = new webBuilderLibrary.ElementBuilder(container).withClassName("media-gif").withChild(imageElement).withStyles({
+    element: {
+      maxHeight: "100%",
+      maxWidth: "100%",
+      position: "relative",
+      display: "block",
+      overflow: "hidden"
+    }
+  }).build();
   return {
     ...elementModel,
     destroy: () => {

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

@@ -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;;"}
+{"version":3,"file":"gif.js","sources":["../../../../source/composite/media/elements/gif.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\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 imageElement = 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  const elementModel = new ElementBuilder(container)\n    .withClassName('media-gif')\n    .withChild(imageElement)\n    .withStyles({\n      element: {\n        maxHeight: '100%',\n        maxWidth: '100%',\n        position: 'relative',\n        display: 'block',\n        overflow: 'hidden',\n      },\n    })\n    .build();\n\n  return {\n    ...elementModel,\n    destroy: () => {\n      resizeObserver.disconnect();\n      image.removeEventListener('load', calculateHeight);\n    },\n  };\n};\n"],"names":["containerWidth","assets.image.background","ElementBuilder"],"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,WAAwB;AAAA,IAC3C,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX,CACD;AAED,QAAM,eAAe,IAAIC,iCAAe,SAAS,EAC9C,cAAc,WAAW,EACzB,UAAU,YAAY,EACtB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,MAAA;AAEH,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

@@ -1,6 +1,9 @@
-import { create } from "../../../model/elements/index.mjs";
-import "@universityofmaryland/web-styles-library/token";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import "@universityofmaryland/web-token-library";
 import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
+import "@universityofmaryland/web-styles-library/typography";
 import "@universityofmaryland/web-utilities-library/media";
 import "@universityofmaryland/web-utilities-library/dom";
 import "@universityofmaryland/web-icons-library/controls";
@@ -12,17 +15,18 @@ 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-styles-library";
 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 "@universityofmaryland/web-utilities-library/theme";
 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 = () => {
@@ -58,32 +62,26 @@ const gif = ({ image }) => {
   setTimeout(() => {
     resizeObserver.observe(container);
   }, 0);
-  const elementModel = create({
-    element: container,
-    className: "media-gif",
-    children: [
-      imageContainer({
-        element: image,
-        isShowCaption: true,
-        isScaled: false,
-        isGifAllowed: true,
-        customStyles: {
-          width: "auto",
-          height: "100%",
-          display: "block"
-        }
-      })
-    ],
-    elementStyles: {
-      element: {
-        maxHeight: "100%",
-        maxWidth: "100%",
-        position: "relative",
-        display: "block",
-        overflow: "hidden"
-      }
+  const imageElement = imageContainer({
+    element: image,
+    isShowCaption: true,
+    isScaled: false,
+    isGifAllowed: true,
+    customStyles: {
+      width: "auto",
+      height: "100%",
+      display: "block"
     }
   });
+  const elementModel = new ElementBuilder(container).withClassName("media-gif").withChild(imageElement).withStyles({
+    element: {
+      maxHeight: "100%",
+      maxWidth: "100%",
+      position: "relative",
+      display: "block",
+      overflow: "hidden"
+    }
+  }).build();
   return {
     ...elementModel,
     destroy: () => {