@react-spectrum/s2 1.4.0 → 1.5.0

package/dist/private/ProgressCircle.css.map

@@ -1 +1 @@
-{"mappings":"ACoDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAsBD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBK;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvCJ;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAsBD;;;;;;AAkDa;;;;;;;;;;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} 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%\">\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.css.map"}
+{"mappings":"ACoDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAsBD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBK;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvCJ;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAsBD;;;;;;AAkDa;;;;;;;;;;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} 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.css.map"}

package/dist/private/ProgressCircle.mjs

@@ -33,53 +33,53 @@ const $41ddd91dbbf0c389$var$wrapper = function anonymous(props, overrides) {
         if (p[1] === "F") height = true;
         rules += p[0];
     }
-    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr131';
-    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s131';
+    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr15';
+    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s15';
     if (props.size === "L") {
-        if (!width) rules += ' ZG131';
+        if (!width) rules += ' ZG15';
     } else if (props.size === "S") {
-        if (!width) rules += ' Zu131';
-    } else if (!width) rules += ' ZC131';
+        if (!width) rules += ' Zu15';
+    } else if (!width) rules += ' ZC15';
     if (props.size === "L") {
-        if (!height) rules += ' FA131';
+        if (!height) rules += ' FA15';
     } else if (props.size === "S") {
-        if (!height) rules += ' Ft131';
-    } else if (!height) rules += ' Fx131';
-    rules += ' fa131';
+        if (!height) rules += ' Ft15';
+    } else if (!height) rules += ' Fx15';
+    rules += ' fa15';
     return rules;
 };
 const $41ddd91dbbf0c389$var$track = function anonymous(props) {
     let rules = " ";
-    if (props.isStaticColor) rules += ' Vd131';
-    else rules += ' Vf131';
-    rules += ' Vla131';
-    if (props.size === "L") rules += ' _VuNalie131';
-    else if (props.size === "S") rules += ' _V7m7Gv131';
-    else rules += ' _Vwtfhvc131';
-    if (props.size === "L") rules += ' _Vlwtfhvc131';
-    else if (props.size === "S") rules += ' _Vlai5a0131';
-    else rules += ' _Vl7m7Gv131';
+    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 $41ddd91dbbf0c389$var$fill = function anonymous(props) {
     let rules = " ";
-    if (props.isStaticColor) rules += ' Ve131';
-    else rules += ' Vh131';
-    rules += ' VlUG8Hlc131';
-    rules += ' _Sa131';
-    rules += ' _0d131';
-    if (props.size === "L") rules += ' _VuNalie131';
-    else if (props.size === "S") rules += ' _V7m7Gv131';
-    else rules += ' _Vwtfhvc131';
+    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 $41ddd91dbbf0c389$var$hcmStroke = function anonymous(props) {
     let rules = " ";
-    rules += ' VRWHrbc131';
-    rules += ' VlUG8Hlc131';
-    if (props.size === "L") rules += ' _VuNalie131';
-    else if (props.size === "S") rules += ' _V7m7Gv131';
-    else rules += ' _Vwtfhvc131';
+    rules += ' VRWHrbc15';
+    rules += ' VlUG8Hlc15';
+    if (props.size === "L") rules += ' _VuNalie15';
+    else if (props.size === "S") rules += ' _V7m7Gv15';
+    else rules += ' _Vwtfhvc15';
     return rules;
 };
 const $41ddd91dbbf0c389$var$rotationAnimation = "Z8Un9b";
@@ -108,6 +108,9 @@ const $41ddd91dbbf0c389$export$c79b9d6b4cc92af7 = /*#__PURE__*/ (0, $8ijGz$forwa
                 fill: "none",
                 width: "100%",
                 height: "100%",
+                style: {
+                    display: 'block'
+                },
                 children: [
                     /*#__PURE__*/ (0, $8ijGz$jsx)("circle", {
                         cx: "50%",

package/dist/private/ProgressCircle.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAsBD,MAAM,uCAAiB,CAAC,KAAuB,KAAK,KAAK;AAgBlD,MAAM,0DACX,CAAA,GAAA,oBAAY,EAA2E;AAEzF,yEAAyE;AACzE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;AAsBN,MAAM;;;;;;;;;;;;AAiBN,MAAM;;;;;;;;;AAiCN,MAAM;AAUN,iFAAiF;AACjF,MAAM;AAcC,MAAM,4CAAiB,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,eAC9D,KAA0B,EAC1B,GAA2B;IAE3B,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QAAC,OAAO,kBAAK,WAAW,gBAAE,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IACrE,IAAI,SAAS,CAAA,GAAA,yCAAQ,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,cACT,mBACA,8BACE;gBACE,GAAG,WAAW;sBACd;6BACA;YACF,GACA,MAAM,MAAM;kBAGf,CAAC,cAAC,UAAU,mBAAE,eAAe,EAAC,iBAC7B,iBAAC;gBAAI,MAAK;gBAAO,OAAM;gBAAO,QAAO;;kCACnC,gBAAC;wBAAO,IAAG;wBAAM,IAAG;wBAAM,GAAG;wBAAQ,WAAW,gCAAU;kCAAC;wBAAI;;kCAC/D,gBAAC;wBAAO,IAAG;wBAAM,IAAG;wBAAM,GAAG;wBAAQ,WAAW,4BAAM;2CAAC;kCAAe;wBAAI;;kCAC1E,gBAAC;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%\">\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.mjs.map"}
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAsBD,MAAM,uCAAiB,CAAC,KAAuB,KAAK,KAAK;AAgBlD,MAAM,0DACX,CAAA,GAAA,oBAAY,EAA2E;AAEzF,yEAAyE;AACzE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;AAsBN,MAAM;;;;;;;;;;;;AAiBN,MAAM;;;;;;;;;AAiCN,MAAM;AAUN,iFAAiF;AACjF,MAAM;AAcC,MAAM,4CAAiB,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,eAC9D,KAA0B,EAC1B,GAA2B;IAE3B,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QAAC,OAAO,kBAAK,WAAW,gBAAE,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IACrE,IAAI,SAAS,CAAA,GAAA,yCAAQ,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,cACT,mBACA,8BACE;gBACE,GAAG,WAAW;sBACd;6BACA;YACF,GACA,MAAM,MAAM;kBAGf,CAAC,cAAC,UAAU,mBAAE,eAAe,EAAC,iBAC7B,iBAAC;gBAAI,MAAK;gBAAO,OAAM;gBAAO,QAAO;gBAAO,OAAO;oBAAC,SAAS;gBAAO;;kCAClE,gBAAC;wBAAO,IAAG;wBAAM,IAAG;wBAAM,GAAG;wBAAQ,WAAW,gCAAU;kCAAC;wBAAI;;kCAC/D,gBAAC;wBAAO,IAAG;wBAAM,IAAG;wBAAM,GAAG;wBAAQ,WAAW,4BAAM;2CAAC;kCAAe;wBAAI;;kCAC1E,gBAAC;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.mjs.map"}

package/dist/private/Provider.cjs

@@ -55,29 +55,29 @@ function $914a06b3a1c679bc$export$2881499e37b75b9a(props) {
 undefined;
 let $914a06b3a1c679bc$var$providerStyles = function anonymous(props) {
     let rules = " ";
-    if (props.colorScheme === "dark") rules += ' -ICUGx-_pa131';
-    else if (props.colorScheme === "light") rules += ' -ICUGx-_pb131';
-    else if (props.colorScheme === "light dark") rules += ' -ICUGx-_pc131';
-    rules += ' _pK8eoyd131';
-    if (props.colorScheme === "dark") rules += ' -NvXmrd-_ZLmU131';
-    else if (props.colorScheme === "light") rules += ' -NvXmrd-_ZN8Gi4c131';
+    if (props.colorScheme === "dark") rules += ' -ICUGx-_pa15';
+    else if (props.colorScheme === "light") rules += ' -ICUGx-_pb15';
+    else if (props.colorScheme === "light dark") rules += ' -ICUGx-_pc15';
+    rules += ' _pK8eoyd15';
+    if (props.colorScheme === "dark") rules += ' -NvXmrd-_ZLmU15';
+    else if (props.colorScheme === "light") rules += ' -NvXmrd-_ZN8Gi4c15';
     else if (props.colorScheme === "light dark") {
-        rules += ' -NvXmrd-_ZN8Gi4c131';
-        rules += ' -NvXmrd-D1v0V_ZLmU131';
+        rules += ' -NvXmrd-_ZN8Gi4c15';
+        rules += ' -NvXmrd-D1v0V_ZLmU15';
     }
-    if (props.colorScheme === "dark") rules += ' -j9blY-_ZN8Gi4c131';
-    else if (props.colorScheme === "light") rules += ' -j9blY-_ZLmU131';
+    if (props.colorScheme === "dark") rules += ' -j9blY-_ZN8Gi4c15';
+    else if (props.colorScheme === "light") rules += ' -j9blY-_ZLmU15';
     else if (props.colorScheme === "light dark") {
-        rules += ' -j9blY-_ZLmU131';
-        rules += ' -j9blY-D1v0V_ZN8Gi4c131';
+        rules += ' -j9blY-_ZLmU15';
+        rules += ' -j9blY-D1v0V_ZN8Gi4c15';
     }
-    if (props.background === "layer-2") rules += ' -Ovbhqd-g_g131';
-    else if (props.background === "layer-1") rules += ' -Ovbhqd-gqlRAZb131';
-    else if (props.background === "base") rules += ' -Ovbhqd-gX131';
-    if (props.background === "layer-2") rules += ' gEzkoQe131';
-    else if (props.background === "layer-1") rules += ' gEzkoQe131';
-    else if (props.background === "base") rules += ' gEzkoQe131';
-    rules += ' _Bb131';
+    if (props.background === "layer-2") rules += ' -Ovbhqd-g_g15';
+    else if (props.background === "layer-1") rules += ' -Ovbhqd-gqlRAZb15';
+    else if (props.background === "base") rules += ' -Ovbhqd-gX15';
+    if (props.background === "layer-2") rules += ' gEzkoQe15';
+    else if (props.background === "layer-1") rules += ' gEzkoQe15';
+    else if (props.background === "base") rules += ' gEzkoQe15';
+    rules += ' _Bb15';
     return rules;
 };
 function $914a06b3a1c679bc$var$ProviderInner(props) {

package/dist/private/Provider.css

@@ -17,57 +17,57 @@
     }
   }
 
-  .-ICUGx-_pc131 {
+  .-ICUGx-_pc15 {
     --s2-color-scheme: light dark;
   }
 
-  .-ICUGx-_pb131 {
+  .-ICUGx-_pb15 {
     --s2-color-scheme: light;
   }
 
-  .-ICUGx-_pa131 {
+  .-ICUGx-_pa15 {
     --s2-color-scheme: dark;
   }
 
-  ._pK8eoyd131 {
+  ._pK8eoyd15 {
     color-scheme: var(--s2-color-scheme);
   }
 
-  .-NvXmrd-_ZN8Gi4c131 {
+  .-NvXmrd-_ZN8Gi4c15 {
     --lightningcss-light: initial;
   }
 
-  .-NvXmrd-_ZLmU131 {
+  .-NvXmrd-_ZLmU15 {
     --lightningcss-light:  ;
   }
 
-  .-j9blY-_ZLmU131 {
+  .-j9blY-_ZLmU15 {
     --lightningcss-dark:  ;
   }
 
-  .-j9blY-_ZN8Gi4c131 {
+  .-j9blY-_ZN8Gi4c15 {
     --lightningcss-dark: initial;
   }
 
-  .-Ovbhqd-gX131 {
+  .-Ovbhqd-gX15 {
     --s2-container-bg: light-dark(#fff, #111);
   }
 
-  .-Ovbhqd-gqlRAZb131 {
+  .-Ovbhqd-gqlRAZb15 {
     --s2-container-bg: light-dark(#f8f8f8, #1b1b1b);
   }
 
-  .-Ovbhqd-g_g131 {
+  .-Ovbhqd-g_g15 {
     --s2-container-bg: light-dark(#fff, #222);
   }
 
-  .gEzkoQe131 {
+  .gEzkoQe15 {
     background-color: var(--s2-container-bg);
     background-color: var(--s2-container-bg);
     background-color: var(--s2-container-bg);
   }
 
-  ._Bb131 {
+  ._Bb15 {
     isolation: isolate;
   }
 }
@@ -76,11 +76,11 @@
 
 @layer _.b.D1v0V {
   @media (prefers-color-scheme: dark) {
-    .-NvXmrd-D1v0V_ZLmU131 {
+    .-NvXmrd-D1v0V_ZLmU15 {
       --lightningcss-light:  ;
     }
 
-    .-j9blY-D1v0V_ZN8Gi4c131 {
+    .-j9blY-D1v0V_ZN8Gi4c15 {
       --lightningcss-dark: initial;
     }
   }

package/dist/private/Provider.mjs

@@ -48,29 +48,29 @@ function $9affbfa4e13b9582$export$2881499e37b75b9a(props) {
 undefined;
 let $9affbfa4e13b9582$var$providerStyles = function anonymous(props) {
     let rules = " ";
-    if (props.colorScheme === "dark") rules += ' -ICUGx-_pa131';
-    else if (props.colorScheme === "light") rules += ' -ICUGx-_pb131';
-    else if (props.colorScheme === "light dark") rules += ' -ICUGx-_pc131';
-    rules += ' _pK8eoyd131';
-    if (props.colorScheme === "dark") rules += ' -NvXmrd-_ZLmU131';
-    else if (props.colorScheme === "light") rules += ' -NvXmrd-_ZN8Gi4c131';
+    if (props.colorScheme === "dark") rules += ' -ICUGx-_pa15';
+    else if (props.colorScheme === "light") rules += ' -ICUGx-_pb15';
+    else if (props.colorScheme === "light dark") rules += ' -ICUGx-_pc15';
+    rules += ' _pK8eoyd15';
+    if (props.colorScheme === "dark") rules += ' -NvXmrd-_ZLmU15';
+    else if (props.colorScheme === "light") rules += ' -NvXmrd-_ZN8Gi4c15';
     else if (props.colorScheme === "light dark") {
-        rules += ' -NvXmrd-_ZN8Gi4c131';
-        rules += ' -NvXmrd-D1v0V_ZLmU131';
+        rules += ' -NvXmrd-_ZN8Gi4c15';
+        rules += ' -NvXmrd-D1v0V_ZLmU15';
     }
-    if (props.colorScheme === "dark") rules += ' -j9blY-_ZN8Gi4c131';
-    else if (props.colorScheme === "light") rules += ' -j9blY-_ZLmU131';
+    if (props.colorScheme === "dark") rules += ' -j9blY-_ZN8Gi4c15';
+    else if (props.colorScheme === "light") rules += ' -j9blY-_ZLmU15';
     else if (props.colorScheme === "light dark") {
-        rules += ' -j9blY-_ZLmU131';
-        rules += ' -j9blY-D1v0V_ZN8Gi4c131';
+        rules += ' -j9blY-_ZLmU15';
+        rules += ' -j9blY-D1v0V_ZN8Gi4c15';
     }
-    if (props.background === "layer-2") rules += ' -Ovbhqd-g_g131';
-    else if (props.background === "layer-1") rules += ' -Ovbhqd-gqlRAZb131';
-    else if (props.background === "base") rules += ' -Ovbhqd-gX131';
-    if (props.background === "layer-2") rules += ' gEzkoQe131';
-    else if (props.background === "layer-1") rules += ' gEzkoQe131';
-    else if (props.background === "base") rules += ' gEzkoQe131';
-    rules += ' _Bb131';
+    if (props.background === "layer-2") rules += ' -Ovbhqd-g_g15';
+    else if (props.background === "layer-1") rules += ' -Ovbhqd-gqlRAZb15';
+    else if (props.background === "base") rules += ' -Ovbhqd-gX15';
+    if (props.background === "layer-2") rules += ' gEzkoQe15';
+    else if (props.background === "layer-1") rules += ' gEzkoQe15';
+    else if (props.background === "base") rules += ' gEzkoQe15';
+    rules += ' _Bb15';
     return rules;
 };
 function $9affbfa4e13b9582$var$ProviderInner(props) {