carbon-react 126.7.1 → 126.9.0

package/esm/__internal__/input/input-presentation.component.d.ts

@@ -25,10 +25,12 @@ export interface CommonInputPresentationProps extends ValidationProps {
     hasIcon?: boolean;
     /** Specify a custom border radius. Any valid border-radius design token, or an array of border-radius design tokens. */
     borderRadius?: BorderRadiusType | BorderRadiusType[];
+    /** Renders with transparent borders. This will not effect focus styling or validation borders  */
+    hideBorders?: boolean;
 }
 export interface InputPresentationProps extends CommonInputPresentationProps {
     /** Content to be rendered before the input */
     positionedChildren?: React.ReactNode;
 }
-declare const InputPresentation: ({ align, borderRadius, children, disabled, error, hasIcon, info, inputWidth, maxWidth, positionedChildren, prefix, readOnly, size, warning, }: InputPresentationProps) => JSX.Element;
+declare const InputPresentation: ({ align, borderRadius, children, disabled, error, hasIcon, hideBorders, info, inputWidth, maxWidth, positionedChildren, prefix, readOnly, size, warning, }: InputPresentationProps) => JSX.Element;
 export default InputPresentation;

package/esm/__internal__/input/input-presentation.component.js

@@ -10,6 +10,7 @@ const InputPresentation = ({
   disabled,
   error,
   hasIcon,
+  hideBorders = false,
   info,
   inputWidth,
   maxWidth,
@@ -59,7 +60,8 @@ const InputPresentation = ({
     info: info,
     validationRedesignOptIn: validationRedesignOptIn,
     hasIcon: hasIcon,
-    borderRadius: borderRadius
+    borderRadius: borderRadius,
+    hideBorders: hideBorders
   }, children));
 };
 InputPresentation.propTypes = {
@@ -69,6 +71,7 @@ InputPresentation.propTypes = {
   "disabled": PropTypes.bool,
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "hasIcon": PropTypes.bool,
+  "hideBorders": PropTypes.bool,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inputWidth": PropTypes.number,
   "maxWidth": PropTypes.string,

package/esm/__internal__/input/input-presentation.style.d.ts

@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
 import { InputContextProps } from "../input-behaviour";
 import { CarbonProviderProps } from "../../components/carbon-provider";
 export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, never>;
-declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "prefix" | "align" | "readOnly" | "size" | "borderRadius" | "hasIcon"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
+declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "prefix" | "align" | "readOnly" | "size" | "borderRadius" | "hasIcon" | "hideBorders"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
 export default InputPresentationStyle;

package/esm/__internal__/input/input-presentation.style.js

@@ -44,7 +44,9 @@ function stylingForValidations({
 const InputPresentationStyle = styled.div`
   align-items: stretch;
   background: var(--colorsUtilityYang100);
-  border: 1px solid var(--colorsUtilityMajor300);
+  ${({
+  hideBorders
+}) => hideBorders ? `border: 1px solid transparent;` : `border: 1px solid var(--colorsUtilityMajor300);`}
   box-sizing: border-box;
   cursor: text;
   display: flex;
@@ -76,10 +78,11 @@ const InputPresentationStyle = styled.div`
     `}
 
   ${({
-  disabled
+  disabled,
+  hideBorders
 }) => disabled && css`
       background: var(--colorsUtilityDisabled400);
-      border-color: var(--colorsUtilityDisabled600);
+      border-color: ${hideBorders ? `transparent` : `var(--colorsUtilityDisabled600)`};
       cursor: not-allowed;
     `}
 
@@ -96,10 +99,11 @@ const InputPresentationStyle = styled.div`
   ${stylingForValidations}
 
   ${({
-  readOnly
+  readOnly,
+  hideBorders
 }) => readOnly && css`
       background-color: var(--colorsUtilityReadOnly400);
-      border-color: var(--colorsUtilityReadOnly600);
+      border-color: ${hideBorders ? `transparent` : `var(--colorsUtilityReadOnly600)`};
     `}
 
   ${({

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.d.ts

@@ -18,17 +18,19 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     "aria-label"?: string;
     /** Text for the visible label of the button group. */
     label?: string;
-    /** Text for the label's help tooltip. */
+    /** [Legacy] Text for the label's help tooltip. */
     labelHelp?: React.ReactNode;
-    /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+    /** [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
     labelSpacing?: 1 | 2;
+    /** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
+    inputHint?: React.ReactNode;
     /** The percentage width of the ButtonToggleGroup. */
     inputWidth?: number | string;
-    /** The text for the field help. */
+    /** [Legacy] The text for the field help. */
     fieldHelp?: string;
-    /** Sets the field help to inline. */
+    /** [Legacy] Sets the field help to inline. */
     fieldHelpInline?: boolean;
-    /** Sets the label to be inline. */
+    /** [Legacy] Sets the label to be inline. */
     labelInline?: boolean;
     /** The percentage width of the label. */
     labelWidth?: number;
@@ -38,10 +40,12 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string, name?: string) => void;
     /** Determines which child button is selected when the component is used as a controlled component */
     value?: string;
-    /** Aria label for rendered help component */
+    /** [Legacy] Aria label for rendered help component */
     helpAriaLabel?: string;
-    /** set this to true to allow the buttons within the group to be deselected when already selected, leaving no selected button */
+    /** Allow buttons within the group to be deselected when already selected, leaving no selected button */
     allowDeselect?: boolean;
+    /** Disable all user interaction. */
+    disabled?: boolean;
     /**
      * @private @ignore
      * Set a class on the component
@@ -56,12 +60,13 @@ declare type ButtonToggleGroupContextType = {
     name?: string;
     allowDeselect?: boolean;
     isInGroup: boolean;
+    isDisabled?: boolean;
     firstButton?: HTMLButtonElement;
     childButtonCallbackRef?: (button: HTMLButtonElement | null) => void;
 };
 export declare const ButtonToggleGroupContext: React.Context<ButtonToggleGroupContextType>;
 declare const ButtonToggleGroup: {
-    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, disabled, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.js

@@ -1,16 +1,17 @@
 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); }
-import React, { createContext, useMemo, useState, useRef } from "react";
+import React, { createContext, useMemo, useState, useRef, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import FormField from "../../../__internal__/form-field";
 import guid from "../../../__internal__/utils/helpers/guid";
-import StyledButtonToggleGroup, { StyledButtonToggleGroupWrapper } from "./button-toggle-group.style";
+import StyledButtonToggleGroup, { StyledButtonToggleGroupWrapper, StyledHintText } from "./button-toggle-group.style";
 import { ButtonToggle } from "..";
 import { filterStyledSystemMarginProps } from "../../../style/utils";
 import { TooltipProvider } from "../../../__internal__/tooltip-provider";
 import { InputGroupBehaviour } from "../../../__internal__/input-behaviour";
 import Logger from "../../../__internal__/utils/logger";
 import Events from "../../../__internal__/utils/helpers/events";
+import { NewValidationContext } from "../../carbon-provider/carbon-provider.component";
 let deprecateNameWarnTriggered = false;
 const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
 export const ButtonToggleGroupContext = /*#__PURE__*/createContext({
@@ -18,7 +19,8 @@ export const ButtonToggleGroupContext = /*#__PURE__*/createContext({
   handleKeyDown: /* istanbul ignore next */() => {},
   pressedButtonValue: undefined,
   allowDeselect: false,
-  isInGroup: false
+  isInGroup: false,
+  isDisabled: false
 });
 const ButtonToggleGroup = ({
   children,
@@ -28,6 +30,7 @@ const ButtonToggleGroup = ({
   label,
   labelHelp,
   labelSpacing,
+  inputHint,
   inputWidth,
   fullWidth,
   labelInline,
@@ -41,6 +44,7 @@ const ButtonToggleGroup = ({
   helpAriaLabel,
   id,
   allowDeselect,
+  disabled,
   className,
   ...props
 }) => {
@@ -59,6 +63,10 @@ const ButtonToggleGroup = ({
     Logger.deprecate(`The \`name\` prop in \`ButtonToggleGroup\` component is deprecated and will soon be removed. It does not provide any functionality
       since the component can no longer be used in an uncontrolled fashion.`);
   }
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
+  const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
   const onButtonClick = buttonValue => {
     let newValue = buttonValue;
     const currentValue = value || pressedButtonValue;
@@ -112,18 +120,19 @@ const ButtonToggleGroup = ({
     helpAriaLabel: helpAriaLabel
   }, /*#__PURE__*/React.createElement(InputGroupBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({
     label: label,
-    labelHelp: labelHelp,
+    labelHelp: computeLabelPropValues(labelHelp),
     labelSpacing: labelSpacing,
-    fieldHelp: fieldHelp,
-    fieldHelpInline: fieldHelpInline,
-    labelInline: labelInline,
-    labelWidth: labelWidth,
+    fieldHelp: computeLabelPropValues(fieldHelp),
+    fieldHelpInline: computeLabelPropValues(fieldHelpInline),
+    labelInline: computeLabelPropValues(labelInline),
+    labelWidth: computeLabelPropValues(labelWidth),
     labelId: labelId.current,
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
     id: id,
-    labelAs: "span"
+    labelAs: "span",
+    disabled: disabled
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(ButtonToggleGroupContext.Provider, {
     value: {
       onButtonClick,
@@ -133,10 +142,13 @@ const ButtonToggleGroup = ({
       name,
       allowDeselect,
       isInGroup: true,
+      isDisabled: disabled,
       firstButton,
       childButtonCallbackRef
     }
-  }, /*#__PURE__*/React.createElement(StyledButtonToggleGroupWrapper, {
+  }, inputHint && /*#__PURE__*/React.createElement(StyledHintText, {
+    isDisabled: disabled
+  }, inputHint), /*#__PURE__*/React.createElement(StyledButtonToggleGroupWrapper, {
     labelInline: labelInline,
     ref: wrapperRef
   }, /*#__PURE__*/React.createElement(StyledButtonToggleGroup, _extends({}, label ? {
@@ -150,9 +162,9 @@ const ButtonToggleGroup = ({
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
-    id: id
-  }, filterStyledSystemMarginProps(props), {
-    className: className
+    id: id,
+    className: className,
+    disabled: disabled
   }), children))))));
 };
 ButtonToggleGroup.displayName = "ButtonToggleGroup";

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.style.d.ts

@@ -1,6 +1,9 @@
 import { ButtonToggleGroupProps } from ".";
-declare type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth">;
+declare type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth" | "disabled">;
 declare type StyledButtonToggleGroupWrapperProps = Pick<ButtonToggleGroupProps, "labelInline">;
-export declare const StyledButtonToggleGroupWrapper: import("styled-components").StyledComponent<"div", any, StyledButtonToggleGroupWrapperProps, never>;
 declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, StyledButtonToggleGroupProps, never>;
+export declare const StyledButtonToggleGroupWrapper: import("styled-components").StyledComponent<"div", any, StyledButtonToggleGroupWrapperProps, never>;
+export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {
+    isDisabled?: boolean | undefined;
+}, never>;
 export default StyledButtonToggleGroup;

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.style.js

@@ -2,21 +2,29 @@ import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import { baseTheme } from "../../../style/themes";
 import { StyledButtonToggle, StyledButtonToggleWrapper } from "../button-toggle.style";
-export const StyledButtonToggleGroupWrapper = styled.div`
-  ${({
-  labelInline
-}) => labelInline && css`
-      display: flex;
-    `}
-`;
 const StyledButtonToggleGroup = styled.div`
   ${margin}
 
   display: flex;
+  box-shadow: inset 0px 0px 0px 1px var(--colorsActionMinor500);
+  border-radius: var(--borderRadius100);
+  padding: 4px;
+  gap: 4px;
+  width: fit-content;
+  height: fit-content;
+  flex-wrap: wrap;
+
+  ${({
+  disabled
+}) => disabled && css`
+      cursor: not-allowed;
+      box-shadow: inset 0px 0px 0px 1px var(--colorsActionDisabled600);
+    `}
 
   ${({
   fullWidth
 }) => fullWidth && css`
+      width: 100%;
       ${StyledButtonToggle} {
         width: 100%;
       }
@@ -31,6 +39,28 @@ const StyledButtonToggleGroup = styled.div`
       width: ${`${inputWidth}%`};
     `}
 `;
+export const StyledButtonToggleGroupWrapper = styled.div`
+  ${({
+  labelInline
+}) => labelInline && css`
+      display: flex;
+      ${StyledButtonToggleGroup} {
+        flex-wrap: nowrap;
+      }
+    `}
+`;
+export const StyledHintText = styled.div`
+  ::after {
+    content: " ";
+  }
+
+  margin-top: var(--spacing000);
+  margin-bottom: var(--spacing150);
+  color: ${({
+  isDisabled
+}) => isDisabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin055)"};
+  font-size: 14px;
+`;
 StyledButtonToggleGroup.defaultProps = {
   theme: baseTheme
 };

package/esm/components/button-toggle/button-toggle.component.d.ts

@@ -15,7 +15,7 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
-    /** Remove spacing from between buttons. */
+    /** DEPRECATED: Remove spacing from between buttons. */
     grouped?: boolean;
     /** An optional string by which to identify the button in an onChange handler on the parent ButtonToggleGroup. */
     name?: string;

package/esm/components/button-toggle/button-toggle.component.js

@@ -11,6 +11,7 @@ import { InputGroupContext } from "../../__internal__/input-behaviour";
 let deprecateCheckedWarnTriggered = false;
 let deprecateNameWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
+let deprecateGroupedWarnTriggered = false;
 export const ButtonToggle = ({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -41,6 +42,10 @@ export const ButtonToggle = ({
     Logger.deprecate(`The \`name\` prop in \`ButtonToggle\` component is deprecated and will soon be removed. It does not provide any functionality
       since the component can no longer be used in an uncontrolled fashion.`);
   }
+  if (grouped && !deprecateGroupedWarnTriggered) {
+    deprecateGroupedWarnTriggered = true;
+    Logger.deprecate("The `grouped` prop in `ButtonToggle` component is deprecated and will soon be removed. Spacing between buttons is no longer no removed.");
+  }
   const pressedPropValue = pressed === undefined ? checked : pressed;
   const buttonRef = useRef(null);
   const {
@@ -57,6 +62,7 @@ export const ButtonToggle = ({
     name: groupName,
     allowDeselect,
     isInGroup,
+    isDisabled,
     firstButton,
     childButtonCallbackRef
   } = useContext(ButtonToggleGroupContext);
@@ -129,7 +135,7 @@ export const ButtonToggle = ({
     buttonIcon: buttonIcon,
     buttonIconSize: buttonIconSize,
     "data-element": "button-toggle-button",
-    disabled: disabled,
+    disabled: disabled || isDisabled,
     id: inputGuid.current,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,

package/esm/components/button-toggle/button-toggle.style.d.ts

@@ -26,7 +26,7 @@ export interface StyledButtonToggleProps {
     /** ButtonToggle size */
     size: "small" | "medium" | "large";
     grouped?: boolean;
-    /** set this to true to allow the button to be deselected when already selected */
+    /** Allow button to be deselected when already selected */
     allowDeselect?: boolean;
 }
 declare const StyledButtonToggle: import("styled-components").StyledComponent<"button", any, StyledButtonToggleProps, never>;

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

@@ -3,9 +3,9 @@ import StyledIcon from "../icon/icon.style";
 import addFocusStyling from "../../style/utils/add-focus-styling";
 import baseTheme from "../../style/themes/base";
 export const heightConfig = {
-  small: 32,
-  medium: 40,
-  large: 48
+  small: 24,
+  medium: 32,
+  large: 40
 };
 export const fontSizeConfig = {
   small: 14,
@@ -13,17 +13,17 @@ export const fontSizeConfig = {
   large: 16
 };
 export const paddingConfig = {
-  small: 16,
-  medium: 24,
-  large: 32
+  small: 8,
+  medium: 8,
+  large: 12
 };
 const heightLargeIconConfig = {
-  small: 80,
-  medium: 96,
-  large: 112
+  small: 72,
+  medium: 88,
+  large: 120
 };
 const paddingLargeIconConfig = {
-  small: 32,
+  small: 24,
   medium: 40,
   large: 48
 };
@@ -46,6 +46,17 @@ const StyledButtonToggle = styled.button`
   box-sizing: border-box;
   max-width: 100%;
 
+  font-weight: 700;
+  background-color: transparent;
+  cursor: pointer;
+  text-align: start;
+  color: var(--colorsActionMinor500);
+  border: none;
+
+  ${StyledIcon} {
+    color: var(--colorsActionMinor500);
+  }
+
   ${({
   size
 }) => css`
@@ -53,14 +64,17 @@ const StyledButtonToggle = styled.button`
     padding: 0 ${paddingConfig[size]}px;
     font-size: ${fontSizeConfig[size]}px;
   `}
-  font-weight: 700;
-  background-color: transparent;
-  cursor: pointer;
-  text-align: start;
-  color: inherit;
-
-  border: 1px solid var(--colorsActionMinor500);
 
+  ${({
+  buttonIcon,
+  buttonIconSize,
+  size
+}) => buttonIcon && buttonIconSize === "large" && css`
+      height: ${heightLargeIconConfig[size]}px;
+      padding: 0 ${paddingLargeIconConfig[size]}px;
+      flex-direction: column;
+    `}  
+    
   &:focus {
     ${({
   theme
@@ -68,9 +82,22 @@ const StyledButtonToggle = styled.button`
     z-index: 100;
   }
 
+  &:not(:disabled):hover {
+    background-color: var(--colorsActionMinor600);
+    color: var(--colorsActionMinorYang100);
+    ${StyledIcon} {
+      color: var(--colorsActionMinorYang100);
+    }
+  }
+
   &[aria-pressed="true"] {
-    background-color: var(--colorsActionMinor300);
-    color: var(--colorsActionMinor600);
+    background-color: var(--colorsActionMinor850);
+    color: var(--colorsActionMinorYang100);
+
+    ${StyledIcon} {
+      color: var(--colorsActionMinorYang100);
+    }
+
     ${({
   allowDeselect
 }) => !allowDeselect && css`
@@ -78,72 +105,26 @@ const StyledButtonToggle = styled.button`
       `}
   }
 
-  ${StyledIcon} {
-    width: 16px;
-    height: 16px;
-    color: var(--colorsActionMinor500);
-  }
-
-  ${({
-  buttonIcon,
-  buttonIconSize,
-  size
-}) => buttonIcon && buttonIconSize === "large" && css`
-      height: ${heightLargeIconConfig[size]}px;
-      padding: 0 ${paddingLargeIconConfig[size]}px;
-      flex-direction: column;
-    `}
   ${({
   disabled
 }) => disabled && css`
+      cursor: not-allowed;
+
       & {
-        border-color: var(--colorsActionDisabled500);
         color: var(--colorsActionMinorYin030);
         ${StyledIcon} {
           color: var(--colorsActionMinorYin030);
         }
       }
-      cursor: not-allowed;
-    `}
-
-      & ${StyledIcon} {
-    color: var(--colorsActionMinor500);
-    :not([aria-pressed="true"]):not(:disabled):hover {
-      color: var(--colorsActionMinorYang100);
-    }
-  }
-
-  color: var(--colorsActionMinor500);
-
-  &[aria-pressed="true"]:not(:hover) {
-    box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500);
-    background-color: transparent;
-    :focus {
-      box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500),
-        0px 0px 0px var(--borderWidth300) var(--colorsSemanticFocus500),
-        0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090);
-    }
-  }
 
-  :not([aria-pressed="true"]):not(:disabled):hover {
-    color: var(--colorsActionMinorYang100);
-    background-color: var(--colorsActionMinor600);
-    ${StyledIcon} {
-      color: var(--colorsActionMinorYang100);
-    }
-  }
-
-  &:not(:disabled):hover {
-    background-color: var(--colorsActionMinor600);
-    color: var(--colorsActionMinorYang100);
-
-    ${StyledIcon} {
-      color: var(--colorsActionMinorYang100);
-    }
-  }
+      &[aria-pressed="true"] {
+        cursor: not-allowed;
+        background-color: var(--colorsActionMinorYin030);
+      }
+    `}
 `;
 const iconFontSizes = {
-  smallIcon: 16,
+  smallIcon: 20,
   largeIcon: 32
 };
 const StyledButtonToggleIcon = styled.div`
@@ -207,10 +188,6 @@ const StyledButtonToggleWrapper = styled.div`
       `}
     `}
 
-  &:not(:first-of-type) {
-    margin-left: 8px;
-  }
-
   ${({
   grouped
 }) => grouped && css`

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

@@ -99,6 +99,8 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     warning?: boolean | string;
     /** Specify a custom border radius for the component. Any valid border-radius design token, or an array of border-radius design tokens. */
     borderRadius?: BorderRadiusType | BorderRadiusType[];
+    /** Hides the borders for the component. Please note that validation and focus styling will still be applied */
+    hideBorders?: boolean;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea as OriginalTextarea };

package/esm/components/textarea/textarea.component.js

@@ -59,6 +59,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
   helpAriaLabel,
   inputRef,
   borderRadius,
+  hideBorders = false,
   ...rest
 }, ref) => {
   const {
@@ -164,7 +165,8 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     error: error,
     warning: warning,
     info: info,
-    borderRadius: borderRadius
+    borderRadius: borderRadius,
+    hideBorders: hideBorders
   }, /*#__PURE__*/React.createElement(Input, _extends({
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
@@ -335,6 +337,7 @@ Textarea.propTypes = {
   "height": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   "helpAriaLabel": PropTypes.string,
   "hidden": PropTypes.bool,
+  "hideBorders": PropTypes.bool,
   "id": PropTypes.string,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inlist": PropTypes.any,

package/esm/components/time/__internal__/time-toggle/time-toggle.component.js

@@ -3,8 +3,7 @@ import React, { useRef, useCallback } from "react";
 import PropTypes from "prop-types";
 import guid from "../../../../__internal__/utils/helpers/guid";
 import useLocale from "../../../../hooks/__internal__/useLocale";
-import ButtonToggleGroup from "./time-toggle.style";
-import { ButtonToggle } from "../../../button-toggle";
+import { ButtonToggle, ButtonToggleGroup } from "../../../button-toggle";
 const Toggle = ({
   size,
   onChange,
@@ -29,23 +28,19 @@ const Toggle = ({
   }, [toggleValue, onChange]);
   return /*#__PURE__*/React.createElement(ButtonToggleGroup, _extends({}, wrapperProps, {
     "data-component": "time-button-toggle-group",
-    m: "0px 0px 0px 8px",
+    m: "0px 0px 0px 16px",
     id: internalId.current,
     onChange: handleChange,
     value: toggleValue,
     disabled: disabled
   }), /*#__PURE__*/React.createElement(ButtonToggle, _extends({}, amToggleProps, {
     "data-component": "am-button-toggle",
-    grouped: true,
     value: "AM",
-    size: size,
-    disabled: disabled
+    size: size
   }), amText), /*#__PURE__*/React.createElement(ButtonToggle, _extends({}, pmToggleProps, {
     "data-component": "pm-button-toggle",
-    grouped: true,
     value: "PM",
-    size: size,
-    disabled: disabled
+    size: size
   }), pmText));
 };
 Toggle.displayName = "Toggle";

package/esm/components/time/time.component.js

@@ -141,7 +141,7 @@ const Time = /*#__PURE__*/React.forwardRef(({
     legendMargin: {
       mb: 0
     },
-    width: "min-content",
+    width: "fit-content",
     isRequired: required,
     isOptional: isOptional,
     isDisabled: disabled,