@react-spectrum/s2 1.0.0 → 1.2.0

package/dist/ClearButton.cjs

@@ -42,38 +42,38 @@ const $4fb579ecc195bd2b$var$focusRingStyles = {
 };
 const $4fb579ecc195bd2b$var$visibleClearButton = function anonymous(props) {
     let rules = " ";
-    if (props.isFocusVisible) rules += ' _Lf1';
-    else rules += ' _Le1';
-    if (props.isStaticColor) rules += ' Ok1';
+    if (props.isFocusVisible) rules += ' _Lf12';
+    else rules += ' _Le12';
+    if (props.isStaticColor) rules += ' Ok12';
     else {
-        rules += ' Oh1';
-        rules += ' Olc1';
+        rules += ' Oh12';
+        rules += ' Olc12';
     }
-    rules += ' _Mc1';
-    rules += ' _Kc1';
-    rules += ' sd1';
-    rules += ' eb1';
-    rules += ' _Ca1';
-    rules += ' Fb1';
-    if (props.size === "XL") rules += ' ZF1';
-    else if (props.size === "L") rules += ' Zw1';
-    else if (props.size === "S") rules += ' Zo1';
-    else if (props.size === "XS") rules += ' Zm1';
-    else rules += ' ZC1';
-    rules += ' _va1';
-    rules += ' og1';
-    rules += ' ng1';
-    rules += ' kg1';
-    rules += ' jg1';
-    rules += ' _je1';
-    rules += ' g91';
-    rules += ' _oa1';
-    rules += ' Td1';
-    rules += ' Qd1';
-    rules += ' Sd1';
-    rules += ' Rd1';
-    rules += ' p40ub4c1';
-    rules += ' -_8sjo0b-t5ZbAob1';
+    rules += ' _Mc12';
+    rules += ' _Kc12';
+    rules += ' sd12';
+    rules += ' eb12';
+    rules += ' _Ca12';
+    rules += ' Fb12';
+    if (props.size === "XL") rules += ' ZF12';
+    else if (props.size === "L") rules += ' Zw12';
+    else if (props.size === "S") rules += ' Zo12';
+    else if (props.size === "XS") rules += ' Zm12';
+    else rules += ' ZC12';
+    rules += ' _va12';
+    rules += ' og12';
+    rules += ' ng12';
+    rules += ' kg12';
+    rules += ' jg12';
+    rules += ' _je12';
+    rules += ' g912';
+    rules += ' _oa12';
+    rules += ' Td12';
+    rules += ' Qd12';
+    rules += ' Sd12';
+    rules += ' Rd12';
+    rules += ' p40ub4c12';
+    rules += ' -_8sjo0b-t5ZbAob12';
     return rules;
 };
 const $4fb579ecc195bd2b$export$13ec83e50bf04290 = /*#__PURE__*/ (0, $ae1Ho$react.forwardRef)(function ClearButton(props, ref) {

package/dist/ClearButton.css

@@ -1,117 +1,117 @@
 @layer _.a {
-  ._Le1 {
+  ._Le12 {
     outline-style: none;
   }
 
-  ._Lf1 {
+  ._Lf12 {
     outline-style: solid;
   }
 
-  .Oh1 {
+  .Oh12 {
     outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  .Ok1 {
+  .Ok12 {
     outline-color: #fff;
   }
 
-  ._Mc1 {
+  ._Mc12 {
     outline-width: 2px;
   }
 
-  ._Kc1 {
+  ._Kc12 {
     outline-offset: -4px;
   }
 
-  .sd1 {
+  .sd12 {
     display: flex;
   }
 
-  .eb1 {
+  .eb12 {
     align-items: center;
   }
 
-  ._Ca1 {
+  ._Ca12 {
     justify-content: center;
   }
 
-  .Fb1 {
+  .Fb12 {
     height: 100%;
   }
 
-  .ZC1 {
+  .ZC12 {
     width: calc(2rem * var(--s2-scale));
   }
 
-  .Zm1 {
+  .Zm12 {
     width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Zo1 {
+  .Zo12 {
     width: calc(1.5rem * var(--s2-scale));
   }
 
-  .Zw1 {
+  .Zw12 {
     width: calc(2.5rem * var(--s2-scale));
   }
 
-  .ZF1 {
+  .ZF12 {
     width: calc(3rem * var(--s2-scale));
   }
 
-  ._va1 {
+  ._va12 {
     flex-shrink: 0;
   }
 
-  .og1 {
+  .og12 {
     border-start-start-radius: 9999px;
   }
 
-  .ng1 {
+  .ng12 {
     border-start-end-radius: 9999px;
   }
 
-  .kg1 {
+  .kg12 {
     border-end-start-radius: 9999px;
   }
 
-  .jg1 {
+  .jg12 {
     border-end-end-radius: 9999px;
   }
 
-  ._je1 {
+  ._je12 {
     border-style: none;
   }
 
-  .g91 {
+  .g912 {
     background-color: #0000;
   }
 
-  ._oa1 {
+  ._oa12 {
     box-sizing: border-box;
   }
 
-  .Td1 {
+  .Td12 {
     padding-top: 0;
   }
 
-  .Qd1 {
+  .Qd12 {
     padding-bottom: 0;
   }
 
-  .Sd1 {
+  .Sd12 {
     padding-inline-start: 0;
   }
 
-  .Rd1 {
+  .Rd12 {
     padding-inline-end: 0;
   }
 
-  .p40ub4c1 {
+  .p40ub4c12 {
     color: inherit;
   }
 
-  .-_8sjo0b-t5ZbAob1 {
+  .-_8sjo0b-t5ZbAob12 {
     --iconPrimary: currentColor;
   }
 }
@@ -120,7 +120,7 @@
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .Olc1 {
+    .Olc12 {
       outline-color: highlight;
     }
   }

package/dist/ClearButton.mjs

@@ -36,38 +36,38 @@ const $f6a62e6e68437458$var$focusRingStyles = {
 };
 const $f6a62e6e68437458$var$visibleClearButton = function anonymous(props) {
     let rules = " ";
-    if (props.isFocusVisible) rules += ' _Lf1';
-    else rules += ' _Le1';
-    if (props.isStaticColor) rules += ' Ok1';
+    if (props.isFocusVisible) rules += ' _Lf12';
+    else rules += ' _Le12';
+    if (props.isStaticColor) rules += ' Ok12';
     else {
-        rules += ' Oh1';
-        rules += ' Olc1';
+        rules += ' Oh12';
+        rules += ' Olc12';
     }
-    rules += ' _Mc1';
-    rules += ' _Kc1';
-    rules += ' sd1';
-    rules += ' eb1';
-    rules += ' _Ca1';
-    rules += ' Fb1';
-    if (props.size === "XL") rules += ' ZF1';
-    else if (props.size === "L") rules += ' Zw1';
-    else if (props.size === "S") rules += ' Zo1';
-    else if (props.size === "XS") rules += ' Zm1';
-    else rules += ' ZC1';
-    rules += ' _va1';
-    rules += ' og1';
-    rules += ' ng1';
-    rules += ' kg1';
-    rules += ' jg1';
-    rules += ' _je1';
-    rules += ' g91';
-    rules += ' _oa1';
-    rules += ' Td1';
-    rules += ' Qd1';
-    rules += ' Sd1';
-    rules += ' Rd1';
-    rules += ' p40ub4c1';
-    rules += ' -_8sjo0b-t5ZbAob1';
+    rules += ' _Mc12';
+    rules += ' _Kc12';
+    rules += ' sd12';
+    rules += ' eb12';
+    rules += ' _Ca12';
+    rules += ' Fb12';
+    if (props.size === "XL") rules += ' ZF12';
+    else if (props.size === "L") rules += ' Zw12';
+    else if (props.size === "S") rules += ' Zo12';
+    else if (props.size === "XS") rules += ' Zm12';
+    else rules += ' ZC12';
+    rules += ' _va12';
+    rules += ' og12';
+    rules += ' ng12';
+    rules += ' kg12';
+    rules += ' jg12';
+    rules += ' _je12';
+    rules += ' g912';
+    rules += ' _oa12';
+    rules += ' Td12';
+    rules += ' Qd12';
+    rules += ' Sd12';
+    rules += ' Rd12';
+    rules += ' p40ub4c12';
+    rules += ' -_8sjo0b-t5ZbAob12';
     return rules;
 };
 const $f6a62e6e68437458$export$13ec83e50bf04290 = /*#__PURE__*/ (0, $9qqo3$forwardRef)(function ClearButton(props, ref) {

package/dist/CloseButton.cjs

@@ -46,79 +46,79 @@ const $2f907cb84c6e9e75$var$styles = function anonymous(props, overrides) {
     let rules = " ";
     let width = false;
     let flexShrink = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
+    let matches = String(overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "Z") width = true;
         if (p[1] === "_v") flexShrink = true;
         rules += p[0];
     }
-    if (props.isFocusVisible) rules += ' _Lf1';
-    else rules += ' _Le1';
-    if (props.isStaticColor) rules += ' Oe1';
-    else rules += ' Oh1';
-    rules += ' Olc1';
-    rules += ' _Mc1';
-    rules += ' _Kd1';
-    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr1';
-    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s1';
-    rules += ' sd1';
-    rules += ' eb1';
-    rules += ' _Ca1';
+    if (props.isFocusVisible) rules += ' _Lf12';
+    else rules += ' _Le12';
+    if (props.isStaticColor) rules += ' Oe12';
+    else rules += ' Oh12';
+    rules += ' Olc12';
+    rules += ' _Mc12';
+    rules += ' _Kd12';
+    if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr12';
+    else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s12';
+    rules += ' sd12';
+    rules += ' eb12';
+    rules += ' _Ca12';
     if (props.size === "XL") {
-        if (!width) rules += ' ZF1';
+        if (!width) rules += ' ZF12';
     } else if (props.size === "L") {
-        if (!width) rules += ' Zw1';
+        if (!width) rules += ' Zw12';
     } else if (props.size === "S") {
-        if (!width) rules += ' Zo1';
+        if (!width) rules += ' Zo12';
     } else if (props.size === "XS") {
-        if (!width) rules += ' Zm1';
-    } else if (!width) rules += ' ZC1';
-    if (props.size === "XL") rules += ' Fz1';
-    else if (props.size === "L") rules += ' Fv1';
-    else if (props.size === "S") rules += ' Fp1';
-    else if (props.size === "XS") rules += ' Fn1';
-    else rules += ' Fx1';
-    if (!flexShrink) rules += ' _va1';
-    rules += ' og1';
-    rules += ' ng1';
-    rules += ' kg1';
-    rules += ' jg1';
-    rules += ' Td1';
-    rules += ' Qd1';
-    rules += ' Sd1';
-    rules += ' Rd1';
-    rules += ' _je1';
-    rules += ' Yd1';
-    rules += ' Xb1';
-    rules += ' _2b1';
+        if (!width) rules += ' Zm12';
+    } else if (!width) rules += ' ZC12';
+    if (props.size === "XL") rules += ' Fz12';
+    else if (props.size === "L") rules += ' Fv12';
+    else if (props.size === "S") rules += ' Fp12';
+    else if (props.size === "XS") rules += ' Fn12';
+    else rules += ' Fx12';
+    if (!flexShrink) rules += ' _va12';
+    rules += ' og12';
+    rules += ' ng12';
+    rules += ' kg12';
+    rules += ' jg12';
+    rules += ' Td12';
+    rules += ' Qd12';
+    rules += ' Sd12';
+    rules += ' Rd12';
+    rules += ' _je12';
+    rules += ' Yd12';
+    rules += ' Xb12';
+    rules += ' _2b12';
     if (props.isPressed) {
-        if (props.isStaticColor) rules += ' gg1';
-        else rules += ' gF1';
+        if (props.isStaticColor) rules += ' gg12';
+        else rules += ' gF12';
     } else if (props.isFocusVisible) {
-        if (props.isStaticColor) rules += ' gg1';
-        else rules += ' gF1';
+        if (props.isStaticColor) rules += ' gg12';
+        else rules += ' gF12';
     } else if (props.isHovered) {
-        if (props.isStaticColor) rules += ' gg1';
-        else rules += ' gF1';
-    } else rules += ' g91';
+        if (props.isStaticColor) rules += ' gg12';
+        else rules += ' gF12';
+    } else rules += ' g912';
     if (props.isStaticColor) {
-        if (props.isDisabled) rules += ' -_8sjo0b-pi1';
+        if (props.isDisabled) rules += ' -_8sjo0b-pi12';
         else {
-            if (props.isPressed) rules += ' -_8sjo0b-pk1';
-            else if (props.isFocusVisible) rules += ' -_8sjo0b-pk1';
-            else if (props.isHovered) rules += ' -_8sjo0b-pk1';
-            else rules += ' -_8sjo0b-pj1';
+            if (props.isPressed) rules += ' -_8sjo0b-pk12';
+            else if (props.isFocusVisible) rules += ' -_8sjo0b-pk12';
+            else if (props.isHovered) rules += ' -_8sjo0b-pk12';
+            else rules += ' -_8sjo0b-pj12';
         }
-    } else if (props.isDisabled) rules += ' -_8sjo0b-pp1';
+    } else if (props.isDisabled) rules += ' -_8sjo0b-pp12';
     else {
-        if (props.isPressed) rules += ' -_8sjo0b-po1';
-        else if (props.isFocusVisible) rules += ' -_8sjo0b-po1';
-        else if (props.isHovered) rules += ' -_8sjo0b-po1';
-        else rules += ' -_8sjo0b-pt1';
+        if (props.isPressed) rules += ' -_8sjo0b-po12';
+        else if (props.isFocusVisible) rules += ' -_8sjo0b-po12';
+        else if (props.isHovered) rules += ' -_8sjo0b-po12';
+        else rules += ' -_8sjo0b-pt12';
     }
-    if (props.isDisabled) rules += ' -_8sjo0b-lpc1';
-    else rules += ' -_8sjo0b-lpb1';
-    rules += ' __ca1';
+    if (props.isDisabled) rules += ' -_8sjo0b-lpc12';
+    else rules += ' -_8sjo0b-lpb12';
+    rules += ' __ca12';
     return rules;
 };
 const $2f907cb84c6e9e75$export$c796eec99a15b55d = /*#__PURE__*/ (0, $bMS5K$react.createContext)(null);

package/dist/CloseButton.css

@@ -1,177 +1,177 @@
 @layer _.a {
-  ._Le1 {
+  ._Le12 {
     outline-style: none;
   }
 
-  ._Lf1 {
+  ._Lf12 {
     outline-style: solid;
   }
 
-  .Oh1 {
+  .Oh12 {
     outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  .Oe1 {
+  .Oe12 {
     outline-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
-  ._Mc1 {
+  ._Mc12 {
     outline-width: 2px;
   }
 
-  ._Kd1 {
+  ._Kd12 {
     outline-offset: 2px;
   }
 
-  .-Ovbhqd-g4hn3s1 {
+  .-Ovbhqd-g4hn3s12 {
     --s2-container-bg: white;
   }
 
-  .-Ovbhqd-gcwrnr1 {
+  .-Ovbhqd-gcwrnr12 {
     --s2-container-bg: black;
   }
 
-  .sd1 {
+  .sd12 {
     display: flex;
   }
 
-  .eb1 {
+  .eb12 {
     align-items: center;
   }
 
-  ._Ca1 {
+  ._Ca12 {
     justify-content: center;
   }
 
-  .ZC1 {
+  .ZC12 {
     width: calc(2rem * var(--s2-scale));
   }
 
-  .Zm1 {
+  .Zm12 {
     width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Zo1 {
+  .Zo12 {
     width: calc(1.5rem * var(--s2-scale));
   }
 
-  .Zw1 {
+  .Zw12 {
     width: calc(2.5rem * var(--s2-scale));
   }
 
-  .ZF1 {
+  .ZF12 {
     width: calc(3rem * var(--s2-scale));
   }
 
-  .Fx1 {
+  .Fx12 {
     height: calc(2rem * var(--s2-scale));
   }
 
-  .Fn1 {
+  .Fn12 {
     height: calc(1.25rem * var(--s2-scale));
   }
 
-  .Fp1 {
+  .Fp12 {
     height: calc(1.5rem * var(--s2-scale));
   }
 
-  .Fv1 {
+  .Fv12 {
     height: calc(2.5rem * var(--s2-scale));
   }
 
-  .Fz1 {
+  .Fz12 {
     height: calc(3rem * var(--s2-scale));
   }
 
-  ._va1 {
+  ._va12 {
     flex-shrink: 0;
   }
 
-  .og1 {
+  .og12 {
     border-start-start-radius: 9999px;
   }
 
-  .ng1 {
+  .ng12 {
     border-start-end-radius: 9999px;
   }
 
-  .kg1 {
+  .kg12 {
     border-end-start-radius: 9999px;
   }
 
-  .jg1 {
+  .jg12 {
     border-end-end-radius: 9999px;
   }
 
-  .Td1 {
+  .Td12 {
     padding-top: 0;
   }
 
-  .Qd1 {
+  .Qd12 {
     padding-bottom: 0;
   }
 
-  .Sd1 {
+  .Sd12 {
     padding-inline-start: 0;
   }
 
-  .Rd1 {
+  .Rd12 {
     padding-inline-end: 0;
   }
 
-  ._je1 {
+  ._je12 {
     border-style: none;
   }
 
-  .Yd1 {
+  .Yd12 {
     transition-property: color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
   }
 
-  .Xb1 {
+  .Xb12 {
     transition-duration: .15s;
   }
 
-  ._2b1 {
+  ._2b12 {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  .g91 {
+  .g912 {
     background-color: #0000;
   }
 
-  .gF1 {
+  .gF12 {
     background-color: var(--lightningcss-light, #e1e1e1) var(--lightningcss-dark, #323232);
   }
 
-  .gg1 {
+  .gg12 {
     background-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .14);
   }
 
-  .-_8sjo0b-pt1 {
+  .-_8sjo0b-pt12 {
     --iconPrimary: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
   }
 
-  .-_8sjo0b-po1 {
+  .-_8sjo0b-po12 {
     --iconPrimary: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  .-_8sjo0b-pp1 {
+  .-_8sjo0b-pp12 {
     --iconPrimary: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
   }
 
-  .-_8sjo0b-pj1 {
+  .-_8sjo0b-pj12 {
     --iconPrimary: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .85);
   }
 
-  .-_8sjo0b-pk1 {
+  .-_8sjo0b-pk12 {
     --iconPrimary: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
   }
 
-  .-_8sjo0b-pi1 {
+  .-_8sjo0b-pi12 {
     --iconPrimary: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .21);
   }
 
-  .__ca1 {
+  .__ca12 {
     -webkit-tap-highlight-color: #0000;
   }
 }
@@ -180,15 +180,15 @@
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .Olc1 {
+    .Olc12 {
       outline-color: highlight;
     }
 
-    .-_8sjo0b-lpb1 {
+    .-_8sjo0b-lpb12 {
       --iconPrimary: ButtonText;
     }
 
-    .-_8sjo0b-lpc1 {
+    .-_8sjo0b-lpc12 {
       --iconPrimary: GrayText;
     }
   }