@dhis2-ui/transfer 8.1.11 → 8.2.2

package/build/cjs/features/transferring-items/index.js

@@ -45,69 +45,90 @@ var _index = require("../common/index.js");
   cy.get('{transfer-pickedoptions} {transferoption}').first().dblclick().then(_index.extractOptionFromElement).as('doubleClickedPlainOption');
 });
 (0, _steps.Then)('the highlighted items should be removed from the options list', () => {
-  cy.all(() => cy.get('@itemsToBeSelected'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(([itemsToBeSelected, $selectableSourceOptions]) => {
+  cy.all(() => cy.get('@itemsToBeSelected'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(_ref => {
+    let [itemsToBeSelected, $selectableSourceOptions] = _ref;
     const selectableSourceOptions = $selectableSourceOptions.toArray().map(_index.extractOptionFromElement);
     const itemsStillSelectable = itemsToBeSelected.every(itemToBeSelected => {
-      const result = selectableSourceOptions.find(({
-        label,
-        value
-      }) => label === itemToBeSelected.label && value === itemToBeSelected.value);
+      const result = selectableSourceOptions.find(_ref2 => {
+        let {
+          label,
+          value
+        } = _ref2;
+        return label === itemToBeSelected.label && value === itemToBeSelected.value;
+      });
       return result;
     });
     expect(itemsStillSelectable).to.equal(false);
   });
 });
 (0, _steps.Then)('the highlighted items should be visible in the selected list', () => {
-  cy.all(() => cy.get('@itemsToBeSelected'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(([itemsToBeSelected, $selectedOptions]) => {
+  cy.all(() => cy.get('@itemsToBeSelected'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(_ref3 => {
+    let [itemsToBeSelected, $selectedOptions] = _ref3;
     const selectedOptions = $selectedOptions.toArray().map(_index.extractOptionFromElement);
-    const itemsSelected = itemsToBeSelected.every(itemToBeSelected => selectedOptions.find(({
-      label,
-      value
-    }) => label === itemToBeSelected.label && value === itemToBeSelected.value));
+    const itemsSelected = itemsToBeSelected.every(itemToBeSelected => selectedOptions.find(_ref4 => {
+      let {
+        label,
+        value
+      } = _ref4;
+      return label === itemToBeSelected.label && value === itemToBeSelected.value;
+    }));
     expect(itemsSelected).to.equal(true);
   });
 });
 (0, _steps.Then)('the highlighted items should be appended to the selected list in the order they were highlighted', () => {
-  cy.all(() => cy.get('@itemsToBeSelected'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(([itemsToBeSelected, $selectedOptions]) => {
+  cy.all(() => cy.get('@itemsToBeSelected'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(_ref5 => {
+    let [itemsToBeSelected, $selectedOptions] = _ref5;
     const lastNSelectedOptions = $selectedOptions.toArray().map(_index.extractOptionFromElement).slice(itemsToBeSelected.length * -1);
     expect(itemsToBeSelected).to.eql(lastNSelectedOptions);
   });
 });
 (0, _steps.Then)('the highlighted items should be removed from the selected list', () => {
-  cy.all(() => cy.get('@itemsToBeDeselected'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(([itemsToBeDeselected, $selectedOptions]) => {
+  cy.all(() => cy.get('@itemsToBeDeselected'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(_ref6 => {
+    let [itemsToBeDeselected, $selectedOptions] = _ref6;
     const selectedOptions = $selectedOptions.toArray().map(_index.extractOptionFromElement);
     const itemsStillSelected = itemsToBeDeselected.every(itemToBeSelected => {
-      const result = selectedOptions.find(({
-        label,
-        value
-      }) => label === itemToBeSelected.label && value === itemToBeSelected.value);
+      const result = selectedOptions.find(_ref7 => {
+        let {
+          label,
+          value
+        } = _ref7;
+        return label === itemToBeSelected.label && value === itemToBeSelected.value;
+      });
       return result;
     });
     expect(itemsStillSelected).to.equal(false);
   });
 });
 (0, _steps.Then)('the highlighted items should be visible in the options list', () => {
-  cy.all(() => cy.get('@itemsToBeDeselected'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(([itemsToBeDeselected, $selectedOptions]) => {
+  cy.all(() => cy.get('@itemsToBeDeselected'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(_ref8 => {
+    let [itemsToBeDeselected, $selectedOptions] = _ref8;
     const selectedOptions = $selectedOptions.toArray().map(_index.extractOptionFromElement);
     const itemsSelectable = itemsToBeDeselected.every(itemToBeSelected => {
-      const result = selectedOptions.find(({
-        label,
-        value
-      }) => label === itemToBeSelected.label && value === itemToBeSelected.value);
+      const result = selectedOptions.find(_ref9 => {
+        let {
+          label,
+          value
+        } = _ref9;
+        return label === itemToBeSelected.label && value === itemToBeSelected.value;
+      });
       return result;
     });
     expect(itemsSelectable).to.equal(true);
   });
 });
 (0, _steps.Then)('the highlighted items should be in the original options list ordering', () => {
-  cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(([win, $selectableSourceOptions, $selectedOptions]) => {
+  cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(_ref10 => {
+    let [win, $selectableSourceOptions, $selectedOptions] = _ref10;
     const selectedOptions = $selectedOptions.toArray().map(_index.extractOptionFromElement);
     const selectableSourceOptions = $selectableSourceOptions.toArray().map(_index.extractOptionFromElement);
     const allOptionsWithoutSelected = win.options.filter(option => {
-      return !selectedOptions.find(({
-        label,
-        value
-      }) => option.label === label && option.value === value);
+      return !selectedOptions.find(_ref11 => {
+        let {
+          label,
+          value
+        } = _ref11;
+        return option.label === label && option.value === value;
+      });
     });
     expect(allOptionsWithoutSelected).to.eql(selectableSourceOptions);
   });
@@ -116,19 +137,24 @@ var _index = require("../common/index.js");
   cy.get('{transfer-sourceoptions} {transferoption}').should('not.exist');
 });
 (0, _steps.Then)('all items removed from options list should be visible in the selected list', () => {
-  cy.all(() => cy.get('@itemsToBeSelected'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(([itemsToBeSelected, $selectedOptions]) => {
+  cy.all(() => cy.get('@itemsToBeSelected'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(_ref12 => {
+    let [itemsToBeSelected, $selectedOptions] = _ref12;
     const selectedOptions = $selectedOptions.toArray().map(_index.extractOptionFromElement);
     const allSelected = itemsToBeSelected.every(option => {
-      return selectedOptions.find(({
-        label,
-        value
-      }) => option.label === label && option.value === value);
+      return selectedOptions.find(_ref13 => {
+        let {
+          label,
+          value
+        } = _ref13;
+        return option.label === label && option.value === value;
+      });
     });
     expect(allSelected).to.equal(true);
   });
 });
 (0, _steps.Then)('the transferred items should be appended to the selected list in the order they were displayed in the options list', () => {
-  cy.all(() => cy.get('@itemsToBeSelected'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(([itemsToBeSelected, $selectedOptions]) => {
+  cy.all(() => cy.get('@itemsToBeSelected'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(_ref14 => {
+    let [itemsToBeSelected, $selectedOptions] = _ref14;
     const selectedOptions = $selectedOptions.toArray().map(_index.extractOptionFromElement);
     const previouslySelectedSubset = selectedOptions.slice(-1 * itemsToBeSelected.length);
     expect(itemsToBeSelected).to.eql(previouslySelectedSubset);
@@ -138,19 +164,24 @@ var _index = require("../common/index.js");
   cy.get('{transfer-pickedoptions} {transferoption}').should('not.exist');
 });
 (0, _steps.Then)('all items removed from selected list should be visible in the options list', () => {
-  cy.all(() => cy.get('@itemsToBeDeselected'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(([itemsToBeDeselected, $selectableSourceOptions]) => {
+  cy.all(() => cy.get('@itemsToBeDeselected'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(_ref15 => {
+    let [itemsToBeDeselected, $selectableSourceOptions] = _ref15;
     const selectableSourceOptions = $selectableSourceOptions.toArray().map(_index.extractOptionFromElement);
     const allSelectable = itemsToBeDeselected.every(option => {
-      return selectableSourceOptions.find(({
-        label,
-        value
-      }) => option.label === label && option.value === value);
+      return selectableSourceOptions.find(_ref16 => {
+        let {
+          label,
+          value
+        } = _ref16;
+        return option.label === label && option.value === value;
+      });
     });
     expect(allSelectable).to.equal(true);
   });
 });
 (0, _steps.Then)('the transferred items should be appended to the selected list in the order they were displayed in the options list', () => {
-  cy.all(() => cy.get('@itemsToBeSelected'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(([itemsToBeSelected, $selectedOptions]) => {
+  cy.all(() => cy.get('@itemsToBeSelected'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(_ref17 => {
+    let [itemsToBeSelected, $selectedOptions] = _ref17;
     const selectedOptions = $selectedOptions.toArray().map(_index.extractOptionFromElement);
     const previouslySelectedSubset = selectedOptions.slice(-1 * itemsToBeSelected.length);
     expect(itemsToBeSelected).to.eql(previouslySelectedSubset);
@@ -159,7 +190,8 @@ var _index = require("../common/index.js");
 (0, _steps.Then)('the options list items should be ordered in the original order', () => {
   cy.all(() => cy.window(), () => cy.get('{transfer-sourceoptions} {transferoption}'), () => cy.get('{transfer-pickedoptions}').then($pickedOptions => {
     return $pickedOptions.find((0, _parseSelectorWithDataTest.parseSelectorWithDataTest)('{transferoption}'));
-  })).should(([win, $selectableSourceOptions, $pickedOptions]) => {
+  })).should(_ref18 => {
+    let [win, $selectableSourceOptions, $pickedOptions] = _ref18;
     const pickedPlainOptions = $pickedOptions.toArray().map(_index.extractOptionFromElement);
     const originalOrderWithoutSelected = win.options.filter(originalOption => {
       return !pickedPlainOptions.find(pickedPlainOption => pickedPlainOption.value === originalOption.value && pickedPlainOption.label === originalOption.label);
@@ -169,21 +201,24 @@ var _index = require("../common/index.js");
   });
 });
 (0, _steps.Then)('the item should be removed from its options list', () => {
-  cy.all(() => cy.get('@doubleClickedPlainOption'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(([doubleClickedPlainOption, $sourceOptions]) => {
+  cy.all(() => cy.get('@doubleClickedPlainOption'), () => cy.get('{transfer-sourceoptions} {transferoption}')).should(_ref19 => {
+    let [doubleClickedPlainOption, $sourceOptions] = _ref19;
     const sourcePlainOptions = $sourceOptions.toArray().map(_index.extractOptionFromElement);
     const found = sourcePlainOptions.find(sourcePlainOption => sourcePlainOption.value === doubleClickedPlainOption.value && sourcePlainOption.label === doubleClickedPlainOption.label);
     expect(found).to.not.equal(true);
   });
 });
 (0, _steps.Then)('the item should be visible at the bottom of the selected list', () => {
-  cy.all(() => cy.get('@doubleClickedPlainOption'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(([doubleClickedPlainOption, $pickedOptions]) => {
+  cy.all(() => cy.get('@doubleClickedPlainOption'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(_ref20 => {
+    let [doubleClickedPlainOption, $pickedOptions] = _ref20;
     const lastSourcePlainOption = $pickedOptions.last().toArray().map(_index.extractOptionFromElement).pop();
     const doubleClickedOptionIsLast = lastSourcePlainOption.value === doubleClickedPlainOption.value && lastSourcePlainOption.label === doubleClickedPlainOption.label;
     expect(doubleClickedOptionIsLast).to.equal(true);
   });
 });
 (0, _steps.Then)('the item should be removed from the selected list', () => {
-  cy.all(() => cy.get('@doubleClickedPlainOption'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(([doubleClickedPlainOption, $pickedOptions]) => {
+  cy.all(() => cy.get('@doubleClickedPlainOption'), () => cy.get('{transfer-pickedoptions} {transferoption}')).should(_ref21 => {
+    let [doubleClickedPlainOption, $pickedOptions] = _ref21;
     const pickedPlainOptions = $pickedOptions.toArray().map(_index.extractOptionFromElement);
     const found = pickedPlainOptions.find(sourcePlainOption => sourcePlainOption.value === doubleClickedPlainOption.value && sourcePlainOption.label === doubleClickedPlainOption.label);
     expect(found).to.not.equal(true);

package/build/cjs/filter.js

@@ -19,29 +19,32 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Filter = ({
-  dataTest,
-  filter,
-  onChange,
-  label,
-  placeholder
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  "data-test": dataTest,
-  className: _style.default.dynamic([["3679907342", [_uiConstants.spacers.dp8, _uiConstants.spacers.dp8]]])
-}, /*#__PURE__*/_react.default.createElement(_field.Field, {
-  label: label,
-  name: dataTest,
-  dataTest: `${dataTest}-field`
-}, /*#__PURE__*/_react.default.createElement(_input.Input, {
-  dataTest: `${dataTest}-input`,
-  type: "search",
-  placeholder: placeholder,
-  value: filter,
-  onChange: onChange
-})), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "3679907342",
-  dynamic: [_uiConstants.spacers.dp8, _uiConstants.spacers.dp8]
-}, [`div.__jsx-style-dynamic-selector{padding-bottom:${_uiConstants.spacers.dp8};}`, `div.__jsx-style-dynamic-selector:first-child{padding-top:${_uiConstants.spacers.dp8};}`]));
+const Filter = _ref => {
+  let {
+    dataTest,
+    filter,
+    onChange,
+    label,
+    placeholder
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": dataTest,
+    className: _style.default.dynamic([["3679907342", [_uiConstants.spacers.dp8, _uiConstants.spacers.dp8]]])
+  }, /*#__PURE__*/_react.default.createElement(_field.Field, {
+    label: label,
+    name: dataTest,
+    dataTest: "".concat(dataTest, "-field")
+  }, /*#__PURE__*/_react.default.createElement(_input.Input, {
+    dataTest: "".concat(dataTest, "-input"),
+    type: "search",
+    placeholder: placeholder,
+    value: filter,
+    onChange: onChange
+  })), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3679907342",
+    dynamic: [_uiConstants.spacers.dp8, _uiConstants.spacers.dp8]
+  }, ["div.__jsx-style-dynamic-selector{padding-bottom:".concat(_uiConstants.spacers.dp8, ";}"), "div.__jsx-style-dynamic-selector:first-child{padding-top:".concat(_uiConstants.spacers.dp8, ";}")]));
+};
 
 exports.Filter = Filter;
 Filter.propTypes = {

package/build/cjs/icons.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconMoveUp = exports.IconMoveDown = exports.IconRemoveIndividual = exports.IconRemoveAll = exports.IconAddIndividual = exports.IconAddAll = void 0;
+exports.IconRemoveIndividual = exports.IconRemoveAll = exports.IconMoveUp = exports.IconMoveDown = exports.IconAddIndividual = exports.IconAddAll = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
@@ -18,31 +18,34 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const centerButtonStyles = ["svg.jsx-114231192{min-width:20px;}"];
 centerButtonStyles.__hash = "114231192";
 
-const IconAddAll = ({
-  dataTest,
-  disabled
-}) => /*#__PURE__*/_react.default.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  "data-test": dataTest,
-  fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
-  className: `jsx-${centerButtonStyles.__hash}`
-}, /*#__PURE__*/_react.default.createElement("g", {
-  fillRule: "evenodd",
-  className: `jsx-${centerButtonStyles.__hash}`
-}, /*#__PURE__*/_react.default.createElement("polygon", {
-  fillRule: "nonzero",
-  points: "6 2 4.94 3.06 9.13 7.25 0 7.25 0 8.75 9.13 8.75 4.94 12.94 6 14 12 8",
-  className: `jsx-${centerButtonStyles.__hash}`
-}), /*#__PURE__*/_react.default.createElement("polygon", {
-  fillRule: "nonzero",
-  points: "10 2 8.94 3.06 13.13 7.25 13.9 8 13.13 8.75 8.94 12.94 10 14 16 8",
-  className: `jsx-${centerButtonStyles.__hash}`
-})), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: centerButtonStyles.__hash
-}, centerButtonStyles));
+const IconAddAll = _ref => {
+  let {
+    dataTest,
+    disabled
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    "data-test": dataTest,
+    fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
+    className: "jsx-".concat(centerButtonStyles.__hash)
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd",
+    className: "jsx-".concat(centerButtonStyles.__hash)
+  }, /*#__PURE__*/_react.default.createElement("polygon", {
+    fillRule: "nonzero",
+    points: "6 2 4.94 3.06 9.13 7.25 0 7.25 0 8.75 9.13 8.75 4.94 12.94 6 14 12 8",
+    className: "jsx-".concat(centerButtonStyles.__hash)
+  }), /*#__PURE__*/_react.default.createElement("polygon", {
+    fillRule: "nonzero",
+    points: "10 2 8.94 3.06 13.13 7.25 13.9 8 13.13 8.75 8.94 12.94 10 14 16 8",
+    className: "jsx-".concat(centerButtonStyles.__hash)
+  })), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: centerButtonStyles.__hash
+  }, centerButtonStyles));
+};
 
 exports.IconAddAll = IconAddAll;
 IconAddAll.propTypes = {
@@ -50,23 +53,26 @@ IconAddAll.propTypes = {
   disabled: _propTypes.default.bool
 };
 
-const IconAddIndividual = ({
-  dataTest,
-  disabled
-}) => /*#__PURE__*/_react.default.createElement("svg", {
-  fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  "data-test": dataTest,
-  className: `jsx-${centerButtonStyles.__hash}`
-}, /*#__PURE__*/_react.default.createElement("polygon", {
-  points: "8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8",
-  className: `jsx-${centerButtonStyles.__hash}`
-}), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: centerButtonStyles.__hash
-}, centerButtonStyles));
+const IconAddIndividual = _ref2 => {
+  let {
+    dataTest,
+    disabled
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    "data-test": dataTest,
+    className: "jsx-".concat(centerButtonStyles.__hash)
+  }, /*#__PURE__*/_react.default.createElement("polygon", {
+    points: "8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8",
+    className: "jsx-".concat(centerButtonStyles.__hash)
+  }), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: centerButtonStyles.__hash
+  }, centerButtonStyles));
+};
 
 exports.IconAddIndividual = IconAddIndividual;
 IconAddIndividual.propTypes = {
@@ -74,33 +80,36 @@ IconAddIndividual.propTypes = {
   disabled: _propTypes.default.bool
 };
 
-const IconRemoveAll = ({
-  dataTest,
-  disabled
-}) => /*#__PURE__*/_react.default.createElement("svg", {
-  fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
-  width: "16px",
-  height: "16px",
-  viewBox: "0 0 16 16",
-  "data-test": dataTest,
-  xmlns: "http://www.w3.org/2000/svg",
-  className: `jsx-${centerButtonStyles.__hash}`
-}, /*#__PURE__*/_react.default.createElement("g", {
-  fillRule: "evenodd",
-  className: `jsx-${centerButtonStyles.__hash}`
-}, /*#__PURE__*/_react.default.createElement("polygon", {
-  fillRule: "nonzero",
-  points: "10 2 8.94 3.06 13.13 7.25 4 7.25 4 8.75 13.13 8.75 8.94 12.94 10 14 16 8",
-  transform: "matrix(-1 0 0 1 20 0)",
-  className: `jsx-${centerButtonStyles.__hash}`
-}), /*#__PURE__*/_react.default.createElement("polygon", {
-  fillRule: "nonzero",
-  points: "1.06 2 0 3.06 4.19 7.25 4.96 8 4.19 8.75 0 12.94 1.06 14 7.06 8",
-  transform: "matrix(-1 0 0 1 7.06 0)",
-  className: `jsx-${centerButtonStyles.__hash}`
-})), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: centerButtonStyles.__hash
-}, centerButtonStyles));
+const IconRemoveAll = _ref3 => {
+  let {
+    dataTest,
+    disabled
+  } = _ref3;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
+    width: "16px",
+    height: "16px",
+    viewBox: "0 0 16 16",
+    "data-test": dataTest,
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "jsx-".concat(centerButtonStyles.__hash)
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd",
+    className: "jsx-".concat(centerButtonStyles.__hash)
+  }, /*#__PURE__*/_react.default.createElement("polygon", {
+    fillRule: "nonzero",
+    points: "10 2 8.94 3.06 13.13 7.25 4 7.25 4 8.75 13.13 8.75 8.94 12.94 10 14 16 8",
+    transform: "matrix(-1 0 0 1 20 0)",
+    className: "jsx-".concat(centerButtonStyles.__hash)
+  }), /*#__PURE__*/_react.default.createElement("polygon", {
+    fillRule: "nonzero",
+    points: "1.06 2 0 3.06 4.19 7.25 4.96 8 4.19 8.75 0 12.94 1.06 14 7.06 8",
+    transform: "matrix(-1 0 0 1 7.06 0)",
+    className: "jsx-".concat(centerButtonStyles.__hash)
+  })), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: centerButtonStyles.__hash
+  }, centerButtonStyles));
+};
 
 exports.IconRemoveAll = IconRemoveAll;
 IconRemoveAll.propTypes = {
@@ -108,24 +117,27 @@ IconRemoveAll.propTypes = {
   disabled: _propTypes.default.bool
 };
 
-const IconRemoveIndividual = ({
-  dataTest,
-  disabled
-}) => /*#__PURE__*/_react.default.createElement("svg", {
-  fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  "data-test": dataTest,
-  className: `jsx-${centerButtonStyles.__hash}`
-}, /*#__PURE__*/_react.default.createElement("polygon", {
-  points: "8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8",
-  transform: "matrix(-1 0 0 1 16 0)",
-  className: `jsx-${centerButtonStyles.__hash}`
-}), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: centerButtonStyles.__hash
-}, centerButtonStyles));
+const IconRemoveIndividual = _ref4 => {
+  let {
+    dataTest,
+    disabled
+  } = _ref4;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    "data-test": dataTest,
+    className: "jsx-".concat(centerButtonStyles.__hash)
+  }, /*#__PURE__*/_react.default.createElement("polygon", {
+    points: "8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8",
+    transform: "matrix(-1 0 0 1 16 0)",
+    className: "jsx-".concat(centerButtonStyles.__hash)
+  }), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: centerButtonStyles.__hash
+  }, centerButtonStyles));
+};
 
 exports.IconRemoveIndividual = IconRemoveIndividual;
 IconRemoveIndividual.propTypes = {
@@ -133,20 +145,23 @@ IconRemoveIndividual.propTypes = {
   disabled: _propTypes.default.bool
 };
 
-const IconMoveDown = ({
-  dataTest,
-  disabled
-}) => /*#__PURE__*/_react.default.createElement("svg", {
-  fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  "data-test": dataTest
-}, /*#__PURE__*/_react.default.createElement("polygon", {
-  points: "8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8",
-  transform: "matrix(0 1 1 0 0 0)"
-}));
+const IconMoveDown = _ref5 => {
+  let {
+    dataTest,
+    disabled
+  } = _ref5;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    "data-test": dataTest
+  }, /*#__PURE__*/_react.default.createElement("polygon", {
+    points: "8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8",
+    transform: "matrix(0 1 1 0 0 0)"
+  }));
+};
 
 exports.IconMoveDown = IconMoveDown;
 IconMoveDown.propTypes = {
@@ -154,20 +169,23 @@ IconMoveDown.propTypes = {
   disabled: _propTypes.default.bool
 };
 
-const IconMoveUp = ({
-  dataTest,
-  disabled
-}) => /*#__PURE__*/_react.default.createElement("svg", {
-  fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  "data-test": dataTest
-}, /*#__PURE__*/_react.default.createElement("polygon", {
-  points: "8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8",
-  transform: "rotate(-90 8 8)"
-}));
+const IconMoveUp = _ref6 => {
+  let {
+    dataTest,
+    disabled
+  } = _ref6;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    fill: disabled ? _uiConstants.theme.disabled : '#404B5A',
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    "data-test": dataTest
+  }, /*#__PURE__*/_react.default.createElement("polygon", {
+    points: "8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8",
+    transform: "rotate(-90 8 8)"
+  }));
+};
 
 exports.IconMoveUp = IconMoveUp;
 IconMoveUp.propTypes = {

package/build/cjs/left-footer.js

@@ -17,16 +17,19 @@ var _index = require("./common/index.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const LeftFooter = ({
-  children,
-  dataTest
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  "data-test": dataTest,
-  className: _style.default.dynamic([["3629116366", [_index.borderColor, _uiConstants.spacers.dp8]]])
-}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "3629116366",
-  dynamic: [_index.borderColor, _uiConstants.spacers.dp8]
-}, [`div.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid ${borderColor};padding:0 ${_uiConstants.spacers.dp8};}`]));
+const LeftFooter = _ref => {
+  let {
+    children,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": dataTest,
+    className: _style.default.dynamic([["3629116366", [_index.borderColor, _uiConstants.spacers.dp8]]])
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3629116366",
+    dynamic: [_index.borderColor, _uiConstants.spacers.dp8]
+  }, ["div.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid ".concat(borderColor, ";padding:0 ").concat(_uiConstants.spacers.dp8, ";}")]));
+};
 
 exports.LeftFooter = LeftFooter;
 LeftFooter.propTypes = {

package/build/cjs/left-header.js

@@ -17,16 +17,19 @@ var _index = require("./common/index.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const LeftHeader = ({
-  children,
-  dataTest
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  "data-test": dataTest,
-  className: _style.default.dynamic([["2175954399", [_index.borderColor, _uiConstants.spacers.dp8]]])
-}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "2175954399",
-  dynamic: [_index.borderColor, _uiConstants.spacers.dp8]
-}, [`div.__jsx-style-dynamic-selector{border-bottom:1px solid ${borderColor};-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;padding:0 ${_uiConstants.spacers.dp8};}`]));
+const LeftHeader = _ref => {
+  let {
+    children,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": dataTest,
+    className: _style.default.dynamic([["2175954399", [_index.borderColor, _uiConstants.spacers.dp8]]])
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2175954399",
+    dynamic: [_index.borderColor, _uiConstants.spacers.dp8]
+  }, ["div.__jsx-style-dynamic-selector{border-bottom:1px solid ".concat(borderColor, ";-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;padding:0 ").concat(_uiConstants.spacers.dp8, ";}")]));
+};
 
 exports.LeftHeader = LeftHeader;
 LeftHeader.propTypes = {