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

package/dist/composite/accordion/item.mjs

@@ -1,315 +0,0 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
-import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
-import { debounce } from "@universityofmaryland/web-utilities-library/performance";
-const { token } = Styles;
-const SMALL = 480;
-const ELEMENT_NAME = "umd-element-accordion-item";
-const ELEMENT_DECLARATION = "accordion-declaration";
-const ELEMENT_CONTAINER = "accordion-container";
-const ELEMENT_HEADLINE = "accordion-headline";
-const ELEMENT_BODY_WRAPPER = "accordion-body-wrapper";
-const ELEMENT_BODY = "accordion-body";
-const ATTRIBUTE_THEME = "theme";
-const THEME_DARK = "dark";
-const ANIMATION_TIME = 500;
-const IS_THEME_DARK = `[${ATTRIBUTE_THEME}='${THEME_DARK}']`;
-const OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;
-const OVERWRITE_THEME_DARK_BODY_WRAPPER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY_WRAPPER}`;
-const OVERWRITE_THEME_DARK_BODY = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY}`;
-const OverwriteThemeDark = `
-  ${OVERWRITE_THEME_DARK_HEADLINE} {
-    background-color: ${token.color.gray.darker};
-  }
-
-  ${OVERWRITE_THEME_DARK_HEADLINE} > * {
-    color: ${token.color.white}
-  }
-
-  ${OVERWRITE_THEME_DARK_HEADLINE}:before,
-  ${OVERWRITE_THEME_DARK_HEADLINE}:after {
-    background-color: ${token.color.gold};
-  }
-
-  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'],
-  ${OVERWRITE_THEME_DARK_HEADLINE}:hover,
-  ${OVERWRITE_THEME_DARK_HEADLINE}:focus {
-    background-color: ${token.color.gray.darker};
-    border-top: 2px solid ${token.color.gold};
-  }
-
-  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'] > *,
-  ${OVERWRITE_THEME_DARK_HEADLINE}:hover > *,
-  ${OVERWRITE_THEME_DARK_HEADLINE}:focus > * {
-    color: ${token.color.gold};
-  }
-
-  ${OVERWRITE_THEME_DARK_BODY_WRAPPER} {
-    background-color: ${token.color.gray.darker};
-  }
-
-  ${OVERWRITE_THEME_DARK_BODY},
-  ${OVERWRITE_THEME_DARK_BODY} * {
-    color: ${token.color.white};
-  }
-`;
-const bodyStyles = `
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_BODY_WRAPPER}`]: Styles.typography.sans.medium
-  }
-})}
-
-  .${ELEMENT_BODY_WRAPPER} {
-    background-color: ${token.color.gray.lightest};
-    height: 0;
-    overflow: hidden;
-    display: none;
-  }
-
-  .${ELEMENT_BODY} {
-    padding: ${token.spacing.md};
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    .${ELEMENT_BODY} {
-      padding: ${token.spacing.lg};
-    }
-  }
-
-  .${ELEMENT_BODY} > * {
-    margin-top: ${token.spacing.sm};
-  }
-
-  .${ELEMENT_BODY} > *:first-child {
-    margin-top: 0;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    .${ELEMENT_BODY} > * {
-      margin-top: ${token.spacing.lg};
-    }
-  }
-`;
-const headlineStyles = `
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_HEADLINE}`]: Styles.typography.sans.large
-  }
-})}
-
-  .${ELEMENT_HEADLINE} {
-    display: flex;
-    border-top: 2px solid transparent;
-    padding: ${token.spacing.md};
-    padding-right: ${token.spacing["4xl"]};
-    background-color: ${token.color.gray.lightest};
-    position: relative;
-    transition: background 0.5s, border 0.5s, color 0.5s, padding 0.5s;
-    width: 100%;
-    text-align: left;
-    color: ${token.color.black};
-  }
-
-  .${ELEMENT_HEADLINE} > * {
-    color: ${token.color.black};
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    .${ELEMENT_HEADLINE} {
-      padding: ${token.spacing.lg};
-      padding-right: ${token.spacing["6xl"]}
-    }
-  }
-
-  .${ELEMENT_HEADLINE}:before,
-  .${ELEMENT_HEADLINE}:after {
-    content: '';
-    background-color: ${token.color.red};
-    position: absolute;
-    right: ${token.spacing.md};
-    transition: background 0.5s, height 0.5s, right 0.5s, top 0.5s,
-    transform 0.5s, width 0.5s;
-  }
-
-  .${ELEMENT_HEADLINE}:before {
-    height: 4px;
-    top: calc(50% - 2px);
-    width: 16px;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    .${ELEMENT_HEADLINE}:before {
-      width: 20px;
-      right: 32px;
-    }
-  }
-
-  .${ELEMENT_HEADLINE}:after {
-    height: 16px;
-    top: calc(50% - 8px);
-    right: calc(${token.spacing.md} + 6px);
-    width: 4px;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    .${ELEMENT_HEADLINE}:after {
-      height: 20px;
-      top: calc(50% - 10px);
-      right: calc(${token.spacing.lg} + 8px);
-    }
-  }
-
-  .${ELEMENT_HEADLINE}[aria-expanded='true'],
-  .${ELEMENT_HEADLINE}:hover,
-  .${ELEMENT_HEADLINE}:focus {
-    background-color: ${token.color.gray.lightest};
-    border-top: 2px solid ${token.color.red};
-  }
-
-  .${ELEMENT_HEADLINE}[aria-expanded='true'] > *,
-  .${ELEMENT_HEADLINE}:hover > *,
-  .${ELEMENT_HEADLINE}:focus > * {
-    color: ${token.color.red};
-  }
-
-  .${ELEMENT_HEADLINE}[aria-expanded='true']:after {
-    transform: rotate(90deg);
-  }
-`;
-const STYLES_ACCORDION_ELEMENT = `
-  .${ELEMENT_DECLARATION} {
-    container: ${ELEMENT_NAME} / inline-size;
-  }
-
-  ${headlineStyles}
-  ${bodyStyles}
-  ${OverwriteThemeDark}
-`;
-const CreateBody = ({ text, isOpen }) => {
-  const contentWrapper = document.createElement("div");
-  contentWrapper.classList.add(ELEMENT_BODY_WRAPPER);
-  if (text) {
-    const wrapper = document.createElement("div");
-    wrapper.classList.add(ELEMENT_BODY);
-    contentWrapper.ariaHidden = isOpen ? "false" : "true";
-    wrapper.appendChild(text);
-    contentWrapper.appendChild(wrapper);
-    return contentWrapper;
-  }
-  return null;
-};
-const CreateHeadline = ({
-  headline,
-  isOpen,
-  open,
-  close
-}) => {
-  const headlineContainer = document.createElement("button");
-  headlineContainer.classList.add(ELEMENT_HEADLINE);
-  headlineContainer.ariaExpanded = isOpen ? "true" : "false";
-  if (headline) {
-    headlineContainer.appendChild(headline);
-    headlineContainer.addEventListener("click", () => {
-      const isExpanded = headlineContainer.ariaExpanded == "true";
-      if (isExpanded) {
-        close({ hasAnimation: true });
-      } else {
-        open({ hasAnimation: true });
-      }
-    });
-    return headlineContainer;
-  }
-  return null;
-};
-const ActionAnimation = ({
-  container,
-  isOpening = true,
-  hasAnimation = true
-}) => {
-  const headlineContainer = container.querySelector(
-    "button"
-  );
-  const bodyWrapperElement = container.querySelector(
-    `.${ELEMENT_BODY_WRAPPER}`
-  );
-  const bodyElement = container.querySelector(
-    `.${ELEMENT_BODY}`
-  );
-  if (!headlineContainer || !bodyWrapperElement || !bodyElement) {
-    throw new Error("headlineContainer or bodyWrapperElement is not found");
-  }
-  if (hasAnimation)
-    bodyWrapperElement.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;
-  if (isOpening) {
-    bodyWrapperElement.style.display = "block";
-    setTimeout(() => {
-      headlineContainer.ariaExpanded = "true";
-      bodyWrapperElement.ariaHidden = "false";
-    }, 100);
-  } else {
-    headlineContainer.ariaExpanded = "false";
-    bodyWrapperElement.ariaHidden = "true";
-    setTimeout(() => {
-      bodyWrapperElement.style.display = "none";
-    }, ANIMATION_TIME + 50);
-  }
-  setTimeout(() => {
-    const bodyHeight = bodyElement.offsetHeight;
-    bodyWrapperElement.style.height = isOpening ? `${bodyHeight}px` : "0";
-  }, 100);
-  setTimeout(() => {
-    bodyWrapperElement.style.transition = "none";
-  }, 100 + ANIMATION_TIME);
-};
-const item = (props) => (() => {
-  const { isThemeDark, isThemeLight, isStateOpen = false } = props;
-  const declaration = document.createElement("div");
-  const container = document.createElement("div");
-  let isOpen = isStateOpen;
-  const open = (props2) => {
-    ActionAnimation({ ...props2, container, isOpening: true });
-    isOpen = true;
-  };
-  const close = (props2) => {
-    ActionAnimation({ ...props2, container, isOpening: false });
-    isOpen = false;
-  };
-  const EventSize = () => {
-    if (!isOpen) return;
-    const bodyElement = container.querySelector(
-      `.${ELEMENT_BODY}`
-    );
-    const bodyWrapperElement = container.querySelector(
-      `.${ELEMENT_BODY_WRAPPER}`
-    );
-    bodyWrapperElement.style.height = `${bodyElement.offsetHeight}px`;
-  };
-  const resize = () => {
-    EventSize();
-  };
-  const headline = CreateHeadline({ ...props, isOpen, open, close });
-  const body = CreateBody({ ...props, isOpen });
-  if (headline) container.appendChild(headline);
-  if (body) container.appendChild(body);
-  container.classList.add(ELEMENT_CONTAINER);
-  if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, "light");
-  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, "dark");
-  declaration.appendChild(container);
-  declaration.classList.add(ELEMENT_DECLARATION);
-  if (isStateOpen) {
-    open({ hasAnimation: false });
-  }
-  window.addEventListener("resize", debounce(resize, 20));
-  return {
-    element: declaration,
-    styles: STYLES_ACCORDION_ELEMENT,
-    events: {
-      open,
-      close
-    }
-  };
-})();
-export {
-  item as default
-};
-//# sourceMappingURL=item.mjs.map

package/dist/composite/accordion/item.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"item.mjs","sources":["../../../source/composite/accordion/item.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\n\ntype TypeHeadlineText = { headline?: HTMLElement | null };\ntype TypeBodyText = { text?: HTMLElement | null };\ntype TypeAccordionState = { isOpen: boolean };\ntype StateProps = {\n  hasAnimation?: boolean;\n};\n\ntype TypeAccordionProps = TypeHeadlineText &\n  TypeBodyText & {\n    isThemeLight?: boolean;\n    isThemeDark?: boolean;\n    isStateOpen: boolean;\n  };\n\ntype TypeHeadlineProps = TypeHeadlineText &\n  TypeAccordionState & {\n    close: (arg: StateProps) => void;\n    open: (arg: StateProps) => void;\n  };\n\ntype TypeBodyProps = TypeBodyText & TypeAccordionState;\n\ntype ActionAnimationProps = StateProps & {\n  container: HTMLDivElement;\n  isOpening: boolean;\n};\n\nconst { token } = Styles;\n\nconst SMALL = 480;\n\nconst ELEMENT_NAME = 'umd-element-accordion-item';\nconst ELEMENT_DECLARATION = 'accordion-declaration';\nconst ELEMENT_CONTAINER = 'accordion-container';\nconst ELEMENT_HEADLINE = 'accordion-headline';\nconst ELEMENT_BODY_WRAPPER = 'accordion-body-wrapper';\nconst ELEMENT_BODY = 'accordion-body';\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst ANIMATION_TIME = 500;\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}='${THEME_DARK}']`;\n\nconst OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_BODY_WRAPPER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_BODY = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_HEADLINE} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE} > * {\n    color: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}:before,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:after {\n    background-color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'],\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus {\n    background-color: ${token.color.gray.darker};\n    border-top: 2px solid ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'] > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus > * {\n    color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY_WRAPPER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY},\n  ${OVERWRITE_THEME_DARK_BODY} * {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst bodyStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_BODY_WRAPPER}`]: Styles.typography.sans.medium\n    },\n  })}\n\n  .${ELEMENT_BODY_WRAPPER} {\n    background-color: ${token.color.gray.lightest};\n    height: 0;\n    overflow: hidden;\n    display: none;\n  }\n\n  .${ELEMENT_BODY} {\n    padding: ${token.spacing.md};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} {\n      padding: ${token.spacing.lg};\n    }\n  }\n\n  .${ELEMENT_BODY} > * {\n    margin-top: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_BODY} > *:first-child {\n    margin-top: 0;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} > * {\n      margin-top: ${token.spacing.lg};\n    }\n  }\n`;\n\n// prettier-ignore\nconst headlineStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_HEADLINE}`]: Styles.typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_HEADLINE} {\n    display: flex;\n    border-top: 2px solid transparent;\n    padding: ${token.spacing.md};\n    padding-right: ${token.spacing['4xl']};\n    background-color: ${token.color.gray.lightest};\n    position: relative;\n    transition: background 0.5s, border 0.5s, color 0.5s, padding 0.5s;\n    width: 100%;\n    text-align: left;\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_HEADLINE} > * {\n    color: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE} {\n      padding: ${token.spacing.lg};\n      padding-right: ${token.spacing['6xl']}\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:before,\n  .${ELEMENT_HEADLINE}:after {\n    content: '';\n    background-color: ${token.color.red};\n    position: absolute;\n    right: ${token.spacing.md};\n    transition: background 0.5s, height 0.5s, right 0.5s, top 0.5s,\n    transform 0.5s, width 0.5s;\n  }\n\n  .${ELEMENT_HEADLINE}:before {\n    height: 4px;\n    top: calc(50% - 2px);\n    width: 16px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:before {\n      width: 20px;\n      right: 32px;\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:after {\n    height: 16px;\n    top: calc(50% - 8px);\n    right: calc(${token.spacing.md} + 6px);\n    width: 4px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:after {\n      height: 20px;\n      top: calc(50% - 10px);\n      right: calc(${token.spacing.lg} + 8px);\n    }\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'],\n  .${ELEMENT_HEADLINE}:hover,\n  .${ELEMENT_HEADLINE}:focus {\n    background-color: ${token.color.gray.lightest};\n    border-top: 2px solid ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'] > *,\n  .${ELEMENT_HEADLINE}:hover > *,\n  .${ELEMENT_HEADLINE}:focus > * {\n    color: ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true']:after {\n    transform: rotate(90deg);\n  }\n`;\n\nconst STYLES_ACCORDION_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${headlineStyles}\n  ${bodyStyles}\n  ${OverwriteThemeDark}\n`;\n\nconst CreateBody = ({ text, isOpen }: TypeBodyProps) => {\n  const contentWrapper = document.createElement('div');\n\n  contentWrapper.classList.add(ELEMENT_BODY_WRAPPER);\n\n  if (text) {\n    const wrapper = document.createElement('div');\n    wrapper.classList.add(ELEMENT_BODY);\n    contentWrapper.ariaHidden = isOpen ? 'false' : 'true';\n    wrapper.appendChild(text);\n    contentWrapper.appendChild(wrapper);\n\n    return contentWrapper;\n  }\n\n  return null;\n};\n\nconst CreateHeadline = ({\n  headline,\n  isOpen,\n  open,\n  close,\n}: TypeHeadlineProps) => {\n  const headlineContainer = document.createElement('button');\n\n  headlineContainer.classList.add(ELEMENT_HEADLINE);\n  headlineContainer.ariaExpanded = isOpen ? 'true' : 'false';\n\n  if (headline) {\n    headlineContainer.appendChild(headline);\n\n    headlineContainer.addEventListener('click', () => {\n      const isExpanded = headlineContainer.ariaExpanded == 'true';\n\n      if (isExpanded) {\n        close({ hasAnimation: true });\n      } else {\n        open({ hasAnimation: true });\n      }\n    });\n\n    return headlineContainer;\n  }\n\n  return null;\n};\n\nconst ActionAnimation = ({\n  container,\n  isOpening = true,\n  hasAnimation = true,\n}: ActionAnimationProps) => {\n  const headlineContainer = container.querySelector(\n    'button',\n  ) as HTMLButtonElement;\n  const bodyWrapperElement = container.querySelector(\n    `.${ELEMENT_BODY_WRAPPER}`,\n  ) as HTMLElement;\n  const bodyElement = container.querySelector(\n    `.${ELEMENT_BODY}`,\n  ) as HTMLElement;\n\n  if (!headlineContainer || !bodyWrapperElement || !bodyElement) {\n    throw new Error('headlineContainer or bodyWrapperElement is not found');\n  }\n\n  if (hasAnimation)\n    bodyWrapperElement.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n  if (isOpening) {\n    bodyWrapperElement.style.display = 'block';\n\n    setTimeout(() => {\n      headlineContainer.ariaExpanded = 'true';\n      bodyWrapperElement.ariaHidden = 'false';\n    }, 100);\n  } else {\n    headlineContainer.ariaExpanded = 'false';\n    bodyWrapperElement.ariaHidden = 'true';\n\n    setTimeout(() => {\n      bodyWrapperElement.style.display = 'none';\n    }, ANIMATION_TIME + 50);\n  }\n\n  setTimeout(() => {\n    const bodyHeight = bodyElement.offsetHeight;\n    bodyWrapperElement.style.height = isOpening ? `${bodyHeight}px` : '0';\n  }, 100);\n\n  setTimeout(() => {\n    bodyWrapperElement.style.transition = 'none';\n  }, 100 + ANIMATION_TIME);\n};\n\nexport default (props: TypeAccordionProps) =>\n  (() => {\n    const { isThemeDark, isThemeLight, isStateOpen = false } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    let isOpen = isStateOpen;\n\n    const open = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: true });\n      isOpen = true;\n    };\n    const close = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: false });\n      isOpen = false;\n    };\n    const EventSize = () => {\n      if (!isOpen) return;\n      const bodyElement = container.querySelector(\n        `.${ELEMENT_BODY}`,\n      ) as HTMLElement;\n      const bodyWrapperElement = container.querySelector(\n        `.${ELEMENT_BODY_WRAPPER}`,\n      ) as HTMLElement;\n\n      bodyWrapperElement.style.height = `${bodyElement.offsetHeight}px`;\n    };\n    const resize = () => {\n      EventSize();\n    };\n\n    const headline = CreateHeadline({ ...props, isOpen, open, close });\n    const body = CreateBody({ ...props, isOpen });\n\n    if (headline) container.appendChild(headline);\n    if (body) container.appendChild(body);\n\n    container.classList.add(ELEMENT_CONTAINER);\n    if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, 'light');\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, 'dark');\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_DECLARATION);\n\n    if (isStateOpen) {\n      open({ hasAnimation: false });\n    }\n\n    window.addEventListener('resize', debounce(resize, 20));\n\n    return {\n      element: declaration,\n      styles: STYLES_ACCORDION_ELEMENT,\n      events: {\n        open,\n        close,\n      },\n    };\n  })();\n"],"names":["props"],"mappings":"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"}

package/dist/composite/alert/elements/closeButton.mjs

@@ -1,34 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import { shrinkThenRemove } from "@universityofmaryland/web-utilities-library/animation";
-import { theme } from "@universityofmaryland/web-utilities-library/theme";
-import { close } from "@universityofmaryland/web-icons-library/controls";
-const CreateCloseButton = (props) => {
-  const { isThemeDark = false, targetSelector, onBeforeClose } = props;
-  const MEDIUM = 768;
-  const button = document.createElement("button");
-  return new ElementBuilder(button).withClassName("alert-close-button").withAttribute("aria-label", "Close alert").withAttribute("type", "button").withHTML(close).withStyles({
-    element: {
-      position: "absolute",
-      top: token.spacing.lg,
-      right: token.spacing.lg,
-      color: theme.foreground(isThemeDark),
-      ["& rect, & path"]: {
-        fill: "currentColor"
-      },
-      [`@container (max-width: ${MEDIUM}px)`]: {
-        top: token.spacing.sm,
-        right: token.spacing.sm
-      }
-    }
-  }).on("click", () => {
-    if (typeof onBeforeClose === "function") onBeforeClose();
-    const wrapper = button.closest(targetSelector);
-    if (wrapper instanceof HTMLElement)
-      shrinkThenRemove({ container: wrapper });
-  }).build();
-};
-export {
-  CreateCloseButton
-};
-//# sourceMappingURL=closeButton.mjs.map

package/dist/composite/alert/elements/closeButton.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"closeButton.mjs","sources":["../../../../source/composite/alert/elements/closeButton.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { shrinkThenRemove } from '@universityofmaryland/web-utilities-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { close as iconClose } from '@universityofmaryland/web-icons-library/controls';\nimport { AlertTextProps } from './text';\n\nexport interface CloseButtonProps extends AlertTextProps {\n  targetSelector: string;\n  onBeforeClose?: () => void;\n}\n\nexport const CreateCloseButton = (\n  props: Pick<\n    CloseButtonProps,\n    'isThemeDark' | 'targetSelector' | 'onBeforeClose'\n  >,\n) => {\n  const { isThemeDark = false, targetSelector, onBeforeClose } = props;\n\n  const MEDIUM = 768;\n  const button = document.createElement('button');\n\n  return new ElementBuilder(button)\n    .withClassName('alert-close-button')\n    .withAttribute('aria-label', 'Close alert')\n    .withAttribute('type', 'button')\n    .withHTML(iconClose)\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: token.spacing.lg,\n        right: token.spacing.lg,\n        color: theme.foreground(isThemeDark),\n        ['& rect, & path']: {\n          fill: 'currentColor',\n        },\n\n        [`@container (max-width: ${MEDIUM}px)`]: {\n          top: token.spacing.sm,\n          right: token.spacing.sm,\n        },\n      },\n    })\n    .on('click', () => {\n      if (typeof onBeforeClose === 'function') onBeforeClose();\n      const wrapper = button.closest(targetSelector);\n      if (wrapper instanceof HTMLElement)\n        shrinkThenRemove({ container: wrapper });\n    })\n    .build();\n};\n"],"names":["iconClose"],"mappings":";;;;;AAYO,MAAM,oBAAoB,CAC/B,UAIG;AACH,QAAM,EAAE,cAAc,OAAO,gBAAgB,kBAAkB;AAE/D,QAAM,SAAS;AACf,QAAM,SAAS,SAAS,cAAc,QAAQ;AAE9C,SAAO,IAAI,eAAe,MAAM,EAC7B,cAAc,oBAAoB,EAClC,cAAc,cAAc,aAAa,EACzC,cAAc,QAAQ,QAAQ,EAC9B,SAASA,KAAS,EAClB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAK,MAAM,QAAQ;AAAA,MACnB,OAAO,MAAM,QAAQ;AAAA,MACrB,OAAO,MAAM,WAAW,WAAW;AAAA,MACnC,CAAC,gBAAgB,GAAG;AAAA,QAClB,MAAM;AAAA,MAAA;AAAA,MAGR,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,QACvC,KAAK,MAAM,QAAQ;AAAA,QACnB,OAAO,MAAM,QAAQ;AAAA,MAAA;AAAA,IACvB;AAAA,EACF,CACD,EACA,GAAG,SAAS,MAAM;AACjB,QAAI,OAAO,kBAAkB,WAAY,eAAA;AACzC,UAAM,UAAU,OAAO,QAAQ,cAAc;AAC7C,QAAI,mBAAmB;AACrB,uBAAiB,EAAE,WAAW,SAAS;AAAA,EAC3C,CAAC,EACA,MAAA;AACL;"}

package/dist/composite/alert/elements/text.mjs

@@ -1,68 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import * as animation from "@universityofmaryland/web-styles-library/animation";
-import * as typography from "@universityofmaryland/web-styles-library/typography";
-import * as layout from "@universityofmaryland/web-styles-library/layout";
-import * as elementStyles from "@universityofmaryland/web-styles-library/element";
-import { theme } from "@universityofmaryland/web-utilities-library/theme";
-const createHeadline = (props) => {
-  const { headline, isThemeDark } = props;
-  if (!headline) return;
-  const styleElements = {
-    ...typography.sans.compose("large", {
-      theme: theme.fontColor(isThemeDark)
-    }),
-    ...animation.line.composeSlideUnder({
-      color: theme.foreground(isThemeDark)
-    })
-  };
-  return new ElementBuilder(headline).styled(styleElements).withStyles({
-    element: {
-      paddingRight: token.spacing.md
-    },
-    siblingAfter: { marginTop: token.spacing.sm }
-  }).build();
-};
-const createText = (props) => {
-  const { text, isThemeDark } = props;
-  if (!text) return;
-  return new ElementBuilder(text).styled(
-    elementStyles.text.rich.composeSimple({
-      theme: theme.fontColor(isThemeDark)
-    })
-  ).withStyles({
-    element: {
-      fontWeight: 500
-    },
-    siblingAfter: { marginTop: token.spacing.sm }
-  }).build();
-};
-const createActions = (props) => {
-  const { actions } = props;
-  if (!actions) return;
-  return new ElementBuilder(actions).styled(layout.grid.inline.tabletRows).withStyles({
-    element: {
-      [`* + &`]: {
-        marginTop: token.spacing.sm
-      }
-    }
-  }).build();
-};
-const CreateAlertText = (props) => {
-  const { headline, text, actions, isThemeDark } = props;
-  const headlineModel = createHeadline({ headline, isThemeDark });
-  const textModel = createText({ text, isThemeDark });
-  const actionsModel = createActions({ actions });
-  const childElements = [headlineModel, textModel, actionsModel].filter(
-    Boolean
-  );
-  return new ElementBuilder().withClassName("wrapper").withChildren(...childElements).withStyles({
-    element: {
-      maxWidth: token.spacing.maxWidth.small
-    }
-  }).build();
-};
-export {
-  CreateAlertText
-};
-//# sourceMappingURL=text.mjs.map

package/dist/composite/alert/elements/text.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"text.mjs","sources":["../../../../source/composite/alert/elements/text.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport type { ElementModel } from '../../../_types';\n\nexport interface AlertTextProps {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n}\n\nconst createHeadline = (\n  props: Pick<AlertTextProps, 'headline' | 'isThemeDark'>,\n) => {\n  const { headline, isThemeDark } = props;\n  if (!headline) return;\n\n  const styleElements = {\n    ...typography.sans.compose('large', {\n      theme: theme.fontColor(isThemeDark),\n    }),\n    ...animation.line.composeSlideUnder({\n      color: theme.foreground(isThemeDark),\n    }),\n  };\n\n  return new ElementBuilder(headline)\n    .styled(styleElements)\n    .withStyles({\n      element: {\n        paddingRight: token.spacing.md,\n      },\n      siblingAfter: { marginTop: token.spacing.sm },\n    })\n    .build();\n};\n\nconst createText = (props: Pick<AlertTextProps, 'text' | 'isThemeDark'>) => {\n  const { text, isThemeDark } = props;\n  if (!text) return;\n\n  return new ElementBuilder(text)\n    .styled(\n      elementStyles.text.rich.composeSimple({\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 500,\n      },\n      siblingAfter: { marginTop: token.spacing.sm },\n    })\n    .build();\n};\n\nconst createActions = (props: Pick<AlertTextProps, 'actions'>) => {\n  const { actions } = props;\n  if (!actions) return;\n\n  return new ElementBuilder(actions)\n    .styled(layout.grid.inline.tabletRows)\n    .withStyles({\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n      },\n    })\n    .build();\n};\n\nexport const CreateAlertText = (\n  props: Pick<AlertTextProps, 'headline' | 'text' | 'actions' | 'isThemeDark'>,\n) => {\n  const { headline, text, actions, isThemeDark } = props;\n\n  const headlineModel = createHeadline({ headline, isThemeDark });\n  const textModel = createText({ text, isThemeDark });\n  const actionsModel = createActions({ actions });\n\n  const childElements = [headlineModel, textModel, actionsModel].filter(\n    Boolean,\n  ) as ElementModel[];\n\n  return new ElementBuilder()\n    .withClassName('wrapper')\n    .withChildren(...childElements)\n    .withStyles({\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n      },\n    })\n    .build();\n};\n"],"names":[],"mappings":";;;;;;;AAgBA,MAAM,iBAAiB,CACrB,UACG;AACH,QAAM,EAAE,UAAU,YAAA,IAAgB;AAClC,MAAI,CAAC,SAAU;AAEf,QAAM,gBAAgB;AAAA,IACpB,GAAG,WAAW,KAAK,QAAQ,SAAS;AAAA,MAClC,OAAO,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,IACD,GAAG,UAAU,KAAK,kBAAkB;AAAA,MAClC,OAAO,MAAM,WAAW,WAAW;AAAA,IAAA,CACpC;AAAA,EAAA;AAGH,SAAO,IAAI,eAAe,QAAQ,EAC/B,OAAO,aAAa,EACpB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,cAAc,MAAM,QAAQ;AAAA,IAAA;AAAA,IAE9B,cAAc,EAAE,WAAW,MAAM,QAAQ,GAAA;AAAA,EAAG,CAC7C,EACA,MAAA;AACL;AAEA,MAAM,aAAa,CAAC,UAAwD;AAC1E,QAAM,EAAE,MAAM,YAAA,IAAgB;AAC9B,MAAI,CAAC,KAAM;AAEX,SAAO,IAAI,eAAe,IAAI,EAC3B;AAAA,IACC,cAAc,KAAK,KAAK,cAAc;AAAA,MACpC,OAAO,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,YAAY;AAAA,IAAA;AAAA,IAEd,cAAc,EAAE,WAAW,MAAM,QAAQ,GAAA;AAAA,EAAG,CAC7C,EACA,MAAA;AACL;AAEA,MAAM,gBAAgB,CAAC,UAA2C;AAChE,QAAM,EAAE,YAAY;AACpB,MAAI,CAAC,QAAS;AAEd,SAAO,IAAI,eAAe,OAAO,EAC9B,OAAO,OAAO,KAAK,OAAO,UAAU,EACpC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,OAAO,GAAG;AAAA,QACT,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEO,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM,EAAE,UAAU,MAAM,SAAS,gBAAgB;AAEjD,QAAM,gBAAgB,eAAe,EAAE,UAAU,aAAa;AAC9D,QAAM,YAAY,WAAW,EAAE,MAAM,aAAa;AAClD,QAAM,eAAe,cAAc,EAAE,SAAS;AAE9C,QAAM,gBAAgB,CAAC,eAAe,WAAW,YAAY,EAAE;AAAA,IAC7D;AAAA,EAAA;AAGF,SAAO,IAAI,eAAA,EACR,cAAc,SAAS,EACvB,aAAa,GAAG,aAAa,EAC7B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU,MAAM,QAAQ,SAAS;AAAA,IAAA;AAAA,EACnC,CACD,EACA,MAAA;AACL;"}

package/dist/composite/alert/globals.mjs

@@ -1,7 +0,0 @@
-const BREAKPOINTS = {
-  MEDIUM: 500
-};
-export {
-  BREAKPOINTS
-};
-//# sourceMappingURL=globals.mjs.map

package/dist/composite/alert/globals.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"globals.mjs","sources":["../../../source/composite/alert/globals.ts"],"sourcesContent":["export const BREAKPOINTS = {\n  MEDIUM: 500,\n};\n"],"names":[],"mappings":"AAAO,MAAM,cAAc;AAAA,EACzB,QAAQ;AACV;"}

package/dist/composite/alert/index.mjs

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

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

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

package/dist/composite/alert/page.mjs

@@ -1,53 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import { warning } from "@universityofmaryland/web-icons-library/indicators";
-import { theme } from "@universityofmaryland/web-utilities-library/theme";
-import { CreateAlertText } from "./elements/text.mjs";
-import { CreateCloseButton } from "./elements/closeButton.mjs";
-import { BREAKPOINTS } from "./globals.mjs";
-const { MEDIUM } = BREAKPOINTS;
-const createIcon = (iconMarkup) => new ElementBuilder().withClassName("alert-page-icon").withHTML(iconMarkup).withStyles({
-  element: {
-    display: "block",
-    fill: token.color.gold,
-    [`@container (max-width: ${MEDIUM}px)`]: {
-      position: "absolute",
-      top: "-20px"
-    }
-  }
-}).build();
-const createContainer = (props) => {
-  const { isShowIcon = true, isThemeDark } = props;
-  const textModel = CreateAlertText(props);
-  const iconModel = isShowIcon ? createIcon(warning) : null;
-  const closeButtonModel = CreateCloseButton({
-    isThemeDark: !!isThemeDark,
-    targetSelector: ".alert-page-declaration"
-  });
-  const children = [iconModel, textModel, closeButtonModel].filter(
-    Boolean
-  );
-  return new ElementBuilder().withClassName("alert-page-container").withChildren(...children).withStyles({
-    element: {
-      color: theme.foreground(isThemeDark),
-      display: "flex",
-      position: "relative",
-      padding: token.spacing.lg,
-      paddingRight: token.spacing["2xl"],
-      gap: token.spacing.lg,
-      border: `solid 4px ${token.color.gold}`,
-      [`@container (max-width: ${MEDIUM}px)`]: {
-        paddingRight: token.spacing.lg
-      }
-    }
-  }).build();
-};
-const page = (props) => new ElementBuilder().withClassName("alert-page-declaration").withChild(createContainer(props)).withStyles({
-  element: {
-    containerType: "inline-size"
-  }
-}).build();
-export {
-  page as default
-};
-//# sourceMappingURL=page.mjs.map

package/dist/composite/alert/page.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"page.mjs","sources":["../../../source/composite/alert/page.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { warning as iconWarning } from '@universityofmaryland/web-icons-library/indicators';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { CreateAlertText as AlertText, AlertTextProps } from './elements/text';\nimport { CreateCloseButton } from './elements/closeButton';\nimport { BREAKPOINTS } from './globals';\nimport { type ElementModel } from '../../_types';\n\nexport interface AlertPageProps extends AlertTextProps {\n  isThemeLight?: boolean;\n  isShowIcon?: boolean;\n}\n\nconst { MEDIUM } = BREAKPOINTS;\n\nconst createIcon = (iconMarkup: string) =>\n  new ElementBuilder()\n    .withClassName('alert-page-icon')\n    .withHTML(iconMarkup)\n    .withStyles({\n      element: {\n        display: 'block',\n        fill: token.color.gold,\n\n        [`@container (max-width: ${MEDIUM}px)`]: {\n          position: 'absolute',\n          top: '-20px',\n        },\n      },\n    })\n    .build();\n\nconst createContainer = (\n  props: Pick<\n    AlertPageProps,\n    | 'isShowIcon'\n    | 'isThemeDark'\n    | 'isThemeLight'\n    | 'headline'\n    | 'text'\n    | 'actions'\n  >,\n) => {\n  const { isShowIcon = true, isThemeDark } = props;\n\n  const textModel = AlertText(props);\n  const iconModel = isShowIcon ? createIcon(iconWarning) : null;\n  const closeButtonModel = CreateCloseButton({\n    isThemeDark: !!isThemeDark,\n    targetSelector: '.alert-page-declaration',\n  });\n\n  const children = [iconModel, textModel, closeButtonModel].filter(\n    Boolean,\n  ) as ElementModel[];\n\n  return new ElementBuilder()\n    .withClassName('alert-page-container')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        color: theme.foreground(isThemeDark),\n        display: 'flex',\n        position: 'relative',\n        padding: token.spacing.lg,\n        paddingRight: token.spacing['2xl'],\n        gap: token.spacing.lg,\n        border: `solid 4px ${token.color.gold}`,\n\n        [`@container (max-width: ${MEDIUM}px)`]: {\n          paddingRight: token.spacing.lg,\n        },\n      },\n    })\n    .build();\n};\n\nexport default (props: AlertPageProps) =>\n  new ElementBuilder()\n    .withClassName('alert-page-declaration')\n    .withChild(createContainer(props))\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n"],"names":["AlertText","iconWarning"],"mappings":";;;;;;;AAcA,MAAM,EAAE,WAAW;AAEnB,MAAM,aAAa,CAAC,eAClB,IAAI,iBACD,cAAc,iBAAiB,EAC/B,SAAS,UAAU,EACnB,WAAW;AAAA,EACV,SAAS;AAAA,IACP,SAAS;AAAA,IACT,MAAM,MAAM,MAAM;AAAA,IAElB,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,MACvC,UAAU;AAAA,MACV,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ,CAAC,EACA,MAAA;AAEL,MAAM,kBAAkB,CACtB,UASG;AACH,QAAM,EAAE,aAAa,MAAM,YAAA,IAAgB;AAE3C,QAAM,YAAYA,gBAAU,KAAK;AACjC,QAAM,YAAY,aAAa,WAAWC,OAAW,IAAI;AACzD,QAAM,mBAAmB,kBAAkB;AAAA,IACzC,aAAa,CAAC,CAAC;AAAA,IACf,gBAAgB;AAAA,EAAA,CACjB;AAED,QAAM,WAAW,CAAC,WAAW,WAAW,gBAAgB,EAAE;AAAA,IACxD;AAAA,EAAA;AAGF,SAAO,IAAI,eAAA,EACR,cAAc,sBAAsB,EACpC,aAAa,GAAG,QAAQ,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,OAAO,MAAM,WAAW,WAAW;AAAA,MACnC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,SAAS,MAAM,QAAQ;AAAA,MACvB,cAAc,MAAM,QAAQ,KAAK;AAAA,MACjC,KAAK,MAAM,QAAQ;AAAA,MACnB,QAAQ,aAAa,MAAM,MAAM,IAAI;AAAA,MAErC,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,QACvC,cAAc,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC9B;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAA,OAAe,CAAC,UACd,IAAI,eAAA,EACD,cAAc,wBAAwB,EACtC,UAAU,gBAAgB,KAAK,CAAC,EAChC,WAAW;AAAA,EACV,SAAS;AAAA,IACP,eAAe;AAAA,EAAA;AAEnB,CAAC,EACA,MAAA;"}

package/dist/composite/alert/site.mjs

@@ -1,79 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import * as layout from "@universityofmaryland/web-styles-library/layout";
-import { getLocalStorageInt, setLocalStorageTimestamp } from "@universityofmaryland/web-utilities-library/storage";
-import { theme } from "@universityofmaryland/web-utilities-library/theme";
-import { CreateAlertText } from "./elements/text.mjs";
-import { CreateCloseButton } from "./elements/closeButton.mjs";
-import { BREAKPOINTS } from "./globals.mjs";
-const { MEDIUM } = BREAKPOINTS;
-const DEFAULT_HIDE_TIME = 30;
-const ALERT_LOCAL_STORAGE_KEY = "umd-alert-site-time";
-const shouldShow = (props) => {
-  const { daysToHide } = props;
-  const now = (/* @__PURE__ */ new Date()).getTime();
-  const millisecondsPerDay = 24 * 60 * 60 * 1e3;
-  const lastClosedTime = getLocalStorageInt({
-    key: ALERT_LOCAL_STORAGE_KEY
-  });
-  if (!lastClosedTime) return false;
-  const daysUntilAlertDisplay = daysToHide ? parseInt(daysToHide) : DEFAULT_HIDE_TIME;
-  const futureTimeStamp = lastClosedTime + millisecondsPerDay * daysUntilAlertDisplay;
-  const futureTime = new Date(futureTimeStamp).getTime();
-  return futureTime > now;
-};
-const createLock = (props) => {
-  const { isThemeDark } = props;
-  const textModel = CreateAlertText(props);
-  return new ElementBuilder().styled(layout.space.horizontal.larger).withChild(textModel).withStyles({
-    element: {
-      width: "100%"
-    },
-    subElement: {
-      color: theme.foreground(isThemeDark),
-      maxWidth: token.spacing.maxWidth.large
-    }
-  }).build();
-};
-const createCloseButton = () => CreateCloseButton({
-  targetSelector: ".alert-site-declaration",
-  onBeforeClose: () => setLocalStorageTimestamp({ key: ALERT_LOCAL_STORAGE_KEY })
-});
-const createContainer = (props) => {
-  const lockElement = createLock(props);
-  const closeButtonElement = createCloseButton();
-  const children = [lockElement, closeButtonElement].filter(
-    Boolean
-  );
-  return new ElementBuilder().withClassName("alert-site-container").withChildren(...children).withStyles({
-    element: {
-      display: "flex",
-      position: "relative",
-      padding: `${token.spacing.lg} 0`,
-      gap: token.spacing.lg,
-      backgroundColor: token.color.gold,
-      borderLeft: `4px solid ${token.color.red}`,
-      [`@container (min-width: ${MEDIUM}px)`]: {
-        borderLeft: `8px solid ${token.color.red}`,
-        paddingRight: token.spacing["2xl"]
-      }
-    }
-  }).build();
-};
-const createWrapper = (container) => new ElementBuilder().withClassName("alert-site-declaration").withChild(container).withStyles({
-  element: {
-    containerType: "inline-size"
-  }
-}).build();
-const site = (props) => {
-  const containerModel = createContainer(props);
-  const declarationModel = createWrapper(containerModel);
-  if (shouldShow(props)) {
-    declarationModel.element.style.display = "none";
-  }
-  return declarationModel;
-};
-export {
-  site as default
-};
-//# sourceMappingURL=site.mjs.map

package/dist/composite/alert/site.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"site.mjs","sources":["../../../source/composite/alert/site.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport {\n  getLocalStorageInt,\n  setLocalStorageTimestamp,\n} from '@universityofmaryland/web-utilities-library/storage';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { CreateAlertText as AlertText, AlertTextProps } from './elements/text';\nimport { CreateCloseButton } from './elements/closeButton';\nimport { BREAKPOINTS } from './globals';\nimport { type ElementModel } from '../../_types';\n\nexport interface AlertSiteProps extends AlertTextProps {\n  daysToHide?: string;\n}\n\nconst { MEDIUM } = BREAKPOINTS;\nconst DEFAULT_HIDE_TIME = 30;\nconst ALERT_LOCAL_STORAGE_KEY = 'umd-alert-site-time';\n\nconst shouldShow = (props: Pick<AlertSiteProps, 'daysToHide'>) => {\n  const { daysToHide } = props;\n\n  const now = new Date().getTime();\n  const millisecondsPerDay = 24 * 60 * 60 * 1000;\n  const lastClosedTime = getLocalStorageInt({\n    key: ALERT_LOCAL_STORAGE_KEY,\n  });\n\n  if (!lastClosedTime) return false;\n\n  const daysUntilAlertDisplay = daysToHide\n    ? parseInt(daysToHide)\n    : DEFAULT_HIDE_TIME;\n  const futureTimeStamp =\n    lastClosedTime + millisecondsPerDay * daysUntilAlertDisplay;\n  const futureTime = new Date(futureTimeStamp).getTime();\n\n  return futureTime > now;\n};\n\nconst createLock = (\n  props: Pick<AlertSiteProps, 'headline' | 'text' | 'actions' | 'isThemeDark'>,\n) => {\n  const { isThemeDark } = props;\n  const textModel = AlertText(props);\n\n  return new ElementBuilder()\n    .styled(layout.space.horizontal.larger)\n    .withChild(textModel)\n    .withStyles({\n      element: {\n        width: '100%',\n      },\n      subElement: {\n        color: theme.foreground(isThemeDark),\n        maxWidth: token.spacing.maxWidth.large,\n      },\n    })\n    .build();\n};\n\nconst createCloseButton = () =>\n  CreateCloseButton({\n    targetSelector: '.alert-site-declaration',\n    onBeforeClose: () =>\n      setLocalStorageTimestamp({ key: ALERT_LOCAL_STORAGE_KEY }),\n  });\n\nconst createContainer = (\n  props: Pick<\n    AlertSiteProps,\n    'daysToHide' | 'isThemeDark' | 'headline' | 'text' | 'actions'\n  >,\n) => {\n  const lockElement = createLock(props);\n  const closeButtonElement = createCloseButton();\n  const children = [lockElement, closeButtonElement].filter(\n    Boolean,\n  ) as ElementModel[];\n\n  return new ElementBuilder()\n    .withClassName('alert-site-container')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        display: 'flex',\n        position: 'relative',\n        padding: `${token.spacing.lg} 0`,\n        gap: token.spacing.lg,\n        backgroundColor: token.color.gold,\n        borderLeft: `4px solid ${token.color.red}`,\n\n        [`@container (min-width: ${MEDIUM}px)`]: {\n          borderLeft: `8px solid ${token.color.red}`,\n          paddingRight: token.spacing['2xl'],\n        },\n      },\n    })\n    .build();\n};\n\nconst createWrapper = (container: ElementModel) =>\n  new ElementBuilder()\n    .withClassName('alert-site-declaration')\n    .withChild(container)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n\nexport default (props: AlertSiteProps) => {\n  const containerModel = createContainer(props);\n  const declarationModel = createWrapper(containerModel);\n\n  if (shouldShow(props)) {\n    (declarationModel.element as HTMLElement).style.display = 'none';\n  }\n\n  return declarationModel;\n};\n"],"names":["AlertText"],"mappings":";;;;;;;;AAiBA,MAAM,EAAE,WAAW;AACnB,MAAM,oBAAoB;AAC1B,MAAM,0BAA0B;AAEhC,MAAM,aAAa,CAAC,UAA8C;AAChE,QAAM,EAAE,eAAe;AAEvB,QAAM,OAAM,oBAAI,KAAA,GAAO,QAAA;AACvB,QAAM,qBAAqB,KAAK,KAAK,KAAK;AAC1C,QAAM,iBAAiB,mBAAmB;AAAA,IACxC,KAAK;AAAA,EAAA,CACN;AAED,MAAI,CAAC,eAAgB,QAAO;AAE5B,QAAM,wBAAwB,aAC1B,SAAS,UAAU,IACnB;AACJ,QAAM,kBACJ,iBAAiB,qBAAqB;AACxC,QAAM,aAAa,IAAI,KAAK,eAAe,EAAE,QAAA;AAE7C,SAAO,aAAa;AACtB;AAEA,MAAM,aAAa,CACjB,UACG;AACH,QAAM,EAAE,gBAAgB;AACxB,QAAM,YAAYA,gBAAU,KAAK;AAEjC,SAAO,IAAI,eAAA,EACR,OAAO,OAAO,MAAM,WAAW,MAAM,EACrC,UAAU,SAAS,EACnB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET,YAAY;AAAA,MACV,OAAO,MAAM,WAAW,WAAW;AAAA,MACnC,UAAU,MAAM,QAAQ,SAAS;AAAA,IAAA;AAAA,EACnC,CACD,EACA,MAAA;AACL;AAEA,MAAM,oBAAoB,MACxB,kBAAkB;AAAA,EAChB,gBAAgB;AAAA,EAChB,eAAe,MACb,yBAAyB,EAAE,KAAK,yBAAyB;AAC7D,CAAC;AAEH,MAAM,kBAAkB,CACtB,UAIG;AACH,QAAM,cAAc,WAAW,KAAK;AACpC,QAAM,qBAAqB,kBAAA;AAC3B,QAAM,WAAW,CAAC,aAAa,kBAAkB,EAAE;AAAA,IACjD;AAAA,EAAA;AAGF,SAAO,IAAI,eAAA,EACR,cAAc,sBAAsB,EACpC,aAAa,GAAG,QAAQ,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,SAAS,GAAG,MAAM,QAAQ,EAAE;AAAA,MAC5B,KAAK,MAAM,QAAQ;AAAA,MACnB,iBAAiB,MAAM,MAAM;AAAA,MAC7B,YAAY,aAAa,MAAM,MAAM,GAAG;AAAA,MAExC,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,QACvC,YAAY,aAAa,MAAM,MAAM,GAAG;AAAA,QACxC,cAAc,MAAM,QAAQ,KAAK;AAAA,MAAA;AAAA,IACnC;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,gBAAgB,CAAC,cACrB,IAAI,iBACD,cAAc,wBAAwB,EACtC,UAAU,SAAS,EACnB,WAAW;AAAA,EACV,SAAS;AAAA,IACP,eAAe;AAAA,EAAA;AAEnB,CAAC,EACA,MAAA;AAEL,MAAA,OAAe,CAAC,UAA0B;AACxC,QAAM,iBAAiB,gBAAgB,KAAK;AAC5C,QAAM,mBAAmB,cAAc,cAAc;AAErD,MAAI,WAAW,KAAK,GAAG;AACpB,qBAAiB,QAAwB,MAAM,UAAU;AAAA,EAC5D;AAEA,SAAO;AACT;"}

package/dist/composite/banner/index.mjs

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

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

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