@carbon/react 1.4.0 → 1.6.0-rc.0

package/es/_virtual/_rollupPluginBabelHelpers.js

@@ -82,7 +82,7 @@ function _defineProperty(obj, key, value) {
 }
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -95,7 +95,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -118,18 +117,17 @@ function _inherits(subClass, superClass) {
 }
 
 function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
     return o.__proto__ || Object.getPrototypeOf(o);
   };
   return _getPrototypeOf(o);
 }
 
 function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
     return o;
   };
-
   return _setPrototypeOf(o, p);
 }
 

package/es/components/Button/Button.Skeleton.js

@@ -26,7 +26,7 @@ var ButtonSkeleton = function ButtonSkeleton(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
-  var buttonClasses = cx(className, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--skeleton"), true), _defineProperty(_cx, "".concat(prefix, "--btn"), true), _defineProperty(_cx, "".concat(prefix, "--btn--sm"), small || size === 'sm'), _defineProperty(_cx, "".concat(prefix, "--btn--md"), size === 'field' || size === 'md'), _defineProperty(_cx, "".concat(prefix, "--btn--xl"), size === 'xl'), _defineProperty(_cx, "".concat(prefix, "--btn--2xl"), size === '2xl'), _cx));
+  var buttonClasses = cx(className, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--skeleton"), true), _defineProperty(_cx, "".concat(prefix, "--btn"), true), _defineProperty(_cx, "".concat(prefix, "--btn--sm"), small || size === 'sm'), _defineProperty(_cx, "".concat(prefix, "--btn--md"), size === 'field' || size === 'md'), _defineProperty(_cx, "".concat(prefix, "--btn--lg"), size === 'lg'), _defineProperty(_cx, "".concat(prefix, "--btn--xl"), size === 'xl'), _defineProperty(_cx, "".concat(prefix, "--btn--2xl"), size === '2xl'), _cx));
 
   var commonProps = _objectSpread2({
     className: buttonClasses

package/es/components/Checkbox/Checkbox.js

@@ -26,9 +26,8 @@ var Checkbox = /*#__PURE__*/React__default.forwardRef(function Checkbox(_ref, _r
       other = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
-  var labelClasses = cx("".concat(prefix, "--checkbox-label"), [className]);
-  var innerLabelClasses = cx("".concat(prefix, "--checkbox-label-text"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
   var wrapperClasses = cx("".concat(prefix, "--form-item"), "".concat(prefix, "--checkbox-wrapper"), [className]);
+  var innerLabelClasses = cx("".concat(prefix, "--checkbox-label-text"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("input", _extends({}, other, {
@@ -54,7 +53,7 @@ var Checkbox = /*#__PURE__*/React__default.forwardRef(function Checkbox(_ref, _r
     }
   })), /*#__PURE__*/React__default.createElement("label", {
     htmlFor: id,
-    className: labelClasses,
+    className: "".concat(prefix, "--checkbox-label"),
     title: title || null
   }, /*#__PURE__*/React__default.createElement(Text, {
     className: innerLabelClasses
@@ -103,8 +102,9 @@ Checkbox.propTypes = {
   labelText: PropTypes.node.isRequired,
 
   /**
-   * Receives three arguments: true/false, the checkbox's id, and the dom event.
-   * `(value, id, event) => console.log({value, id, event})`
+   * Provide an optional handler that is called when the internal state of
+   * Checkbox changes. This handler is called with event and state info.
+   * `(event, { checked, id }) => void`
    */
   onChange: PropTypes.func,
 

package/es/components/ComposedModal/ComposedModal.js

@@ -223,7 +223,8 @@ var ComposedModal = /*#__PURE__*/function (_Component) {
         onClick: this.handleClick,
         onKeyDown: this.handleKeyDown,
         onTransitionEnd: open ? this.handleTransitionEnd : undefined,
-        className: modalClass
+        className: modalClass,
+        tabIndex: "-1"
       }), /*#__PURE__*/React__default.createElement("span", {
         ref: this.startSentinel,
         tabIndex: "0",

package/es/components/ComposedModal/next/ComposedModal.js

@@ -194,7 +194,8 @@ var ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedModa
     onBlur: handleBlur,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
-    className: modalClass
+    className: modalClass,
+    tabIndex: "-1"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: containerClass,
     role: "dialog",

package/es/components/DataTable/TableActionList.js

@@ -10,7 +10,9 @@ import wrapComponent from '../../tools/wrapComponent.js';
 var TableActionList = wrapComponent({
   name: 'TableActionList',
   type: 'div',
-  className: "cds--action-list"
+  className: function className(prefix) {
+    return "".concat(prefix, "--action-list");
+  }
 });
 var TableActionList$1 = TableActionList;
 

package/es/components/DataTable/TableToolbarContent.js

@@ -10,7 +10,9 @@ import wrapComponent from '../../tools/wrapComponent.js';
 var TableToolbarContent = wrapComponent({
   name: 'TableToolbarContent',
   type: 'div',
-  className: "cds--toolbar-content"
+  className: function className(prefix) {
+    return "".concat(prefix, "--toolbar-content");
+  }
 });
 var TableToolbarContent$1 = TableToolbarContent;
 

package/es/components/DatePicker/DatePicker.js

@@ -20,7 +20,7 @@ import { useSavedCallback } from '../../internal/useSavedCallback.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ArrowDown } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["allowInput", "appendTo", "children", "className", "dateFormat", "datePickerType", "disable", "enable", "inline", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "short", "value"];
+var _excluded = ["allowInput", "appendTo", "children", "className", "closeOnSelect", "dateFormat", "datePickerType", "disable", "enable", "inline", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "short", "value"];
 
 l10n.en.weekdays.shorthand.forEach(function (_day, index) {
   var currentDay = l10n.en.weekdays.shorthand;
@@ -152,6 +152,8 @@ function DatePicker(_ref) {
       appendTo = _ref.appendTo,
       children = _ref.children,
       className = _ref.className,
+      _ref$closeOnSelect = _ref.closeOnSelect,
+      closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect,
       _ref$dateFormat = _ref.dateFormat,
       dateFormat = _ref$dateFormat === void 0 ? 'm/d/Y' : _ref$dateFormat,
       datePickerType = _ref.datePickerType,
@@ -251,6 +253,7 @@ function DatePicker(_ref) {
       inline: inline !== null && inline !== void 0 ? inline : false,
       disableMobile: true,
       defaultDate: value,
+      closeOnSelect: closeOnSelect,
       mode: datePickerType,
       allowInput: allowInput !== null && allowInput !== void 0 ? allowInput : true,
       dateFormat: dateFormat,
@@ -311,7 +314,7 @@ function DatePicker(_ref) {
       // error with IBM Equal Access Accessibility Checker so we add an aria
       // role to the container div.
 
-      calendar.calendarContainer.setAttribute('role', 'region'); // IBM EAAC requires an aria-label on a role='region'
+      calendar.calendarContainer.setAttribute('role', 'application'); // IBM EAAC requires an aria-label on a role='region'
 
       calendar.calendarContainer.setAttribute('aria-label', 'calendar-container');
     }
@@ -375,9 +378,10 @@ function DatePicker(_ref) {
   }, [inline]);
   useEffect(function () {
     if (calendarRef.current) {
-      calendarRef.current.set({
-        value: value
-      });
+      if (value !== undefined) {
+        calendarRef.current.setDate(value);
+      }
+
       updateClassNames(calendarRef.current, prefix); //for simple date picker w/o calendar; initial mount may not have value
     } else if (!calendarRef.current && value) {
       startInputField.current.value = value;
@@ -412,6 +416,11 @@ DatePicker.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * flatpickr prop passthrough. Controls whether the calendar dropdown closes upon selection.
+   */
+  closeOnSelect: PropTypes.bool,
+
   /**
    * The date format.
    */

package/es/components/FileUploader/FileUploader.js

@@ -224,7 +224,7 @@ _defineProperty(FileUploader, "propTypes", {
   iconDescription: FeatureFlags.enabled('enable-v11-release') ? PropTypes.string.isRequired : PropTypes.string,
 
   /**
-   * Specify the description text of this <FileUploader>
+   * Specify the description text of this `<FileUploader>`
    */
   labelDescription: PropTypes.string,
 

package/es/components/FileUploader/FileUploaderButton.js

@@ -146,7 +146,7 @@ FileUploaderButton.propTypes = {
   disabled: PropTypes.bool,
 
   /**
-   * Provide a unique id for the underlying <input> node
+   * Provide a unique id for the underlying `<input>` node
    */
   id: PropTypes.string,
 

package/es/components/FileUploader/Filename.js

@@ -69,7 +69,7 @@ Filename.propTypes = {
   status: PropTypes.oneOf(['edit', 'complete', 'uploading']),
 
   /**
-   * Provide a custom tabIndex value for the <Filename>
+   * Provide a custom tabIndex value for the `<Filename>`
    */
   tabIndex: PropTypes.string
 };

package/es/components/Link/Link.js

@@ -18,9 +18,12 @@ var Link = /*#__PURE__*/React__default.forwardRef(function Link(_ref, ref) {
   var children = _ref.children,
       customClassName = _ref.className,
       href = _ref.href,
-      disabled = _ref.disabled,
-      inline = _ref.inline,
-      visited = _ref.visited,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$inline = _ref.inline,
+      inline = _ref$inline === void 0 ? false : _ref$inline,
+      _ref$visited = _ref.visited,
+      visited = _ref$visited === void 0 ? false : _ref$visited,
       Icon = _ref.renderIcon,
       size = _ref.size,
       rest = _objectWithoutProperties(_ref, _excluded);

package/es/components/ListBox/ListBoxPropTypes.js

@@ -6,9 +6,8 @@
  */
 
 import PropTypes from 'prop-types';
-import * as FeatureFlags from '@carbon/feature-flags';
 
 var ListBoxType = PropTypes.oneOf(['default', 'inline']);
-var ListBoxSize = FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['sm', 'md', 'lg']) : PropTypes.oneOf(['sm', 'md', 'lg', 'xl']);
+var ListBoxSize = PropTypes.oneOf(['sm', 'md', 'lg']);
 
 export { ListBoxSize, ListBoxType };

package/es/components/ListBox/ListBoxSelection.js

@@ -21,7 +21,7 @@ var _Close, _Close2, _defaultTranslations;
  * selection.
  */
 
-var ListBoxSelection = function ListBoxSelection(_ref) {
+function ListBoxSelection(_ref) {
   var _cx;
 
   var clearSelection = _ref.clearSelection,
@@ -88,7 +88,7 @@ var ListBoxSelection = function ListBoxSelection(_ref) {
     "aria-label": description,
     title: description
   }, selectionCount, _Close2 || (_Close2 = /*#__PURE__*/React__default.createElement(Close, null)));
-};
+}
 
 var translationIds = {
   'clear.all': 'clear.all',
@@ -143,6 +143,5 @@ ListBoxSelection.defaultProps = {
     return defaultTranslations[id];
   }
 };
-var ListBoxSelection$1 = ListBoxSelection;
 
-export { ListBoxSelection$1 as default, translationIds };
+export { ListBoxSelection as default, translationIds };

package/es/components/OverflowMenu/OverflowMenu.js

@@ -356,7 +356,7 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
         "aria-label": ariaLabel,
         id: id,
         ref: mergeRefs(this._triggerRef, ref)
-      }), /*#__PURE__*/React__default.createElement(IconElement, iconProps, iconDescription && /*#__PURE__*/React__default.createElement("title", null, iconDescription)), open && wrappedMenuBody));
+      }), /*#__PURE__*/React__default.createElement(IconElement, iconProps), open && wrappedMenuBody));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -53,8 +53,6 @@ function ProgressStep(_ref) {
 
 
   var SVGIcon = function SVGIcon(_ref2) {
-    var _title;
-
     var complete = _ref2.complete,
         current = _ref2.current,
         description = _ref2.description,
@@ -64,7 +62,7 @@ function ProgressStep(_ref) {
     if (invalid) {
       return /*#__PURE__*/React__default.createElement(Warning, {
         className: "".concat(prefix, "--progress__warning")
-      }, _title || (_title = /*#__PURE__*/React__default.createElement("title", null, description)));
+      }, /*#__PURE__*/React__default.createElement("title", null, description));
     }
 
     if (current) {

package/es/components/RadioButton/next/RadioButton.js

@@ -50,7 +50,8 @@ var RadioButton = /*#__PURE__*/React__default.forwardRef(function RadioButton(_r
     id: uniqueId,
     ref: ref,
     disabled: disabled,
-    value: value
+    value: value,
+    name: name
   })), /*#__PURE__*/React__default.createElement("label", {
     htmlFor: uniqueId,
     className: "".concat(prefix, "--radio-button__label")

package/es/components/Search/next/Search.js

@@ -143,6 +143,7 @@ var Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwar
     className: clearClasses,
     disabled: disabled,
     onClick: clearInput,
+    title: closeButtonLabelText,
     type: "button"
   }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
 });

package/es/components/Tabs/next/Tabs.js

@@ -597,6 +597,11 @@ var TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref7, f
       tabIndex = _useState8[0],
       setTabIndex = _useState8[1];
 
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      interactiveContent = _useState10[0],
+      setInteractiveContent = _useState10[1];
+
   var _React$useContext3 = React__default.useContext(TabsContext),
       selectedIndex = _React$useContext3.selectedIndex,
       baseId = _React$useContext3.baseId;
@@ -604,14 +609,47 @@ var TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref7, f
   var index = React__default.useContext(TabPanelContext);
   var id = "".concat(baseId, "-tabpanel-").concat(index);
   var tabId = "".concat(baseId, "-tab-").concat(index);
-  var className = cx("".concat(prefix, "--tab-content"), customClassName); // tabindex should only be 0 if no interactive content in children
+  var className = cx("".concat(prefix, "--tab-content"), customClassName, _defineProperty({}, "".concat(prefix, "--tab-content--interactive"), interactiveContent));
+  useEffectOnce(function () {
+    if (!panel.current) {
+      return;
+    }
 
-  useEffect(function () {
-    var interactiveContent = getInteractiveContent(panel.current);
+    var content = getInteractiveContent(panel.current);
 
-    if (interactiveContent) {
+    if (content) {
+      setInteractiveContent(true);
       setTabIndex('-1');
     }
+  }); // tabindex should only be 0 if no interactive content in children
+
+  useEffect(function () {
+    if (!panel.current) {
+      return;
+    }
+
+    var node = panel.current;
+
+    function callback() {
+      var content = getInteractiveContent(node);
+
+      if (content) {
+        setInteractiveContent(true);
+        setTabIndex('-1');
+      } else {
+        setInteractiveContent(false);
+        setTabIndex('0');
+      }
+    }
+
+    var observer = new MutationObserver(callback);
+    observer.observe(node, {
+      childList: true,
+      subtree: true
+    });
+    return function () {
+      observer.disconnect(node);
+    };
   }, []);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     "aria-labelledby": tabId,

package/es/components/Toggle/Toggle.js

@@ -5,116 +5,154 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import PropTypes from 'prop-types';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
+import PropTypes from 'prop-types';
 import cx from 'classnames';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
-import { PrefixContext } from '../../internal/usePrefix.js';
-import { match } from '../../internal/keyboard/match.js';
-import { Enter } from '../../internal/keyboard/keys.js';
-
-var _path, _defineProperty2, _defineProperty3;
-
-var _excluded = ["className", "defaultToggled", "toggled", "onChange", "onToggle", "id", "labelText", "labelA", "labelB", "size"];
-var getInstanceId = setupGetInstanceId();
-
-var Toggle = /*#__PURE__*/function (_React$Component) {
-  _inherits(Toggle, _React$Component);
-
-  var _super = _createSuper(Toggle);
-
-  function Toggle() {
-    _classCallCheck(this, Toggle);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(Toggle, [{
-    key: "render",
-    value: function render() {
-      var prefix = this.context;
-
-      var _this$props = this.props,
-          className = _this$props.className,
-          defaultToggled = _this$props.defaultToggled,
-          toggled = _this$props.toggled,
-          _onChange = _this$props.onChange,
-          onToggle = _this$props.onToggle,
-          _this$props$id = _this$props.id,
-          id = _this$props$id === void 0 ? this.inputId = this.inputId || "__carbon-toggle_".concat(getInstanceId()) : _this$props$id,
-          labelText = _this$props.labelText,
-          labelA = _this$props.labelA,
-          labelB = _this$props.labelB,
-          size = _this$props.size,
-          other = _objectWithoutProperties(_this$props, _excluded);
-
-      var input;
-      var wrapperClasses = cx("".concat(prefix, "--form-item"), _defineProperty({}, className, className));
-      var toggleClasses = cx("".concat(prefix, "--toggle-input"), _defineProperty({}, "".concat(prefix, "--toggle-input--small"), size === 'sm'));
-      var checkedProps = {};
-
-      if (typeof toggled !== 'undefined') {
-        checkedProps.checked = toggled;
-      } else {
-        checkedProps.defaultChecked = defaultToggled;
-      }
-
-      return /*#__PURE__*/React__default.createElement("div", {
-        className: wrapperClasses
-      }, /*#__PURE__*/React__default.createElement("input", _extends({}, other, checkedProps, {
-        "aria-label": null,
-        type: "checkbox",
-        id: id,
-        className: toggleClasses,
-        onChange: function onChange(evt) {
-          _onChange && _onChange(evt);
-          onToggle(input.checked, id, evt);
-        },
-        ref: function ref(el) {
-          input = el;
-        },
-        onKeyUp: function onKeyUp(evt) {
-          if (match(evt, Enter)) {
-            input.checked = !input.checked;
-            _onChange && _onChange(evt);
-            onToggle(input.checked, id, evt);
-          }
-        }
-      })), /*#__PURE__*/React__default.createElement("label", {
-        className: "".concat(prefix, "--toggle-input__label"),
-        htmlFor: id,
-        "aria-label": typeof labelText === 'string' ? null : this.props['aria-label']
-      }, labelText, /*#__PURE__*/React__default.createElement("span", {
-        className: "".concat(prefix, "--toggle__switch")
-      }, size && /*#__PURE__*/React__default.createElement("svg", {
-        className: "".concat(prefix, "--toggle__check"),
-        width: "6px",
-        height: "5px",
-        viewBox: "0 0 6 5"
-      }, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
-        d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
-      }))), /*#__PURE__*/React__default.createElement("span", {
-        className: "".concat(prefix, "--toggle__text--off"),
-        "aria-hidden": "true"
-      }, labelA), /*#__PURE__*/React__default.createElement("span", {
-        className: "".concat(prefix, "--toggle__text--on"),
-        "aria-hidden": "true"
-      }, labelB))));
+import { useControllableState } from '../../internal/useControllableState.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _path;
+
+var _excluded = ["className", "defaultToggled", "disabled", "hideLabel", "id", "labelA", "labelB", "labelText", "onClick", "onToggle", "size", "toggled"];
+function Toggle(_ref) {
+  var className = _ref.className,
+      _ref$defaultToggled = _ref.defaultToggled,
+      defaultToggled = _ref$defaultToggled === void 0 ? false : _ref$defaultToggled,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$hideLabel = _ref.hideLabel,
+      hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
+      id = _ref.id,
+      _ref$labelA = _ref.labelA,
+      labelA = _ref$labelA === void 0 ? 'Off' : _ref$labelA,
+      _ref$labelB = _ref.labelB,
+      labelB = _ref$labelB === void 0 ? 'On' : _ref$labelB,
+      labelText = _ref.labelText,
+      onClick = _ref.onClick,
+      onToggle = _ref.onToggle,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      toggled = _ref.toggled,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+
+  var _useControllableState = useControllableState({
+    value: toggled,
+    onChange: onToggle,
+    defaultValue: defaultToggled
+  }),
+      _useControllableState2 = _slicedToArray(_useControllableState, 2),
+      checked = _useControllableState2[0],
+      setChecked = _useControllableState2[1];
+
+  function handleClick(e) {
+    setChecked(!checked);
+
+    if (onClick) {
+      onClick(e);
     }
-  }]);
-
-  return Toggle;
-}(React__default.Component);
-
-_defineProperty(Toggle, "propTypes", (_defineProperty2 = {}, _defineProperty(_defineProperty2, 'aria-label', PropTypes.string.isRequired), _defineProperty(_defineProperty2, "className", PropTypes.string), _defineProperty(_defineProperty2, "defaultToggled", PropTypes.bool), _defineProperty(_defineProperty2, "id", PropTypes.string.isRequired), _defineProperty(_defineProperty2, "labelA", PropTypes.node.isRequired), _defineProperty(_defineProperty2, "labelB", PropTypes.node.isRequired), _defineProperty(_defineProperty2, "labelText", PropTypes.node), _defineProperty(_defineProperty2, "onChange", PropTypes.func), _defineProperty(_defineProperty2, "onToggle", PropTypes.func), _defineProperty(_defineProperty2, "size", PropTypes.oneOf(['sm', 'md'])), _defineProperty(_defineProperty2, "toggled", PropTypes.bool), _defineProperty2));
-
-_defineProperty(Toggle, "contextType", PrefixContext);
-
-_defineProperty(Toggle, "defaultProps", (_defineProperty3 = {
-  defaultToggled: false
-}, _defineProperty(_defineProperty3, 'aria-label', 'Toggle'), _defineProperty(_defineProperty3, "labelA", 'Off'), _defineProperty(_defineProperty3, "labelB", 'On'), _defineProperty(_defineProperty3, "onToggle", function onToggle() {}), _defineProperty3));
-
-var ToggleClassic = Toggle;
+  }
 
-export { ToggleClassic as default };
+  var isSm = size === 'sm';
+  var sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
+  var wrapperClasses = cx("".concat(prefix, "--toggle"), _defineProperty({}, "".concat(prefix, "--toggle--disabled"), disabled), className);
+  var labelTextClasses = cx("".concat(prefix, "--toggle__label-text"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
+  var appearanceClasses = cx("".concat(prefix, "--toggle__appearance"), _defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
+  var switchClasses = cx("".concat(prefix, "--toggle__switch"), _defineProperty({}, "".concat(prefix, "--toggle__switch--checked"), checked));
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: wrapperClasses
+  }, /*#__PURE__*/React__default.createElement("button", _extends({}, other, {
+    id: id,
+    className: "".concat(prefix, "--toggle__button"),
+    role: "switch",
+    type: "button",
+    "aria-checked": checked,
+    disabled: disabled,
+    onClick: handleClick
+  })), /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: id,
+    className: "".concat(prefix, "--toggle__label")
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: labelTextClasses
+  }, labelText), /*#__PURE__*/React__default.createElement("div", {
+    className: appearanceClasses
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: switchClasses
+  }, isSm && /*#__PURE__*/React__default.createElement("svg", {
+    className: "".concat(prefix, "--toggle__check"),
+    width: "6px",
+    height: "5px",
+    viewBox: "0 0 6 5"
+  }, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
+    d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
+  })))), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--toggle__text"),
+    "aria-hidden": "true"
+  }, sideLabel))));
+}
+Toggle.propTypes = {
+  /**
+   * Specify a custom className to apply to the form-item node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the toggle should be on by default
+   */
+  defaultToggled: PropTypes.bool,
+
+  /**
+   * Whether this control should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * Provide an id that unique represents the underlying `<button>`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify the label for the "off" position
+   */
+  labelA: PropTypes.node,
+
+  /**
+   * Specify the label for the "on" position
+   */
+  labelB: PropTypes.node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes.node.isRequired,
+
+  /**
+   * Provide an event listener that is called when the control is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Provide an event listener that is called when the control is toggled
+   */
+  onToggle: PropTypes.func,
+
+  /**
+   * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
+   */
+  size: PropTypes.oneOf(['sm', 'md']),
+
+  /**
+   * Specify whether the control is toggled
+   */
+  toggled: PropTypes.bool
+};
+
+export { Toggle, Toggle as default };