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

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

@@ -1,193 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import * as typography from "@universityofmaryland/web-styles-library/typography";
-import * as Styles from "@universityofmaryland/web-styles-library";
-import { theme } from "@universityofmaryland/web-utilities-library/theme";
-const ANIMATION_CONFIGS = {
-  line: `
-    @keyframes intro-line {
-      from {
-        height: 0;
-        transform: translateY(${token.spacing.lg});
-      }
-      to {
-        height: ${token.spacing["4xl"]};
-        transform: translateY(0);
-      }
-    }
-  `,
-  fadeIn: `
-    @keyframes intro-fade-in {
-      from {
-        opacity: 0;
-        transform: translateY(100px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-  `
-};
-const createHeadline = (props) => {
-  const { headline, isThemeDark } = props;
-  if (!headline) return null;
-  return new ElementBuilder(headline).styled(
-    Styles.typography.sans.compose("largest", {
-      theme: theme.fontColor(isThemeDark)
-    })
-  ).withStyles({
-    element: {
-      fontWeight: 800,
-      textTransform: "uppercase"
-    }
-  }).build();
-};
-const createText = (props) => {
-  const { text, headline, isThemeDark } = props;
-  const simpleRichTextOptions = {
-    size: "large",
-    theme: theme.fontColor(isThemeDark)
-  };
-  if (!text) return null;
-  if (!headline) simpleRichTextOptions.size = "largest";
-  return new ElementBuilder(text).styled(Styles.element.text.rich.composeSimple(simpleRichTextOptions)).withStyles({
-    element: {
-      [`* + &`]: {
-        marginTop: token.spacing.sm
-      },
-      [`&, & > *`]: {
-        ...!headline && {
-          ...typography.sans.transformations.largerBold,
-          color: token.color.black,
-          ...isThemeDark && {
-            color: token.color.white
-          }
-        }
-      }
-    }
-  }).build();
-};
-const createActions = (props) => {
-  const { actions } = props;
-  if (!actions) return null;
-  return new ElementBuilder(actions).styled(Styles.layout.grid.inline.tabletRows).withStyles({
-    element: {
-      justifyContent: "center",
-      alignItems: "center",
-      [`* + &`]: {
-        marginTop: token.spacing.md
-      }
-    }
-  }).build();
-};
-const createTextContainer = (props) => {
-  const { headline, text, actions, includesAnimation, isThemeDark } = props;
-  const headlineElement = createHeadline({ headline, isThemeDark });
-  const textElement = createText({ text, headline, isThemeDark });
-  const actionsElement = createActions({ actions });
-  const container = new ElementBuilder().withClassName("intro-default-container-text").withStyles({
-    element: {
-      ...includesAnimation && {
-        opacity: 0
-      },
-      [".intro-default-animated &"]: {
-        transform: "translateY(100px)",
-        animation: "intro-fade-in 1s forwards",
-        animationDelay: "0.2s"
-      },
-      [`&:before`]: {
-        ...includesAnimation && {
-          height: 0,
-          transform: `translateY(${token.spacing.lg})`
-        }
-      }
-    }
-  });
-  if (headlineElement) {
-    container.withChild(headlineElement);
-  }
-  if (textElement) {
-    container.withChild(textElement);
-  }
-  if (actionsElement) {
-    container.withChild(actionsElement);
-  }
-  return container.build();
-};
-const createWrapper = (props) => {
-  const textContainerElement = createTextContainer(props);
-  return new ElementBuilder().withClassName("intro-default-container-wrapper").withChild(textContainerElement).withStyles({
-    element: {
-      textAlign: "center"
-    }
-  }).build();
-};
-const createContainer = (props) => {
-  const { isThemeDark, hasSeparator, includesAnimation } = props;
-  const wrapperElement = createWrapper(props);
-  return new ElementBuilder().withClassName("intro-default-container").withChild(wrapperElement).withStyles({
-    element: {
-      maxWidth: token.spacing.maxWidth.small,
-      margin: "0 auto",
-      ...hasSeparator && {
-        paddingTop: token.spacing["6xl"],
-        position: "relative"
-      },
-      [`&:before`]: {
-        ...hasSeparator && {
-          content: '""',
-          backgroundColor: token.color.red,
-          position: "absolute",
-          height: token.spacing["4xl"],
-          width: "2px",
-          left: "calc(50% - 1px)",
-          top: 0
-        }
-      },
-      ["&.intro-default-animated:before"]: {
-        ...includesAnimation && {
-          animation: "intro-line 1.2s forwards"
-        }
-      }
-    }
-  }).build();
-};
-const setupAnimation = (props) => {
-  const { includesAnimation, container } = props;
-  if (!includesAnimation) return;
-  const animation = (entries, observer2) => {
-    entries.map((entry) => {
-      const target = entry.target;
-      if (entry.isIntersecting) {
-        target.classList.add("intro-default-animated");
-        observer2.unobserve(target);
-      }
-    });
-  };
-  const observer = new IntersectionObserver(animation, {
-    root: null,
-    rootMargin: "0px",
-    threshold: [0.35]
-  });
-  observer.observe(container);
-};
-const small = (props) => {
-  const containerElement = createContainer(props);
-  const loadAnimation = () => setupAnimation({
-    includesAnimation: props.includesAnimation,
-    container: containerElement.element
-  });
-  if (props.includesAnimation) {
-    containerElement.styles += ANIMATION_CONFIGS.line;
-    containerElement.styles += ANIMATION_CONFIGS.fadeIn;
-  }
-  return {
-    ...containerElement,
-    events: { loadAnimation }
-  };
-};
-export {
-  small as default
-};
-//# sourceMappingURL=small.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"small.mjs","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":["observer"],"mappings":"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"}

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

@@ -1,61 +0,0 @@
-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 ElementBuilder(headline).styled(
-    Styles.typography.sans.compose("largest", {
-      theme: theme.fontColor(isThemeDark)
-    })
-  ).withStyles({
-    element: {
-      fontWeight: 800,
-      textTransform: "uppercase"
-    }
-  }).build();
-};
-const createActions = (props) => {
-  const { actions } = props;
-  if (!actions) return null;
-  return new ElementBuilder(actions).withClassName("intro-wide-actions").withStyles({
-    element: {
-      display: "block",
-      [`@container (max-width: ${TABLET - 1}px)`]: {
-        [`* + &`]: { marginTop: token.spacing.md }
-      }
-    }
-  }).build();
-};
-const createWrapper = (props) => {
-  const { headline, actions, isThemeDark } = props;
-  const headlineElement = createHeadline({ headline, isThemeDark });
-  const actionsElement = createActions({ actions });
-  const wrapper = new ElementBuilder().withClassName("intro-wide-container-wrapper").withStyles({
-    element: {
-      [`@container (min-width: ${TABLET}px)`]: {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center"
-      }
-    }
-  });
-  if (headlineElement) {
-    wrapper.withChild(headlineElement);
-  }
-  if (actionsElement) {
-    wrapper.withChild(actionsElement);
-  }
-  return wrapper.build();
-};
-const createContainer = (props) => {
-  const wrapperElement = createWrapper(props);
-  return new ElementBuilder().withClassName("intro-wide-container").withChild(wrapperElement).build();
-};
-const wide = (props) => createContainer(props);
-export {
-  wide as default
-};
-//# sourceMappingURL=wide.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"wide.mjs","sources":["../../../../source/composite/layout/section-intro/wide.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type ElementModel } from '../../../_types';\n\nexport interface SectionIntroWideProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n}\n\nconst TABLET = 500;\n\nconst createHeadline = (\n  props: Pick<SectionIntroWideProps, 'headline' | 'isThemeDark'>,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark } = props;\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.sans.compose('largest', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    })\n    .build();\n};\n\nconst createActions = (\n  props: Pick<SectionIntroWideProps, 'actions'>,\n): ElementModel<HTMLElement> | null => {\n  const { actions } = props;\n  if (!actions) return null;\n\n  return new ElementBuilder(actions)\n    .withClassName('intro-wide-actions')\n    .withStyles({\n      element: {\n        display: 'block',\n\n        [`@container (max-width: ${TABLET - 1}px)`]: {\n          [`* + &`]: { marginTop: token.spacing.md },\n        },\n      },\n    })\n    .build();\n};\n\nconst createWrapper = (\n  props: Pick<SectionIntroWideProps, 'headline' | 'actions' | 'isThemeDark'>,\n): ElementModel<HTMLElement> => {\n  const { headline, actions, isThemeDark } = props;\n  const headlineElement = createHeadline({ headline, isThemeDark });\n  const actionsElement = createActions({ actions });\n\n  const wrapper = new ElementBuilder()\n    .withClassName('intro-wide-container-wrapper')\n    .withStyles({\n      element: {\n        [`@container (min-width: ${TABLET}px)`]: {\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n        },\n      },\n    });\n\n  if (headlineElement) {\n    wrapper.withChild(headlineElement);\n  }\n\n  if (actionsElement) {\n    wrapper.withChild(actionsElement);\n  }\n\n  return wrapper.build();\n};\n\nconst createContainer = (\n  props: Pick<SectionIntroWideProps, 'isThemeDark' | 'headline' | 'actions'>,\n): ElementModel<HTMLElement> => {\n  const wrapperElement = createWrapper(props);\n\n  return new ElementBuilder()\n    .withClassName('intro-wide-container')\n    .withChild(wrapperElement)\n    .build();\n};\n\nexport default (props: SectionIntroWideProps) => createContainer(props);\n"],"names":[],"mappings":";;;;AAYA,MAAM,SAAS;AAEf,MAAM,iBAAiB,CACrB,UACqC;AACrC,QAAM,EAAE,UAAU,YAAA,IAAgB;AAClC,MAAI,CAAC,SAAU,QAAO;AAEtB,SAAO,IAAI,eAAe,QAAQ,EAC/B;AAAA,IACC,OAAO,WAAW,KAAK,QAAQ,WAAW;AAAA,MACxC,OAAO,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,eAAe;AAAA,IAAA;AAAA,EACjB,CACD,EACA,MAAA;AACL;AAEA,MAAM,gBAAgB,CACpB,UACqC;AACrC,QAAM,EAAE,YAAY;AACpB,MAAI,CAAC,QAAS,QAAO;AAErB,SAAO,IAAI,eAAe,OAAO,EAC9B,cAAc,oBAAoB,EAClC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MAET,CAAC,0BAA0B,SAAS,CAAC,KAAK,GAAG;AAAA,QAC3C,CAAC,OAAO,GAAG,EAAE,WAAW,MAAM,QAAQ,GAAA;AAAA,MAAG;AAAA,IAC3C;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,gBAAgB,CACpB,UAC8B;AAC9B,QAAM,EAAE,UAAU,SAAS,YAAA,IAAgB;AAC3C,QAAM,kBAAkB,eAAe,EAAE,UAAU,aAAa;AAChE,QAAM,iBAAiB,cAAc,EAAE,SAAS;AAEhD,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,QACvC,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,CACD;AAEH,MAAI,iBAAiB;AACnB,YAAQ,UAAU,eAAe;AAAA,EACnC;AAEA,MAAI,gBAAgB;AAClB,YAAQ,UAAU,cAAc;AAAA,EAClC;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEA,MAAM,kBAAkB,CACtB,UAC8B;AAC9B,QAAM,iBAAiB,cAAc,KAAK;AAE1C,SAAO,IAAI,iBACR,cAAc,sBAAsB,EACpC,UAAU,cAAc,EACxB,MAAA;AACL;AAEA,MAAA,OAAe,CAAC,UAAiC,gBAAgB,KAAK;"}

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

@@ -1,90 +0,0 @@
-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";
-const ELEMENT_STICKY_CONTAINER_WRAPPER = "sticky-columns-container-wrapper";
-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.media.breakpoints.highDef.min}) {
-    ${OVERWRITE_STICKY_LAST_STICKY} {
-       order: 2;
-     }
-  }
-`;
-const ColumnSticky = `
-  @media (min-width: ${token.media.breakpoints.highDef.min}) {
-    .${ELEMENT_STICKY_COLUMN} {
-      position: sticky;
-      top: 32px;
-    }
-  }
-`;
-const STYLES_STICKY_COLUMNS_ELEMENT = `
-  .${ELEMENT_STICKY_CONTAINER} {
-    container: ${ELEMENT_NAME} / inline-size;
-  }
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_STICKY_CONTAINER_WRAPPER}`]: layout.grid.gap.two
-  }
-})}
-
-  .${ELEMENT_STICKY_CONTAINER_WRAPPER} {
-    align-items: start;
-    grid-template-columns: 1fr;
-  }
-
-  @media (min-width: ${token.media.breakpoints.highDef.min}) {
-    .${ELEMENT_STICKY_CONTAINER_WRAPPER} {
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
-  ${ColumnSticky}
-  ${OverwriteStickyLast}
-`;
-const index = (element) => {
-  const { stickyColumn, staticColumn, isStickyLast, topPosition } = element;
-  const container = document.createElement("div");
-  const wrapper = document.createElement("div");
-  const stickyElement = document.createElement("div");
-  const setPosition = ({ value }) => {
-    if (value) {
-      stickyElement.style.top = value;
-    } else {
-      stickyElement.style.removeProperty("top");
-    }
-  };
-  if (isStickyLast) container.setAttribute(ATTRIBUTE_STICKY_LAST, "");
-  container.classList.add(ELEMENT_STICKY_CONTAINER);
-  wrapper.classList.add(ELEMENT_STICKY_CONTAINER_WRAPPER);
-  if (stickyColumn) {
-    stickyElement.classList.add(ELEMENT_STICKY_COLUMN);
-    stickyElement.appendChild(stickyColumn);
-    wrapper.appendChild(stickyElement);
-  }
-  if (staticColumn) {
-    staticColumn.classList.add(ELEMENT_STATIC_COLUMN);
-    wrapper.appendChild(staticColumn);
-  }
-  container.appendChild(wrapper);
-  if (topPosition) {
-    setPosition({ value: topPosition });
-  }
-  return {
-    element: container,
-    styles: STYLES_STICKY_COLUMNS_ELEMENT,
-    events: {
-      setPosition
-    }
-  };
-};
-export {
-  index as default
-};
-//# sourceMappingURL=index.mjs.map

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

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

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

@@ -1,58 +0,0 @@
-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 = `
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_MEDIA_CAPTIONS_CONTAINER}`]: typography.sans.small
-  }
-})}
-
-  ${jssToCSS({
-  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

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

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

@@ -1,96 +0,0 @@
-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.mjs";
-import "../../../atomic/animations/brand/chevron-scroll.mjs";
-import "../../../atomic/animations/brand/card-stack.mjs";
-import imageContainer from "../../../atomic/assets/image/background.mjs";
-import "@universityofmaryland/web-styles-library";
-import "@universityofmaryland/web-utilities-library/performance";
-import "@universityofmaryland/web-utilities-library/accessibility";
-import "@universityofmaryland/web-icons-library/location";
-import "@universityofmaryland/web-icons-library/calendar";
-import "@universityofmaryland/web-utilities-library/theme";
-import "../../../atomic/layout/block/stacked.mjs";
-import "../../../atomic/layout/overlay/modal.mjs";
-import "../../../atomic/layout/person/columns.mjs";
-import "@universityofmaryland/web-icons-library/social";
-import "../../../atomic/text-lockup/date.mjs";
-import "../../../atomic/text-lockup/small.mjs";
-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`;
-    } else {
-      container.style.width = `${image.naturalWidth}px`;
-      setTimeout(() => {
-        const containerWidth2 = container.offsetWidth;
-        const calculatedHeight = Math.round(containerWidth2 * aspectRatio);
-        container.style.height = `${calculatedHeight}px`;
-      }, 100);
-    }
-  };
-  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 imageElement = imageContainer({
-    element: image,
-    isShowCaption: true,
-    isScaled: false,
-    isGifAllowed: true,
-    customStyles: {
-      width: "auto",
-      height: "100%",
-      display: "block"
-    }
-  });
-  const elementModel = new ElementBuilder(container).withClassName("media-gif").withChild(imageElement).withStyles({
-    element: {
-      maxHeight: "100%",
-      maxWidth: "100%",
-      position: "relative",
-      display: "block",
-      overflow: "hidden"
-    }
-  }).build();
-  return {
-    ...elementModel,
-    destroy: () => {
-      resizeObserver.disconnect();
-      image.removeEventListener("load", calculateHeight);
-    }
-  };
-};
-export {
-  gif as default
-};
-//# sourceMappingURL=gif.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"gif.mjs","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"],"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,eAAwB;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;"}

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

@@ -1,7 +0,0 @@
-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

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

package/dist/composite/media/index.mjs

@@ -1,7 +0,0 @@
-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

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