@carbon/react 0.17.0 → 1.0.1

package/es/components/PaginationNav/PaginationNav.js

@@ -0,0 +1,436 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, toConsumableArray as _toConsumableArray, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default, { useState, useEffect, useRef } from 'react';
+import cx from 'classnames';
+import { CaretRight, CaretLeft, OverflowMenuHorizontal } from '@carbon/icons-react';
+import Button from '../Button/Button.js';
+import { IconButton } from '../IconButton/index.js';
+import * as FeatureFlags from '@carbon/feature-flags';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className", "onChange", "totalItems", "itemsShown", "page", "loop", "translateWithId"];
+
+var _CaretRight, _CaretLeft, _option;
+var translationIds = {
+  'carbon.pagination-nav.next': 'Next',
+  'carbon.pagination-nav.previous': 'Previous',
+  'carbon.pagination-nav.item': 'Page',
+  'carbon.pagination-nav.active': 'Active',
+  'carbon.pagination-nav.of': 'of'
+};
+
+function translateWithId(messageId) {
+  return translationIds[messageId];
+} // https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+
+
+function usePrevious(value) {
+  var ref = useRef();
+  useEffect(function () {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+function getCuts(page, totalItems, itemsThatFit) {
+  var splitPoint = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+
+  if (itemsThatFit >= totalItems) {
+    return {
+      front: 0,
+      back: 0
+    };
+  }
+
+  var split = splitPoint || Math.ceil(itemsThatFit / 2) - 1;
+  var frontHidden = page + 1 - split;
+  var backHidden = totalItems - page - (itemsThatFit - split) + 1;
+
+  if (frontHidden <= 1) {
+    backHidden -= frontHidden <= 0 ? Math.abs(frontHidden) + 1 : 0;
+    frontHidden = 0;
+  }
+
+  if (backHidden <= 1) {
+    frontHidden -= backHidden <= 0 ? Math.abs(backHidden) + 1 : 0;
+    backHidden = 0;
+  }
+
+  return {
+    front: frontHidden,
+    back: backHidden
+  };
+}
+
+function DirectionButton(_ref) {
+  var direction = _ref.direction,
+      label = _ref.label,
+      disabled = _ref.disabled,
+      onClick = _ref.onClick;
+  var prefix = usePrefix();
+  var icon = direction === 'forward' ? CaretRight : CaretLeft;
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: "".concat(prefix, "--pagination-nav__list-item")
+  }, FeatureFlags.enabled('enable-v11-release') ? /*#__PURE__*/React__default.createElement(IconButton, {
+    align: "bottom",
+    disabled: disabled,
+    kind: "ghost",
+    label: label,
+    onClick: onClick
+  }, direction === 'forward' ? _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null)) : _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null))) : /*#__PURE__*/React__default.createElement(Button, {
+    disabled: disabled,
+    renderIcon: icon,
+    kind: "ghost",
+    hasIconOnly: true,
+    iconDescription: label,
+    tooltipAlignment: "center",
+    tooltipPosition: "bottom",
+    onClick: onClick
+  }));
+}
+
+function PaginationItem(_ref2) {
+  var page = _ref2.page,
+      isActive = _ref2.isActive,
+      onClick = _ref2.onClick,
+      _ref2$translateWithId = _ref2.translateWithId,
+      t = _ref2$translateWithId === void 0 ? translateWithId : _ref2$translateWithId;
+  var prefix = usePrefix();
+  var itemLabel = t('carbon.pagination-nav.item');
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: "".concat(prefix, "--pagination-nav__list-item")
+  }, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: cx("".concat(prefix, "--pagination-nav__page"), _defineProperty({}, "".concat(prefix, "--pagination-nav__page--active"), isActive)),
+    onClick: onClick,
+    "data-page": page,
+    "aria-current": isActive ? 'page' : null
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--pagination-nav__accessibility-label")
+  }, isActive ? "".concat(t('carbon.pagination-nav.active'), ", ").concat(itemLabel) : itemLabel), page));
+}
+
+function PaginationOverflow(_ref3) {
+  var fromIndex = _ref3.fromIndex,
+      count = _ref3.count,
+      onSelect = _ref3.onSelect,
+      _ref3$translateWithId = _ref3.translateWithId,
+      t = _ref3$translateWithId === void 0 ? translateWithId : _ref3$translateWithId;
+  var prefix = usePrefix();
+
+  if (count > 1) {
+    return /*#__PURE__*/React__default.createElement("li", {
+      className: "".concat(prefix, "--pagination-nav__list-item")
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(prefix, "--pagination-nav__select")
+    }, /*#__PURE__*/React__default.createElement("select", {
+      className: "".concat(prefix, "--pagination-nav__page ").concat(prefix, "--pagination-nav__page--select"),
+      "aria-label": "Select ".concat(t('carbon.pagination-nav.item'), " number"),
+      onChange: function onChange(e) {
+        var index = Number(e.target.value);
+        onSelect(index);
+      }
+    }, _option || (_option = /*#__PURE__*/React__default.createElement("option", {
+      value: "",
+      hidden: true
+    })), _toConsumableArray(Array(count)).map(function (e, i) {
+      return /*#__PURE__*/React__default.createElement("option", {
+        value: (fromIndex + i).toString(),
+        "data-page": fromIndex + i + 1,
+        key: "overflow-".concat(fromIndex + i)
+      }, fromIndex + i + 1);
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(prefix, "--pagination-nav__select-icon-wrapper")
+    }, /*#__PURE__*/React__default.createElement(OverflowMenuHorizontal, {
+      className: "".concat(prefix, "--pagination-nav__select-icon")
+    }))));
+  }
+
+  if (count === 1) {
+    return /*#__PURE__*/React__default.createElement(PaginationItem, {
+      page: fromIndex + 1,
+      translateWithId: t,
+      onClick: function onClick() {
+        onSelect(fromIndex);
+      }
+    });
+  }
+
+  return null;
+}
+
+var PaginationNav = /*#__PURE__*/React__default.forwardRef(function PaginationNav(_ref4, ref) {
+  var className = _ref4.className,
+      _ref4$onChange = _ref4.onChange,
+      onChange = _ref4$onChange === void 0 ? function () {} : _ref4$onChange,
+      totalItems = _ref4.totalItems,
+      _ref4$itemsShown = _ref4.itemsShown,
+      itemsShown = _ref4$itemsShown === void 0 ? 10 : _ref4$itemsShown,
+      _ref4$page = _ref4.page,
+      page = _ref4$page === void 0 ? 0 : _ref4$page,
+      _ref4$loop = _ref4.loop,
+      loop = _ref4$loop === void 0 ? false : _ref4$loop,
+      _ref4$translateWithId = _ref4.translateWithId,
+      t = _ref4$translateWithId === void 0 ? translateWithId : _ref4$translateWithId,
+      rest = _objectWithoutProperties(_ref4, _excluded);
+
+  var _useState = useState(page),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentPage = _useState2[0],
+      setCurrentPage = _useState2[1];
+
+  var _useState3 = useState(itemsShown >= 4 ? itemsShown : 4),
+      _useState4 = _slicedToArray(_useState3, 2),
+      itemsThatFit = _useState4[0],
+      setItemsThatFit = _useState4[1];
+
+  var _useState5 = useState(getCuts(currentPage, totalItems, itemsThatFit)),
+      _useState6 = _slicedToArray(_useState5, 2),
+      cuts = _useState6[0],
+      setCuts = _useState6[1];
+
+  var prevPage = usePrevious(currentPage);
+  var prefix = usePrefix();
+
+  function jumpToItem(index) {
+    if (index >= 0 && index < totalItems) {
+      setCurrentPage(index);
+      onChange(index);
+    }
+  }
+
+  function jumpToNext() {
+    var nextIndex = currentPage + 1;
+
+    if (nextIndex >= totalItems) {
+      if (loop) {
+        jumpToItem(0);
+      }
+    } else {
+      jumpToItem(nextIndex);
+    }
+  }
+
+  function jumpToPrevious() {
+    var previousIndex = currentPage - 1;
+
+    if (previousIndex < 0) {
+      if (loop) {
+        jumpToItem(totalItems - 1);
+      }
+    } else {
+      jumpToItem(previousIndex);
+    }
+  }
+
+  function pageWouldBeHidden(page) {
+    var startOffset = itemsThatFit <= 4 && page > 1 ? 0 : 1;
+    var wouldBeHiddenInFront = page >= startOffset && page <= cuts.front;
+    var wouldBeHiddenInBack = page >= totalItems - cuts.back - 1 && page <= totalItems - 2;
+    return wouldBeHiddenInFront || wouldBeHiddenInBack;
+  } // jump to new page if props.page is updated
+
+
+  useEffect(function () {
+    setCurrentPage(page);
+  }, [page]); // re-calculate cuts if props.totalItems or props.itemsShown change
+
+  useEffect(function () {
+    setItemsThatFit(itemsShown >= 4 ? itemsShown : 4);
+    setCuts(getCuts(currentPage, totalItems, itemsShown));
+  }, [totalItems, itemsShown]); // eslint-disable-line react-hooks/exhaustive-deps
+  // update cuts if necessary whenever currentPage changes
+
+  useEffect(function () {
+    if (pageWouldBeHidden(currentPage)) {
+      var delta = currentPage - prevPage || 0;
+
+      if (delta > 0) {
+        var splitPoint = itemsThatFit - 3;
+        setCuts(getCuts(currentPage, totalItems, itemsThatFit, splitPoint));
+      } else {
+        var _splitPoint = itemsThatFit > 4 ? 2 : 1;
+
+        setCuts(getCuts(currentPage, totalItems, itemsThatFit, _splitPoint));
+      }
+    }
+  }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  var classNames = cx("".concat(prefix, "--pagination-nav"), className);
+  var backwardButtonDisabled = !loop && currentPage === 0;
+  var forwardButtonDisabled = !loop && currentPage === totalItems - 1;
+  var startOffset = itemsThatFit <= 4 && currentPage > 1 ? 0 : 1;
+  return /*#__PURE__*/React__default.createElement("nav", _extends({
+    className: classNames,
+    ref: ref
+  }, rest, {
+    "aria-label": "pagination"
+  }), /*#__PURE__*/React__default.createElement("ul", {
+    className: "".concat(prefix, "--pagination-nav__list")
+  }, /*#__PURE__*/React__default.createElement(DirectionButton, {
+    direction: "backward",
+    label: t('carbon.pagination-nav.previous'),
+    disabled: backwardButtonDisabled,
+    onClick: jumpToPrevious
+  }), // render first item if at least 5 items can be displayed or
+  // 4 items can be displayed and the current page is either 0 or 1
+  (itemsThatFit >= 5 || itemsThatFit <= 4 && currentPage <= 1) && /*#__PURE__*/React__default.createElement(PaginationItem, {
+    page: 1,
+    translateWithId: t,
+    isActive: currentPage === 0,
+    onClick: function onClick() {
+      jumpToItem(0);
+    }
+  }), /*#__PURE__*/React__default.createElement(PaginationOverflow, {
+    fromIndex: startOffset,
+    count: cuts.front,
+    onSelect: jumpToItem
+  }), // render items between overflows
+  _toConsumableArray(Array(totalItems)).map(function (e, i) {
+    return i;
+  }).slice(startOffset + cuts.front, (1 + cuts.back) * -1).map(function (item) {
+    return /*#__PURE__*/React__default.createElement(PaginationItem, {
+      key: "item-".concat(item),
+      page: item + 1,
+      translateWithId: t,
+      isActive: currentPage === item,
+      onClick: function onClick() {
+        jumpToItem(item);
+      }
+    });
+  }), /*#__PURE__*/React__default.createElement(PaginationOverflow, {
+    fromIndex: totalItems - cuts.back - 1,
+    count: cuts.back,
+    onSelect: jumpToItem
+  }), // render last item unless there is only one in total
+  totalItems > 1 && /*#__PURE__*/React__default.createElement(PaginationItem, {
+    page: totalItems,
+    translateWithId: t,
+    isActive: currentPage === totalItems - 1,
+    onClick: function onClick() {
+      jumpToItem(totalItems - 1);
+    }
+  }), /*#__PURE__*/React__default.createElement(DirectionButton, {
+    direction: "forward",
+    label: t('carbon.pagination-nav.next'),
+    disabled: forwardButtonDisabled,
+    onClick: jumpToNext
+  })), /*#__PURE__*/React__default.createElement("div", {
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    className: "".concat(prefix, "--pagination-nav__accessibility-label")
+  }, "".concat(t('carbon.pagination-nav.item'), " ").concat(currentPage + 1, " ").concat(t('carbon.pagination-nav.of'), " ").concat(totalItems)));
+});
+DirectionButton.propTypes = {
+  /**
+   * The direction this button represents ("forward" or "backward").
+   */
+  direction: PropTypes.oneOf(['forward', 'backward']),
+
+  /**
+   * Whether or not the button should be disabled.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * The label shown in the button's tooltip.
+   */
+  label: PropTypes.string,
+
+  /**
+   * The callback function called when the button is clicked.
+   */
+  onClick: PropTypes.func
+};
+PaginationItem.propTypes = {
+  /**
+   * Whether or not this is the currently active page.
+   */
+  isActive: PropTypes.bool,
+
+  /**
+   * The callback function called when the item is clicked.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * The page number this item represents.
+   */
+  page: PropTypes.number,
+
+  /**
+   * Specify a custom translation function that takes in a message identifier
+   * and returns the localized string for the message
+   */
+  translateWithId: PropTypes.func
+};
+PaginationOverflow.propTypes = {
+  /**
+   * How many items to display in this overflow.
+   */
+  count: PropTypes.number,
+
+  /**
+   * From which index on this overflow should start displaying pages.
+   */
+  fromIndex: PropTypes.number,
+
+  /**
+   * The callback function called when the user selects a page from the overflow.
+   */
+  onSelect: PropTypes.func,
+
+  /**
+   * Specify a custom translation function that takes in a message identifier
+   * and returns the localized string for the message
+   */
+  translateWithId: PropTypes.func
+};
+PaginationNav.displayName = 'PaginationNav';
+PaginationNav.propTypes = {
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * The number of items to be shown.
+   */
+  itemsShown: PropTypes.number,
+
+  /**
+   * Whether user should be able to loop through the items when reaching first / last.
+   */
+  loop: PropTypes.bool,
+
+  /**
+   * The callback function called when the current page changes.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * The current page.
+   */
+  page: PropTypes.number,
+
+  /**
+   * The total number of items.
+   */
+  totalItems: PropTypes.number,
+
+  /**
+   * Specify a custom translation function that takes in a message identifier
+   * and returns the localized string for the message
+   */
+  translateWithId: PropTypes.func
+};
+var PaginationNav$1 = PaginationNav;
+
+export { PaginationNav$1 as default };

package/es/components/Popover/index.js

@@ -0,0 +1,118 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["align", "as", "caret", "className", "children", "dropShadow", "highContrast", "open"],
+    _excluded2 = ["className", "children"];
+var Popover = /*#__PURE__*/React__default.forwardRef(function Popover(props, ref) {
+  var _cx;
+
+  var _props$align = props.align,
+      align = _props$align === void 0 ? 'bottom' : _props$align,
+      _props$as = props.as,
+      BaseComponent = _props$as === void 0 ? 'span' : _props$as,
+      _props$caret = props.caret,
+      caret = _props$caret === void 0 ? true : _props$caret,
+      customClassName = props.className,
+      children = props.children,
+      _props$dropShadow = props.dropShadow,
+      dropShadow = _props$dropShadow === void 0 ? true : _props$dropShadow,
+      _props$highContrast = props.highContrast,
+      highContrast = _props$highContrast === void 0 ? false : _props$highContrast,
+      open = props.open,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix();
+  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), true), _defineProperty(_cx, customClassName, !!customClassName), _cx));
+  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+    className: className,
+    ref: ref
+  }), children);
+}); // Note: this displayName is temporarily set so that Storybook ArgTable
+// correctly displays the name of this component
+
+if (process.env.NODE_ENV !== "production") {
+  Popover.displayName = 'Popover';
+}
+
+Popover.propTypes = {
+  /**
+   * Specify how the popover should align with the trigger element
+   */
+  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+
+  /**
+   * Specify whether a caret should be rendered
+   */
+  caret: PropTypes.bool,
+
+  /**
+   * Provide elements to be rendered inside of the component
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether a drop shadow should be rendered on the popover
+   */
+  dropShadow: PropTypes.bool,
+
+  /**
+   * Render the component using the high-contrast variant
+   */
+  highContrast: PropTypes.bool,
+
+  /**
+   * Specify whether the component is currently open or closed
+   */
+  open: PropTypes.bool.isRequired
+};
+var PopoverContent = /*#__PURE__*/React__default.forwardRef(function PopoverContent(_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded2);
+
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
+    className: "".concat(prefix, "--popover")
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: cx("".concat(prefix, "--popover-content"), className),
+    ref: ref
+  }, children), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--popover-caret")
+  }));
+});
+PopoverContent.propTypes = {
+  /**
+   * Provide elements to be rendered inside of the component
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string
+};
+
+export { Popover, PopoverContent };

package/es/components/PrimaryButton/PrimaryButton.js

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import Button from '../Button/Button.js';
+
+var PrimaryButton = function PrimaryButton(props) {
+  return /*#__PURE__*/React__default.createElement(Button, _extends({
+    kind: "primary"
+  }, props));
+};
+
+var PrimaryButton$1 = PrimaryButton;
+
+export { PrimaryButton$1 as default };

package/es/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,110 @@
+/**
+ * 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.
+ */
+
+import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { useId } from '../../internal/useId.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+function ProgressBar(_ref) {
+  var className = _ref.className,
+      helperText = _ref.helperText,
+      hideLabel = _ref.hideLabel,
+      label = _ref.label,
+      _ref$max = _ref.max,
+      max = _ref$max === void 0 ? 100 : _ref$max,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'big' : _ref$size,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      value = _ref.value;
+  var labelId = useId('progress-bar');
+  var helperId = useId('progress-bar-helper');
+  var prefix = usePrefix();
+  var indeterminate = value === null || value === undefined;
+  var cappedValue = value;
+
+  if (cappedValue > max) {
+    cappedValue = max;
+  }
+
+  if (cappedValue < 0) {
+    cappedValue = 0;
+  }
+
+  var percentage = cappedValue / max;
+  var wrapperClasses = cx("".concat(prefix, "--progress-bar"), "".concat(prefix, "--progress-bar--").concat(size), "".concat(prefix, "--progress-bar--").concat(type), _defineProperty({}, "".concat(prefix, "--progress-bar--indeterminate"), indeterminate), className);
+  var labelClasses = cx("".concat(prefix, "--progress-bar__label"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: wrapperClasses
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: labelClasses,
+    id: labelId
+  }, label), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--progress-bar__track"),
+    role: "progressbar",
+    "aria-labelledby": labelId,
+    "aria-describedby": helperText ? helperId : null,
+    "aria-valuemin": !indeterminate ? 0 : null,
+    "aria-valuemax": !indeterminate ? max : null,
+    "aria-valuenow": !indeterminate ? cappedValue : null
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--progress-bar__bar"),
+    style: {
+      transform: "scaleX(".concat(percentage, ")")
+    }
+  })), helperText && /*#__PURE__*/React__default.createElement("div", {
+    id: helperId,
+    className: "".concat(prefix, "--progress-bar__helper-text")
+  }, helperText));
+}
+
+ProgressBar.propTypes = {
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * The current progress as a textual representation.
+   */
+  helperText: PropTypes.string,
+
+  /**
+   * Whether the label should be visually hidden.
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * A label describing the progress bar.
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * The maximum value.
+   */
+  max: PropTypes.number,
+
+  /**
+   * Specify the size of the ProgressBar.
+   */
+  size: PropTypes.oneOf(['small', 'big']),
+
+  /**
+   * Defines the alignment variant of the progress bar.
+   */
+  type: PropTypes.oneOf(['default', 'inline', 'indented']),
+
+  /**
+   * The current value.
+   */
+  value: PropTypes.number
+};
+
+export { ProgressBar as default };