@rescui/chip-list 0.14.2 → 0.14.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14

package/README.md

@@ -1,4 +1,4 @@
-# Tab-list and Chip-list
+# ChipList
 
 ## LLM
 

package/lib/index.css

@@ -1,19 +1,19 @@
-._light_t5wzop_8{
+._light_1m62at7_8{
   --rs-theme-dark:0;
 }
-._dark_t5wzop_11{
+._dark_1m62at7_11{
   --rs-theme-dark:1;
 }
-._alignLeft_t5wzop_15{
+._alignLeft_1m62at7_15{
   --_rs-cl-align:left;
 }
-._alignCenter_t5wzop_18{
+._alignCenter_1m62at7_18{
   --_rs-cl-align:center;
 }
-._alignRight_t5wzop_21{
+._alignRight_1m62at7_21{
   --_rs-cl-align:right;
 }
-._sizeXs_t5wzop_25{
+._sizeXs_1m62at7_25{
   --_rs-cl-chip-base-border-radius:4px;
   --_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
   --_rs-cl-chip-vertical-padding:2px;
@@ -27,7 +27,7 @@
   --_rs-cl-compact-horizontal-gap:4px;
   --_rs-cl-sparse-horizontal-gap:12px;
 }
-._sizeXs_t5wzop_25 [data-rs-internal='chip-list__chip']{
+._sizeXs_1m62at7_25 [data-rs-internal='chip-list__chip']{
     --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -62,7 +62,7 @@
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
-._sizeS_t5wzop_28{
+._sizeS_1m62at7_28{
   --_rs-cl-chip-base-border-radius:16px;
   --_rs-cl-chip-compact-border-radius:4px;
   --_rs-cl-chip-vertical-padding:6px;
@@ -76,7 +76,7 @@
   --_rs-cl-compact-horizontal-gap:6px;
   --_rs-cl-sparse-horizontal-gap:12px;
 }
-._sizeS_t5wzop_28 [data-rs-internal='chip-list__chip']{
+._sizeS_1m62at7_28 [data-rs-internal='chip-list__chip']{
     --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -111,7 +111,7 @@
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
-._sizeM_t5wzop_31{
+._sizeM_1m62at7_31{
   --_rs-cl-chip-base-border-radius:20px;
   --_rs-cl-chip-compact-border-radius:8px;
   --_rs-cl-chip-vertical-padding:8px;
@@ -125,7 +125,7 @@
   --_rs-cl-compact-horizontal-gap:6px;
   --_rs-cl-sparse-horizontal-gap:16px;
 }
-._sizeM_t5wzop_31 [data-rs-internal='chip-list__chip']{
+._sizeM_1m62at7_31 [data-rs-internal='chip-list__chip']{
     --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -164,11 +164,11 @@
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
 @media screen and (max-width: 640px){
-._sizeM_t5wzop_31 [data-rs-internal='chip-list__chip']{
+._sizeM_1m62at7_31 [data-rs-internal='chip-list__chip']{
     --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
   }
   }
-._sizeL_t5wzop_34{
+._sizeL_1m62at7_34{
   --_rs-cl-chip-base-border-radius:26px;
   --_rs-cl-chip-compact-border-radius:12px;
   --_rs-cl-chip-vertical-padding:12px;
@@ -183,11 +183,11 @@
   --_rs-cl-sparse-horizontal-gap:16px;
 }
 @media screen and (max-width: 640px){
-._sizeL_t5wzop_34{
+._sizeL_1m62at7_34{
     --_rs-cl-vertical-gap:12px;
 }
   }
-._sizeL_t5wzop_34 [data-rs-internal='chip-list__chip']{
+._sizeL_1m62at7_34 [data-rs-internal='chip-list__chip']{
     --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -226,34 +226,34 @@
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
 @media screen and (max-width: 640px){
-._sizeL_t5wzop_34 [data-rs-internal='chip-list__chip']{
+._sizeL_1m62at7_34 [data-rs-internal='chip-list__chip']{
     --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
   }
   }
-._innerOffsetL_t5wzop_38{
+._innerOffsetL_1m62at7_38{
   --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-sparse-horizontal-gap);
 }
 @media screen and (max-width: 640px){
-._innerOffsetL_t5wzop_38{
+._innerOffsetL_1m62at7_38{
     --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-base-horizontal-gap);
 }
   }
-._innerOffsetM_t5wzop_41{
+._innerOffsetM_1m62at7_41{
   --_rs-cl-horizontal-gap-from-sparse:initial;
 }
-._classic_t5wzop_45{
+._classic_1m62at7_45{
   --_rs-cl-chip-active-border-color:var(--_rs-color-primary);
   --_rs-cl-chip-selected-border-color:var(--_rs-color-primary);
   --_rs-cl-chip-hover-background:var(--_rs-color-primary-t-fog);
   --_rs-cl-chip-active-background:var(--_rs-color-primary-t-fog);
 }
-._rock_t5wzop_48{
+._rock_1m62at7_48{
   --_rs-cl-chip-active-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
   --_rs-cl-chip-selected-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
   --_rs-cl-chip-hover-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
   --_rs-cl-chip-active-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
 }
-._compact_t5wzop_52{
+._compact_1m62at7_52{
   --_rs-cl-chip-border-radius-from-compact:var(
     --_rs-cl-chip-compact-border-radius
   );
@@ -262,7 +262,7 @@
   );
   --_rs-cl-horizontal-gap-from-compact:var(--_rs-cl-compact-horizontal-gap);
 }
-._main_t5wzop_56{
+._main_1m62at7_56{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -272,7 +272,7 @@
   --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
 }
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._main_t5wzop_56{
+._main_1m62at7_56{
     --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
     --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
     --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -281,7 +281,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._main_t5wzop_56{
+._main_1m62at7_56{
     --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
     --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
     --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -289,7 +289,7 @@
     --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
 }
   }
-._main_t5wzop_56 {
+._main_1m62at7_56 {
   --_rs-cl-chip-border-radius:var(
     --_rs-cl-chip-border-radius-from-compact,
     var(--_rs-cl-chip-base-border-radius)
@@ -303,7 +303,7 @@
     var(--_rs-cl-horizontal-gap-from-sparse, var(--_rs-cl-base-horizontal-gap))
   );
 }
-._chipsContainer_t5wzop_62{
+._chipsContainer_1m62at7_62{
   position:relative;
 
   display:flex;
@@ -312,17 +312,17 @@
 
   gap:var(--_rs-cl-vertical-gap) var(--_rs-cl-horizontal-gap);
 }
-._alignIconLeft_t5wzop_72{
+._alignIconLeft_1m62at7_72{
   --_rs-cl-chip-icon-flex-direction:row;
   --_rs-cl-chip-icon-position-multiplier-left:1;
   --_rs-cl-chip-icon-position-multiplier-right:0;
 }
-._alignIconRight_t5wzop_75{
+._alignIconRight_1m62at7_75{
   --_rs-cl-chip-icon-flex-direction:row-reverse;
   --_rs-cl-chip-icon-position-multiplier-left:0;
   --_rs-cl-chip-icon-position-multiplier-right:1;
 }
-._chip_t5wzop_62{
+._chip_1m62at7_62{
   letter-spacing:var(
     --rs-text-base-letter-spacing,
     var(--_rs-typography-letter-spacing)
@@ -374,25 +374,25 @@
   -moz-osx-font-smoothing:inherit;
   -webkit-appearance:none;
 }
-._chip_t5wzop_62::-moz-focus-inner{
+._chip_1m62at7_62::-moz-focus-inner{
     padding:0;
 
     border:none;
   }
-._chip_t5wzop_62:hover,
-  ._chip_t5wzop_62:focus,
-  ._chip_t5wzop_62:active{
+._chip_1m62at7_62:hover,
+  ._chip_1m62at7_62:focus,
+  ._chip_1m62at7_62:active{
     outline:none;
 
     text-decoration:none;
   }
-._chip_t5wzop_62:focus[data-focus-method='key']{
+._chip_1m62at7_62:focus[data-focus-method='key']{
     box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
   }
-._chip_t5wzop_62:has(:focus[data-focus-method='key']){
+._chip_1m62at7_62:has(:focus[data-focus-method='key']){
     box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
   }
-._chip_t5wzop_62:focus{
+._chip_1m62at7_62:focus{
     --_rs-cl-chip-border-color:rgba(
       calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
       calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -401,7 +401,7 @@
     color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
   }
 @media (hover: hover){
-    ._chip_t5wzop_62:hover{
+    ._chip_1m62at7_62:hover{
       --_rs-cl-chip-border-color:rgba(
         calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
         calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -412,20 +412,20 @@
       background:var(--_rs-cl-chip-hover-background);
     }
   }
-._chip_t5wzop_62:active{
+._chip_1m62at7_62:active{
     --_rs-cl-chip-border-color:var(--_rs-cl-chip-active-border-color);
 
     color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
 
     background:var(--_rs-cl-chip-active-background);
   }
-._chip_t5wzop_62._selected_t5wzop_176{
+._chip_1m62at7_62._selected_1m62at7_176{
     --_rs-cl-chip-border-color:var(--_rs-cl-chip-selected-border-color);
     --_rs-cl-chip-border-width:2px;
 
     color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
   }
-._disabled_t5wzop_183 ._chip_t5wzop_62{
+._disabled_1m62at7_183 ._chip_1m62at7_62{
     --_rs-cl-chip-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
 
     pointer-events:none;
@@ -434,10 +434,10 @@
 
     background:transparent;
   }
-._disabled_t5wzop_183 ._chip_t5wzop_62._selected_t5wzop_176{
+._disabled_1m62at7_183 ._chip_1m62at7_62._selected_1m62at7_176{
       --_rs-cl-chip-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.4);
     }
-._chip_t5wzop_62::before{
+._chip_1m62at7_62::before{
     position:absolute;
     top:0;
     right:0;
@@ -454,7 +454,7 @@
 
     transition:border-color 100ms var(--rs-transition-function, ease);
   }
-._chip_t5wzop_62 ._icon_t5wzop_216{
+._chip_1m62at7_62 ._icon_1m62at7_216{
     flex:0 0 auto;
 
     width:auto;
@@ -463,7 +463,7 @@
     margin:0;
     fill:currentColor;
   }
-._hiddenInput_t5wzop_227{
+._hiddenInput_1m62at7_227{
   position:absolute;
 
   overflow:hidden;
@@ -479,7 +479,7 @@
   white-space:nowrap;
   clip-path:inset(50%);
 }
-._withoutText_t5wzop_244{
+._withoutText_1m62at7_244{
   --_rs-cl-chip-horizontal-real-padding:var(--_rs-cl-chip-icon-only-padding);
   --_rs-cl-chip-vertical-real-padding:var(--_rs-cl-chip-icon-only-padding);
 }

package/lib/parts/chip-list.p.module.css.js

@@ -1,27 +1,27 @@
 var styles = {
-  "light": "_light_t5wzop_8",
-  "dark": "_dark_t5wzop_11",
-  "alignLeft": "_alignLeft_t5wzop_15",
-  "alignCenter": "_alignCenter_t5wzop_18",
-  "alignRight": "_alignRight_t5wzop_21",
-  "sizeXs": "_sizeXs_t5wzop_25",
-  "sizeS": "_sizeS_t5wzop_28",
-  "sizeM": "_sizeM_t5wzop_31",
-  "sizeL": "_sizeL_t5wzop_34",
-  "innerOffsetL": "_innerOffsetL_t5wzop_38",
-  "innerOffsetM": "_innerOffsetM_t5wzop_41",
-  "classic": "_classic_t5wzop_45",
-  "rock": "_rock_t5wzop_48",
-  "compact": "_compact_t5wzop_52",
-  "main": "_main_t5wzop_56",
-  "chipsContainer": "_chipsContainer_t5wzop_62",
-  "alignIconLeft": "_alignIconLeft_t5wzop_72",
-  "alignIconRight": "_alignIconRight_t5wzop_75",
-  "chip": "_chip_t5wzop_62",
-  "selected": "_selected_t5wzop_176",
-  "disabled": "_disabled_t5wzop_183",
-  "icon": "_icon_t5wzop_216",
-  "hiddenInput": "_hiddenInput_t5wzop_227",
-  "withoutText": "_withoutText_t5wzop_244"
+  "light": "_light_1m62at7_8",
+  "dark": "_dark_1m62at7_11",
+  "alignLeft": "_alignLeft_1m62at7_15",
+  "alignCenter": "_alignCenter_1m62at7_18",
+  "alignRight": "_alignRight_1m62at7_21",
+  "sizeXs": "_sizeXs_1m62at7_25",
+  "sizeS": "_sizeS_1m62at7_28",
+  "sizeM": "_sizeM_1m62at7_31",
+  "sizeL": "_sizeL_1m62at7_34",
+  "innerOffsetL": "_innerOffsetL_1m62at7_38",
+  "innerOffsetM": "_innerOffsetM_1m62at7_41",
+  "classic": "_classic_1m62at7_45",
+  "rock": "_rock_1m62at7_48",
+  "compact": "_compact_1m62at7_52",
+  "main": "_main_1m62at7_56",
+  "chipsContainer": "_chipsContainer_1m62at7_62",
+  "alignIconLeft": "_alignIconLeft_1m62at7_72",
+  "alignIconRight": "_alignIconRight_1m62at7_75",
+  "chip": "_chip_1m62at7_62",
+  "selected": "_selected_1m62at7_176",
+  "disabled": "_disabled_1m62at7_183",
+  "icon": "_icon_1m62at7_216",
+  "hiddenInput": "_hiddenInput_1m62at7_227",
+  "withoutText": "_withoutText_1m62at7_244"
 };
 export { styles as default };

package/llm/components/chip-list.md

@@ -497,23 +497,27 @@ render(<Demo />);
 
 #### Demo
 
-Instead of separate classes, it may be a single class with `@media` queries inside:
+Use the controls to see the effect at different viewport widths.
 
 ```tsx
 import { ChipList, ChipListMulti, Chip } from '@rescui/chip-list';
 import { useState } from 'react';
 import cn from 'classnames';
-import { TeamOutlineIcon, WinOutlineIcon, ThumbsUpOutlineIcon } from '@rescui/icons';
+import {
+  TeamOutlineIcon,
+  WinOutlineIcon,
+  ThumbsUpOutlineIcon
+} from '@rescui/icons';
 
-const MyChipLists = ({ singleClassName, multiClassName }) => {
+const MyChipLists = () => {
   const [activeIndex, setActiveIndex] = useState(1);
   const [activeChips, setActiveChips] = useState(['second', 'third']);
   return (
-    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
+    <div>
       <ChipList
         value={activeIndex}
         onChange={v => setActiveIndex(v)}
-        className={singleClassName}
+        className="my-chip-list"
       >
         <Chip className="my-chip" icon={<TeamOutlineIcon />}>
           First
@@ -528,7 +532,7 @@ const MyChipLists = ({ singleClassName, multiClassName }) => {
       <ChipListMulti
         value={activeChips}
         onChange={v => setActiveChips(v)}
-        className={cn(multiClassName, 'rs-docs-offset-top-12')}
+        className={cn('my-chip-list-multi', 'rs-docs-offset-top-12')}
       >
         <Chip className="my-chip" icon={<TeamOutlineIcon />} value="first">
           First multi
@@ -544,72 +548,55 @@ const MyChipLists = ({ singleClassName, multiClassName }) => {
   );
 };
 
-render(
-  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-    <div>
-      <p>Default:</p>
-      <MyChipLists />
-    </div>
-    <div>
-      <p>Var1:</p>
-      <MyChipLists
-        singleClassName={`my-chip-list-var-1`}
-        multiClassName={`my-chip-list-multi-var-1`}
-      />
-    </div>
-    <div>
-      <p>Var1 & Var2 combined:</p>
-      <MyChipLists
-        singleClassName={`my-chip-list-var-1 my-chip-list-var-2`}
-        multiClassName={`my-chip-list-multi-var-1 my-chip-list-multi-var-2`}
-      />
-    </div>
-  </div>
-);
+render(<MyChipLists />);
 ```
 
 ```postcss
 @import '@rescui/chip-list/lib/public-api.p.css';
 
-.my-chip-list-var-1 {
-  @mixin rs-chip-list-size-l;
-  @mixin rs-chip-list-mode-rock;
-  @mixin rs-chip-list-align-center;
-  @mixin rs-chip-list-sparse-true;
+.my-chip-list {
+  @media (max-width: 640px) {
+    @mixin rs-chip-list-size-l;
+    @mixin rs-chip-list-mode-rock;
+    @mixin rs-chip-list-align-center;
+    @mixin rs-chip-list-sparse-true;
 
-  .my-chip {
-    @mixin rs-chip-icon-right;
+    .my-chip {
+      @mixin rs-chip-icon-right;
+    }
   }
-}
-.my-chip-list-var-2 {
-  @mixin rs-chip-list-size-s;
-  @mixin rs-chip-list-mode-classic;
-  @mixin rs-chip-list-align-right;
-  @mixin rs-chip-list-sparse-false;
-
-  .my-chip {
-    @mixin rs-chip-icon-left;
+  @media (max-width: 500px) {
+    @mixin rs-chip-list-size-s;
+    @mixin rs-chip-list-mode-classic;
+    @mixin rs-chip-list-align-right;
+    @mixin rs-chip-list-sparse-false;
+
+    .my-chip {
+      @mixin rs-chip-icon-left;
+    }
   }
 }
 
-.my-chip-list-multi-var-1 {
-  @mixin rs-chip-list-multi-size-l;
-  @mixin rs-chip-list-multi-mode-rock;
-  @mixin rs-chip-list-multi-align-center;
-  @mixin rs-chip-list-multi-sparse-true;
+.my-chip-list-multi {
+  @media (max-width: 640px) {
+    @mixin rs-chip-list-multi-size-l;
+    @mixin rs-chip-list-multi-mode-rock;
+    @mixin rs-chip-list-multi-align-center;
+    @mixin rs-chip-list-multi-sparse-true;
 
-  .my-chip {
-    @mixin rs-chip-icon-right;
+    .my-chip {
+      @mixin rs-chip-icon-right;
+    }
   }
-}
-.my-chip-list-multi-var-2 {
-  @mixin rs-chip-list-multi-size-s;
-  @mixin rs-chip-list-multi-mode-classic;
-  @mixin rs-chip-list-multi-align-right;
-  @mixin rs-chip-list-multi-sparse-false;
-
-  .my-chip {
-    @mixin rs-chip-icon-left;
+  @media (max-width: 500px) {
+    @mixin rs-chip-list-multi-size-s;
+    @mixin rs-chip-list-multi-mode-classic;
+    @mixin rs-chip-list-multi-align-right;
+    @mixin rs-chip-list-multi-sparse-false;
+
+    .my-chip {
+      @mixin rs-chip-icon-left;
+    }
   }
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/chip-list",
-  "version": "0.14.2",
+  "version": "0.14.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -22,18 +22,18 @@
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.6.0",
     "prop-types": "^15",
-    "react": ">=16.8.0 <20"
+    "react": ">=17.0.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.2",
-    "@rescui/scripts": "^0.5.2",
-    "@rescui/typography": "^0.27.2",
-    "@rescui/visual-regression": "^0.1.4"
+    "@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
+    "@rescui/scripts": "0.5.2",
+    "@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
+    "@rescui/visual-regression": "0.1.4"
   },
   "scripts": {
     "build": "rescui-scripts build && yarn run build-pcss-api",
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "d60e4f3491c7cdb9ef684d08940869914492a61b"
+  "gitHead": "dbbefd7b8e24da18262edf3baffa35039ae01af3"
 }