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

package/checkbox/checkbox.d.ts

@@ -2,7 +2,7 @@ import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-render
 import { ReactNode } from "react";
 import { FormGroupProps } from "../form-group";
 
-import { CheckboxProps as CarbonCheckboxProps } from 'carbon-components-react';
+import { CheckboxProps as CarbonCheckboxProps } from '@carbon/react';
 
 export interface CheckboxOption extends CarbonCheckboxProps {
   value?: any;

package/checkbox/checkbox.js

@@ -21,7 +21,7 @@ var _useFieldApi2 = _interopRequireDefault(require("@data-driven-forms/react-for
 
 var _multipleChoiceList = _interopRequireDefault(require("@data-driven-forms/common/multiple-choice-list"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _withDescription = _interopRequireDefault(require("../with-description"));
 
@@ -50,7 +50,7 @@ var Wrapper = function Wrapper(_ref) {
       error = _ref.error,
       showError = _ref.showError,
       isRequired = _ref.isRequired;
-  return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.FormGroup, {
+  return /*#__PURE__*/_react["default"].createElement(_react2.FormGroup, {
     legendText: description ? /*#__PURE__*/_react["default"].createElement(_withDescription["default"], {
       labelText: (0, _prepareProps.buildLabel)(label, isRequired),
       description: description
@@ -74,7 +74,7 @@ var SingleCheckbox = function SingleCheckbox(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.Checkbox, (0, _extends2["default"])({}, input, {
+  return /*#__PURE__*/_react["default"].createElement("div", WrapperProps, /*#__PURE__*/_react["default"].createElement(_react2.Checkbox, (0, _extends2["default"])({}, input, {
     id: input.name
   }, rest)), /*#__PURE__*/_react["default"].createElement(_helperTextBlock["default"], {
     helperText: helperText,
@@ -94,13 +94,13 @@ var SingleCheckboxInCommon = function SingleCheckboxInCommon(_ref2) {
       rest = (0, _objectWithoutProperties2["default"])(_ref2$option, _excluded2),
       _onChange = _ref2.onChange,
       props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded3);
-  return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Checkbox, (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_react2.Checkbox, (0, _extends2["default"])({
     id: id,
     labelText: label,
     disabled: isDisabled
   }, props, rest, {
-    onChange: function onChange(_value, _name, event) {
-      return _onChange(event);
+    onChange: function onChange(event, data) {
+      return _onChange(event, data);
     }
   }));
 };

package/date-picker/date-picker.d.ts

@@ -1,7 +1,7 @@
 import { FormGroupProps } from "../form-group";
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
 
-import { DatePickerProps as CarbonDatePickerProps, DatePickerInputProps } from 'carbon-components-react';
+import { DatePickerProps as CarbonDatePickerProps, DatePickerInputProps } from '@carbon/react';
 
 interface InternalDatePickerProps extends DatePickerInputProps {
   datePickerType?: string;

package/date-picker/date-picker.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"));
 
@@ -37,12 +37,12 @@ var DatePicker = function DatePicker(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.DatePicker, (0, _extends2["default"])({}, input, {
-    datePickerType: datePickerType
-  }, DatePickerProps), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.DatePickerInput, (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement("div", WrapperProps, /*#__PURE__*/_react["default"].createElement(_react2.DatePicker, (0, _extends2["default"])({}, input, {
+    datePickerType: datePickerType,
+    invalid: Boolean(invalid)
+  }, DatePickerProps), /*#__PURE__*/_react["default"].createElement(_react2.DatePickerInput, (0, _extends2["default"])({
     id: input.name,
-    invalid: Boolean(invalid),
-    invalidText: invalid ? invalid : ''
+    invalidText: invalid || ''
   }, rest))), /*#__PURE__*/_react["default"].createElement(_helperTextBlock["default"], {
     helperText: !invalid && helperText,
     warnText: warnText

package/dual-list-select/dual-list-select.d.ts

@@ -10,7 +10,7 @@ import {
   StructuredListProps, StructuredListBodyProps,
   AllStructuredListRowProps,
   StructuredListCellProps
-} from 'carbon-components-react';
+} from '@carbon/react';
 
 export interface DualListSelectValue extends AnyObject {
   value: any;

package/dual-list-select/dual-list-select.js

@@ -19,9 +19,9 @@ 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 _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _prepareProps = require("../prepare-props");
 
@@ -58,16 +58,20 @@ var useStyles = (0, _reactJssCjs.createUseStyles)({
     }
   },
   toolbar: {
-    display: 'flex'
+    display: 'flex',
+    '& .cds--tooltip-trigger__wrapper': {
+      height: '100%'
+    }
   },
   tooltipButton: {
-    background: '#c2c1c1 !important'
+    background: '#c2c1c1 !important',
+    height: '100%'
   }
 });
 
 var EmptyList = function EmptyList(_ref) {
   var message = _ref.message;
-  return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.StructuredListWrapper, null, /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.StructuredListBody, null, /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.StructuredListRow, null, /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.StructuredListCell, null, message))));
+  return /*#__PURE__*/_react["default"].createElement(_react2.StructuredListWrapper, null, /*#__PURE__*/_react["default"].createElement(_react2.StructuredListBody, null, /*#__PURE__*/_react["default"].createElement(_react2.StructuredListRow, null, /*#__PURE__*/_react["default"].createElement(_react2.StructuredListCell, null, message))));
 };
 
 var List = function List(_ref2) {
@@ -82,11 +86,11 @@ var List = function List(_ref2) {
       dualList = _useStyles.dualList,
       dualListBody = _useStyles.dualListBody;
 
-  return options.length > 0 ? /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.StructuredListWrapper, (0, _extends2["default"])({
+  return options.length > 0 ? /*#__PURE__*/_react["default"].createElement(_react2.StructuredListWrapper, (0, _extends2["default"])({
     selection: true
   }, ListProps, {
     className: (0, _clsx["default"])(dualList, ListProps.className)
-  }), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.StructuredListBody, (0, _extends2["default"])({}, BodyProps, {
+  }), /*#__PURE__*/_react["default"].createElement(_react2.StructuredListBody, (0, _extends2["default"])({}, BodyProps, {
     className: (0, _clsx["default"])(dualListBody, BodyProps.className)
   }), options.map(function (_ref3) {
     var value = _ref3.value,
@@ -94,10 +98,9 @@ var List = function List(_ref2) {
         ListRowProps = _ref3.ListRowProps,
         ListCellProps = _ref3.ListCellProps,
         GridProps = _ref3.GridProps,
-        RowProps = _ref3.RowProps,
         LabelProps = _ref3.LabelProps,
         CheckmarkProps = _ref3.CheckmarkProps;
-    return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.StructuredListRow, (0, _extends2["default"])({
+    return /*#__PURE__*/_react["default"].createElement(_react2.StructuredListRow, (0, _extends2["default"])({
       key: value
     }, ListRowProps, {
       onClick: function onClick(e) {
@@ -105,13 +108,15 @@ var List = function List(_ref2) {
           ctrlKey: true
         }), value);
       }
-    }), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.StructuredListCell, ListCellProps, /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Grid, GridProps, /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Row, (0, _extends2["default"])({
-      narrow: true
-    }, RowProps), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Column, (0, _extends2["default"])({
+    }), /*#__PURE__*/_react["default"].createElement(_react2.StructuredListCell, ListCellProps, /*#__PURE__*/_react["default"].createElement(_react2.Grid, (0, _extends2["default"])({
+      condensed: true
+    }, GridProps), /*#__PURE__*/_react["default"].createElement(_react2.Column, (0, _extends2["default"])({
       sm: 3
-    }, LabelProps), label), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Column, (0, _extends2["default"])({
+    }, LabelProps), label), /*#__PURE__*/_react["default"].createElement(_react2.Column, (0, _extends2["default"])({
       sm: 1
-    }, CheckmarkProps), selectedValues.includes(value) && /*#__PURE__*/_react["default"].createElement(_iconsReact.CheckmarkFilled16, null))))));
+    }, CheckmarkProps), selectedValues.includes(value) && /*#__PURE__*/_react["default"].createElement(_icons.CheckmarkFilled, {
+      size: 16
+    })))));
   }))) : /*#__PURE__*/_react["default"].createElement(EmptyList, {
     message: noTitle
   });
@@ -133,18 +138,30 @@ var Toolbar = function Toolbar(_ref4) {
 
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, ToolbarProps, {
     className: (0, _clsx["default"])(toolbar, ToolbarProps.className)
-  }), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Search, (0, _extends2["default"])({
+  }), /*#__PURE__*/_react["default"].createElement(_react2.Search, (0, _extends2["default"])({
     onChange: function onChange(e) {
       return onFilter(e.target.value);
     },
     labelText: "",
     placeholder: placeholder
-  }, SearchProps)), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.TooltipIcon, (0, _extends2["default"])({
+  }, SearchProps)), /*#__PURE__*/_react["default"].createElement(_react2.Button, (0, _extends2["default"])({
+    kind: "ghost",
+    size: "sm",
+    hasIconOnly: true,
     onClick: onSort,
-    tooltipText: sortTitle
+    iconDescription: sortTitle,
+    renderIcon: function renderIcon(props) {
+      return sortDirection ? /*#__PURE__*/_react["default"].createElement(_icons.CaretSortDown, (0, _extends2["default"])({
+        size: 32
+      }, props)) : /*#__PURE__*/_react["default"].createElement(_icons.CaretSortUp, (0, _extends2["default"])({
+        size: 32
+      }, props));
+    },
+    tooltipAlignment: "center",
+    tooltipPosition: "bottom"
   }, SortProps, {
     className: (0, _clsx["default"])(tooltipButton, SortProps.className)
-  }), sortDirection ? /*#__PURE__*/_react["default"].createElement(_iconsReact.CaretSortDown32, null) : /*#__PURE__*/_react["default"].createElement(_iconsReact.CaretSortUp32, null)));
+  })));
 };
 
 var isEmpty = function isEmpty(array) {
@@ -205,8 +222,6 @@ var DualListSelectInner = function DualListSelectInner(_ref5) {
       FormGroupProps = _ref5$FormGroupProps === void 0 ? {} : _ref5$FormGroupProps,
       _ref5$GridProps = _ref5.GridProps,
       GridProps = _ref5$GridProps === void 0 ? {} : _ref5$GridProps,
-      _ref5$RowProps = _ref5.RowProps,
-      RowProps = _ref5$RowProps === void 0 ? {} : _ref5$RowProps,
       _ref5$OptionsColumnPr = _ref5.OptionsColumnProps,
       OptionsColumnProps = _ref5$OptionsColumnPr === void 0 ? {} : _ref5$OptionsColumnPr,
       _ref5$ButtonColumnPro = _ref5.ButtonColumnProps,
@@ -245,11 +260,11 @@ var DualListSelectInner = function DualListSelectInner(_ref5) {
   var _useStyles3 = useStyles(),
       buttonWrapper = _useStyles3.buttonWrapper;
 
-  return /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.FormGroup, (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_react2.FormGroup, (0, _extends2["default"])({
     legendText: (0, _prepareProps.buildLabel)(label || '', isRequired)
-  }, FormGroupProps), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Grid, GridProps, /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Row, (0, _extends2["default"])({
+  }, FormGroupProps), /*#__PURE__*/_react["default"].createElement(_react2.Grid, (0, _extends2["default"])({
     condensed: true
-  }, RowProps), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Column, (0, _extends2["default"])({
+  }, GridProps), /*#__PURE__*/_react["default"].createElement(_react2.Column, (0, _extends2["default"])({
     sm: 4,
     md: 8,
     lg: 5
@@ -269,31 +284,39 @@ var DualListSelectInner = function DualListSelectInner(_ref5) {
     selectedValues: state.selectedLeftValues,
     handleOptionsClick: handleOptionsClick,
     noTitle: state.filterOptions ? filterOptionsText : noOptionsTitle
-  })), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Column, (0, _extends2["default"])({
+  })), /*#__PURE__*/_react["default"].createElement(_react2.Column, (0, _extends2["default"])({
     sm: 4,
     md: 8,
-    lg: 2
+    lg: 4
   }, ButtonColumnProps, {
     className: (0, _clsx["default"])(buttonWrapper, ButtonColumnProps.className)
-  }), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Button, (0, _extends2["default"])({
+  }), /*#__PURE__*/_react["default"].createElement(_react2.Button, (0, _extends2["default"])({
     id: "move-right",
-    renderIcon: _iconsReact.ChevronRight32,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react["default"].createElement(_icons.ChevronRight, (0, _extends2["default"])({
+        size: 32
+      }, props));
+    },
     onClick: handleMoveRight,
     disabled: isEmpty(state.selectedLeftValues)
-  }, AddButtonProps), moveRightTitle), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Button, (0, _extends2["default"])({
+  }, AddButtonProps), moveRightTitle), /*#__PURE__*/_react["default"].createElement(_react2.Button, (0, _extends2["default"])({
     id: "move-all-right",
     onClick: handleClearLeftValues,
     disabled: isEmpty(leftValues)
-  }, AddAllButtonProps), moveAllRightTitle), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Button, (0, _extends2["default"])({
+  }, AddAllButtonProps), moveAllRightTitle), /*#__PURE__*/_react["default"].createElement(_react2.Button, (0, _extends2["default"])({
     id: "move-all-left",
     onClick: handleClearRightValues,
     disabled: isEmpty(rightValues)
-  }, RemoveAllButtonProps), moveAllLeftTitle), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Button, (0, _extends2["default"])({
+  }, RemoveAllButtonProps), moveAllLeftTitle), /*#__PURE__*/_react["default"].createElement(_react2.Button, (0, _extends2["default"])({
     id: "move-left",
-    renderIcon: _iconsReact.ChevronLeft32,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react["default"].createElement(_icons.ChevronLeft, (0, _extends2["default"])({
+        size: 32
+      }, props));
+    },
     onClick: handleMoveLeft,
     disabled: isEmpty(state.selectedRightValues)
-  }, RemoveButtonProps), moveLeftTitle)), /*#__PURE__*/_react["default"].createElement(_carbonComponentsReact.Column, (0, _extends2["default"])({
+  }, RemoveButtonProps), moveLeftTitle)), /*#__PURE__*/_react["default"].createElement(_react2.Column, (0, _extends2["default"])({
     sm: 4,
     md: 8,
     lg: 5
@@ -313,7 +336,7 @@ var DualListSelectInner = function DualListSelectInner(_ref5) {
     selectedValues: state.selectedRightValues,
     handleOptionsClick: handleValuesClick,
     noTitle: state.filterValue ? filterValueText : noValueTitle
-  })))));
+  }))));
 };
 
 var DualListSelect = function DualListSelect(props) {

package/esm/checkbox/checkbox.js

@@ -13,7 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
 import MultipleChoiceListCommon from '@data-driven-forms/common/multiple-choice-list';
-import { Checkbox as CarbonCheckbox, FormGroup } from 'carbon-components-react';
+import { Checkbox as CarbonCheckbox, FormGroup } from '@carbon/react';
 import WithDescription from '../with-description';
 import prepareProps, { buildLabel } from '../prepare-props';
 import HelperTextBlock from '../helper-text-block/helper-text-block';
@@ -76,8 +76,8 @@ var SingleCheckboxInCommon = function SingleCheckboxInCommon(_ref2) {
     labelText: label,
     disabled: isDisabled
   }, props, rest, {
-    onChange: function onChange(_value, _name, event) {
-      return _onChange(event);
+    onChange: function onChange(event, data) {
+      return _onChange(event, data);
     }
   }));
 };

package/esm/date-picker/date-picker.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["input", "datePickerType", "meta", "DatePickerProps", "validateOnMount", "helperText", "WrapperProps"];
 import React from 'react';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
-import { DatePicker as CarbonDatePicker, DatePickerInput } from 'carbon-components-react';
+import { DatePicker as CarbonDatePicker, DatePickerInput } from '@carbon/react';
 import prepareProps from '../prepare-props';
 import HelperTextBlock from '../helper-text-block/helper-text-block';
 
@@ -22,11 +22,11 @@ var DatePicker = function DatePicker(props) {
   var invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
   var warnText = (meta.touched || validateOnMount) && meta.warning;
   return /*#__PURE__*/React.createElement("div", WrapperProps, /*#__PURE__*/React.createElement(CarbonDatePicker, _extends({}, input, {
-    datePickerType: datePickerType
+    datePickerType: datePickerType,
+    invalid: Boolean(invalid)
   }, DatePickerProps), /*#__PURE__*/React.createElement(DatePickerInput, _extends({
     id: input.name,
-    invalid: Boolean(invalid),
-    invalidText: invalid ? invalid : ''
+    invalidText: invalid || ''
   }, rest))), /*#__PURE__*/React.createElement(HelperTextBlock, {
     helperText: !invalid && helperText,
     warnText: warnText

package/esm/dual-list-select/dual-list-select.js

@@ -9,8 +9,8 @@ import React from 'react';
 import DualListSelectCommon from '@data-driven-forms/common/dual-list-select';
 import clsx from 'clsx';
 import { createUseStyles } from "react-jss/dist/react-jss.esm.js";
-import { Grid, Row, Column, Button, FormGroup, Search, StructuredListWrapper, StructuredListRow, StructuredListBody, StructuredListCell, TooltipIcon } from 'carbon-components-react';
-import { CheckmarkFilled16, ChevronRight32, ChevronLeft32, CaretSortDown32, CaretSortUp32 } from '@carbon/icons-react';
+import { Grid, Column, Button, FormGroup, Search, StructuredListWrapper, StructuredListRow, StructuredListBody, StructuredListCell } from '@carbon/react';
+import { CheckmarkFilled, ChevronRight, ChevronLeft, CaretSortDown, CaretSortUp } from '@carbon/react/icons';
 import { buildLabel } from '../prepare-props';
 var useStyles = createUseStyles({
   dualList: {
@@ -41,10 +41,14 @@ var useStyles = createUseStyles({
     }
   },
   toolbar: {
-    display: 'flex'
+    display: 'flex',
+    '& .cds--tooltip-trigger__wrapper': {
+      height: '100%'
+    }
   },
   tooltipButton: {
-    background: '#c2c1c1 !important'
+    background: '#c2c1c1 !important',
+    height: '100%'
   }
 });
 
@@ -77,7 +81,6 @@ var List = function List(_ref2) {
         ListRowProps = _ref3.ListRowProps,
         ListCellProps = _ref3.ListCellProps,
         GridProps = _ref3.GridProps,
-        RowProps = _ref3.RowProps,
         LabelProps = _ref3.LabelProps,
         CheckmarkProps = _ref3.CheckmarkProps;
     return /*#__PURE__*/React.createElement(StructuredListRow, _extends({
@@ -88,13 +91,15 @@ var List = function List(_ref2) {
           ctrlKey: true
         }), value);
       }
-    }), /*#__PURE__*/React.createElement(StructuredListCell, ListCellProps, /*#__PURE__*/React.createElement(Grid, GridProps, /*#__PURE__*/React.createElement(Row, _extends({
-      narrow: true
-    }, RowProps), /*#__PURE__*/React.createElement(Column, _extends({
+    }), /*#__PURE__*/React.createElement(StructuredListCell, ListCellProps, /*#__PURE__*/React.createElement(Grid, _extends({
+      condensed: true
+    }, GridProps), /*#__PURE__*/React.createElement(Column, _extends({
       sm: 3
     }, LabelProps), label), /*#__PURE__*/React.createElement(Column, _extends({
       sm: 1
-    }, CheckmarkProps), selectedValues.includes(value) && /*#__PURE__*/React.createElement(CheckmarkFilled16, null))))));
+    }, CheckmarkProps), selectedValues.includes(value) && /*#__PURE__*/React.createElement(CheckmarkFilled, {
+      size: 16
+    })))));
   }))) : /*#__PURE__*/React.createElement(EmptyList, {
     message: noTitle
   });
@@ -122,12 +127,24 @@ var Toolbar = function Toolbar(_ref4) {
     },
     labelText: "",
     placeholder: placeholder
-  }, SearchProps)), /*#__PURE__*/React.createElement(TooltipIcon, _extends({
+  }, SearchProps)), /*#__PURE__*/React.createElement(Button, _extends({
+    kind: "ghost",
+    size: "sm",
+    hasIconOnly: true,
     onClick: onSort,
-    tooltipText: sortTitle
+    iconDescription: sortTitle,
+    renderIcon: function renderIcon(props) {
+      return sortDirection ? /*#__PURE__*/React.createElement(CaretSortDown, _extends({
+        size: 32
+      }, props)) : /*#__PURE__*/React.createElement(CaretSortUp, _extends({
+        size: 32
+      }, props));
+    },
+    tooltipAlignment: "center",
+    tooltipPosition: "bottom"
   }, SortProps, {
     className: clsx(tooltipButton, SortProps.className)
-  }), sortDirection ? /*#__PURE__*/React.createElement(CaretSortDown32, null) : /*#__PURE__*/React.createElement(CaretSortUp32, null)));
+  })));
 };
 
 var isEmpty = function isEmpty(array) {
@@ -188,8 +205,6 @@ var DualListSelectInner = function DualListSelectInner(_ref5) {
       FormGroupProps = _ref5$FormGroupProps === void 0 ? {} : _ref5$FormGroupProps,
       _ref5$GridProps = _ref5.GridProps,
       GridProps = _ref5$GridProps === void 0 ? {} : _ref5$GridProps,
-      _ref5$RowProps = _ref5.RowProps,
-      RowProps = _ref5$RowProps === void 0 ? {} : _ref5$RowProps,
       _ref5$OptionsColumnPr = _ref5.OptionsColumnProps,
       OptionsColumnProps = _ref5$OptionsColumnPr === void 0 ? {} : _ref5$OptionsColumnPr,
       _ref5$ButtonColumnPro = _ref5.ButtonColumnProps,
@@ -230,9 +245,9 @@ var DualListSelectInner = function DualListSelectInner(_ref5) {
 
   return /*#__PURE__*/React.createElement(FormGroup, _extends({
     legendText: buildLabel(label || '', isRequired)
-  }, FormGroupProps), /*#__PURE__*/React.createElement(Grid, GridProps, /*#__PURE__*/React.createElement(Row, _extends({
+  }, FormGroupProps), /*#__PURE__*/React.createElement(Grid, _extends({
     condensed: true
-  }, RowProps), /*#__PURE__*/React.createElement(Column, _extends({
+  }, GridProps), /*#__PURE__*/React.createElement(Column, _extends({
     sm: 4,
     md: 8,
     lg: 5
@@ -255,12 +270,16 @@ var DualListSelectInner = function DualListSelectInner(_ref5) {
   })), /*#__PURE__*/React.createElement(Column, _extends({
     sm: 4,
     md: 8,
-    lg: 2
+    lg: 4
   }, ButtonColumnProps, {
     className: clsx(buttonWrapper, ButtonColumnProps.className)
   }), /*#__PURE__*/React.createElement(Button, _extends({
     id: "move-right",
-    renderIcon: ChevronRight32,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(ChevronRight, _extends({
+        size: 32
+      }, props));
+    },
     onClick: handleMoveRight,
     disabled: isEmpty(state.selectedLeftValues)
   }, AddButtonProps), moveRightTitle), /*#__PURE__*/React.createElement(Button, _extends({
@@ -273,7 +292,11 @@ var DualListSelectInner = function DualListSelectInner(_ref5) {
     disabled: isEmpty(rightValues)
   }, RemoveAllButtonProps), moveAllLeftTitle), /*#__PURE__*/React.createElement(Button, _extends({
     id: "move-left",
-    renderIcon: ChevronLeft32,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(ChevronLeft, _extends({
+        size: 32
+      }, props));
+    },
     onClick: handleMoveLeft,
     disabled: isEmpty(state.selectedRightValues)
   }, RemoveButtonProps), moveLeftTitle)), /*#__PURE__*/React.createElement(Column, _extends({
@@ -296,7 +319,7 @@ var DualListSelectInner = function DualListSelectInner(_ref5) {
     selectedValues: state.selectedRightValues,
     handleOptionsClick: handleValuesClick,
     noTitle: state.filterValue ? filterValueText : noValueTitle
-  })))));
+  }))));
 };
 
 var DualListSelect = function DualListSelect(props) {

package/esm/field-array/field-array.js

@@ -15,8 +15,8 @@ import { createUseStyles } from "react-jss/dist/react-jss.esm.js";
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
 import useFormApi from "@data-driven-forms/react-form-renderer/use-form-api";
 import FieldArrayFF from "@data-driven-forms/react-form-renderer/field-array";
-import { Button, FormGroup } from 'carbon-components-react';
-import { AddAlt32, Subtract32 } from '@carbon/icons-react';
+import { Button, FormGroup } from '@carbon/react';
+import { AddAlt, Subtract } from '@carbon/react/icons';
 import prepareProps from '../prepare-props';
 var useStyles = createUseStyles({
   add: {
@@ -61,7 +61,11 @@ var ArrayItem = /*#__PURE__*/memo(function (_ref) {
   });
   return /*#__PURE__*/React.createElement("div", ArrayItemProps, formOptions.renderForm(editedFields, formOptions), /*#__PURE__*/React.createElement(Button, _extends({
     disabled: buttonDisabled,
-    renderIcon: Subtract32,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(Subtract, _extends({
+        size: 32
+      }, props));
+    },
     id: "remove-".concat(name),
     kind: "danger",
     onClick: remove
@@ -146,7 +150,11 @@ var FieldArray = function FieldArray(props) {
       className: clsx(addContainer, AddContainerProps.className)
     }), /*#__PURE__*/React.createElement(Button, _extends({
       disabled: fieldArrayProps.fields.length >= maxItems,
-      renderIcon: AddAlt32,
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/React.createElement(AddAlt, _extends({
+          size: 32
+        }, props));
+      },
       id: "add-".concat(input.name),
       onClick: function onClick() {
         return fieldArrayProps.fields.push(defaultItem);

package/esm/form-template/form-template.js

@@ -8,7 +8,7 @@ var _excluded = ["label", "buttonType"],
 import React from 'react';
 import clsx from 'clsx';
 import { createUseStyles } from "react-jss/dist/react-jss.esm.js";
-import { Form as CarbonForm, Button as CarbonButton, ButtonSet } from 'carbon-components-react';
+import { Form as CarbonForm, Button as CarbonButton, ButtonSet } from '@carbon/react';
 import FormTemplate from '@data-driven-forms/common/form-template';
 var useStyles = createUseStyles({
   buttons: {

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

@@ -18,19 +18,19 @@ var HelperTextBlock = function HelperTextBlock(_ref) {
 
   if (errorText) {
     return /*#__PURE__*/React.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.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.createElement("div", {
-      className: "bx--form__helper-text"
+      className: "cds--form__helper-text"
     }, helperText);
   }
 

package/esm/radio/radio.js

@@ -4,7 +4,7 @@ var _excluded = ["component"],
     _excluded2 = ["labelText", "disabled", "input", "options", "FormGroupProps", "helperText", "meta", "validateOnMount"];
 import React from 'react';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
-import { FormGroup, RadioButtonGroup, RadioButton } from 'carbon-components-react';
+import { FormGroup, RadioButtonGroup, RadioButton } from '@carbon/react';
 import prepareProps from '../prepare-props';
 import HelperTextBlock from '../helper-text-block/helper-text-block';
 

package/esm/select/select.js

@@ -12,7 +12,7 @@ import React, { useState, useEffect } from 'react';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
 import DataDrivenSelect from '@data-driven-forms/common/select';
 import fnToString from '@data-driven-forms/common/utils/fn-to-string';
-import { Select as CarbonSelect, MultiSelect, SelectItem, ComboBox, SelectItemGroup } from 'carbon-components-react';
+import { Select as CarbonSelect, MultiSelect, FilterableMultiSelect, SelectItem, ComboBox, SelectItemGroup } from '@carbon/react';
 import prepareProps from '../prepare-props';
 
 var onChangeWrapper = function onChangeWrapper(onChange) {
@@ -69,7 +69,7 @@ var ClearedMultiSelectFilterable = function ClearedMultiSelectFilterable(_ref3)
       isDisabled = _ref3.isDisabled,
       rest = _objectWithoutProperties(_ref3, _excluded2);
 
-  return /*#__PURE__*/React.createElement(MultiSelect.Filterable, _extends({
+  return /*#__PURE__*/React.createElement(FilterableMultiSelect, _extends({
     disabled: isDisabled
   }, rest, {
     placeholder: carbonLabel || placeholder,

package/esm/slider/slider.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["input", "meta", "isRequired", "validateOnMount", "helperText", "WrapperProps"];
 import React from 'react';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
-import { Slider as CarbonSlider } from 'carbon-components-react';
+import { Slider as CarbonSlider } from '@carbon/react';
 import prepareProps from '../prepare-props';
 import HelperTextBlock from '../helper-text-block/helper-text-block';
 

package/esm/switch/switch.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 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; }
 
@@ -10,7 +10,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
-import { Toggle } from 'carbon-components-react';
+import { Toggle } from '@carbon/react';
 import prepareProps from '../prepare-props';
 import HelperTextBlock from '../helper-text-block/helper-text-block';
 
@@ -31,12 +31,15 @@ var Switch = function Switch(props) {
   var warnText = (meta.touched || validateOnMount) && meta.warning;
 
   var checked = input.checked,
+      name = input.name,
+      onChange = input.onChange,
       inputRest = _objectWithoutProperties(input, _excluded2);
 
   return /*#__PURE__*/React.createElement("div", WrapperProps, /*#__PURE__*/React.createElement(Toggle, _extends({}, inputRest, {
     toggled: checked,
-    key: input.name,
-    id: input.name,
+    onToggle: onChange,
+    key: name,
+    id: name,
     labelA: offText,
     labelB: onText
   }, rest)), /*#__PURE__*/React.createElement(HelperTextBlock, {