react-onsenui/dist/react-onsenui.js

Onsen UI - React Components for Hybrid Cordova/PhoneGap Apps with Material Design and iOS UI components

/* react-onsenui v1.13.3 - 2023-06-20 */

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('onsenui'), require('prop-types'), require('onsenui/esm/elements/ons-action-sheet'), require('react'), require('react-dom'), require('onsenui/esm/elements/ons-action-sheet-button'), require('onsenui/esm/elements/ons-alert-dialog'), require('onsenui/esm/elements/ons-alert-dialog-button'), require('onsenui/esm/elements/ons-back-button'), require('onsenui/esm/elements/ons-bottom-toolbar'), require('onsenui/esm/elements/ons-button'), require('onsenui/esm/elements/ons-card'), require('onsenui/esm/elements/ons-carousel'), require('onsenui/esm/elements/ons-carousel-item'), require('onsenui/esm/elements/ons-checkbox'), require('onsenui/esm/elements/ons-col'), require('onsenui/esm/elements/ons-dialog'), require('onsenui/esm/elements/ons-fab'), require('onsenui/esm/elements/ons-gesture-detector'), require('onsenui/esm/elements/ons-icon'), require('onsenui/esm/elements/ons-input'), require('onsenui/esm/elements/ons-lazy-repeat'), require('onsenui/esm/elements/ons-list'), require('onsenui/esm/elements/ons-list-header'), require('onsenui/esm/elements/ons-list-item'), require('onsenui/esm/elements/ons-list-title'), require('onsenui/esm/elements/ons-navigator'), require('onsenui/esm/elements/ons-modal'), require('onsenui/esm/elements/ons-page'), require('onsenui/esm/elements/ons-popover'), require('onsenui/esm/elements/ons-progress-bar'), require('onsenui/esm/elements/ons-progress-circular'), require('onsenui/esm/elements/ons-pull-hook'), require('onsenui/esm/elements/ons-radio'), require('onsenui/esm/elements/ons-range'), require('onsenui/esm/elements/ons-ripple'), require('onsenui/esm/elements/ons-row'), require('onsenui/esm/elements/ons-search-input'), require('onsenui/esm/elements/ons-segment'), require('onsenui/esm/elements/ons-select'), require('onsenui/esm/elements/ons-speed-dial'), require('onsenui/esm/elements/ons-speed-dial-item'), require('onsenui/esm/elements/ons-splitter'), require('onsenui/esm/elements/ons-splitter-content'), require('onsenui/esm/elements/ons-splitter-mask'), require('onsenui/esm/elements/ons-splitter-side'), require('onsenui/esm/elements/ons-switch'), require('onsenui/esm/elements/ons-tab'), require('onsenui/esm/elements/ons-tabbar'), require('onsenui/esm/elements/ons-toast'), require('onsenui/esm/elements/ons-toolbar'), require('onsenui/esm/elements/ons-toolbar-button')) :
  typeof define === 'function' && define.amd ? define(['exports', 'onsenui', 'prop-types', 'onsenui/esm/elements/ons-action-sheet', 'react', 'react-dom', 'onsenui/esm/elements/ons-action-sheet-button', 'onsenui/esm/elements/ons-alert-dialog', 'onsenui/esm/elements/ons-alert-dialog-button', 'onsenui/esm/elements/ons-back-button', 'onsenui/esm/elements/ons-bottom-toolbar', 'onsenui/esm/elements/ons-button', 'onsenui/esm/elements/ons-card', 'onsenui/esm/elements/ons-carousel', 'onsenui/esm/elements/ons-carousel-item', 'onsenui/esm/elements/ons-checkbox', 'onsenui/esm/elements/ons-col', 'onsenui/esm/elements/ons-dialog', 'onsenui/esm/elements/ons-fab', 'onsenui/esm/elements/ons-gesture-detector', 'onsenui/esm/elements/ons-icon', 'onsenui/esm/elements/ons-input', 'onsenui/esm/elements/ons-lazy-repeat', 'onsenui/esm/elements/ons-list', 'onsenui/esm/elements/ons-list-header', 'onsenui/esm/elements/ons-list-item', 'onsenui/esm/elements/ons-list-title', 'onsenui/esm/elements/ons-navigator', 'onsenui/esm/elements/ons-modal', 'onsenui/esm/elements/ons-page', 'onsenui/esm/elements/ons-popover', 'onsenui/esm/elements/ons-progress-bar', 'onsenui/esm/elements/ons-progress-circular', 'onsenui/esm/elements/ons-pull-hook', 'onsenui/esm/elements/ons-radio', 'onsenui/esm/elements/ons-range', 'onsenui/esm/elements/ons-ripple', 'onsenui/esm/elements/ons-row', 'onsenui/esm/elements/ons-search-input', 'onsenui/esm/elements/ons-segment', 'onsenui/esm/elements/ons-select', 'onsenui/esm/elements/ons-speed-dial', 'onsenui/esm/elements/ons-speed-dial-item', 'onsenui/esm/elements/ons-splitter', 'onsenui/esm/elements/ons-splitter-content', 'onsenui/esm/elements/ons-splitter-mask', 'onsenui/esm/elements/ons-splitter-side', 'onsenui/esm/elements/ons-switch', 'onsenui/esm/elements/ons-tab', 'onsenui/esm/elements/ons-tabbar', 'onsenui/esm/elements/ons-toast', 'onsenui/esm/elements/ons-toolbar', 'onsenui/esm/elements/ons-toolbar-button'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Ons = {}, global.ons, global.PropTypes, global.ons.elements.ActionSheet, global.React, global.ReactDOM));
})(this, (function (exports, onsenui, PropTypes, onsActionSheet, React, ReactDOM) { 'use strict';

  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);

  function _extends() {
    _extends = Object.assign ? Object.assign.bind() : 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);
  }

  const kebabize = camelString => camelString.replace(/([a-zA-Z])([A-Z])/g, '$1-$2').toLowerCase();
  const addDeprecated = (props, deprecated) => {
    const propsCopy = {
      ...props
    };
    const nameMap = {
      className: 'class',
      ...deprecated
    };

    // eslint-disable-next-line no-unused-vars
    for (const [oldName, newName] of Object.entries(nameMap)) {
      if (propsCopy[newName] === undefined && propsCopy[oldName] !== undefined) {
        propsCopy[newName] = propsCopy[oldName];
        delete propsCopy[oldName];
      }
    }
    return propsCopy;
  };
  function useCustomElementListener(ref, prop, handler) {
    const event = prop.slice(2).toLowerCase();
    React.useEffect(() => {
      const current = ref.current;
      current.addEventListener(event, handler);
      return function cleanup() {
        current.removeEventListener(event, handler);
      };
    }, [ref, handler]);
  }
  function useCustomElement(props) {
    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    let ref = arguments.length > 2 ? arguments[2] : undefined;
    const notAttributes = options.notAttributes || [];
    const deprecated = options.deprecated || {};
    const properties = {};
    // eslint-disable-next-line no-unused-vars
    for (const [prop, value] of Object.entries(addDeprecated(props, deprecated))) {
      const jsName = kebabize(prop);
      if (notAttributes.includes(prop)) {
        React.useEffect(() => {
          ref.current[prop] = value;
        });
      } else if (/^on[A-Z]/.test(prop)) {
        useCustomElementListener(ref, prop, value);
      } else if (typeof value === 'boolean') {
        properties[jsName] = value ? '' : null;
      } else if (typeof value === 'object' && value !== null) {
        properties[jsName] = JSON.stringify(value);
      } else {
        properties[jsName] = value;
      }
    }
    return {
      properties
    };
  }
  function onsCustomElement(WrappedComponent, options) {
    return /*#__PURE__*/React__default["default"].forwardRef((props, _ref) => {
      const ref = _ref || React.useRef();
      const {
        style,
        children,
        ...rest
      } = props;
      const {
        properties
      } = useCustomElement(rest, options, ref);
      return /*#__PURE__*/React__default["default"].createElement(WrappedComponent, _extends({
        ref: ref,
        style: style
      }, properties), children);
    });
  }

  class Portal extends React__default["default"].Component {
    constructor(props) {
      super(props);
      this.container = document.createElement('div');
    }
    componentDidMount() {
      document.body.appendChild(this.container);
    }
    componentWillUnmount() {
      document.body.removeChild(this.container);
    }
    render() {
      return /*#__PURE__*/ReactDOM__default["default"].createPortal(this.props.children, this.container);
    }
  }
  const baseDialog = DialogComponent => /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
    // visible prop should be applied last since it depends on animation and
    // maskColor props being set first
    const {
      visible,
      ...rest
    } = props;
    return /*#__PURE__*/React__default["default"].createElement(Portal, null, /*#__PURE__*/React__default["default"].createElement(DialogComponent, _extends({}, rest, {
      visible: visible,
      ref: ref
    }), props.children));
  });

  const propTypes$7 = {
    /**
     * @name title
     * @type string
     * @required false
     * @description
     *  [en]
     *  Optional title of the action sheet. A new element will be created containing this string.
     *  [/en]
     *  [ja][/ja]
     */
    title: PropTypes__default["default"].string,
    /**
     * @name onDialogCancel
     * @type function
     * @required false
     * @description
     *  [en]
     *  Called only if cancelable is true. It will be called after tapping the background or by pressing the back button on Android devices.
     *  [/en]
     *  [ja][/ja]
     */
    onDialogCancel: PropTypes__default["default"].func,
    /**
     * @name visible
     * @type bool
     * @description
     *  [en]
     *  Indicates whether the dialog is open and shown.
     *  [/en]
     *  [ja][/ja]
     */
    visible: PropTypes__default["default"].bool,
    /**
     * @name cancelable
     * @type bool
     * @required false
     * @description
     *  [en]
     *  Specifies whether the dialog is cancelable or not.
     *  A cancelable dialog will call onCancel  when tapping the background or or  pressing the back button on Android devices
     *  [/en]
     *  [ja][/ja]
     */
    cancelable: PropTypes__default["default"].bool,
    /**
     * @name disabled
     * @type bool
     * @required false
     * @description
     *  [en]
     *  Specifies whether the dialog is disabled.
     *  [/en]
     *  [ja][/ja]
     */
    disabled: PropTypes__default["default"].bool,
    /**
     * @name onCancel
     * @type function
     * @required false
     * @description
     *  [en]
     *  DEPRECATED! Use `onDialogCancel` instead.
     *  [/en]
     *  [ja][/ja]
     */
    onCancel: PropTypes__default["default"].func,
    /**
     * @name isOpen
     * @type bool
     * @description
     *  [en]
     *  DEPRECATED! Use `visible` instead.
     *  [/en]
     *  [ja][/ja]
     */
    isOpen: PropTypes__default["default"].bool,
    /**
     * @name isCancelable
     * @type bool
     * @required false
     * @description
     *  [en]
     *  DEPRECATED! Use `cancelable` instead.
     *  [/en]
     *  [ja][/ja]
     */
    isCancelable: PropTypes__default["default"].bool,
    /**
     * @name isDisabled
     * @type bool
     * @required false
     * @description
     *  [en]
     *  DEPRECATED! Use `disabled` instead.
     *  [/en]
     *  [ja][/ja]
     */
    isDisabled: PropTypes__default["default"].bool,
    /**
     * @name animation
     * @type string
     * @required false
     * @description
     *  [en]
     *  The animation used when showing and hiding the dialog. Can be either `"none"` or `"default"`.
     *  [/en]
     *  [ja][/ja]
     */
    animation: PropTypes__default["default"].string,
    /**
     * @name modifier
     * @type string
     * @required false
     * @description
     *  [en]The appearance of the dialog.[/en]
     *  [ja][/ja]
     */
    modifier: PropTypes__default["default"].string,
    /**
     * @name maskColor
     * @type string
     * @required false
     * @description
     *  [en]Color of the background mask. Default is "rgba(0, 0, 0, 0.2)"[/en]
     *  [ja][/ja]
     */
    maskColor: PropTypes__default["default"].string,
    /**
     * @name animationOptions
     * @type object
     * @required false
     * @description
     *  [en]Specify the animation's duration, delay and timing. E.g.  `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en]
     *  [ja][/ja]
     */
    animationOptions: PropTypes__default["default"].object,
    /**
     * @name onPreShow
     * @type function
     * @required false
     * @description
     *  [en]
     *  Called just before the action sheet is displayed.
     *  [/en]
     *  [ja][/ja]
     */
    onPreShow: PropTypes__default["default"].func,
    /**
     * @name onPostShow
     * @type function
     * @required false
     * @description
     *  [en]
     *  Called just after the action sheet is displayed.
     *  [/en]
     *  [ja][/ja]
     */
    onPostShow: PropTypes__default["default"].func,
    /**
     * @name onPreHide
     * @type function
     * @required false
     * @description
     *  [en]Called just before the action sheet is hidden.[/en]
     *  [ja][/ja]
     */
    onPreHide: PropTypes__default["default"].func,
    /**
     * @name onPostHide
     * @type function
     * @required false
     * @description
     *  [en]Called just after the action sheet is hidden.[/en]
     *  [ja][/ja]
     */
    onPostHide: PropTypes__default["default"].func,
    /**
     * @name onDeviceBackButton
     * @type function
     * @required false
     * @description
     *  [en]
     *  Custom handler for device back button.
     *  [/en]
     *  [ja][/ja]
     */
    onDeviceBackButton: PropTypes__default["default"].func
  };
  const deprecated$a = {
    onCancel: 'onDialogCancel',
    isOpen: 'visible',
    isDisabled: 'disabled',
    isCancelable: 'cancelable'
  };
  const notAttributes$d = ['onDeviceBackButton'];

  /**
   * @original ons-action-sheet
   * @category dialog
   * @tutorial react/Reference/action-sheet
   * @description
   * [en]
   *  Action/bottom sheet that is displayed on top of current screen.
   *  The action sheet is useful for displaying a list of options and asking the user to make a decision. An ActionSheetButton component is provided for this purpose, although it can contain any type of content.
   *  It will automatically be displayed as Material Design (bottom sheet) when running on an Android device.
   * [/en]
   * [ja][/ja]
   */
  const ActionSheet = onsCustomElement(baseDialog('ons-action-sheet'), {
    propTypes: propTypes$7,
    deprecated: deprecated$a,
    notAttributes: notAttributes$d
  });
  ActionSheet.propTypes = propTypes$7;

  const propTypes$6 = {
    /**
     * @name modifier
     * @type string
     * @required false
     * @description
     *  [en]The appearance of the action sheet button.[/en]
     *  [ja][/ja]
     */
    modifier: PropTypes__default["default"].string,
    /**
     * @name icon
     * @type string
     * @description
     *  [en]Creates an `Icon` component with this string. Only visible on Android.[/en]
     *  [ja][/ja]
     */
    icon: PropTypes__default["default"].string,
    /**
     * @name onClick
     * @type function
     * @description
     *  [en]This function will be called when the button is clicked.[/en]
     *  [ja][/ja]
     */
    onClick: PropTypes__default["default"].func
  };

  /**
   * @original ons-action-sheet-button
   * @category dialog
   * @tutorial react/Reference/action-sheet
   * @description
   * [en]Component that represent each button of the action sheet.[/en]
   * [ja][/ja]
   */
  const ActionSheetButton = onsCustomElement('ons-action-sheet-button', {
    propTypes: propTypes$6
  });
  ActionSheetButton.propTypes = propTypes$6;

  const deprecated$9 = {
    onCancel: 'onDialogCancel',
    isOpen: 'visible',
    isDisabled: 'disabled',
    isCancelable: 'cancelable'
  };
  const notAttributes$c = ['onDeviceBackButton'];

  /**
   * @original ons-alert-dialog
   * @category dialog
   * @tutorial react/Reference/alert-dialog
   * @description
   * [en]
   *   Alert dialog that is displayed on top of the current screen. Useful for displaying questions, warnings or error messages to the user. The title, content and buttons can be easily customized and it will automatically switch style based on the platform.
   * [/en]
   * [ja][/ja]
   * @example
     <AlertDialog isOpen={this.state.isOpen} onCancel={this.handleCancel.bind(this)} cancelable>
       <div className="alert-dialog-title">Warning!</div>
       <div className="alert-dialog-content">
         An error has occurred!
       </div>
       <div className="alert-dialog-footer">
         <Button onClick={this.handleCancel.bind(this)} className="alert-dialog-button">
           Cancel
         </Button>
         <Button onClick={this.handleCancel.bind(this)} className="alert-dialog-button">
           Ok
         </Button>
       </div>
     </AlertDialog>
   */
  const AlertDialog = onsCustomElement(baseDialog('ons-alert-dialog'), {
    deprecated: deprecated$9,
    notAttributes: notAttributes$c
  });
  AlertDialog.propTypes = {
    /**
     * @name visible
     * @type bool
     * @description
     *  [en]
     *  Indicates whether the dialog is open and shown.
     *  [/en]
     *  [ja][/ja]
     */
    visible: PropTypes__default["default"].bool,
    /**
     * @name disabled
     * @type bool
     * @required false
     * @description
     *  [en]
     *  Specifies whether the dialog is disabled.
     *  [/en]
     *  [ja][/ja]
     */
    disabled: PropTypes__default["default"].bool,
    /**
     * @name cancelable
     * @type bool
     * @required false
     * @description
     *  [en]
     *  Specifies whether the dialog is cancelable or not.
     *  A cancelable dialog will call `onDialogCancel` when tapping the background or pressing the back button on Android devices.
     *  [/en]
     *  [ja][/ja]
     */
    cancelable: PropTypes__default["default"].bool,
    /**
     * @name onDialogCancel
     * @type function
     * @required false
     * @description
     *  [en]
     *  Called only if `cancelable` is true. It will be called after tapping the background or by pressing the back button on Android devices.
     *  [/en]
     *  [ja][/ja]
     */
    onDialogCancel: PropTypes__default["default"].func,
    /**
     * @name onCancel
     * @type function
     * @required false
     * @description
     *  [en]
     *  DEPRECATED! Use `onDialogCancel` instead.
     *  [/en]
     *  [ja][/ja]
     */
    onCancel: PropTypes__default["default"].func,
    /**
     * @name isOpen
     * @type bool
     * @description
     *  [en]
     *  DEPRECATED! Use `visible` instead.
     *  [/en]
     *  [ja][/ja]
     */
    isOpen: PropTypes__default["default"].bool,
    /**
     * @name isCancelable
     * @type bool
     * @required false
     * @description
     *  [en]
     *  DEPRECATED! Use `cancelable` instead.
     *  [/en]
     *  [ja][/ja]
     */
    isCancelable: PropTypes__default["default"].bool,
    /**
     * @name isDisabled
     * @type bool
     * @required false
     * @description
     *  [en]
     *  DEPRECATED! Use `disabled` instead.
     *  [/en]
     *  [ja][/ja]
     */
    isDisabled: PropTypes__default["default"].bool,
    /**
     * @name animation
     * @type string
     * @required false
     * @description
     *  [en]
     *  The animation used when showing and hiding the dialog. Can be either `"none"` or `"default"`.
     *  [/en]
     *  [ja][/ja]
     */
    animation: PropTypes__default["default"].string,
    /**
     * @name modifier
     * @type string
     * @required false
     * @description
     *  [en]The appearance of the dialog.[/en]
     *  [ja][/ja]
     */
    modifier: PropTypes__default["default"].string,
    /**
     * @name maskColor
     * @type string
     * @required false
     * @description
     *  [en]Color of the background mask. Default is "rgba(0, 0, 0, 0.2)"[/en]
     *  [ja][/ja]
     */
    maskColor: PropTypes__default["default"].string,
    /**
     * @name animationOptions
     * @type object
     * @required false
     * @description
     *  [en]Specify the animation's duration, delay and timing. E.g.  `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en]
     *  [ja][/ja]
     */
    animationOptions: PropTypes__default["default"].object,
    /**
     * @name onPreShow
     * @type function
     * @required false
     * @description
     *  [en]
     *  Called just before the alert dialog is displayed.
     *  [/en]
     *  [ja][/ja]
     */
    onPreShow: PropTypes__default["default"].func,
    /**
     * @name onPostShow
     * @type function
     * @required false
     * @description
     *  [en]
     *  Called just after the alert dialog is displayed.
     *  [/en]
     *  [ja][/ja]
     */
    onPostShow: PropTypes__default["default"].func,
    /**
     * @name onPreHide
     * @type function
     * @required false
     * @description
     *  [en]Called just before the alert dialog is hidden.[/en]
     *  [ja][/ja]
     */
    onPreHide: PropTypes__default["default"].func,
    /**
     * @name onPostHide
     * @type function
     * @required false
     * @description
     *  [en]Called just after the alert dialog is hidden.[/en]
     *  [ja][/ja]
     */
    onPostHide: PropTypes__default["default"].func,
    /**
     * @name onDeviceBackButton
     * @type function
     * @required false
     * @description
     *  [en]
     *  Custom handler for device back button.
     *  [/en]
     *  [ja][/ja]
     */
    onDeviceBackButton: PropTypes__default["default"].func
  };

  /**
   * @original ons-alert-dialog-button
   * @category dialog
   * @tutorial react/Reference/dialog
   * @description
   * [en]Component that represent each button of the alert dialog.[/en]
   * [ja][/ja]
   */
  const AlertDialogButton = onsCustomElement('ons-alert-dialog-button');
  AlertDialogButton.propTypes = {
    /**
     * @name modifier
     * @type string
     * @required false
     * @description
     *  [en]The appearance of the alert dialog button.[/en]
     *  [ja][/ja]
     */
    modifier: PropTypes__default["default"].string,
    /**
     * @name disabled
     * @type bool
     * @description
     *  [en]
     *  Specifies whether the button is disabled.
     *  [/en]
     *  [ja][/ja]
     */
    disabled: PropTypes__default["default"].bool,
    /**
     * @name onClick
     * @type function
     * @description
     *  [en]This function will be called when the button is clicked.[/en]
     *  [ja][/ja]
     */
    onClick: PropTypes__default["default"].func
  };

  const notAttributes$b = ['options'];

  /**
   * @original ons-back-button
   * @category navigation
   * @tutorial react/Reference/back-button
   * @description
   * [en]
   *   Back button component for Toolbar. It enables to automatically to pop the top page of the navigator. When only presented with one page, the button is hidden automatically.
   *
   *   The default behavior can be overridden using the `onClick` prop.
   * [/en]
   * [ja][/ja]
   * @example
   * <Toolbar modifier={this.props.modifier} >
        <div className="left"><BackButton modifier={this.props.modifier}>Back</BackButton></div>
        <div className="center">{this.props.title}</div>
     </Toolbar>
   */
  const BackButton = onsCustomElement('ons-back-button', {
    notAttributes: notAttributes$b
  });
  BackButton.propTypes = {
    /**
     * @name modifier
     * @type string
     * @required false
     * @description
     *  [en]The appearance of the back button.[/en]
     *  [ja][/ja]
     */
    modifier: PropTypes__default["default"].string,
    /**
     * @name onClick
     * @type function
     * @description
     *  [en]This function will be called when the button is clicked. To prevent the default click behaviour, call `event.preventDefault()`.[/en]
     *  [ja][/ja]
     */
    onClick: PropTypes__default["default"].func,
    /**
     * @name options
     * @type object
     * @description
     *  [en]Specifies the animation, animationOptions, and callback.[/en]
     *  [ja][/ja]
     */
    options: PropTypes__default["default"].shape({
      animation: PropTypes__default["default"].string,
      animationOptions: PropTypes__default["default"].object,
      callback: PropTypes__default["default"].func
    })
  };

  const propTypes$5 = {
    /**
     * @name modifier
     * @type string
     * @description
     *  [en]Specify modifier name to specify custom styles. Optional.[/en]
     *  [ja][/ja]
     */
    modifier: PropTypes__default["default"].string
  };

  /**
   * @original ons-bottom-toolbar
   * @category page
   * @description
   * [en]Toolbar component that is positioned at the bottom of the page.[/en]
   * [ja][/ja]
   * @example
   * <BottomToolbar modifier="material"> Content </BottomToolbar>
   */
  const BottomToolbar = onsCustomElement('ons-bottom-toolbar', {
    propTypes: propTypes$5
  });
  BottomToolbar.propTypes = propTypes$5;

  const propTypes$4 = {
    /**
     * @name modifier
     * @type string
     * @required false
     * @description
     *  [en]The appearance of the button.[/en]
     *  [ja][/ja]
     */
    modifier: PropTypes__default["default"].string,
    /**
     * @name disabled
     * @type bool
     * @description
     *  [en]
     *  Specifies whether the button is disabled.
     *  [/en]
     *  [ja][/ja]
     */
    disabled: PropTypes__default["default"].bool,
    /**
     * @name ripple
     * @type bool
     * @description
     *  [en]
     *  Specifies whether the button has a ripple effect.
     *  [/en]
     *  [ja][/ja]
     */
    ripple: PropTypes__default["default"].bool,
    /**
     * @name onClick
     * @type function
     * @description
     *  [en] This function will be called when the button is clicked. [/en]
     *  [ja][/ja]
     */
    onClick: PropTypes__default["default"].func
  };

  /**
   * @original ons-button
   * @category form
   * @tutorial react/Reference/button
   * @description
   * [en] Button component. If you want to place a button in a toolbar, use `ToolbarButton` or `BackButton` instead. Will automatically display as a Material Design button with a ripple effect on Android.
   [/en]
   * [ja][/ja]
   * @example
   * <Button modifier="large--cta">
   *   Tap Me
   * </Button>
   */
  const Button = onsCustomElement('ons-button', {
    propTypes: propTypes$4
  });
  Button.propTypes = propTypes$4;

  /**
   * @original ons-card
   * @category visual
   * @tutorial react/Reference/visual
   * @description
   * [en]Card component that can be used to display content.[/en]
   * [ja][/ja]
   * @example
   *
  <Card>
    <p>Some content</p>
  </Card>
   */
  const Card = onsCustomElement('ons-card');
  Card.propTypes = {
    /**
     * @name modifier
     * @type string
     * @description
     *  [en]
     *  Specify modifier name to specify custom styles. Optional.
     *  [/en]
     *  [ja][/ja]
     */
    modifier: PropTypes__default["default"].string
  };

  const deprecated$8 = {
    index: 'activeIndex'
  };
  const Element$9 = onsCustomElement('ons-carousel', {
    deprecated: deprecated$8
  });

  /**
   * @original ons-carousel
   * @category carousel
   * @tutorial react/Reference/carousel
   * @description
   * [en] Carousel component. A carousel can be used to display several items in the same space.
   *     The component supports displaying content both horizontally and vertically. The user can scroll through the items by dragging and it can also be controller programmatically.
   [/en]
   * [ja][/ja]
   * @example
   *    <Carousel
            onPostChange={() => console.log('onPostChange')}
            onOverscroll={() => console.log('onOverscroll')}
            onRefresh={() => console.log('onRefresh')}
            ref={(carousel) => { this.carousel = carousel; }}
            swipeable
            overscrollable
            autoScroll
            fullscreen
            autoScrollRatio={0.2}
        >
            <CarouselItem style={{backgroundColor: 'gray'}}>
              <div className='item-label'>GRAY</div>
            </CarouselItem>
            <CarouselItem style={{backgroundColor: '#085078'}}>
              <div className='item-label'>BLUE</div>
            </CarouselItem>
          </Carousel>

   */
  const Carousel = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
    const {
      itemWidth,
      itemHeight,
      ...rest
    } = props;

    // string values for itemWidth and itemHeight are deprecated but handle them
    // safely anyway to avoid breaking user code
    const stringify = x => typeof x === 'number' ? `${x}px` : x;
    const realItemWidth = stringify(itemWidth);
    const realItemHeight = stringify(itemHeight);
    return /*#__PURE__*/React__default["default"].createElement(Element$9, _extends({
      itemWidth: realItemWidth,
      itemHeight: realItemHeight,
      ref: ref
    }, rest), props.children);
  });
  Carousel.propTypes = {
    /**
     * @name direction
     * @type string
     * @required false
     * @description
     *  [en]The direction of the carousel. Can be either "horizontal" or "vertical". Default is "horizontal".[/en]
     *  [ja][/ja]
     */
    direction: PropTypes__default["default"].oneOf(['horizontal', 'vertical']),
    /**
     * @name fullscreen
     * @type bool
     * @description
     *  [en]If true, the carousel will cover the whole screen.[/en]
     *  [ja][/ja]
     */
    fullscreen: PropTypes__default["default"].bool,
    /**
     * @name overscrollable
     * @type bool
     * @description
     *  [en]If true, the carousel will be scrollable over the edge. It will bounce back when released.[/en]
     *  [ja][/ja]
     */
    overscrollable: PropTypes__default["default"].bool,
    /**
     * @name centered
     * @type bool
     * @description
     *  [en]If true, the carousel then the selected item will be in the center of the carousel instead of the beginning. Useful only when the items are smaller than the carousel.[/en]
     *  [ja][/ja]
     */
    centered: PropTypes__default["default"].bool,
    /**
     * @name itemWidth
     * @type string
     * @description
     *  [en]ons-carousel-item's width. Only works when the direction is set to "horizontal". Can be in pixels or a percentage.[/en]
     *  [ja][/ja]
     */
    itemWidth: PropTypes__default["default"].string,
    /**
     * @name itemHeight
     * @type string
     * @description
     *  [en]ons-carousel-item's height. Only works when the direction is set to "vertical". Can be in pixels or a percentage.[/en]
     *  [ja][/ja]
     */
    itemHeight: PropTypes__default["default"].string,
    /**
     * @name autoScroll
     * @type bool
     * @description
     *  [en]If true, the carousel will be automatically scrolled to the closest item border when released.[/en]
     *  [ja][/ja]
     */
    autoScroll: PropTypes__default["default"].bool,
    /**
     * @name autoScrollRatio
     * @type number
     * @description
     *  [en]A number between 0.0 and 1.0 that specifies how much the user must drag the carousel in order for it to auto scroll to the next item.[/en]
     *  [ja][/ja]
     */
    autoScrollRatio: PropTypes__default["default"].number,
    /**
     * @name swipeable
     * @type bool
     * @description
     *  [en]If true, the carousel can be scrolled by drag or swipe.[/en]
     *  [ja][/ja]
     */
    swipeable: PropTypes__default["default"].bool,
    /**
     * @name disabled
     * @type bool
     * @description
     *  [en]If true, the carousel will be disabled.[/en]
     *  [ja][/ja]
     */
    disabled: PropTypes__default["default"].bool,
    /**
     * @name activeIndex
     * @type number
     * @description
     *  [en]Specify the index of the ons-carousel-item to show. Default is 0.[/en]
     *  [ja][/ja]
     */
    activeIndex: PropTypes__default["default"].number,
    /**
     * @name index
     * @type number
     * @description
     *  [en]DEPRECATED! Use `activeIndex` instead.[/en]
     *  [ja][/ja]
     */
    index: PropTypes__default["default"].number,
    /**
     * @name autoRefresh
     * @type bool
     * @description
     *  [en]When this attribute is set the carousel will automatically refresh when the number of child nodes change.[/en]
     *  [ja][/ja]
     */
    autoRefresh: PropTypes__default["default"].bool,
    /**
     * @name onPreChange
     * @type function
     * @description
     *  [en]Called just before the current carousel item changes.[/en]
     *  [ja][/ja]
     */
    onPreChange: PropTypes__default["default"].func,
    /**
     * @name onPostChange
     * @type function
     * @description
     *  [en]Called just after the current carousel item has changed.[/en]
     *  [ja][/ja]
     */
    onPostChange: PropTypes__default["default"].func,
    /**
     * @name onRefresh
     * @type function
     * @description
     *  [en]Called when the carousel has been refreshed. [/en]
     *  [ja][/ja]
     */
    onRefresh: PropTypes__default["default"].func,
    /**
     * @name onOverscroll
     * @type function
     * @description
     *  [en]Called when the carousel has been overscrolled. [/en]
     *  [ja][/ja]
     */
    onOverscroll: PropTypes__default["default"].func,
    /**
     * @name animation
     * @type string
     * @required false
     * @description
     *  [en]If this prop is set to "none" the transitions will not be animated.[/en]
     *  [ja][/ja]
     */
    animation: PropTypes__default["default"].string,
    /**
     * @name animationOptions
     * @type object
     * @required false
     * @description
     *  [en]Specify the animation's duration, delay and timing. E.g.  `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en]
     *  [ja][/ja]
     */
    animationOptions: PropTypes__default["default"].object,
    /**
     * @name onSwipe
     * @type function
     * @description
     *  [en]Hook called whenever the user slides the carousel. It gets a decimal index and an animationOptions object as arguments.[/en]
     *  [ja][/ja]
     */
    onSwipe: PropTypes__default["default"].func
  };

  /**
   * @original ons-carousel-item
   * @category carousel
   * @tutorial react/Reference/carousel
   * @description
   * [en] Carousel item component. Used as a child of the `<ons-carousel>` element.
   [/en]
   * [ja][/ja]
   * @example
  *  <Carousel swipeable overscrollable autoScroll fullscreen >
       <CarouselItem style={{backgroundColor: 'gray'}}>
         <div className='item-label'>GRAY</div>
       </CarouselItem>
       <CarouselItem style={{backgroundColor: '#085078'}}>
         <div className='item-label'>BLUE</div>
       </CarouselItem>
     </Carousel>
   */
  const CarouselItem = onsCustomElement('ons-carousel-item');
  CarouselItem.propTypes = {
    /**
     * @name modifier
     * @type string
     * @description
     *  [en]
     *  Specify modifier name to specify custom styles. Optional.
     *  [/en]
     *  [ja][/ja]
     */
    modifier: PropTypes__default["default"].string
  };

  // For a prop with name `defaultProp`, sets the component's `prop` prop to the
  // value of `defaultProp` when the component mounts only.
  //
  // For example, Input has a defaulttValue prop that should set the inner input's
  // value when the component mounted and do nothing afterwards.
  const oneTimeProp = (WrappedComponent, defaultProp, prop) => {
    class OneTimeProp extends React__default["default"].Component {
      constructor(props) {
        super(props);
        this.ref = /*#__PURE__*/React__default["default"].createRef();
      }
      componentDidMount() {
        const value = this.props[defaultProp];
        if (value) {
          this.ref.current[prop] = value;
        }
      }
      render() {
        const {
          innerRef,
          ...rest
        } = this.props;
        delete rest[defaultProp];
        if (innerRef && innerRef !== this.ref) {
          this.ref = innerRef;
        }
        return /*#__PURE__*/React__default["default"].createElement(WrappedComponent, _extends({
          ref: this.ref
        }, rest), this.props.children);
      }
    }
    return /*#__PURE__*/React__default["default"].forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement(OneTimeProp, _extends({
      innerRef: ref
    }, props), props.children));
  };

  const INPUT_PROPS = {
    autoCapitalize: 'autocapitalize',
    autoComplete: 'autocomplete',
    autoCorrect: 'autocorrect',
    autoFocus: 'autofocus',
    inputMode: 'inputmode',
    maxLength: 'maxlength',
    minLength: 'minlength',
    readOnly: 'readonly',
    spellCheck: 'spellcheck'
  };

  const nameMap$6 = {
    ...INPUT_PROPS
  };
  const withDefaultChecked$2 = component => oneTimeProp(component, 'defaultChecked', 'checked');

  /**
   * @original ons-checkbox
   * @category form
   * @tutorial react/Reference/checkbox
   * @description
   * [en]
   *  A checkbox element. The component will automatically render as a Material Design checkbox on Android devices.
   *
   *  Most attributes that can be used for a normal `<input type="checkbox">` element can also be used on the `<Checkbox>` component.
   * [/en]
   * [ja][/ja]
   * @example
   * <Checkbox
   *   onChange={event => { this.setState({checked: event.target.checked})} }
   *   modifier='material' />
   */
  const Checkbox = withDefaultChecked$2(onsCustomElement('ons-checkbox', {
    deprecated: nameMap$6
  }));
  Checkbox.propTypes = {
    /**
     * @name modifier
     * @type string
     * @required false
     * @description
     *  [en]The appearance of the checkbox.[/en]
     *  [ja][/ja]
     */
    modifier: PropTypes__default["default"].string,
    /**
     * @name disabled
     * @type bool
     * @description
     *  [en]
     *  Specifies whether the checkbox is disabled.
     *  [/en]
     *  [ja][/ja]
     */
    disabled: PropTypes__default["default"].bool,
    /**
     * @name onChange
     * @type function
     * @description
     *  [en]Called when the inner checkbox fires a `change` event.[/en]
     *  [ja][/ja]
     */
    onChange: PropTypes__default["default"].func,
    /**
     * @name onInput
     * @type function
     * @description
     *  [en]Called when the inner checkbox fires an `input` event.[/en]
     *  [ja][/ja]
     */
    onInput: PropTypes__default["default"].func,
    /**
     * @name value
     * @type string
     * @description
     *  [en] Value of the checkbox.[/en]
     *  [ja][/ja]
     */
    value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].instanceOf(Date)]),
    /**
     * @name checked
     * @type boolean
     * @description
     *  [en]Controls the state of the checkbox (controlled).[/en]
     *  [ja][/ja]
     */
    checked: PropTypes__default["default"].bool,
    /**
     * @name defaultChecked
     * @type boolean
     * @description
     *  [en]Defined the state of the checkbox at first render for uncontrolled inputs.[/en]
     *  [ja][/ja]
     */
    defaultChecked: PropTypes__default["default"].bool,
    /**
     * @name inputId
     * @type string
     * @description
     *  [en]Specify the "id" attribute of the inner `<input>` element. This is useful when using <label for="..."> elements.[/en]
     *  [ja][/ja]
     */
    inputId: PropTypes__default["default"].string
  };

  /**
   * @original ons-col
   * @category grid
   * @description
   * [en]
   * Represents a column in the grid system. Use with `<ons-row>` to layout components.
   * [/en]
   * [ja][/ja]
   * <Row>
   *   <Col width={50}>
    *   <ons-icon icon="fa-twitter"></ons-icon>
   *   </Col>
   *   <Col>Text</Col>
   * </Row>
   */
  const Col = onsCustomElement('ons-col');
  Col.propTypes = {
    /**
    * @name verticalAlign
    * @type {String}
    * @description
    *   [en]Short hand attribute for aligning vertically. Valid values are top, bottom, and center.[/en]
    *   [ja][/ja]
    */
    verticalAlign: PropTypes__default["default"].oneOf(['top', 'bottom', 'center']),
    /**
    * @name width
    * @type {String}
    * @description
    *   [en]The width of the column. Valid values are css width values ("10%", 50).[/en]
    *   [ja][/ja]
    */
    width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string])
  };

  const deprecated$7 = {
    onCancel: 'onDialogCancel',
    isOpen: 'visible',
    isDisabled: 'disabled',
    isCancelable: 'cancelable'
  };
  const notAttributes$a = ['onDeviceBackButton'];

  /**
   * @original ons-dialog
   * @category dialog
   * @tutorial react/Reference/dialog
   * @description
   * [en]  Dialog that is displayed on top of current screen. As opposed to the AlertDialog element, this component can contain any kind of content.  The dialog is useful for displaying menus, additional information or to ask the user to make a decision.  It will automatically be displayed as Material Design when running on an Android device.
   [/en]
   * [ja][/ja]
   * @example
     <Dialog onCancel={this.onCancel}
       isOpen={this.props.isOpen}
       style={{height: 250}}  cancelable>
       <Page>
         Page Content
       </Page>
      </Dialog>

   */
  const Dialog = onsCustomElement(baseDialog('ons-dialog'), {
    deprecated: deprecated$7,
    notAttributes: notAttributes$a
  });
  Dialog.propTypes = {
    /**
     * @name visible
     * @type bool
     * @description
     *  [en]
     *  Indicates whether the dialog is open and shown.
     *  [/en]
     *  [ja][/ja]
     */
    visible: PropTypes__default["default"].bool,
    /**
     * @name disabled
     * @type bool
     * @required false
     * @description
     *  [en]
     *  Specifies whether the dialog is disabled.
     *  [/en]
     *  [ja][/ja]
     */
    disabled: PropTypes__default["default"].bool,
    /**
     * @name cancelable
     * @type bool
     * @required false
     * @description
     *  [en]
     *  Specifies whether the dialog is cancelable or not.
     *  A cancelable dialog will call `onDialogCancel` when tapping the background or pressing the back button on Android devices.
     *  [/en]
     *  [ja][/ja]
     */
    cancelable: PropTypes__default["default"].bool,
    /**
     * @name onDialogCancel
     * @type function
     * @required false
     * @description
     *  [en]
     *  Called only if `cancelable` is true. It will be called after tapping the background or by pressing the back button on Android devices.
     *  [/en]
     *  [ja][/ja]
     */
    onDialogCancel: PropTypes__default["default"].func,
    /**
     * @name onCancel
     * @type function
     * @required false
     * @description
     *  [en]
     *  DEPRECATED! Use `onDialogCancel` instead.
     *  [/en]
     *  [ja][/ja]
     */
    onCancel: PropTypes__default["default"].func,
    /**
     * @name isOpen
     * @type bool
     * @description
     *  [en]
     *  DEPRECATED! Use `visible` instead.
     *  [/en]
     *  [ja][/ja]
     */
    isOpen: PropTypes__default["default"].bool,
    /**
     * @name isCancelable
     * @type bool
     * @required false
     * @description
     *  [en]
     *  DEPRECATED! Use `cancelable` instead.
     *  [/en]
     *  [ja][/ja]
     */
    isCancelable: PropTypes__default["default"].bool,
    /**
     * @name isDisabled
     * @type bool
     * @required false
     * @description
     *  [en]
     *  DEPRECATED! Use `disabled` instead.
     *  [/en]
     *  [ja][/ja]
     */
    isDisabled: PropTypes__default["default"].bool,
    /**
     * @name animation
     * @type string
     * @required false
     * @description
     *  [en]
     *  The animation used when showing and hiding the dialog. Can be either `"none"` or `"default"`.
     *  [/en]
     *  [ja][/ja]
     */
    animation: PropTypes__default["default"].string,
    /**
     * @name modifier
     * @type string
     * @required false
     * @description
     *  [en]The appearance of the dialog.[/en]
     *  [ja][/ja]
     */
    modifier: PropTypes__default["default"].string,
    /**
     * @name maskColor
     * @type string
     * @required false
     * @description
     *  [en]Color of the background mask. Default is "rgba(0, 0, 0, 0.2)"[/en]
     *  [ja][/ja]
     */
    maskColor: PropTypes__default["default"].string,
    /**
     * @name animationOptions
     * @type object
     * @required false
     * @description
     *  [en]Specify the animation's duration, delay and timing. E.g.  `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en]
     *  [ja][/ja]
     */
    animationOptions: PropTypes__default["default"].object,
    /**
     * @name onPreShow
     * @type function
     * @required false
     * @description
     *  [en]
     *  Called just before the alert dialog is displayed.
     *  [/en]
     *  [ja][/ja]
     */
    onPreShow: PropTypes__default["default"].func,
    /**
     * @name onPostShow
     * @type function
     * @required false
     * @description
     *  [en]
     *  Called just after the alert dialog is displayed.
     *  [/en]
     *  [ja][/ja]
     */
    onPostShow: PropTypes__default["default"].func,
    /**
     * @name onPreHide
     * @type function
     * @required false
     * @description
     *  [en]Called just before the alert dialog is hidden.[/en]
     *  [ja][/ja]
     */
    onPreHide: PropTypes__default["default"].func,
    /**
     * @name onPostHide
     * @type function
     * @required false
     * @description
     *  [en]Called just after the alert dialog is hidden.[/en]
     *  [ja][/ja]
     */
    onPostHide: PropTypes__default["default"].func,
    /**
     * @name onDeviceBackButton
     * @type function
     * @required false
     * @description
     *  [en]
     *  Custom handler for device back button.
     *  [/en]
     *  [ja][/ja]
     */
    onDeviceBackButton: PropTypes__default["default"].func
  };

  /**
   * @original ons-fab
   * @category form
   * @tutorial react/Reference/fab
   * @description
   * [en] The Floating action button is a circular button defined in the [Material Design specification](https://www.google.com/design/spec/components/buttons-floating-action-button.html). They are often used to promote the primary action of the app.
   *     It can be displayed either as an inline element or in one of the corners. Normally it will be positioned in the lower right corner of the screen.
   [/en]
   * [ja][/ja]
   * @example
   * <SpeedDial disabled={false} direction='right' onClick={() => console.log('test1')} position='left bottom'>
       <Fab>
         <Icon icon='fa-twitter' size={26} fixedWidth={false} style={{verticalAlign: 'middle'}} />
       </Fab>
       <SpeedDialItem onClick={() => console.log('speed A')}> A </SpeedDialItem>
       <SpeedDialItem onClick={() => console.log('speed B')}> B </SpeedDialItem>
       <SpeedDialItem onClick={() => console.log('speed C')}> C </SpeedDialItem>
       <SpeedDialItem onClick={() => console.log('speed D')}> D </SpeedDialItem>
     </SpeedDial>
    */
  const Fab = onsCustomElement('ons-fab');
  Fab.propTypes = {
    /**
     * @name modifier
     * @type string
     * @required false
     * @description
     *  [en]The appearance of the button.[/en]
     *  [ja][/ja]
     */
    modifier: PropTypes__default["default"].string,
    /**
     * @name ripple
     * @type bool
     * @description
     *  [en]If true,  the button will have a ripple effect when tapped.[/en]
     *  [ja][/ja]
     */
    ripple: PropTypes__default["default"].bool,
    /**
     * @name position
     * @type string
     * @required false
     * @description
     *  [en]The position of the button. Should be a string like `"bottom right"` or `"top left"`. If this attribute is not defined it will be displayed as an inline element.[/en]
     *  [ja][/ja]
     */
    position: PropTypes__default["default"].string,
    /**
     * @name disabled
     * @type bool
     * @description
     *  [en] If true, the button will be disabled. [/en]
     *  [ja][/ja]
     */
    disabled: PropTypes__default["default"].bool,
    /**
     * @name onClick
     * @type function
     * @description
     *  [en] This function will be called ones the button is clicked. [/en]
     *  [ja][/ja]
     */
    onClick: PropTypes__default["default"].func
  };

  const propTypes$3 = {
    /**
     * @name onDrag
     * @type function
     * @description
     *  [en]Called when the user drags in any direction.[/en]
     *  [ja][/ja]
     */
    onDrag: PropTypes__default["default"].func,
    /**
     * @name onDragLeft
     * @type function
     * @description
     *  [en]Called when the user drags left.[/en]
     *  [ja][/ja]
     */
    onDragLeft: PropTypes__default["default"].func,
    /**
     * @name onDragRight
     * @type function
     * @description
     *  [en]Called when the user drags right.[/en]
     *  [ja][/ja]
     */
    onDragRight: PropTypes__default["default"].func,
    /**
     * @name onDragUp
     * @type function
     * @description
     *  [en]Called when the user drags up.[/en]
     *  [ja][/ja]
     */
    onDragUp: PropTypes__default["default"].func,
    /**
     * @name onDragDown
     * @type function
     * @description
     *  [en]Called when the user drags down.[/en]
     *  [ja][/ja]
     */
    onDragDown: PropTypes__default["default"].func,
    /**
     * @name onHold
     * @type function
     * @description
     *  [en]Called when the user holds.[/en]
     *  [ja][/ja]
     */
    onHold: PropTypes__default["default"].func,
    /**
     * @name onRelease
     * @type function
     * @description
     *  [en]Called when the user releases.[/en]
     *  [ja][/ja]
     */
    onRelease: PropTypes__default["default"].func,
    /**
     * @name onSwipe
     * @type function
     * @description
     *  [en]Called when the user swipes in any direction.[/en]
     *  [ja][/ja]