framework7-react 6.3.16 → 7.0.0-beta.12

package/components/toggle/package.json

@@ -1,9 +0,0 @@
-{
-  "name": "framework7-react/toggle",
-  "private": true,
-  "sideEffects": false,
-  "main": "../../cjs/components/toggle.js",
-  "module": "../../esm/components/toggle.js",
-  "jsnext:main": "../../esm/components/toggle.js",
-  "typings": "toggle.d.ts"
-}

package/components/toolbar/package.json

@@ -1,9 +0,0 @@
-{
-  "name": "framework7-react/toolbar",
-  "private": true,
-  "sideEffects": false,
-  "main": "../../cjs/components/toolbar.js",
-  "module": "../../esm/components/toolbar.js",
-  "jsnext:main": "../../esm/components/toolbar.js",
-  "typings": "toolbar.d.ts"
-}

package/components/treeview/package.json

@@ -1,9 +0,0 @@
-{
-  "name": "framework7-react/treeview",
-  "private": true,
-  "sideEffects": false,
-  "main": "../../cjs/components/treeview.js",
-  "module": "../../esm/components/treeview.js",
-  "jsnext:main": "../../esm/components/treeview.js",
-  "typings": "treeview.d.ts"
-}

package/components/treeview-item/package.json

@@ -1,9 +0,0 @@
-{
-  "name": "framework7-react/treeview-item",
-  "private": true,
-  "sideEffects": false,
-  "main": "../../cjs/components/treeview-item.js",
-  "module": "../../esm/components/treeview-item.js",
-  "jsnext:main": "../../esm/components/treeview-item.js",
-  "typings": "treeview-item.d.ts"
-}

package/components/view/package.json

@@ -1,9 +0,0 @@
-{
-  "name": "framework7-react/view",
-  "private": true,
-  "sideEffects": false,
-  "main": "../../cjs/components/view.js",
-  "module": "../../esm/components/view.js",
-  "jsnext:main": "../../esm/components/view.js",
-  "typings": "view.d.ts"
-}

package/components/views/package.json

@@ -1,9 +0,0 @@
-{
-  "name": "framework7-react/views",
-  "private": true,
-  "sideEffects": false,
-  "main": "../../cjs/components/views.js",
-  "module": "../../esm/components/views.js",
-  "jsnext:main": "../../esm/components/views.js",
-  "typings": "views.d.ts"
-}

package/esm/components/accordion.js

@@ -1,29 +0,0 @@
-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, useImperativeHandle, useRef } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-
-var Accordion = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      accordionOpposite = props.accordionOpposite,
-      children = props.children;
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var extraAttrs = getExtraAttrs(props);
-  var classes = classNames(className, 'accordion-list', accordionOpposite && 'accordion-opposite', colorClasses(props));
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
-    style: style,
-    className: classes,
-    ref: elRef
-  }, extraAttrs), children);
-});
-Accordion.displayName = 'f7-accordion';
-export default Accordion;

package/esm/components/actions.js

@@ -1,144 +0,0 @@
-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 { f7, f7ready } from '../shared/f7';
-import { watchProp } from '../shared/watch-prop';
-import { modalStateClasses } from '../shared/modal-state-classes';
-
-
-var Actions = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      grid = props.grid,
-      _props$opened = props.opened,
-      opened = _props$opened === void 0 ? false : _props$opened,
-      animate = props.animate;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  var isOpened = useRef(opened);
-  var isClosing = useRef(false);
-
-  var _f7Actions = useRef(null);
-
-  var onOpen = function onOpen(instance) {
-    isOpened.current = true;
-    isClosing.current = false;
-    emit(props, 'actionsOpen', instance);
-  };
-
-  var onOpened = function onOpened(instance) {
-    emit(props, 'actionsOpened', instance);
-  };
-
-  var onClose = function onClose(instance) {
-    isOpened.current = false;
-    isClosing.current = true;
-    emit(props, 'actionsClose', instance);
-  };
-
-  var onClosed = function onClosed(instance) {
-    isClosing.current = false;
-    emit(props, 'actionsClosed', instance);
-  };
-
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      f7Actions: function f7Actions() {
-        return _f7Actions.current;
-      }
-    };
-  }); // watch opened changes
-
-  watchProp(opened, function (value) {
-    if (!_f7Actions.current) return;
-
-    if (value) {
-      _f7Actions.current.open();
-    } else {
-      _f7Actions.current.close();
-    }
-  });
-
-  var modalEvents = function modalEvents(method) {
-    if (!_f7Actions.current) return;
-
-    _f7Actions.current[method]('open', onOpen);
-
-    _f7Actions.current[method]('opened', onOpened);
-
-    _f7Actions.current[method]('close', onClose);
-
-    _f7Actions.current[method]('closed', onClosed);
-  };
-
-  var onMount = function onMount() {
-    if (!elRef.current) return;
-    var target = props.target,
-        convertToPopover = props.convertToPopover,
-        forceToPopover = props.forceToPopover,
-        closeByBackdropClick = props.closeByBackdropClick,
-        closeByOutsideClick = props.closeByOutsideClick,
-        closeOnEscape = props.closeOnEscape,
-        backdrop = props.backdrop,
-        backdropEl = props.backdropEl,
-        containerEl = props.containerEl;
-    var params = {
-      el: elRef.current,
-      grid: grid
-    };
-    if (target) params.targetEl = target;
-    if ('convertToPopover' in props) params.convertToPopover = convertToPopover;
-    if ('forceToPopover' in props) params.forceToPopover = forceToPopover;
-    if ('backdrop' in props) params.backdrop = backdrop;
-    if ('backdropEl' in props) params.backdropEl = backdropEl;
-    if ('closeByBackdropClick' in props) params.closeByBackdropClick = closeByBackdropClick;
-    if ('closeByOutsideClick' in props) params.closeByOutsideClick = closeByOutsideClick;
-    if ('closeOnEscape' in props) params.closeOnEscape = closeOnEscape;
-    if ('animate' in props) params.animate = animate;
-    if ('containerEl' in props) params.containerEl = containerEl;
-    f7ready(function () {
-      _f7Actions.current = f7.actions.create(params);
-      modalEvents('on');
-
-      if (opened) {
-        _f7Actions.current.open(false);
-      }
-    });
-  };
-
-  var onDestroy = function onDestroy() {
-    if (_f7Actions.current) _f7Actions.current.destroy();
-    _f7Actions.current = null;
-  };
-
-  useIsomorphicLayoutEffect(function () {
-    modalEvents('on');
-    return function () {
-      modalEvents('off');
-    };
-  });
-  useIsomorphicLayoutEffect(function () {
-    onMount();
-    return onDestroy;
-  }, []);
-  var classes = classNames(className, 'actions-modal', {
-    'actions-grid': grid
-  }, modalStateClasses({
-    isOpened: isOpened,
-    isClosing: isClosing
-  }), colorClasses(props));
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
-    style: style,
-    className: classes,
-    ref: elRef
-  }, extraAttrs), children);
-});
-Actions.displayName = 'f7-actions';
-export default Actions;

package/esm/components/area-chart.js

@@ -1,385 +0,0 @@
-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, useEffect } from 'react';
-import { classNames, getExtraAttrs, emit } from '../shared/utils';
-import { f7 } from '../shared/f7';
-
-var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      _props$lineChart = props.lineChart,
-      lineChart = _props$lineChart === void 0 ? false : _props$lineChart,
-      _props$datasets = props.datasets,
-      datasets = _props$datasets === void 0 ? [] : _props$datasets,
-      _props$axis = props.axis,
-      axis = _props$axis === void 0 ? false : _props$axis,
-      _props$axisLabels = props.axisLabels,
-      axisLabels = _props$axisLabels === void 0 ? [] : _props$axisLabels,
-      _props$tooltip = props.tooltip,
-      tooltip = _props$tooltip === void 0 ? false : _props$tooltip,
-      _props$legend = props.legend,
-      legend = _props$legend === void 0 ? false : _props$legend,
-      _props$toggleDatasets = props.toggleDatasets,
-      toggleDatasets = _props$toggleDatasets === void 0 ? false : _props$toggleDatasets,
-      _props$width = props.width,
-      width = _props$width === void 0 ? 640 : _props$width,
-      _props$height = props.height,
-      height = _props$height === void 0 ? 320 : _props$height,
-      _props$maxAxisLabels = props.maxAxisLabels,
-      maxAxisLabels = _props$maxAxisLabels === void 0 ? 8 : _props$maxAxisLabels,
-      formatAxisLabelProp = props.formatAxisLabel,
-      formatLegendLabelProp = props.formatLegendLabel,
-      formatTooltipProp = props.formatTooltip,
-      formatTooltipAxisLabel = props.formatTooltipAxisLabel,
-      formatTooltipTotal = props.formatTooltipTotal,
-      formatTooltipDataset = props.formatTooltipDataset,
-      children = props.children;
-
-  var _useState = useState(null),
-      currentIndex = _useState[0],
-      setCurrentIndex = _useState[1];
-
-  var previousIndex = useRef(null);
-
-  var _useState2 = useState([]),
-      hiddenDatasets = _useState2[0],
-      setHiddenDatasets = _useState2[1];
-
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  var svgElRef = useRef(null);
-  var f7Tooltip = useRef(null);
-  var linesOffsets = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-
-  var getVisibleLegends = function getVisibleLegends() {
-    if (!maxAxisLabels || axisLabels.length <= maxAxisLabels) return axisLabels;
-    var skipStep = Math.ceil(axisLabels.length / maxAxisLabels);
-    var filtered = axisLabels.filter(function (label, index) {
-      return index % skipStep === 0;
-    });
-    return filtered;
-  };
-
-  var getSummValues = function getSummValues() {
-    var summValues = [];
-    datasets.filter(function (dataset, index) {
-      return !hiddenDatasets.includes(index);
-    }).forEach(function (_ref) {
-      var values = _ref.values;
-      values.forEach(function (value, valueIndex) {
-        if (!summValues[valueIndex]) summValues[valueIndex] = 0;
-        summValues[valueIndex] += value;
-      });
-    });
-    return summValues;
-  };
-
-  var getChartData = function getChartData() {
-    var data = [];
-
-    if (!datasets.length) {
-      return data;
-    }
-
-    var lastValues = datasets[0].values.map(function () {
-      return 0;
-    });
-    var maxValue = 0;
-
-    if (lineChart) {
-      datasets.forEach(function (_ref2) {
-        var values = _ref2.values;
-        var datasetMaxValue = Math.max.apply(Math, values);
-        if (datasetMaxValue > maxValue) maxValue = datasetMaxValue;
-      });
-    } else {
-      maxValue = Math.max.apply(Math, getSummValues());
-    }
-
-    datasets.filter(function (dataset, index) {
-      return !hiddenDatasets.includes(index);
-    }).forEach(function (_ref3) {
-      var label = _ref3.label,
-          values = _ref3.values,
-          color = _ref3.color;
-      var points = values.map(function (originalValue, valueIndex) {
-        lastValues[valueIndex] += originalValue;
-        var value = lineChart ? originalValue : lastValues[valueIndex];
-        var x = valueIndex / (values.length - 1) * width;
-        var y = height - value / maxValue * height;
-
-        if (lineChart) {
-          return "" + (valueIndex === 0 ? 'M' : 'L') + x + "," + y;
-        }
-
-        return x + " " + y;
-      });
-
-      if (!lineChart) {
-        points.push(width + " " + height + " 0 " + height);
-      }
-
-      data.push({
-        label: label,
-        points: points.join(' '),
-        color: color
-      });
-    });
-    return data.reverse();
-  };
-
-  var getVerticalLines = function getVerticalLines() {
-    var lines = [];
-
-    if (!datasets.length) {
-      return lines;
-    }
-
-    var values = datasets[0].values;
-    values.forEach(function (value, valueIndex) {
-      var x = valueIndex / (values.length - 1) * width;
-      lines.push(x);
-    });
-    return lines;
-  };
-
-  var toggleDataset = function toggleDataset(index) {
-    if (!toggleDatasets) return;
-
-    if (hiddenDatasets.includes(index)) {
-      hiddenDatasets.splice(hiddenDatasets.indexOf(index), 1);
-    } else {
-      hiddenDatasets.push(index);
-    }
-
-    setHiddenDatasets([].concat(hiddenDatasets));
-  };
-
-  var formatAxisLabel = function formatAxisLabel(label) {
-    if (formatAxisLabelProp) return formatAxisLabelProp(label);
-    return label;
-  };
-
-  var formatLegendLabel = function formatLegendLabel(label) {
-    if (formatLegendLabelProp) return formatLegendLabelProp(label);
-    return label;
-  };
-
-  var calcLinesOffsets = function calcLinesOffsets() {
-    var lines = svgElRef.current.querySelectorAll('line');
-    linesOffsets.current = [];
-
-    for (var i = 0; i < lines.length; i += 1) {
-      linesOffsets.current.push(lines[i].getBoundingClientRect().left);
-    }
-  };
-
-  var formatTooltip = function formatTooltip() {
-    if (currentIndex === null) return '';
-    var total = 0;
-    var currentValues = datasets.filter(function (dataset, index) {
-      return !hiddenDatasets.includes(index);
-    }).map(function (dataset) {
-      return {
-        color: dataset.color,
-        label: dataset.label,
-        value: dataset.values[currentIndex]
-      };
-    });
-    currentValues.forEach(function (dataset) {
-      total += dataset.value;
-    });
-
-    if (formatTooltipProp) {
-      return formatTooltipProp({
-        index: currentIndex,
-        total: total,
-        datasets: currentValues
-      });
-    }
-
-    var labelText = formatTooltipAxisLabel ? formatTooltipAxisLabel(axisLabels[currentIndex]) : formatAxisLabel(axisLabels[currentIndex]);
-    if (!labelText) labelText = '';
-    var totalText = formatTooltipTotal ? formatTooltipTotal(total) : total; // prettier-ignore
-
-    var datasetsText = currentValues.length > 0 ? "\n      <ul class=\"area-chart-tooltip-list\">\n        " + currentValues.map(function (_ref4) {
-      var label = _ref4.label,
-          color = _ref4.color,
-          value = _ref4.value;
-      var valueText = formatTooltipDataset ? formatTooltipDataset(label, value, color) : label + ": " + value;
-      return "\n              <li><span style=\"background-color: " + color + ";\"></span>" + valueText + "</li>\n            ";
-    }).join('') + "\n      </ul>" : ''; // prettier-ignore
-
-    return "\n      <div class=\"area-chart-tooltip-label\">" + labelText + "</div>\n      <div class=\"area-chart-tooltip-total\">" + totalText + "</div>\n      " + datasetsText + "\n    ";
-  };
-
-  var setTooltip = function setTooltip() {
-    if (!tooltip) return;
-    var hasVisibleDataSets = datasets.filter(function (dataset, index) {
-      return !hiddenDatasets.includes(index);
-    }).length > 0;
-
-    if (!hasVisibleDataSets) {
-      if (f7Tooltip.current && f7Tooltip.current.hide) f7Tooltip.current.hide();
-      return;
-    }
-
-    if (currentIndex !== null && !f7Tooltip.current) {
-      f7Tooltip.current = f7.tooltip.create({
-        trigger: 'manual',
-        containerEl: elRef.current,
-        targetEl: svgElRef.current.querySelector("line[data-index=\"" + currentIndex + "\"]"),
-        text: formatTooltip(),
-        cssClass: 'area-chart-tooltip'
-      });
-
-      if (f7Tooltip.current && f7Tooltip.current.show) {
-        f7Tooltip.current.show();
-      }
-
-      return;
-    }
-
-    if (!f7Tooltip.current || !f7Tooltip.current.hide || !f7Tooltip.current.show) {
-      return;
-    }
-
-    if (currentIndex !== null) {
-      f7Tooltip.current.setText(formatTooltip());
-      f7Tooltip.current.setTargetEl(svgElRef.current.querySelector("line[data-index=\"" + currentIndex + "\"]"));
-      f7Tooltip.current.show();
-    } else {
-      f7Tooltip.current.hide();
-    }
-  };
-
-  var onMouseEnter = function onMouseEnter() {
-    calcLinesOffsets();
-  };
-
-  var onMouseMove = function onMouseMove(e) {
-    if (!linesOffsets.current) {
-      calcLinesOffsets();
-    }
-
-    var currentLeft = e.pageX;
-    if (typeof currentLeft === 'undefined') currentLeft = 0;
-    var distances = linesOffsets.current.map(function (left) {
-      return Math.abs(currentLeft - left);
-    });
-    var minDistance = Math.min.apply(Math, distances);
-    var closestIndex = distances.indexOf(minDistance);
-    setCurrentIndex(closestIndex);
-  };
-
-  var onMouseLeave = function onMouseLeave() {
-    setCurrentIndex(null);
-  };
-
-  var attachEvents = function attachEvents() {
-    if (!svgElRef.current) return;
-    svgElRef.current.addEventListener('mouseenter', onMouseEnter);
-    svgElRef.current.addEventListener('mousemove', onMouseMove);
-    svgElRef.current.addEventListener('mouseleave', onMouseLeave);
-  };
-
-  var detachEvents = function detachEvents() {
-    if (!svgElRef.current) return;
-    svgElRef.current.removeEventListener('mouseenter', onMouseEnter);
-    svgElRef.current.removeEventListener('mousemove', onMouseMove);
-    svgElRef.current.removeEventListener('mouseleave', onMouseLeave);
-  };
-
-  useEffect(function () {
-    if (previousIndex.current === currentIndex) return;
-    previousIndex.current = currentIndex;
-    emit(props, 'select', currentIndex);
-    setTooltip();
-  }, [currentIndex]);
-  useEffect(function () {
-    attachEvents();
-    return detachEvents;
-  });
-  useEffect(function () {
-    return function () {
-      if (f7Tooltip.current && f7Tooltip.current.destroy) {
-        f7Tooltip.current.destroy();
-      }
-
-      f7Tooltip.current = null;
-    };
-  }, []);
-  var classes = classNames('area-chart', className);
-  var chartData = getChartData();
-  var verticalLines = getVerticalLines();
-  var visibleLegends = getVisibleLegends();
-  var LegendItemTag = toggleDatasets ? 'button' : 'span';
-  var ChartTag = lineChart ? 'path' : 'polygon';
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
-    style: style,
-    className: classes,
-    ref: elRef
-  }, extraAttrs), /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: width,
-    height: height,
-    viewBox: "0 0 " + width + " " + height,
-    preserveAspectRatio: "none",
-    ref: svgElRef
-  }, chartData.map(function (data, index) {
-    return /*#__PURE__*/React.createElement(ChartTag, {
-      key: ChartTag + "-" + index,
-      fill: lineChart ? undefined : data.color,
-      stroke: lineChart ? data.color : undefined,
-      fillRule: "evenodd",
-      points: lineChart ? undefined : data.points,
-      d: lineChart ? data.points : undefined
-    });
-  }), verticalLines.map(function (line, index) {
-    return /*#__PURE__*/React.createElement("line", {
-      key: "line-" + index,
-      "data-index": index,
-      fill: "#000",
-      x1: line,
-      y1: 0,
-      x2: line,
-      y2: height,
-      className: classNames({
-        'area-chart-current-line': currentIndex === index
-      })
-    });
-  })), axis && /*#__PURE__*/React.createElement("div", {
-    className: "area-chart-axis"
-  }, axisLabels.map(function (label, index) {
-    return /*#__PURE__*/React.createElement("span", {
-      key: index
-    }, visibleLegends.includes(label) && /*#__PURE__*/React.createElement("span", null, formatAxisLabel(label)));
-  })), legend && /*#__PURE__*/React.createElement("div", {
-    className: "area-chart-legend"
-  }, datasets.map(function (dataset, index) {
-    return /*#__PURE__*/React.createElement(LegendItemTag, {
-      key: index,
-      className: classNames('area-chart-legend-item', {
-        'area-chart-legend-item-hidden': hiddenDatasets.includes(index),
-        'area-chart-legend-button': toggleDatasets
-      }),
-      type: toggleDatasets ? 'button' : undefined,
-      onClick: function onClick() {
-        return toggleDataset(index);
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        backgroundColor: dataset.color
-      }
-    }), formatLegendLabel(dataset.label));
-  })), children);
-});
-AreaChart.displayName = 'f7-area-chart';
-export default AreaChart;

package/esm/components/block.js

@@ -1,63 +0,0 @@
-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 { useTab } from '../shared/use-tab';
-
-var Block = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      inset = props.inset,
-      xsmallInset = props.xsmallInset,
-      smallInset = props.smallInset,
-      mediumInset = props.mediumInset,
-      largeInset = props.largeInset,
-      xlargeInset = props.xlargeInset,
-      strong = props.strong,
-      accordionList = props.accordionList,
-      accordionOpposite = props.accordionOpposite,
-      tabs = props.tabs,
-      tab = props.tab,
-      tabActive = props.tabActive,
-      noHairlines = props.noHairlines,
-      noHairlinesIos = props.noHairlinesIos,
-      noHairlinesMd = props.noHairlinesMd,
-      noHairlinesAurora = props.noHairlinesAurora,
-      id = props.id,
-      style = props.style,
-      children = props.children;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  useTab(elRef, props);
-  var classes = classNames(className, 'block', {
-    inset: inset,
-    'xsmall-inset': xsmallInset,
-    'small-inset': smallInset,
-    'medium-inset': mediumInset,
-    'large-inset': largeInset,
-    'xlarge-inset': xlargeInset,
-    'block-strong': strong,
-    'accordion-list': accordionList,
-    'accordion-opposite': accordionOpposite,
-    tabs: tabs,
-    tab: tab,
-    'tab-active': tabActive,
-    'no-hairlines': noHairlines,
-    'no-hairlines-md': noHairlinesMd,
-    'no-hairlines-ios': noHairlinesIos,
-    'no-hairlines-aurora': noHairlinesAurora
-  }, colorClasses(props));
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
-    style: style,
-    className: classes,
-    ref: elRef
-  }, extraAttrs), children);
-});
-Block.displayName = 'f7-block';
-export default Block;