@universityofmaryland/web-elements-library 1.3.7 → 1.4.0

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

@@ -0,0 +1,56 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const index = require("../../../utilities/theme/index.js");
+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({
+  styleObj: {
+    [`.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}`]: Styles.typography.sans.small
+  }
+})}
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`${ELEMENT_MEDIA_CAPTIONS_CONTAINER} *`]: Styles.typography.sans.small
+  }
+})}
+
+  .${ELEMENT_MEDIA_CAPTIONS_CONTAINER} {
+    margin-top: ${Styles.token.spacing.sm};
+    display: inline-block;
+    text-align: left;
+    opacity: 0;
+    width: 100%;
+  }
+
+  .${ELEMENT_MEDIA_CAPTIONS_CONTAINER},
+  .${ELEMENT_MEDIA_CAPTIONS_CONTAINER} > * {
+    color: ${Styles.token.color.gray.mediumAA};
+  }
+
+  ${OVERWRITE_CONTAINER_DARK},
+  ${OVERWRITE_CONTAINER_DARK} * {
+    color: ${Styles.token.color.white};
+  }
+`;
+const CreateMediaInline = ({
+  caption,
+  isThemeDark
+}) => {
+  caption.classList.add(ELEMENT_MEDIA_CAPTIONS_CONTAINER);
+  if (isThemeDark) caption.setAttribute(ATTRIBUTE_THEME, ATTRIBUTE_THEME_DARK);
+  return caption;
+};
+const CaptionContainer = {
+  CreateElement: CreateMediaInline,
+  Styles: STYLES_MEDIA_CAPTIONS_ELEMENT,
+  Elements: {
+    container: ELEMENT_MEDIA_CAPTIONS_CONTAINER
+  }
+};
+module.exports = CaptionContainer;
+//# sourceMappingURL=caption.js.map

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

@@ -0,0 +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;;"}

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

@@ -0,0 +1,57 @@
+import { token, typography } from "@universityofmaryland/web-styles-library";
+import { convertJSSObjectToStyles } from "../../../utilities/theme/index.mjs";
+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({
+  styleObj: {
+    [`.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}`]: typography.sans.small
+  }
+})}
+
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`${ELEMENT_MEDIA_CAPTIONS_CONTAINER} *`]: typography.sans.small
+  }
+})}
+
+  .${ELEMENT_MEDIA_CAPTIONS_CONTAINER} {
+    margin-top: ${token.spacing.sm};
+    display: inline-block;
+    text-align: left;
+    opacity: 0;
+    width: 100%;
+  }
+
+  .${ELEMENT_MEDIA_CAPTIONS_CONTAINER},
+  .${ELEMENT_MEDIA_CAPTIONS_CONTAINER} > * {
+    color: ${token.color.gray.mediumAA};
+  }
+
+  ${OVERWRITE_CONTAINER_DARK},
+  ${OVERWRITE_CONTAINER_DARK} * {
+    color: ${token.color.white};
+  }
+`;
+const CreateMediaInline = ({
+  caption,
+  isThemeDark
+}) => {
+  caption.classList.add(ELEMENT_MEDIA_CAPTIONS_CONTAINER);
+  if (isThemeDark) caption.setAttribute(ATTRIBUTE_THEME, ATTRIBUTE_THEME_DARK);
+  return caption;
+};
+const CaptionContainer = {
+  CreateElement: CreateMediaInline,
+  Styles: STYLES_MEDIA_CAPTIONS_ELEMENT,
+  Elements: {
+    container: ELEMENT_MEDIA_CAPTIONS_CONTAINER
+  }
+};
+export {
+  CaptionContainer as default
+};
+//# sourceMappingURL=caption.mjs.map

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

@@ -0,0 +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;"}

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":"oCAG2B;IAAE,KAAK,EAAE,gBAAgB,CAAA;CAAE;;;;;;AAAtD,wBAoEE"}
+{"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,wBAqEE"}

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

@@ -0,0 +1,78 @@
+"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("../../../atomic/animations/actions/indicator.js");
+require("../../../atomic/animations/brand/chevron-scroll.js");
+const background = require("../../../atomic/assets/image/background.js");
+require("../../../atomic/layout/block/stacked.js");
+require("../../../atomic/layout/overlay/modal.js");
+require("../../../atomic/layout/person/columns.js");
+require("../../../atomic/text-lockup/date.js");
+require("../../../atomic/text-lockup/small.js");
+const gif = ({ image }) => {
+  const container = document.createElement("div");
+  const calculateHeight = () => {
+    if (!image.naturalWidth || !image.naturalHeight) return;
+    const aspectRatio = image.naturalHeight / image.naturalWidth;
+    const containerWidth = container.offsetWidth;
+    if (containerWidth > 0) {
+      const calculatedHeight = Math.round(containerWidth * aspectRatio);
+      container.style.height = `${calculatedHeight}px`;
+    }
+  };
+  const resizeObserver = new ResizeObserver(() => {
+    container.style.width = `${image.naturalWidth}px`;
+    setTimeout(() => {
+      calculateHeight();
+    }, 10);
+  });
+  if (image.complete && image.naturalWidth) {
+    container.style.width = `${image.naturalWidth}px`;
+    setTimeout(() => {
+      calculateHeight();
+    }, 10);
+  } else {
+    image.addEventListener("load", calculateHeight);
+  }
+  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"
+      }
+    }
+  });
+  return {
+    ...elementModel,
+    destroy: () => {
+      resizeObserver.disconnect();
+      image.removeEventListener("load", calculateHeight);
+    }
+  };
+};
+module.exports = gif;
+//# sourceMappingURL=gif.js.map

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

@@ -0,0 +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    }\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":["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;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,eAAeA,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

@@ -0,0 +1,79 @@
+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 "../../../atomic/animations/actions/indicator.mjs";
+import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import imageContainer from "../../../atomic/assets/image/background.mjs";
+import "../../../atomic/layout/block/stacked.mjs";
+import "../../../atomic/layout/overlay/modal.mjs";
+import "../../../atomic/layout/person/columns.mjs";
+import "../../../atomic/text-lockup/date.mjs";
+import "../../../atomic/text-lockup/small.mjs";
+const gif = ({ image }) => {
+  const container = document.createElement("div");
+  const calculateHeight = () => {
+    if (!image.naturalWidth || !image.naturalHeight) return;
+    const aspectRatio = image.naturalHeight / image.naturalWidth;
+    const containerWidth = container.offsetWidth;
+    if (containerWidth > 0) {
+      const calculatedHeight = Math.round(containerWidth * aspectRatio);
+      container.style.height = `${calculatedHeight}px`;
+    }
+  };
+  const resizeObserver = new ResizeObserver(() => {
+    container.style.width = `${image.naturalWidth}px`;
+    setTimeout(() => {
+      calculateHeight();
+    }, 10);
+  });
+  if (image.complete && image.naturalWidth) {
+    container.style.width = `${image.naturalWidth}px`;
+    setTimeout(() => {
+      calculateHeight();
+    }, 10);
+  } else {
+    image.addEventListener("load", calculateHeight);
+  }
+  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"
+      }
+    }
+  });
+  return {
+    ...elementModel,
+    destroy: () => {
+      resizeObserver.disconnect();
+      image.removeEventListener("load", calculateHeight);
+    }
+  };
+};
+export {
+  gif as default
+};
+//# sourceMappingURL=gif.mjs.map

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

@@ -0,0 +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    }\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":["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;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,eAAeA,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/elements/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const caption = require("./caption.js");
+const gif = require("./gif.js");
+exports.caption = caption;
+exports.gif = gif;
+//# sourceMappingURL=index.js.map

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

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

package/dist/composite/media/elements/index.mjs

@@ -0,0 +1,7 @@
+import { default as default2 } from "./caption.mjs";
+import { default as default3 } from "./gif.mjs";
+export {
+  default2 as caption,
+  default3 as gif
+};
+//# sourceMappingURL=index.mjs.map

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

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

package/dist/composite/media/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./elements/index.js");
+const index$1 = require("./inline/index.js");
+exports.elements = index;
+exports.inline = index$1;
+//# sourceMappingURL=index.js.map

package/dist/composite/media/index.js.map

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

package/dist/composite/media/index.mjs

@@ -0,0 +1,7 @@
+import * as index from "./elements/index.mjs";
+import { default as default2 } from "./inline/index.mjs";
+export {
+  index as elements,
+  default2 as inline
+};
+//# sourceMappingURL=index.mjs.map

package/dist/composite/media/index.mjs.map

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

package/dist/composite/media/inline/caption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"caption.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/inline/caption.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AA6BF,QAAA,MAAM,sBAAsB,UAAW,2BAA2B;;;;;;CAsF5D,CAAC;AAEP,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"caption.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/inline/caption.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AA6BF,QAAA,MAAM,sBAAsB,GAAI,OAAO,2BAA2B;;;;;;CAsF5D,CAAC;AAEP,eAAe,sBAAsB,CAAC"}

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

@@ -0,0 +1,105 @@
+"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 image = require("../../../layout/image.js");
+const caption = require("../elements/caption.js");
+const { spacing } = Styles.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};
+    max-width: 100%;
+  }
+`;
+const STYLES_MEDIA_INLINE_ELEMENT = `
+  .${ELEMENT_MEDIA_INLINE_CONTAINER} {
+    display: inline-block;
+    max-width: 100%;
+  }
+
+  ${image.Styles}
+  ${caption.Styles}
+  ${ObjectContainer}
+`;
+const CreateMediaWithCaption = (props) => (() => {
+  const { caption: caption$1, image: image$1, isThemeDark } = props;
+  const hasCaption = caption$1 && caption$1 !== null;
+  const elementContainer = document.createElement("div");
+  const objectContainer = document.createElement("div");
+  const sizeCaption = () => {
+    const imageContainer = elementContainer.querySelector(
+      `.${image.Elements.container}`
+    );
+    const caption2 = elementContainer.querySelector(
+      `.${caption.Elements.container}`
+    );
+    if (caption2) {
+      caption2.style.width = `${imageContainer.offsetWidth}px`;
+      caption2.style.display = `block`;
+    }
+  };
+  const eventResize = () => {
+    sizeCaption();
+  };
+  if (image$1) {
+    objectContainer.appendChild(
+      image.CreateElement({
+        image: image$1,
+        showCaption: true
+      })
+    );
+  }
+  const load = () => {
+    const checkSizing = () => {
+      const caption2 = objectContainer.querySelector(
+        `.${caption.Elements.container}`
+      );
+      if (caption2) {
+        caption2.style.opacity = `1`;
+      }
+    };
+    image$1?.addEventListener("load", () => {
+      checkSizing();
+      setTimeout(() => {
+        checkSizing();
+      }, 500);
+    });
+  };
+  if (hasCaption) {
+    const captionElement = caption.CreateElement({
+      caption: caption$1,
+      isThemeDark
+    });
+    captionElement.style.display = `none`;
+    objectContainer.appendChild(captionElement);
+  }
+  if (objectContainer.children.length > 0) {
+    elementContainer.appendChild(objectContainer);
+  }
+  objectContainer.classList.add(ELEMENT_OBJECT_CAPTION_CONTAINER);
+  elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);
+  window.addEventListener(
+    "resize",
+    index.debounce(() => {
+      eventResize();
+    }, 20)
+  );
+  setTimeout(() => {
+    eventResize();
+  }, 100);
+  return {
+    element: elementContainer,
+    events: {
+      load
+    },
+    styles: STYLES_MEDIA_INLINE_ELEMENT
+  };
+})();
+module.exports = CreateMediaWithCaption;
+//# sourceMappingURL=caption.js.map

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

@@ -0,0 +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;;"}

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

@@ -0,0 +1,106 @@
+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 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 = `
+  .${ELEMENT_OBJECT_CAPTION_CONTAINER} {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: ${token.spacing.sm};
+    max-width: 100%;
+  }
+`;
+const STYLES_MEDIA_INLINE_ELEMENT = `
+  .${ELEMENT_MEDIA_INLINE_CONTAINER} {
+    display: inline-block;
+    max-width: 100%;
+  }
+
+  ${LayoutImage.Styles}
+  ${CaptionContainer.Styles}
+  ${ObjectContainer}
+`;
+const CreateMediaWithCaption = (props) => (() => {
+  const { caption, image, isThemeDark } = props;
+  const hasCaption = caption && caption !== null;
+  const elementContainer = document.createElement("div");
+  const objectContainer = document.createElement("div");
+  const sizeCaption = () => {
+    const imageContainer = elementContainer.querySelector(
+      `.${LayoutImage.Elements.container}`
+    );
+    const caption2 = elementContainer.querySelector(
+      `.${CaptionContainer.Elements.container}`
+    );
+    if (caption2) {
+      caption2.style.width = `${imageContainer.offsetWidth}px`;
+      caption2.style.display = `block`;
+    }
+  };
+  const eventResize = () => {
+    sizeCaption();
+  };
+  if (image) {
+    objectContainer.appendChild(
+      LayoutImage.CreateElement({
+        image,
+        showCaption: true
+      })
+    );
+  }
+  const load = () => {
+    const checkSizing = () => {
+      const caption2 = objectContainer.querySelector(
+        `.${CaptionContainer.Elements.container}`
+      );
+      if (caption2) {
+        caption2.style.opacity = `1`;
+      }
+    };
+    image?.addEventListener("load", () => {
+      checkSizing();
+      setTimeout(() => {
+        checkSizing();
+      }, 500);
+    });
+  };
+  if (hasCaption) {
+    const captionElement = CaptionContainer.CreateElement({
+      caption,
+      isThemeDark
+    });
+    captionElement.style.display = `none`;
+    objectContainer.appendChild(captionElement);
+  }
+  if (objectContainer.children.length > 0) {
+    elementContainer.appendChild(objectContainer);
+  }
+  objectContainer.classList.add(ELEMENT_OBJECT_CAPTION_CONTAINER);
+  elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);
+  window.addEventListener(
+    "resize",
+    debounce(() => {
+      eventResize();
+    }, 20)
+  );
+  setTimeout(() => {
+    eventResize();
+  }, 100);
+  return {
+    element: elementContainer,
+    events: {
+      load
+    },
+    styles: STYLES_MEDIA_INLINE_ELEMENT
+  };
+})();
+export {
+  CreateMediaWithCaption as default
+};
+//# sourceMappingURL=caption.mjs.map

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

@@ -0,0 +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;"}

package/dist/composite/media/inline/index.d.ts

@@ -1,16 +1,16 @@
 declare const _default: {
-    caption: (props: import("./caption").TypeMediaInlineRequirements) => {
+    caption: (props: import('./caption').TypeMediaInlineRequirements) => {
         element: HTMLDivElement;
         events: {
             load: () => void;
         };
         styles: string;
     };
-    standard: (props: import("./standard").TypeMediaInlineRequirements) => {
+    standard: (props: import('./standard').TypeMediaInlineRequirements) => {
         element: HTMLDivElement;
         styles: string;
     };
-    wrapped: (props: import("./wrapped").TypeMediaInlineWrappedRequirements) => {
+    wrapped: (props: import('./wrapped').TypeMediaInlineWrappedRequirements) => {
         element: HTMLDivElement;
         events: {
             load: () => void;

package/dist/composite/media/inline/index.js

@@ -0,0 +1,11 @@
+"use strict";
+const caption = require("./caption.js");
+const standard = require("./standard.js");
+const wrapped = require("./wrapped.js");
+const index = {
+  caption,
+  standard,
+  wrapped
+};
+module.exports = index;
+//# sourceMappingURL=index.js.map

package/dist/composite/media/inline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../source/composite/media/inline/index.ts"],"sourcesContent":["import { default as caption } from './caption';\nimport { default as standard } from './standard';\nimport { default as wrapped } from './wrapped';\n\nexport default {\n  caption,\n  standard,\n  wrapped,\n};\n"],"names":[],"mappings":";;;;AAIA,MAAA,QAAe;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF;;"}

package/dist/composite/media/inline/index.mjs

@@ -0,0 +1,12 @@
+import CreateMediaWithCaption from "./caption.mjs";
+import CreateMediaInline from "./standard.mjs";
+import CreateMediaInlineWrapped from "./wrapped.mjs";
+const index = {
+  caption: CreateMediaWithCaption,
+  standard: CreateMediaInline,
+  wrapped: CreateMediaInlineWrapped
+};
+export {
+  index as default
+};
+//# sourceMappingURL=index.mjs.map