@optiaxiom/react 1.7.2 → 1.7.4

package/dist/esm/packages/react/src/avatar/Avatar-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-9bay7lfX.css';
-import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-BAPEOkWv.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BST-3rtg.css';
+import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-D3wlzf68.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'k2sy8u'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{'2xs':[{fontWeight:'400',size:'2xs'},'thftbu'],xs:[{fontWeight:'400',size:'xs'},'_10zq955'],sm:[{size:'sm'},'_1o383t5'],md:[{size:'md'},'atnvwu'],lg:[{size:'lg'},'_1xu9wkt'],xl:[{size:'xl'},'_1tibngy'],'3xl':[{size:'3xl'},'g4qaax']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',flex:'none',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_11rzw05'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{'2xs':[{fontWeight:'400',size:'2xs'},'_1k1yx0v'],xs:[{fontWeight:'400',size:'xs'},'bz5s9e'],sm:[{size:'sm'},'_1du94m7'],md:[{size:'md'},'oe1txo'],lg:[{size:'lg'},'_1bfrjid'],xl:[{size:'xl'},'_174rudq'],'3xl':[{size:'3xl'},'_1m8lctf']}}});
 var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
 var icon = recipeRuntime({base:[{w:'auto'}],variants:{size:{'2xs':{h:'10'},xs:{h:'10'},sm:{h:'12'},md:{h:'12'},lg:{h:'2xs'},xl:{h:'2xs'},'3xl':{h:'sm'}}}});
 

package/dist/esm/packages/react/src/avatar/AvatarGroup-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-9bay7lfX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BST-3rtg.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['_1dmht2q',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['_1r4acos',{display:'flex'}]});
 
 export { avatarGroup };

package/dist/esm/packages/react/src/backdrop/Backdrop-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-CYiy8H7x.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-DTtOo-GO.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1lye0tn']});
+var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1l2nytg']});
 
 export { backdrop };

package/dist/esm/packages/react/src/badge/Badge-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-BU5I0dJu.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-DXvnioLg.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:[{display:'inline-flex',flex:'none',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'6',py:'2',rounded:'full'},'mj5sfh'],variants:{intent:{danger:'mh2qgy',information:'_1bgkyxd',neutral:'lphjs5',primary:'mf5yuv',success:'_13x3xje',warning:'_1aai1au'},variant:{strong:'uo777f',subtle:'sylq9i'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',flex:'none',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'6',py:'2',rounded:'full'},'_18afkty'],variants:{intent:{danger:'_1ea3pi',information:'_9bngo7',neutral:'e41mkz',primary:'_6d3srd',success:'ndsmjx',warning:'gyyrl2'},variant:{strong:'_1re1dv7',subtle:'e6ej7r'}}});
 
 export { badge };

package/dist/esm/packages/react/src/banner/Banner-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/banner/Banner.css.ts.vanilla-C2FWnf90.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/banner/Banner.css.ts.vanilla-gg066Vyh.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'12',justifyContent:'space-between',px:'24',py:'12'}],variants:{intent:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});
-var content = recipeRuntime({base:[{flex:'1',gap:'8',justifyContent:'center'},'pnxlsp']});
+var content = recipeRuntime({base:[{flex:'1',gap:'8',justifyContent:'center'},'sg58k4']});
 var icon = recipeRuntime({base:[{mt:'4'}],variants:{intent:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
 
 export { banner, content, icon };

package/dist/esm/packages/react/src/box/Box-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-SqtjiNZg.css';
-import './../../../../assets/src/box/Box.css.ts.vanilla-BfPnyKWB.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-BLJlnTfM.css';
+import './../../../../assets/src/box/Box.css.ts.vanilla-BxdYYM2I.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'rhyh6v'});
+var box = recipeRuntime({base:'_1uv58ng'});
 
 export { box };

package/dist/esm/packages/react/src/breadcrumb/Breadcrumb-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-C-uxlRXX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-MmlewttK.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var link = recipeRuntime({base:'_444n6z'});
-var list = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'_12mno5m']});
+var link = recipeRuntime({base:'aqiz27'});
+var list = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'h70pob']});
 
 export { link, list };

package/dist/esm/packages/react/src/breadcrumb/BreadcrumbNode-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/breadcrumb/BreadcrumbNode.css.ts.vanilla-Ch9R-ukK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/breadcrumb/BreadcrumbNode.css.ts.vanilla-BJMka3Bk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'f2aptp']});
+var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'_1lfxbas']});
 
 export { item };

package/dist/esm/packages/react/src/button/ButtonGroup-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-9bay7lfX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BST-3rtg.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'wmfuj2'});
+var buttonGroup = recipeRuntime({base:'dthuhp'});
 
 export { buttonGroup };

package/dist/esm/packages/react/src/button/ButtonLoadable-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-9bay7lfX.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-D1vHPpaR.css';
-import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-Dl_1xTHq.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BST-3rtg.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-CrHvhD5P.css';
+import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-D2wnYy3E.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'mqrmq1']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'_1ec334w']});
 
 export { loadable };

package/dist/esm/packages/react/src/button/ButtonRoot-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-9bay7lfX.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-D1vHPpaR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BST-3rtg.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-CrHvhD5P.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonBase = recipeRuntime({base:['_8db2zc',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'flex-start',transition:'colors'},'sy3yer'],variants:{intent:{danger:'_1ljpcew',neutral:'reqmb1',primary:'_1whcubv'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},square:{false:{},true:{}},variant:{outline:'_1gmsfd2','outline-opal':'_1m7s46z',strong:'_166ukur','strong-opal':'_1r1lzvd',subtle:'_11bjlhp'}},variantsCompounded:[{style:'_1bd9eg8',variants:{size:['sm','md'],variant:['outline-opal','strong-opal']}},{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'_1r2lgbf',variants:{size:'sm',square:false,variant:['outline','strong','subtle']}},{style:'_10wmg8m',variants:{size:'sm',square:false,variant:['outline-opal','strong-opal']}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'ptmw3m',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'gkm7if',variants:{size:'lg',square:false}}]});
-var spinner = recipeRuntime({base:[{size:'2xs'},'lqmh69']});
+var buttonBase = recipeRuntime({base:['g520ot',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'flex-start',transition:'colors'},'_1qtms06'],variants:{intent:{danger:'_1r5zbq2',neutral:'uwjh58',primary:'qw4tlz'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},square:{false:{},true:{}},variant:{outline:'zo90rd','outline-opal':'_20mvzq',strong:'imwd7t','strong-opal':'wyufob',subtle:'_1y86ng3'}},variantsCompounded:[{style:'_1uvkhkc',variants:{size:['sm','md'],variant:['outline-opal','strong-opal']}},{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'_1e6mm98',variants:{size:'sm',square:false,variant:['outline','strong','subtle']}},{style:'rl0fpe',variants:{size:'sm',square:false,variant:['outline-opal','strong-opal']}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'_1uj3uj1',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'scoweb',variants:{size:'lg',square:false}}]});
+var spinner = recipeRuntime({base:[{size:'2xs'},'jwnwnh']});
 
 export { buttonBase, spinner };

package/dist/esm/packages/react/src/calendar/Calendar-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/calendar/Calendar.css.ts.vanilla-DNTEsrJ_.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/calendar/Calendar.css.ts.vanilla-BA3tHuu3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var picker = recipeRuntime({variants:{side:{bottom:{},left:{},right:{},top:'lmy149'}}});
+var picker = recipeRuntime({variants:{side:{bottom:{},left:{},right:{},top:'cle12h'}}});
 
 export { picker };

package/dist/esm/packages/react/src/calendar/CalendarDayButton-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-D4Yfrnal.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-DytVQ9L6.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'c7iyvx'],variants:{appearance:{'default':'_1mhm05t',holiday:[{color:'fg.error'},'o58du'],range_middle:'_4ymey5',selected:[{color:'fg.white'},'_1gilf98'],weekend:[{color:'fg.tertiary'},'x35yuo']},range:{end:['tp8eun'],middle:['_54z0hr'],start:['cfrkbe']}}});
-var today = recipeRuntime({base:[{bg:'bg.accent',mx:'auto',rounded:'full'},'_1uay9ct']});
+var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'_4101hm'],variants:{appearance:{'default':'_1p9gg1a',holiday:[{color:'fg.error'},'_87l5k0'],range_middle:'mnekmu',selected:[{color:'fg.white'},'_1a7vgmx'],weekend:[{color:'fg.tertiary'},'_1poddn5']},range:{end:['gq73n9'],middle:['hoz0au'],start:['_31napz']}}});
+var today = recipeRuntime({base:[{bg:'bg.accent',mx:'auto',rounded:'full'},'_1bgfc2']});
 
 export { button, today };

package/dist/esm/packages/react/src/calendar/CalendarGrid-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/calendar/CalendarGrid.css.ts.vanilla-BV6AysAo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/calendar/CalendarGrid.css.ts.vanilla-OamYzTNu.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var grid = recipeRuntime({base:[{display:'flex',flexDirection:'column',gap:'2'},'zcqa25']});
+var grid = recipeRuntime({base:[{display:'flex',flexDirection:'column',gap:'2'},'_1rlnd8v']});
 
 export { grid };

package/dist/esm/packages/react/src/calendar/CalendarMonths-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-Dq1jBBui.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-ByRzwG0l.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var months = recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_8ebloh']});
+var months = recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1miruix']});
 
 export { months };

package/dist/esm/packages/react/src/calendar/CalendarNextMonthButton-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-VRO4ZNO5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-CGz5Bolm.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'_1uza2sr'});
+var button = recipeRuntime({base:'_3t3ev'});
 
 export { button };

package/dist/esm/packages/react/src/calendar/CalendarPreviousMonthButton-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-CJw6MH28.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-B-vLeIOZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'_1u57r0z'});
+var button = recipeRuntime({base:'_16pmqru'});
 
 export { button };

package/dist/esm/packages/react/src/card/Card-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-XD7etdXG.css';
-import './../../../../assets/src/card/Card.css.ts.vanilla-BLW1jXrl.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-HR4EWXvK.css';
+import './../../../../assets/src/card/Card.css.ts.vanilla-CRkt2b6E.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var card = recipeRuntime({base:['t4lfzb',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',p:'16'},'e2f5ay']});
+var card = recipeRuntime({base:['_5va2my',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',p:'16'},'ixdsyk']});
 
 export { card };

package/dist/esm/packages/react/src/card/CardCheckbox-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/card/CardCheckbox.css.ts.vanilla-YbrWgYEY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/card/CardCheckbox.css.ts.vanilla-UPOjQFNM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:['sbcz0r']});
+var checkbox = recipeRuntime({base:['_1u16cri']});
 
 export { checkbox };

package/dist/esm/packages/react/src/card/CardHeader-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/card/CardHeader.css.ts.vanilla-DV3qDfDs.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/card/CardHeader.css.ts.vanilla-CIBSdQd0.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'_127jirk',before:'c2pvq0'}}});
-var content = recipeRuntime({base:[{flex:'1'},'cy7zo']});
-var header = recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'_1k4f27g']});
+var addon = recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'_1rkce1a',before:'_1csteex'}}});
+var content = recipeRuntime({base:[{flex:'1'},'_11wkuoj']});
+var header = recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'l2fdmk']});
 
 export { addon, content, header };

package/dist/esm/packages/react/src/card/CardImage-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var image = recipeRuntime({base:{objectFit:'cover',rounded:'inherit',size:'full'}});

package/dist/esm/packages/react/src/card/CardPreview-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/card/CardPreview.css.ts.vanilla-Gj-gg9Pl.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/card/CardPreview.css.ts.vanilla-BE4jhe31.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var overlay = recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'_905y8h']});
-var preview = recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'_1s2e0z6']});
+var overlay = recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'_1cy01zw']});
+var preview = recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'_1h63ulo']});
 
 export { overlay, preview };

package/dist/esm/packages/react/src/checkbox/CheckboxControl-css.js

@@ -1,11 +1,11 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-9bay7lfX.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla--AYgbBl7.css';
-import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-BYINmZXN.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BST-3rtg.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CEXBVVf5.css';
+import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-B8-tCu4B.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_1kmln6z'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:[{transition:'all'},'_1p1vp83']});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'pygohl'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'_18d5cpa']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
 
 export { control, icon, indicator };

package/dist/esm/packages/react/src/code/Code-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-B26JEh8l.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-C8xHbk91.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{fontWeight:'600'},'_151ytsx']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'o2duwq']});
 
 export { code };

package/dist/esm/packages/react/src/command/CommandItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/command/CommandItem.css.ts.vanilla-Cg6GMHny.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/command/CommandItem.css.ts.vanilla-CvSkhhp1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var detail = recipeRuntime({base:[{color:'fg.secondary'},'_1z0dceb']});
+var detail = recipeRuntime({base:[{color:'fg.secondary'},'_16yw6io']});
 
 export { detail };

package/dist/esm/packages/react/src/cover/Cover-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-XD7etdXG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-HR4EWXvK.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cover = recipeRuntime({variants:{disabled:{false:['_14fsj4','rvfg11'],true:{}},inset:{false:'_1po832k',true:'wiiike'}}});
+var cover = recipeRuntime({variants:{disabled:{false:['joj5m8','vhtco6'],true:{}},inset:{false:'_9uouzv',true:'_1a196qy'}}});
 
 export { cover };

package/dist/esm/packages/react/src/data-table/DataTableBody-css.js

@@ -1,13 +1,13 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/table/TableRow.css.ts.vanilla-GXJW4FFT.css';
-import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-SZkXcxxo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-C3trKmFI.css';
+import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-BWrynyzB.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'ozuvis'],variants:{pinned:{left:'_111ezdd',right:'d0ofca'},pinnedType:{body:'ys2pun',header:{}}}});
-var cellOffsetVar = 'var(--_1p8etav)';
-var cellSizeVar = 'var(--_12mvbms)';
-var leftTotalSizeVar = 'var(--ed7mlk)';
-var rightTotalSizeVar = 'var(--_1c1s7ht)';
-var totalSizeVar = 'var(--lc2lsz)';
+var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'z1f848'],variants:{pinned:{left:'_175s1bh',right:'ppdqna'},pinnedType:{body:'_1etsz6c',header:{}}}});
+var cellOffsetVar = 'var(--amyah7)';
+var cellSizeVar = 'var(--kh6qe)';
+var leftTotalSizeVar = 'var(--_1pweb3j)';
+var rightTotalSizeVar = 'var(--l20595)';
+var totalSizeVar = 'var(--_1f3xayq)';
 
 export { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, totalSizeVar };

package/dist/esm/packages/react/src/data-table/DataTableBody.js

@@ -4,8 +4,7 @@ import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { flexRender } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { forwardRef, useRef } from 'react';
-import { Skeleton } from '../skeleton/Skeleton.js';
+import { forwardRef, useRef, useMemo } from 'react';
 import { Table } from '../table/Table.js';
 import '../table/TableAction.js';
 import { TableBody } from '../table/TableBody.js';
@@ -26,7 +25,18 @@ const DataTableBody = forwardRef(
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
     const { table } = useDataTableContext("@optiaxiom/react/DataTableBody");
-    const { rows } = table.getRowModel();
+    const { rows: rawRows } = table.getRowModel();
+    const rows = useMemo(() => {
+      let index = 0;
+      return rawRows.reduce((result, row) => {
+        result.push(row);
+        index++;
+        if (loading && typeof loading === "object" && loading[row.id] === "sub-rows") {
+          result.push(fakeRow(table, index++), fakeRow(table, index++));
+        }
+        return result;
+      }, []);
+    }, [loading, rawRows, table]);
     const centerColumns = table.getCenterVisibleLeafColumns();
     const columnVirtualizer = useVirtualizer({
       count: centerColumns.length,
@@ -82,7 +92,7 @@ const DataTableBody = forwardRef(
             {
               display: "grid",
               style: rowVirtualizer.options.enabled ? { height: `${rowVirtualizer.getTotalSize()}px` } : void 0,
-              children: (loading ? Array.from({ length: 10 }, (_, rowIndex) => ({
+              children: (loading === true ? Array.from({ length: 10 }, (_, rowIndex) => ({
                 row: fakeRow(table, rowIndex),
                 virtualRow: void 0
               })) : rowVirtualizer.options.enabled ? rowVirtualizer.getVirtualItems().map((virtualRow) => ({
@@ -116,7 +126,7 @@ const DataTableBody = forwardRef(
                           pinned: "left",
                           pinnedType: "body"
                         }),
-                        children: loading ? /* @__PURE__ */ jsx(Skeleton, { w: fakeCellWidth(cell$1.id) }) : flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                        children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
                       },
                       cell$1.id
                     )),
@@ -133,7 +143,7 @@ const DataTableBody = forwardRef(
                           })
                         },
                         ...cell(),
-                        children: loading ? /* @__PURE__ */ jsx(Skeleton, { w: fakeCellWidth(cell$1.id) }) : flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                        children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
                       },
                       cell$1.id
                     )),
@@ -151,7 +161,7 @@ const DataTableBody = forwardRef(
                           pinned: "right",
                           pinnedType: "body"
                         }),
-                        children: loading ? /* @__PURE__ */ jsx(Skeleton, { w: fakeCellWidth(cell$1.id) }) : flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                        children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
                       },
                       cell$1.id
                     ))
@@ -167,6 +177,5 @@ const DataTableBody = forwardRef(
   }
 );
 DataTableBody.displayName = "@optiaxiom/react/DataTableBody";
-const fakeCellWidth = (id) => id.split("-")[1];
 
 export { DataTableBody };

package/dist/esm/packages/react/src/data-table/DataTableExpandableCell.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from '@radix-ui/react-id';
+import clsx from 'clsx';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { Button } from '../button/Button.js';
+import '../button/ButtonGroup.js';
+import { Flex } from '../flex/Flex.js';
+import { IconAngleDown } from '../icons/IconAngleDown.js';
+import { IconAngleRight } from '../icons/IconAngleRight.js';
+import { useDataTableRowContext } from './DataTableRowContext.js';
+
+function DataTableExpandableCell({
+  children,
+  getValue,
+  row
+}) {
+  const labelPrefixId = useId();
+  const { labelId } = useDataTableRowContext(
+    "@optiaxiom/react/DataTableExpandableCell"
+  );
+  return /* @__PURE__ */ jsxs(Flex, { alignItems: "start", flexDirection: "row", gap: "8", children: [
+    Array.from({ length: row.depth }).map((_, index) => /* @__PURE__ */ jsx(Box, { flex: "none", w: "sm" }, index)),
+    row.getCanExpand() ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        appearance: "subtle",
+        "aria-expanded": row.getIsExpanded(),
+        "aria-label": "Toggle row",
+        "aria-labelledby": clsx(labelPrefixId, labelId),
+        flex: "none",
+        icon: row.getIsExpanded() ? /* @__PURE__ */ jsx(IconAngleDown, {}) : /* @__PURE__ */ jsx(IconAngleRight, {}),
+        id: labelPrefixId,
+        onClick: row.getToggleExpandedHandler(),
+        size: "sm",
+        style: { marginBlock: -2 },
+        type: "button"
+      }
+    ) : /* @__PURE__ */ jsx(Box, { flex: "none", w: "sm" }),
+    children ?? getValue()
+  ] });
+}
+DataTableExpandableCell.displayName = "@optiaxiom/react/DataTableExpandableCell";
+
+export { DataTableExpandableCell };

package/dist/esm/packages/react/src/data-table/DataTableExpandableHeader.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+function DataTableExpandableHeader({
+  children
+}) {
+  return /* @__PURE__ */ jsx(Box, { ml: "32", children });
+}
+DataTableExpandableHeader.displayName = "@optiaxiom/react/DataTableExpandableHeader";
+
+export { DataTableExpandableHeader };

package/dist/esm/packages/react/src/data-table/DataTableFooter-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-Bkdw9ZcR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-CX0FLUPz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:'_106unie',variants:{slot:{after:{textAlign:'end'},before:{}}}});
+var addon = recipeRuntime({base:'obe5n7',variants:{slot:{after:{textAlign:'end'},before:{}}}});
 
 export { addon };

package/dist/esm/packages/react/src/data-table/DataTableHeaderCell-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DXBpxB9S.css';
-import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-lFzJkw9g.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xPgi3Fsc.css';
+import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-B0v4Hs1n.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'huspuh']});
-var handle = recipeRuntime({base:[{h:'full',z:'10'},'_1vfmah6'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_8qmmlz'],variants:{active:{false:'d97k1u',true:'xa1kxh'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1p1kn6j']});
+var handle = recipeRuntime({base:[{h:'full',z:'10'},'_1fzzza1'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1jl576s'],variants:{active:{false:'rmon1x',true:'_1kr8uqb'}}});
 
 export { button, handle, icon };

package/dist/esm/packages/react/src/data-table/DataTableRowContext.js

@@ -1,5 +1,7 @@
 "use client";
 import { createContext } from '@radix-ui/react-context';
+import { createElement } from 'react';
+import { Skeleton } from '../skeleton/Skeleton.js';
 
 const [DataTableRowProvider, useDataTableRowContext] = createContext("@optiaxiom/react/DataTableRow", {
   actions: [],
@@ -12,9 +14,17 @@ const [DataTableRowProvider, useDataTableRowContext] = createContext("@optiaxiom
   setSelector: void 0
 });
 const fakeCellsFactory = (columns, rowIndex) => () => columns.map((column, columnIndex) => ({
-  column,
+  column: {
+    ...column,
+    columnDef: {
+      ...column.columnDef,
+      cell: () => createElement(Skeleton, {
+        w: ["1/2", "full", "3/4"][(rowIndex + columnIndex) % 3]
+      })
+    }
+  },
   getContext: () => ({}),
-  id: column.id + "-" + ["1/2", "full", "3/4"][(rowIndex + columnIndex) % 3]
+  id: column.id
 }));
 const fakeRow = (table, rowIndex) => ({
   getCanMultiSelect: () => false,