@bonlineza/luxity-lib 2.39.6 → 2.39.7

package/RadioButtons.js

@@ -1,340 +1,350 @@
-import React, { forwardRef, useState, useEffect, Fragment } from 'react';
-import styled, { ThemeProvider } from 'styled-components';
-
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components'], factory) :
+  (global = global || self, factory(global.RadioButtons = {}, global.React, global.styled));
+}(this, (function (exports, React, styled) { 'use strict';
+
+  var React__default = 'default' in React ? React['default'] : React;
+  var styled__default = 'default' in styled ? styled['default'] : styled;
+
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      enumerableOnly && (symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      })), keys.push.apply(keys, symbols);
+    }
 
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    return keys;
   }
 
-  return keys;
-}
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = null != arguments[i] ? arguments[i] : {};
+      i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
 
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
+    return target;
   }
 
-  return target;
-}
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
+    return obj;
   }
 
-  return obj;
-}
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
 
-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];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
         }
       }
-    }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
 
-function _taggedTemplateLiteral(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
+      return target;
+    };
+    return _extends.apply(this, arguments);
   }
 
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
+  function _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
     }
-  }));
-}
 
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
+    return Object.freeze(Object.defineProperties(strings, {
+      raw: {
+        value: Object.freeze(raw)
+      }
+    }));
+  }
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
+  function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+  }
 
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+  }
 
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
+  function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 
-  var _s, _e;
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
 
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
+    var _s, _e;
 
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
     try {
-      if (!_n && _i["return"] != null) _i["return"]();
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value);
+
+        if (i && _arr.length === i) break;
+      }
+    } catch (err) {
+      _d = true;
+      _e = err;
     } finally {
-      if (_d) throw _e;
+      try {
+        if (!_n && _i["return"] != null) _i["return"]();
+      } finally {
+        if (_d) throw _e;
+      }
     }
+
+    return _arr;
   }
 
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-var _templateObject;
-var RadioButtonsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-
-var _templateObject$1;
-var ButtonListWrapper = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  flex-wrap: ", ";\n"])), function (_ref) {
-  var noWrap = _ref.noWrap;
-  return noWrap ? 'nowrap' : 'wrap';
-});
-
-var _templateObject$2;
-var Title = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  flex-basis: 40%;\n"])), function (props) {
-  return props.theme.colors.base;
-});
-
-var _templateObject$3;
-var RadioButtonLabel = styled.label(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-bottom: ", ";\n  margin-right: ", ";\n"])), function (props) {
-  return props.theme.marginPaddings[0];
-}, function (props) {
-  return props.theme.marginPaddings[0];
-});
-
-var _templateObject$4;
-var RadioButtonCircle = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  height: 20px;\n  width: 20px;\n  border-radius: 50%;\n  margin-right: 5px;\n  border: 1px solid ", ";\n  display: flex;\n"])), function (props) {
-  return props.theme.colors.base;
-});
-
-var _templateObject$5;
-var RadioButtonCircleInner = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  margin: auto;\n"])));
-
-var _templateObject$6;
-var RadioButtonInput = styled.input(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  display: none;\n  :checked ~ ", " {\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), RadioButtonCircle, RadioButtonCircleInner, function (props) {
-  return props.theme.colors.base;
-});
-
-var _templateObject$7;
-var RadioButtonText = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-
-var RadioButtonsFormWrapper = function RadioButtonsFormWrapper(_ref) {
-  var name = _ref.name,
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? '' : _ref$title,
-      controlRef = _ref.controlRef,
-      _ref$options = _ref.options,
-      options = _ref$options === void 0 ? [] : _ref$options,
-      _ref$errors = _ref.errors,
-      errors = _ref$errors === void 0 ? {} : _ref$errors;
-  var optsWithControlRef = options.map(function (option) {
-    return _objectSpread2(_objectSpread2({}, option), {}, {
-      actionCallback: function actionCallback() {
-        return controlRef(name, option.value);
-      }
-    });
-  });
-  return /*#__PURE__*/React.createElement(RadioButtons$1, {
-    name: name,
-    title: title,
-    options: optsWithControlRef,
-    errors: errors,
-    noWrap: true
-  });
-};
-
-var _templateObject$8;
-var inputMarginRight = '0.2em';
-var CheckboxLabel = styled.label(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  span {\n    :before {\n      content: '\\2713';\n      position: absolute;\n      display: none;\n      color: white;\n      left: 0.4em;\n      top: 0.1em;\n      font-size: ", ";\n      text-align: center;\n    }\n  }\n\n  input {\n    font-size: ", ";\n    background-color: ", ";\n    appearance: none;\n    outline: none;\n    height: 1em;\n    width: 1em;\n    margin-right: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    transition-duration: 0.3s;\n    cursor: pointer;\n\n    &:checked {\n      background-color: ", ";\n    }\n\n    &:checked + span:before {\n      display: block;\n    }\n  }\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  span {\n    :before {\n      content: '\\\\2713';\n      position: absolute;\n      display: none;\n      color: white;\n      left: 0.4em;\n      top: 0.1em;\n      font-size: ", ";\n      text-align: center;\n    }\n  }\n\n  input {\n    font-size: ", ";\n    background-color: ", ";\n    appearance: none;\n    outline: none;\n    height: 1em;\n    width: 1em;\n    margin-right: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    transition-duration: 0.3s;\n    cursor: pointer;\n\n    &:checked {\n      background-color: ", ";\n    }\n\n    &:checked + span:before {\n      display: block;\n    }\n  }\n"])), function (props) {
-  var _props$theme;
-
-  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.fontSizes.length ? props.theme.fontSizes[4] : '1em';
-}, function (props) {
-  return props.theme.fontSizes[4];
-}, function (props) {
-  return props.theme.colors.ntrlMin;
-}, inputMarginRight, function (props) {
-  return props.theme.colors.primary;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.colors.primary;
-});
-var ErrorMessage = styled.div({
-  color: function color(props) {
-    return props.theme.colors.primary;
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
   }
-});
-
-var theme = {
-  breakpoints: ['40em', '52em', '64em'],
-  space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
-  fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
-  marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
-  letterSpacings: ['-0.5px', '0px', '+0.5px'],
-  radii: ['0px', '2px', '4px', '8px'],
-  borderRadius: '6px',
-  colors: {
-    primary: '#000',
-    base: '#4e4949',
-    baseLt: '#817c7c',
-    borderColor: '#d8d8d8',
-    ntrlMin: '#fff',
-    ntrlMinTen: '#e6e6e6',
-    gray: '#efefef',
-    darkerGray: '#454141'
-  },
-  rareStepColors: {
-    primary: '#202b58',
-    secondary: '#ef5c2d',
-    ntrlMin: '#ffffff',
-    ntrl40: '#f4f4f4',
-    ntrl50: '#808080',
-    ntrl60: '#e8e8e8',
-    ntrl70: '#252525',
-    ntrlMax: '#000000'
-  },
-  rareStepFontWeights: {
-    normal: 400,
-    medium: 500,
-    semiBold: 600,
-    bold: 700
-  },
-  rareStepFontSize: {
-    h1: '36px',
-    h2: '30px',
-    h3: '24px',
-    h4: '20px',
-    h5: '16px',
-    h6: '14px',
-    footerTitle: '16px'
-  },
-  rareStepPageSizes: {
-    mobile: '500px',
-    tablet: '768px',
-    desktop: '992px',
-    screenl: '1280px',
-    screenxl: '1680px',
-    screenxxl: '1920px',
-    container: '1600px'
+
+  function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
-};
-
-var themed = (function (Component) {
-  return /*#__PURE__*/forwardRef(function (props, ref) {
-    return /*#__PURE__*/React.createElement(ThemeProvider, {
-      theme: theme
-    }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-      ref: ref
-    })));
+
+  var _templateObject;
+  var RadioButtonsContainer = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+
+  var _templateObject$1;
+  var ButtonListWrapper = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  flex-wrap: ", ";\n"])), function (_ref) {
+    var noWrap = _ref.noWrap;
+    return noWrap ? 'nowrap' : 'wrap';
+  });
+
+  var _templateObject$2;
+  var Title = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  flex-basis: 40%;\n"])), function (props) {
+    return props.theme.colors.base;
+  });
+
+  var _templateObject$3;
+  var RadioButtonLabel = styled__default.label(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-bottom: ", ";\n  margin-right: ", ";\n"])), function (props) {
+    return props.theme.marginPaddings[0];
+  }, function (props) {
+    return props.theme.marginPaddings[0];
   });
-});
-
-var FormWrapper = RadioButtonsFormWrapper;
-
-/**
- * RadioButtons component can show multiple radios, a title and an error message
- */
-var RadioButtons = function RadioButtons(_ref) {
-  var options = _ref.options,
-      name = _ref.name,
-      noWrap = _ref.noWrap,
-      title = _ref.title,
-      errors = _ref.errors;
-
-  var _useState = useState(errors[name]),
-      _useState2 = _slicedToArray(_useState, 2),
-      errMsg = _useState2[0],
-      setErrMsg = _useState2[1];
-
-  useEffect(function () {
-    setErrMsg(errors[name]);
-  }, [errors, name]);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(RadioButtonsContainer, null, /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(ButtonListWrapper, {
-    noWrap: noWrap
-  }, options.map(function (_ref2, index) {
-    var _ref2$actionCallback = _ref2.actionCallback,
-        actionCallback = _ref2$actionCallback === void 0 ? function () {
-      return null;
-    } : _ref2$actionCallback,
-        _ref2$value = _ref2.value,
-        value = _ref2$value === void 0 ? '' : _ref2$value,
-        _ref2$innerText = _ref2.innerText,
-        innerText = _ref2$innerText === void 0 ? '' : _ref2$innerText,
-        _ref2$checked = _ref2.checked,
-        checked = _ref2$checked === void 0 ? false : _ref2$checked;
-    return /*#__PURE__*/React.createElement(RadioButtonLabel, {
-      key: "".concat(name, "-").concat(index),
-      htmlFor: "".concat(name, "_").concat(index)
-    }, /*#__PURE__*/React.createElement(RadioButtonInput, {
-      id: "".concat(name, "_").concat(index),
-      type: "radio",
+
+  var _templateObject$4;
+  var RadioButtonCircle = styled__default.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  height: 20px;\n  width: 20px;\n  border-radius: 50%;\n  margin-right: 5px;\n  border: 1px solid ", ";\n  display: flex;\n"])), function (props) {
+    return props.theme.colors.base;
+  });
+
+  var _templateObject$5;
+  var RadioButtonCircleInner = styled__default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  margin: auto;\n"])));
+
+  var _templateObject$6;
+  var RadioButtonInput = styled__default.input(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  display: none;\n  :checked ~ ", " {\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), RadioButtonCircle, RadioButtonCircleInner, function (props) {
+    return props.theme.colors.base;
+  });
+
+  var _templateObject$7;
+  var RadioButtonText = styled__default.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+
+  var RadioButtonsFormWrapper = function RadioButtonsFormWrapper(_ref) {
+    var name = _ref.name,
+        _ref$title = _ref.title,
+        title = _ref$title === void 0 ? '' : _ref$title,
+        controlRef = _ref.controlRef,
+        _ref$options = _ref.options,
+        options = _ref$options === void 0 ? [] : _ref$options,
+        _ref$errors = _ref.errors,
+        errors = _ref$errors === void 0 ? {} : _ref$errors;
+    var optsWithControlRef = options.map(function (option) {
+      return _objectSpread2(_objectSpread2({}, option), {}, {
+        actionCallback: function actionCallback() {
+          return controlRef(name, option.value);
+        }
+      });
+    });
+    return /*#__PURE__*/React__default.createElement(RadioButtons$1, {
       name: name,
-      defaultChecked: checked,
-      onChange: function onChange() {
-        setErrMsg('');
-        actionCallback(name, value);
-      },
-      value: value
-    }), /*#__PURE__*/React.createElement(RadioButtonCircle, null, /*#__PURE__*/React.createElement(RadioButtonCircleInner, null)), /*#__PURE__*/React.createElement(RadioButtonText, null, innerText));
-  }))), errMsg && /*#__PURE__*/React.createElement(ErrorMessage, null, errMsg));
-};
-
-RadioButtons.defaultProps = {
-  noWrap: false,
-  title: '',
-  errors: {}
-};
-var RadioButtons$1 = themed(RadioButtons);
-
-export default RadioButtons$1;
-export { FormWrapper };
+      title: title,
+      options: optsWithControlRef,
+      errors: errors,
+      noWrap: true
+    });
+  };
+
+  var _templateObject$8;
+  var inputMarginRight = '0.2em';
+  var CheckboxLabel = styled__default.label(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  span {\n    :before {\n      content: '\\2713';\n      position: absolute;\n      display: none;\n      color: white;\n      left: 0.4em;\n      top: 0.1em;\n      font-size: ", ";\n      text-align: center;\n    }\n  }\n\n  input {\n    font-size: ", ";\n    background-color: ", ";\n    appearance: none;\n    outline: none;\n    height: 1em;\n    width: 1em;\n    margin-right: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    transition-duration: 0.3s;\n    cursor: pointer;\n\n    &:checked {\n      background-color: ", ";\n    }\n\n    &:checked + span:before {\n      display: block;\n    }\n  }\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  span {\n    :before {\n      content: '\\\\2713';\n      position: absolute;\n      display: none;\n      color: white;\n      left: 0.4em;\n      top: 0.1em;\n      font-size: ", ";\n      text-align: center;\n    }\n  }\n\n  input {\n    font-size: ", ";\n    background-color: ", ";\n    appearance: none;\n    outline: none;\n    height: 1em;\n    width: 1em;\n    margin-right: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    transition-duration: 0.3s;\n    cursor: pointer;\n\n    &:checked {\n      background-color: ", ";\n    }\n\n    &:checked + span:before {\n      display: block;\n    }\n  }\n"])), function (props) {
+    var _props$theme;
+
+    return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.fontSizes.length ? props.theme.fontSizes[4] : '1em';
+  }, function (props) {
+    return props.theme.fontSizes[4];
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
+  }, inputMarginRight, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.borderRadius;
+  }, function (props) {
+    return props.theme.colors.primary;
+  });
+  var ErrorMessage = styled__default.div({
+    color: function color(props) {
+      return props.theme.colors.primary;
+    }
+  });
+
+  var theme = {
+    breakpoints: ['40em', '52em', '64em'],
+    space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
+    fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
+    marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
+    letterSpacings: ['-0.5px', '0px', '+0.5px'],
+    radii: ['0px', '2px', '4px', '8px'],
+    borderRadius: '6px',
+    colors: {
+      primary: '#000',
+      base: '#4e4949',
+      baseLt: '#817c7c',
+      borderColor: '#d8d8d8',
+      ntrlMin: '#fff',
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
+    },
+    rareStepColors: {
+      primary: '#202b58',
+      secondary: '#ef5c2d',
+      ntrlMin: '#ffffff',
+      ntrl40: '#f4f4f4',
+      ntrl50: '#808080',
+      ntrl60: '#e8e8e8',
+      ntrl70: '#252525',
+      ntrlMax: '#000000'
+    },
+    rareStepFontWeights: {
+      normal: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    },
+    rareStepFontSize: {
+      h1: '36px',
+      h2: '30px',
+      h3: '24px',
+      h4: '20px',
+      h5: '16px',
+      h6: '14px',
+      footerTitle: '16px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
+    }
+  };
+
+  var themed = (function (Component) {
+    return /*#__PURE__*/React.forwardRef(function (props, ref) {
+      return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
+        theme: theme
+      }, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
+        ref: ref
+      })));
+    });
+  });
+
+  var FormWrapper = RadioButtonsFormWrapper;
+
+  /**
+   * RadioButtons component can show multiple radios, a title and an error message
+   */
+  var RadioButtons = function RadioButtons(_ref) {
+    var options = _ref.options,
+        name = _ref.name,
+        noWrap = _ref.noWrap,
+        title = _ref.title,
+        errors = _ref.errors;
+
+    var _useState = React.useState(errors[name]),
+        _useState2 = _slicedToArray(_useState, 2),
+        errMsg = _useState2[0],
+        setErrMsg = _useState2[1];
+
+    React.useEffect(function () {
+      setErrMsg(errors[name]);
+    }, [errors, name]);
+    return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(RadioButtonsContainer, null, /*#__PURE__*/React__default.createElement(Title, null, title), /*#__PURE__*/React__default.createElement(ButtonListWrapper, {
+      noWrap: noWrap
+    }, options.map(function (_ref2, index) {
+      var _ref2$actionCallback = _ref2.actionCallback,
+          actionCallback = _ref2$actionCallback === void 0 ? function () {
+        return null;
+      } : _ref2$actionCallback,
+          _ref2$value = _ref2.value,
+          value = _ref2$value === void 0 ? '' : _ref2$value,
+          _ref2$innerText = _ref2.innerText,
+          innerText = _ref2$innerText === void 0 ? '' : _ref2$innerText,
+          _ref2$checked = _ref2.checked,
+          checked = _ref2$checked === void 0 ? false : _ref2$checked;
+      return /*#__PURE__*/React__default.createElement(RadioButtonLabel, {
+        key: "".concat(name, "-").concat(index),
+        htmlFor: "".concat(name, "_").concat(index)
+      }, /*#__PURE__*/React__default.createElement(RadioButtonInput, {
+        id: "".concat(name, "_").concat(index),
+        type: "radio",
+        name: name,
+        defaultChecked: checked,
+        onChange: function onChange() {
+          setErrMsg('');
+          actionCallback(name, value);
+        },
+        value: value
+      }), /*#__PURE__*/React__default.createElement(RadioButtonCircle, null, /*#__PURE__*/React__default.createElement(RadioButtonCircleInner, null)), /*#__PURE__*/React__default.createElement(RadioButtonText, null, innerText));
+    }))), errMsg && /*#__PURE__*/React__default.createElement(ErrorMessage, null, errMsg));
+  };
+
+  RadioButtons.defaultProps = {
+    noWrap: false,
+    title: '',
+    errors: {}
+  };
+  var RadioButtons$1 = themed(RadioButtons);
+
+  exports.FormWrapper = FormWrapper;
+  exports.default = RadioButtons$1;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+})));