@7shifts/sous-chef 2.16.2 → 2.17.1

package/dist/index.modern.js

@@ -112,7 +112,7 @@ var MenuItem = function MenuItem(_ref) {
   }, children);
 };
 
-var styles$1 = {"flex":"_3-eyQ","flex__item":"_umc73","align-center":"_kf0KG","align-end":"_3xCGO","align-start":"_3R2c9","justify-center":"_Zvv8e","justify-end":"_2hBMj","justify-space-between":"_3hKWn","justify-start":"_3ACwY","inline-flex":"_2pujZ"};
+var styles$1 = {"flex":"_3-eyQ","align-center":"_kf0KG","align-end":"_3xCGO","align-start":"_3R2c9","justify-center":"_Zvv8e","justify-end":"_2hBMj","justify-space-between":"_3hKWn","justify-start":"_3ACwY","inline-flex":"_2pujZ"};
 
 var Flex = function Flex(_ref) {
   var _classNames;
@@ -133,8 +133,9 @@ var Flex = function Flex(_ref) {
       flexItems = _ref$flexItems === void 0 ? false : _ref$flexItems,
       _ref$flexWrap = _ref.flexWrap,
       flexWrap = _ref$flexWrap === void 0 ? 'nowrap' : _ref$flexWrap,
-      testId = _ref.testId;
-  var className = classnames(styles$1['flex'], (_classNames = {}, _classNames[styles$1['align-start']] = alignItems === 'flex-start', _classNames[styles$1['align-end']] = alignItems === 'flex-end', _classNames[styles$1['align-center']] = alignItems === 'center', _classNames[styles$1['justify-start']] = justifyContent === 'start', _classNames[styles$1['justify-end']] = justifyContent === 'end', _classNames[styles$1['justify-center']] = justifyContent === 'center', _classNames[styles$1['justify-space-between']] = justifyContent === 'space-between', _classNames[styles$1['inline-flex']] = inlineFlex, _classNames));
+      testId = _ref.testId,
+      extraClass = _ref.extraClass;
+  var className = classnames(styles$1['flex'], extraClass, (_classNames = {}, _classNames[styles$1['align-start']] = alignItems === 'flex-start', _classNames[styles$1['align-end']] = alignItems === 'flex-end', _classNames[styles$1['align-center']] = alignItems === 'center', _classNames[styles$1['justify-start']] = justifyContent === 'start', _classNames[styles$1['justify-end']] = justifyContent === 'end', _classNames[styles$1['justify-center']] = justifyContent === 'center', _classNames[styles$1['justify-space-between']] = justifyContent === 'space-between', _classNames[styles$1['inline-flex']] = inlineFlex, _classNames));
   var items = React__default.Children.toArray(children).filter(Boolean);
   var lastItemIndex = items.length - 1;
   return React__default.createElement("div", {
@@ -152,8 +153,7 @@ var Flex = function Flex(_ref) {
         flex: flex ? flex[i] || '0 1 auto' : '0 1 auto',
         marginRight: direction === 'row' && i < lastItemIndex ? space : 0,
         marginBottom: direction === 'column' && i < lastItemIndex ? space : 0
-      },
-      className: styles$1['flex__item']
+      }
     }, child);
   }));
 };
@@ -164,6 +164,13 @@ var Inline = function Inline(props) {
   }));
 };
 
+var SPINNER_THEMES = {
+  MINT: 'mint',
+  DISABLED: 'disabled',
+  CONTRAST: 'contrast',
+  PRIDE: 'pride'
+};
+
 var styles$2 = {"spinner":"_2wtfD","rotator":"_2Jprn","spinner--block":"_Jmh8M","path":"_3zucL","dash":"_3ZqYM","path--mint":"_3XYKx","path--disabled":"_1pYbs","path--contrast":"_3ofDF","path--pride":"_e0OH1"};
 
 var Spinner = function Spinner(_ref) {
@@ -172,7 +179,7 @@ var Spinner = function Spinner(_ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 28 : _ref$size,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? 'mint' : _ref$theme,
+      theme = _ref$theme === void 0 ? SPINNER_THEMES.MINT : _ref$theme,
       _ref$block = _ref.block,
       block = _ref$block === void 0 ? false : _ref$block,
       _ref$testId = _ref.testId,
@@ -622,7 +629,35 @@ var Tooltip = function Tooltip(_ref, forwardedRef) {
 
 var Tooltip$1 = forwardRef(Tooltip);
 
-var styles$5 = {"button":"_1SQ_p","button--loading":"_1g1Zw","button__spinner":"_3TAU6","button--wide":"_1R_gC","button--icon-only":"_3ig9y","button--default":"_3OB2g","button--primary":"_2RivT","button--danger":"_3T8M_","button--upsell":"_1AYVC","button--marketing":"_34HiE","button--hollow":"_3BrS0","button--link-contrast":"_1LCBO","button--link-primary":"_23S36","button--link-danger":"_2CzxI","button--link-upsell":"_21e4m","button--link-toolbar":"_2-ESu","button--link-icon":"_1u3kp"};
+var styles$5 = {"button":"_1SQ_p","button--loading":"_1g1Zw","button__spinner":"_3TAU6","button--size-min-width-100":"_3mZ7B","button--size-full-width":"_13ze_","button--icon-only":"_3ig9y","button--default":"_3OB2g","button--primary":"_2RivT","button--danger":"_3T8M_","button--upsell":"_1AYVC","button--marketing":"_34HiE","button--hollow":"_3BrS0","button--link-contrast":"_1LCBO","button--link-primary":"_23S36","button--link-danger":"_2CzxI","button--link-upsell":"_21e4m","button--link-toolbar":"_2-ESu","button--link-icon":"_1u3kp"};
+
+var BUTTON_SIZES = {
+  FULL_WIDTH: 'full-width',
+  MIN_WIDTH_100: 'min-width-100'
+};
+var BUTTON_THEMES = {
+  DEFAULT: 'default',
+  PRIMARY: 'primary',
+  DANGER: 'danger',
+  UPSELL: 'upsell',
+  MARKETING: 'marketing',
+  HOLLOW: 'hollow',
+  LINK_PRIMARY: 'link-primary',
+  LINK_DANGER: 'link-danger',
+  LINK_UPSELL: 'link-upsell',
+  LINK_TOOLBAR: 'link-toolbar',
+  LINK_CONTRAST: 'link-contrast',
+  LINK_ICON: 'link-icon'
+};
+var BUTTON_TYPES = {
+  BUTTON: 'button',
+  SUBMIT: 'submit',
+  RESET: 'reset'
+};
+var BUTTON_TARGETS = {
+  BLANK: '_blank',
+  SELF: '_self'
+};
 
 var _excluded$1 = ["id", "onClick", "className", "type", "disabled", "href", "target", "children"];
 
@@ -631,9 +666,9 @@ var Button = function Button(_ref, ref) {
 
   var children = _ref.children,
       _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type,
+      type = _ref$type === void 0 ? BUTTON_TYPES.BUTTON : _ref$type,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+      theme = _ref$theme === void 0 ? BUTTON_THEMES.DEFAULT : _ref$theme,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       onClick = _ref.onClick,
@@ -643,9 +678,10 @@ var Button = function Button(_ref, ref) {
       title = _ref.title,
       href = _ref.href,
       _ref$target = _ref.target,
-      target = _ref$target === void 0 ? '_self' : _ref$target,
-      testId = _ref.testId;
-  var contrastSpinner = ['primary', 'danger', 'upsell', 'marketing', 'link-contrast'];
+      target = _ref$target === void 0 ? BUTTON_TARGETS.SELF : _ref$target,
+      testId = _ref.testId,
+      size = _ref.size;
+  var contrastSpinner = [BUTTON_THEMES.PRIMARY, BUTTON_THEMES.DANGER, BUTTON_THEMES.UPSELL, BUTTON_THEMES.MARKETING, BUTTON_THEMES.LINK_CONTRAST];
   var childrenArr = Children.toArray(children);
   var isIconOnly = childrenArr.length === 1 && typeof childrenArr[0] != 'string';
   return React__default.createElement(Tooltip$1, {
@@ -653,7 +689,7 @@ var Button = function Button(_ref, ref) {
   }, React__default.createElement(ButtonElement, {
     id: id,
     onClick: onClick,
-    className: classnames(styles$5['button'], (_classnames = {}, _classnames[styles$5['button--default']] = theme === 'default', _classnames[styles$5['button--primary']] = theme === 'primary', _classnames[styles$5['button--danger']] = theme === 'danger', _classnames[styles$5['button--upsell']] = theme === 'upsell', _classnames[styles$5['button--marketing']] = theme === 'marketing', _classnames[styles$5['button--hollow']] = theme === 'hollow', _classnames[styles$5['button--link-primary']] = theme === 'link-primary', _classnames[styles$5['button--link-danger']] = theme === 'link-danger', _classnames[styles$5['button--link-upsell']] = theme === 'link-upsell', _classnames[styles$5['button--link-toolbar']] = theme === 'link-toolbar', _classnames[styles$5['button--link-contrast']] = theme === 'link-contrast', _classnames[styles$5['button--link-icon']] = theme === 'link-icon', _classnames[styles$5['button--wide']] = wide, _classnames[styles$5['button--loading']] = loading, _classnames[styles$5['button--icon-only']] = isIconOnly, _classnames)),
+    className: classnames(styles$5['button'], (_classnames = {}, _classnames[styles$5['button--default']] = theme === BUTTON_THEMES.DEFAULT, _classnames[styles$5['button--primary']] = theme === BUTTON_THEMES.PRIMARY, _classnames[styles$5['button--danger']] = theme === BUTTON_THEMES.DANGER, _classnames[styles$5['button--upsell']] = theme === BUTTON_THEMES.UPSELL, _classnames[styles$5['button--marketing']] = theme === BUTTON_THEMES.MARKETING, _classnames[styles$5['button--hollow']] = theme === BUTTON_THEMES.HOLLOW, _classnames[styles$5['button--link-primary']] = theme === BUTTON_THEMES.LINK_PRIMARY, _classnames[styles$5['button--link-danger']] = theme === BUTTON_THEMES.LINK_DANGER, _classnames[styles$5['button--link-upsell']] = theme === BUTTON_THEMES.LINK_UPSELL, _classnames[styles$5['button--link-toolbar']] = theme === BUTTON_THEMES.LINK_TOOLBAR, _classnames[styles$5['button--link-contrast']] = theme === BUTTON_THEMES.LINK_CONTRAST, _classnames[styles$5['button--link-icon']] = theme === BUTTON_THEMES.LINK_ICON, _classnames[styles$5['button--loading']] = loading, _classnames[styles$5['button--icon-only']] = isIconOnly, _classnames[styles$5['button--size-min-width-100']] = wide || size === BUTTON_SIZES.MIN_WIDTH_100, _classnames[styles$5['button--size-full-width']] = size === BUTTON_SIZES.FULL_WIDTH, _classnames)),
     type: type,
     disabled: disabled || loading,
     href: href,
@@ -666,7 +702,7 @@ var Button = function Button(_ref, ref) {
   }, children), loading && React__default.createElement("div", {
     className: styles$5['button__spinner']
   }, React__default.createElement(Spinner, {
-    theme: contrastSpinner.includes(theme) ? 'contrast' : 'disabled'
+    theme: contrastSpinner.includes(theme) ? SPINNER_THEMES.CONTRAST : SPINNER_THEMES.DISABLED
   }))));
 };
 
@@ -4175,6 +4211,16 @@ var Toggle = function Toggle(_ref) {
   }, caption));
 };
 
+var KebabMenu = function KebabMenu(_ref) {
+  var actions = _ref.actions;
+  return 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: action.action || index
+    }, action.label);
+  })));
+};
+
 var ActionsCell = function ActionsCell(_ref) {
   var actions = _ref.actions;
   var kebabMenuItems = actions.filter(function (action) {
@@ -4192,12 +4238,9 @@ var ActionsCell = function ActionsCell(_ref) {
       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);
-  }))));
+  }), kebabMenuItems.length > 0 && React__default.createElement(KebabMenu, {
+    actions: kebabMenuItems
+  }));
 };
 
 var _excluded$20 = ["children", "onClick", "isSelected", "actions", "hasDefaultPadding"];
@@ -4958,12 +5001,12 @@ var isEllipsisActive = function isEllipsisActive(e) {
   return e.offsetWidth < e.scrollWidth;
 };
 
-var useLabelTooltip = function useLabelTooltip(labelId, tooltipContent) {
+var useLabelTooltip = function useLabelTooltip(labelId, tooltipContent, truncate) {
   var _useState = useState(false),
       showTooltip = _useState[0],
       setShowTooltip = _useState[1];
 
-  var shouldTruncate = typeof tooltipContent === 'string';
+  var shouldTruncate = typeof tooltipContent === 'string' && truncate;
   var labelElement = document.getElementById(labelId);
   var isHidden = labelElement && labelElement.offsetParent === null;
   var handleApplyTooltip = useCallback(function () {
@@ -5001,10 +5044,12 @@ var Label = function Label(_ref) {
   var _classNames;
 
   var htmlFor = _ref.htmlFor,
-      children = _ref.children;
+      children = _ref.children,
+      _ref$truncate = _ref.truncate,
+      truncate = _ref$truncate === void 0 ? true : _ref$truncate;
   var labelId = "label-" + htmlFor;
 
-  var _useLabelTooltip = useLabelTooltip(labelId, children),
+  var _useLabelTooltip = useLabelTooltip(labelId, children, truncate),
       showTooltip = _useLabelTooltip.showTooltip,
       shouldTruncate = _useLabelTooltip.shouldTruncate;
 
@@ -5408,6 +5453,8 @@ var Form = function Form(_ref) {
   }, stackContent ? React__default.createElement(Stack, null, children) : children));
 };
 
+var styles$p = {"form-row":"_2i-Ll"};
+
 var SIZE_25_PERCENT = '25%';
 var SIZE_33_PERCENT = '33.333%';
 var SIZE_50_PERCENT = '50%';
@@ -5430,12 +5477,14 @@ var FormRow = function FormRow(_ref) {
     }
   }
 
-  return React__default.createElement(Inline, {
+  return React__default.createElement(Flex, {
     flex: [].concat(items, additionalColumns).map(function (_, index) {
       return (sizes === null || sizes === void 0 ? void 0 : sizes[index]) || 1;
     }),
     space: 20,
-    testId: testId
+    testId: testId,
+    alignItems: "stretch",
+    extraClass: styles$p['form-row']
   }, children, additionalColumns.map(function (_, index) {
     return React__default.createElement("span", {
       key: index,
@@ -5444,7 +5493,7 @@ var FormRow = function FormRow(_ref) {
   }));
 };
 
-var styles$p = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
+var styles$q = {"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);
@@ -5520,7 +5569,7 @@ var TextAreaField = function TextAreaField(_ref) {
       updateHeight = _useGrowTextAreaRef.updateHeight;
 
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$p['text-field'], (_classnames = {}, _classnames[styles$p['text-field--invalid']] = hasError, _classnames[styles$p['text-field--disabled']] = disabled, _classnames[styles$p['text-field--focus']] = hasFocus, _classnames)),
+    className: classnames(styles$q['text-field'], (_classnames = {}, _classnames[styles$q['text-field--invalid']] = hasError, _classnames[styles$q['text-field--disabled']] = disabled, _classnames[styles$q['text-field--focus']] = hasFocus, _classnames)),
     ref: containerRef,
     onClick: function onClick(event) {
       if (event.target === (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
@@ -5552,7 +5601,7 @@ var TextAreaField = function TextAreaField(_ref) {
     },
     ref: textAreaRef
   }), toolbar && React__default.createElement("div", {
-    className: styles$p['text-field__toolbar'],
+    className: styles$q['text-field__toolbar'],
     id: controllers.id + "-toolbar",
     ref: toolbarRef,
     onClick: function onClick(event) {
@@ -5565,7 +5614,7 @@ var TextAreaField = function TextAreaField(_ref) {
   }, toolbar)));
 };
 
-var styles$q = {"text-field":"_20YOA","text-field--invalid":"_3kUSh","text-field--prefixed":"_3IU3Q","text-field--suffixed":"_QXJOD"};
+var styles$r = {"text-field":"_20YOA","text-field--invalid":"_3kUSh","text-field--prefixed":"_3IU3Q","text-field--suffixed":"_QXJOD"};
 
 var useTextField = function useTextField(_ref) {
   var _classnames;
@@ -5604,7 +5653,7 @@ var useTextField = function useTextField(_ref) {
     'aria-invalid': hasError,
     autoComplete: autoComplete,
     autoFocus: autoFocus,
-    className: classnames(styles$q['text-field'], (_classnames = {}, _classnames[styles$q['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$r['text-field'], (_classnames = {}, _classnames[styles$r['text-field--invalid']] = hasError, _classnames)),
     'data-testid': testId || "text-field-" + name,
     disabled: disabled,
     defaultValue: defaultValue,
@@ -5701,7 +5750,7 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$r = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
+var styles$s = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
 
 var CheckboxField = function CheckboxField(_ref) {
   var name = _ref.name,
@@ -5725,11 +5774,13 @@ var CheckboxField = function CheckboxField(_ref) {
   var hasError = !!controllers.error;
   return React__default.createElement(Stack, {
     space: 8
-  }, React__default.createElement(Inline, {
+  }, React__default.createElement(Flex, {
     space: 8,
-    alignItems: "center"
+    alignItems: "center",
+    flexItems: true,
+    flex: ['0 0 auto']
   }, React__default.createElement("div", {
-    className: styles$r['check-box-field']
+    className: styles$s['check-box-field']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
@@ -5742,11 +5793,12 @@ var CheckboxField = function CheckboxField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("span", {
-    className: styles$r['check-box-field__custom-input']
+    className: styles$s['check-box-field__custom-input']
   })), label && React__default.createElement(Label, {
-    htmlFor: controllers.id
+    htmlFor: controllers.id,
+    truncate: false
   }, label)), caption && React__default.createElement("div", {
-    className: styles$r['check-box-field__caption']
+    className: styles$s['check-box-field__caption']
   }, React__default.createElement(Caption, {
     fieldId: controllers.id
   }, caption)), controllers.error && React__default.createElement(ErrorMessage, {
@@ -5754,7 +5806,7 @@ var CheckboxField = function CheckboxField(_ref) {
   }, controllers.error));
 };
 
-var styles$s = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
+var styles$t = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
 
 var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
   var name = _ref.name,
@@ -5846,7 +5898,7 @@ var PillSelectField = function PillSelectField(_ref) {
     var itemId = controllers.id + "-" + itemIdentifier;
     return React__default.createElement("div", {
       key: itemIdentifier,
-      className: styles$s['pill-select-field']
+      className: styles$t['pill-select-field']
     }, React__default.createElement("input", {
       name: name + "-" + itemIdentifier,
       id: itemId,
@@ -5868,7 +5920,7 @@ var PillSelectField = function PillSelectField(_ref) {
         controllers.onChange(newValue);
       }
     }), React__default.createElement("span", {
-      className: styles$s['pill-select-field__custom-input']
+      className: styles$t['pill-select-field__custom-input']
     }, option.label));
   })));
 };
@@ -5916,82 +5968,50 @@ var useRadioGroupFieldContext = function useRadioGroupFieldContext() {
   return context;
 };
 
-var styles$t = {"label":"_1WGz2","label--truncate":"_mQ9Rd","radio-group-field__label":"_RXyG_"};
+var styles$u = {"label":"_1WGz2","label--truncate":"_mQ9Rd","radio-group-field__label":"_RXyG_"};
 
-var RadioGroupField = function RadioGroupField(_ref) {
-  var name = _ref.name,
-      value = _ref.value,
-      onChange = _ref.onChange,
+var styles$v = {"label":"_1Tw96","label--truncate":"_1o8rK","radio-group-box-option":"_2OGKE","radio-group-box-option__box":"_23M9k","radio-group-box-option__label":"_1r-Wg"};
+
+var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
+  var value = _ref.value,
+      inputId = _ref.id,
       label = _ref.label,
-      error = _ref.error,
-      _ref$inline = _ref.inline,
-      inline = _ref$inline === void 0 ? false : _ref$inline,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      children = _ref.children,
-      testId = _ref.testId;
-  var controllers = useRadioGroupFieldControllers({
-    name: name,
-    value: value,
-    onChange: onChange,
-    error: error
+      caption = _ref.caption,
+      testId = _ref.testId,
+      children = _ref.children;
+  var radioGroupContext = useRadioGroupFieldContext();
+  var id = useFieldId({
+    name: radioGroupContext.name,
+    id: inputId
   });
-  var onChangeHandler = useCallback(function (e) {
-    controllers.onChange && controllers.onChange(e);
-  }, [name]);
-  var contextValue = {
-    name: name,
-    disabled: disabled,
-    value: controllers.value,
-    onChange: onChangeHandler
-  };
-  return React__default.createElement(RadioGroupFieldContext.Provider, {
-    value: contextValue
+  return React__default.createElement("label", {
+    className: styles$v['radio-group-box-option']
+  }, React__default.createElement("input", {
+    type: "radio",
+    "data-testid": testId,
+    id: id,
+    name: radioGroupContext.name,
+    value: value,
+    onChange: radioGroupContext.onChange,
+    checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
+    disabled: radioGroupContext.disabled
+  }), React__default.createElement("div", {
+    className: styles$v['radio-group-box-option__box']
   }, React__default.createElement(Stack, {
-    space: 12
+    space: 16,
+    alignItems: "center",
+    justifyContent: "center"
+  }, children, React__default.createElement(Stack, {
+    space: 8,
+    alignItems: "center"
   }, label && React__default.createElement("div", {
-    className: styles$t['radio-group-field__label']
-  }, label), React__default.createElement(Stack, {
-    space: 8
-  }, inline ? React__default.createElement(InlineOptions, {
-    testId: testId
-  }, children) : React__default.createElement(Stack, {
-    space: 12,
-    testId: testId
-  }, children), controllers.error && React__default.createElement(ErrorMessage, null, controllers.error))));
-};
-
-var InlineOptions = function InlineOptions(_ref2) {
-  var children = _ref2.children,
-      testId = _ref2.testId;
-  var MAX_OPTIONS_PER_ROW = 4;
-  var numberOfElements = React__default.Children.count(children);
-
-  if (numberOfElements > MAX_OPTIONS_PER_ROW) {
-    var childrenArray = React__default.Children.toArray(children);
-    var rows = [];
-
-    for (var i = 0; i < childrenArray.length; i += MAX_OPTIONS_PER_ROW) {
-      rows.push(childrenArray.slice(i, i + MAX_OPTIONS_PER_ROW));
-    }
-
-    return React__default.createElement(Stack, {
-      space: 12,
-      testId: testId
-    }, rows.map(function (row, rowIndex) {
-      return React__default.createElement(FormRow, {
-        key: rowIndex,
-        columns: MAX_OPTIONS_PER_ROW
-      }, row);
-    }));
-  }
-
-  return React__default.createElement(FormRow, {
-    testId: testId
-  }, children);
+    className: styles$v['radio-group-box-option__label']
+  }, label), caption && React__default.createElement(Caption, {
+    fieldId: id
+  }, caption)))));
 };
 
-var styles$u = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
+var styles$w = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
 
 var RadioGroupOption = function RadioGroupOption(_ref) {
   var value = _ref.value,
@@ -6010,7 +6030,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$u['radio-group-option']
+    className: styles$w['radio-group-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -6021,19 +6041,161 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled
   }), React__default.createElement("span", {
-    className: styles$u['radio-group-option__custom-input']
+    className: styles$w['radio-group-option__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default.createElement("div", {
-    className: styles$u['radio-group-option__caption']
+    className: styles$w['radio-group-option__caption']
   }, React__default.createElement(Caption, {
     fieldId: id
   }, caption)));
 };
 
-var styles$v = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
+var OPTION_TYPES = {
+  BOX: 'BOX',
+  RADIO: 'RADIO'
+};
+var INVALID_OPTIONS_MESSAGE = 'RadioGroupField accept only RadioGroupOption or RadioGroupBoxOption as children. Check the children passed on the RadioGroupField.';
+var getOptionsType = function getOptionsType(children) {
+  var options = [];
+  React__default.Children.forEach(children, function (child) {
+    if (!child || typeof child !== 'object' || !('type' in child)) {
+      throw new TypeError(INVALID_OPTIONS_MESSAGE);
+    }
+
+    var isBoxOption = child.type === RadioGroupBoxOption;
+    var isRadioOption = child.type === RadioGroupOption;
 
-var styles$w = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
+    if (!isBoxOption && !isRadioOption) {
+      throw new TypeError(INVALID_OPTIONS_MESSAGE);
+    }
+
+    if (isBoxOption && options.includes(OPTION_TYPES.RADIO) || isRadioOption && options.includes(OPTION_TYPES.BOX)) {
+      throw new TypeError(INVALID_OPTIONS_MESSAGE + " It is not possible to mix options");
+    }
+
+    options.push(isBoxOption ? OPTION_TYPES.BOX : OPTION_TYPES.RADIO);
+  });
+  return options[0];
+};
+
+var RadioOptions = function RadioOptions(_ref) {
+  var children = _ref.children,
+      inline = _ref.inline,
+      _ref$columns = _ref.columns,
+      columns = _ref$columns === void 0 ? 4 : _ref$columns,
+      testId = _ref.testId;
+
+  if (inline) {
+    return React__default.createElement(InlineOptions, {
+      testId: testId,
+      columns: columns
+    }, children);
+  }
+
+  return React__default.createElement(Stack, {
+    space: 12,
+    testId: testId
+  }, children);
+};
+
+var InlineOptions = function InlineOptions(_ref2) {
+  var children = _ref2.children,
+      columns = _ref2.columns,
+      testId = _ref2.testId;
+  var MAX_OPTIONS_PER_ROW = columns;
+  var childrenArray = React__default.Children.toArray(children);
+  var rows = [];
+
+  for (var i = 0; i < childrenArray.length; i += MAX_OPTIONS_PER_ROW) {
+    rows.push(childrenArray.slice(i, i + MAX_OPTIONS_PER_ROW));
+  }
+
+  return React__default.createElement(Stack, {
+    space: 12,
+    testId: testId
+  }, rows.map(function (row, rowIndex) {
+    return React__default.createElement(FormRow, {
+      key: rowIndex,
+      columns: MAX_OPTIONS_PER_ROW
+    }, row);
+  }));
+};
+
+var BoxOptions = function BoxOptions(_ref) {
+  var children = _ref.children,
+      _ref$columns = _ref.columns,
+      columns = _ref$columns === void 0 ? 4 : _ref$columns,
+      testId = _ref.testId;
+  var MAX_OPTIONS_PER_ROW = +columns;
+  var childrenArray = React__default.Children.toArray(children);
+  var rows = [];
+
+  for (var i = 0; i < childrenArray.length; i += MAX_OPTIONS_PER_ROW) {
+    rows.push(childrenArray.slice(i, i + MAX_OPTIONS_PER_ROW));
+  }
+
+  return React__default.createElement(Stack, {
+    space: 12,
+    testId: testId
+  }, rows.map(function (row, rowIndex) {
+    return React__default.createElement(FormRow, {
+      key: rowIndex,
+      columns: row.length
+    }, row);
+  }));
+};
+
+var RadioGroupField = function RadioGroupField(_ref) {
+  var name = _ref.name,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      label = _ref.label,
+      error = _ref.error,
+      _ref$inline = _ref.inline,
+      inline = _ref$inline === void 0 ? false : _ref$inline,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      children = _ref.children,
+      testId = _ref.testId,
+      columns = _ref.columns;
+  var controllers = useRadioGroupFieldControllers({
+    name: name,
+    value: value,
+    onChange: onChange,
+    error: error
+  });
+  var onChangeHandler = useCallback(function (e) {
+    controllers.onChange && controllers.onChange(e);
+  }, [name]);
+  var contextValue = {
+    name: name,
+    disabled: disabled,
+    value: controllers.value,
+    onChange: onChangeHandler
+  };
+  var optionsType = getOptionsType(children);
+  return React__default.createElement(RadioGroupFieldContext.Provider, {
+    value: contextValue
+  }, React__default.createElement(Stack, {
+    space: 12
+  }, label && React__default.createElement("div", {
+    className: styles$u['radio-group-field__label']
+  }, label), React__default.createElement(Stack, {
+    space: 8
+  }, optionsType === OPTION_TYPES.RADIO ? React__default.createElement(RadioOptions, {
+    inline: inline || Boolean(columns),
+    columns: columns,
+    testId: testId
+  }, children) : React__default.createElement(BoxOptions, {
+    columns: columns,
+    testId: testId
+  }, children), controllers.error && React__default.createElement(ErrorMessage, null, controllers.error))));
+};
+
+var styles$x = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
+
+var styles$y = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
 
 var PasswordCriteria = function PasswordCriteria(_ref) {
   var _classnames;
@@ -6041,7 +6203,7 @@ var PasswordCriteria = function PasswordCriteria(_ref) {
   var met = _ref.met,
       children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$w['password-criteria'], (_classnames = {}, _classnames[styles$w['password-criteria--invalid']] = !met, _classnames))
+    className: classnames(styles$y['password-criteria'], (_classnames = {}, _classnames[styles$y['password-criteria--invalid']] = !met, _classnames))
   }, React__default.createElement(Inline, {
     space: met ? 4 : 8
   }, met ? React__default.createElement(IconCheck, {
@@ -6126,11 +6288,11 @@ var PasswordField = function PasswordField(_ref) {
     error: controllers.error
   };
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: styles$v['password-container']
+    className: styles$x['password-container']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames(styles$v['text-field'], (_classnames = {}, _classnames[styles$v['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$x['text-field'], (_classnames = {}, _classnames[styles$x['text-field--invalid']] = hasError, _classnames)),
     type: type,
     "data-testid": testId || "text-field-" + name,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
@@ -6142,7 +6304,7 @@ var PasswordField = function PasswordField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("div", {
-    className: styles$v['password-toggle'],
+    className: styles$x['password-toggle'],
     onClick: toggleType,
     onKeyPress: toggleType,
     "data-testid": "password-toggle",
@@ -6285,14 +6447,14 @@ var getSelectStyles$1 = function getSelectStyles(_ref) {
   };
 };
 
-var _excluded$22 = ["children", "CustomComponent"];
+var _excluded$22 = ["children"];
 
 function CustomOption(_ref) {
   var children = _ref.children,
-      CustomComponent = _ref.CustomComponent,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$22);
 
-  return React__default.createElement(components.Option, Object.assign({}, props), React__default.createElement(CustomComponent, Object.assign({}, props), children));
+  var UserCustomOption = props.selectProps.componentsProps.UserCustomOption;
+  return React__default.createElement(components.Option, Object.assign({}, props), React__default.createElement(UserCustomOption, Object.assign({}, props), children));
 }
 
 var isScrollingTheSelectMenu = function isScrollingTheSelectMenu(element) {
@@ -6317,6 +6479,15 @@ var isReactSelectElement = function isReactSelectElement(element) {
   return typeof firstOption.id === 'string' && firstOption.id.includes('react-select');
 };
 
+var CustomContainer = function CustomContainer(props) {
+  var componentsProps = props.selectProps.componentsProps;
+  return React__default.createElement(components.SelectContainer, Object.assign({}, props, {
+    innerProps: Object.assign({}, props.innerProps, {
+      'data-testid': componentsProps.testId
+    })
+  }));
+};
+
 var MultiSelectField = function MultiSelectField(_ref) {
   var name = _ref.name,
       inputId = _ref.id,
@@ -6371,19 +6542,13 @@ var MultiSelectField = function MultiSelectField(_ref) {
     onBlur: controllers.onBlur,
     isMulti: true,
     closeMenuOnSelect: closeOnSelect,
+    componentsProps: {
+      testId: testId,
+      UserCustomOption: UserCustomOption
+    },
     components: {
-      SelectContainer: function SelectContainer(props) {
-        return React__default.createElement(components.SelectContainer, Object.assign({}, props, {
-          innerProps: Object.assign({}, props.innerProps, {
-            'data-testid': testId
-          })
-        }));
-      },
-      Option: UserCustomOption ? function (props) {
-        return React__default.createElement(CustomOption, Object.assign({
-          CustomComponent: UserCustomOption
-        }, props));
-      } : components.Option
+      SelectContainer: CustomContainer,
+      Option: UserCustomOption ? CustomOption : components.Option
     },
     menuShouldScrollIntoView: menuShouldScrollIntoView,
     menuPlacement: menuShouldScrollIntoView ? 'bottom' : 'auto',
@@ -6398,20 +6563,20 @@ var MultiSelectField = function MultiSelectField(_ref) {
   }));
 };
 
-var styles$x = {"custom-control":"_1cDCR"};
+var styles$z = {"custom-control":"_1cDCR"};
 
-var _excluded$23 = ["children", "CustomPrefixComponent"];
+var _excluded$23 = ["children"];
 
 function CustomControl(_ref) {
   var _props$getValue;
 
   var children = _ref.children,
-      CustomPrefixComponent = _ref.CustomPrefixComponent,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$23);
 
+  var SelectedOptionPrefix = props.selectProps.componentsProps.SelectedOptionPrefix;
   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), CustomPrefixComponent && selectedOption ? React__default.createElement("div", {
-    className: styles$x['custom-control'],
+  return React__default.createElement(components.Control, Object.assign({}, props), SelectedOptionPrefix && selectedOption ? React__default.createElement("div", {
+    className: styles$z['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -6419,21 +6584,11 @@ function CustomControl(_ref) {
     alignItems: "center",
     space: 0,
     flex: ['0 1 auto', 1]
-  }, React__default.createElement(CustomPrefixComponent, Object.assign({
+  }, React__default.createElement(SelectedOptionPrefix, Object.assign({
     selectedOption: selectedOption
   }, props)), children)) : children);
 }
 
-var _excluded$24 = ["children", "CustomComponent"];
-
-function CustomOption$1(_ref) {
-  var children = _ref.children,
-      CustomComponent = _ref.CustomComponent,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$24);
-
-  return React__default.createElement(components.Option, Object.assign({}, props), React__default.createElement(CustomComponent, Object.assign({}, props), children));
-}
-
 var useSelectField = function useSelectField(_ref) {
   var _ref$asToolbarFilter = _ref.asToolbarFilter,
       asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter,
@@ -6477,24 +6632,15 @@ var useSelectField = function useSelectField(_ref) {
 
       return !isScrollingTheSelectMenu(e.target);
     },
+    componentsProps: {
+      testId: testId,
+      UserCustomOption: UserCustomOption,
+      SelectedOptionPrefix: SelectedOptionPrefix
+    },
     components: {
-      SelectContainer: function SelectContainer(props) {
-        return React__default.createElement(components.SelectContainer, Object.assign({}, props, {
-          innerProps: Object.assign({}, props.innerProps, {
-            'data-testid': testId
-          })
-        }));
-      },
-      Option: UserCustomOption ? function (props) {
-        return React__default.createElement(CustomOption$1, Object.assign({
-          CustomComponent: UserCustomOption
-        }, props));
-      } : components.Option,
-      Control: SelectedOptionPrefix ? function (props) {
-        return React__default.createElement(CustomControl, Object.assign({
-          CustomPrefixComponent: SelectedOptionPrefix
-        }, props));
-      } : components.Control
+      SelectContainer: CustomContainer,
+      Option: UserCustomOption ? CustomOption : components.Option,
+      Control: SelectedOptionPrefix ? CustomControl : components.Control
     },
     inputId: controllers.id,
     isClearable: isClearable,
@@ -6538,15 +6684,15 @@ var SelectField = function SelectField(props) {
   }, React__default.createElement(Select, Object.assign({}, selectProps))));
 };
 
-var styles$y = {"custom-list":"_uC4zU"};
+var styles$A = {"custom-list":"_uC4zU"};
 
-var _excluded$25 = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
+var _excluded$24 = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 
 var CustomList = function CustomList(_ref) {
   var children = _ref.children,
       hasMoreOptions = _ref.hasMoreOptions,
       hasMoreOptionsFirstLoad = _ref.hasMoreOptionsFirstLoad,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$25);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$24);
 
   var showFooter = hasMoreOptions;
 
@@ -6557,15 +6703,15 @@ var CustomList = function CustomList(_ref) {
   return React__default.createElement(components.MenuList, Object.assign({}, props), React__default.createElement(Fragment, null, children, showFooter && React__default.createElement(Inline, {
     justifyContent: "center"
   }, React__default.createElement("div", {
-    className: styles$y['custom-list']
+    className: styles$A['custom-list']
   }, getLocalizedString('main.START_TYPING_TO_SEE_MORE_OPTIONS')))));
 };
 
-var _excluded$26 = ["loadOptions"];
+var _excluded$25 = ["loadOptions"];
 
 var AsyncSelectField = function AsyncSelectField(_ref) {
   var loadOptions = _ref.loadOptions,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$26);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$25);
 
   var _useState = useState(false),
       hasMoreOptions = _useState[0],
@@ -6913,7 +7059,7 @@ var getFormikError = function getFormikError(error) {
   return undefined;
 };
 
-var styles$z = {"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$B = {"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,
@@ -6951,7 +7097,7 @@ var FromDate = function FromDate(_ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$z,
+    classNames: styles$B,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -6978,7 +7124,7 @@ var FromDate = function FromDate(_ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$z,
+    classNames: styles$B,
     selectedDay: start,
     value: start,
     formatDate: formatDate,
@@ -7051,7 +7197,7 @@ var ToDate = function ToDate(_ref, ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$z,
+    classNames: styles$B,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -7070,7 +7216,7 @@ var ToDate = function ToDate(_ref, ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$z,
+    classNames: styles$B,
     selectedDay: end,
     value: end,
     formatDate: formatDate,
@@ -7155,7 +7301,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$z['date-range-field'], (_classnames = {}, _classnames[styles$z['date-range-field--invalid']] = hasError, _classnames[styles$z['date-range-field--disabled']] = disabled, _classnames)),
+    className: classnames(styles$B['date-range-field'], (_classnames = {}, _classnames[styles$B['date-range-field--invalid']] = hasError, _classnames[styles$B['date-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
@@ -7349,14 +7495,14 @@ var WeekField = function WeekField(_ref) {
   })));
 };
 
-var _excluded$27 = ["placeholder", "autoComplete"];
+var _excluded$26 = ["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$27);
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$26);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
     placeholder: placeholder,
@@ -7377,12 +7523,12 @@ var TimeFieldElement = function TimeFieldElement(_ref, ref) {
 
 var TimeField = forwardRef(TimeFieldElement);
 
-var _excluded$28 = ["currencySymbol"];
+var _excluded$27 = ["currencySymbol"];
 
 var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
   var _ref$currencySymbol = _ref.currencySymbol,
       currencySymbol = _ref$currencySymbol === void 0 ? "$" : _ref$currencySymbol,
-      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$28);
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$27);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
     ref: ref
@@ -7415,7 +7561,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
 
 var CurrencyField = forwardRef(CurrencyFieldElement);
 
-var _excluded$29 = ["max", "min", "precision", "stepSize"];
+var _excluded$28 = ["max", "min", "precision", "stepSize"];
 
 var PercentageElement = function PercentageElement(_ref, ref) {
   var _ref$max = _ref.max,
@@ -7426,7 +7572,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$29);
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$28);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
     ref: ref
@@ -7518,7 +7664,7 @@ var BUTTON_THEME = {
   UPSELL: 'upsell'
 };
 
-var styles$A = {"banner":"_vgLin","banner__title":"_63TwY","banner__body":"_3n6S7","banner__body--multilineCTA":"_2pMYs","banner--info":"_ON6Eg","banner__icon":"_1-D-E","banner--success":"_1FFZh","banner--danger":"_2R34O","banner--warning":"_3Cfhe","banner--upsell":"_1SIOw","banner__close":"_3SNQ1","banner--single-line":"_3nLTI"};
+var styles$C = {"banner":"_vgLin","banner__title":"_63TwY","banner__body":"_3n6S7","banner__body--multilineCTA":"_2pMYs","banner--info":"_ON6Eg","banner__icon":"_1-D-E","banner--success":"_1FFZh","banner--danger":"_2R34O","banner--warning":"_3Cfhe","banner--upsell":"_1SIOw","banner__close":"_3SNQ1","banner--single-line":"_3nLTI"};
 
 var ButtonCTA = function ButtonCTA(_ref) {
   var button = _ref.button,
@@ -7541,7 +7687,7 @@ var ButtonCTA = function ButtonCTA(_ref) {
   }, button.props));
 };
 
-var styles$B = {"banner__caption":"_1jqm8"};
+var styles$D = {"banner__caption":"_1jqm8"};
 
 var InlineBannerCTA = function InlineBannerCTA(_ref) {
   var primaryButton = _ref.primaryButton,
@@ -7553,6 +7699,7 @@ var InlineBannerCTA = function InlineBannerCTA(_ref) {
     space: 12,
     "data-testid": "banner_ctas"
   }, multiLine ? React__default.createElement(Inline, {
+    flexWrap: 'wrap',
     space: 12
   }, React__default.createElement(ButtonCTA, {
     button: primaryButton,
@@ -7562,6 +7709,7 @@ var InlineBannerCTA = function InlineBannerCTA(_ref) {
     button: secondaryButton,
     bannerTheme: bannerTheme
   })) : React__default.createElement(Inline, {
+    flexWrap: 'wrap',
     space: 12
   }, secondaryButton && React__default.createElement(ButtonCTA, {
     button: secondaryButton,
@@ -7571,7 +7719,7 @@ var InlineBannerCTA = function InlineBannerCTA(_ref) {
     bannerTheme: bannerTheme,
     primaryCTA: true
   })), caption && multiLine && React__default.createElement("div", {
-    className: styles$B['banner__caption']
+    className: styles$D['banner__caption']
   }, caption));
 };
 
@@ -7614,24 +7762,26 @@ var InlineBanner = function InlineBanner(_ref) {
   var Layout = multiLine ? Stack : Inline;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$A['banner'], (_classnames = {}, _classnames[styles$A['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$A['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$A['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$A['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$A['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$A['banner--single-line']] = !multiLine, _classnames))
+    className: classnames(styles$C['banner'], (_classnames = {}, _classnames[styles$C['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$C['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$C['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$C['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$C['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$C['banner--single-line']] = !multiLine, _classnames))
   }, React__default.createElement(Inline, {
     alignItems: multiLine ? undefined : 'center',
     flex: ['0 1 auto', 1],
     space: 12
   }, React__default.createElement("div", {
-    className: styles$A['banner__icon']
+    className: styles$C['banner__icon']
   }, React__default.createElement(InlineBannerIcon, {
     theme: theme
   })), React__default.createElement(Layout, {
     justifyContent: multiLine ? undefined : 'space-between',
     alignItems: multiLine ? undefined : 'center',
     space: multiLine ? 8 : 12,
-    "data-testid": "banner-body-container"
+    "data-testid": "banner-body-container",
+    flex: ["min-content"],
+    flexWrap: multiLine ? undefined : 'wrap'
   }, title && React__default.createElement("div", {
-    className: styles$A['banner__title']
+    className: styles$C['banner__title']
   }, title), React__default.createElement("div", {
-    className: classnames(styles$A['banner__body'], (_classnames2 = {}, _classnames2[styles$A['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
+    className: classnames(styles$C['banner__body'], (_classnames2 = {}, _classnames2[styles$C['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
   }, children), primaryButton && React__default.createElement(InlineBannerCTA, {
     primaryButton: primaryButton,
     secondaryButton: secondaryButton,
@@ -7639,7 +7789,7 @@ var InlineBanner = function InlineBanner(_ref) {
     multiLine: multiLine,
     bannerTheme: theme
   })), dismissable && React__default.createElement("div", {
-    className: styles$A['banner__close']
+    className: styles$C['banner__close']
   }, React__default.createElement(Button$1, {
     theme: "link-icon",
     type: "button",
@@ -7647,9 +7797,9 @@ var InlineBanner = function InlineBanner(_ref) {
   }, React__default.createElement(IconTimes, null)))));
 };
 
-var styles$C = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
+var styles$E = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 
-var _excluded$2a = ["children", "theme", "title", "testId"];
+var _excluded$29 = ["children", "theme", "title", "testId"];
 
 var Badge = function Badge(_ref, forwardedRef) {
   var _classnames;
@@ -7658,7 +7808,7 @@ var Badge = function Badge(_ref, forwardedRef) {
       theme = _ref.theme,
       title = _ref.title,
       testId = _ref.testId,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2a);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$29);
 
   var internalRef = useRef(null);
   var ref = forwardedRef || internalRef;
@@ -7671,7 +7821,7 @@ var Badge = function Badge(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", Object.assign({
-    className: classnames(styles$C['badge'], (_classnames = {}, _classnames[styles$C['badge--success']] = theme === 'success', _classnames[styles$C['badge--danger']] = theme === 'danger', _classnames[styles$C['badge--info']] = theme === 'info', _classnames[styles$C['badge--warning']] = theme === 'warning', _classnames)),
+    className: classnames(styles$E['badge'], (_classnames = {}, _classnames[styles$E['badge--success']] = theme === 'success', _classnames[styles$E['badge--danger']] = theme === 'danger', _classnames[styles$E['badge--info']] = theme === 'info', _classnames[styles$E['badge--warning']] = theme === 'warning', _classnames)),
     ref: ref,
     "data-testid": testId
   }, otherProps), children));
@@ -7679,9 +7829,9 @@ var Badge = function Badge(_ref, forwardedRef) {
 
 var Badge$1 = forwardRef(Badge);
 
-var styles$D = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
+var styles$F = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
 
-var styles$E = {"avatar-image":"_GKL9P"};
+var styles$G = {"avatar-image":"_GKL9P"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -7706,7 +7856,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }
 
   return React__default.createElement("div", {
-    className: styles$E['avatar-image']
+    className: styles$G['avatar-image']
   }, React__default.createElement(IconUserSolid, {
     size: "flexible",
     color: color
@@ -7775,7 +7925,7 @@ var Avatar = function Avatar(_ref) {
 
   var backgroundColor = url ? GREY200 : color;
   return React__default.createElement("div", {
-    className: classnames(styles$D['avatar'], (_classnames = {}, _classnames[styles$D['avatar--small']] = size === 'small', _classnames[styles$D['avatar--medium']] = size === 'medium', _classnames[styles$D['avatar--large']] = size === 'large', _classnames[styles$D['avatar--extra-large']] = size === 'extra-large', _classnames)),
+    className: classnames(styles$F['avatar'], (_classnames = {}, _classnames[styles$F['avatar--small']] = size === 'small', _classnames[styles$F['avatar--medium']] = size === 'medium', _classnames[styles$F['avatar--large']] = size === 'large', _classnames[styles$F['avatar--extra-large']] = size === 'extra-large', _classnames)),
     style: {
       backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
     },
@@ -7788,7 +7938,7 @@ var Avatar = function Avatar(_ref) {
       return setShowIconInsteadOfImage(true);
     }
   }), badge && size !== 'small' && React__default.createElement("div", {
-    className: styles$D['avatar__badge']
+    className: styles$F['avatar__badge']
   }, badge));
 };
 
@@ -7801,7 +7951,7 @@ var CHIP_THEME = {
   DANGER: 'danger'
 };
 
-var styles$F = {"chip":"_1fIeV","chip--marketing":"_V4byU","chip--success":"_37gN9","chip--upsell":"_Tw7tp","chip--warning":"_t94VZ","chip--info":"_3SmeO","chip--danger":"_2eoX0"};
+var styles$H = {"chip":"_1fIeV","chip--marketing":"_V4byU","chip--success":"_37gN9","chip--upsell":"_Tw7tp","chip--warning":"_t94VZ","chip--info":"_3SmeO","chip--danger":"_2eoX0"};
 
 var Chip = function Chip(_ref) {
   var _classnames;
@@ -7812,11 +7962,11 @@ var Chip = function Chip(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$F['chip'], (_classnames = {}, _classnames[styles$F['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$F['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$F['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$F['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$F['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$F['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
+    className: classnames(styles$H['chip'], (_classnames = {}, _classnames[styles$H['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$H['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$H['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$H['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$H['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$H['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
   }, children);
 };
 
-var styles$G = {"pill":"_23q4Y","pill--default":"_niDEM","pill--success":"_IwDRB","pill--danger":"_MPji-","pill--warning":"_3S2m8","pill--info":"_2G3ML"};
+var styles$I = {"pill":"_23q4Y","pill--default":"_niDEM","pill--success":"_IwDRB","pill--danger":"_MPji-","pill--warning":"_3S2m8","pill--info":"_2G3ML"};
 
 var PILL_THEME = {
   INFO: 'info',
@@ -7835,9 +7985,37 @@ var Pill = function Pill(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$G['pill'], (_classnames = {}, _classnames[styles$G['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$G['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$G['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$G['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$G['pill--info']] = theme === PILL_THEME.INFO, _classnames))
+    className: classnames(styles$I['pill'], (_classnames = {}, _classnames[styles$I['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$I['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$I['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$I['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$I['pill--info']] = theme === PILL_THEME.INFO, _classnames))
   }, children);
 };
 
-export { AsyncSelectField, Avatar, Badge$1 as Badge, Button$1 as Button, Calendar, CheckboxField, Chip, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateRangeField, Form, FormRow, IconAnalytics, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowUp, IconAward, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGrinBeam, IconGripVertical, IconHandshake, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMinus, IconMinusCircle, IconMoneyBill, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Modal, ModalBody, ModalFooter, MultiSelectField, PaginationControls, PasswordField, PercentageField, Pill, 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, TimeField, Toggle, ToolbarSelect, Tooltip$1 as Tooltip, WeekField };
+var styles$J = {"card":"_29ZIp","card__body":"_3Q8NT","card__body--interactive":"_2Fah6","card--focus":"_SGno0","card__body--focus":"_1zqRN","card__body--with-kebab":"_3Hwms","card__kebab":"_TmEUS"};
+
+var Card = function Card(_ref) {
+  var _classnames, _classnames2;
+
+  var children = _ref.children,
+      onClick = _ref.onClick,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      actions = _ref.actions,
+      testId = _ref.testId;
+  return React__default.createElement("div", {
+    className: classnames(styles$J['card'])
+  }, onClick ? React__default.createElement("button", {
+    className: classnames(styles$J['card__body'], styles$J['card__body--interactive'], (_classnames = {}, _classnames[styles$J['card__body--focus']] = isSelected, _classnames[styles$J['card__body--with-kebab']] = actions, _classnames)),
+    "data-testid": testId,
+    tabIndex: 0,
+    onClick: onClick
+  }, children) : React__default.createElement("div", {
+    className: classnames(styles$J['card__body'], (_classnames2 = {}, _classnames2[styles$J['card__body--focus']] = isSelected, _classnames2[styles$J['card__body--with-kebab']] = actions, _classnames2)),
+    "data-testid": testId
+  }, children), actions && React__default.createElement("div", {
+    className: classnames(styles$J['card__kebab'])
+  }, React__default.createElement(KebabMenu, {
+    actions: actions
+  })));
+};
+
+export { AsyncSelectField, Avatar, Badge$1 as Badge, Button$1 as Button, Calendar, Card, CheckboxField, Chip, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateRangeField, Form, FormRow, IconAnalytics, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowUp, IconAward, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGrinBeam, IconGripVertical, IconHandshake, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMinus, IconMinusCircle, IconMoneyBill, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Modal, ModalBody, ModalFooter, MultiSelectField, PaginationControls, PasswordField, PercentageField, Pill, 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, TimeField, Toggle, ToolbarSelect, Tooltip$1 as Tooltip, WeekField };
 //# sourceMappingURL=index.modern.js.map