@seamly/web-ui 20.1.0-alpha.1 → 20.2.0-alpha.2

package/src/javascripts/ui/components/conversation/event/event-participant.js

@@ -1,7 +1,7 @@
-import { useSeamlyParticipant } from '../../../hooks/seamly-hooks'
-import { className } from '../../../../lib/css'
-import { useConfig } from '../../../../domains/config'
-import { useI18n } from '../../../../domains/i18n'
+import { useSeamlyParticipant } from 'ui/hooks/seamly-hooks'
+import { className } from 'lib/css'
+import { useConfig } from 'domains/config'
+import { useI18n } from 'domains/i18n'
 
 const EventParticipant = ({ eventPayload }) => {
   const { t } = useI18n()

package/src/javascripts/ui/components/conversation/event/event.js

@@ -1,5 +1,5 @@
-import { className } from '../../../../lib/css'
-import useEventComponentMapping from '../../../hooks/use-event-component-mapping'
+import { className } from 'lib/css'
+import useEventComponentMapping from 'ui/hooks/use-event-component-mapping'
 import TimeIndicator from './divider/variants/time-indicator'
 
 const Event = ({ event, newParticipant }) => {

package/src/javascripts/ui/components/conversation/event/hooks/use-event-link-click-handler.js

@@ -1,5 +1,5 @@
-import { actionTypes } from '../../../../utils/seamly-utils'
-import { useSeamlyCommands } from '../../../../hooks/seamly-hooks'
+import { actionTypes } from 'ui/utils/seamly-utils'
+import { useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 
 const useEventLinkClickHandler = (eventId) => {
   const { sendAction } = useSeamlyCommands()

package/src/javascripts/ui/components/conversation/event/hooks/use-formatted-date.js

@@ -1,6 +1,6 @@
-import { useI18n } from '../../../../../domains/i18n'
-import { getRelativeDate } from '../../../../utils/general-utils'
-import { useConfig } from '../../../../../domains/config'
+import { useI18n } from 'domains/i18n'
+import { getRelativeDate } from 'ui/utils/general-utils'
+import { useConfig } from 'domains/config'
 
 const dateFormatOptions = { month: 'long', day: 'numeric', year: 'numeric' }
 const timeFormatOptions = { hour: 'numeric', minute: 'numeric' }

package/src/javascripts/ui/components/conversation/event/image-lightbox.js

@@ -1,8 +1,8 @@
 import { useState } from 'preact/hooks'
-import Lightbox from '../../widgets/lightbox'
-import { useI18n } from '../../../../domains/i18n'
-import { className } from '../../../../lib/css'
-import Icon from '../../layout/icon'
+import Lightbox from 'ui/components/widgets/lightbox'
+import { useI18n } from 'domains/i18n'
+import { className } from 'lib/css'
+import Icon from 'ui/components/layout/icon'
 
 const ImageLightbox = ({ description, url }) => {
   const { t } = useI18n()

package/src/javascripts/ui/components/conversation/event/image.js

@@ -1,7 +1,7 @@
 import { useState } from 'preact/hooks'
 import ImageLightbox from './image-lightbox'
-import MessageContainer from '../message-container'
-import { useTranslatedEventData } from '../../../../domains/translations'
+import MessageContainer from 'ui/components/conversation/message-container'
+import { useTranslatedEventData } from 'domains/translations'
 
 const Image = ({ event, descriptorId, ...props }) => {
   const [body] = useTranslatedEventData(event)

package/src/javascripts/ui/components/conversation/event/participant.js

@@ -1,9 +1,9 @@
 import { useMemo } from 'preact/hooks'
 import Mustache from 'mustache'
-import parseBody from '../../../../lib/parse-body'
-import EventDivider from '../event-divider'
-import { useTranslatedEventData } from '../../../../domains/translations'
-import { useParticipants } from '../../../../domains/config'
+import parseBody from 'lib/parse-body'
+import EventDivider from 'ui/components/conversation/event-divider'
+import { useTranslatedEventData } from 'domains/translations'
+import { useParticipants } from 'domains/config'
 
 const Participant = ({ event }) => {
   const { agent } = useParticipants()

package/src/javascripts/ui/components/conversation/event/text.js

@@ -1,9 +1,9 @@
 import { useMemo } from 'preact/hooks'
-import parseBody from '../../../../lib/parse-body'
+import parseBody from 'lib/parse-body'
 import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
 import { parseRichText } from './hooks/use-text-rendering'
-import MessageContainer from '../message-container'
-import { useTranslatedEventData } from '../../../../domains/translations'
+import MessageContainer from 'ui/components/conversation/message-container'
+import { useTranslatedEventData } from 'domains/translations'
 
 const Text = ({ event, ...props }) => {
   const [body] = useTranslatedEventData(event)

package/src/javascripts/ui/components/conversation/event/translation.js

@@ -1,6 +1,6 @@
-import { useI18n } from '../../../../domains/i18n'
-import MessageContainer from '../message-container'
-import { useTranslatedEventData } from '../../../../domains/translations'
+import { useI18n } from 'domains/i18n'
+import MessageContainer from 'ui/components/conversation/message-container'
+import { useTranslatedEventData } from 'domains/translations'
 
 const Translation = ({ event, ...props }) => {
   const { t } = useI18n()

package/src/javascripts/ui/components/conversation/event/upload.js

@@ -1,9 +1,9 @@
 import { useMemo } from 'preact/hooks'
-import { className } from '../../../../lib/css'
-import Icon from '../../layout/icon'
-import { useI18n } from '../../../../domains/i18n'
-import MessageContainer from '../message-container'
-import { useTranslatedEventData } from '../../../../domains/translations'
+import { className } from 'lib/css'
+import Icon from 'ui/components/layout/icon'
+import { useI18n } from 'domains/i18n'
+import MessageContainer from 'ui/components/conversation/message-container'
+import { useTranslatedEventData } from 'domains/translations'
 
 const UploadContent = ({ children, url, target }) =>
   url ? (

package/src/javascripts/ui/components/conversation/event/video.js

@@ -1,7 +1,7 @@
-import { className } from '../../../../lib/css'
-import { useSeamlyMessageContainerClassNames } from '../../../hooks/seamly-hooks'
-import { useTranslatedEventData } from '../../../../domains/translations'
-import MessageContainer from '../message-container'
+import { className } from 'lib/css'
+import { useSeamlyMessageContainerClassNames } from 'ui/hooks/seamly-hooks'
+import { useTranslatedEventData } from 'domains/translations'
+import MessageContainer from 'ui/components/conversation/message-container'
 
 const Video = ({ event, descriptorId, ...props }) => {
   const [body] = useTranslatedEventData(event)

package/src/javascripts/ui/components/conversation/event-divider.js

@@ -1,5 +1,5 @@
-import { className } from '../../../lib/css'
-import Icon from '../layout/icon'
+import { className } from 'lib/css'
+import Icon from 'ui/components/layout/icon'
 
 export default function EventDivider({
   children,

package/src/javascripts/ui/components/conversation/loader.js

@@ -1,6 +1,6 @@
 import EventParticipant from './event/event-participant'
-import { useSeamlyCurrentAgent } from '../../hooks/seamly-hooks'
-import { className } from '../../../lib/css'
+import { useSeamlyCurrentAgent } from 'ui/hooks/seamly-hooks'
+import { className } from 'lib/css'
 
 const Loader = () => {
   const { id } = useSeamlyCurrentAgent() || {}

package/src/javascripts/ui/components/conversation/message-container.js

@@ -1,8 +1,8 @@
-import { className } from '../../../lib/css'
+import { className } from 'lib/css'
 import EventParticipant from './event/event-participant'
-import { useSeamlyMessageContainerClassNames } from '../../hooks/component-helper-hooks'
-import { useTranslatedEventData } from '../../../domains/translations'
-import { useI18n } from '../../../domains/i18n'
+import { useSeamlyMessageContainerClassNames } from 'ui/hooks/component-helper-hooks'
+import { useTranslatedEventData } from 'domains/translations'
+import { useI18n } from 'domains/i18n'
 
 function MessageContainer({
   showParticipant = true,

package/src/javascripts/ui/components/core/seamly-activity-monitor.js

@@ -3,9 +3,9 @@ import SeamlyActivityEventContext from './seamly-activity-event-context'
 import {
   useSeamlyCommands,
   useSeamlyIdleDetachCountdown,
-} from '../../hooks/seamly-hooks'
-import { activitySendDelay } from '../../../config'
-import { className } from '../../../lib/css'
+} from 'ui/hooks/seamly-hooks'
+import { activitySendDelay } from 'config'
+import { className } from 'lib/css'
 
 const SeamlyActivityMonitor = ({ children }) => {
   const prevSendTimestamp = useRef(0)

package/src/javascripts/ui/components/core/seamly-core.js

@@ -9,8 +9,8 @@ import SeamlyInitializer from './seamly-initializer'
 import SeamlyEventSubscriber from './seamly-event-subscriber'
 import SeamlyFileUpload from './seamly-file-upload'
 import { SeamlyEventBusContext, SeamlyApiContext } from './seamly-api-context'
-import { StoreProvider } from '../../../domains/redux'
-import { catchError } from '../../../domains/errors'
+import { StoreProvider } from 'domains/redux'
+import { catchError } from 'domains/errors'
 import ComponentFilter from '../conversation/component-filter'
 
 const SeamlyCore = ({ store, children, config, eventBus, api }) => {

package/src/javascripts/ui/components/core/seamly-event-subscriber.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'preact/hooks'
-import { seamlyActions, featureKeys } from '../../utils/seamly-utils'
-import { useI18n } from '../../../domains/i18n'
+import { seamlyActions, featureKeys } from 'ui/utils/seamly-utils'
+import { useI18n } from 'domains/i18n'
 import {
   useSeamlyOptions,
   useEvents,
@@ -8,12 +8,12 @@ import {
   useSeamlyDispatchContext,
   useSeamlyIdleDetachCountdown,
   useSeamlyCommands,
-} from '../../hooks/seamly-hooks'
-import SeamlyGeneralError from '../../../api/errors/seamly-general-error'
-import SeamlySessionExpiredError from '../../../api/errors/seamly-session-expired-error'
-import SeamlyOfflineError from '../../../api/errors/seamly-offline-error'
-import * as InterruptActions from '../../../domains/interrupt/actions'
-import * as AppActions from '../../../domains/app/actions'
+} from 'ui/hooks/seamly-hooks'
+import SeamlyGeneralError from 'api/errors/seamly-general-error'
+import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
+import SeamlyOfflineError from 'api/errors/seamly-offline-error'
+import * as InterruptActions from 'domains/interrupt/actions'
+import * as AppActions from 'domains/app/actions'
 
 const {
   ADD_EVENT,

package/src/javascripts/ui/components/core/seamly-file-upload.js

@@ -1,12 +1,12 @@
 import SeamlyFileUploadContext from './seamly-file-upload-context'
-import { useI18n } from '../../../domains/i18n'
-import { randomId } from '../../../lib/id'
-import { seamlyActions } from '../../utils/seamly-utils'
+import { useI18n } from 'domains/i18n'
+import { randomId } from 'lib/id'
+import { seamlyActions } from 'ui/utils/seamly-utils'
 import {
   useSeamlyCommands,
   useSeamlyApiContext,
   useSeamlyDispatchContext,
-} from '../../hooks/seamly-hooks'
+} from 'ui/hooks/seamly-hooks'
 
 const {
   REGISTER_UPLOAD,

package/src/javascripts/ui/components/core/seamly-idle-detach-counter.js

@@ -1,5 +1,5 @@
-import useSeamlyIdleDetachCountdown from '../../hooks/use-seamly-idle-detach-countdown'
-import useInterval from '../../hooks/use-interval'
+import useSeamlyIdleDetachCountdown from 'ui/hooks/use-seamly-idle-detach-countdown'
+import useInterval from 'ui/hooks/use-interval'
 
 const SeamlyIdleDetachCounter = () => {
   const { hasCountdown, isActive, remaining, decrementCountdown } =

package/src/javascripts/ui/components/core/seamly-initializer.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'preact/hooks'
-import { useSeamlyOptions } from '../../hooks/seamly-hooks'
-import { useConfig } from '../../../domains/config'
+import { useSeamlyOptions } from 'ui/hooks/seamly-hooks'
+import { useConfig } from 'domains/config'
 
 const SeamlyInitializer = () => {
   const { initUserSelectedOptions } = useSeamlyOptions()

package/src/javascripts/ui/components/core/seamly-instance-functions-loader.js

@@ -6,12 +6,12 @@ import {
   useSeamlyConversationUrl,
   useSeamlyActivityEventHandler,
   useSeamlyApiContext,
-} from '../../hooks/seamly-hooks'
+} from 'ui/hooks/seamly-hooks'
 import { SeamlyEventBusContext } from './seamly-api-context'
-import { useTranslations } from '../../../domains/translations'
-import { useInterrupt } from '../../../domains/interrupt'
-import { useConfig } from '../../../domains/config'
-import { visibilityStates, useVisibility } from '../../../domains/visibility'
+import { useTranslations } from 'domains/translations'
+import { useInterrupt } from 'domains/interrupt'
+import { useConfig } from 'domains/config'
+import { visibilityStates, useVisibility } from 'domains/visibility'
 
 function useSeamlyInstanceFunction(functionName, fn, deps = []) {
   const eventBus = useContext(SeamlyEventBusContext)

package/src/javascripts/ui/components/core/seamly-live-region.js

@@ -7,8 +7,8 @@ import {
 } from 'preact/hooks'
 import { SeamlyLiveRegionContext } from './seamly-live-region-context'
 import { SeamlyEventBusContext } from './seamly-api-context'
-import { ariaLiveLevels } from '../../utils/seamly-utils'
-import { className } from '../../../lib/css'
+import { ariaLiveLevels } from 'ui/utils/seamly-utils'
+import { className } from 'lib/css'
 
 const SeamlyLiveRegion = ({ children }) => {
   const eventBus = useContext(SeamlyEventBusContext)

package/src/javascripts/ui/components/core/seamly-new-notifications.js

@@ -1,13 +1,13 @@
 import { useEffect, useRef, useMemo } from 'preact/hooks'
-import { useI18n } from '../../../domains/i18n'
+import { useI18n } from 'domains/i18n'
 import {
   useEvents,
   useLiveRegion,
   useSeamlyIsHistoryLoaded,
-} from '../../hooks/seamly-hooks'
-import { newMessageScreenReaderWait } from '../../../config'
-import { debounce } from '../../utils/general-utils'
-import { useVisibility } from '../../../domains/visibility'
+} from 'ui/hooks/seamly-hooks'
+import { newMessageScreenReaderWait } from 'config'
+import { debounce } from 'ui/utils/general-utils'
+import { useVisibility } from 'domains/visibility'
 
 const SeamlyNewNotifications = () => {
   const { t } = useI18n()

package/src/javascripts/ui/components/core/seamly-read-state.js

@@ -6,17 +6,17 @@ import {
   useLiveRegion,
   useSeamlyUnreadCount,
   useSeamlyDispatchContext,
-} from '../../hooks/seamly-hooks'
-import { useI18n } from '../../../domains/i18n'
+} from 'ui/hooks/seamly-hooks'
+import { useI18n } from 'domains/i18n'
 import {
   seamlyActions,
   readStates,
   actionTypes,
   isUnreadMessage,
-} from '../../utils/seamly-utils'
-import { debounce } from '../../utils/general-utils'
-import { unreadScreenReaderWait } from '../../../config'
-import { useVisibility } from '../../../domains/visibility'
+} from 'ui/utils/seamly-utils'
+import { debounce } from 'ui/utils/general-utils'
+import { unreadScreenReaderWait } from 'config'
+import { useVisibility } from 'domains/visibility'
 
 const { SET_EVENTS_READ } = seamlyActions
 

package/src/javascripts/ui/components/entry/deprecated-toggle-button.js

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useRef } from 'preact/hooks'
-import { useI18n } from '../../../domains/i18n'
-import { className } from '../../../lib/css'
+import { useI18n } from 'domains/i18n'
+import { className } from 'lib/css'
 import {
   useSkiplinkTargetFocusing,
   useFocusIfSeamlyContainedFocus,
@@ -8,9 +8,9 @@ import {
   useSeamlyHeaderData,
   useGeneratedId,
   useSeamlyStateContext,
-} from '../../hooks/seamly-hooks'
-import { useInterrupt } from '../../../domains/interrupt'
-import { useVisibility } from '../../../domains/visibility'
+} from 'ui/hooks/seamly-hooks'
+import { useInterrupt } from 'domains/interrupt'
+import { useVisibility } from 'domains/visibility'
 
 // Deprecated Toggle Button, should be removed once it is removed from clients
 const DeprecatedToggleButton = ({ onOpenChat }) => {

package/src/javascripts/ui/components/entry/entry-container.js

@@ -1,21 +1,21 @@
 import { useEffect, useRef, useState, useCallback } from 'preact/hooks'
-import { className } from '../../../lib/css'
+import { className } from 'lib/css'
 import {
   useSeamlyIdleDetachCountdown,
   useSeamlyResumeConversationPrompt,
   useSkiplinkTargetFocusing,
   useSeamlyEntry,
   useFileUploadMeta,
-} from '../../hooks/seamly-hooks'
-import { entryTypes } from '../../utils/seamly-utils'
-import { runIfElementContainsOrHasFocus } from '../../utils/general-utils'
-import IdleDetachWarning from '../warnings/idle-detach-warning'
-import ResumeConversationPrompt from '../warnings/resume-conversation-prompt'
+} from 'ui/hooks/seamly-hooks'
+import { entryTypes } from 'ui/utils/seamly-utils'
+import { runIfElementContainsOrHasFocus } from 'ui/utils/general-utils'
+import IdleDetachWarning from 'ui/components/warnings/idle-detach-warning'
+import ResumeConversationPrompt from 'ui/components/warnings/resume-conversation-prompt'
 import TextEntry from './text-entry'
 import UploadToggle from './upload-toggle'
 import Upload from './upload'
-import { useConfig } from '../../../domains/config'
-import { useVisibility } from '../../../domains/visibility'
+import { useConfig } from 'domains/config'
+import { useVisibility } from 'domains/visibility'
 
 const EntryContainer = () => {
   const { isOpen } = useVisibility()

package/src/javascripts/ui/components/entry/text-entry/hooks.js

@@ -1,13 +1,13 @@
 import { useEffect, useMemo } from 'preact/hooks'
-import { useI18n } from '../../../../domains/i18n'
-import { useLiveRegion } from '../../../hooks/live-region-hooks'
-import { useEntryTextLimit } from '../../../hooks/seamly-state-hooks'
-import { debounce } from '../../../utils/general-utils'
+import { useI18n } from 'domains/i18n'
+import { useLiveRegion } from 'ui/hooks/live-region-hooks'
+import { useEntryTextLimit } from 'ui/hooks/seamly-state-hooks'
+import { debounce } from 'ui/utils/general-utils'
 import {
   maxCharacterSrDebounceDelay,
   maxCharacterWarningLimit,
-} from '../../../../config'
-import { useFormControl } from '../../../../domains/forms'
+} from 'config'
+import { useFormControl } from 'domains/forms'
 
 export function useCharacterLimit(controlName) {
   const { t } = useI18n()

package/src/javascripts/ui/components/entry/text-entry/index.js

@@ -3,8 +3,8 @@ import {
   useSeamlyCommands,
   useSkiplink,
   useSkiplinkTargetFocusing,
-} from '../../../hooks/seamly-hooks'
-import { FormProvider } from '../../../../domains/forms'
+} from 'ui/hooks/seamly-hooks'
+import { FormProvider } from 'domains/forms'
 import TextEntryForm from './text-entry-form'
 import { useVisibility, visibilityStates } from '../../../../domains/visibility'
 

package/src/javascripts/ui/components/entry/text-entry/text-entry-form.js

@@ -1,17 +1,17 @@
 import { useCallback, useLayoutEffect, useMemo } from 'preact/hooks'
-import { className } from '../../../../lib/css'
+import { className } from 'lib/css'
 import {
   useLiveRegion,
   useSeamlyCommands,
   useSeamlyEntry,
   useSeamlyTyping,
-} from '../../../hooks/seamly-hooks'
-import Icon from '../../layout/icon'
-import { useFormControl } from '../../../../domains/forms'
-import Form from '../../form-controls/form'
-import Input from '../../form-controls/input'
+} from 'ui/hooks/seamly-hooks'
+import Icon from 'ui/components/layout/icon'
+import { useFormControl } from 'domains/forms'
+import Form from 'ui/components/form-controls/form'
+import Input from 'ui/components/form-controls/input'
 import { useCharacterLimit } from './hooks'
-import { useI18n } from '../../../../domains/i18n'
+import { useI18n } from 'domains/i18n'
 
 export default function TextEntryForm({ controlName, skipLinkId }) {
   const { t } = useI18n()
@@ -99,7 +99,7 @@ export default function TextEntryForm({ controlName, skipLinkId }) {
       <button
         className={className('button', 'input__submit')}
         type="submit"
-        disabled={!hasValue || reachedCharacterLimit}
+        aria-disabled={!hasValue || reachedCharacterLimit ? 'true' : null}
       >
         <Icon name="send" size="32" alt={t('input.sendMessage')} />
       </button>

package/src/javascripts/ui/components/entry/upload/file-upload-form.js

@@ -1,8 +1,8 @@
-import { className } from '../../../../lib/css'
-import Form from '../../form-controls/form'
-import FileInput from '../../form-controls/file-input'
-import { useI18n } from '../../../../domains/i18n'
-import { useFormControl } from '../../../../domains/forms'
+import { className } from 'lib/css'
+import Form from 'ui/components/form-controls/form'
+import FileInput from 'ui/components/form-controls/file-input'
+import { useI18n } from 'domains/i18n'
+import { useFormControl } from 'domains/forms'
 
 export default function FileInputForm({
   skiplinkId,

package/src/javascripts/ui/components/entry/upload/index.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
-import { className } from '../../../../lib/css'
+import { className } from 'lib/css'
 import {
   useSkiplink,
   useFileUploadMeta,
@@ -8,18 +8,18 @@ import {
   useLiveRegion,
   useGeneratedId,
   useSeamlyEntry,
-} from '../../../hooks/seamly-hooks'
-import useSingleFileUpload from '../../../hooks/use-single-file-upload'
-import { useI18n } from '../../../../domains/i18n'
-import { formatBytes } from '../../../utils/general-utils'
-import UploadProgress from '../../widgets/upload-progress'
-import FileInputForm from './file-upload-form'
-import { FormProvider } from '../../../../domains/forms'
-import { getValidator } from '../../../utils/form-utils'
+} from 'ui/hooks/seamly-hooks'
+import useSingleFileUpload from 'ui/hooks/use-single-file-upload'
+import { useI18n } from 'domains/i18n'
+import { formatBytes } from 'ui/utils/general-utils'
+import UploadProgress from 'ui/components/widgets/upload-progress'
+import { FormProvider } from 'domains/forms'
+import { getValidator } from 'ui/utils/form-utils'
 import {
   fileListObjectIsNotEmpty,
   validateFileSize,
-} from '../../../utils/validations'
+} from 'ui/utils/validations'
+import FileInputForm from './file-upload-form'
 
 const formName = 'fileListForm'
 const fileInputName = 'fileList'

package/src/javascripts/ui/components/entry/upload-toggle.js

@@ -1,19 +1,19 @@
 import { useState, useEffect, useRef } from 'preact/hooks'
-import { className } from '../../../lib/css'
-import Icon from '../layout/icon'
+import { className } from 'lib/css'
+import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,
-} from '../widgets/in-out-transition'
+} from 'ui/components/widgets/in-out-transition'
 import {
   useFileUploadMeta,
   useSkiplinkTargetFocusing,
   useSeamlyEntry,
   useLiveRegion,
   useSeamlyCurrentAgent,
-} from '../../hooks/seamly-hooks'
-import { useI18n } from '../../../domains/i18n'
-import { entryTypes } from '../../utils/seamly-utils'
-import { runIfElementContainsOrHasFocus } from '../../utils/general-utils'
+} from 'ui/hooks/seamly-hooks'
+import { useI18n } from 'domains/i18n'
+import { entryTypes } from 'ui/utils/seamly-utils'
+import { runIfElementContainsOrHasFocus } from 'ui/utils/general-utils'
 
 const UploadToggle = () => {
   const { t } = useI18n()
@@ -77,9 +77,9 @@ const UploadToggle = () => {
                 'upload-toggle',
               ])}
               ref={uploadButton}
-              disabled={!showUploadButton ? 'true' : null}
+              aria-disabled={!showUploadButton ? 'true' : null}
               type="button"
-              onClick={onClickHandler}
+              onClick={showUploadButton ? onClickHandler : null}
             >
               <Icon
                 name="file"

package/src/javascripts/ui/components/faq/faq.js

@@ -1,25 +1,25 @@
 import { useEffect, useRef, useMemo } from 'preact/hooks'
-import { className } from '../../../lib/css'
-import Icon from '../layout/icon'
-import { actionTypes } from '../../utils/seamly-utils'
-import { runIfElementContainsOrHasFocus } from '../../utils/general-utils'
-import useSeamlyCommands from '../../hooks/use-seamly-commands'
+import { className } from 'lib/css'
+import Icon from 'ui/components/layout/icon'
+import { actionTypes } from 'ui/utils/seamly-utils'
+import { runIfElementContainsOrHasFocus } from 'ui/utils/general-utils'
+import useSeamlyCommands from 'ui/hooks/use-seamly-commands'
 import {
   useSeamlyServiceData,
   useSeamlyLayoutMode,
-} from '../../hooks/seamly-state-hooks'
-import { useGeneratedId } from '../../hooks/utility-hooks'
-import { useSkiplinkTargetFocusing } from '../../hooks/focus-helper-hooks'
-import { useLiveRegion } from '../../hooks/live-region-hooks'
-import useSeamlyIdleDetachCountdown from '../../hooks/use-seamly-idle-detach-countdown'
-import useSeamlyResumeConversationPrompt from '../../hooks/use-seamly-resume-conversation-prompt'
-import { useI18n } from '../../../domains/i18n'
+} from 'ui/hooks/seamly-state-hooks'
+import { useGeneratedId } from 'ui/hooks/utility-hooks'
+import { useSkiplinkTargetFocusing } from 'ui/hooks/focus-helper-hooks'
+import { useLiveRegion } from 'ui/hooks/live-region-hooks'
+import useSeamlyIdleDetachCountdown from 'ui/hooks/use-seamly-idle-detach-countdown'
+import useSeamlyResumeConversationPrompt from 'ui/hooks/use-seamly-resume-conversation-prompt'
+import { useI18n } from 'domains/i18n'
 import InOutTransition, {
   transitionStartStates,
-} from '../widgets/in-out-transition'
-import { useTranslatedEventData } from '../../../domains/translations'
-import { useInterrupt } from '../../../domains/interrupt'
-import { useUserHasResponded } from '../../../domains/app'
+} from 'ui/components/widgets/in-out-transition'
+import { useTranslatedEventData } from 'domains/translations'
+import { useInterrupt } from 'domains/interrupt'
+import { useUserHasResponded } from 'domains/app'
 
 const Faq = () => {
   const { t } = useI18n()

package/src/javascripts/ui/components/form-controls/error.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'preact/hooks'
-import { className } from '../../../lib/css'
-import Icon from '../layout/icon'
+import { className } from 'lib/css'
+import Icon from 'ui/components/layout/icon'
 
 export default function Error({ id, error }) {
   const [isAvailable, setIsAvailable] = useState(false)

package/src/javascripts/ui/components/form-controls/file-input.js

@@ -1,8 +1,8 @@
 import { useCallback, useState } from 'preact/hooks'
-import { className } from '../../../lib/css'
-import { useGeneratedId } from '../../hooks/seamly-hooks'
-import { useFormControl, useFormContext } from '../../../domains/forms'
-import Icon from '../layout/icon'
+import { className } from 'lib/css'
+import { useGeneratedId } from 'ui/hooks/seamly-hooks'
+import { useFormControl, useFormContext } from 'domains/forms'
+import Icon from 'ui/components/layout/icon'
 import Error from './error'
 
 export default function FileInput({