react-ui-components-superflows/dist/index.js

UI kit for the Superflows design language

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var reactBootstrap = require('react-bootstrap');
var Icons = require('react-bootstrap-icons');

var ButtonNext = function ButtonNext(props) {
  var _useState = React.useState(true);

  var _useState2 = React.useState('#aaa'),
      backgroundColor = _useState2[0],
      setBackgroundColor = _useState2[1];

  var _useState3 = React.useState('#aaa'),
      color = _useState3[0],
      setColor = _useState3[1];

  var Icon = Icons[props.icon];

  var resetColors = function resetColors() {
    setBackgroundColor(props.custom != null ? props.custom.backgroundColor != null ? props.custom.backgroundColor : 'black' : 'black');
    setColor(props.custom != null ? props.custom.color != null ? props.custom.color : 'white' : 'white');
  };

  var invertColors = function invertColors() {
    setColor(props.custom != null ? props.custom.backgroundColor != null ? props.custom.backgroundColor : 'black' : 'black');
    setBackgroundColor(props.custom != null ? props.custom.color != null ? props.custom.color : 'white' : 'white');
  };

  React.useEffect(function () {
    resetColors();
  }, []);

  var _onTouchStart = function onTouchStart(value) {
    if (value) {
      invertColors();
    } else {
      setTimeout(function () {
        resetColors();
      }, 300);
    }
  };

  return /*#__PURE__*/React__default.createElement(reactBootstrap.Container, {
    className: "w-100"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Row, {
    className: "justify-content-end"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Col, {
    className: "p-0"
  }), /*#__PURE__*/React__default.createElement(reactBootstrap.Col, {
    className: "col-auto p-0"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Button, {
    onClick: function onClick(event) {
      if (props.onClick != null) props.onClick(event);
    },
    className: "btn btn-primary ml-auto align-self-end fw-bolder border-0",
    style: {
      backgroundColor: backgroundColor,
      color: color
    },
    onTouchStart: function onTouchStart() {
      _onTouchStart(true);
    },
    onMouseDown: function onMouseDown() {
      _onTouchStart(true);
    },
    onTouchEnd: function onTouchEnd() {
      _onTouchStart(false);
    },
    onMouseUp: function onMouseUp() {
      _onTouchStart(false);
    },
    disabled: props.disabled != null ? props.disabled : false
  }, props.caption ? props.caption : 'Next', " \xA0 ", props.icon != null ? /*#__PURE__*/React__default.createElement(Icon, null) : /*#__PURE__*/React__default.createElement(Icons.ArrowRightCircle, null)))));
};

var VSpace = function VSpace() {
  return /*#__PURE__*/React__default.createElement(reactBootstrap.Container, {
    className: "pt-4"
  });
};

var AlertError = function AlertError(props) {
  return /*#__PURE__*/React__default.createElement("div", null, props.caption != '' && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(VSpace, null), /*#__PURE__*/React__default.createElement(reactBootstrap.Container, {
    className: "w-100"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Row, {
    className: "justify-content-end"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Col, {
    sm: 12,
    xs: 12,
    md: 12,
    xxl: 12,
    className: "d-flex p-0"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Alert, {
    variant: "danger w-100 m-0",
    style: {
      backgroundColor: props.custom != null ? props.custom.backgroundColor != null ? props.custom.backgroundColor : 'auto' : 'auto',
      color: props.custom != null ? props.custom.color != null ? props.custom.color : 'auto' : 'auto',
      borderColor: props.custom != null ? props.custom.borderColor != null ? props.custom.borderColor : 'auto' : 'auto'
    }
  }, props.caption))))));
};

var InputEmail = function InputEmail(props) {
  var _useState = React.useState('border-secondary'),
      borderColor = _useState[0],
      setBorderColor = _useState[1];

  var refInput = React.useRef(null);
  React.useEffect(function () {
    if (props.autofocus != null) {
      if (props.autofocus) onClick();
    }
  }, []);

  var onClick = function onClick() {
    refInput.current.focus();
  };

  var onKeyUp = function onKeyUp(event) {
    if (validate(event.target.value)) {
      setBorderColor('border-success');
      if (props.setValue != null) props.setValue(event.target.value);
      if (event.key == "Enter" && props.onEnterPressed != null) props.onEnterPressed();
    } else {
      setBorderColor('border-danger');
      if (props.setValue != null) props.setValue('');
    }
  };

  var validate = function validate(value) {
    return value.match(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
  };

  return /*#__PURE__*/React__default.createElement(reactBootstrap.Container, {
    className: "w-100"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Row, {
    className: "justify-content-center"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Col, {
    onClick: onClick,
    sm: 12,
    xs: 12,
    md: 12,
    xxl: 12,
    className: "d-flex border rounded-3 bg-white align-items-center p-2 text-secondary " + borderColor
  }, /*#__PURE__*/React__default.createElement(Icons.Envelope, {
    className: "me-3 ms-2"
  }), /*#__PURE__*/React__default.createElement("div", {
    className: "me-3"
  }, "Email"), /*#__PURE__*/React__default.createElement("input", {
    ref: refInput,
    type: "email",
    className: "flex-grow-1 border-0 border-start ps-3",
    onKeyUp: onKeyUp
  }))));
};

var LogoMast = function LogoMast(props) {
  return /*#__PURE__*/React__default.createElement(reactBootstrap.Container, null, /*#__PURE__*/React__default.createElement(reactBootstrap.Row, {
    className: "justify-content-center"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Col, {
    sm: 6,
    xs: 6,
    md: 6,
    xxl: 6
  }, /*#__PURE__*/React__default.createElement("img", {
    className: "w-100 rounded-circle shadow-sm",
    src: props.imageUrl,
    alt: props.imageAlt
  }))));
};

var InputOtp = function InputOtp(props) {
  var _useState = React.useState('border-secondary'),
      borderColor = _useState[0],
      setBorderColor = _useState[1];

  var refInput = React.useRef(null);
  React.useEffect(function () {
    if (props.autofocus != null) {
      if (props.autofocus) onClick();
    }
  }, []);

  var onClick = function onClick() {
    refInput.current.focus();
  };

  var onKeyUp = function onKeyUp(event) {
    if (validate(event.target.value)) {
      setBorderColor('border-success');
      if (props.setValue != null) props.setValue(event.target.value);
      if (event.key == "Enter" && props.onEnterPressed != null) props.onEnterPressed();
    } else {
      setBorderColor('border-danger');
      if (props.setValue != null) props.setValue('');
    }
  };

  var validate = function validate(value) {
    return value.match(/[0-9]*/) && !isNaN(value) && value.length === 4;
  };

  return /*#__PURE__*/React__default.createElement(reactBootstrap.Container, {
    className: "w-100"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Row, {
    className: "justify-content-center"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Col, {
    onClick: onClick,
    sm: 12,
    xs: 12,
    md: 12,
    xxl: 12,
    className: "d-flex border rounded-3 bg-white align-items-center p-2 text-secondary " + borderColor
  }, /*#__PURE__*/React__default.createElement(Icons.Lock, {
    className: "me-3 ms-2"
  }), /*#__PURE__*/React__default.createElement("div", {
    className: "me-3"
  }, "OTP"), /*#__PURE__*/React__default.createElement("input", {
    ref: refInput,
    type: "password",
    className: "flex-grow-1 border-0 border-start ps-3",
    onKeyUp: onKeyUp
  }))));
};

var ButtonTimer = function ButtonTimer(props) {
  var _useState = React.useState(props.timer),
      timer = _useState[0],
      setTimer = _useState[1];

  var _useState2 = React.useState(true),
      disabled = _useState2[0],
      setDisabled = _useState2[1];

  var _useState3 = React.useState('#aaa'),
      backgroundColor = _useState3[0],
      setBackgroundColor = _useState3[1];

  var _useState4 = React.useState('#aaa'),
      color = _useState4[0],
      setColor = _useState4[1];

  var resetColors = function resetColors() {
    setBackgroundColor(props.custom != null ? props.custom.backgroundColor != null ? props.custom.backgroundColor : 'transparent' : 'transparent');
    setColor(props.custom != null ? props.custom.color != null ? props.custom.color : 'black' : 'black');
  };

  var invertColors = function invertColors() {
    setColor(props.custom != null ? props.custom.backgroundColor != null ? props.custom.backgroundColor : 'transparent' : 'transparent');
    setBackgroundColor(props.custom != null ? props.custom.color != null ? props.custom.color : 'black' : 'black');
  };

  React.useEffect(function () {
    resetColors();
  }, []);
  React.useEffect(function () {
    if (timer > 0) {
      setDisabled(true);
      setTimeout(function () {
        setTimer(timer - 1);
      }, 1000);
    } else {
      setDisabled(false);
    }
  }, [timer]);

  var _onTouchStart = function onTouchStart(value) {
    if (value) {
      invertColors();
    } else {
      setTimeout(function () {
        resetColors();
      }, 300);
    }
  };

  return /*#__PURE__*/React__default.createElement(reactBootstrap.Container, {
    className: "w-100"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Row, {
    className: "justify-content-end"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Col, {
    className: "p-0"
  }), /*#__PURE__*/React__default.createElement(reactBootstrap.Col, {
    className: "col-auto p-0"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Button, {
    variant: "btn-link",
    className: "btn btn-link ml-auto align-self-end fw-bolder border-0",
    style: {
      backgroundColor: backgroundColor,
      color: color
    },
    onTouchStart: function onTouchStart() {
      _onTouchStart(true);
    },
    onMouseDown: function onMouseDown() {
      _onTouchStart(true);
    },
    onTouchEnd: function onTouchEnd() {
      _onTouchStart(false);
    },
    onMouseUp: function onMouseUp() {
      _onTouchStart(false);
    },
    disabled: disabled,
    onClick: function onClick(event) {
      setTimer(props.timer);
      props.onClick(event);
    }
  }, timer > 0 ? props.captionBefore : props.captionAfter, " ", timer > 0 ? timer + "s" : ""))));
};

var AlertSuccess = function AlertSuccess(props) {
  return /*#__PURE__*/React__default.createElement("div", null, props.caption != '' && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(VSpace, null), /*#__PURE__*/React__default.createElement(reactBootstrap.Container, {
    className: "w-100"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Row, {
    className: "justify-content-end"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Col, {
    sm: 12,
    xs: 12,
    md: 12,
    xxl: 12,
    className: "d-flex p-0"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Alert, {
    variant: "success w-100 m-0",
    style: {
      backgroundColor: props.custom != null ? props.custom.backgroundColor != null ? props.custom.backgroundColor : 'auto' : 'auto',
      color: props.custom != null ? props.custom.color != null ? props.custom.color : 'auto' : 'auto',
      borderColor: props.custom != null ? props.custom.borderColor != null ? props.custom.borderColor : 'auto' : 'auto'
    }
  }, props.caption))))));
};

var InfoBlock = function InfoBlock(props) {
  return /*#__PURE__*/React__default.createElement("div", null, props.caption != '' && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(VSpace, null), /*#__PURE__*/React__default.createElement(reactBootstrap.Container, {
    className: "w-100"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Row, {
    className: "justify-content-end"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Col, {
    sm: 12,
    xs: 12,
    md: 12,
    xxl: 12,
    className: "d-flex p-0"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Alert, {
    variant: "secondary w-100 m-0",
    style: {
      backgroundColor: props.custom != null ? props.custom.backgroundColor != null ? props.custom.backgroundColor : 'auto' : 'auto',
      color: props.custom != null ? props.custom.color != null ? props.custom.color : 'auto' : 'auto',
      borderColor: props.custom != null ? props.custom.borderColor != null ? props.custom.borderColor : 'auto' : 'auto'
    }
  }, /*#__PURE__*/React__default.createElement(Icons.PinAngle, null), " \xA0 ", props.caption))))));
};

var Footnote = function Footnote(props) {
  return /*#__PURE__*/React__default.createElement("div", null, props.caption != '' && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(reactBootstrap.Container, {
    className: "w-100"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Row, {
    className: "justify-content-center"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Col, {
    sm: 12,
    xs: 12,
    md: 12,
    xxl: 12,
    className: "d-flex p-0 justify-content-center",
    style: {
      color: props.custom != null ? props.custom.color != null ? props.custom.color : 'gray' : 'gray'
    }
  }, /*#__PURE__*/React__default.createElement("div", null, props.caption))))));
};

var InputName = function InputName(props) {
  var _useState = React.useState('border-secondary'),
      borderColor = _useState[0],
      setBorderColor = _useState[1];

  var refInput = React.useRef(null);
  React.useEffect(function () {
    if (props.autofocus != null) {
      if (props.autofocus) onClick();
    }
  }, []);

  var onClick = function onClick() {
    refInput.current.focus();
  };

  var onKeyUp = function onKeyUp(event) {
    if (validate(event.target.value)) {
      setBorderColor('border-success');
      if (props.setValue != null) props.setValue(event.target.value);
      if (event.key == "Enter" && props.onEnterPressed != null) props.onEnterPressed();
    } else {
      setBorderColor('border-danger');
      if (props.setValue != null) props.setValue('');
    }
  };

  var validate = function validate(value) {
    return value.match(/^([ \u00c0-\u01ffa-zA-Z'\-])+$/);
  };

  return /*#__PURE__*/React__default.createElement(reactBootstrap.Container, {
    className: "w-100"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Row, {
    className: "justify-content-center"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Col, {
    onClick: onClick,
    sm: 12,
    xs: 12,
    md: 12,
    xxl: 12,
    className: "d-flex border rounded-3 bg-white align-items-center p-2 text-secondary " + borderColor
  }, /*#__PURE__*/React__default.createElement(Icons.CardHeading, {
    className: "me-3 ms-2"
  }), /*#__PURE__*/React__default.createElement("div", {
    className: "me-3"
  }, props.caption != null ? props.caption : 'Name'), /*#__PURE__*/React__default.createElement("input", {
    ref: refInput,
    type: "text",
    className: "flex-grow-1 border-0 border-start ps-3",
    onKeyUp: onKeyUp
  }))));
};

var InputSearch = function InputSearch(props) {
  var _useState = React.useState('border-secondary'),
      borderColor = _useState[0],
      setBorderColor = _useState[1];

  var refInput = React.useRef(null);
  React.useEffect(function () {
    if (props.autofocus != null) {
      if (props.autofocus) onClick();
    }
  }, []);

  var onClick = function onClick() {
    refInput.current.focus();
  };

  var onKeyUp = function onKeyUp(event) {
    if (validate(event.target.value)) {
      setBorderColor('border-success');
      if (props.setValue != null) props.setValue(event.target.value);
      if (event.key == "Enter" && props.onEnterPressed != null) props.onEnterPressed();
    } else {
      setBorderColor('border-danger');
      if (props.setValue != null) props.setValue('');
    }
  };

  var validate = function validate(value) {
    return value.match(/^([ \u00c0-\u01ffa-zA-Z'\-])+$/);
  };

  return /*#__PURE__*/React__default.createElement(reactBootstrap.Container, {
    className: "w-100"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Row, {
    className: "justify-content-center"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Col, {
    onClick: onClick,
    sm: 12,
    xs: 12,
    md: 12,
    xxl: 12,
    className: "d-flex border rounded-3 bg-white align-items-center p-2 text-secondary " + borderColor
  }, /*#__PURE__*/React__default.createElement(Icons.Search, {
    className: "me-3 ms-2"
  }), /*#__PURE__*/React__default.createElement("div", {
    className: "me-3"
  }, props.caption != null ? props.caption : 'Search'), /*#__PURE__*/React__default.createElement("input", {
    ref: refInput,
    type: "text",
    className: "flex-grow-1 border-0 border-start ps-3",
    onKeyUp: onKeyUp
  }))));
};

var InputDob = function InputDob(props) {
  var _useState = React.useState('border-secondary'),
      borderColor = _useState[0],
      setBorderColor = _useState[1];

  var _useState2 = React.useState(''),
      dd = _useState2[0],
      setDD = _useState2[1];

  var _useState3 = React.useState(''),
      mm = _useState3[0],
      setMM = _useState3[1];

  var _useState4 = React.useState(''),
      yyyy = _useState4[0],
      setYYYY = _useState4[1];

  var _useState5 = React.useState(''),
      lastKey = _useState5[0],
      setLastKey = _useState5[1];

  var refInputDD = React.useRef(null);
  var refInputMM = React.useRef(null);
  var refInputYYYY = React.useRef(null);
  React.useEffect(function () {
  }, []);

  var onClick = function onClick() {};

  React.useEffect(function () {
    onKeyUp();
  }, [dd, mm, yyyy]);

  var onKeyUpDD = function onKeyUpDD(event) {
    setLastKey(event.key);
    setDD(event.target.value + "");
    onKeyUp();
  };

  var onKeyUpMM = function onKeyUpMM(event) {
    setLastKey(event.key);
    setMM(event.target.value + "");
    onKeyUp();
  };

  var onKeyUpYYYY = function onKeyUpYYYY(event) {
    setLastKey(event.key);
    setYYYY(event.target.value + "");
    onKeyUp();
  };

  var onKeyUp = function onKeyUp() {
    if (validate(dd, mm, yyyy)) {
      setBorderColor('border-success');
      var dateVal = parseInt(Date.parse(Date.parse(yyyy + "-" + mm + "-" + dd)) / 1000);
      if (props.setValue != null) props.setValue(dateVal);
      if (lastKey == "Enter" && props.onEnterPressed != null) props.onEnterPressed();
    } else {
      if (dd == "" && mm == "" && yyyy == "") ; else {
        setBorderColor('border-danger');
      }

      if (props.setValue != null) props.setValue('');
    }
  };

  var validate = function validate(dd, mm, yyyy) {
    if (dd == "" || mm == "" || yyyy == "" || parseInt(dd) <= 0 || parseInt(dd) > 31 || parseInt(mm) < 0 || parseInt(mm) > 12 || parseInt(yyyy) < 1900 || parseInt(yyyy) > 3000) {
      return false;
    } else {
      if (mm == "2") {
        if (parseInt(mm) % 4 === 0 && parseInt(dd) > 29 || parseInt(mm) % 4 > 0 && parseInt(dd) > 28) {
          return false;
        } else {
          return true;
        }
      } else if (mm == "4" || mm == "6" || mm == "9" || mm == "11") {
        if (parseInt(dd) > 30) {
          return false;
        } else {
          return true;
        }
      }

      return true;
    }
  };

  return /*#__PURE__*/React__default.createElement(reactBootstrap.Container, {
    className: "w-100"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Row, {
    className: "justify-content-center"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Col, {
    onClick: onClick,
    sm: 12,
    xs: 12,
    md: 12,
    xxl: 12,
    className: "d-flex border rounded-3 bg-white align-items-center p-2 text-secondary " + borderColor
  }, /*#__PURE__*/React__default.createElement(Icons.CalendarEvent, {
    className: "me-3 ms-2"
  }), /*#__PURE__*/React__default.createElement("div", {
    className: "me-3"
  }, props.caption != null ? props.caption : 'Date of Birth'), /*#__PURE__*/React__default.createElement("input", {
    ref: refInputDD,
    type: "number",
    placeholder: "DD",
    className: "flex-grow-1 border-0 border-start text-center",
    onKeyUp: onKeyUpDD,
    style: {
      width: '50px'
    }
  }), /*#__PURE__*/React__default.createElement("input", {
    ref: refInputMM,
    type: "number",
    placeholder: "MM",
    className: "flex-grow-1 border-0 border-start text-center",
    onKeyUp: onKeyUpMM,
    style: {
      width: '50px'
    }
  }), /*#__PURE__*/React__default.createElement("input", {
    ref: refInputYYYY,
    type: "number",
    placeholder: "YYYY",
    className: "flex-grow-1 border-0 border-start text-center",
    onKeyUp: onKeyUpYYYY,
    style: {
      width: '100px'
    }
  }))));
};

var InputGender = function InputGender(props) {
  var _useState = React.useState('border-secondary'),
      borderColor = _useState[0];

  var _useState2 = React.useState(props.selectedValue),
      value = _useState2[0],
      setValue = _useState2[1];

  function _onClick(value) {
    setValue(value);
    if (props.onChange != null) props.onChange(value);
  }

  return /*#__PURE__*/React__default.createElement(reactBootstrap.Container, {
    className: "w-100"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Row, {
    className: "justify-content-center"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Col, {
    sm: 12,
    xs: 12,
    md: 12,
    xxl: 12,
    className: "d-flex border rounded-3 bg-white align-items-center p-2 text-secondary " + borderColor
  }, /*#__PURE__*/React__default.createElement(Icons.GenderAmbiguous, {
    className: "me-3 ms-2"
  }), /*#__PURE__*/React__default.createElement("div", {
    className: "pe-3 border-end"
  }, props.caption != null ? props.caption : 'Gender'), /*#__PURE__*/React__default.createElement("div", {
    className: "d-flex flex-grow-1 border-0 justify-content-end align-items-center"
  }, /*#__PURE__*/React__default.createElement("div", {
    onClick: function onClick() {
      _onClick(0);
    },
    className: "px-2 py-1 border rounded me-2",
    style: {
      fontSize: '90%',
      cursor: 'pointer',
      backgroundColor: value === 0 ? 'gray' : 'transparent',
      color: value === 0 ? 'white' : 'gray'
    }
  }, "Female"), /*#__PURE__*/React__default.createElement("div", {
    onClick: function onClick() {
      _onClick(1);
    },
    className: "px-2 py-1 border rounded me-2",
    style: {
      fontSize: '90%',
      cursor: 'pointer',
      backgroundColor: value === 1 ? 'gray' : 'transparent',
      color: value === 1 ? 'white' : 'gray'
    }
  }, "Male"), /*#__PURE__*/React__default.createElement("div", {
    onClick: function onClick() {
      _onClick(2);
    },
    className: "px-2 py-1 border rounded",
    style: {
      fontSize: '90%',
      cursor: 'pointer',
      backgroundColor: value === 2 ? 'gray' : 'transparent',
      color: value === 2 ? 'white' : 'gray'
    }
  }, "Other")))));
};

var ButtonCancel = function ButtonCancel(props) {
  var _useState = React.useState(true);

  var _useState2 = React.useState('#aaa'),
      backgroundColor = _useState2[0],
      setBackgroundColor = _useState2[1];

  var _useState3 = React.useState('#aaa'),
      color = _useState3[0],
      setColor = _useState3[1];

  var Icon = Icons[props.icon];

  var resetColors = function resetColors() {
    setBackgroundColor(props.custom != null ? props.custom.backgroundColor != null ? props.custom.backgroundColor : '#eeeeee' : '#eeeeee');
    setColor(props.custom != null ? props.custom.color != null ? props.custom.color : 'black' : 'black');
  };

  var invertColors = function invertColors() {
    setColor(props.custom != null ? props.custom.backgroundColor != null ? props.custom.backgroundColor : 'white' : 'white');
    setBackgroundColor(props.custom != null ? props.custom.color != null ? props.custom.color : 'black' : 'black');
  };

  React.useEffect(function () {
    resetColors();
  }, []);

  var _onTouchStart = function onTouchStart(value) {
    if (value) {
      invertColors();
    } else {
      setTimeout(function () {
        resetColors();
      }, 300);
    }
  };

  return /*#__PURE__*/React__default.createElement(reactBootstrap.Container, {
    className: "w-100"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Row, {
    className: "justify-content-end"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Col, {
    className: "p-0"
  }), /*#__PURE__*/React__default.createElement(reactBootstrap.Col, {
    className: "col-auto p-0"
  }, /*#__PURE__*/React__default.createElement(reactBootstrap.Button, {
    onClick: function onClick(event) {
      if (props.onClick != null) props.onClick(event);
    },
    className: "btn btn-primary ml-auto align-self-end fw-bolder border-0",
    style: {
      backgroundColor: backgroundColor,
      color: color
    },
    onTouchStart: function onTouchStart() {
      _onTouchStart(true);
    },
    onMouseDown: function onMouseDown() {
      _onTouchStart(true);
    },
    onTouchEnd: function onTouchEnd() {
      _onTouchStart(false);
    },
    onMouseUp: function onMouseUp() {
      _onTouchStart(false);
    },
    disabled: props.disabled != null ? props.disabled : false
  }, props.caption ? props.caption : 'Cancel', " \xA0 ", props.icon != null ? /*#__PURE__*/React__default.createElement(Icon, null) : /*#__PURE__*/React__default.createElement(Icons.XCircle, null)))));
};

var ButtonNeutral = function ButtonNeutral(props) {
  var _useState = React.useState(true);

  var _useState2 = React.useState('#aaa'),
      backgroundColor = _useState2[0],
      setBackgroundColor = _useState2[1];

  var _useState3 = React.useState('#aaa'),
      color = _useState3[0],
      setColor = _useState3[1];

  var Icon = Icons[props.icon];

  var resetColors = function resetColors() {
    setBackgroundColor(props.custom != null ? props.custom.backgroundColor != null ? props.custom.backgroundColor : '#eeeeee' : '#eeeeee');
    setColor(props.custom != null ? props.custom.color != null ? props.custom.color : 'black' : 'black');
  };

  var invertColors = function invertColors() {
    setColor(props.custom != null ? props.custom.backgroundColor != null ? props.custom.backgroundColor : 'white' : 'white');
    setBackgroundColor(props.custom != null ? props.custom.color != null ? props.custom.color : 'black' : 'black');
  };

  React.useEffect(function () {
    resetColors();
  }, []);

  var _onTouchStart = function onTouchStart(value) {
    if (value) {
      invertColors();
    } else {
      setTimeout(function () {
        resetColors();
      }, 300);
    }
  };

  return /*#__PURE__*/React__default.createElement(reactBootstrap.Button, {
    onClick: function onClick(event) {
      if (props.onClick != null) props.onClick(event);
    },
    className: "btn btn-primary ml-auto align-self-end fw-bolder border-0",
    style: {
      backgroundColor: backgroundColor,
      color: color
    },
    onTouchStart: function onTouchStart() {
      _onTouchStart(true);
    },
    onMouseDown: function onMouseDown() {
      _onTouchStart(true);
    },
    onTouchEnd: function onTouchEnd() {
      _onTouchStart(false);
    },
    onMouseUp: function onMouseUp() {
      _onTouchStart(false);
    },
    disabled: props.disabled != null ? props.disabled : false
  }, props.caption ? props.caption : 'Cancel', " \xA0 ", props.icon != null ? /*#__PURE__*/React__default.createElement(Icon, null) : /*#__PURE__*/React__default.createElement(Icons.XCircle, null));
};

exports.AlertError = AlertError;
exports.AlertSuccess = AlertSuccess;
exports.ButtonCancel = ButtonCancel;
exports.ButtonNeutral = ButtonNeutral;
exports.ButtonNext = ButtonNext;
exports.ButtonTimer = ButtonTimer;
exports.Footnote = Footnote;
exports.InfoBlock = InfoBlock;
exports.InputDob = InputDob;
exports.InputEmail = InputEmail;
exports.InputGender = InputGender;
exports.InputName = InputName;
exports.InputOtp = InputOtp;
exports.InputSearch = InputSearch;
exports.LogoMast = LogoMast;
exports.VSpace = VSpace;
//# sourceMappingURL=index.js.map