@rescui/card 0.16.3 → 0.16.4-floating-ui-migration-ee8cf10db.9.sha-ee8cf10db

package/lib/card.p.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"themeLight":"_themeLight_qjyscs_8","themeDark":"_themeDark_qjyscs_11","padding0":"_padding0_qjyscs_15","padding16":"_padding16_qjyscs_18","padding24":"_padding24_qjyscs_21","padding32":"_padding32_qjyscs_24","borderRadius0":"_borderRadius0_qjyscs_28","borderRadius8":"_borderRadius8_qjyscs_31","borderRadius16":"_borderRadius16_qjyscs_34","borderRadius24":"_borderRadius24_qjyscs_37","modeClassic":"_modeClassic_qjyscs_41","modeRock":"_modeRock_qjyscs_51","transparentBorderTrue":"_transparentBorderTrue_qjyscs_60","transparentBorderFalse":"_transparentBorderFalse_qjyscs_63","clickable":"_clickable_qjyscs_111","disableBorder":"_disableBorder_qjyscs_70","hasGlowHover":"_hasGlowHover_qjyscs_88","legacyBorder":"_legacyBorder_qjyscs_133","tile":"_tile_qjyscs_247","fixedImageHeight":"_fixedImageHeight_qjyscs_323","fullImageWidth":"_fullImageWidth_qjyscs_332","cardImage":"_cardImage_qjyscs_336","cardImageImg":"_cardImageImg_qjyscs_344","cardImageDiv":"_cardImageDiv_qjyscs_369","innerLink":"_innerLink_qjyscs_394","innerButton":"_innerButton_qjyscs_406"};
+var styles = {"themeLight":"_themeLight_x4cnbm_8","themeDark":"_themeDark_x4cnbm_11","padding0":"_padding0_x4cnbm_15","padding16":"_padding16_x4cnbm_18","padding24":"_padding24_x4cnbm_21","padding32":"_padding32_x4cnbm_24","borderRadius0":"_borderRadius0_x4cnbm_28","borderRadius8":"_borderRadius8_x4cnbm_31","borderRadius16":"_borderRadius16_x4cnbm_34","borderRadius24":"_borderRadius24_x4cnbm_37","modeClassic":"_modeClassic_x4cnbm_41","modeRock":"_modeRock_x4cnbm_51","transparentBorderTrue":"_transparentBorderTrue_x4cnbm_60","transparentBorderFalse":"_transparentBorderFalse_x4cnbm_63","clickable":"_clickable_x4cnbm_111","disableBorder":"_disableBorder_x4cnbm_70","hasGlowHover":"_hasGlowHover_x4cnbm_88","legacyBorder":"_legacyBorder_x4cnbm_133","tile":"_tile_x4cnbm_247","fixedImageHeight":"_fixedImageHeight_x4cnbm_323","fullImageWidth":"_fullImageWidth_x4cnbm_332","cardImage":"_cardImage_x4cnbm_336","cardImageImg":"_cardImageImg_x4cnbm_344","cardImageDiv":"_cardImageDiv_x4cnbm_369","innerLink":"_innerLink_x4cnbm_394","innerButton":"_innerButton_x4cnbm_406"};
 
 export { styles as default };

package/lib/index.css

@@ -4,40 +4,40 @@
   initial-value:0;
 }
 
-._themeLight_qjyscs_8{
+._themeLight_x4cnbm_8{
   --rs-theme-dark:0;
 }
-._themeDark_qjyscs_11{
+._themeDark_x4cnbm_11{
   --rs-theme-dark:1;
 }
 
-._padding0_qjyscs_15{
+._padding0_x4cnbm_15{
   --_rs-card-padding:0px;
 }
-._padding16_qjyscs_18{
+._padding16_x4cnbm_18{
   --_rs-card-padding:16px;
 }
-._padding24_qjyscs_21{
+._padding24_x4cnbm_21{
   --_rs-card-padding:24px;
 }
-._padding32_qjyscs_24{
+._padding32_x4cnbm_24{
   --_rs-card-padding:32px;
 }
 
-._borderRadius0_qjyscs_28{
+._borderRadius0_x4cnbm_28{
   --_rs-card-border-radius:0px;
 }
-._borderRadius8_qjyscs_31{
+._borderRadius8_x4cnbm_31{
   --_rs-card-border-radius:8px;
 }
-._borderRadius16_qjyscs_34{
+._borderRadius16_x4cnbm_34{
   --_rs-card-border-radius:16px;
 }
-._borderRadius24_qjyscs_37{
+._borderRadius24_x4cnbm_37{
   --_rs-card-border-radius:24px;
 }
 
-._modeClassic_qjyscs_41{
+._modeClassic_x4cnbm_41{
   --_rs-card-states-theme-flip:0;
 
   --_rs-card-hover-focus-active-border-color:rgb(
@@ -47,7 +47,7 @@
   --_rs-card-hover-focus-background:rgb(calc(255 - 207 * var(--_rs-theme-dark-coefficient, 0)), calc(255 - 207 * var(--_rs-theme-dark-coefficient, 0)), calc(255 - 204 * var(--_rs-theme-dark-coefficient, 0)));
   --_rs-card-active-background:rgb(calc(255 - 207 * var(--_rs-theme-dark-coefficient, 0)), calc(255 - 207 * var(--_rs-theme-dark-coefficient, 0)), calc(255 - 204 * var(--_rs-theme-dark-coefficient, 0)));
 }
-._modeRock_qjyscs_51{
+._modeRock_x4cnbm_51{
   --_rs-card-states-theme-flip:1;
 
   --_rs-card-hover-focus-active-border-color:transparent;
@@ -56,14 +56,14 @@
   --_rs-card-active-background:rgb(calc(244 - 196 * var(--_rs-theme-dark-coefficient, 0)), calc(244 - 196 * var(--_rs-theme-dark-coefficient, 0)), calc(244 - 193 * var(--_rs-theme-dark-coefficient, 0)));
 }
 
-._transparentBorderTrue_qjyscs_60{
+._transparentBorderTrue_x4cnbm_60{
   --_rs-card-grey-border-color:rgba(calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(28 + 227 * var(--_rs-theme-dark-coefficient, 0)), 0.2);
 }
-._transparentBorderFalse_qjyscs_63{
+._transparentBorderFalse_x4cnbm_63{
   --_rs-card-grey-border-color:rgb(calc(209 - 115 * var(--_rs-theme-dark-coefficient, 0)), calc(209 - 115 * var(--_rs-theme-dark-coefficient, 0)), calc(210 - 114 * var(--_rs-theme-dark-coefficient, 0)));
 }
 
-._clickable_qjyscs_111{
+._clickable_x4cnbm_111{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -74,11 +74,11 @@
   --_rs-card-native-static-border-color:var(--_rs-card-grey-border-color);
 }
 
-._clickable_qjyscs_111._disableBorder_qjyscs_70{
+._clickable_x4cnbm_111._disableBorder_x4cnbm_70{
     --_rs-card-native-static-border-color:transparent;
   }
 
-._clickable_qjyscs_111 {
+._clickable_x4cnbm_111 {
   --_rs-card-native-hover-border-color:var(
     --_rs-card-hover-focus-active-border-color
   );
@@ -88,26 +88,26 @@
   );
 }
 
-._clickable_qjyscs_111:is([data-extra-hover-effect], ._hasGlowHover_qjyscs_88){
+._clickable_x4cnbm_111:is([data-extra-hover-effect], ._hasGlowHover_x4cnbm_88){
     --_rs-card-native-hover-border-color:var(--_rs-card-grey-border-color);
   }
 
-._clickable_qjyscs_111:is([data-extra-hover-effect], ._hasGlowHover_qjyscs_88)[data-extra-active-effect]{
+._clickable_x4cnbm_111:is([data-extra-hover-effect], ._hasGlowHover_x4cnbm_88)[data-extra-active-effect]{
       --_rs-card-native-active-border-width:1px;
       --_rs-card-native-active-border-color:var(--_rs-card-grey-border-color);
     }
 
-._clickable_qjyscs_111:is([data-extra-hover-effect], ._hasGlowHover_qjyscs_88)._disableBorder_qjyscs_70{
+._clickable_x4cnbm_111:is([data-extra-hover-effect], ._hasGlowHover_x4cnbm_88)._disableBorder_x4cnbm_70{
       --_rs-card-native-hover-border-color:transparent;
 
       --_rs-card-native-active-border-width:1px;
     }
 
-._clickable_qjyscs_111:is([data-extra-hover-effect], ._hasGlowHover_qjyscs_88)._disableBorder_qjyscs_70[data-extra-active-effect]{
+._clickable_x4cnbm_111:is([data-extra-hover-effect], ._hasGlowHover_x4cnbm_88)._disableBorder_x4cnbm_70[data-extra-active-effect]{
         --_rs-card-native-active-border-color:transparent;
       }
 
-._clickable_qjyscs_111 {
+._clickable_x4cnbm_111 {
 
   --_rs-card-env-background:var(
     --rs-card-static-background,
@@ -128,12 +128,12 @@
   --_rs-card-css-border:none;
 }
 
-._clickable_qjyscs_111._legacyBorder_qjyscs_133{
+._clickable_x4cnbm_111._legacyBorder_x4cnbm_133{
     --_rs-card-css-padding:calc(var(--_rs-card-padding-final) - var(--_rs-card-env-border-width));
     --_rs-card-css-border:var(--_rs-card-env-border-width) solid var(--_rs-card-env-border-color);
   }
 
-._clickable_qjyscs_111 {
+._clickable_x4cnbm_111 {
   --rs-out-card-padding:var(--_rs-card-padding-final);
   --rs-out-card-border-radius:var(--_rs-card-border-radius-final);
   --rs-out-card-border-width:var(--_rs-card-env-border-width);
@@ -163,7 +163,7 @@
           appearance:none;
 }
 
-._clickable_qjyscs_111:not(._legacyBorder_qjyscs_133)::after{
+._clickable_x4cnbm_111:not(._legacyBorder_x4cnbm_133)::after{
     position:absolute;
     top:0;
     right:0;
@@ -182,13 +182,13 @@
     transition:box-shadow 100ms var(--rs-transition-function, ease);
   }
 
-._clickable_qjyscs_111,
-  ._clickable_qjyscs_111:hover{
+._clickable_x4cnbm_111,
+  ._clickable_x4cnbm_111:hover{
     text-decoration:none;
   }
 
 @media (hover: hover){
-    ._clickable_qjyscs_111:hover{
+    ._clickable_x4cnbm_111:hover{
       --rs-theme-flip:var(--_rs-card-states-theme-flip);
 
       --_rs-card-env-background:var(
@@ -203,7 +203,7 @@
     }
   }
 
-._clickable_qjyscs_111:focus-visible{
+._clickable_x4cnbm_111:focus-visible{
     --rs-theme-flip:var(--_rs-card-states-theme-flip);
 
     --_rs-card-env-background:var(
@@ -218,7 +218,7 @@
     outline:none;
   }
 
-._clickable_qjyscs_111:active{
+._clickable_x4cnbm_111:active{
     --rs-theme-flip:var(--_rs-card-states-theme-flip);
 
     --_rs-card-env-background:var(
@@ -235,7 +235,7 @@
     );
   }
 
-._tile_qjyscs_247{
+._tile_x4cnbm_247{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -246,11 +246,11 @@
   --_rs-card-native-static-border-color:var(--_rs-card-grey-border-color);
 }
 
-._tile_qjyscs_247._disableBorder_qjyscs_70{
+._tile_x4cnbm_247._disableBorder_x4cnbm_70{
     --_rs-card-native-static-border-color:transparent;
   }
 
-._tile_qjyscs_247 {
+._tile_x4cnbm_247 {
 
   --_rs-card-env-background:var(
     --rs-card-static-background,
@@ -271,12 +271,12 @@
   --_rs-card-css-border:none;
 }
 
-._tile_qjyscs_247._legacyBorder_qjyscs_133{
+._tile_x4cnbm_247._legacyBorder_x4cnbm_133{
     --_rs-card-css-padding:calc(var(--_rs-card-padding-final) - var(--_rs-card-env-border-width));
     --_rs-card-css-border:var(--_rs-card-env-border-width) solid var(--_rs-card-env-border-color);
   }
 
-._tile_qjyscs_247 {
+._tile_x4cnbm_247 {
   --rs-out-card-padding:var(--_rs-card-padding-final);
   --rs-out-card-border-radius:var(--_rs-card-border-radius-final);
   --rs-out-card-border-width:var(--_rs-card-env-border-width);
@@ -306,7 +306,7 @@
           appearance:none;
 }
 
-._tile_qjyscs_247:not(._legacyBorder_qjyscs_133)::after{
+._tile_x4cnbm_247:not(._legacyBorder_x4cnbm_133)::after{
     position:absolute;
     top:0;
     right:0;
@@ -323,20 +323,20 @@
     box-shadow:inset 0 0 0 var(--_rs-card-env-border-width) var(--_rs-card-env-border-color);
   }
 
-._fixedImageHeight_qjyscs_323{
+._fixedImageHeight_x4cnbm_323{
   height:calc(188px + var(--_rs-card-padding-final));
   max-height:calc(188px + var(--_rs-card-padding-final));
 }
 
-._fixedImageHeight_qjyscs_323 img{
+._fixedImageHeight_x4cnbm_323 img{
     height:100%;
   }
 
-._fullImageWidth_qjyscs_332 img{
+._fullImageWidth_x4cnbm_332 img{
   width:100%;
 }
 
-._cardImage_qjyscs_336{
+._cardImage_x4cnbm_336{
   position:relative;
 
   overflow:hidden;
@@ -344,7 +344,7 @@
   box-sizing:border-box;
 }
 
-._cardImageImg_qjyscs_344{
+._cardImageImg_x4cnbm_344{
   top:calc(-1 * var(--_rs-card-padding-final));
   left:calc(-1 * var(--_rs-card-padding-final));
 
@@ -355,21 +355,21 @@
   width:calc(100% + 2 * var(--_rs-card-padding-final));
 }
 
-._cardImageImg_qjyscs_344 img{
+._cardImageImg_x4cnbm_344 img{
     max-width:100%;
     max-height:100%;
   }
 
-._clickable_qjyscs_111 ._cardImageImg_qjyscs_344 img{
+._clickable_x4cnbm_111 ._cardImageImg_x4cnbm_344 img{
       transition:transform 0.2s var(--rs-transition-function, ease);
       transform:scale(1);
     }
 
-._clickable_qjyscs_111:hover ._cardImageImg_qjyscs_344 img{
+._clickable_x4cnbm_111:hover ._cardImageImg_x4cnbm_344 img{
       transform:scale(1.1);
     }
 
-._cardImageDiv_qjyscs_369{
+._cardImageDiv_x4cnbm_369{
   top:calc(-1 * var(--_rs-card-padding-final));
   left:calc(-1 * var(--_rs-card-padding-final));
 
@@ -386,16 +386,16 @@
   background-size:100% 100%;
 }
 
-._clickable_qjyscs_111 ._cardImageDiv_qjyscs_369{
+._clickable_x4cnbm_111 ._cardImageDiv_x4cnbm_369{
     transition:background-size 0.2s var(--rs-transition-function, ease);
   }
 
-._clickable_qjyscs_111:hover ._cardImageDiv_qjyscs_369{
+._clickable_x4cnbm_111:hover ._cardImageDiv_x4cnbm_369{
     background-size:110% 110%;
   }
 
 @media (hover: hover){
-    ._clickable_qjyscs_111:hover ._innerLink_qjyscs_394{
+    ._clickable_x4cnbm_111:hover ._innerLink_x4cnbm_394{
       --_rs-typography-link-padding-bottom-from-state-hover:calc(1px - var(--_rs-typography-link-hover-underline-width-difference-wf));
       --_rs-typography-link-border-bottom-width-from-state-hover:calc(var(--_rs-typography-link-border-bottom-width-wf) + var(--_rs-typography-link-hover-underline-width-difference-wf));
       --_rs-typography-link-border-bottom-color-from-state-hover:var(
@@ -417,14 +417,14 @@
     }
   }
 
-._clickable_qjyscs_111:focus-visible ._innerLink_qjyscs_394{
+._clickable_x4cnbm_111:focus-visible ._innerLink_x4cnbm_394{
     --_rs-typography-link-box-shadow-from-state-focus-visible:var(
       --_rs-color-primary
     ) 0 0 0 4px;
   }
 
 @media (hover: hover){
-    ._clickable_qjyscs_111:hover ._innerButton_qjyscs_406{
+    ._clickable_x4cnbm_111:hover ._innerButton_x4cnbm_406{
       --_rs-button-border-inner-color:rgba(
     calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(28 + 227 * var(--_rs-theme-dark-coefficient, 0)),
     calc(.3 + .1 * var(--_rs-theme-dark-coefficient, 0))
@@ -433,7 +433,7 @@
     }
   }
 
-._clickable_qjyscs_111:active ._innerButton_qjyscs_406{
+._clickable_x4cnbm_111:active ._innerButton_x4cnbm_406{
     --_rs-button-border-inner-width:2px;
     --_rs-button-border-inner-color:rgb(calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(28 + 227 * var(--_rs-theme-dark-coefficient, 0)));
     --_rs-button-background-from-state-active:var(
@@ -441,13 +441,13 @@
   );
   }
 
-._clickable_qjyscs_111:focus-visible ._innerButton_qjyscs_406{
+._clickable_x4cnbm_111:focus-visible ._innerButton_x4cnbm_406{
     --_rs-button-box-shadow-from-state-focus-visible:var(
       --_rs-color-primary-t-dim
     ) 0 0 0 4px;
   }
 
-._clickable_qjyscs_111:active:focus-visible:not(:hover) ._innerButton_qjyscs_406{
+._clickable_x4cnbm_111:active:focus-visible:not(:hover) ._innerButton_x4cnbm_406{
     --_rs-button-background-from-state-active-focus-visible-no-hover:var(
     --_rs-button-active-focus-visible-no-hover-background
   );

package/llm/cards.md

@@ -55,7 +55,7 @@ A ClassName Helper for creating cards with simple styles and some customizations
 - Set border on the pseudo-element to avoid scaling bug when changing `border-width`
 - [cardCn implementation](/components/card-cn/#default-clickable-card)
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 
@@ -141,7 +141,7 @@ render(<Demo />);
 - Set border on the pseudo-element to avoid scaling bug when changing `border-width`
 - [cardCn implementation](/components/card-cn/#theme-dark)
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 
@@ -234,7 +234,7 @@ render(<Demo />);
 - States change background color
 - [cardCn implementation](/components/card-cn/css/#borderless-card)
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 
@@ -311,7 +311,7 @@ render(<Demo />);
 - Hover and active states are covered by `glow-hover`
 - [cardCn implementation](/components/card-cn/#with-glow-hover)
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 import { useGlowHover } from '@rescui/use-glow-hover';
@@ -388,7 +388,7 @@ render(<Demo />);
 - Use only one action element inside
 - [cardCn implementation](/components/card-cn/#with-action-button-inside)
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 import { Button } from '@rescui/button';
@@ -508,7 +508,7 @@ render(<Demo />);
 - Use only one action element inside
 - [cardCn implementation](/components/card-cn/#with-action-link-inside)
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 
@@ -621,7 +621,7 @@ render(<Demo />);
 - Change background-color to contrast value on hover/active
 - Use `--rs-theme-flip` css-variable to reverse theme for all RescUI components on hover/active
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 
@@ -708,7 +708,7 @@ render(<Demo />);
 - Each card takes up two rows and applies subgrid to its children
 - Cards text content lays on the second row, aligning with the content in the sibling cards
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 
@@ -848,7 +848,7 @@ render(<Demo />);
 - Text is center aligned
 - Card's width is constant
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 import apacheDerbyLogoSvg from '@/parts/cards/db-logos/apache-derby-logo.svg';
@@ -983,7 +983,7 @@ render(<Demo />);
 - Use pseudo-element for border to show it above the content
 - [cardCn implementation](/components/card-cn/#with-image-via-img-tag)
 
-```tsx
+```jsx
 import { textCn } from '@rescui/typography';
 import { Button } from '@rescui/button';
 import card1Image from '@/parts/cards/newsletter1.webp';
@@ -1164,7 +1164,7 @@ render(<Demo />);
 - Has no dynamic states - its a static `div` element
 - [cardCn implementation](/components/card-cn/#default-card)
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 
@@ -1214,7 +1214,7 @@ render(<Demo />);
 - Text is center aligned
 - Tiles width is constant
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 import apacheDerbyLogoSvg from '@/parts/cards/db-logos/apache-derby-logo.svg';
@@ -1307,7 +1307,7 @@ render(<Demo />);
 - With background
 - Static element without states
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 
@@ -1354,7 +1354,7 @@ render(<Demo />);
 - Content is center aligned
 - Large image below
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 import tileImage from '@/parts/cards/keymaps.webp';
@@ -1433,7 +1433,7 @@ render(<Demo />);
 - Subscribe forms are aligned with sibling tiles
 - Use pseudo-element for border to show it above the content
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 import { Input } from '@rescui/input';
@@ -1580,7 +1580,7 @@ render(<Demo />);
 - Grid areas are forwarded to CSS using `--tile-id` CSS variable
 - Flat tiles layout structure allows for easy adaptive changes compared to the two-column flex layout
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 
@@ -1733,7 +1733,7 @@ render(<Demo />);
 - Actions in the footer are nailed to the tile bottom
 - Tiles may contain `Collapse` inside
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 import { StickyTag } from '@rescui/tag';
@@ -2198,7 +2198,7 @@ render(<Demo />);
 - Change primary colors using css variables
 - Use pseudo-element for border to show it above content
 
-```tsx
+```jsx
 import { useState } from 'react';
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
@@ -2628,7 +2628,7 @@ render(<Demo />);
 - Control autoplay animation duration with `--carousel-vertical-control-autoplay-duration` css variable
 - With react state management
 
-```tsx
+```jsx
 import { useState } from 'react';
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
@@ -2826,7 +2826,7 @@ render(<Demo />);
 - Control autoplay animation duration with `--carousel-horizontal-control-autoplay-duration` css variable
 - With react state management
 
-```tsx
+```jsx
 import { useState } from 'react';
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
@@ -3446,7 +3446,7 @@ This approach aims to stretch the image to cover the edges of the tile. Using CS
 
 To display the border above stretched content, use a pseudo-element instead of a simple `box-shadow`. Also, do not use a transparent color for the border — use a solid one instead.
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 import tileImage from '@/parts/cards/newsletter1.webp';
@@ -3534,7 +3534,7 @@ One way to achieve this is by using flexbox with `flex-direction: column`. Howev
 
 The preferred approach for more complex layouts is to use [CSS Grid’s subgrid feature](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid). Keep in mind this approach has certain [browser support limitations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid#browser_compatibility). Although subgrid layouts remain functional in unsupported browsers, you should carefully test their regression and viability in older browsers.
 
-```tsx
+```jsx
 import { textCn } from '@rescui/typography';
 
 const AlignedTile = ({ title, children }) => {

package/llm/components/card-cn.md

@@ -37,7 +37,7 @@ No additional properties are added to the default card
 - Layout styles are not provided with `cardCn`
 - [custom no-cardCn implementation](/cards/tiles/#base-example)
 
-```tsx
+```jsx
 import { cardCn } from '@rescui/card';
 import { textCn } from '@rescui/typography';
 import cn from 'classnames';
@@ -133,7 +133,7 @@ render(<MyCard />);
 - Layout styles are not provided with `cardCn`
 - [custom no-cardCn implementation](/cards/clickable/#base-example)
 
-```tsx
+```jsx
 import { cardCn } from '@rescui/card';
 import { textCn } from '@rescui/typography';
 import cn from 'classnames';
@@ -231,7 +231,7 @@ render(<MyCard />);
 - `a` tag with `href` attribute is used instead of `div` element
 - [custom no-cardCn implementation](/cards/clickable/#dark-theme)
 
-```tsx
+```jsx
 import { cardCn } from '@rescui/card';
 import { textCn } from '@rescui/typography';
 import cn from 'classnames';
@@ -337,7 +337,7 @@ render(<MyCard />);
 
 If you use [`ThemeContext`](/utils/ui-contexts/#themecontext) to manage the theme of your application, use `useCardCn` hook.
 
-```tsx
+```jsx
 import { useCardCn } from '@rescui/card';
 import { useTextStyles } from '@rescui/typography';
 import { ThemeProvider } from '@rescui/ui-contexts';
@@ -458,7 +458,7 @@ render(
 - **Avoid** using `rock` mode for non-clickable cards
 - [custom no-cardCn implementation](/cards/clickable/#rock-mode)
 
-```tsx
+```jsx
 import { cardCn } from '@rescui/card';
 import { textCn } from '@rescui/typography';
 import cn from 'classnames';
@@ -572,7 +572,7 @@ render(<MyCard />);
 - **Avoid** using on cards with more than one action as this is a bad UX pattern. For example, avoid 'glow-hover' in a `Buy` card with a button and link
 - [custom no-cardCn implementation](/cards/clickable/#with-glow-hover)
 
-```tsx
+```jsx
 import { cardCn } from '@rescui/card';
 import { textCn } from '@rescui/typography';
 import cn from 'classnames';
@@ -692,7 +692,7 @@ render(<MyCard />);
 - **Avoid** using if you need text on images. Instead, use card image with DIV solution
 - [custom no-cardCn implementation](/cards/clickable/#newsletter-cards)
 
-```tsx
+```jsx
 import { cardCn, cardImageCn } from '@rescui/card';
 import { textCn } from '@rescui/typography';
 import cn from 'classnames';
@@ -745,7 +745,7 @@ render(<MyCard />);
 - Can be used only with `classic` mode now. Use it with `rock` mode at your own risk
 - **Avoid** using with GlowHover effect
 
-```tsx
+```jsx
 import { cardCn, cardImageCn } from '@rescui/card';
 import { textCn } from '@rescui/typography';
 import cn from 'classnames';
@@ -797,7 +797,7 @@ render(<MyCard />);
 
 Use `disableFixedHeight: true` option if an aspect ratio of the image is important
 
-```tsx
+```jsx
 import { cardCn, cardImageCn } from '@rescui/card';
 import { textCn } from '@rescui/typography';
 import cn from 'classnames';
@@ -843,7 +843,7 @@ render(<MyCard />);
 - image takes a fixed percentage of the card width
 - transforms into a vertical card on `--sm`
 
-```tsx
+```jsx
 import { cardCn } from '@rescui/card';
 import { textCn } from '@rescui/typography';
 import cn from 'classnames';
@@ -928,7 +928,7 @@ render(<MyCard />);
 - Default border radius value is `8`
 - If you wish to substitute border-radius property in your project, use `--rs-card-border-radius` css-var
 
-```tsx
+```jsx
 import { cardCn } from '@rescui/card';
 import { textCn } from '@rescui/typography';
 import cn from 'classnames';
@@ -1007,7 +1007,7 @@ render(<MyCards />);
 - Card can use the following padding values with props: `0` (set the correct padding manually), `16`, `24`, and `32`
 - Default border radius value is `24`
 
-```tsx
+```jsx
 import { cardCn } from '@rescui/card';
 import { textCn } from '@rescui/typography';
 import cn from 'classnames';
@@ -1076,7 +1076,7 @@ render(<MyCard />);
 - For plugin card layout **avoid** using plugin names longer than 2 lines
 - The layout in this example hides the rest of the name with `line-clamp` css property
 
-```tsx
+```jsx
 import { cardCn } from '@rescui/card';
 import { textCn } from '@rescui/typography';
 import cn from 'classnames';
@@ -1194,7 +1194,7 @@ When you need to forward card states to the `Button` component inside, you can u
 - Avoid using more than one dynamic element cards like this
 - [Custom no-cardCn implementation](/cards/clickable/#with-action-button-inside)
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 import { Button } from '@rescui/button';
@@ -1235,7 +1235,7 @@ When you need to forward card states to the `rs-link` inside, you can use `cardL
 - Avoid using more than one dynamic element cards like this
 - [Custom no-cardCn implementation](/cards/clickable/#with-action-link-inside)
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 import { cardCn, cardLinkCn } from '@rescui/card';
@@ -1310,7 +1310,7 @@ Remember to customize variables for all states when customizing clickable card
 
 [Custom no-cardCn implementation](/cards/clickable/#borderless-example)
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 import { cardCn } from '@rescui/card';
@@ -1351,7 +1351,7 @@ render(<Demo />);
 
 #### Colorful border
 
-```tsx
+```jsx
 import cn from 'classnames';
 import { textCn } from '@rescui/typography';
 import { cardCn } from '@rescui/card';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/card",
-  "version": "0.16.3",
+  "version": "0.16.4-floating-ui-migration-ee8cf10db.9.sha-ee8cf10db",
   "description": "",
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -24,16 +24,16 @@
   },
   "devDependencies": {
     "@jetbrains/logos": "^1.4.16",
-    "@rescui/button": "^0.27.2",
-    "@rescui/colors": "^0.3.6",
-    "@rescui/postcss-preset-library": "^0.2.4",
-    "@rescui/scripts": "^0.6.0",
-    "@rescui/typography": "^0.30.2",
-    "@rescui/visual-regression": "^0.1.5"
+    "@rescui/button": "0.27.3-floating-ui-migration-ee8cf10db.9.sha-ee8cf10db",
+    "@rescui/colors": "0.3.7-floating-ui-migration-ee8cf10db.12.sha-ee8cf10db",
+    "@rescui/postcss-preset-library": "0.2.4",
+    "@rescui/scripts": "0.6.0",
+    "@rescui/typography": "0.30.3-floating-ui-migration-ee8cf10db.9.sha-ee8cf10db",
+    "@rescui/visual-regression": "0.1.5"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
   "nx": {},
-  "gitHead": "5a6fe218e161f8f97ea1faf56a82b0a5dae2ab4d"
+  "gitHead": "ee8cf10dbbe12af812fa565b2325a88196088d92"
 }