message: Use functional variables in documentation for ProgressBar
diff: title: ProgressBar
  ---
  -
  Use `ProgressBar` to visualize task completion.
  ## Default example
  @@ -12,10 +11,11 @@ Use `ProgressBar` to visualize task completion.
  ```
  If you'd like to use ProgressBar inline, pass the `inline` boolean prop & **be sure to set a width**.
  +
  ```jsx live
  <>
  <Text mr={3}>5 of 10</Text>
  - <ProgressBar progress={50} inline width='100px'/>
  + <ProgressBar progress={50} inline width="100px" />
  </>
  ```
  @@ -26,8 +26,8 @@ ProgressBar components get `COMMON` system props. Read our [System Props](/syste
  ## Component props
  | Name | Type | Default | Description |
  -| :- | :- | :-: | :- |
  +| :------- | :------ | :-------------: | :------------------------------------------------------------------------------------------------------------------------------- |
  | progress | Number | | Used to set the size of the green bar |
  | barSize | String | 'default' | Controls the height of the progress bar. Can be 'small', 'large', or 'default'. If omitted, height is set to the default height. |
  | inline | Boolean | false | Styles the progress bar inline |
  -| bg | String | 'green.5' | Set the progress bar color, defaults to bg-green |
  +| bg | String | 'state.success' | Set the progress bar color, defaults to bg-green |
  