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

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

@@ -1 +1 @@
-{"version":3,"file":"small.js","sources":["../../../../source/composite/layout/section-intro/small.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type ElementModel } from '../../../_types';\nimport { SimpleRichTextOptions } from '../../../../../styles/dist/element/text/rich';\n\nexport interface SectionIntroProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  text?: HTMLElement | null;\n  hasSeparator?: boolean;\n  isThemeDark?: boolean;\n  includesAnimation?: boolean;\n}\n\nconst ANIMATION_CONFIGS = {\n  line: `\n    @keyframes intro-line {\n      from {\n        height: 0;\n        transform: translateY(${token.spacing.lg});\n      }\n      to {\n        height: ${token.spacing['4xl']};\n        transform: translateY(0);\n      }\n    }\n  `,\n  fadeIn: `\n    @keyframes intro-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(100px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n  `,\n};\n\nconst createHeadline = (\n  props: Pick<SectionIntroProps, '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 createText = (\n  props: Pick<SectionIntroProps, 'text' | 'isThemeDark' | 'headline'>,\n): ElementModel<HTMLElement> | null => {\n  const { text, headline, isThemeDark } = props;\n  const simpleRichTextOptions: SimpleRichTextOptions = {\n    size: 'large',\n    theme: theme.fontColor(isThemeDark),\n  };\n  if (!text) return null;\n  if (!headline) simpleRichTextOptions.size = 'largest';\n\n  return new ElementBuilder(text)\n    .styled(Styles.element.text.rich.composeSimple(simpleRichTextOptions))\n    .withStyles({\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n\n        [`&, & > *`]: {\n          ...(!headline && {\n            ...typography.sans.transformations.largerBold,\n            color: token.color.black,\n\n            ...(isThemeDark && {\n              color: token.color.white,\n            }),\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst createActions = (\n  props: Pick<SectionIntroProps, 'actions'>,\n): ElementModel<HTMLElement> | null => {\n  const { actions } = props;\n  if (!actions) return null;\n\n  return new ElementBuilder(actions)\n    .styled(Styles.layout.grid.inline.tabletRows)\n    .withStyles({\n      element: {\n        justifyContent: 'center',\n        alignItems: 'center',\n\n        [`* + &`]: {\n          marginTop: token.spacing.md,\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextContainer = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark' | 'includesAnimation'\n  >,\n): ElementModel<HTMLElement> => {\n  const { headline, text, actions, includesAnimation, isThemeDark } = props;\n\n  const headlineElement = createHeadline({ headline, isThemeDark });\n  const textElement = createText({ text, headline, isThemeDark });\n  const actionsElement = createActions({ actions });\n\n  const container = new ElementBuilder()\n    .withClassName('intro-default-container-text')\n    .withStyles({\n      element: {\n        ...(includesAnimation && {\n          opacity: 0,\n        }),\n\n        ['.intro-default-animated &']: {\n          transform: 'translateY(100px)',\n          animation: 'intro-fade-in 1s forwards',\n          animationDelay: '0.2s',\n        },\n\n        [`&:before`]: {\n          ...(includesAnimation && {\n            height: 0,\n            transform: `translateY(${token.spacing.lg})`,\n          }),\n        },\n      },\n    });\n\n  if (headlineElement) {\n    container.withChild(headlineElement);\n  }\n\n  if (textElement) {\n    container.withChild(textElement);\n  }\n\n  if (actionsElement) {\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n\nconst createWrapper = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n): ElementModel<HTMLElement> => {\n  const textContainerElement = createTextContainer(props);\n\n  return new ElementBuilder()\n    .withClassName('intro-default-container-wrapper')\n    .withChild(textContainerElement)\n    .withStyles({\n      element: {\n        textAlign: 'center',\n      },\n    })\n    .build();\n};\n\nconst createContainer = (\n  props: Pick<\n    SectionIntroProps,\n    | 'isThemeDark'\n    | 'hasSeparator'\n    | 'headline'\n    | 'text'\n    | 'actions'\n    | 'includesAnimation'\n  >,\n): ElementModel<HTMLElement> => {\n  const { isThemeDark, hasSeparator, includesAnimation } = props;\n\n  const wrapperElement = createWrapper(props);\n\n  return new ElementBuilder()\n    .withClassName('intro-default-container')\n    .withChild(wrapperElement)\n    .withStyles({\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n        margin: '0 auto',\n\n        ...(hasSeparator && {\n          paddingTop: token.spacing['6xl'],\n          position: 'relative',\n        }),\n\n        [`&:before`]: {\n          ...(hasSeparator && {\n            content: '\"\"',\n            backgroundColor: token.color.red,\n            position: 'absolute',\n            height: token.spacing['4xl'],\n            width: '2px',\n            left: 'calc(50% - 1px)',\n            top: 0,\n          }),\n        },\n\n        ['&.intro-default-animated:before']: {\n          ...(includesAnimation && {\n            animation: 'intro-line 1.2s forwards',\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst setupAnimation = (\n  props: Pick<SectionIntroProps, 'includesAnimation'> & {\n    container: HTMLElement;\n  },\n) => {\n  const { includesAnimation, container } = props;\n  if (!includesAnimation) return;\n\n  const animation: IntersectionObserverCallback = (entries, observer) => {\n    entries.map((entry) => {\n      const target = entry.target as HTMLElement;\n\n      if (entry.isIntersecting) {\n        target.classList.add('intro-default-animated');\n        observer.unobserve(target);\n      }\n    });\n  };\n\n  const observer = new IntersectionObserver(animation, {\n    root: null,\n    rootMargin: '0px',\n    threshold: [0.35],\n  });\n\n  observer.observe(container);\n};\n\nexport default (props: SectionIntroProps) => {\n  const containerElement = createContainer(props);\n\n  const loadAnimation = () =>\n    setupAnimation({\n      includesAnimation: props.includesAnimation,\n      container: containerElement.element,\n    });\n\n  if (props.includesAnimation) {\n    containerElement.styles += ANIMATION_CONFIGS.line;\n    containerElement.styles += ANIMATION_CONFIGS.fadeIn;\n  }\n\n  return {\n    ...containerElement,\n    events: { loadAnimation },\n  };\n};\n"],"names":["token","ElementBuilder","Styles","theme","typography","observer"],"mappings":"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"}
+{"version":3,"file":"small.js","sources":["../../../../source/composite/layout/section-intro/small.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type ElementModel } from '../../../_types';\nimport { SimpleRichTextOptions } from '../../../../../styles/dist/element/text/rich';\n\nexport interface SectionIntroProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  text?: HTMLElement | null;\n  hasSeparator?: boolean;\n  isThemeDark?: boolean;\n  includesAnimation?: boolean;\n}\n\nconst ANIMATION_CONFIGS = {\n  line: `\n    @keyframes intro-line {\n      from {\n        height: 0;\n        transform: translateY(${token.spacing.lg});\n      }\n      to {\n        height: ${token.spacing['4xl']};\n        transform: translateY(0);\n      }\n    }\n  `,\n  fadeIn: `\n    @keyframes intro-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(100px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n  `,\n};\n\nconst createHeadline = (\n  props: Pick<SectionIntroProps, '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 createText = (\n  props: Pick<SectionIntroProps, 'text' | 'isThemeDark' | 'headline'>,\n): ElementModel<HTMLElement> | null => {\n  const { text, headline, isThemeDark } = props;\n  const simpleRichTextOptions: SimpleRichTextOptions = {\n    size: 'large',\n    theme: theme.fontColor(isThemeDark),\n  };\n  if (!text) return null;\n  if (!headline) simpleRichTextOptions.size = 'largest';\n\n  return new ElementBuilder(text)\n    .styled(Styles.element.text.rich.composeSimple(simpleRichTextOptions))\n    .withStyles({\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n\n        [`&, & > *`]: {\n          ...(!headline && {\n            ...typography.sans.transformations.largerBold,\n            color: token.color.black,\n\n            ...(isThemeDark && {\n              color: token.color.white,\n            }),\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst createActions = (\n  props: Pick<SectionIntroProps, 'actions'>,\n): ElementModel<HTMLElement> | null => {\n  const { actions } = props;\n  if (!actions) return null;\n\n  return new ElementBuilder(actions)\n    .styled(Styles.layout.grid.inline.tabletRows)\n    .withStyles({\n      element: {\n        justifyContent: 'center',\n        alignItems: 'center',\n\n        [`* + &`]: {\n          marginTop: token.spacing.md,\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextContainer = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark' | 'includesAnimation'\n  >,\n): ElementModel<HTMLElement> => {\n  const { headline, text, actions, includesAnimation, isThemeDark } = props;\n\n  const headlineElement = createHeadline({ headline, isThemeDark });\n  const textElement = createText({ text, headline, isThemeDark });\n  const actionsElement = createActions({ actions });\n\n  const container = new ElementBuilder()\n    .withClassName('intro-default-container-text')\n    .withStyles({\n      element: {\n        ...(includesAnimation && {\n          opacity: 0,\n        }),\n\n        ['.intro-default-animated &']: {\n          transform: 'translateY(100px)',\n          animation: 'intro-fade-in 1s forwards',\n          animationDelay: '0.2s',\n        },\n\n        [`&:before`]: {\n          ...(includesAnimation && {\n            height: 0,\n            transform: `translateY(${token.spacing.lg})`,\n          }),\n        },\n      },\n    });\n\n  if (headlineElement) {\n    container.withChild(headlineElement);\n  }\n\n  if (textElement) {\n    container.withChild(textElement);\n  }\n\n  if (actionsElement) {\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n\nconst createWrapper = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n): ElementModel<HTMLElement> => {\n  const textContainerElement = createTextContainer(props);\n\n  return new ElementBuilder()\n    .withClassName('intro-default-container-wrapper')\n    .withChild(textContainerElement)\n    .withStyles({\n      element: {\n        textAlign: 'center',\n      },\n    })\n    .build();\n};\n\nconst createContainer = (\n  props: Pick<\n    SectionIntroProps,\n    | 'isThemeDark'\n    | 'hasSeparator'\n    | 'headline'\n    | 'text'\n    | 'actions'\n    | 'includesAnimation'\n  >,\n): ElementModel<HTMLElement> => {\n  const { isThemeDark, hasSeparator, includesAnimation } = props;\n\n  const wrapperElement = createWrapper(props);\n\n  return new ElementBuilder()\n    .withClassName('intro-default-container')\n    .withChild(wrapperElement)\n    .withStyles({\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n        margin: '0 auto',\n\n        ...(hasSeparator && {\n          paddingTop: token.spacing['6xl'],\n          position: 'relative',\n        }),\n\n        [`&:before`]: {\n          ...(hasSeparator && {\n            content: '\"\"',\n            backgroundColor: token.color.red,\n            position: 'absolute',\n            height: token.spacing['4xl'],\n            width: '2px',\n            left: 'calc(50% - 1px)',\n            top: 0,\n          }),\n        },\n\n        ['&.intro-default-animated:before']: {\n          ...(includesAnimation && {\n            animation: 'intro-line 1.2s forwards',\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst setupAnimation = (\n  props: Pick<SectionIntroProps, 'includesAnimation'> & {\n    container: HTMLElement;\n  },\n) => {\n  const { includesAnimation, container } = props;\n  if (!includesAnimation) return;\n\n  const animation: IntersectionObserverCallback = (entries, observer) => {\n    entries.map((entry) => {\n      const target = entry.target as HTMLElement;\n\n      if (entry.isIntersecting) {\n        target.classList.add('intro-default-animated');\n        observer.unobserve(target);\n      }\n    });\n  };\n\n  const observer = new IntersectionObserver(animation, {\n    root: null,\n    rootMargin: '0px',\n    threshold: [0.35],\n  });\n\n  observer.observe(container);\n};\n\nconst CreateSectionIntroSmallElement = (props: SectionIntroProps) => {\n  const containerElement = createContainer(props);\n\n  const loadAnimation = () =>\n    setupAnimation({\n      includesAnimation: props.includesAnimation,\n      container: containerElement.element,\n    });\n\n  if (props.includesAnimation) {\n    containerElement.styles += ANIMATION_CONFIGS.line;\n    containerElement.styles += ANIMATION_CONFIGS.fadeIn;\n  }\n\n  return {\n    ...containerElement,\n    events: { loadAnimation },\n  };\n};\n\nexport const createCompositeLayoutSectionIntroSmall = CreateSectionIntroSmallElement;\n"],"names":["observer"],"mappings":"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"}

package/dist/composite/layout/section-intro/wide.d.ts

@@ -4,6 +4,5 @@ export interface SectionIntroWideProps {
     actions?: HTMLElement | null;
     isThemeDark?: boolean;
 }
-declare const _default: (props: SectionIntroWideProps) => ElementModel<HTMLElement>;
-export default _default;
+export declare const createCompositeLayoutSectionIntroWide: (props: SectionIntroWideProps) => ElementModel<HTMLElement>;
 //# sourceMappingURL=wide.d.ts.map

package/dist/composite/layout/section-intro/wide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wide.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/wide.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;yBAsFe,OAAO,qBAAqB;AAA5C,wBAAwE"}
+{"version":3,"file":"wide.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/wide.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAwFD,eAAO,MAAM,qCAAqC,UAFJ,qBAAqB,8BAEe,CAAC"}

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

@@ -1,33 +1,14 @@
-"use strict";
-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) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+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, isThemeDark } = props;
   if (!headline) return null;
-  return new webBuilderLibrary.ElementBuilder(headline).styled(
-    Styles__namespace.typography.sans.compose("largest", {
-      theme: theme.theme.fontColor(isThemeDark)
+  return new ElementBuilder(headline).styled(
+    Styles.typography.sans.compose("largest", {
+      theme: theme.fontColor(isThemeDark)
     })
   ).withStyles({
     element: {
@@ -39,11 +20,11 @@ const createHeadline = (props) => {
 const createActions = (props) => {
   const { actions } = props;
   if (!actions) return null;
-  return new webBuilderLibrary.ElementBuilder(actions).withClassName("intro-wide-actions").withStyles({
+  return new ElementBuilder(actions).withClassName("intro-wide-actions").withStyles({
     element: {
       display: "block",
       [`@container (max-width: ${TABLET - 1}px)`]: {
-        [`* + &`]: { marginTop: token__namespace.spacing.md }
+        [`* + &`]: { marginTop: token.spacing.md }
       }
     }
   }).build();
@@ -52,7 +33,7 @@ const createWrapper = (props) => {
   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({
+  const wrapper = new ElementBuilder().withClassName("intro-wide-container-wrapper").withStyles({
     element: {
       [`@container (min-width: ${TABLET}px)`]: {
         display: "flex",
@@ -71,8 +52,11 @@ const createWrapper = (props) => {
 };
 const createContainer = (props) => {
   const wrapperElement = createWrapper(props);
-  return new webBuilderLibrary.ElementBuilder().withClassName("intro-wide-container").withChild(wrapperElement).build();
+  return new ElementBuilder().withClassName("intro-wide-container").withChild(wrapperElement).build();
+};
+const CreateSectionIntroWideElement = (props) => createContainer(props);
+const createCompositeLayoutSectionIntroWide = CreateSectionIntroWideElement;
+export {
+  createCompositeLayoutSectionIntroWide
 };
-const wide = (props) => createContainer(props);
-module.exports = wide;
 //# sourceMappingURL=wide.js.map

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 { 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;;"}
+{"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\nconst CreateSectionIntroWideElement = (props: SectionIntroWideProps) => createContainer(props);\n\nexport const createCompositeLayoutSectionIntroWide = CreateSectionIntroWideElement;\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,MAAM,gCAAgC,CAAC,UAAiC,gBAAgB,KAAK;AAEtF,MAAM,wCAAwC;"}

package/dist/composite/layout/sticky-columns/index.d.ts

@@ -4,7 +4,7 @@ type TypeStickyProps = {
     isStickyLast?: boolean | null;
     topPosition?: string | null;
 };
-declare const _default: (element: TypeStickyProps) => {
+export declare const createCompositeLayoutStickyColumns: (element: TypeStickyProps) => {
     element: HTMLDivElement;
     styles: string;
     events: {
@@ -13,5 +13,5 @@ declare const _default: (element: TypeStickyProps) => {
         }) => void;
     };
 };
-export default _default;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/layout/sticky-columns/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/sticky-columns/index.ts"],"names":[],"mappings":"AAIA,KAAK,eAAe,GAAG;IACrB,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;yBA2Dc,SAAS,eAAe;;;;iCAMN;YAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;SAAE;;;AAN1D,wBA0CE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/sticky-columns/index.ts"],"names":[],"mappings":"AAIA,KAAK,eAAe,GAAG;IACrB,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;AAuGF,eAAO,MAAM,kCAAkC,YA5CF,eAAe;;;;iCAM1B;YAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;SAAE;;CAsCkB,CAAC"}

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

@@ -1,25 +1,6 @@
-"use strict";
-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) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const layout__namespace = /* @__PURE__ */ _interopNamespaceDefault(layout);
+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";
 const ATTRIBUTE_STICKY_LAST = "sticky-last";
 const ELEMENT_STICKY_CONTAINER = "sticky-columns-container";
@@ -28,14 +9,14 @@ const ELEMENT_STICKY_COLUMN = "sticky-column";
 const ELEMENT_STATIC_COLUMN = "static-column";
 const OVERWRITE_STICKY_LAST_STICKY = `.${ELEMENT_STICKY_CONTAINER}[${ATTRIBUTE_STICKY_LAST}] .${ELEMENT_STICKY_COLUMN}`;
 const OverwriteStickyLast = `
-  @media (min-width: ${token__namespace.media.breakpoints.highDef.min}) {
+  @media (min-width: ${token.media.breakpoints.highDef.min}) {
     ${OVERWRITE_STICKY_LAST_STICKY} {
        order: 2;
      }
   }
 `;
 const ColumnSticky = `
-  @media (min-width: ${token__namespace.media.breakpoints.highDef.min}) {
+  @media (min-width: ${token.media.breakpoints.highDef.min}) {
     .${ELEMENT_STICKY_COLUMN} {
       position: sticky;
       top: 32px;
@@ -47,9 +28,9 @@ const STYLES_STICKY_COLUMNS_ELEMENT = `
     container: ${ELEMENT_NAME} / inline-size;
   }
 
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`.${ELEMENT_STICKY_CONTAINER_WRAPPER}`]: layout__namespace.grid.gap.two
+    [`.${ELEMENT_STICKY_CONTAINER_WRAPPER}`]: layout.grid.gap.two
   }
 })}
 
@@ -58,7 +39,7 @@ const STYLES_STICKY_COLUMNS_ELEMENT = `
     grid-template-columns: 1fr;
   }
 
-  @media (min-width: ${token__namespace.media.breakpoints.highDef.min}) {
+  @media (min-width: ${token.media.breakpoints.highDef.min}) {
     .${ELEMENT_STICKY_CONTAINER_WRAPPER} {
       grid-template-columns: 1fr 1fr;
     }
@@ -67,7 +48,7 @@ const STYLES_STICKY_COLUMNS_ELEMENT = `
   ${ColumnSticky}
   ${OverwriteStickyLast}
 `;
-const index = (element) => {
+const CreateStickyColumnsElement = (element) => {
   const { stickyColumn, staticColumn, isStickyLast, topPosition } = element;
   const container = document.createElement("div");
   const wrapper = document.createElement("div");
@@ -103,5 +84,8 @@ const index = (element) => {
     }
   };
 };
-module.exports = index;
+const createCompositeLayoutStickyColumns = CreateStickyColumnsElement;
+export {
+  createCompositeLayoutStickyColumns
+};
 //# sourceMappingURL=index.js.map

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-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;;"}
+{"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\nconst CreateStickyColumnsElement = (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\nexport const createCompositeLayoutStickyColumns = CreateStickyColumnsElement;\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,MAAM,6BAA6B,CAAC,YAA6B;AAC/D,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;AAEO,MAAM,qCAAqC;"}

package/dist/composite/media/elements/caption.d.ts

@@ -2,12 +2,11 @@ export type TypeMediaCaptionRequirements = {
     caption: HTMLElement;
     isThemeDark?: boolean;
 };
-declare const _default: {
+export declare const createCompositeMediaCaption: {
     CreateElement: ({ caption, isThemeDark, }: TypeMediaCaptionRequirements) => HTMLElement;
     Styles: string;
     Elements: {
         container: string;
     };
 };
-export default _default;
 //# sourceMappingURL=caption.d.ts.map

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

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

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

@@ -1,45 +1,26 @@
-"use strict";
-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) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
+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";
 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 = `
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}`]: typography__namespace.sans.small
+    [`.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}`]: typography.sans.small
   }
 })}
 
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`${ELEMENT_MEDIA_CAPTIONS_CONTAINER} *`]: typography__namespace.sans.small
+    [`${ELEMENT_MEDIA_CAPTIONS_CONTAINER} *`]: typography.sans.small
   }
 })}
 
   .${ELEMENT_MEDIA_CAPTIONS_CONTAINER} {
-    margin-top: ${token__namespace.spacing.sm};
+    margin-top: ${token.spacing.sm};
     display: inline-block;
     text-align: left;
     opacity: 0;
@@ -48,12 +29,12 @@ const STYLES_MEDIA_CAPTIONS_ELEMENT = `
 
   .${ELEMENT_MEDIA_CAPTIONS_CONTAINER},
   .${ELEMENT_MEDIA_CAPTIONS_CONTAINER} > * {
-    color: ${token__namespace.color.gray.mediumAA};
+    color: ${token.color.gray.mediumAA};
   }
 
   ${OVERWRITE_CONTAINER_DARK},
   ${OVERWRITE_CONTAINER_DARK} * {
-    color: ${token__namespace.color.white};
+    color: ${token.color.white};
   }
 `;
 const CreateMediaInline = ({
@@ -64,12 +45,14 @@ const CreateMediaInline = ({
   if (isThemeDark) caption.setAttribute(ATTRIBUTE_THEME, ATTRIBUTE_THEME_DARK);
   return caption;
 };
-const CaptionContainer = {
+const createCompositeMediaCaption = {
   CreateElement: CreateMediaInline,
   Styles: STYLES_MEDIA_CAPTIONS_ELEMENT,
   Elements: {
     container: ELEMENT_MEDIA_CAPTIONS_CONTAINER
   }
 };
-module.exports = CaptionContainer;
+export {
+  createCompositeMediaCaption
+};
 //# sourceMappingURL=caption.js.map

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-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;;"}
+{"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 const createCompositeMediaCaption = {\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;AAEO,MAAM,8BAA8B;AAAA,EACzC,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,WAAW;AAAA,EAAA;AAEf;"}

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

@@ -1,4 +1,4 @@
-declare const _default: ({ image }: {
+export declare const createCompositeMediaGif: ({ image }: {
     image: HTMLImageElement;
 }) => {
     destroy: () => void;
@@ -7,5 +7,4 @@ declare const _default: ({ image }: {
     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,wBA4EE"}
+{"version":3,"file":"gif.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/elements/gif.ts"],"names":[],"mappings":"AAiFA,eAAO,MAAM,uBAAuB,cA9EC;IAAE,KAAK,EAAE,gBAAgB,CAAA;CAAE;;;;;;CA8ET,CAAC"}

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

@@ -1,34 +1,33 @@
-"use strict";
-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");
-require("@universityofmaryland/web-icons-library/communication");
-require("@universityofmaryland/web-icons-library/files");
-require("@universityofmaryland/web-icons-library/brand");
-require("@universityofmaryland/web-icons-library/arrows");
-require("../../../atomic/animations/actions/indicator.js");
-require("../../../atomic/animations/brand/chevron-scroll.js");
-require("../../../atomic/animations/brand/card-stack.js");
-const background = require("../../../atomic/assets/image/background.js");
-require("@universityofmaryland/web-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");
-const gif = ({ image }) => {
+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";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "@universityofmaryland/web-icons-library/arrows";
+import "../../../atomic/animations/actions/indicator.js";
+import "../../../atomic/animations/brand/chevron-scroll.js";
+import "../../../atomic/animations/brand/card-stack.js";
+import { createImageBackground } from "../../../atomic/assets/image/background.js";
+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.js";
+import "../../../atomic/layout/overlay/modal.js";
+import "../../../atomic/layout/person/columns.js";
+import "@universityofmaryland/web-icons-library/social";
+import "../../../atomic/text-lockup/date.js";
+import "../../../atomic/text-lockup/small.js";
+const CreateGifElement = ({ image }) => {
   const container = document.createElement("div");
   const calculateHeight = () => {
     if (!image.naturalWidth || !image.naturalHeight) return;
@@ -63,7 +62,7 @@ const gif = ({ image }) => {
   setTimeout(() => {
     resizeObserver.observe(container);
   }, 0);
-  const imageElement = background({
+  const imageElement = createImageBackground({
     element: image,
     isShowCaption: true,
     isScaled: false,
@@ -74,7 +73,7 @@ const gif = ({ image }) => {
       display: "block"
     }
   });
-  const elementModel = new webBuilderLibrary.ElementBuilder(container).withClassName("media-gif").withChild(imageElement).withStyles({
+  const elementModel = new ElementBuilder(container).withClassName("media-gif").withChild(imageElement).withStyles({
     element: {
       maxHeight: "100%",
       maxWidth: "100%",
@@ -91,5 +90,8 @@ const gif = ({ image }) => {
     }
   };
 };
-module.exports = gif;
+const createCompositeMediaGif = CreateGifElement;
+export {
+  createCompositeMediaGif
+};
 //# sourceMappingURL=gif.js.map

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

@@ -1 +1 @@
-{"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;;"}
+{"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\nconst CreateGifElement = ({ 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\nexport const createCompositeMediaGif = CreateGifElement;\n"],"names":["containerWidth","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAM,mBAAmB,CAAC,EAAE,YAAyC;AACnE,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,sBAAwB;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,IAAI,eAAe,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;AAEO,MAAM,0BAA0B;"}

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

@@ -1,3 +1,3 @@
-export { default as caption } from './caption';
-export { default as gif } from './gif';
+export { createCompositeMediaCaption as caption } from './caption';
+export { createCompositeMediaGif as gif } from './gif';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/elements/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/elements/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AACnE,OAAO,EAAE,uBAAuB,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC"}

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

@@ -1,7 +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;
+import { createCompositeMediaCaption } from "./caption.js";
+import { createCompositeMediaGif } from "./gif.js";
+export {
+  createCompositeMediaCaption as caption,
+  createCompositeMediaGif as gif
+};
 //# sourceMappingURL=index.js.map

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

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

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

@@ -1,3 +1,3 @@
 export * as elements from './elements';
-export { default as inline } from './inline';
+export { createCompositeMediaInline as inline } from './inline';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/media/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/media/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,0BAA0B,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}