@7shifts/sous-chef 2.8.1 → 2.9.0

package/dist/index.js

@@ -100,7 +100,7 @@ var MenuItem = function MenuItem(_ref) {
 
   var handleClick = function handleClick(e) {
     onToggleMenu();
-    onClick();
+    onClick(e);
     e.stopPropagation();
   };
 
@@ -3346,7 +3346,67 @@ var useDataTableContext = function useDataTableContext() {
 
 var styles$9 = {"item":"_1d8Ci","selected":"_3tb7U","clickable":"_thFcO","item-column":"_OTcMc","item-column--default-padding":"_lNHQ8","item-column--right-align":"_13YLe","item-column--vertical-border":"_1rrRr","actions":"_azbIG"};
 
-var DataTableRow = function DataTableRow(_ref) {
+var styles$a = {"caption":"_1QDLF","label":"_2wiMV","toggle":"_1ui8X","toggle__label":"_1YRJT","toggle__caption":"_1jEiW","toggle__switch":"_3tNyE"};
+
+var Toggle = function Toggle(_ref) {
+  var checked = _ref.checked,
+      label = _ref.label,
+      caption = _ref.caption,
+      onChange = _ref.onChange,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      id = _ref.id;
+  return React__default.createElement(Stack, {
+    space: 8
+  }, React__default.createElement("label", {
+    className: styles$a['toggle']
+  }, React__default.createElement("input", {
+    "data-testid": "toggle",
+    type: "checkbox",
+    checked: checked,
+    onChange: onChange,
+    disabled: disabled,
+    id: id
+  }), React__default.createElement("span", {
+    className: styles$a['toggle__switch']
+  }), label && React__default.createElement("span", {
+    className: styles$a['toggle__label']
+  }, label)), caption && React__default.createElement("span", {
+    className: styles$a['toggle__caption']
+  }, caption));
+};
+
+var ActionsCell = function ActionsCell(_ref) {
+  var actions = _ref.actions;
+  var kebabMenuItems = actions.filter(function (action) {
+    return action.showInKebab === undefined || action.showInKebab;
+  });
+  var sideActions = actions.filter(function (action) {
+    return action.showInKebab === false;
+  });
+  return React__default.createElement("div", {
+    className: classnames(styles$9['item-column'], styles$9['actions']),
+    "data-testid": "data-table-dropdown-menu"
+  }, React__default.createElement(Inline, {
+    space: 0,
+    justifyContent: "end"
+  }, sideActions.length > 0 && sideActions.map(function (action, index) {
+    return React__default.createElement(Button$1, Object.assign({
+      key: action.action || index,
+      onClick: action.onAction,
+      theme: "link-icon"
+    }, action.showInKebab === false ? action.buttonProps : {}), action.label);
+  }), kebabMenuItems.length > 0 && React__default.createElement(Menu, null, React__default.createElement(MenuButton, null, React__default.createElement(IconEllipsisV, null)), React__default.createElement(MenuList, null, kebabMenuItems.map(function (action, index) {
+    return React__default.createElement(MenuItem, {
+      onClick: action.onAction,
+      key: index
+    }, action.label);
+  })))));
+};
+
+var _excluded$2 = ["children", "onClick", "isSelected", "actions", "hasDefaultPadding"];
+
+var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
   var _classnames;
 
   var children = _ref.children,
@@ -3356,7 +3416,8 @@ var DataTableRow = function DataTableRow(_ref) {
       _ref$actions = _ref.actions,
       actions = _ref$actions === void 0 ? [] : _ref$actions,
       _ref$hasDefaultPaddin = _ref.hasDefaultPadding,
-      hasDefaultPadding = _ref$hasDefaultPaddin === void 0 ? true : _ref$hasDefaultPaddin;
+      hasDefaultPadding = _ref$hasDefaultPaddin === void 0 ? true : _ref$hasDefaultPaddin,
+      nativeDivProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   var _useDataTableContext = useDataTableContext(),
       columns = _useDataTableContext.columns,
@@ -3380,26 +3441,23 @@ var DataTableRow = function DataTableRow(_ref) {
     }, columnElement);
   };
 
-  return React__default.createElement("div", {
+  return React__default.createElement("div", Object.assign({}, nativeDivProps, {
     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) {
+    role: "row",
+    ref: ref
+  }), React__default.Children.map(children, function (child, index) {
     return renderColumn(child, index);
-  }), showActionMenu && React__default.createElement("div", {
-    className: classnames(styles$9['item-column'], styles$9['actions']),
-    "data-testid": "data-table-dropdown-menu"
-  }, actions.length > 0 && React__default.createElement(Menu, null, React__default.createElement(MenuButton, null, React__default.createElement(IconEllipsisV, null)), React__default.createElement(MenuList, null, actions.map(function (action, index) {
-    return React__default.createElement(MenuItem, {
-      onClick: action.onAction,
-      key: index
-    }, action.label);
-  })))));
+  }), showActionMenu && React__default.createElement(ActionsCell, {
+    actions: actions
+  }));
 };
 
-var styles$a = {"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 DataTableRow = React.forwardRef(DataTableRowComponent);
+
+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',
@@ -3430,7 +3488,7 @@ var DataTableHeader = function DataTableHeader(_ref) {
   };
 
   return React__default.createElement("div", {
-    className: styles$a['header']
+    className: styles$b['header']
   }, columns.map(function (column) {
     var _classnames;
 
@@ -3438,7 +3496,7 @@ var DataTableHeader = function DataTableHeader(_ref) {
     var sortDir = column.currentSort;
     var isRightAligned = column.isRightAligned;
     return React__default.createElement("div", {
-      className: classnames((_classnames = {}, _classnames[styles$a['header-item']] = true, _classnames[styles$a['header-item--sortable']] = isSortable, _classnames[styles$a['header-item--right-align']] = isRightAligned, _classnames)),
+      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
       },
@@ -3452,12 +3510,12 @@ var DataTableHeader = function DataTableHeader(_ref) {
       role: "columnheader",
       tabIndex: 0
     }, column.label, ' ', isSortable && React__default.createElement("span", {
-      className: styles$a['header-sort-icon']
+      className: styles$b['header-sort-icon']
     }, React__default.createElement(IconSort$2, {
       sortDirection: sortDir
     })));
   }), showActionMenu && React__default.createElement("div", {
-    className: classnames(styles$a['header-item'], styles$a['header-item--action'])
+    className: classnames(styles$b['header-item'], styles$b['header-item--action'])
   }));
 };
 
@@ -3537,7 +3595,7 @@ var DataTable = function DataTable(_ref) {
     onSort: onSort,
     showActionMenu: showActionMenu
   }), React__default.createElement("div", {
-    className: styles$a['body'],
+    className: styles$b['body'],
     style: conditionalStyles,
     role: "table"
   }, isLoading && React__default.createElement(Spinner, {
@@ -3550,10 +3608,10 @@ var DataTable = function DataTable(_ref) {
       index: index
     });
   }), footerComponent && !isLoading && React__default.createElement("div", {
-    className: styles$a['footer'],
+    className: styles$b['footer'],
     "data-testid": "footer"
   }, footerComponent)), onPreviousClick && onNextClick && (hasPrevious || hasNext) && React__default.createElement("div", {
-    className: styles$a['pagination-controls'],
+    className: styles$b['pagination-controls'],
     "data-testid": "pagination-controls"
   }, React__default.createElement(PaginationControls, {
     hasPrevious: hasPrevious && !isLoading,
@@ -3581,7 +3639,7 @@ var DefaultItemComponent$1 = function DefaultItemComponent(_ref2) {
   }));
 };
 
-var styles$b = {"data-table-cell":"_orjDM","data-table-cell--right-aligned":"_3EpfF"};
+var styles$c = {"data-table-cell":"_orjDM","data-table-cell--right-aligned":"_3EpfF"};
 
 var DataTableCell = function DataTableCell(_ref) {
   var _columns$columnIndex, _classnames;
@@ -3595,7 +3653,7 @@ var DataTableCell = function DataTableCell(_ref) {
   var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
   var isRightAligned = column ? column.isRightAligned : false;
   return React__default.createElement("div", {
-    className: classnames((_classnames = {}, _classnames[styles$b['data-table-cell--right-aligned']] = isRightAligned, _classnames), styles$b['data-table-cell'])
+    className: classnames((_classnames = {}, _classnames[styles$c['data-table-cell--right-aligned']] = isRightAligned, _classnames), styles$c['data-table-cell'])
   }, children);
 };
 
@@ -3711,36 +3769,36 @@ var useFieldControllers = function useFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$c = {"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$c['label']
+    className: styles$d['label']
   }, children);
 };
 
-var styles$d = {"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$d['caption']
+    className: styles$e['caption']
   }, children);
 };
 
-var styles$e = {"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$e['error-message']
+    className: styles$f['error-message']
   }, React__default.createElement(Inline, {
     space: 8,
     alignItems: "center"
@@ -3769,7 +3827,7 @@ var Field = function Field(_ref) {
   }, error));
 };
 
-var styles$f = {"affix-container":"_ybKOk","affix-container--prefixed":"_2COk3","affix-container--suffixed":"_1xXXN","prefix":"_eX5OL","suffix":"__YH01"};
+var styles$g = {"affix-container":"_ybKOk","affix-container--prefixed":"_2COk3","affix-container--suffixed":"_1xXXN","prefix":"_eX5OL","suffix":"__YH01"};
 
 var AffixContainer = function AffixContainer(_ref) {
   var _classnames;
@@ -3806,21 +3864,21 @@ var AffixContainer = function AffixContainer(_ref) {
     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));
+  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$f['prefix'],
+    className: styles$g['prefix'],
     ref: prefixElement
   }, prefix), children, hasSuffix && React__default.createElement("div", {
-    className: styles$f['suffix'],
+    className: styles$g['suffix'],
     ref: suffixElement
   }, suffix));
 };
 
-var styles$g = {"data-table-editable-cell":"_kIngZ","data-table-editable-cell--right-aligned":"_3_QIj","data-table-editable-cell--currency":"_2Kyuc","data-table-editable-cell--invalid":"_y9SBQ","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"};
+var styles$h = {"data-table-editable-cell":"_kIngZ","data-table-editable-cell--right-aligned":"_3_QIj","data-table-editable-cell--currency":"_2Kyuc","data-table-editable-cell--invalid":"_y9SBQ","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"};
 
 var DataTableEditableCell = function DataTableEditableCell(_ref) {
   var _columns$columnIndex, _classnames, _classnames2;
@@ -3867,14 +3925,14 @@ var DataTableEditableCell = function DataTableEditableCell(_ref) {
     id: controllers.id
   };
   return React__default.createElement("div", {
-    className: classnames((_classnames = {}, _classnames[styles$g['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$g['data-table-editable-cell'])
+    className: classnames((_classnames = {}, _classnames[styles$h['data-table-editable-cell--currency']] = type === 'currency', _classnames), 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((_classnames2 = {}, _classnames2[styles$g['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$g['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$g['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$g['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$g['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$g['data-table-editable-cell--invalid']] = hasError, _classnames2)),
+    className: classnames((_classnames2 = {}, _classnames2[styles$h['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$h['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$h['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$h['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$h['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$h['data-table-editable-cell--invalid']] = hasError, _classnames2)),
     type: type === 'currency' ? 'number' : 'text',
     step: type === 'currency' ? 'any' : '',
     "data-testid": "text-field-" + name,
@@ -4070,7 +4128,7 @@ var ToolbarSelect = function ToolbarSelect(_ref) {
   }));
 };
 
-var styles$h = {"form--standard-size":"_3CaV0"};
+var styles$i = {"form--standard-size":"_3CaV0"};
 
 var Form = function Form(_ref) {
   var _classnames;
@@ -4094,7 +4152,7 @@ var Form = function Form(_ref) {
     }
   }, React__default.createElement("form", {
     onSubmit: onSubmit ? handleSubmit : formik === null || formik === void 0 ? void 0 : formik.handleSubmit,
-    className: classnames((_classnames = {}, _classnames[styles$h['form--standard-size']] = !wide, _classnames)),
+    className: classnames((_classnames = {}, _classnames[styles$i['form--standard-size']] = !wide, _classnames)),
     "data-testid": "form"
   }, stackContent ? React__default.createElement(Stack, null, children) : children));
 };
@@ -4133,7 +4191,7 @@ var FormRow = function FormRow(_ref) {
   }));
 };
 
-var styles$i = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
+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 = React.useRef(null);
@@ -4208,7 +4266,7 @@ var TextAreaField = function TextAreaField(_ref) {
       updateHeight = _useGrowTextAreaRef.updateHeight;
 
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$i['text-field'], (_classnames = {}, _classnames[styles$i['text-field--invalid']] = hasError, _classnames[styles$i['text-field--disabled']] = disabled, _classnames[styles$i['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)) {
@@ -4240,7 +4298,7 @@ var TextAreaField = function TextAreaField(_ref) {
     },
     ref: textAreaRef
   }), toolbar && React__default.createElement("div", {
-    className: styles$i['text-field__toolbar'],
+    className: styles$j['text-field__toolbar'],
     id: controllers.id + "-toolbar",
     ref: toolbarRef,
     onClick: function onClick(event) {
@@ -4253,7 +4311,7 @@ var TextAreaField = function TextAreaField(_ref) {
   }, toolbar)));
 };
 
-var styles$j = {"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 useTextField = function useTextField(_ref) {
   var _classnames;
@@ -4291,7 +4349,7 @@ var useTextField = function useTextField(_ref) {
     'aria-invalid': hasError,
     autoComplete: autoComplete,
     autoFocus: autoFocus,
-    className: classnames(styles$j['text-field'], (_classnames = {}, _classnames[styles$j['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$k['text-field'], (_classnames = {}, _classnames[styles$k['text-field--invalid']] = hasError, _classnames)),
     'data-testid': "text-field-" + name,
     disabled: disabled,
     defaultValue: defaultValue,
@@ -4321,12 +4379,12 @@ var useTextField = function useTextField(_ref) {
   };
 };
 
-var _excluded$2 = ["prefix", "suffix"];
+var _excluded$3 = ["prefix", "suffix"];
 
 var TextFieldElement = function TextFieldElement(_ref, ref) {
   var prefix = _ref.prefix,
       suffix = _ref.suffix,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   var _useTextField = useTextField(_extends({}, props, {
     ref: ref
@@ -4388,7 +4446,7 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$k = {"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,
@@ -4415,7 +4473,7 @@ var CheckboxField = function CheckboxField(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$k['check-box-field']
+    className: styles$l['check-box-field']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
@@ -4428,11 +4486,11 @@ var CheckboxField = function CheckboxField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("span", {
-    className: styles$k['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$k['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, {
@@ -4440,7 +4498,7 @@ var CheckboxField = function CheckboxField(_ref) {
   }, controllers.error));
 };
 
-var styles$l = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
+var styles$m = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
 
 var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
   var name = _ref.name,
@@ -4531,7 +4589,7 @@ var PillSelectField = function PillSelectField(_ref) {
     var itemId = controllers.id + "-" + itemIdentifier;
     return React__default.createElement("div", {
       key: itemIdentifier,
-      className: styles$l['pill-select-field']
+      className: styles$m['pill-select-field']
     }, React__default.createElement("input", {
       name: name + "-" + itemIdentifier,
       id: itemId,
@@ -4553,7 +4611,7 @@ var PillSelectField = function PillSelectField(_ref) {
         controllers.onChange(newValue);
       }
     }), React__default.createElement("span", {
-      className: styles$l['pill-select-field__custom-input']
+      className: styles$m['pill-select-field__custom-input']
     }, option.label));
   })));
 };
@@ -4601,7 +4659,7 @@ var useRadioGroupFieldContext = function useRadioGroupFieldContext() {
   return context;
 };
 
-var styles$m = {"label":"_1WGz2","radio-group-field__label":"_RXyG_"};
+var styles$n = {"label":"_1WGz2","radio-group-field__label":"_RXyG_"};
 
 var RadioGroupField = function RadioGroupField(_ref) {
   var name = _ref.name,
@@ -4634,7 +4692,7 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, React__default.createElement(Stack, {
     space: 12
   }, label && React__default.createElement("div", {
-    className: styles$m['radio-group-field__label']
+    className: styles$n['radio-group-field__label']
   }, label), React__default.createElement(Stack, {
     space: 8
   }, inline ? React__default.createElement(InlineOptions, null, children) : React__default.createElement(Stack, {
@@ -4668,7 +4726,7 @@ var InlineOptions = function InlineOptions(_ref2) {
   return React__default.createElement(FormRow, null, children);
 };
 
-var styles$n = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
+var styles$o = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
 
 var RadioGroupOption = function RadioGroupOption(_ref) {
   var value = _ref.value,
@@ -4686,7 +4744,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$n['radio-group-option']
+    className: styles$o['radio-group-option']
   }, React__default.createElement("input", {
     type: "radio",
     id: id,
@@ -4696,19 +4754,19 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled
   }), React__default.createElement("span", {
-    className: styles$n['radio-group-option__custom-input']
+    className: styles$o['radio-group-option__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default.createElement("div", {
-    className: styles$n['radio-group-option__caption']
+    className: styles$o['radio-group-option__caption']
   }, React__default.createElement(Caption, {
     fieldId: id
   }, caption)));
 };
 
-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$p = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
 
-var styles$p = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
+var styles$q = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
 
 var PasswordCriteria = function PasswordCriteria(_ref) {
   var _classnames;
@@ -4716,7 +4774,7 @@ var PasswordCriteria = function PasswordCriteria(_ref) {
   var met = _ref.met,
       children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$p['password-criteria'], (_classnames = {}, _classnames[styles$p['password-criteria--invalid']] = !met, _classnames))
+    className: classnames(styles$q['password-criteria'], (_classnames = {}, _classnames[styles$q['password-criteria--invalid']] = !met, _classnames))
   }, React__default.createElement(Inline, {
     space: met ? 4 : 8
   }, met ? React__default.createElement(IconCheck, {
@@ -4800,11 +4858,11 @@ var PasswordField = function PasswordField(_ref) {
     error: controllers.error
   };
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: styles$o['password-container']
+    className: styles$p['password-container']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames(styles$o['text-field'], (_classnames = {}, _classnames[styles$o['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$p['text-field'], (_classnames = {}, _classnames[styles$p['text-field--invalid']] = hasError, _classnames)),
     type: type,
     "data-testid": "text-field-" + name,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
@@ -4816,7 +4874,7 @@ var PasswordField = function PasswordField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("div", {
-    className: styles$o['password-toggle'],
+    className: styles$p['password-toggle'],
     onClick: toggleType,
     onKeyPress: toggleType,
     "data-testid": "password-toggle",
@@ -4949,12 +5007,12 @@ var getSelectStyles$1 = function getSelectStyles(_ref) {
   };
 };
 
-var _excluded$3 = ["children", "CustomComponent"];
+var _excluded$4 = ["children", "CustomComponent"];
 
 function CustomOption(_ref) {
   var children = _ref.children,
       CustomComponent = _ref.CustomComponent,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
   return React__default.createElement(Select.components.Option, Object.assign({}, props), React__default.createElement(CustomComponent, Object.assign({}, props), children));
 }
@@ -5054,20 +5112,20 @@ var MultiSelectField = function MultiSelectField(_ref) {
   }));
 };
 
-var styles$q = {"custom-control":"_1cDCR"};
+var styles$r = {"custom-control":"_1cDCR"};
 
-var _excluded$4 = ["children", "CustomPrefixComponent"];
+var _excluded$5 = ["children", "CustomPrefixComponent"];
 
 function CustomControl(_ref) {
   var _props$getValue;
 
   var children = _ref.children,
       CustomPrefixComponent = _ref.CustomPrefixComponent,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   var selectedOption = (_props$getValue = props.getValue()) === null || _props$getValue === void 0 ? void 0 : _props$getValue[0];
   return React__default.createElement(Select.components.Control, Object.assign({}, props), CustomControl && selectedOption ? React__default.createElement("div", {
-    className: styles$q['custom-control'],
+    className: styles$r['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -5080,12 +5138,12 @@ function CustomControl(_ref) {
   }, props)), children)) : children);
 }
 
-var _excluded$5 = ["children", "CustomComponent"];
+var _excluded$6 = ["children", "CustomComponent"];
 
 function CustomOption$1(_ref) {
   var children = _ref.children,
       CustomComponent = _ref.CustomComponent,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
   return React__default.createElement(Select.components.Option, Object.assign({}, props), React__default.createElement(CustomComponent, Object.assign({}, props), children));
 }
@@ -5252,7 +5310,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$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"};
+var styles$s = {"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(), {
@@ -5336,7 +5394,7 @@ var DateField = function DateField(_ref) {
     error: controllers.error
   };
   var dayPickerProps = {
-    classNames: styles$r,
+    classNames: styles$s,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -5353,7 +5411,7 @@ var DateField = function DateField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$r,
+    classNames: styles$s,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -5462,7 +5520,7 @@ var getFormikError = function getFormikError(error) {
   return undefined;
 };
 
-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","date-range-field--disabled":"_2Nkht"};
+var styles$t = {"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","date-range-field--disabled":"_2Nkht"};
 
 var FromDate = function FromDate(_ref) {
   var name = _ref.name,
@@ -5500,7 +5558,7 @@ var FromDate = function FromDate(_ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$s,
+    classNames: styles$t,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -5527,7 +5585,7 @@ var FromDate = function FromDate(_ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$s,
+    classNames: styles$t,
     selectedDay: start,
     value: start,
     formatDate: formatDate,
@@ -5600,7 +5658,7 @@ var ToDate = function ToDate(_ref, ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$s,
+    classNames: styles$t,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -5619,7 +5677,7 @@ var ToDate = function ToDate(_ref, ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$s,
+    classNames: styles$t,
     selectedDay: end,
     value: end,
     formatDate: formatDate,
@@ -5703,7 +5761,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$s['date-range-field'], (_classnames = {}, _classnames[styles$s['date-range-field--invalid']] = hasError, _classnames[styles$s['date-range-field--disabled']] = disabled, _classnames))
+    className: classnames(styles$t['date-range-field'], (_classnames = {}, _classnames[styles$t['date-range-field--invalid']] = hasError, _classnames[styles$t['date-range-field--disabled']] = disabled, _classnames))
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
     color: GREY400
@@ -5753,7 +5811,7 @@ var DateRangeField = function DateRangeField(_ref) {
   })));
 };
 
-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 styles$u = {"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;
@@ -5828,7 +5886,7 @@ var WeekField = function WeekField(_ref) {
   };
 
   var dayPickerProps = {
-    classNames: styles$t,
+    classNames: styles$u,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -5858,7 +5916,7 @@ var WeekField = function WeekField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$t,
+    classNames: styles$u,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -5897,14 +5955,14 @@ var WeekField = function WeekField(_ref) {
   })));
 };
 
-var _excluded$6 = ["placeholder", "autoComplete"];
+var _excluded$7 = ["placeholder", "autoComplete"];
 
 var TimeFieldElement = function TimeFieldElement(_ref, ref) {
   var _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? '9am' : _ref$placeholder,
       _ref$autoComplete = _ref.autoComplete,
       autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
-      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
     placeholder: placeholder,
@@ -5925,12 +5983,12 @@ var TimeFieldElement = function TimeFieldElement(_ref, ref) {
 
 var TimeField = React.forwardRef(TimeFieldElement);
 
-var _excluded$7 = ["currencySymbol"];
+var _excluded$8 = ["currencySymbol"];
 
 var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
   var _ref$currencySymbol = _ref.currencySymbol,
       currencySymbol = _ref$currencySymbol === void 0 ? "$" : _ref$currencySymbol,
-      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$8);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
     ref: ref
@@ -5963,7 +6021,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
 
 var CurrencyField = React.forwardRef(CurrencyFieldElement);
 
-var _excluded$8 = ["max", "min", "precision", "stepSize"];
+var _excluded$9 = ["max", "min", "precision", "stepSize"];
 
 var PercentageElement = function PercentageElement(_ref, ref) {
   var _ref$max = _ref.max,
@@ -5974,7 +6032,7 @@ var PercentageElement = function PercentageElement(_ref, ref) {
       precision = _ref$precision === void 0 ? 0 : _ref$precision,
       _ref$stepSize = _ref.stepSize,
       stepSize = _ref$stepSize === void 0 ? 1 : _ref$stepSize,
-      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
     ref: ref
@@ -6054,36 +6112,6 @@ var PercentageElement = function PercentageElement(_ref, ref) {
 
 var PercentageField = React.forwardRef(PercentageElement);
 
-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,
-      label = _ref.label,
-      caption = _ref.caption,
-      onChange = _ref.onChange,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      id = _ref.id;
-  return React__default.createElement(Stack, {
-    space: 8
-  }, React__default.createElement("label", {
-    className: styles$u['toggle']
-  }, React__default.createElement("input", {
-    "data-testid": "toggle",
-    type: "checkbox",
-    checked: checked,
-    onChange: onChange,
-    disabled: disabled,
-    id: id
-  }), React__default.createElement("span", {
-    className: styles$u['toggle__switch']
-  }), label && React__default.createElement("span", {
-    className: styles$u['toggle__label']
-  }, label)), caption && React__default.createElement("span", {
-    className: styles$u['toggle__caption']
-  }, caption));
-};
-
 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$w = {"header":"_36nxW","sub-header":"_2XwRD"};
@@ -6227,7 +6255,7 @@ var FooterContainer = function FooterContainer(_ref2) {
 
 var styles$z = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 
-var _excluded$9 = ["children", "theme", "title"];
+var _excluded$a = ["children", "theme", "title"];
 
 var Badge = function Badge(_ref, forwardedRef) {
   var _classnames;
@@ -6235,7 +6263,7 @@ var Badge = function Badge(_ref, forwardedRef) {
   var children = _ref.children,
       theme = _ref.theme,
       title = _ref.title,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
   var internalRef = React.useRef(null);
   var ref = forwardedRef || internalRef;