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

package/dist/composite/hero/standard.js

@@ -1,54 +1,34 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const elementStyles = require("@universityofmaryland/web-styles-library/element");
-const Styles = require("@universityofmaryland/web-styles-library");
-const theme = require("@universityofmaryland/web-utilities-library/theme");
-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-utilities-library/performance");
-const placeholder = require("../../atomic/assets/image/placeholder.js");
-const observedAutoPlay = require("../../atomic/assets/video/observed-auto-play.js");
-require("@universityofmaryland/web-icons-library/location");
-require("@universityofmaryland/web-icons-library/calendar");
-require("../../atomic/layout/block/stacked.js");
-require("../../atomic/layout/overlay/modal.js");
-require("../../atomic/layout/person/columns.js");
-require("@universityofmaryland/web-icons-library/social");
-require("../../atomic/text-lockup/date.js");
-const large = require("../../atomic/text-lockup/large.js");
-require("../../atomic/text-lockup/small.js");
-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 elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
+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-utilities-library/performance";
+import { imagePlaceholder } from "../../atomic/assets/image/placeholder.js";
+import { createVideoObservedAutoPlay } from "../../atomic/assets/video/observed-auto-play.js";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
+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 { createTextLockupLarge } from "../../atomic/text-lockup/large.js";
+import "../../atomic/text-lockup/small.js";
 const ANIMATION_CONFIG = {
   SLIDE_UP: {
     DURATION: "1s",
@@ -92,13 +72,13 @@ const keyFrameHeroScaleDown = `
   }
 `;
 const createVideoAsset = (video) => {
-  return observedAutoPlay({
+  return createVideoObservedAutoPlay({
     video,
     isScaled: true
   });
 };
 const createImageAsset = (image) => {
-  return background({
+  return createImageBackground({
     element: image,
     isScaled: true,
     isGifAllowed: true,
@@ -117,17 +97,17 @@ const buildAssetChildren = ({
     children.push(createImageAsset(image));
   }
   if (!image && !video) {
-    children.push(placeholder.fearlessForward());
+    children.push(imagePlaceholder.fearlessForward());
   }
   return children;
 };
 const buildAssetStyles = (includesAnimation) => {
   return {
     element: {
-      [`@container (${token__namespace.media.queries.large.max})`]: {
+      [`@container (${token.media.queries.large.max})`]: {
         aspectRatio: "16 / 9"
       },
-      [`@container (${token__namespace.media.queries.tablet.min})`]: {
+      [`@container (${token.media.queries.tablet.min})`]: {
         position: "absolute",
         top: 0,
         left: 0,
@@ -136,7 +116,7 @@ const buildAssetStyles = (includesAnimation) => {
         overflow: "hidden"
       },
       [`&:before`]: {
-        [`@container (${token__namespace.media.queries.tablet.min})`]: {
+        [`@container (${token.media.queries.tablet.min})`]: {
           content: '""',
           position: "absolute",
           top: 0,
@@ -164,26 +144,26 @@ const createAsset = ({
 }) => {
   const children = buildAssetChildren({ image, video });
   const elementStyles2 = buildAssetStyles(includesAnimation);
-  return new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-default__asset").withChildren(...children).withStyles(elementStyles2).build();
+  return new ElementBuilder().withClassName("umd-hero-default__asset").withChildren(...children).withStyles(elementStyles2).build();
 };
 const createHeadline = (props) => {
   const { headline, isHeightSmall, isTextCenter, isThemeDark } = props;
   const characterCount = headline?.textContent?.trim().length || 0;
   const isOverwriteHeadline = characterCount > 10 && isHeightSmall;
   if (!headline) return null;
-  return new webBuilderLibrary.ElementBuilder(headline).styled(
-    Styles__namespace.typography.campaign.compose("extralarge", {
-      theme: theme.theme.fontColor(isThemeDark)
+  return new ElementBuilder(headline).styled(
+    Styles.typography.campaign.compose("extralarge", {
+      theme: theme.fontColor(isThemeDark)
     })
   ).withStyles({
     element: {
       textTransform: "uppercase",
-      [`@media (${token__namespace.media.queries.tablet.min})`]: {
+      [`@media (${token.media.queries.tablet.min})`]: {
         maxWidth: "700px",
-        color: token__namespace.color.white,
+        color: token.color.white,
         ...isTextCenter && { marginLeft: "auto", marginRight: "auto" }
       },
-      [`@media (${token__namespace.media.queries.desktop.min})`]: {
+      [`@media (${token.media.queries.desktop.min})`]: {
         maxWidth: "816px",
         ...isOverwriteHeadline && { fontSize: "80px" }
       }
@@ -192,7 +172,7 @@ const createHeadline = (props) => {
       color: "currentColor"
     },
     siblingAfter: {
-      marginTop: token__namespace.spacing.sm
+      marginTop: token.spacing.sm
     }
   }).build();
 };
@@ -202,14 +182,14 @@ const createText = (props) => {
     isHeightSmall = false,
     includesAnimation
   } = props;
-  const text = large({
+  const text = createTextLockupLarge({
     headlineComposite: createHeadline(props),
     ribbon: props.eyebrow,
     textLargest: props.text,
     actions: props.actions,
     isThemeDark: true
   });
-  const textContainer = new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-default__text").withChild(text).withStyles({
+  const textContainer = new ElementBuilder().withClassName("umd-hero-default__text").withChild(text).withStyles({
     element: {
       display: "flex",
       alignItems: "flex-end",
@@ -224,10 +204,10 @@ const createText = (props) => {
       ...includesAnimation && {
         animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`
       },
-      [`@container (${token__namespace.media.queries.tablet.min})`]: {
+      [`@container (${token.media.queries.tablet.min})`]: {
         maxWidth: "736px",
-        paddingTop: `${token__namespace.spacing["2xl"]}`,
-        paddingBottom: `${token__namespace.spacing["2xl"]}`,
+        paddingTop: `${token.spacing["2xl"]}`,
+        paddingBottom: `${token.spacing["2xl"]}`,
         ...!isTextCenter && {
           width: "80%"
         },
@@ -237,20 +217,20 @@ const createText = (props) => {
           display: "flex"
         }
       },
-      [`@container (${token__namespace.media.queries.desktop.min})`]: {
+      [`@container (${token.media.queries.desktop.min})`]: {
         maxWidth: "808px"
       }
     }
   }).build();
-  return new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.space.horizontal.larger).withChild(textContainer).withStyles({
+  return new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(textContainer).withStyles({
     element: {
       height: "100%",
       width: "100%",
       position: "relative",
       zIndex: 99,
-      [`@container (${token__namespace.media.queries.tablet.max})`]: {
-        paddingTop: `${token__namespace.spacing.sm}`,
-        [`&:has(.${elementStyles__namespace.text.decoration.ribbon.className})`]: {
+      [`@container (${token.media.queries.tablet.max})`]: {
+        paddingTop: `${token.spacing.sm}`,
+        [`&:has(.${elementStyles.text.decoration.ribbon.className})`]: {
           paddingTop: `0`,
           marginTop: "-14px"
         }
@@ -258,40 +238,40 @@ const createText = (props) => {
     }
   }).build();
 };
-const standard = (props) => {
+const createCompositeHeroStandard = (props) => {
   const { isHeightSmall, isThemeDark } = props;
   const asset = createAsset(props);
   const text = createText(props);
-  const composite = new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-default").withChildren(asset, text).withStyles({
+  const composite = new ElementBuilder().withClassName("umd-hero-default").withChildren(asset, text).withStyles({
     element: {
       position: "relative",
       overflow: "hidden",
       containerType: "inline-size",
       ...isThemeDark && {
-        backgroundColor: token__namespace.color.black
+        backgroundColor: token.color.black
       },
-      [`@container (${token__namespace.media.queries.large.max})`]: {
+      [`@container (${token.media.queries.large.max})`]: {
         ...isThemeDark && {
-          paddingBottom: `${token__namespace.spacing.md}`
+          paddingBottom: `${token.spacing.md}`
         }
       },
-      [`@container (${token__namespace.media.queries.tablet.min})`]: {
+      [`@container (${token.media.queries.tablet.min})`]: {
         ...!isHeightSmall && {
           height: "75vh",
           minHeight: "480px"
         }
       },
-      [`@container (${token__namespace.media.queries.desktop.min})`]: {
+      [`@container (${token.media.queries.desktop.min})`]: {
         ...!isHeightSmall && {
           minHeight: "720px"
         }
       }
     },
     subElement: {
-      [`@container (${token__namespace.media.queries.large.max})`]: {
-        [`*:not(.${elementStyles__namespace.asset.image.caption.className})`]: {
+      [`@container (${token.media.queries.large.max})`]: {
+        [`*:not(.${elementStyles.asset.image.caption.className})`]: {
           ...!isThemeDark && {
-            color: `${token__namespace.color.black} !important`
+            color: `${token.color.black} !important`
           }
         }
       }
@@ -301,5 +281,7 @@ const standard = (props) => {
   composite.styles += keyFrameHeroSlideUp;
   return composite;
 };
-module.exports = standard;
+export {
+  createCompositeHeroStandard
+};
 //# sourceMappingURL=standard.js.map

package/dist/composite/hero/standard.js.map

@@ -1 +1 @@
-{"version":3,"file":"standard.js","sources":["../../../source/composite/hero/standard.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { type HeroStandardProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst ANIMATION_CONFIG = {\n  SLIDE_UP: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n  SCALE_DOWN: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n} as const;\n\nconst keyFrameHeroSlideUp = `\n  @keyframes hero-slide-up {\n    from {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst keyFrameHeroScaleDown = `\n  @keyframes hero-scale-down {\n    from {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.TO};\n    }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n};\n\nconst buildAssetChildren = ({\n  image,\n  video,\n}: Pick<HeroStandardProps, 'image' | 'video'>): ElementModel<HTMLElement>[] => {\n  const children: ElementModel<HTMLElement>[] = [];\n\n  if (video) {\n    children.push(createVideoAsset(video));\n  }\n\n  if (image && !video) {\n    children.push(createImageAsset(image));\n  }\n\n  if (!image && !video) {\n    children.push(assets.image.placeholder.fearlessForward());\n  }\n\n  return children;\n};\n\nconst buildAssetStyles = (includesAnimation?: boolean) => {\n  return {\n    element: {\n      [`@container (${token.media.queries.large.max})`]: {\n        aspectRatio: '16 / 9',\n      },\n\n      [`@container (${token.media.queries.tablet.min})`]: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        overflow: 'hidden',\n      },\n\n      [`&:before`]: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 85%)',\n          zIndex: '99',\n        },\n      },\n\n      ['& img']: {\n        ...(includesAnimation && {\n          [`@media (prefers-reduced-motion: no-preference)`]: {\n            animation: `hero-scale-down forwards ${ANIMATION_CONFIG.SCALE_DOWN.DURATION}`,\n          },\n        }),\n      },\n    },\n  };\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroStandardProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n  const elementStyles = buildAssetStyles(includesAnimation);\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-default__asset')\n    .withChildren(...children)\n    .withStyles(elementStyles)\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroStandardProps,\n    'headline' | 'isHeightSmall' | 'isThemeDark' | 'isTextCenter'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isHeightSmall, isTextCenter, isThemeDark } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 10 && isHeightSmall;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.campaign.compose('extralarge', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          maxWidth: '700px',\n          color: token.color.white,\n\n          ...(isTextCenter && { marginLeft: 'auto', marginRight: 'auto' }),\n        },\n\n        [`@media (${token.media.queries.desktop.min})`]: {\n          maxWidth: '816px',\n          ...(isOverwriteHeadline && { fontSize: '80px' }),\n        },\n      },\n      subElement: {\n        color: 'currentColor',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n};\n\nconst createText = (props: HeroStandardProps) => {\n  const {\n    isTextCenter = false,\n    isHeightSmall = false,\n    includesAnimation,\n  } = props;\n\n  const text = textLockup.large({\n    headlineComposite: createHeadline(props),\n    ribbon: props.eyebrow,\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  const textContainer = new ElementBuilder()\n    .withClassName('umd-hero-default__text')\n    .withChild(text)\n    .withStyles({\n      element: {\n        display: 'flex',\n        alignItems: 'flex-end',\n        height: '100%',\n\n        ...(isTextCenter && {\n          textAlign: 'center',\n          justifyContent: 'center',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n          maxWidth: '928px',\n        }),\n\n        ...(includesAnimation && {\n          animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n        }),\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          maxWidth: '736px',\n          paddingTop: `${token.spacing['2xl']}`,\n          paddingBottom: `${token.spacing['2xl']}`,\n          ...(!isTextCenter && {\n            width: '80%',\n          }),\n          ...(isHeightSmall && {\n            minHeight: '400px',\n            alignItems: 'flex-end',\n            display: 'flex',\n          }),\n        },\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          maxWidth: '808px',\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContainer)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n        zIndex: 99,\n\n        [`@container (${token.media.queries.tablet.max})`]: {\n          paddingTop: `${token.spacing.sm}`,\n\n          [`&:has(.${elementStyles.text.decoration.ribbon.className})`]: {\n            paddingTop: `0`,\n            marginTop: '-14px',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nexport default (props: HeroStandardProps) => {\n  const { isHeightSmall, isThemeDark } = props;\n  const asset = createAsset(props);\n  const text = createText(props);\n\n  const composite = new ElementBuilder()\n    .withClassName('umd-hero-default')\n    .withChildren(asset, text)\n    .withStyles({\n      element: {\n        position: 'relative',\n        overflow: 'hidden',\n        containerType: 'inline-size',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.black,\n        }),\n\n        [`@container (${token.media.queries.large.max})`]: {\n          ...(isThemeDark && {\n            paddingBottom: `${token.spacing.md}`,\n          }),\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          ...(!isHeightSmall && {\n            height: '75vh',\n            minHeight: '480px',\n          }),\n        },\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(!isHeightSmall && {\n            minHeight: '720px',\n          }),\n        },\n      },\n      subElement: {\n        [`@container (${token.media.queries.large.max})`]: {\n          [`*:not(.${elementStyles.asset.image.caption.className})`]: {\n            ...(!isThemeDark && {\n              color: `${token.color.black} !important`,\n            }),\n          },\n        },\n      },\n    })\n    .build();\n\n  composite.styles += keyFrameHeroScaleDown;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","token","elementStyles","ElementBuilder","Styles","theme","textLockup.large"],"mappings":"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"}
+{"version":3,"file":"standard.js","sources":["../../../source/composite/hero/standard.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { type HeroStandardProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst ANIMATION_CONFIG = {\n  SLIDE_UP: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n  SCALE_DOWN: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n} as const;\n\nconst keyFrameHeroSlideUp = `\n  @keyframes hero-slide-up {\n    from {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst keyFrameHeroScaleDown = `\n  @keyframes hero-scale-down {\n    from {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.TO};\n    }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n};\n\nconst buildAssetChildren = ({\n  image,\n  video,\n}: Pick<HeroStandardProps, 'image' | 'video'>): ElementModel<HTMLElement>[] => {\n  const children: ElementModel<HTMLElement>[] = [];\n\n  if (video) {\n    children.push(createVideoAsset(video));\n  }\n\n  if (image && !video) {\n    children.push(createImageAsset(image));\n  }\n\n  if (!image && !video) {\n    children.push(assets.image.placeholder.fearlessForward());\n  }\n\n  return children;\n};\n\nconst buildAssetStyles = (includesAnimation?: boolean) => {\n  return {\n    element: {\n      [`@container (${token.media.queries.large.max})`]: {\n        aspectRatio: '16 / 9',\n      },\n\n      [`@container (${token.media.queries.tablet.min})`]: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        overflow: 'hidden',\n      },\n\n      [`&:before`]: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 85%)',\n          zIndex: '99',\n        },\n      },\n\n      ['& img']: {\n        ...(includesAnimation && {\n          [`@media (prefers-reduced-motion: no-preference)`]: {\n            animation: `hero-scale-down forwards ${ANIMATION_CONFIG.SCALE_DOWN.DURATION}`,\n          },\n        }),\n      },\n    },\n  };\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroStandardProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n  const elementStyles = buildAssetStyles(includesAnimation);\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-default__asset')\n    .withChildren(...children)\n    .withStyles(elementStyles)\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroStandardProps,\n    'headline' | 'isHeightSmall' | 'isThemeDark' | 'isTextCenter'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isHeightSmall, isTextCenter, isThemeDark } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 10 && isHeightSmall;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.campaign.compose('extralarge', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          maxWidth: '700px',\n          color: token.color.white,\n\n          ...(isTextCenter && { marginLeft: 'auto', marginRight: 'auto' }),\n        },\n\n        [`@media (${token.media.queries.desktop.min})`]: {\n          maxWidth: '816px',\n          ...(isOverwriteHeadline && { fontSize: '80px' }),\n        },\n      },\n      subElement: {\n        color: 'currentColor',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n};\n\nconst createText = (props: HeroStandardProps) => {\n  const {\n    isTextCenter = false,\n    isHeightSmall = false,\n    includesAnimation,\n  } = props;\n\n  const text = textLockup.large({\n    headlineComposite: createHeadline(props),\n    ribbon: props.eyebrow,\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  const textContainer = new ElementBuilder()\n    .withClassName('umd-hero-default__text')\n    .withChild(text)\n    .withStyles({\n      element: {\n        display: 'flex',\n        alignItems: 'flex-end',\n        height: '100%',\n\n        ...(isTextCenter && {\n          textAlign: 'center',\n          justifyContent: 'center',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n          maxWidth: '928px',\n        }),\n\n        ...(includesAnimation && {\n          animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n        }),\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          maxWidth: '736px',\n          paddingTop: `${token.spacing['2xl']}`,\n          paddingBottom: `${token.spacing['2xl']}`,\n          ...(!isTextCenter && {\n            width: '80%',\n          }),\n          ...(isHeightSmall && {\n            minHeight: '400px',\n            alignItems: 'flex-end',\n            display: 'flex',\n          }),\n        },\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          maxWidth: '808px',\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContainer)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n        zIndex: 99,\n\n        [`@container (${token.media.queries.tablet.max})`]: {\n          paddingTop: `${token.spacing.sm}`,\n\n          [`&:has(.${elementStyles.text.decoration.ribbon.className})`]: {\n            paddingTop: `0`,\n            marginTop: '-14px',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nexport const createCompositeHeroStandard = (props: HeroStandardProps) => {\n  const { isHeightSmall, isThemeDark } = props;\n  const asset = createAsset(props);\n  const text = createText(props);\n\n  const composite = new ElementBuilder()\n    .withClassName('umd-hero-default')\n    .withChildren(asset, text)\n    .withStyles({\n      element: {\n        position: 'relative',\n        overflow: 'hidden',\n        containerType: 'inline-size',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.black,\n        }),\n\n        [`@container (${token.media.queries.large.max})`]: {\n          ...(isThemeDark && {\n            paddingBottom: `${token.spacing.md}`,\n          }),\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          ...(!isHeightSmall && {\n            height: '75vh',\n            minHeight: '480px',\n          }),\n        },\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(!isHeightSmall && {\n            minHeight: '720px',\n          }),\n        },\n      },\n      subElement: {\n        [`@container (${token.media.queries.large.max})`]: {\n          [`*:not(.${elementStyles.asset.image.caption.className})`]: {\n            ...(!isThemeDark && {\n              color: `${token.color.black} !important`,\n            }),\n          },\n        },\n      },\n    })\n    .build();\n\n  composite.styles += keyFrameHeroScaleDown;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","elementStyles","textLockup.large"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,mBAAmB;AAAA,EACvB,UAAU;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,MACT,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,IAEN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,YAAY;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,MACT,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,MAAM,sBAAsB;AAAA;AAAA;AAAA,mBAGT,iBAAiB,SAAS,UAAU,IAAI;AAAA,iBAC1C,iBAAiB,SAAS,QAAQ,IAAI;AAAA;AAAA;AAAA,mBAGpC,iBAAiB,SAAS,UAAU,EAAE;AAAA,iBACxC,iBAAiB,SAAS,QAAQ,EAAE;AAAA;AAAA;AAAA;AAKrD,MAAM,wBAAwB;AAAA;AAAA;AAAA,mBAGX,iBAAiB,WAAW,UAAU,IAAI;AAAA;AAAA;AAAA,mBAG1C,iBAAiB,WAAW,UAAU,EAAE;AAAA;AAAA;AAAA;AAK3D,MAAM,mBAAmB,CAAC,UAA4B;AACpD,SAAOA,4BAA8B;AAAA,IACnC;AAAA,IACA,UAAU;AAAA,EAAA,CACX;AACH;AAEA,MAAM,mBAAmB,CAAC,UAA4B;AACpD,SAAOC,sBAAwB;AAAA,IAC7B,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,EAAA,CAChB;AACH;AAEA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AACF,MAA+E;AAC7E,QAAM,WAAwC,CAAA;AAE9C,MAAI,OAAO;AACT,aAAS,KAAK,iBAAiB,KAAK,CAAC;AAAA,EACvC;AAEA,MAAI,SAAS,CAAC,OAAO;AACnB,aAAS,KAAK,iBAAiB,KAAK,CAAC;AAAA,EACvC;AAEA,MAAI,CAAC,SAAS,CAAC,OAAO;AACpB,aAAS,KAAKC,iBAAyB,iBAAiB;AAAA,EAC1D;AAEA,SAAO;AACT;AAEA,MAAM,mBAAmB,CAAC,sBAAgC;AACxD,SAAO;AAAA,IACL,SAAS;AAAA,MACP,CAAC,eAAe,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,QACjD,aAAa;AAAA,MAAA;AAAA,MAGf,CAAC,eAAe,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAClD,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,MAAA;AAAA,MAGZ,CAAC,UAAU,GAAG;AAAA,QACZ,CAAC,eAAe,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UAClD,SAAS;AAAA,UACT,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,YACE;AAAA,UACF,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,MAGF,CAAC,OAAO,GAAG;AAAA,QACT,GAAI,qBAAqB;AAAA,UACvB,CAAC,gDAAgD,GAAG;AAAA,YAClD,WAAW,4BAA4B,iBAAiB,WAAW,QAAQ;AAAA,UAAA;AAAA,QAC7E;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEJ;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,MAAwE;AACtE,QAAM,WAAW,mBAAmB,EAAE,OAAO,OAAO;AACpD,QAAMC,iBAAgB,iBAAiB,iBAAiB;AAExD,SAAO,IAAI,eAAA,EACR,cAAc,yBAAyB,EACvC,aAAa,GAAG,QAAQ,EACxB,WAAWA,cAAa,EACxB,MAAA;AACL;AAEA,MAAM,iBAAiB,CACrB,UAIqC;AACrC,QAAM,EAAE,UAAU,eAAe,cAAc,gBAAgB;AAC/D,QAAM,iBAAiB,UAAU,aAAa,KAAA,EAAO,UAAU;AAC/D,QAAM,sBAAsB,iBAAiB,MAAM;AAEnD,MAAI,CAAC,SAAU,QAAO;AAEtB,SAAO,IAAI,eAAe,QAAQ,EAC/B;AAAA,IACC,OAAO,WAAW,SAAS,QAAQ,cAAc;AAAA,MAC/C,OAAO,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,MAEf,CAAC,WAAW,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAC9C,UAAU;AAAA,QACV,OAAO,MAAM,MAAM;AAAA,QAEnB,GAAI,gBAAgB,EAAE,YAAY,QAAQ,aAAa,OAAA;AAAA,MAAO;AAAA,MAGhE,CAAC,WAAW,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QAC/C,UAAU;AAAA,QACV,GAAI,uBAAuB,EAAE,UAAU,OAAA;AAAA,MAAO;AAAA,IAChD;AAAA,IAEF,YAAY;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAET,cAAc;AAAA,MACZ,WAAW,MAAM,QAAQ;AAAA,IAAA;AAAA,EAC3B,CACD,EACA,MAAA;AACL;AAEA,MAAM,aAAa,CAAC,UAA6B;AAC/C,QAAM;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB;AAAA,EAAA,IACE;AAEJ,QAAM,OAAOC,sBAAiB;AAAA,IAC5B,mBAAmB,eAAe,KAAK;AAAA,IACvC,QAAQ,MAAM;AAAA,IACd,aAAa,MAAM;AAAA,IACnB,SAAS,MAAM;AAAA,IACf,aAAa;AAAA,EAAA,CACd;AAED,QAAM,gBAAgB,IAAI,eAAA,EACvB,cAAc,wBAAwB,EACtC,UAAU,IAAI,EACd,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ;AAAA,MAER,GAAI,gBAAgB;AAAA,QAClB,WAAW;AAAA,QACX,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,aAAa;AAAA,QACb,UAAU;AAAA,MAAA;AAAA,MAGZ,GAAI,qBAAqB;AAAA,QACvB,WAAW,0BAA0B,iBAAiB,SAAS,QAAQ;AAAA,MAAA;AAAA,MAGzE,CAAC,eAAe,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAClD,UAAU;AAAA,QACV,YAAY,GAAG,MAAM,QAAQ,KAAK,CAAC;AAAA,QACnC,eAAe,GAAG,MAAM,QAAQ,KAAK,CAAC;AAAA,QACtC,GAAI,CAAC,gBAAgB;AAAA,UACnB,OAAO;AAAA,QAAA;AAAA,QAET,GAAI,iBAAiB;AAAA,UACnB,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MAGF,CAAC,eAAe,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QACnD,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD,EACA,MAAA;AAEH,SAAO,IAAI,eAAA,EACR,OAAO,OAAO,OAAO,MAAM,WAAW,MAAM,EAC5C,UAAU,aAAa,EACvB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,CAAC,eAAe,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAClD,YAAY,GAAG,MAAM,QAAQ,EAAE;AAAA,QAE/B,CAAC,UAAU,cAAc,KAAK,WAAW,OAAO,SAAS,GAAG,GAAG;AAAA,UAC7D,YAAY;AAAA,UACZ,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEO,MAAM,8BAA8B,CAAC,UAA6B;AACvE,QAAM,EAAE,eAAe,YAAA,IAAgB;AACvC,QAAM,QAAQ,YAAY,KAAK;AAC/B,QAAM,OAAO,WAAW,KAAK;AAE7B,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,kBAAkB,EAChC,aAAa,OAAO,IAAI,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,UAAU;AAAA,MACV,eAAe;AAAA,MAEf,GAAI,eAAe;AAAA,QACjB,iBAAiB,MAAM,MAAM;AAAA,MAAA;AAAA,MAG/B,CAAC,eAAe,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,QACjD,GAAI,eAAe;AAAA,UACjB,eAAe,GAAG,MAAM,QAAQ,EAAE;AAAA,QAAA;AAAA,MACpC;AAAA,MAGF,CAAC,eAAe,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAClD,GAAI,CAAC,iBAAiB;AAAA,UACpB,QAAQ;AAAA,UACR,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,MAGF,CAAC,eAAe,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QACnD,GAAI,CAAC,iBAAiB;AAAA,UACpB,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,IAEF,YAAY;AAAA,MACV,CAAC,eAAe,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,QACjD,CAAC,UAAU,cAAc,MAAM,MAAM,QAAQ,SAAS,GAAG,GAAG;AAAA,UAC1D,GAAI,CAAC,eAAe;AAAA,YAClB,OAAO,GAAG,MAAM,MAAM,KAAK;AAAA,UAAA;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AAEH,YAAU,UAAU;AACpB,YAAU,UAAU;AAEpB,SAAO;AACT;"}

package/dist/composite/layout/box/index.d.ts

@@ -1,2 +1,2 @@
-export { default as logo } from './logo';
+export { createCompositeLayoutBoxLogo as logo } from './logo';
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/layout/box/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/composite/layout/box/index.js

@@ -1,5 +1,5 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const logo = require("./logo.js");
-exports.logo = logo;
+import { createCompositeLayoutBoxLogo } from "./logo.js";
+export {
+  createCompositeLayoutBoxLogo as logo
+};
 //# sourceMappingURL=index.js.map

package/dist/composite/layout/box/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/layout/box/logo.d.ts

@@ -4,9 +4,8 @@ export type TypeLogoRequirements = {
     image: HTMLElement;
     text?: HTMLElement | null;
 };
-declare const _default: (element: TypeLogoRequirements) => {
+export declare const createCompositeLayoutBoxLogo: (element: TypeLogoRequirements) => {
     element: HTMLDivElement;
     styles: string;
 };
-export default _default;
 //# sourceMappingURL=logo.d.ts.map

package/dist/composite/layout/box/logo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/box/logo.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC3B,CAAC;yBAuGc,SAAS,oBAAoB;;;;AAA7C,wBAoBE"}
+{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/box/logo.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC3B,CAAC;AA6HF,eAAO,MAAM,4BAA4B,YAtBF,oBAAoB;;;CAsBK,CAAC"}

package/dist/composite/layout/box/logo.js

@@ -1,25 +1,6 @@
-"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 = "theme";
 const ATTRIBUTE_BORDER = "border";
 const THEME_DARK = "dark";
@@ -35,41 +16,41 @@ const OVERWRITE_BORDER_ASSET = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_BORDER} .${
 const OVERWRITE_THEME_DARK_BORDER_ASSET = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_THEME_DARK}${IS_BORDER} .${ELEMENT_LOGO_BLOCK_ASSET}`;
 const VariantThemeStyles = `
   ${OVERWRITE_THEME_DARK_ASSET} {
-    background-color: ${token__namespace.color.gray.darker};
-    padding: ${token__namespace.spacing.xl};
+    background-color: ${token.color.gray.darker};
+    padding: ${token.spacing.xl};
   }
 
   ${OVERWRITE_THEME_DARK_BORDER_ASSET} {
-    border: 1px solid ${token__namespace.color.gray.dark};
+    border: 1px solid ${token.color.gray.dark};
   }
 
   ${OVERWRITE_THEME_DARK_TEXT},
   ${OVERWRITE_THEME_DARK_TEXT} * {
-    color: ${token__namespace.color.white};
+    color: ${token.color.white};
   };
 `;
 const VariantBorderStyles = `
   ${OVERWRITE_BORDER_ASSET} {
-    border: 1px solid ${token__namespace.color.gray.light};
-    padding: ${token__namespace.spacing.xl};
+    border: 1px solid ${token.color.gray.light};
+    padding: ${token.spacing.xl};
     height: 100%;
   }
 `;
 const TextStyles = `
   .${ELEMENT_LOGO_BLOCK_TEXT},
   .${ELEMENT_LOGO_BLOCK_TEXT} * {
-    color: ${token__namespace.color.gray.darker};
+    color: ${token.color.gray.darker};
   }
 
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`.${ELEMENT_LOGO_BLOCK_TEXT}`]: typography__namespace.sans.min
+    [`.${ELEMENT_LOGO_BLOCK_TEXT}`]: typography.sans.min
   }
 })}
 
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`.${ELEMENT_LOGO_BLOCK_TEXT} *`]: typography__namespace.sans.min
+    [`.${ELEMENT_LOGO_BLOCK_TEXT} *`]: typography.sans.min
   }
 })}
 
@@ -101,14 +82,14 @@ const STYLES_LOGO_BLOCK_ELEMENT = `
   }
 
   .${ELEMENT_LOGO_BLOCK_ASSET} + * {
-    margin-top: ${token__namespace.spacing.min};
+    margin-top: ${token.spacing.min};
   }
 
   ${TextStyles}
   ${VariantBorderStyles}
   ${VariantThemeStyles}
 `;
-const logo = (element) => {
+const CreateBoxLogoElement = (element) => {
   const { isThemeDark, image, text, isBordered = false } = element;
   const elementContainer = document.createElement("div");
   const assetContainer = document.createElement("div");
@@ -124,5 +105,8 @@ const logo = (element) => {
   }
   return { element: elementContainer, styles: STYLES_LOGO_BLOCK_ELEMENT };
 };
-module.exports = logo;
+const createCompositeLayoutBoxLogo = CreateBoxLogoElement;
+export {
+  createCompositeLayoutBoxLogo
+};
 //# sourceMappingURL=logo.js.map

package/dist/composite/layout/box/logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"logo.js","sources":["../../../../source/composite/layout/box/logo.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 TypeLogoRequirements = {\n  isBordered?: boolean;\n  isThemeDark?: boolean;\n  image: HTMLElement;\n  text?: HTMLElement | null;\n};\n\nconst ATTRIBUTE_THEME = 'theme';\nconst ATTRIBUTE_BORDER = 'border';\nconst THEME_DARK = 'dark';\n\nconst ELEMENT_NAME = 'umd-logo-block';\nconst ELEMENT_LOGO_BLOCK_CONTAINER = 'logo-block-container';\nconst ELEMENT_LOGO_BLOCK_ASSET = 'logo-block-asset';\nconst ELEMENT_LOGO_BLOCK_TEXT = 'logo-block-text';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\nconst IS_BORDER = `[${ATTRIBUTE_BORDER}]`;\n\nconst OVERWRITE_THEME_DARK_ASSET = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_THEME_DARK} .${ELEMENT_LOGO_BLOCK_ASSET}`;\nconst OVERWRITE_THEME_DARK_TEXT = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_THEME_DARK} .${ELEMENT_LOGO_BLOCK_TEXT}`;\n\nconst OVERWRITE_BORDER_ASSET = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_BORDER} .${ELEMENT_LOGO_BLOCK_ASSET}`;\nconst OVERWRITE_THEME_DARK_BORDER_ASSET = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_THEME_DARK}${IS_BORDER} .${ELEMENT_LOGO_BLOCK_ASSET}`;\n\n// prettier-ignore\nconst VariantThemeStyles = `\n  ${OVERWRITE_THEME_DARK_ASSET} {\n    background-color: ${token.color.gray.darker};\n    padding: ${token.spacing.xl};\n  }\n\n  ${OVERWRITE_THEME_DARK_BORDER_ASSET} {\n    border: 1px solid ${token.color.gray.dark};\n  }\n\n  ${OVERWRITE_THEME_DARK_TEXT},\n  ${OVERWRITE_THEME_DARK_TEXT} * {\n    color: ${token.color.white};\n  };\n`;\n\n// prettier-ignore\nconst VariantBorderStyles = `\n  ${OVERWRITE_BORDER_ASSET} {\n    border: 1px solid ${token.color.gray.light};\n    padding: ${token.spacing.xl};\n    height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n  .${ELEMENT_LOGO_BLOCK_TEXT},\n  .${ELEMENT_LOGO_BLOCK_TEXT} * {\n    color: ${token.color.gray.darker};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_LOGO_BLOCK_TEXT}`]: typography.sans.min,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_LOGO_BLOCK_TEXT} *`]: typography.sans.min,\n    },\n  })}\n\n  .${ELEMENT_LOGO_BLOCK_TEXT} a:hover,\n  .${ELEMENT_LOGO_BLOCK_TEXT} a:focus {\n    text-decoration: underline;\n   }\n`;\n\n// prettier-ignore\nconst STYLES_LOGO_BLOCK_ELEMENT = `\n  .${ELEMENT_LOGO_BLOCK_CONTAINER} {\n    container: ${ELEMENT_NAME} / inline-size;\n    height: 100%;\n  }\n\n  .${ELEMENT_LOGO_BLOCK_ASSET} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .${ELEMENT_LOGO_BLOCK_ASSET} > * {\n    max-height: 50px;\n    max-width: 150px;\n    display: flex;\n  }\n\n  .${ELEMENT_LOGO_BLOCK_ASSET} img {\n    object-fit: contain;\n  }\n\n  .${ELEMENT_LOGO_BLOCK_ASSET} + * {\n    margin-top: ${token.spacing.min};\n  }\n\n  ${TextStyles}\n  ${VariantBorderStyles}\n  ${VariantThemeStyles}\n`;\n\nexport default (element: TypeLogoRequirements) => {\n  const { isThemeDark, image, text, isBordered = false } = element;\n\n  const elementContainer = document.createElement('div');\n  const assetContainer = document.createElement('div');\n\n  assetContainer.appendChild(image);\n  assetContainer.classList.add(ELEMENT_LOGO_BLOCK_ASSET);\n\n  elementContainer.classList.add(ELEMENT_LOGO_BLOCK_CONTAINER);\n  if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n  if (isBordered) elementContainer.setAttribute(ATTRIBUTE_BORDER, '');\n  elementContainer.appendChild(assetContainer);\n\n  if (text) {\n    text.classList.add(ELEMENT_LOGO_BLOCK_TEXT);\n    elementContainer.appendChild(text);\n  }\n\n  return { element: elementContainer, styles: STYLES_LOGO_BLOCK_ELEMENT };\n};\n"],"names":["token","jssToCSS","typography"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AACzB,MAAM,aAAa;AAEnB,MAAM,eAAe;AACrB,MAAM,+BAA+B;AACrC,MAAM,2BAA2B;AACjC,MAAM,0BAA0B;AAEhC,MAAM,gBAAgB,IAAI,eAAe,KAAK,UAAU;AACxD,MAAM,YAAY,IAAI,gBAAgB;AAEtC,MAAM,6BAA6B,IAAI,4BAA4B,GAAG,aAAa,KAAK,wBAAwB;AAChH,MAAM,4BAA4B,IAAI,4BAA4B,GAAG,aAAa,KAAK,uBAAuB;AAE9G,MAAM,yBAAyB,IAAI,4BAA4B,GAAG,SAAS,KAAK,wBAAwB;AACxG,MAAM,oCAAoC,IAAI,4BAA4B,GAAG,aAAa,GAAG,SAAS,KAAK,wBAAwB;AAGnI,MAAM,qBAAqB;AAAA,IACvB,0BAA0B;AAAA,wBACNA,iBAAM,MAAM,KAAK,MAAM;AAAA,eAChCA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG3B,iCAAiC;AAAA,wBACbA,iBAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,IAGzC,yBAAyB;AAAA,IACzB,yBAAyB;AAAA,aAChBA,iBAAM,MAAM,KAAK;AAAA;AAAA;AAK9B,MAAM,sBAAsB;AAAA,IACxB,sBAAsB;AAAA,wBACFA,iBAAM,MAAM,KAAK,KAAK;AAAA,eAC/BA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAM/B,MAAM,aAAa;AAAA,KACd,uBAAuB;AAAA,KACvB,uBAAuB;AAAA,aACfA,iBAAM,MAAM,KAAK,MAAM;AAAA;AAAA;AAAA,IAGhCC,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,uBAAuB,EAAE,GAAGC,sBAAW,KAAK;AAAA,EAAA;AAErD,CAAC,CAAC;AAAA;AAAA,IAEAD,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,uBAAuB,IAAI,GAAGC,sBAAW,KAAK;AAAA,EAAA;AAEvD,CAAC,CAAC;AAAA;AAAA,KAEC,uBAAuB;AAAA,KACvB,uBAAuB;AAAA;AAAA;AAAA;AAM5B,MAAM,4BAA4B;AAAA,KAC7B,4BAA4B;AAAA,iBAChB,YAAY;AAAA;AAAA;AAAA;AAAA,KAIxB,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMxB,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMxB,wBAAwB;AAAA;AAAA;AAAA;AAAA,KAIxB,wBAAwB;AAAA,kBACXF,iBAAM,QAAQ,GAAG;AAAA;AAAA;AAAA,IAG/B,UAAU;AAAA,IACV,mBAAmB;AAAA,IACnB,kBAAkB;AAAA;AAGtB,MAAA,OAAe,CAAC,YAAkC;AAChD,QAAM,EAAE,aAAa,OAAO,MAAM,aAAa,UAAU;AAEzD,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,iBAAiB,SAAS,cAAc,KAAK;AAEnD,iBAAe,YAAY,KAAK;AAChC,iBAAe,UAAU,IAAI,wBAAwB;AAErD,mBAAiB,UAAU,IAAI,4BAA4B;AAC3D,MAAI,YAAa,kBAAiB,aAAa,iBAAiB,UAAU;AAC1E,MAAI,WAAY,kBAAiB,aAAa,kBAAkB,EAAE;AAClE,mBAAiB,YAAY,cAAc;AAE3C,MAAI,MAAM;AACR,SAAK,UAAU,IAAI,uBAAuB;AAC1C,qBAAiB,YAAY,IAAI;AAAA,EACnC;AAEA,SAAO,EAAE,SAAS,kBAAkB,QAAQ,0BAAA;AAC9C;;"}
+{"version":3,"file":"logo.js","sources":["../../../../source/composite/layout/box/logo.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 TypeLogoRequirements = {\n  isBordered?: boolean;\n  isThemeDark?: boolean;\n  image: HTMLElement;\n  text?: HTMLElement | null;\n};\n\nconst ATTRIBUTE_THEME = 'theme';\nconst ATTRIBUTE_BORDER = 'border';\nconst THEME_DARK = 'dark';\n\nconst ELEMENT_NAME = 'umd-logo-block';\nconst ELEMENT_LOGO_BLOCK_CONTAINER = 'logo-block-container';\nconst ELEMENT_LOGO_BLOCK_ASSET = 'logo-block-asset';\nconst ELEMENT_LOGO_BLOCK_TEXT = 'logo-block-text';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\nconst IS_BORDER = `[${ATTRIBUTE_BORDER}]`;\n\nconst OVERWRITE_THEME_DARK_ASSET = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_THEME_DARK} .${ELEMENT_LOGO_BLOCK_ASSET}`;\nconst OVERWRITE_THEME_DARK_TEXT = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_THEME_DARK} .${ELEMENT_LOGO_BLOCK_TEXT}`;\n\nconst OVERWRITE_BORDER_ASSET = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_BORDER} .${ELEMENT_LOGO_BLOCK_ASSET}`;\nconst OVERWRITE_THEME_DARK_BORDER_ASSET = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_THEME_DARK}${IS_BORDER} .${ELEMENT_LOGO_BLOCK_ASSET}`;\n\n// prettier-ignore\nconst VariantThemeStyles = `\n  ${OVERWRITE_THEME_DARK_ASSET} {\n    background-color: ${token.color.gray.darker};\n    padding: ${token.spacing.xl};\n  }\n\n  ${OVERWRITE_THEME_DARK_BORDER_ASSET} {\n    border: 1px solid ${token.color.gray.dark};\n  }\n\n  ${OVERWRITE_THEME_DARK_TEXT},\n  ${OVERWRITE_THEME_DARK_TEXT} * {\n    color: ${token.color.white};\n  };\n`;\n\n// prettier-ignore\nconst VariantBorderStyles = `\n  ${OVERWRITE_BORDER_ASSET} {\n    border: 1px solid ${token.color.gray.light};\n    padding: ${token.spacing.xl};\n    height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n  .${ELEMENT_LOGO_BLOCK_TEXT},\n  .${ELEMENT_LOGO_BLOCK_TEXT} * {\n    color: ${token.color.gray.darker};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_LOGO_BLOCK_TEXT}`]: typography.sans.min,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_LOGO_BLOCK_TEXT} *`]: typography.sans.min,\n    },\n  })}\n\n  .${ELEMENT_LOGO_BLOCK_TEXT} a:hover,\n  .${ELEMENT_LOGO_BLOCK_TEXT} a:focus {\n    text-decoration: underline;\n   }\n`;\n\n// prettier-ignore\nconst STYLES_LOGO_BLOCK_ELEMENT = `\n  .${ELEMENT_LOGO_BLOCK_CONTAINER} {\n    container: ${ELEMENT_NAME} / inline-size;\n    height: 100%;\n  }\n\n  .${ELEMENT_LOGO_BLOCK_ASSET} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .${ELEMENT_LOGO_BLOCK_ASSET} > * {\n    max-height: 50px;\n    max-width: 150px;\n    display: flex;\n  }\n\n  .${ELEMENT_LOGO_BLOCK_ASSET} img {\n    object-fit: contain;\n  }\n\n  .${ELEMENT_LOGO_BLOCK_ASSET} + * {\n    margin-top: ${token.spacing.min};\n  }\n\n  ${TextStyles}\n  ${VariantBorderStyles}\n  ${VariantThemeStyles}\n`;\n\nconst CreateBoxLogoElement = (element: TypeLogoRequirements) => {\n  const { isThemeDark, image, text, isBordered = false } = element;\n\n  const elementContainer = document.createElement('div');\n  const assetContainer = document.createElement('div');\n\n  assetContainer.appendChild(image);\n  assetContainer.classList.add(ELEMENT_LOGO_BLOCK_ASSET);\n\n  elementContainer.classList.add(ELEMENT_LOGO_BLOCK_CONTAINER);\n  if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n  if (isBordered) elementContainer.setAttribute(ATTRIBUTE_BORDER, '');\n  elementContainer.appendChild(assetContainer);\n\n  if (text) {\n    text.classList.add(ELEMENT_LOGO_BLOCK_TEXT);\n    elementContainer.appendChild(text);\n  }\n\n  return { element: elementContainer, styles: STYLES_LOGO_BLOCK_ELEMENT };\n};\n\nexport const createCompositeLayoutBoxLogo = CreateBoxLogoElement;\n"],"names":[],"mappings":";;;AAWA,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AACzB,MAAM,aAAa;AAEnB,MAAM,eAAe;AACrB,MAAM,+BAA+B;AACrC,MAAM,2BAA2B;AACjC,MAAM,0BAA0B;AAEhC,MAAM,gBAAgB,IAAI,eAAe,KAAK,UAAU;AACxD,MAAM,YAAY,IAAI,gBAAgB;AAEtC,MAAM,6BAA6B,IAAI,4BAA4B,GAAG,aAAa,KAAK,wBAAwB;AAChH,MAAM,4BAA4B,IAAI,4BAA4B,GAAG,aAAa,KAAK,uBAAuB;AAE9G,MAAM,yBAAyB,IAAI,4BAA4B,GAAG,SAAS,KAAK,wBAAwB;AACxG,MAAM,oCAAoC,IAAI,4BAA4B,GAAG,aAAa,GAAG,SAAS,KAAK,wBAAwB;AAGnI,MAAM,qBAAqB;AAAA,IACvB,0BAA0B;AAAA,wBACN,MAAM,MAAM,KAAK,MAAM;AAAA,eAChC,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG3B,iCAAiC;AAAA,wBACb,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,IAGzC,yBAAyB;AAAA,IACzB,yBAAyB;AAAA,aAChB,MAAM,MAAM,KAAK;AAAA;AAAA;AAK9B,MAAM,sBAAsB;AAAA,IACxB,sBAAsB;AAAA,wBACF,MAAM,MAAM,KAAK,KAAK;AAAA,eAC/B,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAM/B,MAAM,aAAa;AAAA,KACd,uBAAuB;AAAA,KACvB,uBAAuB;AAAA,aACf,MAAM,MAAM,KAAK,MAAM;AAAA;AAAA;AAAA,IAGhC,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,uBAAuB,EAAE,GAAG,WAAW,KAAK;AAAA,EAAA;AAErD,CAAC,CAAC;AAAA;AAAA,IAEA,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,uBAAuB,IAAI,GAAG,WAAW,KAAK;AAAA,EAAA;AAEvD,CAAC,CAAC;AAAA;AAAA,KAEC,uBAAuB;AAAA,KACvB,uBAAuB;AAAA;AAAA;AAAA;AAM5B,MAAM,4BAA4B;AAAA,KAC7B,4BAA4B;AAAA,iBAChB,YAAY;AAAA;AAAA;AAAA;AAAA,KAIxB,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMxB,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMxB,wBAAwB;AAAA;AAAA;AAAA;AAAA,KAIxB,wBAAwB;AAAA,kBACX,MAAM,QAAQ,GAAG;AAAA;AAAA;AAAA,IAG/B,UAAU;AAAA,IACV,mBAAmB;AAAA,IACnB,kBAAkB;AAAA;AAGtB,MAAM,uBAAuB,CAAC,YAAkC;AAC9D,QAAM,EAAE,aAAa,OAAO,MAAM,aAAa,UAAU;AAEzD,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,iBAAiB,SAAS,cAAc,KAAK;AAEnD,iBAAe,YAAY,KAAK;AAChC,iBAAe,UAAU,IAAI,wBAAwB;AAErD,mBAAiB,UAAU,IAAI,4BAA4B;AAC3D,MAAI,YAAa,kBAAiB,aAAa,iBAAiB,UAAU;AAC1E,MAAI,WAAY,kBAAiB,aAAa,kBAAkB,EAAE;AAClE,mBAAiB,YAAY,cAAc;AAE3C,MAAI,MAAM;AACR,SAAK,UAAU,IAAI,uBAAuB;AAC1C,qBAAiB,YAAY,IAAI;AAAA,EACnC;AAEA,SAAO,EAAE,SAAS,kBAAkB,QAAQ,0BAAA;AAC9C;AAEO,MAAM,+BAA+B;"}

package/dist/composite/layout/image/expand.d.ts

@@ -2,9 +2,9 @@ type TypeLayoutImageExpandProps = {
     content: HTMLElement;
     image: HTMLImageElement;
 };
-declare const _default: (props: TypeLayoutImageExpandProps) => {
+export declare const createCompositeLayoutImageExpand: (props: TypeLayoutImageExpandProps) => {
     element: HTMLDivElement;
     styles: string;
 };
-export default _default;
+export {};
 //# sourceMappingURL=expand.d.ts.map

package/dist/composite/layout/image/expand.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/image/expand.ts"],"names":[],"mappings":"AASA,KAAK,0BAA0B,GAAG;IAChC,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;yBAwRc,OAAO,0BAA0B;;;;AAAjD,wBAoCE"}
+{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/image/expand.ts"],"names":[],"mappings":"AASA,KAAK,0BAA0B,GAAG;IAChC,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AA8TF,eAAO,MAAM,gCAAgC,UAtCJ,0BAA0B;;;CAsCK,CAAC"}