@react-spectrum/s2 3.0.0-nightly-326f48154-241216 → 3.0.0-nightly-fee532d6a-241217

package/dist/Meter.cjs

@@ -46,6 +46,8 @@ const $f53cdf036c04454a$var$wrapper = function anonymous(props, overrides) {
         if (/^\s*q/.test(p)) $q = true;
         if (/^\s*r/.test(p)) $r = true;
     }
+    if (props.staticColor === "white") rules += ' -_1de2x0q_b-b';
+    else if (props.staticColor === "black") rules += ' -_1de2x0q_b-c';
     if (!$U) rules += ' Uc';
     rules += ' _Zf';
     if (props.labelPosition === "side") rules += ' __h-jyg4vb';
@@ -95,9 +97,8 @@ const $f53cdf036c04454a$var$valueStyles = function anonymous(props) {
     rules += ' _eb';
     rules += ' _f-1x99dlob';
     rules += ' _fa';
-    rules += ' aa_____x';
-    if (props.staticColor === "black") rules += ' a_____s';
-    else if (props.staticColor === "white") rules += ' a_____d';
+    rules += ' aa_____K';
+    if (props.isStaticColor) rules += ' a_____G';
     else if (props.isDisabled) rules += ' aj';
     else {
         if (props.isPressed) rules += ' an';
@@ -136,15 +137,14 @@ const $f53cdf036c04454a$var$trackStyles = function anonymous(props) {
     rules += ' _wf';
     rules += ' _xf';
     rules += ' _yf';
-    rules += ' ba_____w';
-    if (props.staticColor === "black") rules += ' b_____n';
-    else if (props.staticColor === "white") rules += ' b____7';
+    rules += ' ba_____J';
+    if (props.isStaticColor) rules += ' b_____z';
     else rules += ' bi';
     rules += ' _Nab';
     rules += ' _Na';
     rules += ' _Lab';
     rules += ' _La';
-    rules += ' da_____x';
+    rules += ' da_____K';
     rules += ' da';
     rules += ' __Q-3t1y';
     if (props.size === "XL") rules += ' ky';
@@ -162,9 +162,8 @@ const $f53cdf036c04454a$var$fillStyles = function anonymous(props) {
     rules += ' _wf';
     rules += ' _xf';
     rules += ' _yf';
-    rules += ' ba_____x';
-    if (props.staticColor === "black") rules += ' b_____s';
-    else if (props.staticColor === "white") rules += ' b_____f';
+    rules += ' ba_____K';
+    if (props.isStaticColor) rules += ' b_____F';
     else if (props.variant === "negative") rules += ' b-awl6xt';
     else if (props.variant === "notice") rules += ' b-1c1g5qb';
     else if (props.variant === "positive") rules += ' b-32o7sp';
@@ -175,6 +174,7 @@ const $f53cdf036c04454a$export$62e3ae2a4090b879 = /*#__PURE__*/ (0, $aQdtU$react
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $f53cdf036c04454a$export$8b645da15a96b44f);
     let domRef = (0, $aQdtU$reactspectrumutils.useDOMRef)(ref);
     let { label: label, size: size = 'M', staticColor: staticColor, styles: styles, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, variant: variant = 'informative', labelPosition: labelPosition = 'top', ...groupProps } = props;
+    let isStaticColor = !!staticColor;
     return /*#__PURE__*/ (0, $aQdtU$reactjsxruntime.jsx)((0, $aQdtU$reactariacomponents.Meter), {
         ...groupProps,
         ref: domRef,
@@ -198,19 +198,19 @@ const $f53cdf036c04454a$export$62e3ae2a4090b879 = /*#__PURE__*/ (0, $aQdtU$react
                         styles: $f53cdf036c04454a$var$valueStyles({
                             size: size,
                             labelAlign: 'end',
-                            staticColor: staticColor
+                            isStaticColor: isStaticColor
                         }),
                         children: valueText
                     }),
                     /*#__PURE__*/ (0, $aQdtU$reactjsxruntime.jsx)((0, $5eb75e0c130e0669$exports.SkeletonWrapper), {
                         children: /*#__PURE__*/ (0, $aQdtU$reactjsxruntime.jsx)("div", {
                             className: $f53cdf036c04454a$var$trackStyles({
-                                staticColor: staticColor,
+                                isStaticColor: isStaticColor,
                                 size: size
                             }),
                             children: /*#__PURE__*/ (0, $aQdtU$reactjsxruntime.jsx)("div", {
                                 className: $f53cdf036c04454a$var$fillStyles({
-                                    staticColor: staticColor,
+                                    isStaticColor: isStaticColor,
                                     variant: variant
                                 }),
                                 style: {

package/dist/Meter.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6CM,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAyD;AAEjG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;AA4BC,MAAM,0DAAQ,CAAA,GAAA,uBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAA2B;IAC3F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,8BACV,gBAAgB,OAChB,GAAG,YACJ,GAAG;IAEJ,qBACE,gCAAC,CAAA,GAAA,gCAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;2BACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,uBAAS,gCAAC,CAAA,GAAA,8BAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCAC9E,gCAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gCAAC;4BAAI,WAAW,kCAAY;6CAAC;sCAAa;4BAAI;sCAC5C,cAAA,gCAAC;gCAAI,WAAW,iCAAW;iDAAC;6CAAa;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOjG","sources":["packages/@react-spectrum/s2/src/Meter.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  Meter as AriaMeter,\n  MeterProps as AriaMeterProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n  /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n   * @default 'informative'\n   */\n  variant?: 'informative' | 'positive' | 'notice' | 'negative',\n  /**\n   * The size of the Meter.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The static color style to apply. Useful when the button appears over a color background.\n   */\n  staticColor?: 'white' | 'black',\n  /**\n   * The label's overall position relative to the element it is labeling.\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n  ...bar()\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 fillStyles = style<MeterStyleProps>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: lightDark('informative-800', 'informative-900'), // 'informative-visual',\n    variant: {\n      positive: lightDark('positive-800', 'positive-900'), // 'positive-visual',\n      notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',\n      negative: lightDark('negative-800', 'negative-900') // 'negative-visual'\n    },\n    staticColor: {\n      white: {\n        default: 'transparent-white-900'\n      },\n      // TODO: Is there a black static color in S2?\n      black: {\n        default: 'transparent-black-900'\n      }\n    },\n    forcedColors: 'ButtonText'\n  }\n});\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nexport const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n  let domRef = useDOMRef(ref);\n\n  let {\n    label,\n    size = 'M',\n    staticColor,\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    variant = 'informative',\n    labelPosition = 'top',\n    ...groupProps\n  } = props;\n\n  return (\n    <AriaMeter\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({\n        size,\n        variant,\n        staticColor,\n        labelPosition\n      }, styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}\n          <SkeletonWrapper>\n            <div className={trackStyles({staticColor, size})}>\n              <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />\n            </div>\n          </SkeletonWrapper>\n        </>\n      )}\n    </AriaMeter>\n  );\n});\n"],"names":[],"version":3,"file":"Meter.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6CM,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAyD;AAEjG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;AAoBC,MAAM,0DAAQ,CAAA,GAAA,uBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAA2B;IAC3F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,8BACV,gBAAgB,OAChB,GAAG,YACJ,GAAG;IACJ,IAAI,gBAAgB,CAAC,CAAC;IAEtB,qBACE,gCAAC,CAAA,GAAA,gCAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;2BACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,uBAAS,gCAAC,CAAA,GAAA,8BAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;2CAAO;wBAAa;kCAAK;;kCAChF,gCAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gCAAC;4BAAI,WAAW,kCAAY;+CAAC;sCAAe;4BAAI;sCAC9C,cAAA,gCAAC;gCAAI,WAAW,iCAAW;mDAAC;6CAAe;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOnG","sources":["packages/@react-spectrum/s2/src/Meter.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  Meter as AriaMeter,\n  MeterProps as AriaMeterProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n  /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n   * @default 'informative'\n   */\n  variant?: 'informative' | 'positive' | 'notice' | 'negative',\n  /**\n   * The size of the Meter.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\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\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n  ...bar()\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 fillStyles = style<MeterStyleProps & {isStaticColor: boolean}>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: lightDark('informative-800', 'informative-900'), // 'informative-visual',\n    variant: {\n      positive: lightDark('positive-800', 'positive-900'), // 'positive-visual',\n      notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',\n      negative: lightDark('negative-800', 'negative-900') // 'negative-visual'\n    },\n    isStaticColor: 'transparent-overlay-900',\n    forcedColors: 'ButtonText'\n  }\n});\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nexport const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n  let domRef = useDOMRef(ref);\n\n  let {\n    label,\n    size = 'M',\n    staticColor,\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    variant = 'informative',\n    labelPosition = 'top',\n    ...groupProps\n  } = props;\n  let isStaticColor = !!staticColor;\n\n  return (\n    <AriaMeter\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({\n        size,\n        variant,\n        staticColor,\n        labelPosition\n      }, styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && <Text styles={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</Text>}\n          <SkeletonWrapper>\n            <div className={trackStyles({isStaticColor, size})}>\n              <div className={fillStyles({isStaticColor, variant})} style={{width: percentage + '%'}} />\n            </div>\n          </SkeletonWrapper>\n        </>\n      )}\n    </AriaMeter>\n  );\n});\n"],"names":[],"version":3,"file":"Meter.cjs.map"}

package/dist/Meter.css

@@ -1,4 +1,12 @@
 @layer _.a {
+  .-_1de2x0q_b-c {
+    --s2-container-bg: white;
+  }
+
+  .-_1de2x0q_b-b {
+    --s2-container-bg: black;
+  }
+
   .Uc {
     position: relative;
   }
@@ -118,12 +126,8 @@
     color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
   }
 
-  .a_____d {
-    color: #ffffffa8;
-  }
-
-  .a_____s {
-    color: #000000ed;
+  .a_____G {
+    color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
   .__Hb {
@@ -218,12 +222,8 @@
     background-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
   }
 
-  .b____7 {
-    background-color: #ffffff1c;
-  }
-
-  .b_____n {
-    background-color: #00000038;
+  .b_____z {
+    background-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .17);
   }
 
   ._Na {
@@ -298,12 +298,8 @@
     background-color: var(--lightningcss-light, #f03823) var(--lightningcss-dark, #fc432e);
   }
 
-  .b_____f {
-    background-color: #fffffff0;
-  }
-
-  .b_____s {
-    background-color: #000000ed;
+  .b_____F {
+    background-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
   }
 }
 
@@ -381,11 +377,11 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .aa_____x {
+    .aa_____K {
       color: buttontext;
     }
 
-    .ba_____w {
+    .ba_____J {
       background-color: buttonface;
     }
 
@@ -397,11 +393,11 @@
       outline-style: solid;
     }
 
-    .da_____x {
+    .da_____K {
       outline-color: buttontext;
     }
 
-    .ba_____x {
+    .ba_____K {
       background-color: buttontext;
     }
   }

package/dist/Meter.css.map

@@ -1 +1 @@
-{"mappings":"ACyDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAII;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtBH;EAII;;;;EAAA;;;;;AAJJ;;AAII;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAaD;;;;;;AAbC;EAAA;IAAA;;;;;;AAaD","sources":["9248845643c61064","packages/@react-spectrum/s2/src/Meter.tsx"],"sourcesContent":["@import \"a82baabbcb8c2181\";\n@import \"387ba29f17cbbc9f\";\n@import \"ae93cf6195cc0b20\";\n@import \"c4a3f6bd0d23c6e6\";\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 {\n  Meter as AriaMeter,\n  MeterProps as AriaMeterProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n  /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n   * @default 'informative'\n   */\n  variant?: 'informative' | 'positive' | 'notice' | 'negative',\n  /**\n   * The size of the Meter.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The static color style to apply. Useful when the button appears over a color background.\n   */\n  staticColor?: 'white' | 'black',\n  /**\n   * The label's overall position relative to the element it is labeling.\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n  ...bar()\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 fillStyles = style<MeterStyleProps>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: lightDark('informative-800', 'informative-900'), // 'informative-visual',\n    variant: {\n      positive: lightDark('positive-800', 'positive-900'), // 'positive-visual',\n      notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',\n      negative: lightDark('negative-800', 'negative-900') // 'negative-visual'\n    },\n    staticColor: {\n      white: {\n        default: 'transparent-white-900'\n      },\n      // TODO: Is there a black static color in S2?\n      black: {\n        default: 'transparent-black-900'\n      }\n    },\n    forcedColors: 'ButtonText'\n  }\n});\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nexport const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n  let domRef = useDOMRef(ref);\n\n  let {\n    label,\n    size = 'M',\n    staticColor,\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    variant = 'informative',\n    labelPosition = 'top',\n    ...groupProps\n  } = props;\n\n  return (\n    <AriaMeter\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({\n        size,\n        variant,\n        staticColor,\n        labelPosition\n      }, styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}\n          <SkeletonWrapper>\n            <div className={trackStyles({staticColor, size})}>\n              <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />\n            </div>\n          </SkeletonWrapper>\n        </>\n      )}\n    </AriaMeter>\n  );\n});\n"],"names":[],"version":3,"file":"Meter.css.map"}
+{"mappings":"ACyDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAII;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtBH;EAII;;;;EAAA;;;;;AAJJ;;AAII;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAaD;;;;;;AAbC;EAAA;IAAA;;;;;;AAaD","sources":["9248845643c61064","packages/@react-spectrum/s2/src/Meter.tsx"],"sourcesContent":["@import \"a82baabbcb8c2181\";\n@import \"387ba29f17cbbc9f\";\n@import \"ae93cf6195cc0b20\";\n@import \"c4a3f6bd0d23c6e6\";\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 {\n  Meter as AriaMeter,\n  MeterProps as AriaMeterProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n  /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n   * @default 'informative'\n   */\n  variant?: 'informative' | 'positive' | 'notice' | 'negative',\n  /**\n   * The size of the Meter.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\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\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n  ...bar()\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 fillStyles = style<MeterStyleProps & {isStaticColor: boolean}>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: lightDark('informative-800', 'informative-900'), // 'informative-visual',\n    variant: {\n      positive: lightDark('positive-800', 'positive-900'), // 'positive-visual',\n      notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',\n      negative: lightDark('negative-800', 'negative-900') // 'negative-visual'\n    },\n    isStaticColor: 'transparent-overlay-900',\n    forcedColors: 'ButtonText'\n  }\n});\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nexport const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n  let domRef = useDOMRef(ref);\n\n  let {\n    label,\n    size = 'M',\n    staticColor,\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    variant = 'informative',\n    labelPosition = 'top',\n    ...groupProps\n  } = props;\n  let isStaticColor = !!staticColor;\n\n  return (\n    <AriaMeter\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({\n        size,\n        variant,\n        staticColor,\n        labelPosition\n      }, styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && <Text styles={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</Text>}\n          <SkeletonWrapper>\n            <div className={trackStyles({isStaticColor, size})}>\n              <div className={fillStyles({isStaticColor, variant})} style={{width: percentage + '%'}} />\n            </div>\n          </SkeletonWrapper>\n        </>\n      )}\n    </AriaMeter>\n  );\n});\n"],"names":[],"version":3,"file":"Meter.css.map"}

package/dist/Meter.mjs

@@ -39,6 +39,8 @@ const $bb56943300b294c6$var$wrapper = function anonymous(props, overrides) {
         if (/^\s*q/.test(p)) $q = true;
         if (/^\s*r/.test(p)) $r = true;
     }
+    if (props.staticColor === "white") rules += ' -_1de2x0q_b-b';
+    else if (props.staticColor === "black") rules += ' -_1de2x0q_b-c';
     if (!$U) rules += ' Uc';
     rules += ' _Zf';
     if (props.labelPosition === "side") rules += ' __h-jyg4vb';
@@ -88,9 +90,8 @@ const $bb56943300b294c6$var$valueStyles = function anonymous(props) {
     rules += ' _eb';
     rules += ' _f-1x99dlob';
     rules += ' _fa';
-    rules += ' aa_____x';
-    if (props.staticColor === "black") rules += ' a_____s';
-    else if (props.staticColor === "white") rules += ' a_____d';
+    rules += ' aa_____K';
+    if (props.isStaticColor) rules += ' a_____G';
     else if (props.isDisabled) rules += ' aj';
     else {
         if (props.isPressed) rules += ' an';
@@ -129,15 +130,14 @@ const $bb56943300b294c6$var$trackStyles = function anonymous(props) {
     rules += ' _wf';
     rules += ' _xf';
     rules += ' _yf';
-    rules += ' ba_____w';
-    if (props.staticColor === "black") rules += ' b_____n';
-    else if (props.staticColor === "white") rules += ' b____7';
+    rules += ' ba_____J';
+    if (props.isStaticColor) rules += ' b_____z';
     else rules += ' bi';
     rules += ' _Nab';
     rules += ' _Na';
     rules += ' _Lab';
     rules += ' _La';
-    rules += ' da_____x';
+    rules += ' da_____K';
     rules += ' da';
     rules += ' __Q-3t1y';
     if (props.size === "XL") rules += ' ky';
@@ -155,9 +155,8 @@ const $bb56943300b294c6$var$fillStyles = function anonymous(props) {
     rules += ' _wf';
     rules += ' _xf';
     rules += ' _yf';
-    rules += ' ba_____x';
-    if (props.staticColor === "black") rules += ' b_____s';
-    else if (props.staticColor === "white") rules += ' b_____f';
+    rules += ' ba_____K';
+    if (props.isStaticColor) rules += ' b_____F';
     else if (props.variant === "negative") rules += ' b-awl6xt';
     else if (props.variant === "notice") rules += ' b-1c1g5qb';
     else if (props.variant === "positive") rules += ' b-32o7sp';
@@ -168,6 +167,7 @@ const $bb56943300b294c6$export$62e3ae2a4090b879 = /*#__PURE__*/ (0, $blcZa$forwa
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $bb56943300b294c6$export$8b645da15a96b44f);
     let domRef = (0, $blcZa$useDOMRef)(ref);
     let { label: label, size: size = 'M', staticColor: staticColor, styles: styles, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, variant: variant = 'informative', labelPosition: labelPosition = 'top', ...groupProps } = props;
+    let isStaticColor = !!staticColor;
     return /*#__PURE__*/ (0, $blcZa$jsx)((0, $blcZa$Meter), {
         ...groupProps,
         ref: domRef,
@@ -191,19 +191,19 @@ const $bb56943300b294c6$export$62e3ae2a4090b879 = /*#__PURE__*/ (0, $blcZa$forwa
                         styles: $bb56943300b294c6$var$valueStyles({
                             size: size,
                             labelAlign: 'end',
-                            staticColor: staticColor
+                            isStaticColor: isStaticColor
                         }),
                         children: valueText
                     }),
                     /*#__PURE__*/ (0, $blcZa$jsx)((0, $5ad421ec19460c48$export$6069cbe61f690103), {
                         children: /*#__PURE__*/ (0, $blcZa$jsx)("div", {
                             className: $bb56943300b294c6$var$trackStyles({
-                                staticColor: staticColor,
+                                isStaticColor: isStaticColor,
                                 size: size
                             }),
                             children: /*#__PURE__*/ (0, $blcZa$jsx)("div", {
                                 className: $bb56943300b294c6$var$fillStyles({
-                                    staticColor: staticColor,
+                                    isStaticColor: isStaticColor,
                                     variant: variant
                                 }),
                                 style: {

package/dist/Meter.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6CM,MAAM,0DAAe,CAAA,GAAA,oBAAY,EAAyD;AAEjG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;AA4BC,MAAM,0DAAQ,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAA2B;IAC3F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,8BACV,gBAAgB,OAChB,GAAG,YACJ,GAAG;IAEJ,qBACE,gBAAC,CAAA,GAAA,YAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;2BACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,uBAAS,gBAAC,CAAA,GAAA,yCAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCAC9E,gBAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gBAAC;4BAAI,WAAW,kCAAY;6CAAC;sCAAa;4BAAI;sCAC5C,cAAA,gBAAC;gCAAI,WAAW,iCAAW;iDAAC;6CAAa;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOjG","sources":["packages/@react-spectrum/s2/src/Meter.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  Meter as AriaMeter,\n  MeterProps as AriaMeterProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n  /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n   * @default 'informative'\n   */\n  variant?: 'informative' | 'positive' | 'notice' | 'negative',\n  /**\n   * The size of the Meter.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The static color style to apply. Useful when the button appears over a color background.\n   */\n  staticColor?: 'white' | 'black',\n  /**\n   * The label's overall position relative to the element it is labeling.\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n  ...bar()\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 fillStyles = style<MeterStyleProps>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: lightDark('informative-800', 'informative-900'), // 'informative-visual',\n    variant: {\n      positive: lightDark('positive-800', 'positive-900'), // 'positive-visual',\n      notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',\n      negative: lightDark('negative-800', 'negative-900') // 'negative-visual'\n    },\n    staticColor: {\n      white: {\n        default: 'transparent-white-900'\n      },\n      // TODO: Is there a black static color in S2?\n      black: {\n        default: 'transparent-black-900'\n      }\n    },\n    forcedColors: 'ButtonText'\n  }\n});\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nexport const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n  let domRef = useDOMRef(ref);\n\n  let {\n    label,\n    size = 'M',\n    staticColor,\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    variant = 'informative',\n    labelPosition = 'top',\n    ...groupProps\n  } = props;\n\n  return (\n    <AriaMeter\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({\n        size,\n        variant,\n        staticColor,\n        labelPosition\n      }, styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}\n          <SkeletonWrapper>\n            <div className={trackStyles({staticColor, size})}>\n              <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />\n            </div>\n          </SkeletonWrapper>\n        </>\n      )}\n    </AriaMeter>\n  );\n});\n"],"names":[],"version":3,"file":"Meter.mjs.map"}
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6CM,MAAM,0DAAe,CAAA,GAAA,oBAAY,EAAyD;AAEjG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;AAoBC,MAAM,0DAAQ,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAA2B;IAC3F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,8BACV,gBAAgB,OAChB,GAAG,YACJ,GAAG;IACJ,IAAI,gBAAgB,CAAC,CAAC;IAEtB,qBACE,gBAAC,CAAA,GAAA,YAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;2BACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,uBAAS,gBAAC,CAAA,GAAA,yCAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;2CAAO;wBAAa;kCAAK;;kCAChF,gBAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gBAAC;4BAAI,WAAW,kCAAY;+CAAC;sCAAe;4BAAI;sCAC9C,cAAA,gBAAC;gCAAI,WAAW,iCAAW;mDAAC;6CAAe;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOnG","sources":["packages/@react-spectrum/s2/src/Meter.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  Meter as AriaMeter,\n  MeterProps as AriaMeterProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {lightDark, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n  /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n   * @default 'informative'\n   */\n  variant?: 'informative' | 'positive' | 'notice' | 'negative',\n  /**\n   * The size of the Meter.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\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\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n  ...bar()\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 fillStyles = style<MeterStyleProps & {isStaticColor: boolean}>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: lightDark('informative-800', 'informative-900'), // 'informative-visual',\n    variant: {\n      positive: lightDark('positive-800', 'positive-900'), // 'positive-visual',\n      notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',\n      negative: lightDark('negative-800', 'negative-900') // 'negative-visual'\n    },\n    isStaticColor: 'transparent-overlay-900',\n    forcedColors: 'ButtonText'\n  }\n});\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nexport const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n  let domRef = useDOMRef(ref);\n\n  let {\n    label,\n    size = 'M',\n    staticColor,\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    variant = 'informative',\n    labelPosition = 'top',\n    ...groupProps\n  } = props;\n  let isStaticColor = !!staticColor;\n\n  return (\n    <AriaMeter\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({\n        size,\n        variant,\n        staticColor,\n        labelPosition\n      }, styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && <Text styles={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</Text>}\n          <SkeletonWrapper>\n            <div className={trackStyles({isStaticColor, size})}>\n              <div className={fillStyles({isStaticColor, variant})} style={{width: percentage + '%'}} />\n            </div>\n          </SkeletonWrapper>\n        </>\n      )}\n    </AriaMeter>\n  );\n});\n"],"names":[],"version":3,"file":"Meter.mjs.map"}

package/dist/Modal.cjs

@@ -104,7 +104,7 @@ const $8e678305a8c10028$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $j6TWk$react
                     if (props.size === "fullscreenTakeover") rules += ' po';
                     else if (props.size === "fullscreen") rules += ' po';
                     else rules += ' p-yjhhbg';
-                    rules += ' -_1de2x0q_b-______k';
+                    rules += ' -_1de2x0q_b-______x';
                     rules += ' b-1de2x0q';
                     if (props.isExiting) rules += ' _S-1nys8p3';
                     else if (props.isEntering) rules += ' _S-3zirke';

package/dist/Modal.css

@@ -170,7 +170,7 @@
     max-height: none;
   }
 
-  .-_1de2x0q_b-______k {
+  .-_1de2x0q_b-______x {
     --s2-container-bg: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
   }
 

package/dist/Modal.mjs

@@ -98,7 +98,7 @@ const $c46d159bd615e407$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $fdAcL$forwa
                     if (props.size === "fullscreenTakeover") rules += ' po';
                     else if (props.size === "fullscreen") rules += ' po';
                     else rules += ' p-yjhhbg';
-                    rules += ' -_1de2x0q_b-______k';
+                    rules += ' -_1de2x0q_b-______x';
                     rules += ' b-1de2x0q';
                     if (props.isExiting) rules += ' _S-1nys8p3';
                     else if (props.isEntering) rules += ' _S-3zirke';

package/dist/NumberField.cjs

@@ -94,9 +94,9 @@ const $a366ef8f467b1cb5$var$inputButton = function anonymous(props) {
     rules += ' _Q-375x7f';
     rules += ' _Raa';
     rules += ' _Ra';
-    if (props.isDisabled) rules += ' ba_____B';
-    else if (props.isHovered) rules += ' ba_____z';
-    else rules += ' ba_____x';
+    if (props.isDisabled) rules += ' ba_____O';
+    else if (props.isHovered) rules += ' ba_____M';
+    else rules += ' ba_____K';
     if (props.isDisabled) rules += ' bg';
     else {
         if (props.isPressed) rules += ' bh';
@@ -104,7 +104,7 @@ const $a366ef8f467b1cb5$var$inputButton = function anonymous(props) {
         else if (props.isHovered) rules += ' bh';
         else rules += ' bg';
     }
-    rules += ' aa_____w';
+    rules += ' aa_____J';
     if (props.isDisabled) rules += ' aj';
     else {
         if (props.isPressed) rules += ' ao';

package/dist/NumberField.css

@@ -433,19 +433,19 @@
       transition-timing-function: cubic-bezier(.45, 0, .4, 1);
     }
 
-    .ba_____x {
+    .ba_____K {
       background-color: buttontext;
     }
 
-    .ba_____z {
+    .ba_____M {
       background-color: highlight;
     }
 
-    .ba_____B {
+    .ba_____O {
       background-color: graytext;
     }
 
-    .aa_____w {
+    .aa_____J {
       color: buttonface;
     }
   }

package/dist/NumberField.mjs

@@ -87,9 +87,9 @@ const $675eca1a78ccd399$var$inputButton = function anonymous(props) {
     rules += ' _Q-375x7f';
     rules += ' _Raa';
     rules += ' _Ra';
-    if (props.isDisabled) rules += ' ba_____B';
-    else if (props.isHovered) rules += ' ba_____z';
-    else rules += ' ba_____x';
+    if (props.isDisabled) rules += ' ba_____O';
+    else if (props.isHovered) rules += ' ba_____M';
+    else rules += ' ba_____K';
     if (props.isDisabled) rules += ' bg';
     else {
         if (props.isPressed) rules += ' bh';
@@ -97,7 +97,7 @@ const $675eca1a78ccd399$var$inputButton = function anonymous(props) {
         else if (props.isHovered) rules += ' bh';
         else rules += ' bg';
     }
-    rules += ' aa_____w';
+    rules += ' aa_____J';
     if (props.isDisabled) rules += ' aj';
     else {
         if (props.isPressed) rules += ' ao';

package/dist/Picker.cjs

@@ -64,7 +64,7 @@ const $b9c30139cd63c62a$var$inputButton = function anonymous(props) {
     if (props.isQuiet) rules += ' _La';
     else if (props.isFocusVisible) rules += ' _Lb';
     else rules += ' _La';
-    rules += ' da_____z';
+    rules += ' da_____M';
     rules += ' dx';
     rules += ' _Nc';
     rules += ' _M-3t1z';
@@ -123,8 +123,8 @@ const $b9c30139cd63c62a$var$inputButton = function anonymous(props) {
     rules += ' _ja';
     rules += ' waa';
     rules += ' wf';
-    if (props.isDisabled) rules += ' ca_____B';
-    else rules += ' ca_____x';
+    if (props.isDisabled) rules += ' ca_____O';
+    else rules += ' ca_____K';
     rules += ' _vh';
     rules += ' _wh';
     rules += ' _xh';
@@ -162,7 +162,7 @@ const $b9c30139cd63c62a$var$inputButton = function anonymous(props) {
     else rules += ' -_375toq_k-f';
     return rules;
 };
-const $b9c30139cd63c62a$var$quietFocusLine = " . lb k-375zlr Ua Za _vf _wf _xf _yf bx ba_____z";
+const $b9c30139cd63c62a$var$quietFocusLine = " . lb k-375zlr Ua Za _vf _wf _xf _yf bx ba_____M";
 let $b9c30139cd63c62a$export$b1e5508a851be14d = function anonymous(props) {
     let rules = " .";
     rules += ' _La';

package/dist/Picker.css

@@ -575,7 +575,7 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .da_____z {
+    .da_____M {
       outline-color: highlight;
     }
 
@@ -583,15 +583,15 @@
       border-style: solid;
     }
 
-    .ca_____x {
+    .ca_____K {
       border-color: buttontext;
     }
 
-    .ca_____B {
+    .ca_____O {
       border-color: graytext;
     }
 
-    .ba_____z {
+    .ba_____M {
       background-color: highlight;
     }
   }

package/dist/Picker.mjs

@@ -54,7 +54,7 @@ const $b41c15d27fbaff7d$var$inputButton = function anonymous(props) {
     if (props.isQuiet) rules += ' _La';
     else if (props.isFocusVisible) rules += ' _Lb';
     else rules += ' _La';
-    rules += ' da_____z';
+    rules += ' da_____M';
     rules += ' dx';
     rules += ' _Nc';
     rules += ' _M-3t1z';
@@ -113,8 +113,8 @@ const $b41c15d27fbaff7d$var$inputButton = function anonymous(props) {
     rules += ' _ja';
     rules += ' waa';
     rules += ' wf';
-    if (props.isDisabled) rules += ' ca_____B';
-    else rules += ' ca_____x';
+    if (props.isDisabled) rules += ' ca_____O';
+    else rules += ' ca_____K';
     rules += ' _vh';
     rules += ' _wh';
     rules += ' _xh';
@@ -152,7 +152,7 @@ const $b41c15d27fbaff7d$var$inputButton = function anonymous(props) {
     else rules += ' -_375toq_k-f';
     return rules;
 };
-const $b41c15d27fbaff7d$var$quietFocusLine = " . lb k-375zlr Ua Za _vf _wf _xf _yf bx ba_____z";
+const $b41c15d27fbaff7d$var$quietFocusLine = " . lb k-375zlr Ua Za _vf _wf _xf _yf bx ba_____M";
 let $b41c15d27fbaff7d$export$b1e5508a851be14d = function anonymous(props) {
     let rules = " .";
     rules += ' _La';

package/dist/Popover.cjs

@@ -48,7 +48,7 @@ let $493371ef39bf7a55$var$popover = function anonymous(props, overrides) {
     else if (props.colorScheme === "light") rules += ' _Aa';
     else if (props.colorScheme === "light dark") rules += ' _Ac';
     else rules += ' _A-10jn6wd';
-    rules += ' -_1de2x0q_b-______k';
+    rules += ' -_1de2x0q_b-______x';
     rules += ' b-1de2x0q';
     rules += ' _vd';
     rules += ' _wd';
@@ -62,7 +62,7 @@ let $493371ef39bf7a55$var$popover = function anonymous(props, overrides) {
     rules += ' vb';
     rules += ' sb';
     rules += ' tb';
-    rules += ' ca_____v';
+    rules += ' ca_____I';
     rules += ' ch';
     if (!$l) {
         if (props.size === "L") rules += ' l_________G';
@@ -123,7 +123,7 @@ let $493371ef39bf7a55$var$arrow = function anonymous(props) {
     if (props.placement === "right") rules += ' Pc';
     else if (props.placement === "left") rules += ' PF';
     rules += ' xb';
-    rules += ' fa_____x';
+    rules += ' fa_____K';
     rules += ' fj';
     return rules;
 };

package/dist/Popover.css

@@ -78,7 +78,7 @@
     color-scheme: dark;
   }
 
-  .-_1de2x0q_b-______k {
+  .-_1de2x0q_b-______x {
     --s2-container-bg: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
   }
 
@@ -349,11 +349,11 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .ca_____v {
+    .ca_____I {
       border-color: buttonborder;
     }
 
-    .fa_____x {
+    .fa_____K {
       stroke: buttonborder;
     }
   }

package/dist/Popover.mjs

@@ -41,7 +41,7 @@ let $88b746eba92c8d0d$var$popover = function anonymous(props, overrides) {
     else if (props.colorScheme === "light") rules += ' _Aa';
     else if (props.colorScheme === "light dark") rules += ' _Ac';
     else rules += ' _A-10jn6wd';
-    rules += ' -_1de2x0q_b-______k';
+    rules += ' -_1de2x0q_b-______x';
     rules += ' b-1de2x0q';
     rules += ' _vd';
     rules += ' _wd';
@@ -55,7 +55,7 @@ let $88b746eba92c8d0d$var$popover = function anonymous(props, overrides) {
     rules += ' vb';
     rules += ' sb';
     rules += ' tb';
-    rules += ' ca_____v';
+    rules += ' ca_____I';
     rules += ' ch';
     if (!$l) {
         if (props.size === "L") rules += ' l_________G';
@@ -116,7 +116,7 @@ let $88b746eba92c8d0d$var$arrow = function anonymous(props) {
     if (props.placement === "right") rules += ' Pc';
     else if (props.placement === "left") rules += ' PF';
     rules += ' xb';
-    rules += ' fa_____x';
+    rules += ' fa_____K';
     rules += ' fj';
     return rules;
 };