@react-spectrum/s2 1.0.0 → 1.1.0

package/dist/ProgressCircle.css

@@ -1,77 +1,77 @@
 @layer _.a {
-  .-Ovbhqd-g4hn3s1 {
+  .-Ovbhqd-g4hn3s11 {
     --s2-container-bg: white;
   }
 
-  .-Ovbhqd-gcwrnr1 {
+  .-Ovbhqd-gcwrnr11 {
     --s2-container-bg: black;
   }
 
-  .ZC1 {
+  .ZC11 {
     width: calc(2rem * var(--s2-scale));
   }
 
-  .Zu1 {
+  .Zu11 {
     width: calc(1rem * var(--s2-scale));
   }
 
-  .ZG1 {
+  .ZG11 {
     width: calc(4rem * var(--s2-scale));
   }
 
-  .Fx1 {
+  .Fx11 {
     height: calc(2rem * var(--s2-scale));
   }
 
-  .Ft1 {
+  .Ft11 {
     height: calc(1rem * var(--s2-scale));
   }
 
-  .FA1 {
+  .FA11 {
     height: calc(4rem * var(--s2-scale));
   }
 
-  .fa1 {
+  .fa11 {
     aspect-ratio: 1;
   }
 
-  .Vf1 {
+  .Vf11 {
     stroke: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
   }
 
-  .Vd1 {
+  .Vd11 {
     stroke: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .17);
   }
 
-  .Vh1 {
+  .Vh11 {
     stroke: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #5681ff);
   }
 
-  .Ve1 {
+  .Ve11 {
     stroke: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
   }
 
-  ._Sa1 {
+  ._Sa11 {
     rotate: -90deg;
   }
 
-  ._0d1 {
+  ._0d11 {
     transform-origin: center;
   }
 
-  .VRWHrbc1 {
+  .VRWHrbc11 {
     stroke: #0000;
   }
 
-  ._Vwtfhvc1 {
+  ._Vwtfhvc11 {
     stroke-width: .1875rem;
   }
 
-  ._V7m7Gv1 {
+  ._V7m7Gv11 {
     stroke-width: .125rem;
   }
 
-  ._VuNalie1 {
+  ._VuNalie11 {
     stroke-width: .25rem;
   }
 }
@@ -80,23 +80,23 @@
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .Vla1 {
+    .Vla11 {
       stroke: background;
     }
 
-    ._Vl7m7Gv1 {
+    ._Vl7m7Gv11 {
       stroke-width: .125rem;
     }
 
-    ._Vlai5a01 {
+    ._Vlai5a011 {
       stroke-width: .0625rem;
     }
 
-    ._Vlwtfhvc1 {
+    ._Vlwtfhvc11 {
       stroke-width: .1875rem;
     }
 
-    .VlUG8Hlc1 {
+    .VlUG8Hlc11 {
       stroke: buttontext;
     }
   }

package/dist/ProgressCircle.css.map

@@ -1 +1 @@
-{"mappings":"ACyCgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYF;;;;EAAA;;;;EAsBD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBK;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvCJ;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAsBD;;;;;;AAoCa;;;;;;;;;;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@import \"99c6c5c836ac9ba8\";\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, 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 {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\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' | 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.css.map"}
+{"mappings":"ACyCgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYF;;;;EAAA;;;;EAsBD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBK;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvCJ;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAsBD;;;;;;AAoCa;;;;;;;;;;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@import \"99c6c5c836ac9ba8\";\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, 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 {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\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.css.map"}

package/dist/ProgressCircle.mjs

@@ -27,59 +27,59 @@ const $41ddd91dbbf0c389$var$wrapper = function anonymous(props, overrides) {
     let rules = " ";
     let width = false;
     let height = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
+    let matches = String(overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "Z") width = true;
         if (p[1] === "F") height = true;
         rules += p[0];
     }
-    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr1';
-    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s1';
+    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr11';
+    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s11';
     if (props.size === "L") {
-        if (!width) rules += ' ZG1';
+        if (!width) rules += ' ZG11';
     } else if (props.size === "S") {
-        if (!width) rules += ' Zu1';
-    } else if (!width) rules += ' ZC1';
+        if (!width) rules += ' Zu11';
+    } else if (!width) rules += ' ZC11';
     if (props.size === "L") {
-        if (!height) rules += ' FA1';
+        if (!height) rules += ' FA11';
     } else if (props.size === "S") {
-        if (!height) rules += ' Ft1';
-    } else if (!height) rules += ' Fx1';
-    rules += ' fa1';
+        if (!height) rules += ' Ft11';
+    } else if (!height) rules += ' Fx11';
+    rules += ' fa11';
     return rules;
 };
 const $41ddd91dbbf0c389$var$track = function anonymous(props) {
     let rules = " ";
-    if (props.isStaticColor) rules += ' Vd1';
-    else rules += ' Vf1';
-    rules += ' Vla1';
-    if (props.size === "L") rules += ' _VuNalie1';
-    else if (props.size === "S") rules += ' _V7m7Gv1';
-    else rules += ' _Vwtfhvc1';
-    if (props.size === "L") rules += ' _Vlwtfhvc1';
-    else if (props.size === "S") rules += ' _Vlai5a01';
-    else rules += ' _Vl7m7Gv1';
+    if (props.isStaticColor) rules += ' Vd11';
+    else rules += ' Vf11';
+    rules += ' Vla11';
+    if (props.size === "L") rules += ' _VuNalie11';
+    else if (props.size === "S") rules += ' _V7m7Gv11';
+    else rules += ' _Vwtfhvc11';
+    if (props.size === "L") rules += ' _Vlwtfhvc11';
+    else if (props.size === "S") rules += ' _Vlai5a011';
+    else rules += ' _Vl7m7Gv11';
     return rules;
 };
 const $41ddd91dbbf0c389$var$fill = function anonymous(props) {
     let rules = " ";
-    if (props.isStaticColor) rules += ' Ve1';
-    else rules += ' Vh1';
-    rules += ' VlUG8Hlc1';
-    rules += ' _Sa1';
-    rules += ' _0d1';
-    if (props.size === "L") rules += ' _VuNalie1';
-    else if (props.size === "S") rules += ' _V7m7Gv1';
-    else rules += ' _Vwtfhvc1';
+    if (props.isStaticColor) rules += ' Ve11';
+    else rules += ' Vh11';
+    rules += ' VlUG8Hlc11';
+    rules += ' _Sa11';
+    rules += ' _0d11';
+    if (props.size === "L") rules += ' _VuNalie11';
+    else if (props.size === "S") rules += ' _V7m7Gv11';
+    else rules += ' _Vwtfhvc11';
     return rules;
 };
 const $41ddd91dbbf0c389$var$hcmStroke = function anonymous(props) {
     let rules = " ";
-    rules += ' VRWHrbc1';
-    rules += ' VlUG8Hlc1';
-    if (props.size === "L") rules += ' _VuNalie1';
-    else if (props.size === "S") rules += ' _V7m7Gv1';
-    else rules += ' _Vwtfhvc1';
+    rules += ' VRWHrbc11';
+    rules += ' VlUG8Hlc11';
+    if (props.size === "L") rules += ' _VuNalie11';
+    else if (props.size === "S") rules += ' _V7m7Gv11';
+    else rules += ' _Vwtfhvc11';
     return rules;
 };
 const $41ddd91dbbf0c389$var$rotationAnimation = "Z8Un9b";

package/dist/ProgressCircle.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAYD,MAAM,uCAAiB,CAAC,KAAuB,AAAC,KAAK,KAAM;AAgBpD,MAAM,0DAAwB,CAAA,GAAA,oBAAY,EAA2E;AAE5H,yEAAyE;AACzE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;AAYN,MAAM;;;;;;;;;;;;;AAsBN,MAAM;;;;;;;;;;;;AAiBN,MAAM;;;;;;;;;AAmBN,MAAM;AAUN,iFAAiF;AACjF,MAAM;AAcC,MAAM,4CAAiB,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,eAAe,KAA0B,EAAE,GAA2B;IACpI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,kBACP,WAAW,gBACX,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,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,gBAAC,CAAA,GAAA,kBAAa;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,iBAAC;gBACC,MAAK;gBACL,OAAM;gBACN,QAAO;;kCACP,gBAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,WAAW,gCAAU;kCAAC;wBAAI;;kCAC5B,gBAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,WAAW,4BAAM;2CAAC;kCAAe;wBAAI;;kCACvC,gBAAC;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, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\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 {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\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' | 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.mjs.map"}
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAYD,MAAM,uCAAiB,CAAC,KAAuB,AAAC,KAAK,KAAM;AAgBpD,MAAM,0DAAwB,CAAA,GAAA,oBAAY,EAA2E;AAE5H,yEAAyE;AACzE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;AAYN,MAAM;;;;;;;;;;;;;AAsBN,MAAM;;;;;;;;;;;;AAiBN,MAAM;;;;;;;;;AAmBN,MAAM;AAUN,iFAAiF;AACjF,MAAM;AAcC,MAAM,4CAAiB,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,eAAe,KAA0B,EAAE,GAA2B;IACpI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,kBACP,WAAW,gBACX,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,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,gBAAC,CAAA,GAAA,kBAAa;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,iBAAC;gBACC,MAAK;gBACL,OAAM;gBACN,QAAO;;kCACP,gBAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,WAAW,gCAAU;kCAAC;wBAAI;;kCAC5B,gBAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,WAAW,4BAAM;2CAAC;kCAAe;wBAAI;;kCACvC,gBAAC;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, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\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 {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\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.mjs.map"}

package/dist/Provider.cjs

@@ -53,17 +53,17 @@ function $914a06b3a1c679bc$export$2881499e37b75b9a(props) {
 undefined;
 let $914a06b3a1c679bc$var$providerStyles = function anonymous(props) {
     let rules = " ";
-    if (props.colorScheme === "dark") rules += ' _pa1';
-    else if (props.colorScheme === "light") rules += ' _pb1';
-    else if (props.colorScheme === "light dark") rules += ' _pc1';
-    else rules += ' _pN79Hzc1';
-    if (props.background === "layer-2") rules += ' -Ovbhqd-g_g1';
-    else if (props.background === "layer-1") rules += ' -Ovbhqd-gqlRAZb1';
-    else if (props.background === "base") rules += ' -Ovbhqd-gX1';
-    if (props.background === "layer-2") rules += ' gEzkoQe1';
-    else if (props.background === "layer-1") rules += ' gEzkoQe1';
-    else if (props.background === "base") rules += ' gEzkoQe1';
-    rules += ' _Bb1';
+    if (props.colorScheme === "dark") rules += ' _pa11';
+    else if (props.colorScheme === "light") rules += ' _pb11';
+    else if (props.colorScheme === "light dark") rules += ' _pc11';
+    else rules += ' _pN79Hzc11';
+    if (props.background === "layer-2") rules += ' -Ovbhqd-g_g11';
+    else if (props.background === "layer-1") rules += ' -Ovbhqd-gqlRAZb11';
+    else if (props.background === "base") rules += ' -Ovbhqd-gX11';
+    if (props.background === "layer-2") rules += ' gEzkoQe11';
+    else if (props.background === "layer-1") rules += ' gEzkoQe11';
+    else if (props.background === "base") rules += ' gEzkoQe11';
+    rules += ' _Bb11';
     return rules;
 };
 function $914a06b3a1c679bc$var$ProviderInner(props) {

package/dist/Provider.css

@@ -20,54 +20,54 @@
     }
   }
 
-  ._pN79Hzc1 {
+  ._pN79Hzc11 {
     color-scheme: var(--lightningcss-light, light) var(--lightningcss-dark, dark);
   }
 
-  ._pc1 {
+  ._pc11 {
     --lightningcss-light: initial;
     --lightningcss-dark: ;
     color-scheme: light dark;
   }
 
   @media (prefers-color-scheme: dark) {
-    ._pc1 {
+    ._pc11 {
       --lightningcss-light: ;
       --lightningcss-dark: initial;
     }
   }
 
-  ._pb1 {
+  ._pb11 {
     --lightningcss-light: initial;
     --lightningcss-dark: ;
     color-scheme: light;
   }
 
-  ._pa1 {
+  ._pa11 {
     --lightningcss-light: ;
     --lightningcss-dark: initial;
     color-scheme: dark;
   }
 
-  .-Ovbhqd-gX1 {
+  .-Ovbhqd-gX11 {
     --s2-container-bg: var(--lightningcss-light, #fff) var(--lightningcss-dark, #111);
   }
 
-  .-Ovbhqd-gqlRAZb1 {
+  .-Ovbhqd-gqlRAZb11 {
     --s2-container-bg: var(--lightningcss-light, #f8f8f8) var(--lightningcss-dark, #1b1b1b);
   }
 
-  .-Ovbhqd-g_g1 {
+  .-Ovbhqd-g_g11 {
     --s2-container-bg: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
   }
 
-  .gEzkoQe1 {
+  .gEzkoQe11 {
     background-color: var(--s2-container-bg);
     background-color: var(--s2-container-bg);
     background-color: var(--s2-container-bg);
   }
 
-  ._Bb1 {
+  ._Bb11 {
     isolation: isolate;
   }
 }

package/dist/Provider.mjs

@@ -46,17 +46,17 @@ function $9affbfa4e13b9582$export$2881499e37b75b9a(props) {
 undefined;
 let $9affbfa4e13b9582$var$providerStyles = function anonymous(props) {
     let rules = " ";
-    if (props.colorScheme === "dark") rules += ' _pa1';
-    else if (props.colorScheme === "light") rules += ' _pb1';
-    else if (props.colorScheme === "light dark") rules += ' _pc1';
-    else rules += ' _pN79Hzc1';
-    if (props.background === "layer-2") rules += ' -Ovbhqd-g_g1';
-    else if (props.background === "layer-1") rules += ' -Ovbhqd-gqlRAZb1';
-    else if (props.background === "base") rules += ' -Ovbhqd-gX1';
-    if (props.background === "layer-2") rules += ' gEzkoQe1';
-    else if (props.background === "layer-1") rules += ' gEzkoQe1';
-    else if (props.background === "base") rules += ' gEzkoQe1';
-    rules += ' _Bb1';
+    if (props.colorScheme === "dark") rules += ' _pa11';
+    else if (props.colorScheme === "light") rules += ' _pb11';
+    else if (props.colorScheme === "light dark") rules += ' _pc11';
+    else rules += ' _pN79Hzc11';
+    if (props.background === "layer-2") rules += ' -Ovbhqd-g_g11';
+    else if (props.background === "layer-1") rules += ' -Ovbhqd-gqlRAZb11';
+    else if (props.background === "base") rules += ' -Ovbhqd-gX11';
+    if (props.background === "layer-2") rules += ' gEzkoQe11';
+    else if (props.background === "layer-1") rules += ' gEzkoQe11';
+    else if (props.background === "base") rules += ' gEzkoQe11';
+    rules += ' _Bb11';
     return rules;
 };
 function $9affbfa4e13b9582$var$ProviderInner(props) {