@7shifts/sous-chef 2.16.2 → 2.17.1

package/dist/index.js

@@ -117,7 +117,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;
@@ -138,8 +138,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", {
@@ -157,8 +158,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);
   }));
 };
@@ -169,6 +169,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) {
@@ -177,7 +184,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,
@@ -627,7 +634,35 @@ var Tooltip = function Tooltip(_ref, forwardedRef) {
 
 var Tooltip$1 = React.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"];
 
@@ -636,9 +671,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,
@@ -648,9 +683,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 = React.Children.toArray(children);
   var isIconOnly = childrenArr.length === 1 && typeof childrenArr[0] != 'string';
   return React__default.createElement(Tooltip$1, {
@@ -658,7 +694,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,
@@ -671,7 +707,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
   }))));
 };
 
@@ -4180,6 +4216,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) {
@@ -4197,12 +4243,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"];
@@ -4963,12 +5006,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 = React.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 = React.useCallback(function () {
@@ -5006,10 +5049,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;
 
@@ -5413,6 +5458,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%';
@@ -5435,12 +5482,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,
@@ -5449,7 +5498,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 = React.useRef(null);
@@ -5525,7 +5574,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)) {
@@ -5557,7 +5606,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) {
@@ -5570,7 +5619,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;
@@ -5609,7 +5658,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,
@@ -5706,7 +5755,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,
@@ -5730,11 +5779,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,
@@ -5747,11 +5798,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, {
@@ -5759,7 +5811,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,
@@ -5851,7 +5903,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,
@@ -5873,7 +5925,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));
   })));
 };
@@ -5921,82 +5973,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 = React.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,
@@ -6015,7 +6035,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,
@@ -6026,19 +6046,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 = React.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;
@@ -6046,7 +6208,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, {
@@ -6131,11 +6293,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",
@@ -6147,7 +6309,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",
@@ -6290,14 +6452,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(Select.components.Option, Object.assign({}, props), React__default.createElement(CustomComponent, Object.assign({}, props), children));
+  var UserCustomOption = props.selectProps.componentsProps.UserCustomOption;
+  return React__default.createElement(Select.components.Option, Object.assign({}, props), React__default.createElement(UserCustomOption, Object.assign({}, props), children));
 }
 
 var isScrollingTheSelectMenu = function isScrollingTheSelectMenu(element) {
@@ -6322,6 +6484,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(Select.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,
@@ -6376,19 +6547,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(Select.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));
-      } : Select.components.Option
+      SelectContainer: CustomContainer,
+      Option: UserCustomOption ? CustomOption : Select.components.Option
     },
     menuShouldScrollIntoView: menuShouldScrollIntoView,
     menuPlacement: menuShouldScrollIntoView ? 'bottom' : 'auto',
@@ -6403,20 +6568,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(Select.components.Control, Object.assign({}, props), CustomPrefixComponent && selectedOption ? React__default.createElement("div", {
-    className: styles$x['custom-control'],
+  return React__default.createElement(Select.components.Control, Object.assign({}, props), SelectedOptionPrefix && selectedOption ? React__default.createElement("div", {
+    className: styles$z['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -6424,21 +6589,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(Select.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,
@@ -6482,24 +6637,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(Select.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));
-      } : Select.components.Option,
-      Control: SelectedOptionPrefix ? function (props) {
-        return React__default.createElement(CustomControl, Object.assign({
-          CustomPrefixComponent: SelectedOptionPrefix
-        }, props));
-      } : Select.components.Control
+      SelectContainer: CustomContainer,
+      Option: UserCustomOption ? CustomOption : Select.components.Option,
+      Control: SelectedOptionPrefix ? CustomControl : Select.components.Control
     },
     inputId: controllers.id,
     isClearable: isClearable,
@@ -6543,15 +6689,15 @@ var SelectField = function SelectField(props) {
   }, React__default.createElement(Select__default, 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;
 
@@ -6562,15 +6708,15 @@ var CustomList = function CustomList(_ref) {
   return React__default.createElement(Select.components.MenuList, Object.assign({}, props), React__default.createElement(React.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 = React.useState(false),
       hasMoreOptions = _useState[0],
@@ -6918,7 +7064,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,
@@ -6956,7 +7102,7 @@ var FromDate = function FromDate(_ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$z,
+    classNames: styles$B,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -6983,7 +7129,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,
@@ -7056,7 +7202,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) {
@@ -7075,7 +7221,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,
@@ -7160,7 +7306,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",
@@ -7354,14 +7500,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,
@@ -7382,12 +7528,12 @@ var TimeFieldElement = function TimeFieldElement(_ref, ref) {
 
 var TimeField = React.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
@@ -7420,7 +7566,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
 
 var CurrencyField = React.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,
@@ -7431,7 +7577,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
@@ -7523,7 +7669,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,
@@ -7546,7 +7692,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,
@@ -7558,6 +7704,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,
@@ -7567,6 +7714,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,
@@ -7576,7 +7724,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));
 };
 
@@ -7619,24 +7767,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,
@@ -7644,7 +7794,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",
@@ -7652,9 +7802,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;
@@ -7663,7 +7813,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 = React.useRef(null);
   var ref = forwardedRef || internalRef;
@@ -7676,7 +7826,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));
@@ -7684,9 +7834,9 @@ var Badge = function Badge(_ref, forwardedRef) {
 
 var Badge$1 = React.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,
@@ -7711,7 +7861,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
@@ -7780,7 +7930,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
     },
@@ -7793,7 +7943,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));
 };
 
@@ -7806,7 +7956,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;
@@ -7817,11 +7967,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',
@@ -7840,15 +7990,44 @@ 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);
 };
 
+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
+  })));
+};
+
 exports.AsyncSelectField = AsyncSelectField;
 exports.Avatar = Avatar;
 exports.Badge = Badge$1;
 exports.Button = Button$1;
 exports.Calendar = Calendar;
+exports.Card = Card;
 exports.CheckboxField = CheckboxField;
 exports.Chip = Chip;
 exports.CurrencyField = CurrencyField;