@atlaskit/progress-bar/dist/es2019/components/progress-bar.js

A progress bar communicates the status of a system process.

/* progress-bar.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./progress-bar.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
const MIN_VALUE = 0;
const MAX_VALUE = 1;
const increasingBarAnimation = null;
const decreasingBarAnimation = null;
const containerStyles = null;
const containerAppearance = {
  default: "_bfhki8nm",
  success: "_bfhki8nm",
  inverse: "_bfhk1vck"
};
const barAppearance = {
  default: "_bfhk1aqn",
  success: "_bfhkkcmj",
  inverse: "_bfhkvuon"
};
const barStyles = null;
const determinateBarStyles = null;
const increasingBarStyles = null;
const decreasingBarStyles = null;

/**
 * __Progress bar__
 *
 * A progress bar displays the status of a given process.
 *
 * - [Examples](https://atlassian.design/components/progress-bar/examples)
 * - [Code](https://atlassian.design/components/progress-bar/code)
 * - [Usage](https://atlassian.design/components/progress-bar/usage)
 */
const ProgressBar = ({
  appearance = 'default',
  ariaLabel,
  isIndeterminate = false,
  testId = 'progress-bar',
  value = 0
}) => {
  const valueParsed = isIndeterminate ? MIN_VALUE : Math.max(MIN_VALUE, Math.min(value, MAX_VALUE));
  return /*#__PURE__*/React.createElement("div", {
    role: "progressbar",
    "aria-label": ariaLabel,
    "aria-valuemin": MIN_VALUE,
    "aria-valuenow": valueParsed,
    "aria-valuemax": MAX_VALUE,
    "data-testid": testId,
    className: ax(["_2rko1rr0 _1reo15vq _18m915vq _1bsb1osq _4t3ii2wt _kqswh2mm _bfhki8nm", containerAppearance[appearance]])
  }, isIndeterminate ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    className: ax(["_2rko1rr0 _1e0c1ule _4t3ii2wt _kqswstnw", barAppearance[appearance], "_5sagymdr _tip812c5 _j7hq7g40"])
  }), /*#__PURE__*/React.createElement("span", {
    className: ax(["_2rko1rr0 _1e0c1ule _4t3ii2wt _kqswstnw", barAppearance[appearance], "_ju251bs3 _5sagymdr _tip812c5 _j7hqio0v"])
  })) : /*#__PURE__*/React.createElement("span", {
    style: {
      width: `${Number(value) * 100}%`
    },
    className: ax(["_2rko1rr0 _1e0c1ule _4t3ii2wt _kqswstnw", barAppearance[appearance], "_v564calv"])
  }));
};
export default ProgressBar;