@carbon/react 0.17.0 → 1.0.0-rc.0

package/lib/components/Button/Button.js

@@ -0,0 +1,380 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var types = require('../../prop-types/types.js');
+var deprecate = require('../../prop-types/deprecate.js');
+var events = require('../../tools/events.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var useId = require('../../internal/useId.js');
+var toggleClass = require('../../tools/toggleClass.js');
+var index = require('../FeatureFlags/index.js');
+var FeatureFlags = require('@carbon/feature-flags');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var _excluded = ["as", "children", "className", "dangerDescription", "disabled", "hasIconOnly", "href", "iconDescription", "isExpressive", "isSelected", "kind", "onBlur", "onClick", "onFocus", "onMouseEnter", "onMouseLeave", "renderIcon", "size", "small", "tabIndex", "tooltipAlignment", "tooltipPosition", "type"];
+var Button = /*#__PURE__*/React__default["default"].forwardRef(function Button(_ref, ref) {
+  var _classNames;
+
+  var as = _ref.as,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$dangerDescriptio = _ref.dangerDescription,
+      dangerDescription = _ref$dangerDescriptio === void 0 ? 'danger' : _ref$dangerDescriptio,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$hasIconOnly = _ref.hasIconOnly,
+      hasIconOnly = _ref$hasIconOnly === void 0 ? false : _ref$hasIconOnly,
+      href = _ref.href,
+      iconDescription = _ref.iconDescription,
+      _ref$isExpressive = _ref.isExpressive,
+      isExpressive = _ref$isExpressive === void 0 ? false : _ref$isExpressive,
+      isSelected = _ref.isSelected,
+      _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? 'primary' : _ref$kind,
+      onBlur = _ref.onBlur,
+      onClick = _ref.onClick,
+      onFocus = _ref.onFocus,
+      onMouseEnter = _ref.onMouseEnter,
+      onMouseLeave = _ref.onMouseLeave,
+      ButtonImageElement = _ref.renderIcon,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? FeatureFlags__namespace.enabled('enable-v11-release') ? 'lg' : 'default' : _ref$size,
+      small = _ref.small,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
+      _ref$tooltipAlignment = _ref.tooltipAlignment,
+      tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'center' : _ref$tooltipAlignment,
+      _ref$tooltipPosition = _ref.tooltipPosition,
+      tooltipPosition = _ref$tooltipPosition === void 0 ? 'top' : _ref$tooltipPosition,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'button' : _ref$type,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      allowTooltipVisibility = _useState2[0],
+      setAllowTooltipVisibility = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      isHovered = _useState4[0],
+      setIsHovered = _useState4[1];
+
+  var _useState5 = React.useState(false),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      isFocused = _useState6[0],
+      setIsFocused = _useState6[1];
+
+  var tooltipRef = React.useRef(null);
+  var tooltipTimeout = React.useRef(null);
+  var prefix = usePrefix.usePrefix();
+
+  var closeTooltips = function closeTooltips(evt) {
+    var _document;
+
+    var tooltipNode = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelectorAll(".".concat(prefix, "--tooltip--a11y"));
+
+    _rollupPluginBabelHelpers.toConsumableArray(tooltipNode).map(function (node) {
+      toggleClass["default"](node, "".concat(prefix, "--tooltip--hidden"), node !== evt.currentTarget);
+    });
+  };
+
+  var handleFocus = function handleFocus(evt) {
+    if (hasIconOnly) {
+      closeTooltips(evt);
+      setIsFocused(true);
+      setAllowTooltipVisibility(true);
+    }
+  };
+
+  var handleBlur = function handleBlur() {
+    if (hasIconOnly) {
+      setIsHovered(false);
+      setIsFocused(false);
+      setAllowTooltipVisibility(false);
+    }
+  };
+
+  var handleMouseEnter = function handleMouseEnter(evt) {
+    if (hasIconOnly) {
+      tooltipTimeout.current && clearTimeout(tooltipTimeout.current);
+
+      if (evt.target === tooltipRef.current) {
+        setAllowTooltipVisibility(true);
+        return;
+      }
+
+      closeTooltips(evt);
+      setAllowTooltipVisibility(true);
+    }
+  };
+
+  var handleMouseLeave = function handleMouseLeave() {
+    if (!isFocused && hasIconOnly) {
+      tooltipTimeout.current = setTimeout(function () {
+        setAllowTooltipVisibility(false);
+        setIsHovered(false);
+      }, 100);
+    }
+  };
+
+  var handleClick = function handleClick(evt) {
+    // Prevent clicks on the tooltip from triggering the button click event
+    setAllowTooltipVisibility(false);
+
+    if (evt.target === tooltipRef.current) {
+      evt.preventDefault();
+      return;
+    }
+  };
+
+  React.useEffect(function () {
+    var handleEscKeyDown = function handleEscKeyDown(event) {
+      if (match.matches(event, [keys.Escape])) {
+        setAllowTooltipVisibility(false);
+        setIsHovered(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleEscKeyDown);
+    return function () {
+      return document.removeEventListener('keydown', handleEscKeyDown);
+    };
+  }, []);
+  var enabled = index.useFeatureFlag('enable-v11-release');
+  var buttonClasses = cx__default["default"](className, (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--btn"), true), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--btn--sm"), size === 'small' && !isExpressive || size === 'sm' && !isExpressive || small && !isExpressive), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--btn--md"), size === 'field' && !isExpressive || size === 'md' && !isExpressive), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--btn--lg"), enabled ? size === 'xl' : size === 'lg'), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--btn--xl"), enabled ? size === '2xl' : size === 'xl'), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--btn--").concat(kind), kind), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--btn--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--btn--expressive"), isExpressive), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tooltip--visible"), isHovered), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tooltip--hidden"), hasIconOnly && !allowTooltipVisibility), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--btn--icon-only"), hasIconOnly), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--btn--selected"), hasIconOnly && isSelected && kind === 'ghost'), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tooltip__trigger"), hasIconOnly), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tooltip--a11y"), hasIconOnly), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--btn--icon-only--").concat(tooltipPosition), hasIconOnly && tooltipPosition), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tooltip--align-").concat(tooltipAlignment), hasIconOnly && tooltipAlignment), _classNames));
+  var commonProps = {
+    tabIndex: tabIndex,
+    className: buttonClasses,
+    ref: ref
+  };
+  var buttonImage = !ButtonImageElement ? null : /*#__PURE__*/React__default["default"].createElement(ButtonImageElement, {
+    "aria-label": iconDescription,
+    className: "".concat(prefix, "--btn__icon"),
+    "aria-hidden": "true"
+  });
+  var dangerButtonVariants = ['danger', 'danger--tertiary', 'danger--ghost'];
+  var component = 'button';
+  var assistiveId = useId.useId('danger-description');
+  var otherProps = {
+    disabled: disabled,
+    type: type,
+    'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : null,
+    'aria-pressed': hasIconOnly && kind === 'ghost' ? isSelected : null
+  };
+  var anchorProps = {
+    href: href
+  };
+  var assistiveText;
+
+  if (hasIconOnly) {
+    assistiveText = /*#__PURE__*/React__default["default"].createElement("div", {
+      ref: tooltipRef,
+      onMouseEnter: handleMouseEnter,
+      className: "".concat(prefix, "--assistive-text")
+    }, iconDescription);
+  } else if (dangerButtonVariants.includes(kind)) {
+    assistiveText = /*#__PURE__*/React__default["default"].createElement("span", {
+      id: assistiveId,
+      className: "".concat(prefix, "--visually-hidden")
+    }, dangerDescription);
+  } else {
+    assistiveText = null;
+  }
+
+  if (as) {
+    component = as;
+    otherProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, otherProps), anchorProps);
+  } else if (href && !disabled) {
+    component = 'a';
+    otherProps = anchorProps;
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(component, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    onMouseEnter: events.composeEventHandlers([onMouseEnter, handleMouseEnter]),
+    onMouseLeave: events.composeEventHandlers([onMouseLeave, handleMouseLeave]),
+    onFocus: events.composeEventHandlers([onFocus, handleFocus]),
+    onBlur: events.composeEventHandlers([onBlur, handleBlur]),
+    onClick: events.composeEventHandlers([onClick, handleClick])
+  }, rest), commonProps), otherProps), assistiveText, children, buttonImage);
+});
+Button.displayName = 'Button';
+Button.propTypes = {
+  /**
+   * Specify how the button itself should be rendered.
+   * Make sure to apply all props to the root node and render children appropriately
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+
+  /**
+   * Specify the content of your Button
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be added to your Button
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the message read by screen readers for the danger button variant
+   */
+  dangerDescription: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the Button should be disabled, or not
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify if the button is an icon-only button
+   */
+  hasIconOnly: PropTypes__default["default"].bool,
+
+  /**
+   * Optionally specify an href for your Button to become an `<a>` element
+   */
+  href: PropTypes__default["default"].string,
+
+  /**
+   * If specifying the `renderIcon` prop, provide a description for that icon that can
+   * be read by screen readers
+   */
+  iconDescription: function iconDescription(props) {
+    if (props.renderIcon && !props.children && !props.iconDescription) {
+      return new Error('renderIcon property specified without also providing an iconDescription property.');
+    }
+
+    return undefined;
+  },
+
+  /**
+   * Specify whether the Button is expressive, or not
+   */
+  isExpressive: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether the Button is currently selected. Only applies to the Ghost variant.
+   */
+  isSelected: PropTypes__default["default"].bool,
+
+  /**
+   * Specify the kind of Button you want to create
+   */
+  kind: PropTypes__default["default"].oneOf(types.ButtonKinds),
+
+  /**
+   * Provide an optional function to be called when the button element
+   * loses focus
+   */
+  onBlur: PropTypes__default["default"].func,
+
+  /**
+   * Provide an optional function to be called when the button element
+   * is clicked
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Provide an optional function to be called when the button element
+   * receives focus
+   */
+  onFocus: PropTypes__default["default"].func,
+
+  /**
+   * Provide an optional function to be called when the mouse
+   * enters the button element
+   */
+  onMouseEnter: PropTypes__default["default"].func,
+
+  /**
+   * Provide an optional function to be called when the mouse
+   * leaves the button element
+   */
+  onMouseLeave: PropTypes__default["default"].func,
+
+  /**
+   * Optional prop to allow overriding the icon rendering.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+
+  /**
+   * Optional prop to specify the role of the Button
+   */
+  role: PropTypes__default["default"].string,
+
+  /**
+   * Specify the size of the button, from the following list of sizes:
+   */
+  size: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl', '2xl']) : PropTypes__default["default"].oneOf(['default', 'field', 'small', 'sm', 'md', 'lg', 'xl', '2xl']),
+
+  /**
+   * Deprecated in v10 in favor of `size`.
+   * Specify whether the Button should be a small variant
+   */
+  small: deprecate["default"](PropTypes__default["default"].bool, "\nThe prop `small` for Button has been deprecated in favor of `size`. Please use `size=\"sm\"` instead."),
+
+  /**
+   * Optional prop to specify the tabIndex of the Button
+   */
+  tabIndex: PropTypes__default["default"].number,
+
+  /**
+   * Specify the alignment of the tooltip to the icon-only button.
+   * Can be one of: start, center, or end.
+   */
+  tooltipAlignment: PropTypes__default["default"].oneOf(['start', 'center', 'end']),
+
+  /**
+   * Specify the direction of the tooltip for icon-only buttons.
+   * Can be either top, right, bottom, or left.
+   */
+  tooltipPosition: PropTypes__default["default"].oneOf(['top', 'right', 'bottom', 'left']),
+
+  /**
+   * Optional prop to specify the type of the Button
+   */
+  type: PropTypes__default["default"].oneOf(['button', 'reset', 'submit'])
+};
+var Button$1 = Button;
+
+exports["default"] = Button$1;

package/lib/components/ButtonSet/ButtonSet.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["children", "className", "stacked"];
+var ButtonSet = /*#__PURE__*/React__default["default"].forwardRef(function ButtonSet(_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      stacked = _ref.stacked,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var buttonSetClasses = cx__default["default"](className, "".concat(prefix, "--btn-set"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--btn-set--stacked"), stacked));
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: buttonSetClasses,
+    ref: ref
+  }), children);
+});
+ButtonSet.displayName = 'ButtonSet';
+ButtonSet.propTypes = {
+  /**
+   * Specify the content of your ButtonSet
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be added to your ButtonSet
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the button arrangement of the set (vertically stacked or
+   * horizontal)
+   */
+  stacked: PropTypes__default["default"].bool
+};
+var ButtonSet$1 = ButtonSet;
+
+exports["default"] = ButtonSet$1;

package/lib/components/Checkbox/Checkbox.Skeleton.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className"];
+
+var CheckboxSkeleton = function CheckboxSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: cx__default["default"]("".concat(prefix, "--form-item"), "".concat(prefix, "--checkbox-wrapper"), "".concat(prefix, "--checkbox-label"), className)
+  }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--checkbox-label-text ").concat(prefix, "--skeleton")
+  }));
+};
+
+CheckboxSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string
+};
+var CheckboxSkeleton$1 = CheckboxSkeleton;
+
+exports["default"] = CheckboxSkeleton$1;

package/lib/components/Checkbox/Checkbox.js

@@ -0,0 +1,146 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+require('../Text/index.js');
+var index = require('../FeatureFlags/index.js');
+var deprecate = require('../../prop-types/deprecate.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var Text = require('../Text/Text.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className", "id", "labelText", "onChange", "indeterminate", "hideLabel", "wrapperClassName", "title"];
+var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function Checkbox(_ref, _ref2) {
+  var className = _ref.className,
+      id = _ref.id,
+      labelText = _ref.labelText,
+      _onChange = _ref.onChange,
+      indeterminate = _ref.indeterminate,
+      hideLabel = _ref.hideLabel,
+      wrapperClassName = _ref.wrapperClassName,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var enabled = index.useFeatureFlag('enable-v11-release');
+  var prefix = usePrefix.usePrefix();
+  var labelClasses = cx__default["default"]("".concat(prefix, "--checkbox-label"), [enabled ? null : className]);
+  var innerLabelClasses = cx__default["default"]("".concat(prefix, "--checkbox-label-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--form-item"), "".concat(prefix, "--checkbox-wrapper"), [enabled ? className : wrapperClassName]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: wrapperClasses
+  }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, {
+    type: "checkbox",
+    onChange: function onChange(evt) {
+      if (enabled) {
+        _onChange(evt, {
+          checked: evt.target.checked,
+          id: id
+        });
+      } else {
+        _onChange(evt.target.checked, id, evt);
+      }
+    },
+    className: "".concat(prefix, "--checkbox"),
+    id: id,
+    ref: function ref(el) {
+      if (el) {
+        el.indeterminate = indeterminate;
+      }
+
+      if (typeof _ref2 === 'function') {
+        _ref2(el);
+      } else if (Object(_ref2) === _ref2) {
+        _ref2.current = el;
+      }
+    }
+  })), /*#__PURE__*/React__default["default"].createElement("label", {
+    htmlFor: id,
+    className: labelClasses,
+    title: title || null
+  }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    className: innerLabelClasses
+  }, labelText)));
+});
+Checkbox.propTypes = {
+  /**
+   * Specify whether the underlying input should be checked
+   */
+  checked: PropTypes__default["default"].bool,
+
+  /**
+   * Specify an optional className to be applied to the <label> node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the underlying input should be checked by default
+   */
+  defaultChecked: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether the Checkbox should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  hideLabel: PropTypes__default["default"].bool,
+
+  /**
+   * Provide an `id` to uniquely identify the Checkbox input
+   */
+  id: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Specify whether the Checkbox is in an indeterminate state
+   */
+  indeterminate: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a label to provide a description of the Checkbox input that you are
+   * exposing to the user
+   */
+  labelText: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Receives three arguments: true/false, the checkbox's id, and the dom event.
+   * `(value, id, event) => console.log({value, id, event})`
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Specify a title for the <label> node for the Checkbox
+   */
+  title: PropTypes__default["default"].string,
+
+  /**
+   * The CSS class name to be placed on the wrapping element
+   */
+  wrapperClassName: deprecate["default"](PropTypes__default["default"].string, "\nThe prop `wrapperClassName` for Checkbox will be deprecated in V11 in favor of `className`. `className` will then be placed on the outer wrapper.")
+};
+Checkbox.defaultProps = {
+  onChange: function onChange() {},
+  indeterminate: false
+};
+Checkbox.displayName = 'Checkbox';
+var Checkbox$1 = Checkbox;
+
+exports["default"] = Checkbox$1;