@atlaskit/progress-tracker/dist/es2019/internal/bar.js

A progress tracker displays the steps and progress through a journey.

/* bar.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./bar.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
const spacing = {
  comfortable: "var(--ds-space-500, 40px)",
  cosy: "var(--ds-space-200, 16px)",
  compact: "var(--ds-space-050, 4px)"
};
const progressBarStyles = null;

/**
 * __Progress bar__
 *
 * A progress bar describes the horizontal tracking bar that traverses each individual step.
 *
 */
const ProgressBar = ({
  percentageComplete,
  testId
}) => /*#__PURE__*/React.createElement("div", {
  "data-testid": testId,
  style: {
    width: `calc(${percentageComplete}% + ${percentageComplete / 100} * calc(var(--ds--pt--sp, ${spacing.cosy}) + ${"var(--ds-space-050, 4px)"}))`
  },
  className: ax(["_v564d86a _4t3iu2gc _kqswstnw _bfhk1856 _1ein1cuf _5fbc1cuf _1e021ssb _t9ecymk3 _1lww1oqq"])
});
export default ProgressBar;