@data-driven-forms/carbon-component-mapper 4.1.0 → 4.1.2

package/esm/tabs/tabs.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["fields", "component", "name", "TabWrapperProps"],
-    _excluded2 = ["fields", "name", "label", "title"];
+    _excluded2 = ["name", "label", "title"];
 import React from 'react';
 import clsx from 'clsx';
 import { createUseStyles } from "react-jss/dist/react-jss.esm.js";
-import { Tabs as CarbonTabs, Tab } from 'carbon-components-react';
+import { Tabs as CarbonTabs, TabList, Tab, TabPanels, TabPanel } from '@carbon/react';
 import useFormApi from "@data-driven-forms/react-form-renderer/use-form-api";
 var useStyles = createUseStyles({
   tab: {
@@ -28,21 +28,26 @@ var Tabs = function Tabs(_ref) {
   var _useStyles = useStyles(),
       tab = _useStyles.tab;
 
-  return /*#__PURE__*/React.createElement(CarbonTabs, props, fields.map(function (_ref2) {
-    var fields = _ref2.fields,
-        name = _ref2.name,
+  return /*#__PURE__*/React.createElement(CarbonTabs, props, /*#__PURE__*/React.createElement(TabList, {
+    "aria-label": "List of tabs"
+  }, fields.map(function (_ref2) {
+    var name = _ref2.name,
         label = _ref2.label,
         title = _ref2.title,
         rest = _objectWithoutProperties(_ref2, _excluded2);
 
-    return /*#__PURE__*/React.createElement(Tab, _extends({}, rest, {
-      id: name,
-      key: name,
-      label: label || title
-    }), /*#__PURE__*/React.createElement("div", _extends({}, TabWrapperProps, {
+    return /*#__PURE__*/React.createElement(Tab, _extends({
+      key: name
+    }, rest), label || title);
+  })), /*#__PURE__*/React.createElement(TabPanels, null, fields.map(function (_ref3) {
+    var tabFields = _ref3.fields,
+        name = _ref3.name;
+    return /*#__PURE__*/React.createElement(TabPanel, {
+      key: name
+    }, /*#__PURE__*/React.createElement("div", _extends({}, TabWrapperProps, {
       className: clsx(tab, TabWrapperProps.className)
-    }), formOptions.renderForm(fields, formOptions)));
-  }));
+    }), formOptions.renderForm(tabFields, formOptions)));
+  })));
 };
 
 export default Tabs;

package/esm/text-field/text-field.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["input", "meta", "validateOnMount", "labelText"];
 import React from 'react';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
-import { TextInput, NumberInput } from 'carbon-components-react';
+import { TextInput, NumberInput } from '@carbon/react';
 import prepareProps from '../prepare-props';
 
 var TextField = function TextField(props) {
@@ -16,8 +16,8 @@ var TextField = function TextField(props) {
 
   var Component = input.type === 'number' ? NumberInput : TextInput;
 
-  var setValue = function setValue(e, input) {
-    return input.type === 'number' ? e.imaginaryTarget.value : e.target.value;
+  var setValue = function setValue(e, state, input) {
+    return input.type === 'number' ? "".concat(state.value) : e.target.value;
   };
 
   var invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
@@ -29,8 +29,8 @@ var TextField = function TextField(props) {
     invalidText: invalid || '',
     warn: Boolean(warn),
     warnText: warn || '',
-    onChange: function onChange(e) {
-      return input.onChange(setValue(e, input));
+    onChange: function onChange(e, state) {
+      return input.onChange(setValue(e, state, input));
     }
   }, input.type === 'number' ? {
     label: labelText

package/esm/textarea/textarea.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["input", "meta", "validateOnMount", "helperText"];
 import React from 'react';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
-import { TextArea } from 'carbon-components-react';
+import { TextArea } from '@carbon/react';
 import prepareProps from '../prepare-props';
 
 var Textarea = function Textarea(props) {

package/esm/time-picker-base/time-picker-base.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["WrapperProps", "input", "enhnancedOnBlur", "enhancedOnChange", "finalValue", "invalid", "twelveHoursFormat", "timezones", "helperText", "warnText", "selectFormat", "selectTimezone", "format", "timezone"],
     _excluded2 = ["showAs"];
 import React from 'react';
-import { TimePicker as CarbonTimePicker, TimePickerSelect, SelectItem } from 'carbon-components-react';
+import { TimePicker as CarbonTimePicker, TimePickerSelect, SelectItem } from '@carbon/react';
 import HelperTextBlock from '../helper-text-block/helper-text-block';
 
 var TimePickerBase = function TimePickerBase(_ref) {

package/esm/with-description/with-description.js

@@ -1,12 +1,29 @@
 import React from 'react';
-import { Tooltip } from 'carbon-components-react';
+import { createUseStyles } from "react-jss/dist/react-jss.esm.js";
+import { Toggletip, ToggletipButton, ToggletipContent } from '@carbon/react';
+import { Information } from '@carbon/react/icons';
+var useStyles = createUseStyles({
+  container: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '0.5rem'
+  }
+});
 
 var WithDescription = function WithDescription(_ref) {
   var labelText = _ref.labelText,
       description = _ref.description;
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    triggerText: labelText
-  }, description);
+
+  var _useStyles = useStyles(),
+      container = _useStyles.container;
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: container
+  }, /*#__PURE__*/React.createElement("span", null, labelText), /*#__PURE__*/React.createElement(Toggletip, {
+    align: "bottom"
+  }, /*#__PURE__*/React.createElement(ToggletipButton, {
+    label: "Show information"
+  }, /*#__PURE__*/React.createElement(Information, null)), /*#__PURE__*/React.createElement(ToggletipContent, null, /*#__PURE__*/React.createElement("p", null, description))));
 };
 
 export default WithDescription;

package/esm/wizard/wizard.js

@@ -15,8 +15,7 @@ import { createUseStyles } from "react-jss/dist/react-jss.esm.js";
 import WizardCommon from '@data-driven-forms/common/wizard/wizard';
 import FormSpy from "@data-driven-forms/react-form-renderer/form-spy";
 import WizardContext from "@data-driven-forms/react-form-renderer/wizard-context";
-import { Button, Column, Grid, Row } from 'carbon-components-react';
-import { ProgressStep, ProgressIndicator } from 'carbon-components-react/lib/components/ProgressIndicator/ProgressIndicator';
+import { Button, Column, Grid, ProgressStep, ProgressIndicator } from '@carbon/react';
 var useStyles = createUseStyles({
   horizontalNav: {
     marginBottom: 48
@@ -88,13 +87,17 @@ var VerticalLayout = function VerticalLayout(_ref4) {
 
   return /*#__PURE__*/React.createElement(Grid, {
     narrow: true
-  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+  }, /*#__PURE__*/React.createElement(Column, {
     sm: 1,
     md: 2,
     lg: 3
-  }, nav), /*#__PURE__*/React.createElement(Column, _extends({}, WizardBodyProps, {
+  }, nav), /*#__PURE__*/React.createElement(Column, _extends({
+    sm: 3,
+    md: 6,
+    lg: 13
+  }, WizardBodyProps, {
     className: clsx(body, WizardBodyProps === null || WizardBodyProps === void 0 ? void 0 : WizardBodyProps.className)
-  }), fields)));
+  }), fields));
 };
 
 var WizardInternal = function WizardInternal(_ref5) {

package/field-array/field-array.d.ts

@@ -1,6 +1,6 @@
 import { FieldArrayField, UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
 import { ReactNode } from "react";
-import { ButtonProps, FormGroupProps as CarbonFormGroupProps } from "carbon-components-react";
+import { ButtonProps, FormGroupProps as CarbonFormGroupProps } from "@carbon/react";
 
 import { FormGroupProps } from '../form-group';
 

package/field-array/field-array.js

@@ -29,9 +29,9 @@ var _useFormApi = _interopRequireDefault(require("@data-driven-forms/react-form-
 
 var _fieldArray = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/field-array"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _prepareProps = _interopRequireDefault(require("../prepare-props"));
 
@@ -87,9 +87,13 @@ var ArrayItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       name: name
     });
   });
-  return /*#__PURE__*/_react["default"].createElement("div", ArrayItemProps, formOptions.renderForm(editedFields, formOptions), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Button, (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement("div", ArrayItemProps, formOptions.renderForm(editedFields, formOptions), /*#__PURE__*/_react["default"].createElement(_react2.Button, (0, _extends2["default"])({
     disabled: buttonDisabled,
-    renderIcon: _iconsReact.Subtract32,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react["default"].createElement(_icons.Subtract, (0, _extends2["default"])({
+        size: 32
+      }, props));
+    },
     id: "remove-".concat(name),
     kind: "danger",
     onClick: remove
@@ -144,7 +148,7 @@ var FieldArray = function FieldArray(props) {
   }, buttonLabels);
 
   var invalid = (meta.touched || validateOnMount) && !Array.isArray(meta.error) && (meta.error || meta.submitError);
-  return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.FormGroup, (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_react2.FormGroup, (0, _extends2["default"])({
     legendText: labelText || '',
     invalid: Boolean(invalid),
     message: Boolean(invalid),
@@ -170,9 +174,13 @@ var FieldArray = function FieldArray(props) {
       });
     }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, AddContainerProps, {
       className: (0, _clsx["default"])(addContainer, AddContainerProps.className)
-    }), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Button, (0, _extends2["default"])({
+    }), /*#__PURE__*/_react["default"].createElement(_react2.Button, (0, _extends2["default"])({
       disabled: fieldArrayProps.fields.length >= maxItems,
-      renderIcon: _iconsReact.AddAlt32,
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/_react["default"].createElement(_icons.AddAlt, (0, _extends2["default"])({
+          size: 32
+        }, props));
+      },
       id: "add-".concat(input.name),
       onClick: function onClick() {
         return fieldArrayProps.fields.push(defaultItem);

package/form-template/form-template.js

@@ -17,7 +17,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _reactJssCjs = require("react-jss/dist/react-jss.cjs.js");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _formTemplate = _interopRequireDefault(require("@data-driven-forms/common/form-template"));
 
@@ -47,7 +47,7 @@ var Button = function Button(_ref) {
   var label = _ref.label,
       buttonType = _ref.buttonType,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Button, (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_react2.Button, (0, _extends2["default"])({
     kind: buttonType === 'submit' ? 'primary' : 'secondary'
   }, props), label);
 };
@@ -62,7 +62,7 @@ var ButtonGroup = function ButtonGroup(_ref2) {
   var _useStyles = useStyles(),
       butttons = _useStyles.butttons;
 
-  return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.ButtonSet, (0, _extends2["default"])({}, props, {
+  return /*#__PURE__*/_react["default"].createElement(_react2.ButtonSet, (0, _extends2["default"])({}, props, {
     className: (0, _clsx["default"])(butttons, className)
   }), children);
 };
@@ -93,7 +93,7 @@ var Form = function Form(_ref5) {
   var _useStyles2 = useStyles(),
       form = _useStyles2.form;
 
-  return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Form, (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_react2.Form, (0, _extends2["default"])({
     noValidate: true
   }, props, {
     className: (0, _clsx["default"])(form, className)

package/helper-text-block/helper-text-block.js

@@ -29,19 +29,19 @@ var HelperTextBlock = function HelperTextBlock(_ref) {
 
   if (errorText) {
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "bx--form-requirement ddorg__carbon-error-helper-text ".concat(helperTextStyle)
+      className: "cds--form-requirement ddorg__carbon-error-helper-text ".concat(helperTextStyle)
     }, errorText);
   }
 
   if (warnText) {
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "bx--form-requirement ddorg__carbon-error-helper-text ".concat(helperTextStyle)
+      className: "cds--form-requirement ddorg__carbon-error-helper-text ".concat(helperTextStyle)
     }, warnText);
   }
 
   if (helperText) {
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "bx--form__helper-text"
+      className: "cds--form__helper-text"
     }, helperText);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/carbon-component-mapper",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "description": "Carbon React component mapper for Data Driven Forms.",
   "main": "index.js",
   "module": "esm/index.js",
@@ -29,18 +29,14 @@
     "javascript"
   ],
   "devDependencies": {
-    "@carbon/icons-react": "^10.41.0",
-    "@types/carbon-components-react": "^7.44.1",
-    "carbon-components": "^10.46.0",
-    "carbon-components-react": "^7.46.0",
-    "carbon-icons": "^7.0.7"
+    "@carbon/react": "^1.95.0"
   },
   "peerDependencies": {
     "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@data-driven-forms/common": "^4.1.0",
+    "@data-driven-forms/common": "^4.1.2",
     "clsx": "^1.1.1",
     "lodash": "^4.17.21",
     "react-jss": "^10.5.0"

package/radio/radio.d.ts

@@ -2,7 +2,7 @@ import { FormGroupProps as CommonFormGroupProps } from "../form-group";
 import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
 import { ReactNode } from "react";
 
-import { FormGroupProps, RadioButtonGroupProps, RadioButtonProps} from 'carbon-components-react';
+import { FormGroupProps, RadioButtonGroupProps, RadioButtonProps} from '@carbon/react';
 
 export interface RadioOption extends RadioButtonProps {
     value: any;

package/radio/radio.js

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _useFieldApi2 = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/use-field-api"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _prepareProps = _interopRequireDefault(require("../prepare-props"));
 
@@ -41,13 +41,13 @@ var Radio = function Radio(_ref) {
 
   var invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
   var warnText = (meta.touched || validateOnMount) && meta.warning;
-  return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.FormGroup, (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_react2.FormGroup, (0, _extends2["default"])({
     legendText: labelText
-  }, FormGroupProps), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.RadioButtonGroup, (0, _extends2["default"])({}, input, {
+  }, FormGroupProps), /*#__PURE__*/_react["default"].createElement(_react2.RadioButtonGroup, (0, _extends2["default"])({}, input, {
     valueSelected: input.value,
     disabled: disabled
   }, rest), options.map(function (option) {
-    return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.RadioButton, (0, _extends2["default"])({
+    return /*#__PURE__*/_react["default"].createElement(_react2.RadioButton, (0, _extends2["default"])({
       key: option.value,
       disabled: disabled,
       labelText: option.label,

package/select/select.d.ts

@@ -1,7 +1,7 @@
 import { FormGroupProps } from "../form-group";
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
 
-import { SelectItemProps, SelectProps as CarbonSelectProps } from 'carbon-components-react';
+import { SelectItemProps, SelectProps as CarbonSelectProps } from '@carbon/react';
 
 export interface SelectOption extends SelectItemProps {
   value: any;

package/select/select.js

@@ -25,7 +25,7 @@ var _select = _interopRequireDefault(require("@data-driven-forms/common/select")
 
 var _fnToString = _interopRequireDefault(require("@data-driven-forms/common/utils/fn-to-string"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _prepareProps = _interopRequireDefault(require("../prepare-props"));
 
@@ -65,13 +65,13 @@ var renderOptions = function renderOptions(options) {
         rest = (0, _objectWithoutProperties2["default"])(option, _excluded);
 
     if (options) {
-      return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.SelectItemGroup, (0, _extends2["default"])({
+      return /*#__PURE__*/_react["default"].createElement(_react2.SelectItemGroup, (0, _extends2["default"])({
         key: rest.value || index,
         text: rest.label
       }, rest), renderOptions(options));
     }
 
-    return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.SelectItem, (0, _extends2["default"])({
+    return /*#__PURE__*/_react["default"].createElement(_react2.SelectItem, (0, _extends2["default"])({
       key: rest.value || index,
       text: rest.label
     }, rest));
@@ -95,7 +95,7 @@ var ClearedMultiSelectFilterable = function ClearedMultiSelectFilterable(_ref3)
       placeholder = _ref3.placeholder,
       isDisabled = _ref3.isDisabled,
       rest = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
-  return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.MultiSelect.Filterable, (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_react2.FilterableMultiSelect, (0, _extends2["default"])({
     disabled: isDisabled
   }, rest, {
     placeholder: carbonLabel || placeholder,
@@ -126,7 +126,7 @@ var ClearedMultiSelect = function ClearedMultiSelect(_ref4) {
       placeholder = _ref4.placeholder,
       isDisabled = _ref4.isDisabled,
       rest = (0, _objectWithoutProperties2["default"])(_ref4, _excluded3);
-  return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.MultiSelect, (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_react2.MultiSelect, (0, _extends2["default"])({
     disabled: isDisabled
   }, rest, {
     label: carbonLabel || placeholder,
@@ -162,14 +162,14 @@ var ClearedSelect = function ClearedSelect(_ref5) {
       placeholder = _ref5.placeholder,
       value = _ref5.value,
       rest = (0, _objectWithoutProperties2["default"])(_ref5, _excluded4);
-  return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Select, (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_react2.Select, (0, _extends2["default"])({
     value: getSelectValue(value, isMulti),
     disabled: isFetching
   }, rest, {
     id: rest.name,
     invalid: Boolean(invalidText),
     invalidText: invalidText
-  }), isFetching && /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.SelectItem, {
+  }), isFetching && /*#__PURE__*/_react["default"].createElement(_react2.SelectItem, {
     text: placeholder,
     value: ''
   }), renderOptions(options));
@@ -209,7 +209,7 @@ var ClearedSelectSearchable = function ClearedSelectSearchable(_ref7) {
       onChange = _ref7.onChange,
       value = _ref7.value,
       rest = (0, _objectWithoutProperties2["default"])(_ref7, _excluded5);
-  return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.ComboBox, (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_react2.ComboBox, (0, _extends2["default"])({
     disabled: isFetching
   }, rest, {
     id: rest.name,

package/slider/slider.d.ts

@@ -1,7 +1,7 @@
 import { FormGroupProps } from "../form-group";
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
 
-import { SliderProps as CarbonSliderProps } from 'carbon-components-react';
+import { SliderProps as CarbonSliderProps } from '@carbon/react';
 
 export type SliderProps = CarbonSliderProps & FormGroupProps & UseFieldApiComponentConfig;
 

package/slider/slider.js

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _useFieldApi2 = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/use-field-api"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _prepareProps = _interopRequireDefault(require("../prepare-props"));
 
@@ -35,7 +35,7 @@ var Slider = function Slider(props) {
 
   var invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
   var warnText = (meta.touched || validateOnMount) && meta.warning;
-  return /*#__PURE__*/_react["default"].createElement("div", WrapperProps, /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Slider, (0, _extends2["default"])({}, input, {
+  return /*#__PURE__*/_react["default"].createElement("div", WrapperProps, /*#__PURE__*/_react["default"].createElement(_react2.Slider, (0, _extends2["default"])({}, input, {
     value: Number(input.value) || 0,
     key: input.name,
     id: input.name,

package/switch/switch.d.ts

@@ -1,7 +1,7 @@
 import { FormGroupProps } from "../form-group";
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
 
-import { ToggleProps } from 'carbon-components-react';
+import { ToggleProps } from '@carbon/react';
 
 export type SwitchProps = ToggleProps & FormGroupProps & UseFieldApiComponentConfig;
 

package/switch/switch.js

@@ -17,14 +17,14 @@ var _react = _interopRequireDefault(require("react"));
 
 var _useFieldApi2 = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/use-field-api"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _prepareProps = _interopRequireDefault(require("../prepare-props"));
 
 var _helperTextBlock = _interopRequireDefault(require("../helper-text-block/helper-text-block"));
 
 var _excluded = ["input", "meta", "onText", "offText", "validateOnMount", "helperText", "WrapperProps"],
-    _excluded2 = ["checked"];
+    _excluded2 = ["checked", "name", "onChange"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -46,11 +46,14 @@ var Switch = function Switch(props) {
   var invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
   var warnText = (meta.touched || validateOnMount) && meta.warning;
   var checked = input.checked,
+      name = input.name,
+      onChange = input.onChange,
       inputRest = (0, _objectWithoutProperties2["default"])(input, _excluded2);
-  return /*#__PURE__*/_react["default"].createElement("div", WrapperProps, /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Toggle, (0, _extends2["default"])({}, inputRest, {
+  return /*#__PURE__*/_react["default"].createElement("div", WrapperProps, /*#__PURE__*/_react["default"].createElement(_react2.Toggle, (0, _extends2["default"])({}, inputRest, {
     toggled: checked,
-    key: input.name,
-    id: input.name,
+    onToggle: onChange,
+    key: name,
+    id: name,
     labelA: offText,
     labelB: onText
   }, rest)), /*#__PURE__*/_react["default"].createElement(_helperTextBlock["default"], {

package/tabs/tabs.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { Field } from "@data-driven-forms/react-form-renderer";
 
-import { TabsProps as CarbonTabsProps, TabProps } from 'carbon-components-react';
+import { TabsProps as CarbonTabsProps, TabProps } from '@carbon/react';
 
 export interface TabField extends TabProps {
   name: string;

package/tabs/tabs.js

@@ -17,12 +17,12 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _reactJssCjs = require("react-jss/dist/react-jss.cjs.js");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _useFormApi = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/use-form-api"));
 
 var _excluded = ["fields", "component", "name", "TabWrapperProps"],
-    _excluded2 = ["fields", "name", "label", "title"];
+    _excluded2 = ["name", "label", "title"];
 var useStyles = (0, _reactJssCjs.createUseStyles)({
   tab: {
     '&>:not(:last-child)': {
@@ -43,20 +43,25 @@ var Tabs = function Tabs(_ref) {
   var _useStyles = useStyles(),
       tab = _useStyles.tab;
 
-  return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Tabs, props, fields.map(function (_ref2) {
-    var fields = _ref2.fields,
-        name = _ref2.name,
+  return /*#__PURE__*/_react["default"].createElement(_react2.Tabs, props, /*#__PURE__*/_react["default"].createElement(_react2.TabList, {
+    "aria-label": "List of tabs"
+  }, fields.map(function (_ref2) {
+    var name = _ref2.name,
         label = _ref2.label,
         title = _ref2.title,
         rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-    return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Tab, (0, _extends2["default"])({}, rest, {
-      id: name,
-      key: name,
-      label: label || title
-    }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, TabWrapperProps, {
+    return /*#__PURE__*/_react["default"].createElement(_react2.Tab, (0, _extends2["default"])({
+      key: name
+    }, rest), label || title);
+  })), /*#__PURE__*/_react["default"].createElement(_react2.TabPanels, null, fields.map(function (_ref3) {
+    var tabFields = _ref3.fields,
+        name = _ref3.name;
+    return /*#__PURE__*/_react["default"].createElement(_react2.TabPanel, {
+      key: name
+    }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, TabWrapperProps, {
       className: (0, _clsx["default"])(tab, TabWrapperProps.className)
-    }), formOptions.renderForm(fields, formOptions)));
-  }));
+    }), formOptions.renderForm(tabFields, formOptions)));
+  })));
 };
 
 var _default = Tabs;

package/text-field/text-field.d.ts

@@ -1,7 +1,7 @@
 import { FormGroupProps } from "../form-group";
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
 
-import { TextInputProps } from 'carbon-components-react';
+import { TextInputProps } from '@carbon/react';
 
 export type TextFieldProps = TextInputProps & FormGroupProps & UseFieldApiComponentConfig;
 

package/text-field/text-field.js

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _useFieldApi2 = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/use-field-api"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _prepareProps = _interopRequireDefault(require("../prepare-props"));
 
@@ -29,10 +29,10 @@ var TextField = function TextField(props) {
       labelText = _useFieldApi.labelText,
       rest = (0, _objectWithoutProperties2["default"])(_useFieldApi, _excluded);
 
-  var Component = input.type === 'number' ? _carbonComponentsReact.NumberInput : _carbonComponentsReact.TextInput;
+  var Component = input.type === 'number' ? _react2.NumberInput : _react2.TextInput;
 
-  var setValue = function setValue(e, input) {
-    return input.type === 'number' ? e.imaginaryTarget.value : e.target.value;
+  var setValue = function setValue(e, state, input) {
+    return input.type === 'number' ? "".concat(state.value) : e.target.value;
   };
 
   var invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
@@ -44,8 +44,8 @@ var TextField = function TextField(props) {
     invalidText: invalid || '',
     warn: Boolean(warn),
     warnText: warn || '',
-    onChange: function onChange(e) {
-      return input.onChange(setValue(e, input));
+    onChange: function onChange(e, state) {
+      return input.onChange(setValue(e, state, input));
     }
   }, input.type === 'number' ? {
     label: labelText

package/textarea/textarea.d.ts

@@ -1,7 +1,7 @@
 import { FormGroupProps } from "../form-group";
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
 
-import { TextAreaProps } from 'carbon-components-react';
+import { TextAreaProps } from '@carbon/react';
 
 export type TextareaProps = TextAreaProps & FormGroupProps & UseFieldApiComponentConfig;