{"version":3,"file":"progressBar.mjs","names":[],"sources":["../../../../package/common/progressBar/progressBar.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport { Progress, ProgressBarProps } from './progressBar.types';\n\nimport styles from './progressBar.module.pcss';\nimport { toneProps, useToneCheck } from '../styles/tone';\n\nfunction ProgressBar({\n  className = undefined,\n  total = 100,\n  progress = 0,\n  style = undefined,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: ProgressBarProps): ReactElement {\n  const progressArray: Progress[] = Array.isArray(progress)\n    ? progress\n    : typeof progress === 'object'\n      ? [progress]\n      : [{ amount: progress }];\n  useToneCheck(\n    'ProgressBar',\n    progressArray.map((prog) => prog.color),\n  );\n\n  function renderProgressBars() {\n    return progressArray.map((prog, index) => {\n      const widthPercentage = !total ? 0 : (prog.amount / total) * 100;\n      const tone = prog.color ? toneProps(prog.color) : undefined;\n\n      return (\n        <div\n          key={index}\n          className={cx(\n            styles.progressBarFill,\n            tone && [tone.className, styles.progressBarFillToned],\n            index === progressArray.length - 1 && styles.progressBarFillEnd,\n            prog.class,\n            classNames?.fill,\n          )}\n          style={{\n            width: `${widthPercentage}%`,\n            ...tone?.style,\n            ...slotStyles?.fill,\n          }}\n          title={prog.label ? `${prog.label}: ${prog.amount}` : undefined}\n        >\n          {prog.label && (\n            <div className={cx(styles.progressBarLabel, classNames?.label)} style={slotStyles?.label}>\n              {prog.label}\n            </div>\n          )}\n        </div>\n      );\n    });\n  }\n\n  const value = progressArray.reduce((sum, prog) => sum + prog.amount, 0);\n\n  return (\n    <div\n      // Before `rest`, unlike the class and style: a stacked breakdown may want `role='img'` instead.\n      role='progressbar'\n      aria-valuemin={0}\n      aria-valuemax={total}\n      aria-valuenow={value}\n      {...rest}\n      className={cx(styles.progressBar, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      {renderProgressBars()}\n    </div>\n  );\n}\n\nexport default ProgressBar;\n"],"mappings":"wLAOA,SAAS,EAAY,CACnB,YAAY,IAAA,GACZ,QAAQ,IACR,WAAW,EACX,QAAQ,IAAA,GACR,aACA,OAAQ,EACR,GAAG,GAC8B,CACjC,IAAM,EAA4B,MAAM,QAAQ,CAAQ,EACpD,EACA,OAAO,GAAa,SAClB,CAAC,CAAQ,EACT,CAAC,CAAE,OAAQ,CAAS,CAAC,EAC3B,EACE,cACA,EAAc,IAAK,GAAS,EAAK,KAAK,CACxC,EAEA,SAAS,GAAqB,CAC5B,OAAO,EAAc,KAAK,EAAM,IAAU,CACxC,IAAM,EAAmB,EAAa,EAAK,OAAS,EAAS,IAA5B,EAC3B,EAAO,EAAK,MAAQ,EAAU,EAAK,KAAK,EAAI,IAAA,GAElD,OACE,EAAC,MAAD,CAEE,UAAW,EACT,EAAO,gBACP,GAAQ,CAAC,EAAK,UAAW,EAAO,oBAAoB,EACpD,IAAU,EAAc,OAAS,GAAK,EAAO,mBAC7C,EAAK,MACL,GAAY,IACd,EACA,MAAO,CACL,MAAO,GAAG,EAAgB,GAC1B,GAAG,GAAM,MACT,GAAG,GAAY,IACjB,EACA,MAAO,EAAK,MAAQ,GAAG,EAAK,MAAM,IAAI,EAAK,SAAW,IAAA,GAErD,SAAA,EAAK,OACJ,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,iBAAkB,GAAY,KAAK,EAAG,MAAO,GAAY,MAChF,SAAA,EAAK,KACH,CAAA,CAEJ,EApBE,CAoBF,CAET,CAAC,CACH,CAEA,IAAM,EAAQ,EAAc,QAAQ,EAAK,IAAS,EAAM,EAAK,OAAQ,CAAC,EAEtE,OACE,EAAC,MAAD,CAEE,KAAK,cACL,gBAAe,EACf,gBAAe,EACf,gBAAe,EACf,GAAI,EACJ,UAAW,EAAG,EAAO,YAAa,EAAW,GAAY,IAAI,EAC7D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAEtC,SAAA,EAAmB,CACjB,CAAA,CAET"}