carbon-react 119.9.3 → 119.10.1

package/lib/components/button-toggle/button-toggle.style.js

@@ -51,16 +51,13 @@ const StyledButtonToggle = _styledComponents.default.button`
   box-sizing: border-box;
   max-width: 100%;
 
-  ${_ref => {
-  let {
-    size
-  } = _ref;
-  return (0, _styledComponents.css)`
+  ${({
+  size
+}) => (0, _styledComponents.css)`
     height: ${heightConfig[size]}px;
     padding: 0 ${paddingConfig[size]}px;
     font-size: ${fontSizeConfig[size]}px;
-  `;
-}}
+  `}
   font-weight: 700;
   background-color: transparent;
   cursor: pointer;
@@ -77,14 +74,11 @@ const StyledButtonToggle = _styledComponents.default.button`
   &[aria-pressed="true"] {
     background-color: var(--colorsActionMinor300);
     color: var(--colorsActionMinor600);
-    ${_ref2 => {
-  let {
-    allowDeselect
-  } = _ref2;
-  return !allowDeselect && (0, _styledComponents.css)`
+    ${({
+  allowDeselect
+}) => !allowDeselect && (0, _styledComponents.css)`
         cursor: auto;
-      `;
-}}
+      `}
   }
 
   :not([aria-pressed="true"]):not(:disabled):hover {
@@ -100,23 +94,18 @@ const StyledButtonToggle = _styledComponents.default.button`
     color: var(--colorsActionMinor500);
   }
 
-  ${_ref3 => {
-  let {
-    buttonIcon,
-    buttonIconSize,
-    size
-  } = _ref3;
-  return buttonIcon && buttonIconSize === "large" && (0, _styledComponents.css)`
+  ${({
+  buttonIcon,
+  buttonIconSize,
+  size
+}) => buttonIcon && buttonIconSize === "large" && (0, _styledComponents.css)`
       height: ${heightLargeIconConfig[size]}px;
       padding: 0 ${paddingLargeIconConfig[size]}px;
       flex-direction: column;
-    `;
-}}
-  ${_ref4 => {
-  let {
-    disabled
-  } = _ref4;
-  return disabled && (0, _styledComponents.css)`
+    `}
+  ${({
+  disabled
+}) => disabled && (0, _styledComponents.css)`
       & {
         border-color: var(--colorsActionDisabled500);
         color: var(--colorsActionMinorYin030);
@@ -125,8 +114,7 @@ const StyledButtonToggle = _styledComponents.default.button`
         }
       }
       cursor: not-allowed;
-    `;
-}};
+    `};
 `;
 exports.StyledButtonToggle = StyledButtonToggle;
 const iconFontSizes = {
@@ -134,17 +122,12 @@ const iconFontSizes = {
   largeIcon: 32
 };
 const StyledButtonToggleIcon = _styledComponents.default.div`
-  ${_ref5 => {
-  let {
-    hasContent
-  } = _ref5;
-  return hasContent && `margin-right: 8px;`;
-}}
-  ${_ref6 => {
-  let {
-    buttonIconSize
-  } = _ref6;
-  return buttonIconSize === "large" && (0, _styledComponents.css)`
+  ${({
+  hasContent
+}) => hasContent && `margin-right: 8px;`}
+  ${({
+  buttonIconSize
+}) => buttonIconSize === "large" && (0, _styledComponents.css)`
       margin-right: 0;
       ${_icon.default} {
         margin-right: 0;
@@ -159,19 +142,16 @@ const StyledButtonToggleIcon = _styledComponents.default.div`
       .carbon-icon__svg--credit-card-slash {
         margin-left: 6px;
       }
-    `;
-}}
+    `}
 `;
 exports.StyledButtonToggleIcon = StyledButtonToggleIcon;
 const StyledButtonToggleWrapper = _styledComponents.default.div`
   display: inline-block;
   vertical-align: middle;
 
-  ${_ref7 => {
-  let {
-    grouped
-  } = _ref7;
-  return (0, _styledComponents.css)`
+  ${({
+  grouped
+}) => (0, _styledComponents.css)`
       ${!grouped && (0, _styledComponents.css)`
         &&&& {
           ${StyledButtonToggle} {
@@ -197,22 +177,18 @@ const StyledButtonToggleWrapper = _styledComponents.default.div`
           }
         }
       `}
-    `;
-}}
+    `}
 
   &:not(:first-of-type) {
     margin-left: 8px;
   }
 
-  ${_ref8 => {
-  let {
-    grouped
-  } = _ref8;
-  return grouped && (0, _styledComponents.css)`
+  ${({
+  grouped
+}) => grouped && (0, _styledComponents.css)`
       &:not(:first-of-type) {
         margin-left: -1px;
       }
-    `;
-}};
+    `};
 `;
 exports.StyledButtonToggleWrapper = StyledButtonToggleWrapper;

package/lib/components/carbon-provider/carbon-provider.component.js

@@ -15,13 +15,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const NewValidationContext = /*#__PURE__*/(0, _react.createContext)({});
 exports.NewValidationContext = NewValidationContext;
-const CarbonProvider = _ref => {
-  let {
-    children,
-    theme = _themes.mintTheme,
-    validationRedesignOptIn = false,
-    roundedCornersOptOut = false
-  } = _ref;
+const CarbonProvider = ({
+  children,
+  theme = _themes.mintTheme,
+  validationRedesignOptIn = false,
+  roundedCornersOptOut = false
+}) => {
   const {
     roundedCornersOptOut: existingRoundedCornersOptOut
   } = (0, _react.useContext)(NewValidationContext);

package/lib/components/carbon-provider/top-modal-context.js

@@ -10,10 +10,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const TopModalContext = /*#__PURE__*/(0, _react.createContext)({
   topModal: null
 });
-const TopModalContextProvider = _ref => {
-  let {
-    children
-  } = _ref;
+const TopModalContextProvider = ({
+  children
+}) => {
   const [topModal, setTopModal] = (0, _react.useState)(null);
 
   // can't add the setter to the global list inside useEffect because that doesn't run until

package/lib/components/card/card-column/card-column.component.js

@@ -8,16 +8,13 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _cardColumn = _interopRequireDefault(require("./card-column.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const CardColumn = _ref => {
-  let {
-    align = "center",
-    children
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_cardColumn.default, {
-    align: align,
-    "data-element": "card-column"
-  }, children);
-};
+const CardColumn = ({
+  align = "center",
+  children
+}) => /*#__PURE__*/_react.default.createElement(_cardColumn.default, {
+  align: align,
+  "data-element": "card-column"
+}, children);
 CardColumn.displayName = "CardColumn";
 var _default = CardColumn;
 exports.default = _default;

package/lib/components/card/card-column/card-column.style.js

@@ -8,12 +8,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const StyledCardColumn = _styledComponents.default.div`
   flex-grow: 1;
-  text-align: ${_ref => {
-  let {
-    align
-  } = _ref;
-  return align;
-}};
+  text-align: ${({
+  align
+}) => align};
 `;
 var _default = StyledCardColumn;
 exports.default = _default;

package/lib/components/card/card-footer/card-footer.component.js

@@ -13,13 +13,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const CardFooter = _ref => {
-  let {
-    spacing = "medium",
-    children,
-    variant = "default",
-    ...rest
-  } = _ref;
+const CardFooter = ({
+  spacing = "medium",
+  children,
+  variant = "default",
+  ...rest
+}) => {
   const {
     roundness
   } = (0, _react.useContext)(_cardContext.default);

package/lib/components/card/card-footer/card-footer.style.js

@@ -23,13 +23,11 @@ const paddingSizes = {
 const StyledCardFooter = _styledComponents.default.div`
   ${_styledSystem.space}
 
-  ${_ref => {
-  let {
-    spacing,
-    variant,
-    roundness = "default"
-  } = _ref;
-  return (0, _styledComponents.css)`
+  ${({
+  spacing,
+  variant,
+  roundness = "default"
+}) => (0, _styledComponents.css)`
     background-color: ${variant === "transparent" ? "transparent" : "var(--colorsUtilityMajor025)"};
     border-top: var(--colorsUtilityMajor100);
     border-top-width: 1px;
@@ -51,8 +49,7 @@ const StyledCardFooter = _styledComponents.default.div`
       margin: 0;
       padding: ${paddingSizes[spacing]};
     }
-  `;
-}}
+  `}
 `;
 var _default = StyledCardFooter;
 exports.default = _default;

package/lib/components/card/card-row/card-row.component.js

@@ -10,12 +10,11 @@ var _utils = require("../../../style/utils");
 var _cardRow = _interopRequireDefault(require("./card-row.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const CardRow = _ref => {
-  let {
-    children,
-    spacing = "medium",
-    ...rest
-  } = _ref;
+const CardRow = ({
+  children,
+  spacing = "medium",
+  ...rest
+}) => {
   return /*#__PURE__*/_react.default.createElement(_cardRow.default, _extends({
     "data-element": "card-row",
     spacing: spacing

package/lib/components/card/card-row/card-row.style.js

@@ -17,15 +17,12 @@ const paddingSizes = {
 };
 const StyledCardRow = _styledComponents.default.div`
   display: flex;
-  ${_ref => {
-  let {
-    spacing
-  } = _ref;
-  return (0, _styledComponents.css)`
+  ${({
+  spacing
+}) => (0, _styledComponents.css)`
     padding-top: ${paddingSizes[spacing]};
     padding-bottom: ${paddingSizes[spacing]};
-  `;
-}}
+  `}
 
   ${_styledSystem.padding}
 `;

package/lib/components/card/card.component.js

@@ -20,23 +20,22 @@ function hasDisplayName(child, displayName) {
   return child.type.displayName === displayName;
 }
 let isDeprecationWarningTriggered = false;
-const Card = _ref => {
-  let {
-    "data-element": dataElement,
-    "data-role": dataRole,
-    dataRole: oldDataRole,
-    action,
-    children,
-    cardWidth = "500px",
-    draggable,
-    height,
-    interactive,
-    spacing = "medium",
-    boxShadow,
-    hoverBoxShadow,
-    roundness = "default",
-    ...rest
-  } = _ref;
+const Card = ({
+  "data-element": dataElement,
+  "data-role": dataRole,
+  dataRole: oldDataRole,
+  action,
+  children,
+  cardWidth = "500px",
+  draggable,
+  height,
+  interactive,
+  spacing = "medium",
+  boxShadow,
+  hoverBoxShadow,
+  roundness = "default",
+  ...rest
+}) => {
   if (!isDeprecationWarningTriggered && oldDataRole) {
     isDeprecationWarningTriggered = true;
     _logger.default.deprecate("The `dataRole` prop of `Card` is now deprecated. Please use the kebab-case version `data-role` instead.");

package/lib/components/card/card.style.js

@@ -16,18 +16,16 @@ const paddingSizes = {
   large: "0 48px"
 };
 const StyledCard = _styledComponents.default.div`
-  ${_ref => {
-  let {
-    cardWidth,
-    interactive,
-    draggable,
-    height,
-    spacing,
-    boxShadow = "boxShadow050",
-    hoverBoxShadow = "boxShadow100",
-    roundness
-  } = _ref;
-  return (0, _styledComponents.css)`
+  ${({
+  cardWidth,
+  interactive,
+  draggable,
+  height,
+  spacing,
+  boxShadow = "boxShadow050",
+  hoverBoxShadow = "boxShadow100",
+  roundness
+}) => (0, _styledComponents.css)`
     background-color: var(--colorsUtilityYang100);
     border: none;
     border-radius: ${roundness === "default" ? "var(--borderRadius100)" : "var(--borderRadius200)"};
@@ -61,8 +59,7 @@ const StyledCard = _styledComponents.default.div`
     ::-moz-focus-inner {
       border: 0;
     }
-  `;
-}}
+  `}
 `;
 StyledCard.defaultProps = {
   theme: _base.default

package/lib/components/carousel/carousel.component.js

@@ -15,18 +15,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const NEXT = "next";
 const PREVIOUS = "previous";
-const Carousel = _ref => {
-  let {
-    children,
-    className,
-    enableSlideSelector = true,
-    enablePreviousButton = true,
-    enableNextButton = true,
-    initialSlideIndex = 0,
-    onSlideChange,
-    slideIndex,
-    ...props
-  } = _ref;
+const Carousel = ({
+  children,
+  className,
+  enableSlideSelector = true,
+  enablePreviousButton = true,
+  enableNextButton = true,
+  initialSlideIndex = 0,
+  onSlideChange,
+  slideIndex,
+  ...props
+}) => {
   const [selectedSlideIndex, setSelectedSlideIndex] = (0, _react.useState)(Number(slideIndex) || Number(initialSlideIndex));
   const transitionDirection = (0, _react.useRef)(NEXT);
   const lastSlideIndexProp = (0, _react.useRef)(slideIndex);

package/lib/components/carousel/carousel.style.js

@@ -46,11 +46,9 @@ exports.CarouselStyledIconRight = CarouselStyledIconRight;
 const CarouselButtonStyle = _styledComponents.default.button.attrs({
   type: "button"
 })`
-  ${_ref => {
-  let {
-    disabled
-  } = _ref;
-  return (0, _styledComponents.css)`
+  ${({
+  disabled
+}) => (0, _styledComponents.css)`
     border: none;
     border-radius: var(--borderRadius400);
     width: 40px;
@@ -94,8 +92,7 @@ const CarouselButtonStyle = _styledComponents.default.button.attrs({
         outline: none;
       `}
     }
-  `;
-}}
+  `}
 `;
 exports.CarouselButtonStyle = CarouselButtonStyle;
 const CarouselSelectorInputStyle = _styledComponents.default.input`
@@ -144,19 +141,16 @@ const CarouselSliderWrapper = _styledComponents.default.div`
   display: flex;
   position: relative;
 
-  ${_ref2 => {
-  let {
-    elementIndex
-  } = _ref2;
-  return (0, _styledComponents.css)`
+  ${({
+  elementIndex
+}) => (0, _styledComponents.css)`
     left: ${10 - 80 * elementIndex}%;
 
     ${_slide2.SlideStyle}:nth-of-type(${elementIndex + 1}) {
       transform: scale(1);
       opacity: 1;
     }
-  `;
-}}
+  `}
 `;
 exports.CarouselSliderWrapper = CarouselSliderWrapper;
 const CarouselWrapperStyle = _styledComponents.default.div`

package/lib/components/carousel/slide/slide.style.js

@@ -8,11 +8,9 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const SlideStyle = _styledComponents.default.div`
-  ${_ref => {
-  let {
-    onClick
-  } = _ref;
-  return (0, _styledComponents.css)`
+  ${({
+  onClick
+}) => (0, _styledComponents.css)`
     box-sizing: border-box;
     display: inline-block;
     width: 100%;
@@ -35,8 +33,7 @@ const SlideStyle = _styledComponents.default.div`
         cursor: pointer;
       }
     `}
-  `;
-}}
+  `}
 `;
 
 // eslint-disable-next-line import/prefer-default-export

package/lib/components/checkbox/checkbox-group.component.js

@@ -4,19 +4,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CheckboxGroupContext = exports.CheckboxGroup = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
-var _checkboxGroup = _interopRequireDefault(require("./checkbox-group.style"));
+var _checkboxGroup = _interopRequireWildcard(require("./checkbox-group.style"));
 var _fieldset = _interopRequireDefault(require("../../__internal__/fieldset"));
 var _utils = require("../../style/utils");
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 var _formSpacingProvider = _interopRequireDefault(require("../../__internal__/form-spacing-provider"));
+var _carbonProvider = require("../carbon-provider/carbon-provider.component");
+var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message/validation-message.component"));
+var _box = _interopRequireDefault(require("../../components/box"));
+var _textbox = require("../../components/textbox/textbox.style");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const CheckboxGroupContext = /*#__PURE__*/_react.default.createContext({});
 exports.CheckboxGroupContext = CheckboxGroupContext;
 const CheckboxGroup = props => {
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
   const {
     children,
     legend,
@@ -28,9 +37,42 @@ const CheckboxGroup = props => {
     legendWidth,
     legendAlign,
     legendSpacing,
-    tooltipPosition
+    legendHelp,
+    tooltipPosition,
+    inline
   } = props;
-  return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
+    legend: legend,
+    inline: legendInline,
+    legendWidth: legendWidth,
+    legendAlign: legendAlign,
+    legendSpacing: legendSpacing,
+    error: error,
+    warning: warning,
+    info: info,
+    isRequired: required
+  }, (0, _tags.default)("checkboxgroup", props), {
+    blockGroupBehaviour: !(error || warning)
+  }, (0, _utils.filterStyledSystemMarginProps)(props)), legendHelp && /*#__PURE__*/_react.default.createElement(_checkboxGroup.StyledHintText, null, legendHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
+    position: "relative"
+  }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
+    error: error,
+    warning: warning
+  }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+    warning: !!(!error && warning),
+    inline: inline
+  }), /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {
+    "data-component": "checkbox-group",
+    legendInline: legendInline,
+    inline: inline
+  }, /*#__PURE__*/_react.default.createElement(CheckboxGroupContext.Provider, {
+    value: {
+      error: !!error,
+      warning: !!warning
+    }
+  }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
+    marginBottom: undefined
+  }, children))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
     legend: legend,
@@ -55,7 +97,7 @@ const CheckboxGroup = props => {
     }
   }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
     marginBottom: undefined
-  }, children)))));
+  }, children))))));
 };
 exports.CheckboxGroup = CheckboxGroup;
 CheckboxGroup.displayName = "CheckboxGroup";

package/lib/components/checkbox/checkbox-group.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StyledHintText = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _formField = _interopRequireDefault(require("../../__internal__/form-field/form-field.style"));
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
@@ -13,10 +13,16 @@ var _validationIcon = _interopRequireDefault(require("../../__internal__/validat
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const StyledHintText = _styledComponents.default.div`
+  margin-top: -4px;
+  margin-bottom: 8px;
+  color: var(--colorsUtilityYin055);
+  font-size: 14px;
+`;
+exports.StyledHintText = StyledHintText;
 const StyledCheckboxGroup = _styledComponents.default.div`
   display: flex;
   flex-direction: column;
-
   ${_icon.default}::before {
     font-size: 16px;
   }
@@ -44,16 +50,22 @@ const StyledCheckboxGroup = _styledComponents.default.div`
     }
   }
 
-  ${_ref => {
-  let {
-    legendInline
-  } = _ref;
-  return legendInline && (0, _styledComponents.css)`
+  ${({
+  legendInline
+}) => legendInline && (0, _styledComponents.css)`
       ${_checkbox.default}:first-child {
         padding-top: 4px;
       }
-    `;
-}}
+    `}
+
+  ${({
+  inline
+}) => inline && (0, _styledComponents.css)`
+      flex-direction: row;
+      ${_checkbox.default}:not(:first-of-type) {
+        margin-left: 32px;
+      }
+    `}
 `;
 var _default = StyledCheckboxGroup;
 exports.default = _default;