@react-spectrum/s2 3.0.0-nightly-e7053dd8f-250108 → 3.0.0-nightly-d87cc4422-250109

package/dist/Image.cjs

@@ -55,21 +55,21 @@ function $053b76ed3d29e13b$var$reducer(state, action) {
             return state;
     }
 }
-const $053b76ed3d29e13b$var$wrapperStyles = " . bg __vb __wb";
+const $053b76ed3d29e13b$var$wrapperStyles = " . bg __wb __xb";
 const $053b76ed3d29e13b$var$imgStyles = function anonymous(props) {
     let rules = " .";
-    rules += ' _Za';
+    rules += ' _0a';
     rules += ' lb';
     rules += ' kb';
-    rules += ' __N-17zqamw';
     rules += ' __O-17zqamw';
-    if (props.isRevealed) rules += ' _K-3t1y';
-    else rules += ' _K-3t1x';
-    if (props.isTransitioning) rules += ' _Oc';
-    else rules += ' _Og';
-    rules += ' _Q-3760fu';
-    if (props.isTransitioning) rules += ' _Ra';
-    else rules += ' _Ra';
+    rules += ' __P-17zqamw';
+    if (props.isRevealed) rules += ' _L-3t1y';
+    else rules += ' _L-3t1x';
+    if (props.isTransitioning) rules += ' _Pc';
+    else rules += ' _Pg';
+    rules += ' _R-3760fu';
+    if (props.isTransitioning) rules += ' _Sa';
+    else rules += ' _Sa';
     return rules;
 };
 const $053b76ed3d29e13b$export$3e431a229df88919 = /*#__PURE__*/ (0, $kwMay$react.forwardRef)(function Image(props, domRef) {

package/dist/Image.css

@@ -3,15 +3,15 @@
     background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
   }
 
-  .__vb {
+  .__wb {
     overflow-x: hidden;
   }
 
-  .__wb {
+  .__xb {
     overflow-y: hidden;
   }
 
-  ._Za {
+  ._0a {
     display: block;
   }
 
@@ -23,35 +23,35 @@
     height: 100%;
   }
 
-  .__N-17zqamw {
+  .__O-17zqamw {
     object-fit: inherit;
   }
 
-  .__O-17zqamw {
+  .__P-17zqamw {
     object-position: inherit;
   }
 
-  ._K-3t1x {
+  ._L-3t1x {
     opacity: 0;
   }
 
-  ._K-3t1y {
+  ._L-3t1y {
     opacity: 1;
   }
 
-  ._Og {
+  ._Pg {
     transition-property: none;
   }
 
-  ._Oc {
+  ._Pc {
     transition-property: opacity;
   }
 
-  ._Q-3760fu {
+  ._R-3760fu {
     transition-duration: .5s;
   }
 
-  ._Ra {
+  ._Sa {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 }

package/dist/Image.mjs

@@ -48,21 +48,21 @@ function $dbd6f0b2503b938c$var$reducer(state, action) {
             return state;
     }
 }
-const $dbd6f0b2503b938c$var$wrapperStyles = " . bg __vb __wb";
+const $dbd6f0b2503b938c$var$wrapperStyles = " . bg __wb __xb";
 const $dbd6f0b2503b938c$var$imgStyles = function anonymous(props) {
     let rules = " .";
-    rules += ' _Za';
+    rules += ' _0a';
     rules += ' lb';
     rules += ' kb';
-    rules += ' __N-17zqamw';
     rules += ' __O-17zqamw';
-    if (props.isRevealed) rules += ' _K-3t1y';
-    else rules += ' _K-3t1x';
-    if (props.isTransitioning) rules += ' _Oc';
-    else rules += ' _Og';
-    rules += ' _Q-3760fu';
-    if (props.isTransitioning) rules += ' _Ra';
-    else rules += ' _Ra';
+    rules += ' __P-17zqamw';
+    if (props.isRevealed) rules += ' _L-3t1y';
+    else rules += ' _L-3t1x';
+    if (props.isTransitioning) rules += ' _Pc';
+    else rules += ' _Pg';
+    rules += ' _R-3760fu';
+    if (props.isTransitioning) rules += ' _Sa';
+    else rules += ' _Sa';
     return rules;
 };
 const $dbd6f0b2503b938c$export$3e431a229df88919 = /*#__PURE__*/ (0, $5AH9h$forwardRef)(function Image(props, domRef) {

package/dist/InlineAlert.cjs

@@ -54,27 +54,27 @@ $parcel$export(module.exports, "InlineAlert", () => $72bf3a9f94a75d9f$export$a3b
 const $72bf3a9f94a75d9f$export$c0de4eca0a8bf011 = /*#__PURE__*/ (0, $3stts$react.createContext)(null);
 const $72bf3a9f94a75d9f$var$inlineAlert = function anonymous(props, overrides) {
     let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
     rules += matches.join('');
-    let $U = false;
-    for (let p of matches)if (/^\s*U/.test(p)) $U = true;
-    if (props.isFocusVisible) rules += ' _Lb';
-    else rules += ' _La';
+    let $V = false;
+    for (let p of matches)if (/^\s*V/.test(p)) $V = true;
+    if (props.isFocusVisible) rules += ' _Mb';
+    else rules += ' _Ma';
     rules += ' da_____M';
     rules += ' dx';
-    rules += ' _Nc';
-    rules += ' _M-3t1z';
-    rules += ' _Zb';
-    if (!$U) rules += ' Uc';
-    rules += ' __na';
+    rules += ' _Oc';
+    rules += ' _N-3t1z';
+    rules += ' _0b';
+    if (!$V) rules += ' Vc';
+    rules += ' __oa';
     rules += ' Eh';
     rules += ' Fh';
     rules += ' Ch';
     rules += ' Dh';
-    rules += ' _vd';
     rules += ' _wd';
     rules += ' _xd';
     rules += ' _yd';
+    rules += ' _zd';
     rules += ' wa';
     rules += ' uc';
     rules += ' vc';
@@ -130,10 +130,10 @@ const $72bf3a9f94a75d9f$var$inlineAlert = function anonymous(props, overrides) {
 };
 const $72bf3a9f94a75d9f$var$icon = function anonymous(props) {
     let rules = " .";
-    rules += ' __a-ykjmzy';
     rules += ' __b-ykjmzy';
     rules += ' __c-ykjmzy';
     rules += ' __d-ykjmzy';
+    rules += ' __e-ykjmzy';
     if (props.fillStyle === "boldFill") {
         if (props.variant === "notice") rules += ' -rwx0fg_e-z';
         else rules += ' -rwx0fg_e-A';
@@ -152,7 +152,7 @@ const $72bf3a9f94a75d9f$var$icon = function anonymous(props) {
     }
     return rules;
 };
-const $72bf3a9f94a75d9f$var$grid = " . _Zf jh __h-u2tns7 __i-ld1isw lb __j-11zp5n8";
+const $72bf3a9f94a75d9f$var$grid = " . _0f jh __i-u2tns7 __j-ld1isw lb __k-11zp5n8";
 let $72bf3a9f94a75d9f$var$ICONS = {
     informative: (0, $0ed6e07b499b9797$exports.default),
     positive: (0, $6391be254c189366$exports.default),
@@ -163,24 +163,24 @@ let $72bf3a9f94a75d9f$var$ICONS = {
 const $72bf3a9f94a75d9f$var$heading = function anonymous(props) {
     let rules = " .";
     rules += ' Aa';
-    rules += ' __a-go5hed';
     rules += ' __b-go5hed';
     rules += ' __c-go5hed';
     rules += ' __d-go5hed';
-    rules += ' _c-bc1l9oh';
-    rules += ' _c-1uotwbwg';
-    rules += ' _c-eo0c6sf';
-    rules += ' _c-enzzrge';
-    rules += ' _c-enzykdd';
-    rules += ' _c-enzwzjc';
-    rules += ' _c-enzrfpb';
-    rules += ' _ca';
-    rules += ' _dbf';
-    rules += ' _de';
-    rules += ' _e-1x99dlod';
-    rules += ' _ed';
-    rules += ' _f-1x99dlob';
-    rules += ' _fa';
+    rules += ' __e-go5hed';
+    rules += ' _d-bc1l9oh';
+    rules += ' _d-1uotwbwg';
+    rules += ' _d-eo0c6sf';
+    rules += ' _d-enzzrge';
+    rules += ' _d-enzykdd';
+    rules += ' _d-enzwzjc';
+    rules += ' _d-enzrfpb';
+    rules += ' _da';
+    rules += ' _ebf';
+    rules += ' _ee';
+    rules += ' _f-1x99dlod';
+    rules += ' _fd';
+    rules += ' _g-1x99dlob';
+    rules += ' _ga';
     if (props.fillStyle === "boldFill") {
         if (props.variant === "notice") rules += ' ab';
         else rules += ' ac';
@@ -189,23 +189,23 @@ const $72bf3a9f94a75d9f$var$heading = function anonymous(props) {
 };
 const $72bf3a9f94a75d9f$var$content = function anonymous(props) {
     let rules = " .";
-    rules += ' __a-1mod4sg';
     rules += ' __b-1mod4sg';
     rules += ' __c-1mod4sg';
     rules += ' __d-1mod4sg';
-    rules += ' _c-bc1l9oh';
-    rules += ' _c-1uotwbwg';
-    rules += ' _c-eo0c6sf';
-    rules += ' _c-enzzrge';
-    rules += ' _c-enzykdd';
-    rules += ' _c-enzwzjc';
-    rules += ' _c-enzrfpb';
-    rules += ' _ca';
-    rules += ' _dbf';
-    rules += ' _de';
-    rules += ' _eb';
-    rules += ' _f-1x99dloc';
+    rules += ' __e-1mod4sg';
+    rules += ' _d-bc1l9oh';
+    rules += ' _d-1uotwbwg';
+    rules += ' _d-eo0c6sf';
+    rules += ' _d-enzzrge';
+    rules += ' _d-enzykdd';
+    rules += ' _d-enzwzjc';
+    rules += ' _d-enzrfpb';
+    rules += ' _da';
+    rules += ' _ebf';
+    rules += ' _ee';
     rules += ' _fb';
+    rules += ' _g-1x99dloc';
+    rules += ' _gb';
     if (props.fillStyle === "boldFill") {
         if (props.variant === "notice") rules += ' ab';
         else rules += ' ac';

package/dist/InlineAlert.css

@@ -1,9 +1,9 @@
 @layer _.a {
-  ._La {
+  ._Ma {
     outline-style: none;
   }
 
-  ._Lb {
+  ._Mb {
     outline-style: solid;
   }
 
@@ -11,23 +11,23 @@
     outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  ._Nc {
+  ._Oc {
     outline-width: 2px;
   }
 
-  ._M-3t1z {
+  ._N-3t1z {
     outline-offset: 2px;
   }
 
-  ._Zb {
+  ._0b {
     display: inline-block;
   }
 
-  .Uc {
+  .Vc {
     position: relative;
   }
 
-  .__na {
+  .__oa {
     box-sizing: border-box;
   }
 
@@ -47,19 +47,19 @@
     padding-inline-end: 1.5rem;
   }
 
-  ._vd {
+  ._wd {
     border-start-start-radius: .625rem;
   }
 
-  ._wd {
+  ._xd {
     border-start-end-radius: .625rem;
   }
 
-  ._xd {
+  ._yd {
     border-end-start-radius: .625rem;
   }
 
-  ._yd {
+  ._zd {
     border-end-end-radius: .625rem;
   }
 
@@ -167,19 +167,19 @@
     background-color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #444);
   }
 
-  .__a-ykjmzy {
+  .__b-ykjmzy {
     grid-column-start: icon;
   }
 
-  .__b-ykjmzy {
+  .__c-ykjmzy {
     grid-column-end: icon;
   }
 
-  .__c-ykjmzy {
+  .__d-ykjmzy {
     grid-row-start: icon;
   }
 
-  .__d-ykjmzy {
+  .__e-ykjmzy {
     grid-row-end: icon;
   }
 
@@ -211,7 +211,7 @@
     --iconPrimary: black;
   }
 
-  ._Zf {
+  ._0f {
     display: grid;
   }
 
@@ -219,11 +219,11 @@
     column-gap: 1.5rem;
   }
 
-  .__h-u2tns7 {
+  .__i-u2tns7 {
     grid-template-columns: 1fr auto;
   }
 
-  .__i-ld1isw {
+  .__j-ld1isw {
     grid-template-rows: auto auto auto;
   }
 
@@ -231,7 +231,7 @@
     width: 100%;
   }
 
-  .__j-11zp5n8 {
+  .__k-11zp5n8 {
     grid-template-areas: "heading icon"
                          "content content";
   }
@@ -240,29 +240,29 @@
     margin-top: 0;
   }
 
-  .__a-go5hed {
+  .__b-go5hed {
     grid-column-start: heading;
   }
 
-  .__b-go5hed {
+  .__c-go5hed {
     grid-column-end: heading;
   }
 
-  .__c-go5hed {
+  .__d-go5hed {
     grid-row-start: heading;
   }
 
-  .__d-go5hed {
+  .__e-go5hed {
     grid-row-end: heading;
   }
 
-  ._ed {
+  ._fd {
     font-variation-settings: "wght" 700;
     font-synthesis-weight: none;
     font-weight: 700;
   }
 
-  ._fa {
+  ._ga {
     line-height: 1.3;
   }
 
@@ -270,37 +270,37 @@
     color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  .__a-1mod4sg {
+  .__b-1mod4sg {
     grid-column-start: content;
   }
 
-  .__b-1mod4sg {
+  .__c-1mod4sg {
     grid-column-end: content;
   }
 
-  .__c-1mod4sg {
+  .__d-1mod4sg {
     grid-row-start: content;
   }
 
-  .__d-1mod4sg {
+  .__e-1mod4sg {
     grid-row-end: content;
   }
 
-  ._ca {
+  ._da {
     font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._de {
+  ._ee {
     font-size: .875rem;
   }
 
-  ._eb {
+  ._fb {
     font-variation-settings: "wght" 400;
     font-synthesis-weight: none;
     font-weight: 400;
   }
 
-  ._fb {
+  ._gb {
     line-height: 1.5;
   }
 
@@ -318,21 +318,21 @@
 }
 
 @layer _.b {
-  ._e-1x99dlod:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._f-1x99dlod:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-variation-settings: "wght" 700;
     font-synthesis-weight: none;
     font-weight: 700;
   }
 
-  ._f-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._g-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     line-height: 1.5;
   }
 
-  ._c-enzrfpb:lang(ar) {
+  ._d-enzrfpb:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._f-1x99dloc:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._g-1x99dloc:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     line-height: 1.7;
   }
 }
@@ -348,44 +348,44 @@
 }
 
 @layer _.c {
-  ._c-enzwzjc:lang(he) {
+  ._d-enzwzjc:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  ._c-enzykdd:lang(ja) {
+  ._d-enzykdd:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  ._c-enzzrge:lang(ko) {
+  ._d-enzzrge:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  ._c-eo0c6sf:lang(zh) {
+  ._d-eo0c6sf:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  ._c-1uotwbwg:lang(zh-hant) {
+  ._d-1uotwbwg:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  ._c-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._d-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }
 
 @layer _.b.b {
   @media not ((hover: hover) and (pointer: fine)) {
-    ._dbf {
+    ._ebf {
       font-size: 1.0625rem;
     }
   }

package/dist/InlineAlert.mjs

@@ -47,27 +47,27 @@ function $parcel$interopDefault(a) {
 const $fc2cf6b397804b9c$export$c0de4eca0a8bf011 = /*#__PURE__*/ (0, $7sfGs$createContext)(null);
 const $fc2cf6b397804b9c$var$inlineAlert = function anonymous(props, overrides) {
     let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
     rules += matches.join('');
-    let $U = false;
-    for (let p of matches)if (/^\s*U/.test(p)) $U = true;
-    if (props.isFocusVisible) rules += ' _Lb';
-    else rules += ' _La';
+    let $V = false;
+    for (let p of matches)if (/^\s*V/.test(p)) $V = true;
+    if (props.isFocusVisible) rules += ' _Mb';
+    else rules += ' _Ma';
     rules += ' da_____M';
     rules += ' dx';
-    rules += ' _Nc';
-    rules += ' _M-3t1z';
-    rules += ' _Zb';
-    if (!$U) rules += ' Uc';
-    rules += ' __na';
+    rules += ' _Oc';
+    rules += ' _N-3t1z';
+    rules += ' _0b';
+    if (!$V) rules += ' Vc';
+    rules += ' __oa';
     rules += ' Eh';
     rules += ' Fh';
     rules += ' Ch';
     rules += ' Dh';
-    rules += ' _vd';
     rules += ' _wd';
     rules += ' _xd';
     rules += ' _yd';
+    rules += ' _zd';
     rules += ' wa';
     rules += ' uc';
     rules += ' vc';
@@ -123,10 +123,10 @@ const $fc2cf6b397804b9c$var$inlineAlert = function anonymous(props, overrides) {
 };
 const $fc2cf6b397804b9c$var$icon = function anonymous(props) {
     let rules = " .";
-    rules += ' __a-ykjmzy';
     rules += ' __b-ykjmzy';
     rules += ' __c-ykjmzy';
     rules += ' __d-ykjmzy';
+    rules += ' __e-ykjmzy';
     if (props.fillStyle === "boldFill") {
         if (props.variant === "notice") rules += ' -rwx0fg_e-z';
         else rules += ' -rwx0fg_e-A';
@@ -145,7 +145,7 @@ const $fc2cf6b397804b9c$var$icon = function anonymous(props) {
     }
     return rules;
 };
-const $fc2cf6b397804b9c$var$grid = " . _Zf jh __h-u2tns7 __i-ld1isw lb __j-11zp5n8";
+const $fc2cf6b397804b9c$var$grid = " . _0f jh __i-u2tns7 __j-ld1isw lb __k-11zp5n8";
 let $fc2cf6b397804b9c$var$ICONS = {
     informative: (0, $4c8f17dac3ecefd9$export$2e2bcd8739ae039),
     positive: (0, $22a7d72fc05e138d$export$2e2bcd8739ae039),
@@ -156,24 +156,24 @@ let $fc2cf6b397804b9c$var$ICONS = {
 const $fc2cf6b397804b9c$var$heading = function anonymous(props) {
     let rules = " .";
     rules += ' Aa';
-    rules += ' __a-go5hed';
     rules += ' __b-go5hed';
     rules += ' __c-go5hed';
     rules += ' __d-go5hed';
-    rules += ' _c-bc1l9oh';
-    rules += ' _c-1uotwbwg';
-    rules += ' _c-eo0c6sf';
-    rules += ' _c-enzzrge';
-    rules += ' _c-enzykdd';
-    rules += ' _c-enzwzjc';
-    rules += ' _c-enzrfpb';
-    rules += ' _ca';
-    rules += ' _dbf';
-    rules += ' _de';
-    rules += ' _e-1x99dlod';
-    rules += ' _ed';
-    rules += ' _f-1x99dlob';
-    rules += ' _fa';
+    rules += ' __e-go5hed';
+    rules += ' _d-bc1l9oh';
+    rules += ' _d-1uotwbwg';
+    rules += ' _d-eo0c6sf';
+    rules += ' _d-enzzrge';
+    rules += ' _d-enzykdd';
+    rules += ' _d-enzwzjc';
+    rules += ' _d-enzrfpb';
+    rules += ' _da';
+    rules += ' _ebf';
+    rules += ' _ee';
+    rules += ' _f-1x99dlod';
+    rules += ' _fd';
+    rules += ' _g-1x99dlob';
+    rules += ' _ga';
     if (props.fillStyle === "boldFill") {
         if (props.variant === "notice") rules += ' ab';
         else rules += ' ac';
@@ -182,23 +182,23 @@ const $fc2cf6b397804b9c$var$heading = function anonymous(props) {
 };
 const $fc2cf6b397804b9c$var$content = function anonymous(props) {
     let rules = " .";
-    rules += ' __a-1mod4sg';
     rules += ' __b-1mod4sg';
     rules += ' __c-1mod4sg';
     rules += ' __d-1mod4sg';
-    rules += ' _c-bc1l9oh';
-    rules += ' _c-1uotwbwg';
-    rules += ' _c-eo0c6sf';
-    rules += ' _c-enzzrge';
-    rules += ' _c-enzykdd';
-    rules += ' _c-enzwzjc';
-    rules += ' _c-enzrfpb';
-    rules += ' _ca';
-    rules += ' _dbf';
-    rules += ' _de';
-    rules += ' _eb';
-    rules += ' _f-1x99dloc';
+    rules += ' __e-1mod4sg';
+    rules += ' _d-bc1l9oh';
+    rules += ' _d-1uotwbwg';
+    rules += ' _d-eo0c6sf';
+    rules += ' _d-enzzrge';
+    rules += ' _d-enzykdd';
+    rules += ' _d-enzwzjc';
+    rules += ' _d-enzrfpb';
+    rules += ' _da';
+    rules += ' _ebf';
+    rules += ' _ee';
     rules += ' _fb';
+    rules += ' _g-1x99dloc';
+    rules += ' _gb';
     if (props.fillStyle === "boldFill") {
         if (props.variant === "notice") rules += ' ab';
         else rules += ' ac';