@insticc/genericform 2.0.7 → 2.1.0

package/build/FormFields/CustomJson.js

@@ -43,7 +43,7 @@ var CustomJson = function CustomJson(_ref) {
   var _onChange = _ref.onChange,
     onValidate = _ref.onValidate,
     name = _ref.name,
-    displayName = _ref.displayName,
+    label = _ref.label,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? "" : _ref$value,
     _ref$disabled = _ref.disabled,
@@ -85,7 +85,15 @@ var CustomJson = function CustomJson(_ref) {
     className: "ufg-field-group",
     id: name,
     style: mainDivStyle,
-    children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), allowModeSwitch && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [(0, _defaults.labelJsx)({
+      name: name,
+      labelStyle: labelStyle,
+      label: label,
+      required: required,
+      spanStyle: spanStyle,
+      showHelp: showHelp,
+      helpText: helpText
+    }), allowModeSwitch && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "ufg-json-mode-selector",
       children: ["single", "multiple"].map(function (m) {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
@@ -130,7 +138,7 @@ CustomJson.propTypes = {
   onChange: _propTypes["default"].func.isRequired,
   onValidate: _propTypes["default"].func,
   name: _propTypes["default"].string.isRequired,
-  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   value: _propTypes["default"].any,
   disabled: _propTypes["default"].bool,
   required: _propTypes["default"].bool,

package/build/FormFields/CustomLabel.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
  * Static label — no onChange / value / validation.
  */var CustomLabel = function CustomLabel(_ref) {
   var name = _ref.name,
-    displayName = _ref.displayName,
+    label = _ref.label,
     _ref$mainDivStyle = _ref.mainDivStyle,
     mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle,
     _ref$labelStyle = _ref.labelStyle,
@@ -22,12 +22,17 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
     className: "ufg-field-group",
     id: name,
     style: mainDivStyle,
-    children: (0, _defaults.labelJsx)(name, labelStyle, displayName)
+    children: (0, _defaults.labelJsx)({
+      name: name,
+      labelStyle: labelStyle,
+      label: label,
+      disableHtmlFor: true
+    })
   });
 };
 CustomLabel.propTypes = {
   name: _propTypes["default"].string.isRequired,
-  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   mainDivStyle: _propTypes["default"].object,
   labelStyle: _propTypes["default"].object
 };

package/build/FormFields/CustomMobilePhone.js

@@ -0,0 +1,166 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _defaults = require("./defaults");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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(r) { if (Array.isArray(r)) return r; }
+var COUNTRY_CODES = [{
+  label: "🇵🇹 +351",
+  value: "+351"
+}, {
+  label: "🇪🇸 +34",
+  value: "+34"
+}, {
+  label: "🇬🇧 +44",
+  value: "+44"
+}, {
+  label: "🇺🇸 +1",
+  value: "+1"
+}, {
+  label: "🇫🇷 +33",
+  value: "+33"
+}, {
+  label: "🇩🇪 +49",
+  value: "+49"
+}
+// ...
+];
+
+/**
+ * Mobile phone input with country code selector.
+ * value format: "+351 916999999"
+ * onChange(value, name) — same signature as other custom inputs.
+ */
+var CustomMobilePhone = function CustomMobilePhone(_ref) {
+  var onChange = _ref.onChange,
+    name = _ref.name,
+    label = _ref.label,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "" : _ref$value,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "912 345 678" : _ref$placeholder,
+    error = _ref.error,
+    _ref$tooltip = _ref.tooltip,
+    tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
+    _ref$showHelp = _ref.showHelp,
+    showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
+    _ref$helpText = _ref.helpText,
+    helpText = _ref$helpText === void 0 ? "" : _ref$helpText,
+    _ref$mainDivStyle = _ref.mainDivStyle,
+    mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle,
+    _ref$labelStyle = _ref.labelStyle,
+    labelStyle = _ref$labelStyle === void 0 ? {} : _ref$labelStyle,
+    _ref$spanStyle = _ref.spanStyle,
+    spanStyle = _ref$spanStyle === void 0 ? {} : _ref$spanStyle,
+    _ref$inputStyle = _ref.inputStyle,
+    inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
+    _ref$tooltipStyle = _ref.tooltipStyle,
+    tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle,
+    _ref$countryCodes = _ref.countryCodes,
+    countryCodes = _ref$countryCodes === void 0 ? COUNTRY_CODES : _ref$countryCodes,
+    _ref$defaultCountryCo = _ref.defaultCountryCode,
+    defaultCountryCode = _ref$defaultCountryCo === void 0 ? "+351" : _ref$defaultCountryCo;
+  // Split stored value into prefix + local number
+  var _ref2 = function () {
+      if (!value) return [defaultCountryCode, ""];
+      var found = countryCodes.find(function (c) {
+        return value.startsWith(c.value);
+      });
+      if (found) return [found.value, value.slice(found.value.length)];
+      return [defaultCountryCode, value];
+    }(),
+    _ref3 = _slicedToArray(_ref2, 2),
+    prefix = _ref3[0],
+    localNumber = _ref3[1];
+  var handlePrefixChange = (0, _react.useCallback)(function (e) {
+    return onChange === null || onChange === void 0 ? void 0 : onChange(name, "".concat(e.target.value).concat(localNumber));
+  }, [onChange, name, localNumber]);
+  var handleNumberChange = (0, _react.useCallback)(function (e) {
+    var digits = e.target.value.replace(/[^\d]/g, "");
+    onChange === null || onChange === void 0 || onChange(name, "".concat(prefix).concat(digits));
+  }, [onChange, name, prefix]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "ufg-field-group",
+    id: "form-telDiv-".concat(name),
+    style: mainDivStyle,
+    children: [(0, _defaults.labelJsx)({
+      name: name,
+      labelStyle: labelStyle,
+      label: label,
+      required: required,
+      spanStyle: spanStyle,
+      showHelp: showHelp,
+      helpText: helpText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        display: "flex",
+        gap: "8px"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
+        value: prefix,
+        disabled: disabled,
+        onChange: handlePrefixChange,
+        className: "ufg-input".concat(error ? " error" : ""),
+        style: {
+          width: "110px",
+          flexShrink: 0
+        },
+        children: countryCodes.map(function (c) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+            value: c.value,
+            children: c.label
+          }, c.value);
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        id: "form-input-".concat(name),
+        type: "tel",
+        value: localNumber,
+        disabled: disabled,
+        required: required,
+        placeholder: placeholder,
+        onChange: handleNumberChange,
+        className: "ufg-input".concat(error ? " error" : ""),
+        style: inputStyle
+      })]
+    }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
+  });
+};
+CustomMobilePhone.propTypes = {
+  onChange: _propTypes["default"].func.isRequired,
+  name: _propTypes["default"].string.isRequired,
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  value: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  required: _propTypes["default"].bool,
+  placeholder: _propTypes["default"].string,
+  error: _propTypes["default"].string,
+  tooltip: _propTypes["default"].string,
+  showHelp: _propTypes["default"].bool,
+  helpText: _propTypes["default"].string,
+  mainDivStyle: _propTypes["default"].object,
+  labelStyle: _propTypes["default"].object,
+  spanStyle: _propTypes["default"].object,
+  inputStyle: _propTypes["default"].object,
+  tooltipStyle: _propTypes["default"].object,
+  countryCodes: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    label: _propTypes["default"].string.isRequired,
+    value: _propTypes["default"].string.isRequired
+  })),
+  defaultCountryCode: _propTypes["default"].string
+};
+var _default = exports["default"] = CustomMobilePhone;

package/build/FormFields/CustomMultiDropdown.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
  */var CustomMultiDropdown = function CustomMultiDropdown(_ref) {
   var onChange = _ref.onChange,
     name = _ref.name,
-    displayName = _ref.displayName,
+    label = _ref.label,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? [] : _ref$value,
     _ref$options = _ref.options,
@@ -50,11 +50,19 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
     className: "ufg-field-group",
     id: name,
     style: mainDivStyle,
-    children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Dropdown, {
+    children: [(0, _defaults.labelJsx)({
+      name: name,
+      labelStyle: labelStyle,
+      label: label,
+      required: required,
+      spanStyle: spanStyle,
+      showHelp: showHelp,
+      helpText: helpText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Dropdown, {
       id: "form-input-".concat(name),
       name: name,
       style: inputStyle,
-      placeholder: placeholder || "Select ".concat(displayName || name),
+      placeholder: placeholder || "Select ".concat(label || name),
       fluid: true,
       multiple: true,
       selection: true,
@@ -70,7 +78,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
 CustomMultiDropdown.propTypes = {
   onChange: _propTypes["default"].func.isRequired,
   name: _propTypes["default"].string.isRequired,
-  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   value: _propTypes["default"].array,
   options: _propTypes["default"].array.isRequired,
   placeholder: _propTypes["default"].string,

package/build/FormFields/CustomNumberInput.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
 var CustomNumberInput = function CustomNumberInput(_ref) {
   var onChange = _ref.onChange,
     name = _ref.name,
-    displayName = _ref.displayName,
+    label = _ref.label,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? "" : _ref$value,
     _ref$disabled = _ref.disabled,
@@ -47,12 +47,20 @@ var CustomNumberInput = function CustomNumberInput(_ref) {
     className: "ufg-field-group",
     id: name,
     style: mainDivStyle,
-    children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+    children: [(0, _defaults.labelJsx)({
+      name: name,
+      labelStyle: labelStyle,
+      label: label,
+      required: required,
+      spanStyle: spanStyle,
+      showHelp: showHelp,
+      helpText: helpText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       id: "form-input-".concat(name),
       type: "number",
       name: name,
       value: value,
-      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : displayName,
+      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : label,
       disabled: disabled,
       required: required,
       min: min,
@@ -67,7 +75,7 @@ var CustomNumberInput = function CustomNumberInput(_ref) {
 CustomNumberInput.propTypes = {
   onChange: _propTypes["default"].func.isRequired,
   name: _propTypes["default"].string.isRequired,
-  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   disabled: _propTypes["default"].bool,
   required: _propTypes["default"].bool,

package/build/FormFields/CustomRadioGroup.js

@@ -4,16 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _propTypes = _interopRequireWildcard(require("prop-types"));
 var _defaults = require("./defaults");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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 CustomRadioGroup = function CustomRadioGroup(_ref) {
   var _onChange = _ref.onChange,
     onOptionChange = _ref.onOptionChange,
     formData = _ref.formData,
     name = _ref.name,
-    displayName = _ref.displayName,
+    label = _ref.label,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? "" : _ref$value,
     _ref$options = _ref.options,
@@ -41,30 +43,42 @@ var CustomRadioGroup = function CustomRadioGroup(_ref) {
     inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
     _ref$tooltipStyle = _ref.tooltipStyle,
     tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle;
+  var isObject = _typeof(options[0]) === "object";
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "ufg-field-group",
     id: name,
     style: mainDivStyle,
-    children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [(0, _defaults.labelJsx)({
+      name: name,
+      labelStyle: labelStyle,
+      label: label,
+      required: required,
+      spanStyle: spanStyle,
+      showHelp: showHelp,
+      helpText: helpText,
+      disableHtmlFor: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: inline ? "ufg-radio-group-inline" : "ufg-radio-group",
       children: options.map(function (opt, idx) {
+        var optValue = isObject ? opt.value || opt.name : opt;
+        var optText = isObject ? opt.label || opt.text : opt;
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "ufg-radio-item",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-            id: "".concat(name, "-").concat(idx),
+            id: "form-input-".concat(name, "-").concat(idx),
             type: "radio",
             name: name,
             style: inputStyle,
-            value: opt.value || opt.name,
-            checked: value === (opt.value || opt.name),
+            value: optValue,
+            checked: value === optValue,
             disabled: !!opt.disabled || disabled,
             onChange: function onChange(e) {
               _onChange === null || _onChange === void 0 || _onChange(name, e.target.value);
-              onOptionChange === null || onOptionChange === void 0 || onOptionChange(opt.name || opt.value, formData);
+              onOptionChange === null || onOptionChange === void 0 || onOptionChange(optValue, formData);
             }
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-            htmlFor: "".concat(name, "-").concat(idx),
-            children: opt.label || opt.text
+          }), (0, _defaults.labelJsx)({
+            name: "".concat(name, "-").concat(idx),
+            label: optText
           })]
         }, idx);
       })
@@ -76,7 +90,7 @@ CustomRadioGroup.propTypes = {
   onOptionChange: _propTypes["default"].func,
   formData: _propTypes["default"].object,
   name: _propTypes["default"].string.isRequired,
-  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   value: _propTypes["default"].string,
   options: _propTypes["default"].array.isRequired,
   inline: _propTypes["default"].bool,

package/build/FormFields/CustomSearch.js

@@ -18,7 +18,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
     handleResultSelect = _ref.handleResultSelect,
     resultRenderer = _ref.resultRenderer,
     name = _ref.name,
-    displayName = _ref.displayName,
+    label = _ref.label,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? "" : _ref$value,
     _ref$options = _ref.options,
@@ -51,11 +51,19 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
     className: "ufg-field-group",
     id: name,
     style: mainDivStyle,
-    children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Search, {
+    children: [(0, _defaults.labelJsx)({
+      name: name,
+      labelStyle: labelStyle,
+      label: label,
+      required: required,
+      spanStyle: spanStyle,
+      showHelp: showHelp,
+      helpText: helpText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Search, {
       id: "form-input-".concat(name),
       style: inputStyle,
       loading: isLoading,
-      placeholder: placeholder || displayName,
+      placeholder: placeholder || label,
       value: value,
       results: options,
       resultRenderer: resultRenderer,
@@ -71,7 +79,7 @@ CustomSearch.propTypes = {
   handleResultSelect: _propTypes["default"].func.isRequired,
   resultRenderer: _propTypes["default"].func,
   name: _propTypes["default"].string.isRequired,
-  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   value: _propTypes["default"].string,
   options: _propTypes["default"].array.isRequired,
   isLoading: _propTypes["default"].bool,

package/build/FormFields/CustomTextArea.js

@@ -18,7 +18,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 var CustomTextArea = function CustomTextArea(_ref) {
   var onChange = _ref.onChange,
     name = _ref.name,
-    displayName = _ref.displayName,
+    label = _ref.label,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? "" : _ref$value,
     _ref$disabled = _ref.disabled,
@@ -53,11 +53,19 @@ var CustomTextArea = function CustomTextArea(_ref) {
     className: "ufg-field-group",
     id: name,
     style: mainDivStyle,
-    children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
+    children: [(0, _defaults.labelJsx)({
+      name: name,
+      labelStyle: labelStyle,
+      label: label,
+      required: required,
+      spanStyle: spanStyle,
+      showHelp: showHelp,
+      helpText: helpText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
       id: "form-input-".concat(name),
       name: name,
       value: value,
-      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : displayName,
+      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : label,
       disabled: disabled,
       required: required,
       rows: rows,
@@ -72,7 +80,7 @@ var CustomTextArea = function CustomTextArea(_ref) {
 CustomTextArea.propTypes = {
   onChange: _propTypes["default"].func.isRequired,
   name: _propTypes["default"].string.isRequired,
-  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   value: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
   required: _propTypes["default"].bool,

package/build/FormFields/CustomToggle.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
 /** onChange(name, value: bool) */var CustomToggle = function CustomToggle(_ref) {
   var onChange = _ref.onChange,
     name = _ref.name,
-    displayName = _ref.displayName,
+    label = _ref.label,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? false : _ref$value,
     _ref$disabled = _ref.disabled,
@@ -45,7 +45,15 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
     style: mainDivStyle,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "ufg-toggle-wrapper",
-      children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: [(0, _defaults.labelJsx)({
+        name: name,
+        labelStyle: labelStyle,
+        label: label,
+        required: required,
+        spanStyle: spanStyle,
+        showHelp: showHelp,
+        helpText: helpText
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "ufg-toggle-track".concat(value ? " active" : "").concat(disabled ? " disabled" : ""),
         style: inputStyle,
         onClick: handleClick,
@@ -59,7 +67,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
 CustomToggle.propTypes = {
   onChange: _propTypes["default"].func.isRequired,
   name: _propTypes["default"].string.isRequired,
-  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
   value: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool,
   required: _propTypes["default"].bool,

package/build/FormFields/defaults.js

@@ -1,5 +1,6 @@
 "use strict";
 
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,12 +8,27 @@ exports.errorJsx = errorJsx;
 exports.labelJsx = labelJsx;
 exports.tooltipJsx = tooltipJsx;
 var _jsxRuntime = require("react/jsx-runtime");
-function labelJsx(name, labelStyle, displayName, required, spanStyle, showHelp, helpText) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 labelJsx(_ref) {
+  var name = _ref.name,
+    labelStyle = _ref.labelStyle,
+    label = _ref.label,
+    required = _ref.required,
+    spanStyle = _ref.spanStyle,
+    showHelp = _ref.showHelp,
+    helpText = _ref.helpText,
+    disableHtmlFor = _ref.disableHtmlFor;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", _objectSpread(_objectSpread({
     className: "ufg-label",
-    htmlFor: "form-input-".concat(name),
-    style: labelStyle,
-    children: [displayName, required && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    style: labelStyle
+  }, disableHtmlFor ? {} : {
+    htmlFor: "form-input-".concat(name)
+  }), {}, {
+    children: [label, required && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "ufg-required",
       style: spanStyle,
       children: " *"
@@ -21,7 +37,7 @@ function labelJsx(name, labelStyle, displayName, required, spanStyle, showHelp,
       title: helpText,
       children: " \u24D8"
     })]
-  });
+  }));
 }
 function errorJsx(error) {
   return error && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/build/index.css

@@ -85,11 +85,9 @@
    Form layout
    -------------------------------------------------------------------------- */
 .ufg-form-columns {
-	display: flex;
-	flex-direction: row;
+	display: grid;
+	/* grid-template-columns: repeat(2, 1fr); */
 	gap: 2rem;
-	align-items: flex-start;
-	flex-wrap: wrap;
 }
 
 .ufg-form {
@@ -111,7 +109,8 @@
 }
 
 .ufg-field-row {
-	display: grid;
+	display: flex;
+	flex-wrap: wrap;
 	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 	gap: 16px;
 }
@@ -150,6 +149,7 @@
 	background: var(--ufg-surface);
 	transition: all 0.12s ease;
 	font-family: inherit;
+	line-height: normal;
 }
 
 .ufg-input:hover,
@@ -254,7 +254,7 @@
 .ufg-radio-item {
 	display: flex;
 	align-items: center;
-	gap: 1em;
+	gap: 0.5em;
 	margin: 0;
 }
 
@@ -329,6 +329,10 @@
 	flex-wrap: wrap;
 }
 
+.ufg-button:hover:not(:disabled) {
+	transform: translateY(-1px);
+}
+
 .ufg-button {
 	padding: 12px 24px;
 	border-radius: var(--ufg-radius);
@@ -451,7 +455,7 @@
    Misc wrappers
    -------------------------------------------------------------------------- */
 .ufg-component-wrapper {
-	margin: 10px 0;
+	margin: 6px 0 0;
 }
 
 /* --------------------------------------------------------------------------