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

package/dist/composite/navigation/utility/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../../../source/composite/navigation/utility/alert.ts"],"sourcesContent":["import {\n  element,\n  layout,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { fetchGraphQL } from '@universityofmaryland/web-utilities-library/network';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { close_large as iconCloseLarge } from '@universityofmaryland/web-icons-library/controls';\nimport { actions } from 'atomic';\n\ntype AlertData = {\n  id: string;\n  type: string;\n  title: string;\n  headline?: string;\n  text: string;\n  ctaUrl: string;\n  ctaText?: string;\n  hidden?: boolean;\n};\n\ntype AlertResponse = {\n  data: {\n    entries: AlertData[];\n  };\n};\n\ntype AlertProps = {\n  alertUrl?: string | null;\n};\n\nexport type TypeAlertProps = {\n  alertUrl?: string | null;\n};\n\ntype ElementAttributes = Record<string, string>;\n\ntype CacheCheckResult = {\n  shouldCheck: boolean;\n  cachedData: AlertData | null;\n};\n\nconst QUERY = `\n  query CampusAlertsQuery {\n    entries: entries(\n      limit: 1\n      type: \"mainElementsCampusAlert\"\n    ) {\n        id: uid\n        type: optionsType\n        headline\n        title\n        text\n        ctaUrl: cta\n        ctaText\n    }\n  }\n`;\n\nconst ELEMENT_NAME = 'umd-element-nav-alert';\nexport const ALERT_CONSTANTS = {\n  URLS: {\n    DEFAULT: 'https://umd.edu/api/v2',\n  },\n  STORAGE_KEYS: {\n    ALERT_TIME: 'umd-utility-alert-time',\n    ALERT: 'umd-utility-alert',\n    ALERT_ID: 'umd-utility-alert-id',\n  },\n  ELEMENTS: {\n    ALERT_ID: 'umd-global-alert',\n    DECLARATION: 'umd-element-nav-alert-declaration',\n    CONTAINER: 'umd-element-nav-alert-container',\n    LOCK: 'umd-element-nav-alert-lock',\n    WRAPPER: 'umd-element-nav-alert-wrapper',\n    TITLE: 'umd-element-nav-alert-title',\n    TEXT: 'umd-element-nav-alert-text',\n    CTA: 'umd-element-nav-alert-cta',\n    CLOSE_BUTTON: 'umd-element-nav-alert-close',\n  },\n  ATTRIBUTES: {\n    TYPE: 'type',\n  },\n  TYPES: {\n    GENERAL: 'general',\n    CLOSED: 'closed',\n    OPEN: 'open',\n  },\n  ANIMATION: {\n    SPEED: 800,\n  },\n  BREAKPOINTS: {\n    MEDIUM: 768,\n    LARGE: 1024,\n  },\n  CACHE: {\n    DURATION: 60 * 1000, // One minute in milliseconds\n  },\n} as const;\n\nconst { ATTRIBUTES, ANIMATION, BREAKPOINTS, ELEMENTS, TYPES } = ALERT_CONSTANTS;\nconst IS_TYPE_GENERAL = `[${ATTRIBUTES.TYPE}=${TYPES.GENERAL}]`;\nconst IS_TYPE_CLOSED = `[${ATTRIBUTES.TYPE}=${TYPES.CLOSED}]`;\n\nconst DECLARATION = `.${ELEMENTS.DECLARATION}`;\nconst CONTAINER = `.${ELEMENTS.CONTAINER}`;\nconst WRAPPER = `.${ELEMENTS.WRAPPER}`;\nconst LOCK = `.${ELEMENTS.LOCK}`;\nconst ALERT_TITLE = `.${ELEMENTS.TITLE}`;\nconst ALERT_TEXT = `.${ELEMENTS.TEXT}`;\nconst CLOSE_BUTTON = `.${ELEMENTS.CLOSE_BUTTON}`;\nconst CTA = `.${ELEMENTS.CTA}`;\n\nconst OVERWRITE_CONTAINER_TYPE_GENERAL = `${CONTAINER}${IS_TYPE_GENERAL}`;\nconst OVERWRITE_CONTAINER_TYPE_CLOSED = `${CONTAINER}${IS_TYPE_CLOSED}`;\n\n// prettier-ignore\nconst OverwriteTypeGeneral = `\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} a:hover,\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} a:focus {\n    color: ${token.color.white} !important;\n  }\n\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} ${ALERT_TITLE} {\n    color: ${token.color.gold};\n  }\n\n   ${OVERWRITE_CONTAINER_TYPE_GENERAL} ${CLOSE_BUTTON} > svg {\n    fill: ${token.color.white};\n  }\n`\n\n// prettier-ignore\nconst OverwriteTypeClosed = `\n  ${OVERWRITE_CONTAINER_TYPE_CLOSED} {\n    background-color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_CONTAINER_TYPE_CLOSED} * {\n    color: ${token.color.black};\n  }\n\n   ${OVERWRITE_CONTAINER_TYPE_CLOSED} .${CLOSE_BUTTON} > svg {\n    fill: ${token.color.black};\n  }\n`\n\n// prettier-ignore\nconst CloseButtonStyles = `\n  ${CLOSE_BUTTON} {\n    position: absolute;\n    top: 30px;\n    right: 10px;\n  }\n  \n  @container (max-width: ${BREAKPOINTS.MEDIUM - 1}px) {\n    ${CLOSE_BUTTON} {\n      top: 25px;\n      right: 5px;\n    }\n  }\n\n  ${CLOSE_BUTTON} > svg {\n    fill: ${token.color.black};\n    width: 24px;\n    height: 24px;\n  }\n`\n\n// prettier-ignore\nconst TextStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`${ALERT_TITLE}`]: typography.sans.large,\n    },\n  })}\n\n  ${ALERT_TITLE} {\n    text-transform: uppercase;\n  }\n\n  ${ALERT_TITLE} + * {\n    margin-top: ${token.spacing.sm};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`${ALERT_TEXT}`]: element.text.rich.advanced,\n    },\n  })}\n\n  ${ALERT_TEXT},\n  ${ALERT_TEXT} * {\n    font-size: 16px;;\n  }\n\n  ${ALERT_TEXT} + * {\n    margin-top: ${token.spacing.lg};\n  }\n\n  ${CTA} {\n    text-decoration: none;\n  }\n\n  ${CTA} svg {\n    max-width: 20px;\n  }\n`\n\n// prettier-ignore\nconst WrapperStyles = `\n  ${WRAPPER} {\n    position: relative;\n    padding-top: ${token.spacing.md};\n    padding-bottom: ${token.spacing.md};\n    padding-right: ${token.spacing.lg};\n  }\n\n  @container (min-width: ${BREAKPOINTS.MEDIUM}px) {\n    ${WRAPPER} {\n      padding-top: ${token.spacing.lg};\n      padding-bottom: ${token.spacing.lg};\n    }\n  }\n`\n\n// prettier-ignore\nconst LockStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`${LOCK}`]: layout.space.horizontal.full,\n    },\n  })}\n`\n\n// prettier-ignore\nconst ContainerStyles = `\n  ${CONTAINER} {\n    container: ${ELEMENT_NAME} / inline-size;\n    background-color: ${token.color.gray.lighter};\n    border-left: 4px solid ${token.color.red};\n    transition: height ${ANIMATION.SPEED}ms;\n    overflow: hidden;\n    position: relative;\n  }\n\n  @container (min-width: ${BREAKPOINTS.LARGE}px) {\n    ${CONTAINER} {\n      border-left: 8px solid ${token.color.red};\n    }\n  }\n`\n\n// prettier-ignore\nexport const STYLES_NAV_ALERT = `\n  ${DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${ContainerStyles}\n  ${LockStyles}\n  ${WrapperStyles}\n  ${TextStyles}\n  ${CloseButtonStyles}\n  ${OverwriteTypeGeneral}\n  ${OverwriteTypeClosed}\n`;\n\n// storage.ts\nconst logStorageError = (operation: string, error: Error): void => {\n  console.error(`UMD Component - Alert Storage: ${operation} failed:`, error);\n};\n\nconst getStoredValue = <T>(key: string): T | null => {\n  try {\n    const value = window.localStorage.getItem(key);\n    return value ? JSON.parse(value) : null;\n  } catch (error) {\n    logStorageError(`Reading ${key}`, error as Error);\n    return null;\n  }\n};\n\nconst setStoredValue = (key: string, value: unknown): void => {\n  try {\n    window.localStorage.setItem(key, JSON.stringify(value));\n  } catch (error) {\n    logStorageError('Saving value', error as Error);\n  }\n};\n\nconst clearAlertStorage = (): void => {\n  const { STORAGE_KEYS } = ALERT_CONSTANTS;\n  window.localStorage.removeItem(STORAGE_KEYS.ALERT_TIME);\n  window.localStorage.removeItem(STORAGE_KEYS.ALERT);\n};\n\nconst checkAlertCache = (): CacheCheckResult => {\n  const currentTime = new Date().getTime();\n  const { STORAGE_KEYS, CACHE } = ALERT_CONSTANTS;\n\n  try {\n    const alertTimeStr = getStoredValue<string>(STORAGE_KEYS.ALERT_TIME);\n    const cachedResponse = getStoredValue<AlertData>(STORAGE_KEYS.ALERT);\n\n    if (!alertTimeStr) {\n      setStoredValue(STORAGE_KEYS.ALERT_TIME, currentTime.toString());\n      return { shouldCheck: true, cachedData: null };\n    }\n\n    const alertTime = parseInt(alertTimeStr, 10);\n    const timeElapsed = currentTime - alertTime;\n\n    if (timeElapsed < CACHE.DURATION && cachedResponse) {\n      return { shouldCheck: false, cachedData: cachedResponse };\n    }\n\n    setStoredValue(STORAGE_KEYS.ALERT_TIME, currentTime.toString());\n    return { shouldCheck: true, cachedData: null };\n  } catch (error) {\n    console.error('Cache check failed:', error);\n    return { shouldCheck: true, cachedData: null };\n  }\n};\n\nconst updateAlertCache = (alert: AlertData): void => {\n  setStoredValue(ALERT_CONSTANTS.STORAGE_KEYS.ALERT, alert);\n};\n\nconst createElement = (\n  tag: string,\n  className?: string,\n  attributes?: ElementAttributes,\n): HTMLElement => {\n  const element = document.createElement(tag);\n  if (className) element.classList.add(className);\n  if (attributes) {\n    Object.entries(attributes).forEach(([key, value]) => {\n      element.setAttribute(key, value);\n    });\n  }\n  return element;\n};\n\nconst createCloseButton = (container: HTMLElement): HTMLButtonElement => {\n  const { ELEMENTS, ANIMATION } = ALERT_CONSTANTS;\n  const button = createElement('button', ELEMENTS.CLOSE_BUTTON, {\n    'aria-label': 'remove alert',\n  }) as HTMLButtonElement;\n\n  button.innerHTML = iconCloseLarge;\n  button.addEventListener('click', () => {\n    const cachedAlert = getStoredValue<AlertData>(\n      ALERT_CONSTANTS.STORAGE_KEYS.ALERT,\n    );\n    if (cachedAlert) {\n      // Animate close\n      container.style.height = `${container.offsetHeight}px`;\n      container.style.transition = `height ${ANIMATION.SPEED}ms`;\n\n      updateAlertCache({ ...cachedAlert, hidden: true });\n\n      setTimeout(() => {\n        container.style.height = '0px';\n      }, 100);\n\n      setTimeout(() => {\n        container.remove();\n      }, ANIMATION.SPEED + 100);\n    }\n  });\n\n  return button;\n};\n\nconst createCTAElement = ({\n  ctaText,\n  ctaUrl,\n}: {\n  ctaText: string;\n  ctaUrl: string;\n}) => {\n  const link = createElement('a', ALERT_CONSTANTS.ELEMENTS.CTA, {\n    href: ctaUrl,\n    rel: 'noopener noreferrer',\n    target: '_blank',\n  });\n  link.innerHTML = ctaText;\n\n  return actions.options({\n    element: link,\n    isTypeSecondary: true,\n  });\n};\n\nconst createAlertContent = (\n  alert: AlertData,\n  container: HTMLElement,\n): HTMLElement => {\n  const { ELEMENTS } = ALERT_CONSTANTS;\n  const wrapper = createElement('div', ELEMENTS.WRAPPER);\n  const lock = createElement('div', ELEMENTS.LOCK);\n  const headlineText = alert.headline || alert.title;\n\n  // Create elements\n  const title = createElement('p', ELEMENTS.TITLE);\n  title.innerHTML = headlineText;\n\n  const closeButton = createCloseButton(container);\n\n  wrapper.append(closeButton, title);\n\n  if (alert.text) {\n    const message = createElement('div', ELEMENTS.TEXT);\n    message.innerHTML = alert.text;\n    wrapper.append(closeButton, title, message);\n  }\n\n  // Add CTA if exists\n  if (alert.ctaUrl) {\n    const cta = createCTAElement({\n      ctaText: alert.ctaText || headlineText,\n      ctaUrl: alert.ctaUrl,\n    });\n\n    wrapper.appendChild(cta.element);\n  }\n\n  lock.appendChild(wrapper);\n  return lock;\n};\n\nconst createAlertComponent = (alert: AlertData): HTMLElement => {\n  const { ELEMENTS, ATTRIBUTES } = ALERT_CONSTANTS;\n\n  const declaration = createElement('div', ELEMENTS.DECLARATION);\n  const container = createElement('div', ELEMENTS.CONTAINER, {\n    id: ELEMENTS.ALERT_ID,\n    [ATTRIBUTES.TYPE]: alert.type,\n  });\n\n  const content = createAlertContent(alert, container);\n  container.appendChild(content);\n  declaration.appendChild(container);\n\n  return declaration;\n};\n\nconst fetchAlerts = async ({\n  alertUrl,\n}: AlertProps): Promise<AlertResponse | null> => {\n  try {\n    const url = alertUrl || ALERT_CONSTANTS.URLS.DEFAULT;\n\n    return await fetchGraphQL({\n      query: QUERY,\n      url,\n      token: 'VIDnMeNYHTrLvWPtPpK5MNpjuv5WmmhU',\n    });\n  } catch (error) {\n    console.error('Failed to fetch alerts:', error);\n    return null;\n  }\n};\n\nexport const createNavAlert = async ({ alertUrl }: AlertProps) => {\n  const alertCache = checkAlertCache();\n\n  // Show cached alert if valid\n  if (\n    !alertCache.shouldCheck &&\n    alertCache.cachedData &&\n    !alertCache.cachedData.hidden\n  ) {\n    return { element: createAlertComponent(alertCache.cachedData) };\n  }\n\n  // Fetch new alerts\n  const response = await fetchAlerts({ alertUrl });\n  if (!response?.data?.entries[0]) {\n    clearAlertStorage();\n    return null;\n  }\n\n  const alert = response.data?.entries[0];\n  const cachedAlert = getStoredValue<AlertData>(\n    ALERT_CONSTANTS.STORAGE_KEYS.ALERT,\n  );\n\n  // Handle alert updates\n  if (cachedAlert?.id === alert.id) {\n    if (!cachedAlert.hidden && alertCache.shouldCheck) {\n      return { element: createAlertComponent(cachedAlert) };\n    }\n  } else {\n    clearAlertStorage();\n    updateAlertCache(alert);\n    return { element: createAlertComponent(alert) };\n  }\n\n  return null;\n};\n"],"names":["token","jssToCSS","typography","element","layout","ELEMENTS","ANIMATION","iconCloseLarge","actions.options","ATTRIBUTES","fetchGraphQL"],"mappings":"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"}
+{"version":3,"file":"alert.js","sources":["../../../../source/composite/navigation/utility/alert.ts"],"sourcesContent":["import {\n  element,\n  layout,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { fetchGraphQL } from '@universityofmaryland/web-utilities-library/network';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { close_large as iconCloseLarge } from '@universityofmaryland/web-icons-library/controls';\nimport { actions } from 'atomic';\n\ntype AlertData = {\n  id: string;\n  type: string;\n  title: string;\n  headline?: string;\n  text: string;\n  ctaUrl: string;\n  ctaText?: string;\n  hidden?: boolean;\n};\n\ntype AlertResponse = {\n  data: {\n    entries: AlertData[];\n  };\n};\n\ntype AlertProps = {\n  alertUrl?: string | null;\n};\n\nexport type TypeAlertProps = {\n  alertUrl?: string | null;\n};\n\ntype ElementAttributes = Record<string, string>;\n\ntype CacheCheckResult = {\n  shouldCheck: boolean;\n  cachedData: AlertData | null;\n};\n\nconst QUERY = `\n  query CampusAlertsQuery {\n    entries: entries(\n      limit: 1\n      type: \"mainElementsCampusAlert\"\n    ) {\n        id: uid\n        type: optionsType\n        headline\n        title\n        text\n        ctaUrl: cta\n        ctaText\n    }\n  }\n`;\n\nconst ELEMENT_NAME = 'umd-element-nav-alert';\nexport const ALERT_CONSTANTS = {\n  URLS: {\n    DEFAULT: 'https://umd.edu/api/v2',\n  },\n  STORAGE_KEYS: {\n    ALERT_TIME: 'umd-utility-alert-time',\n    ALERT: 'umd-utility-alert',\n    ALERT_ID: 'umd-utility-alert-id',\n  },\n  ELEMENTS: {\n    ALERT_ID: 'umd-global-alert',\n    DECLARATION: 'umd-element-nav-alert-declaration',\n    CONTAINER: 'umd-element-nav-alert-container',\n    LOCK: 'umd-element-nav-alert-lock',\n    WRAPPER: 'umd-element-nav-alert-wrapper',\n    TITLE: 'umd-element-nav-alert-title',\n    TEXT: 'umd-element-nav-alert-text',\n    CTA: 'umd-element-nav-alert-cta',\n    CLOSE_BUTTON: 'umd-element-nav-alert-close',\n  },\n  ATTRIBUTES: {\n    TYPE: 'type',\n  },\n  TYPES: {\n    GENERAL: 'general',\n    CLOSED: 'closed',\n    OPEN: 'open',\n  },\n  ANIMATION: {\n    SPEED: 800,\n  },\n  BREAKPOINTS: {\n    MEDIUM: 768,\n    LARGE: 1024,\n  },\n  CACHE: {\n    DURATION: 60 * 1000, // One minute in milliseconds\n  },\n} as const;\n\nconst { ATTRIBUTES, ANIMATION, BREAKPOINTS, ELEMENTS, TYPES } = ALERT_CONSTANTS;\nconst IS_TYPE_GENERAL = `[${ATTRIBUTES.TYPE}=${TYPES.GENERAL}]`;\nconst IS_TYPE_CLOSED = `[${ATTRIBUTES.TYPE}=${TYPES.CLOSED}]`;\n\nconst DECLARATION = `.${ELEMENTS.DECLARATION}`;\nconst CONTAINER = `.${ELEMENTS.CONTAINER}`;\nconst WRAPPER = `.${ELEMENTS.WRAPPER}`;\nconst LOCK = `.${ELEMENTS.LOCK}`;\nconst ALERT_TITLE = `.${ELEMENTS.TITLE}`;\nconst ALERT_TEXT = `.${ELEMENTS.TEXT}`;\nconst CLOSE_BUTTON = `.${ELEMENTS.CLOSE_BUTTON}`;\nconst CTA = `.${ELEMENTS.CTA}`;\n\nconst OVERWRITE_CONTAINER_TYPE_GENERAL = `${CONTAINER}${IS_TYPE_GENERAL}`;\nconst OVERWRITE_CONTAINER_TYPE_CLOSED = `${CONTAINER}${IS_TYPE_CLOSED}`;\n\n// prettier-ignore\nconst OverwriteTypeGeneral = `\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} a:hover,\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} a:focus {\n    color: ${token.color.white} !important;\n  }\n\n  ${OVERWRITE_CONTAINER_TYPE_GENERAL} ${ALERT_TITLE} {\n    color: ${token.color.gold};\n  }\n\n   ${OVERWRITE_CONTAINER_TYPE_GENERAL} ${CLOSE_BUTTON} > svg {\n    fill: ${token.color.white};\n  }\n`\n\n// prettier-ignore\nconst OverwriteTypeClosed = `\n  ${OVERWRITE_CONTAINER_TYPE_CLOSED} {\n    background-color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_CONTAINER_TYPE_CLOSED} * {\n    color: ${token.color.black};\n  }\n\n   ${OVERWRITE_CONTAINER_TYPE_CLOSED} .${CLOSE_BUTTON} > svg {\n    fill: ${token.color.black};\n  }\n`\n\n// prettier-ignore\nconst CloseButtonStyles = `\n  ${CLOSE_BUTTON} {\n    position: absolute;\n    top: 30px;\n    right: 10px;\n  }\n  \n  @container (max-width: ${BREAKPOINTS.MEDIUM - 1}px) {\n    ${CLOSE_BUTTON} {\n      top: 25px;\n      right: 5px;\n    }\n  }\n\n  ${CLOSE_BUTTON} > svg {\n    fill: ${token.color.black};\n    width: 24px;\n    height: 24px;\n  }\n`\n\n// prettier-ignore\nconst TextStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`${ALERT_TITLE}`]: typography.sans.large,\n    },\n  })}\n\n  ${ALERT_TITLE} {\n    text-transform: uppercase;\n  }\n\n  ${ALERT_TITLE} + * {\n    margin-top: ${token.spacing.sm};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`${ALERT_TEXT}`]: element.text.rich.advanced,\n    },\n  })}\n\n  ${ALERT_TEXT},\n  ${ALERT_TEXT} * {\n    font-size: 16px;;\n  }\n\n  ${ALERT_TEXT} + * {\n    margin-top: ${token.spacing.lg};\n  }\n\n  ${CTA} {\n    text-decoration: none;\n  }\n\n  ${CTA} svg {\n    max-width: 20px;\n  }\n`\n\n// prettier-ignore\nconst WrapperStyles = `\n  ${WRAPPER} {\n    position: relative;\n    padding-top: ${token.spacing.md};\n    padding-bottom: ${token.spacing.md};\n    padding-right: ${token.spacing.lg};\n  }\n\n  @container (min-width: ${BREAKPOINTS.MEDIUM}px) {\n    ${WRAPPER} {\n      padding-top: ${token.spacing.lg};\n      padding-bottom: ${token.spacing.lg};\n    }\n  }\n`\n\n// prettier-ignore\nconst LockStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`${LOCK}`]: layout.space.horizontal.full,\n    },\n  })}\n`\n\n// prettier-ignore\nconst ContainerStyles = `\n  ${CONTAINER} {\n    container: ${ELEMENT_NAME} / inline-size;\n    background-color: ${token.color.gray.lighter};\n    border-left: 4px solid ${token.color.red};\n    transition: height ${ANIMATION.SPEED}ms;\n    overflow: hidden;\n    position: relative;\n  }\n\n  @container (min-width: ${BREAKPOINTS.LARGE}px) {\n    ${CONTAINER} {\n      border-left: 8px solid ${token.color.red};\n    }\n  }\n`\n\n// prettier-ignore\nexport const STYLES_NAV_ALERT = `\n  ${DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${ContainerStyles}\n  ${LockStyles}\n  ${WrapperStyles}\n  ${TextStyles}\n  ${CloseButtonStyles}\n  ${OverwriteTypeGeneral}\n  ${OverwriteTypeClosed}\n`;\n\n// storage.ts\nconst logStorageError = (operation: string, error: Error): void => {\n  console.error(`UMD Component - Alert Storage: ${operation} failed:`, error);\n};\n\nconst getStoredValue = <T>(key: string): T | null => {\n  try {\n    const value = window.localStorage.getItem(key);\n    return value ? JSON.parse(value) : null;\n  } catch (error) {\n    logStorageError(`Reading ${key}`, error as Error);\n    return null;\n  }\n};\n\nconst setStoredValue = (key: string, value: unknown): void => {\n  try {\n    window.localStorage.setItem(key, JSON.stringify(value));\n  } catch (error) {\n    logStorageError('Saving value', error as Error);\n  }\n};\n\nconst clearAlertStorage = (): void => {\n  const { STORAGE_KEYS } = ALERT_CONSTANTS;\n  window.localStorage.removeItem(STORAGE_KEYS.ALERT_TIME);\n  window.localStorage.removeItem(STORAGE_KEYS.ALERT);\n};\n\nconst checkAlertCache = (): CacheCheckResult => {\n  const currentTime = new Date().getTime();\n  const { STORAGE_KEYS, CACHE } = ALERT_CONSTANTS;\n\n  try {\n    const alertTimeStr = getStoredValue<string>(STORAGE_KEYS.ALERT_TIME);\n    const cachedResponse = getStoredValue<AlertData>(STORAGE_KEYS.ALERT);\n\n    if (!alertTimeStr) {\n      setStoredValue(STORAGE_KEYS.ALERT_TIME, currentTime.toString());\n      return { shouldCheck: true, cachedData: null };\n    }\n\n    const alertTime = parseInt(alertTimeStr, 10);\n    const timeElapsed = currentTime - alertTime;\n\n    if (timeElapsed < CACHE.DURATION && cachedResponse) {\n      return { shouldCheck: false, cachedData: cachedResponse };\n    }\n\n    setStoredValue(STORAGE_KEYS.ALERT_TIME, currentTime.toString());\n    return { shouldCheck: true, cachedData: null };\n  } catch (error) {\n    console.error('Cache check failed:', error);\n    return { shouldCheck: true, cachedData: null };\n  }\n};\n\nconst updateAlertCache = (alert: AlertData): void => {\n  setStoredValue(ALERT_CONSTANTS.STORAGE_KEYS.ALERT, alert);\n};\n\nconst createElement = (\n  tag: string,\n  className?: string,\n  attributes?: ElementAttributes,\n): HTMLElement => {\n  const element = document.createElement(tag);\n  if (className) element.classList.add(className);\n  if (attributes) {\n    Object.entries(attributes).forEach(([key, value]) => {\n      element.setAttribute(key, value);\n    });\n  }\n  return element;\n};\n\nconst createCloseButton = (container: HTMLElement): HTMLButtonElement => {\n  const { ELEMENTS, ANIMATION } = ALERT_CONSTANTS;\n  const button = createElement('button', ELEMENTS.CLOSE_BUTTON, {\n    'aria-label': 'remove alert',\n  }) as HTMLButtonElement;\n\n  button.innerHTML = iconCloseLarge;\n  button.addEventListener('click', () => {\n    const cachedAlert = getStoredValue<AlertData>(\n      ALERT_CONSTANTS.STORAGE_KEYS.ALERT,\n    );\n    if (cachedAlert) {\n      // Animate close\n      container.style.height = `${container.offsetHeight}px`;\n      container.style.transition = `height ${ANIMATION.SPEED}ms`;\n\n      updateAlertCache({ ...cachedAlert, hidden: true });\n\n      setTimeout(() => {\n        container.style.height = '0px';\n      }, 100);\n\n      setTimeout(() => {\n        container.remove();\n      }, ANIMATION.SPEED + 100);\n    }\n  });\n\n  return button;\n};\n\nconst createCTAElement = ({\n  ctaText,\n  ctaUrl,\n}: {\n  ctaText: string;\n  ctaUrl: string;\n}) => {\n  const link = createElement('a', ALERT_CONSTANTS.ELEMENTS.CTA, {\n    href: ctaUrl,\n    rel: 'noopener noreferrer',\n    target: '_blank',\n  });\n  link.innerHTML = ctaText;\n\n  return actions.options({\n    element: link,\n    isTypeSecondary: true,\n  });\n};\n\nconst createAlertContent = (\n  alert: AlertData,\n  container: HTMLElement,\n): HTMLElement => {\n  const { ELEMENTS } = ALERT_CONSTANTS;\n  const wrapper = createElement('div', ELEMENTS.WRAPPER);\n  const lock = createElement('div', ELEMENTS.LOCK);\n  const headlineText = alert.headline || alert.title;\n\n  // Create elements\n  const title = createElement('p', ELEMENTS.TITLE);\n  title.innerHTML = headlineText;\n\n  const closeButton = createCloseButton(container);\n\n  wrapper.append(closeButton, title);\n\n  if (alert.text) {\n    const message = createElement('div', ELEMENTS.TEXT);\n    message.innerHTML = alert.text;\n    wrapper.append(closeButton, title, message);\n  }\n\n  // Add CTA if exists\n  if (alert.ctaUrl) {\n    const cta = createCTAElement({\n      ctaText: alert.ctaText || headlineText,\n      ctaUrl: alert.ctaUrl,\n    });\n\n    wrapper.appendChild(cta.element);\n  }\n\n  lock.appendChild(wrapper);\n  return lock;\n};\n\nconst createAlertComponent = (alert: AlertData): HTMLElement => {\n  const { ELEMENTS, ATTRIBUTES } = ALERT_CONSTANTS;\n\n  const declaration = createElement('div', ELEMENTS.DECLARATION);\n  const container = createElement('div', ELEMENTS.CONTAINER, {\n    id: ELEMENTS.ALERT_ID,\n    [ATTRIBUTES.TYPE]: alert.type,\n  });\n\n  const content = createAlertContent(alert, container);\n  container.appendChild(content);\n  declaration.appendChild(container);\n\n  return declaration;\n};\n\nconst fetchAlerts = async ({\n  alertUrl,\n}: AlertProps): Promise<AlertResponse | null> => {\n  try {\n    const url = alertUrl || ALERT_CONSTANTS.URLS.DEFAULT;\n\n    return await fetchGraphQL({\n      query: QUERY,\n      url,\n      token: 'VIDnMeNYHTrLvWPtPpK5MNpjuv5WmmhU',\n    });\n  } catch (error) {\n    console.error('Failed to fetch alerts:', error);\n    return null;\n  }\n};\n\nexport const createNavAlert = async ({ alertUrl }: AlertProps) => {\n  const alertCache = checkAlertCache();\n\n  // Show cached alert if valid\n  if (\n    !alertCache.shouldCheck &&\n    alertCache.cachedData &&\n    !alertCache.cachedData.hidden\n  ) {\n    return { element: createAlertComponent(alertCache.cachedData) };\n  }\n\n  // Fetch new alerts\n  const response = await fetchAlerts({ alertUrl });\n  if (!response?.data?.entries[0]) {\n    clearAlertStorage();\n    return null;\n  }\n\n  const alert = response.data?.entries[0];\n  const cachedAlert = getStoredValue<AlertData>(\n    ALERT_CONSTANTS.STORAGE_KEYS.ALERT,\n  );\n\n  // Handle alert updates\n  if (cachedAlert?.id === alert.id) {\n    if (!cachedAlert.hidden && alertCache.shouldCheck) {\n      return { element: createAlertComponent(cachedAlert) };\n    }\n  } else {\n    clearAlertStorage();\n    updateAlertCache(alert);\n    return { element: createAlertComponent(alert) };\n  }\n\n  return null;\n};\n"],"names":["element","ELEMENTS","ANIMATION","iconCloseLarge","actions.options","ATTRIBUTES"],"mappings":"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"}

package/dist/composite/navigation/utility/index.d.ts

@@ -13,7 +13,7 @@ type TypeMenuItemsRequirements = {
     isSearchDomain?: boolean;
 };
 type TypeUtilityRequirements = TypeMenuItemsRequirements & TypeAlertProps;
-declare const CreateNavigationUtility: (props: TypeUtilityRequirements) => {
+export declare const createCompositeNavigationUtility: (props: TypeUtilityRequirements) => {
     element: HTMLDivElement;
     styles: string;
     events: {
@@ -21,5 +21,5 @@ declare const CreateNavigationUtility: (props: TypeUtilityRequirements) => {
         hideAlert: () => void;
     };
 };
-export default CreateNavigationUtility;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/navigation/utility/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/navigation/utility/index.ts"],"names":[],"mappings":"AAUA,OAAO,EAIL,cAAc,EACf,MAAM,SAAS,CAAC;AAGjB,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,KAAK,uBAAuB,GAAG,yBAAyB,GAAG,cAAc,CAAC;AAqqB1E,QAAA,MAAM,uBAAuB,GAAI,OAAO,uBAAuB;;;;;;;CAuHzD,CAAC;AAEP,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/navigation/utility/index.ts"],"names":[],"mappings":"AAUA,OAAO,EAIL,cAAc,EACf,MAAM,SAAS,CAAC;AAGjB,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,KAAK,uBAAuB,GAAG,yBAAyB,GAAG,cAAc,CAAC;AA8xB1E,eAAO,MAAM,gCAAgC,UAzHL,uBAAuB;;;;;;;CAyHQ,CAAC"}

package/dist/composite/navigation/utility/index.js

@@ -1,32 +1,12 @@
-"use strict";
-const token = require("@universityofmaryland/web-token-library");
-const elementStyles = require("@universityofmaryland/web-styles-library/element");
-const layout = require("@universityofmaryland/web-styles-library/layout");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-const events = require("@universityofmaryland/web-utilities-library/events");
-const search$1 = require("@universityofmaryland/web-icons-library/search");
-const controls = require("@universityofmaryland/web-icons-library/controls");
-const alert = require("./alert.js");
-const search = require("./search.js");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
-const layout__namespace = /* @__PURE__ */ _interopNamespaceDefault(layout);
+import * as token from "@universityofmaryland/web-token-library";
+import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import * as layout from "@universityofmaryland/web-styles-library/layout";
+import { jssToCSS, jssEntryToCSS } from "@universityofmaryland/web-utilities-library/styles";
+import { handleKeyboardNavigation } from "@universityofmaryland/web-utilities-library/events";
+import { search } from "@universityofmaryland/web-icons-library/search";
+import { chevron_down } from "@universityofmaryland/web-icons-library/controls";
+import { STYLES_NAV_ALERT, ALERT_CONSTANTS, createNavAlert } from "./alert.js";
+import { createCompositeNavigationSearch } from "./search.js";
 const flagIcon = `<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28"><title>Flag</title><path d="M5 4c0 .72-.39 1.36-1 1.72V25.5c0 .266-.234.5-.5.5h-1c-.266 0-.5-.234-.5-.5V5.72c-.61-.36-1-1-1-1.72 0-1.11.89-2 2-2s2 .89 2 2zm23 1v11.922c0 .578-.36.797-.812 1.03-1.766.954-3.72 1.814-5.766 1.814-2.875 0-4.25-2.188-7.656-2.188-2.484 0-5.094 1.125-7.25 2.28-.172.095-.328.142-.516.142-.547 0-1-.453-1-1V7.406c0-.375.187-.64.484-.86.375-.25.828-.468 1.234-.67 1.97-1 4.36-1.876 6.578-1.876 2.453 0 4.375.812 6.547 1.828.438.22.89.297 1.375.297C23.67 6.125 26.312 4 26.998 4c.548 0 1 .453 1 1z"></path></svg>`;
 const homeIcon = `<svg aria-hidden="true"  xmlns="http://www.w3.org/2000/svg" width="26" height="28" viewBox="0 0 26 28"><title>School</title><path d="M22 15.5V23c0 .547-.453 1-1 1h-6v-6h-4v6H5c-.547 0-1-.453-1-1v-7.5c0-.03.016-.063.016-.094L13 8l8.984 7.406c.016.03.016.063.016.094zm3.484-1.078l-.97 1.156c-.077.094-.202.156-.327.172h-.047c-.125 0-.234-.03-.328-.11L13 6.626 2.185 15.64c-.11.08-.234.126-.375.11-.124-.016-.25-.078-.327-.172l-.97-1.156c-.17-.203-.14-.53.064-.703L11.81 4.36c.657-.547 1.72-.547 2.376 0L18 7.547V4.5c0-.28.218-.5.5-.5h3c.28 0 .5.22.5.5v6.375l3.42 2.844c.204.17.235.5.064.702z"></path></svg>`;
 const starIcon = `<svg aria-hidden="true"  xmlns="http://www.w3.org/2000/svg" width="26" height="28" viewBox="0 0 26 28"><title>Star</title><path d="M26 10.11c0 .28-.203.546-.406.75l-5.672 5.53 1.344 7.812c.016.11.016.203.016.313 0 .406-.187.78-.64.78-.22 0-.44-.077-.626-.186L13 21.42 5.984 25.11c-.203.108-.406.186-.625.186-.454 0-.657-.375-.657-.78 0-.11.016-.204.03-.314L6.08 16.39.39 10.86c-.187-.204-.39-.47-.39-.75 0-.47.483-.657.874-.72l7.844-1.14 3.516-7.11c.14-.297.406-.64.766-.64s.625.343.766.64l3.516 7.11 7.844 1.14c.375.063.875.25.875.72z"></path></svg>`;
@@ -61,15 +41,15 @@ const OVERWRIE_WRAPPER_WITHOUT_ITEMS = `${OVERWRITE_CONTAINER_WITHOUT_ITEMS} .${
 const isDesktop = () => window.innerWidth >= DESKTOP;
 const TOP_TWENTY_TEXT = `A Top 20 Public Research University`;
 const LockStyles = `
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`.${ELEMENT_UTILITY_LOCK}`]: layout__namespace.space.horizontal.larger
+    [`.${ELEMENT_UTILITY_LOCK}`]: layout.space.horizontal.larger
   }
 })}
 
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`${OVERWRITE_LOCK_FULL}`]: layout__namespace.space.horizontal.full
+    [`${OVERWRITE_LOCK_FULL}`]: layout.space.horizontal.full
   }
 })}
 `;
@@ -83,7 +63,7 @@ const WrapperStyles = `
   }
 
   .${ELEMENT_UTILITY_WRAPPER} > a {
-    color: ${token__namespace.color.white};
+    color: ${token.color.white};
     text-transform: uppercase;
   }
 
@@ -118,7 +98,7 @@ const MenuStyles = `
   }
 
   .${ELEMENT_UTILITY_MENU} a {
-    color: ${token__namespace.color.white};
+    color: ${token.color.white};
     text-decoration: none;
     text-transform: uppercase;
   }
@@ -128,7 +108,7 @@ const MenuStyles = `
     align-items: center;
     gap: 4px;
     height: 100%;
-    padding: ${token__namespace.spacing.min} ${token__namespace.spacing.sm};
+    padding: ${token.spacing.min} ${token.spacing.sm};
     font-weight: 700;
     font-size: 13px;
     transition: background ${ANIMATION_IN_SPEED}ms;
@@ -141,13 +121,13 @@ const MenuStyles = `
   }
 
   .${ELEMENT_UTILITY_MENU} > *[aria-expanded="true"] {
-    background-color: ${token__namespace.color.redDark};
+    background-color: ${token.color.redDark};
   }
 
   @container (max-width: ${DESKTOP - 1}px) {
     .${ELEMENT_UTILITY_CONTAINTER} .${ELEMENT_UTILITY_MENU} > * {
-      border-top: 1px solid ${token__namespace.color.gray.lighter};
-      color: ${token__namespace.color.red};
+      border-top: 1px solid ${token.color.gray.lighter};
+      color: ${token.color.red};
       order: 2;
       transition: background ${ANIMATION_OUT_SPEED}ms, color ${ANIMATION_OUT_SPEED}ms;
     }
@@ -162,8 +142,8 @@ const MenuStyles = `
   @container (max-width: ${DESKTOP - 1}px) {
     .${ELEMENT_UTILITY_MENU} > a:hover,
     .${ELEMENT_UTILITY_MENU} > a:focus {
-      background-color: ${token__namespace.color.red};
-      color: ${token__namespace.color.white};
+      background-color: ${token.color.red};
+      color: ${token.color.white};
       transition: background ${ANIMATION_IN_SPEED}ms, color ${ANIMATION_IN_SPEED}ms;
     }
   }
@@ -171,14 +151,14 @@ const MenuStyles = `
   @container (min-width: ${DESKTOP}px) {
     .${ELEMENT_UTILITY_MENU} > *:hover,
     .${ELEMENT_UTILITY_MENU} > *:focus {
-      background-color: ${token__namespace.color.redDark};
+      background-color: ${token.color.redDark};
     }
   }
 
   @container (max-width: ${DESKTOP - 1}px) {
     .${ELEMENT_UTILITY_MENU} > a:hover svg,
     .${ELEMENT_UTILITY_MENU} > a:focus svg {
-      fill: ${token__namespace.color.white};
+      fill: ${token.color.white};
     }
   }
 
@@ -200,14 +180,14 @@ const MenuStyles = `
 
   @container (max-width: ${DESKTOP - 1}px) {
     .${ELEMENT_UTILITY_MENU} svg {
-      fill: ${token__namespace.color.red};
+      fill: ${token.color.red};
       transition: fill ${ANIMATION_IN_SPEED}ms;
     }
   }
 
   @container (min-width: ${DESKTOP}px) {
     .${ELEMENT_UTILITY_MENU} svg {
-      fill: ${token__namespace.color.white};
+      fill: ${token.color.white};
     }
   }
 `;
@@ -215,8 +195,8 @@ const MobileMenuStyles = `
   @container (max-width: ${DESKTOP - 1}px) {
     .${ELEMENT_UTILITY_MOBILE_MENU} {
       position: absolute;
-      left: -${token__namespace.spacing["2xl"]};
-      right: -${token__namespace.spacing["2xl"]};
+      left: -${token.spacing["2xl"]};
+      right: -${token.spacing["2xl"]};
       top: 44px;
       box-shadow: 0 5px 5px 1px rgba(0, 0, 0, .2);
       height: 0;
@@ -224,14 +204,14 @@ const MobileMenuStyles = `
       transition: height ${ANIMATION_OUT_SPEED}ms;
       display: flex;
       flex-direction: column;
-      background-color: ${token__namespace.color.white};
+      background-color: ${token.color.white};
     }
   }
 
   @container (max-width: ${TABLET - 1}px) {
     .${ELEMENT_UTILITY_MOBILE_MENU} {
-      left: -${token__namespace.spacing.md};
-      right: -${token__namespace.spacing.md};
+      left: -${token.spacing.md};
+      right: -${token.spacing.md};
     }
   }
 
@@ -241,7 +221,7 @@ const MobileMenuStyles = `
       height: inherit !important;
       margin-left: auto;
       position: relative;
-      margin-right: -${token__namespace.spacing.md};
+      margin-right: -${token.spacing.md};
     }
   }
 
@@ -274,8 +254,8 @@ const MobileButtonStyles = `
   .${ELEMENT_UTILITY_MOBILE_BUTTON} {
     margin-left: auto;
     height: 100%;
-    padding: ${token__namespace.spacing.xs} ${token__namespace.spacing.md};
-    margin-right: -${token__namespace.spacing.md};
+    padding: ${token.spacing.xs} ${token.spacing.md};
+    margin-right: -${token.spacing.md};
     height: 100%;
     display: flex;
     align-items: center;
@@ -283,7 +263,7 @@ const MobileButtonStyles = `
   }
 
   @media (min-width: ${TABLET}px) {
-    margin-right: -${token__namespace.spacing["2xl"]};
+    margin-right: -${token.spacing["2xl"]};
   }
 
   @container (min-width: ${DESKTOP}px) {
@@ -294,12 +274,12 @@ const MobileButtonStyles = `
 
   .${ELEMENT_UTILITY_MOBILE_BUTTON}:hover,
   .${ELEMENT_UTILITY_MOBILE_BUTTON}:focus {
-    background-color: ${token__namespace.color.redDark};
+    background-color: ${token.color.redDark};
   }
 
   @container (max-width: ${DESKTOP - 1}px) {
     .${ELEMENT_UTILITY_MOBILE_BUTTON} svg {
-      fill: ${token__namespace.color.white};
+      fill: ${token.color.white};
       width: 18px;
       height: 18px;
     }
@@ -316,7 +296,7 @@ const LogoStyles = `
   @media (max-width: ${TABLET - 1}px) {
     .${ELEMENT_UTILITY_LOGO_COLUMN} {
       flex-direction: column;
-      gap: ${token__namespace.spacing.min};
+      gap: ${token.spacing.min};
       text-align: center;
     }
   }
@@ -324,12 +304,12 @@ const LogoStyles = `
   @media (min-width: ${TABLET}px) {
     .${ELEMENT_UTILITY_LOGO_COLUMN} {
       align-items: center;
-      gap: ${token__namespace.spacing.xs};
+      gap: ${token.spacing.xs};
     }
   }
 
   .${ELEMENT_UTILITY_LOGO_COLUMN} * {
-    color: ${token__namespace.color.white};
+    color: ${token.color.white};
 
   }
 
@@ -356,7 +336,7 @@ const LogoStyles = `
       left: -7px;
       height: 100%;
       width: 1px;
-      background-color: ${token__namespace.color.white};
+      background-color: ${token.color.white};
     }
   }
 
@@ -374,7 +354,7 @@ let STYLES_NAVIGATION_UTILITY = `
 
   .${ELEMENT_UTILITY_CONTAINTER} {
     display: block;
-    background-color: ${token__namespace.color.red};
+    background-color: ${token.color.red};
     position: relative;
     z-index: 999;
   }
@@ -385,8 +365,8 @@ let STYLES_NAVIGATION_UTILITY = `
   ${MenuStyles}
   ${MobileButtonStyles}
   ${MobileMenuStyles}
-  ${alert.STYLES_NAV_ALERT}
-  ${search.Styles}
+  ${STYLES_NAV_ALERT}
+  ${createCompositeNavigationSearch.Styles}
 `;
 const CreateSearchFormButton = ({
   expandElement
@@ -423,15 +403,15 @@ const CreateSearchFormButton = ({
       button.setAttribute("aria-expanded", "true");
       if (focusElement) focusElement.focus();
     }, 100);
-    focusCallback = events.handleKeyboardNavigation({
+    focusCallback = handleKeyboardNavigation({
       element: expandElement,
       action: () => eventClose()
     });
   };
   button.setAttribute("aria-label", "enable the search form");
   button.setAttribute("type", "button");
-  button.innerHTML = `${search$1.search}`;
-  button.setAttribute("aria-controls", search.Elements.form);
+  button.innerHTML = `${search}`;
+  button.setAttribute("aria-controls", createCompositeNavigationSearch.Elements.form);
   button.classList.add(ELEMENT_UTILITY_SEARCH_BUTTON);
   button.setAttribute("aria-expanded", "false");
   button.addEventListener("click", () => {
@@ -476,12 +456,12 @@ const CreateMobileMenuButton = ({
       button.setAttribute("aria-expanded", "true");
       if (focusElement) focusElement.focus();
     }, 100);
-    focusCallback = events.handleKeyboardNavigation({
+    focusCallback = handleKeyboardNavigation({
       element: expandElement,
       action: () => eventClose()
     });
   };
-  button.innerHTML = `${controls.chevron_down}`;
+  button.innerHTML = `${chevron_down}`;
   button.setAttribute("type", "button");
   button.setAttribute("aria-label", "toggle mobile menu");
   button.setAttribute("aria-controls", `${ELEMENT_UTILITY_MOBILE_MENU}`);
@@ -608,7 +588,7 @@ const CreateMenuItems = ({
   }
   if (isSearch || isSearchDomain) {
     hasItems = true;
-    const formElement = search.CreateElement({ isSearchDomain });
+    const formElement = createCompositeNavigationSearch.CreateElement({ isSearchDomain });
     const button = CreateSearchFormButton({
       expandElement: formElement
     });
@@ -628,10 +608,10 @@ const CreateNavigationUtility = (props) => (() => {
     const wrapper = document.createElement("div");
     const logoColumn = createLogoColumn();
     const secondaryCta = {
-      ...elementStyles__namespace.action.secondary.normal,
-      className: `${alert.ALERT_CONSTANTS.ELEMENTS.CTA}`
+      ...elementStyles.action.secondary.normal,
+      className: `${ALERT_CONSTANTS.ELEMENTS.CTA}`
     };
-    let styles$1 = STYLES_NAVIGATION_UTILITY + styles.jssEntryToCSS(secondaryCta);
+    let styles = STYLES_NAVIGATION_UTILITY + jssEntryToCSS(secondaryCta);
     const setLayout = () => {
       const menuItems = CreateMenuItems({ ...props });
       const mobileMenu = document.createElement("div");
@@ -652,7 +632,7 @@ const CreateNavigationUtility = (props) => (() => {
     };
     const resizeEvent = () => {
       const isDesktop2 = window.innerWidth >= DESKTOP;
-      const form = container.querySelector(`.${search.Elements.form}`);
+      const form = container.querySelector(`.${createCompositeNavigationSearch.Elements.form}`);
       const menu = container.querySelector(`.${ELEMENT_UTILITY_MOBILE_MENU}`);
       if (!form || !menu) return;
       if (isDesktop2) {
@@ -667,9 +647,9 @@ const CreateNavigationUtility = (props) => (() => {
     };
     const load = async () => {
       if (!isAlertOff) {
-        const alert$1 = await alert.createNavAlert(props);
-        if (alert$1) {
-          container.insertBefore(alert$1?.element, container.firstChild);
+        const alert = await createNavAlert(props);
+        if (alert) {
+          container.insertBefore(alert?.element, container.firstChild);
         }
       }
       setLayout();
@@ -677,20 +657,20 @@ const CreateNavigationUtility = (props) => (() => {
     };
     const showAlert = async () => {
       const isCurrentAlert = container.querySelector(
-        `.${alert.ALERT_CONSTANTS.ELEMENTS.CONTAINER}`
+        `.${ALERT_CONSTANTS.ELEMENTS.CONTAINER}`
       );
       if (isCurrentAlert) return;
-      const alert$1 = await alert.createNavAlert(props);
-      if (alert$1) {
-        container.insertBefore(alert$1?.element, container.firstChild);
+      const alert = await createNavAlert(props);
+      if (alert) {
+        container.insertBefore(alert?.element, container.firstChild);
       }
     };
     const hideAlert = () => {
-      const alert$1 = container.querySelector(
-        `.${alert.ALERT_CONSTANTS.ELEMENTS.CONTAINER}`
+      const alert = container.querySelector(
+        `.${ALERT_CONSTANTS.ELEMENTS.CONTAINER}`
       );
-      if (alert$1) {
-        alert$1.remove();
+      if (alert) {
+        alert.remove();
       }
     };
     wrapper.appendChild(logoColumn);
@@ -706,7 +686,7 @@ const CreateNavigationUtility = (props) => (() => {
     window.addEventListener("resize", resizeEvent);
     return {
       element: declaration,
-      styles: styles$1,
+      styles,
       events: {
         showAlert,
         hideAlert
@@ -714,5 +694,8 @@ const CreateNavigationUtility = (props) => (() => {
     };
   }
 })();
-module.exports = CreateNavigationUtility;
+const createCompositeNavigationUtility = CreateNavigationUtility;
+export {
+  createCompositeNavigationUtility
+};
 //# sourceMappingURL=index.js.map