carbon-react 118.5.2 → 119.0.0

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

@@ -0,0 +1,157 @@
+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 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 { 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";
+let deprecateNameWarnTriggered = false;
+const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
+export const ButtonToggleGroupContext = /*#__PURE__*/createContext({
+  onButtonClick: /* istanbul ignore next */() => {},
+  handleKeyDown: /* istanbul ignore next */() => {},
+  pressedButtonValue: undefined,
+  allowDeselect: false,
+  isInGroup: false
+});
+const ButtonToggleGroup = _ref => {
+  let {
+    children,
+    fieldHelp,
+    fieldHelpInline,
+    "aria-label": ariaLabel,
+    label,
+    labelHelp,
+    labelSpacing,
+    inputWidth,
+    fullWidth,
+    labelInline,
+    labelWidth,
+    labelAlign,
+    name,
+    onChange,
+    value,
+    "data-component": dataComponent = "button-toggle-group",
+    "data-element": dataElement,
+    "data-role": dataRole,
+    helpAriaLabel,
+    id,
+    allowDeselect,
+    ...props
+  } = _ref;
+  const hasCorrectItemStructure = useMemo(() => {
+    const incorrectChild = React.Children.toArray(children).find(child => {
+      return ! /*#__PURE__*/React.isValidElement(child) || child.type.displayName !== ButtonToggle.displayName;
+    });
+    return !incorrectChild;
+  }, [children]);
+  !hasCorrectItemStructure ? process.env.NODE_ENV !== "production" ? invariant(false, `\`ButtonToggleGroup\` only accepts children of type \`${ButtonToggle.displayName}\``) : invariant(false) : void 0;
+  const labelId = useRef(guid());
+  const wrapperRef = useRef(null);
+  const [pressedButtonValue, setPressedButtonValue] = useState();
+  if (name && !deprecateNameWarnTriggered) {
+    deprecateNameWarnTriggered = true;
+    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 onButtonClick = buttonValue => {
+    let newValue = buttonValue;
+    const currentValue = value || pressedButtonValue;
+    if (allowDeselect && currentValue === buttonValue) {
+      newValue = undefined;
+    }
+    setPressedButtonValue(newValue);
+  };
+  const getInnerButtons = () => wrapperRef.current?.querySelectorAll(BUTTON_TOGGLE_SELECTOR);
+  // needs to be state not ref, so that a rerender is triggered
+  const [firstButton, setFirstButton] = useState();
+  const handleKeyDown = ev => {
+    const innerButtons = getInnerButtons();
+    // istanbul ignore if
+    if (!innerButtons || !document.activeElement) {
+      return;
+    }
+    const focusedIndex = Array.from(innerButtons).indexOf(document.activeElement);
+    let nextElement;
+    if (Events.isLeftKey(ev)) {
+      const nextIndex = focusedIndex === 0 ? innerButtons.length - 1 : focusedIndex - 1;
+      nextElement = innerButtons[nextIndex];
+    } else if (Events.isRightKey(ev)) {
+      const nextIndex = (focusedIndex + 1) % innerButtons.length;
+      nextElement = innerButtons[nextIndex];
+    }
+    // istanbul ignore else
+    if (nextElement instanceof HTMLButtonElement) {
+      nextElement.focus();
+    }
+  };
+  const childButtonCallbackRef = button => {
+    // setTimeout needed as otherwise innerButtons aren't picked up by the query even though the ref is attached
+    setTimeout(() => {
+      // guard needed to avoid warnings about setting state on an unmounted component - the callback ref will
+      // get called with null when the component is about to be unmounted, and it has been unmounted by the time
+      // the setTimeout completes
+      if (button) {
+        const innerButtons = getInnerButtons();
+        if (!innerButtons) {
+          setFirstButton(undefined);
+        } else if (button === innerButtons[0]) {
+          setFirstButton(button);
+        }
+      }
+    }, 0);
+  };
+  return /*#__PURE__*/React.createElement(TooltipProvider, {
+    helpAriaLabel: helpAriaLabel
+  }, /*#__PURE__*/React.createElement(InputGroupBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({
+    label: label,
+    labelHelp: labelHelp,
+    labelSpacing: labelSpacing,
+    fieldHelp: fieldHelp,
+    fieldHelpInline: fieldHelpInline,
+    labelInline: labelInline,
+    labelWidth: labelWidth,
+    labelAlign: labelAlign,
+    labelId: labelId.current,
+    "data-component": dataComponent,
+    "data-role": dataRole,
+    "data-element": dataElement,
+    id: id,
+    labelAs: "span"
+  }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(ButtonToggleGroupContext.Provider, {
+    value: {
+      onButtonClick,
+      handleKeyDown,
+      pressedButtonValue: value || pressedButtonValue,
+      onChange,
+      name,
+      allowDeselect,
+      isInGroup: true,
+      firstButton,
+      childButtonCallbackRef
+    }
+  }, /*#__PURE__*/React.createElement(StyledButtonToggleGroupWrapper, {
+    labelInline: labelInline,
+    ref: wrapperRef
+  }, /*#__PURE__*/React.createElement(StyledButtonToggleGroup, _extends({}, label ? {
+    "aria-labelledby": labelId.current
+  } : {
+    "aria-label": ariaLabel
+  }, {
+    inputWidth: inputWidth,
+    fullWidth: fullWidth,
+    role: "group",
+    "data-component": dataComponent,
+    "data-role": dataRole,
+    "data-element": dataElement,
+    id: id
+  }, filterStyledSystemMarginProps(props)), children))))));
+};
+ButtonToggleGroup.displayName = "ButtonToggleGroup";
+export default ButtonToggleGroup;

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

@@ -0,0 +1,6 @@
+import { ButtonToggleGroupProps } from ".";
+declare type StyledButtonToggleGroupProps = Pick<ButtonToggleGroupProps, "inputWidth" | "fullWidth">;
+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 default StyledButtonToggleGroup;

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

@@ -0,0 +1,64 @@
+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`
+  ${_ref => {
+  let {
+    labelInline
+  } = _ref;
+  return labelInline && css`
+      display: flex;
+    `;
+}}
+`;
+const StyledButtonToggleGroup = styled.div`
+  ${margin}
+
+  display: flex;
+
+  ${StyledButtonToggle}:not(:first-of-type):not(:last-of-type) {
+    border-radius: var(--borderRadius000);
+  }
+
+  ${StyledButtonToggle}:first-of-type ${StyledButtonToggle} {
+    border-top-left-radius: var(--borderRadius400);
+    border-bottom-left-radius: var(--borderRadius400);
+    border-top-right-radius: var(--borderRadius000);
+    border-bottom-right-radius: var(--borderRadius000);
+  }
+
+  ${StyledButtonToggle}:last-of-type ${StyledButtonToggle} {
+    border-top-left-radius: var(--borderRadius000);
+    border-bottom-left-radius: var(--borderRadius000);
+    border-top-right-radius: var(--borderRadius400);
+    border-bottom-right-radius: var(--borderRadius400);
+  }
+
+  ${_ref2 => {
+  let {
+    fullWidth
+  } = _ref2;
+  return fullWidth && css`
+      ${StyledButtonToggle} {
+        width: 100%;
+      }
+      ${StyledButtonToggleWrapper} {
+        flex: auto;
+      }
+    `;
+}}
+
+  ${_ref3 => {
+  let {
+    inputWidth
+  } = _ref3;
+  return inputWidth && css`
+      width: ${`${inputWidth}%`};
+    `;
+}}
+`;
+StyledButtonToggleGroup.defaultProps = {
+  theme: baseTheme
+};
+export default StyledButtonToggleGroup;

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

@@ -1,7 +1,12 @@
 import React from "react";
-import { StyledButtonToggleLabelProps } from "./button-toggle.style";
-import { ButtonToggleInputProps } from "./button-toggle-input.component";
-export interface ButtonToggleProps extends ButtonToggleInputProps, Partial<StyledButtonToggleLabelProps> {
+import { StyledButtonToggleProps } from "./button-toggle.style";
+export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
+    /** Prop to specify the aria-label of the component */
+    "aria-label"?: string;
+    /** Prop to specify the aria-labelledby property of the component */
+    "aria-labelledby"?: string;
+    /** DEPRECATED: A synonym for pressed, to keep backwards compatibility. */
+    checked?: boolean;
     /** Text to display for the button. */
     children?: React.ReactNode;
     /** Identifier used for testing purposes, applied to the root element of the component. */
@@ -10,15 +15,23 @@ export interface ButtonToggleProps extends ButtonToggleInputProps, Partial<Style
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
-    /** Set the default value of the Group if component is meant to be used as uncontrolled. */
-    defaultChecked?: boolean;
     /** Remove spacing from between buttons. */
     grouped?: boolean;
-    /** Callback triggered by click event on the input. */
-    onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
+    /** An optional string by which to identify the button in an onChange handler on the parent ButtonToggleGroup. */
+    name?: string;
+    /** Callback triggered by blur event on the button. */
+    onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Callback triggered by focus event on the button. */
+    onFocus?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Callback triggered by click event on the button. */
+    onClick?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Set the pressed state of the toggle button */
+    pressed?: boolean;
+    /** An optional string by which to identify the button in either an onClick handler, or an onChange handler on the parent ButtonToggleGroup. */
+    value?: string;
 }
 export declare const ButtonToggle: {
-    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, checked, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, grouped, name, onBlur, onChange, onFocus, size, value, }: ButtonToggleProps): React.JSX.Element;
+    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, checked, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, grouped, name, onBlur, onFocus, onClick, pressed, size, value, }: ButtonToggleProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggle;

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

@@ -1,12 +1,15 @@
+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, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
-import { StyledButtonToggle, StyledButtonToggleLabel, StyledButtonToggleContentWrapper } from "./button-toggle.style";
+import { StyledButtonToggle, StyledButtonToggleWrapper } from "./button-toggle.style";
 import guid from "../../__internal__/utils/helpers/guid";
+import { ButtonToggleGroupContext } from "./button-toggle-group/button-toggle-group.component";
 import ButtonToggleIcon from "./button-toggle-icon.component";
-import ButtonToggleInput from "./button-toggle-input.component";
-import { InputGroupContext } from "../../__internal__/input-behaviour";
 import Logger from "../../__internal__/utils/logger";
+import { InputGroupContext } from "../../__internal__/input-behaviour";
+let deprecateCheckedWarnTriggered = false;
+let deprecateNameWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 export const ButtonToggle = _ref => {
   let {
@@ -23,18 +26,48 @@ export const ButtonToggle = _ref => {
     grouped,
     name,
     onBlur,
-    onChange,
     onFocus,
+    onClick,
+    pressed,
     size = "medium",
     value
   } = _ref;
   !!!(children || buttonIcon) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `buttonIcon` must be defined, or this node must have children") : invariant(false) : void 0;
+  if (checked !== undefined && !deprecateCheckedWarnTriggered) {
+    deprecateCheckedWarnTriggered = true;
+    Logger.deprecate("The `checked` prop in `ButtonToggle` component is deprecated and will soon be removed. Please use `pressed` instead.");
+  }
+  if (name && !deprecateNameWarnTriggered) {
+    deprecateNameWarnTriggered = true;
+    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.`);
+  }
+  const pressedPropValue = pressed === undefined ? checked : pressed;
+  const buttonRef = useRef(null);
   const {
     onMouseEnter,
-    onMouseLeave
+    onMouseLeave,
+    onBlur: inputGroupOnBlur,
+    onFocus: inputGroupOnFocus
   } = useContext(InputGroupContext);
-  const inputGuid = guid();
-  const inputRef = useRef(null);
+  const {
+    onButtonClick,
+    handleKeyDown,
+    pressedButtonValue,
+    onChange,
+    name: groupName,
+    allowDeselect,
+    isInGroup,
+    firstButton,
+    childButtonCallbackRef
+  } = useContext(ButtonToggleGroupContext);
+  const callbackRef = element => {
+    buttonRef.current = element;
+    if (childButtonCallbackRef) {
+      childButtonCallbackRef(element);
+    }
+  };
+  const inputGuid = useRef(guid());
   let icon;
   if (buttonIcon) {
     icon = /*#__PURE__*/React.createElement(ButtonToggleIcon, {
@@ -44,42 +77,76 @@ export const ButtonToggle = _ref => {
       hasContent: !!children
     });
   }
-  function handleClick() {
-    inputRef.current?.focus();
+  function handleClick(ev) {
+    if (onClick) {
+      onClick(ev);
+    }
+    if (onChange) {
+      let newValue = value;
+      if (allowDeselect && pressedButtonValue === value) {
+        newValue = undefined;
+      }
+      onChange(ev, newValue, groupName || name);
+    }
+    if (value) {
+      onButtonClick(value);
+    }
   }
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Button Toggle` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
-  return /*#__PURE__*/React.createElement(StyledButtonToggle, {
+  function handleFocus(ev) {
+    if (onFocus) {
+      onFocus(ev);
+    }
+    if (inputGroupOnFocus) {
+      inputGroupOnFocus();
+    }
+  }
+  function handleBlur(ev) {
+    if (onBlur) {
+      onBlur(ev);
+    }
+    if (inputGroupOnBlur) {
+      inputGroupOnBlur();
+    }
+  }
+  const isPressed = isInGroup ? pressedButtonValue === value : pressedPropValue;
+  const isFirstButton = buttonRef.current === firstButton;
+
+  // if we're in a ButtonToggleGroup, only one button should be tabbable - the pressed button if there is one, or
+  // the first one if not
+  const tabbable = !isInGroup || isPressed || !pressedButtonValue && isFirstButton;
+  return /*#__PURE__*/React.createElement(StyledButtonToggleWrapper, {
     "data-component": dataComponent || "button-toggle",
     "data-element": dataElement,
     "data-role": dataRole,
-    grouped: grouped,
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement(ButtonToggleInput, {
+    grouped: grouped
+  }, /*#__PURE__*/React.createElement(StyledButtonToggle, _extends({
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
-    "data-element": "button-toggle-input",
-    name: name,
-    checked: checked,
-    disabled: disabled,
-    guid: inputGuid,
-    value: value,
-    onChange: onChange,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    ref: inputRef
-  }), /*#__PURE__*/React.createElement(StyledButtonToggleLabel, {
+    "aria-pressed": !!isPressed,
     buttonIcon: buttonIcon,
     buttonIconSize: buttonIconSize,
+    "data-element": "button-toggle-button",
     disabled: disabled,
-    htmlFor: inputGuid,
+    id: inputGuid.current,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     size: size,
-    grouped: grouped
-  }, /*#__PURE__*/React.createElement(StyledButtonToggleContentWrapper, null, icon, children)));
+    grouped: grouped,
+    value: value,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown
+  }, tabbable ? {} : {
+    tabIndex: -1
+  }, {
+    allowDeselect: allowDeselect,
+    ref: callbackRef
+  }), icon, children));
 };
 ButtonToggle.displayName = "ButtonToggle";
 export default ButtonToggle;

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

@@ -1,7 +1,7 @@
 import { IconType } from "../icon";
 export declare type ButtonToggleIconSizes = "small" | "large";
 declare const StyledButtonToggleContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export interface StyledButtonToggleLabelProps {
+export interface StyledButtonToggleProps {
     /** The icon to be rendered inside of the button */
     buttonIcon?: IconType;
     /** Sets the size of the buttonIcon (eg. large) */
@@ -11,17 +11,18 @@ export interface StyledButtonToggleLabelProps {
     /** ButtonToggle size */
     size: "small" | "medium" | "large";
     grouped?: boolean;
+    /** set this to true to allow the button to be deselected when already selected */
+    allowDeselect?: boolean;
 }
-declare const StyledButtonToggleLabel: import("styled-components").StyledComponent<"label", any, StyledButtonToggleLabelProps, never>;
+declare const StyledButtonToggle: import("styled-components").StyledComponent<"button", any, StyledButtonToggleProps, never>;
 export interface StyledButtonToggleIconProps {
     /** Sets the size of the buttonIcon (eg. large) */
     buttonIconSize?: ButtonToggleIconSizes;
     hasContent?: boolean;
 }
 declare const StyledButtonToggleIcon: import("styled-components").StyledComponent<"div", any, StyledButtonToggleIconProps, never>;
-export interface StyledButtonToggleProps {
+export interface StyledButtonToggleWrapperProps {
     grouped?: boolean;
 }
-declare const StyledButtonToggle: import("styled-components").StyledComponent<"div", any, StyledButtonToggleProps, never>;
-declare const StyledButtonToggleInput: import("styled-components").StyledComponent<"input", any, {}, never>;
-export { StyledButtonToggle, StyledButtonToggleLabel, StyledButtonToggleIcon, StyledButtonToggleInput, StyledButtonToggleContentWrapper, };
+declare const StyledButtonToggleWrapper: import("styled-components").StyledComponent<"div", any, StyledButtonToggleWrapperProps, never>;
+export { StyledButtonToggle, StyledButtonToggleWrapper, StyledButtonToggleIcon, StyledButtonToggleContentWrapper, };

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

@@ -33,8 +33,10 @@ const StyledButtonToggleContentWrapper = styled.div`
   height: 100%;
   flex-flow: wrap;
 `;
-const StyledButtonToggleLabel = styled.label`
-  display: inline-block;
+const StyledButtonToggle = styled.button`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   position: relative;
   box-sizing: border-box;
   max-width: 100%;
@@ -50,22 +52,32 @@ const StyledButtonToggleLabel = styled.label`
   `;
 }}
   font-weight: 700;
+  background-color: transparent;
   cursor: pointer;
+  text-align: start;
+  color: inherit;
+
   border: 1px solid var(--colorsActionMinor500);
-  ${StyledIcon} {
-    color: var(--colorsActionMinor500);
+
+  :focus {
+    outline: 3px solid var(--colorsSemanticFocus500);
+    z-index: 100;
   }
-  input:checked ~ && {
+
+  &[aria-pressed="true"] {
     background-color: var(--colorsActionMinor300);
     color: var(--colorsActionMinor600);
-    cursor: auto;
-  }
-  input:focus ~ & {
-    outline: 3px solid var(--colorsSemanticFocus500);
-    z-index: 100;
+    ${_ref2 => {
+  let {
+    allowDeselect
+  } = _ref2;
+  return !allowDeselect && css`
+        cursor: auto;
+      `;
+}}
   }
 
-  input:not(:checked):not(:disabled) ~ &:hover {
+  :not([aria-pressed="true"]):not(:disabled):hover {
     background-color: var(--colorsActionMinor200);
     border-color: var(--colorsActionMinor500);
     color: var(--colorsActionMinor500);
@@ -73,24 +85,27 @@ const StyledButtonToggleLabel = styled.label`
       color: var(--colorsActionMinor500);
     }
   }
-  ${_ref2 => {
+
+  ${StyledIcon} {
+    color: var(--colorsActionMinor500);
+  }
+
+  ${_ref3 => {
   let {
     buttonIcon,
     buttonIconSize,
     size
-  } = _ref2;
+  } = _ref3;
   return buttonIcon && buttonIconSize === "large" && css`
       height: ${heightLargeIconConfig[size]}px;
       padding: 0 ${paddingLargeIconConfig[size]}px;
-      ${StyledButtonToggleContentWrapper} {
-        flex-direction: column;
-      }
+      flex-direction: column;
     `;
 }}
-  ${_ref3 => {
+  ${_ref4 => {
   let {
     disabled
-  } = _ref3;
+  } = _ref4;
   return disabled && css`
       & {
         border-color: var(--colorsActionDisabled500);
@@ -108,16 +123,16 @@ const iconFontSizes = {
   largeIcon: 32
 };
 const StyledButtonToggleIcon = styled.div`
-  ${_ref4 => {
+  ${_ref5 => {
   let {
     hasContent
-  } = _ref4;
+  } = _ref5;
   return hasContent && `margin-right: 8px;`;
 }}
-  ${_ref5 => {
+  ${_ref6 => {
   let {
     buttonIconSize
-  } = _ref5;
+  } = _ref6;
   return buttonIconSize === "large" && css`
       margin-right: 0;
       ${StyledIcon} {
@@ -136,18 +151,18 @@ const StyledButtonToggleIcon = styled.div`
     `;
 }}
 `;
-const StyledButtonToggle = styled.div`
+const StyledButtonToggleWrapper = styled.div`
   display: inline-block;
   vertical-align: middle;
 
-  ${_ref6 => {
+  ${_ref7 => {
   let {
     grouped
-  } = _ref6;
+  } = _ref7;
   return css`
       ${!grouped && css`
         &&&& {
-          ${StyledButtonToggleLabel} {
+          ${StyledButtonToggle} {
             border-radius: var(--borderRadius400);
           }
         }
@@ -156,14 +171,14 @@ const StyledButtonToggle = styled.div`
       ${grouped && css`
         &&&& {
           :first-of-type {
-            ${StyledButtonToggleLabel} {
+            ${StyledButtonToggle} {
               border-top-left-radius: var(--borderRadius400);
               border-bottom-left-radius: var(--borderRadius400);
             }
           }
 
           :last-of-type {
-            ${StyledButtonToggleLabel} {
+            ${StyledButtonToggle} {
               border-top-right-radius: var(--borderRadius400);
               border-bottom-right-radius: var(--borderRadius400);
             }
@@ -177,10 +192,10 @@ const StyledButtonToggle = styled.div`
     margin-left: 8px;
   }
 
-  ${_ref7 => {
+  ${_ref8 => {
   let {
     grouped
-  } = _ref7;
+  } = _ref8;
   return grouped && css`
       &:not(:first-of-type) {
         margin-left: -1px;
@@ -188,10 +203,4 @@ const StyledButtonToggle = styled.div`
     `;
 }};
 `;
-const StyledButtonToggleInput = styled.input`
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
-`;
-export { StyledButtonToggle, StyledButtonToggleLabel, StyledButtonToggleIcon, StyledButtonToggleInput, StyledButtonToggleContentWrapper };
+export { StyledButtonToggle, StyledButtonToggleWrapper, StyledButtonToggleIcon, StyledButtonToggleContentWrapper };

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

@@ -1,2 +1,4 @@
-export { default } from "./button-toggle.component";
+export { default as ButtonToggle } from "./button-toggle.component";
 export type { ButtonToggleProps } from "./button-toggle.component";
+export { default as ButtonToggleGroup } from "./button-toggle-group";
+export type { ButtonToggleGroupProps } from "./button-toggle-group";

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

@@ -1 +1,2 @@
-export { default } from "./button-toggle.component";
+export { default as ButtonToggle } from "./button-toggle.component";
+export { default as ButtonToggleGroup } from "./button-toggle-group";