framework7-react 7.0.0-beta.2 → 7.0.0-beta.20

package/components/fab-button.js

@@ -1,9 +1,9 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { useTooltip } from '../shared/use-tooltip';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
 
 const FabButton = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/fab-buttons.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 const FabButtons = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/fab.js

@@ -1,9 +1,9 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { useTooltip } from '../shared/use-tooltip';
+import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
 
 const Fab = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/gauge.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 /* eslint no-nested-ternary: off */
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
 
 const Gauge = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/icon.js

@@ -1,10 +1,10 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs, extend } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { useTooltip } from '../shared/use-tooltip';
-import { useTheme } from '../shared/use-theme';
+import { classNames, getExtraAttrs, extend } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { useTheme } from '../shared/use-theme.js';
 
 const Icon = /*#__PURE__*/forwardRef((props, ref) => {
   const theme = useTheme();

package/components/input.js

@@ -1,14 +1,14 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle, useState } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, getSlots, emit, extend } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import { watchProp } from '../shared/watch-prop';
-import Toggle from './toggle';
-import Range from './range';
-import TextEditor from './text-editor';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, getSlots, emit, extend } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { watchProp } from '../shared/watch-prop.js';
+import Toggle from './toggle.js';
+import Range from './range.js';
+import TextEditor from './text-editor.js';
 
 
 const Input = /*#__PURE__*/forwardRef((props, ref) => {
@@ -128,7 +128,11 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
     emit(props, 'inputClear', event);
   };
 
-  const onInput = (...args) => {
+  const onInput = function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
     emit(props, 'input', ...args);
 
     if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && inputElRef.current) {
@@ -136,12 +140,20 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
     }
   };
 
-  const onFocus = (...args) => {
+  const onFocus = function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
     emit(props, 'focus', ...args);
     setInputFocused(true);
   };
 
-  const onBlur = (...args) => {
+  const onBlur = function () {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+
     emit(props, 'blur', ...args);
 
     if ((validate || validate === '' || validateOnBlur || validateOnBlur === '') && inputElRef.current) {
@@ -151,7 +163,11 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
     setInputFocused(false);
   };
 
-  const onChange = (...args) => {
+  const onChange = function () {
+    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      args[_key4] = arguments[_key4];
+    }
+
     emit(props, 'change', ...args);
 
     if (type === 'texteditor') {

package/components/link.js

@@ -1,14 +1,14 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle, useContext } from 'react';
-import { classNames, getExtraAttrs, isStringProp, emit } from '../shared/utils';
-import { colorClasses, routerAttrs, routerClasses, actionsAttrs, actionsClasses } from '../shared/mixins';
-import { useIcon } from '../shared/use-icon';
-import { useRouteProps } from '../shared/use-route-props';
-import { useTooltip } from '../shared/use-tooltip';
-import { TabbarContext } from '../shared/tabbar-context';
-import Badge from './badge';
-import { useSmartSelect } from '../shared/use-smart-select';
+import { classNames, getExtraAttrs, isStringProp, emit } from '../shared/utils.js';
+import { colorClasses, routerAttrs, routerClasses, actionsAttrs, actionsClasses } from '../shared/mixins.js';
+import { useIcon } from '../shared/use-icon.js';
+import { useRouteProps } from '../shared/use-route-props.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { TabbarContext } from '../shared/tabbar-context.js';
+import Badge from './badge.js';
+import { useSmartSelect } from '../shared/use-smart-select.js';
 
 
 const Link = /*#__PURE__*/forwardRef((props, ref) => {

package/components/list-button.js

@@ -1,10 +1,10 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs, isStringProp, emit } from '../shared/utils';
-import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins';
-import { useTooltip } from '../shared/use-tooltip';
-import { useRouteProps } from '../shared/use-route-props';
+import { classNames, getExtraAttrs, isStringProp, emit } from '../shared/utils.js';
+import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { useRouteProps } from '../shared/use-route-props.js';
 
 const ListButton = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/list-group.js

@@ -1,9 +1,9 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle, useContext } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { ListContext } from '../shared/list-context';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { ListContext } from '../shared/list-context.js';
 
 const ListGroup = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/list-index.js

@@ -1,11 +1,11 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import { watchProp } from '../shared/watch-prop';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { watchProp } from '../shared/watch-prop.js';
 
 const ListIndex = /*#__PURE__*/forwardRef((props, ref) => {
   const f7ListIndex = useRef(null);

package/components/list-input.js

@@ -1,13 +1,13 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle, useState, useContext } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, emit, getSlots, extend } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import TextEditor from './text-editor';
-import { watchProp } from '../shared/watch-prop';
-import { ListContext } from '../shared/list-context';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, emit, getSlots, extend } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import TextEditor from './text-editor.js';
+import { watchProp } from '../shared/watch-prop.js';
+import { ListContext } from '../shared/list-context.js';
 
 
 const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
@@ -138,7 +138,11 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
     emit(props, 'inputClear', event);
   };
 
-  const onInput = (...args) => {
+  const onInput = function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
     emit(props, 'input', ...args);
 
     if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && inputElRef.current) {
@@ -146,12 +150,20 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
     }
   };
 
-  const onFocus = (...args) => {
+  const onFocus = function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
     emit(props, 'focus', ...args);
     setInputFocused(true);
   };
 
-  const onBlur = (...args) => {
+  const onBlur = function () {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+
     emit(props, 'blur', ...args);
 
     if ((validate || validate === '' || validateOnBlur || validateOnBlur === '') && inputElRef.current) {
@@ -161,7 +173,11 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
     setInputFocused(false);
   };
 
-  const onChange = (...args) => {
+  const onChange = function () {
+    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      args[_key4] = arguments[_key4];
+    }
+
     emit(props, 'change', ...args);
 
     if (type === 'texteditor') {

package/components/list-item-cell.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 const ListItemCell = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/list-item-content.js

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect } from 'react';
-import { classNames } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import Badge from './badge';
+import { classNames } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import Badge from './badge.js';
 
 const ListItemContent = props => {
   const {

package/components/list-item-row.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 const ListItemRow = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/list-item.js

@@ -1,16 +1,16 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle, useContext } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, getSlots, emit, isStringProp } from '../shared/utils';
-import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins';
-import { useRouteProps } from '../shared/use-route-props';
-import { useSmartSelect } from '../shared/use-smart-select';
-import { useTooltip } from '../shared/use-tooltip';
-import { watchProp } from '../shared/watch-prop';
-import { f7ready, f7 } from '../shared/f7';
-import ListItemContent from './list-item-content';
-import { ListContext } from '../shared/list-context';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, getSlots, emit, isStringProp } from '../shared/utils.js';
+import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins.js';
+import { useRouteProps } from '../shared/use-route-props.js';
+import { useSmartSelect } from '../shared/use-smart-select.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { watchProp } from '../shared/watch-prop.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import ListItemContent from './list-item-content.js';
+import { ListContext } from '../shared/list-context.js';
 
 
 /*

package/components/list.d.ts

@@ -59,6 +59,7 @@ interface ListProps {
   onSortableEnable ?: (...args: any[]) => void;
   onSortableDisable ?: (...args: any[]) => void;
   onSortableSort ?: (sortData?: any) => void;
+  onSortableMove ?: (itemEl?: any) => void;
   onTabShow ?: (el?: HTMLElement) => void;
   onTabHide ?: (el?: HTMLElement) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7VirtualList: () => VirtualList.VirtualList}>;

package/components/list.js

@@ -1,12 +1,12 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, getSlots, flattenArray, emit, extend } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7, f7ready } from '../shared/f7';
-import { ListContext } from '../shared/list-context';
-import { useTab } from '../shared/use-tab';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, getSlots, flattenArray, emit, extend } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7, f7ready } from '../shared/f7.js';
+import { ListContext } from '../shared/list-context.js';
+import { useTab } from '../shared/use-tab.js';
 
 
 const List = /*#__PURE__*/forwardRef((props, ref) => {
@@ -73,6 +73,11 @@ const List = /*#__PURE__*/forwardRef((props, ref) => {
     emit(props, 'sortableSort', sortData);
   };
 
+  const onSortableMove = (el, listEl) => {
+    if (elRef.current !== listEl) return;
+    emit(props, 'sortableMove', el, listEl);
+  };
+
   useImperativeHandle(ref, () => ({
     el: elRef.current,
     f7VirtualList: () => f7VirtualList.current
@@ -84,6 +89,7 @@ const List = /*#__PURE__*/forwardRef((props, ref) => {
       f7.on('sortableEnable', onSortableEnable);
       f7.on('sortableDisable', onSortableDisable);
       f7.on('sortableSort', onSortableSort);
+      f7.on('sortableMove', onSortableMove);
     });
   };
 
@@ -92,6 +98,7 @@ const List = /*#__PURE__*/forwardRef((props, ref) => {
     f7.off('sortableEnable', onSortableEnable);
     f7.off('sortableDisable', onSortableDisable);
     f7.off('sortableSort', onSortableSort);
+    f7.off('sortableMove', onSortableMove);
   };
 
   const onMount = () => {

package/components/login-screen-title.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 const LoginScreenTitle = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/login-screen.js

@@ -1,12 +1,12 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import { watchProp } from '../shared/watch-prop';
-import { modalStateClasses } from '../shared/modal-state-classes';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { watchProp } from '../shared/watch-prop.js';
+import { modalStateClasses } from '../shared/modal-state-classes.js';
 
 
 const LoginScreen = /*#__PURE__*/forwardRef((props, ref) => {

package/components/menu-dropdown-item.js

@@ -1,9 +1,9 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs, emit } from '../shared/utils';
-import { colorClasses, routerAttrs, routerClasses, actionsAttrs, actionsClasses } from '../shared/mixins';
-import { useRouteProps } from '../shared/use-route-props';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses, routerAttrs, routerClasses, actionsAttrs, actionsClasses } from '../shared/mixins.js';
+import { useRouteProps } from '../shared/use-route-props.js';
 
 const MenuDropdownItem = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/menu-dropdown.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 const MenuDropdown = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/menu-item.js

@@ -1,13 +1,13 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils';
-import { colorClasses, routerAttrs, routerClasses, actionsClasses, actionsAttrs } from '../shared/mixins';
-import { useRouteProps } from '../shared/use-route-props';
-import { useIcon } from '../shared/use-icon';
-import { f7ready, f7 } from '../shared/f7';
-import { useTooltip } from '../shared/use-tooltip';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils.js';
+import { colorClasses, routerAttrs, routerClasses, actionsClasses, actionsAttrs } from '../shared/mixins.js';
+import { useRouteProps } from '../shared/use-route-props.js';
+import { useIcon } from '../shared/use-icon.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { useTooltip } from '../shared/use-tooltip.js';
 
 const MenuItem = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/menu.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 const Menu = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/message.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 const Message = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/messagebar-attachment.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 const MessagebarAttachment = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/messagebar-attachments.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 const MessagebarAttachments = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/messagebar-sheet-image.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 const MessagebarSheetImage = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/messagebar-sheet-item.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 const MessagebarSheetItem = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/messagebar-sheet.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 const MessagebarSheet = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/components/messagebar.js

@@ -1,13 +1,13 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, emit, getSlots, noUndefinedProps } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import Link from './link';
-import Input from './input';
-import { f7ready, f7 } from '../shared/f7';
-import { watchProp } from '../shared/watch-prop';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, emit, getSlots, noUndefinedProps } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import Link from './link.js';
+import Input from './input.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { watchProp } from '../shared/watch-prop.js';
 
 
 const Messagebar = /*#__PURE__*/forwardRef((props, ref) => {

package/components/messages-title.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 const MessagesTitle = /*#__PURE__*/forwardRef((props, ref) => {
   const {