@onehat/ui 0.2.0 → 0.2.2

package/src/Components/Grid/GridRow.js

@@ -6,10 +6,10 @@ import {
 } from 'native-base';
 import {
 	VERTICAL,
-} from '../../Constants/Directions';
-import withDraggable from '../Hoc/withDraggable';
-import styles from '../../Constants/Styles';
-import AngleRight from '../Icons/AngleRight';
+} from '../../Constants/Directions.js';
+import withDraggable from '../Hoc/withDraggable.js';
+import styles from '../../Constants/Styles.js';
+import AngleRight from '../Icons/AngleRight.js';
 import _ from 'lodash';
 
 // This was broken out from Grid simply so we can memoize it

package/src/Components/Grid/HeaderReorderHandle.js

@@ -5,8 +5,8 @@ import {
 	Text,
 } from 'native-base';
 import styles from '../../Styles/StyleSheets.js';
-import withDraggable from '../Hoc/withDraggable';
-import GripVertical from '../Icons/GripVertical';
+import withDraggable from '../Hoc/withDraggable.js';
+import GripVertical from '../Icons/GripVertical.js';
 
 function HeaderReorderHandle(props) {
 	const {

package/src/Components/Grid/HeaderResizeHandle.js

@@ -5,8 +5,8 @@ import {
 	Text,
 } from 'native-base';
 import styles from '../../Styles/StyleSheets.js';
-import withDraggable from '../Hoc/withDraggable';
-import GripLinesVertical from '../Icons/GripLinesVertical';
+import withDraggable from '../Hoc/withDraggable.js';
+import GripLinesVertical from '../Icons/GripLinesVertical.js';
 
 function HeaderResizeHandle(props) {
 	const {

package/src/Components/Grid/NoRecordsFound.js

@@ -3,8 +3,8 @@ import {
 	Row,
 	Text,
 } from 'native-base';
-import IconButton from '../Buttons/IconButton';
-import Rotate from '../Icons/Rotate';
+import IconButton from '../Buttons/IconButton.js';
+import Rotate from '../Icons/Rotate.js';
 
 export default function NoRecordsFound(props) {
 	const 

package/src/Components/Hoc/withAlert.js

@@ -11,10 +11,10 @@ import {
 	ALERT_MODE_OK,
 	ALERT_MODE_YES_NO,
 	ALERT_MODE_CUSTOM,
-} from '../../Constants/Alert';
-import Panel from '../Panel/Panel';
-import Footer from '../Panel/Footer';
-import TriangleExclamation from '../Icons/TriangleExclamation';
+} from '../../Constants/Alert.js';
+import Panel from '../Panel/Panel.js';
+import Footer from '../Panel/Footer.js';
+import TriangleExclamation from '../Icons/TriangleExclamation.js';
 import _ from 'lodash';
 
 export default function withAlert(WrappedComponent) {

package/src/Components/Hoc/withDraggable.js

@@ -2,14 +2,14 @@ import { useState, } from 'react';
 import {
 	HORIZONTAL,
 	VERTICAL,
-} from '../../Constants/Directions';
+} from '../../Constants/Directions.js';
 import {
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
-} from '../../Constants/UiModes';
-import UiConfig from '../../UiConfig';
+} from '../../Constants/UiModes.js';
+import UiConfig from '../../UiConfig.js';
 import Draggable from 'react-draggable'; // https://github.com/react-grid-layout/react-draggable
-import useBlocking from '../../Hooks/useBlocking';
+import useBlocking from '../../Hooks/useBlocking.js';
 import {
 	v4 as uuid,
 } from 'uuid';

package/src/Components/Hoc/withFilters.js

@@ -4,13 +4,13 @@ import {
 	Modal,
 	Text,
 } from 'native-base';
-import inArray from '../../Functions/inArray';
-import getComponentFromType from '../../Functions/getComponentFromType';
-import IconButton from '../Buttons/IconButton';
-import FormPanel from '../Panel/FormPanel';
-import Ban from '../Icons/Ban';
-import Gear from '../Icons/Gear';
-import Toolbar from '../Toolbar/Toolbar';
+import inArray from '../../Functions/inArray.js';
+import getComponentFromType from '../../Functions/getComponentFromType.js';
+import IconButton from '../Buttons/IconButton.js';
+import FormPanel from '../Panel/FormPanel.js';
+import Ban from '../Icons/Ban.js';
+import Gear from '../Icons/Gear.js';
+import Toolbar from '../Toolbar/Toolbar.js';
 import _ from 'lodash';
 
 // Filters only work with Repository; not data array

package/src/Components/Hoc/withInlineEditor.js

@@ -7,15 +7,15 @@ import {
 } from 'native-base';
 import {
 	EDITOR_TYPE_INLINE,
-} from '../../Constants/EditorTypes';
+} from '../../Constants/EditorTypes.js';
 import {
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
-} from '../../Constants/UiModes';
-import UiConfig from '../../UiConfig';
-import Form from '../Form/Form';
-import withEditor from './withEditor';
-import styles from '../../Constants/Styles';
+} from '../../Constants/UiModes.js';
+import UiConfig from '../../UiConfig.js';
+import Form from '../Form/Form.js';
+import withEditor from './withEditor.js';
+import styles from '../../Constants/Styles.js';
 import _ from 'lodash';
 
 export default function withInlineEditor(WrappedComponent) {

package/src/Components/Hoc/withMultiSelection.js

@@ -1,6 +1,6 @@
 import {
 	SELECTION_MODE_MULTI,
-} from '../../Constants/Selection';
+} from '../../Constants/Selection.js';
 
 export default function withMultiSelection(WrappedComponent) {
 	return (props) => {

package/src/Components/Hoc/withPresetButtons.js

@@ -1,13 +1,13 @@
 import React, { useState, useEffect, } from 'react';
-import Clipboard from '../Icons/Clipboard';
-import Duplicate from '../Icons/Duplicate';
-import Edit from '../Icons/Edit';
-import Eye from '../Icons/Eye';
-import Trash from '../Icons/Trash';
-import Plus from '../Icons/Plus';
-import Print from '../Icons/Print';
+import Clipboard from '../Icons/Clipboard.js';
+import Duplicate from '../Icons/Duplicate.js';
+import Edit from '../Icons/Edit.js';
+import Eye from '../Icons/Eye.js';
+import Trash from '../Icons/Trash.js';
+import Plus from '../Icons/Plus.js';
+import Print from '../Icons/Print.js';
+import inArray from '../../Functions/inArray.js';
 import _ from 'lodash';
-import inArray from '../../Functions/inArray';
 
 // Note: A 'present button' will create both a context menu item 
 // and a toolbar button that match in text label, icon, and handler.

package/src/Components/Hoc/withSelection.js

@@ -4,8 +4,8 @@ import {
 	SELECTION_MODE_MULTI,
 	SELECT_UP,
 	SELECT_DOWN,
-} from '../../Constants/Selection';
-import inArray from '../../Functions/inArray';
+} from '../../Constants/Selection.js';
+import inArray from '../../Functions/inArray.js';
 import _ from 'lodash';
 
 export default function withSelection(WrappedComponent) {

package/src/Components/Hoc/withValue.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, } from 'react';
-import isJson from '../../Functions/isJson';
+import isJson from '../../Functions/isJson.js';
 import _ from 'lodash';
 
 // This HOC gives the component value props, primarily for a Form Field.

package/src/Components/Hoc/withWindowedEditor.js

@@ -5,9 +5,9 @@ import {
 } from 'native-base';
 import {
 	EDITOR_TYPE_WINDOWED,
-} from '../../Constants/EditorTypes';
-import withEditor from './withEditor';
-// import withDraggable from './withDraggable';
+} from '../../Constants/EditorTypes.js';
+import withEditor from './withEditor.js';
+// import withDraggable from './withDraggable.js';
 import _ from 'lodash';
 
 

package/src/Components/Messages/ConfirmationMessage.js

@@ -3,7 +3,7 @@
 	Modal,
 	Text,
 } from 'native-base';
-import emptyFn from '../../Functions/emptyFn';
+import emptyFn from '../../Functions/emptyFn.js';
 
 export default function ConfirmationMessage(props) {
 	const {

package/src/Components/Messages/ErrorMessage.js

@@ -3,7 +3,7 @@ import {
 	Row,
 	Text,
 } from 'native-base';
-import TriangleExclamation from '../Icons/TriangleExclamation';
+import TriangleExclamation from '../Icons/TriangleExclamation.js';
 
 export default function ErrorMsg(props) {
 	return <Row justifyContent="center" alignItems="center" my={2} w="100%">

package/src/Components/Messages/Loading.js

@@ -2,7 +2,7 @@ import {
 	Row,
 	Spinner,
 } from 'native-base';
-// import ScreenContainer from '../ScreenContainer';
+// import ScreenContainer from '../ScreenContainer.js';
 
 export default function Loading(props) {
 	// if (props.isScreen) {

package/src/Components/Messages/WaitMessage.js

@@ -2,7 +2,7 @@
 	Row,
 	Text,
 } from 'native-base';
-import Loading from './Loading';
+import Loading from './Loading.js';
 
 export default function WaitMessage(props) {
 	const {

package/src/Components/Panel/AccordionGridPanel.js

@@ -5,11 +5,11 @@ import {
 } from 'native-base';
 import Accordion from 'react-native-collapsible/Accordion'; // https://www.npmjs.com/package/react-native-collapsible
 import testProps from '../../Functions/testProps';
-import Footer from './Footer';
-import Toolbar from '../Toolbar/Toolbar';
-import PaginationToolbar from '../Toolbar/PaginationToolbar';
-import NoRecordsFound from './NoRecordsFound';
-import GridPanel from './GridPanel';
+import Footer from './Footer.js';
+import Toolbar from '../Toolbar/Toolbar.js';
+import PaginationToolbar from '../Toolbar/PaginationToolbar.js';
+import NoRecordsFound from './NoRecordsFound.js';
+import GridPanel from './GridPanel.js';
 import _ from 'lodash';
 
 export default function AccordionGridPanel(props) {

package/src/Components/Panel/Footer.js

@@ -1,7 +1,7 @@
 import {
 	Row,
 } from 'native-base';
-import styles from '../../Constants/Styles';
+import styles from '../../Constants/Styles.js';
 
 export default function Footer(props) {
 	return <Row

package/src/Components/Panel/FormPanel.js

@@ -1,9 +1,9 @@
 import {
 	Text,
 } from 'native-base';
-import Panel from './Panel';
-import Form, { FormEditor } from '../Form/Form';
-import withData from '../Hoc/withData';
+import Panel from './Panel.js';
+import Form, { FormEditor } from '../Form/Form.js';
+import withData from '../Hoc/withData.js';
 import _ from 'lodash';
 
 export function FormPanel(props) {

package/src/Components/Panel/GridPanel.js

@@ -1,10 +1,10 @@
 import { useEffect, useState, } from 'react';
-import Panel from './Panel';
-import Grid, { InlineGridEditor, } from '../Grid/Grid';
+import Panel from './Panel.js';
+import Grid, { InlineGridEditor, } from '../Grid/Grid.js';
 import {
 	EDITOR_TYPE_INLINE,
 	EDITOR_TYPE_WINDOWED,
-} from '../../Constants/EditorTypes';
+} from '../../Constants/EditorTypes.js';
 import _ from 'lodash';
 
 export function GridPanel(props) {

package/src/Components/Panel/Header.js

@@ -16,11 +16,11 @@ import {
 import {
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
-} from '../../Constants/UiModes';
-import UiConfig from '../../UiConfig';
-import styles from '../../Constants/Styles';
-import emptyFn from '../../Functions/emptyFn';
-import IconButton from '../Buttons/IconButton';
+} from '../../Constants/UiModes.js';
+import UiConfig from '../../UiConfig.js';
+import styles from '../../Constants/Styles.js';
+import emptyFn from '../../Functions/emptyFn.js';
+import IconButton from '../Buttons/IconButton.js';
 
 export default function Header(props) {
 	

package/src/Components/Panel/Panel.js

@@ -8,15 +8,15 @@ import {
 import {
 	HORIZONTAL,
 	VERTICAL,
-} from '../../Constants/Directions';
+} from '../../Constants/Directions.js';
 import {
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
-} from '../../Constants/UiModes';
-import UiConfig from '../../UiConfig';
-import Header from './Header';
-import withCollapsible from '../Hoc/withCollapsible';
-import emptyFn from '../../Functions/emptyFn';
+} from '../../Constants/UiModes.js';
+import UiConfig from '../../UiConfig.js';
+import Header from './Header.js';
+import withCollapsible from '../Hoc/withCollapsible.js';
+import emptyFn from '../../Functions/emptyFn.js';
 import _ from 'lodash';
 
 // Note on collapseDirections:

package/src/Components/Panel/TabPanel.js

@@ -10,12 +10,12 @@ import {
 import {
 	HORIZONTAL,
 	VERTICAL,
-} from '../../Constants/Directions';
-import IconButton from '../Buttons/IconButton';
-import Minimize from '../Icons/Minimize';
-import Maximize from '../Icons/Maximize';
-import styles from '../../Constants/Styles';
-import Panel from './Panel';
+} from '../../Constants/Directions.js';
+import IconButton from '../Buttons/IconButton.js';
+import Minimize from '../Icons/Minimize.js';
+import Maximize from '../Icons/Maximize.js';
+import styles from '../../Constants/Styles.js';
+import Panel from './Panel.js';
 import _ from 'lodash';
 
 

package/src/Components/Panel/UploadDownload.js

@@ -1,4 +1,4 @@
-import Panel from './Panel';
+import Panel from './Panel.js';
 
 // TODO: Flesh this out!
 

package/src/Components/Picker/Picker.js

@@ -4,8 +4,8 @@ import {
 	Select,
 	Tooltip,
 } from 'native-base';
-import CaretDown from '../Icons/CaretDown';
-import testProps from '../../Functions/testProps';
+import CaretDown from '../Icons/CaretDown.js';
+import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';
 
 export default function Picker(props) {

package/src/Components/Screens/DataMgt.js

@@ -2,16 +2,16 @@ import React, { useState, useMemo, } from 'react';
 import {
 	HORIZONTAL,
 	VERTICAL,
-} from '../../Constants/Directions';
+} from '../../Constants/Directions.js';
 import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,
-} from '../../Constants/Selection';
-import getComponentFromType from '../../Functions/getComponentFromType';
-import Container from '../Container/Container';
-import Panel from '../Panel/Panel';
-import TabPanel from '../Panel/TabPanel';
-import UploadDownload from '../Panel/UploadDownload';
+} from '../../Constants/Selection.js';
+import getComponentFromType from '../../Functions/getComponentFromType.js';
+import Container from '../Container/Container.js';
+import Panel from '../Panel/Panel.js';
+import TabPanel from '../Panel/TabPanel.js';
+import UploadDownload from '../Panel/UploadDownload.js';
 import _ from 'lodash';
 
 export default function DataMgt(props) {

package/src/Components/Toolbar/FilterToolbar.js

@@ -1,7 +1,7 @@
 import {
 	Row,
 } from 'native-base';
-import Toolbar from './Toolbar'
+import Toolbar from './Toolbar.js'
 import _ from 'lodash';
 
 export default function FilterToolbar(props) {

package/src/Components/Toolbar/Pagination.js

@@ -4,15 +4,15 @@ import {
 	Row,
 	Text,
 } from 'native-base';
-import useForceUpdate from '../../Hooks/useForceUpdate';
-import IconButton from '../Buttons/IconButton';
-import AngleLeft from '../Icons/AngleLeft';
-import AnglesLeft from '../Icons/AnglesLeft';
-import AngleRight from '../Icons/AngleRight';
-import AnglesRight from '../Icons/AnglesRight';
-import Rotate from '../Icons/Rotate';
-import Input from '../Form/Field/Input';
-import PageSizeCombo from '../Form/Field/Combo/PageSizeCombo';
+import useForceUpdate from '../../Hooks/useForceUpdate.js';
+import IconButton from '../Buttons/IconButton.js';
+import AngleLeft from '../Icons/AngleLeft.js';
+import AnglesLeft from '../Icons/AnglesLeft.js';
+import AngleRight from '../Icons/AngleRight.js';
+import AnglesRight from '../Icons/AnglesRight.js';
+import Rotate from '../Icons/Rotate.js';
+import Input from '../Form/Field/Input.js';
+import PageSizeCombo from '../Form/Field/Combo/PageSizeCombo.js';
 
 export default function Pagination(props) {
 	const {

package/src/Components/Toolbar/PaginationToolbar.js

@@ -1,8 +1,8 @@
 import {
 	Row,
 } from 'native-base';
-import Pagination from './Pagination'
-import Toolbar from './Toolbar'
+import Pagination from './Pagination.js'
+import Toolbar from './Toolbar.js'
 import _ from 'lodash';
 
 export default function PaginationToolbar(props) {

package/src/Components/Window/Editor.js

@@ -3,8 +3,8 @@ import {
 	Column,
 	Row,
 } from 'native-base';
-import Container from '../Container/Container';
-import emptyFn from '../../Functions/emptyFn';
+import Container from '../Container/Container.js';
+import emptyFn from '../../Functions/emptyFn.js';
 import _ from 'lodash';
 
 export default function EditorWindow(props) {

package/src/Functions/getComponentFromType.js

@@ -1,49 +1,49 @@
 import {
 	Column,
 } from 'native-base';
-// import AccordionGridPanel from '../Components/Panel/AccordionGridPanel';
-import ArrayCheckboxGroup from '../Components/Form/Field/CheckboxGroup/ArrayCheckboxGroup';
-import ArrayCombo from '../Components/Form/Field/Combo/ArrayCombo';
-import ArrayRadioGroup from '../Components/Form/Field/RadioGroup/ArrayRadioGroup';
-// import BackButton from '../Components/Buttons/BackButton';
-import Blank from '../Components/Blank';
-import BooleanCombo from '../Components/Form/Field/Combo/BooleanCombo';
-// import CartButtonWithBadge from '../Components/Buttons/CartButtonWithBadge';
-import CheckboxGroup from '../Components/Form/Field/CheckboxGroup/CheckboxGroup';
-import CKEditor from '../Components/Form/Field/CKEditor/CKEditor';
-import Color from '../Components/Form/Field/Color';
-import Combo from '../Components/Form/Field/Combo/Combo';
-// import ComboEditor from '../Components/Form/Field/Combo/ComboEditor';
-import Container from '../Components/Container/Container';
-import DataMgt from '../Components/Screens/DataMgt';
-import Date from '../Components/Form/Field/Date';
-import DateRange from '../Components/Filter/DateRange';
-import DisplayField from '../Components/Form/Field/DisplayField';
-import FieldSet from '../Components/Form/FieldSet';
-import File from '../Components/Form/Field/File';
-import FiltersForm from '../Components/Form/FiltersForm';
-// import FiltersToolbar from '../Components/Toolbar/FiltersToolbar';
-import Form from '../Components/Form/Form';
-import Grid from '../Components/Grid/Grid';
-import GridPanel from '../Components/Panel/GridPanel';
-import IconButton from '../Components/Buttons/IconButton';
-import Input from '../Components/Form/Field/Input';
-import IntervalsCombo from '../Components/Form/Field/Combo/IntervalsCombo';
-import Label from '../Components/Form/Label';
-import MonthsCombo from '../Components/Form/Field/Combo/MonthsCombo';
-import Number from '../Components/Form/Field/Number';
-import NumberRange from '../Components/Filter/NumberRange';
-import Panel from '../Components/Panel/Panel';
-// import Picker from '../Components/Panel/Picker';
-import RadioGroup from '../Components/Form/Field/RadioGroup/RadioGroup';
-import TabPanel from '../Components/Panel/TabPanel';
-import Tag from '../Components/Form/Field/Combo/Tag';
-import TextArea from '../Components/Form/Field/TextArea';
-import Text from '../Components/Form/Field/Text';
-import TimezonesCombo from '../Components/Form/Field/Combo/TimezonesCombo';
-import Toggle from '../Components/Form/Field/Toggle';
-import Toolbar from '../Components/Toolbar/Toolbar';
-import YearsCombo from '../Components/Form/Field/Combo/YearsCombo';
+// import AccordionGridPanel from '../Components/Panel/AccordionGridPanel.js';
+import ArrayCheckboxGroup from '../Components/Form/Field/CheckboxGroup/ArrayCheckboxGroup.js';
+import ArrayCombo from '../Components/Form/Field/Combo/ArrayCombo.js';
+import ArrayRadioGroup from '../Components/Form/Field/RadioGroup/ArrayRadioGroup.js';
+// import BackButton from '../Components/Buttons/BackButton.js';
+import Blank from '../Components/Blank.js';
+import BooleanCombo from '../Components/Form/Field/Combo/BooleanCombo.js';
+// import CartButtonWithBadge from '../Components/Buttons/CartButtonWithBadge.js';
+import CheckboxGroup from '../Components/Form/Field/CheckboxGroup/CheckboxGroup.js';
+import CKEditor from '../Components/Form/Field/CKEditor/CKEditor.js';
+import Color from '../Components/Form/Field/Color.js';
+import Combo from '../Components/Form/Field/Combo/Combo.js';
+// import ComboEditor from '../Components/Form/Field/Combo/ComboEditor.js';
+import Container from '../Components/Container/Container.js';
+import DataMgt from '../Components/Screens/DataMgt.js';
+import Date from '../Components/Form/Field/Date.js';
+import DateRange from '../Components/Filter/DateRange.js';
+import DisplayField from '../Components/Form/Field/DisplayField.js';
+import FieldSet from '../Components/Form/FieldSet.js';
+import File from '../Components/Form/Field/File.js';
+import FiltersForm from '../Components/Form/FiltersForm.js';
+// import FiltersToolbar from '../Components/Toolbar/FiltersToolbar.js';
+import Form from '../Components/Form/Form.js';
+import Grid from '../Components/Grid/Grid.js';
+import GridPanel from '../Components/Panel/GridPanel.js';
+import IconButton from '../Components/Buttons/IconButton.js';
+import Input from '../Components/Form/Field/Input.js';
+import IntervalsCombo from '../Components/Form/Field/Combo/IntervalsCombo.js';
+import Label from '../Components/Form/Label.js';
+import MonthsCombo from '../Components/Form/Field/Combo/MonthsCombo.js';
+import Number from '../Components/Form/Field/Number.js';
+import NumberRange from '../Components/Filter/NumberRange.js';
+import Panel from '../Components/Panel/Panel.js';
+// import Picker from '../Components/Panel/Picker.js';
+import RadioGroup from '../Components/Form/Field/RadioGroup/RadioGroup.js';
+import TabPanel from '../Components/Panel/TabPanel.js';
+import Tag from '../Components/Form/Field/Combo/Tag.js';
+import TextArea from '../Components/Form/Field/TextArea.js';
+import Text from '../Components/Form/Field/Text.js';
+import TimezonesCombo from '../Components/Form/Field/Combo/TimezonesCombo.js';
+import Toggle from '../Components/Form/Field/Toggle.js';
+import Toolbar from '../Components/Toolbar/Toolbar.js';
+import YearsCombo from '../Components/Form/Field/Combo/YearsCombo.js';
 import _ from 'lodash';
 
 const

package/src/Functions/getTokenHeaders.js

@@ -1,4 +1,4 @@
-import AppGlobals from '../../AppGlobals';
+import AppGlobals from '../../AppGlobals.js';
 
 export default function(clearAll = false) {
 	const reduxState = AppGlobals.redux.getState();

package/src/Functions/setUiMode.js

@@ -1,4 +1,4 @@
-import UiConfig from '../UiConfig';
+import UiConfig from '../UiConfig.js';
 
 export default function setUiMode(mode) {
 	UiConfig.mode = mode;

package/src/Functions/waitFor.js

@@ -1,4 +1,4 @@
-import sleep from './sleep';
+import sleep from './sleep.js';
 
 export default async function waitFor(fn, pollingFrequencyMs = 1000, timeoutMs = null) {
 	let timeElapsed = 0;

package/src/UiConfig.js

@@ -2,7 +2,7 @@ import { isBrowser, isNode, isWebWorker, isJsDom, isDeno } from "browser-or-node
 import {
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
-} from './Constants/UiModes';
+} from './Constants/UiModes.js';
 
 
 const UiConfig = {

package/src/index.js

@@ -5,7 +5,7 @@
 import {
 	default as oneHatUi,
 	OneHatUi,
-} from './OneHatUi';
+} from './OneHatUi.js';
 
 export default oneHatUi;
 export {