@react-spectrum/s2 3.0.0-nightly-4baa1b08e-241029 → 3.0.0-nightly-dcc0752f8-241031

package/dist/Meter.css

@@ -36,28 +36,28 @@
     max-width: 768px;
   }
 
-  .-aqrvqh_k-q {
-    --field-height: 2rem;
+  .-aqrvqh_k-j {
+    --field-height: calc(2rem * var(--s2-scale));
   }
 
-  .-aqrvqh_k-k {
-    --field-height: 1.25rem;
+  .-aqrvqh_k-g {
+    --field-height: calc(1.25rem * var(--s2-scale));
   }
 
-  .-aqrvqh_k-m {
-    --field-height: 1.5rem;
+  .-aqrvqh_k-h {
+    --field-height: calc(1.5rem * var(--s2-scale));
   }
 
-  .-aqrvqh_k-r {
-    --field-height: 2.5rem;
+  .-aqrvqh_k-l {
+    --field-height: calc(2.5rem * var(--s2-scale));
   }
 
-  .-aqrvqh_k-x {
-    --field-height: 3rem;
+  .-aqrvqh_k-n {
+    --field-height: calc(3rem * var(--s2-scale));
   }
 
-  .-_1urhtf5_k-d {
-    --track-to-label: .25rem;
+  .-_1urhtf5_k-c {
+    --track-to-label: calc(.25rem * var(--s2-scale));
   }
 
   .-_1inj1bc_i--q18lfg {
@@ -158,44 +158,44 @@
     grid-row-end: bar;
   }
 
-  .qq {
-    min-width: 2rem;
+  .qj {
+    min-width: calc(2rem * var(--s2-scale));
   }
 
-  .qk {
-    min-width: 1.25rem;
+  .qg {
+    min-width: calc(1.25rem * var(--s2-scale));
   }
 
-  .qm {
-    min-width: 1.5rem;
+  .qh {
+    min-width: calc(1.5rem * var(--s2-scale));
   }
 
-  .qr {
-    min-width: 2.5rem;
+  .ql {
+    min-width: calc(2.5rem * var(--s2-scale));
   }
 
-  .qx {
-    min-width: 3rem;
+  .qn {
+    min-width: calc(3rem * var(--s2-scale));
   }
 
   .__ma {
     contain: none;
   }
 
-  .-usygro_l-R {
-    --defaultWidth: 13rem;
+  .-usygro_l-y {
+    --defaultWidth: calc(13rem * var(--s2-scale));
   }
 
-  .-usygro_l-P {
-    --defaultWidth: 12rem;
+  .-usygro_l-x {
+    --defaultWidth: calc(12rem * var(--s2-scale));
   }
 
-  .-usygro_l-T {
-    --defaultWidth: 14rem;
+  .-usygro_l-z {
+    --defaultWidth: calc(14rem * var(--s2-scale));
   }
 
-  .-usygro_l-Q {
-    --defaultWidth: 15rem;
+  .-usygro_l-A {
+    --defaultWidth: calc(15rem * var(--s2-scale));
   }
 
   .m-rwozxi {
@@ -238,23 +238,23 @@
     z-index: 1;
   }
 
-  .kd {
-    height: .25rem;
+  .kc {
+    height: calc(.25rem * var(--s2-scale));
   }
 
-  .k-6njx2e {
-    height: .375rem;
+  .k-ve8p9e {
+    height: calc(.375rem * var(--s2-scale));
   }
 
-  .kf {
-    height: .5rem;
+  .kd {
+    height: calc(.5rem * var(--s2-scale));
   }
 
-  .k-8hx8xw {
-    height: .625rem;
+  .k-tnkbk0 {
+    height: calc(.625rem * var(--s2-scale));
   }
 
-  .k4 {
+  .kG {
     height: 100%;
   }
 
@@ -327,106 +327,6 @@
 
 @layer UNSAFE_overrides;
 
-@layer _.b.b {
-  @media not ((hover: hover) and (pointer: fine)) {
-    .-aqrvqh_k-br {
-      --field-height: 2.5rem;
-    }
-
-    .-aqrvqh_k-bl {
-      --field-height: 1.5625rem;
-    }
-
-    .-aqrvqh_k-bn {
-      --field-height: 1.875rem;
-    }
-
-    .-aqrvqh_k-bu {
-      --field-height: 3.125rem;
-    }
-
-    .-aqrvqh_k-by {
-      --field-height: 3.75rem;
-    }
-
-    .-_1urhtf5_k-be {
-      --track-to-label: .3125rem;
-    }
-
-    ._dbf {
-      font-size: 1.0625rem;
-    }
-
-    ._dbb {
-      font-size: .8125rem;
-    }
-
-    ._dbd {
-      font-size: .9375rem;
-    }
-
-    ._dbh {
-      font-size: 1.1875rem;
-    }
-
-    ._dbj {
-      font-size: 1.375rem;
-    }
-
-    .qbr {
-      min-width: 2.5rem;
-    }
-
-    .qbl {
-      min-width: 1.5625rem;
-    }
-
-    .qbn {
-      min-width: 1.875rem;
-    }
-
-    .qbu {
-      min-width: 3.125rem;
-    }
-
-    .qby {
-      min-width: 3.75rem;
-    }
-
-    .-usygro_l-bS {
-      --defaultWidth: 16.25rem;
-    }
-
-    .-usygro_l-bQ {
-      --defaultWidth: 15rem;
-    }
-
-    .-usygro_l-bU {
-      --defaultWidth: 17.5rem;
-    }
-
-    .-usygro_l-bV {
-      --defaultWidth: 18.75rem;
-    }
-
-    .kbe {
-      height: .3125rem;
-    }
-
-    .kb-1aa9md1 {
-      height: .46875rem;
-    }
-
-    .kbg {
-      height: .625rem;
-    }
-
-    .kb-1vxtxny {
-      height: .78125rem;
-    }
-  }
-}
-
 @layer _.c {
   ._c-enzwzjc:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
@@ -463,6 +363,30 @@
   }
 }
 
+@layer _.b.b {
+  @media not ((hover: hover) and (pointer: fine)) {
+    ._dbf {
+      font-size: 1.0625rem;
+    }
+
+    ._dbb {
+      font-size: .8125rem;
+    }
+
+    ._dbd {
+      font-size: .9375rem;
+    }
+
+    ._dbh {
+      font-size: 1.1875rem;
+    }
+
+    ._dbj {
+      font-size: 1.375rem;
+    }
+  }
+}
+
 @layer _.b.a {
   @media (forced-colors: active) {
     .aa_____x {

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;;;;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtBH;EAII;;;;EAAA;;;;;AAJJ;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAII;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AALA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;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 {size, 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: size(6),\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: size(6), // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: size(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: 'informative',\n    variant: {\n      positive: 'positive',\n      notice: 'notice',\n      negative: 'negative'\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\nfunction 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\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 */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\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;;;;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;;;;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 {size, 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: size(6),\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: size(6), // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: size(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: 'informative',\n    variant: {\n      positive: 'positive',\n      notice: 'notice',\n      negative: 'negative'\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\nfunction 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\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 */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\n"],"names":[],"version":3,"file":"Meter.css.map"}

package/dist/Meter.mjs

@@ -47,29 +47,14 @@ const $bb56943300b294c6$var$wrapper = function anonymous(props, overrides) {
     else if (props.labelPosition === "top") rules += ' __j-6w8ip8';
     rules += ' _1d';
     rules += ' __Fa';
-    if (!$q) {
-        rules += ' qby';
-        rules += ' qx';
-    }
+    if (!$q) rules += ' qn';
     if (!$r) rules += ' r-3bwcc2';
-    if (props.size === "XL") {
-        rules += ' -aqrvqh_k-by';
-        rules += ' -aqrvqh_k-x';
-    } else if (props.size === "L") {
-        rules += ' -aqrvqh_k-bu';
-        rules += ' -aqrvqh_k-r';
-    } else if (props.size === "S") {
-        rules += ' -aqrvqh_k-bn';
-        rules += ' -aqrvqh_k-m';
-    } else if (props.size === "XS") {
-        rules += ' -aqrvqh_k-bl';
-        rules += ' -aqrvqh_k-k';
-    } else {
-        rules += ' -aqrvqh_k-br';
-        rules += ' -aqrvqh_k-q';
-    }
-    rules += ' -_1urhtf5_k-be';
-    rules += ' -_1urhtf5_k-d';
+    if (props.size === "XL") rules += ' -aqrvqh_k-n';
+    else if (props.size === "L") rules += ' -aqrvqh_k-l';
+    else if (props.size === "S") rules += ' -aqrvqh_k-h';
+    else if (props.size === "XS") rules += ' -aqrvqh_k-g';
+    else rules += ' -aqrvqh_k-j';
+    rules += ' -_1urhtf5_k-c';
     rules += ' -_1inj1bc_i--q18lfg';
     rules += ' je';
     return rules;
@@ -126,37 +111,17 @@ const $bb56943300b294c6$var$trackStyles = function anonymous(props) {
     rules += ' __b-3773ju';
     rules += ' __c-3773ju';
     rules += ' __d-3773ju';
-    if (props.size === "XL") {
-        rules += ' qby';
-        rules += ' qx';
-    } else if (props.size === "L") {
-        rules += ' qbu';
-        rules += ' qr';
-    } else if (props.size === "S") {
-        rules += ' qbn';
-        rules += ' qm';
-    } else if (props.size === "XS") {
-        rules += ' qbl';
-        rules += ' qk';
-    } else {
-        rules += ' qbr';
-        rules += ' qq';
-    }
+    if (props.size === "XL") rules += ' qn';
+    else if (props.size === "L") rules += ' ql';
+    else if (props.size === "S") rules += ' qh';
+    else if (props.size === "XS") rules += ' qg';
+    else rules += ' qj';
     if (props.isQuiet) rules += ' __ma';
     else rules += ' __m-1s8glxue';
-    if (props.size === "XL") {
-        rules += ' -usygro_l-bV';
-        rules += ' -usygro_l-Q';
-    } else if (props.size === "L") {
-        rules += ' -usygro_l-bU';
-        rules += ' -usygro_l-T';
-    } else if (props.size === "S") {
-        rules += ' -usygro_l-bQ';
-        rules += ' -usygro_l-P';
-    } else {
-        rules += ' -usygro_l-bS';
-        rules += ' -usygro_l-R';
-    }
+    if (props.size === "XL") rules += ' -usygro_l-A';
+    else if (props.size === "L") rules += ' -usygro_l-z';
+    else if (props.size === "S") rules += ' -usygro_l-x';
+    else rules += ' -usygro_l-y';
     rules += ' m-rwozxi';
     rules += ' __vb';
     rules += ' __wb';
@@ -175,27 +140,16 @@ const $bb56943300b294c6$var$trackStyles = function anonymous(props) {
     rules += ' da_____x';
     rules += ' da';
     rules += ' __Q-3t1y';
-    if (props.size === "XL") {
-        rules += ' kb-1vxtxny';
-        rules += ' k-8hx8xw';
-    } else if (props.size === "L") {
-        rules += ' kbg';
-        rules += ' kf';
-    } else if (props.size === "M") {
-        rules += ' kb-1aa9md1';
-        rules += ' k-6njx2e';
-    } else if (props.size === "S") {
-        rules += ' kbe';
-        rules += ' kd';
-    } else {
-        rules += ' kb-1aa9md1';
-        rules += ' k-6njx2e';
-    }
+    if (props.size === "XL") rules += ' k-tnkbk0';
+    else if (props.size === "L") rules += ' kd';
+    else if (props.size === "M") rules += ' k-ve8p9e';
+    else if (props.size === "S") rules += ' kc';
+    else rules += ' k-ve8p9e';
     return rules;
 };
 const $bb56943300b294c6$var$fillStyles = function anonymous(props) {
     let rules = " .";
-    rules += ' k4';
+    rules += ' kG';
     rules += ' wf';
     rules += ' _vf';
     rules += ' _wf';

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,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;AAEA;;;CAGC,GACD,IAAI,0DAAS,CAAA,GAAA,iBAAS,EAAE","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 {size, 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: size(6),\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: size(6), // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: size(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: 'informative',\n    variant: {\n      positive: 'positive',\n      notice: 'notice',\n      negative: 'negative'\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\nfunction 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\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 */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,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;AAEA;;;CAGC,GACD,IAAI,0DAAS,CAAA,GAAA,iBAAS,EAAE","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 {size, 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: size(6),\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: size(6), // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: size(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: 'informative',\n    variant: {\n      positive: 'positive',\n      notice: 'notice',\n      negative: 'negative'\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\nfunction 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\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 */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\n"],"names":[],"version":3,"file":"Meter.mjs.map"}

package/dist/Modal.cjs

@@ -91,12 +91,12 @@ function $8e678305a8c10028$var$Modal(props1, ref) {
                     else rules += ' _xe';
                     if (props.size === "fullscreenTakeover") rules += ' _ya';
                     else rules += ' _ye';
-                    if (props.size === "fullscreenTakeover") rules += ' l4';
+                    if (props.size === "fullscreenTakeover") rules += ' lG';
                     else if (props.size === "fullscreen") rules += ' l-tp2nko';
                     else if (props.size === "L") rules += ' l-3940j6';
                     else if (props.size === "M") rules += ' l-38elgx';
                     else if (props.size === "S") rules += ' l-38aqto';
-                    if (props.size === "fullscreenTakeover") rules += ' k4';
+                    if (props.size === "fullscreenTakeover") rules += ' kG';
                     else if (props.size === "fullscreen") rules += ' k-tp2nko';
                     if (props.size === "L") rules += ' r-yjhhbv';
                     else if (props.size === "M") rules += ' r-yjhhbv';

package/dist/Modal.css

@@ -142,7 +142,7 @@
     width: calc(100% - 40px);
   }
 
-  .l4 {
+  .lG {
     width: 100%;
   }
 
@@ -150,7 +150,7 @@
     height: calc(100% - 40px);
   }
 
-  .k4 {
+  .kG {
     height: 100%;
   }
 

package/dist/Modal.mjs

@@ -85,12 +85,12 @@ function $c46d159bd615e407$var$Modal(props1, ref) {
                     else rules += ' _xe';
                     if (props.size === "fullscreenTakeover") rules += ' _ya';
                     else rules += ' _ye';
-                    if (props.size === "fullscreenTakeover") rules += ' l4';
+                    if (props.size === "fullscreenTakeover") rules += ' lG';
                     else if (props.size === "fullscreen") rules += ' l-tp2nko';
                     else if (props.size === "L") rules += ' l-3940j6';
                     else if (props.size === "M") rules += ' l-38elgx';
                     else if (props.size === "S") rules += ' l-38aqto';
-                    if (props.size === "fullscreenTakeover") rules += ' k4';
+                    if (props.size === "fullscreenTakeover") rules += ' kG';
                     else if (props.size === "fullscreen") rules += ' k-tp2nko';
                     if (props.size === "L") rules += ' r-yjhhbv';
                     else if (props.size === "M") rules += ' r-yjhhbv';

package/dist/NumberField.cjs

@@ -78,25 +78,15 @@ const $a366ef8f467b1cb5$var$inputButton = function anonymous(props) {
     }
     rules += ' _1c';
     rules += ' _2d';
-    if (props.size === "XL") {
-        rules += ' lbr';
-        rules += ' lq';
-    } else if (props.size === "L") {
-        rules += ' lbn';
-        rules += ' lm';
-    } else if (props.size === "M") {
-        rules += ' lbl';
-        rules += ' lk';
-    } else if (props.size === "S") {
-        rules += ' lbk';
-        rules += ' lj';
-    }
-    rules += ' k3';
+    if (props.size === "XL") rules += ' lj';
+    else if (props.size === "L") rules += ' lh';
+    else if (props.size === "M") rules += ' lg';
+    else if (props.size === "S") rules += ' lf';
+    rules += ' kF';
     if (props.type === "increment") rules += ' ya';
     else rules += ' yF';
     rules += ' _bb';
     rules += ' _8-3t1x';
-    rules += ' oba';
     rules += ' oa';
     rules += ' _Oag';
     rules += ' _Oa';
@@ -146,17 +136,10 @@ const $a366ef8f467b1cb5$var$stepperContainerStyles = function anonymous(props) {
     else if (props.size === "L") rules += ' jd';
     else if (props.size === "M") rules += ' jc';
     else if (props.size === "S") rules += ' jd';
-    if (props.size === "XL") {
-        rules += ' Db-1aa9md1';
-        rules += ' D-6njx2e';
-    } else if (props.size === "L") {
-        rules += ' Db-1aa9md1';
-        rules += ' D-6njx2e';
-    } else if (props.size === "M") rules += ' Dc';
-    else if (props.size === "S") {
-        rules += ' Db-13yuhxm';
-        rules += ' D-59f7mn';
-    }
+    if (props.size === "XL") rules += ' D-ve8p9e';
+    else if (props.size === "L") rules += ' D-ve8p9e';
+    else if (props.size === "M") rules += ' Dc';
+    else if (props.size === "S") rules += ' D-3zuu7v';
     return rules;
 };
 function $a366ef8f467b1cb5$var$NumberField(props1, ref) {
@@ -228,22 +211,11 @@ function $a366ef8f467b1cb5$var$NumberField(props1, ref) {
             rules += ' _1d';
             rules += ' _f-1x99dlob';
             rules += ' _fa';
-            if (props.size === "XL") {
-                rules += ' -aqrvqh_k-by';
-                rules += ' -aqrvqh_k-x';
-            } else if (props.size === "L") {
-                rules += ' -aqrvqh_k-bu';
-                rules += ' -aqrvqh_k-r';
-            } else if (props.size === "S") {
-                rules += ' -aqrvqh_k-bn';
-                rules += ' -aqrvqh_k-m';
-            } else if (props.size === "XS") {
-                rules += ' -aqrvqh_k-bl';
-                rules += ' -aqrvqh_k-k';
-            } else {
-                rules += ' -aqrvqh_k-br';
-                rules += ' -aqrvqh_k-q';
-            }
+            if (props.size === "XL") rules += ' -aqrvqh_k-n';
+            else if (props.size === "L") rules += ' -aqrvqh_k-l';
+            else if (props.size === "S") rules += ' -aqrvqh_k-h';
+            else if (props.size === "XS") rules += ' -aqrvqh_k-g';
+            else rules += ' -aqrvqh_k-j';
             rules += ' -_1inj1bc_i--prjw07';
             rules += ' je';
             rules += ' __R-yksgrp';
@@ -277,37 +249,17 @@ function $a366ef8f467b1cb5$var$NumberField(props1, ref) {
                             rules += ' __b-4cfph1';
                             rules += ' __c-4cfph1';
                             rules += ' __d-4cfph1';
-                            if (props.size === "XL") {
-                                rules += ' qby';
-                                rules += ' qx';
-                            } else if (props.size === "L") {
-                                rules += ' qbu';
-                                rules += ' qr';
-                            } else if (props.size === "S") {
-                                rules += ' qbn';
-                                rules += ' qm';
-                            } else if (props.size === "XS") {
-                                rules += ' qbl';
-                                rules += ' qk';
-                            } else {
-                                rules += ' qbr';
-                                rules += ' qq';
-                            }
+                            if (props.size === "XL") rules += ' qn';
+                            else if (props.size === "L") rules += ' ql';
+                            else if (props.size === "S") rules += ' qh';
+                            else if (props.size === "XS") rules += ' qg';
+                            else rules += ' qj';
                             if (props.isQuiet) rules += ' __ma';
                             else rules += ' __m-1s8glxue';
-                            if (props.size === "XL") {
-                                rules += ' -usygro_l-bV';
-                                rules += ' -usygro_l-Q';
-                            } else if (props.size === "L") {
-                                rules += ' -usygro_l-bU';
-                                rules += ' -usygro_l-T';
-                            } else if (props.size === "S") {
-                                rules += ' -usygro_l-bQ';
-                                rules += ' -usygro_l-P';
-                            } else {
-                                rules += ' -usygro_l-bS';
-                                rules += ' -usygro_l-R';
-                            }
+                            if (props.size === "XL") rules += ' -usygro_l-A';
+                            else if (props.size === "L") rules += ' -usygro_l-z';
+                            else if (props.size === "S") rules += ' -usygro_l-x';
+                            else rules += ' -usygro_l-y';
                             rules += ' m-rwozxi';
                             rules += ' C-375tnm';
                             rules += ' D-375tnn';