@optiaxiom/react 3.0.0-next.1 → 3.0.0-next.3

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

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
-import './../../../../assets/src/table/TableRow.css.ts.vanilla-C5iFEXaM.css';
-import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-BKcFTShV.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-CAlUGkIg.css';
+import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-CeDMVlCe.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'qof1g2'],variants:{pinned:{left:'_6a0zfs',right:'hdi7l7'},pinnedType:{body:'vczq28',header:{}},resizable:{false:{},true:'_1is61ng'}}});
-var cellOffsetVar = 'var(--_15uy4os)';
-var cellSizeVar = 'var(--ddfr1n)';
-var leftTotalSizeVar = 'var(--_15mww2z)';
-var rightTotalSizeVar = 'var(--_3g4ko)';
-var root$1 = recipeRuntime({base:[{display:'flex',flexDirection:'column',maxW:'full',overflow:'hidden',rounded:'lg'},'_1yru0l8']});
-var totalSizeVar = 'var(--_1jiv3ux)';
+var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'_94rbac'],variants:{pinned:{left:'_11ot5ds',right:'_18lj62v'},pinnedType:{body:'_1clt76u',header:{}},resizable:{false:{},true:'_1fb23b6'}}});
+var cellOffsetVar = 'var(--_1ggzn1l)';
+var cellSizeVar = 'var(--_163cfe0)';
+var leftTotalSizeVar = 'var(--_10cdhfq)';
+var rightTotalSizeVar = 'var(--_1wgvmsh)';
+var root$1 = recipeRuntime({base:[{display:'flex',flexDirection:'column',maxW:'full',overflow:'hidden',rounded:'lg'},'l7ppfk']});
+var totalSizeVar = 'var(--_1dtm858)';
 
 export { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, root$1 as root, totalSizeVar };

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

@@ -56,7 +56,15 @@ const DataTableBody = forwardRef(
         delete innerRef.current.dataset.scrollTimeline;
       }
     };
-    useEffect(calculateScrollTimeline, []);
+    useEffect(() => {
+      calculateScrollTimeline();
+      const node = scrollContainerRef.current;
+      if (!node)
+        return;
+      const observer = new ResizeObserver(calculateScrollTimeline);
+      observer.observe(node);
+      return () => observer.disconnect();
+    }, []);
     const centerColumns = table.getCenterVisibleLeafColumns();
     const columnVirtualizer = useVirtualizer({
       count: centerColumns.length,

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { IconKeyboardArrowDown, IconChevronRight } from '@optiaxiom/icons';
+import { IconAngleDown, IconChevronRight } from '@optiaxiom/icons';
 import { useId } from '@radix-ui/react-id';
 import clsx from 'clsx';
 import { Box } from '../box/Box.js';
@@ -30,7 +30,7 @@ function DataTableExpandableCell({
         "aria-label": "Toggle row",
         "aria-labelledby": clsx(labelPrefixId, labelId),
         flex: "none",
-        icon: row.getIsExpanded() ? /* @__PURE__ */ jsx(IconKeyboardArrowDown, {}) : /* @__PURE__ */ jsx(IconChevronRight, {}),
+        icon: row.getIsExpanded() ? /* @__PURE__ */ jsx(IconAngleDown, {}) : /* @__PURE__ */ jsx(IconChevronRight, {}),
         id: labelPrefixId,
         onClick: row.getToggleExpandedHandler(),
         size: "sm",

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
-import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-CikuT9xK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
+import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-AkELS2jP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon$1 = recipeRuntime({base:'_1v71dvk',variants:{slot:{after:{textAlign:'end'},before:{}}}});
+var addon$1 = recipeRuntime({base:'ncc7sv',variants:{slot:{after:{textAlign:'end'},before:{}}}});
 
 export { addon$1 as addon };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
-import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-CxlWE16P.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
+import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-CA1cFrA1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button$3 = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',textTransform:'uppercase',transition:'colors',w:'full'},'b00oml']});
-var handle = recipeRuntime({base:[{h:'full',z:'10'},'_12zskxm'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_3qmizs'],variants:{active:{false:'_2tdwj6',true:'_13md6gi'}}});
+var button$3 = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',textTransform:'uppercase',transition:'colors',w:'full'},'xx60e0']});
+var handle = recipeRuntime({base:[{h:'full',z:'10'},'_1s9bxet'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'g7pbi0'],variants:{active:{false:'_15gudip',true:'_8o90mn'}}});
 
 export { button$3 as button, handle, icon };

package/dist/esm/packages/react/src/date-input/DateInput-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-BIcEVjOY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-BXPTrKIq.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear$1 = recipeRuntime({base:[{size:'sm'},'_5s3jo7']});
-var date = recipeRuntime({base:'_1x7eorp'});
-var input$2 = recipeRuntime({base:'_1yl30m5'});
-var picker = recipeRuntime({base:'_1j55k14'});
+var clear$1 = recipeRuntime({base:[{size:'sm'},'dtxwd8']});
+var date = recipeRuntime({base:'_1rho917'});
+var input$2 = recipeRuntime({base:'_1wwtp2l'});
+var picker = recipeRuntime({base:'_1mhosd'});
 
 export { clear$1 as clear, date, input$2 as input, picker };

package/dist/esm/packages/react/src/date-input/DateInput.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { IconCalendarToday, IconClose } from '@optiaxiom/icons';
+import { IconCalendar, IconXmark } from '@optiaxiom/icons';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { useId } from '@radix-ui/react-id';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
@@ -70,7 +70,7 @@ const DateInput = forwardRef(
             {
               appearance: "subtle",
               "aria-label": "Clear",
-              icon: /* @__PURE__ */ jsx(IconClose, {}),
+              icon: /* @__PURE__ */ jsx(IconXmark, {}),
               onPointerDown: (event) => {
                 event.preventDefault();
                 forceValueChange("");
@@ -92,7 +92,7 @@ const DateInput = forwardRef(
               ref: pickerRef,
               role: "img",
               ...picker(),
-              children: /* @__PURE__ */ jsx(IconCalendarToday, {})
+              children: /* @__PURE__ */ jsx(IconCalendar, {})
             }
           ),
           asChild: true,

package/dist/esm/packages/react/src/date-range-picker/DateRangePickerContent-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var panels = recipeRuntime({base:[{alignItems:'stretch',gap:'0'}]});

package/dist/esm/packages/react/src/date-range-picker/DateRangePickerTrigger.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { IconCalendarToday } from '@optiaxiom/icons';
+import { IconCalendar } from '@optiaxiom/icons';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { useId } from '@radix-ui/react-id';
 import { forwardRef } from 'react';
@@ -41,7 +41,7 @@ const DateRangePickerTrigger = forwardRef(
       {
         "aria-labelledby": labelId,
         disabled,
-        icon: /* @__PURE__ */ jsx(IconCalendarToday, {}),
+        icon: /* @__PURE__ */ jsx(IconCalendar, {}),
         id,
         ref,
         ...props,

package/dist/esm/packages/react/src/details-panel/DetailsPanel-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
-import './../../../../assets/src/details-panel/DetailsPanel.css.ts.vanilla-Bc1UD4vC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
+import './../../../../assets/src/details-panel/DetailsPanel.css.ts.vanilla-DCIU9tse.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root$3 = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderL:'1',color:'fg.default',display:'flex',flexDirection:'column',h:'full',overflow:'auto'},'xvgk6y']});
+var root$3 = recipeRuntime({base:[{bg:'bg.default',color:'fg.default',display:'flex',flexDirection:'column',h:'full',overflow:'auto'},'_1o0egou']});
 
 export { root$3 as root };

package/dist/esm/packages/react/src/details-panel/DetailsPanelFooter-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
-import './../../../../assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-DHL6MIbt.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
+import './../../../../assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-q5IAEiR-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{bg:'bg.default',gap:'8',p:'16',pt:'8'},'_6gvhp8']});
+var footer = recipeRuntime({base:[{bg:'bg.default',gap:'8',p:'16',pt:'8'},'_1fej6nl']});
 
 export { footer };

package/dist/esm/packages/react/src/details-panel/DetailsPanelHeader-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
-import './../../../../assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-Bcx7OZtC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
+import './../../../../assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-BeTuvWJX.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',p:'16',pb:'8'},'_1qzicz2']});
+var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',p:'16',pb:'8'},'lyg149']});
 
 export { header };

package/dist/esm/packages/react/src/dialog/DialogBody-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-BYV2kEqW.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-Dkf05E3Y.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var body$1 = recipeRuntime({base:[{flex:'1',flexDirection:'column',fontSize:'md',gap:'16',px:'24',py:'16',z:'0'},'_16oxp7x']});
+var body$1 = recipeRuntime({base:[{flex:'1',flexDirection:'column',fontSize:'md',gap:'16',px:'24',py:'16',z:'0'},'_1kbtmm8']});
 
 export { body$1 as body };

package/dist/esm/packages/react/src/dialog/DialogContent-css.js

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-BYV2kEqW.css';
-import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-DvdjPddK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-Dkf05E3Y.css';
+import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-CMsV9p8U.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop$1 = recipeRuntime({variants:{hidden:{false:{},true:'_1obwspr'}}});
-var content$5 = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'f9gjhq'],variants:{size:{sm:'_9bf11c',md:'dkq33r',lg:'_1gduafi',fullscreen:'_1jgwbda'}}});
-var nestedDialogCountVar$1 = 'var(--y1qvkr)';
-var scrollPaddingBottomVar = 'var(--_1bil9at)';
-var scrollPaddingTopVar = 'var(--sry9cy)';
+var backdrop$1 = recipeRuntime({variants:{hidden:{false:{},true:'_19i2xs9'}}});
+var content$5 = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'_1syyhx5'],variants:{size:{sm:'t9m7wg',md:'iw1lmk',lg:'_19zb4ef',fullscreen:'_1uwe577'}}});
+var nestedDialogCountVar$1 = 'var(--pok36h)';
+var scrollPaddingBottomVar = 'var(--_1qwk973)';
+var scrollPaddingTopVar = 'var(--wulzlk)';
 
 export { backdrop$1 as backdrop, content$5 as content, nestedDialogCountVar$1 as nestedDialogCountVar, scrollPaddingBottomVar, scrollPaddingTopVar };

package/dist/esm/packages/react/src/dialog/DialogFooter-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
-import './../../../../assets/src/dialog/DialogFooter.css.ts.vanilla-BAo-7RYJ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
+import './../../../../assets/src/dialog/DialogFooter.css.ts.vanilla-BsUB5Ovz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer$1 = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderT:'1',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'ppdq9b']});
+var footer$1 = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderT:'1',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'_16e4d9w']});
 
 export { footer$1 as footer };

package/dist/esm/packages/react/src/dialog/DialogHeader-css.js

@@ -1,11 +1,11 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
-import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-BAOpmXw8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
+import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-CpIQYiQq.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{gap:'8'},'_16kpc4j']});
-var close = recipeRuntime({base:['_13f1gtz']});
-var description$1 = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'qalj2r']});
-var header$2 = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',gap:'8',p:'24',pb:'16',z:'10'},'_1dhj2cj']});
-var title$1 = recipeRuntime({base:[{flex:'1',fontWeight:'600'},'_69ueg8']});
+var actions = recipeRuntime({base:[{gap:'8'},'_1iwr7t5']});
+var close = recipeRuntime({base:['e0lr4m']});
+var description$1 = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'_1uxjra5']});
+var header$2 = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',gap:'8',p:'24',pb:'16',z:'10'},'v9j4a2']});
+var title$1 = recipeRuntime({base:[{flex:'1',fontWeight:'600'},'_1u67cm1']});
 
 export { actions, close, description$1 as description, header$2 as header, title$1 as title };

package/dist/esm/packages/react/src/dialog/DialogHeader.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { IconClose } from '@optiaxiom/icons';
+import { IconXmark } from '@optiaxiom/icons';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
@@ -33,7 +33,7 @@ const DialogHeader = forwardRef(
         {
           appearance: "subtle",
           "aria-label": "Close",
-          icon: /* @__PURE__ */ jsx(IconClose, {}),
+          icon: /* @__PURE__ */ jsx(IconXmark, {}),
           ...close()
         }
       ),

package/dist/esm/packages/react/src/disclosure/DisclosureContent-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
-import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-CsfWUoqc.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
+import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-BaOzHAix.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['u0lp0r']});
-var outer = recipeRuntime({base:[{display:'grid'},'_9tw82j'],variants:{scale:{false:'_1tlsjo9',true:{}}}});
+var inner = recipeRuntime({base:['_1nu204t']});
+var outer = recipeRuntime({base:[{display:'grid'},'uhvoop'],variants:{scale:{false:'_1e7tcd2',true:{}}}});
 
 export { inner, outer };

package/dist/esm/packages/react/src/disclosure/DisclosureTrigger-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
-import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-CGgfKUN6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
+import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-DI9J6JON.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{flex:'none',size:'sm',transition:'transform'},'_1vu9urm']});
-var root = recipeRuntime({base:[{fontSize:'md',gap:'8',py:'8',transition:'colors'},'ugfbfu']});
-var trigger$1 = recipeRuntime({base:[{fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_1i3r0fn']});
+var icon = recipeRuntime({base:[{flex:'none',size:'sm',transition:'transform'},'_1j1vqvi']});
+var root = recipeRuntime({base:[{fontSize:'md',gap:'8',py:'8',transition:'colors'},'p8oo1g']});
+var trigger$1 = recipeRuntime({base:[{fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_1l3sgbi']});
 
 export { icon, root, trigger$1 as trigger };

package/dist/esm/packages/react/src/ellipsis-menu-button/EllipsisMenuButton.js

@@ -1,12 +1,21 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { IconMoreHoriz } from '@optiaxiom/icons';
+import { IconEllipsisStroke } from '@optiaxiom/icons';
 import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
 
 const EllipsisMenuButton = forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(IconMoreHoriz, {}), iconPosition: "end", ref, ...props, children });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      icon: /* @__PURE__ */ jsx(IconEllipsisStroke, {}),
+      iconPosition: "end",
+      ref,
+      ...props,
+      children
+    }
+  );
 });
 EllipsisMenuButton.displayName = "@optiaxiom/react/EllipsisMenuButton";
 

package/dist/esm/packages/react/src/field/Field.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { IconWarning } from '@optiaxiom/icons';
+import { IconTriangleExclamation } from '@optiaxiom/icons';
 import { useId } from '@radix-ui/react-id';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
@@ -63,7 +63,7 @@ const Field = forwardRef(
           id: errorId,
           role: "alert",
           children: [
-            /* @__PURE__ */ jsx(Box, { asChild: true, flex: "none", size: "16", children: /* @__PURE__ */ jsx(IconWarning, { "aria-label": "Error" }) }),
+            /* @__PURE__ */ jsx(Box, { asChild: true, flex: "none", size: "16", children: /* @__PURE__ */ jsx(IconTriangleExclamation, { "aria-label": "Error" }) }),
             error
           ]
         }

package/dist/esm/packages/react/src/field/FieldLabel.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { IconHelp } from '@optiaxiom/icons';
+import { IconCircleQuestion } from '@optiaxiom/icons';
 import { useId } from '@radix-ui/react-id';
 import * as RadixLabel from '@radix-ui/react-label';
 import { forwardRef } from 'react';
@@ -66,7 +66,7 @@ const FieldLabel = forwardRef(
           border: "0",
           color: "fg.secondary",
           h: "2xs",
-          icon: /* @__PURE__ */ jsx(Box, { asChild: true, flex: "initial", children: /* @__PURE__ */ jsx(IconHelp, {}) }),
+          icon: /* @__PURE__ */ jsx(Box, { asChild: true, flex: "initial", children: /* @__PURE__ */ jsx(IconCircleQuestion, {}) }),
           onClick: (event) => {
             event.currentTarget.focus();
             event.preventDefault();

package/dist/esm/packages/react/src/file-upload/FileUpload-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
-import './../../../../assets/src/file-upload/FileUpload.css.ts.vanilla-C1l4iE9E.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
+import './../../../../assets/src/file-upload/FileUpload.css.ts.vanilla-FF9KMBtP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var upload = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1s5iw5z']});
+var upload = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_10c28v1']});
 
 export { upload };

package/dist/esm/packages/react/src/file-upload/FileUploadDropzone-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
-import './../../../../assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-C2NTIUqZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
+import './../../../../assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-7yqOEnoD.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var dropzone = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',flexDirection:'column',gap:'16',justifyContent:'center',p:'32',rounded:'md',textAlign:'center',transition:'colors'},'_1hl99wt'],variants:{drag:{false:{},true:['_17ncs7s']},hidden:{false:'esvqqb',true:'_1t8pu47'},overlay:{false:{flex:'1'},true:[{z:'10'},'wz6bvi']}}});
-var label = recipeRuntime({base:[{alignItems:'center',flexDirection:'column',gap:'8'}],variants:{disabled:{false:{},true:'_1h2a8hn'}}});
+var dropzone = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',flexDirection:'column',gap:'16',justifyContent:'center',p:'32',rounded:'md',textAlign:'center',transition:'colors'},'cizvbx'],variants:{drag:{false:{},true:['qa3b6a']},hidden:{false:'_1rcq4yc',true:'ss1w8l'},overlay:{false:{flex:'1'},true:[{z:'10'},'_1giaoei']}}});
+var label = recipeRuntime({base:[{alignItems:'center',flexDirection:'column',gap:'8'}],variants:{disabled:{false:{},true:'_3fcvgh'}}});
 
 export { dropzone, label };

package/dist/esm/packages/react/src/file-upload/FileUploadList.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { FileUploadListItem } from './FileUploadListItem.js';
+
+const FileUploadList = forwardRef(
+  ({ items, onRemove, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Flex, { gap: "12", ref, ...props, children: items.map((item, idx) => /* @__PURE__ */ jsx(
+      FileUploadListItem,
+      {
+        item,
+        onRemove: onRemove ? () => onRemove(idx) : void 0
+      },
+      idx
+    )) });
+  }
+);
+FileUploadList.displayName = "@optiaxiom/react/FileUploadList";
+
+export { FileUploadList };

package/dist/esm/packages/react/src/file-upload/FileUploadListItem-css.js

@@ -0,0 +1,8 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
+import './../../../../assets/src/file-upload/FileUploadListItem.css.ts.vanilla-BoY7mk02.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var item$1 = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',fontSize:'md',gap:'6',p:'6',rounded:'md',transition:'colors'},'_11drzbb']});
+var name = recipeRuntime({base:[{rounded:'md',textAlign:'start'},'_1n662wl']});
+
+export { item$1 as item, name };

package/dist/esm/packages/react/src/file-upload/FileUploadListItem.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { IconCircleExclamation, IconFile, IconTrashCan } from '@optiaxiom/icons';
+import { forwardRef } from 'react';
+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 { Cover } from '../cover/Cover.js';
+import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
+import { Icon } from '../icon/Icon.js';
+import { Spinner } from '../spinner/Spinner.js';
+import { Text } from '../text/Text.js';
+import { name, item } from './FileUploadListItem-css.js';
+
+function downloadFile(file) {
+  const url = URL.createObjectURL(file);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = file.name;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+function formatFileSize(bytes) {
+  if (bytes < 1024)
+    return `${bytes} B`;
+  if (bytes < 1024 * 1024)
+    return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+const mimeTypeLabels = [
+  [/^application\/pdf$/, "PDF"],
+  [/^image\//, "Image"],
+  [/^video\//, "Video"],
+  [/^audio\//, "Audio"],
+  [/csv/, "CSV"],
+  [/spreadsheet|excel/, "Excel"],
+  [/presentation|powerpoint/, "PowerPoint"],
+  [/document|msword|wordprocessing/, "Word"],
+  [/zip|compressed|archive/, "Archive"],
+  [/^text\//, "Text"]
+];
+function formatFileType(file) {
+  if (file.type) {
+    for (const [pattern, label] of mimeTypeLabels) {
+      if (pattern.test(file.type)) {
+        return label;
+      }
+    }
+  }
+  return "File";
+}
+const FileUploadListItem = forwardRef(({ className, item: item$1, onRemove, ...props }, ref) => {
+  const { file, status } = item$1;
+  return /* @__PURE__ */ jsxs(Flex, { ref, ...item({}, className), ...props, children: [
+    status === "uploading" ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : status === "error" ? /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.error", h: "auto", w: "24", children: /* @__PURE__ */ jsx(IconCircleExclamation, { filled: true }) }) : file.type.startsWith("image/") ? /* @__PURE__ */ jsx(Box, { overflow: "hidden", rounded: "sm", size: "24", children: /* @__PURE__ */ jsx(Box, { asChild: true, h: "full", objectFit: "cover", w: "full", children: /* @__PURE__ */ jsx("img", { alt: file.name, src: URL.createObjectURL(file) }) }) }) : /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.tertiary", h: "auto", w: "24", children: /* @__PURE__ */ jsx(IconFile, { filled: true }) }),
+    /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "2", overflow: "hidden", children: [
+      /* @__PURE__ */ jsx(Cover, { asChild: true, children: /* @__PURE__ */ jsx(Text, { asChild: true, lineClamp: "2", ...name(), children: /* @__PURE__ */ jsx("button", { onClick: () => downloadFile(file), type: "button", children: file.name }) }) }),
+      /* @__PURE__ */ jsxs(Group, { fontSize: "sm", gap: "4", children: [
+        /* @__PURE__ */ jsxs(Text, { color: "fg.tertiary", children: [
+          formatFileType(file),
+          " \u2022 ",
+          formatFileSize(file.size)
+        ] }),
+        status === "error" && /* @__PURE__ */ jsx(Text, { color: "fg.error", children: "Upload failed" })
+      ] })
+    ] }),
+    onRemove && /* @__PURE__ */ jsx(
+      Button,
+      {
+        appearance: "subtle",
+        "aria-label": "Remove file",
+        disabled: status === "uploading",
+        icon: /* @__PURE__ */ jsx(IconTrashCan, {}),
+        onClick: onRemove
+      }
+    )
+  ] });
+});
+FileUploadListItem.displayName = "@optiaxiom/react/FileUploadListItem";
+
+export { FileUploadListItem };

package/dist/esm/packages/react/src/file-upload/FileUploadTrigger.js

@@ -29,6 +29,7 @@ const FileUploadTrigger = forwardRef(({ asChild, children, onClick, ...props },
         open();
       },
       ref,
+      ...asChild ? {} : { type: "button" },
       ...restProps,
       children: children || "Select files"
     }

package/dist/esm/packages/react/src/file-upload/useFileUploadDrop.js

@@ -1,3 +1,4 @@
+import { toaster } from '@optiaxiom/globals';
 import '../auth-provider/AuthProvider.js';
 import { useAuthContext } from '../auth-provider/useAuthContext.js';
 import { useFileUploadContext } from './FileUploadContext.js';
@@ -31,7 +32,13 @@ const useFileUploadDrop = ({
           Array.from(event.dataTransfer.items).map(async (item) => {
             if (item.kind === "file") {
               const file = item.getAsFile();
-              return file && isValidFile(file, accept) ? file : null;
+              const valid = file && isValidFile(file, accept);
+              if (!valid) {
+                toaster.create(invalidFileTypeMessage(file), {
+                  intent: "danger"
+                });
+              }
+              return valid ? file : null;
             } else if (item.type === "opal-chat-dnd-data" || item.type === "opal-host-dnd-data") {
               if (!auth) {
                 throw new Error(
@@ -53,9 +60,15 @@ const useFileUploadDrop = ({
             }
             return null;
           })
-        )).filter((file) => !!file) : Array.from(event.dataTransfer.files).filter(
-          (file) => isValidFile(file, accept)
-        )
+        )).filter((file) => !!file) : Array.from(event.dataTransfer.files).filter((file) => {
+          const valid = isValidFile(file, accept);
+          if (!valid) {
+            toaster.create(invalidFileTypeMessage(file), {
+              intent: "danger"
+            });
+          }
+          return valid;
+        })
       );
     }
   };
@@ -89,6 +102,11 @@ async function getRemoteFile(resource, auth, retry = false) {
     });
   }
 }
+function invalidFileTypeMessage(file) {
+  const ext = file?.name.includes(".") ? `.${file.name.split(".").pop()}` : void 0;
+  const label = ext || file?.type || "Unknown";
+  return `${label} is not an accepted file type`;
+}
 function isValidFile(file, accept) {
   if (!file) {
     return false;

package/dist/esm/packages/react/src/group/Group.js

@@ -5,7 +5,7 @@ import { Box } from '../box/Box.js';
 import { mapResponsiveValue } from '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 
-const mapDirectionToAlign = {
+const mapDirectionToAlign$1 = {
   column: "stretch",
   "column-reverse": "stretch",
   row: "center",
@@ -18,7 +18,7 @@ const Group = forwardRef(
       {
         alignItems: alignItems ?? mapResponsiveValue(
           flexDirection,
-          (value) => mapDirectionToAlign[value]
+          (value) => mapDirectionToAlign$1[value]
         ),
         display,
         flexDirection,

package/dist/esm/packages/react/src/highlight/Highlight-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-BmxhUMbc.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ikx1l7Z8.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-CbRvOwcj.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark$1 = recipeRuntime({base:'_1wajih9'});
+var mark$1 = recipeRuntime({base:'st10lu'});
 
 export { mark$1 as mark };