'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

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

var clsx = _interopDefault(require('clsx'));
var React = require('react');
var React__default = _interopDefault(React);
var reactJss = require('react-jss');

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);
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

var AnimatedPageStyles = {
  animationPageWrapper: {
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'column',
    background: '#E5E5E5',
    position: 'absolute',
    height: '100vh',
    width: '100vw',
    padding: '16px'
  }
};

var ButtonStyles = {
  button: {
    background: '#F6F6F6',
    justifyContent: 'center',
    alignItems: 'center',
    display: 'flex',
    padding: '12px 16px',
    maxWidth: '400px',
    minWidth: '250px',
    width: '100%',
    minHeight: '48px',
    border: 'none',
    borderRadius: '8px',
    cursor: 'pointer'
  },
  buttonDisabled: {
    cursor: 'not-allowed',
    background: '#c5c5d1',
    color: 'white'
  },
  buttonHover: {
    background: '#d17ef'
  }
};

var ChoiceButtonStyles = {
  choiceButton: {
    border: '1px solid #F6F6F6',
    minWidth: '280px',
    width: '100%',
    maxWidth: '560px',
    minHeight: '56px',
    height: 'auto',
    padding: '16px'
  },
  choiceButtonSelected: {
    background: '#4B46EC',
    color: '#F6F6F6'
  },
  choiceButtonActive: {
    boxShadow: 'rgb(145 156 248 / 50%) 0px 0px 0px 0.2rem'
  }
};

var ColoredPageStyles = {
  coloredPageWrapper: {
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'column',
    background: '#4B46EC',
    position: 'absolute',
    height: 'calc(100vh - 52px)',
    width: '100vw',
    padding: '0 16px',
    overflowY: 'scroll'
  },
  coloredPageIcon: {
    margin: '48px 0'
  }
};

var GlobalStyles = {
  'body, p, span': {
    lineHeight: '24px',
    fontSize: '16px',
    color: '#202B47',
    fontFamily: 'SF Pro Text'
  },
  span: {
    color: '#868C99'
  },
  h1: {
    fontWeight: 600,
    fontSize: '20px'
  },
  h2: {
    fontWeight: 400,
    fontSize: '18px',
    letterSpacing: '-0.0024em',
    lineHeight: '24px'
  },
  h3: {
    fontWeight: 400,
    fontSize: '14px'
  }
};

var HeaderStyles = {
  header: {
    background: '#F6F6F6',
    position: 'sticky',
    height: '52px'
  },
  headerAvatar: {
    fontFamily: 'SF Pro Text',
    fontWeight: 600,
    fontStyle: 'normal',
    fontSize: '16px',
    lineHeight: '24px',
    color: '#FE8F20',
    background: '#FFEEDE',
    letterSpacing: '-0.0024em'
  },
  headerEmail: {
    fontStyle: 'normal',
    fontWeight: 600,
    letterSpacing: '0.0008em',
    color: '#121620'
  }
};

var MultiChoiceButtonStyles = {
  multiChoiceButton: /*#__PURE__*/_extends({}, ChoiceButtonStyles.choiceButton, {
    background: '#F6F6F6'
  }),
  multiChoiceButtonCheckboxCheckmark: {
    border: 'none',
    backgroundColor: '#4B46EC',
    borderRadius: '2px',
    borderColor: 'inherit'
  },
  multiChoiceButtonSelected: /*#__PURE__*/_extends({}, ChoiceButtonStyles.choiceButtonSelected, {
    border: '1px solid #4b46ec',
    background: '#f0f0ff',
    color: '#202B47'
  }),
  multiChoiceButtonActive: {
    boxShadow: 'rgb(145 156 248 / 50%) 0px 0px 0px 0.2rem'
  }
};

var NextButtonStyles = {
  nextButton: {
    background: '#FE8F20',
    color: '#FFFFFF',
    margin: '20px 0'
  },
  nextButtonHovered: {
    background: '#FFA449'
  },
  nextButtonFocus: {
    boxShadow: 'rgb(255 164 73 / 50%) 0px 0px 0px 0.2rem',
    background: '#DB7610'
  },
  nextButtonDisabled: {
    cursor: 'not-allowed',
    background: '#121620',
    color: '#c7c7c7'
  }
};

var ProgressBarStyles = {
  wrapperBar: {
    position: HeaderStyles.header.position,
    height: '4px',
    background: '#E0E3EB',
    top: HeaderStyles.header.position === 'sticky' ? HeaderStyles.header.height : '0px'
  },
  progressBar: {
    borderRadius: '0px 8px 8px 0px',
    background: '#FE8F20'
  }
};

var RatingScaleStyles = {
  ratingScaleWrapper: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center'
  },
  ratingScale: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%'
  },
  ratingButton: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    background: '#F6F6F6',
    padding: '16px',
    width: '62px',
    height: '56px',
    border: 'none',
    borderRadius: '8px',
    cursor: 'pointer'
  },
  ratingButtonSelected: {
    background: '#4B46EC',
    color: '#F6F6F6'
  },
  ratingButtonActive: {
    boxShadow: 'rgb(145 156 248 / 50%) 0px 0px 0px 0.2rem'
  },
  ratingGradationInfoWrapper: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: '18px',
    width: '100%',
    margin: '8px 0'
  },
  info: {
    margin: 'unset'
  }
};

var TabsStyles = {
  tabsWrapper: {
    maxWidth: '560px',
    background: '#E0E3EB',
    height: '36px',
    padding: '2px',
    borderRadius: '8px',
    margin: '32px auto',
    display: 'flex'
  },
  tabButton: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    background: '#E0E3EB',
    border: 'none',
    cursor: 'pointer',
    height: '100%',
    padding: 0,
    minWidth: 'auto',
    borderRadius: '8px'
  },
  tabButtonActive: {
    background: '#4B46EC'
  }
};

var VerticalCardStyles = {
  verticalCard: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    height: 'auto',
    maxHeight: '280px',
    minHeight: '236px',
    padding: '20px',
    marginBottom: '24px',
    cursor: 'pointer',
    border: 'none',
    borderRadius: '8px',
    background: '#F6F6F6',
    color: '#202B47'
  },
  verticalCardSelected: {
    background: '#4B46EC',
    color: '#F6F6F6'
  }
};

var defaultTheme = {
  button: ButtonStyles,
  nextButton: NextButtonStyles,
  choiceButton: ChoiceButtonStyles,
  multiChoiceButton: MultiChoiceButtonStyles,
  header: HeaderStyles,
  progressBar: ProgressBarStyles,
  verticalCard: VerticalCardStyles,
  coloredPage: ColoredPageStyles,
  tabs: TabsStyles,
  ratingScale: RatingScaleStyles,
  animatedPage: AnimatedPageStyles,
  globalStyles: GlobalStyles
};
var ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
var theming = /*#__PURE__*/reactJss.createTheming(ThemeContext);

var useStyles = /*#__PURE__*/reactJss.createUseStyles(function (_ref) {
  var button = _ref.button;
  return {
    button: button.button,
    buttonDisabled: button.buttonDisabled
  };
});

var _excluded = ["className", "onClick", "disabled", "children"];
var Button = function Button(_ref) {
  var className = _ref.className,
      onClick = _ref.onClick,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      children = _ref.children,
      props = _objectWithoutPropertiesLoose(_ref, _excluded);

  var _useStyles = useStyles({
    theme: theming.useTheme()
  }),
      button = _useStyles.button,
      buttonDisabled = _useStyles.buttonDisabled;

  return React__default.createElement("button", Object.assign({
    onClick: onClick,
    className: clsx(button, className, disabled && buttonDisabled),
    disabled: disabled
  }, props), children);
};

var useStyles$1 = /*#__PURE__*/reactJss.createUseStyles(function (_ref) {
  var multiChoiceButton = _ref.multiChoiceButton;
  var _multiChoiceButton$mu = multiChoiceButton.multiChoiceButtonCheckboxCheckmark,
      borderRadius = _multiChoiceButton$mu.borderRadius,
      backgroundColor = _multiChoiceButton$mu.backgroundColor;
  return {
    checkboxContainer: {
      position: 'relative',
      width: '24px',
      cursor: 'pointer',
      marginRight: '16px',
      '& input': {
        /*  Hide the browser's default checkbox  */
        position: 'absolute',
        opacity: 0,
        cursor: 'pointer',
        height: 0,
        width: 0,

        /* Show the checkmark when checked */
        '&:checked': {
          '& ~ $checkboxCheckmark': {
            backgroundColor: backgroundColor,
            '&:after': {
              display: 'block'
            }
          }
        }
      },
      '& $checkboxCheckmark': {
        '&:after': {
          left: '9px',
          top: '5px',
          width: '5px',
          height: '10px',
          border: 'solid white',
          borderWidth: '0 2px 2px 0',
          transform: 'rotate(45deg)'
        }
      }
    },
    checkboxCheckmark: {
      position: 'absolute',
      top: '-12px',
      left: 0,
      height: '24px',
      width: '24px',
      border: '1px solid',
      borderRadius: borderRadius,
      borderColor: backgroundColor,
      backgroundColor: '#fff',
      '&:after': {
        content: '""',
        position: 'absolute',
        display: 'none'
      }
    }
  };
});

var Checkbox = function Checkbox(_ref) {
  var className = _ref.className,
      checked = _ref.checked,
      onChange = _ref.onChange;

  var _useStyles = useStyles$1({
    theme: theming.useTheme()
  }),
      checkboxContainer = _useStyles.checkboxContainer,
      checkboxCheckmark = _useStyles.checkboxCheckmark;

  var eventHandler = function eventHandler(e) {
    onChange(e.target.checked);
  };

  return React__default.createElement("label", {
    className: clsx(checkboxContainer, className)
  }, React__default.createElement("input", {
    type: "checkbox",
    checked: checked,
    onChange: eventHandler,
    readOnly: true
  }), React__default.createElement("span", {
    className: checkboxCheckmark
  }));
};

var useStyles$2 = /*#__PURE__*/reactJss.createUseStyles(function (_ref) {
  var choiceButton = _ref.choiceButton;
  return {
    choiceButton: _extends({}, choiceButton.choiceButton, {
      '&:active': _extends({}, choiceButton.choiceButtonActive)
    }),
    choiceButtonSelected: choiceButton.choiceButtonSelected
  };
});

var _excluded$1 = ["selected", "className", "children"];
var ChoiceButton = function ChoiceButton(_ref) {
  var selected = _ref.selected,
      className = _ref.className,
      children = _ref.children,
      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);

  var _useStyles = useStyles$2({
    theme: theming.useTheme()
  }),
      choiceButton = _useStyles.choiceButton,
      choiceButtonSelected = _useStyles.choiceButtonSelected;

  return React__default.createElement(Button, Object.assign({
    className: clsx(choiceButton, className, selected && choiceButtonSelected)
  }, props), children);
};

var useStyles$3 = /*#__PURE__*/reactJss.createUseStyles(function (_ref) {
  var coloredPage = _ref.coloredPage;
  return {
    coloredPageWrapper: _extends({}, coloredPage.coloredPageWrapper, {
      '& img': _extends({}, coloredPage.coloredPageIcon)
    }),
    childrenWrapper: {
      maxWidth: '560px',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between',
      height: '80%'
    }
  };
});

var ColoredPage = function ColoredPage(_ref) {
  var children = _ref.children;

  var _useStyles = useStyles$3({
    theme: theming.useTheme()
  }),
      coloredPageWrapper = _useStyles.coloredPageWrapper,
      childrenWrapper = _useStyles.childrenWrapper;

  return React__default.createElement("div", {
    className: coloredPageWrapper
  }, React__default.createElement("div", {
    className: childrenWrapper
  }, children));
};

var useStyles$4 = /*#__PURE__*/reactJss.createUseStyles({
  floatedButtonWrapper: {
    width: '100%',
    position: 'sticky',
    bottom: 0,
    left: '50%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  gradient: {
    maxWidth: 'inherit',
    background: 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 21.6%)'
  },
  padding: {
    padding: '0 16px 48px'
  }
});

var FloatedWrapper = function FloatedWrapper(_ref) {
  var children = _ref.children,
      floated = _ref.floated,
      withGradient = _ref.withGradient,
      bottomPadding = _ref.bottomPadding,
      className = _ref.className;

  var _useStyles = useStyles$4({
    theme: theming.useTheme()
  }),
      floatedButtonWrapper = _useStyles.floatedButtonWrapper,
      gradient = _useStyles.gradient,
      padding = _useStyles.padding;

  if (!floated) return React__default.createElement(React__default.Fragment, null, children);
  return React__default.createElement("div", {
    className: clsx(floatedButtonWrapper, className, withGradient && gradient, bottomPadding && padding)
  }, children);
};

var img = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM3.99988 4.7074L4.70698 4.00029L7.18201 6.47531L9.65703 4.00029L10.3641 4.7074L7.88911 7.18242L10.3638 9.65714L9.65673 10.3643L7.18201 7.88953L4.70728 10.3643L4.00017 9.65714L6.4749 7.18242L3.99988 4.7074Z' fill='%23C7C7C7'/%3e%3c/svg%3e";

// node modules
var useStyles$5 = /*#__PURE__*/reactJss.createUseStyles(function () {
  return {
    inputWrapper: {
      position: 'relative',
      background: '#F6F6F6',
      borderRadius: '.5rem',
      boxSizing: 'border-box',
      display: 'flex',
      alignItems: 'center',
      height: '56px',
      maxWidth: '560px',
      margin: '0 auto',
      padding: '8px 16px'
    },
    input: {
      border: 'none',
      outline: 'none',
      background: 'none',
      all: 'unset',
      display: 'block',
      width: '100%',
      boxSizing: 'border-box',
      fontSize: '1rem',
      lineHeight: '1.5rem',
      borderRadius: '.5rem',
      caretColor: '#4B46EC'
    },
    closeButton: {
      border: 'none',
      background: 'none',
      marginLeft: 'auto',
      display: 'flex',
      cursor: 'pointer',
      visibility: 'visible'
    },
    hideCloseButton: {
      visibility: 'hidden'
    },
    inputActiveClass: {
      backgroundImage: 'linear-gradient(#4B46EC, #4B46EC)',
      backgroundPosition: 'bottom 0 center',
      backgroundSize: '100% 2px',
      backgroundRepeat: 'no-repeat'
    },
    inputDisabledClass: {
      cursor: 'not-allowed',
      opacity: 0.4
    },
    inputErrorClass: {
      backgroundImage: 'linear-gradient(#FF4D2B, #FF4D2B)',
      backgroundPosition: 'bottom 0 center',
      backgroundSize: '100% 2px',
      backgroundRepeat: 'no-repeat'
    },
    inputLabelClass: {
      margin: '0px',
      top: '5px',
      color: '#868C99',
      position: 'absolute',
      transform: 'translateY(calc(0.75rem - 1px))',
      transition: 'all 0.2s ease 0s',
      pointerEvents: 'none'
    },
    inputLabelActiveClass: {
      top: '8px',
      fontSize: '.75rem',
      transform: 'translateY(0px)',
      fontWeight: 400,
      lineHeight: '1rem',
      position: 'absolute'
    },
    inputLabelErrorClass: {
      color: '#FF4D2B'
    },
    inputStartAdornmentClass: {
      lineHeight: '26px',
      fontWeight: 400,
      fontSize: '18px',
      letterSpacing: '-0.0024em',
      color: '#000',
      margin: '0 0 0 0.75rem'
    }
  };
});

var _excluded$2 = ["value", "type", "disabled", "label", "error", "onFocus", "onChange", "startAdornment", "endAdornment", "onBlur", "inputWrapperClassName", "inputLabelClassName", "isCloseIcon"];
var Input = function Input(_ref) {
  var value = _ref.value,
      _ref$type = _ref.type,
      type = _ref$type === void 0 ? 'text' : _ref$type,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      label = _ref.label,
      error = _ref.error,
      onFocus = _ref.onFocus,
      onChange = _ref.onChange,
      startAdornment = _ref.startAdornment,
      endAdornment = _ref.endAdornment,
      onBlur = _ref.onBlur,
      inputWrapperClassName = _ref.inputWrapperClassName,
      inputLabelClassName = _ref.inputLabelClassName,
      _ref$isCloseIcon = _ref.isCloseIcon,
      isCloseIcon = _ref$isCloseIcon === void 0 ? true : _ref$isCloseIcon,
      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);

  var _useStyles = useStyles$5({
    theme: theming.useTheme()
  }),
      closeButton = _useStyles.closeButton,
      inputWrapper = _useStyles.inputWrapper,
      input = _useStyles.input,
      inputLabelClass = _useStyles.inputLabelClass,
      inputActiveClass = _useStyles.inputActiveClass,
      inputDisabledClass = _useStyles.inputDisabledClass,
      inputErrorClass = _useStyles.inputErrorClass,
      inputLabelActiveClass = _useStyles.inputLabelActiveClass,
      inputLabelErrorClass = _useStyles.inputLabelErrorClass,
      inputStartAdornmentClass = _useStyles.inputStartAdornmentClass,
      hideCloseButton = _useStyles.hideCloseButton;

  var inputEl = React.useRef(null);

  var _useState = React.useState(false),
      activeClass = _useState[0],
      setActiveClass = _useState[1];

  var handleFocus = function handleFocus(e) {
    if (disabled) return;
    setActiveClass(true);

    if (onFocus) {
      onFocus(e);
    }
  };

  var handleChange = function handleChange(event) {
    if (onChange) {
      onChange(event.target.value);
    }
  };

  var handleBlur = function handleBlur(event) {
    setActiveClass(false);

    if (onBlur) {
      onBlur(event);
    }
  };

  var handleClean = function handleClean() {
    if (onChange) {
      onChange('');
    }
  };

  var isEndAdornmentShown = activeClass || error || value;
  return React__default.createElement("div", {
    className: clsx(inputWrapper, inputWrapperClassName, activeClass && inputActiveClass, disabled && inputDisabledClass, error && inputErrorClass)
  }, startAdornment && React__default.createElement("span", {
    className: inputStartAdornmentClass
  }, startAdornment), label && React__default.createElement("p", {
    className: clsx(inputLabelClass, inputLabelClassName, (value || activeClass) && inputLabelActiveClass, error && inputLabelErrorClass)
  }, label, " ", endAdornment && !isEndAdornmentShown && "- " + endAdornment), React__default.createElement("input", Object.assign({
    ref: inputEl,
    type: type,
    disabled: disabled,
    className: clsx(input, disabled && inputDisabledClass),
    value: value,
    onBlur: handleBlur,
    onChange: handleChange,
    onFocus: handleFocus
  }, props)), endAdornment && isEndAdornmentShown && React__default.createElement("span", null, endAdornment), React__default.createElement("button", {
    onClick: handleClean,
    className: clsx(closeButton, isCloseIcon && !value && hideCloseButton)
  }, React__default.createElement("img", {
    src: img,
    alt: "Reset"
  })));
};

var useStyles$6 = /*#__PURE__*/reactJss.createUseStyles(function (_ref) {
  var nextButton = _ref.nextButton;
  return {
    nextButton: _extends({}, nextButton.nextButton, {
      '&:hover:enabled': _extends({}, nextButton.nextButtonHovered),
      '&:focus:enabled': _extends({}, nextButton.nextButtonFocus)
    })
  };
});

var _excluded$3 = ["className", "text"];
var NextButton = function NextButton(_ref) {
  var className = _ref.className,
      _ref$text = _ref.text,
      text = _ref$text === void 0 ? 'Next' : _ref$text,
      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);

  var _useStyles = useStyles$6({
    theme: theming.useTheme()
  }),
      nextButton = _useStyles.nextButton;

  return React__default.createElement(Button, Object.assign({
    className: clsx(nextButton, className)
  }, props), text);
};

var isNumber = function isNumber(arg) {
  return typeof arg === 'number' && Number.isFinite(arg);
};

var useStyles$7 = /*#__PURE__*/reactJss.createUseStyles(function (_ref) {
  var progressBar = _ref.progressBar;
  return {
    wrapperBar: {
      zIndex: 1,
      position: progressBar.wrapperBar.position,
      height: progressBar.wrapperBar.height,
      background: progressBar.wrapperBar.background,
      top: progressBar.wrapperBar.top,
      display: 'flex',
      alignItems: 'center'
    },
    progressBar: {
      maxWidth: '100%',
      height: '100%',
      borderRadius: progressBar.progressBar.borderRadius,
      background: progressBar.progressBar.background,
      transition: 'width .3s'
    },
    labelStyles: {
      position: 'absolute',
      left: '50%',
      transform: 'translate(-50%, 0)',
      lineHeight: '24px'
    }
  };
});

var ProgressBar = function ProgressBar(_ref) {
  var percents = _ref.percents,
      label = _ref.label,
      className = _ref.className;

  var _useStyles = useStyles$7({
    theme: theming.useTheme()
  }),
      wrapperBar = _useStyles.wrapperBar,
      progressBar = _useStyles.progressBar,
      labelStyles = _useStyles.labelStyles;

  var style = React.useMemo(function () {
    return {
      width: "calc(100% * " + percents / 100 + ")"
    };
  }, [percents]);

  if (!isNumber(percents)) {
    return null;
  }

  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
    className: clsx(wrapperBar, className)
  }, React__default.createElement("div", {
    className: progressBar,
    style: style
  }), label && React__default.createElement("p", {
    className: labelStyles
  }, label)));
};

var useStyles$8 = /*#__PURE__*/reactJss.createUseStyles(function (_ref) {
  var ratingScale = _ref.ratingScale;
  return {
    ratingButton: _extends({}, ratingScale.ratingButton, {
      '&:active': _extends({}, ratingScale.ratingButtonActive)
    }),
    '@media screen and (max-width: 320px)': {
      // iPhone 4 resolution
      ratingButton: {
        width: '52px'
      }
    },
    ratingButtonSelected: ratingScale.ratingButtonSelected
  };
});

var RatingButton = function RatingButton(_ref) {
  var rating = _ref.rating,
      _onClick = _ref.onClick,
      selected = _ref.selected,
      buttonClass = _ref.buttonClass,
      buttonTextClass = _ref.buttonTextClass;

  var _useStyles = useStyles$8({
    theme: theming.useTheme()
  }),
      ratingButton = _useStyles.ratingButton,
      ratingButtonSelected = _useStyles.ratingButtonSelected;

  return React__default.createElement("button", {
    onClick: function onClick() {
      return _onClick(rating);
    },
    className: clsx(ratingButton, buttonClass, selected && ratingButtonSelected)
  }, React__default.createElement("h2", {
    className: clsx(buttonTextClass)
  }, rating.value));
};

var useStyles$9 = /*#__PURE__*/reactJss.createUseStyles(function (_ref) {
  var ratingScale = _ref.ratingScale;
  return {
    ratingScaleWrapper: _extends({}, ratingScale.ratingScaleWrapper),
    ratingScale: _extends({}, ratingScale.ratingScale),
    ratingGradationInfoWrapper: _extends({}, ratingScale.ratingGradationInfoWrapper),
    info: ratingScale.info
  };
});

var ratingScaleDefaultAnswers = /*#__PURE__*/Array.from({
  length: 5
}, function (_, index) {
  return {
    key: "" + (index + 1),
    value: index + 1
  };
});
var defaultProps = {
  ratings: ratingScaleDefaultAnswers,
  ratingGradationInfo: ['Strongly Disagree', 'Strongly Agree']
};
var RatingScale = function RatingScale(_ref) {
  var value = _ref.value,
      ratings = _ref.ratings,
      ratingGradationInfo = _ref.ratingGradationInfo,
      onSelect = _ref.onSelect;

  var _useStyles = useStyles$9({
    theme: theming.useTheme()
  }),
      ratingScaleWrapper = _useStyles.ratingScaleWrapper,
      ratingScale = _useStyles.ratingScale,
      ratingGradationInfoWrapper = _useStyles.ratingGradationInfoWrapper,
      info = _useStyles.info;

  var ratingButtons = ratings == null ? void 0 : ratings.map(function (rating) {
    return React__default.createElement(RatingButton, {
      key: rating.key,
      rating: rating,
      selected: value === rating.value,
      onClick: function onClick() {
        return onSelect(rating);
      }
    });
  });
  return React__default.createElement("div", {
    className: ratingScaleWrapper
  }, React__default.createElement("div", {
    className: ratingScale
  }, ratingButtons), React__default.createElement("div", {
    className: ratingGradationInfoWrapper
  }, ratingGradationInfo && React__default.createElement("h3", {
    className: info
  }, ratingGradationInfo[0]), ratingGradationInfo && React__default.createElement("h3", {
    className: info
  }, ratingGradationInfo[1])));
};
RatingScale.defaultProps = defaultProps;

var useStyles$a = /*#__PURE__*/reactJss.createUseStyles(function (_ref) {
  var tabs = _ref.tabs;
  return {
    tabsWrapper: tabs.tabsWrapper,
    tabButton: _extends({}, tabs.tabButton, {
      '& p': {
        fontWeight: 500,
        fontSize: '12px',
        lineHeight: '18px'
      }
    }),
    tabButtonActive: _extends({}, tabs.tabButtonActive, {
      '& p': {
        color: '#FFFFFF'
      }
    })
  };
});

var Tabs = function Tabs(_ref) {
  var tabs = _ref.tabs,
      _ref$activeTab = _ref.activeTab,
      activeTab = _ref$activeTab === void 0 ? tabs[0].key : _ref$activeTab,
      onChange = _ref.onChange;

  var _useStyles = useStyles$a({
    theme: theming.useTheme()
  }),
      tabsWrapper = _useStyles.tabsWrapper,
      tabButton = _useStyles.tabButton,
      tabButtonActive = _useStyles.tabButtonActive;

  var _useState = React.useState(activeTab),
      currentTab = _useState[0],
      setCurrentTab = _useState[1];

  var style = React.useMemo(function () {
    return {
      width: "calc(100% / " + tabs.length + ")"
    };
  }, [tabs]);

  var onSelectTab = function onSelectTab(tabKey) {
    setCurrentTab(tabKey);

    if (onChange) {
      onChange(currentTab);
    }
  };

  return React__default.createElement("div", {
    className: tabsWrapper
  }, tabs.map(function (tab) {
    return React__default.createElement("button", {
      key: tab.key,
      className: clsx(tabButton, tab.key === currentTab && tabButtonActive),
      onClick: function onClick() {
        return onSelectTab(tab.key);
      },
      style: style
    }, React__default.createElement("p", null, tab.label));
  }));
};

var BriosoProItalic = "4ce911b40894313e.otf";

var SFProTextRegular = "e19df199e78d296e.otf";

var SFProTextMedium = "3b8df618cd23e838.ttf";

var SFProText = "85b4043974a2a3be.otf";

var useStyles$b = /*#__PURE__*/reactJss.createUseStyles(function (_ref) {
  var globalStyles = _ref.globalStyles;
  return {
    '@font-face': [{
      fontFamily: 'SF Pro Text',
      src: "url('" + SFProText + "') format(\"opentype\")",
      fontDisplay: 'swap',
      fontWeight: 400
    }, {
      fontFamily: 'SF Pro Text',
      src: "url(" + SFProTextMedium + ")",
      fontDisplay: 'swap',
      fontWeight: 600
    }, {
      fontFamily: 'SF Pro Display',
      src: "url(" + SFProTextRegular + ") format(\"opentype\")",
      fontDisplay: 'swap'
    }, {
      fontFamily: 'BriosoPro',
      src: "url(" + BriosoProItalic + ") format(\"opentype\")",
      fontDisplay: 'swap'
    }],
    '@global': globalStyles
  };
});

var CommonStyles = function CommonStyles(_ref2) {
  var children = _ref2.children;
  useStyles$b();
  return React__default.createElement(React__default.Fragment, null, children);
};

var customTheme = /*#__PURE__*/_extends({}, defaultTheme, {
  button: /*#__PURE__*/_extends({}, defaultTheme.button, {
    button: /*#__PURE__*/_extends({}, defaultTheme.button.button, {
      background: '#4B46EC',
      color: '#FFFFFF'
    })
  }),
  nextButton: /*#__PURE__*/_extends({}, defaultTheme.nextButton, {
    nextButton: {
      background: '#1fec00',
      color: '#FFFFFF'
    }
  }),
  choiceButton: /*#__PURE__*/_extends({}, defaultTheme.choiceButton, {
    choiceButtonSelected: {
      background: '#FE8F20',
      color: '#FFFFFF'
    }
  }),
  multiChoiceButton: /*#__PURE__*/_extends({}, defaultTheme.choiceButton, {
    multiChoiceButton: /*#__PURE__*/_extends({}, defaultTheme.multiChoiceButton.multiChoiceButton, {
      background: '#fed9ad',
      height: '75px',
      margin: '0 0 25px',
      padding: '10px'
    }),
    multiChoiceButtonCheckboxCheckmark: /*#__PURE__*/_extends({}, defaultTheme.multiChoiceButton.multiChoiceButtonCheckboxCheckmark, {
      backgroundColor: '#FE8F20',
      borderRadius: '12px'
    }),
    multiChoiceButtonSelected: /*#__PURE__*/_extends({}, defaultTheme.multiChoiceButton.multiChoiceButtonSelected, {
      border: '1px solid #FE8F20',
      background: '#f0f0ff',
      color: '#202B47'
    })
  })
});

var AppThemeProvider = function AppThemeProvider(_ref) {
  var children = _ref.children;
  var theme = defaultTheme;
  var localTheme = localStorage.getItem('theme');

  if (localTheme === 'custom') {
    theme = customTheme;
  }

  return React__default.createElement(reactJss.ThemeProvider, {
    theme: theme
  }, React__default.createElement(CommonStyles, null, children));
};

var validator = {
  email: function email(value) {
    return value.length > 70 || !/^[\w%+-]+(\.[\w%+-]+)*@[\w%+-]+(\.[\w%+-]+)+$/.test(value);
  },
  min: function min(value, options) {
    if (!options.value) {
      return false;
    }

    if (Number(value)) {
      return options.value < Number(value);
    }

    return options.value < value.trim().length;
  },
  max: function max(value, options) {
    if (!options.value) {
      return false;
    }

    if (Number(value)) {
      return options.value > Number(value);
    }

    return options.value > value.trim().length;
  }
};

// node modules
var useStyles$c = /*#__PURE__*/reactJss.createUseStyles({
  errorMessageClass: {
    fontSize: '12px',
    lineHeight: '16px',
    color: '#FF4D2B',
    margin: '4px 0 0 16px'
  },
  validatedInputWrapper: {},
  hidden: {
    display: 'none'
  }
});

var _excluded$4 = ["onError", "onChange", "schema", "wrapperClass"];
var ValidatedInput = function ValidatedInput(_ref) {
  var onError = _ref.onError,
      onChange = _ref.onChange,
      schema = _ref.schema,
      wrapperClass = _ref.wrapperClass,
      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);

  var _useStyles = useStyles$c({
    theme: theming.useTheme()
  }),
      validatedInputWrapper = _useStyles.validatedInputWrapper,
      hidden = _useStyles.hidden,
      errorMessageClass = _useStyles.errorMessageClass;

  var errorInit = new Map();

  var _useState = React.useState(errorInit),
      error = _useState[0],
      setError = _useState[1];

  React.useEffect(function () {
    if (onError) onError(Boolean(error));
  }, [error, onError]);

  var validate = function validate(value) {
    Object.keys(schema).forEach(function (item) {
      var key = item;
      var validFn = validator[key];
      var option = schema[key];

      if (validFn(value, option)) {
        setError(function (prev) {
          return prev.set(key, option.errorMessage);
        });
      } else if (error.has(key)) {
        setError(function (prev) {
          var updMap = prev;
          updMap["delete"](key);
          return updMap;
        });
      }
    });
  };

  var handleChange = function handleChange(value) {
    if (!value) {
      setError(function (prev) {
        var updMap = prev;
        updMap.clear();
        return updMap;
      });
    } else {
      validate(value);
    }

    if (onChange) onChange(value);
  };

  var errorMessage = Array.from(error.values()).pop() || '';
  return React__default.createElement("div", {
    className: clsx(validatedInputWrapper, wrapperClass)
  }, React__default.createElement(Input, Object.assign({
    onChange: handleChange,
    error: !!error.size
  }, otherProps)), React__default.createElement("p", {
    className: clsx(errorMessageClass, !error.size && hidden)
  }, errorMessage));
};

exports.AppThemeProvider = AppThemeProvider;
exports.Button = Button;
exports.Checkbox = Checkbox;
exports.ChoiceButton = ChoiceButton;
exports.ColoredPage = ColoredPage;
exports.FloatedWrapper = FloatedWrapper;
exports.Input = Input;
exports.NextButton = NextButton;
exports.ProgressBar = ProgressBar;
exports.RatingButton = RatingButton;
exports.RatingScale = RatingScale;
exports.Tabs = Tabs;
exports.ValidatedInput = ValidatedInput;
exports.ratingScaleDefaultAnswers = ratingScaleDefaultAnswers;
//# sourceMappingURL=ruby-ui-core.cjs.development.js.map
