@react-spectrum/s2 1.3.1 → 1.4.0

package/style/__tests__/mergeStyles.test.ts

@@ -14,7 +14,9 @@ import {mergeStyles} from '../runtime';
 import {style} from '../spectrum-theme';
 
 function stripMacro(css) {
-  return css.replaceAll(/ -macro-static-[0-9a-zA-Z]+/gi, '').replaceAll(/ -macro-dynamic-[0-9a-zA-Z]+/gi, '');
+  return css
+    .replaceAll(/ -macro-static-[0-9a-zA-Z]+/gi, '')
+    .replaceAll(/ -macro-dynamic-[0-9a-zA-Z]+/gi, '');
 }
 
 describe('mergeStyles', () => {
@@ -46,8 +48,14 @@ describe('mergeStyles', () => {
     });
 
     it('should not merge multiple dynamic macro classes', () => {
-      let a = style({backgroundColor: 'red-1000', color: {default: '[hotpink]', isDisabled: 'gray-400'}});
-      let b = style({fontSize: '[15px]', backgroundColor: {default: 'gray-50', isDisabled: 'gray-400'}});
+      let a = style({
+        backgroundColor: 'red-1000',
+        color: {default: '[hotpink]', isDisabled: 'gray-400'}
+      });
+      let b = style({
+        fontSize: '[15px]',
+        backgroundColor: {default: 'gray-50', isDisabled: 'gray-400'}
+      });
       let merged = mergeStyles(a({isDisabled: true}), b({isDisabled: false}));
       let macroClasses = merged.match(/-macro-dynamic-[0-9a-zA-Z]+/g);
       expect(macroClasses).toHaveLength(2);
@@ -55,7 +63,10 @@ describe('mergeStyles', () => {
     });
 
     it('should retain both static and dynamic macro classes', () => {
-      let a = style({backgroundColor: 'red-1000', color: {default: '[hotpink]', isDisabled: 'gray-400'}});
+      let a = style({
+        backgroundColor: 'red-1000',
+        color: {default: '[hotpink]', isDisabled: 'gray-400'}
+      });
       let b = style({fontSize: 'body-xs', backgroundColor: 'gray-50'});
       let merged = mergeStyles(a({isDisabled: true}), b);
       let staticMacroClasses = merged.match(/-macro-static-[0-9a-zA-Z]+/g);

package/style/__tests__/style-macro.test.js

@@ -40,26 +40,26 @@ describe('style-macro', () => {
 "@layer _.a, _.b, _.c;
 
 @layer _.b {
-  .Jbs131:first-child {
+  .Jbs14:first-child {
     margin-top: 0.25rem;
   }
 }
 
 @layer _.c.p {
   @media (min-width: 64rem) {
-    .Jbpv131:first-child {
+    .Jbpv14:first-child {
       margin-top: 0.5rem;
     }
   }
 }
 
-.-macro-static-MypNfe {
-        --macro-data-MypNfe: {"style":{"marginTop":{":first-child":{"default":4,"lg":8}}},"loc":"undefined:undefined:undefined"};
+.-macro-static-I08ui {
+        --macro-data-I08ui: {"style":{"marginTop":{":first-child":{"default":4,"lg":8}}},"loc":"undefined:undefined:undefined"};
       }
 
 "
 `);
-    expect(js).toMatchInlineSnapshot('" Jbs131 Jbpv131 -macro-static-MypNfe"');
+    expect(js).toMatchInlineSnapshot(`" Jbs14 Jbpv14 -macro-static-I08ui"`);
   });
 
   it('should support self references', () => {
@@ -73,59 +73,61 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  ._kc131 {
+  ._kc14 {
     border-top-width: 2px;
   }
 
 
-  .hc131 {
+  .hc14 {
     border-bottom-width: 2px;
   }
 
 
-  .mCPFGYc131 {
+  .mCPFGYc14 {
     border-inline-start-width: var(--m);
   }
 
 
-  .lc131 {
+  .lc14 {
     border-inline-end-width: 2px;
   }
 
 
-  .SMBFGYc131 {
+  .SMBFGYc14 {
     padding-inline-start: var(--S);
   }
 
 
-  .Rv131 {
+  .Rv14 {
     padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
   }
 
 
-  .ZjUQgKd131 {
+  .ZjUQgKd14 {
     width: calc(200px - var(--m) - var(--S));
   }
 
 
-  .-m_-mc131 {
+  .-m_-mc14 {
     --m: 2px;
   }
 
 
-  .-S_-Sv131 {
+  .-S_-Sv14 {
     --S: calc(var(--F, var(--M)) * 3 / 8);
   }
 }
 
-.-macro-static-uhFF5b {
-        --macro-data-uhFF5b: {"style":{"borderWidth":2,"paddingX":"edge-to-text","width":"calc(200px - self(borderStartWidth) - self(paddingStart))"},"loc":"undefined:undefined:undefined"};
+.-macro-static-e1GIg {
+        --macro-data-e1GIg: {"style":{"borderWidth":2,"paddingX":"edge-to-text","width":"calc(200px - self(borderStartWidth) - self(paddingStart))"},"loc":"undefined:undefined:undefined"};
       }
 
 "
 `);
 
-    expect(js).toMatchInlineSnapshot('" _kc131 hc131 mCPFGYc131 lc131 SMBFGYc131 Rv131 ZjUQgKd131 -m_-mc131 -S_-Sv131 -macro-static-uhFF5b"');
+    expect(js).toMatchInlineSnapshot(
+      `" _kc14 hc14 mCPFGYc14 lc14 SMBFGYc14 Rv14 ZjUQgKd14 -m_-mc14 -S_-Sv14 -macro-static-e1GIg"`
+    );
   });
 
   it('should support allowed overrides', () => {
@@ -142,9 +144,9 @@ describe('style-macro', () => {
       color: 'green-400'
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gw131 pg131 -macro-dynamic-mu4yby"');
-    expect(overrides).toMatchInlineSnapshot('" g8tmWqb131 pHJ3AUd131 -macro-static-CvspF"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb131 pg131 -macro-dynamic-1b9jdne"');
+    expect(js()).toMatchInlineSnapshot(`"  gw14 pg14 -macro-dynamic-1hksi7i"`);
+    expect(overrides).toMatchInlineSnapshot(`" g8tmWqb14 pHJ3AUd14 -macro-static-QgnkJd"`);
+    expect(js({}, overrides)).toMatchInlineSnapshot(`"  g8tmWqb14 pg14 -macro-dynamic-7jtiyi"`);
   });
 
   it('should support allowed overrides for properties that expand into multiple', () => {
@@ -159,9 +161,11 @@ describe('style-macro', () => {
       translateX: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B131 __Ya131 -macro-dynamic-4f51mn"');
-    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D131 __Ya131 -macro-static-nMoh6b"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D131 __Ya131 -macro-dynamic-f33ipt"');
+    expect(js()).toMatchInlineSnapshot(`"  -_7PloMd-B14 __Ya14 -macro-dynamic-1hkkiwv"`);
+    expect(overrides).toMatchInlineSnapshot(`" -_7PloMd-D14 __Ya14 -macro-static-F3q0Dd"`);
+    expect(js({}, overrides)).toMatchInlineSnapshot(
+      `"  -_7PloMd-D14 __Ya14 -macro-dynamic-j53z9d"`
+    );
   });
 
   it('should support allowed overrides for shorthands', () => {
@@ -176,9 +180,11 @@ describe('style-macro', () => {
       padding: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  Tk131 Qk131 Sk131 Rk131 -macro-dynamic-efgw2h"');
-    expect(overrides).toMatchInlineSnapshot('" Tm131 Qm131 Sm131 Rm131 -macro-static-9GxvHb"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm131 Qm131 Sm131 Rm131 -macro-dynamic-15z7wbl"');
+    expect(js()).toMatchInlineSnapshot(`"  Tk14 Qk14 Sk14 Rk14 -macro-dynamic-10enpkp"`);
+    expect(overrides).toMatchInlineSnapshot(`" Tm14 Qm14 Sm14 Rm14 -macro-static-rawlJc"`);
+    expect(js({}, overrides)).toMatchInlineSnapshot(
+      `"  Tm14 Qm14 Sm14 Rm14 -macro-dynamic-5anb29"`
+    );
   });
 
   it('should support allowed overrides for fontSize', () => {
@@ -193,9 +199,9 @@ describe('style-macro', () => {
       fontSize: 'ui-xs'
     });
 
-    expect(js()).toMatchInlineSnapshot('"  -_6BNtrc-woabcc131 vx131 -macro-dynamic-zj2kbi"');
-    expect(overrides).toMatchInlineSnapshot('" -_6BNtrc-a131 vx131 -macro-static-EPvKFd"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_6BNtrc-a131 vx131 -macro-dynamic-jkg234"');
+    expect(js()).toMatchInlineSnapshot(`"  -_6BNtrc-woabcc14 vx14 -macro-dynamic-bw4d5q"`);
+    expect(overrides).toMatchInlineSnapshot(`" -_6BNtrc-a14 vx14 -macro-static-cD4zjb"`);
+    expect(js({}, overrides)).toMatchInlineSnapshot(`"  -_6BNtrc-a14 vx14 -macro-dynamic-1yik7yo"`);
   });
 
   it("should support allowed overrides for values that aren't defined", () => {
@@ -210,9 +216,9 @@ describe('style-macro', () => {
       minWidth: 32
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gE131 -macro-dynamic-1osl3dc"');
-    expect(overrides).toMatchInlineSnapshot('" Nk131 -macro-static-J7ItY"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk131 gE131 -macro-dynamic-1soyf0e"');
+    expect(js()).toMatchInlineSnapshot(`"  gE14 -macro-dynamic-1tvo6tc"`);
+    expect(overrides).toMatchInlineSnapshot(`" Nk14 -macro-static-1ozQQc"`);
+    expect(js({}, overrides)).toMatchInlineSnapshot(`"  Nk14 gE14 -macro-dynamic-1fyk7lq"`);
   });
 
   it('should support runtime conditions', () => {
@@ -233,32 +239,32 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gH131 {
+  .gH14 {
     background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
   }
 
 
-  .gF131 {
+  .gF14 {
     background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
   }
 
 
-  .gE131 {
+  .gE14 {
     background-color: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
   }
 
 
-  .pt131 {
+  .pt14 {
     color: light-dark(rgb(41, 41, 41), rgb(219, 219, 219));
   }
 
 
-  .po131 {
+  .po14 {
     color: light-dark(rgb(19, 19, 19), rgb(242, 242, 242));
   }
 
 
-  .pm131 {
+  .pm14 {
     color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
   }
 }
@@ -266,9 +272,9 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js({})).toMatchInlineSnapshot('"  gH131 pt131 -macro-dynamic-15nvpf0"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF131 po131 -macro-dynamic-1g7f3s5"');
-    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE131 pm131 -macro-dynamic-1nv6ioy"');
+    expect(js({})).toMatchInlineSnapshot(`"  gH14 pt14 -macro-dynamic-1bsdq7g"`);
+    expect(js({isHovered: true})).toMatchInlineSnapshot(`"  gF14 po14 -macro-dynamic-mtyglh"`);
+    expect(js({isPressed: true})).toMatchInlineSnapshot(`"  gE14 pm14 -macro-dynamic-1nxkx1e"`);
   });
 
   it('should support nested runtime conditions', () => {
@@ -287,32 +293,34 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gH131 {
+  .gH14 {
     background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
   }
 
 
-  .gF131 {
+  .gF14 {
     background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
   }
 
 
-  .g_h131 {
+  .g_h14 {
     background-color: light-dark(rgb(75, 117, 255), rgb(64, 105, 253));
   }
 
 
-  .g3131 {
+  .g314 {
     background-color: light-dark(rgb(59, 99, 251), rgb(86, 129, 255));
   }
 }
 
 "
 `);
-    expect(js({})).toMatchInlineSnapshot('"  gH131 -macro-dynamic-43fbrn"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF131 -macro-dynamic-1tkkitt"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h131 -macro-dynamic-zzf86q"');
-    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot('"  g3131 -macro-dynamic-19tzf3y"');
+    expect(js({})).toMatchInlineSnapshot(`"  gH14 -macro-dynamic-874gf7"`);
+    expect(js({isHovered: true})).toMatchInlineSnapshot(`"  gF14 -macro-dynamic-mz49cx"`);
+    expect(js({isSelected: true})).toMatchInlineSnapshot(`"  g_h14 -macro-dynamic-15g8h7m"`);
+    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot(
+      `"  g314 -macro-dynamic-1ktebam"`
+    );
   });
 
   it('should support variant runtime conditions', () => {
@@ -326,9 +334,9 @@ describe('style-macro', () => {
       }
     });
 
-    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  gY131 -macro-dynamic-ea1kkk"');
-    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe131 -macro-dynamic-17nl5q"');
-    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw131 -macro-dynamic-fjccci"');
+    expect(js({variant: 'accent'})).toMatchInlineSnapshot(`"  gY14 -macro-dynamic-1o5y9ec"`);
+    expect(js({variant: 'primary'})).toMatchInlineSnapshot(`"  gjQquMe14 -macro-dynamic-1nrp3ym"`);
+    expect(js({variant: 'secondary'})).toMatchInlineSnapshot(`"  gw14 -macro-dynamic-1fldd9u"`);
   });
 
   it('supports runtime conditions nested inside css conditions', () => {
@@ -346,14 +354,14 @@ describe('style-macro', () => {
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .plb131 {
+    .plb14 {
       color: ButtonText;
     }
   }
 
 
   @media (forced-colors: active) {
-    .ple131 {
+    .ple14 {
       color: HighlightText;
     }
   }
@@ -362,8 +370,8 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js({})).toMatchInlineSnapshot('"  plb131 -macro-dynamic-a7vfaa"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple131 -macro-dynamic-ojtpnp"');
+    expect(js({})).toMatchInlineSnapshot(`"  plb14 -macro-dynamic-42tseq"`);
+    expect(js({isSelected: true})).toMatchInlineSnapshot(`"  ple14 -macro-dynamic-hfe3zp"`);
   });
 
   it('inherits parent default when nested branch has no default key', () => {
@@ -379,8 +387,10 @@ describe('style-macro', () => {
     });
     // forcedColors.default should apply when variant=highlight but !isSelected
     expect(css).toContain('ButtonText');
-    expect(js({variant: 'highlight'})).toMatchInlineSnapshot('"  plb131 -macro-dynamic-a7vfaa"');
-    expect(js({variant: 'highlight', isSelected: true})).toMatchInlineSnapshot('"  ple131 -macro-dynamic-ojtpnp"');
+    expect(js({variant: 'highlight'})).toMatchInlineSnapshot(`"  plb14 -macro-dynamic-42tseq"`);
+    expect(js({variant: 'highlight', isSelected: true})).toMatchInlineSnapshot(
+      `"  ple14 -macro-dynamic-hfe3zp"`
+    );
   });
 
   it('should expand shorthand properties to longhands', () => {
@@ -388,33 +398,33 @@ describe('style-macro', () => {
       padding: 24
     });
 
-    expect(js).toMatchInlineSnapshot('" Th131 Qh131 Sh131 Rh131 -macro-static-D80Fbe"');
+    expect(js).toMatchInlineSnapshot(`" Th14 Qh14 Sh14 Rh14 -macro-static-xbQCP"`);
     expect(css).toMatchInlineSnapshot(`
 "@layer _.a;
 
 @layer _.a {
-  .Th131 {
+  .Th14 {
     padding-top: 24px;
   }
 
 
-  .Qh131 {
+  .Qh14 {
     padding-bottom: 24px;
   }
 
 
-  .Sh131 {
+  .Sh14 {
     padding-inline-start: 24px;
   }
 
 
-  .Rh131 {
+  .Rh14 {
     padding-inline-end: 24px;
   }
 }
 
-.-macro-static-D80Fbe {
-        --macro-data-D80Fbe: {"style":{"padding":24},"loc":"undefined:undefined:undefined"};
+.-macro-static-xbQCP {
+        --macro-data-xbQCP: {"style":{"padding":24},"loc":"undefined:undefined:undefined"};
       }
 
 "
@@ -430,13 +440,13 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gpQzfVb131 {
+  .gpQzfVb14 {
     background-color: rgb(from light-dark(rgb(39, 77, 234), rgb(105, 149, 254)) r g b / 50%);
   }
 }
 
-.-macro-static-aOn8Q {
-        --macro-data-aOn8Q: {"style":{"backgroundColor":"blue-1000/50"},"loc":"undefined:undefined:undefined"};
+.-macro-static-mwnohc {
+        --macro-data-mwnohc: {"style":{"backgroundColor":"blue-1000/50"},"loc":"undefined:undefined:undefined"};
       }
 
 "
@@ -455,13 +465,13 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .-FUeYm-gE131 {
+  .-FUeYm-gE14 {
     --foo: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
   }
 }
 
-.-macro-static-kFNJUb {
-        --macro-data-kFNJUb: {"style":{"--foo":{"type":"backgroundColor","value":"gray-300"}},"loc":"undefined:undefined:undefined"};
+.-macro-static-OWe9Jb {
+        --macro-data-OWe9Jb: {"style":{"--foo":{"type":"backgroundColor","value":"gray-300"}},"loc":"undefined:undefined:undefined"};
       }
 
 "

package/style/dist/main.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AA2BM,SAAS,0CAAM,EAAU;IAC9B,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,+BAAY,EAAE,IAAI,CAAC,CAAC;AACjC;AAmBO,SAAS,0CAAa,IAAY,EAAE,eAAe,EAAE;IAC1D,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,sCAAmB,EAAE,MAAM,cAAc,CAAC,CAAC;AACxD;AAeO,MAAM,4CAAY,IAAO,CAAA;QAC9B,cAAc;YACZ,SAAS;YACT,gBAAgB;QAClB;QACA,cAAc;YACZ,SAAS;YACT,cAAc;QAChB;QACA,cAAc;QACd,eAAe;IACjB,CAAA;AAgCA,MAAM,kCAAY;IAChB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAiBO,SAAS,0CAAqC,OAAkB;IACrE,IAAI,QAAC,OAAO,YAAK,KAAK,EAAE,GAAG,QAAO,GAAG;IAErC,IAAI,OACF,MAAM,CAAC,gBAAgB,GAAG;QACxB,MAAM;QACN,OAAO;IACT;IAGF,MAAM,CAAC,OAAO,GAAG,+BAAS,CAAC,KAAK;IAEhC,aAAa;IACb,OAAO,CAAA,GAAA,+BAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AAC1B","sources":["packages/@react-spectrum/s2/style/index.ts"],"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 type * as CSS from 'csstype';\nimport {Inset, fontRelative as internalFontRelative, space as internalSpace, Spacing, style} from './spectrum-theme';\nimport type {MacroContext} from '@parcel/macros';\nimport {StyleString} from './types';\n\nexport {baseColor, color, lightDark, colorMix, size, style} from './spectrum-theme';\nexport {css} from './style-macro';\nexport {centerPadding, setColorScheme} from '../src/style-utils';\nexport type {StyleString} from './types';\n\n/**\n * Converts a pixel value to a Spectrum spacing token in `rem` units.\n *\n * @param px - The spacing in pixels.\n * @returns A `rem` value wrapped as an arbitrary style value.\n *\n * @example\n * ```tsx\n * import {space, style} from '@react-spectrum/s2/style' with {type: 'macro'};\n *\n * const styles = style({\n *   gap: space(12) // 12/16 = 0.75rem\n * });\n * ```\n */\nexport function space(px: number): `[${string}]` {\n  return `[${internalSpace(px)}]`;\n}\n\n/**\n * Converts a pixel value to a font-relative `em` length. Useful for sizing elements\n * relative to the current font size. Defaults to a 14px base.\n *\n * @param base - The pixel value to convert.\n * @param baseFontSize - The base font size in pixels to divide by. Defaults to `14`.\n * @returns A CSS `em` value wrapped as an arbitrary style value.\n *\n * @example\n * ```tsx\n * import {fontRelative, style} from '@react-spectrum/s2/style' with {type: 'macro'};\n *\n * const styles = style({\n *   gap: fontRelative(2)  // 2/14 = ~0.143em\n * });\n * ```\n */\nexport function fontRelative(base: number, baseFontSize = 14): `[${string}]` {\n  return `[${internalFontRelative(base, baseFontSize)}]`;\n}\n\n/**\n * Returns consistent Spectrum focus ring outline styles for interactive components.\n *\n * @example\n * ```tsx\n * import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};\n *\n * const styles = style({\n *   ...focusRing(),\n *   borderRadius: 'lg'\n * });\n * ```\n */\nexport const focusRing = () => ({\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    forcedColors: 'Highlight'\n  },\n  outlineWidth: 2,\n  outlineOffset: 2\n} as const);\n\nexport interface IconStyle {\n  size?: 'XS' | 'S' | 'M' | 'L' |'XL',\n  color?: 'white' | 'black' | 'accent' | 'neutral' | 'negative' | 'informative' | 'positive' | 'notice' | 'gray' | 'red' | 'orange' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n  margin?: Spacing,\n  marginStart?: Spacing,\n  marginEnd?: Spacing,\n  marginTop?: Spacing,\n  marginBottom?: Spacing,\n  marginX?: Spacing,\n  marginY?: Spacing,\n  alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline',\n  justifySelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch',\n  order?: number,\n  gridArea?: CSS.Property.GridArea,\n  gridColumnStart?: CSS.Property.GridColumnStart,\n  gridColumnEnd?: CSS.Property.GridColumnEnd,\n  gridRowStart?: CSS.Property.GridRowStart,\n  gridRowEnd?: CSS.Property.GridRowStart,\n  position?: 'absolute' | 'fixed' | 'relative' | 'sticky' | 'static',\n  zIndex?: number,\n  top?: Inset,\n  bottom?: Inset,\n  inset?: Inset,\n  insetX?: Inset,\n  insetY?: Inset,\n  insetStart?: Inset,\n  insetEnd?: Inset,\n  rotate?: number | `${number}deg` | `${number}rad` | `${number}grad` | `${number}turn`\n}\n\nconst iconSizes = {\n  XS: 14,\n  S: 16,\n  M: 20,\n  L: 22,\n  XL: 26\n} as const;\n\n/**\n * Generates styles for an icon element with the given size, color, and layout options.\n * Must be imported with `{type: 'macro'}`.\n *\n * @param options - Icon styling options including `size` (XS–XL), `color`, and layout properties.\n * @returns A `StyleString` that can be applied to an icon element.\n *\n * @example\n * ```tsx\n * import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};\n * import Edit from '@react-spectrum/s2/icons/Edit';\n *\n * <Edit styles={iconStyle({size: 'XL', color: 'positive'})} />\n * ```\n */\nexport function iconStyle(this: MacroContext | void, options: IconStyle): StyleString<Exclude<keyof IconStyle, 'color' | 'size'>> {\n  let {size = 'M', color, ...styles} = options;\n\n  if (color) {\n    styles['--iconPrimary'] = {\n      type: 'fill',\n      value: color\n    };\n  }\n\n  styles['size'] = iconSizes[size];\n\n  // @ts-ignore\n  return style.call(this, styles);\n}\n"],"names":[],"version":3,"file":"main.cjs.map","sourceRoot":"../../../../../"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AA+BM,SAAS,0CAAM,EAAU;IAC9B,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,+BAAY,EAAE,IAAI,CAAC,CAAC;AACjC;AAiBO,SAAS,0CAAa,IAAY,EAAE,eAAe,EAAE;IAC1D,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,sCAAmB,EAAE,MAAM,cAAc,CAAC,CAAC;AACxD;AAeO,MAAM,4CAAY,IACtB,CAAA;QACC,cAAc;YACZ,SAAS;YACT,gBAAgB;QAClB;QACA,cAAc;YACZ,SAAS;YACT,cAAc;QAChB;QACA,cAAc;QACd,eAAe;IACjB,CAAA;AA2DF,MAAM,kCAAY;IAChB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAeO,SAAS,0CAEd,OAAkB;IAElB,IAAI,QAAC,OAAO,YAAK,KAAK,EAAE,GAAG,QAAO,GAAG;IAErC,IAAI,OACF,MAAM,CAAC,gBAAgB,GAAG;QACxB,MAAM;QACN,OAAO;IACT;IAGF,MAAM,CAAC,OAAO,GAAG,+BAAS,CAAC,KAAK;IAEhC,aAAa;IACb,OAAO,CAAA,GAAA,+BAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AAC1B","sources":["packages/@react-spectrum/s2/style/index.ts"],"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 type * as CSS from 'csstype';\nimport {\n  Inset,\n  fontRelative as internalFontRelative,\n  space as internalSpace,\n  Spacing,\n  style\n} from './spectrum-theme';\nimport type {MacroContext} from '@parcel/macros';\nimport {StyleString} from './types';\n\nexport {baseColor, color, lightDark, colorMix, size, style} from './spectrum-theme';\nexport {css} from './style-macro';\nexport {centerPadding, setColorScheme} from '../src/style-utils';\nexport type {StyleString} from './types';\n\n/**\n * Converts a pixel value to a Spectrum spacing token in `rem` units.\n *\n * @example\n *   import {space, style} from '@react-spectrum/s2/style' with {type: 'macro'};\n *\n *   const styles = style({\n *     gap: space(12) // 12/16 = 0.75rem\n *   });\n *\n * @param px - The spacing in pixels.\n * @returns A `rem` value wrapped as an arbitrary style value.\n */\nexport function space(px: number): `[${string}]` {\n  return `[${internalSpace(px)}]`;\n}\n\n/**\n * Converts a pixel value to a font-relative `em` length. Useful for sizing elements\n * relative to the current font size. Defaults to a 14px base.\n *\n * @example\n *   import {fontRelative, style} from '@react-spectrum/s2/style' with {type: 'macro'};\n *\n *   const styles = style({\n *     gap: fontRelative(2) // 2/14 = ~0.143em\n *   });\n *\n * @param base - The pixel value to convert.\n * @param baseFontSize - The base font size in pixels to divide by. Defaults to `14`.\n * @returns A CSS `em` value wrapped as an arbitrary style value.\n */\nexport function fontRelative(base: number, baseFontSize = 14): `[${string}]` {\n  return `[${internalFontRelative(base, baseFontSize)}]`;\n}\n\n/**\n * Returns consistent Spectrum focus ring outline styles for interactive components.\n *\n * Note: Requires `isFocusVisible` to be passed into the style call that uses this.\n *\n * @example\n *   import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};\n *\n *   const styles = style({\n *     ...focusRing(),\n *     borderRadius: 'lg'\n *   });\n */\nexport const focusRing = () =>\n  ({\n    outlineStyle: {\n      default: 'none',\n      isFocusVisible: 'solid'\n    },\n    outlineColor: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    },\n    outlineWidth: 2,\n    outlineOffset: 2\n  }) as const;\n\nexport interface IconStyle {\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL';\n  color?:\n    | 'white'\n    | 'black'\n    | 'accent'\n    | 'neutral'\n    | 'negative'\n    | 'informative'\n    | 'positive'\n    | 'notice'\n    | 'gray'\n    | 'red'\n    | 'orange'\n    | 'yellow'\n    | 'chartreuse'\n    | 'celery'\n    | 'green'\n    | 'seafoam'\n    | 'cyan'\n    | 'blue'\n    | 'indigo'\n    | 'purple'\n    | 'fuchsia'\n    | 'magenta'\n    | 'pink'\n    | 'turquoise'\n    | 'cinnamon'\n    | 'brown'\n    | 'silver';\n  margin?: Spacing;\n  marginStart?: Spacing;\n  marginEnd?: Spacing;\n  marginTop?: Spacing;\n  marginBottom?: Spacing;\n  marginX?: Spacing;\n  marginY?: Spacing;\n  alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline';\n  justifySelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch';\n  order?: number;\n  gridArea?: CSS.Property.GridArea;\n  gridColumnStart?: CSS.Property.GridColumnStart;\n  gridColumnEnd?: CSS.Property.GridColumnEnd;\n  gridRowStart?: CSS.Property.GridRowStart;\n  gridRowEnd?: CSS.Property.GridRowStart;\n  position?: 'absolute' | 'fixed' | 'relative' | 'sticky' | 'static';\n  zIndex?: number;\n  top?: Inset;\n  bottom?: Inset;\n  inset?: Inset;\n  insetX?: Inset;\n  insetY?: Inset;\n  insetStart?: Inset;\n  insetEnd?: Inset;\n  rotate?: number | `${number}deg` | `${number}rad` | `${number}grad` | `${number}turn`;\n}\n\nconst iconSizes = {\n  XS: 14,\n  S: 16,\n  M: 20,\n  L: 22,\n  XL: 26\n} as const;\n\n/**\n * Generates styles for an icon element with the given size, color, and layout options.\n * Must be imported with `{type: 'macro'}`.\n *\n * @example\n *   import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};\n *   import Edit from '@react-spectrum/s2/icons/Edit';\n *\n *   <Edit styles={iconStyle({size: 'XL', color: 'positive'})} />;\n *\n * @param options - Icon styling options including `size` (XS–XL), `color`, and layout properties.\n * @returns A `StyleString` that can be applied to an icon element.\n */\nexport function iconStyle(\n  this: MacroContext | void,\n  options: IconStyle\n): StyleString<Exclude<keyof IconStyle, 'color' | 'size'>> {\n  let {size = 'M', color, ...styles} = options;\n\n  if (color) {\n    styles['--iconPrimary'] = {\n      type: 'fill',\n      value: color\n    };\n  }\n\n  styles['size'] = iconSizes[size];\n\n  // @ts-ignore\n  return style.call(this, styles);\n}\n"],"names":[],"version":3,"file":"main.cjs.map","sourceRoot":"../../../../../"}

package/style/dist/module.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AA2BM,SAAS,0CAAM,EAAU;IAC9B,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,yCAAY,EAAE,IAAI,CAAC,CAAC;AACjC;AAmBO,SAAS,0CAAa,IAAY,EAAE,eAAe,EAAE;IAC1D,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,yCAAmB,EAAE,MAAM,cAAc,CAAC,CAAC;AACxD;AAeO,MAAM,4CAAY,IAAO,CAAA;QAC9B,cAAc;YACZ,SAAS;YACT,gBAAgB;QAClB;QACA,cAAc;YACZ,SAAS;YACT,cAAc;QAChB;QACA,cAAc;QACd,eAAe;IACjB,CAAA;AAgCA,MAAM,kCAAY;IAChB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAiBO,SAAS,0CAAqC,OAAkB;IACrE,IAAI,QAAC,OAAO,YAAK,KAAK,EAAE,GAAG,QAAO,GAAG;IAErC,IAAI,OACF,MAAM,CAAC,gBAAgB,GAAG;QACxB,MAAM;QACN,OAAO;IACT;IAGF,MAAM,CAAC,OAAO,GAAG,+BAAS,CAAC,KAAK;IAEhC,aAAa;IACb,OAAO,CAAA,GAAA,yCAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AAC1B","sources":["packages/@react-spectrum/s2/style/index.ts"],"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 type * as CSS from 'csstype';\nimport {Inset, fontRelative as internalFontRelative, space as internalSpace, Spacing, style} from './spectrum-theme';\nimport type {MacroContext} from '@parcel/macros';\nimport {StyleString} from './types';\n\nexport {baseColor, color, lightDark, colorMix, size, style} from './spectrum-theme';\nexport {css} from './style-macro';\nexport {centerPadding, setColorScheme} from '../src/style-utils';\nexport type {StyleString} from './types';\n\n/**\n * Converts a pixel value to a Spectrum spacing token in `rem` units.\n *\n * @param px - The spacing in pixels.\n * @returns A `rem` value wrapped as an arbitrary style value.\n *\n * @example\n * ```tsx\n * import {space, style} from '@react-spectrum/s2/style' with {type: 'macro'};\n *\n * const styles = style({\n *   gap: space(12) // 12/16 = 0.75rem\n * });\n * ```\n */\nexport function space(px: number): `[${string}]` {\n  return `[${internalSpace(px)}]`;\n}\n\n/**\n * Converts a pixel value to a font-relative `em` length. Useful for sizing elements\n * relative to the current font size. Defaults to a 14px base.\n *\n * @param base - The pixel value to convert.\n * @param baseFontSize - The base font size in pixels to divide by. Defaults to `14`.\n * @returns A CSS `em` value wrapped as an arbitrary style value.\n *\n * @example\n * ```tsx\n * import {fontRelative, style} from '@react-spectrum/s2/style' with {type: 'macro'};\n *\n * const styles = style({\n *   gap: fontRelative(2)  // 2/14 = ~0.143em\n * });\n * ```\n */\nexport function fontRelative(base: number, baseFontSize = 14): `[${string}]` {\n  return `[${internalFontRelative(base, baseFontSize)}]`;\n}\n\n/**\n * Returns consistent Spectrum focus ring outline styles for interactive components.\n *\n * @example\n * ```tsx\n * import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};\n *\n * const styles = style({\n *   ...focusRing(),\n *   borderRadius: 'lg'\n * });\n * ```\n */\nexport const focusRing = () => ({\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    forcedColors: 'Highlight'\n  },\n  outlineWidth: 2,\n  outlineOffset: 2\n} as const);\n\nexport interface IconStyle {\n  size?: 'XS' | 'S' | 'M' | 'L' |'XL',\n  color?: 'white' | 'black' | 'accent' | 'neutral' | 'negative' | 'informative' | 'positive' | 'notice' | 'gray' | 'red' | 'orange' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n  margin?: Spacing,\n  marginStart?: Spacing,\n  marginEnd?: Spacing,\n  marginTop?: Spacing,\n  marginBottom?: Spacing,\n  marginX?: Spacing,\n  marginY?: Spacing,\n  alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline',\n  justifySelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch',\n  order?: number,\n  gridArea?: CSS.Property.GridArea,\n  gridColumnStart?: CSS.Property.GridColumnStart,\n  gridColumnEnd?: CSS.Property.GridColumnEnd,\n  gridRowStart?: CSS.Property.GridRowStart,\n  gridRowEnd?: CSS.Property.GridRowStart,\n  position?: 'absolute' | 'fixed' | 'relative' | 'sticky' | 'static',\n  zIndex?: number,\n  top?: Inset,\n  bottom?: Inset,\n  inset?: Inset,\n  insetX?: Inset,\n  insetY?: Inset,\n  insetStart?: Inset,\n  insetEnd?: Inset,\n  rotate?: number | `${number}deg` | `${number}rad` | `${number}grad` | `${number}turn`\n}\n\nconst iconSizes = {\n  XS: 14,\n  S: 16,\n  M: 20,\n  L: 22,\n  XL: 26\n} as const;\n\n/**\n * Generates styles for an icon element with the given size, color, and layout options.\n * Must be imported with `{type: 'macro'}`.\n *\n * @param options - Icon styling options including `size` (XS–XL), `color`, and layout properties.\n * @returns A `StyleString` that can be applied to an icon element.\n *\n * @example\n * ```tsx\n * import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};\n * import Edit from '@react-spectrum/s2/icons/Edit';\n *\n * <Edit styles={iconStyle({size: 'XL', color: 'positive'})} />\n * ```\n */\nexport function iconStyle(this: MacroContext | void, options: IconStyle): StyleString<Exclude<keyof IconStyle, 'color' | 'size'>> {\n  let {size = 'M', color, ...styles} = options;\n\n  if (color) {\n    styles['--iconPrimary'] = {\n      type: 'fill',\n      value: color\n    };\n  }\n\n  styles['size'] = iconSizes[size];\n\n  // @ts-ignore\n  return style.call(this, styles);\n}\n"],"names":[],"version":3,"file":"module.mjs.map","sourceRoot":"../../../../../"}
+{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AA+BM,SAAS,0CAAM,EAAU;IAC9B,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,yCAAY,EAAE,IAAI,CAAC,CAAC;AACjC;AAiBO,SAAS,0CAAa,IAAY,EAAE,eAAe,EAAE;IAC1D,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,yCAAmB,EAAE,MAAM,cAAc,CAAC,CAAC;AACxD;AAeO,MAAM,4CAAY,IACtB,CAAA;QACC,cAAc;YACZ,SAAS;YACT,gBAAgB;QAClB;QACA,cAAc;YACZ,SAAS;YACT,cAAc;QAChB;QACA,cAAc;QACd,eAAe;IACjB,CAAA;AA2DF,MAAM,kCAAY;IAChB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAeO,SAAS,0CAEd,OAAkB;IAElB,IAAI,QAAC,OAAO,YAAK,KAAK,EAAE,GAAG,QAAO,GAAG;IAErC,IAAI,OACF,MAAM,CAAC,gBAAgB,GAAG;QACxB,MAAM;QACN,OAAO;IACT;IAGF,MAAM,CAAC,OAAO,GAAG,+BAAS,CAAC,KAAK;IAEhC,aAAa;IACb,OAAO,CAAA,GAAA,yCAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AAC1B","sources":["packages/@react-spectrum/s2/style/index.ts"],"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 type * as CSS from 'csstype';\nimport {\n  Inset,\n  fontRelative as internalFontRelative,\n  space as internalSpace,\n  Spacing,\n  style\n} from './spectrum-theme';\nimport type {MacroContext} from '@parcel/macros';\nimport {StyleString} from './types';\n\nexport {baseColor, color, lightDark, colorMix, size, style} from './spectrum-theme';\nexport {css} from './style-macro';\nexport {centerPadding, setColorScheme} from '../src/style-utils';\nexport type {StyleString} from './types';\n\n/**\n * Converts a pixel value to a Spectrum spacing token in `rem` units.\n *\n * @example\n *   import {space, style} from '@react-spectrum/s2/style' with {type: 'macro'};\n *\n *   const styles = style({\n *     gap: space(12) // 12/16 = 0.75rem\n *   });\n *\n * @param px - The spacing in pixels.\n * @returns A `rem` value wrapped as an arbitrary style value.\n */\nexport function space(px: number): `[${string}]` {\n  return `[${internalSpace(px)}]`;\n}\n\n/**\n * Converts a pixel value to a font-relative `em` length. Useful for sizing elements\n * relative to the current font size. Defaults to a 14px base.\n *\n * @example\n *   import {fontRelative, style} from '@react-spectrum/s2/style' with {type: 'macro'};\n *\n *   const styles = style({\n *     gap: fontRelative(2) // 2/14 = ~0.143em\n *   });\n *\n * @param base - The pixel value to convert.\n * @param baseFontSize - The base font size in pixels to divide by. Defaults to `14`.\n * @returns A CSS `em` value wrapped as an arbitrary style value.\n */\nexport function fontRelative(base: number, baseFontSize = 14): `[${string}]` {\n  return `[${internalFontRelative(base, baseFontSize)}]`;\n}\n\n/**\n * Returns consistent Spectrum focus ring outline styles for interactive components.\n *\n * Note: Requires `isFocusVisible` to be passed into the style call that uses this.\n *\n * @example\n *   import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};\n *\n *   const styles = style({\n *     ...focusRing(),\n *     borderRadius: 'lg'\n *   });\n */\nexport const focusRing = () =>\n  ({\n    outlineStyle: {\n      default: 'none',\n      isFocusVisible: 'solid'\n    },\n    outlineColor: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    },\n    outlineWidth: 2,\n    outlineOffset: 2\n  }) as const;\n\nexport interface IconStyle {\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL';\n  color?:\n    | 'white'\n    | 'black'\n    | 'accent'\n    | 'neutral'\n    | 'negative'\n    | 'informative'\n    | 'positive'\n    | 'notice'\n    | 'gray'\n    | 'red'\n    | 'orange'\n    | 'yellow'\n    | 'chartreuse'\n    | 'celery'\n    | 'green'\n    | 'seafoam'\n    | 'cyan'\n    | 'blue'\n    | 'indigo'\n    | 'purple'\n    | 'fuchsia'\n    | 'magenta'\n    | 'pink'\n    | 'turquoise'\n    | 'cinnamon'\n    | 'brown'\n    | 'silver';\n  margin?: Spacing;\n  marginStart?: Spacing;\n  marginEnd?: Spacing;\n  marginTop?: Spacing;\n  marginBottom?: Spacing;\n  marginX?: Spacing;\n  marginY?: Spacing;\n  alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline';\n  justifySelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch';\n  order?: number;\n  gridArea?: CSS.Property.GridArea;\n  gridColumnStart?: CSS.Property.GridColumnStart;\n  gridColumnEnd?: CSS.Property.GridColumnEnd;\n  gridRowStart?: CSS.Property.GridRowStart;\n  gridRowEnd?: CSS.Property.GridRowStart;\n  position?: 'absolute' | 'fixed' | 'relative' | 'sticky' | 'static';\n  zIndex?: number;\n  top?: Inset;\n  bottom?: Inset;\n  inset?: Inset;\n  insetX?: Inset;\n  insetY?: Inset;\n  insetStart?: Inset;\n  insetEnd?: Inset;\n  rotate?: number | `${number}deg` | `${number}rad` | `${number}grad` | `${number}turn`;\n}\n\nconst iconSizes = {\n  XS: 14,\n  S: 16,\n  M: 20,\n  L: 22,\n  XL: 26\n} as const;\n\n/**\n * Generates styles for an icon element with the given size, color, and layout options.\n * Must be imported with `{type: 'macro'}`.\n *\n * @example\n *   import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};\n *   import Edit from '@react-spectrum/s2/icons/Edit';\n *\n *   <Edit styles={iconStyle({size: 'XL', color: 'positive'})} />;\n *\n * @param options - Icon styling options including `size` (XS–XL), `color`, and layout properties.\n * @returns A `StyleString` that can be applied to an icon element.\n */\nexport function iconStyle(\n  this: MacroContext | void,\n  options: IconStyle\n): StyleString<Exclude<keyof IconStyle, 'color' | 'size'>> {\n  let {size = 'M', color, ...styles} = options;\n\n  if (color) {\n    styles['--iconPrimary'] = {\n      type: 'fill',\n      value: color\n    };\n  }\n\n  styles['size'] = iconSizes[size];\n\n  // @ts-ignore\n  return style.call(this, styles);\n}\n"],"names":[],"version":3,"file":"module.mjs.map","sourceRoot":"../../../../../"}

package/style/dist/spectrum-theme.cjs

@@ -2175,7 +2175,7 @@ const $53f7a8c49f8c6ec9$var$relativeSpacing = {
     },
     // height relative values
     'edge-to-text': 'calc(self(height, self(minHeight)) * 3 / 8)',
-    'pill': 'calc(self(height, self(minHeight)) / 2)'
+    pill: 'calc(self(height, self(minHeight)) / 2)'
 };
 const $53f7a8c49f8c6ec9$var$spacing = {
     ...$53f7a8c49f8c6ec9$var$baseSpacing,
@@ -3550,8 +3550,7 @@ const $53f7a8c49f8c6ec9$export$1d567c320f4763bc = (0, $cf0b57705fca33e1$exports.
             'bottom right',
             'bottom',
             'bottom left',
-            'left',
-            'top right'
+            'left'
         ],
         cursor: [
             'auto',
@@ -3643,8 +3642,8 @@ const $53f7a8c49f8c6ec9$export$1d567c320f4763bc = (0, $cf0b57705fca33e1$exports.
             'transform'
         ],
         zIndex: new (0, $cf0b57705fca33e1$exports.ArbitraryProperty)('zIndex'),
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        disableTapHighlight: new (0, $cf0b57705fca33e1$exports.ArbitraryProperty)('-webkit-tap-highlight-color', (_value)=>'rgba(0,0,0,0)'),
+        disableTapHighlight: new (0, $cf0b57705fca33e1$exports.ArbitraryProperty)('-webkit-tap-highlight-color', // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        (_value)=>'rgba(0,0,0,0)'),
         unicodeBidi: [
             'normal',
             'embed',