@7shifts/sous-chef 1.2.0 → 1.3.1

package/dist/index.modern.js

@@ -1177,6 +1177,10 @@ var getLocalTranslation = function getLocalTranslation(key) {
   return key;
 };
 
+var capitalizeFirstLetter = function capitalizeFirstLetter(text) {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+};
+
 var PaginationControls = function PaginationControls(_ref) {
   var _ref$hasPrevious = _ref.hasPrevious,
       hasPrevious = _ref$hasPrevious === void 0 ? true : _ref$hasPrevious,
@@ -1189,13 +1193,13 @@ var PaginationControls = function PaginationControls(_ref) {
   }, React__default.createElement(Button$1, {
     disabled: !hasPrevious,
     onClick: onPreviousClick,
-    title: getLocalizedString('default.PREVIOUS')
+    title: capitalizeFirstLetter(getLocalizedString('default.PREVIOUS'))
   }, React__default.createElement(IconArrowLeft, {
     size: "small"
   })), React__default.createElement(Button$1, {
     disabled: !hasNext,
     onClick: onNextClick,
-    title: getLocalizedString('default.next')
+    title: capitalizeFirstLetter(getLocalizedString('default.next'))
   }, React__default.createElement(IconArrowRight, {
     size: "small"
   })));
@@ -1281,94 +1285,413 @@ var DefaultItemComponent = function DefaultItemComponent(_ref2) {
   }));
 };
 
-var Context$1 = createContext({});
-var useFormContext = function useFormContext() {
+var initialValue$1 = {
+  columns: [],
+  numberOfRows: 0
+};
+var Context$1 = createContext(initialValue$1);
+var useDataTableContext = function useDataTableContext() {
   var context = useContext(Context$1);
-  return context || {};
+
+  if (!context) {
+    throw Error('useDataTableContext should be used withing `DataTable`. Probably you are using `DataTableRow` without a `DataTable` component');
+  }
+
+  return context;
 };
 
-var styles$a = {"form--standard-size":"_3CaV0"};
+var styles$a = {"item":"_1d8Ci","clickable":"_thFcO","selected":"_3tb7U","item-column":"_OTcMc","item-column--default-padding":"_lNHQ8","item-column--right-align":"_13YLe","item-column--vertical-border":"_1rrRr","actions":"_azbIG"};
 
-var Form = function Form(_ref) {
+var DataTableRow = function DataTableRow(_ref) {
   var _classnames;
 
   var children = _ref.children,
-      onSubmit = _ref.onSubmit,
-      _ref$wide = _ref.wide,
-      wide = _ref$wide === void 0 ? false : _ref$wide,
-      formik = _ref.formik,
-      _ref$stackContent = _ref.stackContent,
-      stackContent = _ref$stackContent === void 0 ? true : _ref$stackContent;
+      onClick = _ref.onClick,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      _ref$hasDefaultPaddin = _ref.hasDefaultPadding,
+      hasDefaultPadding = _ref$hasDefaultPaddin === void 0 ? true : _ref$hasDefaultPaddin;
 
-  var handleSubmit = function handleSubmit(e) {
-    e.preventDefault();
-    onSubmit && onSubmit(e.currentTarget.elements);
+  var _useDataTableContext = useDataTableContext(),
+      columns = _useDataTableContext.columns,
+      showActionMenu = _useDataTableContext.showActionMenu,
+      hasVerticalBorders = _useDataTableContext.hasVerticalBorders;
+
+  var styleNames = classnames(styles$a['item'], (_classnames = {}, _classnames[styles$a['clickable']] = onClick, _classnames[styles$a['selected']] = isSelected, _classnames));
+
+  var renderColumn = function renderColumn(columnElement, index) {
+    var _classnames2;
+
+    var column = columns === null || columns === void 0 ? void 0 : columns[index];
+    var isRightAligned = column === null || column === void 0 ? void 0 : column.isRightAligned;
+    return React__default.createElement("div", {
+      className: classnames((_classnames2 = {}, _classnames2[styles$a['item-column--right-align']] = isRightAligned, _classnames2[styles$a['item-column--vertical-border']] = hasVerticalBorders, _classnames2[styles$a['item-column--default-padding']] = hasDefaultPadding, _classnames2), styles$a['item-column']),
+      style: {
+        flex: (column === null || column === void 0 ? void 0 : column.size) || 1
+      },
+      key: index,
+      "data-testid": "data-table-column"
+    }, columnElement);
+  };
+
+  return React__default.createElement("div", {
+    className: styleNames,
+    onClick: onClick ? onClick : undefined,
+    onKeyPress: onClick ? onClick : undefined,
+    "data-testid": "data-table-row",
+    role: "row"
+  }, React__default.Children.map(children, function (child, index) {
+    return renderColumn(child, index);
+  }), showActionMenu && React__default.createElement("div", {
+    className: classnames(styles$a['item-column'], styles$a['actions']),
+    "data-testid": "data-table-dropdown-menu"
+  }, actions.length > 0 && React__default.createElement(Menu, null, React__default.createElement(MenuButton, null, React__default.createElement(IconMore, null)), React__default.createElement(MenuList, null, actions.map(function (action, index) {
+    return React__default.createElement(MenuItem, {
+      onClick: action.onAction,
+      key: index
+    }, action.label);
+  })))));
+};
+
+var styles$b = {"header":"_of22N","header-item":"_27x4v","header-item--sortable":"_3gw3Z","header-item--right-align":"_Fjm2n","header-item--action":"_LoIvx","header-sort-icon":"_3VjFP","body":"_1bTmd","footer":"_1opWx","pagination-controls":"_F_spz"};
+
+var SORT_ORDER$1 = {
+  ASC: 'asc',
+  DESC: 'desc'
+};
+
+var DataTableHeader = function DataTableHeader(_ref) {
+  var columns = _ref.columns,
+      onSort = _ref.onSort,
+      showActionMenu = _ref.showActionMenu;
+  var haveLabels = columns.find(function (column) {
+    return column.label && column.label !== '';
+  });
+
+  if (!haveLabels) {
+    return null;
+  }
+
+  var handleSort = function handleSort(column) {
+    var nextDirection = getNextSort$1(column);
+
+    if (onSort) {
+      onSort({
+        columnName: column.name,
+        direction: nextDirection
+      });
+    }
   };
 
+  return React__default.createElement("div", {
+    className: styles$b['header']
+  }, columns.map(function (column) {
+    var _classnames;
+
+    var isSortable = column.isSortable;
+    var sortDir = column.currentSort;
+    var isRightAligned = column.isRightAligned;
+    return React__default.createElement("div", {
+      className: classnames((_classnames = {}, _classnames[styles$b['header-item']] = true, _classnames[styles$b['header-item--sortable']] = isSortable, _classnames[styles$b['header-item--right-align']] = isRightAligned, _classnames)),
+      style: {
+        flex: column.size || 1
+      },
+      key: column.name,
+      onClick: function onClick() {
+        return isSortable && handleSort(column);
+      },
+      onKeyPress: function onKeyPress() {
+        return isSortable && handleSort(column);
+      },
+      role: "columnheader",
+      tabIndex: 0
+    }, column.label, ' ', isSortable && React__default.createElement("span", {
+      className: styles$b['header-sort-icon']
+    }, React__default.createElement(IconSort$1, {
+      sortDirection: sortDir
+    })));
+  }), showActionMenu && React__default.createElement("div", {
+    className: classnames(styles$b['header-item'], styles$b['header-item--action'])
+  }));
+};
+
+var getNextSort$1 = function getNextSort(column) {
+  switch (column.currentSort) {
+    case SORT_ORDER$1.ASC:
+      return null;
+
+    case SORT_ORDER$1.DESC:
+      return SORT_ORDER$1.ASC;
+
+    default:
+      return SORT_ORDER$1.DESC;
+  }
+};
+
+var IconSort$1 = function IconSort(_ref2) {
+  var sortDirection = _ref2.sortDirection;
+  var sortDir = sortDirection || null;
+  return React__default.createElement("div", {
+    style: {
+      display: 'inline-flex',
+      flexDirection: 'column'
+    }
+  }, sortDir !== 'desc' && React__default.createElement(IconChevronUp, {
+    size: "small"
+  }), sortDir !== 'asc' && React__default.createElement("span", {
+    style: {
+      marginTop: '-4px'
+    }
+  }, React__default.createElement(IconChevronDown, {
+    size: "small"
+  })));
+};
+
+var DataTable = function DataTable(_ref) {
+  var items = _ref.items,
+      columns = _ref.columns,
+      itemComponent = _ref.itemComponent,
+      maxHeight = _ref.maxHeight,
+      _ref$hasPrevious = _ref.hasPrevious,
+      hasPrevious = _ref$hasPrevious === void 0 ? true : _ref$hasPrevious,
+      _ref$hasNext = _ref.hasNext,
+      hasNext = _ref$hasNext === void 0 ? true : _ref$hasNext,
+      onPreviousClick = _ref.onPreviousClick,
+      onNextClick = _ref.onNextClick,
+      onSort = _ref.onSort,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$showActionMenu = _ref.showActionMenu,
+      showActionMenu = _ref$showActionMenu === void 0 ? false : _ref$showActionMenu,
+      footerComponent = _ref.footerComponent,
+      _ref$hasVerticalBorde = _ref.hasVerticalBorders,
+      hasVerticalBorders = _ref$hasVerticalBorde === void 0 ? false : _ref$hasVerticalBorde;
+  var RowItem = itemComponent || DefaultItemComponent$1;
+  var conditionalStyles = {};
+
+  if (maxHeight !== null) {
+    conditionalStyles = _extends({}, conditionalStyles, {
+      maxHeight: maxHeight,
+      overflowY: 'auto'
+    });
+  }
+
+  var numberOfRows = items.length + (footerComponent ? 1 : 0);
   return React__default.createElement(Context$1.Provider, {
     value: {
-      formik: formik
+      columns: columns,
+      showActionMenu: showActionMenu,
+      numberOfRows: numberOfRows,
+      hasVerticalBorders: hasVerticalBorders
     }
-  }, React__default.createElement("form", {
-    onSubmit: onSubmit ? handleSubmit : formik === null || formik === void 0 ? void 0 : formik.handleSubmit,
-    className: classnames((_classnames = {}, _classnames[styles$a['form--standard-size']] = !wide, _classnames)),
-    "data-testid": "form"
-  }, stackContent ? React__default.createElement(Stack, null, children) : children));
+  }, React__default.createElement("div", null, React__default.createElement(DataTableHeader, {
+    columns: columns,
+    onSort: onSort,
+    showActionMenu: showActionMenu
+  }), React__default.createElement("div", {
+    className: styles$b['body'],
+    style: conditionalStyles,
+    role: "table"
+  }, isLoading && React__default.createElement(Spinner, {
+    block: true
+  }), !isLoading && items.map(function (item, index) {
+    return React__default.createElement(RowItem, {
+      item: item,
+      columns: columns,
+      key: index,
+      index: index
+    });
+  }), footerComponent && !isLoading && React__default.createElement("div", {
+    className: styles$b['footer'],
+    "data-testid": "footer"
+  }, footerComponent)), onPreviousClick && onNextClick && (hasPrevious || hasNext) && React__default.createElement("div", {
+    className: styles$b['pagination-controls'],
+    "data-testid": "pagination-controls"
+  }, React__default.createElement(PaginationControls, {
+    hasPrevious: hasPrevious && !isLoading,
+    hasNext: hasNext && !isLoading,
+    onPreviousClick: onPreviousClick,
+    onNextClick: onNextClick
+  }))));
 };
 
-var SIZE_25_PERCENT = '25%';
-var SIZE_33_PERCENT = '33.333%';
-var SIZE_50_PERCENT = '50%';
-var SIZE_66_PERCENT = '66.666%';
-var SIZE_75_PERCENT = '75%';
+var DefaultItemComponent$1 = function DefaultItemComponent(_ref2) {
+  var columns = _ref2.columns,
+      item = _ref2.item;
+  var headingKeys = columns ? columns.map(function (column) {
+    return column.name;
+  }) : Object.keys(item);
+  var columnsToShow = headingKeys.filter(function (key) {
+    return key !== 'actions';
+  });
+  return React__default.createElement(DataTableRow, {
+    actions: item.actions
+  }, columnsToShow.map(function (headingKey) {
+    return React__default.createElement("div", {
+      key: headingKey
+    }, item[headingKey] || '');
+  }));
+};
+
+var styles$c = {"data-table-cell":"_orjDM","data-table-cell--right-aligned":"_3EpfF"};
+
+var DataTableCell = function DataTableCell(_ref) {
+  var _columns$columnIndex, _classnames;
 
-var FormRow = function FormRow(_ref) {
   var children = _ref.children,
-      columns = _ref.columns,
-      sizes = _ref.sizes;
-  var items = React__default.Children.toArray(children).filter(Boolean);
-  var additionalColumns = [];
+      columnIndex = _ref.columnIndex;
 
-  if (columns !== undefined) {
-    if (columns > items.length) {
-      additionalColumns.push.apply(additionalColumns, new Array(columns - items.length).map(function () {
-        return '';
-      }));
+  var _useDataTableContext = useDataTableContext(),
+      columns = _useDataTableContext.columns;
+
+  var column = (_columns$columnIndex = columns[columnIndex]) != null ? _columns$columnIndex : null;
+  var isRightAligned = column ? column.isRightAligned : false;
+  return React__default.createElement("div", {
+    className: classnames((_classnames = {}, _classnames[styles$c['data-table-cell--right-aligned']] = isRightAligned, _classnames), styles$c['data-table-cell'])
+  }, children);
+};
+
+var Context$2 = createContext({});
+var useFormContext = function useFormContext() {
+  var context = useContext(Context$2);
+  return context || {};
+};
+
+var useFieldId = function useFieldId(_ref) {
+  var name = _ref.name,
+      inputId = _ref.id;
+  var id = useMemo(function () {
+    return inputId ? inputId : name + "-" + Math.random();
+  }, [inputId, name]);
+  return id;
+};
+
+var getFormikState = function getFormikState(name, formik) {
+  if (formik === undefined) {
+    return null;
+  }
+
+  if (Object.keys(formik.values).includes(name)) {
+    return {
+      error: formik.touched[name] ? formik.errors[name] : undefined,
+      value: formik.values[name]
+    };
+  }
+
+  var formikArray = getFormikArrayPath(name);
+
+  if (formikArray) {
+    var _formik$touched, _formik$touched$array, _formik$touched$array2, _formik$errors, _formik$errors$arrayN, _formik$errors$arrayN2, _formik$values, _formik$values$arrayN, _formik$values$arrayN2;
+
+    var arrayName = formikArray.arrayName,
+        itemIndex = formikArray.itemIndex,
+        fieldName = formikArray.fieldName;
+    return {
+      error: (_formik$touched = formik.touched) !== null && _formik$touched !== void 0 && (_formik$touched$array = _formik$touched[arrayName]) !== null && _formik$touched$array !== void 0 && (_formik$touched$array2 = _formik$touched$array[itemIndex]) !== null && _formik$touched$array2 !== void 0 && _formik$touched$array2[fieldName] ? (_formik$errors = formik.errors) === null || _formik$errors === void 0 ? void 0 : (_formik$errors$arrayN = _formik$errors[arrayName]) === null || _formik$errors$arrayN === void 0 ? void 0 : (_formik$errors$arrayN2 = _formik$errors$arrayN[itemIndex]) === null || _formik$errors$arrayN2 === void 0 ? void 0 : _formik$errors$arrayN2[fieldName] : undefined,
+      value: (_formik$values = formik.values) === null || _formik$values === void 0 ? void 0 : (_formik$values$arrayN = _formik$values[arrayName]) === null || _formik$values$arrayN === void 0 ? void 0 : (_formik$values$arrayN2 = _formik$values$arrayN[itemIndex]) === null || _formik$values$arrayN2 === void 0 ? void 0 : _formik$values$arrayN2[fieldName]
+    };
+  }
+
+  return null;
+};
+
+var getFormikArrayPath = function getFormikArrayPath(name) {
+  if (!name.includes('[')) {
+    return false;
+  }
+
+  var _name$split = name.split('['),
+      arrayName = _name$split[0],
+      missingSplit = _name$split[1];
+
+  var _missingSplit$split = missingSplit.split('].'),
+      itemIndex = _missingSplit$split[0],
+      fieldName = _missingSplit$split[1];
+
+  return {
+    arrayName: arrayName,
+    itemIndex: itemIndex,
+    fieldName: fieldName
+  };
+};
+
+var useFieldControllers = function useFieldControllers(_ref) {
+  var name = _ref.name,
+      inputId = _ref.id,
+      value = _ref.value,
+      _onChange = _ref.onChange,
+      _onBlur = _ref.onBlur,
+      error = _ref.error,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type;
+
+  var _useFormContext = useFormContext(),
+      formik = _useFormContext.formik;
+
+  var id = useFieldId({
+    name: name,
+    id: inputId
+  });
+  var controllers = {
+    id: id,
+    error: error,
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange && _onChange(e.target.value);
+    },
+    onBlur: function onBlur(e) {
+      return _onBlur && _onBlur(e.target.value);
     }
-  }
+  };
+  var formikState = getFormikState(name, formik);
 
-  return React__default.createElement(Inline, {
-    flex: [].concat(items, additionalColumns).map(function (_, index) {
-      return (sizes === null || sizes === void 0 ? void 0 : sizes[index]) || 1;
-    }),
-    space: 20
-  }, children, additionalColumns.map(function (_, index) {
-    return React__default.createElement("span", {
-      key: index,
-      "data-testid": "empty-cell"
+  if (formik && formikState) {
+    var currencyBlur = function currencyBlur() {
+      if (type === 'currency') {
+        formik.setFieldValue(name, Number(value).toFixed(2));
+      }
+    };
+
+    controllers = _extends({}, controllers, {
+      error: error !== undefined ? controllers.error : formikState.error,
+      value: value !== undefined ? controllers.value : formikState.value,
+      onChange: _onChange ? controllers.onChange : function (e) {
+        return formik.setFieldValue(name, e.target.value);
+      },
+      onBlur: _onBlur ? function (e) {
+        controllers.onBlur(e);
+        currencyBlur();
+      } : function () {
+        formik.setFieldTouched(name);
+        currencyBlur();
+      }
     });
-  }));
+  }
+
+  return controllers;
 };
 
-var styles$b = {"label":"_h724f"};
+var styles$d = {"label":"_h724f"};
 
 var Label = function Label(_ref) {
   var htmlFor = _ref.htmlFor,
       children = _ref.children;
   return React__default.createElement("label", {
     htmlFor: htmlFor,
-    className: styles$b['label']
+    className: styles$d['label']
   }, children);
 };
 
-var styles$c = {"caption":"_1DWBq"};
+var styles$e = {"caption":"_1DWBq"};
 
 var Caption = function Caption(_ref) {
   var fieldId = _ref.fieldId,
       children = _ref.children;
   return React__default.createElement("div", {
     id: fieldId && fieldId + "-describer",
-    className: styles$c['caption']
+    className: styles$e['caption']
   }, children);
 };
 
@@ -1385,14 +1708,14 @@ var GREY400 = '#929292';
 var GREY500 = '#555555';
 var GREY600 = '#464646';
 
-var styles$d = {"error-message":"_nZ2MD"};
+var styles$f = {"error-message":"_nZ2MD"};
 
 var ErrorMessage = function ErrorMessage(_ref) {
   var fieldId = _ref.fieldId,
       children = _ref.children;
   return React__default.createElement("div", {
     id: fieldId && fieldId + "-error-message",
-    className: styles$d['error-message']
+    className: styles$f['error-message']
   }, React__default.createElement(Inline, {
     space: 8,
     alignItems: "center"
@@ -1420,61 +1743,190 @@ var Field = function Field(_ref) {
   }, error));
 };
 
-var styles$e = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
+var styles$g = {"affix-container":"_ybKOk","affix-container--prefixed":"_2COk3","affix-container--suffixed":"_1xXXN","prefix":"_eX5OL","suffix":"__YH01"};
 
-var useFieldId = function useFieldId(_ref) {
-  var name = _ref.name,
-      inputId = _ref.id;
-  var id = useMemo(function () {
-    return inputId ? inputId : name + "-" + Math.random();
-  }, [inputId, name]);
-  return id;
+var AffixContainer = function AffixContainer(_ref) {
+  var _classnames;
+
+  var prefix = _ref.prefix,
+      suffix = _ref.suffix,
+      children = _ref.children;
+  var container = useRef(null);
+  var prefixElement = useRef(null);
+  var suffixElement = useRef(null);
+  useLayoutEffect(function () {
+    if (container.current) {
+      var input = container.current.querySelector('input, [class$=control] > div');
+
+      if (input) {
+        if (prefix && prefixElement.current) {
+          var _prefixElement$curren;
+
+          var prefixWidth = prefixElement === null || prefixElement === void 0 ? void 0 : (_prefixElement$curren = prefixElement.current) === null || _prefixElement$curren === void 0 ? void 0 : _prefixElement$curren.offsetWidth;
+          input.style.paddingLeft = prefixWidth + 'px';
+        }
+
+        if (suffix && suffixElement.current) {
+          var suffixWidth = suffixElement.current.offsetWidth;
+          input.style.paddingRight = suffixWidth + 'px';
+        }
+      }
+    }
+  }, [prefix, suffix]);
+  var hasPrefix = !!prefix;
+  var hasSuffix = !!suffix;
+
+  if (!hasPrefix && !hasSuffix) {
+    return children;
+  }
+
+  var classes = classnames(styles$g['affix-container'], (_classnames = {}, _classnames[styles$g['affix-container--prefixed']] = hasPrefix, _classnames[styles$g['affix-container--suffixed']] = hasSuffix, _classnames));
+  return React__default.createElement("div", {
+    className: classes,
+    ref: container,
+    "data-testid": "affix-container"
+  }, hasPrefix && React__default.createElement("div", {
+    className: styles$g['prefix'],
+    ref: prefixElement
+  }, prefix), children, hasSuffix && React__default.createElement("div", {
+    className: styles$g['suffix'],
+    ref: suffixElement
+  }, suffix));
 };
 
-var useFieldControllers = function useFieldControllers(_ref) {
+var styles$h = {"data-table-editable-cell":"_kIngZ","data-table-editable-cell--right-aligned":"_3_QIj","data-table-editable-cell--top-left":"_32mWH","data-table-editable-cell--top-right":"_3Jg2-","data-table-editable-cell--bottom-left":"_1F5fj","data-table-editable-cell--bottom-right":"_1fTTW","data-table-editable-cell--invalid":"_y9SBQ"};
+
+var DataTableEditableCell = function DataTableEditableCell(_ref) {
+  var _columns$columnIndex, _classnames;
+
   var name = _ref.name,
+      columnIndex = _ref.columnIndex,
+      rowIndex = _ref.rowIndex,
       inputId = _ref.id,
       value = _ref.value,
-      _onChange = _ref.onChange,
-      _onBlur = _ref.onBlur,
-      error = _ref.error;
-
-  var _useFormContext = useFormContext(),
-      formik = _useFormContext.formik;
-
-  var id = useFieldId({
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      placeholder = _ref.placeholder,
+      disabled = _ref.disabled,
+      error = _ref.error,
+      prefix = _ref.prefix,
+      suffix = _ref.suffix,
+      defaultValue = _ref.defaultValue,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type;
+
+  var _useDataTableContext = useDataTableContext(),
+      columns = _useDataTableContext.columns,
+      numberOfRows = _useDataTableContext.numberOfRows;
+
+  var column = (_columns$columnIndex = columns[columnIndex]) != null ? _columns$columnIndex : null;
+  var isRightAligned = column ? column.isRightAligned : false;
+  var numberOfColumns = columns === null || columns === void 0 ? void 0 : columns.length;
+  var isTopLeftCell = columnIndex === 0 && rowIndex === 0;
+  var isTopRightCell = columnIndex === numberOfColumns - 1 && rowIndex === 0;
+  var isBottomLeftCell = columnIndex === 0 && rowIndex === numberOfRows - 1;
+  var isBottomRightCell = columnIndex === numberOfColumns - 1 && rowIndex === numberOfRows - 1;
+  var controllers = useFieldControllers({
     name: name,
-    id: inputId
-  });
-  var controllers = {
-    id: id,
-    error: error,
+    id: inputId,
     value: value,
-    onChange: function onChange(e) {
-      return _onChange && _onChange(e.target.value);
-    },
-    onBlur: function onBlur(e) {
-      return _onBlur && _onBlur(e.target.value);
-    }
+    onChange: onChange,
+    onBlur: onBlur,
+    error: error,
+    type: type
+  });
+  var hasError = !!controllers.error;
+  var fieldProps = {
+    name: name,
+    id: controllers.id
+  };
+  return React__default.createElement("div", {
+    className: styles$h['data-table-editable-cell']
+  }, React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
+    prefix: prefix,
+    suffix: suffix
+  }, React__default.createElement("input", {
+    name: name,
+    id: controllers.id,
+    className: classnames((_classnames = {}, _classnames[styles$h['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames[styles$h['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames[styles$h['data-table-editable-cell--top-right']] = isTopRightCell, _classnames[styles$h['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames[styles$h['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames[styles$h['data-table-editable-cell--invalid']] = hasError, _classnames)),
+    type: "text",
+    "data-testid": "text-field-" + name,
+    "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
+    "aria-invalid": hasError,
+    disabled: disabled,
+    placeholder: placeholder,
+    defaultValue: defaultValue,
+    value: controllers.value,
+    onChange: controllers.onChange,
+    onBlur: controllers.onBlur
+  }))));
+};
+
+var styles$i = {"form--standard-size":"_3CaV0"};
+
+var Form = function Form(_ref) {
+  var _classnames;
+
+  var children = _ref.children,
+      onSubmit = _ref.onSubmit,
+      _ref$wide = _ref.wide,
+      wide = _ref$wide === void 0 ? false : _ref$wide,
+      formik = _ref.formik,
+      _ref$stackContent = _ref.stackContent,
+      stackContent = _ref$stackContent === void 0 ? true : _ref$stackContent;
+
+  var handleSubmit = function handleSubmit(e) {
+    e.preventDefault();
+    onSubmit && onSubmit(e.currentTarget.elements);
   };
 
-  if (formik && Object.keys(formik.values).includes(name)) {
-    var formikError = formik.touched[name] ? formik.errors[name] : undefined;
-    controllers = _extends({}, controllers, {
-      error: error !== undefined ? controllers.error : formikError,
-      value: value !== undefined ? controllers.value : formik.values[name],
-      onChange: _onChange ? controllers.onChange : function (e) {
-        return formik.setFieldValue(name, e.target.value);
-      },
-      onBlur: _onBlur ? controllers.onBlur : function () {
-        return formik.setFieldTouched(name);
-      }
-    });
+  return React__default.createElement(Context$2.Provider, {
+    value: {
+      formik: formik
+    }
+  }, React__default.createElement("form", {
+    onSubmit: onSubmit ? handleSubmit : formik === null || formik === void 0 ? void 0 : formik.handleSubmit,
+    className: classnames((_classnames = {}, _classnames[styles$i['form--standard-size']] = !wide, _classnames)),
+    "data-testid": "form"
+  }, stackContent ? React__default.createElement(Stack, null, children) : children));
+};
+
+var SIZE_25_PERCENT = '25%';
+var SIZE_33_PERCENT = '33.333%';
+var SIZE_50_PERCENT = '50%';
+var SIZE_66_PERCENT = '66.666%';
+var SIZE_75_PERCENT = '75%';
+
+var FormRow = function FormRow(_ref) {
+  var children = _ref.children,
+      columns = _ref.columns,
+      sizes = _ref.sizes;
+  var items = React__default.Children.toArray(children).filter(Boolean);
+  var additionalColumns = [];
+
+  if (columns !== undefined) {
+    if (columns > items.length) {
+      additionalColumns.push.apply(additionalColumns, new Array(columns - items.length).map(function () {
+        return '';
+      }));
+    }
   }
 
-  return controllers;
+  return React__default.createElement(Inline, {
+    flex: [].concat(items, additionalColumns).map(function (_, index) {
+      return (sizes === null || sizes === void 0 ? void 0 : sizes[index]) || 1;
+    }),
+    space: 20
+  }, children, additionalColumns.map(function (_, index) {
+    return React__default.createElement("span", {
+      key: index,
+      "data-testid": "empty-cell"
+    });
+  }));
 };
 
+var styles$j = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
+
 var useGrowTextAreaRef = function useGrowTextAreaRef(minHeight, maxHeight, autoGrow, forwardedRef) {
   var textareaRef = useRef(null);
   var ref = forwardedRef != null ? forwardedRef : textareaRef;
@@ -1548,7 +2000,7 @@ var TextAreaField = function TextAreaField(_ref) {
       updateHeight = _useGrowTextAreaRef.updateHeight;
 
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$e['text-field'], (_classnames = {}, _classnames[styles$e['text-field--invalid']] = hasError, _classnames[styles$e['text-field--disabled']] = disabled, _classnames[styles$e['text-field--focus']] = hasFocus, _classnames)),
+    className: classnames(styles$j['text-field'], (_classnames = {}, _classnames[styles$j['text-field--invalid']] = hasError, _classnames[styles$j['text-field--disabled']] = disabled, _classnames[styles$j['text-field--focus']] = hasFocus, _classnames)),
     ref: containerRef,
     onClick: function onClick(event) {
       if (event.target === (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
@@ -1580,7 +2032,7 @@ var TextAreaField = function TextAreaField(_ref) {
     },
     ref: textAreaRef
   }), toolbar && React__default.createElement("div", {
-    className: styles$e['text-field__toolbar'],
+    className: styles$j['text-field__toolbar'],
     id: controllers.id + "-toolbar",
     ref: toolbarRef,
     onClick: function onClick(event) {
@@ -1593,58 +2045,7 @@ var TextAreaField = function TextAreaField(_ref) {
   }, toolbar)));
 };
 
-var styles$f = {"affix-container":"_ybKOk","affix-container--prefixed":"_2COk3","affix-container--suffixed":"_1xXXN","prefix":"_eX5OL","suffix":"__YH01"};
-
-var AffixContainer = function AffixContainer(_ref) {
-  var _classnames;
-
-  var prefix = _ref.prefix,
-      suffix = _ref.suffix,
-      children = _ref.children;
-  var container = useRef(null);
-  var prefixElement = useRef(null);
-  var suffixElement = useRef(null);
-  useLayoutEffect(function () {
-    if (container.current) {
-      var input = container.current.querySelector('input, [class$=control] > div');
-
-      if (input) {
-        if (prefix && prefixElement.current) {
-          var _prefixElement$curren;
-
-          var prefixWidth = prefixElement === null || prefixElement === void 0 ? void 0 : (_prefixElement$curren = prefixElement.current) === null || _prefixElement$curren === void 0 ? void 0 : _prefixElement$curren.offsetWidth;
-          input.style.paddingLeft = prefixWidth + 'px';
-        }
-
-        if (suffix && suffixElement.current) {
-          var suffixWidth = suffixElement.current.offsetWidth;
-          input.style.paddingRight = suffixWidth + 'px';
-        }
-      }
-    }
-  }, [prefix, suffix]);
-  var hasPrefix = !!prefix;
-  var hasSuffix = !!suffix;
-
-  if (!hasPrefix && !hasSuffix) {
-    return children;
-  }
-
-  var classes = classnames(styles$f['affix-container'], (_classnames = {}, _classnames[styles$f['affix-container--prefixed']] = hasPrefix, _classnames[styles$f['affix-container--suffixed']] = hasSuffix, _classnames));
-  return React__default.createElement("div", {
-    className: classes,
-    ref: container,
-    "data-testid": "affix-container"
-  }, hasPrefix && React__default.createElement("div", {
-    className: styles$f['prefix'],
-    ref: prefixElement
-  }, prefix), children, hasSuffix && React__default.createElement("div", {
-    className: styles$f['suffix'],
-    ref: suffixElement
-  }, suffix));
-};
-
-var styles$g = {"text-field":"_20YOA","text-field--invalid":"_3kUSh","text-field--prefixed":"_3IU3Q","text-field--suffixed":"_QXJOD"};
+var styles$k = {"text-field":"_20YOA","text-field--invalid":"_3kUSh","text-field--prefixed":"_3IU3Q","text-field--suffixed":"_QXJOD"};
 
 var TextField = function TextField(_ref, ref) {
   var _classnames;
@@ -1685,7 +2086,7 @@ var TextField = function TextField(_ref, ref) {
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames(styles$g['text-field'], (_classnames = {}, _classnames[styles$g['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$k['text-field'], (_classnames = {}, _classnames[styles$k['text-field--invalid']] = hasError, _classnames)),
     type: "text",
     "data-testid": "text-field-" + name,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
@@ -1730,12 +2131,12 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
       return _onBlur && _onBlur(e.target.checked);
     }
   };
+  var formikState = getFormikState(name, formik);
 
-  if (formik && Object.keys(formik.values).includes(name)) {
-    var formikError = formik.touched[name] ? formik.errors[name] : undefined;
+  if (formik && formikState) {
     controllers = _extends({}, controllers, {
-      error: error !== undefined ? controllers.error : formikError,
-      checked: checked !== undefined ? controllers.checked : formik.values[name],
+      error: error !== undefined ? controllers.error : formikState.error,
+      checked: checked !== undefined ? controllers.checked : formikState.value,
       onChange: function onChange(e) {
         formik.setFieldValue(name, e.target.checked);
         _onChange && _onChange(e.target.checked);
@@ -1750,7 +2151,7 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$h = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
+var styles$l = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
 
 var CheckboxField = function CheckboxField(_ref) {
   var name = _ref.name,
@@ -1777,7 +2178,7 @@ var CheckboxField = function CheckboxField(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$h['check-box-field']
+    className: styles$l['check-box-field']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
@@ -1790,11 +2191,11 @@ var CheckboxField = function CheckboxField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("span", {
-    className: styles$h['check-box-field__custom-input']
+    className: styles$l['check-box-field__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: controllers.id
   }, label)), caption && React__default.createElement("div", {
-    className: styles$h['check-box-field__caption']
+    className: styles$l['check-box-field__caption']
   }, React__default.createElement(Caption, {
     fieldId: controllers.id
   }, caption)), controllers.error && React__default.createElement(ErrorMessage, {
@@ -1818,12 +2219,12 @@ var useRadioGroupFieldControllers = function useRadioGroupFieldControllers(_ref)
       return _onChange && _onChange(e.target.value);
     }
   };
+  var formikState = getFormikState(name, formik);
 
-  if (formik && Object.keys(formik.values).includes(name)) {
-    var formikError = formik.touched[name] ? formik.errors[name] : undefined;
+  if (formik && formikState) {
     controllers = _extends({}, controllers, {
-      error: error !== undefined ? controllers.error : formikError,
-      value: value !== undefined ? controllers.value : formik.values[name],
+      error: error !== undefined ? controllers.error : formikState.error,
+      value: value !== undefined ? controllers.value : formikState.value,
       onChange: function onChange(e) {
         formik.setFieldValue(name, e.target.checked);
         _onChange && _onChange(e.target.value);
@@ -1845,7 +2246,7 @@ var useRadioGroupFieldContext = function useRadioGroupFieldContext() {
   return context;
 };
 
-var styles$i = {"label":"_1WGz2","radio-group-field__label":"_RXyG_"};
+var styles$m = {"label":"_1WGz2","radio-group-field__label":"_RXyG_"};
 
 var RadioGroupField = function RadioGroupField(_ref) {
   var name = _ref.name,
@@ -1878,7 +2279,7 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, React__default.createElement(Stack, {
     space: 12
   }, label && React__default.createElement("div", {
-    className: styles$i['radio-group-field__label']
+    className: styles$m['radio-group-field__label']
   }, label), React__default.createElement(Stack, {
     space: 8
   }, inline ? React__default.createElement(InlineOptions, null, children) : React__default.createElement(Stack, {
@@ -1912,7 +2313,7 @@ var InlineOptions = function InlineOptions(_ref2) {
   return React__default.createElement(FormRow, null, children);
 };
 
-var styles$j = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
+var styles$n = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
 
 var RadioGroupOption = function RadioGroupOption(_ref) {
   var value = _ref.value,
@@ -1930,7 +2331,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$j['radio-group-option']
+    className: styles$n['radio-group-option']
   }, React__default.createElement("input", {
     type: "radio",
     id: id,
@@ -1940,19 +2341,19 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled
   }), React__default.createElement("span", {
-    className: styles$j['radio-group-option__custom-input']
+    className: styles$n['radio-group-option__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default.createElement("div", {
-    className: styles$j['radio-group-option__caption']
+    className: styles$n['radio-group-option__caption']
   }, React__default.createElement(Caption, {
     fieldId: id
   }, caption)));
 };
 
-var styles$k = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
+var styles$o = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
 
-var styles$l = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
+var styles$p = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
 
 var PasswordCriteria = function PasswordCriteria(_ref) {
   var _classnames;
@@ -1960,7 +2361,7 @@ var PasswordCriteria = function PasswordCriteria(_ref) {
   var met = _ref.met,
       children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$l['password-criteria'], (_classnames = {}, _classnames[styles$l['password-criteria--invalid']] = !met, _classnames))
+    className: classnames(styles$p['password-criteria'], (_classnames = {}, _classnames[styles$p['password-criteria--invalid']] = !met, _classnames))
   }, "\u25CF ", children);
 };
 
@@ -2039,11 +2440,11 @@ var PasswordField = function PasswordField(_ref) {
     error: controllers.error
   };
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: styles$k['password-container']
+    className: styles$o['password-container']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames(styles$k['text-field'], (_classnames = {}, _classnames[styles$k['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$o['text-field'], (_classnames = {}, _classnames[styles$o['text-field--invalid']] = hasError, _classnames)),
     type: type,
     "data-testid": "text-field-" + name,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
@@ -2055,7 +2456,7 @@ var PasswordField = function PasswordField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("div", {
-    className: styles$k['password-toggle'],
+    className: styles$o['password-toggle'],
     onClick: toggleType,
     onKeyPress: toggleType,
     "data-testid": "password-toggle",
@@ -2090,12 +2491,12 @@ var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_re
       return _onBlur && _onBlur(options);
     }
   };
+  var formikState = getFormikState(name, formik);
 
-  if (formik && formik.values[name] !== undefined) {
-    var formikError = formik.touched[name] ? formik.errors[name] : undefined;
+  if (formik && formikState) {
     controllers = _extends({}, controllers, {
-      error: error ? controllers.error : formikError,
-      value: value ? controllers.value : formik.values[name],
+      error: error ? controllers.error : formikState.error,
+      value: value ? controllers.value : formikState.value,
       onChange: function onChange(options) {
         if (_onChange) {
           _onChange(options);
@@ -2323,12 +2724,12 @@ var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
       return _onBlur && _onBlur(option);
     }
   };
+  var formikState = getFormikState(name, formik);
 
-  if (formik && formik.values[name] !== undefined) {
-    var formikError = formik.touched[name] ? formik.errors[name] : undefined;
+  if (formik && formikState) {
     controllers = _extends({}, controllers, {
-      error: error ? controllers.error : formikError,
-      value: value ? controllers.value : formik.values[name],
+      error: error ? controllers.error : formikState.error,
+      value: value ? controllers.value : formikState.value,
       onChange: function onChange(option) {
         if (_onChange) {
           _onChange(option);
@@ -2349,7 +2750,7 @@ var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$m = {"custom-control":"_1cDCR"};
+var styles$q = {"custom-control":"_1cDCR"};
 
 var _excluded$3 = ["children", "CustomPrefixComponent"];
 
@@ -2362,7 +2763,7 @@ function CustomControl(_ref) {
 
   var selectedOption = (_props$getValue = props.getValue()) === null || _props$getValue === void 0 ? void 0 : _props$getValue[0];
   return React__default.createElement(components.Control, Object.assign({}, props), CustomControl && selectedOption ? React__default.createElement("div", {
-    className: styles$m['custom-control'],
+    className: styles$q['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -2475,12 +2876,12 @@ var useDateFieldControllers = function useDateFieldControllers(_ref) {
       return _onBlur && _onBlur();
     }
   };
+  var formikState = getFormikState(name, formik);
 
-  if (formik && Object.keys(formik.values).includes(name)) {
-    var formikError = formik.touched[name] ? formik.errors[name] : undefined;
+  if (formik && formikState) {
     controllers = _extends({}, controllers, {
-      error: error !== undefined ? controllers.error : formikError,
-      value: value !== undefined ? controllers.value : formik.values[name],
+      error: error !== undefined ? controllers.error : formikState.error,
+      value: value !== undefined ? controllers.value : formikState.value,
       onChange: _onChange ? controllers.onChange : function (newValue) {
         formik.setFieldValue(name, newValue === undefined ? null : newValue);
       },
@@ -2518,7 +2919,7 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
 
 var inputStyles = {"text-field":"_1btTx","date-field":"_1Sc9D","text-field--invalid":"_2feYp","date-field--invalid":"_2SNat","text-field--prefixed":"_E18JV","date-field--prefixed":"_jLolW","text-field--suffixed":"_27J43","date-field--suffixed":"_3eTNi"};
 
-var styles$n = {"container":"_v1b-5","wrapper":"_3mrLu","interactionDisabled":"_1J9dh","DayPicker-Day":"_8FcQE","navBar":"_1SPuq","todayButton":"_24FJ6","navButtonInteractionDisabled":"_Oxdm9","navButtonPrev":"_20uqc","navButtonNext":"_3C53z","months":"_M_eHz","month":"_3RPpJ","caption":"_1FXNw","weekdays":"_3KcRU","weekdaysRow":"_1fO_e","weekday":"_c1Y-X","body":"_34mA1","week":"_1PmqZ","day":"_1AWH2","disabled":"_3vJkw","selected":"_1DR0N","outside":"_276GV","footer":"_2M5xr","today":"_3N6fj","overlayWrapper":"_3Zqgu","overlay":"_20Ncd","weekNumber":"_2hb-S"};
+var styles$r = {"container":"_v1b-5","wrapper":"_3mrLu","interactionDisabled":"_1J9dh","DayPicker-Day":"_8FcQE","navBar":"_1SPuq","todayButton":"_24FJ6","navButtonInteractionDisabled":"_Oxdm9","navButtonPrev":"_20uqc","navButtonNext":"_3C53z","months":"_M_eHz","month":"_3RPpJ","caption":"_1FXNw","weekdays":"_3KcRU","weekdaysRow":"_1fO_e","weekday":"_c1Y-X","body":"_34mA1","week":"_1PmqZ","day":"_1AWH2","disabled":"_3vJkw","selected":"_1DR0N","outside":"_276GV","footer":"_2M5xr","today":"_3N6fj","overlayWrapper":"_3Zqgu","overlay":"_20Ncd","weekNumber":"_2hb-S"};
 
 function parseDate(str, format, locale) {
   var parsed = dateFnsParse(str, format, new Date(), {
@@ -2597,7 +2998,7 @@ var DateField = function DateField(_ref) {
     error: controllers.error
   };
   var dayPickerProps = {
-    classNames: styles$n,
+    classNames: styles$r,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -2614,7 +3015,7 @@ var DateField = function DateField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$n,
+    classNames: styles$r,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -2672,12 +3073,12 @@ var useRangeFieldControllers = function useRangeFieldControllers(_ref) {
       return _onBlur && _onBlur();
     }
   };
+  var formikState = getFormikState(name, formik);
 
-  if (formik && Object.keys(formik.values).includes(name)) {
-    var formikError = formik.touched[name] ? formik.errors[name] : undefined;
+  if (formik && formikState) {
     return _extends({}, initialControllers, {
-      error: error !== undefined ? initialControllers.error : formikError,
-      value: value !== undefined ? initialControllers.value : formik.values[name],
+      error: error !== undefined ? initialControllers.error : formikState.error,
+      value: value !== undefined ? initialControllers.value : formikState.value,
       onChange: _onChange ? initialControllers.onChange : function (newValue) {
         formik.setFieldValue(name, newValue === undefined ? null : newValue);
       },
@@ -2690,7 +3091,7 @@ var useRangeFieldControllers = function useRangeFieldControllers(_ref) {
   return initialControllers;
 };
 
-var styles$o = {"container":"_1Ini2","wrapper":"_21VnL","interactionDisabled":"_wJ6Cb","DayPicker-Day":"_1c48y","navBar":"_3KwsN","todayButton":"_10CBO","navButtonInteractionDisabled":"_dHL-D","navButtonPrev":"_6kNi3","navButtonNext":"_13W_e","months":"_1FeSY","month":"_wU6A4","caption":"_AMbAo","weekdays":"_1LEst","weekdaysRow":"_2XECo","weekday":"_1C5ry","body":"_11F-Y","week":"_3MAFk","day":"_mG73F","disabled":"_2pgnH","selected":"_MtLaz","outside":"_CRqyX","footer":"_2KG9-","today":"_2JA2y","overlayWrapper":"_1JWbc","overlay":"_2tL6g","weekNumber":"_3u72O","text-field":"_25rf7","date-range-field":"_3qVhi","text-field--invalid":"_2M9Ud","text-field--prefixed":"_3TUb2","text-field--suffixed":"_foqL0","date-range-field--invalid":"_3df9R"};
+var styles$s = {"container":"_1Ini2","wrapper":"_21VnL","interactionDisabled":"_wJ6Cb","DayPicker-Day":"_1c48y","navBar":"_3KwsN","todayButton":"_10CBO","navButtonInteractionDisabled":"_dHL-D","navButtonPrev":"_6kNi3","navButtonNext":"_13W_e","months":"_1FeSY","month":"_wU6A4","caption":"_AMbAo","weekdays":"_1LEst","weekdaysRow":"_2XECo","weekday":"_1C5ry","body":"_11F-Y","week":"_3MAFk","day":"_mG73F","disabled":"_2pgnH","selected":"_MtLaz","outside":"_CRqyX","footer":"_2KG9-","today":"_2JA2y","overlayWrapper":"_1JWbc","overlay":"_2tL6g","weekNumber":"_3u72O","text-field":"_25rf7","date-range-field":"_3qVhi","text-field--invalid":"_2M9Ud","text-field--prefixed":"_3TUb2","text-field--suffixed":"_foqL0","date-range-field--invalid":"_3df9R"};
 
 var FromDate = function FromDate(_ref) {
   var name = _ref.name,
@@ -2710,7 +3111,7 @@ var FromDate = function FromDate(_ref) {
     to: end
   };
   var dayPickerProps = {
-    classNames: styles$o,
+    classNames: styles$s,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -2731,7 +3132,7 @@ var FromDate = function FromDate(_ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$o,
+    classNames: styles$s,
     selectedDay: start,
     value: start,
     formatDate: formatDate,
@@ -2772,7 +3173,7 @@ var ToDate = function ToDate(_ref, ref) {
     to: end
   };
   var dayPickerProps = {
-    classNames: styles$o,
+    classNames: styles$s,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -2793,7 +3194,7 @@ var ToDate = function ToDate(_ref, ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$o,
+    classNames: styles$s,
     selectedDay: end,
     value: end,
     formatDate: formatDate,
@@ -2860,7 +3261,7 @@ var DateRangeField = function DateRangeField(_ref) {
       start = _controllers$value.start,
       end = _controllers$value.end;
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$o['date-range-field'], (_classnames = {}, _classnames[styles$o['date-range-field--invalid']] = hasError, _classnames))
+    className: classnames(styles$s['date-range-field'], (_classnames = {}, _classnames[styles$s['date-range-field--invalid']] = hasError, _classnames))
   }, React__default.createElement(IconCalendar, {
     size: "medium"
   }), React__default.createElement(FromDate, {
@@ -2905,7 +3306,7 @@ var DateRangeField = function DateRangeField(_ref) {
   })));
 };
 
-var styles$p = {"container":"_okDvi","wrapper":"_17XdD","interactionDisabled":"_1O7OT","DayPicker-Day":"_3noGA","navBar":"_1Hl3Q","todayButton":"_m0Vs9","navButtonInteractionDisabled":"_1ULWH","navButtonPrev":"_3gjq8","navButtonNext":"_1m-Kd","months":"_Fq6Xh","month":"_3i0Oo","caption":"_36X9Y","weekdays":"_1aWPn","weekdaysRow":"_3HXCK","weekday":"_t-ctd","body":"_XAbiR","week":"_3Nwep","day":"_3nNcG","disabled":"_1M4ZF","selected":"_2PEs8","outside":"_1PIJa","footer":"_2T_z1","today":"_1hVM6","overlayWrapper":"_1L-hI","overlay":"_dDPZb","weekNumber":"_1alhT"};
+var styles$t = {"container":"_okDvi","wrapper":"_17XdD","interactionDisabled":"_1O7OT","DayPicker-Day":"_3noGA","navBar":"_1Hl3Q","todayButton":"_m0Vs9","navButtonInteractionDisabled":"_1ULWH","navButtonPrev":"_3gjq8","navButtonNext":"_1m-Kd","months":"_Fq6Xh","month":"_3i0Oo","caption":"_36X9Y","weekdays":"_1aWPn","weekdaysRow":"_3HXCK","weekday":"_t-ctd","body":"_XAbiR","week":"_3Nwep","day":"_3nNcG","disabled":"_1M4ZF","selected":"_2PEs8","outside":"_1PIJa","footer":"_2T_z1","today":"_1hVM6","overlayWrapper":"_1L-hI","overlay":"_dDPZb","weekNumber":"_1alhT"};
 
 var WeekField = function WeekField(_ref) {
   var _classnames;
@@ -2976,7 +3377,7 @@ var WeekField = function WeekField(_ref) {
   };
 
   var dayPickerProps = {
-    classNames: styles$p,
+    classNames: styles$t,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -3006,7 +3407,7 @@ var WeekField = function WeekField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$p,
+    classNames: styles$t,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -3035,7 +3436,7 @@ var WeekField = function WeekField(_ref) {
   })));
 };
 
-var styles$q = {"caption":"_1QDLF","label":"_2wiMV","toggle":"_1ui8X","toggle__label":"_1YRJT","toggle__caption":"_1jEiW","toggle__switch":"_3tNyE"};
+var styles$u = {"caption":"_1QDLF","label":"_2wiMV","toggle":"_1ui8X","toggle__label":"_1YRJT","toggle__caption":"_1jEiW","toggle__switch":"_3tNyE"};
 
 var Toggle = function Toggle(_ref) {
   var checked = _ref.checked,
@@ -3048,7 +3449,7 @@ var Toggle = function Toggle(_ref) {
   return React__default.createElement(Stack, {
     space: 8
   }, React__default.createElement("label", {
-    className: styles$q['toggle']
+    className: styles$u['toggle']
   }, React__default.createElement("input", {
     "data-testid": "toggle",
     type: "checkbox",
@@ -3057,17 +3458,17 @@ var Toggle = function Toggle(_ref) {
     disabled: disabled,
     id: id
   }), React__default.createElement("span", {
-    className: styles$q['toggle__switch']
+    className: styles$u['toggle__switch']
   }), label && React__default.createElement("span", {
-    className: styles$q['toggle__label']
+    className: styles$u['toggle__label']
   }, label)), caption && React__default.createElement("span", {
-    className: styles$q['toggle__caption']
+    className: styles$u['toggle__caption']
   }, caption));
 };
 
-var styles$r = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
+var styles$v = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
 
-var styles$s = {"header":"_36nxW","sub-header":"_2XwRD"};
+var styles$w = {"header":"_36nxW","sub-header":"_2XwRD"};
 
 var ModalHeader = function ModalHeader(_ref) {
   var header = _ref.header,
@@ -3079,12 +3480,12 @@ var ModalHeader = function ModalHeader(_ref) {
     flex: [1],
     alignItems: "center"
   }, React__default.createElement("span", {
-    className: styles$s['header']
+    className: styles$w['header']
   }, header), React__default.createElement(Button$1, {
     theme: "link-icon",
     onClick: onClose
   }, React__default.createElement(IconClose, null))), subHeader && React__default.createElement("div", {
-    className: styles$s['sub-header']
+    className: styles$w['sub-header']
   }, subHeader));
 };
 
@@ -3120,14 +3521,14 @@ var Modal = function Modal(_ref) {
     contentLabel: "Modal",
     appElement: rootElementId && document.getElementById(rootElementId) || undefined,
     overlayClassName: {
-      base: styles$r['overlay'],
-      afterOpen: styles$r['overlay--after-open'],
-      beforeClose: styles$r['overlay--before-close']
+      base: styles$v['overlay'],
+      afterOpen: styles$v['overlay--after-open'],
+      beforeClose: styles$v['overlay--before-close']
     },
     className: {
-      base: styles$r['content'],
-      afterOpen: styles$r['content--after-open'],
-      beforeClose: styles$r['content--before-close']
+      base: styles$v['content'],
+      afterOpen: styles$v['content--after-open'],
+      beforeClose: styles$v['content--before-close']
     }
   }, React__default.createElement(ModalHeader, {
     header: header,
@@ -3136,21 +3537,20 @@ var Modal = function Modal(_ref) {
   }), children);
 };
 
-Modal.setAppElement = function (rootElementId) {
-  var element = document.getElementById(rootElementId);
-  element && ReactModal.setAppElement(element);
+Modal.setAppElement = function (rootElement) {
+  ReactModal.setAppElement(rootElement);
 };
 
-var styles$t = {"modal-body":"_2J-ku"};
+var styles$x = {"modal-body":"_2J-ku"};
 
 var ModalBody = function ModalBody(_ref) {
   var children = _ref.children;
   return React__default.createElement("div", {
-    className: styles$t['modal-body']
+    className: styles$x['modal-body']
   }, children);
 };
 
-var styles$u = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
+var styles$y = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
 
 var ModalFooter = function ModalFooter(_ref) {
   var children = _ref.children,
@@ -3171,7 +3571,7 @@ var ModalFooter = function ModalFooter(_ref) {
     return React__default.createElement(FooterContainer, null, React__default.createElement(Inline, {
       justifyContent: "space-between"
     }, React__default.createElement("div", {
-      className: classnames((_classnames = {}, _classnames[styles$u['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
+      className: classnames((_classnames = {}, _classnames[styles$y['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
     }, tertiaryButton || React__default.createElement("div", null)), React__default.createElement(Inline, {
       space: 12
     }, secondaryButton, primaryButton)));
@@ -3199,7 +3599,7 @@ var FooterContainer = function FooterContainer(_ref2) {
   var childrenItens = React__default.Children.toArray(children);
   var hasCustomAlignment = childrenItens.length === 1 && childrenItens[0].type === Inline;
   return React__default.createElement("div", {
-    className: styles$u['modal-footer']
+    className: styles$y['modal-footer']
   }, React__default.createElement(Inline, {
     justifyContent: "end",
     space: 12,
@@ -3207,7 +3607,7 @@ var FooterContainer = function FooterContainer(_ref2) {
   }, children));
 };
 
-var styles$v = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
+var styles$z = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 
 var _excluded$5 = ["children", "theme", "title"];
 
@@ -3230,22 +3630,23 @@ var Badge = function Badge(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", Object.assign({
-    className: classnames(styles$v['badge'], (_classnames = {}, _classnames[styles$v['badge--success']] = theme === 'success', _classnames[styles$v['badge--danger']] = theme === 'danger', _classnames[styles$v['badge--info']] = theme === 'info', _classnames[styles$v['badge--warning']] = theme === 'warning', _classnames)),
+    className: classnames(styles$z['badge'], (_classnames = {}, _classnames[styles$z['badge--success']] = theme === 'success', _classnames[styles$z['badge--danger']] = theme === 'danger', _classnames[styles$z['badge--info']] = theme === 'info', _classnames[styles$z['badge--warning']] = theme === 'warning', _classnames)),
     ref: ref
   }, otherProps), children));
 };
 
 var Badge$1 = forwardRef(Badge);
 
-var styles$w = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
+var styles$A = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
 
-var styles$x = {"avatar-image":"_GKL9P"};
+var styles$B = {"avatar-image":"_GKL9P"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
       color = _ref.color,
       _ref$alt = _ref.alt,
-      alt = _ref$alt === void 0 ? 'Profile' : _ref$alt;
+      alt = _ref$alt === void 0 ? 'Profile' : _ref$alt,
+      onImageFallbackError = _ref.onImageFallbackError;
 
   var _useState = useState(false),
       hasImageError = _useState[0],
@@ -3257,12 +3658,13 @@ var AvatarImage = function AvatarImage(_ref) {
       alt: alt,
       onError: function onError() {
         setHasImageError(true);
+        onImageFallbackError();
       }
     });
   }
 
   return React__default.createElement("div", {
-    className: styles$x['avatar-image']
+    className: styles$B['avatar-image']
   }, React__default.createElement(IconUser, {
     size: "flexible",
     color: color
@@ -3319,25 +3721,32 @@ var Avatar = function Avatar(_ref) {
       badge = _ref.badge,
       alt = _ref.alt;
 
-  var _useState = useState(function () {
+  var _useState = useState(false),
+      showIconInsteadOfImage = _useState[0],
+      setShowIconInsteadOfImage = _useState[1];
+
+  var _useState2 = useState(function () {
     return PROFILE_IMAGES[Math.floor(Math.random() * PROFILE_IMAGES.length)];
   }),
-      defaultProfilePictureColors = _useState[0];
+      defaultProfilePictureColors = _useState2[0];
 
   var backgroundColor = url ? GREY200 : color;
   return React__default.createElement("div", {
-    className: classnames(styles$w['avatar'], (_classnames = {}, _classnames[styles$w['avatar--small']] = size === 'small', _classnames[styles$w['avatar--medium']] = size === 'medium', _classnames[styles$w['avatar--large']] = size === 'large', _classnames[styles$w['avatar--extra-large']] = size === 'extra-large', _classnames)),
+    className: classnames(styles$A['avatar'], (_classnames = {}, _classnames[styles$A['avatar--small']] = size === 'small', _classnames[styles$A['avatar--medium']] = size === 'medium', _classnames[styles$A['avatar--large']] = size === 'large', _classnames[styles$A['avatar--extra-large']] = size === 'extra-large', _classnames)),
     style: {
-      backgroundColor: children || url ? backgroundColor : defaultProfilePictureColors.backgroundColor
+      backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
     }
   }, children || React__default.createElement(AvatarImage, {
     url: url,
     color: defaultProfilePictureColors.avatarColor,
-    alt: alt
+    alt: alt,
+    onImageFallbackError: function onImageFallbackError() {
+      return setShowIconInsteadOfImage(true);
+    }
   }), badge && size !== 'small' && React__default.createElement("div", {
-    className: styles$w['avatar__badge']
+    className: styles$A['avatar__badge']
   }, badge));
 };
 
-export { Avatar, Badge$1 as Badge, Button$1 as Button, CheckboxField, DateField, DateRangeField, Form, FormRow, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconCalendar, IconChevronDown, IconChevronUp, IconClose, IconComment, IconDelete, IconEdit, IconExclaim, IconEye, IconEyeSlash, IconLocation, IconMinusCircle, IconMore, IconRemove, IconUser, IconUserPlus, Inline, Modal, ModalBody, ModalFooter, MultiSelectField, PaginationControls, PasswordField, RadioGroupField, RadioGroupOption, ResourceTable, ResourceTableRow, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SelectField, Spinner, Stack, TextAreaField, TextField$1 as TextField, Toggle, Tooltip$1 as Tooltip, WeekField };
+export { Avatar, Badge$1 as Badge, Button$1 as Button, CheckboxField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateRangeField, Form, FormRow, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconCalendar, IconChevronDown, IconChevronUp, IconClose, IconComment, IconDelete, IconEdit, IconExclaim, IconEye, IconEyeSlash, IconLocation, IconMinusCircle, IconMore, IconRemove, IconUser, IconUserPlus, Inline, Modal, ModalBody, ModalFooter, MultiSelectField, PaginationControls, PasswordField, RadioGroupField, RadioGroupOption, ResourceTable, ResourceTableRow, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SelectField, Spinner, Stack, TextAreaField, TextField$1 as TextField, Toggle, Tooltip$1 as Tooltip, WeekField };
 //# sourceMappingURL=index.modern.js.map