@react-spectrum/s2 1.3.1 → 1.5.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 {
+  .Jbs15:first-child {
     margin-top: 0.25rem;
   }
 }
 
 @layer _.c.p {
   @media (min-width: 64rem) {
-    .Jbpv131:first-child {
+    .Jbpv15: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-wxfyDb {
+        --macro-data-wxfyDb: {"style":{"marginTop":{":first-child":{"default":4,"lg":8}}},"loc":"undefined:undefined:undefined"};
       }
 
 "
 `);
-    expect(js).toMatchInlineSnapshot('" Jbs131 Jbpv131 -macro-static-MypNfe"');
+    expect(js).toMatchInlineSnapshot(`" Jbs15 Jbpv15 -macro-static-wxfyDb"`);
   });
 
   it('should support self references', () => {
@@ -73,59 +73,61 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  ._kc131 {
+  ._kc15 {
     border-top-width: 2px;
   }
 
 
-  .hc131 {
+  .hc15 {
     border-bottom-width: 2px;
   }
 
 
-  .mCPFGYc131 {
+  .mCPFGYc15 {
     border-inline-start-width: var(--m);
   }
 
 
-  .lc131 {
+  .lc15 {
     border-inline-end-width: 2px;
   }
 
 
-  .SMBFGYc131 {
+  .SMBFGYc15 {
     padding-inline-start: var(--S);
   }
 
 
-  .Rv131 {
+  .Rv15 {
     padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
   }
 
 
-  .ZjUQgKd131 {
+  .ZjUQgKd15 {
     width: calc(200px - var(--m) - var(--S));
   }
 
 
-  .-m_-mc131 {
+  .-m_-mc15 {
     --m: 2px;
   }
 
 
-  .-S_-Sv131 {
+  .-S_-Sv15 {
     --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-vBpT2 {
+        --macro-data-vBpT2: {"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(
+      `" _kc15 hc15 mCPFGYc15 lc15 SMBFGYc15 Rv15 ZjUQgKd15 -m_-mc15 -S_-Sv15 -macro-static-vBpT2"`
+    );
   });
 
   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(`"  gw15 pg15 -macro-dynamic-16fgbv4"`);
+    expect(overrides).toMatchInlineSnapshot(`" g8tmWqb15 pHJ3AUd15 -macro-static-4cOIRb"`);
+    expect(js({}, overrides)).toMatchInlineSnapshot(`"  g8tmWqb15 pg15 -macro-dynamic-1vflel8"`);
   });
 
   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-B15 __Ya15 -macro-dynamic-2u33z5"`);
+    expect(overrides).toMatchInlineSnapshot(`" -_7PloMd-D15 __Ya15 -macro-static-poioi"`);
+    expect(js({}, overrides)).toMatchInlineSnapshot(
+      `"  -_7PloMd-D15 __Ya15 -macro-dynamic-13fqmar"`
+    );
   });
 
   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(`"  Tk15 Qk15 Sk15 Rk15 -macro-dynamic-2rom7x"`);
+    expect(overrides).toMatchInlineSnapshot(`" Tm15 Qm15 Sm15 Rm15 -macro-static-FXaHv"`);
+    expect(js({}, overrides)).toMatchInlineSnapshot(
+      `"  Tm15 Qm15 Sm15 Rm15 -macro-dynamic-16os9ol"`
+    );
   });
 
   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-woabcc15 vx15 -macro-dynamic-qs6tc"`);
+    expect(overrides).toMatchInlineSnapshot(`" -_6BNtrc-a15 vx15 -macro-static-yXDXz"`);
+    expect(js({}, overrides)).toMatchInlineSnapshot(`"  -_6BNtrc-a15 vx15 -macro-dynamic-1nd81ma"`);
   });
 
   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(`"  gE15 -macro-dynamic-11gtfdt"`);
+    expect(overrides).toMatchInlineSnapshot(`" Nk15 -macro-static-Io0zY"`);
+    expect(js({}, overrides)).toMatchInlineSnapshot(`"  Nk15 gE15 -macro-dynamic-14t819c"`);
   });
 
   it('should support runtime conditions', () => {
@@ -233,32 +239,32 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gH131 {
+  .gH15 {
     background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
   }
 
 
-  .gF131 {
+  .gF15 {
     background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
   }
 
 
-  .gE131 {
+  .gE15 {
     background-color: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
   }
 
 
-  .pt131 {
+  .pt15 {
     color: light-dark(rgb(41, 41, 41), rgb(219, 219, 219));
   }
 
 
-  .po131 {
+  .po15 {
     color: light-dark(rgb(19, 19, 19), rgb(242, 242, 242));
   }
 
 
-  .pm131 {
+  .pm15 {
     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(`"  gH15 pt15 -macro-dynamic-10n1jv2"`);
+    expect(js({isHovered: true})).toMatchInlineSnapshot(`"  gF15 po15 -macro-dynamic-boma93"`);
+    expect(js({isPressed: true})).toMatchInlineSnapshot(`"  gE15 pm15 -macro-dynamic-1cs8qp0"`);
   });
 
   it('should support nested runtime conditions', () => {
@@ -287,32 +293,34 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gH131 {
+  .gH15 {
     background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
   }
 
 
-  .gF131 {
+  .gF15 {
     background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
   }
 
 
-  .g_h131 {
+  .g_h15 {
     background-color: light-dark(rgb(75, 117, 255), rgb(64, 105, 253));
   }
 
 
-  .g3131 {
+  .g315 {
     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(`"  gH15 -macro-dynamic-1etdqys"`);
+    expect(js({isHovered: true})).toMatchInlineSnapshot(`"  gF15 -macro-dynamic-1tldjwi"`);
+    expect(js({isSelected: true})).toMatchInlineSnapshot(`"  g_h15 -macro-dynamic-d1dps3"`);
+    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot(
+      `"  g315 -macro-dynamic-sejjv3"`
+    );
   });
 
   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(`"  gY15 -macro-dynamic-vr3hyt"`);
+    expect(js({variant: 'primary'})).toMatchInlineSnapshot(`"  gjQquMe15 -macro-dynamic-vcucj3"`);
+    expect(js({variant: 'secondary'})).toMatchInlineSnapshot(`"  gw15 -macro-dynamic-n6ilub"`);
   });
 
   it('supports runtime conditions nested inside css conditions', () => {
@@ -346,14 +354,14 @@ describe('style-macro', () => {
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .plb131 {
+    .plb15 {
       color: ButtonText;
     }
   }
 
 
   @media (forced-colors: active) {
-    .ple131 {
+    .ple15 {
       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(`"  plb15 -macro-dynamic-1ap32yb"`);
+    expect(js({isSelected: true})).toMatchInlineSnapshot(`"  ple15 -macro-dynamic-1o1neja"`);
   });
 
   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(`"  plb15 -macro-dynamic-1ap32yb"`);
+    expect(js({variant: 'highlight', isSelected: true})).toMatchInlineSnapshot(
+      `"  ple15 -macro-dynamic-1o1neja"`
+    );
   });
 
   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(`" Th15 Qh15 Sh15 Rh15 -macro-static-PaKDid"`);
     expect(css).toMatchInlineSnapshot(`
 "@layer _.a;
 
 @layer _.a {
-  .Th131 {
+  .Th15 {
     padding-top: 24px;
   }
 
 
-  .Qh131 {
+  .Qh15 {
     padding-bottom: 24px;
   }
 
 
-  .Sh131 {
+  .Sh15 {
     padding-inline-start: 24px;
   }
 
 
-  .Rh131 {
+  .Rh15 {
     padding-inline-end: 24px;
   }
 }
 
-.-macro-static-D80Fbe {
-        --macro-data-D80Fbe: {"style":{"padding":24},"loc":"undefined:undefined:undefined"};
+.-macro-static-PaKDid {
+        --macro-data-PaKDid: {"style":{"padding":24},"loc":"undefined:undefined:undefined"};
       }
 
 "
@@ -430,13 +440,13 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gpQzfVb131 {
+  .gpQzfVb15 {
     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-3vO7o {
+        --macro-data-3vO7o: {"style":{"backgroundColor":"blue-1000/50"},"loc":"undefined:undefined:undefined"};
       }
 
 "
@@ -455,13 +465,13 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .-FUeYm-gE131 {
+  .-FUeYm-gE15 {
     --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-z8Uxye {
+        --macro-data-z8Uxye: {"style":{"--foo":{"type":"backgroundColor","value":"gray-300"}},"loc":"undefined:undefined:undefined"};
       }
 
 "

package/style/dist/main.cjs

@@ -1,25 +1,25 @@
-var $53f7a8c49f8c6ec9$exports = require("./spectrum-theme.cjs");
-var $cf0b57705fca33e1$exports = require("./style-macro.cjs");
-var $247833060df99ecf$exports = require("./style-utils.cjs");
+var $f4755549bfd6a7d9$exports = require("./spectrum-theme.cjs");
+var $01c7b97da92e6691$exports = require("./style-macro.cjs");
+var $173789cf89bf6810$exports = require("./style-utils.cjs");
 
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 
-$parcel$export(module.exports, "space", () => $601c1b90569d4e66$export$a941ed4b947d12f8);
-$parcel$export(module.exports, "fontRelative", () => $601c1b90569d4e66$export$ba024f4caf693d15);
-$parcel$export(module.exports, "focusRing", () => $601c1b90569d4e66$export$8e24544ddba725ee);
-$parcel$export(module.exports, "iconStyle", () => $601c1b90569d4e66$export$dcc3981cc6efe940);
-$parcel$export(module.exports, "baseColor", () => $53f7a8c49f8c6ec9$exports.baseColor);
-$parcel$export(module.exports, "color", () => $53f7a8c49f8c6ec9$exports.color);
-$parcel$export(module.exports, "lightDark", () => $53f7a8c49f8c6ec9$exports.lightDark);
-$parcel$export(module.exports, "colorMix", () => $53f7a8c49f8c6ec9$exports.colorMix);
-$parcel$export(module.exports, "size", () => $53f7a8c49f8c6ec9$exports.size);
-$parcel$export(module.exports, "style", () => $53f7a8c49f8c6ec9$exports.style);
-$parcel$export(module.exports, "css", () => $cf0b57705fca33e1$exports.css);
-$parcel$export(module.exports, "centerPadding", () => $247833060df99ecf$exports.centerPadding);
-$parcel$export(module.exports, "setColorScheme", () => $247833060df99ecf$exports.setColorScheme);
+$parcel$export(module.exports, "space", () => $28a70f04116423b9$export$a941ed4b947d12f8);
+$parcel$export(module.exports, "fontRelative", () => $28a70f04116423b9$export$ba024f4caf693d15);
+$parcel$export(module.exports, "focusRing", () => $28a70f04116423b9$export$8e24544ddba725ee);
+$parcel$export(module.exports, "iconStyle", () => $28a70f04116423b9$export$dcc3981cc6efe940);
+$parcel$export(module.exports, "baseColor", () => $f4755549bfd6a7d9$exports.baseColor);
+$parcel$export(module.exports, "color", () => $f4755549bfd6a7d9$exports.color);
+$parcel$export(module.exports, "lightDark", () => $f4755549bfd6a7d9$exports.lightDark);
+$parcel$export(module.exports, "colorMix", () => $f4755549bfd6a7d9$exports.colorMix);
+$parcel$export(module.exports, "size", () => $f4755549bfd6a7d9$exports.size);
+$parcel$export(module.exports, "style", () => $f4755549bfd6a7d9$exports.style);
+$parcel$export(module.exports, "css", () => $01c7b97da92e6691$exports.css);
+$parcel$export(module.exports, "centerPadding", () => $173789cf89bf6810$exports.centerPadding);
+$parcel$export(module.exports, "setColorScheme", () => $173789cf89bf6810$exports.setColorScheme);
 /*
  * Copyright 2024 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -33,13 +33,13 @@ $parcel$export(module.exports, "setColorScheme", () => $247833060df99ecf$exports
  */ 
 
 
-function $601c1b90569d4e66$export$a941ed4b947d12f8(px) {
-    return `[${(0, $53f7a8c49f8c6ec9$exports.space)(px)}]`;
+function $28a70f04116423b9$export$a941ed4b947d12f8(px) {
+    return `[${(0, $f4755549bfd6a7d9$exports.space)(px)}]`;
 }
-function $601c1b90569d4e66$export$ba024f4caf693d15(base, baseFontSize = 14) {
-    return `[${(0, $53f7a8c49f8c6ec9$exports.fontRelative)(base, baseFontSize)}]`;
+function $28a70f04116423b9$export$ba024f4caf693d15(base, baseFontSize = 14) {
+    return `[${(0, $f4755549bfd6a7d9$exports.fontRelative)(base, baseFontSize)}]`;
 }
-const $601c1b90569d4e66$export$8e24544ddba725ee = ()=>({
+const $28a70f04116423b9$export$8e24544ddba725ee = ()=>({
         outlineStyle: {
             default: 'none',
             isFocusVisible: 'solid'
@@ -51,22 +51,22 @@ const $601c1b90569d4e66$export$8e24544ddba725ee = ()=>({
         outlineWidth: 2,
         outlineOffset: 2
     });
-const $601c1b90569d4e66$var$iconSizes = {
+const $28a70f04116423b9$var$iconSizes = {
     XS: 14,
     S: 16,
     M: 20,
     L: 22,
     XL: 26
 };
-function $601c1b90569d4e66$export$dcc3981cc6efe940(options) {
+function $28a70f04116423b9$export$dcc3981cc6efe940(options) {
     let { size: size = 'M', color: color, ...styles } = options;
     if (color) styles['--iconPrimary'] = {
         type: 'fill',
         value: color
     };
-    styles['size'] = $601c1b90569d4e66$var$iconSizes[size];
+    styles['size'] = $28a70f04116423b9$var$iconSizes[size];
     // @ts-ignore
-    return (0, $53f7a8c49f8c6ec9$exports.style).call(this, styles);
+    return (0, $f4755549bfd6a7d9$exports.style).call(this, styles);
 }
 
 

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

@@ -1,6 +1,6 @@
-import {baseColor as $9440fa3fdd7adbfe$export$49bbad2a916ab57c, color as $9440fa3fdd7adbfe$export$35e9368ef982300f, colorMix as $9440fa3fdd7adbfe$export$9b476054b78b89cd, fontRelative as $9440fa3fdd7adbfe$export$ba024f4caf693d15, lightDark as $9440fa3fdd7adbfe$export$d19e682d444755ed, size as $9440fa3fdd7adbfe$export$346677f925de839c, space as $9440fa3fdd7adbfe$export$a941ed4b947d12f8, style as $9440fa3fdd7adbfe$export$1d567c320f4763bc} from "./spectrum-theme.mjs";
-import {css as $e3c5b37c91268204$export$dbf350e5966cf602} from "./style-macro.mjs";
-import {centerPadding as $fec05d0b605a7a01$export$dc7aad089b8f5c30, setColorScheme as $fec05d0b605a7a01$export$f2d00fe8ce80fd84} from "./style-utils.mjs";
+import {baseColor as $03477f2c57e5e829$export$49bbad2a916ab57c, color as $03477f2c57e5e829$export$35e9368ef982300f, colorMix as $03477f2c57e5e829$export$9b476054b78b89cd, fontRelative as $03477f2c57e5e829$export$ba024f4caf693d15, lightDark as $03477f2c57e5e829$export$d19e682d444755ed, size as $03477f2c57e5e829$export$346677f925de839c, space as $03477f2c57e5e829$export$a941ed4b947d12f8, style as $03477f2c57e5e829$export$1d567c320f4763bc} from "./spectrum-theme.mjs";
+import {css as $2b02e40735e2ad11$export$dbf350e5966cf602} from "./style-macro.mjs";
+import {centerPadding as $5b246d8b7927dc0b$export$dc7aad089b8f5c30, setColorScheme as $5b246d8b7927dc0b$export$f2d00fe8ce80fd84} from "./style-utils.mjs";
 
 /*
  * Copyright 2024 Adobe. All rights reserved.
@@ -15,13 +15,13 @@ import {centerPadding as $fec05d0b605a7a01$export$dc7aad089b8f5c30, setColorSche
  */ 
 
 
-function $4ac2adb5febfc8ac$export$a941ed4b947d12f8(px) {
-    return `[${(0, $9440fa3fdd7adbfe$export$a941ed4b947d12f8)(px)}]`;
+function $a50e184cb6edb0bf$export$a941ed4b947d12f8(px) {
+    return `[${(0, $03477f2c57e5e829$export$a941ed4b947d12f8)(px)}]`;
 }
-function $4ac2adb5febfc8ac$export$ba024f4caf693d15(base, baseFontSize = 14) {
-    return `[${(0, $9440fa3fdd7adbfe$export$ba024f4caf693d15)(base, baseFontSize)}]`;
+function $a50e184cb6edb0bf$export$ba024f4caf693d15(base, baseFontSize = 14) {
+    return `[${(0, $03477f2c57e5e829$export$ba024f4caf693d15)(base, baseFontSize)}]`;
 }
-const $4ac2adb5febfc8ac$export$8e24544ddba725ee = ()=>({
+const $a50e184cb6edb0bf$export$8e24544ddba725ee = ()=>({
         outlineStyle: {
             default: 'none',
             isFocusVisible: 'solid'
@@ -33,24 +33,24 @@ const $4ac2adb5febfc8ac$export$8e24544ddba725ee = ()=>({
         outlineWidth: 2,
         outlineOffset: 2
     });
-const $4ac2adb5febfc8ac$var$iconSizes = {
+const $a50e184cb6edb0bf$var$iconSizes = {
     XS: 14,
     S: 16,
     M: 20,
     L: 22,
     XL: 26
 };
-function $4ac2adb5febfc8ac$export$dcc3981cc6efe940(options) {
+function $a50e184cb6edb0bf$export$dcc3981cc6efe940(options) {
     let { size: size = 'M', color: color, ...styles } = options;
     if (color) styles['--iconPrimary'] = {
         type: 'fill',
         value: color
     };
-    styles['size'] = $4ac2adb5febfc8ac$var$iconSizes[size];
+    styles['size'] = $a50e184cb6edb0bf$var$iconSizes[size];
     // @ts-ignore
-    return (0, $9440fa3fdd7adbfe$export$1d567c320f4763bc).call(this, styles);
+    return (0, $03477f2c57e5e829$export$1d567c320f4763bc).call(this, styles);
 }
 
 
-export {$4ac2adb5febfc8ac$export$a941ed4b947d12f8 as space, $4ac2adb5febfc8ac$export$ba024f4caf693d15 as fontRelative, $4ac2adb5febfc8ac$export$8e24544ddba725ee as focusRing, $4ac2adb5febfc8ac$export$dcc3981cc6efe940 as iconStyle, $9440fa3fdd7adbfe$export$49bbad2a916ab57c as baseColor, $9440fa3fdd7adbfe$export$35e9368ef982300f as color, $9440fa3fdd7adbfe$export$d19e682d444755ed as lightDark, $9440fa3fdd7adbfe$export$9b476054b78b89cd as colorMix, $9440fa3fdd7adbfe$export$346677f925de839c as size, $9440fa3fdd7adbfe$export$1d567c320f4763bc as style, $e3c5b37c91268204$export$dbf350e5966cf602 as css, $fec05d0b605a7a01$export$dc7aad089b8f5c30 as centerPadding, $fec05d0b605a7a01$export$f2d00fe8ce80fd84 as setColorScheme};
+export {$a50e184cb6edb0bf$export$a941ed4b947d12f8 as space, $a50e184cb6edb0bf$export$ba024f4caf693d15 as fontRelative, $a50e184cb6edb0bf$export$8e24544ddba725ee as focusRing, $a50e184cb6edb0bf$export$dcc3981cc6efe940 as iconStyle, $03477f2c57e5e829$export$49bbad2a916ab57c as baseColor, $03477f2c57e5e829$export$35e9368ef982300f as color, $03477f2c57e5e829$export$d19e682d444755ed as lightDark, $03477f2c57e5e829$export$9b476054b78b89cd as colorMix, $03477f2c57e5e829$export$346677f925de839c as size, $03477f2c57e5e829$export$1d567c320f4763bc as style, $2b02e40735e2ad11$export$dbf350e5966cf602 as css, $5b246d8b7927dc0b$export$dc7aad089b8f5c30 as centerPadding, $5b246d8b7927dc0b$export$f2d00fe8ce80fd84 as setColorScheme};
 //# sourceMappingURL=module.mjs.map