@universityofmaryland/web-elements-library 1.6.9 → 1.6.10

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/item/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { handleKeyboardNavigation } from '@universityofmaryland/web-utilities-library/events';\nimport { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\n\ntype TypePrimaryLinkRequirements = {\n  primaryLinkContainer?: HTMLElement | null;\n  context?: HTMLElement;\n};\n\ntype TypeDropdownProps = {\n  dropdownLinksContainer?: HTMLElement | null;\n  dropdownCalloutsSlot?: HTMLSlotElement | null;\n};\n\ntype TypePrimaryLinkButtonProps = {\n  buttonClick: () => void;\n  navItemName: string;\n};\n\ntype TypePrimaryLinkProps = TypePrimaryLinkRequirements &\n  TypeDropdownProps &\n  TypePrimaryLinkButtonProps & {\n    hasDropdown: boolean;\n  };\n\nexport type TypeNavItemRequirements = TypeDropdownProps &\n  TypePrimaryLinkRequirements;\n\ntype TypeNavItem = TypeNavItemRequirements;\n\nconst ELEMENT_NAME = 'umd-element-nav-item';\nconst ATTRIBUTE_DROPDOWN = 'data-dropdown';\nconst ATTRIBUTE_SHOWING = 'data-showing';\nconst ATTRIBUTE_SELECTED = 'data-selected';\n\nconst BOUNDS_SHIFT = 140;\nconst MAX_COLUMN_ITEMS = 8;\n\nconst ELEMENT_NAV_ITEM_CONTAINER = `nav-item-container`;\nconst ELEMENT_PRIMARY_LINK_CONTAINER = 'nav-item-primary-link-container';\nconst ELEMENT_PRIMARLY_LINK_WRAPPER = `nav-item-primary-link-wrapper`;\nconst ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON = `nav-item-primary-link-button`;\n\nconst ELEMENT_DROPDOWN_CONTAINER = `nav-item-dropdown-container`;\nconst ELEMENT_DROPDOWN_LIST_CONTAINER = 'nav-item-dropdown-list';\nconst ELEMENT_DROPDOWN_MULTIPLE_COLUMN = 'nav-item-dropdown-multiple-column';\nconst ELEMENT_DROPDOWN_CTA_COLUMN = 'nav-item-dropdown-cta-column';\n\nconst IS_SELECTED = `[${ATTRIBUTE_SELECTED}]`;\nconst IS_SHOWING = `[${ATTRIBUTE_SHOWING}]`;\nconst IS_DROPDOWN = `[${ATTRIBUTE_DROPDOWN}]`;\n\nconst OVERWRITE_DROPDOWN_CONTAINER = `.${ELEMENT_NAV_ITEM_CONTAINER}${IS_DROPDOWN}`;\nconst OVERWRITE_IS_SHOWING_DROPDOWN_CONTAINER = `${OVERWRITE_DROPDOWN_CONTAINER}${IS_SHOWING} .${ELEMENT_DROPDOWN_CONTAINER}`;\nconst OVERWRITE_IS_SHOWING_PRIMARY_LINK = `${OVERWRITE_DROPDOWN_CONTAINER} .${ELEMENT_PRIMARLY_LINK_WRAPPER}`;\nconst OVERWRITE_IS_SHOWING_PRIMARY_BUTTON = `${OVERWRITE_DROPDOWN_CONTAINER}${IS_SHOWING} .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteDropdownStyles = `\n  ${OVERWRITE_IS_SHOWING_DROPDOWN_CONTAINER} {\n    display: block;\n  }\n\n  ${OVERWRITE_IS_SHOWING_PRIMARY_BUTTON} {\n    transform: rotate(180deg) translateY(4px);\n  }\n\n  ${OVERWRITE_IS_SHOWING_PRIMARY_LINK} > a${IS_SELECTED}:before {\n    bottom: 1px;\n    right: 20px;\n  }\n`\n\n// prettier-ignore\nconst PrimaryStyles = `\n  .${ELEMENT_PRIMARY_LINK_CONTAINER} {\n    position: relative;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} {\n    display: block;\n    position: relative;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a {\n    color: ${token.color.black};\n    font-size: ${token.font.size.base};\n    transition: color 0.2s ease-in-out;\n    line-height: 1.15em;\n    font-weight: 700;\n    text-wrap: pretty;\n    display: block;\n    display: flex;\n    align-items: flex-end;\n    text-align: right;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:hover,\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:focus {\n    color: ${token.color.red};\n   }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a[${ATTRIBUTE_SELECTED}] span {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});\n  }\n\n  .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} {\n    position: absolute;\n    top: 2px;\n    right: -20px;\n    transition: transform .5s;\n  }\n\n  .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} svg {\n    fill: ${token.color.red};\n    height: 14px;\n    width: 14px;\n    transform: rotate(0deg) translateY(0);\n    transition: fill .5s,transform .5s;\n  }\n`;\n\n// prettier-ignore\nconst DropdownMultipleColumnStyles = `\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} > * {\n    min-width: 232px;\n  }\n\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} > *:not(:first-child) {\n    margin-left: 40px;\n  }\n`\n\n// prettier-ignore\nconst DropdownListStyles = `\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} {\n    background-color: ${token.color.white};\n    border-top: 2px solid ${token.color.red};\n    padding: ${token.spacing.lg};\n    box-shadow: -1px 9px 32px -10px rgba(0,0,0,0.19);\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a {\n    display: block;\n    min-width: 120px;\n    max-width: 230px;\n    font-weight: 700;\n    font-size: 14px;\n    line-height: 1.5em;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_DROPDOWN_LIST_CONTAINER} a`]:\n      animation.line.slideUnderRed,\n    },\n  })}\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:hover,\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:focus {\n    color: ${token.color.red};\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a + a {\n    margin-top: ${token.spacing.md};\n    display: block;\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED} span:not(.sr-only) {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED}:hover span,\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED}:focus span {\n    border-bottom: none;\n  }\n`\n\n// prettier-ignore\nconst DropdownStyles = `\n  .${ELEMENT_DROPDOWN_CONTAINER} {\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);v \n    min-width: 200px;\n    width: auto;\n    padding-top: ${token.spacing.sm};\n    display: none;\n  }\n`;\n\nconst STYLES_NAV_ITEM_ELEMENT = `\n  .${ELEMENT_NAV_ITEM_CONTAINER} {\n    position: relative;\n    z-index: 9999;\n  }\n\n  ${OVERWRITE_DROPDOWN_CONTAINER} {\n    padding-right: 20px;\n  }\n\n  .${ELEMENT_NAV_ITEM_CONTAINER} a {\n    font-family: ${token.font.family.sans};\n    font-size: ${token.font.size.sm};\n    font-weight: 700;\n    color: ${token.color.black};\n    text-decoration: none;\n  }\n  \n  .${ELEMENT_NAV_ITEM_CONTAINER}:foucs-within .${ELEMENT_DROPDOWN_CONTAINER} {\n    display: block;\n  }\n\n  ${PrimaryStyles}\n  ${DropdownStyles}\n  ${DropdownMultipleColumnStyles}\n  ${DropdownListStyles}\n  ${OverwriteDropdownStyles}\n`;\n\nconst CreateMultipleColumns = ({ links }: { links: HTMLAnchorElement[] }) => {\n  const column1 = document.createElement('div');\n  const column2 = document.createElement('div');\n  const firstColumnLinks = links.splice(0, Math.ceil(links.length / 2));\n\n  firstColumnLinks.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    column1.appendChild(link);\n  });\n  links.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    column2.appendChild(link);\n  });\n\n  return [column1, column2];\n};\n\nconst CreateSingleColumn = ({ links }: { links: HTMLAnchorElement[] }) => {\n  const container = document.createElement('div');\n  links.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    container.appendChild(link);\n  });\n\n  return container;\n};\n\nconst CreateDropdown = ({\n  dropdownLinksContainer,\n  dropdownCalloutsSlot,\n}: TypeDropdownProps) => {\n  if (!dropdownLinksContainer) return;\n\n  const links = Array.from(\n    dropdownLinksContainer.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n\n  wrapper.classList.add(ELEMENT_DROPDOWN_LIST_CONTAINER);\n  container.classList.add(ELEMENT_DROPDOWN_CONTAINER);\n\n  if (links.length > MAX_COLUMN_ITEMS) {\n    const columns = CreateMultipleColumns({ links });\n    columns.forEach((column) => {\n      wrapper.appendChild(column);\n    });\n    wrapper.classList.add(ELEMENT_DROPDOWN_MULTIPLE_COLUMN);\n  } else {\n    wrapper.appendChild(CreateSingleColumn({ links }));\n\n    if (dropdownCalloutsSlot) {\n      wrapper.classList.add(ELEMENT_DROPDOWN_MULTIPLE_COLUMN);\n    }\n  }\n\n  if (dropdownCalloutsSlot) {\n    const dropdownWrapper = document.createElement('div');\n\n    dropdownWrapper.classList.add(ELEMENT_DROPDOWN_CTA_COLUMN);\n    dropdownWrapper.appendChild(dropdownCalloutsSlot);\n    wrapper.appendChild(dropdownWrapper);\n  }\n\n  container.appendChild(wrapper);\n\n  return container;\n};\n\nconst CreateButton = ({\n  buttonClick,\n  navItemName,\n}: TypePrimaryLinkButtonProps) => {\n  const button = document.createElement('button');\n\n  button.classList.add(ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON);\n  button.innerHTML = iconChevronDown;\n  button.addEventListener('click', () => buttonClick());\n  button.setAttribute('aria-expanded', 'false');\n  button.setAttribute('aria-controls', `nav-links-`);\n  button.setAttribute('aria-label', `List of menu items for ${navItemName}`);\n\n  return button;\n};\n\nconst CreatePrimaryLink = (props: TypePrimaryLinkProps) => {\n  const { hasDropdown, primaryLinkContainer } = props;\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n\n  const dropdown = CreateDropdown(props);\n\n  container.classList.add(ELEMENT_PRIMARY_LINK_CONTAINER);\n  wrapper.classList.add(ELEMENT_PRIMARLY_LINK_WRAPPER);\n\n  if (primaryLinkContainer) {\n    const clonedPrimaryLink = primaryLinkContainer.cloneNode(\n      true,\n    ) as HTMLElement;\n    wrapper.appendChild(clonedPrimaryLink);\n  }\n\n  if (hasDropdown) {\n    const button = CreateButton(props);\n    wrapper.appendChild(button);\n  }\n\n  if (dropdown) wrapper.appendChild(dropdown);\n\n  container.appendChild(wrapper);\n  return container;\n};\n\nconst CreateNavItemElement = (props: TypeNavItem) =>\n  (() => {\n    const { dropdownLinksContainer, primaryLinkContainer, context } = props;\n\n    if (!primaryLinkContainer) {\n      throw new Error('Primary link is required for a nav item');\n    }\n\n    const elementContainer = document.createElement('div');\n    const dropDownContainerLinks = dropdownLinksContainer?.children;\n    const hasDropdown =\n      (dropDownContainerLinks && dropDownContainerLinks.length > 0) || false;\n\n    const navItemName = primaryLinkContainer.innerHTML\n      .replace(/(<([^>]+)>)/gi, '')\n      .trim();\n    let isShowing = false;\n    let focusCallback = () => {};\n\n    const OnLoadDropdownSpans = () => {\n      if (!dropdownLinksContainer) return;\n\n      const links = Array.from(\n        dropdownLinksContainer.querySelectorAll('a'),\n      ) as HTMLAnchorElement[];\n\n      links.forEach((link) => {\n        const hasSpan = link.querySelector('span');\n\n        if (!hasSpan) {\n          wrapLinkForAnimation({ element: link });\n          link.appendChild(link);\n        }\n      });\n    };\n\n    const DropdownPositionPerViewPort = () => {\n      const elementBounds = elementContainer.getBoundingClientRect();\n      const dropdownContainer = elementContainer.querySelector(\n        `.${ELEMENT_DROPDOWN_CONTAINER}`,\n      ) as HTMLDivElement;\n      const width = elementContainer.offsetWidth;\n\n      if (!dropdownContainer) return;\n\n      const size = dropdownContainer.offsetWidth + BOUNDS_SHIFT;\n\n      if (elementBounds.left + width < size) {\n        dropdownContainer.style.left = '0';\n        dropdownContainer.style.transform = 'translateX(0)';\n      }\n\n      if (window.innerWidth - elementBounds.right < size / 2) {\n        dropdownContainer.style.right = '0';\n        dropdownContainer.style.left = 'inherit';\n        dropdownContainer.style.transform = 'translateX(0)';\n      }\n    };\n\n    const ShowDropdown = () => {\n      elementContainer.setAttribute(ATTRIBUTE_SHOWING, '');\n      DropdownPositionPerViewPort();\n    };\n\n    const HideDropdown = () => {\n      elementContainer.removeAttribute(ATTRIBUTE_SHOWING);\n      focusCallback();\n      focusCallback = () => {};\n    };\n\n    const EventButtonClick = () => {\n      if (isShowing && dropdownLinksContainer) {\n        ShowDropdown();\n        focusCallback = handleKeyboardNavigation({\n          element: elementContainer,\n          action: () => HideDropdown(),\n          shadowDomContext: context,\n        });\n\n        setTimeout(() => {\n          const firstElement = dropdownLinksContainer.querySelector(\n            'a',\n          ) as HTMLAnchorElement;\n\n          if (firstElement) firstElement.focus();\n        }, 100);\n      }\n\n      if (!isShowing) HideDropdown();\n    };\n\n    const buttonClick = () => {\n      isShowing = isShowing ? false : true;\n      EventButtonClick();\n    };\n\n    // Load\n\n    const linkContainer = CreatePrimaryLink({\n      ...props,\n      hasDropdown,\n      buttonClick,\n      navItemName,\n    });\n\n    elementContainer.addEventListener('mouseover', () => {\n      isShowing = true;\n      ShowDropdown();\n    });\n\n    elementContainer.addEventListener('mouseleave', () => {\n      isShowing = false;\n      HideDropdown();\n    });\n\n    setTimeout(() => {\n      OnLoadDropdownSpans();\n    }, 10);\n\n    if (hasDropdown) elementContainer.setAttribute(ATTRIBUTE_DROPDOWN, '');\n    elementContainer.classList.add(ELEMENT_NAV_ITEM_CONTAINER);\n    elementContainer.appendChild(linkContainer);\n\n    return elementContainer;\n  })();\n\nexport const createCompositeNavigationItem = {\n  CreateElement: CreateNavItemElement,\n  Styles: STYLES_NAV_ITEM_ELEMENT,\n};\n"],"names":["iconChevronDown"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/item/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { handleKeyboardNavigation } from '@universityofmaryland/web-utilities-library/events';\nimport { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\n\ntype TypePrimaryLinkRequirements = {\n  primaryLinkContainer?: HTMLElement | null;\n  context?: HTMLElement;\n};\n\ntype TypeDropdownProps = {\n  dropdownLinksContainer?: HTMLElement | null;\n  dropdownCalloutsSlot?: HTMLSlotElement | null;\n};\n\ntype TypePrimaryLinkButtonProps = {\n  buttonClick: () => void;\n  navItemName: string;\n};\n\ntype TypePrimaryLinkProps = TypePrimaryLinkRequirements &\n  TypeDropdownProps &\n  TypePrimaryLinkButtonProps & {\n    hasDropdown: boolean;\n  };\n\nexport type TypeNavItemRequirements = TypeDropdownProps &\n  TypePrimaryLinkRequirements;\n\ntype TypeNavItem = TypeNavItemRequirements;\n\nconst ELEMENT_NAME = 'umd-element-nav-item';\nconst ATTRIBUTE_DROPDOWN = 'data-dropdown';\nconst ATTRIBUTE_SHOWING = 'data-showing';\nconst ATTRIBUTE_SELECTED = 'data-selected';\n\nconst BOUNDS_SHIFT = 140;\nconst MAX_COLUMN_ITEMS = 8;\n\nconst ELEMENT_NAV_ITEM_CONTAINER = `nav-item-container`;\nconst ELEMENT_PRIMARY_LINK_CONTAINER = 'nav-item-primary-link-container';\nconst ELEMENT_PRIMARLY_LINK_WRAPPER = `nav-item-primary-link-wrapper`;\nconst ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON = `nav-item-primary-link-button`;\n\nconst ELEMENT_DROPDOWN_CONTAINER = `nav-item-dropdown-container`;\nconst ELEMENT_DROPDOWN_LIST_CONTAINER = 'nav-item-dropdown-list';\nconst ELEMENT_DROPDOWN_MULTIPLE_COLUMN = 'nav-item-dropdown-multiple-column';\nconst ELEMENT_DROPDOWN_CTA_COLUMN = 'nav-item-dropdown-cta-column';\n\nconst IS_SELECTED = `[${ATTRIBUTE_SELECTED}]`;\nconst IS_SHOWING = `[${ATTRIBUTE_SHOWING}]`;\nconst IS_DROPDOWN = `[${ATTRIBUTE_DROPDOWN}]`;\n\nconst OVERWRITE_DROPDOWN_CONTAINER = `.${ELEMENT_NAV_ITEM_CONTAINER}${IS_DROPDOWN}`;\nconst OVERWRITE_IS_SHOWING_DROPDOWN_CONTAINER = `${OVERWRITE_DROPDOWN_CONTAINER}${IS_SHOWING} .${ELEMENT_DROPDOWN_CONTAINER}`;\nconst OVERWRITE_IS_SHOWING_PRIMARY_LINK = `${OVERWRITE_DROPDOWN_CONTAINER} .${ELEMENT_PRIMARLY_LINK_WRAPPER}`;\nconst OVERWRITE_IS_SHOWING_PRIMARY_BUTTON = `${OVERWRITE_DROPDOWN_CONTAINER}${IS_SHOWING} .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteDropdownStyles = `\n  ${OVERWRITE_IS_SHOWING_DROPDOWN_CONTAINER} {\n    display: block;\n  }\n\n  ${OVERWRITE_IS_SHOWING_PRIMARY_BUTTON} {\n    transform: rotate(180deg) translateY(4px);\n  }\n\n  ${OVERWRITE_IS_SHOWING_PRIMARY_LINK} > a${IS_SELECTED}:before {\n    bottom: 1px;\n    right: 20px;\n  }\n`\n\n// prettier-ignore\nconst PrimaryStyles = `\n  .${ELEMENT_PRIMARY_LINK_CONTAINER} {\n    position: relative;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} {\n    display: block;\n    position: relative;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a {\n    color: ${token.color.black};\n    font-size: ${token.font.size.base};\n    transition: color 0.2s ease-in-out;\n    line-height: 1.15em;\n    font-weight: 700;\n    text-wrap: pretty;\n    display: block;\n    display: flex;\n    align-items: flex-end;\n    text-align: right;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:hover,\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:focus {\n    color: ${token.color.red};\n   }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a[${ATTRIBUTE_SELECTED}] span {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});\n  }\n\n  .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} {\n    position: absolute;\n    top: 2px;\n    right: -20px;\n    transition: transform .5s;\n  }\n\n  .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} svg {\n    fill: ${token.color.red};\n    height: 14px;\n    width: 14px;\n    transform: rotate(0deg) translateY(0);\n    transition: fill .5s,transform .5s;\n  }\n`;\n\n// prettier-ignore\nconst DropdownMultipleColumnStyles = `\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} > * {\n    min-width: 232px;\n  }\n\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} > *:not(:first-child) {\n    margin-left: 40px;\n  }\n`\n\n// prettier-ignore\nconst DropdownListStyles = `\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} {\n    background-color: ${token.color.white};\n    border-top: 2px solid ${token.color.red};\n    padding: ${token.spacing.lg};\n    box-shadow: -1px 9px 32px -10px rgba(0,0,0,0.19);\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a {\n    display: block;\n    min-width: 120px;\n    max-width: 230px;\n    font-weight: 700;\n    font-size: 14px;\n    line-height: 1.5em;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_DROPDOWN_LIST_CONTAINER} a`]:\n      animation.line.slideUnderRed,\n    },\n  })}\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:hover,\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:focus {\n    color: ${token.color.red};\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a + a {\n    margin-top: ${token.spacing.md};\n    display: block;\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED} span:not(.sr-only) {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED}:hover span,\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED}:focus span {\n    border-bottom: none;\n  }\n`\n\n// prettier-ignore\nconst DropdownStyles = `\n  .${ELEMENT_DROPDOWN_CONTAINER} {\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    min-width: 200px;\n    width: auto;\n    padding-top: ${token.spacing.sm};\n    display: none;\n  }\n`;\n\nconst STYLES_NAV_ITEM_ELEMENT = `\n  .${ELEMENT_NAV_ITEM_CONTAINER} {\n    position: relative;\n    z-index: 9999;\n  }\n\n  ${OVERWRITE_DROPDOWN_CONTAINER} {\n    padding-right: 20px;\n  }\n\n  .${ELEMENT_NAV_ITEM_CONTAINER} a {\n    font-family: ${token.font.family.sans};\n    font-size: ${token.font.size.sm};\n    font-weight: 700;\n    color: ${token.color.black};\n    text-decoration: none;\n  }\n  \n  .${ELEMENT_NAV_ITEM_CONTAINER}:foucs-within .${ELEMENT_DROPDOWN_CONTAINER} {\n    display: block;\n  }\n\n  ${PrimaryStyles}\n  ${DropdownStyles}\n  ${DropdownMultipleColumnStyles}\n  ${DropdownListStyles}\n  ${OverwriteDropdownStyles}\n`;\n\nconst CreateMultipleColumns = ({ links }: { links: HTMLAnchorElement[] }) => {\n  const column1 = document.createElement('div');\n  const column2 = document.createElement('div');\n  const firstColumnLinks = links.splice(0, Math.ceil(links.length / 2));\n\n  firstColumnLinks.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    column1.appendChild(link);\n  });\n  links.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    column2.appendChild(link);\n  });\n\n  return [column1, column2];\n};\n\nconst CreateSingleColumn = ({ links }: { links: HTMLAnchorElement[] }) => {\n  const container = document.createElement('div');\n  links.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    container.appendChild(link);\n  });\n\n  return container;\n};\n\nconst CreateDropdown = ({\n  dropdownLinksContainer,\n  dropdownCalloutsSlot,\n}: TypeDropdownProps) => {\n  if (!dropdownLinksContainer) return;\n\n  const links = Array.from(\n    dropdownLinksContainer.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n\n  wrapper.classList.add(ELEMENT_DROPDOWN_LIST_CONTAINER);\n  container.classList.add(ELEMENT_DROPDOWN_CONTAINER);\n\n  if (links.length > MAX_COLUMN_ITEMS) {\n    const columns = CreateMultipleColumns({ links });\n    columns.forEach((column) => {\n      wrapper.appendChild(column);\n    });\n    wrapper.classList.add(ELEMENT_DROPDOWN_MULTIPLE_COLUMN);\n  } else {\n    wrapper.appendChild(CreateSingleColumn({ links }));\n\n    if (dropdownCalloutsSlot) {\n      wrapper.classList.add(ELEMENT_DROPDOWN_MULTIPLE_COLUMN);\n    }\n  }\n\n  if (dropdownCalloutsSlot) {\n    const dropdownWrapper = document.createElement('div');\n\n    dropdownWrapper.classList.add(ELEMENT_DROPDOWN_CTA_COLUMN);\n    dropdownWrapper.appendChild(dropdownCalloutsSlot);\n    wrapper.appendChild(dropdownWrapper);\n  }\n\n  container.appendChild(wrapper);\n\n  return container;\n};\n\nconst CreateButton = ({\n  buttonClick,\n  navItemName,\n}: TypePrimaryLinkButtonProps) => {\n  const button = document.createElement('button');\n\n  button.classList.add(ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON);\n  button.innerHTML = iconChevronDown;\n  button.addEventListener('click', () => buttonClick());\n  button.setAttribute('aria-expanded', 'false');\n  button.setAttribute('aria-controls', `nav-links-`);\n  button.setAttribute('aria-label', `List of menu items for ${navItemName}`);\n\n  return button;\n};\n\nconst CreatePrimaryLink = (props: TypePrimaryLinkProps) => {\n  const { hasDropdown, primaryLinkContainer } = props;\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n\n  const dropdown = CreateDropdown(props);\n\n  container.classList.add(ELEMENT_PRIMARY_LINK_CONTAINER);\n  wrapper.classList.add(ELEMENT_PRIMARLY_LINK_WRAPPER);\n\n  if (primaryLinkContainer) {\n    const clonedPrimaryLink = primaryLinkContainer.cloneNode(\n      true,\n    ) as HTMLElement;\n    wrapper.appendChild(clonedPrimaryLink);\n  }\n\n  if (hasDropdown) {\n    const button = CreateButton(props);\n    wrapper.appendChild(button);\n  }\n\n  if (dropdown) wrapper.appendChild(dropdown);\n\n  container.appendChild(wrapper);\n  return container;\n};\n\nconst CreateNavItemElement = (props: TypeNavItem) =>\n  (() => {\n    const { dropdownLinksContainer, primaryLinkContainer, context } = props;\n\n    if (!primaryLinkContainer) {\n      throw new Error('Primary link is required for a nav item');\n    }\n\n    const elementContainer = document.createElement('div');\n    const dropDownContainerLinks = dropdownLinksContainer?.children;\n    const hasDropdown =\n      (dropDownContainerLinks && dropDownContainerLinks.length > 0) || false;\n\n    const navItemName = primaryLinkContainer.innerHTML\n      .replace(/(<([^>]+)>)/gi, '')\n      .trim();\n    let isShowing = false;\n    let focusCallback = () => {};\n\n    const OnLoadDropdownSpans = () => {\n      if (!dropdownLinksContainer) return;\n\n      const links = Array.from(\n        dropdownLinksContainer.querySelectorAll('a'),\n      ) as HTMLAnchorElement[];\n\n      links.forEach((link) => {\n        const hasSpan = link.querySelector('span');\n\n        if (!hasSpan) {\n          wrapLinkForAnimation({ element: link });\n          link.appendChild(link);\n        }\n      });\n    };\n\n    const DropdownPositionPerViewPort = () => {\n      const elementBounds = elementContainer.getBoundingClientRect();\n      const dropdownContainer = elementContainer.querySelector(\n        `.${ELEMENT_DROPDOWN_CONTAINER}`,\n      ) as HTMLDivElement;\n      const width = elementContainer.offsetWidth;\n\n      if (!dropdownContainer) return;\n\n      const size = dropdownContainer.offsetWidth + BOUNDS_SHIFT;\n\n      if (elementBounds.left + width < size) {\n        dropdownContainer.style.left = '0';\n        dropdownContainer.style.transform = 'translateX(0)';\n      }\n\n      if (window.innerWidth - elementBounds.right < size / 2) {\n        dropdownContainer.style.right = '0';\n        dropdownContainer.style.left = 'inherit';\n        dropdownContainer.style.transform = 'translateX(0)';\n      }\n    };\n\n    const ShowDropdown = () => {\n      elementContainer.setAttribute(ATTRIBUTE_SHOWING, '');\n      DropdownPositionPerViewPort();\n    };\n\n    const HideDropdown = () => {\n      elementContainer.removeAttribute(ATTRIBUTE_SHOWING);\n      focusCallback();\n      focusCallback = () => {};\n    };\n\n    const EventButtonClick = () => {\n      if (isShowing && dropdownLinksContainer) {\n        ShowDropdown();\n        focusCallback = handleKeyboardNavigation({\n          element: elementContainer,\n          action: () => HideDropdown(),\n          shadowDomContext: context,\n        });\n\n        setTimeout(() => {\n          const firstElement = dropdownLinksContainer.querySelector(\n            'a',\n          ) as HTMLAnchorElement;\n\n          if (firstElement) firstElement.focus();\n        }, 100);\n      }\n\n      if (!isShowing) HideDropdown();\n    };\n\n    const buttonClick = () => {\n      isShowing = isShowing ? false : true;\n      EventButtonClick();\n    };\n\n    // Load\n\n    const linkContainer = CreatePrimaryLink({\n      ...props,\n      hasDropdown,\n      buttonClick,\n      navItemName,\n    });\n\n    elementContainer.addEventListener('mouseover', () => {\n      isShowing = true;\n      ShowDropdown();\n    });\n\n    elementContainer.addEventListener('mouseleave', () => {\n      isShowing = false;\n      HideDropdown();\n    });\n\n    setTimeout(() => {\n      OnLoadDropdownSpans();\n    }, 10);\n\n    if (hasDropdown) elementContainer.setAttribute(ATTRIBUTE_DROPDOWN, '');\n    elementContainer.classList.add(ELEMENT_NAV_ITEM_CONTAINER);\n    elementContainer.appendChild(linkContainer);\n\n    return elementContainer;\n  })();\n\nexport const createCompositeNavigationItem = {\n  CreateElement: CreateNavItemElement,\n  Styles: STYLES_NAV_ITEM_ELEMENT,\n};\n"],"names":["iconChevronDown"],"mappings":"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"}

package/dist/composite/pathway/_common.d.ts

@@ -1,6 +1,6 @@
 import { PathwayTextLockupProps, PathwayAssetProps } from './_types';
-export declare const createCompositeHeadline: ({ headline, isThemeDark, isThemeMaryland, }: Pick<PathwayTextLockupProps, "headline" | "isThemeDark" | "isThemeMaryland">) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement> | null;
-export declare const createCompositeStat: ({ stats, }: Pick<PathwayTextLockupProps, "stats">) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement> | null;
-export declare const createTextLockupMedium: (props: Pick<PathwayTextLockupProps, "stats" | "actions" | "eventDetails" | "eyebrow" | "headline" | "stats" | "text" | "isThemeDark" | "isThemeMaryland">) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export declare const createAssetContent: (props: Pick<PathwayAssetProps, "dateSign" | "image" | "video" | "isImageScaled">) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositeHeadline: ({ headline, isThemeDark, isThemeMaryland, }: Pick<PathwayTextLockupProps, "headline" | "isThemeDark" | "isThemeMaryland">) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement> | null;
+export declare const createCompositeStat: ({ stats, }: Pick<PathwayTextLockupProps, "stats">) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement> | null;
+export declare const createTextLockupMedium: (props: Pick<PathwayTextLockupProps, "stats" | "actions" | "eventDetails" | "eyebrow" | "headline" | "stats" | "text" | "isThemeDark" | "isThemeMaryland">) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
+export declare const createAssetContent: (props: Pick<PathwayAssetProps, "dateSign" | "image" | "video" | "isImageScaled">) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=_common.d.ts.map

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

@@ -9,6 +9,6 @@ interface PathwayHeroProps {
     text: HTMLElement | null;
     video: HTMLVideoElement | null;
 }
-export declare const createCompositePathwayHero: (props: PathwayHeroProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createCompositePathwayHero: (props: PathwayHeroProps) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 export {};
 //# sourceMappingURL=hero.d.ts.map

package/dist/composite/pathway/highlight.d.ts

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

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

@@ -5,7 +5,7 @@ export declare const createCompositePathwayOverlay: (props: PathwayOverlayProps)
     };
     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=overlay.d.ts.map

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

@@ -5,7 +5,7 @@ export declare const createCompositePathwayStandard: (props: PathwayStandardProp
     };
     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=standard.d.ts.map

package/dist/composite/pathway/sticky.d.ts

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

package/dist/composite/quote/_types.d.ts

@@ -1,4 +1,4 @@
-import { ContentElement, ImageElement, LinkElement, ThemeProps, DisplayProps, AnimationProps, SizeProps as BaseSizeProps } from '../../_types';
+import { ContentElement, ImageElement, LinkElement, ElementModel, ThemeProps, DisplayProps, AnimationProps, SizeProps as BaseSizeProps } from '../../_types';
 export interface QuoteBaseProps extends Pick<ThemeProps, 'isThemeDark' | 'isThemeMaryland'>, Pick<DisplayProps, 'isTransparent'>, Pick<AnimationProps, 'includesAnimation'> {
     quote: ContentElement;
     image?: ImageElement;
@@ -11,7 +11,7 @@ export interface QuoteVariantProps {
 export interface QuoteContentProps {
     attribution: ContentElement;
     attributionSubText: ContentElement;
-    action: LinkElement;
+    action?: LinkElement;
 }
 export interface QuoteTextProps extends QuoteBaseProps, QuoteVariantProps, QuoteSizeProps, QuoteContentProps {
 }
@@ -19,6 +19,34 @@ export interface QuoteInlineProps extends QuoteTextProps {
 }
 export interface QuoteFeaturedProps extends QuoteInlineProps {
 }
-export interface QuoteStatementProps extends QuoteBaseProps {
+export interface QuoteStatementProps extends QuoteTextProps, Pick<ThemeProps, 'isThemeGold'> {
+    headline?: ContentElement;
+}
+export interface QuoteAnimationProps extends QuoteVariantProps, Pick<QuoteBaseProps, 'quote' | 'includesAnimation' | 'image'> {
+    quoteElement: ElementModel<HTMLElement>;
+}
+export interface QuoteIconProps extends QuoteVariantProps, Pick<QuoteBaseProps, 'isThemeMaryland'> {
+    hasImage?: boolean;
+}
+export interface QuoteProps extends Pick<QuoteTextProps, 'quote' | 'isThemeMaryland' | 'isSizeLarge' | 'isTypeFeatured' | 'includesAnimation'> {
+    hasImage?: boolean;
+    shouldHaveWhiteText?: boolean;
+    quote: HTMLElement;
+}
+export interface QuoteActionProps extends QuoteVariantProps, Pick<QuoteBaseProps, 'includesAnimation' | 'image'> {
+    action: HTMLAnchorElement;
+}
+export interface QuoteImageProps extends QuoteVariantProps, QuoteSizeProps, Pick<QuoteBaseProps, 'isThemeMaryland'> {
+    image: HTMLImageElement;
+}
+export interface QuoteTextChildrenProps extends Pick<QuoteTextProps, 'quote' | 'image' | 'attribution' | 'attributionSubText' | 'action' | 'isThemeDark' | 'isSizeLarge' | 'isTypeFeatured' | 'includesAnimation'> {
+    shouldHaveWhiteText?: boolean;
+    hasImage: boolean;
+}
+export interface QuoteStatementImageProps extends Pick<QuoteStatementProps, 'isThemeGold'> {
+    image: HTMLImageElement;
+}
+export interface QuoteStatementQuoteProps {
+    quote: HTMLElement;
 }
 //# sourceMappingURL=_types.d.ts.map

package/dist/composite/quote/_types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_types.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/_types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,SAAS,IAAI,aAAa,EAChC,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,UAAU,EAAE,aAAa,GAAG,iBAAiB,CAAC,EACzD,IAAI,CAAC,YAAY,EAAE,eAAe,CAAC,EACnC,IAAI,CAAC,cAAc,EAAE,mBAAmB,CAAC;IAC3C,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC;CAAG;AAE7E,MAAM,WAAW,iBAAiB;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,cAAc,CAAC;IAC5B,kBAAkB,EAAE,cAAc,CAAC;IACnC,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,cACf,SAAQ,cAAc,EACpB,iBAAiB,EACjB,cAAc,EACd,iBAAiB;CAAG;AAExB,MAAM,WAAW,gBAAiB,SAAQ,cAAc;CAAG;AAE3D,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;CAAG;AAE/D,MAAM,WAAW,mBAAoB,SAAQ,cAAc;CAAG"}
+{"version":3,"file":"_types.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/_types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,SAAS,IAAI,aAAa,EAChC,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,UAAU,EAAE,aAAa,GAAG,iBAAiB,CAAC,EACzD,IAAI,CAAC,YAAY,EAAE,eAAe,CAAC,EACnC,IAAI,CAAC,cAAc,EAAE,mBAAmB,CAAC;IAC3C,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC;CAAG;AAE7E,MAAM,WAAW,iBAAiB;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,cAAc,CAAC;IAC5B,kBAAkB,EAAE,cAAc,CAAC;IACnC,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,WAAW,cACf,SAAQ,cAAc,EACpB,iBAAiB,EACjB,cAAc,EACd,iBAAiB;CAAG;AAExB,MAAM,WAAW,gBAAiB,SAAQ,cAAc;CAAG;AAE3D,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;CAAG;AAE/D,MAAM,WAAW,mBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC;IACjC,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED,MAAM,WAAW,mBACf,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,mBAAmB,GAAG,OAAO,CAAC;IAC/D,YAAY,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,cACf,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CACV,cAAc,EACZ,OAAO,GACP,iBAAiB,GACjB,aAAa,GACb,gBAAgB,GAChB,mBAAmB,CACtB;IACD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,gBACf,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,mBAAmB,GAAG,OAAO,CAAC;IACrD,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,WAAW,eACf,SAAQ,iBAAiB,EACvB,cAAc,EACd,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC;IACzC,KAAK,EAAE,gBAAgB,CAAC;CACzB;AAED,MAAM,WAAW,sBACf,SAAQ,IAAI,CACV,cAAc,EACZ,OAAO,GACP,OAAO,GACP,aAAa,GACb,oBAAoB,GACpB,QAAQ,GACR,aAAa,GACb,aAAa,GACb,gBAAgB,GAChB,mBAAmB,CACtB;IACD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,aAAa,CAAC;IAChD,KAAK,EAAE,gBAAgB,CAAC;CACzB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,WAAW,CAAC;CACpB"}

package/dist/composite/quote/elements/action.d.ts

@@ -1,7 +1,5 @@
-import { QuoteBaseProps, QuoteVariantProps } from '../_types';
-interface QuoteActionProps extends QuoteVariantProps, Pick<QuoteBaseProps, 'includesAnimation' | 'image'> {
-    action: HTMLAnchorElement;
-}
-export declare const createCompositeQuoteAction: ({ action, image, includesAnimation, isTypeFeatured, }: QuoteActionProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLAnchorElement>;
-export {};
+import { QuoteActionProps, QuoteStatementProps } from '../_types';
+import { ElementModel } from '../../../_types';
+export declare const createCompositeQuoteAction: ({ action, image, includesAnimation, isTypeFeatured, }: QuoteActionProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLAnchorElement>;
+export declare const createStatementQuoteAction: ({ action, }: Pick<QuoteStatementProps, "action">) => ElementModel<HTMLElement> | null;
 //# sourceMappingURL=action.d.ts.map

package/dist/composite/quote/elements/action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/action.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAExE,UAAU,gBACR,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,mBAAmB,GAAG,OAAO,CAAC;IACrD,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AA6BD,eAAO,MAAM,0BAA0B,0DAtBpC,gBAAgB,wFAsB+C,CAAC"}
+{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/action.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAC5E,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAoCpD,eAAO,MAAM,0BAA0B,0DA7BpC,gBAAgB,wFA6B+C,CAAC;AACnE,eAAO,MAAM,0BAA0B,gBANpC,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,KAAG,YAAY,CAAC,WAAW,CAAC,GAAG,IAMD,CAAC"}

package/dist/composite/quote/elements/action.js

@@ -20,8 +20,16 @@ const CreateQuoteActionElement = ({
     }
   }
 }).build();
+const CreateStatementQuoteAction = ({
+  action
+}) => {
+  if (!action) return null;
+  return new ElementBuilder().withChild(action).build();
+};
 const createCompositeQuoteAction = CreateQuoteActionElement;
+const createStatementQuoteAction = CreateStatementQuoteAction;
 export {
-  createCompositeQuoteAction
+  createCompositeQuoteAction,
+  createStatementQuoteAction
 };
 //# sourceMappingURL=action.js.map

package/dist/composite/quote/elements/action.js.map

@@ -1 +1 @@
-{"version":3,"file":"action.js","sources":["../../../../source/composite/quote/elements/action.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 { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteActionProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'includesAnimation' | 'image'> {\n  action: HTMLAnchorElement;\n}\n\nconst CreateQuoteActionElement = ({\n  action,\n  image,\n  includesAnimation,\n  isTypeFeatured = false,\n}: QuoteActionProps) =>\n  new ElementBuilder(action)\n    .withClassName('quote-container-actions')\n    .withStyles({\n      element: {\n        marginTop: token.spacing.sm,\n        display: 'block',\n\n        ...(!isTypeFeatured && {\n          ...layout.grid.inline.tabletRows,\n        }),\n\n        ...(includesAnimation &&\n          (!isTypeFeatured || (isTypeFeatured && !image)) && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n      },\n    })\n    .build();\n\nexport const createCompositeQuoteAction = CreateQuoteActionElement;\n"],"names":[],"mappings":";;;AAWA,MAAM,2BAA2B,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MACE,IAAI,eAAe,MAAM,EACtB,cAAc,yBAAyB,EACvC,WAAW;AAAA,EACV,SAAS;AAAA,IACP,WAAW,MAAM,QAAQ;AAAA,IACzB,SAAS;AAAA,IAET,GAAI,CAAC,kBAAkB;AAAA,MACrB,GAAG,OAAO,KAAK,OAAO;AAAA,IAAA;AAAA,IAGxB,GAAI,sBACD,CAAC,kBAAmB,kBAAkB,CAAC,UAAW;AAAA,MACjD,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,IAAA;AAAA,EACd;AAEN,CAAC,EACA,MAAA;AAEE,MAAM,6BAA6B;"}
+{"version":3,"file":"action.js","sources":["../../../../source/composite/quote/elements/action.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 { type QuoteActionProps, type QuoteStatementProps } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\nconst CreateQuoteActionElement = ({\n  action,\n  image,\n  includesAnimation,\n  isTypeFeatured = false,\n}: QuoteActionProps) =>\n  new ElementBuilder(action)\n    .withClassName('quote-container-actions')\n    .withStyles({\n      element: {\n        marginTop: token.spacing.sm,\n        display: 'block',\n\n        ...(!isTypeFeatured && {\n          ...layout.grid.inline.tabletRows,\n        }),\n\n        ...(includesAnimation &&\n          (!isTypeFeatured || (isTypeFeatured && !image)) && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n      },\n    })\n    .build();\n\nconst CreateStatementQuoteAction = ({\n  action,\n}: Pick<QuoteStatementProps, 'action'>): ElementModel<HTMLElement> | null => {\n  if (!action) return null;\n  return new ElementBuilder().withChild(action).build();\n};\n\nexport const createCompositeQuoteAction = CreateQuoteActionElement;\nexport const createStatementQuoteAction = CreateStatementQuoteAction;\n"],"names":[],"mappings":";;;AAMA,MAAM,2BAA2B,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MACE,IAAI,eAAe,MAAM,EACtB,cAAc,yBAAyB,EACvC,WAAW;AAAA,EACV,SAAS;AAAA,IACP,WAAW,MAAM,QAAQ;AAAA,IACzB,SAAS;AAAA,IAET,GAAI,CAAC,kBAAkB;AAAA,MACrB,GAAG,OAAO,KAAK,OAAO;AAAA,IAAA;AAAA,IAGxB,GAAI,sBACD,CAAC,kBAAmB,kBAAkB,CAAC,UAAW;AAAA,MACjD,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,IAAA;AAAA,EACd;AAEN,CAAC,EACA,MAAA;AAEL,MAAM,6BAA6B,CAAC;AAAA,EAClC;AACF,MAA6E;AAC3E,MAAI,CAAC,OAAQ,QAAO;AACpB,SAAO,IAAI,eAAA,EAAiB,UAAU,MAAM,EAAE,MAAA;AAChD;AAEO,MAAM,6BAA6B;AACnC,MAAM,6BAA6B;"}

package/dist/composite/quote/elements/icon.d.ts

@@ -1,7 +1,4 @@
-import { QuoteBaseProps, QuoteVariantProps } from '../_types';
-interface QuoteIconProps extends QuoteVariantProps, Pick<QuoteBaseProps, 'isThemeMaryland'> {
-    hasImage?: boolean;
-}
-export declare const createCompositeQuoteIcon: ({ hasImage, isThemeMaryland, isTypeFeatured, }: QuoteIconProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export {};
+import { QuoteStatementProps, QuoteIconProps } from '../_types';
+export declare const createCompositeQuoteIcon: ({ hasImage, isThemeMaryland, isTypeFeatured, }: QuoteIconProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
+export declare const createStatementQuoteIcon: ({ isThemeGold, }: Pick<QuoteStatementProps, "isThemeGold">) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=icon.d.ts.map

package/dist/composite/quote/elements/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/icon.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAExE,UAAU,cACR,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA+DD,eAAO,MAAM,wBAAwB,mDAzDlC,cAAc,kFAyD6C,CAAC"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/icon.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAoF1E,eAAO,MAAM,wBAAwB,mDA9ElC,cAAc,kFA8E6C,CAAC;AAC/D,eAAO,MAAM,wBAAwB,qBApBlC,IAAI,CAAC,mBAAmB,EAAE,aAAa,CAAC,kFAoB4B,CAAC"}

package/dist/composite/quote/elements/icon.js

@@ -49,8 +49,26 @@ const CreateQuoteIconElement = ({
   iconSpan.element.innerHTML = quote;
   return iconSpan;
 };
+const CreateQuoteStatementIconElement = ({
+  isThemeGold
+}) => {
+  return new ElementBuilder().withClassName("statement-quote-icon").withStyles({
+    element: {
+      ["& svg"]: {
+        fill: token.color.red,
+        width: "24px",
+        marginBottom: token.spacing.md,
+        ...isThemeGold && {
+          fill: token.color.gold
+        }
+      }
+    }
+  }).withHTML(quote).build();
+};
 const createCompositeQuoteIcon = CreateQuoteIconElement;
+const createStatementQuoteIcon = CreateQuoteStatementIconElement;
 export {
-  createCompositeQuoteIcon
+  createCompositeQuoteIcon,
+  createStatementQuoteIcon
 };
 //# sourceMappingURL=icon.js.map

package/dist/composite/quote/elements/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../../source/composite/quote/elements/icon.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { SMALL } from '../_constants';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteIconProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'isThemeMaryland'> {\n  hasImage?: boolean;\n}\n\nconst CreateQuoteIconElement = ({\n  hasImage = false,\n  isThemeMaryland,\n  isTypeFeatured = false,\n}: QuoteIconProps) => {\n  const imageWithFeaturedLayout = hasImage && isTypeFeatured;\n\n  const iconSpan = new ElementBuilder('span')\n    .withClassName('quote-icon-span')\n    .withStyles({\n      element: {\n        display: 'block',\n        position: 'absolute',\n\n        ...(imageWithFeaturedLayout && {\n          display: 'none',\n        }),\n\n        ...(!hasImage && {\n          height: '15px',\n          width: '22px',\n          left: '-24px',\n          top: '-32px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            left: `-${token.spacing['4xl']}`,\n            top: '0',\n          },\n        }),\n\n        ...(hasImage && {\n          bottom: '-7px',\n          left: '-2px',\n          height: '15px',\n          width: '21px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            height: '20px',\n            width: '29px',\n            top: '-11px',\n            right: '-20px',\n            left: 'inherit',\n          },\n        }),\n\n        ['& svg']: {\n          fill: token.color.red,\n\n          ...(isThemeMaryland && {\n            fill: token.color.gold,\n          }),\n        },\n      },\n    })\n    .build();\n\n  iconSpan.element.innerHTML = iconQuote;\n\n  return iconSpan;\n};\n\nexport const createCompositeQuoteIcon = CreateQuoteIconElement;\n"],"names":["iconQuote"],"mappings":";;;;AAYA,MAAM,yBAAyB,CAAC;AAAA,EAC9B,WAAW;AAAA,EACX;AAAA,EACA,iBAAiB;AACnB,MAAsB;AACpB,QAAM,0BAA0B,YAAY;AAE5C,QAAM,WAAW,IAAI,eAAe,MAAM,EACvC,cAAc,iBAAiB,EAC/B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MAEV,GAAI,2BAA2B;AAAA,QAC7B,SAAS;AAAA,MAAA;AAAA,MAGX,GAAI,CAAC,YAAY;AAAA,QACf,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,KAAK;AAAA,QAEL,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,MAAM,IAAI,MAAM,QAAQ,KAAK,CAAC;AAAA,UAC9B,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,MAGF,GAAI,YAAY;AAAA,QACd,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,QAEP,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,KAAK;AAAA,UACL,OAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAGF,CAAC,OAAO,GAAG;AAAA,QACT,MAAM,MAAM,MAAM;AAAA,QAElB,GAAI,mBAAmB;AAAA,UACrB,MAAM,MAAM,MAAM;AAAA,QAAA;AAAA,MACpB;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AAEH,WAAS,QAAQ,YAAYA;AAE7B,SAAO;AACT;AAEO,MAAM,2BAA2B;"}
+{"version":3,"file":"icon.js","sources":["../../../../source/composite/quote/elements/icon.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { SMALL } from '../_constants';\nimport { type QuoteStatementProps, type QuoteIconProps } from '../_types';\n\nconst CreateQuoteIconElement = ({\n  hasImage = false,\n  isThemeMaryland,\n  isTypeFeatured = false,\n}: QuoteIconProps) => {\n  const imageWithFeaturedLayout = hasImage && isTypeFeatured;\n\n  const iconSpan = new ElementBuilder('span')\n    .withClassName('quote-icon-span')\n    .withStyles({\n      element: {\n        display: 'block',\n        position: 'absolute',\n\n        ...(imageWithFeaturedLayout && {\n          display: 'none',\n        }),\n\n        ...(!hasImage && {\n          height: '15px',\n          width: '22px',\n          left: '-24px',\n          top: '-32px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            left: `-${token.spacing['4xl']}`,\n            top: '0',\n          },\n        }),\n\n        ...(hasImage && {\n          bottom: '-7px',\n          left: '-2px',\n          height: '15px',\n          width: '21px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            height: '20px',\n            width: '29px',\n            top: '-11px',\n            right: '-20px',\n            left: 'inherit',\n          },\n        }),\n\n        ['& svg']: {\n          fill: token.color.red,\n\n          ...(isThemeMaryland && {\n            fill: token.color.gold,\n          }),\n        },\n      },\n    })\n    .build();\n\n  iconSpan.element.innerHTML = iconQuote;\n\n  return iconSpan;\n};\n\nconst CreateQuoteStatementIconElement = ({\n  isThemeGold,\n}: Pick<QuoteStatementProps, 'isThemeGold'>) => {\n  return new ElementBuilder()\n    .withClassName('statement-quote-icon')\n    .withStyles({\n      element: {\n        ['& svg']: {\n          fill: token.color.red,\n          width: '24px',\n          marginBottom: token.spacing.md,\n          ...(isThemeGold && {\n            fill: token.color.gold,\n          }),\n        },\n      },\n    })\n    .withHTML(iconQuote)\n    .build();\n};\n\nexport const createCompositeQuoteIcon = CreateQuoteIconElement;\nexport const createStatementQuoteIcon = CreateQuoteStatementIconElement;\n"],"names":["iconQuote"],"mappings":";;;;AAMA,MAAM,yBAAyB,CAAC;AAAA,EAC9B,WAAW;AAAA,EACX;AAAA,EACA,iBAAiB;AACnB,MAAsB;AACpB,QAAM,0BAA0B,YAAY;AAE5C,QAAM,WAAW,IAAI,eAAe,MAAM,EACvC,cAAc,iBAAiB,EAC/B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MAEV,GAAI,2BAA2B;AAAA,QAC7B,SAAS;AAAA,MAAA;AAAA,MAGX,GAAI,CAAC,YAAY;AAAA,QACf,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,KAAK;AAAA,QAEL,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,MAAM,IAAI,MAAM,QAAQ,KAAK,CAAC;AAAA,UAC9B,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,MAGF,GAAI,YAAY;AAAA,QACd,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,QAEP,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,KAAK;AAAA,UACL,OAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAGF,CAAC,OAAO,GAAG;AAAA,QACT,MAAM,MAAM,MAAM;AAAA,QAElB,GAAI,mBAAmB;AAAA,UACrB,MAAM,MAAM,MAAM;AAAA,QAAA;AAAA,MACpB;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AAEH,WAAS,QAAQ,YAAYA;AAE7B,SAAO;AACT;AAEA,MAAM,kCAAkC,CAAC;AAAA,EACvC;AACF,MAAgD;AAC9C,SAAO,IAAI,eAAA,EACR,cAAc,sBAAsB,EACpC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,OAAO,GAAG;AAAA,QACT,MAAM,MAAM,MAAM;AAAA,QAClB,OAAO;AAAA,QACP,cAAc,MAAM,QAAQ;AAAA,QAC5B,GAAI,eAAe;AAAA,UACjB,MAAM,MAAM,MAAM;AAAA,QAAA;AAAA,MACpB;AAAA,IACF;AAAA,EACF,CACD,EACA,SAASA,KAAS,EAClB,MAAA;AACL;AAEO,MAAM,2BAA2B;AACjC,MAAM,2BAA2B;"}

package/dist/composite/quote/elements/image.d.ts

@@ -1,7 +1,4 @@
-import { QuoteBaseProps, QuoteVariantProps, QuoteSizeProps } from '../_types';
-interface QuoteImageProps extends QuoteVariantProps, QuoteSizeProps, Pick<QuoteBaseProps, 'isThemeMaryland'> {
-    image: HTMLImageElement;
-}
-export declare const createCompositeQuoteImage: ({ image, isSizeLarge, isThemeMaryland, isTypeFeatured, }: QuoteImageProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export {};
+import { QuoteImageProps, QuoteStatementImageProps } from '../_types';
+export declare const createCompositeQuoteImage: ({ image, isSizeLarge, isThemeMaryland, isTypeFeatured, }: QuoteImageProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
+export declare const createStatementQuoteImage: ({ image, isThemeGold, }: QuoteStatementImageProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLImageElement>;
 //# sourceMappingURL=image.d.ts.map

package/dist/composite/quote/elements/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/image.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACpB,MAAM,WAAW,CAAC;AAEnB,UAAU,eACR,SAAQ,iBAAiB,EACvB,cAAc,EACd,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC;IACzC,KAAK,EAAE,gBAAgB,CAAC;CACzB;AA8DD,eAAO,MAAM,yBAAyB,6DAvDnC,eAAe,kFAuD8C,CAAC"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/image.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAsFhF,eAAO,MAAM,yBAAyB,6DA/EnC,eAAe,kFA+E8C,CAAC;AACjE,eAAO,MAAM,yBAAyB,4BAtBnC,wBAAwB,uFAsByC,CAAC"}

package/dist/composite/quote/elements/image.js

@@ -45,8 +45,29 @@ const CreateQuoteImageElement = ({
   container.withChild(imageElement);
   return container.build();
 };
+const CreateStatementImageElement = ({
+  image,
+  isThemeGold
+}) => new ElementBuilder(image).withClassName("statement-image").styled({
+  element: {
+    position: "absolute",
+    transform: "translate(-50%, -50%)",
+    left: "50%",
+    top: 0,
+    objectFit: "cover",
+    aspectRatio: "1 / 1",
+    border: `4px solid ${token.color.red}`,
+    width: "100px",
+    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.08), 0 24px 40px rgba(0, 0, 0, 0.10)",
+    ...isThemeGold && {
+      border: `4px solid ${token.color.gold}`
+    }
+  }
+}).build();
 const createCompositeQuoteImage = CreateQuoteImageElement;
+const createStatementQuoteImage = CreateStatementImageElement;
 export {
-  createCompositeQuoteImage
+  createCompositeQuoteImage,
+  createStatementQuoteImage
 };
 //# sourceMappingURL=image.js.map

package/dist/composite/quote/elements/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":["../../../../source/composite/quote/elements/image.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createCompositeQuoteIcon as elementIcon } from './icon';\nimport { SMALL } from '../_constants';\nimport {\n  type QuoteBaseProps,\n  type QuoteVariantProps,\n  type QuoteSizeProps,\n} from '../_types';\n\ninterface QuoteImageProps\n  extends QuoteVariantProps,\n    QuoteSizeProps,\n    Pick<QuoteBaseProps, 'isThemeMaryland'> {\n  image: HTMLImageElement;\n}\n\nconst CreateQuoteImageElement = ({\n  image,\n  isSizeLarge,\n  isThemeMaryland,\n  isTypeFeatured,\n}: QuoteImageProps) => {\n  const iconSpan = elementIcon({\n    hasImage: image != null,\n    isTypeFeatured,\n    isThemeMaryland,\n  });\n\n  const imageElement = new ElementBuilder(image)\n    .withClassName('quote-image')\n    .withStyles({\n      element: {\n        maxWidth: '100%',\n        height: 'auto',\n\n        ...(!isTypeFeatured && {\n          maxWidth: '160px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            borderRight: `2px solid ${token.color.red}`,\n          },\n        }),\n\n        ...(!isTypeFeatured && isSizeLarge && { maxWidth: '200px' }),\n\n        ...(!isTypeFeatured &&\n          isThemeMaryland && {\n            borderRight: `2px solid ${token.color.gold}`,\n          }),\n      },\n    })\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('quote-image-container')\n    .withStyles({\n      element: {\n        display: 'inline-block',\n        position: 'relative',\n\n        ...(!isTypeFeatured && {\n          marginBottom: token.spacing.sm,\n          position: 'relative',\n        }),\n      },\n    });\n\n  if (!isTypeFeatured) {\n    container.withChild(iconSpan);\n  }\n\n  container.withChild(imageElement);\n\n  return container.build();\n};\n\nexport const createCompositeQuoteImage = CreateQuoteImageElement;\n"],"names":["elementIcon"],"mappings":";;;;AAiBA,MAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,QAAM,WAAWA,yBAAY;AAAA,IAC3B,UAAU,SAAS;AAAA,IACnB;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,eAAe,IAAI,eAAe,KAAK,EAC1C,cAAc,aAAa,EAC3B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,GAAI,CAAC,kBAAkB;AAAA,QACrB,UAAU;AAAA,QAEV,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,aAAa,aAAa,MAAM,MAAM,GAAG;AAAA,QAAA;AAAA,MAC3C;AAAA,MAGF,GAAI,CAAC,kBAAkB,eAAe,EAAE,UAAU,QAAA;AAAA,MAElD,GAAI,CAAC,kBACH,mBAAmB;AAAA,QACjB,aAAa,aAAa,MAAM,MAAM,IAAI;AAAA,MAAA;AAAA,IAC5C;AAAA,EACJ,CACD,EACA,MAAA;AAEH,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,uBAAuB,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MAEV,GAAI,CAAC,kBAAkB;AAAA,QACrB,cAAc,MAAM,QAAQ;AAAA,QAC5B,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAEH,MAAI,CAAC,gBAAgB;AACnB,cAAU,UAAU,QAAQ;AAAA,EAC9B;AAEA,YAAU,UAAU,YAAY;AAEhC,SAAO,UAAU,MAAA;AACnB;AAEO,MAAM,4BAA4B;"}
+{"version":3,"file":"image.js","sources":["../../../../source/composite/quote/elements/image.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createCompositeQuoteIcon as elementIcon } from './icon';\nimport { SMALL } from '../_constants';\nimport { type QuoteImageProps, type QuoteStatementImageProps } from '../_types';\n\nconst CreateQuoteImageElement = ({\n  image,\n  isSizeLarge,\n  isThemeMaryland,\n  isTypeFeatured,\n}: QuoteImageProps) => {\n  const iconSpan = elementIcon({\n    hasImage: image != null,\n    isTypeFeatured,\n    isThemeMaryland,\n  });\n\n  const imageElement = new ElementBuilder(image)\n    .withClassName('quote-image')\n    .withStyles({\n      element: {\n        maxWidth: '100%',\n        height: 'auto',\n\n        ...(!isTypeFeatured && {\n          maxWidth: '160px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            borderRight: `2px solid ${token.color.red}`,\n          },\n        }),\n\n        ...(!isTypeFeatured && isSizeLarge && { maxWidth: '200px' }),\n\n        ...(!isTypeFeatured &&\n          isThemeMaryland && {\n            borderRight: `2px solid ${token.color.gold}`,\n          }),\n      },\n    })\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('quote-image-container')\n    .withStyles({\n      element: {\n        display: 'inline-block',\n        position: 'relative',\n\n        ...(!isTypeFeatured && {\n          marginBottom: token.spacing.sm,\n          position: 'relative',\n        }),\n      },\n    });\n\n  if (!isTypeFeatured) {\n    container.withChild(iconSpan);\n  }\n\n  container.withChild(imageElement);\n\n  return container.build();\n};\n\nconst CreateStatementImageElement = ({\n  image,\n  isThemeGold,\n}: QuoteStatementImageProps) =>\n  new ElementBuilder(image)\n    .withClassName('statement-image')\n    .styled({\n      element: {\n        position: 'absolute',\n        transform: 'translate(-50%, -50%)',\n        left: '50%',\n        top: 0,\n        objectFit: 'cover',\n        aspectRatio: '1 / 1',\n        border: `4px solid ${token.color.red}`,\n        width: '100px',\n        boxShadow:\n          '0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.08), 0 24px 40px rgba(0, 0, 0, 0.10)',\n        ...(isThemeGold && {\n          border: `4px solid ${token.color.gold}`,\n        }),\n      },\n    })\n    .build();\nexport const createCompositeQuoteImage = CreateQuoteImageElement;\nexport const createStatementQuoteImage = CreateStatementImageElement;\n"],"names":["elementIcon"],"mappings":";;;;AAMA,MAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,QAAM,WAAWA,yBAAY;AAAA,IAC3B,UAAU,SAAS;AAAA,IACnB;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,eAAe,IAAI,eAAe,KAAK,EAC1C,cAAc,aAAa,EAC3B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,GAAI,CAAC,kBAAkB;AAAA,QACrB,UAAU;AAAA,QAEV,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,aAAa,aAAa,MAAM,MAAM,GAAG;AAAA,QAAA;AAAA,MAC3C;AAAA,MAGF,GAAI,CAAC,kBAAkB,eAAe,EAAE,UAAU,QAAA;AAAA,MAElD,GAAI,CAAC,kBACH,mBAAmB;AAAA,QACjB,aAAa,aAAa,MAAM,MAAM,IAAI;AAAA,MAAA;AAAA,IAC5C;AAAA,EACJ,CACD,EACA,MAAA;AAEH,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,uBAAuB,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MAEV,GAAI,CAAC,kBAAkB;AAAA,QACrB,cAAc,MAAM,QAAQ;AAAA,QAC5B,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAEH,MAAI,CAAC,gBAAgB;AACnB,cAAU,UAAU,QAAQ;AAAA,EAC9B;AAEA,YAAU,UAAU,YAAY;AAEhC,SAAO,UAAU,MAAA;AACnB;AAEA,MAAM,8BAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AACF,MACE,IAAI,eAAe,KAAK,EACrB,cAAc,iBAAiB,EAC/B,OAAO;AAAA,EACN,SAAS;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,MAAM;AAAA,IACN,KAAK;AAAA,IACL,WAAW;AAAA,IACX,aAAa;AAAA,IACb,QAAQ,aAAa,MAAM,MAAM,GAAG;AAAA,IACpC,OAAO;AAAA,IACP,WACE;AAAA,IACF,GAAI,eAAe;AAAA,MACjB,QAAQ,aAAa,MAAM,MAAM,IAAI;AAAA,IAAA;AAAA,EACvC;AAEJ,CAAC,EACA,MAAA;AACE,MAAM,4BAA4B;AAClC,MAAM,4BAA4B;"}

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

@@ -3,4 +3,6 @@ export { createCompositeQuoteText as text } from './text';
 export { createCompositeQuoteIcon as icon } from './icon';
 export { createCompositeQuoteAction as action } from './action';
 export { createCompositeQuote as quote } from './quote';
+export { createStatementQuoteHeadline as statementHeadline, createStatementQuoteAttribution as statementAttribution, } from './text';
+export { createStatementQuoteAction as statementAction } from './action';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EAAE,wBAAwB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC1D,OAAO,EAAE,wBAAwB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC1D,OAAO,EAAE,0BAA0B,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,EAAE,oBAAoB,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EAAE,wBAAwB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC1D,OAAO,EAAE,wBAAwB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC1D,OAAO,EAAE,0BAA0B,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,EAAE,oBAAoB,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EACL,4BAA4B,IAAI,iBAAiB,EACjD,+BAA+B,IAAI,oBAAoB,GACxD,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,0BAA0B,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC"}

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

@@ -1,13 +1,16 @@
 import { createCompositeQuoteImage } from "./image.js";
-import { createCompositeQuoteText } from "./text.js";
+import { createStatementQuoteAttribution, createStatementQuoteHeadline, createCompositeQuoteText } from "./text.js";
 import { createCompositeQuoteIcon } from "./icon.js";
-import { createCompositeQuoteAction } from "./action.js";
+import { createCompositeQuoteAction, createStatementQuoteAction } from "./action.js";
 import { createCompositeQuote } from "./quote.js";
 export {
   createCompositeQuoteAction as action,
   createCompositeQuoteIcon as icon,
   createCompositeQuoteImage as image,
   createCompositeQuote as quote,
+  createStatementQuoteAction as statementAction,
+  createStatementQuoteAttribution as statementAttribution,
+  createStatementQuoteHeadline as statementHeadline,
   createCompositeQuoteText as text
 };
 //# sourceMappingURL=index.js.map

package/dist/composite/quote/elements/quote.d.ts

@@ -1,9 +1,4 @@
-import { QuoteTextProps } from '../_types';
-interface QuoteProps extends Pick<QuoteTextProps, 'quote' | 'isThemeMaryland' | 'isSizeLarge' | 'isTypeFeatured' | 'includesAnimation'> {
-    hasImage?: boolean;
-    shouldHaveWhiteText?: boolean;
-    quote: HTMLElement;
-}
-export declare const createCompositeQuote: (props: QuoteProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export {};
+import { QuoteProps, QuoteStatementQuoteProps } from '../_types';
+export declare const createCompositeQuote: (props: QuoteProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
+export declare const createStatementQuote: ({ quote }: QuoteStatementQuoteProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=quote.d.ts.map

package/dist/composite/quote/elements/quote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/quote.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAEhD,UAAU,UACR,SAAQ,IAAI,CACV,cAAc,EACZ,OAAO,GACP,iBAAiB,GACjB,aAAa,GACb,gBAAgB,GAChB,mBAAmB,CACtB;IACD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,EAAE,WAAW,CAAC;CACpB;AAyGD,eAAO,MAAM,oBAAoB,UA/EE,UAAU,kFA+ES,CAAC"}
+{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/quote.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAsH3E,eAAO,MAAM,oBAAoB,UA5FE,UAAU,kFA4FS,CAAC;AACvD,eAAO,MAAM,oBAAoB,cAde,wBAAwB,kFAcT,CAAC"}

package/dist/composite/quote/elements/quote.js

@@ -83,8 +83,18 @@ const CreateQuoteElement = (props) => {
   }
   return builder.build();
 };
+const CreateStatementQuoteElement = ({ quote }) => new ElementBuilder(quote).withClassName("statement-quote").withStyles({
+  element: {
+    color: token.color.gray.dark,
+    lineHeight: token.spacing.md,
+    fontSize: token.font.size.base,
+    textAlign: "left"
+  }
+}).build();
 const createCompositeQuote = CreateQuoteElement;
+const createStatementQuote = CreateStatementQuoteElement;
 export {
-  createCompositeQuote
+  createCompositeQuote,
+  createStatementQuote
 };
 //# sourceMappingURL=quote.js.map

package/dist/composite/quote/elements/quote.js.map

@@ -1 +1 @@
-{"version":3,"file":"quote.js","sources":["../../../../source/composite/quote/elements/quote.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 { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { createCompositeQuoteIcon as elementIcon } from './icon';\nimport { SMALL } from '../_constants';\nimport { type QuoteTextProps } from '../_types';\n\ninterface QuoteProps\n  extends Pick<\n    QuoteTextProps,\n    | 'quote'\n    | 'isThemeMaryland'\n    | 'isSizeLarge'\n    | 'isTypeFeatured'\n    | 'includesAnimation'\n  > {\n  hasImage?: boolean;\n  shouldHaveWhiteText?: boolean;\n  quote: HTMLElement;\n}\n\nconst splitWords = (quote: HTMLElement) => {\n  const text = quote.textContent ?? '';\n  const words = text.trim().split(/\\s+/);\n\n  const wordElements = words.map((word, index) => {\n    const wordElement = document.createElement('span');\n    wordElement.classList.add('quote-text-split-word');\n\n    Object.assign(wordElement.style, {\n      display: 'inline-block',\n      whiteSpace: 'pre-wrap',\n      opacity: '0',\n      transform: 'translateY(20px)',\n      transition: 'opacity 1s ease, transform 0.5s ease',\n    });\n\n    wordElement.textContent = word + (index < words.length - 1 ? ' ' : '');\n\n    return wordElement;\n  });\n\n  return wordElements;\n};\n\nconst CreateQuoteElement = (props: QuoteProps) => {\n  const {\n    hasImage = false,\n    includesAnimation = false,\n    isSizeLarge = false,\n    isThemeMaryland = false,\n    isTypeFeatured = false,\n    quote,\n    shouldHaveWhiteText = false,\n  } = props;\n\n  const isHasImageAndNotFeatured = hasImage && !isTypeFeatured;\n  const iconSpan = elementIcon(props);\n  const wordsList = splitWords(quote);\n  let quoteTextElement: HTMLElement = quote;\n\n  if (includesAnimation) {\n    quoteTextElement = document.createElement('div');\n\n    wordsList.map((word) => {\n      quoteTextElement.appendChild(word);\n    });\n  }\n\n  const fontStyles = isSizeLarge\n    ? typography.sans.compose('extralarge', {\n        theme: theme.fontColor(shouldHaveWhiteText),\n      })\n    : typography.sans.compose('larger', {\n        theme: theme.fontColor(shouldHaveWhiteText),\n      });\n\n  const builder = new ElementBuilder(quoteTextElement)\n    .styled(fontStyles)\n    .withClassName('quote-container-quote')\n    .withStyles({\n      element: {\n        position: 'relative',\n        fontWeight: '700',\n\n        ['& *']: {\n          color: 'currentColor',\n        },\n\n        [`&::before`]: {\n          content: '\"\"',\n          position: 'absolute',\n          left: `-${token.spacing.md}`,\n          top: '7px',\n          height: 'calc(100% - 14px)',\n          width: '2px',\n          display: 'block',\n          backgroundColor: token.color.red,\n          ...(isThemeMaryland && { backgroundColor: token.color.gold }),\n\n          ...(isHasImageAndNotFeatured && {\n            display: 'none',\n          }),\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            left: `-${token.spacing.md}`,\n          },\n\n          [`@container (max-width: ${SMALL - 1}px)`]: {\n            ...(!isTypeFeatured && {\n              display: 'block',\n            }),\n          },\n        },\n      },\n    });\n\n  if (!hasImage) {\n    builder.withChild(iconSpan);\n  }\n\n  return builder.build();\n};\n\nexport const createCompositeQuote = CreateQuoteElement;\n"],"names":["elementIcon"],"mappings":";;;;;;AAsBA,MAAM,aAAa,CAAC,UAAuB;AACzC,QAAM,OAAO,MAAM,eAAe;AAClC,QAAM,QAAQ,KAAK,KAAA,EAAO,MAAM,KAAK;AAErC,QAAM,eAAe,MAAM,IAAI,CAAC,MAAM,UAAU;AAC9C,UAAM,cAAc,SAAS,cAAc,MAAM;AACjD,gBAAY,UAAU,IAAI,uBAAuB;AAEjD,WAAO,OAAO,YAAY,OAAO;AAAA,MAC/B,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,IAAA,CACb;AAED,gBAAY,cAAc,QAAQ,QAAQ,MAAM,SAAS,IAAI,MAAM;AAEnE,WAAO;AAAA,EACT,CAAC;AAED,SAAO;AACT;AAEA,MAAM,qBAAqB,CAAC,UAAsB;AAChD,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,iBAAiB;AAAA,IACjB;AAAA,IACA,sBAAsB;AAAA,EAAA,IACpB;AAEJ,QAAM,2BAA2B,YAAY,CAAC;AAC9C,QAAM,WAAWA,yBAAY,KAAK;AAClC,QAAM,YAAY,WAAW,KAAK;AAClC,MAAI,mBAAgC;AAEpC,MAAI,mBAAmB;AACrB,uBAAmB,SAAS,cAAc,KAAK;AAE/C,cAAU,IAAI,CAAC,SAAS;AACtB,uBAAiB,YAAY,IAAI;AAAA,IACnC,CAAC;AAAA,EACH;AAEA,QAAM,aAAa,cACf,WAAW,KAAK,QAAQ,cAAc;AAAA,IACpC,OAAO,MAAM,UAAU,mBAAmB;AAAA,EAAA,CAC3C,IACD,WAAW,KAAK,QAAQ,UAAU;AAAA,IAChC,OAAO,MAAM,UAAU,mBAAmB;AAAA,EAAA,CAC3C;AAEL,QAAM,UAAU,IAAI,eAAe,gBAAgB,EAChD,OAAO,UAAU,EACjB,cAAc,uBAAuB,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,YAAY;AAAA,MAEZ,CAAC,KAAK,GAAG;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAGT,CAAC,WAAW,GAAG;AAAA,QACb,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM,IAAI,MAAM,QAAQ,EAAE;AAAA,QAC1B,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QACT,iBAAiB,MAAM,MAAM;AAAA,QAC7B,GAAI,mBAAmB,EAAE,iBAAiB,MAAM,MAAM,KAAA;AAAA,QAEtD,GAAI,4BAA4B;AAAA,UAC9B,SAAS;AAAA,QAAA;AAAA,QAGX,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,MAAM,IAAI,MAAM,QAAQ,EAAE;AAAA,QAAA;AAAA,QAG5B,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,UAC1C,GAAI,CAAC,kBAAkB;AAAA,YACrB,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAEH,MAAI,CAAC,UAAU;AACb,YAAQ,UAAU,QAAQ;AAAA,EAC5B;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEO,MAAM,uBAAuB;"}
+{"version":3,"file":"quote.js","sources":["../../../../source/composite/quote/elements/quote.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 { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { createCompositeQuoteIcon as elementIcon } from './icon';\nimport { SMALL } from '../_constants';\nimport { type QuoteProps, type QuoteStatementQuoteProps } from '../_types';\n\nconst splitWords = (quote: HTMLElement) => {\n  const text = quote.textContent ?? '';\n  const words = text.trim().split(/\\s+/);\n\n  const wordElements = words.map((word, index) => {\n    const wordElement = document.createElement('span');\n    wordElement.classList.add('quote-text-split-word');\n\n    Object.assign(wordElement.style, {\n      display: 'inline-block',\n      whiteSpace: 'pre-wrap',\n      opacity: '0',\n      transform: 'translateY(20px)',\n      transition: 'opacity 1s ease, transform 0.5s ease',\n    });\n\n    wordElement.textContent = word + (index < words.length - 1 ? ' ' : '');\n\n    return wordElement;\n  });\n\n  return wordElements;\n};\n\nconst CreateQuoteElement = (props: QuoteProps) => {\n  const {\n    hasImage = false,\n    includesAnimation = false,\n    isSizeLarge = false,\n    isThemeMaryland = false,\n    isTypeFeatured = false,\n    quote,\n    shouldHaveWhiteText = false,\n  } = props;\n\n  const isHasImageAndNotFeatured = hasImage && !isTypeFeatured;\n  const iconSpan = elementIcon(props);\n  const wordsList = splitWords(quote);\n  let quoteTextElement: HTMLElement = quote;\n\n  if (includesAnimation) {\n    quoteTextElement = document.createElement('div');\n\n    wordsList.map((word) => {\n      quoteTextElement.appendChild(word);\n    });\n  }\n\n  const fontStyles = isSizeLarge\n    ? typography.sans.compose('extralarge', {\n        theme: theme.fontColor(shouldHaveWhiteText),\n      })\n    : typography.sans.compose('larger', {\n        theme: theme.fontColor(shouldHaveWhiteText),\n      });\n\n  const builder = new ElementBuilder(quoteTextElement)\n    .styled(fontStyles)\n    .withClassName('quote-container-quote')\n    .withStyles({\n      element: {\n        position: 'relative',\n        fontWeight: '700',\n\n        ['& *']: {\n          color: 'currentColor',\n        },\n\n        [`&::before`]: {\n          content: '\"\"',\n          position: 'absolute',\n          left: `-${token.spacing.md}`,\n          top: '7px',\n          height: 'calc(100% - 14px)',\n          width: '2px',\n          display: 'block',\n          backgroundColor: token.color.red,\n          ...(isThemeMaryland && { backgroundColor: token.color.gold }),\n\n          ...(isHasImageAndNotFeatured && {\n            display: 'none',\n          }),\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            left: `-${token.spacing.md}`,\n          },\n\n          [`@container (max-width: ${SMALL - 1}px)`]: {\n            ...(!isTypeFeatured && {\n              display: 'block',\n            }),\n          },\n        },\n      },\n    });\n\n  if (!hasImage) {\n    builder.withChild(iconSpan);\n  }\n\n  return builder.build();\n};\n\nconst CreateStatementQuoteElement = ({ quote }: QuoteStatementQuoteProps) =>\n  new ElementBuilder(quote)\n    .withClassName('statement-quote')\n    .withStyles({\n      element: {\n        color: token.color.gray.dark,\n        lineHeight: token.spacing.md,\n        fontSize: token.font.size.base,\n        textAlign: 'left',\n      },\n    })\n    .build();\n\nexport const createCompositeQuote = CreateQuoteElement;\nexport const createStatementQuote = CreateStatementQuoteElement;\n"],"names":["elementIcon"],"mappings":";;;;;;AAQA,MAAM,aAAa,CAAC,UAAuB;AACzC,QAAM,OAAO,MAAM,eAAe;AAClC,QAAM,QAAQ,KAAK,KAAA,EAAO,MAAM,KAAK;AAErC,QAAM,eAAe,MAAM,IAAI,CAAC,MAAM,UAAU;AAC9C,UAAM,cAAc,SAAS,cAAc,MAAM;AACjD,gBAAY,UAAU,IAAI,uBAAuB;AAEjD,WAAO,OAAO,YAAY,OAAO;AAAA,MAC/B,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,IAAA,CACb;AAED,gBAAY,cAAc,QAAQ,QAAQ,MAAM,SAAS,IAAI,MAAM;AAEnE,WAAO;AAAA,EACT,CAAC;AAED,SAAO;AACT;AAEA,MAAM,qBAAqB,CAAC,UAAsB;AAChD,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,iBAAiB;AAAA,IACjB;AAAA,IACA,sBAAsB;AAAA,EAAA,IACpB;AAEJ,QAAM,2BAA2B,YAAY,CAAC;AAC9C,QAAM,WAAWA,yBAAY,KAAK;AAClC,QAAM,YAAY,WAAW,KAAK;AAClC,MAAI,mBAAgC;AAEpC,MAAI,mBAAmB;AACrB,uBAAmB,SAAS,cAAc,KAAK;AAE/C,cAAU,IAAI,CAAC,SAAS;AACtB,uBAAiB,YAAY,IAAI;AAAA,IACnC,CAAC;AAAA,EACH;AAEA,QAAM,aAAa,cACf,WAAW,KAAK,QAAQ,cAAc;AAAA,IACpC,OAAO,MAAM,UAAU,mBAAmB;AAAA,EAAA,CAC3C,IACD,WAAW,KAAK,QAAQ,UAAU;AAAA,IAChC,OAAO,MAAM,UAAU,mBAAmB;AAAA,EAAA,CAC3C;AAEL,QAAM,UAAU,IAAI,eAAe,gBAAgB,EAChD,OAAO,UAAU,EACjB,cAAc,uBAAuB,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,YAAY;AAAA,MAEZ,CAAC,KAAK,GAAG;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAGT,CAAC,WAAW,GAAG;AAAA,QACb,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM,IAAI,MAAM,QAAQ,EAAE;AAAA,QAC1B,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QACT,iBAAiB,MAAM,MAAM;AAAA,QAC7B,GAAI,mBAAmB,EAAE,iBAAiB,MAAM,MAAM,KAAA;AAAA,QAEtD,GAAI,4BAA4B;AAAA,UAC9B,SAAS;AAAA,QAAA;AAAA,QAGX,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,MAAM,IAAI,MAAM,QAAQ,EAAE;AAAA,QAAA;AAAA,QAG5B,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,UAC1C,GAAI,CAAC,kBAAkB;AAAA,YACrB,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAEH,MAAI,CAAC,UAAU;AACb,YAAQ,UAAU,QAAQ;AAAA,EAC5B;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEA,MAAM,8BAA8B,CAAC,EAAE,MAAA,MACrC,IAAI,eAAe,KAAK,EACrB,cAAc,iBAAiB,EAC/B,WAAW;AAAA,EACV,SAAS;AAAA,IACP,OAAO,MAAM,MAAM,KAAK;AAAA,IACxB,YAAY,MAAM,QAAQ;AAAA,IAC1B,UAAU,MAAM,KAAK,KAAK;AAAA,IAC1B,WAAW;AAAA,EAAA;AAEf,CAAC,EACA,MAAA;AAEE,MAAM,uBAAuB;AAC7B,MAAM,uBAAuB;"}

package/dist/composite/quote/elements/text.d.ts

@@ -1,3 +1,6 @@
-import { QuoteTextProps } from '../_types';
-export declare const createCompositeQuoteText: (props: Pick<QuoteTextProps, "isThemeDark" | "isThemeMaryland" | "isSizeLarge" | "isTypeFeatured" | "image" | "quote" | "attribution" | "attributionSubText" | "action" | "includesAnimation">) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+import { QuoteStatementProps, QuoteTextProps } from '../_types';
+import { ElementModel } from '../../../_types';
+export declare const createCompositeQuoteText: (props: Pick<QuoteTextProps, "isThemeDark" | "isThemeMaryland" | "isSizeLarge" | "isTypeFeatured" | "image" | "quote" | "attribution" | "attributionSubText" | "action" | "includesAnimation">) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
+export declare const createStatementQuoteHeadline: ({ headline, }: Pick<QuoteStatementProps, "headline">) => ElementModel<HTMLElement> | null;
+export declare const createStatementQuoteAttribution: ({ attribution, attributionSubText, }: Pick<QuoteStatementProps, "attribution" | "attributionSubText">) => ElementModel<HTMLElement> | null;
 //# sourceMappingURL=text.d.ts.map

package/dist/composite/quote/elements/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/text.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAsLhD,eAAO,MAAM,wBAAwB,UAlE5B,IAAI,CACT,cAAc,EACZ,aAAa,GACb,iBAAiB,GACjB,aAAa,GACb,gBAAgB,GAChB,OAAO,GACP,OAAO,GACP,aAAa,GACb,oBAAoB,GACpB,QAAQ,GACR,mBAAmB,CACtB,kFAsD2D,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/text.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,KAAK,mBAAmB,EAExB,KAAK,cAAc,EACpB,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AA0OpD,eAAO,MAAM,wBAAwB,UAlE5B,IAAI,CACT,cAAc,EACZ,aAAa,GACb,iBAAiB,GACjB,aAAa,GACb,gBAAgB,GAChB,OAAO,GACP,OAAO,GACP,aAAa,GACb,oBAAoB,GACpB,QAAQ,GACR,mBAAmB,CACtB,kFAsD2D,CAAC;AAC/D,eAAO,MAAM,4BAA4B,kBAtItC,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,KAAG,YAAY,CAAC,WAAW,CAAC,GAAG,IAsIC,CAAC;AACzE,eAAO,MAAM,+BAA+B,yCAnHzC,IAAI,CACL,mBAAmB,EACnB,aAAa,GAAG,oBAAoB,CACrC,KAAG,YAAY,CAAC,WAAW,CAAC,GAAG,IAgH8C,CAAC"}