@adobe/react-spectrum 3.47.1 → 3.47.3

package/dist/private/popover_vars.css

@@ -1,38 +1,38 @@
 .p6aKLq_i18nFontFamily {
   font-synthesis: weight;
   font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
-}
 
-.p6aKLq_i18nFontFamily:lang(ar) {
-  font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
-}
+  &:lang(ar) {
+    font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+  }
 
-.p6aKLq_i18nFontFamily:lang(he) {
-  font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
-}
+  &:lang(he) {
+    font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+  }
 
-.p6aKLq_i18nFontFamily:lang(zh) {
-  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
-}
+  &:lang(zh) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+  }
 
-.p6aKLq_i18nFontFamily:lang(zh-Hans) {
-  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
-}
+  &:lang(zh-Hans) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
 
-.p6aKLq_i18nFontFamily:lang(zh-Hant) {
-  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
-}
+  &:lang(zh-Hant) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+  }
 
-.p6aKLq_i18nFontFamily:lang(zh-SG), .p6aKLq_i18nFontFamily:lang(zh-CN) {
-  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
-}
+  &:lang(zh-SG), &:lang(zh-CN) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
 
-.p6aKLq_i18nFontFamily:lang(ko) {
-  font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
-}
+  &:lang(ko) {
+    font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+  }
 
-.p6aKLq_i18nFontFamily:lang(ja) {
-  font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  &:lang(ja) {
+    font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  }
 }
 
 .p6aKLq_spectrum-FocusRing-ring {
@@ -41,42 +41,50 @@
   --spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
   --spectrum-focus-ring-border-size: 0px;
   --spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
-}
 
-.p6aKLq_spectrum-FocusRing-ring:after {
-  border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
-  content: "";
-  margin: calc(-1 * var(--spectrum-focus-ring-border-size));
-  pointer-events: none;
-  transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
+  &:after {
+    border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
+    content: "";
+    margin: calc(-1 * var(--spectrum-focus-ring-border-size));
+    pointer-events: none;
+    transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
       margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
-  display: block;
-  position: absolute;
-  inset: 0;
+    display: block;
+    position: absolute;
+    inset: 0;
+  }
 }
 
-.p6aKLq_spectrum-FocusRing.p6aKLq_focus-ring:after {
-  margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
-  box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
+.p6aKLq_spectrum-FocusRing {
+  &.p6aKLq_focus-ring {
+    &:after {
+      margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
+      box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
+    }
+  }
 }
 
-.p6aKLq_spectrum-FocusRing--quiet:after {
-  border-radius: 0;
-}
+.p6aKLq_spectrum-FocusRing--quiet {
+  &:after {
+    border-radius: 0;
+  }
 
-.p6aKLq_spectrum-FocusRing--quiet.p6aKLq_focus-ring:after {
-  margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
+  &.p6aKLq_focus-ring {
+    &:after {
+      margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
         0;
-  box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
+      box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
+    }
+  }
 }
 
 @media (forced-colors: active) {
   .p6aKLq_spectrum-FocusRing, .p6aKLq_spectrum-FocusRing-ring, .p6aKLq_spectrum-FocusRing--quiet {
     --spectrum-high-contrast-focus-ring-color: Highlight;
-  }
 
-  :is(.p6aKLq_spectrum-FocusRing, .p6aKLq_spectrum-FocusRing-ring, .p6aKLq_spectrum-FocusRing--quiet):after {
-    forced-color-adjust: none;
+    &:after {
+      forced-color-adjust: none;
+    }
   }
 }
 
@@ -140,12 +148,12 @@
   --spectrum-popover-tip-borderWidth: var(--spectrum-popover-border-size, var(--spectrum-alias-border-size-thin));
   position: absolute;
   -webkit-transform: translate(0);
-}
 
-.p6aKLq_spectrum-Popover-tip .p6aKLq_spectrum-Popover-tip-triangle {
-  stroke-linecap: square;
-  stroke-linejoin: miter;
-  stroke-width: var(--spectrum-popover-border-size, var(--spectrum-alias-border-size-thin));
+  & .p6aKLq_spectrum-Popover-tip-triangle {
+    stroke-linecap: square;
+    stroke-linejoin: miter;
+    stroke-width: var(--spectrum-popover-border-size, var(--spectrum-alias-border-size-thin));
+  }
 }
 
 .p6aKLq_spectrum-Popover--dialog {
@@ -153,48 +161,60 @@
   padding: 30px 29px;
 }
 
-.p6aKLq_spectrum-Popover--left.p6aKLq_spectrum-Popover--withTip {
-  margin-right: 13px;
-}
+.p6aKLq_spectrum-Popover--left {
+  &.p6aKLq_spectrum-Popover--withTip {
+    margin-right: 13px;
+  }
 
-.p6aKLq_spectrum-Popover--left .p6aKLq_spectrum-Popover-tip {
-  left: 100%;
+  & .p6aKLq_spectrum-Popover-tip {
+    left: 100%;
+  }
 }
 
-.p6aKLq_spectrum-Popover--right.p6aKLq_spectrum-Popover--withTip {
-  margin-left: 13px;
-}
+.p6aKLq_spectrum-Popover--right {
+  &.p6aKLq_spectrum-Popover--withTip {
+    margin-left: 13px;
+  }
 
-.p6aKLq_spectrum-Popover--right .p6aKLq_spectrum-Popover-tip {
-  right: 100%;
-  transform: scaleX(-1);
+  & .p6aKLq_spectrum-Popover-tip {
+    right: 100%;
+    transform: scaleX(-1);
+  }
 }
 
-:is(.p6aKLq_spectrum-Popover--left, .p6aKLq_spectrum-Popover--right) .p6aKLq_spectrum-Popover-tip {
-  margin-top: calc(var(--spectrum-global-dimension-size-150) * -1);
-  top: 50%;
+.p6aKLq_spectrum-Popover--left, .p6aKLq_spectrum-Popover--right {
+  & .p6aKLq_spectrum-Popover-tip {
+    margin-top: calc(var(--spectrum-global-dimension-size-150) * -1);
+    top: 50%;
+  }
 }
 
-.p6aKLq_spectrum-Popover--bottom.p6aKLq_spectrum-Popover--withTip {
-  margin-top: 13px;
-}
+.p6aKLq_spectrum-Popover--bottom {
+  &.p6aKLq_spectrum-Popover--withTip {
+    margin-top: 13px;
+  }
 
-.p6aKLq_spectrum-Popover--bottom .p6aKLq_spectrum-Popover-tip {
-  bottom: 100%;
-  transform: scaleY(-1);
+  & .p6aKLq_spectrum-Popover-tip {
+    bottom: 100%;
+    transform: scaleY(-1);
+  }
 }
 
-.p6aKLq_spectrum-Popover--top.p6aKLq_spectrum-Popover--withTip {
-  margin-bottom: 13px;
-}
+.p6aKLq_spectrum-Popover--top {
+  &.p6aKLq_spectrum-Popover--withTip {
+    margin-bottom: 13px;
+  }
 
-.p6aKLq_spectrum-Popover--top .p6aKLq_spectrum-Popover-tip {
-  top: 100%;
+  & .p6aKLq_spectrum-Popover-tip {
+    top: 100%;
+  }
 }
 
-:is(.p6aKLq_spectrum-Popover--bottom, .p6aKLq_spectrum-Popover--top) .p6aKLq_spectrum-Popover-tip {
-  margin-left: calc(var(--spectrum-global-dimension-size-150) * -1);
-  left: 50%;
+.p6aKLq_spectrum-Popover--bottom, .p6aKLq_spectrum-Popover--top {
+  & .p6aKLq_spectrum-Popover-tip {
+    margin-left: calc(var(--spectrum-global-dimension-size-150) * -1);
+    left: 50%;
+  }
 }
 
 .p6aKLq_spectrum-Popover {
@@ -204,11 +224,13 @@
       var(--spectrum-popover-shadow-color, var(--spectrum-alias-dropshadow-color)));
   will-change: filter;
   clip-path: inset(-30px);
-}
 
-.p6aKLq_spectrum-Popover .p6aKLq_spectrum-Popover-tip .p6aKLq_spectrum-Popover-tip-triangle {
-  fill: var(--spectrum-popover-background-color, var(--spectrum-global-color-gray-50));
-  stroke: var(--spectrum-popover-border-color, var(--spectrum-alias-border-color-dark));
+  & .p6aKLq_spectrum-Popover-tip {
+    & .p6aKLq_spectrum-Popover-tip-triangle {
+      fill: var(--spectrum-popover-background-color, var(--spectrum-global-color-gray-50));
+      stroke: var(--spectrum-popover-border-color, var(--spectrum-alias-border-color-dark));
+    }
+  }
 }
 
 @media (forced-colors: active) {

package/dist/private/popover_vars.css.map

@@ -1 +1 @@
-{"mappings":"AA4DA;;;;;AAKE;;;;AAKA;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAKA;;;;AAQA;;;;AAIA;;;;AAMF;;;;;;;;AAUE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FF;;;;AAUA;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuCA;;;;;;;;;;;;;;;;;;;;;;AAwBE;;;;AAKF;;;;AASE;;;;;;;;;;;;;;AAyBA;;;;;;;;;AAeA;;;;AAKF;;;;;;;;;;;;;;;;;AA4DA","sources":["packages/@adobe/spectrum-css-temp/components/popover/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"popover_vars.css.map"}
+{"mappings":"AA4DA;;;;EAKE;;;;EAKA;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAQA;;;;EAIA;;;;;AAMF;;;;;;;EAUE;;;;;;;;;;;;;EAsBE;;;;;;;;AAQF;;;;;EAKE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DJ;;;;AAUA;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuCA;;;;;;;;;;;;;;;;;;;;;;;EAwBE;;;;;;;;;;EAcA;;;;;;;;;;;;;;;;;;EAyBA;;;;;;;;;;;EAeA","sources":["packages/@adobe/spectrum-css-temp/components/popover/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"popover_vars.css.map"}

package/dist/private/progress/ProgressBarBase.cjs

@@ -39,7 +39,8 @@ const $cb44ec0c6462cbc8$export$7c6ed87244065f3a = /*#__PURE__*/ (0, ($parcel$int
     value = (0, $d6Yqv$reactstatelyprivateutilsnumber.clamp)(value, minValue, maxValue);
     let barStyle = {};
     if (!isIndeterminate) {
-        let percentage = (value - minValue) / (maxValue - minValue);
+        let range = maxValue - minValue;
+        let percentage = range === 0 ? 0 : (value - minValue) / range;
         barStyle.width = `${Math.round(percentage * 100)}%`;
     }
     // Ideally this should be in useProgressBar, but children

package/dist/private/progress/ProgressBarBase.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAmDM,MAAM,0DAAkB,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,gBACvD,KAA2B,EAC3B,GAA2B;IAE3B,IAAI,SACF,QAAQ,aACR,WAAW,aACX,WAAW,WACX,OAAO,YACP,KAAK,gBACL,YAAY,kBACZ,iBAAiB,CAAC,CAAC,sBACnB,gBAAgB,wBAChB,kBAAkB,iBAClB,QAAQ,cACR,UAAU,EACV,cAAc,SAAS,EACvB,mBAAmB,cAAc,EACjC,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,QAAQ,CAAA,GAAA,2CAAI,EAAE,OAAO,UAAU;IAE/B,IAAI,WAA0B,CAAC;IAC/B,IAAI,CAAC,iBAAiB;QACpB,IAAI,aAAa,AAAC,CAAA,QAAQ,QAAO,IAAM,CAAA,WAAW,QAAO;QACzD,SAAS,KAAK,GAAG,GAAG,KAAK,KAAK,CAAC,aAAa,KAAK,CAAC,CAAC;IACrD;IAEA,yDAAyD;IACzD,gEAAgE;IAChE,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,KAAK,cACtE,QAAQ,IAAI,CACV;IAGJ,uHAAuH;IACvH,qBACE,0DAAC;QACE,GAAG,QAAQ;QACZ,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,sBACA;YACE,6BAA6B,SAAS;YACtC,6BAA6B,SAAS;YACtC,qCAAqC;YACrC,iCAAiC,kBAAkB;QACrD,GACA,cACA,WAAW,SAAS;QAEtB,OAAO;YAAC,UAAU;YAAoB,GAAG,WAAW,KAAK;QAAA;OACxD,uBACC,0DAAC;QAAM,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OACjD,QAGJ,kBAAkB,0BACjB,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OAChC,QAAQ,CAAC,iBAAiB,iBAG/B,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBACjC,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAA4B,OAAO;;AAI9E","sources":["packages/@adobe/react-spectrum/src/progress/ProgressBarBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaProgressBarBaseProps, ProgressBarProps} from 'react-aria/useProgressBar';\n\nimport {clamp} from 'react-stately/private/utils/number';\nimport {classNames} from '../utils/classNames';\nimport {DOMRef, LabelPosition, StyleProps} from '@react-types/shared';\nimport React, {CSSProperties, HTMLAttributes} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/barloader/vars.css';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumProgressBarBaseProps extends AriaProgressBarBaseProps, StyleProps {\n  /**\n   * How thick the bar should be.\n   *\n   * @default 'L'\n   */\n  size?: 'S' | 'L';\n  /**\n   * The label's overall position relative to the element it is labeling.\n   *\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition;\n  /**\n   * Whether the value's label is displayed. True by default if there's a label, false by default if\n   * not.\n   */\n  showValueLabel?: boolean;\n}\n\nexport interface SpectrumProgressBarProps extends SpectrumProgressBarBaseProps, ProgressBarProps {\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'white' | 'black';\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/progress-bar/#Over-background-variant) of\n   * the ProgressBar.\n   *\n   * @deprecated - use staticColor instead.\n   */\n  variant?: 'overBackground';\n}\n\ninterface ProgressBarBaseProps extends SpectrumProgressBarBaseProps, ProgressBarProps {\n  barClassName?: string;\n  barProps?: HTMLAttributes<HTMLDivElement>;\n  labelProps?: HTMLAttributes<HTMLLabelElement>;\n}\n\n// Base ProgressBar component shared with Meter.\nexport const ProgressBarBase = React.forwardRef(function ProgressBarBase(\n  props: ProgressBarBaseProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {\n    value = 0,\n    minValue = 0,\n    maxValue = 100,\n    size = 'L',\n    label,\n    barClassName,\n    showValueLabel = !!label,\n    labelPosition = 'top',\n    isIndeterminate = false,\n    barProps,\n    labelProps,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {styleProps} = useStyleProps(otherProps);\n\n  value = clamp(value, minValue, maxValue);\n\n  let barStyle: CSSProperties = {};\n  if (!isIndeterminate) {\n    let percentage = (value - minValue) / (maxValue - minValue);\n    barStyle.width = `${Math.round(percentage * 100)}%`;\n  }\n\n  // Ideally this should be in useProgressBar, but children\n  // are not supported in ProgressCircle which shares that hook...\n  if (!label && !ariaLabel && !ariaLabelledby && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'If you do not provide a visible label via children, you must specify an aria-label or aria-labelledby attribute for accessibility'\n    );\n  }\n  // use inline style for fit-content because cssnano is too smart for us and will strip out the -moz prefix in css files\n  return (\n    <div\n      {...barProps}\n      ref={domRef}\n      className={classNames(\n        styles,\n        'spectrum-BarLoader',\n        {\n          'spectrum-BarLoader--small': size === 'S',\n          'spectrum-BarLoader--large': size === 'L',\n          'spectrum-BarLoader--indeterminate': isIndeterminate,\n          'spectrum-BarLoader--sideLabel': labelPosition === 'side'\n        },\n        barClassName,\n        styleProps.className\n      )}\n      style={{minWidth: '-moz-fit-content', ...styleProps.style}}>\n      {label && (\n        <span {...labelProps} className={classNames(styles, 'spectrum-BarLoader-label')}>\n          {label}\n        </span>\n      )}\n      {showValueLabel && barProps && (\n        <div className={classNames(styles, 'spectrum-BarLoader-percentage')}>\n          {barProps['aria-valuetext']}\n        </div>\n      )}\n      <div className={classNames(styles, 'spectrum-BarLoader-track')}>\n        <div className={classNames(styles, 'spectrum-BarLoader-fill')} style={barStyle} />\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ProgressBarBase.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAmDM,MAAM,0DAAkB,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,gBACvD,KAA2B,EAC3B,GAA2B;IAE3B,IAAI,SACF,QAAQ,aACR,WAAW,aACX,WAAW,WACX,OAAO,YACP,KAAK,gBACL,YAAY,kBACZ,iBAAiB,CAAC,CAAC,sBACnB,gBAAgB,wBAChB,kBAAkB,iBAClB,QAAQ,cACR,UAAU,EACV,cAAc,SAAS,EACvB,mBAAmB,cAAc,EACjC,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,QAAQ,CAAA,GAAA,2CAAI,EAAE,OAAO,UAAU;IAE/B,IAAI,WAA0B,CAAC;IAC/B,IAAI,CAAC,iBAAiB;QACpB,IAAI,QAAQ,WAAW;QACvB,IAAI,aAAa,UAAU,IAAI,IAAI,AAAC,CAAA,QAAQ,QAAO,IAAK;QACxD,SAAS,KAAK,GAAG,GAAG,KAAK,KAAK,CAAC,aAAa,KAAK,CAAC,CAAC;IACrD;IAEA,yDAAyD;IACzD,gEAAgE;IAChE,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,KAAK,cACtE,QAAQ,IAAI,CACV;IAGJ,uHAAuH;IACvH,qBACE,0DAAC;QACE,GAAG,QAAQ;QACZ,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,sBACA;YACE,6BAA6B,SAAS;YACtC,6BAA6B,SAAS;YACtC,qCAAqC;YACrC,iCAAiC,kBAAkB;QACrD,GACA,cACA,WAAW,SAAS;QAEtB,OAAO;YAAC,UAAU;YAAoB,GAAG,WAAW,KAAK;QAAA;OACxD,uBACC,0DAAC;QAAM,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OACjD,QAGJ,kBAAkB,0BACjB,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OAChC,QAAQ,CAAC,iBAAiB,iBAG/B,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBACjC,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAA4B,OAAO;;AAI9E","sources":["packages/@adobe/react-spectrum/src/progress/ProgressBarBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaProgressBarBaseProps, ProgressBarProps} from 'react-aria/useProgressBar';\n\nimport {clamp} from 'react-stately/private/utils/number';\nimport {classNames} from '../utils/classNames';\nimport {DOMRef, LabelPosition, StyleProps} from '@react-types/shared';\nimport React, {CSSProperties, HTMLAttributes} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/barloader/vars.css';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumProgressBarBaseProps extends AriaProgressBarBaseProps, StyleProps {\n  /**\n   * How thick the bar should be.\n   *\n   * @default 'L'\n   */\n  size?: 'S' | 'L';\n  /**\n   * The label's overall position relative to the element it is labeling.\n   *\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition;\n  /**\n   * Whether the value's label is displayed. True by default if there's a label, false by default if\n   * not.\n   */\n  showValueLabel?: boolean;\n}\n\nexport interface SpectrumProgressBarProps extends SpectrumProgressBarBaseProps, ProgressBarProps {\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'white' | 'black';\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/progress-bar/#Over-background-variant) of\n   * the ProgressBar.\n   *\n   * @deprecated - use staticColor instead.\n   */\n  variant?: 'overBackground';\n}\n\ninterface ProgressBarBaseProps extends SpectrumProgressBarBaseProps, ProgressBarProps {\n  barClassName?: string;\n  barProps?: HTMLAttributes<HTMLDivElement>;\n  labelProps?: HTMLAttributes<HTMLLabelElement>;\n}\n\n// Base ProgressBar component shared with Meter.\nexport const ProgressBarBase = React.forwardRef(function ProgressBarBase(\n  props: ProgressBarBaseProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {\n    value = 0,\n    minValue = 0,\n    maxValue = 100,\n    size = 'L',\n    label,\n    barClassName,\n    showValueLabel = !!label,\n    labelPosition = 'top',\n    isIndeterminate = false,\n    barProps,\n    labelProps,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {styleProps} = useStyleProps(otherProps);\n\n  value = clamp(value, minValue, maxValue);\n\n  let barStyle: CSSProperties = {};\n  if (!isIndeterminate) {\n    let range = maxValue - minValue;\n    let percentage = range === 0 ? 0 : (value - minValue) / range;\n    barStyle.width = `${Math.round(percentage * 100)}%`;\n  }\n\n  // Ideally this should be in useProgressBar, but children\n  // are not supported in ProgressCircle which shares that hook...\n  if (!label && !ariaLabel && !ariaLabelledby && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'If you do not provide a visible label via children, you must specify an aria-label or aria-labelledby attribute for accessibility'\n    );\n  }\n  // use inline style for fit-content because cssnano is too smart for us and will strip out the -moz prefix in css files\n  return (\n    <div\n      {...barProps}\n      ref={domRef}\n      className={classNames(\n        styles,\n        'spectrum-BarLoader',\n        {\n          'spectrum-BarLoader--small': size === 'S',\n          'spectrum-BarLoader--large': size === 'L',\n          'spectrum-BarLoader--indeterminate': isIndeterminate,\n          'spectrum-BarLoader--sideLabel': labelPosition === 'side'\n        },\n        barClassName,\n        styleProps.className\n      )}\n      style={{minWidth: '-moz-fit-content', ...styleProps.style}}>\n      {label && (\n        <span {...labelProps} className={classNames(styles, 'spectrum-BarLoader-label')}>\n          {label}\n        </span>\n      )}\n      {showValueLabel && barProps && (\n        <div className={classNames(styles, 'spectrum-BarLoader-percentage')}>\n          {barProps['aria-valuetext']}\n        </div>\n      )}\n      <div className={classNames(styles, 'spectrum-BarLoader-track')}>\n        <div className={classNames(styles, 'spectrum-BarLoader-fill')} style={barStyle} />\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ProgressBarBase.cjs.map"}

package/dist/private/progress/ProgressBarBase.js

@@ -33,7 +33,8 @@ const $6e50fb064f124a35$export$7c6ed87244065f3a = /*#__PURE__*/ (0, $1jjNw$react
     value = (0, $1jjNw$clamp)(value, minValue, maxValue);
     let barStyle = {};
     if (!isIndeterminate) {
-        let percentage = (value - minValue) / (maxValue - minValue);
+        let range = maxValue - minValue;
+        let percentage = range === 0 ? 0 : (value - minValue) / range;
         barStyle.width = `${Math.round(percentage * 100)}%`;
     }
     // Ideally this should be in useProgressBar, but children

package/dist/private/progress/ProgressBarBase.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAmDM,MAAM,0DAAkB,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,gBACvD,KAA2B,EAC3B,GAA2B;IAE3B,IAAI,SACF,QAAQ,aACR,WAAW,aACX,WAAW,WACX,OAAO,YACP,KAAK,gBACL,YAAY,kBACZ,iBAAiB,CAAC,CAAC,sBACnB,gBAAgB,wBAChB,kBAAkB,iBAClB,QAAQ,cACR,UAAU,EACV,cAAc,SAAS,EACvB,mBAAmB,cAAc,EACjC,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IAEjC,QAAQ,CAAA,GAAA,YAAI,EAAE,OAAO,UAAU;IAE/B,IAAI,WAA0B,CAAC;IAC/B,IAAI,CAAC,iBAAiB;QACpB,IAAI,aAAa,AAAC,CAAA,QAAQ,QAAO,IAAM,CAAA,WAAW,QAAO;QACzD,SAAS,KAAK,GAAG,GAAG,KAAK,KAAK,CAAC,aAAa,KAAK,CAAC,CAAC;IACrD;IAEA,yDAAyD;IACzD,gEAAgE;IAChE,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,KAAK,cACtE,QAAQ,IAAI,CACV;IAGJ,uHAAuH;IACvH,qBACE,gCAAC;QACE,GAAG,QAAQ;QACZ,KAAK;QACL,WAAW,CAAA,GAAA,yCAAS,EAClB,CAAA,GAAA,sDAAK,GACL,sBACA;YACE,6BAA6B,SAAS;YACtC,6BAA6B,SAAS;YACtC,qCAAqC;YACrC,iCAAiC,kBAAkB;QACrD,GACA,cACA,WAAW,SAAS;QAEtB,OAAO;YAAC,UAAU;YAAoB,GAAG,WAAW,KAAK;QAAA;OACxD,uBACC,gCAAC;QAAM,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;OACjD,QAGJ,kBAAkB,0BACjB,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;OAChC,QAAQ,CAAC,iBAAiB,iBAG/B,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;qBACjC,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;QAA4B,OAAO;;AAI9E","sources":["packages/@adobe/react-spectrum/src/progress/ProgressBarBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaProgressBarBaseProps, ProgressBarProps} from 'react-aria/useProgressBar';\n\nimport {clamp} from 'react-stately/private/utils/number';\nimport {classNames} from '../utils/classNames';\nimport {DOMRef, LabelPosition, StyleProps} from '@react-types/shared';\nimport React, {CSSProperties, HTMLAttributes} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/barloader/vars.css';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumProgressBarBaseProps extends AriaProgressBarBaseProps, StyleProps {\n  /**\n   * How thick the bar should be.\n   *\n   * @default 'L'\n   */\n  size?: 'S' | 'L';\n  /**\n   * The label's overall position relative to the element it is labeling.\n   *\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition;\n  /**\n   * Whether the value's label is displayed. True by default if there's a label, false by default if\n   * not.\n   */\n  showValueLabel?: boolean;\n}\n\nexport interface SpectrumProgressBarProps extends SpectrumProgressBarBaseProps, ProgressBarProps {\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'white' | 'black';\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/progress-bar/#Over-background-variant) of\n   * the ProgressBar.\n   *\n   * @deprecated - use staticColor instead.\n   */\n  variant?: 'overBackground';\n}\n\ninterface ProgressBarBaseProps extends SpectrumProgressBarBaseProps, ProgressBarProps {\n  barClassName?: string;\n  barProps?: HTMLAttributes<HTMLDivElement>;\n  labelProps?: HTMLAttributes<HTMLLabelElement>;\n}\n\n// Base ProgressBar component shared with Meter.\nexport const ProgressBarBase = React.forwardRef(function ProgressBarBase(\n  props: ProgressBarBaseProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {\n    value = 0,\n    minValue = 0,\n    maxValue = 100,\n    size = 'L',\n    label,\n    barClassName,\n    showValueLabel = !!label,\n    labelPosition = 'top',\n    isIndeterminate = false,\n    barProps,\n    labelProps,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {styleProps} = useStyleProps(otherProps);\n\n  value = clamp(value, minValue, maxValue);\n\n  let barStyle: CSSProperties = {};\n  if (!isIndeterminate) {\n    let percentage = (value - minValue) / (maxValue - minValue);\n    barStyle.width = `${Math.round(percentage * 100)}%`;\n  }\n\n  // Ideally this should be in useProgressBar, but children\n  // are not supported in ProgressCircle which shares that hook...\n  if (!label && !ariaLabel && !ariaLabelledby && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'If you do not provide a visible label via children, you must specify an aria-label or aria-labelledby attribute for accessibility'\n    );\n  }\n  // use inline style for fit-content because cssnano is too smart for us and will strip out the -moz prefix in css files\n  return (\n    <div\n      {...barProps}\n      ref={domRef}\n      className={classNames(\n        styles,\n        'spectrum-BarLoader',\n        {\n          'spectrum-BarLoader--small': size === 'S',\n          'spectrum-BarLoader--large': size === 'L',\n          'spectrum-BarLoader--indeterminate': isIndeterminate,\n          'spectrum-BarLoader--sideLabel': labelPosition === 'side'\n        },\n        barClassName,\n        styleProps.className\n      )}\n      style={{minWidth: '-moz-fit-content', ...styleProps.style}}>\n      {label && (\n        <span {...labelProps} className={classNames(styles, 'spectrum-BarLoader-label')}>\n          {label}\n        </span>\n      )}\n      {showValueLabel && barProps && (\n        <div className={classNames(styles, 'spectrum-BarLoader-percentage')}>\n          {barProps['aria-valuetext']}\n        </div>\n      )}\n      <div className={classNames(styles, 'spectrum-BarLoader-track')}>\n        <div className={classNames(styles, 'spectrum-BarLoader-fill')} style={barStyle} />\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ProgressBarBase.js.map"}
+{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAmDM,MAAM,0DAAkB,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,gBACvD,KAA2B,EAC3B,GAA2B;IAE3B,IAAI,SACF,QAAQ,aACR,WAAW,aACX,WAAW,WACX,OAAO,YACP,KAAK,gBACL,YAAY,kBACZ,iBAAiB,CAAC,CAAC,sBACnB,gBAAgB,wBAChB,kBAAkB,iBAClB,QAAQ,cACR,UAAU,EACV,cAAc,SAAS,EACvB,mBAAmB,cAAc,EACjC,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IAEjC,QAAQ,CAAA,GAAA,YAAI,EAAE,OAAO,UAAU;IAE/B,IAAI,WAA0B,CAAC;IAC/B,IAAI,CAAC,iBAAiB;QACpB,IAAI,QAAQ,WAAW;QACvB,IAAI,aAAa,UAAU,IAAI,IAAI,AAAC,CAAA,QAAQ,QAAO,IAAK;QACxD,SAAS,KAAK,GAAG,GAAG,KAAK,KAAK,CAAC,aAAa,KAAK,CAAC,CAAC;IACrD;IAEA,yDAAyD;IACzD,gEAAgE;IAChE,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,KAAK,cACtE,QAAQ,IAAI,CACV;IAGJ,uHAAuH;IACvH,qBACE,gCAAC;QACE,GAAG,QAAQ;QACZ,KAAK;QACL,WAAW,CAAA,GAAA,yCAAS,EAClB,CAAA,GAAA,sDAAK,GACL,sBACA;YACE,6BAA6B,SAAS;YACtC,6BAA6B,SAAS;YACtC,qCAAqC;YACrC,iCAAiC,kBAAkB;QACrD,GACA,cACA,WAAW,SAAS;QAEtB,OAAO;YAAC,UAAU;YAAoB,GAAG,WAAW,KAAK;QAAA;OACxD,uBACC,gCAAC;QAAM,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;OACjD,QAGJ,kBAAkB,0BACjB,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;OAChC,QAAQ,CAAC,iBAAiB,iBAG/B,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;qBACjC,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;QAA4B,OAAO;;AAI9E","sources":["packages/@adobe/react-spectrum/src/progress/ProgressBarBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaProgressBarBaseProps, ProgressBarProps} from 'react-aria/useProgressBar';\n\nimport {clamp} from 'react-stately/private/utils/number';\nimport {classNames} from '../utils/classNames';\nimport {DOMRef, LabelPosition, StyleProps} from '@react-types/shared';\nimport React, {CSSProperties, HTMLAttributes} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/barloader/vars.css';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumProgressBarBaseProps extends AriaProgressBarBaseProps, StyleProps {\n  /**\n   * How thick the bar should be.\n   *\n   * @default 'L'\n   */\n  size?: 'S' | 'L';\n  /**\n   * The label's overall position relative to the element it is labeling.\n   *\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition;\n  /**\n   * Whether the value's label is displayed. True by default if there's a label, false by default if\n   * not.\n   */\n  showValueLabel?: boolean;\n}\n\nexport interface SpectrumProgressBarProps extends SpectrumProgressBarBaseProps, ProgressBarProps {\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'white' | 'black';\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/progress-bar/#Over-background-variant) of\n   * the ProgressBar.\n   *\n   * @deprecated - use staticColor instead.\n   */\n  variant?: 'overBackground';\n}\n\ninterface ProgressBarBaseProps extends SpectrumProgressBarBaseProps, ProgressBarProps {\n  barClassName?: string;\n  barProps?: HTMLAttributes<HTMLDivElement>;\n  labelProps?: HTMLAttributes<HTMLLabelElement>;\n}\n\n// Base ProgressBar component shared with Meter.\nexport const ProgressBarBase = React.forwardRef(function ProgressBarBase(\n  props: ProgressBarBaseProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {\n    value = 0,\n    minValue = 0,\n    maxValue = 100,\n    size = 'L',\n    label,\n    barClassName,\n    showValueLabel = !!label,\n    labelPosition = 'top',\n    isIndeterminate = false,\n    barProps,\n    labelProps,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {styleProps} = useStyleProps(otherProps);\n\n  value = clamp(value, minValue, maxValue);\n\n  let barStyle: CSSProperties = {};\n  if (!isIndeterminate) {\n    let range = maxValue - minValue;\n    let percentage = range === 0 ? 0 : (value - minValue) / range;\n    barStyle.width = `${Math.round(percentage * 100)}%`;\n  }\n\n  // Ideally this should be in useProgressBar, but children\n  // are not supported in ProgressCircle which shares that hook...\n  if (!label && !ariaLabel && !ariaLabelledby && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'If you do not provide a visible label via children, you must specify an aria-label or aria-labelledby attribute for accessibility'\n    );\n  }\n  // use inline style for fit-content because cssnano is too smart for us and will strip out the -moz prefix in css files\n  return (\n    <div\n      {...barProps}\n      ref={domRef}\n      className={classNames(\n        styles,\n        'spectrum-BarLoader',\n        {\n          'spectrum-BarLoader--small': size === 'S',\n          'spectrum-BarLoader--large': size === 'L',\n          'spectrum-BarLoader--indeterminate': isIndeterminate,\n          'spectrum-BarLoader--sideLabel': labelPosition === 'side'\n        },\n        barClassName,\n        styleProps.className\n      )}\n      style={{minWidth: '-moz-fit-content', ...styleProps.style}}>\n      {label && (\n        <span {...labelProps} className={classNames(styles, 'spectrum-BarLoader-label')}>\n          {label}\n        </span>\n      )}\n      {showValueLabel && barProps && (\n        <div className={classNames(styles, 'spectrum-BarLoader-percentage')}>\n          {barProps['aria-valuetext']}\n        </div>\n      )}\n      <div className={classNames(styles, 'spectrum-BarLoader-track')}>\n        <div className={classNames(styles, 'spectrum-BarLoader-fill')} style={barStyle} />\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ProgressBarBase.js.map"}

package/dist/private/progress/ProgressBarBase.mjs

@@ -33,7 +33,8 @@ const $4b8319cd7a745a76$export$7c6ed87244065f3a = /*#__PURE__*/ (0, $i6iYX$react
     value = (0, $i6iYX$clamp)(value, minValue, maxValue);
     let barStyle = {};
     if (!isIndeterminate) {
-        let percentage = (value - minValue) / (maxValue - minValue);
+        let range = maxValue - minValue;
+        let percentage = range === 0 ? 0 : (value - minValue) / range;
         barStyle.width = `${Math.round(percentage * 100)}%`;
     }
     // Ideally this should be in useProgressBar, but children

package/dist/private/progress/ProgressBarBase.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAmDM,MAAM,0DAAkB,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,gBACvD,KAA2B,EAC3B,GAA2B;IAE3B,IAAI,SACF,QAAQ,aACR,WAAW,aACX,WAAW,WACX,OAAO,YACP,KAAK,gBACL,YAAY,kBACZ,iBAAiB,CAAC,CAAC,sBACnB,gBAAgB,wBAChB,kBAAkB,iBAClB,QAAQ,cACR,UAAU,EACV,cAAc,SAAS,EACvB,mBAAmB,cAAc,EACjC,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IAEjC,QAAQ,CAAA,GAAA,YAAI,EAAE,OAAO,UAAU;IAE/B,IAAI,WAA0B,CAAC;IAC/B,IAAI,CAAC,iBAAiB;QACpB,IAAI,aAAa,AAAC,CAAA,QAAQ,QAAO,IAAM,CAAA,WAAW,QAAO;QACzD,SAAS,KAAK,GAAG,GAAG,KAAK,KAAK,CAAC,aAAa,KAAK,CAAC,CAAC;IACrD;IAEA,yDAAyD;IACzD,gEAAgE;IAChE,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,KAAK,cACtE,QAAQ,IAAI,CACV;IAGJ,uHAAuH;IACvH,qBACE,gCAAC;QACE,GAAG,QAAQ;QACZ,KAAK;QACL,WAAW,CAAA,GAAA,yCAAS,EAClB,CAAA,GAAA,sDAAK,GACL,sBACA;YACE,6BAA6B,SAAS;YACtC,6BAA6B,SAAS;YACtC,qCAAqC;YACrC,iCAAiC,kBAAkB;QACrD,GACA,cACA,WAAW,SAAS;QAEtB,OAAO;YAAC,UAAU;YAAoB,GAAG,WAAW,KAAK;QAAA;OACxD,uBACC,gCAAC;QAAM,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;OACjD,QAGJ,kBAAkB,0BACjB,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;OAChC,QAAQ,CAAC,iBAAiB,iBAG/B,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;qBACjC,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;QAA4B,OAAO;;AAI9E","sources":["packages/@adobe/react-spectrum/src/progress/ProgressBarBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaProgressBarBaseProps, ProgressBarProps} from 'react-aria/useProgressBar';\n\nimport {clamp} from 'react-stately/private/utils/number';\nimport {classNames} from '../utils/classNames';\nimport {DOMRef, LabelPosition, StyleProps} from '@react-types/shared';\nimport React, {CSSProperties, HTMLAttributes} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/barloader/vars.css';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumProgressBarBaseProps extends AriaProgressBarBaseProps, StyleProps {\n  /**\n   * How thick the bar should be.\n   *\n   * @default 'L'\n   */\n  size?: 'S' | 'L';\n  /**\n   * The label's overall position relative to the element it is labeling.\n   *\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition;\n  /**\n   * Whether the value's label is displayed. True by default if there's a label, false by default if\n   * not.\n   */\n  showValueLabel?: boolean;\n}\n\nexport interface SpectrumProgressBarProps extends SpectrumProgressBarBaseProps, ProgressBarProps {\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'white' | 'black';\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/progress-bar/#Over-background-variant) of\n   * the ProgressBar.\n   *\n   * @deprecated - use staticColor instead.\n   */\n  variant?: 'overBackground';\n}\n\ninterface ProgressBarBaseProps extends SpectrumProgressBarBaseProps, ProgressBarProps {\n  barClassName?: string;\n  barProps?: HTMLAttributes<HTMLDivElement>;\n  labelProps?: HTMLAttributes<HTMLLabelElement>;\n}\n\n// Base ProgressBar component shared with Meter.\nexport const ProgressBarBase = React.forwardRef(function ProgressBarBase(\n  props: ProgressBarBaseProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {\n    value = 0,\n    minValue = 0,\n    maxValue = 100,\n    size = 'L',\n    label,\n    barClassName,\n    showValueLabel = !!label,\n    labelPosition = 'top',\n    isIndeterminate = false,\n    barProps,\n    labelProps,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {styleProps} = useStyleProps(otherProps);\n\n  value = clamp(value, minValue, maxValue);\n\n  let barStyle: CSSProperties = {};\n  if (!isIndeterminate) {\n    let percentage = (value - minValue) / (maxValue - minValue);\n    barStyle.width = `${Math.round(percentage * 100)}%`;\n  }\n\n  // Ideally this should be in useProgressBar, but children\n  // are not supported in ProgressCircle which shares that hook...\n  if (!label && !ariaLabel && !ariaLabelledby && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'If you do not provide a visible label via children, you must specify an aria-label or aria-labelledby attribute for accessibility'\n    );\n  }\n  // use inline style for fit-content because cssnano is too smart for us and will strip out the -moz prefix in css files\n  return (\n    <div\n      {...barProps}\n      ref={domRef}\n      className={classNames(\n        styles,\n        'spectrum-BarLoader',\n        {\n          'spectrum-BarLoader--small': size === 'S',\n          'spectrum-BarLoader--large': size === 'L',\n          'spectrum-BarLoader--indeterminate': isIndeterminate,\n          'spectrum-BarLoader--sideLabel': labelPosition === 'side'\n        },\n        barClassName,\n        styleProps.className\n      )}\n      style={{minWidth: '-moz-fit-content', ...styleProps.style}}>\n      {label && (\n        <span {...labelProps} className={classNames(styles, 'spectrum-BarLoader-label')}>\n          {label}\n        </span>\n      )}\n      {showValueLabel && barProps && (\n        <div className={classNames(styles, 'spectrum-BarLoader-percentage')}>\n          {barProps['aria-valuetext']}\n        </div>\n      )}\n      <div className={classNames(styles, 'spectrum-BarLoader-track')}>\n        <div className={classNames(styles, 'spectrum-BarLoader-fill')} style={barStyle} />\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ProgressBarBase.mjs.map"}
+{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAmDM,MAAM,0DAAkB,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,gBACvD,KAA2B,EAC3B,GAA2B;IAE3B,IAAI,SACF,QAAQ,aACR,WAAW,aACX,WAAW,WACX,OAAO,YACP,KAAK,gBACL,YAAY,kBACZ,iBAAiB,CAAC,CAAC,sBACnB,gBAAgB,wBAChB,kBAAkB,iBAClB,QAAQ,cACR,UAAU,EACV,cAAc,SAAS,EACvB,mBAAmB,cAAc,EACjC,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IAEjC,QAAQ,CAAA,GAAA,YAAI,EAAE,OAAO,UAAU;IAE/B,IAAI,WAA0B,CAAC;IAC/B,IAAI,CAAC,iBAAiB;QACpB,IAAI,QAAQ,WAAW;QACvB,IAAI,aAAa,UAAU,IAAI,IAAI,AAAC,CAAA,QAAQ,QAAO,IAAK;QACxD,SAAS,KAAK,GAAG,GAAG,KAAK,KAAK,CAAC,aAAa,KAAK,CAAC,CAAC;IACrD;IAEA,yDAAyD;IACzD,gEAAgE;IAChE,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,KAAK,cACtE,QAAQ,IAAI,CACV;IAGJ,uHAAuH;IACvH,qBACE,gCAAC;QACE,GAAG,QAAQ;QACZ,KAAK;QACL,WAAW,CAAA,GAAA,yCAAS,EAClB,CAAA,GAAA,sDAAK,GACL,sBACA;YACE,6BAA6B,SAAS;YACtC,6BAA6B,SAAS;YACtC,qCAAqC;YACrC,iCAAiC,kBAAkB;QACrD,GACA,cACA,WAAW,SAAS;QAEtB,OAAO;YAAC,UAAU;YAAoB,GAAG,WAAW,KAAK;QAAA;OACxD,uBACC,gCAAC;QAAM,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;OACjD,QAGJ,kBAAkB,0BACjB,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;OAChC,QAAQ,CAAC,iBAAiB,iBAG/B,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;qBACjC,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;QAA4B,OAAO;;AAI9E","sources":["packages/@adobe/react-spectrum/src/progress/ProgressBarBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaProgressBarBaseProps, ProgressBarProps} from 'react-aria/useProgressBar';\n\nimport {clamp} from 'react-stately/private/utils/number';\nimport {classNames} from '../utils/classNames';\nimport {DOMRef, LabelPosition, StyleProps} from '@react-types/shared';\nimport React, {CSSProperties, HTMLAttributes} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/barloader/vars.css';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumProgressBarBaseProps extends AriaProgressBarBaseProps, StyleProps {\n  /**\n   * How thick the bar should be.\n   *\n   * @default 'L'\n   */\n  size?: 'S' | 'L';\n  /**\n   * The label's overall position relative to the element it is labeling.\n   *\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition;\n  /**\n   * Whether the value's label is displayed. True by default if there's a label, false by default if\n   * not.\n   */\n  showValueLabel?: boolean;\n}\n\nexport interface SpectrumProgressBarProps extends SpectrumProgressBarBaseProps, ProgressBarProps {\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'white' | 'black';\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/progress-bar/#Over-background-variant) of\n   * the ProgressBar.\n   *\n   * @deprecated - use staticColor instead.\n   */\n  variant?: 'overBackground';\n}\n\ninterface ProgressBarBaseProps extends SpectrumProgressBarBaseProps, ProgressBarProps {\n  barClassName?: string;\n  barProps?: HTMLAttributes<HTMLDivElement>;\n  labelProps?: HTMLAttributes<HTMLLabelElement>;\n}\n\n// Base ProgressBar component shared with Meter.\nexport const ProgressBarBase = React.forwardRef(function ProgressBarBase(\n  props: ProgressBarBaseProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {\n    value = 0,\n    minValue = 0,\n    maxValue = 100,\n    size = 'L',\n    label,\n    barClassName,\n    showValueLabel = !!label,\n    labelPosition = 'top',\n    isIndeterminate = false,\n    barProps,\n    labelProps,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {styleProps} = useStyleProps(otherProps);\n\n  value = clamp(value, minValue, maxValue);\n\n  let barStyle: CSSProperties = {};\n  if (!isIndeterminate) {\n    let range = maxValue - minValue;\n    let percentage = range === 0 ? 0 : (value - minValue) / range;\n    barStyle.width = `${Math.round(percentage * 100)}%`;\n  }\n\n  // Ideally this should be in useProgressBar, but children\n  // are not supported in ProgressCircle which shares that hook...\n  if (!label && !ariaLabel && !ariaLabelledby && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'If you do not provide a visible label via children, you must specify an aria-label or aria-labelledby attribute for accessibility'\n    );\n  }\n  // use inline style for fit-content because cssnano is too smart for us and will strip out the -moz prefix in css files\n  return (\n    <div\n      {...barProps}\n      ref={domRef}\n      className={classNames(\n        styles,\n        'spectrum-BarLoader',\n        {\n          'spectrum-BarLoader--small': size === 'S',\n          'spectrum-BarLoader--large': size === 'L',\n          'spectrum-BarLoader--indeterminate': isIndeterminate,\n          'spectrum-BarLoader--sideLabel': labelPosition === 'side'\n        },\n        barClassName,\n        styleProps.className\n      )}\n      style={{minWidth: '-moz-fit-content', ...styleProps.style}}>\n      {label && (\n        <span {...labelProps} className={classNames(styles, 'spectrum-BarLoader-label')}>\n          {label}\n        </span>\n      )}\n      {showValueLabel && barProps && (\n        <div className={classNames(styles, 'spectrum-BarLoader-percentage')}>\n          {barProps['aria-valuetext']}\n        </div>\n      )}\n      <div className={classNames(styles, 'spectrum-BarLoader-track')}>\n        <div className={classNames(styles, 'spectrum-BarLoader-fill')} style={barStyle} />\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ProgressBarBase.mjs.map"}

package/dist/private/progress/ProgressCircle.cjs

@@ -46,7 +46,8 @@ const $948c2416aa3a9507$export$c79b9d6b4cc92af7 = /*#__PURE__*/ (0, ($parcel$int
     let subMask1Style = {};
     let subMask2Style = {};
     if (!isIndeterminate) {
-        let percentage = (value - minValue) / (maxValue - minValue) * 100;
+        let range = maxValue - minValue;
+        let percentage = range === 0 ? 0 : (value - minValue) / range * 100;
         let angle;
         if (percentage > 0 && percentage <= 50) {
             angle = -180 + percentage / 50 * 180;

package/dist/private/progress/ProgressCircle.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA2DM,MAAM,0DAAiB,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,eACtD,KAAkC,EAClC,GAA2B;IAE3B,IAAI,SACF,QAAQ,aACR,WAAW,aACX,WAAW,WACX,OAAO,kBACP,WAAW,WACX,OAAO,mBACP,kBAAkB,OAClB,cAAc,SAAS,EACvB,mBAAmB,cAAc,EACjC,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,QAAQ,CAAA,GAAA,2CAAI,EAAE,OAAO,UAAU;IAC/B,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,6CAAa,EAAE;QAAC,GAAG,KAAK;eAAE;IAAK;IAExD,IAAI,gBAA+B,CAAC;IACpC,IAAI,gBAA+B,CAAC;IACpC,IAAI,CAAC,iBAAiB;QACpB,IAAI,aAAa,AAAE,CAAA,QAAQ,QAAO,IAAM,CAAA,WAAW,QAAO,IAAM;QAChE,IAAI;QACJ,IAAI,aAAa,KAAK,cAAc,IAAI;YACtC,QAAQ,OAAO,AAAC,aAAa,KAAM;YACnC,cAAc,SAAS,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;YAC/C,cAAc,SAAS,GAAG;QAC5B,OAAO,IAAI,aAAa,IAAI;YAC1B,QAAQ,OAAO,AAAE,CAAA,aAAa,EAAC,IAAK,KAAM;YAC1C,cAAc,SAAS,GAAG;YAC1B,cAAc,SAAS,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;QACjD;IACF;IAEA,IAAI,CAAC,aAAa,CAAC,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAC5D,QAAQ,IAAI,CACV;IAIJ,qBACE,0DAAC;QACE,GAAG,UAAU;QACb,GAAG,gBAAgB;QACpB,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,yBACA;YACE,wCAAwC;YACxC,gCAAgC,SAAS;YACzC,gCAAgC,SAAS;YACzC,yCAAyC,YAAY;YACrD,sCAAsC,gBAAgB;YACtD,sCAAsC,gBAAgB;QACxD,GACA,WAAW,SAAS;qBAEtB,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;sBACnC,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBACjC,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBACjC,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC9B,eAAY;QACZ,OAAO;qBACP,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;wBAGvC,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBACjC,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC9B,eAAY;QACZ,OAAO;qBACP,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;;AAM/C","sources":["packages/@adobe/react-spectrum/src/progress/ProgressCircle.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared';\nimport {clamp} from 'react-stately/private/utils/number';\nimport {classNames} from '../utils/classNames';\nimport React, {CSSProperties} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/circleloader/vars.css';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useProgressBar} from 'react-aria/useProgressBar';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface ProgressCircleProps {\n  /**\n   * The current value (controlled).\n   *\n   * @default 0\n   */\n  value?: number;\n  /**\n   * The smallest value allowed for the input.\n   *\n   * @default 0\n   */\n  minValue?: number;\n  /**\n   * The largest value allowed for the input.\n   *\n   * @default 100\n   */\n  maxValue?: number;\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean;\n}\n\nexport interface AriaProgressCircleProps extends ProgressCircleProps, DOMProps, AriaLabelingProps {}\nexport interface SpectrumProgressCircleProps extends AriaProgressCircleProps, StyleProps {\n  /**\n   * What the ProgressCircle's diameter should be.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L';\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'white' | 'black';\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/progress-circle/#Over-background-variant) of\n   * the ProgressCircle.\n   *\n   * @deprecated - use staticColor instead.\n   */\n  variant?: 'overBackground';\n}\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or\n * processing, in a visual way. They can represent determinate or indeterminate progress.\n */\nexport const ProgressCircle = React.forwardRef(function ProgressCircle(\n  props: SpectrumProgressCircleProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {\n    value = 0,\n    minValue = 0,\n    maxValue = 100,\n    size = 'M',\n    staticColor,\n    variant,\n    isIndeterminate = false,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {styleProps} = useStyleProps(otherProps);\n\n  value = clamp(value, minValue, maxValue);\n  let {progressBarProps} = useProgressBar({...props, value});\n\n  let subMask1Style: CSSProperties = {};\n  let subMask2Style: CSSProperties = {};\n  if (!isIndeterminate) {\n    let percentage = ((value - minValue) / (maxValue - minValue)) * 100;\n    let angle;\n    if (percentage > 0 && percentage <= 50) {\n      angle = -180 + (percentage / 50) * 180;\n      subMask1Style.transform = `rotate(${angle}deg)`;\n      subMask2Style.transform = 'rotate(-180deg)';\n    } else if (percentage > 50) {\n      angle = -180 + ((percentage - 50) / 50) * 180;\n      subMask1Style.transform = 'rotate(0deg)';\n      subMask2Style.transform = `rotate(${angle}deg)`;\n    }\n  }\n\n  if (!ariaLabel && !ariaLabelledby && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'ProgressCircle requires an aria-label or aria-labelledby attribute for accessibility'\n    );\n  }\n\n  return (\n    <div\n      {...styleProps}\n      {...progressBarProps}\n      ref={domRef}\n      className={classNames(\n        styles,\n        'spectrum-CircleLoader',\n        {\n          'spectrum-CircleLoader--indeterminate': isIndeterminate,\n          'spectrum-CircleLoader--small': size === 'S',\n          'spectrum-CircleLoader--large': size === 'L',\n          'spectrum-CircleLoader--overBackground': variant === 'overBackground',\n          'spectrum-CircleLoader--staticWhite': staticColor === 'white',\n          'spectrum-CircleLoader--staticBlack': staticColor === 'black'\n        },\n        styleProps.className\n      )}>\n      <div className={classNames(styles, 'spectrum-CircleLoader-track')} />\n      <div className={classNames(styles, 'spectrum-CircleLoader-fills')}>\n        <div className={classNames(styles, 'spectrum-CircleLoader-fillMask1')}>\n          <div\n            className={classNames(styles, 'spectrum-CircleLoader-fillSubMask1')}\n            data-testid=\"fillSubMask1\"\n            style={subMask1Style}>\n            <div className={classNames(styles, 'spectrum-CircleLoader-fill')} />\n          </div>\n        </div>\n        <div className={classNames(styles, 'spectrum-CircleLoader-fillMask2')}>\n          <div\n            className={classNames(styles, 'spectrum-CircleLoader-fillSubMask2')}\n            data-testid=\"fillSubMask2\"\n            style={subMask2Style}>\n            <div className={classNames(styles, 'spectrum-CircleLoader-fill')} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ProgressCircle.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA2DM,MAAM,0DAAiB,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,eACtD,KAAkC,EAClC,GAA2B;IAE3B,IAAI,SACF,QAAQ,aACR,WAAW,aACX,WAAW,WACX,OAAO,kBACP,WAAW,WACX,OAAO,mBACP,kBAAkB,OAClB,cAAc,SAAS,EACvB,mBAAmB,cAAc,EACjC,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,QAAQ,CAAA,GAAA,2CAAI,EAAE,OAAO,UAAU;IAC/B,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,6CAAa,EAAE;QAAC,GAAG,KAAK;eAAE;IAAK;IAExD,IAAI,gBAA+B,CAAC;IACpC,IAAI,gBAA+B,CAAC;IACpC,IAAI,CAAC,iBAAiB;QACpB,IAAI,QAAQ,WAAW;QACvB,IAAI,aAAa,UAAU,IAAI,IAAI,AAAE,CAAA,QAAQ,QAAO,IAAK,QAAS;QAClE,IAAI;QACJ,IAAI,aAAa,KAAK,cAAc,IAAI;YACtC,QAAQ,OAAO,AAAC,aAAa,KAAM;YACnC,cAAc,SAAS,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;YAC/C,cAAc,SAAS,GAAG;QAC5B,OAAO,IAAI,aAAa,IAAI;YAC1B,QAAQ,OAAO,AAAE,CAAA,aAAa,EAAC,IAAK,KAAM;YAC1C,cAAc,SAAS,GAAG;YAC1B,cAAc,SAAS,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;QACjD;IACF;IAEA,IAAI,CAAC,aAAa,CAAC,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAC5D,QAAQ,IAAI,CACV;IAIJ,qBACE,0DAAC;QACE,GAAG,UAAU;QACb,GAAG,gBAAgB;QACpB,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,yBACA;YACE,wCAAwC;YACxC,gCAAgC,SAAS;YACzC,gCAAgC,SAAS;YACzC,yCAAyC,YAAY;YACrD,sCAAsC,gBAAgB;YACtD,sCAAsC,gBAAgB;QACxD,GACA,WAAW,SAAS;qBAEtB,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;sBACnC,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBACjC,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBACjC,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC9B,eAAY;QACZ,OAAO;qBACP,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;wBAGvC,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBACjC,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC9B,eAAY;QACZ,OAAO;qBACP,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;;AAM/C","sources":["packages/@adobe/react-spectrum/src/progress/ProgressCircle.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared';\nimport {clamp} from 'react-stately/private/utils/number';\nimport {classNames} from '../utils/classNames';\nimport React, {CSSProperties} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/circleloader/vars.css';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useProgressBar} from 'react-aria/useProgressBar';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface ProgressCircleProps {\n  /**\n   * The current value (controlled).\n   *\n   * @default 0\n   */\n  value?: number;\n  /**\n   * The smallest value allowed for the input.\n   *\n   * @default 0\n   */\n  minValue?: number;\n  /**\n   * The largest value allowed for the input.\n   *\n   * @default 100\n   */\n  maxValue?: number;\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean;\n}\n\nexport interface AriaProgressCircleProps extends ProgressCircleProps, DOMProps, AriaLabelingProps {}\nexport interface SpectrumProgressCircleProps extends AriaProgressCircleProps, StyleProps {\n  /**\n   * What the ProgressCircle's diameter should be.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L';\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'white' | 'black';\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/progress-circle/#Over-background-variant) of\n   * the ProgressCircle.\n   *\n   * @deprecated - use staticColor instead.\n   */\n  variant?: 'overBackground';\n}\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or\n * processing, in a visual way. They can represent determinate or indeterminate progress.\n */\nexport const ProgressCircle = React.forwardRef(function ProgressCircle(\n  props: SpectrumProgressCircleProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {\n    value = 0,\n    minValue = 0,\n    maxValue = 100,\n    size = 'M',\n    staticColor,\n    variant,\n    isIndeterminate = false,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {styleProps} = useStyleProps(otherProps);\n\n  value = clamp(value, minValue, maxValue);\n  let {progressBarProps} = useProgressBar({...props, value});\n\n  let subMask1Style: CSSProperties = {};\n  let subMask2Style: CSSProperties = {};\n  if (!isIndeterminate) {\n    let range = maxValue - minValue;\n    let percentage = range === 0 ? 0 : ((value - minValue) / range) * 100;\n    let angle;\n    if (percentage > 0 && percentage <= 50) {\n      angle = -180 + (percentage / 50) * 180;\n      subMask1Style.transform = `rotate(${angle}deg)`;\n      subMask2Style.transform = 'rotate(-180deg)';\n    } else if (percentage > 50) {\n      angle = -180 + ((percentage - 50) / 50) * 180;\n      subMask1Style.transform = 'rotate(0deg)';\n      subMask2Style.transform = `rotate(${angle}deg)`;\n    }\n  }\n\n  if (!ariaLabel && !ariaLabelledby && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'ProgressCircle requires an aria-label or aria-labelledby attribute for accessibility'\n    );\n  }\n\n  return (\n    <div\n      {...styleProps}\n      {...progressBarProps}\n      ref={domRef}\n      className={classNames(\n        styles,\n        'spectrum-CircleLoader',\n        {\n          'spectrum-CircleLoader--indeterminate': isIndeterminate,\n          'spectrum-CircleLoader--small': size === 'S',\n          'spectrum-CircleLoader--large': size === 'L',\n          'spectrum-CircleLoader--overBackground': variant === 'overBackground',\n          'spectrum-CircleLoader--staticWhite': staticColor === 'white',\n          'spectrum-CircleLoader--staticBlack': staticColor === 'black'\n        },\n        styleProps.className\n      )}>\n      <div className={classNames(styles, 'spectrum-CircleLoader-track')} />\n      <div className={classNames(styles, 'spectrum-CircleLoader-fills')}>\n        <div className={classNames(styles, 'spectrum-CircleLoader-fillMask1')}>\n          <div\n            className={classNames(styles, 'spectrum-CircleLoader-fillSubMask1')}\n            data-testid=\"fillSubMask1\"\n            style={subMask1Style}>\n            <div className={classNames(styles, 'spectrum-CircleLoader-fill')} />\n          </div>\n        </div>\n        <div className={classNames(styles, 'spectrum-CircleLoader-fillMask2')}>\n          <div\n            className={classNames(styles, 'spectrum-CircleLoader-fillSubMask2')}\n            data-testid=\"fillSubMask2\"\n            style={subMask2Style}>\n            <div className={classNames(styles, 'spectrum-CircleLoader-fill')} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ProgressCircle.cjs.map"}

package/dist/private/progress/ProgressCircle.js

@@ -40,7 +40,8 @@ const $277696409c391eff$export$c79b9d6b4cc92af7 = /*#__PURE__*/ (0, $hKbMk$react
     let subMask1Style = {};
     let subMask2Style = {};
     if (!isIndeterminate) {
-        let percentage = (value - minValue) / (maxValue - minValue) * 100;
+        let range = maxValue - minValue;
+        let percentage = range === 0 ? 0 : (value - minValue) / range * 100;
         let angle;
         if (percentage > 0 && percentage <= 50) {
             angle = -180 + percentage / 50 * 180;

package/dist/private/progress/ProgressCircle.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA2DM,MAAM,0DAAiB,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,eACtD,KAAkC,EAClC,GAA2B;IAE3B,IAAI,SACF,QAAQ,aACR,WAAW,aACX,WAAW,WACX,OAAO,kBACP,WAAW,WACX,OAAO,mBACP,kBAAkB,OAClB,cAAc,SAAS,EACvB,mBAAmB,cAAc,EACjC,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IAEjC,QAAQ,CAAA,GAAA,YAAI,EAAE,OAAO,UAAU;IAC/B,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QAAC,GAAG,KAAK;eAAE;IAAK;IAExD,IAAI,gBAA+B,CAAC;IACpC,IAAI,gBAA+B,CAAC;IACpC,IAAI,CAAC,iBAAiB;QACpB,IAAI,aAAa,AAAE,CAAA,QAAQ,QAAO,IAAM,CAAA,WAAW,QAAO,IAAM;QAChE,IAAI;QACJ,IAAI,aAAa,KAAK,cAAc,IAAI;YACtC,QAAQ,OAAO,AAAC,aAAa,KAAM;YACnC,cAAc,SAAS,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;YAC/C,cAAc,SAAS,GAAG;QAC5B,OAAO,IAAI,aAAa,IAAI;YAC1B,QAAQ,OAAO,AAAE,CAAA,aAAa,EAAC,IAAK,KAAM;YAC1C,cAAc,SAAS,GAAG;YAC1B,cAAc,SAAS,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;QACjD;IACF;IAEA,IAAI,CAAC,aAAa,CAAC,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAC5D,QAAQ,IAAI,CACV;IAIJ,qBACE,gCAAC;QACE,GAAG,UAAU;QACb,GAAG,gBAAgB;QACpB,KAAK;QACL,WAAW,CAAA,GAAA,yCAAS,EAClB,CAAA,GAAA,yDAAK,GACL,yBACA;YACE,wCAAwC;YACxC,gCAAgC,SAAS;YACzC,gCAAgC,SAAS;YACzC,yCAAyC,YAAY;YACrD,sCAAsC,gBAAgB;YACtD,sCAAsC,gBAAgB;QACxD,GACA,WAAW,SAAS;qBAEtB,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;sBACnC,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;qBACjC,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;qBACjC,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;QAC9B,eAAY;QACZ,OAAO;qBACP,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;wBAGvC,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;qBACjC,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;QAC9B,eAAY;QACZ,OAAO;qBACP,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;;AAM/C","sources":["packages/@adobe/react-spectrum/src/progress/ProgressCircle.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared';\nimport {clamp} from 'react-stately/private/utils/number';\nimport {classNames} from '../utils/classNames';\nimport React, {CSSProperties} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/circleloader/vars.css';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useProgressBar} from 'react-aria/useProgressBar';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface ProgressCircleProps {\n  /**\n   * The current value (controlled).\n   *\n   * @default 0\n   */\n  value?: number;\n  /**\n   * The smallest value allowed for the input.\n   *\n   * @default 0\n   */\n  minValue?: number;\n  /**\n   * The largest value allowed for the input.\n   *\n   * @default 100\n   */\n  maxValue?: number;\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean;\n}\n\nexport interface AriaProgressCircleProps extends ProgressCircleProps, DOMProps, AriaLabelingProps {}\nexport interface SpectrumProgressCircleProps extends AriaProgressCircleProps, StyleProps {\n  /**\n   * What the ProgressCircle's diameter should be.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L';\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'white' | 'black';\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/progress-circle/#Over-background-variant) of\n   * the ProgressCircle.\n   *\n   * @deprecated - use staticColor instead.\n   */\n  variant?: 'overBackground';\n}\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or\n * processing, in a visual way. They can represent determinate or indeterminate progress.\n */\nexport const ProgressCircle = React.forwardRef(function ProgressCircle(\n  props: SpectrumProgressCircleProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {\n    value = 0,\n    minValue = 0,\n    maxValue = 100,\n    size = 'M',\n    staticColor,\n    variant,\n    isIndeterminate = false,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {styleProps} = useStyleProps(otherProps);\n\n  value = clamp(value, minValue, maxValue);\n  let {progressBarProps} = useProgressBar({...props, value});\n\n  let subMask1Style: CSSProperties = {};\n  let subMask2Style: CSSProperties = {};\n  if (!isIndeterminate) {\n    let percentage = ((value - minValue) / (maxValue - minValue)) * 100;\n    let angle;\n    if (percentage > 0 && percentage <= 50) {\n      angle = -180 + (percentage / 50) * 180;\n      subMask1Style.transform = `rotate(${angle}deg)`;\n      subMask2Style.transform = 'rotate(-180deg)';\n    } else if (percentage > 50) {\n      angle = -180 + ((percentage - 50) / 50) * 180;\n      subMask1Style.transform = 'rotate(0deg)';\n      subMask2Style.transform = `rotate(${angle}deg)`;\n    }\n  }\n\n  if (!ariaLabel && !ariaLabelledby && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'ProgressCircle requires an aria-label or aria-labelledby attribute for accessibility'\n    );\n  }\n\n  return (\n    <div\n      {...styleProps}\n      {...progressBarProps}\n      ref={domRef}\n      className={classNames(\n        styles,\n        'spectrum-CircleLoader',\n        {\n          'spectrum-CircleLoader--indeterminate': isIndeterminate,\n          'spectrum-CircleLoader--small': size === 'S',\n          'spectrum-CircleLoader--large': size === 'L',\n          'spectrum-CircleLoader--overBackground': variant === 'overBackground',\n          'spectrum-CircleLoader--staticWhite': staticColor === 'white',\n          'spectrum-CircleLoader--staticBlack': staticColor === 'black'\n        },\n        styleProps.className\n      )}>\n      <div className={classNames(styles, 'spectrum-CircleLoader-track')} />\n      <div className={classNames(styles, 'spectrum-CircleLoader-fills')}>\n        <div className={classNames(styles, 'spectrum-CircleLoader-fillMask1')}>\n          <div\n            className={classNames(styles, 'spectrum-CircleLoader-fillSubMask1')}\n            data-testid=\"fillSubMask1\"\n            style={subMask1Style}>\n            <div className={classNames(styles, 'spectrum-CircleLoader-fill')} />\n          </div>\n        </div>\n        <div className={classNames(styles, 'spectrum-CircleLoader-fillMask2')}>\n          <div\n            className={classNames(styles, 'spectrum-CircleLoader-fillSubMask2')}\n            data-testid=\"fillSubMask2\"\n            style={subMask2Style}>\n            <div className={classNames(styles, 'spectrum-CircleLoader-fill')} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ProgressCircle.js.map"}
+{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA2DM,MAAM,0DAAiB,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,eACtD,KAAkC,EAClC,GAA2B;IAE3B,IAAI,SACF,QAAQ,aACR,WAAW,aACX,WAAW,WACX,OAAO,kBACP,WAAW,WACX,OAAO,mBACP,kBAAkB,OAClB,cAAc,SAAS,EACvB,mBAAmB,cAAc,EACjC,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IAEjC,QAAQ,CAAA,GAAA,YAAI,EAAE,OAAO,UAAU;IAC/B,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QAAC,GAAG,KAAK;eAAE;IAAK;IAExD,IAAI,gBAA+B,CAAC;IACpC,IAAI,gBAA+B,CAAC;IACpC,IAAI,CAAC,iBAAiB;QACpB,IAAI,QAAQ,WAAW;QACvB,IAAI,aAAa,UAAU,IAAI,IAAI,AAAE,CAAA,QAAQ,QAAO,IAAK,QAAS;QAClE,IAAI;QACJ,IAAI,aAAa,KAAK,cAAc,IAAI;YACtC,QAAQ,OAAO,AAAC,aAAa,KAAM;YACnC,cAAc,SAAS,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;YAC/C,cAAc,SAAS,GAAG;QAC5B,OAAO,IAAI,aAAa,IAAI;YAC1B,QAAQ,OAAO,AAAE,CAAA,aAAa,EAAC,IAAK,KAAM;YAC1C,cAAc,SAAS,GAAG;YAC1B,cAAc,SAAS,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;QACjD;IACF;IAEA,IAAI,CAAC,aAAa,CAAC,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAC5D,QAAQ,IAAI,CACV;IAIJ,qBACE,gCAAC;QACE,GAAG,UAAU;QACb,GAAG,gBAAgB;QACpB,KAAK;QACL,WAAW,CAAA,GAAA,yCAAS,EAClB,CAAA,GAAA,yDAAK,GACL,yBACA;YACE,wCAAwC;YACxC,gCAAgC,SAAS;YACzC,gCAAgC,SAAS;YACzC,yCAAyC,YAAY;YACrD,sCAAsC,gBAAgB;YACtD,sCAAsC,gBAAgB;QACxD,GACA,WAAW,SAAS;qBAEtB,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;sBACnC,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;qBACjC,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;qBACjC,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;QAC9B,eAAY;QACZ,OAAO;qBACP,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;wBAGvC,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;qBACjC,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;QAC9B,eAAY;QACZ,OAAO;qBACP,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;;AAM/C","sources":["packages/@adobe/react-spectrum/src/progress/ProgressCircle.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared';\nimport {clamp} from 'react-stately/private/utils/number';\nimport {classNames} from '../utils/classNames';\nimport React, {CSSProperties} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/circleloader/vars.css';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useProgressBar} from 'react-aria/useProgressBar';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface ProgressCircleProps {\n  /**\n   * The current value (controlled).\n   *\n   * @default 0\n   */\n  value?: number;\n  /**\n   * The smallest value allowed for the input.\n   *\n   * @default 0\n   */\n  minValue?: number;\n  /**\n   * The largest value allowed for the input.\n   *\n   * @default 100\n   */\n  maxValue?: number;\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean;\n}\n\nexport interface AriaProgressCircleProps extends ProgressCircleProps, DOMProps, AriaLabelingProps {}\nexport interface SpectrumProgressCircleProps extends AriaProgressCircleProps, StyleProps {\n  /**\n   * What the ProgressCircle's diameter should be.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L';\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'white' | 'black';\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/progress-circle/#Over-background-variant) of\n   * the ProgressCircle.\n   *\n   * @deprecated - use staticColor instead.\n   */\n  variant?: 'overBackground';\n}\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or\n * processing, in a visual way. They can represent determinate or indeterminate progress.\n */\nexport const ProgressCircle = React.forwardRef(function ProgressCircle(\n  props: SpectrumProgressCircleProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {\n    value = 0,\n    minValue = 0,\n    maxValue = 100,\n    size = 'M',\n    staticColor,\n    variant,\n    isIndeterminate = false,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {styleProps} = useStyleProps(otherProps);\n\n  value = clamp(value, minValue, maxValue);\n  let {progressBarProps} = useProgressBar({...props, value});\n\n  let subMask1Style: CSSProperties = {};\n  let subMask2Style: CSSProperties = {};\n  if (!isIndeterminate) {\n    let range = maxValue - minValue;\n    let percentage = range === 0 ? 0 : ((value - minValue) / range) * 100;\n    let angle;\n    if (percentage > 0 && percentage <= 50) {\n      angle = -180 + (percentage / 50) * 180;\n      subMask1Style.transform = `rotate(${angle}deg)`;\n      subMask2Style.transform = 'rotate(-180deg)';\n    } else if (percentage > 50) {\n      angle = -180 + ((percentage - 50) / 50) * 180;\n      subMask1Style.transform = 'rotate(0deg)';\n      subMask2Style.transform = `rotate(${angle}deg)`;\n    }\n  }\n\n  if (!ariaLabel && !ariaLabelledby && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'ProgressCircle requires an aria-label or aria-labelledby attribute for accessibility'\n    );\n  }\n\n  return (\n    <div\n      {...styleProps}\n      {...progressBarProps}\n      ref={domRef}\n      className={classNames(\n        styles,\n        'spectrum-CircleLoader',\n        {\n          'spectrum-CircleLoader--indeterminate': isIndeterminate,\n          'spectrum-CircleLoader--small': size === 'S',\n          'spectrum-CircleLoader--large': size === 'L',\n          'spectrum-CircleLoader--overBackground': variant === 'overBackground',\n          'spectrum-CircleLoader--staticWhite': staticColor === 'white',\n          'spectrum-CircleLoader--staticBlack': staticColor === 'black'\n        },\n        styleProps.className\n      )}>\n      <div className={classNames(styles, 'spectrum-CircleLoader-track')} />\n      <div className={classNames(styles, 'spectrum-CircleLoader-fills')}>\n        <div className={classNames(styles, 'spectrum-CircleLoader-fillMask1')}>\n          <div\n            className={classNames(styles, 'spectrum-CircleLoader-fillSubMask1')}\n            data-testid=\"fillSubMask1\"\n            style={subMask1Style}>\n            <div className={classNames(styles, 'spectrum-CircleLoader-fill')} />\n          </div>\n        </div>\n        <div className={classNames(styles, 'spectrum-CircleLoader-fillMask2')}>\n          <div\n            className={classNames(styles, 'spectrum-CircleLoader-fillSubMask2')}\n            data-testid=\"fillSubMask2\"\n            style={subMask2Style}>\n            <div className={classNames(styles, 'spectrum-CircleLoader-fill')} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ProgressCircle.js.map"}

package/dist/private/progress/ProgressCircle.mjs

@@ -40,7 +40,8 @@ const $1cfe37e7feefa23d$export$c79b9d6b4cc92af7 = /*#__PURE__*/ (0, $jmyJ1$react
     let subMask1Style = {};
     let subMask2Style = {};
     if (!isIndeterminate) {
-        let percentage = (value - minValue) / (maxValue - minValue) * 100;
+        let range = maxValue - minValue;
+        let percentage = range === 0 ? 0 : (value - minValue) / range * 100;
         let angle;
         if (percentage > 0 && percentage <= 50) {
             angle = -180 + percentage / 50 * 180;

package/dist/private/progress/ProgressCircle.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA2DM,MAAM,0DAAiB,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,eACtD,KAAkC,EAClC,GAA2B;IAE3B,IAAI,SACF,QAAQ,aACR,WAAW,aACX,WAAW,WACX,OAAO,kBACP,WAAW,WACX,OAAO,mBACP,kBAAkB,OAClB,cAAc,SAAS,EACvB,mBAAmB,cAAc,EACjC,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IAEjC,QAAQ,CAAA,GAAA,YAAI,EAAE,OAAO,UAAU;IAC/B,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QAAC,GAAG,KAAK;eAAE;IAAK;IAExD,IAAI,gBAA+B,CAAC;IACpC,IAAI,gBAA+B,CAAC;IACpC,IAAI,CAAC,iBAAiB;QACpB,IAAI,aAAa,AAAE,CAAA,QAAQ,QAAO,IAAM,CAAA,WAAW,QAAO,IAAM;QAChE,IAAI;QACJ,IAAI,aAAa,KAAK,cAAc,IAAI;YACtC,QAAQ,OAAO,AAAC,aAAa,KAAM;YACnC,cAAc,SAAS,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;YAC/C,cAAc,SAAS,GAAG;QAC5B,OAAO,IAAI,aAAa,IAAI;YAC1B,QAAQ,OAAO,AAAE,CAAA,aAAa,EAAC,IAAK,KAAM;YAC1C,cAAc,SAAS,GAAG;YAC1B,cAAc,SAAS,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;QACjD;IACF;IAEA,IAAI,CAAC,aAAa,CAAC,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAC5D,QAAQ,IAAI,CACV;IAIJ,qBACE,gCAAC;QACE,GAAG,UAAU;QACb,GAAG,gBAAgB;QACpB,KAAK;QACL,WAAW,CAAA,GAAA,yCAAS,EAClB,CAAA,GAAA,yDAAK,GACL,yBACA;YACE,wCAAwC;YACxC,gCAAgC,SAAS;YACzC,gCAAgC,SAAS;YACzC,yCAAyC,YAAY;YACrD,sCAAsC,gBAAgB;YACtD,sCAAsC,gBAAgB;QACxD,GACA,WAAW,SAAS;qBAEtB,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;sBACnC,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;qBACjC,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;qBACjC,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;QAC9B,eAAY;QACZ,OAAO;qBACP,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;wBAGvC,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;qBACjC,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;QAC9B,eAAY;QACZ,OAAO;qBACP,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;;AAM/C","sources":["packages/@adobe/react-spectrum/src/progress/ProgressCircle.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared';\nimport {clamp} from 'react-stately/private/utils/number';\nimport {classNames} from '../utils/classNames';\nimport React, {CSSProperties} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/circleloader/vars.css';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useProgressBar} from 'react-aria/useProgressBar';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface ProgressCircleProps {\n  /**\n   * The current value (controlled).\n   *\n   * @default 0\n   */\n  value?: number;\n  /**\n   * The smallest value allowed for the input.\n   *\n   * @default 0\n   */\n  minValue?: number;\n  /**\n   * The largest value allowed for the input.\n   *\n   * @default 100\n   */\n  maxValue?: number;\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean;\n}\n\nexport interface AriaProgressCircleProps extends ProgressCircleProps, DOMProps, AriaLabelingProps {}\nexport interface SpectrumProgressCircleProps extends AriaProgressCircleProps, StyleProps {\n  /**\n   * What the ProgressCircle's diameter should be.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L';\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'white' | 'black';\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/progress-circle/#Over-background-variant) of\n   * the ProgressCircle.\n   *\n   * @deprecated - use staticColor instead.\n   */\n  variant?: 'overBackground';\n}\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or\n * processing, in a visual way. They can represent determinate or indeterminate progress.\n */\nexport const ProgressCircle = React.forwardRef(function ProgressCircle(\n  props: SpectrumProgressCircleProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {\n    value = 0,\n    minValue = 0,\n    maxValue = 100,\n    size = 'M',\n    staticColor,\n    variant,\n    isIndeterminate = false,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {styleProps} = useStyleProps(otherProps);\n\n  value = clamp(value, minValue, maxValue);\n  let {progressBarProps} = useProgressBar({...props, value});\n\n  let subMask1Style: CSSProperties = {};\n  let subMask2Style: CSSProperties = {};\n  if (!isIndeterminate) {\n    let percentage = ((value - minValue) / (maxValue - minValue)) * 100;\n    let angle;\n    if (percentage > 0 && percentage <= 50) {\n      angle = -180 + (percentage / 50) * 180;\n      subMask1Style.transform = `rotate(${angle}deg)`;\n      subMask2Style.transform = 'rotate(-180deg)';\n    } else if (percentage > 50) {\n      angle = -180 + ((percentage - 50) / 50) * 180;\n      subMask1Style.transform = 'rotate(0deg)';\n      subMask2Style.transform = `rotate(${angle}deg)`;\n    }\n  }\n\n  if (!ariaLabel && !ariaLabelledby && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'ProgressCircle requires an aria-label or aria-labelledby attribute for accessibility'\n    );\n  }\n\n  return (\n    <div\n      {...styleProps}\n      {...progressBarProps}\n      ref={domRef}\n      className={classNames(\n        styles,\n        'spectrum-CircleLoader',\n        {\n          'spectrum-CircleLoader--indeterminate': isIndeterminate,\n          'spectrum-CircleLoader--small': size === 'S',\n          'spectrum-CircleLoader--large': size === 'L',\n          'spectrum-CircleLoader--overBackground': variant === 'overBackground',\n          'spectrum-CircleLoader--staticWhite': staticColor === 'white',\n          'spectrum-CircleLoader--staticBlack': staticColor === 'black'\n        },\n        styleProps.className\n      )}>\n      <div className={classNames(styles, 'spectrum-CircleLoader-track')} />\n      <div className={classNames(styles, 'spectrum-CircleLoader-fills')}>\n        <div className={classNames(styles, 'spectrum-CircleLoader-fillMask1')}>\n          <div\n            className={classNames(styles, 'spectrum-CircleLoader-fillSubMask1')}\n            data-testid=\"fillSubMask1\"\n            style={subMask1Style}>\n            <div className={classNames(styles, 'spectrum-CircleLoader-fill')} />\n          </div>\n        </div>\n        <div className={classNames(styles, 'spectrum-CircleLoader-fillMask2')}>\n          <div\n            className={classNames(styles, 'spectrum-CircleLoader-fillSubMask2')}\n            data-testid=\"fillSubMask2\"\n            style={subMask2Style}>\n            <div className={classNames(styles, 'spectrum-CircleLoader-fill')} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ProgressCircle.mjs.map"}
+{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA2DM,MAAM,0DAAiB,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,eACtD,KAAkC,EAClC,GAA2B;IAE3B,IAAI,SACF,QAAQ,aACR,WAAW,aACX,WAAW,WACX,OAAO,kBACP,WAAW,WACX,OAAO,mBACP,kBAAkB,OAClB,cAAc,SAAS,EACvB,mBAAmB,cAAc,EACjC,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;IAEjC,QAAQ,CAAA,GAAA,YAAI,EAAE,OAAO,UAAU;IAC/B,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QAAC,GAAG,KAAK;eAAE;IAAK;IAExD,IAAI,gBAA+B,CAAC;IACpC,IAAI,gBAA+B,CAAC;IACpC,IAAI,CAAC,iBAAiB;QACpB,IAAI,QAAQ,WAAW;QACvB,IAAI,aAAa,UAAU,IAAI,IAAI,AAAE,CAAA,QAAQ,QAAO,IAAK,QAAS;QAClE,IAAI;QACJ,IAAI,aAAa,KAAK,cAAc,IAAI;YACtC,QAAQ,OAAO,AAAC,aAAa,KAAM;YACnC,cAAc,SAAS,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;YAC/C,cAAc,SAAS,GAAG;QAC5B,OAAO,IAAI,aAAa,IAAI;YAC1B,QAAQ,OAAO,AAAE,CAAA,aAAa,EAAC,IAAK,KAAM;YAC1C,cAAc,SAAS,GAAG;YAC1B,cAAc,SAAS,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;QACjD;IACF;IAEA,IAAI,CAAC,aAAa,CAAC,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAC5D,QAAQ,IAAI,CACV;IAIJ,qBACE,gCAAC;QACE,GAAG,UAAU;QACb,GAAG,gBAAgB;QACpB,KAAK;QACL,WAAW,CAAA,GAAA,yCAAS,EAClB,CAAA,GAAA,yDAAK,GACL,yBACA;YACE,wCAAwC;YACxC,gCAAgC,SAAS;YACzC,gCAAgC,SAAS;YACzC,yCAAyC,YAAY;YACrD,sCAAsC,gBAAgB;YACtD,sCAAsC,gBAAgB;QACxD,GACA,WAAW,SAAS;qBAEtB,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;sBACnC,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;qBACjC,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;qBACjC,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;QAC9B,eAAY;QACZ,OAAO;qBACP,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;wBAGvC,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;qBACjC,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;QAC9B,eAAY;QACZ,OAAO;qBACP,gCAAC;QAAI,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,yDAAK,GAAG;;AAM/C","sources":["packages/@adobe/react-spectrum/src/progress/ProgressCircle.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared';\nimport {clamp} from 'react-stately/private/utils/number';\nimport {classNames} from '../utils/classNames';\nimport React, {CSSProperties} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/circleloader/vars.css';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useProgressBar} from 'react-aria/useProgressBar';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface ProgressCircleProps {\n  /**\n   * The current value (controlled).\n   *\n   * @default 0\n   */\n  value?: number;\n  /**\n   * The smallest value allowed for the input.\n   *\n   * @default 0\n   */\n  minValue?: number;\n  /**\n   * The largest value allowed for the input.\n   *\n   * @default 100\n   */\n  maxValue?: number;\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean;\n}\n\nexport interface AriaProgressCircleProps extends ProgressCircleProps, DOMProps, AriaLabelingProps {}\nexport interface SpectrumProgressCircleProps extends AriaProgressCircleProps, StyleProps {\n  /**\n   * What the ProgressCircle's diameter should be.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L';\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'white' | 'black';\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/progress-circle/#Over-background-variant) of\n   * the ProgressCircle.\n   *\n   * @deprecated - use staticColor instead.\n   */\n  variant?: 'overBackground';\n}\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or\n * processing, in a visual way. They can represent determinate or indeterminate progress.\n */\nexport const ProgressCircle = React.forwardRef(function ProgressCircle(\n  props: SpectrumProgressCircleProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {\n    value = 0,\n    minValue = 0,\n    maxValue = 100,\n    size = 'M',\n    staticColor,\n    variant,\n    isIndeterminate = false,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {styleProps} = useStyleProps(otherProps);\n\n  value = clamp(value, minValue, maxValue);\n  let {progressBarProps} = useProgressBar({...props, value});\n\n  let subMask1Style: CSSProperties = {};\n  let subMask2Style: CSSProperties = {};\n  if (!isIndeterminate) {\n    let range = maxValue - minValue;\n    let percentage = range === 0 ? 0 : ((value - minValue) / range) * 100;\n    let angle;\n    if (percentage > 0 && percentage <= 50) {\n      angle = -180 + (percentage / 50) * 180;\n      subMask1Style.transform = `rotate(${angle}deg)`;\n      subMask2Style.transform = 'rotate(-180deg)';\n    } else if (percentage > 50) {\n      angle = -180 + ((percentage - 50) / 50) * 180;\n      subMask1Style.transform = 'rotate(0deg)';\n      subMask2Style.transform = `rotate(${angle}deg)`;\n    }\n  }\n\n  if (!ariaLabel && !ariaLabelledby && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'ProgressCircle requires an aria-label or aria-labelledby attribute for accessibility'\n    );\n  }\n\n  return (\n    <div\n      {...styleProps}\n      {...progressBarProps}\n      ref={domRef}\n      className={classNames(\n        styles,\n        'spectrum-CircleLoader',\n        {\n          'spectrum-CircleLoader--indeterminate': isIndeterminate,\n          'spectrum-CircleLoader--small': size === 'S',\n          'spectrum-CircleLoader--large': size === 'L',\n          'spectrum-CircleLoader--overBackground': variant === 'overBackground',\n          'spectrum-CircleLoader--staticWhite': staticColor === 'white',\n          'spectrum-CircleLoader--staticBlack': staticColor === 'black'\n        },\n        styleProps.className\n      )}>\n      <div className={classNames(styles, 'spectrum-CircleLoader-track')} />\n      <div className={classNames(styles, 'spectrum-CircleLoader-fills')}>\n        <div className={classNames(styles, 'spectrum-CircleLoader-fillMask1')}>\n          <div\n            className={classNames(styles, 'spectrum-CircleLoader-fillSubMask1')}\n            data-testid=\"fillSubMask1\"\n            style={subMask1Style}>\n            <div className={classNames(styles, 'spectrum-CircleLoader-fill')} />\n          </div>\n        </div>\n        <div className={classNames(styles, 'spectrum-CircleLoader-fillMask2')}>\n          <div\n            className={classNames(styles, 'spectrum-CircleLoader-fillSubMask2')}\n            data-testid=\"fillSubMask2\"\n            style={subMask2Style}>\n            <div className={classNames(styles, 'spectrum-CircleLoader-fill')} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ProgressCircle.mjs.map"}