@universityofmaryland/web-elements-library 1.6.9 → 1.6.10

package/dist/composite/card/event-time.d.ts

@@ -0,0 +1,3 @@
+import { CardEventTimeProps } from './_types';
+export declare const createCompositeCardEventTime: (props: CardEventTimeProps) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
+//# sourceMappingURL=event-time.d.ts.map

package/dist/composite/card/event-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-time.d.ts","sourceRoot":"","sources":["../../../source/composite/card/event-time.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAqL9C,eAAO,MAAM,4BAA4B,GAAI,OAAO,kBAAkB,kFAgHrE,CAAC"}

package/dist/composite/card/event-time.js

@@ -0,0 +1,238 @@
+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 typography from "@universityofmaryland/web-styles-library/typography";
+import * as animation from "@universityofmaryland/web-styles-library/animation";
+import { createMediaQuery } from "@universityofmaryland/web-utilities-library/styles";
+import { parseDateFromElement } from "@universityofmaryland/web-utilities-library/date";
+import { pin } from "@universityofmaryland/web-icons-library/location";
+import { info } from "@universityofmaryland/web-icons-library/indicators";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
+import { wrapTextNodeInSpan } from "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-utilities-library/media";
+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 "@universityofmaryland/web-utilities-library/performance";
+import "../../atomic/animations/brand/chevron-scroll.js";
+import "../../atomic/animations/brand/card-stack.js";
+import { createImageBackground } from "../../atomic/assets/image/background.js";
+import "@universityofmaryland/web-styles-library";
+import "@universityofmaryland/web-utilities-library/accessibility";
+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 { createTextLockupSmall } from "../../atomic/text-lockup/small.js";
+const mediumBreakpointStart = token.media.breakpointValues.medium.min;
+const smallBreakpoint = token.media.breakpointValues.small.max;
+const MakeDetailItem = (props) => {
+  const { icon, text, isThemeDark } = props;
+  const iconElement = new ElementBuilder("span").withHTML(icon).build();
+  const textElement = new ElementBuilder("span").withHTML(text).build();
+  return new ElementBuilder("p").styled(
+    elementStyles.event.meta.composeItem({
+      theme: isThemeDark ? "dark" : "light"
+    })
+  ).withStyles({
+    element: {
+      display: "flex",
+      alignItems: "flex-start",
+      [`& + .${elementStyles.event.meta.item.className}, & + .${elementStyles.event.meta.itemDark.className}`]: {
+        marginTop: "5px"
+      },
+      ["& span "]: {
+        marginLeft: "0 !important",
+        marginTop: "0 !important"
+      }
+    }
+  }).withChildren(iconElement, textElement).build();
+};
+const makeTimeRow = ({
+  startTime,
+  endTime,
+  isThemeDark
+}) => {
+  const startParsed = parseDateFromElement({ element: startTime });
+  if (!startParsed) return null;
+  let timeText = startParsed.time;
+  const endParsed = parseDateFromElement({ element: endTime ?? null });
+  if (endParsed && endParsed.time !== startParsed.time) {
+    timeText = `${timeText} - ${endParsed.time}`;
+  }
+  return new ElementBuilder("p").withClassName("card-event-time-row").styled(
+    typography.sans.compose("small", {
+      theme: isThemeDark ? "dark" : "light"
+    })
+  ).withStyles({
+    element: {
+      marginBottom: token.spacing.sm,
+      textTransform: "uppercase",
+      fontWeight: token.font.weight.bold
+    }
+  }).withHTML(timeText).build();
+};
+const makeMetaRow = ({
+  location,
+  information,
+  isThemeDark
+}) => {
+  const children = [];
+  if (location?.textContent) {
+    children.push(
+      MakeDetailItem({
+        icon: pin,
+        text: location.textContent,
+        isThemeDark
+      })
+    );
+  }
+  if (information?.textContent) {
+    children.push(
+      MakeDetailItem({
+        icon: info,
+        text: information.textContent,
+        isThemeDark
+      })
+    );
+  }
+  if (children.length === 0) return null;
+  return new ElementBuilder().withClassName("card-event-time-meta").withStyles({
+    element: {
+      marginBottom: token.spacing.sm,
+      "> *:not(:first-child)": {
+        [`@container (min-width: 650px)`]: {
+          width: "auto"
+        }
+      }
+    }
+  }).withChildren(...children).build();
+};
+const makeImageColumn = ({
+  image,
+  isAligned
+}) => {
+  const backgroundImage = createImageBackground({
+    element: image,
+    isScaled: isAligned,
+    isGifAllowed: false,
+    imageLoading: "lazy"
+  });
+  return new ElementBuilder().withClassName("card-event-time-image-wrapper").withStyles({
+    element: {
+      ...createMediaQuery("max-width", smallBreakpoint, {
+        marginLeft: token.spacing.min,
+        marginBottom: token.spacing.md,
+        width: "120px",
+        float: "right",
+        position: "relative",
+        zIndex: 99,
+        ...isAligned && {
+          height: "104px"
+        }
+      }),
+      ...createMediaQuery("min-width", mediumBreakpointStart, {
+        display: "block",
+        width: "160px",
+        order: "2",
+        ...isAligned && {
+          height: "160px"
+        }
+      }),
+      "& img": {
+        ...createMediaQuery("max-width", smallBreakpoint, {
+          height: "auto !important"
+        })
+      }
+    }
+  }).withChild(backgroundImage).build();
+};
+const createCompositeCardEventTime = (props) => {
+  const {
+    headline,
+    startTime,
+    endTime,
+    location,
+    information,
+    text,
+    actions,
+    image,
+    isAligned,
+    isThemeDark
+  } = props;
+  const contentChildren = [];
+  const timeRow = makeTimeRow({ startTime, endTime, isThemeDark });
+  if (timeRow) contentChildren.push(timeRow);
+  if (headline) {
+    const composeHeadlineStyles = {
+      ...animation.line.composeSlideUnder({
+        color: theme.foreground(isThemeDark)
+      }),
+      ...typography.sans.compose("larger", {
+        theme: theme.fontColor(isThemeDark)
+      })
+    };
+    const headlineElement = new ElementBuilder(headline).styled(composeHeadlineStyles).withStyles({
+      element: {
+        fontWeight: "700",
+        [`& + *`]: {
+          marginTop: token.spacing.sm
+        }
+      },
+      subElement: {
+        color: "currentColor"
+      }
+    }).withModifier((el) => wrapTextNodeInSpan(el)).build();
+    contentChildren.push(headlineElement);
+  }
+  const metaRow = makeMetaRow({ location, information, isThemeDark });
+  if (metaRow) contentChildren.push(metaRow);
+  const lockup = createTextLockupSmall({
+    text: text || null,
+    actions: actions || null,
+    isThemeDark
+  });
+  contentChildren.push(lockup);
+  const contentColumn = new ElementBuilder().withClassName("card-event-time-content").withStyles({
+    element: {
+      flex: "1 0",
+      ...createMediaQuery("min-width", mediumBreakpointStart, {
+        paddingRight: token.spacing.md,
+        order: "1"
+      })
+    }
+  }).withChildren(...contentChildren).build();
+  const children = [];
+  if (image) {
+    children.push(makeImageColumn({ image, isAligned }));
+  }
+  children.push(contentColumn);
+  const wrapper = new ElementBuilder().withClassName("card-event-time-wrapper").withStyles({
+    element: {
+      containerType: "inline-size",
+      ...createMediaQuery("min-width", mediumBreakpointStart, {
+        display: "flex",
+        justifyContent: "space-between"
+      })
+    }
+  }).withChildren(...children).build();
+  return new ElementBuilder().withClassName("card-event-time-container").withStyles({
+    element: {
+      height: "100%",
+      overflow: "hidden",
+      ...isThemeDark && {
+        backgroundColor: token.color.black,
+        color: token.color.white
+      }
+    }
+  }).withChild(wrapper).build();
+};
+export {
+  createCompositeCardEventTime
+};
+//# sourceMappingURL=event-time.js.map

package/dist/composite/card/event-time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-time.js","sources":["../../../source/composite/card/event-time.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 typography from '@universityofmaryland/web-styles-library/typography';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { parseDateFromElement } from '@universityofmaryland/web-utilities-library/date';\nimport { pin as iconPin } from '@universityofmaryland/web-icons-library/location';\nimport { info as iconInfo } from '@universityofmaryland/web-icons-library/indicators';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { textLockup, assets } from 'atomic';\nimport { CardEventTimeProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nconst MakeDetailItem = (props: {\n  icon: string;\n  text: string;\n  isThemeDark?: boolean;\n}) => {\n  const { icon, text, isThemeDark } = props;\n\n  const iconElement = new ElementBuilder('span').withHTML(icon).build();\n  const textElement = new ElementBuilder('span').withHTML(text).build();\n\n  return new ElementBuilder('p')\n    .styled(\n      elementStyles.event.meta.composeItem({\n        theme: isThemeDark ? 'dark' : 'light',\n      }),\n    )\n    .withStyles({\n      element: {\n        display: 'flex',\n        alignItems: 'flex-start',\n\n        [`& + .${elementStyles.event.meta.item.className}, & + .${elementStyles.event.meta.itemDark.className}`]:\n          {\n            marginTop: '5px',\n          },\n\n        ['& span ']: {\n          marginLeft: '0 !important',\n          marginTop: '0 !important',\n        },\n      },\n    })\n    .withChildren(iconElement, textElement)\n    .build();\n};\n\nconst makeTimeRow = ({\n  startTime,\n  endTime,\n  isThemeDark,\n}: {\n  startTime: CardEventTimeProps['startTime'];\n  endTime?: CardEventTimeProps['endTime'];\n  isThemeDark?: boolean;\n}) => {\n  const startParsed = parseDateFromElement({ element: startTime });\n  if (!startParsed) return null;\n\n  let timeText = startParsed.time;\n  const endParsed = parseDateFromElement({ element: endTime ?? null });\n\n  if (endParsed && endParsed.time !== startParsed.time) {\n    timeText = `${timeText} - ${endParsed.time}`;\n  }\n\n  return new ElementBuilder('p')\n    .withClassName('card-event-time-row')\n    .styled(\n      typography.sans.compose('small', {\n        theme: isThemeDark ? 'dark' : 'light',\n      }),\n    )\n    .withStyles({\n      element: {\n        marginBottom: token.spacing.sm,\n        textTransform: 'uppercase',\n        fontWeight: token.font.weight.bold,\n      },\n    })\n    .withHTML(timeText)\n    .build();\n};\n\nconst makeMetaRow = ({\n  location,\n  information,\n  isThemeDark,\n}: {\n  location?: CardEventTimeProps['location'];\n  information?: CardEventTimeProps['information'];\n  isThemeDark?: boolean;\n}) => {\n  const children: UMDElement[] = [];\n\n  if (location?.textContent) {\n    children.push(\n      MakeDetailItem({\n        icon: iconPin,\n        text: location.textContent,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (information?.textContent) {\n    children.push(\n      MakeDetailItem({\n        icon: iconInfo,\n        text: information.textContent,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (children.length === 0) return null;\n\n  return new ElementBuilder()\n    .withClassName('card-event-time-meta')\n    .withStyles({\n      element: {\n        marginBottom: token.spacing.sm,\n\n        '> *:not(:first-child)': {\n          [`@container (min-width: 650px)`]: {\n            width: 'auto',\n          },\n        },\n      },\n    })\n    .withChildren(...children)\n    .build();\n};\n\nconst makeImageColumn = ({\n  image,\n  isAligned,\n}: {\n  image: NonNullable<CardEventTimeProps['image']>;\n  isAligned?: CardEventTimeProps['isAligned'];\n}) => {\n  const backgroundImage = assets.image.background({\n    element: image,\n    isScaled: isAligned,\n    isGifAllowed: false,\n    imageLoading: 'lazy',\n  });\n\n  return new ElementBuilder()\n    .withClassName('card-event-time-image-wrapper')\n    .withStyles({\n      element: {\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          marginLeft: token.spacing.min,\n          marginBottom: token.spacing.md,\n          width: '120px',\n          float: 'right',\n          position: 'relative',\n          zIndex: 99,\n\n          ...(isAligned && {\n            height: '104px',\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'block',\n          width: '160px',\n          order: '2',\n\n          ...(isAligned && {\n            height: '160px',\n          }),\n        }),\n\n        '& img': {\n          ...createMediaQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n          }),\n        },\n      },\n    })\n    .withChild(backgroundImage)\n    .build();\n};\n\nexport const createCompositeCardEventTime = (props: CardEventTimeProps) => {\n  const {\n    headline,\n    startTime,\n    endTime,\n    location,\n    information,\n    text,\n    actions,\n    image,\n    isAligned,\n    isThemeDark,\n  } = props;\n\n  const contentChildren: UMDElement[] = [];\n\n  const timeRow = makeTimeRow({ startTime, endTime, isThemeDark });\n  if (timeRow) contentChildren.push(timeRow);\n\n  if (headline) {\n    const composeHeadlineStyles = {\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    };\n\n    const headlineElement = new ElementBuilder(headline)\n      .styled(composeHeadlineStyles)\n      .withStyles({\n        element: {\n          fontWeight: '700',\n\n          [`& + *`]: {\n            marginTop: token.spacing.sm,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    contentChildren.push(headlineElement);\n  }\n\n  const metaRow = makeMetaRow({ location, information, isThemeDark });\n  if (metaRow) contentChildren.push(metaRow);\n\n  const lockup = textLockup.small({\n    text: text || null,\n    actions: actions || null,\n    isThemeDark,\n  });\n  contentChildren.push(lockup);\n\n  const contentColumn = new ElementBuilder()\n    .withClassName('card-event-time-content')\n    .withStyles({\n      element: {\n        flex: '1 0',\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingRight: token.spacing.md,\n          order: '1',\n        }),\n      },\n    })\n    .withChildren(...contentChildren)\n    .build();\n\n  const children: UMDElement[] = [];\n\n  if (image) {\n    children.push(makeImageColumn({ image, isAligned }));\n  }\n\n  children.push(contentColumn);\n\n  const wrapper = new ElementBuilder()\n    .withClassName('card-event-time-wrapper')\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'flex',\n          justifyContent: 'space-between',\n        }),\n      },\n    })\n    .withChildren(...children)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('card-event-time-container')\n    .withStyles({\n      element: {\n        height: '100%',\n        overflow: 'hidden',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.black,\n          color: token.color.white,\n        }),\n      },\n    })\n    .withChild(wrapper)\n    .build();\n};\n"],"names":["iconPin","iconInfo","assets.image.background","animationStyles","textLockup.small"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,wBAAwB,MAAM,MAAM,iBAAiB,OAAO;AAClE,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAM,iBAAiB,CAAC,UAIlB;AACJ,QAAM,EAAE,MAAM,MAAM,YAAA,IAAgB;AAEpC,QAAM,cAAc,IAAI,eAAe,MAAM,EAAE,SAAS,IAAI,EAAE,MAAA;AAC9D,QAAM,cAAc,IAAI,eAAe,MAAM,EAAE,SAAS,IAAI,EAAE,MAAA;AAE9D,SAAO,IAAI,eAAe,GAAG,EAC1B;AAAA,IACC,cAAc,MAAM,KAAK,YAAY;AAAA,MACnC,OAAO,cAAc,SAAS;AAAA,IAAA,CAC/B;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,YAAY;AAAA,MAEZ,CAAC,QAAQ,cAAc,MAAM,KAAK,KAAK,SAAS,UAAU,cAAc,MAAM,KAAK,SAAS,SAAS,EAAE,GACrG;AAAA,QACE,WAAW;AAAA,MAAA;AAAA,MAGf,CAAC,SAAS,GAAG;AAAA,QACX,YAAY;AAAA,QACZ,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF,CACD,EACA,aAAa,aAAa,WAAW,EACrC,MAAA;AACL;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,cAAc,qBAAqB,EAAE,SAAS,WAAW;AAC/D,MAAI,CAAC,YAAa,QAAO;AAEzB,MAAI,WAAW,YAAY;AAC3B,QAAM,YAAY,qBAAqB,EAAE,SAAS,WAAW,MAAM;AAEnE,MAAI,aAAa,UAAU,SAAS,YAAY,MAAM;AACpD,eAAW,GAAG,QAAQ,MAAM,UAAU,IAAI;AAAA,EAC5C;AAEA,SAAO,IAAI,eAAe,GAAG,EAC1B,cAAc,qBAAqB,EACnC;AAAA,IACC,WAAW,KAAK,QAAQ,SAAS;AAAA,MAC/B,OAAO,cAAc,SAAS;AAAA,IAAA,CAC/B;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,cAAc,MAAM,QAAQ;AAAA,MAC5B,eAAe;AAAA,MACf,YAAY,MAAM,KAAK,OAAO;AAAA,IAAA;AAAA,EAChC,CACD,EACA,SAAS,QAAQ,EACjB,MAAA;AACL;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,WAAyB,CAAA;AAE/B,MAAI,UAAU,aAAa;AACzB,aAAS;AAAA,MACP,eAAe;AAAA,QACb,MAAMA;AAAAA,QACN,MAAM,SAAS;AAAA,QACf;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,aAAa,aAAa;AAC5B,aAAS;AAAA,MACP,eAAe;AAAA,QACb,MAAMC;AAAAA,QACN,MAAM,YAAY;AAAA,QAClB;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS,WAAW,EAAG,QAAO;AAElC,SAAO,IAAI,eAAA,EACR,cAAc,sBAAsB,EACpC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,cAAc,MAAM,QAAQ;AAAA,MAE5B,yBAAyB;AAAA,QACvB,CAAC,+BAA+B,GAAG;AAAA,UACjC,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,IACF;AAAA,EACF,CACD,EACA,aAAa,GAAG,QAAQ,EACxB,MAAA;AACL;AAEA,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,kBAAkBC,sBAAwB;AAAA,IAC9C,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,EAAA,CACf;AAED,SAAO,IAAI,eAAA,EACR,cAAc,+BAA+B,EAC7C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,QAChD,YAAY,MAAM,QAAQ;AAAA,QAC1B,cAAc,MAAM,QAAQ;AAAA,QAC5B,OAAO;AAAA,QACP,OAAO;AAAA,QACP,UAAU;AAAA,QACV,QAAQ;AAAA,QAER,GAAI,aAAa;AAAA,UACf,QAAQ;AAAA,QAAA;AAAA,MACV,CACD;AAAA,MAED,GAAG,iBAAiB,aAAa,uBAAuB;AAAA,QACtD,SAAS;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,QAEP,GAAI,aAAa;AAAA,UACf,QAAQ;AAAA,QAAA;AAAA,MACV,CACD;AAAA,MAED,SAAS;AAAA,QACP,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,UAChD,QAAQ;AAAA,QAAA,CACT;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD,EACA,UAAU,eAAe,EACzB,MAAA;AACL;AAEO,MAAM,+BAA+B,CAAC,UAA8B;AACzE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,kBAAgC,CAAA;AAEtC,QAAM,UAAU,YAAY,EAAE,WAAW,SAAS,aAAa;AAC/D,MAAI,QAAS,iBAAgB,KAAK,OAAO;AAEzC,MAAI,UAAU;AACZ,UAAM,wBAAwB;AAAA,MAC5B,GAAGC,UAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAO,MAAM,WAAW,WAAW;AAAA,MAAA,CACpC;AAAA,MACD,GAAG,WAAW,KAAK,QAAQ,UAAU;AAAA,QACnC,OAAO,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,IAAA;AAGH,UAAM,kBAAkB,IAAI,eAAe,QAAQ,EAChD,OAAO,qBAAqB,EAC5B,WAAW;AAAA,MACV,SAAS;AAAA,QACP,YAAY;AAAA,QAEZ,CAAC,OAAO,GAAG;AAAA,UACT,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,MAEF,YAAY;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,IACT,CACD,EACA,aAAa,CAAC,OAAO,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,oBAAgB,KAAK,eAAe;AAAA,EACtC;AAEA,QAAM,UAAU,YAAY,EAAE,UAAU,aAAa,aAAa;AAClE,MAAI,QAAS,iBAAgB,KAAK,OAAO;AAEzC,QAAM,SAASC,sBAAiB;AAAA,IAC9B,MAAM,QAAQ;AAAA,IACd,SAAS,WAAW;AAAA,IACpB;AAAA,EAAA,CACD;AACD,kBAAgB,KAAK,MAAM;AAE3B,QAAM,gBAAgB,IAAI,eAAA,EACvB,cAAc,yBAAyB,EACvC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,MAAM;AAAA,MAEN,GAAG,iBAAiB,aAAa,uBAAuB;AAAA,QACtD,cAAc,MAAM,QAAQ;AAAA,QAC5B,OAAO;AAAA,MAAA,CACR;AAAA,IAAA;AAAA,EACH,CACD,EACA,aAAa,GAAG,eAAe,EAC/B,MAAA;AAEH,QAAM,WAAyB,CAAA;AAE/B,MAAI,OAAO;AACT,aAAS,KAAK,gBAAgB,EAAE,OAAO,UAAA,CAAW,CAAC;AAAA,EACrD;AAEA,WAAS,KAAK,aAAa;AAE3B,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,yBAAyB,EACvC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,MAEf,GAAG,iBAAiB,aAAa,uBAAuB;AAAA,QACtD,SAAS;AAAA,QACT,gBAAgB;AAAA,MAAA,CACjB;AAAA,IAAA;AAAA,EACH,CACD,EACA,aAAa,GAAG,QAAQ,EACxB,MAAA;AAEH,SAAO,IAAI,eAAA,EACR,cAAc,2BAA2B,EACzC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MAEV,GAAI,eAAe;AAAA,QACjB,iBAAiB,MAAM,MAAM;AAAA,QAC7B,OAAO,MAAM,MAAM;AAAA,MAAA;AAAA,IACrB;AAAA,EACF,CACD,EACA,UAAU,OAAO,EACjB,MAAA;AACL;"}

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

@@ -1,4 +1,5 @@
 export { createCompositeCardBlock as block } from './block';
+export { createCompositeCardEventTime as eventTime } from './event-time';
 export { createCompositeCardList as list } from './list';
 export * as overlay from './overlay';
 export * as video from './video';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,EAAE,uBAAuB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzD,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,EAAE,4BAA4B,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAAE,uBAAuB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzD,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC"}

package/dist/composite/card/index.js

@@ -1,9 +1,11 @@
 import { createCompositeCardBlock } from "./block.js";
+import { createCompositeCardEventTime } from "./event-time.js";
 import { createCompositeCardList } from "./list.js";
 import * as index from "./overlay/index.js";
 import * as index$1 from "./video/index.js";
 export {
   createCompositeCardBlock as block,
+  createCompositeCardEventTime as eventTime,
   createCompositeCardList as list,
   index as overlay,
   index$1 as video

package/dist/composite/card/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/card/list.d.ts

@@ -1,3 +1,3 @@
 import { CardListProps } from './_types';
-export declare const createCompositeCardList: (props: CardListProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositeCardList: (props: CardListProps) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=list.d.ts.map

package/dist/composite/card/overlay/color.d.ts

@@ -1,3 +1,3 @@
 import { CardOverlayProps } from '../_types';
-export declare const createCompositeCardOverlayColor: (props: CardOverlayProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositeCardOverlayColor: (props: CardOverlayProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=color.d.ts.map

package/dist/composite/card/overlay/icon.d.ts

@@ -4,6 +4,6 @@ interface CardIconProps {
     image?: HTMLImageElement | null;
     isThemeDark?: boolean;
 }
-export declare const createCompositeCardOverlayIcon: (props: CardIconProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositeCardOverlayIcon: (props: CardIconProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 export {};
 //# sourceMappingURL=icon.d.ts.map

package/dist/composite/card/overlay/image.d.ts

@@ -6,7 +6,7 @@ export declare const createCardOverlayImage: (props: CardOverlayProps) => {
     };
     element: HTMLElement;
     styles: string;
-    update?: (props: Partial<import('@universityofmaryland/web-builder-library').BuilderOptions>) => void;
+    update?: (props: Partial<import('../../../../builder/dist/index.d.ts').BuilderOptions>) => void;
     destroy?: () => void;
 };
 //# sourceMappingURL=image.d.ts.map

package/dist/composite/card/video/block.d.ts

@@ -2,6 +2,6 @@ interface CardVideoShortProps {
     video: HTMLVideoElement;
     isAutoplay?: boolean;
 }
-export declare const createCompositeCardVideoBlock: (props: CardVideoShortProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositeCardVideoBlock: (props: CardVideoShortProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 export {};
 //# sourceMappingURL=block.d.ts.map

package/dist/composite/card/video/short.d.ts

@@ -1,6 +1,6 @@
 interface CardVideoShortProps {
     video: HTMLVideoElement;
 }
-export declare const createCompositeCardVideoShort: (props: CardVideoShortProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositeCardVideoShort: (props: CardVideoShortProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 export {};
 //# sourceMappingURL=short.d.ts.map

package/dist/composite/carousel/wide/container.d.ts

@@ -4,7 +4,7 @@ export declare const createContainer: (props: CarouselWideProps, onIndicatorClic
         position: (index: number) => void;
         element: HTMLElement;
         styles: string;
-        update?: (props: Partial<import('@universityofmaryland/web-builder-library').BuilderOptions>) => void;
+        update?: (props: Partial<import('../../../../builder/dist/index.d.ts').BuilderOptions>) => void;
         destroy?: () => void;
         events?: Record<string, Function>;
     };

package/dist/composite/carousel/wide/controls.d.ts

@@ -1,11 +1,11 @@
 import { CarouselWideProps } from '../_types';
-export declare const createControlButton: (type: "prev" | "next", isThemeDark?: boolean) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createControlButton: (type: "prev" | "next", isThemeDark?: boolean) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 export declare const createIndicator: (slides: CarouselWideProps["slides"], isThemeDark?: boolean, callback?: (index: number) => void) => import('./_elementModel').ElementWithRefsReturn<{
     indicator: {
         position: (index: number) => void;
         element: HTMLElement;
         styles: string;
-        update?: (props: Partial<import('@universityofmaryland/web-builder-library').BuilderOptions>) => void;
+        update?: (props: Partial<import('../../../../builder/dist/index.d.ts').BuilderOptions>) => void;
         destroy?: () => void;
         events?: Record<string, Function>;
     };

package/dist/composite/carousel/wide/index.d.ts

@@ -1,3 +1,3 @@
 import { CarouselWideProps } from '../_types';
-export declare const createCompositeCarouselWide: (props: CarouselWideProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositeCarouselWide: (props: CarouselWideProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/footer/base.d.ts

@@ -1,4 +1,4 @@
 import { FooterProps } from './_types';
 import { ElementModel } from '../../_types';
-export declare const createCompositeFooterBase: (props: FooterProps, childElements: Array<ElementModel>) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositeFooterBase: (props: FooterProps, childElements: Array<ElementModel>) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=base.d.ts.map

package/dist/composite/footer/elements/utility-section/index.d.ts

@@ -1,3 +1,3 @@
 import { UtilityProps } from '../../_types';
-export declare const createCompositeFooterUtilitySection: (props: Pick<UtilityProps, "isThemeLight" | "slotUtilityLinks">) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositeFooterUtilitySection: (props: Pick<UtilityProps, "isThemeLight" | "slotUtilityLinks">) => import('../../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/footer/mega.d.ts

@@ -1,3 +1,3 @@
 import { FooterProps } from './_types';
-export declare const createCompositeFooterMega: (props: FooterProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositeFooterMega: (props: FooterProps) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=mega.d.ts.map

package/dist/composite/footer/simple.d.ts

@@ -1,3 +1,3 @@
 import { FooterProps } from './_types';
-export declare const createCompositeFooterSimple: (props: FooterProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositeFooterSimple: (props: FooterProps) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=simple.d.ts.map

package/dist/composite/footer/visual.d.ts

@@ -1,3 +1,3 @@
 import { FooterProps } from './_types';
-export declare const createCompositeFooterVisual: (props: FooterProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositeFooterVisual: (props: FooterProps) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=visual.d.ts.map

package/dist/composite/hero/custom/expand.d.ts

@@ -12,7 +12,7 @@ export declare const createCompositeHeroExpand: (props: HeroExpandProps) => {
     };
     element: HTMLElement;
     styles: string;
-    update?: (props: Partial<import('@universityofmaryland/web-builder-library').BuilderOptions>) => void;
+    update?: (props: Partial<import('../../../../builder/dist/index.d.ts').BuilderOptions>) => void;
     destroy?: () => void;
 };
 export {};

package/dist/composite/hero/custom/grid.d.ts

@@ -15,6 +15,6 @@ interface HeroGridProps {
     center: CenterProps | null;
     isThemeDark?: boolean;
 }
-export declare const createCompositeHeroGrid: (props: HeroGridProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement> | null;
+export declare const createCompositeHeroGrid: (props: HeroGridProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement> | null;
 export {};
 //# sourceMappingURL=grid.d.ts.map

package/dist/composite/hero/custom/video-arrow.d.ts

@@ -9,7 +9,7 @@ export declare const createCompositeHeroVideoArrow: (props: HeroVideoArrowProps)
     };
     element: HTMLElement;
     styles: string;
-    update?: (props: Partial<import('@universityofmaryland/web-builder-library').BuilderOptions>) => void;
+    update?: (props: Partial<import('../../../../builder/dist/index.d.ts').BuilderOptions>) => void;
     destroy?: () => void;
 };
 export {};

package/dist/composite/hero/logo.d.ts

@@ -1,3 +1,3 @@
 import { HeroLogoProps } from './_types';
-export declare const createCompositeHeroLogo: (props: HeroLogoProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositeHeroLogo: (props: HeroLogoProps) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=logo.d.ts.map

package/dist/composite/hero/minimal.d.ts

@@ -1,3 +1,3 @@
 import { HeroMinimalProps } from './_types';
-export declare const createCompositeHeroMinimal: (props: HeroMinimalProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositeHeroMinimal: (props: HeroMinimalProps) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=minimal.d.ts.map

package/dist/composite/hero/overlay.d.ts

@@ -1,3 +1,3 @@
 import { HeroOverlayProps } from './_types';
-export declare const createCompositeHeroOverlay: (props: HeroOverlayProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositeHeroOverlay: (props: HeroOverlayProps) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=overlay.d.ts.map

package/dist/composite/hero/stacked.d.ts

@@ -1,3 +1,3 @@
 import { HeroStackedProps } from './_types';
-export declare const createCompositeHeroStacked: (props: HeroStackedProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositeHeroStacked: (props: HeroStackedProps) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=stacked.d.ts.map

package/dist/composite/hero/standard.d.ts

@@ -1,3 +1,3 @@
 import { HeroStandardProps } from './_types';
-export declare const createCompositeHeroStandard: (props: HeroStandardProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositeHeroStandard: (props: HeroStandardProps) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=standard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"small.js","sources":["../../../../source/composite/layout/section-intro/small.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type ElementModel } from '../../../_types';\nimport { SimpleRichTextOptions } from '../../../../../styles/dist/element/text/rich';\n\nexport interface SectionIntroProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  text?: HTMLElement | null;\n  hasSeparator?: boolean;\n  isThemeDark?: boolean;\n}\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'\n  >,\n): ElementModel<HTMLElement> => {\n  const { headline, text, actions, 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().withClassName(\n    'intro-default-container-text',\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' | 'hasSeparator' | 'headline' | 'text' | 'actions'\n  >,\n): ElementModel<HTMLElement> => {\n  const { hasSeparator } = 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    })\n    .build();\n};\n\nexport const createCompositeLayoutSectionIntroSmall = (\n  props: SectionIntroProps,\n) => createContainer(props);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"small.js","sources":["../../../../source/composite/layout/section-intro/small.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type ElementModel } from '../../../_types';\nimport { type SimpleRichTextOptions } from '@universityofmaryland/web-styles-library/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}\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'\n  >,\n): ElementModel<HTMLElement> => {\n  const { headline, text, actions, 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().withClassName(\n    'intro-default-container-text',\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' | 'hasSeparator' | 'headline' | 'text' | 'actions'\n  >,\n): ElementModel<HTMLElement> => {\n  const { hasSeparator } = 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    })\n    .build();\n};\n\nexport const createCompositeLayoutSectionIntroSmall = (\n  props: SectionIntroProps,\n) => createContainer(props);\n"],"names":[],"mappings":";;;;;AAgBA,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,aAAa,CACjB,UACqC;AACrC,QAAM,EAAE,MAAM,UAAU,YAAA,IAAgB;AACxC,QAAM,wBAA+C;AAAA,IACnD,MAAM;AAAA,IACN,OAAO,MAAM,UAAU,WAAW;AAAA,EAAA;AAEpC,MAAI,CAAC,KAAM,QAAO;AAClB,MAAI,CAAC,SAAU,uBAAsB,OAAO;AAE5C,SAAO,IAAI,eAAe,IAAI,EAC3B,OAAO,OAAO,QAAQ,KAAK,KAAK,cAAc,qBAAqB,CAAC,EACpE,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,OAAO,GAAG;AAAA,QACT,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,MAG3B,CAAC,UAAU,GAAG;AAAA,QACZ,GAAI,CAAC,YAAY;AAAA,UACf,GAAG,WAAW,KAAK,gBAAgB;AAAA,UACnC,OAAO,MAAM,MAAM;AAAA,UAEnB,GAAI,eAAe;AAAA,YACjB,OAAO,MAAM,MAAM;AAAA,UAAA;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,gBAAgB,CACpB,UACqC;AACrC,QAAM,EAAE,YAAY;AACpB,MAAI,CAAC,QAAS,QAAO;AAErB,SAAO,IAAI,eAAe,OAAO,EAC9B,OAAO,OAAO,OAAO,KAAK,OAAO,UAAU,EAC3C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,gBAAgB;AAAA,MAChB,YAAY;AAAA,MAEZ,CAAC,OAAO,GAAG;AAAA,QACT,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,sBAAsB,CAC1B,UAI8B;AAC9B,QAAM,EAAE,UAAU,MAAM,SAAS,gBAAgB;AAEjD,QAAM,kBAAkB,eAAe,EAAE,UAAU,aAAa;AAChE,QAAM,cAAc,WAAW,EAAE,MAAM,UAAU,aAAa;AAC9D,QAAM,iBAAiB,cAAc,EAAE,SAAS;AAEhD,QAAM,YAAY,IAAI,eAAA,EAAiB;AAAA,IACrC;AAAA,EAAA;AAGF,MAAI,iBAAiB;AACnB,cAAU,UAAU,eAAe;AAAA,EACrC;AAEA,MAAI,aAAa;AACf,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,gBAAgB;AAClB,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,SAAO,UAAU,MAAA;AACnB;AAEA,MAAM,gBAAgB,CACpB,UAI8B;AAC9B,QAAM,uBAAuB,oBAAoB,KAAK;AAEtD,SAAO,IAAI,iBACR,cAAc,iCAAiC,EAC/C,UAAU,oBAAoB,EAC9B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb,CACD,EACA,MAAA;AACL;AAEA,MAAM,kBAAkB,CACtB,UAI8B;AAC9B,QAAM,EAAE,iBAAiB;AAEzB,QAAM,iBAAiB,cAAc,KAAK;AAE1C,SAAO,IAAI,iBACR,cAAc,yBAAyB,EACvC,UAAU,cAAc,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU,MAAM,QAAQ,SAAS;AAAA,MACjC,QAAQ;AAAA,MAER,GAAI,gBAAgB;AAAA,QAClB,YAAY,MAAM,QAAQ,KAAK;AAAA,QAC/B,UAAU;AAAA,MAAA;AAAA,MAGZ,CAAC,UAAU,GAAG;AAAA,QACZ,GAAI,gBAAgB;AAAA,UAClB,SAAS;AAAA,UACT,iBAAiB,MAAM,MAAM;AAAA,UAC7B,UAAU;AAAA,UACV,QAAQ,MAAM,QAAQ,KAAK;AAAA,UAC3B,OAAO;AAAA,UACP,MAAM;AAAA,UACN,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEO,MAAM,yCAAyC,CACpD,UACG,gBAAgB,KAAK;"}

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

@@ -4,7 +4,7 @@ export declare const createCompositeMediaGif: ({ image }: {
     destroy: () => void;
     element: HTMLDivElement;
     styles: string;
-    update?: (props: Partial<import('@universityofmaryland/web-builder-library').BuilderOptions>) => void;
+    update?: (props: Partial<import('../../../../builder/dist/index.d.ts').BuilderOptions>) => void;
     events?: Record<string, Function>;
 };
 //# sourceMappingURL=gif.d.ts.map

package/dist/composite/navigation/elements/item/index.js

@@ -156,7 +156,7 @@ const DropdownStyles = `
     position: absolute;
     top: 100%;
     left: 50%;
-    transform: translateX(-50%);v 
+    transform: translateX(-50%);
     min-width: 200px;
     width: auto;
     padding-top: ${token.spacing.sm};