@latte-macchiat-io/latte-vanilla-components 0.0.502 → 0.0.504

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.502",
+  "version": "0.0.504",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/ExpandCollapse/Item/index.tsx

@@ -9,7 +9,6 @@ import {
   collapseExpandItemOpen,
   collapseExpandItemTitle,
   collapseExpandTitleIcon,
-  collapseExpandTitleIconMinWidthVar,
 } from './styles.css';
 
 import { themeContract } from '../../../theme/contract.css';
@@ -20,7 +19,7 @@ import { Paragraph } from '../../Paragraph';
 
 export type ExpandCollapseItems = {
   title: string;
-  text: string;
+  text: React.ReactNode;
 };
 
 export type ExpandCollapseItemsProps = ExpandCollapseItems & {
@@ -48,9 +47,6 @@ export const ExpandCollapseItem = ({ title, text, icon }: ExpandCollapseItemsPro
           className={collapseExpandTitleIcon}
           iconPath={icon?.path || icons.caret}
           color={themeContract.expandCollapse.item.title.icon.color || themeContract.icon.color}
-          style={{
-            [collapseExpandTitleIconMinWidthVar]: `${icon?.size || 20}px`,
-          }}
         />
         <Heading as="h3" size="sm">
           {title}

package/src/components/ExpandCollapse/Item/styles.css.ts

@@ -1,4 +1,4 @@
-import { createVar, globalStyle, style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 import { themeContract } from '../../../theme/contract.css';
 import { generateResponsiveMedia } from '../../../utils/generateResponsiveMedia';
@@ -40,12 +40,9 @@ export const collapseExpandItemTitle = style({
   }),
 });
 
-export const collapseExpandTitleIconMinWidthVar = createVar();
-
 export const collapseExpandTitleIcon = style({
   margin: 0,
   transition: 'transform 0.3s ease-out',
-  minWidth: collapseExpandTitleIconMinWidthVar,
 
   '@media': generateResponsiveMedia({
     marginTop: themeContract.expandCollapse.item.title.icon.marginTop,

package/src/components/Icon/index.tsx

@@ -1,6 +1,6 @@
 import path from './path';
 
-import { iconRecipe } from './style.css';
+import { iconMinWidthVar, iconRecipe } from './style.css';
 
 import { themeContract } from '../../theme/contract.css';
 import { cn } from '../../utils/styleOverride';
@@ -21,7 +21,10 @@ export const Icon = ({ icon = '', className, size = 24, iconPath = '', viewBox =
       viewBox={viewBox}
       className={cn(iconRecipe, className)}
       width={typeof size === 'number' ? `${size}px` : size}
-      height={typeof size === 'number' ? `${size}px` : size}>
+      height={typeof size === 'number' ? `${size}px` : size}
+      style={{
+        [iconMinWidthVar]: typeof size === 'number' ? `${size}px` : size,
+      }}>
       <path d={d} fill={color} />
     </svg>
   );

package/src/components/Icon/style.css.ts

@@ -1,9 +1,12 @@
-import { style } from '@vanilla-extract/css';
+import { createVar, style } from '@vanilla-extract/css';
+
+export const iconMinWidthVar = createVar();
 
 export const iconRecipe = style({
   margin: '0 auto',
   display: 'inline-block',
   verticalAlign: 'middle',
+  minWidth: iconMinWidthVar,
 });
 
 export const iconPath = style({