carbon-react 125.6.0 → 125.8.0

package/esm/components/typography/typography.component.d.ts

@@ -49,9 +49,15 @@ export interface TypographyProps extends SpaceProps, TagProps {
     /** Set whether it will be visually hidden
      * NOTE: This is for screen readers only and will make a lot of the other props redundant */
     screenReaderOnly?: boolean;
+    /**
+     * @private
+     * @ignore
+     * Override the default color of the rendered element to match disabled styling
+     * */
+    isDisabled?: boolean;
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: TypographyProps): React.JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, ...rest }: TypographyProps): React.JSX.Element;
     displayName: string;
 };
 export default Typography;

package/esm/components/typography/typography.component.js

@@ -29,6 +29,7 @@ export const Typography = ({
   children,
   className,
   screenReaderOnly,
+  isDisabled,
   ...rest
 }) => {
   return /*#__PURE__*/React.createElement(StyledTypography, _extends({
@@ -52,7 +53,8 @@ export const Typography = ({
     bg: bg,
     opacity: opacity,
     className: className,
-    screenReaderOnly: screenReaderOnly
+    screenReaderOnly: screenReaderOnly,
+    isDisabled: isDisabled
   }, tagComponent(dataComponent, rest), filterStyledSystemMarginProps(rest), filterStyledSystemPaddingProps(rest)), children);
 };
 Typography.displayName = "Typography";

package/esm/components/typography/typography.style.js

@@ -190,6 +190,11 @@ const StyledTypography = styled.span.attrs(({
   backgroundColor,
   ...rest
 })}
+  ${({
+  isDisabled
+}) => isDisabled && css`
+      color: var(--colorsUtilityYin030);
+    `}
 `;
 StyledTypography.defaultProps = {
   theme: baseTheme

package/esm/global.d.ts

@@ -3,6 +3,7 @@ import { ModalList } from "components/modal/__internal__/modal-manager";
 declare global {
   module "*.png";
   module "*.svg";
+  module "*.txt";
   interface Window {
     __CARBON_INTERNALS_MODAL_LIST?: ModalList;
     __CARBON_INTERNALS_MODAL_SETTER_LIST?: ((

package/esm/locales/__internal__/pl-pl.js

@@ -198,6 +198,14 @@ const plPL = {
   tileSelect: {
     deselect: () => "Odznacz"
   },
+  time: {
+    amText: () => "AM",
+    pmText: () => "PM",
+    hoursLabelText: () => "Hrs.",
+    minutesLabelText: () => "Min.",
+    hoursAriaLabelText: () => "Godziny",
+    minutesAriaLabelText: () => "Minuty"
+  },
   toast: {
     ariaLabels: {
       close: () => "Zamknij"

package/esm/locales/en-gb.js

@@ -163,6 +163,14 @@ const enGB = {
   tileSelect: {
     deselect: () => "Deselect"
   },
+  time: {
+    amText: () => "AM",
+    pmText: () => "PM",
+    hoursLabelText: () => "Hrs.",
+    minutesLabelText: () => "Mins.",
+    hoursAriaLabelText: () => "Hours",
+    minutesAriaLabelText: () => "Minutes"
+  },
   toast: {
     ariaLabels: {
       close: () => "Close"

package/esm/locales/locale.d.ts

@@ -138,6 +138,14 @@ interface Locale {
     tileSelect: {
         deselect: () => string;
     };
+    time: {
+        amText: () => string;
+        pmText: () => string;
+        hoursLabelText: () => string;
+        minutesLabelText: () => string;
+        hoursAriaLabelText: () => string;
+        minutesAriaLabelText: () => string;
+    };
     toast: {
         ariaLabels: {
             close: () => string;

package/lib/__internal__/fieldset/fieldset.component.d.ts

@@ -22,6 +22,18 @@ export interface FieldsetProps extends MarginProps {
     isRequired?: boolean;
     /** Controls whether group behaviour should be enabled */
     blockGroupBehaviour?: boolean;
+    /** Margin props for the legend element */
+    legendMargin?: Pick<MarginProps, "mb">;
+    /** Any valid CSS string to set the component's width */
+    width?: string;
+    /** Flag to configure component as optional in Form */
+    isOptional?: boolean;
+    /** Apply disabled styling to the legend content */
+    isDisabled?: boolean;
+    /** Set a name value on the component */
+    name?: string;
+    /** Set an id value on the component */
+    id?: string;
 }
-declare const Fieldset: ({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, ...rest }: FieldsetProps) => React.JSX.Element;
+declare const Fieldset: ({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, isOptional, ...rest }: FieldsetProps) => React.JSX.Element;
 export default Fieldset;

package/lib/__internal__/fieldset/fieldset.component.js

@@ -27,28 +27,44 @@ const Fieldset = ({
   info,
   isRequired,
   blockGroupBehaviour,
+  legendMargin = {},
+  isDisabled,
+  isOptional,
   ...rest
 }) => {
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
   const marginProps = (0, _useFormSpacing.default)(rest);
+  const [ref, setRef] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    if (ref && isRequired) {
+      Array.from(ref.querySelectorAll("input") || /* istanbul ignore next */[]).forEach(el => {
+        el.setAttribute("required", "");
+      });
+    }
+  }, [ref, isRequired]);
   return /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, {
     blockGroupBehaviour: blockGroupBehaviour
   }, /*#__PURE__*/_react.default.createElement(_fieldset.StyledFieldset, _extends({
+    ref: setRef,
     "data-component": "fieldset"
   }, rest, marginProps), legend && /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupContext.Consumer, null, ({
     onMouseEnter,
     onMouseLeave
-  }) => /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegend, {
+  }) => /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegend, _extends({
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     inline: inline,
     width: legendWidth,
     align: legendAlign,
     rightPadding: legendSpacing
-  }, /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegendContent, {
-    isRequired: isRequired
+  }, legendMargin, {
+    "data-element": "legend"
+  }), /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegendContent, {
+    isRequired: isRequired,
+    isOptional: isOptional,
+    isDisabled: isDisabled
   }, legend, !validationRedesignOptIn && /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
     error: error,
     warning: warning,

package/lib/__internal__/fieldset/fieldset.style.d.ts

@@ -1,6 +1,11 @@
-declare const StyledFieldset: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
+declare type StyledFieldsetProps = {
+    width?: string;
+};
+declare const StyledFieldset: import("styled-components").StyledComponent<"fieldset", any, StyledFieldsetProps, never>;
 declare type StyledLegendContentProps = {
     isRequired?: boolean;
+    isOptional?: boolean;
+    isDisabled?: boolean;
 };
 declare const StyledLegendContent: import("styled-components").StyledComponent<"span", any, StyledLegendContentProps, never>;
 declare type StyledLegendProps = {

package/lib/__internal__/fieldset/fieldset.style.js

@@ -17,6 +17,9 @@ const StyledFieldset = exports.StyledFieldset = _styledComponents.default.fields
   padding: 0;
   min-width: 0;
   min-inline-size: 0;
+  ${({
+  width
+}) => width && `width: ${width};`}
 `;
 StyledFieldset.defaultProps = {
   theme: _base.default
@@ -34,13 +37,35 @@ const StyledLegendContent = exports.StyledLegendContent = _styledComponents.defa
         color: var(--colorsSemanticNegative500);
         font-weight: 700;
         margin-left: var(--spacing100);
+        position: relative;
+        top: 1px;
+        left: -4px;
+      }
+    `}
+
+  ${({
+  isOptional
+}) => isOptional && (0, _styledComponents.css)`
+      ::after {
+        content: "(optional)";
+        font-weight: 350; //TODO: (tokens) use token var(--fontWeights400) - FE-6022
+        margin-left: 4px;
+      }
+    `}
+
+  ${({
+  isDisabled
+}) => isDisabled && (0, _styledComponents.css)`
+      color: var(--colorsUtilityYin030);
+      ::after {
+        color: var(--colorsUtilityYin030);
       }
     `}
 `;
 const StyledLegend = exports.StyledLegend = _styledComponents.default.legend`
   display: flex;
   align-items: center;
-  margin-bottom: 8px;
+  margin-bottom: var(--spacing100);
   padding: 0;
   font-weight: 600;
   ${({
@@ -56,4 +81,5 @@ const StyledLegend = exports.StyledLegend = _styledComponents.default.legend`
       justify-content: ${align === "right" ? "flex-end" : "flex-start"};
       padding-right: ${rightPadding === 1 ? "var(--spacing100)" : "var(--spacing200)"};
     `}
+  ${_styledSystem.margin}
 `;

package/lib/__internal__/label/label.component.d.ts

@@ -20,7 +20,11 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
     useValidationIcon?: boolean;
     /** Id of the validation icon */
     validationIconId?: string;
+    /** Sets className for component */
+    className?: string;
+    /** Sets aria-label for label element */
+    "aria-label"?: string;
 }
-export declare const Label: ({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => React.JSX.Element;
-declare const _default: React.MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => React.JSX.Element>;
+export declare const Label: ({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: LabelProps) => React.JSX.Element;
+declare const _default: React.MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: LabelProps) => React.JSX.Element>;
 export default _default;

package/lib/__internal__/label/label.component.js

@@ -52,7 +52,9 @@ const Label = ({
   useValidationIcon = true,
   validationIconId,
   warning,
-  width = 30
+  width = 30,
+  className,
+  "aria-label": ariaLabel
 }) => {
   const [isFocused, setFocus] = (0, _react.useState)(false);
   const {
@@ -109,7 +111,8 @@ const Label = ({
     width: width,
     optional: optional,
     pr: pr,
-    pl: pl
+    pl: pl,
+    className: className
   }, /*#__PURE__*/_react.default.createElement(_label.default, _extends({
     "data-element": "label",
     disabled: disabled,
@@ -120,7 +123,8 @@ const Label = ({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     isRequired: isRequired,
-    as: as
+    as: as,
+    "aria-label": ariaLabel
   }), children), icon());
 };
 exports.Label = Label;

package/lib/components/accordion/accordion.component.d.ts

@@ -17,9 +17,9 @@ export interface AccordionProps extends StyledAccordionContainerProps, SpaceProp
     /** Styled system spacing props provided to Accordion Title */
     headerSpacing?: SpaceProps;
     id?: string;
-    /** Sets icon type - accepted values: 'chevron_down' (default), 'dropdown' */
-    iconType?: "chevron_down" | "dropdown";
-    /** Sets icon alignment - accepted values: 'left', 'right' (default) */
+    /** Sets icon type */
+    iconType?: "chevron_down" | "chevron_down_thick" | "dropdown";
+    /** Sets icon alignment */
     iconAlign?: "left" | "right";
     /** Sets accordion title */
     title: React.ReactNode;

package/lib/components/accordion/accordion.component.js

@@ -9,12 +9,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _accordion = require("./accordion.style");
 var _validations = _interopRequireDefault(require("../../__internal__/validations"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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); }
+let deprecatedSchemeWarnTriggered = false;
+let deprecatedButtonHeadingWarnTriggered = false;
 const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
   borders = "default",
   defaultExpanded,
@@ -24,8 +27,8 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
   handleKeyboardAccessibility,
   id,
   index,
-  iconType = "chevron_down",
-  iconAlign = "right",
+  iconType,
+  iconAlign,
   scheme = "white",
   size = "large",
   subTitle,
@@ -39,8 +42,17 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
   buttonHeading,
   buttonWidth = "150px",
   openTitle,
+  variant = "standard",
   ...rest
 }, ref) => {
+  if (!deprecatedSchemeWarnTriggered && scheme === "transparent") {
+    deprecatedSchemeWarnTriggered = true;
+    _logger.default.deprecate("The `scheme` prop for `Accordion` component is deprecated and will soon be removed.");
+  }
+  if (!deprecatedButtonHeadingWarnTriggered && buttonHeading) {
+    deprecatedButtonHeadingWarnTriggered = true;
+    _logger.default.deprecate("The `buttonHeading` prop for `Accordion` component is deprecated and will soon be removed. Please use `subtle` variant instead.");
+  }
   const isControlled = expanded !== undefined;
   const [isExpandedInternal, setIsExpandedInternal] = (0, _react.useState)(defaultExpanded || false);
   const [contentHeight, setContentHeight] = (0, _react.useState)(isExpandedInternal ? "auto" : 0);
@@ -72,13 +84,15 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
   const contentId = `AccordionContent_${guid.current}`;
   const showValidationIcon = !!(error || warning || info);
   const getTitle = () => isExpanded ? openTitle || title : title;
+  const getIconType = () => size === "small" || variant === "subtle" ? "chevron_down_thick" : "chevron_down";
   return /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionContainer, _extends({
     id: accordionId,
     "data-component": "accordion",
     width: width,
-    borders: borders,
+    borders: variant === "subtle" ? "none" : borders,
     scheme: scheme,
-    buttonHeading: buttonHeading
+    buttonHeading: buttonHeading,
+    variant: variant
   }, rest), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionTitleContainer, _extends({
     "data-element": "accordion-title-container",
     id: headerId,
@@ -87,10 +101,12 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
     onClick: toggleAccordion,
     onKeyDown: handleKeyDown,
     tabIndex: 0,
-    iconAlign: iconAlign,
+    iconAlign: iconAlign || (variant === "standard" ? "right" : "left"),
     ref: ref,
     size: size,
     buttonHeading: buttonHeading,
+    isExpanded: isExpanded,
+    variant: variant,
     buttonWidth: buttonWidth,
     hasButtonProps: buttonHeading && !(typeof headerSpacing === "undefined"),
     role: "button"
@@ -102,19 +118,20 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
     buttonHeading: buttonHeading
   }, !buttonHeading && typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionTitle, {
     "data-element": "accordion-title",
-    size: size
-  }, title) : getTitle(), !buttonHeading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showValidationIcon && /*#__PURE__*/_react.default.createElement(_validations.default, {
+    size: size,
+    variant: variant
+  }, title) : getTitle(), !buttonHeading && variant !== "subtle" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showValidationIcon && /*#__PURE__*/_react.default.createElement(_validations.default, {
     error: error,
     warning: warning,
     info: info,
     tooltipPosition: "top",
     tabIndex: 0,
     ml: 1
-  }), subTitle && size === "large" && /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionSubTitle, null, subTitle))), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionIcon, {
+  }), subTitle && size === "large" && variant === "standard" && /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionSubTitle, null, subTitle))), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionIcon, {
     "data-element": "accordion-icon",
-    type: iconType,
+    type: iconType || getIconType(),
     isExpanded: isExpanded,
-    iconAlign: iconAlign
+    iconAlign: iconAlign || (variant === "standard" ? "right" : "left")
   })), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionContentContainer, {
     isExpanded: isExpanded,
     maxHeight: contentHeight
@@ -124,7 +141,8 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
     id: contentId,
     "aria-labelledby": headerId,
     ref: accordionContent,
-    disableContentPadding: disableContentPadding
+    disableContentPadding: disableContentPadding,
+    variant: variant
   }, children)));
 });
 Accordion.propTypes = {
@@ -448,7 +466,7 @@ Accordion.propTypes = {
     }), _propTypes.default.string])
   }),
   "iconAlign": _propTypes.default.oneOf(["left", "right"]),
-  "iconType": _propTypes.default.oneOf(["chevron_down", "dropdown"]),
+  "iconType": _propTypes.default.oneOf(["chevron_down_thick", "chevron_down", "dropdown"]),
   "id": _propTypes.default.string,
   "index": _propTypes.default.number,
   "info": _propTypes.default.string,
@@ -766,6 +784,7 @@ Accordion.propTypes = {
   "size": _propTypes.default.oneOf(["large", "small"]),
   "subTitle": _propTypes.default.string,
   "title": _propTypes.default.node,
+  "variant": _propTypes.default.oneOf(["standard", "subtle"]),
   "warning": _propTypes.default.string,
   "width": _propTypes.default.string
 };

package/lib/components/accordion/accordion.style.d.ts

@@ -1,18 +1,21 @@
 /// <reference types="react" />
 declare const StyledAccordionGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface StyledAccordionContainerProps {
-    /** Toggles left and right borders */
+    /** Toggles left and right borders, set to none when variant is subtle */
     borders?: "default" | "full" | "none";
-    /** Renders the accordion heading in the style of a tertiary button */
+    /** (Deprecated) Renders the accordion heading in the style of a tertiary button */
     buttonHeading?: boolean;
-    /** Sets background as white or transparent */
+    /** (Deprecated) Sets background as white or transparent, set to transparent when variant is subtle */
     scheme?: "white" | "transparent";
     /** Sets accordion width */
     width?: string;
+    /** Sets accordion variant */
+    variant?: "standard" | "subtle";
 }
 declare const StyledAccordionContainer: import("styled-components").StyledComponent<"div", any, StyledAccordionContainerProps, never>;
 interface StyledAccordionTitleProps {
     size?: "large" | "small";
+    variant?: "standard" | "subtle";
 }
 declare const StyledAccordionTitle: import("styled-components").StyledComponent<"h3", any, StyledAccordionTitleProps, never>;
 declare const StyledAccordionSubTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
@@ -32,6 +35,8 @@ interface StyledAccordionTitleContainerProps {
     hasButtonProps?: boolean;
     iconAlign?: "left" | "right";
     size?: "large" | "small";
+    isExpanded?: boolean;
+    variant?: "standard" | "subtle";
 }
 declare const StyledAccordionTitleContainer: import("styled-components").StyledComponent<"div", any, StyledAccordionTitleContainerProps, never>;
 export interface StyledAccordionContentContainerProps {
@@ -41,6 +46,7 @@ export interface StyledAccordionContentContainerProps {
 declare const StyledAccordionContentContainer: import("styled-components").StyledComponent<"div", any, StyledAccordionContentContainerProps, never>;
 export interface StyledAccordionContentProps {
     disableContentPadding?: boolean;
+    variant?: "standard" | "subtle";
 }
 declare const StyledAccordionContent: import("styled-components").StyledComponent<"div", any, StyledAccordionContentProps, never>;
 export { StyledAccordionGroup, StyledAccordionContainer, StyledAccordionHeadingsContainer, StyledAccordionSubTitle, StyledAccordionTitleContainer, StyledAccordionTitle, StyledAccordionIcon, StyledAccordionContent, StyledAccordionContentContainer, };

package/lib/components/accordion/accordion.style.js

@@ -20,8 +20,9 @@ const StyledAccordionContainer = exports.StyledAccordionContainer = _styledCompo
   ${_styledSystem.space}
   display: flex;
   align-items: ${({
-  buttonHeading
-}) => buttonHeading ? "flex-start" : "stretch"};
+  buttonHeading,
+  variant
+}) => buttonHeading || variant === "subtle" ? "flex-start" : "stretch"};
   justify-content: center;
   flex-direction: column;
   box-sizing: border-box;
@@ -30,8 +31,9 @@ const StyledAccordionContainer = exports.StyledAccordionContainer = _styledCompo
 }) => width || "100%"};
   color: var(--colorsUtilityYin090);
   background-color: ${({
-  scheme
-}) => scheme === "white" ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityMajorTransparent)"};
+  scheme,
+  variant
+}) => scheme === "white" && variant !== "subtle" ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityMajorTransparent)"};
   border: 1px solid var(--colorsUtilityMajor100);
   ${({
   borders
@@ -45,19 +47,22 @@ const StyledAccordionContainer = exports.StyledAccordionContainer = _styledCompo
       border: none;
     `}
 
-  & + & {
-    margin-top: -1px;
-    border-top: 1px solid var(--colorsUtilityMajor100);
-    border-bottom: 1px solid var(--colorsUtilityMajor100);
-  }
+  ${({
+  variant
+}) => variant !== "subtle" && (0, _styledComponents.css)`
+      & + & {
+        margin-top: -1px;
+        border-top: 1px solid var(--colorsUtilityMajor100);
+        border-bottom: 1px solid var(--colorsUtilityMajor100);
+      }
+    `}
 `;
 const StyledAccordionTitle = exports.StyledAccordionTitle = _styledComponents.default.h3`
   font-size: ${({
-  size
-}) => size === "small" ? "14" : "20"}px;
-  font-weight: ${({
-  size
-}) => size === "small" ? 700 : 900};
+  size,
+  variant
+}) => size === "small" || variant === "subtle" ? "var(--fontSizes200)" : "var(--fontSizes400)"};
+  font-weight: 700;
   line-height: 1;
   user-select: none;
   margin: 0;
@@ -67,15 +72,18 @@ const StyledAccordionSubTitle = exports.StyledAccordionSubTitle = _styledCompone
 `;
 const StyledAccordionIcon = exports.StyledAccordionIcon = (0, _styledComponents.default)(_icon.default)`
   transition: transform 0.3s;
+  transform: rotate(0deg);
   margin-right: ${({
   iconAlign
 }) => iconAlign === "left" ? "var(--spacing200)" : "var(--spacing000)"};
+
   ${({
   isExpanded,
   iconAlign
 }) => {
-  return !isExpanded && (iconAlign === "right" ? "transform: rotate(90deg)" : "transform: rotate(-90deg)");
+  return isExpanded && (iconAlign === "right" ? "transform: rotate(180deg)" : "transform: rotate(-180deg)");
 }};
+
   color: var(--colorsActionMinor500);
 `;
 const StyledAccordionHeadingsContainer = exports.StyledAccordionHeadingsContainer = _styledComponents.default.div`
@@ -113,7 +121,9 @@ const StyledAccordionTitleContainer = exports.StyledAccordionTitleContainer = _s
   iconAlign,
   size,
   hasButtonProps,
-  theme
+  theme,
+  isExpanded,
+  variant
 }) => (0, _styledComponents.css)`
     padding: ${size === "small" ? "var(--spacing200)" : "var(--spacing300)"};
     ${_styledSystem.space}
@@ -133,7 +143,25 @@ const StyledAccordionTitleContainer = exports.StyledAccordionTitleContainer = _s
       ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
     }
 
-    ${!buttonHeading && (0, _styledComponents.css)`
+    ${variant === "subtle" && (0, _styledComponents.css)`
+      color: var(--colorsActionMajor500);
+      padding: var(--spacing025);
+      margin-bottom: ${isExpanded && "var(--spacing200)"};
+
+      ${StyledAccordionIcon} {
+        color: var(--colorsActionMajor500);
+        ${iconAlign === "left" && "margin-right: var(--spacing050)"};
+      }
+
+      :hover {
+        color: var(--colorsActionMajor600);
+        ${StyledAccordionIcon} {
+          color: var(--colorsActionMajor600);
+        }
+      }
+    `}
+
+    ${!buttonHeading && variant !== "subtle" && (0, _styledComponents.css)`
       &:hover {
         background-color: var(--colorsUtilityMajor050);
       }
@@ -194,7 +222,7 @@ const StyledAccordionContentContainer = exports.StyledAccordionContentContainer
 `;
 const StyledAccordionContent = exports.StyledAccordionContent = _styledComponents.default.div`
   padding: var(--spacing300);
-  padding-top: 0;
+  padding-top: var(--spacing100);
   overflow: hidden;
 
   ${({
@@ -202,6 +230,14 @@ const StyledAccordionContent = exports.StyledAccordionContent = _styledComponent
 }) => disableContentPadding && (0, _styledComponents.css)`
       padding: 0;
     `}
+
+  ${({
+  variant
+}) => variant === "subtle" && (0, _styledComponents.css)`
+      margin-left: var(--spacing150);
+      padding: var(--spacing100) var(--spacing200) var(--spacing300);
+      border-left: 2px solid var(--colorsUtilityMajor100);
+    `}
 `;
 StyledAccordionGroup.defaultProps = {
   theme: _themes.baseTheme

package/lib/components/box/box.component.d.ts

@@ -45,6 +45,8 @@ export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, Omit<Gr
     backgroundColor?: string;
     /** Set the opacity attribute of the Box component */
     opacity?: string | number;
+    /** Set the container to be hidden from screen readers */
+    "aria-hidden"?: "true" | "false";
 }
 export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
 export default Box;

package/lib/components/box/box.component.js

@@ -31,6 +31,7 @@ const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
   borderRadius,
   color,
   opacity,
+  "aria-hidden": ariaHidden,
   ...rest
 }, ref) => {
   return /*#__PURE__*/_react.default.createElement(_box.default, _extends({
@@ -51,7 +52,8 @@ const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
     boxShadow: boxShadow,
     borderRadius: borderRadius,
     color: color,
-    opacity: opacity
+    opacity: opacity,
+    "aria-hidden": ariaHidden
   }, (0, _tags.default)(dataComponent, rest), (0, _utils.filterStyledSystemMarginProps)(rest), (0, _utils.filterStyledSystemPaddingProps)(rest), (0, _utils.filterStyledSystemFlexboxProps)(rest), (0, _utils.filterStyledSystemGridProps)(rest), (0, _utils.filterStyledSystemLayoutProps)(rest)), children);
 });
 Box.propTypes = {
@@ -358,6 +360,7 @@ Box.propTypes = {
     "trimStart": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   })]),
+  "aria-hidden": _propTypes.default.oneOf(["false", "true"]),
   "as": _propTypes.default.oneOfType([_propTypes.default.oneOf(["a", "abbr", "address", "animate", "animateMotion", "animateTransform", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "circle", "cite", "clipPath", "code", "col", "colgroup", "data", "datalist", "dd", "defs", "del", "desc", "details", "dfn", "dialog", "div", "dl", "dt", "ellipse", "em", "embed", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "fieldset", "figcaption", "figure", "filter", "footer", "foreignObject", "form", "g", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "line", "linearGradient", "link", "main", "map", "mark", "marker", "mask", "menu", "menuitem", "meta", "metadata", "meter", "mpath", "nav", "noindex", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "path", "pattern", "picture", "polygon", "polyline", "pre", "progress", "q", "radialGradient", "rect", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "slot", "small", "source", "span", "stop", "strong", "style", "sub", "summary", "sup", "svg", "switch", "symbol", "table", "tbody", "td", "template", "text", "textarea", "textPath", "tfoot", "th", "thead", "time", "title", "tr", "track", "tspan", "u", "ul", "use", "var", "video", "view", "wbr", "webview"]), _propTypes.default.func, _propTypes.default.shape({
     "childContextTypes": _propTypes.default.object,
     "contextType": _propTypes.default.shape({