@7shifts/sous-chef 1.4.0 → 1.5.2

package/dist/index.modern.js

@@ -84,6 +84,22 @@ var IconCalendar = function IconCalendar(_ref) {
   })));
 };
 
+var IconCheck = function IconCheck(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'default' : _ref$size,
+      color = _ref.color;
+  return React__default.createElement("svg", {
+    viewBox: "0 0 20 20",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: getIconStyles(size),
+    "data-testid": "icon-check",
+    className: styles['icon']
+  }, React__default.createElement("g", null, React__default.createElement("path", {
+    fill: color != null ? color : '',
+    d: "M7.32398 16.832C6.99989 17.1535 6.47654 17.1514 6.15507 16.8273L0.239745 10.8642C-0.0817202 10.5401 -0.0796538 10.0168 0.244429 9.69531L0.831292 9.1132C1.15538 8.79173 1.67873 8.7938 2.0002 9.11788L6.7513 13.9074L18.0092 2.73975C18.3333 2.41828 18.8567 2.42035 19.1781 2.74443L19.7602 3.33129C20.0818 3.65538 20.0796 4.17873 19.7555 4.5002L7.32398 16.832Z"
+  })));
+};
+
 var IconChevronDown = function IconChevronDown(_ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'small' : _ref$size,
@@ -736,6 +752,7 @@ var Tooltip = function Tooltip(_ref, forwardedRef) {
       overlay = _ref.overlay,
       header = _ref.header,
       extraClass = _ref.extraClass,
+      onClose = _ref.onClose,
       children = _ref.children;
   var checkIsMounted = useIsMounted();
   var internalRef = useRef(null);
@@ -748,6 +765,14 @@ var Tooltip = function Tooltip(_ref, forwardedRef) {
   var isFocusingOnTooltip = useRef(false);
   var isFocusingOnAnchor = useRef(false);
 
+  var updateOverlayVisibility = function updateOverlayVisibility(shouldShow) {
+    setIsVisible(shouldShow);
+
+    if (!shouldShow) {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }
+  };
+
   var onAnchorFocusIn = function onAnchorFocusIn() {
     isFocusingOnAnchor.current = true;
   };
@@ -761,15 +786,15 @@ var Tooltip = function Tooltip(_ref, forwardedRef) {
 
     if (delayOnOpen) {
       setTimeout(function () {
-        checkIsMounted() && isFocusingOnAnchor.current && setIsVisible(true);
+        checkIsMounted() && isFocusingOnAnchor.current && updateOverlayVisibility(true);
       }, TOOLTIP_DELAY_ON_OPEN);
     } else {
-      setIsVisible(true);
+      updateOverlayVisibility(true);
     }
   };
 
   var closeTooltip = function closeTooltip() {
-    return setIsVisible(false);
+    return updateOverlayVisibility(false);
   };
 
   var closeTooltipWithDelay = function closeTooltipWithDelay() {
@@ -1734,7 +1759,7 @@ var Field = function Field(_ref) {
   return React__default.createElement(Stack, {
     space: 8,
     flexItems: true
-  }, label && React__default.createElement(Label, {
+  }, label !== undefined && React__default.createElement(Label, {
     htmlFor: id
   }, label), children, caption && React__default.createElement(Caption, {
     fieldId: id
@@ -2203,6 +2228,124 @@ var CheckboxField = function CheckboxField(_ref) {
   }, controllers.error));
 };
 
+var styles$m = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
+
+var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
+  var name = _ref.name,
+      inputId = _ref.id,
+      value = _ref.value,
+      _onChange = _ref.onChange,
+      _onBlur = _ref.onBlur,
+      error = _ref.error;
+
+  var _useFormContext = useFormContext(),
+      formik = _useFormContext.formik;
+
+  var id = useFieldId({
+    name: name,
+    id: inputId
+  });
+  var controllers = {
+    id: id,
+    error: error,
+    value: value,
+    onChange: function onChange(options) {
+      return _onChange && _onChange(options);
+    },
+    onBlur: function onBlur(options) {
+      return _onBlur && _onBlur(options);
+    }
+  };
+  var formikState = getFormikState(name, formik);
+
+  if (formik && formikState) {
+    controllers = _extends({}, controllers, {
+      error: error ? controllers.error : formikState.error,
+      value: value ? controllers.value : formikState.value,
+      onChange: function onChange(options) {
+        if (_onChange) {
+          _onChange(options);
+        }
+
+        formik.setFieldValue(name, options);
+      },
+      onBlur: function onBlur(options) {
+        if (_onBlur) {
+          _onBlur(options);
+        }
+
+        formik.setFieldTouched(name);
+      }
+    });
+  }
+
+  return controllers;
+};
+
+var PillSelectField = function PillSelectField(_ref) {
+  var name = _ref.name,
+      inputId = _ref.id,
+      value = _ref.value,
+      options = _ref.options,
+      onChange = _ref.onChange,
+      label = _ref.label,
+      caption = _ref.caption,
+      error = _ref.error,
+      disabled = _ref.disabled;
+  var controllers = useMultiSelectFieldControllers({
+    name: name,
+    id: inputId,
+    value: value,
+    onChange: onChange,
+    error: error
+  });
+  var hasError = !!controllers.error;
+  var fieldProps = {
+    name: name,
+    id: controllers.id,
+    label: label,
+    caption: caption,
+    error: controllers.error
+  };
+  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(Inline, {
+    flexWrap: "wrap",
+    space: 12
+  }, options.map(function (option, key) {
+    var selectedItemIndex = (controllers.value || []).findIndex(function (val) {
+      return val.value === option.value;
+    });
+    var isChecked = selectedItemIndex >= 0;
+    var itemIdentifier = typeof option.value === 'string' ? option.value : key;
+    var itemId = controllers.id + "-" + itemIdentifier;
+    return React__default.createElement("div", {
+      key: itemIdentifier,
+      className: styles$m['pill-select-field']
+    }, React__default.createElement("input", {
+      name: name + "-" + itemIdentifier,
+      id: itemId,
+      type: "checkbox",
+      "data-testid": "pill-select-field-" + name + "-" + itemIdentifier,
+      "aria-describedby": hasError ? itemId + "-error-message" : itemId + "-describer",
+      "aria-invalid": hasError,
+      disabled: option.isDisabled || disabled,
+      checked: isChecked,
+      onChange: function onChange() {
+        var newValue = controllers.value ? [].concat(controllers.value) : [];
+
+        if (isChecked) {
+          newValue.splice(selectedItemIndex, 1);
+        } else {
+          newValue.push(option);
+        }
+
+        controllers.onChange(newValue);
+      }
+    }), React__default.createElement("span", {
+      className: styles$m['pill-select-field__custom-input']
+    }, option.label));
+  })));
+};
+
 var useRadioGroupFieldControllers = function useRadioGroupFieldControllers(_ref) {
   var name = _ref.name,
       value = _ref.value,
@@ -2246,7 +2389,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,
@@ -2279,7 +2422,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, {
@@ -2313,7 +2456,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,
@@ -2331,7 +2474,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,
@@ -2341,19 +2484,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;
@@ -2361,8 +2504,13 @@ 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))
-  }, "\u25CF ", children);
+    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, {
+    size: "small",
+    color: GREY200
+  }) : "\u25CF", children));
 };
 
 var usePasswordCriteria = function usePasswordCriteria(criterias) {
@@ -2440,11 +2588,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",
@@ -2456,7 +2604,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",
@@ -2465,58 +2613,6 @@ var PasswordField = function PasswordField(_ref) {
   }, type === 'password' ? React__default.createElement(IconEyeSlash, null) : React__default.createElement(IconEye, null))));
 };
 
-var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
-  var name = _ref.name,
-      inputId = _ref.id,
-      value = _ref.value,
-      _onChange = _ref.onChange,
-      _onBlur = _ref.onBlur,
-      error = _ref.error;
-
-  var _useFormContext = useFormContext(),
-      formik = _useFormContext.formik;
-
-  var id = useFieldId({
-    name: name,
-    id: inputId
-  });
-  var controllers = {
-    id: id,
-    error: error,
-    value: value,
-    onChange: function onChange(options) {
-      return _onChange && _onChange(options);
-    },
-    onBlur: function onBlur(options) {
-      return _onBlur && _onBlur(options);
-    }
-  };
-  var formikState = getFormikState(name, formik);
-
-  if (formik && formikState) {
-    controllers = _extends({}, controllers, {
-      error: error ? controllers.error : formikState.error,
-      value: value ? controllers.value : formikState.value,
-      onChange: function onChange(options) {
-        if (_onChange) {
-          _onChange(options);
-        }
-
-        formik.setFieldValue(name, options);
-      },
-      onBlur: function onBlur(options) {
-        if (_onBlur) {
-          _onBlur(options);
-        }
-
-        formik.setFieldTouched(name);
-      }
-    });
-  }
-
-  return controllers;
-};
-
 var getSelectStyles = function getSelectStyles(_ref) {
   var isInvalid = _ref.isInvalid,
       _ref$hasPrefix = _ref.hasPrefix,
@@ -2750,7 +2846,7 @@ var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$q = {"custom-control":"_1cDCR"};
+var styles$r = {"custom-control":"_1cDCR"};
 
 var _excluded$3 = ["children", "CustomPrefixComponent"];
 
@@ -2763,7 +2859,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$q['custom-control'],
+    className: styles$r['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -2919,7 +3015,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(), {
@@ -2998,7 +3094,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));
     },
@@ -3015,7 +3111,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(),
@@ -3091,7 +3187,7 @@ var useRangeFieldControllers = function useRangeFieldControllers(_ref) {
   return initialControllers;
 };
 
-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 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"};
 
 var FromDate = function FromDate(_ref) {
   var name = _ref.name,
@@ -3111,7 +3207,7 @@ var FromDate = function FromDate(_ref) {
     to: end
   };
   var dayPickerProps = {
-    classNames: styles$s,
+    classNames: styles$t,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -3132,7 +3228,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,
@@ -3173,7 +3269,7 @@ var ToDate = function ToDate(_ref, ref) {
     to: end
   };
   var dayPickerProps = {
-    classNames: styles$s,
+    classNames: styles$t,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -3194,7 +3290,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,
@@ -3261,7 +3357,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))
+    className: classnames(styles$t['date-range-field'], (_classnames = {}, _classnames[styles$t['date-range-field--invalid']] = hasError, _classnames))
   }, React__default.createElement(IconCalendar, {
     size: "medium"
   }), React__default.createElement(FromDate, {
@@ -3306,7 +3402,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;
@@ -3377,7 +3473,7 @@ var WeekField = function WeekField(_ref) {
   };
 
   var dayPickerProps = {
-    classNames: styles$t,
+    classNames: styles$u,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -3407,7 +3503,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(),
@@ -3436,7 +3532,7 @@ var WeekField = function WeekField(_ref) {
   })));
 };
 
-var styles$u = {"caption":"_1QDLF","label":"_2wiMV","toggle":"_1ui8X","toggle__label":"_1YRJT","toggle__caption":"_1jEiW","toggle__switch":"_3tNyE"};
+var styles$v = {"caption":"_1QDLF","label":"_2wiMV","toggle":"_1ui8X","toggle__label":"_1YRJT","toggle__caption":"_1jEiW","toggle__switch":"_3tNyE"};
 
 var Toggle = function Toggle(_ref) {
   var checked = _ref.checked,
@@ -3449,7 +3545,7 @@ var Toggle = function Toggle(_ref) {
   return React__default.createElement(Stack, {
     space: 8
   }, React__default.createElement("label", {
-    className: styles$u['toggle']
+    className: styles$v['toggle']
   }, React__default.createElement("input", {
     "data-testid": "toggle",
     type: "checkbox",
@@ -3458,17 +3554,17 @@ var Toggle = function Toggle(_ref) {
     disabled: disabled,
     id: id
   }), React__default.createElement("span", {
-    className: styles$u['toggle__switch']
+    className: styles$v['toggle__switch']
   }), label && React__default.createElement("span", {
-    className: styles$u['toggle__label']
+    className: styles$v['toggle__label']
   }, label)), caption && React__default.createElement("span", {
-    className: styles$u['toggle__caption']
+    className: styles$v['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 = {"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"};
+var styles$x = {"header":"_36nxW","sub-header":"_2XwRD"};
 
 var ModalHeader = function ModalHeader(_ref) {
   var header = _ref.header,
@@ -3480,12 +3576,12 @@ var ModalHeader = function ModalHeader(_ref) {
     flex: [1],
     alignItems: "center"
   }, React__default.createElement("span", {
-    className: styles$w['header']
+    className: styles$x['header']
   }, header), React__default.createElement(Button$1, {
     theme: "link-icon",
     onClick: onClose
   }, React__default.createElement(IconClose, null))), subHeader && React__default.createElement("div", {
-    className: styles$w['sub-header']
+    className: styles$x['sub-header']
   }, subHeader));
 };
 
@@ -3521,14 +3617,14 @@ var Modal = function Modal(_ref) {
     contentLabel: "Modal",
     appElement: rootElementId && document.getElementById(rootElementId) || undefined,
     overlayClassName: {
-      base: styles$v['overlay'],
-      afterOpen: styles$v['overlay--after-open'],
-      beforeClose: styles$v['overlay--before-close']
+      base: styles$w['overlay'],
+      afterOpen: styles$w['overlay--after-open'],
+      beforeClose: styles$w['overlay--before-close']
     },
     className: {
-      base: styles$v['content'],
-      afterOpen: styles$v['content--after-open'],
-      beforeClose: styles$v['content--before-close']
+      base: styles$w['content'],
+      afterOpen: styles$w['content--after-open'],
+      beforeClose: styles$w['content--before-close']
     }
   }, React__default.createElement(ModalHeader, {
     header: header,
@@ -3541,16 +3637,16 @@ Modal.setAppElement = function (rootElement) {
   ReactModal.setAppElement(rootElement);
 };
 
-var styles$x = {"modal-body":"_2J-ku"};
+var styles$y = {"modal-body":"_2J-ku"};
 
 var ModalBody = function ModalBody(_ref) {
   var children = _ref.children;
   return React__default.createElement("div", {
-    className: styles$x['modal-body']
+    className: styles$y['modal-body']
   }, children);
 };
 
-var styles$y = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
+var styles$z = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
 
 var ModalFooter = function ModalFooter(_ref) {
   var children = _ref.children,
@@ -3571,7 +3667,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$y['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
+      className: classnames((_classnames = {}, _classnames[styles$z['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
     }, tertiaryButton || React__default.createElement("div", null)), React__default.createElement(Inline, {
       space: 12
     }, secondaryButton, primaryButton)));
@@ -3599,7 +3695,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$y['modal-footer']
+    className: styles$z['modal-footer']
   }, React__default.createElement(Inline, {
     justifyContent: "end",
     space: 12,
@@ -3607,7 +3703,7 @@ var FooterContainer = function FooterContainer(_ref2) {
   }, children));
 };
 
-var styles$z = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
+var styles$A = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 
 var _excluded$5 = ["children", "theme", "title"];
 
@@ -3630,16 +3726,16 @@ var Badge = function Badge(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", Object.assign({
-    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)),
+    className: classnames(styles$A['badge'], (_classnames = {}, _classnames[styles$A['badge--success']] = theme === 'success', _classnames[styles$A['badge--danger']] = theme === 'danger', _classnames[styles$A['badge--info']] = theme === 'info', _classnames[styles$A['badge--warning']] = theme === 'warning', _classnames)),
     ref: ref
   }, otherProps), children));
 };
 
 var Badge$1 = forwardRef(Badge);
 
-var styles$A = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
+var styles$B = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
 
-var styles$B = {"avatar-image":"_GKL9P"};
+var styles$C = {"avatar-image":"_GKL9P"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -3664,7 +3760,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }
 
   return React__default.createElement("div", {
-    className: styles$B['avatar-image']
+    className: styles$C['avatar-image']
   }, React__default.createElement(IconUser, {
     size: "flexible",
     color: color
@@ -3732,7 +3828,7 @@ var Avatar = function Avatar(_ref) {
 
   var backgroundColor = url ? GREY200 : color;
   return React__default.createElement("div", {
-    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)),
+    className: classnames(styles$B['avatar'], (_classnames = {}, _classnames[styles$B['avatar--small']] = size === 'small', _classnames[styles$B['avatar--medium']] = size === 'medium', _classnames[styles$B['avatar--large']] = size === 'large', _classnames[styles$B['avatar--extra-large']] = size === 'extra-large', _classnames)),
     style: {
       backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
     }
@@ -3744,9 +3840,9 @@ var Avatar = function Avatar(_ref) {
       return setShowIconInsteadOfImage(true);
     }
   }), badge && size !== 'small' && React__default.createElement("div", {
-    className: styles$A['avatar__badge']
+    className: styles$B['avatar__badge']
   }, badge));
 };
 
-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 };
+export { Avatar, Badge$1 as Badge, Button$1 as Button, CheckboxField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateRangeField, Form, FormRow, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconCalendar, IconCheck, IconChevronDown, IconChevronUp, IconClose, IconComment, IconDelete, IconEdit, IconExclaim, IconEye, IconEyeSlash, IconLocation, IconMinusCircle, IconMore, IconRemove, IconUser, IconUserPlus, Inline, Modal, ModalBody, ModalFooter, MultiSelectField, PaginationControls, PasswordField, PillSelectField, 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