carbon-react 126.7.1 → 126.8.0

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/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,

package/esm/components/time/time.style.js

@@ -10,7 +10,7 @@ export const StyledHintText = styled.div`
     content: " ";
   }
 
-  margin-top: 0px;
+  margin-top: var(--spacing000);
   margin-bottom: var(--spacing150);
   color: ${({
   isDisabled

package/lib/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/lib/components/button-toggle/button-toggle-group/button-toggle-group.component.js

@@ -16,6 +16,7 @@ var _tooltipProvider = require("../../../__internal__/tooltip-provider");
 var _inputBehaviour = require("../../../__internal__/input-behaviour");
 var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
+var _carbonProvider = require("../../carbon-provider/carbon-provider.component");
 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; }
@@ -27,7 +28,8 @@ const ButtonToggleGroupContext = exports.ButtonToggleGroupContext = /*#__PURE__*
   handleKeyDown: /* istanbul ignore next */() => {},
   pressedButtonValue: undefined,
   allowDeselect: false,
-  isInGroup: false
+  isInGroup: false,
+  isDisabled: false
 });
 const ButtonToggleGroup = ({
   children,
@@ -37,6 +39,7 @@ const ButtonToggleGroup = ({
   label,
   labelHelp,
   labelSpacing,
+  inputHint,
   inputWidth,
   fullWidth,
   labelInline,
@@ -50,6 +53,7 @@ const ButtonToggleGroup = ({
   helpAriaLabel,
   id,
   allowDeselect,
+  disabled,
   className,
   ...props
 }) => {
@@ -68,6 +72,10 @@ const ButtonToggleGroup = ({
     _logger.default.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
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
+  const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
   const onButtonClick = buttonValue => {
     let newValue = buttonValue;
     const currentValue = value || pressedButtonValue;
@@ -121,18 +129,19 @@ const ButtonToggleGroup = ({
     helpAriaLabel: helpAriaLabel
   }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _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
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(ButtonToggleGroupContext.Provider, {
     value: {
       onButtonClick,
@@ -142,10 +151,13 @@ const ButtonToggleGroup = ({
       name,
       allowDeselect,
       isInGroup: true,
+      isDisabled: disabled,
       firstButton,
       childButtonCallbackRef
     }
-  }, /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.StyledButtonToggleGroupWrapper, {
+  }, inputHint && /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.StyledHintText, {
+    isDisabled: disabled
+  }, inputHint), /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.StyledButtonToggleGroupWrapper, {
     labelInline: labelInline,
     ref: wrapperRef
   }, /*#__PURE__*/_react.default.createElement(_buttonToggleGroup.default, _extends({}, label ? {
@@ -159,9 +171,9 @@ const ButtonToggleGroup = ({
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
-    id: id
-  }, (0, _utils.filterStyledSystemMarginProps)(props), {
-    className: className
+    id: id,
+    className: className,
+    disabled: disabled
   }), children))))));
 };
 ButtonToggleGroup.displayName = "ButtonToggleGroup";

package/lib/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/lib/components/button-toggle/button-toggle-group/button-toggle-group.style.js

@@ -3,28 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledButtonToggleGroupWrapper = void 0;
+exports.default = exports.StyledHintText = exports.StyledButtonToggleGroupWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _themes = require("../../../style/themes");
 var _buttonToggle = require("../button-toggle.style");
 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; }
-const StyledButtonToggleGroupWrapper = exports.StyledButtonToggleGroupWrapper = _styledComponents.default.div`
-  ${({
-  labelInline
-}) => labelInline && (0, _styledComponents.css)`
-      display: flex;
-    `}
-`;
 const StyledButtonToggleGroup = _styledComponents.default.div`
   ${_styledSystem.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 && (0, _styledComponents.css)`
+      cursor: not-allowed;
+      box-shadow: inset 0px 0px 0px 1px var(--colorsActionDisabled600);
+    `}
 
   ${({
   fullWidth
 }) => fullWidth && (0, _styledComponents.css)`
+      width: 100%;
       ${_buttonToggle.StyledButtonToggle} {
         width: 100%;
       }
@@ -39,6 +47,28 @@ const StyledButtonToggleGroup = _styledComponents.default.div`
       width: ${`${inputWidth}%`};
     `}
 `;
+const StyledButtonToggleGroupWrapper = exports.StyledButtonToggleGroupWrapper = _styledComponents.default.div`
+  ${({
+  labelInline
+}) => labelInline && (0, _styledComponents.css)`
+      display: flex;
+      ${StyledButtonToggleGroup} {
+        flex-wrap: nowrap;
+      }
+    `}
+`;
+const StyledHintText = exports.StyledHintText = _styledComponents.default.div`
+  ::after {
+    content: " ";
+  }
+
+  margin-top: var(--spacing000);
+  margin-bottom: var(--spacing150);
+  color: ${({
+  isDisabled
+}) => isDisabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin055)"};
+  font-size: 14px;
+`;
 StyledButtonToggleGroup.defaultProps = {
   theme: _themes.baseTheme
 };

package/lib/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/lib/components/button-toggle/button-toggle.component.js

@@ -20,6 +20,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 let deprecateCheckedWarnTriggered = false;
 let deprecateNameWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
+let deprecateGroupedWarnTriggered = false;
 const ButtonToggle = ({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -50,6 +51,10 @@ const ButtonToggle = ({
     _logger.default.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.default.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 = (0, _react.useRef)(null);
   const {
@@ -66,6 +71,7 @@ const ButtonToggle = ({
     name: groupName,
     allowDeselect,
     isInGroup,
+    isDisabled,
     firstButton,
     childButtonCallbackRef
   } = (0, _react.useContext)(_buttonToggleGroup.ButtonToggleGroupContext);
@@ -138,7 +144,7 @@ const ButtonToggle = ({
     buttonIcon: buttonIcon,
     buttonIconSize: buttonIconSize,
     "data-element": "button-toggle-button",
-    disabled: disabled,
+    disabled: disabled || isDisabled,
     id: inputGuid.current,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,

package/lib/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/lib/components/button-toggle/button-toggle.style.js

@@ -12,9 +12,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
 const heightConfig = exports.heightConfig = {
-  small: 32,
-  medium: 40,
-  large: 48
+  small: 24,
+  medium: 32,
+  large: 40
 };
 const fontSizeConfig = exports.fontSizeConfig = {
   small: 14,
@@ -22,17 +22,17 @@ const fontSizeConfig = exports.fontSizeConfig = {
   large: 16
 };
 const paddingConfig = exports.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
 };
@@ -55,6 +55,17 @@ const StyledButtonToggle = exports.StyledButtonToggle = _styledComponents.defaul
   box-sizing: border-box;
   max-width: 100%;
 
+  font-weight: 700;
+  background-color: transparent;
+  cursor: pointer;
+  text-align: start;
+  color: var(--colorsActionMinor500);
+  border: none;
+
+  ${_icon.default} {
+    color: var(--colorsActionMinor500);
+  }
+
   ${({
   size
 }) => (0, _styledComponents.css)`
@@ -62,14 +73,17 @@ const StyledButtonToggle = exports.StyledButtonToggle = _styledComponents.defaul
     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" && (0, _styledComponents.css)`
+      height: ${heightLargeIconConfig[size]}px;
+      padding: 0 ${paddingLargeIconConfig[size]}px;
+      flex-direction: column;
+    `}  
+    
   &:focus {
     ${({
   theme
@@ -77,9 +91,22 @@ const StyledButtonToggle = exports.StyledButtonToggle = _styledComponents.defaul
     z-index: 100;
   }
 
+  &:not(:disabled):hover {
+    background-color: var(--colorsActionMinor600);
+    color: var(--colorsActionMinorYang100);
+    ${_icon.default} {
+      color: var(--colorsActionMinorYang100);
+    }
+  }
+
   &[aria-pressed="true"] {
-    background-color: var(--colorsActionMinor300);
-    color: var(--colorsActionMinor600);
+    background-color: var(--colorsActionMinor850);
+    color: var(--colorsActionMinorYang100);
+
+    ${_icon.default} {
+      color: var(--colorsActionMinorYang100);
+    }
+
     ${({
   allowDeselect
 }) => !allowDeselect && (0, _styledComponents.css)`
@@ -87,72 +114,26 @@ const StyledButtonToggle = exports.StyledButtonToggle = _styledComponents.defaul
       `}
   }
 
-  ${_icon.default} {
-    width: 16px;
-    height: 16px;
-    color: var(--colorsActionMinor500);
-  }
-
-  ${({
-  buttonIcon,
-  buttonIconSize,
-  size
-}) => buttonIcon && buttonIconSize === "large" && (0, _styledComponents.css)`
-      height: ${heightLargeIconConfig[size]}px;
-      padding: 0 ${paddingLargeIconConfig[size]}px;
-      flex-direction: column;
-    `}
   ${({
   disabled
 }) => disabled && (0, _styledComponents.css)`
+      cursor: not-allowed;
+
       & {
-        border-color: var(--colorsActionDisabled500);
         color: var(--colorsActionMinorYin030);
         ${_icon.default} {
           color: var(--colorsActionMinorYin030);
         }
       }
-      cursor: not-allowed;
-    `}
-
-      & ${_icon.default} {
-    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);
-    ${_icon.default} {
-      color: var(--colorsActionMinorYang100);
-    }
-  }
-
-  &:not(:disabled):hover {
-    background-color: var(--colorsActionMinor600);
-    color: var(--colorsActionMinorYang100);
-
-    ${_icon.default} {
-      color: var(--colorsActionMinorYang100);
-    }
-  }
+      &[aria-pressed="true"] {
+        cursor: not-allowed;
+        background-color: var(--colorsActionMinorYin030);
+      }
+    `}
 `;
 const iconFontSizes = {
-  smallIcon: 16,
+  smallIcon: 20,
   largeIcon: 32
 };
 const StyledButtonToggleIcon = exports.StyledButtonToggleIcon = _styledComponents.default.div`
@@ -216,10 +197,6 @@ const StyledButtonToggleWrapper = exports.StyledButtonToggleWrapper = _styledCom
       `}
     `}
 
-  &:not(:first-of-type) {
-    margin-left: 8px;
-  }
-
   ${({
   grouped
 }) => grouped && (0, _styledComponents.css)`

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

@@ -8,7 +8,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _guid = _interopRequireDefault(require("../../../../__internal__/utils/helpers/guid"));
 var _useLocale = _interopRequireDefault(require("../../../../hooks/__internal__/useLocale"));
-var _timeToggle = _interopRequireDefault(require("./time-toggle.style"));
 var _buttonToggle = require("../../../button-toggle");
 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); }
@@ -36,25 +35,21 @@ const Toggle = ({
       onChange(selectedButtonValue);
     }
   }, [toggleValue, onChange]);
-  return /*#__PURE__*/_react.default.createElement(_timeToggle.default, _extends({}, wrapperProps, {
+  return /*#__PURE__*/_react.default.createElement(_buttonToggle.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.default.createElement(_buttonToggle.ButtonToggle, _extends({}, amToggleProps, {
     "data-component": "am-button-toggle",
-    grouped: true,
     value: "AM",
-    size: size,
-    disabled: disabled
+    size: size
   }), amText), /*#__PURE__*/_react.default.createElement(_buttonToggle.ButtonToggle, _extends({}, pmToggleProps, {
     "data-component": "pm-button-toggle",
-    grouped: true,
     value: "PM",
-    size: size,
-    disabled: disabled
+    size: size
   }), pmText));
 };
 Toggle.displayName = "Toggle";

package/lib/components/time/time.component.js

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

package/lib/components/time/time.style.js

@@ -17,7 +17,7 @@ const StyledHintText = exports.StyledHintText = _styledComponents.default.div`
     content: " ";
   }
 
-  margin-top: 0px;
+  margin-top: var(--spacing000);
   margin-bottom: var(--spacing150);
   color: ${({
   isDisabled

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "126.7.1",
+  "version": "126.8.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

package/esm/components/time/__internal__/time-toggle/time-toggle.style.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-declare const _default: import("styled-components").StyledComponent<{
-    ({ 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 }: import("../../../button-toggle").ButtonToggleGroupProps): import("react").JSX.Element;
-    displayName: string;
-}, any, {
-    disabled?: boolean | undefined;
-}, never>;
-export default _default;

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

@@ -1,19 +0,0 @@
-import styled, { css } from "styled-components";
-import { ButtonToggleGroup } from "../../../button-toggle";
-
-// TODO this can be removed as part of FE-6335
-export default styled(ButtonToggleGroup)`
-  ${({
-  disabled
-}) => disabled && css`
-      opacity: 0.3;
-
-      [aria-pressed="true"] {
-        cursor: not-allowed;
-        :hover {
-          background-color: transparent;
-          box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500);
-        }
-      }
-    `}
-`;

package/lib/components/time/__internal__/time-toggle/time-toggle.style.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-declare const _default: import("styled-components").StyledComponent<{
-    ({ 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 }: import("../../../button-toggle").ButtonToggleGroupProps): import("react").JSX.Element;
-    displayName: string;
-}, any, {
-    disabled?: boolean | undefined;
-}, never>;
-export default _default;

package/lib/components/time/__internal__/time-toggle/time-toggle.style.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _buttonToggle = require("../../../button-toggle");
-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; }
-// TODO this can be removed as part of FE-6335
-var _default = exports.default = (0, _styledComponents.default)(_buttonToggle.ButtonToggleGroup)`
-  ${({
-  disabled
-}) => disabled && (0, _styledComponents.css)`
-      opacity: 0.3;
-
-      [aria-pressed="true"] {
-        cursor: not-allowed;
-        :hover {
-          background-color: transparent;
-          box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500);
-        }
-      }
-    `}
-`;