@react-spectrum/s2 3.0.0-nightly-63d4359d6-250428 → 3.0.0-nightly-1dd65ffc5-250429

package/dist/ProgressBar.mjs

@@ -27,167 +27,169 @@ import {useLocale as $cNVLZ$useLocale} from "@react-aria/i18n";
 
 
 const $b847b7cd294eafba$export$e9f3bf65a26ce129 = /*#__PURE__*/ (0, $cNVLZ$createContext)(null);
-const $b847b7cd294eafba$var$indeterminateLTR = "-vliq1d";
-const $b847b7cd294eafba$var$indeterminateRTL = "-_167g35";
+const $b847b7cd294eafba$var$indeterminateLTR = "VHPsfc";
+const $b847b7cd294eafba$var$indeterminateRTL = "reCXe";
 const $b847b7cd294eafba$var$wrapper = function anonymous(props, overrides) {
-    let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
-    rules += matches.join('');
-    let $V = false;
-    let $q = false;
-    let $r = false;
+    let rules = " ";
+    let position = false;
+    let minWidth = false;
+    let maxWidth = false;
+    let matches = (overrides || '').matchAll(/(?:^|\s)(j|l|h|i|_H|_r|M|__f|_X|_M|L|N|_f|_d|K|__B|H|G|J|I|f|u|_l)[^\s]+/g);
     for (let p of matches){
-        if (/^\s*V/.test(p)) $V = true;
-        if (/^\s*q/.test(p)) $q = true;
-        if (/^\s*r/.test(p)) $r = true;
+        if (p[1] === "K") position = true;
+        if (p[1] === "u") minWidth = true;
+        if (p[1] === "_l") maxWidth = true;
+        rules += p[0];
     }
-    if (props.staticColor === "white") rules += ' -_1de2x0q_b-b';
-    else if (props.staticColor === "black") rules += ' -_1de2x0q_b-c';
-    if (!$V) rules += ' Vc';
-    rules += ' _0f';
+    if (props.staticColor === "white") rules += ' -Ovbhqd-cr';
+    else if (props.staticColor === "black") rules += ' -Ovbhqd-cs';
+    if (!position) rules += ' Ka';
+    rules += ' mb';
     if (props.isIndeterminate) {
-        if (props.labelPosition === "side") rules += ' __i-ar5vcf';
-        else if (props.labelPosition === "top") rules += ' __i-2wzs0i';
+        if (props.labelPosition === "side") rules += ' SPlN5qb';
+        else if (props.labelPosition === "top") rules += ' SM8Mfn';
     } else {
-        if (props.labelPosition === "side") rules += ' __i-ar5vcf';
-        else if (props.labelPosition === "top") rules += ' __i-15pd573';
+        if (props.labelPosition === "side") rules += ' SPlN5qb';
+        else if (props.labelPosition === "top") rules += ' Sxumf9b';
     }
     if (props.isIndeterminate) {
-        if (props.labelPosition === "side") rules += ' __k-jvvbum';
-        else if (props.labelPosition === "top") rules += ' __k-gz4mwy';
+        if (props.labelPosition === "side") rules += ' _u2Yfxtb';
+        else if (props.labelPosition === "top") rules += ' _u0J5Chb';
     } else {
-        if (props.labelPosition === "side") rules += ' __k-1tip2u3';
-        else if (props.labelPosition === "top") rules += ' __k-3in7tg';
+        if (props.labelPosition === "side") rules += ' _uvv4gue';
+        else if (props.labelPosition === "top") rules += ' _uC0Gyo';
     }
-    rules += ' _2d';
-    rules += ' __Ga';
-    if (!$q) rules += ' q_a';
-    if (!$r) rules += ' r____________N';
-    if (props.size === "XL") rules += ' -aqrvqh_k-j';
-    else if (props.size === "L") rules += ' -aqrvqh_k-i';
-    else if (props.size === "S") rules += ' -aqrvqh_k-h';
-    else if (props.size === "XS") rules += ' -aqrvqh_k-g';
-    else rules += ' -aqrvqh_k-f';
-    rules += ' -_1urhtf5_k-s';
-    rules += ' -_1inj1bc_i--q18lfg';
-    rules += ' je';
+    rules += ' Fb';
+    rules += ' _9a';
+    if (!minWidth) rules += ' ub';
+    if (!maxWidth) rules += ' _lo';
+    if (props.size === "XL") rules += ' -BhX7R-ee';
+    else if (props.size === "L") rules += ' -BhX7R-ed';
+    else if (props.size === "S") rules += ' -BhX7R-eb';
+    else if (props.size === "XS") rules += ' -BhX7R-ea';
+    else rules += ' -BhX7R-ec';
+    rules += ' -dTMmze-ek';
+    rules += ' -AJjOLd-pBOoIzc';
+    rules += ' ka';
     return rules;
 };
 const $b847b7cd294eafba$var$valueStyles = function anonymous(props) {
-    let rules = " .";
-    rules += ' _d-bc1l9oh';
-    rules += ' _d-1uotwbwg';
-    rules += ' _d-eo0c6sf';
-    rules += ' _d-enzzrge';
-    rules += ' _d-enzykdd';
-    rules += ' _d-enzwzjc';
-    rules += ' _d-enzrfpb';
-    rules += ' _da';
+    let rules = " ";
+    rules += ' bh';
+    rules += ' bdf';
+    rules += ' beg';
+    rules += ' bfa';
+    rules += ' bgb';
+    rules += ' bhd';
+    rules += ' bje';
+    rules += ' bic';
     if (props.size === "XL") {
-        rules += ' _ebj';
-        rules += ' _ei';
+        rules += ' ah';
+        rules += ' aac';
     } else if (props.size === "L") {
-        rules += ' _ebh';
-        rules += ' _eg';
+        rules += ' ae';
+        rules += ' aad';
     } else if (props.size === "S") {
-        rules += ' _ebd';
-        rules += ' _ec';
+        rules += ' af';
+        rules += ' aag';
     } else if (props.size === "XS") {
-        rules += ' _ebb';
-        rules += ' _ea';
+        rules += ' ai';
+        rules += ' aaj';
     } else {
-        rules += ' _ebf';
-        rules += ' _ee';
+        rules += ' aa';
+        rules += ' aab';
     }
-    rules += ' _fb';
-    rules += ' _g-1x99dlob';
-    rules += ' _ga';
-    rules += ' aa_____K';
-    if (props.isStaticColor) rules += ' a_____G';
-    else if (props.isDisabled) rules += ' aj';
+    rules += ' Da';
+    rules += ' Ea';
+    rules += ' Ca';
+    rules += ' gb';
+    rules += ' gca';
+    if (props.isStaticColor) rules += ' do';
+    else if (props.isDisabled) rules += ' dc';
     else {
-        if (props.isPressed) rules += ' an';
-        else if (props.isFocusVisible) rules += ' an';
-        else if (props.isHovered) rules += ' an';
-        else rules += ' am';
+        if (props.isPressed) rules += ' da';
+        else if (props.isFocusVisible) rules += ' da';
+        else if (props.isHovered) rules += ' da';
+        else rules += ' dg';
     }
-    rules += ' __Ib';
-    rules += ' __b-o8by7a';
-    rules += ' __c-o8by7a';
-    rules += ' __d-o8by7a';
-    rules += ' __e-o8by7a';
+    rules += ' dbf';
+    rules += ' Aa';
+    rules += ' L8bmXs';
+    rules += ' N8bmXs';
+    rules += ' _f8bmXs';
+    rules += ' _d8bmXs';
     return rules;
 };
 const $b847b7cd294eafba$var$trackStyles = function anonymous(props) {
-    let rules = " .";
-    rules += ' __b-2y1eji';
-    rules += ' __c-2y1eji';
-    rules += ' __d-2y1eji';
-    rules += ' __e-2y1eji';
-    if (props.size === "XL") rules += ' qj';
-    else if (props.size === "L") rules += ' qi';
-    else if (props.size === "S") rules += ' qh';
-    else if (props.size === "XS") rules += ' qg';
-    else rules += ' qf';
-    if (props.isQuiet) rules += ' __na';
-    else rules += ' __n-1s8glxue';
-    if (props.size === "XL") rules += ' -usygro_l-____g';
-    else if (props.size === "L") rules += ' -usygro_l-___0';
-    else if (props.size === "S") rules += ' -usygro_l-___u';
-    else rules += ' -usygro_l-___K';
-    rules += ' m-rwozxi';
-    rules += ' __wb';
-    rules += ' __xb';
-    rules += ' _wf';
-    rules += ' _xf';
-    rules += ' _yf';
-    rules += ' _zf';
-    rules += ' ba_____J';
-    if (props.isStaticColor) rules += ' b_____z';
-    else rules += ' bi';
-    rules += ' _Oab';
-    rules += ' _Oa';
-    rules += ' _Mab';
-    rules += ' _Ma';
-    rules += ' da_____K';
-    rules += ' da';
-    rules += ' __R-3t1y';
-    if (props.size === "XL") rules += ' ky';
-    else if (props.size === "L") rules += ' kw';
-    else if (props.size === "M") rules += ' ku';
-    else if (props.size === "S") rules += ' ks';
-    else rules += ' ku';
+    let rules = " ";
+    rules += ' LMY0fn';
+    rules += ' NMY0fn';
+    rules += ' _fMY0fn';
+    rules += ' _dMY0fn';
+    if (props.size === "XL") rules += ' ub';
+    else if (props.size === "L") rules += ' ud';
+    else if (props.size === "S") rules += ' uc';
+    else if (props.size === "XS") rules += ' ua';
+    else rules += ' ue';
+    if (props.isQuiet) rules += ' _vb';
+    else rules += ' _vma';
+    if (props.size === "XL") rules += ' -Anxdcc-fh';
+    else if (props.size === "L") rules += ' -Anxdcc-fl';
+    else if (props.size === "S") rules += ' -Anxdcc-fd';
+    else rules += ' -Anxdcc-fk';
+    rules += ' _DWMn6Hb';
+    rules += ' _oa';
+    rules += ' _ha';
+    rules += ' za';
+    rules += ' xa';
+    rules += ' wa';
+    rules += ' ya';
+    if (props.isStaticColor) rules += ' cM';
+    else rules += ' cz';
+    rules += ' cbn';
+    rules += ' _gc';
+    rules += ' _gbb';
+    rules += ' ta';
+    rules += ' tbb';
+    rules += ' Bf';
+    rules += ' Bbg';
+    rules += ' __Bb';
+    if (props.size === "XL") rules += ' ep';
+    else if (props.size === "L") rules += ' ej';
+    else if (props.size === "M") rules += ' en';
+    else if (props.size === "S") rules += ' ek';
+    else rules += ' en';
     return rules;
 };
 const $b847b7cd294eafba$var$fill = function anonymous(props) {
-    let rules = " .";
-    rules += ' kb';
-    rules += ' wf';
-    rules += ' _wf';
-    rules += ' _xf';
-    rules += ' _yf';
-    rules += ' _zf';
-    rules += ' ba_____K';
-    if (props.isStaticColor) rules += ' b_____F';
+    let rules = " ";
+    rules += ' ef';
+    rules += ' Rb';
+    rules += ' za';
+    rules += ' xa';
+    rules += ' wa';
+    rules += ' ya';
+    if (props.isStaticColor) rules += ' ck';
     else {
-        if (props.isPressed) rules += ' b_____S';
-        else if (props.isFocusVisible) rules += ' b_____S';
-        else if (props.isHovered) rules += ' b_____S';
-        else rules += ' b_____R';
+        if (props.isPressed) rules += ' cb';
+        else if (props.isFocusVisible) rules += ' cb';
+        else if (props.isHovered) rules += ' cb';
+        else rules += ' cl';
     }
-    if (props.isIndeterminate) rules += ' lb';
-    if (props.isIndeterminate) rules += ' __Hh';
+    rules += ' cbt';
+    if (props.isIndeterminate) rules += ' fa';
+    if (props.isIndeterminate) rules += ' _Pc';
     return rules;
 };
 const $b847b7cd294eafba$var$indeterminateAnimation = function anonymous(props) {
-    let rules = " .";
-    if (props.direction === "rtl") rules += ' _T-9t6rxe';
-    else if (props.direction === "ltr") rules += ' _T-ve7hif';
-    rules += ' _U-yjb9nq';
-    rules += ' _Za';
-    rules += ' _Y-1dohh1b';
-    rules += ' __Qd';
-    rules += ' Vc';
+    let rules = " ";
+    if (props.direction === "rtl") rules += ' __P2FRDs';
+    else if (props.direction === "ltr") rules += ' __PXZ1Q4d';
+    rules += ' __Eb';
+    rules += ' _2a';
+    rules += ' __Ta';
+    rules += ' __ka';
+    rules += ' Ka';
     return rules;
 };
 const $b847b7cd294eafba$export$c17561cb55d4db30 = /*#__PURE__*/ (0, $cNVLZ$forwardRef)(function ProgressBar(props, ref) {

package/dist/ProgressBar.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+CM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAEtH,MAAM;AASN,MAAM;AASN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;AAiBN,MAAM;;;;;;;;;;;AAkBC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SACF,KAAK,QAAE,OAAO,kBACd,WAAW,mBACX,eAAe,iBACf,gBAAgB,qBAChB,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAC1B,IAAI,gBAAgB,CAAC,CAAC;IAEtB,qBACE,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;YAAC,GAAG,KAAK;kBAAE;2BAAM;yBAAe;QAAW,GAAG,MAAM,MAAM;kBAC/F,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,SAAS,CAAC,iCAAmB,gBAAC;wBAAK,WAAW,kCAAY;kCAAC;4BAAM,YAAY;2CAAO;wBAAa;kCAAK;;kCACvG,gBAAC;wBAAI,WAAW,kCAAY;2CAAC;kCAAe;wBAAI;kCAC9C,cAAA,gBAAC;4BACC,WAAW,CAAA,GAAA,yCAAU,EAAE,2BAAK;gCAAC,GAAG,KAAK;+CAAE;4BAAa,IAAK,kBAAkB,6CAAuB;2CAAC;4BAAS,KAAK;4BACjH,OAAO;gCAAC,OAAO,kBAAkB,YAAY,aAAa;4BAAG;;;;;;AAM3E","sources":["packages/@react-spectrum/s2/src/ProgressBar.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {\n  ProgressBar as AriaProgressBar,\n  ProgressBarProps as AriaProgressBarProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ProgressBarStyleProps {\n  /**\n   * The size of the ProgressBar.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean,\n  /**\n   * The static color style to apply. Useful when the button appears over a color background.\n   */\n  staticColor?: 'white' | 'black' | 'auto',\n  /**\n   * The label's overall position relative to the element it is labeling.\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition\n\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const ProgressBarContext = createContext<ContextValue<Partial<ProgressBarProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst indeterminateLTR = keyframes(`\n  0% {\n    transform:  translateX(-70%) scaleX(0.7);\n  }\n  100% {\n    transform:  translateX(100%) scaleX(0.7);\n  }\n`);\n\nconst indeterminateRTL = keyframes(`\n  0% {\n    transform:  translateX(100%) scaleX(0.7);\n  }\n  100% {\n    transform:  translateX(-70%) scaleX(0.7);\n  }\n`);\n\nconst wrapper = style({\n  ...bar(),\n  gridTemplateColumns: {\n    default: {\n      labelPosition: {\n        top: ['1fr', 'auto'],\n        side: ['auto', '1fr']\n      }\n    },\n    isIndeterminate: {\n      labelPosition: {\n        top: ['1fr'],\n        side: ['auto', '1fr']\n      }\n    }\n  },\n  gridTemplateAreas: {\n    default: {\n      labelPosition: {\n        top: [\n          'label value',\n          'bar bar'\n        ],\n        side: [\n          'label bar value'\n        ]\n      }\n    },\n    isIndeterminate: {\n      labelPosition: {\n        top: [\n          'label',\n          'bar'\n        ],\n        side: [\n          'label bar'\n        ]\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n  ...fieldLabel(),\n  gridArea: 'value'\n});\n\nconst trackStyles = style({\n  ...track(),\n  height: {\n    default: 6,\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: 6, // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: 10 // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fill = style<ProgressBarStyleProps & {isStaticColor: boolean}>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'accent',\n    isStaticColor: 'transparent-overlay-900',\n    forcedColors: 'ButtonText'\n  },\n  width: {\n    isIndeterminate: 'full'\n  },\n  transformOrigin: {\n    isIndeterminate: 'left'\n  }\n});\n\nconst indeterminateAnimation = style({\n  animation: {\n    direction: {\n      ltr: indeterminateLTR,\n      rtl: indeterminateRTL\n    }\n  },\n  animationDuration: 1000,\n  animationIterationCount: 'infinite',\n  animationTimingFunction: 'in-out',\n  willChange: 'transform',\n  position: 'relative'\n});\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nexport const ProgressBar = /*#__PURE__*/ forwardRef(function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);\n  let {\n    label, size = 'M',\n    staticColor,\n    isIndeterminate,\n    labelPosition = 'top',\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {direction} = useLocale();\n  let isStaticColor = !!staticColor;\n\n  return (\n    <AriaProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({...props, size, labelPosition, staticColor}, props.styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</span>}\n          <div className={trackStyles({isStaticColor, size})}>\n            <div\n              className={mergeStyles(fill({...props, isStaticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}\n              style={{width: isIndeterminate ? undefined : percentage + '%'}} />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n});\n\n"],"names":[],"version":3,"file":"ProgressBar.mjs.map"}
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+CM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAEtH,MAAM;AASN,MAAM;AASN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;AAiBN,MAAM;;;;;;;;;;;AAkBC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SACF,KAAK,QAAE,OAAO,kBACd,WAAW,mBACX,eAAe,iBACf,gBAAgB,qBAChB,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAC1B,IAAI,gBAAgB,CAAC,CAAC;IAEtB,qBACE,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;YAAC,GAAG,KAAK;kBAAE;2BAAM;yBAAe;QAAW,GAAG,MAAM,MAAM;kBAC/F,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,SAAS,CAAC,iCAAmB,gBAAC;wBAAK,WAAW,kCAAY;kCAAC;4BAAM,YAAY;2CAAO;wBAAa;kCAAK;;kCACvG,gBAAC;wBAAI,WAAW,kCAAY;2CAAC;kCAAe;wBAAI;kCAC9C,cAAA,gBAAC;4BACC,WAAW,CAAA,GAAA,yCAAU,EAAE,2BAAK;gCAAC,GAAG,KAAK;+CAAE;4BAAa,IAAK,kBAAkB,6CAAuB;2CAAC;4BAAS,KAAK;4BACjH,OAAO;gCAAC,OAAO,kBAAkB,YAAY,aAAa;4BAAG;;;;;;AAM3E","sources":["packages/@react-spectrum/s2/src/ProgressBar.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {\n  ProgressBar as AriaProgressBar,\n  ProgressBarProps as AriaProgressBarProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ProgressBarStyleProps {\n  /**\n   * The size of the ProgressBar.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean,\n  /**\n   * The static color style to apply. Useful when the button appears over a color background.\n   */\n  staticColor?: 'white' | 'black' | 'auto',\n  /**\n   * The label's overall position relative to the element it is labeling.\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition\n\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const ProgressBarContext = createContext<ContextValue<Partial<ProgressBarProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst indeterminateLTR = keyframes(`\n  0% {\n    transform:  translateX(-70%) scaleX(0.7);\n  }\n  100% {\n    transform:  translateX(100%) scaleX(0.7);\n  }\n`);\n\nconst indeterminateRTL = keyframes(`\n  0% {\n    transform:  translateX(100%) scaleX(0.7);\n  }\n  100% {\n    transform:  translateX(-70%) scaleX(0.7);\n  }\n`);\n\nconst wrapper = style({\n  ...bar(),\n  gridTemplateColumns: {\n    default: {\n      labelPosition: {\n        top: ['1fr', 'auto'],\n        side: ['auto', '1fr']\n      }\n    },\n    isIndeterminate: {\n      labelPosition: {\n        top: ['1fr'],\n        side: ['auto', '1fr']\n      }\n    }\n  },\n  gridTemplateAreas: {\n    default: {\n      labelPosition: {\n        top: [\n          'label value',\n          'bar bar'\n        ],\n        side: [\n          'label bar value'\n        ]\n      }\n    },\n    isIndeterminate: {\n      labelPosition: {\n        top: [\n          'label',\n          'bar'\n        ],\n        side: [\n          'label bar'\n        ]\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n  ...fieldLabel(),\n  gridArea: 'value'\n});\n\nconst trackStyles = style({\n  ...track(),\n  height: {\n    default: 6,\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: 6, // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: 10 // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fill = style<ProgressBarStyleProps & {isStaticColor: boolean}>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'accent',\n    isStaticColor: 'transparent-overlay-900',\n    forcedColors: 'ButtonText'\n  },\n  width: {\n    isIndeterminate: 'full'\n  },\n  transformOrigin: {\n    isIndeterminate: 'left'\n  }\n});\n\nconst indeterminateAnimation = style({\n  animation: {\n    direction: {\n      ltr: indeterminateLTR,\n      rtl: indeterminateRTL\n    }\n  },\n  animationDuration: 1000,\n  animationIterationCount: 'infinite',\n  animationTimingFunction: 'in-out',\n  willChange: 'transform',\n  position: 'relative'\n});\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nexport const ProgressBar = /*#__PURE__*/ forwardRef(function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);\n  let {\n    label, size = 'M',\n    staticColor,\n    isIndeterminate,\n    labelPosition = 'top',\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {direction} = useLocale();\n  let isStaticColor = !!staticColor;\n\n  return (\n    <AriaProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({...props, size, labelPosition, staticColor}, props.styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</span>}\n          <div className={trackStyles({isStaticColor, size})}>\n            <div\n              className={mergeStyles(fill({...props, isStaticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}\n              style={{width: isIndeterminate ? undefined : percentage + '%'}} />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n});\n\n"],"names":[],"version":3,"file":"ProgressBar.mjs.map"}

package/dist/ProgressCircle.cjs

@@ -30,49 +30,49 @@ $parcel$export(module.exports, "ProgressCircle", () => $1c116ea4b0d2d023$export$
 const $1c116ea4b0d2d023$export$afffa1e5edf12209 = /*#__PURE__*/ (0, $5RNes$react.createContext)(null);
 // Double check the types passed to each style, may not need all for each
 const $1c116ea4b0d2d023$var$wrapper = function anonymous(props, overrides) {
-    let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r|k|o|p)[^\s]+/g) || [];
-    rules += matches.join('');
-    let $l = false;
-    let $k = false;
+    let rules = " ";
+    let width = false;
+    let height = false;
+    let matches = (overrides || '').matchAll(/(?:^|\s)(j|l|h|i|_H|_r|M|__f|_X|_M|L|N|_f|_d|K|__B|H|G|J|I|f|u|_l|e|s|_w)[^\s]+/g);
     for (let p of matches){
-        if (/^\s*l/.test(p)) $l = true;
-        if (/^\s*k/.test(p)) $k = true;
+        if (p[1] === "f") width = true;
+        if (p[1] === "e") height = true;
+        rules += p[0];
     }
-    if (props.staticColor === "white") rules += ' -_1de2x0q_b-b';
-    else if (props.staticColor === "black") rules += ' -_1de2x0q_b-c';
-    if (!$l) {
-        if (props.size === "L") rules += ' l_q';
-        else if (props.size === "S") rules += ' lE';
-        else rules += ' lU';
-    }
-    if (!$k) {
-        if (props.size === "L") rules += ' k_q';
-        else if (props.size === "S") rules += ' kE';
-        else rules += ' kU';
-    }
-    rules += ' _cb';
+    if (props.staticColor === "white") rules += ' -Ovbhqd-cr';
+    else if (props.staticColor === "black") rules += ' -Ovbhqd-cs';
+    if (props.size === "L") {
+        if (!width) rules += ' fL';
+    } else if (props.size === "S") {
+        if (!width) rules += ' ff';
+    } else if (!width) rules += ' fg';
+    if (props.size === "L") {
+        if (!height) rules += ' eC';
+    } else if (props.size === "S") {
+        if (!height) rules += ' eg';
+    } else if (!height) rules += ' ec';
+    rules += ' _Oa';
     return rules;
 };
 const $1c116ea4b0d2d023$var$track = function anonymous(props) {
-    let rules = " .";
-    rules += ' fa_____J';
-    if (props.isStaticColor) rules += ' f_____B';
-    else rules += ' fk';
+    let rules = " ";
+    if (props.isStaticColor) rules += ' __gd';
+    else rules += ' __gf';
+    rules += ' __gbb';
     return rules;
 };
 const $1c116ea4b0d2d023$var$fill = function anonymous(props) {
-    let rules = " .";
-    rules += ' fa_____O';
-    if (props.isStaticColor) rules += ' f_____H';
-    else rules += ' fA';
-    rules += ' R-375ty3';
-    rules += ' __Ha';
+    let rules = " ";
+    if (props.isStaticColor) rules += ' __ge';
+    else rules += ' __gh';
+    rules += ' __gbc';
+    rules += ' _Sc';
+    rules += ' _Pb';
     return rules;
 };
-const $1c116ea4b0d2d023$var$rotationAnimation = "-u41dq3";
+const $1c116ea4b0d2d023$var$rotationAnimation = "Z8Un9b";
 // stroke-dashoffset represents `100 - percentage`. See below for how this works.
-const $1c116ea4b0d2d023$var$dashoffsetAnimation = "-_1i5ccgk";
+const $1c116ea4b0d2d023$var$dashoffsetAnimation = "uw9JJd";
 const $1c116ea4b0d2d023$export$c79b9d6b4cc92af7 = /*#__PURE__*/ (0, $5RNes$react.forwardRef)(function ProgressCircle(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $1c116ea4b0d2d023$export$afffa1e5edf12209);
     let { size: size = 'M', staticColor: staticColor, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;

package/dist/ProgressCircle.css

@@ -1,80 +1,80 @@
 @layer _.a {
-  .-_1de2x0q_b-c {
+  .-Ovbhqd-cs {
     --s2-container-bg: white;
   }
 
-  .-_1de2x0q_b-b {
+  .-Ovbhqd-cr {
     --s2-container-bg: black;
   }
 
-  .lU {
+  .fg {
     width: calc(2rem * var(--s2-scale));
   }
 
-  .lE {
+  .ff {
     width: calc(1rem * var(--s2-scale));
   }
 
-  .l_q {
+  .fL {
     width: calc(4rem * var(--s2-scale));
   }
 
-  .kU {
+  .ec {
     height: calc(2rem * var(--s2-scale));
   }
 
-  .kE {
+  .eg {
     height: calc(1rem * var(--s2-scale));
   }
 
-  .k_q {
+  .eC {
     height: calc(4rem * var(--s2-scale));
   }
 
-  ._cb {
+  ._Oa {
     aspect-ratio: 1;
   }
 
-  .fk {
+  .__gf {
     stroke: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
   }
 
-  .f_____B {
+  .__gd {
     stroke: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .17);
   }
 
-  .fA {
+  .__gh {
     stroke: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #5681ff);
   }
 
-  .f_____H {
+  .__ge {
     stroke: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
   }
 
-  .R-375ty3 {
+  ._Sc {
     rotate: -90deg;
   }
 
-  .__Ha {
+  ._Pb {
     transform-origin: center;
   }
 }
 
 @layer _.b;
 
-@layer _.b.a {
+@layer _.b.b {
   @media (forced-colors: active) {
-    .fa_____J {
+    .__gbb {
       stroke: background;
     }
 
-    .fa_____O {
+    .__gbc {
       stroke: highlight;
     }
   }
 }
 
-@keyframes -u41dq3 {
+@keyframes Z8Un9b {
   0% {
     transform: rotate(0);
   }
@@ -84,7 +84,7 @@
   }
 }
 
-@keyframes -_1i5ccgk {
+@keyframes uw9JJd {
   0%, 100% {
     stroke-dashoffset: 75px;
   }

package/dist/ProgressCircle.css.map

@@ -1 +1 @@
-{"mappings":"ACuCgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYF;;;;EAAA;;;;EAQD;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AApBG;;AAYF;EAAA;IAAA;;;;IAQD;;;;;;AAea;;;;;;;;;;AAWE","sources":["899fc8f7586d17bf","packages/@react-spectrum/s2/src/ProgressCircle.tsx"],"sourcesContent":["@import \"766ebfa3e9b99037\";\n@import \"cdcaa7bc1c97d336\";\n@import \"788ab0411a865673\";\n@import \"73f154e47fb53c5b\";\n@import \"6c6d672d6676880a\";\n","/*\n * Copyright 2024 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 {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ProgressCircleStyleProps {\n  /**\n   * The size of the ProgressCircle.\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?: 'black' | 'white' | 'auto',\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean\n}\n\nexport const ProgressCircleContext = createContext<ContextValue<Partial<ProgressCircleProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n// Double check the types passed to each style, may not need all for each\nconst wrapper = style<ProgressCircleStyleProps>({\n  ...staticColor(),\n  size: {\n    default: 32,\n    size: {\n      S: 16,\n      L: 64\n    }\n  },\n  aspectRatio: 'square'\n}, getAllowedOverrides({height: true}));\n\nconst track = style({\n  stroke: {\n    default: 'gray-300',\n    isStaticColor: 'transparent-overlay-300',\n    forcedColors: 'Background'\n  }\n});\n\nconst fill = style({\n  stroke: {\n    default: 'blue-900',\n    isStaticColor: 'transparent-overlay-900',\n    forcedColors: 'Highlight'\n  },\n  rotate: -90,\n  transformOrigin: 'center'\n});\n\nexport interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\nconst rotationAnimation = keyframes(`\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n`);\n\n// stroke-dashoffset represents `100 - percentage`. See below for how this works.\nconst dashoffsetAnimation = keyframes(`\n  0%, 100% {\n    stroke-dashoffset: 75;\n  }\n\n  30% {\n    stroke-dashoffset: 20;\n  }\n`);\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.\n * They can represent determinate or indeterminate progress.\n */\nexport const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);\n  let {\n    size = 'M',\n    staticColor,\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let strokeWidth = 3;\n  if (size === 'S') {\n    strokeWidth = 2;\n  } else if (size === 'L') {\n    strokeWidth = 4;\n  }\n\n  // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.\n  let radius = `calc(50% - ${strokeWidth / 2}px)`;\n  let isStaticColor = !!staticColor;\n\n  return (\n    <RACProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({\n        ...renderProps,\n        size,\n        staticColor\n      }, props.styles)}>\n      {({percentage, isIndeterminate}) => (\n        <svg\n          fill=\"none\"\n          width=\"100%\"\n          height=\"100%\">\n          <circle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            strokeWidth={strokeWidth}\n            className={track({isStaticColor})} />\n          <circle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            strokeWidth={strokeWidth}\n            className={fill({isStaticColor})}\n            style={{\n              // These cubic-bezier timing functions were derived from the previous animation keyframes\n              // using a best fit algorithm, and then manually adjusted to approximate the original animation.\n              animation: isIndeterminate ? `${rotationAnimation} 1s cubic-bezier(.6, .1, .3, .9) infinite, ${dashoffsetAnimation} 1s cubic-bezier(.25, .1, .25, 1.3) infinite` : undefined\n            }}\n            // Normalize the path length to 100 so we can easily set stroke-dashoffset to a percentage.\n            pathLength=\"100\"\n            // Add extra gap between dashes so 0% works in Chrome.\n            strokeDasharray=\"100 200\"\n            strokeDashoffset={isIndeterminate || percentage == null ? undefined : 100 - percentage}\n            strokeLinecap=\"round\" />\n        </svg>\n      )}\n    </RACProgressBar>\n  );\n});\n"],"names":[],"version":3,"file":"ProgressCircle.css.map"}
+{"mappings":"ACuCgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYF;;;;EAAA;;;;EAQD;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AARC;;AAAA;EAAA;IAAA;;;;IAQD;;;;;;AAea;;;;;;;;;;AAWE","sources":["899fc8f7586d17bf","packages/@react-spectrum/s2/src/ProgressCircle.tsx"],"sourcesContent":["@import \"766ebfa3e9b99037\";\n@import \"cdcaa7bc1c97d336\";\n@import \"788ab0411a865673\";\n@import \"73f154e47fb53c5b\";\n@import \"6c6d672d6676880a\";\n","/*\n * Copyright 2024 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 {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ProgressCircleStyleProps {\n  /**\n   * The size of the ProgressCircle.\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?: 'black' | 'white' | 'auto',\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean\n}\n\nexport const ProgressCircleContext = createContext<ContextValue<Partial<ProgressCircleProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n// Double check the types passed to each style, may not need all for each\nconst wrapper = style<ProgressCircleStyleProps>({\n  ...staticColor(),\n  size: {\n    default: 32,\n    size: {\n      S: 16,\n      L: 64\n    }\n  },\n  aspectRatio: 'square'\n}, getAllowedOverrides({height: true}));\n\nconst track = style({\n  stroke: {\n    default: 'gray-300',\n    isStaticColor: 'transparent-overlay-300',\n    forcedColors: 'Background'\n  }\n});\n\nconst fill = style({\n  stroke: {\n    default: 'blue-900',\n    isStaticColor: 'transparent-overlay-900',\n    forcedColors: 'Highlight'\n  },\n  rotate: -90,\n  transformOrigin: 'center'\n});\n\nexport interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, UnsafeStyles {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\nconst rotationAnimation = keyframes(`\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n`);\n\n// stroke-dashoffset represents `100 - percentage`. See below for how this works.\nconst dashoffsetAnimation = keyframes(`\n  0%, 100% {\n    stroke-dashoffset: 75;\n  }\n\n  30% {\n    stroke-dashoffset: 20;\n  }\n`);\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.\n * They can represent determinate or indeterminate progress.\n */\nexport const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);\n  let {\n    size = 'M',\n    staticColor,\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let strokeWidth = 3;\n  if (size === 'S') {\n    strokeWidth = 2;\n  } else if (size === 'L') {\n    strokeWidth = 4;\n  }\n\n  // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.\n  let radius = `calc(50% - ${strokeWidth / 2}px)`;\n  let isStaticColor = !!staticColor;\n\n  return (\n    <RACProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({\n        ...renderProps,\n        size,\n        staticColor\n      }, props.styles)}>\n      {({percentage, isIndeterminate}) => (\n        <svg\n          fill=\"none\"\n          width=\"100%\"\n          height=\"100%\">\n          <circle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            strokeWidth={strokeWidth}\n            className={track({isStaticColor})} />\n          <circle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            strokeWidth={strokeWidth}\n            className={fill({isStaticColor})}\n            style={{\n              // These cubic-bezier timing functions were derived from the previous animation keyframes\n              // using a best fit algorithm, and then manually adjusted to approximate the original animation.\n              animation: isIndeterminate ? `${rotationAnimation} 1s cubic-bezier(.6, .1, .3, .9) infinite, ${dashoffsetAnimation} 1s cubic-bezier(.25, .1, .25, 1.3) infinite` : undefined\n            }}\n            // Normalize the path length to 100 so we can easily set stroke-dashoffset to a percentage.\n            pathLength=\"100\"\n            // Add extra gap between dashes so 0% works in Chrome.\n            strokeDasharray=\"100 200\"\n            strokeDashoffset={isIndeterminate || percentage == null ? undefined : 100 - percentage}\n            strokeLinecap=\"round\" />\n        </svg>\n      )}\n    </RACProgressBar>\n  );\n});\n"],"names":[],"version":3,"file":"ProgressCircle.css.map"}