@carbon/react 0.17.0 → 1.0.1

package/lib/components/Accordion/AccordionItem.js

@@ -0,0 +1,186 @@
+/**
+ * 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 iconsReact = require('@carbon/icons-react');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+require('../Text/index.js');
+var useId = require('../../internal/useId.js');
+var deprecate = require('../../prop-types/deprecate.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var Text = require('../Text/Text.js');
+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 }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["children", "className", "iconDescription", "open", "onHeadingClick", "renderExpando", "renderToggle", "title", "disabled"];
+
+var defaultRenderToggle = function defaultRenderToggle(props) {
+  return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+    type: "button"
+  }, props));
+};
+
+function AccordionItem(_ref) {
+  var _cx;
+
+  var children = _ref.children,
+      customClassName = _ref.className;
+      _ref.iconDescription;
+      var _ref$open = _ref.open,
+      open = _ref$open === void 0 ? false : _ref$open,
+      onHeadingClick = _ref.onHeadingClick,
+      _ref$renderExpando = _ref.renderExpando,
+      renderExpando = _ref$renderExpando === void 0 ? defaultRenderToggle : _ref$renderExpando,
+      renderToggle = _ref.renderToggle,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? 'title' : _ref$title,
+      disabled = _ref.disabled,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var _useState = React.useState(open),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = React.useState(open),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      prevIsOpen = _useState4[0],
+      setPrevIsOpen = _useState4[1];
+
+  var _useState5 = React.useState(''),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      animation = _useState6[0],
+      setAnimation = _useState6[1];
+
+  var id = useId.useId('accordion-item');
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion__item"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion__item--active"), isOpen), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion__item--").concat(animation), animation), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion__item--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+  var Toggle = renderToggle || renderExpando; // remove renderExpando in next major release
+
+  if (open !== prevIsOpen) {
+    setAnimation(isOpen ? 'collapsing' : 'expanding');
+    setIsOpen(open);
+    setPrevIsOpen(open);
+  } // When the AccordionItem heading is clicked, toggle the open state of the
+  // panel
+
+
+  function onClick(event) {
+    var nextValue = !isOpen;
+    setAnimation(isOpen ? 'collapsing' : 'expanding');
+    setIsOpen(nextValue);
+
+    if (onHeadingClick) {
+      // TODO: normalize signature, potentially:
+      // onHeadingClick :: (event: Event, state: { isOpen: Boolean }) => any
+      onHeadingClick({
+        isOpen: nextValue,
+        event: event
+      });
+    }
+  } // If the AccordionItem is open, and the user hits the ESC key, then close it
+
+
+  function onKeyDown(event) {
+    if (isOpen && match.match(event, keys.Escape)) {
+      setIsOpen(false);
+    }
+  }
+
+  function handleAnimationEnd(event) {
+    if (rest.handleAnimationEnd) {
+      rest.handleAnimationEnd(event);
+    }
+
+    setAnimation('');
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
+    className: className
+  }, rest, {
+    onAnimationEnd: handleAnimationEnd
+  }), /*#__PURE__*/React__default["default"].createElement(Toggle, {
+    disabled: disabled,
+    "aria-controls": id,
+    "aria-expanded": isOpen,
+    className: "".concat(prefix, "--accordion__heading"),
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    type: "button"
+  }, /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronRight, {
+    className: "".concat(prefix, "--accordion__arrow")
+  }), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "div",
+    className: "".concat(prefix, "--accordion__title")
+  }, title)), /*#__PURE__*/React__default["default"].createElement("div", {
+    id: id,
+    className: "".concat(prefix, "--accordion__content")
+  }, children));
+}
+
+AccordionItem.propTypes = {
+  /**
+   * Provide the contents of your AccordionItem
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether an individual AccordionItem should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * The handler of the massaged `click` event.
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * The handler of the massaged `click` event on the heading.
+   */
+  onHeadingClick: PropTypes__default["default"].func,
+
+  /**
+   * `true` to open the expand.
+   */
+  open: PropTypes__default["default"].bool,
+
+  /**
+   * The callback function to render the expand button.
+   * Can be a React component class.
+   */
+  renderExpando: deprecate["default"](PropTypes__default["default"].func, 'The `renderExpando` prop has been deprecated and will be removed in the next major release of Carbon. Use the `renderToggle` prop instead.'),
+
+  /**
+   * The callback function to render the expand button.
+   * Can be a React component class.
+   */
+  renderToggle: PropTypes__default["default"].func,
+
+  /**
+   * The accordion title.
+   */
+  title: PropTypes__default["default"].node
+};
+
+exports["default"] = AccordionItem;

package/lib/components/Accordion/index.js

@@ -0,0 +1,16 @@
+/**
+ * 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 Accordion = require('./Accordion.js');
+
+
+
+exports["default"] = Accordion["default"];

package/lib/components/AccordionItem/index.js

@@ -0,0 +1,16 @@
+/**
+ * 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 AccordionItem = require('../Accordion/AccordionItem.js');
+
+// Alias for import paths for build tools that rely on this
+
+exports["default"] = AccordionItem["default"];

package/lib/components/AspectRatio/AspectRatio.js

@@ -0,0 +1,77 @@
+/**
+ * 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 cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["as", "className", "children", "ratio"];
+/**
+ * The AspectRatio component provides a `ratio` prop that will be used to
+ * specify the aspect ratio that the children you provide will be displayed in.
+ * This is often useful alongside our grid components, or for media assets like
+ * images or videos.
+ */
+
+function AspectRatio(_ref) {
+  var _ref$as = _ref.as,
+      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
+      containerClassName = _ref.className,
+      children = _ref.children,
+      _ref$ratio = _ref.ratio,
+      ratio = _ref$ratio === void 0 ? '1x1' : _ref$ratio,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"](containerClassName, "".concat(prefix, "--aspect-ratio"), "".concat(prefix, "--aspect-ratio--").concat(ratio));
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+    className: className
+  }, rest), children);
+}
+
+AspectRatio.propTypes = {
+  /**
+   * Provide a custom component or string to be rendered as the outermost node
+   * of the component. This is useful if you want to deviate from the default
+   * `div` tag, where you could specify `section` or `article` instead.
+   *
+   * ```jsx
+   * <AspectRatio as="article">My content</AspectRatio>
+   * ```
+   */
+  as: PropTypes__default["default"].elementType,
+
+  /**
+   * Specify the content that will be placed in the aspect ratio
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify a class name for the outermost node of the component
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the ratio to be used by the aspect ratio container. This will
+   * determine what aspect ratio your content will be displayed in.
+   */
+  ratio: PropTypes__default["default"].oneOf(['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'])
+};
+
+exports["default"] = AspectRatio;

package/lib/components/Breadcrumb/Breadcrumb.Skeleton.js

@@ -0,0 +1,55 @@
+/**
+ * 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 _Item, _Item2, _Item3;
+
+var _excluded = ["className"];
+
+function Item() {
+  var prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--breadcrumb-item")
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--link")
+  }, "\xA0"));
+}
+
+function BreadcrumbSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classes = cx__default["default"]("".concat(prefix, "--breadcrumb"), "".concat(prefix, "--skeleton"), className);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: classes
+  }, rest), _Item || (_Item = /*#__PURE__*/React__default["default"].createElement(Item, null)), _Item2 || (_Item2 = /*#__PURE__*/React__default["default"].createElement(Item, null)), _Item3 || (_Item3 = /*#__PURE__*/React__default["default"].createElement(Item, null)));
+}
+
+BreadcrumbSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string
+};
+
+exports["default"] = BreadcrumbSkeleton;

package/lib/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,68 @@
+/**
+ * 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 = ["aria-label", "children", "className", "noTrailingSlash"];
+var Breadcrumb = /*#__PURE__*/React__default["default"].forwardRef(function Breadcrumb(_ref, ref) {
+  var _cx;
+
+  var ariaLabel = _ref['aria-label'],
+      children = _ref.children,
+      customClassNameNav = _ref.className,
+      noTrailingSlash = _ref.noTrailingSlash,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--breadcrumb"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--breadcrumb--no-trailing-slash"), noTrailingSlash), _cx));
+  return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({
+    className: customClassNameNav,
+    "aria-label": ariaLabel ? ariaLabel : 'Breadcrumb',
+    ref: ref
+  }, rest), /*#__PURE__*/React__default["default"].createElement("ol", {
+    className: className
+  }, children));
+});
+Breadcrumb.displayName = 'Breadcrumb';
+Breadcrumb.propTypes = {
+  /**
+   * Specify the label for the breadcrumb container
+   */
+  'aria-label': PropTypes__default["default"].string,
+
+  /**
+   * Pass in the BreadcrumbItem's for your Breadcrumb
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Optional prop to omit the trailing slash for the breadcrumbs
+   */
+  noTrailingSlash: PropTypes__default["default"].bool
+};
+var Breadcrumb$1 = Breadcrumb;
+
+exports["default"] = Breadcrumb$1;

package/lib/components/Breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,104 @@
+/**
+ * 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 Link = require('../Link/Link.js');
+var iconsReact = require('@carbon/icons-react');
+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 = ["aria-current", "children", "className", "href", "isCurrentPage"];
+var BreadcrumbItem = /*#__PURE__*/React__default["default"].forwardRef(function BreadcrumbItem(_ref, ref) {
+  var _cx;
+
+  var ariaCurrent = _ref['aria-current'],
+      children = _ref.children,
+      customClassName = _ref.className,
+      href = _ref.href,
+      isCurrentPage = _ref.isCurrentPage,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--breadcrumb-item"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--breadcrumb-item--current"), isCurrentPage && ariaCurrent !== 'page'), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+
+  if (children.type && children.type.displayName !== undefined && children.type.displayName.includes('OverflowMenu')) {
+    var horizontalOverflowIcon = /*#__PURE__*/React__default["default"].createElement(iconsReact.OverflowMenuHorizontal, {
+      className: "".concat(prefix, "--overflow-menu__icon")
+    });
+    return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
+      className: className
+    }, rest), /*#__PURE__*/React__default["default"].cloneElement(children, {
+      menuOptionsClass: "".concat(prefix, "--breadcrumb-menu-options"),
+      menuOffset: {
+        top: 10,
+        left: 59
+      },
+      renderIcon: function renderIcon() {
+        return horizontalOverflowIcon;
+      }
+    }));
+  }
+
+  if (typeof children === 'string') {
+    return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
+      className: className,
+      ref: ref
+    }, rest), href ? /*#__PURE__*/React__default["default"].createElement(Link["default"], {
+      href: href,
+      "aria-current": ariaCurrent
+    }, children) : /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "".concat(prefix, "--link")
+    }, children));
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
+    className: className,
+    ref: ref
+  }, rest), /*#__PURE__*/React__default["default"].cloneElement(children, {
+    'aria-current': ariaCurrent,
+    className: cx__default["default"]("".concat(prefix, "--link"), children.props.className)
+  }));
+});
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+BreadcrumbItem.propTypes = {
+  'aria-current': PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].bool]),
+
+  /**
+   * Pass in content that will be inside of the BreadcrumbItem
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Optional string representing the link location for the BreadcrumbItem
+   */
+  href: PropTypes__default["default"].string,
+
+  /**
+   * Provide if this breadcrumb item represents the current page
+   */
+  isCurrentPage: PropTypes__default["default"].bool
+};
+var BreadcrumbItem$1 = BreadcrumbItem;
+
+exports["default"] = BreadcrumbItem$1;

package/lib/components/Button/Button.Skeleton.js

@@ -0,0 +1,98 @@
+/**
+ * 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');
+var FeatureFlags = require('@carbon/feature-flags');
+
+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 = ["className", "small", "href", "size"];
+
+var ButtonSkeleton = function ButtonSkeleton(_ref) {
+  var _cx;
+
+  var className = _ref.className,
+      _ref$small = _ref.small,
+      small = _ref$small === void 0 ? false : _ref$small,
+      href = _ref.href,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? FeatureFlags__namespace.enabled('enable-v11-release') ? 'lg' : 'default' : _ref$size,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var buttonClasses = cx__default["default"](className, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--skeleton"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--sm"), small || size === 'sm'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--md"), size === 'field' || size === 'md'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--xl"), size === 'xl'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--2xl"), size === '2xl'), _cx));
+
+  var commonProps = _rollupPluginBabelHelpers.objectSpread2({
+    className: buttonClasses
+  }, rest);
+
+  var button = /*#__PURE__*/React__default["default"].createElement("div", commonProps);
+  var anchor = /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({}, commonProps, {
+    href: href,
+    role: "button"
+  })); // eslint-disable-line
+
+  return href ? anchor : button;
+};
+
+ButtonSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Optionally specify an href for your Button to become an `<a>` element
+   */
+  href: PropTypes__default["default"].string,
+
+  /**
+   * Specify the size of the button, from a list of available sizes.
+   * For `default` buttons, this prop can remain unspecified or use `default`.
+   * In the next major release of Carbon, `default`, `field`, and `small` will be removed
+   */
+  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']),
+
+  /**
+   * Specify whether the Button should be a small variant
+   */
+  small: PropTypes__default["default"].bool
+};
+var ButtonSkeleton$1 = ButtonSkeleton;
+
+exports["default"] = ButtonSkeleton$1;