@latte-macchiat-io/latte-vanilla-components 0.0.501 → 0.0.503

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.501",
+  "version": "0.0.503",
   "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';
@@ -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';
@@ -49,11 +49,8 @@ export const collapseExpandTitleIcon = style({
   }),
 });
 
-export const collapseExpandTitleIconMinWidthVar = createVar();
-
 globalStyle(`${collapseExpandItemOpen} .${collapseExpandTitleIcon}`, {
   transform: 'rotate(-90deg)',
-  minWidth: collapseExpandTitleIconMinWidthVar,
 });
 
 globalStyle(`${collapseExpandItemTitle} > h3`, {

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({