react-survey-builder 1.0.107 → 1.0.108

package/lib/survey-elements/index.js

@@ -1,4 +1,5 @@
-var _excluded = ["name", "onChange", "defaultValue", "style", "item"],
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["iconImportString"],
   _excluded2 = ["name", "onChange", "defaultValue", "style", "item"],
   _excluded3 = ["name", "onChange", "defaultValue", "style", "item"],
   _excluded4 = ["name", "onChange", "defaultValue", "style", "item"],
@@ -6,8 +7,8 @@ var _excluded = ["name", "onChange", "defaultValue", "style", "item"],
   _excluded6 = ["name", "onChange", "defaultValue", "style", "item"],
   _excluded7 = ["name", "onChange", "defaultValue", "style", "item"],
   _excluded8 = ["name", "onChange", "defaultValue", "style", "item"],
-  _excluded9 = ["name", "onChange", "value", "style", "item"];
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+  _excluded9 = ["name", "onChange", "defaultValue", "style", "item"],
+  _excluded10 = ["name", "onChange", "value", "style", "item"];
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
@@ -22,13 +23,19 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+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."); }
+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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
 // eslint-disable-next-line max-classes-per-file
 import fetch from 'isomorphic-fetch';
 import { saveAs } from 'file-saver';
@@ -51,8 +58,29 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { IMask, IMaskInput } from 'react-imask';
 import { isValidPhoneNumber } from 'libphonenumber-js';
 import ID from '../UUID';
-import { isBooleanTrue, replaceInText } from '../utils/objectUtils';
+import { isBooleanFalse, isBooleanTrue, isNotNullOrUndefined, replaceInText } from '../utils/objectUtils';
 var SurveyElements = {};
+var IconComponent = function IconComponent(_ref) {
+  var iconImportString = _ref.iconImportString,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    Icon = _React$useState2[0],
+    setIcon = _React$useState2[1];
+  React.useEffect(function () {
+    // iconImportString - i.e. 'react-icons/fa/FaBeer'
+    if (isNotNullOrUndefined(iconImportString) && iconImportString !== '') {
+      var iconStringParts = iconImportString.split('/');
+      var iconName = iconStringParts[2];
+      if (isNotNullOrUndefined(iconName)) {
+        import(iconImportString).then(function (module) {
+          return setIcon(module[iconName]);
+        });
+      }
+    }
+  }, [iconImportString]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, Icon && /*#__PURE__*/React.createElement(Icon, props));
+};
 export var Header = function Header(props) {
   var _props$item;
   var classNames = 'static';
@@ -158,14 +186,14 @@ export var LineBreak = function LineBreak(props) {
     className: baseClasses
   }, /*#__PURE__*/React.createElement(ComponentHeader, props), /*#__PURE__*/React.createElement("hr", null));
 };
-export var TextInput = function TextInput(_ref) {
+export var TextInput = function TextInput(_ref2) {
   var _item$required, _item$disabled, _item$required2, _item$helpClassName2;
-  var name = _ref.name,
-    onChange = _ref.onChange,
-    defaultValue = _ref.defaultValue,
-    style = _ref.style,
-    item = _ref.item,
-    props = _objectWithoutProperties(_ref, _excluded);
+  var name = _ref2.name,
+    onChange = _ref2.onChange,
+    defaultValue = _ref2.defaultValue,
+    style = _ref2.style,
+    item = _ref2.item,
+    props = _objectWithoutProperties(_ref2, _excluded2);
   var methods = useFormContext();
   var onChangeHandler = function onChangeHandler(value) {
     if (onChange !== undefined) {
@@ -194,19 +222,19 @@ export var TextInput = function TextInput(_ref) {
     name: name,
     rules: fieldRules
   };
-  controllerProps.render = function (_ref2) {
-    var _ref2$field = _ref2.field,
-      _onChange = _ref2$field.onChange,
-      onBlur = _ref2$field.onBlur,
-      value = _ref2$field.value,
-      name = _ref2$field.name,
-      ref = _ref2$field.ref,
-      _ref2$fieldState = _ref2.fieldState,
-      invalid = _ref2$fieldState.invalid,
-      isTouched = _ref2$fieldState.isTouched,
-      isDirty = _ref2$fieldState.isDirty,
-      error = _ref2$fieldState.error,
-      formState = _ref2.formState;
+  controllerProps.render = function (_ref3) {
+    var _ref3$field = _ref3.field,
+      _onChange = _ref3$field.onChange,
+      onBlur = _ref3$field.onBlur,
+      value = _ref3$field.value,
+      name = _ref3$field.name,
+      ref = _ref3$field.ref,
+      _ref3$fieldState = _ref3.fieldState,
+      invalid = _ref3$fieldState.invalid,
+      isTouched = _ref3$fieldState.isTouched,
+      isDirty = _ref3$fieldState.isDirty,
+      error = _ref3$fieldState.error,
+      formState = _ref3.formState;
     return /*#__PURE__*/React.createElement(Form.Control, _extends({
       onBlur: onBlur,
       onChange: function onChange(e) {
@@ -307,14 +335,14 @@ export var TextInput = function TextInput(_ref) {
     name: name
   })));
 };
-export var EmailInput = function EmailInput(_ref3) {
+export var EmailInput = function EmailInput(_ref4) {
   var _item$required4, _item$disabled3, _item$required5, _item$helpClassName4;
-  var name = _ref3.name,
-    onChange = _ref3.onChange,
-    defaultValue = _ref3.defaultValue,
-    style = _ref3.style,
-    item = _ref3.item,
-    props = _objectWithoutProperties(_ref3, _excluded2);
+  var name = _ref4.name,
+    onChange = _ref4.onChange,
+    defaultValue = _ref4.defaultValue,
+    style = _ref4.style,
+    item = _ref4.item,
+    props = _objectWithoutProperties(_ref4, _excluded3);
   var methods = useFormContext();
   var onChangeHandler = function onChangeHandler(value) {
     if (onChange !== undefined) {
@@ -356,19 +384,19 @@ export var EmailInput = function EmailInput(_ref3) {
     name: name,
     rules: fieldRules
   };
-  controllerProps.render = function (_ref4) {
-    var _ref4$field = _ref4.field,
-      _onChange2 = _ref4$field.onChange,
-      onBlur = _ref4$field.onBlur,
-      value = _ref4$field.value,
-      name = _ref4$field.name,
-      ref = _ref4$field.ref,
-      _ref4$fieldState = _ref4.fieldState,
-      invalid = _ref4$fieldState.invalid,
-      isTouched = _ref4$fieldState.isTouched,
-      isDirty = _ref4$fieldState.isDirty,
-      error = _ref4$fieldState.error,
-      formState = _ref4.formState;
+  controllerProps.render = function (_ref5) {
+    var _ref5$field = _ref5.field,
+      _onChange2 = _ref5$field.onChange,
+      onBlur = _ref5$field.onBlur,
+      value = _ref5$field.value,
+      name = _ref5$field.name,
+      ref = _ref5$field.ref,
+      _ref5$fieldState = _ref5.fieldState,
+      invalid = _ref5$fieldState.invalid,
+      isTouched = _ref5$fieldState.isTouched,
+      isDirty = _ref5$fieldState.isDirty,
+      error = _ref5$fieldState.error,
+      formState = _ref5.formState;
     return /*#__PURE__*/React.createElement(Form.Control, _extends({
       onBlur: onBlur,
       onChange: function onChange(e) {
@@ -469,15 +497,15 @@ export var EmailInput = function EmailInput(_ref3) {
     name: name
   })));
 };
-export var PhoneNumber = function PhoneNumber(_ref5) {
+export var PhoneNumber = function PhoneNumber(_ref6) {
   var _item$required7, _item$disabled5, _item$required8, _item$helpClassName6;
-  var name = _ref5.name,
-    onChange = _ref5.onChange,
-    _ref5$defaultValue = _ref5.defaultValue,
-    defaultValue = _ref5$defaultValue === void 0 ? '' : _ref5$defaultValue,
-    style = _ref5.style,
-    item = _ref5.item,
-    props = _objectWithoutProperties(_ref5, _excluded3);
+  var name = _ref6.name,
+    onChange = _ref6.onChange,
+    _ref6$defaultValue = _ref6.defaultValue,
+    defaultValue = _ref6$defaultValue === void 0 ? '' : _ref6$defaultValue,
+    style = _ref6.style,
+    item = _ref6.item,
+    props = _objectWithoutProperties(_ref6, _excluded4);
   var methods = useFormContext();
   var onChangeHandler = function onChangeHandler(value) {
     if (onChange !== undefined) {
@@ -535,19 +563,19 @@ export var PhoneNumber = function PhoneNumber(_ref5) {
     rules: fieldRules
   };
   if (IMaskInput !== undefined) {
-    controllerProps.render = function (_ref6) {
-      var _ref6$field = _ref6.field,
-        onChange = _ref6$field.onChange,
-        onBlur = _ref6$field.onBlur,
-        value = _ref6$field.value,
-        name = _ref6$field.name,
-        ref = _ref6$field.ref,
-        _ref6$fieldState = _ref6.fieldState,
-        invalid = _ref6$fieldState.invalid,
-        isTouched = _ref6$fieldState.isTouched,
-        isDirty = _ref6$fieldState.isDirty,
-        error = _ref6$fieldState.error,
-        formState = _ref6.formState;
+    controllerProps.render = function (_ref7) {
+      var _ref7$field = _ref7.field,
+        onChange = _ref7$field.onChange,
+        onBlur = _ref7$field.onBlur,
+        value = _ref7$field.value,
+        name = _ref7$field.name,
+        ref = _ref7$field.ref,
+        _ref7$fieldState = _ref7.fieldState,
+        invalid = _ref7$fieldState.invalid,
+        isTouched = _ref7$fieldState.isTouched,
+        isDirty = _ref7$fieldState.isDirty,
+        error = _ref7$fieldState.error,
+        formState = _ref7.formState;
       return /*#__PURE__*/React.createElement(IMaskInput, _extends({
         id: name + '-' + ID.uuid(),
         className: "form-control",
@@ -581,19 +609,19 @@ export var PhoneNumber = function PhoneNumber(_ref5) {
       }, inputProps));
     };
   } else {
-    controllerProps.render = function (_ref7) {
-      var _ref7$field = _ref7.field,
-        _onChange3 = _ref7$field.onChange,
-        onBlur = _ref7$field.onBlur,
-        value = _ref7$field.value,
-        name = _ref7$field.name,
-        ref = _ref7$field.ref,
-        _ref7$fieldState = _ref7.fieldState,
-        invalid = _ref7$fieldState.invalid,
-        isTouched = _ref7$fieldState.isTouched,
-        isDirty = _ref7$fieldState.isDirty,
-        error = _ref7$fieldState.error,
-        formState = _ref7.formState;
+    controllerProps.render = function (_ref8) {
+      var _ref8$field = _ref8.field,
+        _onChange3 = _ref8$field.onChange,
+        onBlur = _ref8$field.onBlur,
+        value = _ref8$field.value,
+        name = _ref8$field.name,
+        ref = _ref8$field.ref,
+        _ref8$fieldState = _ref8.fieldState,
+        invalid = _ref8$fieldState.invalid,
+        isTouched = _ref8$fieldState.isTouched,
+        isDirty = _ref8$fieldState.isDirty,
+        error = _ref8$fieldState.error,
+        formState = _ref8.formState;
       return /*#__PURE__*/React.createElement(Form.Control, _extends({
         onBlur: onBlur,
         onChange: function onChange(e) {
@@ -693,14 +721,14 @@ export var PhoneNumber = function PhoneNumber(_ref5) {
     name: name
   })));
 };
-export var DatePicker = function DatePicker(_ref8) {
+export var DatePicker = function DatePicker(_ref9) {
   var _item$required10, _item$disabled7, _item$required11, _item$helpClassName8;
-  var name = _ref8.name,
-    onChange = _ref8.onChange,
-    defaultValue = _ref8.defaultValue,
-    style = _ref8.style,
-    item = _ref8.item,
-    props = _objectWithoutProperties(_ref8, _excluded4);
+  var name = _ref9.name,
+    onChange = _ref9.onChange,
+    defaultValue = _ref9.defaultValue,
+    style = _ref9.style,
+    item = _ref9.item,
+    props = _objectWithoutProperties(_ref9, _excluded5);
   var methods = useFormContext();
   var onChangeHandler = function onChangeHandler(value) {
     if (onChange !== undefined) {
@@ -782,19 +810,19 @@ export var DatePicker = function DatePicker(_ref8) {
     rules: fieldRules
   };
   if (IMaskInput !== undefined && IMask !== undefined) {
-    controllerProps.render = function (_ref9) {
-      var _ref9$field = _ref9.field,
-        onChange = _ref9$field.onChange,
-        onBlur = _ref9$field.onBlur,
-        value = _ref9$field.value,
-        name = _ref9$field.name,
-        ref = _ref9$field.ref,
-        _ref9$fieldState = _ref9.fieldState,
-        invalid = _ref9$fieldState.invalid,
-        isTouched = _ref9$fieldState.isTouched,
-        isDirty = _ref9$fieldState.isDirty,
-        error = _ref9$fieldState.error,
-        formState = _ref9.formState;
+    controllerProps.render = function (_ref10) {
+      var _ref10$field = _ref10.field,
+        onChange = _ref10$field.onChange,
+        onBlur = _ref10$field.onBlur,
+        value = _ref10$field.value,
+        name = _ref10$field.name,
+        ref = _ref10$field.ref,
+        _ref10$fieldState = _ref10.fieldState,
+        invalid = _ref10$fieldState.invalid,
+        isTouched = _ref10$fieldState.isTouched,
+        isDirty = _ref10$fieldState.isDirty,
+        error = _ref10$fieldState.error,
+        formState = _ref10.formState;
       return /*#__PURE__*/React.createElement(IMaskInput, _extends({
         id: name + '-' + ID.uuid(),
         className: "form-control",
@@ -864,19 +892,19 @@ export var DatePicker = function DatePicker(_ref8) {
       }, inputProps));
     };
   } else {
-    controllerProps.render = function (_ref10) {
-      var _ref10$field = _ref10.field,
-        _onChange4 = _ref10$field.onChange,
-        onBlur = _ref10$field.onBlur,
-        value = _ref10$field.value,
-        name = _ref10$field.name,
-        ref = _ref10$field.ref,
-        _ref10$fieldState = _ref10.fieldState,
-        invalid = _ref10$fieldState.invalid,
-        isTouched = _ref10$fieldState.isTouched,
-        isDirty = _ref10$fieldState.isDirty,
-        error = _ref10$fieldState.error,
-        formState = _ref10.formState;
+    controllerProps.render = function (_ref11) {
+      var _ref11$field = _ref11.field,
+        _onChange4 = _ref11$field.onChange,
+        onBlur = _ref11$field.onBlur,
+        value = _ref11$field.value,
+        name = _ref11$field.name,
+        ref = _ref11$field.ref,
+        _ref11$fieldState = _ref11.fieldState,
+        invalid = _ref11$fieldState.invalid,
+        isTouched = _ref11$fieldState.isTouched,
+        isDirty = _ref11$fieldState.isDirty,
+        error = _ref11$fieldState.error,
+        formState = _ref11.formState;
       return /*#__PURE__*/React.createElement(Form.Control, _extends({
         onBlur: onBlur,
         onChange: function onChange(e) {
@@ -981,14 +1009,14 @@ export var DatePicker = function DatePicker(_ref8) {
     name: name
   })));
 };
-export var NumberInput = function NumberInput(_ref11) {
+export var NumberInput = function NumberInput(_ref12) {
   var _item$required13, _item$disabled9, _item$required14, _item$helpClassName10;
-  var name = _ref11.name,
-    onChange = _ref11.onChange,
-    defaultValue = _ref11.defaultValue,
-    style = _ref11.style,
-    item = _ref11.item,
-    props = _objectWithoutProperties(_ref11, _excluded5);
+  var name = _ref12.name,
+    onChange = _ref12.onChange,
+    defaultValue = _ref12.defaultValue,
+    style = _ref12.style,
+    item = _ref12.item,
+    props = _objectWithoutProperties(_ref12, _excluded6);
   var methods = useFormContext();
   var onChangeHandler = function onChangeHandler(value) {
     if (onChange !== undefined) {
@@ -1017,19 +1045,19 @@ export var NumberInput = function NumberInput(_ref11) {
     name: name,
     rules: fieldRules
   };
-  controllerProps.render = function (_ref12) {
-    var _ref12$field = _ref12.field,
-      _onChange5 = _ref12$field.onChange,
-      onBlur = _ref12$field.onBlur,
-      value = _ref12$field.value,
-      name = _ref12$field.name,
-      ref = _ref12$field.ref,
-      _ref12$fieldState = _ref12.fieldState,
-      invalid = _ref12$fieldState.invalid,
-      isTouched = _ref12$fieldState.isTouched,
-      isDirty = _ref12$fieldState.isDirty,
-      error = _ref12$fieldState.error,
-      formState = _ref12.formState;
+  controllerProps.render = function (_ref13) {
+    var _ref13$field = _ref13.field,
+      _onChange5 = _ref13$field.onChange,
+      onBlur = _ref13$field.onBlur,
+      value = _ref13$field.value,
+      name = _ref13$field.name,
+      ref = _ref13$field.ref,
+      _ref13$fieldState = _ref13.fieldState,
+      invalid = _ref13$fieldState.invalid,
+      isTouched = _ref13$fieldState.isTouched,
+      isDirty = _ref13$fieldState.isDirty,
+      error = _ref13$fieldState.error,
+      formState = _ref13.formState;
     return /*#__PURE__*/React.createElement(Form.Control, _extends({
       onBlur: onBlur,
       onChange: function onChange(e) {
@@ -1130,14 +1158,14 @@ export var NumberInput = function NumberInput(_ref11) {
     name: name
   })));
 };
-export var TextArea = function TextArea(_ref13) {
+export var TextArea = function TextArea(_ref14) {
   var _item$rows, _item$required16, _item$disabled11, _item$required17, _item$helpClassName12;
-  var name = _ref13.name,
-    onChange = _ref13.onChange,
-    defaultValue = _ref13.defaultValue,
-    style = _ref13.style,
-    item = _ref13.item,
-    props = _objectWithoutProperties(_ref13, _excluded6);
+  var name = _ref14.name,
+    onChange = _ref14.onChange,
+    defaultValue = _ref14.defaultValue,
+    style = _ref14.style,
+    item = _ref14.item,
+    props = _objectWithoutProperties(_ref14, _excluded7);
   var methods = useFormContext();
   var onChangeHandler = function onChangeHandler(value) {
     if (onChange !== undefined) {
@@ -1166,19 +1194,19 @@ export var TextArea = function TextArea(_ref13) {
     name: name,
     rules: fieldRules
   };
-  controllerProps.render = function (_ref14) {
-    var _ref14$field = _ref14.field,
-      _onChange6 = _ref14$field.onChange,
-      onBlur = _ref14$field.onBlur,
-      value = _ref14$field.value,
-      name = _ref14$field.name,
-      ref = _ref14$field.ref,
-      _ref14$fieldState = _ref14.fieldState,
-      invalid = _ref14$fieldState.invalid,
-      isTouched = _ref14$fieldState.isTouched,
-      isDirty = _ref14$fieldState.isDirty,
-      error = _ref14$fieldState.error,
-      formState = _ref14.formState;
+  controllerProps.render = function (_ref15) {
+    var _ref15$field = _ref15.field,
+      _onChange6 = _ref15$field.onChange,
+      onBlur = _ref15$field.onBlur,
+      value = _ref15$field.value,
+      name = _ref15$field.name,
+      ref = _ref15$field.ref,
+      _ref15$fieldState = _ref15.fieldState,
+      invalid = _ref15$fieldState.invalid,
+      isTouched = _ref15$fieldState.isTouched,
+      isDirty = _ref15$fieldState.isDirty,
+      error = _ref15$fieldState.error,
+      formState = _ref15.formState;
     return /*#__PURE__*/React.createElement(Form.Control, _extends({
       onBlur: onBlur,
       onChange: function onChange(e) {
@@ -1282,14 +1310,14 @@ export var TextArea = function TextArea(_ref13) {
     name: name
   })));
 };
-export var Dropdown = function Dropdown(_ref15) {
+export var Dropdown = function Dropdown(_ref16) {
   var _item$required19, _item$disabled13, _item$required20, _item$helpClassName14;
-  var name = _ref15.name,
-    onChange = _ref15.onChange,
-    defaultValue = _ref15.defaultValue,
-    style = _ref15.style,
-    item = _ref15.item,
-    props = _objectWithoutProperties(_ref15, _excluded7);
+  var name = _ref16.name,
+    onChange = _ref16.onChange,
+    defaultValue = _ref16.defaultValue,
+    style = _ref16.style,
+    item = _ref16.item,
+    props = _objectWithoutProperties(_ref16, _excluded8);
   var methods = useFormContext();
   var onChangeHandler = function onChangeHandler(value) {
     if (onChange !== undefined) {
@@ -1318,19 +1346,19 @@ export var Dropdown = function Dropdown(_ref15) {
     name: name,
     rules: fieldRules
   };
-  controllerProps.render = function (_ref16) {
-    var _ref16$field = _ref16.field,
-      _onChange7 = _ref16$field.onChange,
-      onBlur = _ref16$field.onBlur,
-      value = _ref16$field.value,
-      name = _ref16$field.name,
-      ref = _ref16$field.ref,
-      _ref16$fieldState = _ref16.fieldState,
-      invalid = _ref16$fieldState.invalid,
-      isTouched = _ref16$fieldState.isTouched,
-      isDirty = _ref16$fieldState.isDirty,
-      error = _ref16$fieldState.error,
-      formState = _ref16.formState;
+  controllerProps.render = function (_ref17) {
+    var _ref17$field = _ref17.field,
+      _onChange7 = _ref17$field.onChange,
+      onBlur = _ref17$field.onBlur,
+      value = _ref17$field.value,
+      name = _ref17$field.name,
+      ref = _ref17$field.ref,
+      _ref17$fieldState = _ref17.fieldState,
+      invalid = _ref17$fieldState.invalid,
+      isTouched = _ref17$fieldState.isTouched,
+      isDirty = _ref17$fieldState.isDirty,
+      error = _ref17$fieldState.error,
+      formState = _ref17.formState;
     return /*#__PURE__*/React.createElement(Form.Select, _extends({
       onBlur: onBlur,
       onChange: function onChange(e) {
@@ -1647,14 +1675,14 @@ export var Signature = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 }(React.Component);
-export var Tags = function Tags(_ref18) {
+export var Tags = function Tags(_ref19) {
   var _item$required22, _item$disabled15, _item$required23, _item$helpClassName16;
-  var name = _ref18.name,
-    onChange = _ref18.onChange,
-    defaultValue = _ref18.defaultValue,
-    style = _ref18.style,
-    item = _ref18.item,
-    props = _objectWithoutProperties(_ref18, _excluded8);
+  var name = _ref19.name,
+    onChange = _ref19.onChange,
+    defaultValue = _ref19.defaultValue,
+    style = _ref19.style,
+    item = _ref19.item,
+    props = _objectWithoutProperties(_ref19, _excluded9);
   var methods = useFormContext();
   var onChangeHandler = function onChangeHandler(value) {
     if (onChange !== undefined) {
@@ -1700,19 +1728,19 @@ export var Tags = function Tags(_ref18) {
     name: name,
     rules: fieldRules
   };
-  controllerProps.render = function (_ref19) {
-    var _ref19$field = _ref19.field,
-      _onChange8 = _ref19$field.onChange,
-      onBlur = _ref19$field.onBlur,
-      value = _ref19$field.value,
-      name = _ref19$field.name,
-      ref = _ref19$field.ref,
-      _ref19$fieldState = _ref19.fieldState,
-      invalid = _ref19$fieldState.invalid,
-      isTouched = _ref19$fieldState.isTouched,
-      isDirty = _ref19$fieldState.isDirty,
-      error = _ref19$fieldState.error,
-      formState = _ref19.formState;
+  controllerProps.render = function (_ref20) {
+    var _ref20$field = _ref20.field,
+      _onChange8 = _ref20$field.onChange,
+      onBlur = _ref20$field.onBlur,
+      value = _ref20$field.value,
+      name = _ref20$field.name,
+      ref = _ref20$field.ref,
+      _ref20$fieldState = _ref20.fieldState,
+      invalid = _ref20$fieldState.invalid,
+      isTouched = _ref20$fieldState.isTouched,
+      isDirty = _ref20$fieldState.isDirty,
+      error = _ref20$fieldState.error,
+      formState = _ref20.formState;
     return /*#__PURE__*/React.createElement(Typeahead, _extends({
       labelKey: function labelKey(option) {
         return option.label;
@@ -1862,7 +1890,7 @@ export var Checkboxes = /*#__PURE__*/function (_React$Component2) {
   return _createClass(Checkboxes, [{
     key: "render",
     value: function render() {
-      var _ref20,
+      var _ref21,
         _self$props$name,
         _self$props,
         _self$props2,
@@ -1871,7 +1899,7 @@ export var Checkboxes = /*#__PURE__*/function (_React$Component2) {
         _this$props$item$help2,
         _this$props$item2;
       var self = this;
-      var name = (_ref20 = (_self$props$name = self === null || self === void 0 || (_self$props = self.props) === null || _self$props === void 0 ? void 0 : _self$props.name) !== null && _self$props$name !== void 0 ? _self$props$name : self === null || self === void 0 || (_self$props2 = self.props) === null || _self$props2 === void 0 || (_self$props2 = _self$props2.item) === null || _self$props2 === void 0 ? void 0 : _self$props2.customName) !== null && _ref20 !== void 0 ? _ref20 : self === null || self === void 0 || (_self$props3 = self.props) === null || _self$props3 === void 0 || (_self$props3 = _self$props3.item) === null || _self$props3 === void 0 ? void 0 : _self$props3.fieldName;
+      var name = (_ref21 = (_self$props$name = self === null || self === void 0 || (_self$props = self.props) === null || _self$props === void 0 ? void 0 : _self$props.name) !== null && _self$props$name !== void 0 ? _self$props$name : self === null || self === void 0 || (_self$props2 = self.props) === null || _self$props2 === void 0 || (_self$props2 = _self$props2.item) === null || _self$props2 === void 0 ? void 0 : _self$props2.customName) !== null && _ref21 !== void 0 ? _ref21 : self === null || self === void 0 || (_self$props3 = self.props) === null || _self$props3 === void 0 || (_self$props3 = _self$props3.item) === null || _self$props3 === void 0 ? void 0 : _self$props3.fieldName;
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
@@ -1899,8 +1927,10 @@ export var Checkboxes = /*#__PURE__*/function (_React$Component2) {
         htmlFor: name
       })), this.props.item.help ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form.Text, {
         className: (_this$props$item$help2 = (_this$props$item2 = this.props.item) === null || _this$props$item2 === void 0 ? void 0 : _this$props$item2.helpClassName) !== null && _this$props$item$help2 !== void 0 ? _this$props$item$help2 : 'text-muted'
-      }, this.props.item.help)) : null, this.props.item.options.map(function (option) {
-        var _this4$props$checkbox;
+      }, this.props.item.help)) : null, /*#__PURE__*/React.createElement(Row, {
+        className: "g-3"
+      }, this.props.item.options.map(function (option, index) {
+        var _ref22, _self$props$item$bgCo, _self$props4, _self$props5, _self$props6, _self$props7, _self$props8, _self$props9, _self$props10, _self$props11, _self$props12, _self$props13;
         var props = {};
         props.name = "option_".concat(option.key);
         props.value = option.value;
@@ -1909,10 +1939,14 @@ export var Checkboxes = /*#__PURE__*/function (_React$Component2) {
         if (self.props.item.disabled) {
           props.disabled = 'disabled';
         }
-        return /*#__PURE__*/React.createElement(ToggleButton, _extends({
+        return /*#__PURE__*/React.createElement(Col, {
+          key: "container_".concat(name, "_").concat(option.value),
+          xs: 12
+        }, /*#__PURE__*/React.createElement(ToggleButton, _extends({
           type: "checkbox",
-          variant: (_this4$props$checkbox = _this4.props.checkboxButtonClassName) !== null && _this4$props$checkbox !== void 0 ? _this4$props$checkbox : "outline-light",
-          className: "btn-survey-builder-checkbox w-100",
+          label: option.text,
+          variant: (_ref22 = (_self$props$item$bgCo = (_self$props4 = self.props) === null || _self$props4 === void 0 || (_self$props4 = _self$props4.item) === null || _self$props4 === void 0 ? void 0 : _self$props4.bgColor) !== null && _self$props$item$bgCo !== void 0 ? _self$props$item$bgCo : (_self$props5 = self.props) === null || _self$props5 === void 0 ? void 0 : _self$props5.checkboxButtonClassName) !== null && _ref22 !== void 0 ? _ref22 : "outline-light",
+          className: "btn-survey-builder-checkbox ".concat((_self$props6 = self.props) === null || _self$props6 === void 0 || (_self$props6 = _self$props6.item) === null || _self$props6 === void 0 ? void 0 : _self$props6.className, " ").concat(isBooleanTrue(checked) ? (_self$props7 = self.props) === null || _self$props7 === void 0 || (_self$props7 = _self$props7.item) === null || _self$props7 === void 0 ? void 0 : _self$props7.selectedClassName : (_self$props8 = self.props) === null || _self$props8 === void 0 || (_self$props8 = _self$props8.item) === null || _self$props8 === void 0 ? void 0 : _self$props8.unselectedClassName),
           key: "preview_".concat(option.key),
           id: name + '-' + ID.uuid(),
           inputRef: function inputRef(c) {
@@ -1924,17 +1958,28 @@ export var Checkboxes = /*#__PURE__*/function (_React$Component2) {
             self.onCheckboxChange(option.value, e);
           }
         }, props), /*#__PURE__*/React.createElement("div", {
-          className: "d-flex align-items-center justify-content-start text-black text-survey-builder-checkbox"
-        }, props.checked !== true && /*#__PURE__*/React.createElement(RiCheckboxBlankLine, {
-          size: "40px",
-          className: "me-3 flex-shrink-0"
-        }), props.checked === true && /*#__PURE__*/React.createElement(RiCheckboxFill, {
-          size: "40px",
-          className: "me-3 flex-shrink-0"
+          className: "d-flex flex-row align-items-center justify-content-between"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "w-100 d-flex align-items-center justify-content-start text-survey-builder-checkbox"
+        }, isBooleanFalse(props.checked) && /*#__PURE__*/React.createElement(RiCheckboxBlankLine, {
+          size: 30,
+          className: "me-3 flex-shrink-0 text-".concat((_self$props9 = self.props) === null || _self$props9 === void 0 || (_self$props9 = _self$props9.item) === null || _self$props9 === void 0 ? void 0 : _self$props9.unselectedColor)
+        }), isBooleanTrue(props.checked) && /*#__PURE__*/React.createElement(RiCheckboxFill, {
+          size: 30,
+          className: "me-3 flex-shrink-0 text-".concat((_self$props10 = self.props) === null || _self$props10 === void 0 || (_self$props10 = _self$props10.item) === null || _self$props10 === void 0 ? void 0 : _self$props10.selectedColor)
         }), /*#__PURE__*/React.createElement("div", {
-          className: "text-start"
-        }, option.text)));
-      }), /*#__PURE__*/React.createElement(ComponentErrorMessage, {
+          className: "d-flex flex-column"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "text-".concat((_self$props11 = self.props) === null || _self$props11 === void 0 || (_self$props11 = _self$props11.item) === null || _self$props11 === void 0 ? void 0 : _self$props11.textColor, " ").concat((_self$props12 = self.props) === null || _self$props12 === void 0 || (_self$props12 = _self$props12.item) === null || _self$props12 === void 0 ? void 0 : _self$props12.fieldLabelClassName)
+        }, option.text), isNotNullOrUndefined(option.description) && /*#__PURE__*/React.createElement("div", {
+          className: "".concat((_self$props13 = self.props) === null || _self$props13 === void 0 || (_self$props13 = _self$props13.item) === null || _self$props13 === void 0 ? void 0 : _self$props13.fieldDescriptionClassName)
+        }, option.description))), option.icon && /*#__PURE__*/React.createElement("div", {
+          className: "text-center me-2"
+        }, /*#__PURE__*/React.createElement(IconComponent, {
+          iconImportString: option.icon,
+          size: 50
+        })))));
+      })), /*#__PURE__*/React.createElement(ComponentErrorMessage, {
         name: name
       })));
     }
@@ -1952,13 +1997,18 @@ export var Checkbox = /*#__PURE__*/function (_React$Component3) {
   return _createClass(Checkbox, [{
     key: "render",
     value: function render() {
-      var _ref21,
+      var _ref23,
         _this$props$name,
         _this$props,
         _this$props2,
         _this$props3,
         _this6 = this,
-        _this$props$checkboxB,
+        _ref24,
+        _this$props$item$bgCo,
+        _this$props4,
+        _this$props5,
+        _self$props14,
+        _self,
         _this$props$item$help3,
         _this$props$item3;
       var baseClasses = 'SortableItem rfb-item';
@@ -1967,7 +2017,7 @@ export var Checkbox = /*#__PURE__*/function (_React$Component3) {
       }
       var props = {};
       // eslint-disable-next-line no-undef
-      props.name = (_ref21 = (_this$props$name = this === null || this === void 0 || (_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.name) !== null && _this$props$name !== void 0 ? _this$props$name : this === null || this === void 0 || (_this$props2 = this.props) === null || _this$props2 === void 0 || (_this$props2 = _this$props2.item) === null || _this$props2 === void 0 ? void 0 : _this$props2.customName) !== null && _ref21 !== void 0 ? _ref21 : this === null || this === void 0 || (_this$props3 = this.props) === null || _this$props3 === void 0 || (_this$props3 = _this$props3.item) === null || _this$props3 === void 0 ? void 0 : _this$props3.fieldName;
+      props.name = (_ref23 = (_this$props$name = this === null || this === void 0 || (_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.name) !== null && _this$props$name !== void 0 ? _this$props$name : this === null || this === void 0 || (_this$props2 = this.props) === null || _this$props2 === void 0 || (_this$props2 = _this$props2.item) === null || _this$props2 === void 0 ? void 0 : _this$props2.customName) !== null && _ref23 !== void 0 ? _ref23 : this === null || this === void 0 || (_this$props3 = this.props) === null || _this$props3 === void 0 || (_this$props3 = _this$props3.item) === null || _this$props3 === void 0 ? void 0 : _this$props3.fieldName;
       props.onChange = function (event) {
         if (_this6.props.onChange) {
           _this6.props.onChange(event.target.checked);
@@ -2010,8 +2060,8 @@ export var Checkbox = /*#__PURE__*/function (_React$Component3) {
         className: "form-label"
       }, this.props)), /*#__PURE__*/React.createElement(ToggleButton, _extends({
         type: "checkbox",
-        variant: (_this$props$checkboxB = this.props.checkboxButtonClassName) !== null && _this$props$checkboxB !== void 0 ? _this$props$checkboxB : "outline-light",
-        className: "btn-survey-builder-checkbox w-100",
+        variant: (_ref24 = (_this$props$item$bgCo = (_this$props4 = this.props) === null || _this$props4 === void 0 || (_this$props4 = _this$props4.item) === null || _this$props4 === void 0 ? void 0 : _this$props4.bgColor) !== null && _this$props$item$bgCo !== void 0 ? _this$props$item$bgCo : (_this$props5 = this.props) === null || _this$props5 === void 0 ? void 0 : _this$props5.checkboxButtonClassName) !== null && _ref24 !== void 0 ? _ref24 : "outline-light",
+        className: "btn-survey-builder-checkbox w-100 ".concat((_self$props14 = self.props) === null || _self$props14 === void 0 || (_self$props14 = _self$props14.item) === null || _self$props14 === void 0 ? void 0 : _self$props14.className),
         value: props.name,
         id: props.name + '-' + ID.uuid()
       }, props), /*#__PURE__*/React.createElement("div", {
@@ -2023,7 +2073,7 @@ export var Checkbox = /*#__PURE__*/function (_React$Component3) {
         size: "40px",
         className: "me-3 flex-shrink-0"
       }), /*#__PURE__*/React.createElement("div", {
-        className: "text-start"
+        className: "text-start text-".concat((_self = self) === null || _self === void 0 || (_self = _self.props) === null || _self === void 0 || (_self = _self.item) === null || _self === void 0 ? void 0 : _self.textColor)
       }, /*#__PURE__*/React.createElement("span", {
         dangerouslySetInnerHTML: {
           __html: this.props.item.boxLabel
@@ -2048,16 +2098,16 @@ export var RadioButtons = /*#__PURE__*/function (_React$Component4) {
   return _createClass(RadioButtons, [{
     key: "render",
     value: function render() {
-      var _ref22,
+      var _ref25,
         _self$props$name2,
-        _self$props4,
-        _self$props5,
-        _self$props6,
+        _self$props15,
+        _self$props16,
+        _self$props17,
         _this8 = this,
         _self$props$item$help,
         _self$props$item;
       var self = this;
-      var name = (_ref22 = (_self$props$name2 = self === null || self === void 0 || (_self$props4 = self.props) === null || _self$props4 === void 0 ? void 0 : _self$props4.name) !== null && _self$props$name2 !== void 0 ? _self$props$name2 : self === null || self === void 0 || (_self$props5 = self.props) === null || _self$props5 === void 0 || (_self$props5 = _self$props5.item) === null || _self$props5 === void 0 ? void 0 : _self$props5.customName) !== null && _ref22 !== void 0 ? _ref22 : self === null || self === void 0 || (_self$props6 = self.props) === null || _self$props6 === void 0 || (_self$props6 = _self$props6.item) === null || _self$props6 === void 0 ? void 0 : _self$props6.fieldName;
+      var name = (_ref25 = (_self$props$name2 = self === null || self === void 0 || (_self$props15 = self.props) === null || _self$props15 === void 0 ? void 0 : _self$props15.name) !== null && _self$props$name2 !== void 0 ? _self$props$name2 : self === null || self === void 0 || (_self$props16 = self.props) === null || _self$props16 === void 0 || (_self$props16 = _self$props16.item) === null || _self$props16 === void 0 ? void 0 : _self$props16.customName) !== null && _ref25 !== void 0 ? _ref25 : self === null || self === void 0 || (_self$props17 = self.props) === null || _self$props17 === void 0 || (_self$props17 = _self$props17.item) === null || _self$props17 === void 0 ? void 0 : _self$props17.fieldName;
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
@@ -2085,14 +2135,21 @@ export var RadioButtons = /*#__PURE__*/function (_React$Component4) {
         className: "form-group mb-3"
       }, /*#__PURE__*/React.createElement(ComponentLabel, self.props), self.props.item.help ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form.Text, {
         className: (_self$props$item$help = (_self$props$item = self.props.item) === null || _self$props$item === void 0 ? void 0 : _self$props$item.helpClassName) !== null && _self$props$item$help !== void 0 ? _self$props$item$help : 'text-muted'
-      }, self.props.item.help)) : null, self.props.item.options.map(function (option) {
-        var _self$props$checkboxB, _self$props7, _self$props8, _self$props12, _self$props13;
+      }, self.props.item.help)) : null, /*#__PURE__*/React.createElement(Row, {
+        className: "g-3"
+      }, self.props.item.options.map(function (option, index) {
+        var _self$props18, _self$props19, _ref26, _self$props$item$bgCo2, _self$props20, _self$props21, _self$props22, _self$props23, _self$props24, _self$props25, _self$props26, _self$props30, _self$props31, _self$props32, _self$props33, _self$props34, _self$props35, _self$props36, _self$props37, _self$props38, _self$props39, _self$props40, _self$props41, _self$props42, _self$props43;
         // console.log('option', option);
-        return /*#__PURE__*/React.createElement(ToggleButton, {
+        var checked = (self === null || self === void 0 || (_self$props18 = self.props) === null || _self$props18 === void 0 ? void 0 : _self$props18.value) === option.value;
+        var horizontal = isBooleanTrue((_self$props19 = self.props) === null || _self$props19 === void 0 || (_self$props19 = _self$props19.item) === null || _self$props19 === void 0 ? void 0 : _self$props19.inline);
+        return /*#__PURE__*/React.createElement(Col, {
+          key: "container_".concat(name, "_").concat(option.value),
+          xs: horizontal ? 6 : 12
+        }, /*#__PURE__*/React.createElement(ToggleButton, {
           label: option.text,
           type: "radio",
-          variant: (_self$props$checkboxB = self.props.checkboxButtonClassName) !== null && _self$props$checkboxB !== void 0 ? _self$props$checkboxB : "outline-light",
-          className: "btn-survey-builder-checkbox w-100",
+          variant: (_ref26 = (_self$props$item$bgCo2 = (_self$props20 = self.props) === null || _self$props20 === void 0 || (_self$props20 = _self$props20.item) === null || _self$props20 === void 0 ? void 0 : _self$props20.bgColor) !== null && _self$props$item$bgCo2 !== void 0 ? _self$props$item$bgCo2 : (_self$props21 = self.props) === null || _self$props21 === void 0 ? void 0 : _self$props21.checkboxButtonClassName) !== null && _ref26 !== void 0 ? _ref26 : "outline-light",
+          className: "btn-survey-builder-checkbox ".concat((_self$props22 = self.props) === null || _self$props22 === void 0 || (_self$props22 = _self$props22.item) === null || _self$props22 === void 0 ? void 0 : _self$props22.className, " ").concat(isBooleanTrue(checked) ? (_self$props23 = self.props) === null || _self$props23 === void 0 || (_self$props23 = _self$props23.item) === null || _self$props23 === void 0 ? void 0 : _self$props23.selectedClassName : (_self$props24 = self.props) === null || _self$props24 === void 0 || (_self$props24 = _self$props24.item) === null || _self$props24 === void 0 ? void 0 : _self$props24.unselectedClassName),
           key: "preview_".concat(option.key),
           id: name + '-' + ID.uuid(),
           inputRef: function inputRef(c) {
@@ -2100,36 +2157,92 @@ export var RadioButtons = /*#__PURE__*/function (_React$Component4) {
               self.options["child_ref_".concat(option.key)] = c;
             }
           },
-          disabled: self === null || self === void 0 || (_self$props7 = self.props) === null || _self$props7 === void 0 || (_self$props7 = _self$props7.item) === null || _self$props7 === void 0 ? void 0 : _self$props7.disabled,
+          disabled: self === null || self === void 0 || (_self$props25 = self.props) === null || _self$props25 === void 0 || (_self$props25 = _self$props25.item) === null || _self$props25 === void 0 ? void 0 : _self$props25.disabled,
           name: name,
           value: option.value,
-          checked: (self === null || self === void 0 || (_self$props8 = self.props) === null || _self$props8 === void 0 ? void 0 : _self$props8.value) === option.value,
+          checked: (self === null || self === void 0 || (_self$props26 = self.props) === null || _self$props26 === void 0 ? void 0 : _self$props26.value) === option.value,
           onChange: function onChange(e) {
-            var _self$props9, _self$props10, _self$props11;
+            var _self$props27, _self$props28, _self$props29;
             // console.log('onChange', e.target.value);
-            if ((self === null || self === void 0 || (_self$props9 = self.props) === null || _self$props9 === void 0 ? void 0 : _self$props9.onChange) !== undefined) {
+            if ((self === null || self === void 0 || (_self$props27 = self.props) === null || _self$props27 === void 0 ? void 0 : _self$props27.onChange) !== undefined) {
               self.props.onChange(e.target.value);
             }
-            if (isBooleanTrue(self === null || self === void 0 || (_self$props10 = self.props) === null || _self$props10 === void 0 || (_self$props10 = _self$props10.item) === null || _self$props10 === void 0 ? void 0 : _self$props10.submitOnSelection) && (self === null || self === void 0 || (_self$props11 = self.props) === null || _self$props11 === void 0 ? void 0 : _self$props11.onSelect) !== undefined) {
+            if (isBooleanTrue(self === null || self === void 0 || (_self$props28 = self.props) === null || _self$props28 === void 0 || (_self$props28 = _self$props28.item) === null || _self$props28 === void 0 ? void 0 : _self$props28.submitOnSelection) && (self === null || self === void 0 || (_self$props29 = self.props) === null || _self$props29 === void 0 ? void 0 : _self$props29.onSelect) !== undefined) {
               self.props.onSelect(e.target.value);
             }
           }
+        }, isBooleanTrue(horizontal) ? /*#__PURE__*/React.createElement(React.Fragment, null, option.icon && /*#__PURE__*/React.createElement("div", {
+          className: "text-center"
+        }, /*#__PURE__*/React.createElement(IconComponent, {
+          iconImportString: option.icon,
+          size: 80
+        })), option.image && /*#__PURE__*/React.createElement("div", {
+          className: "text-center mx-auto d-block",
+          style: {
+            height: 100,
+            width: 100
+          }
+        }, /*#__PURE__*/React.createElement(ImageComponent, {
+          src: option.image,
+          alt: option.text,
+          style: {
+            height: 100
+          },
+          className: "mx-auto d-block",
+          loading: "lazy"
+        })), /*#__PURE__*/React.createElement("div", {
+          className: "d-flex flex-row align-items-center justify-content-between"
         }, /*#__PURE__*/React.createElement("div", {
-          className: "d-flex align-items-center justify-content-start text-black text-survey-builder-checkbox"
-        }, (self === null || self === void 0 || (_self$props12 = self.props) === null || _self$props12 === void 0 ? void 0 : _self$props12.value) !== option.value && /*#__PURE__*/React.createElement(IoRadioButtonOff, {
-          size: "40px",
-          className: "me-3 flex-shrink-0"
-        }), (self === null || self === void 0 || (_self$props13 = self.props) === null || _self$props13 === void 0 ? void 0 : _self$props13.value) === option.value && /*#__PURE__*/React.createElement(IoRadioButtonOn, {
-          size: "40px",
-          className: "me-3 flex-shrink-0"
+          className: "w-100 d-flex align-items-center justify-content-center text-survey-builder-checkbox"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "d-flex flex-column"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "text-".concat(self === null || self === void 0 || (_self$props30 = self.props) === null || _self$props30 === void 0 || (_self$props30 = _self$props30.item) === null || _self$props30 === void 0 ? void 0 : _self$props30.textColor, " ").concat(self === null || self === void 0 || (_self$props31 = self.props) === null || _self$props31 === void 0 || (_self$props31 = _self$props31.item) === null || _self$props31 === void 0 ? void 0 : _self$props31.fieldLabelClassName, " text-center")
+        }, option.text), isNotNullOrUndefined(option.description) && /*#__PURE__*/React.createElement("div", {
+          className: "".concat(self === null || self === void 0 || (_self$props32 = self.props) === null || _self$props32 === void 0 || (_self$props32 = _self$props32.item) === null || _self$props32 === void 0 ? void 0 : _self$props32.fieldDescriptionClassName)
+        }, option.description), /*#__PURE__*/React.createElement("div", null, isBooleanTrue(self === null || self === void 0 || (_self$props33 = self.props) === null || _self$props33 === void 0 || (_self$props33 = _self$props33.item) === null || _self$props33 === void 0 ? void 0 : _self$props33.showRadio) && isBooleanFalse(checked) && /*#__PURE__*/React.createElement(IoRadioButtonOff, {
+          size: 30,
+          className: "flex-shrink-0 text-".concat(self === null || self === void 0 || (_self$props34 = self.props) === null || _self$props34 === void 0 || (_self$props34 = _self$props34.item) === null || _self$props34 === void 0 ? void 0 : _self$props34.unselectedColor)
+        }), isBooleanTrue(self === null || self === void 0 || (_self$props35 = self.props) === null || _self$props35 === void 0 || (_self$props35 = _self$props35.item) === null || _self$props35 === void 0 ? void 0 : _self$props35.showRadio) && isBooleanTrue(checked) && /*#__PURE__*/React.createElement(IoRadioButtonOn, {
+          size: 30,
+          className: "flex-shrink-0 text-".concat(self === null || self === void 0 || (_self$props36 = self.props) === null || _self$props36 === void 0 || (_self$props36 = _self$props36.item) === null || _self$props36 === void 0 ? void 0 : _self$props36.selectedColor)
+        })))))) : /*#__PURE__*/React.createElement("div", {
+          className: "d-flex flex-row align-items-center justify-content-between"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "w-100 d-flex align-items-center justify-content-start text-survey-builder-checkbox"
+        }, isBooleanTrue(self === null || self === void 0 || (_self$props37 = self.props) === null || _self$props37 === void 0 || (_self$props37 = _self$props37.item) === null || _self$props37 === void 0 ? void 0 : _self$props37.showRadio) && isBooleanFalse(checked) && /*#__PURE__*/React.createElement(IoRadioButtonOff, {
+          size: 30,
+          className: "me-3 flex-shrink-0 text-".concat(self === null || self === void 0 || (_self$props38 = self.props) === null || _self$props38 === void 0 || (_self$props38 = _self$props38.item) === null || _self$props38 === void 0 ? void 0 : _self$props38.unselectedColor)
+        }), isBooleanTrue(self === null || self === void 0 || (_self$props39 = self.props) === null || _self$props39 === void 0 || (_self$props39 = _self$props39.item) === null || _self$props39 === void 0 ? void 0 : _self$props39.showRadio) && isBooleanTrue(checked) && /*#__PURE__*/React.createElement(IoRadioButtonOn, {
+          size: 30,
+          className: "me-3 flex-shrink-0 text-".concat(self === null || self === void 0 || (_self$props40 = self.props) === null || _self$props40 === void 0 || (_self$props40 = _self$props40.item) === null || _self$props40 === void 0 ? void 0 : _self$props40.selectedColor)
         }), /*#__PURE__*/React.createElement("div", {
-          className: "text-start"
-        }, /*#__PURE__*/React.createElement("span", {
-          dangerouslySetInnerHTML: {
-            __html: option.text
+          className: "d-flex flex-column"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "text-".concat(self === null || self === void 0 || (_self$props41 = self.props) === null || _self$props41 === void 0 || (_self$props41 = _self$props41.item) === null || _self$props41 === void 0 ? void 0 : _self$props41.textColor, " ").concat(self === null || self === void 0 || (_self$props42 = self.props) === null || _self$props42 === void 0 || (_self$props42 = _self$props42.item) === null || _self$props42 === void 0 ? void 0 : _self$props42.fieldLabelClassName)
+        }, option.text), isNotNullOrUndefined(option.description) && /*#__PURE__*/React.createElement("div", {
+          className: "".concat(self === null || self === void 0 || (_self$props43 = self.props) === null || _self$props43 === void 0 || (_self$props43 = _self$props43.item) === null || _self$props43 === void 0 ? void 0 : _self$props43.fieldDescriptionClassName)
+        }, option.description))), option.icon && /*#__PURE__*/React.createElement("div", {
+          className: "text-center me-2"
+        }, /*#__PURE__*/React.createElement(IconComponent, {
+          iconImportString: option.icon,
+          size: 50
+        })), option.image && /*#__PURE__*/React.createElement("div", {
+          className: "text-center me-2",
+          style: {
+            height: 40,
+            width: 40
           }
-        }))));
-      }), /*#__PURE__*/React.createElement(ComponentErrorMessage, {
+        }, /*#__PURE__*/React.createElement(ImageComponent, {
+          src: option.image,
+          alt: option.label,
+          style: {
+            height: 40
+          },
+          className: "mx-auto d-block",
+          loading: "lazy"
+        })))));
+      })), /*#__PURE__*/React.createElement(ComponentErrorMessage, {
         name: name
       })));
     }
@@ -2147,16 +2260,16 @@ export var ButtonList = /*#__PURE__*/function (_React$Component5) {
   return _createClass(ButtonList, [{
     key: "render",
     value: function render() {
-      var _ref23,
+      var _ref27,
         _self$props$name3,
-        _self$props14,
-        _self$props15,
-        _self$props16,
+        _self$props44,
+        _self$props45,
+        _self$props46,
         _this10 = this,
         _self$props$item$help2,
         _self$props$item2;
       var self = this;
-      var name = (_ref23 = (_self$props$name3 = self === null || self === void 0 || (_self$props14 = self.props) === null || _self$props14 === void 0 ? void 0 : _self$props14.name) !== null && _self$props$name3 !== void 0 ? _self$props$name3 : self === null || self === void 0 || (_self$props15 = self.props) === null || _self$props15 === void 0 || (_self$props15 = _self$props15.item) === null || _self$props15 === void 0 ? void 0 : _self$props15.customName) !== null && _ref23 !== void 0 ? _ref23 : self === null || self === void 0 || (_self$props16 = self.props) === null || _self$props16 === void 0 || (_self$props16 = _self$props16.item) === null || _self$props16 === void 0 ? void 0 : _self$props16.fieldName;
+      var name = (_ref27 = (_self$props$name3 = self === null || self === void 0 || (_self$props44 = self.props) === null || _self$props44 === void 0 ? void 0 : _self$props44.name) !== null && _self$props$name3 !== void 0 ? _self$props$name3 : self === null || self === void 0 || (_self$props45 = self.props) === null || _self$props45 === void 0 || (_self$props45 = _self$props45.item) === null || _self$props45 === void 0 ? void 0 : _self$props45.customName) !== null && _ref27 !== void 0 ? _ref27 : self === null || self === void 0 || (_self$props46 = self.props) === null || _self$props46 === void 0 || (_self$props46 = _self$props46.item) === null || _self$props46 === void 0 ? void 0 : _self$props46.fieldName;
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
@@ -2184,14 +2297,21 @@ export var ButtonList = /*#__PURE__*/function (_React$Component5) {
         className: "form-group mb-3"
       }, /*#__PURE__*/React.createElement(ComponentLabel, self.props), self.props.item.help ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form.Text, {
         className: (_self$props$item$help2 = (_self$props$item2 = self.props.item) === null || _self$props$item2 === void 0 ? void 0 : _self$props$item2.helpClassName) !== null && _self$props$item$help2 !== void 0 ? _self$props$item$help2 : 'text-muted'
-      }, self.props.item.help)) : null, self.props.item.options.map(function (option) {
-        var _self$props$checkboxB2, _self$props17, _self$props18;
+      }, self.props.item.help)) : null, /*#__PURE__*/React.createElement(Row, {
+        className: "g-3"
+      }, self.props.item.options.map(function (option, index) {
+        var _self$props47, _self$props48, _ref28, _self$props$item$bgCo3, _self$props49, _self$props50, _self$props51, _self$props52, _self$props53, _self$props54, _self$props55, _self$props59, _self$props60, _self$props61, _self$props62, _self$props63, _self$props64, _self$props65, _self$props66, _self$props67, _self$props68, _self$props69, _self$props70, _self$props71, _self$props72;
         // console.log('option', option);
-        return /*#__PURE__*/React.createElement(ToggleButton, {
+        var checked = (self === null || self === void 0 || (_self$props47 = self.props) === null || _self$props47 === void 0 ? void 0 : _self$props47.value) === option.value;
+        var horizontal = isBooleanTrue((_self$props48 = self.props) === null || _self$props48 === void 0 || (_self$props48 = _self$props48.item) === null || _self$props48 === void 0 ? void 0 : _self$props48.inline);
+        return /*#__PURE__*/React.createElement(Col, {
+          key: "container_".concat(name, "_").concat(option.value),
+          xs: horizontal ? 6 : 12
+        }, /*#__PURE__*/React.createElement(ToggleButton, {
           label: option.text,
           type: "radio",
-          variant: (_self$props$checkboxB2 = self.props.checkboxButtonClassName) !== null && _self$props$checkboxB2 !== void 0 ? _self$props$checkboxB2 : "outline-light",
-          className: "btn-survey-builder-checkbox w-100",
+          variant: (_ref28 = (_self$props$item$bgCo3 = (_self$props49 = self.props) === null || _self$props49 === void 0 || (_self$props49 = _self$props49.item) === null || _self$props49 === void 0 ? void 0 : _self$props49.bgColor) !== null && _self$props$item$bgCo3 !== void 0 ? _self$props$item$bgCo3 : (_self$props50 = self.props) === null || _self$props50 === void 0 ? void 0 : _self$props50.checkboxButtonClassName) !== null && _ref28 !== void 0 ? _ref28 : "outline-light",
+          className: "btn-survey-builder-checkbox ".concat((_self$props51 = self.props) === null || _self$props51 === void 0 || (_self$props51 = _self$props51.item) === null || _self$props51 === void 0 ? void 0 : _self$props51.className, " ").concat(isBooleanTrue(checked) ? (_self$props52 = self.props) === null || _self$props52 === void 0 || (_self$props52 = _self$props52.item) === null || _self$props52 === void 0 ? void 0 : _self$props52.selectedClassName : (_self$props53 = self.props) === null || _self$props53 === void 0 || (_self$props53 = _self$props53.item) === null || _self$props53 === void 0 ? void 0 : _self$props53.unselectedClassName),
           key: "preview_".concat(option.key),
           id: name + '-' + ID.uuid(),
           inputRef: function inputRef(c) {
@@ -2199,30 +2319,92 @@ export var ButtonList = /*#__PURE__*/function (_React$Component5) {
               self.options["child_ref_".concat(option.key)] = c;
             }
           },
-          disabled: self === null || self === void 0 || (_self$props17 = self.props) === null || _self$props17 === void 0 || (_self$props17 = _self$props17.item) === null || _self$props17 === void 0 ? void 0 : _self$props17.disabled,
+          disabled: self === null || self === void 0 || (_self$props54 = self.props) === null || _self$props54 === void 0 || (_self$props54 = _self$props54.item) === null || _self$props54 === void 0 ? void 0 : _self$props54.disabled,
           name: name,
           value: option.value,
-          checked: (self === null || self === void 0 || (_self$props18 = self.props) === null || _self$props18 === void 0 ? void 0 : _self$props18.value) === option.value,
+          checked: (self === null || self === void 0 || (_self$props55 = self.props) === null || _self$props55 === void 0 ? void 0 : _self$props55.value) === option.value,
           onChange: function onChange(e) {
-            var _self$props19, _self$props20, _self$props21;
+            var _self$props56, _self$props57, _self$props58;
             // console.log('onChange', e.target.value);
-            if ((self === null || self === void 0 || (_self$props19 = self.props) === null || _self$props19 === void 0 ? void 0 : _self$props19.onChange) !== undefined) {
+            if ((self === null || self === void 0 || (_self$props56 = self.props) === null || _self$props56 === void 0 ? void 0 : _self$props56.onChange) !== undefined) {
               self.props.onChange(e.target.value);
             }
-            if (isBooleanTrue(self === null || self === void 0 || (_self$props20 = self.props) === null || _self$props20 === void 0 || (_self$props20 = _self$props20.item) === null || _self$props20 === void 0 ? void 0 : _self$props20.submitOnSelection) && (self === null || self === void 0 || (_self$props21 = self.props) === null || _self$props21 === void 0 ? void 0 : _self$props21.onSelect) !== undefined) {
+            if (isBooleanTrue(self === null || self === void 0 || (_self$props57 = self.props) === null || _self$props57 === void 0 || (_self$props57 = _self$props57.item) === null || _self$props57 === void 0 ? void 0 : _self$props57.submitOnSelection) && (self === null || self === void 0 || (_self$props58 = self.props) === null || _self$props58 === void 0 ? void 0 : _self$props58.onSelect) !== undefined) {
               self.props.onSelect(e.target.value);
             }
           }
+        }, isBooleanTrue(horizontal) ? /*#__PURE__*/React.createElement(React.Fragment, null, option.icon && /*#__PURE__*/React.createElement("div", {
+          className: "text-center"
+        }, /*#__PURE__*/React.createElement(IconComponent, {
+          iconImportString: option.icon,
+          size: 80
+        })), option.image && /*#__PURE__*/React.createElement("div", {
+          className: "text-center mx-auto d-block",
+          style: {
+            height: 100,
+            width: 100
+          }
+        }, /*#__PURE__*/React.createElement(ImageComponent, {
+          src: option.image,
+          alt: option.text,
+          style: {
+            height: 100
+          },
+          className: "mx-auto d-block",
+          loading: "lazy"
+        })), /*#__PURE__*/React.createElement("div", {
+          className: "d-flex flex-row align-items-center justify-content-between"
         }, /*#__PURE__*/React.createElement("div", {
-          className: "d-flex align-items-center justify-content-start text-black text-survey-builder-checkbox"
+          className: "w-100 d-flex align-items-center justify-content-center text-survey-builder-checkbox"
         }, /*#__PURE__*/React.createElement("div", {
-          className: "text-start"
-        }, /*#__PURE__*/React.createElement("span", {
-          dangerouslySetInnerHTML: {
-            __html: option.text
+          className: "d-flex flex-column"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "text-".concat(self === null || self === void 0 || (_self$props59 = self.props) === null || _self$props59 === void 0 || (_self$props59 = _self$props59.item) === null || _self$props59 === void 0 ? void 0 : _self$props59.textColor, " ").concat(self === null || self === void 0 || (_self$props60 = self.props) === null || _self$props60 === void 0 || (_self$props60 = _self$props60.item) === null || _self$props60 === void 0 ? void 0 : _self$props60.fieldLabelClassName, " text-center")
+        }, option.text), isNotNullOrUndefined(option.description) && /*#__PURE__*/React.createElement("div", {
+          className: "".concat(self === null || self === void 0 || (_self$props61 = self.props) === null || _self$props61 === void 0 || (_self$props61 = _self$props61.item) === null || _self$props61 === void 0 ? void 0 : _self$props61.fieldDescriptionClassName)
+        }, option.description), /*#__PURE__*/React.createElement("div", null, isBooleanTrue(self === null || self === void 0 || (_self$props62 = self.props) === null || _self$props62 === void 0 || (_self$props62 = _self$props62.item) === null || _self$props62 === void 0 ? void 0 : _self$props62.showRadio) && isBooleanFalse(checked) && /*#__PURE__*/React.createElement(IoRadioButtonOff, {
+          size: 30,
+          className: "flex-shrink-0 text-".concat(self === null || self === void 0 || (_self$props63 = self.props) === null || _self$props63 === void 0 || (_self$props63 = _self$props63.item) === null || _self$props63 === void 0 ? void 0 : _self$props63.unselectedColor)
+        }), isBooleanTrue(self === null || self === void 0 || (_self$props64 = self.props) === null || _self$props64 === void 0 || (_self$props64 = _self$props64.item) === null || _self$props64 === void 0 ? void 0 : _self$props64.showRadio) && isBooleanTrue(checked) && /*#__PURE__*/React.createElement(IoRadioButtonOn, {
+          size: 30,
+          className: "flex-shrink-0 text-".concat(self === null || self === void 0 || (_self$props65 = self.props) === null || _self$props65 === void 0 || (_self$props65 = _self$props65.item) === null || _self$props65 === void 0 ? void 0 : _self$props65.selectedColor)
+        })))))) : /*#__PURE__*/React.createElement("div", {
+          className: "d-flex flex-row align-items-center justify-content-between"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "w-100 d-flex align-items-center justify-content-start text-survey-builder-checkbox"
+        }, isBooleanTrue(self === null || self === void 0 || (_self$props66 = self.props) === null || _self$props66 === void 0 || (_self$props66 = _self$props66.item) === null || _self$props66 === void 0 ? void 0 : _self$props66.showRadio) && isBooleanFalse(checked) && /*#__PURE__*/React.createElement(IoRadioButtonOff, {
+          size: 30,
+          className: "me-3 flex-shrink-0 text-".concat(self === null || self === void 0 || (_self$props67 = self.props) === null || _self$props67 === void 0 || (_self$props67 = _self$props67.item) === null || _self$props67 === void 0 ? void 0 : _self$props67.unselectedColor)
+        }), isBooleanTrue(self === null || self === void 0 || (_self$props68 = self.props) === null || _self$props68 === void 0 || (_self$props68 = _self$props68.item) === null || _self$props68 === void 0 ? void 0 : _self$props68.showRadio) && isBooleanTrue(checked) && /*#__PURE__*/React.createElement(IoRadioButtonOn, {
+          size: 30,
+          className: "me-3 flex-shrink-0 text-".concat(self === null || self === void 0 || (_self$props69 = self.props) === null || _self$props69 === void 0 || (_self$props69 = _self$props69.item) === null || _self$props69 === void 0 ? void 0 : _self$props69.selectedColor)
+        }), /*#__PURE__*/React.createElement("div", {
+          className: "d-flex flex-column"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "text-".concat(self === null || self === void 0 || (_self$props70 = self.props) === null || _self$props70 === void 0 || (_self$props70 = _self$props70.item) === null || _self$props70 === void 0 ? void 0 : _self$props70.textColor, " ").concat(self === null || self === void 0 || (_self$props71 = self.props) === null || _self$props71 === void 0 || (_self$props71 = _self$props71.item) === null || _self$props71 === void 0 ? void 0 : _self$props71.fieldLabelClassName)
+        }, option.text), isNotNullOrUndefined(option.description) && /*#__PURE__*/React.createElement("div", {
+          className: "".concat(self === null || self === void 0 || (_self$props72 = self.props) === null || _self$props72 === void 0 || (_self$props72 = _self$props72.item) === null || _self$props72 === void 0 ? void 0 : _self$props72.fieldDescriptionClassName)
+        }, option.description))), option.icon && /*#__PURE__*/React.createElement("div", {
+          className: "text-center me-2"
+        }, /*#__PURE__*/React.createElement(IconComponent, {
+          iconImportString: option.icon,
+          size: 50
+        })), option.image && /*#__PURE__*/React.createElement("div", {
+          className: "text-center me-2",
+          style: {
+            height: 40,
+            width: 40
           }
-        }))));
-      }), /*#__PURE__*/React.createElement(ComponentErrorMessage, {
+        }, /*#__PURE__*/React.createElement(ImageComponent, {
+          src: option.image,
+          alt: option.label,
+          style: {
+            height: 40
+          },
+          className: "mx-auto d-block",
+          loading: "lazy"
+        })))));
+      })), /*#__PURE__*/React.createElement(ComponentErrorMessage, {
         name: name
       })));
     }
@@ -2247,14 +2429,14 @@ export var Image = function Image(props) {
     className: "no-image"
   }, "No Image"));
 };
-export var Rating = function Rating(_ref24) {
+export var Rating = function Rating(_ref29) {
   var _item$required25, _item$disabled17, _item$required26, _item$helpClassName18;
-  var name = _ref24.name,
-    onChange = _ref24.onChange,
-    value = _ref24.value,
-    style = _ref24.style,
-    item = _ref24.item,
-    props = _objectWithoutProperties(_ref24, _excluded9);
+  var name = _ref29.name,
+    onChange = _ref29.onChange,
+    value = _ref29.value,
+    style = _ref29.style,
+    item = _ref29.item,
+    props = _objectWithoutProperties(_ref29, _excluded10);
   var methods = useFormContext();
   var onChangeHandler = function onChangeHandler(value) {
     if (onChange !== undefined) {
@@ -2276,23 +2458,23 @@ export var Rating = function Rating(_ref24) {
     name: name,
     rules: fieldRules
   };
-  controllerProps.render = function (_ref25) {
-    var _ref25$field = _ref25.field,
-      onChange = _ref25$field.onChange,
-      onBlur = _ref25$field.onBlur,
-      value = _ref25$field.value,
-      name = _ref25$field.name,
-      ref = _ref25$field.ref,
-      _ref25$fieldState = _ref25.fieldState,
-      invalid = _ref25$fieldState.invalid,
-      isTouched = _ref25$fieldState.isTouched,
-      isDirty = _ref25$fieldState.isDirty,
-      error = _ref25$fieldState.error,
-      formState = _ref25.formState;
+  controllerProps.render = function (_ref30) {
+    var _ref30$field = _ref30.field,
+      onChange = _ref30$field.onChange,
+      onBlur = _ref30$field.onBlur,
+      value = _ref30$field.value,
+      name = _ref30$field.name,
+      ref = _ref30$field.ref,
+      _ref30$fieldState = _ref30.fieldState,
+      invalid = _ref30$fieldState.invalid,
+      isTouched = _ref30$fieldState.isTouched,
+      isDirty = _ref30$fieldState.isDirty,
+      error = _ref30$fieldState.error,
+      formState = _ref30.formState;
     return /*#__PURE__*/React.createElement(StarRating, _extends({
       onBlur: onBlur,
-      onRatingClick: function onRatingClick(event, _ref26) {
-        var rating = _ref26.rating;
+      onRatingClick: function onRatingClick(event, _ref31) {
+        var rating = _ref31.rating;
         onChange(rating);
         onChangeHandler(rating);
       },
@@ -2334,8 +2516,8 @@ export var Rating = function Rating(_ref24) {
       className: item === null || item === void 0 ? void 0 : item.labelClassName,
       htmlFor: name
     }), /*#__PURE__*/React.createElement(StarRating, _extends({
-      onRatingClick: function onRatingClick(event, _ref27) {
-        var rating = _ref27.rating;
+      onRatingClick: function onRatingClick(event, _ref32) {
+        var rating = _ref32.rating;
         onChange(rating);
         onChangeHandler(rating);
       },
@@ -2444,9 +2626,9 @@ export var Camera = /*#__PURE__*/function (_React$Component6) {
   _inherits(Camera, _React$Component6);
   return _createClass(Camera, [{
     key: "getImageSizeProps",
-    value: function getImageSizeProps(_ref28) {
-      var width = _ref28.width,
-        height = _ref28.height;
+    value: function getImageSizeProps(_ref33) {
+      var width = _ref33.width,
+        height = _ref33.height;
       var imgProps = {
         width: '100%'
       };
@@ -2461,7 +2643,7 @@ export var Camera = /*#__PURE__*/function (_React$Component6) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props$checkboxB2, _this$props4, _this$props$item$help4, _this$props$item4;
+      var _this$props$checkboxB, _this$props6, _this$props$item$help4, _this$props$item4;
       var imageStyle = {
         objectFit: 'scale-down',
         objectPosition: this.props.item.center ? 'center' : 'left'
@@ -2519,7 +2701,7 @@ export var Camera = /*#__PURE__*/function (_React$Component6) {
       }, props)), /*#__PURE__*/React.createElement("div", {
         className: "image-upload-control d-grid gap-2 w-100"
       }, /*#__PURE__*/React.createElement(Button, {
-        variant: (_this$props$checkboxB2 = (_this$props4 = this.props) === null || _this$props4 === void 0 ? void 0 : _this$props4.checkboxButtonClassName) !== null && _this$props$checkboxB2 !== void 0 ? _this$props$checkboxB2 : "outline-dark",
+        variant: (_this$props$checkboxB = (_this$props6 = this.props) === null || _this$props6 === void 0 ? void 0 : _this$props6.checkboxButtonClassName) !== null && _this$props$checkboxB !== void 0 ? _this$props$checkboxB : "outline-dark",
         className: "d-flex align-items-center justify-content-between fw-bold",
         size: "lg"
       }, "Take Photo ", /*#__PURE__*/React.createElement(FaCamera, null)))), this.props.value && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -2566,7 +2748,7 @@ export var FileUpload = /*#__PURE__*/function (_React$Component7) {
       }
     });
     _defineProperty(_this12, "saveFile", /*#__PURE__*/function () {
-      var _ref29 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(e) {
+      var _ref34 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(e) {
         var sourceUrl, response, dispositionHeader, resBlob, blob, fileName, _fileName;
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -2607,7 +2789,7 @@ export var FileUpload = /*#__PURE__*/function (_React$Component7) {
         }, _callee2);
       }));
       return function (_x) {
-        return _ref29.apply(this, arguments);
+        return _ref34.apply(this, arguments);
       };
     }());
     _this12.inputField = /*#__PURE__*/React.createRef();