@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/ProgressBar.mjs

@@ -41,215 +41,215 @@ const $b847b7cd294eafba$var$wrapper = function anonymous(props, overrides) {
         if (p[1] === "L") maxWidth = true;
         rules += p[0];
     }
-    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr13';
-    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s13';
-    if (!position) rules += ' _Pc13';
-    rules += ' se13';
+    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr15';
+    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s15';
+    if (!position) rules += ' _Pc15';
+    rules += ' se15';
     if (props.isIndeterminate) {
-        if (props.labelPosition === "side") rules += ' DPlN5qb13';
-        else if (props.labelPosition === "top") rules += ' DM8Mfn13';
+        if (props.labelPosition === "side") rules += ' DPlN5qb15';
+        else if (props.labelPosition === "top") rules += ' DM8Mfn15';
     } else {
-        if (props.labelPosition === "side") rules += ' DPlN5qb13';
-        else if (props.labelPosition === "top") rules += ' Dxumf9b13';
+        if (props.labelPosition === "side") rules += ' DPlN5qb15';
+        else if (props.labelPosition === "top") rules += ' Dxumf9b15';
     }
     if (props.isIndeterminate) {
-        if (props.labelPosition === "side") rules += ' C2Yfxtb13';
-        else if (props.labelPosition === "top") rules += ' C0J5Chb13';
+        if (props.labelPosition === "side") rules += ' C2Yfxtb15';
+        else if (props.labelPosition === "top") rules += ' C0J5Chb15';
     } else {
-        if (props.labelPosition === "side") rules += ' Cvv4gue13';
-        else if (props.labelPosition === "top") rules += ' CC0Gyo13';
+        if (props.labelPosition === "side") rules += ' Cvv4gue15';
+        else if (props.labelPosition === "top") rules += ' CC0Gyo15';
     }
-    rules += ' ea13';
-    rules += ' _Bb13';
-    if (!minWidth) rules += ' Nl13';
-    if (!maxWidth) rules += ' Lk13';
-    if (props.size === "XL") rules += ' -BhX7R-Fz13';
-    else if (props.size === "L") rules += ' -BhX7R-Fv13';
-    else if (props.size === "S") rules += ' -BhX7R-Fp13';
-    else if (props.size === "XS") rules += ' -BhX7R-Fn13';
-    else rules += ' -BhX7R-Fx13';
-    rules += ' -dTMmze-Fe13';
-    rules += ' -AJjOLd-UCwrhQe13';
-    rules += ' qg13';
+    rules += ' ea15';
+    rules += ' _Bb15';
+    if (!minWidth) rules += ' Nl15';
+    if (!maxWidth) rules += ' Lk15';
+    if (props.size === "XL") rules += ' -BhX7R-Fz15';
+    else if (props.size === "L") rules += ' -BhX7R-Fv15';
+    else if (props.size === "S") rules += ' -BhX7R-Fp15';
+    else if (props.size === "XS") rules += ' -BhX7R-Fn15';
+    else rules += ' -BhX7R-Fx15';
+    rules += ' -dTMmze-Fe15';
+    rules += ' -AJjOLd-UCwrhQe15';
+    rules += ' qg15';
     return rules;
 };
 const $b847b7cd294eafba$var$valueStyles = function anonymous(props) {
     let rules = " ";
     if (props.size === "XL") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
+        rules += ' uk15';
+        rules += ' ucJ9TBTb15';
+        rules += ' ud3Euai15';
+        rules += ' uea15';
+        rules += ' ugb15';
+        rules += ' uhd15';
+        rules += ' uje15';
+        rules += ' u2NhKxcl15';
+        rules += ' uic15';
     } else if (props.size === "L") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
+        rules += ' uk15';
+        rules += ' ucJ9TBTb15';
+        rules += ' ud3Euai15';
+        rules += ' uea15';
+        rules += ' ugb15';
+        rules += ' uhd15';
+        rules += ' uje15';
+        rules += ' u2NhKxcl15';
+        rules += ' uic15';
     } else if (props.size === "S") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
+        rules += ' uk15';
+        rules += ' ucJ9TBTb15';
+        rules += ' ud3Euai15';
+        rules += ' uea15';
+        rules += ' ugb15';
+        rules += ' uhd15';
+        rules += ' uje15';
+        rules += ' u2NhKxcl15';
+        rules += ' uic15';
     } else if (props.size === "XS") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
+        rules += ' uk15';
+        rules += ' ucJ9TBTb15';
+        rules += ' ud3Euai15';
+        rules += ' uea15';
+        rules += ' ugb15';
+        rules += ' uhd15';
+        rules += ' uje15';
+        rules += ' u2NhKxcl15';
+        rules += ' uic15';
     } else {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
+        rules += ' uk15';
+        rules += ' ucJ9TBTb15';
+        rules += ' ud3Euai15';
+        rules += ' uea15';
+        rules += ' ugb15';
+        rules += ' uhd15';
+        rules += ' uje15';
+        rules += ' u2NhKxcl15';
+        rules += ' uic15';
     }
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-e15';
+        rules += ' vx15';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-d15';
+        rules += ' vx15';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-b15';
+        rules += ' vx15';
     } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-a15';
+        rules += ' vx15';
     } else {
-        rules += ' -_6BNtrc-c13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-c15';
+        rules += ' vx15';
     }
     if (props.size === "XL") {
-        rules += ' xb13';
-        rules += ' _xa13';
+        rules += ' xb15';
+        rules += ' _xa15';
     } else if (props.size === "L") {
-        rules += ' xb13';
-        rules += ' _xa13';
+        rules += ' xb15';
+        rules += ' _xa15';
     } else if (props.size === "S") {
-        rules += ' xb13';
-        rules += ' _xa13';
+        rules += ' xb15';
+        rules += ' _xa15';
     } else if (props.size === "XS") {
-        rules += ' xb13';
-        rules += ' _xa13';
+        rules += ' xb15';
+        rules += ' _xa15';
     } else {
-        rules += ' xb13';
-        rules += ' _xa13';
+        rules += ' xb15';
+        rules += ' _xa15';
     }
     if (props.size === "XL") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
+        rules += ' _Fd15';
+        rules += ' _FnuYUweb15';
     } else if (props.size === "L") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
+        rules += ' _Fd15';
+        rules += ' _FnuYUweb15';
     } else if (props.size === "S") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
+        rules += ' _Fd15';
+        rules += ' _FnuYUweb15';
     } else if (props.size === "XS") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
+        rules += ' _Fd15';
+        rules += ' _FnuYUweb15';
     } else {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
+        rules += ' _Fd15';
+        rules += ' _FnuYUweb15';
     }
-    if (props.isStaticColor) rules += ' pl13';
-    else if (props.isDisabled) rules += ' pp13';
-    else rules += ' pv13';
-    rules += ' plb13';
-    rules += ' ri13';
-    rules += ' z8bmXs13';
-    rules += ' y8bmXs13';
-    rules += ' B8bmXs13';
-    rules += ' A8bmXs13';
+    if (props.isStaticColor) rules += ' pl15';
+    else if (props.isDisabled) rules += ' pp15';
+    else rules += ' pv15';
+    rules += ' plb15';
+    rules += ' ri15';
+    rules += ' z8bmXs15';
+    rules += ' y8bmXs15';
+    rules += ' B8bmXs15';
+    rules += ' A8bmXs15';
     return rules;
 };
 const $b847b7cd294eafba$var$trackStyles = function anonymous(props) {
     let rules = " ";
-    rules += ' zMY0fn13';
-    rules += ' yMY0fn13';
-    rules += ' BMY0fn13';
-    rules += ' AMY0fn13';
-    if (props.size === "XL") rules += ' Nl13';
-    else if (props.size === "L") rules += ' Nj13';
-    else if (props.size === "S") rules += ' Nf13';
-    else if (props.size === "XS") rules += ' Ne13';
-    else rules += ' Nk13';
-    if (props.isQuiet) rules += ' _qd13';
-    else rules += ' _qtb13';
-    if (props.size === "XL") rules += ' -Anxdcc-Zt13';
-    else if (props.size === "L") rules += ' -Anxdcc-ZStdtne13';
-    else if (props.size === "S") rules += ' -Anxdcc-Zr13';
-    else rules += ' -Anxdcc-Z3fn9H13';
-    rules += ' __v6TNLWb13';
-    rules += ' _Nc13';
-    rules += ' Pc13';
-    rules += ' og13';
-    rules += ' ng13';
-    rules += ' kg13';
-    rules += ' jg13';
-    if (props.isStaticColor) rules += ' gh13';
-    else rules += ' gE13';
-    rules += ' glb13';
-    rules += ' _Ma13';
-    rules += ' _Mlb13';
-    rules += ' _Le13';
-    rules += ' _Llf13';
-    rules += ' Oj13';
-    rules += ' Olb13';
-    rules += ' _9c13';
-    if (props.size === "XL") rules += ' Fj13';
-    else if (props.size === "L") rules += ' Fi13';
-    else if (props.size === "M") rules += ' Fg13';
-    else if (props.size === "S") rules += ' Fe13';
-    else rules += ' Fg13';
+    rules += ' zMY0fn15';
+    rules += ' yMY0fn15';
+    rules += ' BMY0fn15';
+    rules += ' AMY0fn15';
+    if (props.size === "XL") rules += ' Nl15';
+    else if (props.size === "L") rules += ' Nj15';
+    else if (props.size === "S") rules += ' Nf15';
+    else if (props.size === "XS") rules += ' Ne15';
+    else rules += ' Nk15';
+    if (props.isQuiet) rules += ' _qd15';
+    else rules += ' _qtb15';
+    if (props.size === "XL") rules += ' -Anxdcc-Zt15';
+    else if (props.size === "L") rules += ' -Anxdcc-ZStdtne15';
+    else if (props.size === "S") rules += ' -Anxdcc-Zr15';
+    else rules += ' -Anxdcc-Z3fn9H15';
+    rules += ' __v6TNLWb15';
+    rules += ' _Nc15';
+    rules += ' Pc15';
+    rules += ' og15';
+    rules += ' ng15';
+    rules += ' kg15';
+    rules += ' jg15';
+    if (props.isStaticColor) rules += ' gh15';
+    else rules += ' gE15';
+    rules += ' glb15';
+    rules += ' _Ma15';
+    rules += ' _Mlb15';
+    rules += ' _Le15';
+    rules += ' _Llf15';
+    rules += ' Oj15';
+    rules += ' Olb15';
+    rules += ' _9c15';
+    if (props.size === "XL") rules += ' Fj15';
+    else if (props.size === "L") rules += ' Fi15';
+    else if (props.size === "M") rules += ' Fg15';
+    else if (props.size === "S") rules += ' Fe15';
+    else rules += ' Fg15';
     return rules;
 };
 const $b847b7cd294eafba$var$fill = function anonymous(props) {
     let rules = " ";
-    rules += ' Fb13';
-    rules += ' _je13';
-    rules += ' og13';
-    rules += ' ng13';
-    rules += ' kg13';
-    rules += ' jg13';
-    if (props.isStaticColor) rules += ' gj13';
-    else rules += ' g213';
-    rules += ' glc13';
-    if (props.isIndeterminate) rules += ' Za13';
-    if (props.isIndeterminate) rules += ' _0e13';
+    rules += ' Fb15';
+    rules += ' _je15';
+    rules += ' og15';
+    rules += ' ng15';
+    rules += ' kg15';
+    rules += ' jg15';
+    if (props.isStaticColor) rules += ' gj15';
+    else rules += ' g215';
+    rules += ' glc15';
+    if (props.isIndeterminate) rules += ' Za15';
+    if (props.isIndeterminate) rules += ' _0e15';
     return rules;
 };
 const $b847b7cd294eafba$var$indeterminateAnimation = function anonymous(props) {
     let rules = " ";
-    if (props.direction === "rtl") rules += ' _g2FRDs13';
-    else if (props.direction === "ltr") rules += ' _gXZ1Q4d13';
-    rules += ' _ea13';
-    rules += ' _hb13';
-    rules += ' __ea13';
-    rules += ' _8d13';
-    rules += ' _Pc13';
+    if (props.direction === "rtl") rules += ' _g2FRDs15';
+    else if (props.direction === "ltr") rules += ' _gXZ1Q4d15';
+    rules += ' _ea15';
+    rules += ' _hb15';
+    rules += ' __ea15';
+    rules += ' _8d15';
+    rules += ' _Pc15';
     return rules;
 };
 const $b847b7cd294eafba$export$c17561cb55d4db30 = /*#__PURE__*/ (0, $cNVLZ$forwardRef)(function ProgressBar(props, ref) {

package/dist/private/ProgressBar.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6CM,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,yCAAQ,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 {ProgressBar as AriaProgressBar, ProgressBarProps as AriaProgressBarProps} from 'react-aria-components/ProgressBar';\n\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes, 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 './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\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' | 'render' | keyof GlobalDOMAttributes>, 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;;;;;;;;AAuDM,MAAM,0DACX,CAAA,GAAA,oBAAY,EAAwE;AAEtF,MAAM;AASN,MAAM;AASN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;AAiBN,MAAM;;;;;;;;;;;AAkBC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,YAC3D,KAAuB,EACvB,GAA2B;IAE3B,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,mBACX,eAAe,iBACf,gBAAgB,qBAChB,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,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,WACE,mBAAmB,8BAAQ;YAAC,GAAG,KAAK;kBAAE;2BAAM;yBAAe;QAAW,GAAG,MAAM,MAAM;kBAEtF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBACC,gBAAC,CAAA,GAAA,yCAAS;wBACR,MAAM;wBACN,YAAW;wBACX,eAAe;wBACf,aAAa;kCACZ;;oBAGJ,SAAS,CAAC,iCACT,gBAAC;wBAAK,WAAW,kCAAY;kCAAC;4BAAM,YAAY;2CAAO;wBAAa;kCACjE;;kCAGL,gBAAC;wBAAI,WAAW,kCAAY;2CAAC;kCAAe;wBAAI;kCAC9C,cAAA,gBAAC;4BACC,WAAW,CAAA,GAAA,yCAAU,EACnB,2BAAK;gCAAC,GAAG,KAAK;+CAAE;4BAAa,IAC7B,kBAAkB,6CAAuB;2CAAC;4BAAS,KAAK;4BAE1D,OAAO;gCAAC,OAAO,kBAAkB,YAAY,aAAa;4BAAG;;;;;;AAO3E","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} from 'react-aria-components/ProgressBar';\n\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes, 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 './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\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   *\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition;\n}\n\nexport interface ProgressBarProps\n  extends\n    Omit<\n      AriaProgressBarProps,\n      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes\n    >,\n    ProgressBarStyleProps,\n    StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode;\n}\n\nexport const ProgressBarContext =\n  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  {\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: ['label value', 'bar bar'],\n          side: ['label bar value']\n        }\n      },\n      isIndeterminate: {\n        labelPosition: {\n          top: ['label', 'bar'],\n          side: ['label bar']\n        }\n      }\n    }\n  },\n  getAllowedOverrides()\n);\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,\n * etc., in a visual way. They can represent either determinate or indeterminate progress.\n */\nexport const ProgressBar = /*#__PURE__*/ forwardRef(function ProgressBar(\n  props: ProgressBarProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);\n  let {\n    label,\n    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={\n        UNSAFE_className + wrapper({...props, size, labelPosition, staticColor}, props.styles)\n      }>\n      {({percentage, valueText}) => (\n        <>\n          {label && (\n            <FieldLabel\n              size={size}\n              labelAlign=\"start\"\n              labelPosition={labelPosition}\n              staticColor={staticColor}>\n              {label}\n            </FieldLabel>\n          )}\n          {label && !isIndeterminate && (\n            <span className={valueStyles({size, labelAlign: 'end', isStaticColor})}>\n              {valueText}\n            </span>\n          )}\n          <div className={trackStyles({isStaticColor, size})}>\n            <div\n              className={mergeStyles(\n                fill({...props, isStaticColor}),\n                isIndeterminate ? indeterminateAnimation({direction}) : null\n              )}\n              style={{width: isIndeterminate ? undefined : percentage + '%'}}\n            />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n});\n"],"names":[],"version":3,"file":"ProgressBar.mjs.map"}

package/dist/private/ProgressCircle.cjs

@@ -40,53 +40,53 @@ const $1c116ea4b0d2d023$var$wrapper = function anonymous(props, overrides) {
         if (p[1] === "F") height = true;
         rules += p[0];
     }
-    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr13';
-    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s13';
+    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr15';
+    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s15';
     if (props.size === "L") {
-        if (!width) rules += ' ZG13';
+        if (!width) rules += ' ZG15';
     } else if (props.size === "S") {
-        if (!width) rules += ' Zu13';
-    } else if (!width) rules += ' ZC13';
+        if (!width) rules += ' Zu15';
+    } else if (!width) rules += ' ZC15';
     if (props.size === "L") {
-        if (!height) rules += ' FA13';
+        if (!height) rules += ' FA15';
     } else if (props.size === "S") {
-        if (!height) rules += ' Ft13';
-    } else if (!height) rules += ' Fx13';
-    rules += ' fa13';
+        if (!height) rules += ' Ft15';
+    } else if (!height) rules += ' Fx15';
+    rules += ' fa15';
     return rules;
 };
 const $1c116ea4b0d2d023$var$track = function anonymous(props) {
     let rules = " ";
-    if (props.isStaticColor) rules += ' Vd13';
-    else rules += ' Vf13';
-    rules += ' Vla13';
-    if (props.size === "L") rules += ' _VuNalie13';
-    else if (props.size === "S") rules += ' _V7m7Gv13';
-    else rules += ' _Vwtfhvc13';
-    if (props.size === "L") rules += ' _Vlwtfhvc13';
-    else if (props.size === "S") rules += ' _Vlai5a013';
-    else rules += ' _Vl7m7Gv13';
+    if (props.isStaticColor) rules += ' Vd15';
+    else rules += ' Vf15';
+    rules += ' Vla15';
+    if (props.size === "L") rules += ' _VuNalie15';
+    else if (props.size === "S") rules += ' _V7m7Gv15';
+    else rules += ' _Vwtfhvc15';
+    if (props.size === "L") rules += ' _Vlwtfhvc15';
+    else if (props.size === "S") rules += ' _Vlai5a015';
+    else rules += ' _Vl7m7Gv15';
     return rules;
 };
 const $1c116ea4b0d2d023$var$fill = function anonymous(props) {
     let rules = " ";
-    if (props.isStaticColor) rules += ' Ve13';
-    else rules += ' Vh13';
-    rules += ' VlUG8Hlc13';
-    rules += ' _Sa13';
-    rules += ' _0d13';
-    if (props.size === "L") rules += ' _VuNalie13';
-    else if (props.size === "S") rules += ' _V7m7Gv13';
-    else rules += ' _Vwtfhvc13';
+    if (props.isStaticColor) rules += ' Ve15';
+    else rules += ' Vh15';
+    rules += ' VlUG8Hlc15';
+    rules += ' _Sa15';
+    rules += ' _0d15';
+    if (props.size === "L") rules += ' _VuNalie15';
+    else if (props.size === "S") rules += ' _V7m7Gv15';
+    else rules += ' _Vwtfhvc15';
     return rules;
 };
 const $1c116ea4b0d2d023$var$hcmStroke = function anonymous(props) {
     let rules = " ";
-    rules += ' VRWHrbc13';
-    rules += ' VlUG8Hlc13';
-    if (props.size === "L") rules += ' _VuNalie13';
-    else if (props.size === "S") rules += ' _V7m7Gv13';
-    else rules += ' _Vwtfhvc13';
+    rules += ' VRWHrbc15';
+    rules += ' VlUG8Hlc15';
+    if (props.size === "L") rules += ' _VuNalie15';
+    else if (props.size === "S") rules += ' _V7m7Gv15';
+    else rules += ' _Vwtfhvc15';
     return rules;
 };
 const $1c116ea4b0d2d023$var$rotationAnimation = "Z8Un9b";
@@ -115,6 +115,9 @@ const $1c116ea4b0d2d023$export$c79b9d6b4cc92af7 = /*#__PURE__*/ (0, $5RNes$react
                 fill: "none",
                 width: "100%",
                 height: "100%",
+                style: {
+                    display: 'block'
+                },
                 children: [
                     /*#__PURE__*/ (0, $5RNes$reactjsxruntime.jsx)("circle", {
                         cx: "50%",

package/dist/private/ProgressCircle.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAcD,MAAM,uCAAiB,CAAC,KAAuB,AAAC,KAAK,KAAM;AAgBpD,MAAM,0DAAwB,CAAA,GAAA,0BAAY,EAA2E;AAE5H,yEAAyE;AACzE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;AAYN,MAAM;;;;;;;;;;;;;AAsBN,MAAM;;;;;;;;;;;;AAiBN,MAAM;;;;;;;;;AAmBN,MAAM;AAUN,iFAAiF;AACjF,MAAM;AAcC,MAAM,4CAAiB,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,eAAe,KAA0B,EAAE,GAA2B;IACpI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,kBACP,WAAW,gBACX,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,cAAc;IAClB,IAAI,SAAS,KACX,cAAc;SACT,IAAI,SAAS,KAClB,cAAc;IAGhB,yGAAyG;IACzG,IAAI,SAAS,CAAC,WAAW,EAAE,qCAAe,cAAc,GAAG,CAAC,CAAC;IAC7D,IAAI,gBAAgB,CAAC,CAAC;IAEtB,qBACE,gCAAC,CAAA,GAAA,iDAAa;QACX,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBACnD,GAAG,WAAW;sBACd;6BACA;YACF,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,mBAAE,eAAe,EAAC,iBAC7B,iCAAC;gBACC,MAAK;gBACL,OAAM;gBACN,QAAO;;kCACP,gCAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,WAAW,gCAAU;kCAAC;wBAAI;;kCAC5B,gCAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,WAAW,4BAAM;2CAAC;kCAAe;wBAAI;;kCACvC,gCAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,WAAW,2BAAK;2CAAC;kCAAe;wBAAI;wBACpC,OAAO;4BACL,yFAAyF;4BACzF,gGAAgG;4BAChG,WAAW,kBAAkB,GAAG,wCAAkB,2CAA2C,EAAE,0CAAoB,4CAA4C,CAAC,GAAG;wBACrK;wBACA,2FAA2F;wBAC3F,YAAW;wBACX,sDAAsD;wBACtD,iBAAgB;wBAChB,kBAAkB,mBAAmB,cAAc,OAAO,YAAY,MAAM;wBAC5E,eAAc;;;;;AAK1B","sources":["packages/@react-spectrum/s2/src/ProgressCircle.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 {ContextValue} from 'react-aria-components/slots';\n\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} 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 {pxToRem} from './progress-utils' with {type: 'macro'};\nimport {ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components/ProgressBar';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nconst pxToRemDynamic = (px: number): string => (px / 16) + 'rem';\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  strokeWidth: {\n    default: `[${pxToRem(3)}]`,\n    size: {\n      S: `[${pxToRem(2)}]`,\n      L: `[${pxToRem(4)}]`\n    },\n    forcedColors: {\n      default: `[${pxToRem(2)}]`,\n      size: {\n        S: `[${pxToRem(1)}]`,\n        L: `[${pxToRem(3)}]`\n      }\n    }\n  }\n});\n\nconst fill = style({\n  stroke: {\n    default: 'blue-900',\n    isStaticColor: 'transparent-overlay-900',\n    forcedColors: 'ButtonText'\n  },\n  rotate: -90,\n  transformOrigin: 'center',\n  strokeWidth: {\n    default: `[${pxToRem(3)}]`,\n    size: {\n      S: `[${pxToRem(2)}]`,\n      L: `[${pxToRem(4)}]`\n    }\n  }\n});\n\nconst hcmStroke = style({\n  stroke: {\n    default: 'transparent',\n    forcedColors: 'ButtonText'\n  },\n  strokeWidth: {\n    default: `[${pxToRem(3)}]`,\n    size: {\n      S: `[${pxToRem(2)}]`,\n      L: `[${pxToRem(4)}]`\n    }\n  }\n});\n\nexport interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className' | 'render' | keyof GlobalDOMAttributes>, 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% - ${pxToRemDynamic(strokeWidth / 2)})`;\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            className={hcmStroke({size})} />\n          <circle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            className={track({isStaticColor, size})} />\n          <circle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            className={fill({isStaticColor, size})}\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.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAsBD,MAAM,uCAAiB,CAAC,KAAuB,KAAK,KAAK;AAgBlD,MAAM,0DACX,CAAA,GAAA,0BAAY,EAA2E;AAEzF,yEAAyE;AACzE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;AAsBN,MAAM;;;;;;;;;;;;AAiBN,MAAM;;;;;;;;;AAiCN,MAAM;AAUN,iFAAiF;AACjF,MAAM;AAcC,MAAM,4CAAiB,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,eAC9D,KAA0B,EAC1B,GAA2B;IAE3B,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QAAC,OAAO,kBAAK,WAAW,gBAAE,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IACrE,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,cAAc;IAClB,IAAI,SAAS,KACX,cAAc;SACT,IAAI,SAAS,KAClB,cAAc;IAGhB,yGAAyG;IACzG,IAAI,SAAS,CAAC,WAAW,EAAE,qCAAe,cAAc,GAAG,CAAC,CAAC;IAC7D,IAAI,gBAAgB,CAAC,CAAC;IAEtB,qBACE,gCAAC,CAAA,GAAA,iDAAa;QACX,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,CAAA,cACT,mBACA,8BACE;gBACE,GAAG,WAAW;sBACd;6BACA;YACF,GACA,MAAM,MAAM;kBAGf,CAAC,cAAC,UAAU,mBAAE,eAAe,EAAC,iBAC7B,iCAAC;gBAAI,MAAK;gBAAO,OAAM;gBAAO,QAAO;gBAAO,OAAO;oBAAC,SAAS;gBAAO;;kCAClE,gCAAC;wBAAO,IAAG;wBAAM,IAAG;wBAAM,GAAG;wBAAQ,WAAW,gCAAU;kCAAC;wBAAI;;kCAC/D,gCAAC;wBAAO,IAAG;wBAAM,IAAG;wBAAM,GAAG;wBAAQ,WAAW,4BAAM;2CAAC;kCAAe;wBAAI;;kCAC1E,gCAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,WAAW,2BAAK;2CAAC;kCAAe;wBAAI;wBACpC,OAAO;4BACL,yFAAyF;4BACzF,gGAAgG;4BAChG,WAAW,kBACP,GAAG,wCAAkB,2CAA2C,EAAE,0CAAoB,4CAA4C,CAAC,GACnI;wBACN;wBACA,2FAA2F;wBAC3F,YAAW;wBACX,sDAAsD;wBACtD,iBAAgB;wBAChB,kBAAkB,mBAAmB,cAAc,OAAO,YAAY,MAAM;wBAC5E,eAAc;;;;;AAM1B","sources":["packages/@react-spectrum/s2/src/ProgressCircle.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 {ContextValue} from 'react-aria-components/slots';\n\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {\n  getAllowedOverrides,\n  staticColor,\n  StylesPropWithHeight,\n  UnsafeStyles\n} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {pxToRem} from './progress-utils' with {type: 'macro'};\nimport {\n  ProgressBar as RACProgressBar,\n  ProgressBarProps as RACProgressBarProps\n} from 'react-aria-components/ProgressBar';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nconst pxToRemDynamic = (px: number): string => px / 16 + 'rem';\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 =\n  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  {\n    ...staticColor(),\n    size: {\n      default: 32,\n      size: {\n        S: 16,\n        L: 64\n      }\n    },\n    aspectRatio: 'square'\n  },\n  getAllowedOverrides({height: true})\n);\n\nconst track = style({\n  stroke: {\n    default: 'gray-300',\n    isStaticColor: 'transparent-overlay-300',\n    forcedColors: 'Background'\n  },\n  strokeWidth: {\n    default: `[${pxToRem(3)}]`,\n    size: {\n      S: `[${pxToRem(2)}]`,\n      L: `[${pxToRem(4)}]`\n    },\n    forcedColors: {\n      default: `[${pxToRem(2)}]`,\n      size: {\n        S: `[${pxToRem(1)}]`,\n        L: `[${pxToRem(3)}]`\n      }\n    }\n  }\n});\n\nconst fill = style({\n  stroke: {\n    default: 'blue-900',\n    isStaticColor: 'transparent-overlay-900',\n    forcedColors: 'ButtonText'\n  },\n  rotate: -90,\n  transformOrigin: 'center',\n  strokeWidth: {\n    default: `[${pxToRem(3)}]`,\n    size: {\n      S: `[${pxToRem(2)}]`,\n      L: `[${pxToRem(4)}]`\n    }\n  }\n});\n\nconst hcmStroke = style({\n  stroke: {\n    default: 'transparent',\n    forcedColors: 'ButtonText'\n  },\n  strokeWidth: {\n    default: `[${pxToRem(3)}]`,\n    size: {\n      S: `[${pxToRem(2)}]`,\n      L: `[${pxToRem(4)}]`\n    }\n  }\n});\n\nexport interface ProgressCircleProps\n  extends\n    Omit<\n      RACProgressBarProps,\n      | 'children'\n      | 'style'\n      | 'valueLabel'\n      | 'formatOptions'\n      | 'label'\n      | 'className'\n      | 'render'\n      | keyof GlobalDOMAttributes\n    >,\n    ProgressCircleStyleProps,\n    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\n * processing, in a visual way. They can represent determinate or indeterminate progress.\n */\nexport const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(\n  props: ProgressCircleProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);\n  let {size = 'M', staticColor, UNSAFE_style, UNSAFE_className = ''} = 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% - ${pxToRemDynamic(strokeWidth / 2)})`;\n  let isStaticColor = !!staticColor;\n\n  return (\n    <RACProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={renderProps =>\n        UNSAFE_className +\n        wrapper(\n          {\n            ...renderProps,\n            size,\n            staticColor\n          },\n          props.styles\n        )\n      }>\n      {({percentage, isIndeterminate}) => (\n        <svg fill=\"none\" width=\"100%\" height=\"100%\" style={{display: 'block'}}>\n          <circle cx=\"50%\" cy=\"50%\" r={radius} className={hcmStroke({size})} />\n          <circle cx=\"50%\" cy=\"50%\" r={radius} className={track({isStaticColor, size})} />\n          <circle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            className={fill({isStaticColor, size})}\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\n                ? `${rotationAnimation} 1s cubic-bezier(.6, .1, .3, .9) infinite, ${dashoffsetAnimation} 1s cubic-bezier(.25, .1, .25, 1.3) infinite`\n                : 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          />\n        </svg>\n      )}\n    </RACProgressBar>\n  );\n});\n"],"names":[],"version":3,"file":"ProgressCircle.cjs.map"}