@seamly/web-ui 20.8.1 → 21.0.1-beta.1

package/src/javascripts/domains/visibility/hooks.ts

@@ -1,44 +1,63 @@
+import type { VisibilityOptions } from 'config.types'
+import { RefObject, createRef } from 'preact'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { useDispatch, useSelector } from 'react-redux'
 import { useConfig } from 'domains/config/hooks'
 import { useAppDispatch } from 'domains/store'
 import { setVisibility } from 'domains/visibility/actions'
 import { setShowInlineView } from 'domains/visibility/slice'
-import { VisibilityState } from 'domains/visibility/visibility.types'
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
-import { useDispatch, useSelector } from 'react-redux'
 import { visibilityStates } from './constants'
-import * as Selectors from './selectors'
+import { selectShowInlineView, selectVisibility } from './selectors'
 
 export const useVisibility = () => {
   const dispatch = useAppDispatch()
-  const visible = useSelector(Selectors.selectVisibility)
+  const visible = useSelector(selectVisibility)
   const isVisible = visible ? visible !== visibilityStates.hidden : false
   const isOpen = visible === visibilityStates.open
   const isMinimized = visible === visibilityStates.minimized
 
   const dispatchVisibility = useCallback(
-    (visibility: VisibilityState) => dispatch(setVisibility(visibility)),
+    (visibility: VisibilityOptions) => dispatch(setVisibility(visibility)),
     [dispatch],
   )
 
+  const openChat = () => {
+    dispatchVisibility(visibilityStates.open as VisibilityOptions)
+  }
+
+  const closeChat = () => {
+    dispatchVisibility(visibilityStates.minimized as VisibilityOptions)
+  }
+
   return {
     isVisible,
     isOpen,
     isMinimized,
     visible,
     setVisibility: dispatchVisibility,
+    openChat,
+    closeChat,
   }
 }
 
+type UseIntersectOptions = {
+  /** Stops observing when the root element is visible. */
+  freezeOnceVisible?: boolean
+  /** Determines if useIntersect is enabled. */
+  enabled?: boolean
+  /** The node ref to apply the intersection to */
+  containerRef?: RefObject<any>
+}
+
 /**
  * Custom hook which enables initializing of IntersectionObserver on any node ref.
- * @param {object} options Hook options.
- * @param {boolean=} options.freezeOnceVisible Stops observing when the root element is visible.
- * @param {boolean=} options.enabled Determines if useIntersect is enabled.
  */
-const useIntersect = ({ freezeOnceVisible = false, enabled = true }) => {
+export const useIntersect = ({
+  freezeOnceVisible = false,
+  enabled = true,
+  containerRef = createRef(),
+}: UseIntersectOptions) => {
   const [entry, setEntry] = useState(null)
-  const containerRef = useRef(null)
-
   const isVisible = !!entry?.isIntersecting || !enabled
   const frozen = isVisible && freezeOnceVisible
 
@@ -63,7 +82,7 @@ const useIntersect = ({ freezeOnceVisible = false, enabled = true }) => {
     observer.observe(node)
 
     return () => observer.disconnect()
-  }, [enabled, frozen])
+  }, [containerRef, enabled, frozen])
 
   return { isVisible, containerRef }
 }
@@ -71,7 +90,7 @@ const useIntersect = ({ freezeOnceVisible = false, enabled = true }) => {
 export const useShowInlineView = () => {
   const dispatch = useDispatch()
   const { connectWhenInView } = useConfig()
-  const showInlineView = useSelector(Selectors.selectShowInlineView)
+  const showInlineView = useSelector(selectShowInlineView)
 
   const { containerRef, isVisible } = useIntersect({
     enabled: connectWhenInView,

package/src/javascripts/domains/visibility/selectors.ts

@@ -1,11 +1,12 @@
 import { createSelector } from '@reduxjs/toolkit'
+import type { RootState } from 'domains/store'
 
 export const selectVisibility = createSelector(
-  ({ visibility }) => visibility,
+  ({ visibility }: RootState) => visibility,
   (state) => state.visibility,
 )
 
 export const selectShowInlineView = createSelector(
-  ({ visibility }) => visibility,
+  ({ visibility }: RootState) => visibility,
   (state) => state.showInlineView,
 )

package/src/javascripts/domains/visibility/slice.ts

@@ -1,5 +1,5 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { VisibilityOptions } from 'config.types'
+import { PayloadAction, createSlice } from '@reduxjs/toolkit'
+import type { VisibilityOptions } from 'config.types'
 import { initializeConfig } from 'domains/config/actions'
 import { setVisibility } from 'domains/visibility/actions'
 import { visibilityStates } from 'domains/visibility/constants'
@@ -14,9 +14,6 @@ export const visibilitySlice = createSlice({
   name: 'visibility',
   initialState,
   reducers: {
-    setFromStorage: (state, action) => {
-      state.visibility = action.payload
-    },
     setShowInlineView: (state) => {
       state.showInlineView = true
     },
@@ -40,7 +37,6 @@ export const visibilitySlice = createSlice({
   },
 })
 
-export const { setFromStorage } = visibilitySlice.actions
 export const { setShowInlineView } = visibilitySlice.actions
 
 export default visibilitySlice.reducer

package/src/javascripts/index.ts

@@ -5,14 +5,6 @@ import initializeExternalApi from './lib/external-api/initialize-api'
 export default initializeExternalApi
 
 // Used by: StyleGuide
-export { API } from './api'
-
-// Used by: StyleGuide
-export { Provider as SeamlyStoreProvider } from 'react-redux'
-// Used by: StyleGuide
-export { default as SeamlyGeneralError } from './api/errors/seamly-general-error'
-// Used by: StyleGuide
-export { default as SeamlyOfflineError } from './api/errors/seamly-offline-error'
 // Used by: Client
 export { useConfig as useSeamlyConfig } from 'domains/config/hooks'
 // Used by: Client
@@ -23,18 +15,10 @@ export {
   useTranslations,
   useTranslationsContainer,
 } from 'domains/translations/hooks'
+export { visibilityStates } from 'domains/visibility/constants'
 // Used by: Client
 export { useVisibility as useSeamlyVisibility } from 'domains/visibility/hooks'
-export { visibilityStates } from 'domains/visibility/constants'
 export { calculateVisibility } from 'domains/visibility/utils'
-// Used by: Client
-export { className } from './lib/css'
-// Used by: StyleGuide
-export { default as Engine } from './lib/engine'
-// Used by: StyleGuide
-export { default as ExternalApi } from './lib/external-api'
-// Used by: StyleGuide
-export { randomId } from './lib/id'
 // Used by: StyleGuide
 export { default as ComponentFilter } from 'ui/components/conversation/component-filter'
 // Used by: Client
@@ -74,6 +58,23 @@ export { default as Interrupt } from 'ui/components/layout/interrupt'
 export { default as View } from 'ui/components/view'
 // Used by: Client
 export { default as DeprecatedView } from 'ui/components/view/deprecated-view'
+export { useSeamlyActions } from 'ui/hooks/use-seamly-actions'
+// Used by: StyleGuide
+// Used by: Client
+export { eventTypes } from 'ui/utils/seamly-utils'
+export { API } from './api'
+// Used by: StyleGuide
+export { default as SeamlyGeneralError } from './api/errors/seamly-general-error'
+// Used by: StyleGuide
+export { default as SeamlyOfflineError } from './api/errors/seamly-offline-error'
+// Used by: Client
+export { className } from './lib/css'
+// Used by: StyleGuide
+export { default as Engine } from './lib/engine'
+// Used by: StyleGuide
+export { default as ExternalApi } from './lib/external-api'
+// Used by: StyleGuide
+export { randomId } from './lib/id'
 // Used by: Client
 export {
   useEvents,
@@ -85,8 +86,3 @@ export {
   useSeamlyMessageContainerClassNames,
   useSeamlyOptions,
 } from './ui/hooks/seamly-hooks'
-// Used by: StyleGuide
-export { getUrlParams, getUrlSearchString } from './ui/utils/general-utils'
-// Used by: Client
-export { eventTypes } from './ui/utils/seamly-utils'
-export { useSeamlyActions } from 'ui/hooks/use-seamly-actions'

package/src/javascripts/lib/engine/{index.js → index.tsx}

@@ -1,19 +1,33 @@
 import { API } from 'api'
+import type { Config } from 'config.types'
+import Events, { Events as EventsType } from 'minivents'
+import { render } from 'preact'
+import ChatApp from 'ui/components/chat-app'
+import SeamlyCore from 'ui/components/core/seamly-core'
 import { initializeApp } from 'domains/app/actions'
-
 import { initializeConfig } from 'domains/config/actions'
 import { setConfig } from 'domains/config/slice'
 import { setLocale } from 'domains/i18n/actions'
-
 import { createStore } from 'domains/store'
 import { initializeVisibility } from 'domains/visibility/actions'
-import Events from 'minivents'
-import { render } from 'preact'
-import ChatApp from 'ui/components/chat-app'
-import SeamlyCore from 'ui/components/core/seamly-core'
+import type ExternalApi from 'lib/external-api'
 
 export default class Engine {
-  constructor(config, externalApi) {
+  config: Config
+
+  namespace: string
+
+  parentElement: HTMLElement
+
+  externalApi: ExternalApi
+
+  functions: {}
+
+  eventBus: EventsType
+
+  api: API
+
+  constructor(config: Config, externalApi: ExternalApi) {
     const { namespace = '', parentElement, showFaq, ...restConfig } = config
 
     this.config = {
@@ -32,6 +46,8 @@ export default class Engine {
       context: config.context,
     })
 
+    // Following are ignored because the types of minivents do not match the docs.
+    // @ts-ignore
     this.eventBus = new Events()
     this.functions = {}
     this.registerFunctions({
@@ -39,9 +55,11 @@ export default class Engine {
       off: this.eventBus.off,
     })
 
+    // @ts-ignore
     this.eventBus.on('function.register', (functionName, fn) =>
       this.registerFunction(functionName, fn),
     )
+    // @ts-ignore
     this.eventBus.on('function.unregister', (functionName, fn) =>
       this.unregisterFunction(functionName, fn),
     )

package/src/javascripts/lib/url-helpers.ts

@@ -0,0 +1,112 @@
+export const getUrlSearchParams = () => {
+  const params = new URLSearchParams(window.location.search)
+
+  return Array.from(params.entries()).reduce(
+    (acc, [key, val]) => ({ ...acc, [key]: val }),
+    {},
+  )
+}
+
+// Return search parameters as a string
+export const getUrlSearchString = (params: Record<string, string>) =>
+  new URLSearchParams(params).toString()
+
+// Return search parameters found in URL or sessionStorage
+export const getSearchParamsByKeys = <T extends string>(
+  ...keys: T[]
+): Record<T, string> => {
+  const url = new URL(window.location.href)
+
+  const values = keys.reduce((acc, key) => {
+    const searchParam = url.searchParams.get(key)
+    const param = searchParam || sessionStorage.getItem(key)
+    if (param) {
+      acc[key] = param
+    }
+    return acc
+  }, {} as Record<T, string>)
+
+  return values
+}
+
+// Adds a search parameter to the url
+export const setSearchParam = (key: string, value: string): void => {
+  const url = new URL(window.location.href)
+  const { searchParams } = url
+
+  searchParams.set(key, value)
+
+  url.search = searchParams.toString()
+  window.location.href = url.toString()
+}
+
+// Replace search parameters with those found in URL search parameters or sessionStorage
+export const replaceSearchParams = <T extends string>(
+  ...keys: T[]
+): Record<T, string> => {
+  const url = new URL(window.location.href)
+
+  const params = keys.reduce<URLSearchParams>((acc, key) => {
+    const paramValue = url.searchParams.get(key)
+
+    const value = paramValue || sessionStorage.getItem(key)
+
+    // If the query parameter is present, add it to the sessionStorage
+    if (paramValue) {
+      sessionStorage.setItem(key, paramValue)
+    }
+
+    // Bail if there is nothing to set
+    if (!value) return acc
+
+    acc.set(key, value)
+    return acc
+  }, new URLSearchParams())
+
+  // To keep other params in place, we merge them with the current URL parameters
+  const combinedParams = new URLSearchParams({
+    ...Object.fromEntries(url.searchParams),
+    ...Object.fromEntries(params),
+  })
+
+  if (combinedParams.toString()) {
+    window.history.replaceState(null, null, `?${combinedParams}`)
+  }
+
+  return getSearchParamsByKeys(...params.keys())
+}
+
+// Sets up click handlers for elements with data-attribute `data-reset-search-params`.
+// Clicking these will remove all given keys from the sessionStorage and remove the search parameters from the url
+
+// If you want to reset both 'apiKey' and 'locale' when the event is executed, you would use it as followed
+// import { initResetSearchParams } from 'lib/url-helpers'
+
+// Setup the event handlers for the search parameters you want to be reset after execution.
+// initResetSearchParams('apiKey', 'locale')
+
+// Somewhere in the HTML add an element with the 'data-reset-search-params' attribute.
+// <a href="#" data-reset-search-params>Reset account and source locale</a>
+export const initResetSearchParams = <T extends string>(...keys: T[]): void => {
+  const resetLink = document.querySelector('[data-reset-search-params]')
+
+  if (!resetLink) {
+    return
+  }
+
+  resetLink.addEventListener('click', (e) => {
+    e.preventDefault()
+    const url = new URL(window.location.href)
+
+    keys.forEach((key) => {
+      // Clear current session for each key
+      sessionStorage.removeItem(key)
+
+      // Delete key from url
+      url.searchParams.delete(key)
+    })
+
+    // Reload page
+    window.location.href = url.toString()
+  })
+}

package/src/javascripts/package/components.js

@@ -1,3 +1,17 @@
+import Conversation from 'ui/components/conversation/conversation'
+import EventParticipant from 'ui/components/conversation/event/event-participant'
+import Text from 'ui/components/conversation/event/text'
+import MessageContainer from 'ui/components/conversation/message-container'
+import DeprecatedToggleButton from 'ui/components/entry/deprecated-toggle-button'
+import EntryContainer from 'ui/components/entry/entry-container'
+import AgentInfo from 'ui/components/layout/agent-info'
+import Chat from 'ui/components/layout/chat'
+import ChatFrame from 'ui/components/layout/chat-frame'
+import Header from 'ui/components/layout/header'
+import Icon from 'ui/components/layout/icon'
+import View from 'ui/components/view'
+import DeprecatedView from 'ui/components/view/deprecated-view'
+
 export {
   AgentInfo,
   Chat,
@@ -12,4 +26,4 @@ export {
   DeprecatedToggleButton,
   DeprecatedView,
   View,
-} from '@seamly/web-ui'
+}

package/src/javascripts/package/config.js

@@ -1 +1 @@
-export { visibilityStates } from '@seamly/web-ui'
+export { visibilityStates } from 'domains/visibility/constants'

package/src/javascripts/package/contexts.js

@@ -1,5 +1,7 @@
-export {
+import {
   SeamlyApiContext,
   SeamlyEventBusContext,
-  SeamlyLiveRegionContext,
-} from '@seamly/web-ui'
+} from 'ui/components/core/seamly-api-context'
+import { SeamlyLiveRegionContext } from 'ui/components/core/seamly-live-region-context'
+
+export { SeamlyApiContext, SeamlyEventBusContext, SeamlyLiveRegionContext }

package/src/javascripts/package/hooks.js

@@ -1,3 +1,21 @@
+import { useChoicePrompt } from 'ui/components/conversation/event/choice-prompt'
+import {
+  useSeamlyEventStream,
+  useSeamlyIdleDetachCountdown,
+  useSeamlyMessageContainerClassNames,
+  useSeamlyOptions,
+} from 'ui/hooks/seamly-hooks'
+import { useEvents } from 'ui/hooks/seamly-state-hooks'
+import useSeamlyChat from 'ui/hooks/use-seamly-chat'
+import useSeamlyCommands from 'ui/hooks/use-seamly-commands'
+import { useGeneratedId } from 'ui/hooks/utility-hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import {
+  useTranslatedEventData,
+  useTranslations,
+  useTranslationsContainer,
+} from 'domains/translations/hooks'
+
 export {
   useChoicePrompt,
   useEvents,
@@ -12,4 +30,4 @@ export {
   useTranslatedEventData,
   useTranslations,
   useTranslationsContainer,
-} from '@seamly/web-ui'
+}

package/src/javascripts/package/utils.js

@@ -1,10 +1,20 @@
+import { eventTypes } from 'ui/utils/seamly-utils'
+import { calculateVisibility } from 'domains/visibility/utils'
+import { className } from 'lib/css'
+import Engine from 'lib/engine'
+import ExternalApi from 'lib/external-api'
+import { randomId } from 'lib/id'
+
+export {
+  getSearchParamsByKeys,
+  initResetSearchParams,
+  replaceSearchParams,
+} from 'lib/url-helpers'
 export {
   calculateVisibility,
   className,
   Engine,
   eventTypes,
   ExternalApi,
-  getUrlParams,
-  getUrlSearchString,
   randomId,
-} from '@seamly/web-ui'
+}

package/src/javascripts/schema.ts

@@ -185,6 +185,29 @@ export interface components {
            * @example false
            */
           resumeConversationPrompt?: boolean
+          /** @description Additional information to be able to show a translation proposal element. */
+          translationProposal?: {
+            /**
+             * @description Title of the activate button
+             * @example Activate
+             */
+            buttonLabel?: string
+            /**
+             * @description Proposed locale for translation
+             * @example en-GB
+             */
+            proposedLocale?: string
+            /**
+             * @description Screen reader text for dismiss button
+             * @example Dismiss translation proposal
+             */
+            srDismissButtonText?: string
+            /**
+             * @description Title of the shown translation proposal element
+             * @example Do you want to chat in English?
+             */
+            titleLabel?: string
+          } | null
         }
       }
       _links?: {
@@ -1084,6 +1107,11 @@ export interface operations {
                * @example https://seamly.ai/en/contact-us/
                */
               currentUrl?: string
+              /**
+               * @description The preferred locale of the user, for example the language of the browser UI.
+               * @example en-US
+               */
+              preferredLocale?: string
               /**
                * @description The screen resolution of the user.
                * @example 2560x1440

package/src/javascripts/style-guide/components/app.js

@@ -1,5 +1,6 @@
-import { getUrlParams, getUrlSearchString, randomId } from '@seamly/web-ui'
 import { useCallback, useEffect, useState } from 'preact/hooks'
+import { randomId } from 'lib/id'
+import { getSearchParamsByKeys, getUrlSearchParams } from 'lib/url-helpers'
 import StyleGuideLinks from 'style-guide/components/links'
 import StyleGuideView from 'style-guide/components/view'
 import { getDeprecatedStateObj, getStateObj } from 'style-guide/states'
@@ -22,6 +23,7 @@ const StyleGuideApp = ({
       styleGuideConfig.showLayoutModes || ['inline', 'window'],
       customMessageEventBodies,
     )
+
     return Object.keys(mainStateObj).reduce(
       (acc, key) => ({
         ...acc,
@@ -47,6 +49,13 @@ const StyleGuideApp = ({
 
   const getState = useCallback(
     (layoutMode, feature) => {
+      const keys = getSearchParamsByKeys('apiKey', 'locale')
+      const combinedParams = new URLSearchParams({
+        ...keys,
+        layoutMode,
+        feature,
+      })
+      window.history.replaceState(null, null, `?${combinedParams}`)
       const { headingText } = mainState[feature]
       setSelectedStateDescription(headingText)
       const bareState = mainState[feature][layoutMode]
@@ -62,6 +71,10 @@ const StyleGuideApp = ({
           ...config,
           showDisclaimer:
             bareState.config.showDisclaimer || config.showDisclaimer,
+          context: {
+            ...config.context,
+            ...bareState.config?.context,
+          },
           layoutMode: bareState.config.layoutMode,
           ...(overrideMessages ? { messages: overrideMessages } : {}),
           showFaq,
@@ -95,17 +108,8 @@ const StyleGuideApp = ({
   }, [staticState, setStaticState, showStyleGuide])
 
   const loadFromUrl = useCallback(() => {
-    const params = getUrlParams()
-    if (Object.keys(params).length !== 2) {
-      window.history.pushState(
-        null,
-        null,
-        `${window.location.pathname}?${getUrlSearchString({
-          layoutMode: 'inline',
-          feature: 'base',
-        })}`,
-      )
-    }
+    const params = getUrlSearchParams()
+
     const { layoutMode = 'inline', feature = 'base' } = params
     updateState(getState(layoutMode, feature))
     window.title = `Style`

package/src/javascripts/style-guide/components/links.js

@@ -1,4 +1,4 @@
-import { getUrlSearchString, getUrlParams } from '@seamly/web-ui'
+import { getUrlSearchParams, getUrlSearchString } from 'lib/url-helpers'
 import { categories } from 'style-guide/states'
 
 const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
@@ -13,7 +13,7 @@ const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
     setSelectedState(actionObj)
   }
 
-  const currentSearch = getUrlParams(window.location.search)
+  const currentSearch = getUrlSearchParams()
 
   return (
     <nav aria-label="Style guide navigation" className="nav--styleguide">
@@ -54,8 +54,8 @@ const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
                             <li
                               key={layoutMode}
                               className={
-                                layoutMode === currentSearch.layoutMode &&
-                                feature === currentSearch.feature
+                                layoutMode === currentSearch?.layoutMode &&
+                                feature === currentSearch?.feature
                                   ? 'state__selected'
                                   : null
                               }
@@ -69,8 +69,8 @@ const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
                                   feature,
                                 })}`}
                                 aria-current={
-                                  layoutMode === currentSearch.layoutMode &&
-                                  feature === currentSearch.feature
+                                  layoutMode === currentSearch?.layoutMode &&
+                                  feature === currentSearch?.feature
                                     ? 'page'
                                     : null
                                 }

package/src/javascripts/style-guide/components/static-core.js

@@ -1,15 +1,17 @@
 import { configureStore } from '@reduxjs/toolkit'
+import { useMemo, useRef } from 'preact/hooks'
+import { Provider } from 'react-redux'
+import ComponentFilter from 'ui/components/conversation/component-filter'
 import {
-  ComponentFilter,
   SeamlyApiContext,
   SeamlyEventBusContext,
-  SeamlyLiveRegionContext,
-  SeamlyStoreProvider,
-} from '@seamly/web-ui'
+} from 'ui/components/core/seamly-api-context'
+import SeamlyChat from 'ui/components/core/seamly-chat'
+import { SeamlyLiveRegionContext } from 'ui/components/core/seamly-live-region-context'
 import appReducer from 'domains/app/slice'
 import configReducer, {
-  setPreChatEvents,
   setConfig,
+  setPreChatEvents,
 } from 'domains/config/slice'
 import formsReducer from 'domains/forms/slice'
 import i18nReducer, {
@@ -20,7 +22,6 @@ import interruptReducer from 'domains/interrupt/slice'
 import stateReducer, { setParticipant } from 'domains/store/slice'
 import translationReducer from 'domains/translations/slice'
 import visibilityReducer from 'domains/visibility/slice'
-import { useMemo, useRef } from 'preact/hooks'
 
 const bareApi = {
   send: () => {
@@ -38,6 +39,8 @@ const bareApi = {
     },
   },
   hasConversation: () => false,
+  connected: false,
+  ready: false,
 }
 
 const SeamlyStaticCore = ({
@@ -117,15 +120,17 @@ const SeamlyStaticCore = ({
 
   return (
     state && (
-      <SeamlyStoreProvider store={store}>
+      <Provider store={store}>
         <SeamlyEventBusContext.Provider value={eventBusRef.current}>
           <SeamlyLiveRegionContext.Provider value={liveMsgRef.current}>
             <SeamlyApiContext.Provider value={bareApi}>
-              <ComponentFilter>{children}</ComponentFilter>
+              <SeamlyChat>
+                <ComponentFilter>{children}</ComponentFilter>
+              </SeamlyChat>
             </SeamlyApiContext.Provider>
           </SeamlyLiveRegionContext.Provider>
         </SeamlyEventBusContext.Provider>
-      </SeamlyStoreProvider>
+      </Provider>
     )
   )
 }

package/src/javascripts/style-guide/components/view.js

@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'preact/hooks'
-import { View } from '@seamly/web-ui'
+import { useEffect, useState } from 'preact/hooks'
+import View from 'ui/components/view'
 import { timeout } from 'ui/hooks/focus-helper-hooks'
 import StyleGuideStaticCore from './static-core'